Get modal base logic all worked out

Author: DaneEveritt

package.json

@@ -7,7 +7,7 @@
         "jquery": "^3.3.1",
         "lodash": "^4.17.11",
         "socket.io-client": "^2.1.1",
-        "vee-validate": "^2.1.0-beta.2",
+        "vee-validate": "^2.1.7",
         "vue": "^2.6.4",
         "vue-axios": "^2.1.1",
         "vue-i18n": "^8.6.0",

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>

resources/assets/scripts/helpers/ziggy.js

@@ -113,7 +113,7 @@ const cssLoaders = [
 module.exports = {
     target: 'web',
     mode: process.env.NODE_ENV,
-    devtool: isProduction ? false : 'inline-source-map',
+    devtool: isProduction ? false : 'eval-source-map',
     performance: {
         hints: false,
     },

webpack.config.js

@@ -7062,9 +7062,9 @@ vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
 
-vee-validate@^2.1.0-beta.2:
-  version "2.1.0-beta.2"
-  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-2.1.0-beta.2.tgz#b4a15f7aa0c4b1a9c78132d649b72a4dd4e2fa61"
+vee-validate@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-2.1.7.tgz#33984454d8a633cdc4825a2cf5857747d91bae67"
 
 vendors@^1.0.0:
   version "1.0.2"