Get modal base logic all worked out

resources/assets/scripts/components/core/Modal.vue

@@ -2,7 +2,7 @@
     <transition name="modal">
         <div class="modal-mask" v-show="show" v-on:click="close">
             <div class="modal-container" @click.stop>
-                <div v-on:click="close" v-if="dismissable">
+                <div v-on:click="close" v-if="dismissable && showCloseIcon">
                     <Icon name="x"
                           class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
                           aria-label="Close modal"
@@ -24,6 +24,7 @@
         components: {Icon},
 
         props: {
+            showCloseIcon: {type: Boolean, default: true},
             modalName: {type: String, default: 'modal'},
             show: {type: Boolean, default: false},
             closeOnEsc: {type: Boolean, default: true},

resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue

@@ -1,8 +1,29 @@
 <template>
-    <Modal :show="visible" v-on:close="visible = false">
-        <div>
-            <h2 class="font-medium text-neutral-900 mb-6">{{ fm.currentDirectory }}</h2>
+    <Modal :show="visible" v-on:close="onModalClose" :showCloseIcon="false">
+        <div class="flex items-end">
+            <div class="flex-1">
+                <label class="input-label">
+                    Folder Name
+                </label>
+                <input
+                        type="text" class="input" name="folder_name"
+                        ref="folderNameField"
+                        v-model="folderName"
+                        v-validate.disabled="'required'"
+                        v-validate="'alpha_dash'"
+                        data-vv-as="Folder Name"
+                        v-on:keyup.enter="submit"
+                />
+            </div>
+            <div class="ml-4">
+                <button class="btn btn-primary btn-sm" type="submit" v-on:submit.prevent="submit">
+                    Create
+                </button>
+            </div>
         </div>
+        <p class="input-help error">
+            {{ errors.first('folder_name') }}
+        </p>
     </Modal>
 </template>
 
@@ -22,13 +43,39 @@
         data: function () {
             return {
                 visible: false,
+                folderName: '',
             };
         },
 
         mounted: function () {
+            /**
+             * When we mark the modal as visible, focus the user into the input field on the next
+             * tick operation so that they can begin typing right away.
+             */
             window.events.$on('server:files:open-directory-modal', () => {
                 this.visible = true;
+                this.$nextTick(() => {
+                    (this.$refs.folderNameField as HTMLInputElement).focus();
+                });
             });
         },
+
+        methods: {
+            submit: function () {
+                this.$validator.validate().then((result) => {
+                    if (!result) {
+                        return;
+                    }
+
+                    this.onModalClose();
+                });
+            },
+
+            onModalClose: function () {
+                this.visible = false;
+                this.folderName = '';
+                this.$validator.reset();
+            },
+        }
     });
 </script>