@signal24/vue-foundation 3.3.3 → 3.7.0

package/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+    root: true,
+    env: {
+        node: true
+    },
+    extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
+    rules: {
+        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'simple-import-sort/imports': 'error',
+        'simple-import-sort/exports': 'error',
+        'prettier/prettier': 'warn',
+        'no-unused-vars': 'warn'
+    },
+    plugins: ['simple-import-sort']
+};

package/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "arrowParens": "avoid",
+    "printWidth": 120,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "none"
+}

package/CHANGES.md

@@ -1,10 +1,13 @@
 # Release notes
+
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## 1.0.1
-- Update dependencies
-- Fix $confirmDestroy
+
+-   Update dependencies
+-   Fix $confirmDestroy
 
 ## 1.0.0
-- Initial public release
+
+-   Initial public release

package/package.json

@@ -1,15 +1,28 @@
 {
-  "name": "@signal24/vue-foundation",
-  "version": "3.3.3",
-  "description": "Common components, directives, and helpers for Vue 3 apps",
-  "main": "src/index.js",
-  "license": "MIT",
-  "dependencies": {
-    "axios": "^0.21.1",
-    "jquery": "^3.6.0",
-    "lodash": "^4.17.21",
-    "moment": "^2.29.1",
-    "vue": "^3.1.2",
-    "vue-stash-nested": "fergusean/vue-stash-nested#vue-foundation-3"
-  }
+    "name": "@signal24/vue-foundation",
+    "version": "3.7.0",
+    "description": "Common components, directives, and helpers for Vue 3 apps",
+    "main": "src/index.js",
+    "scripts": {
+        "format": "prettier --write . && eslint src --fix"
+    },
+    "license": "MIT",
+    "dependencies": {
+        "axios": "^0.26.0",
+        "jquery": "^3.6.0",
+        "lodash": "^4.17.21",
+        "moment": "^2.29.1",
+        "vue-stash-nested": "fergusean/vue-stash-nested#vue-foundation-3"
+    },
+    "devDependencies": {
+        "@vue/eslint-config-prettier": "^7.0.0",
+        "eslint": "^8.10.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-simple-import-sort": "^7.0.0",
+        "eslint-plugin-vue": "^8.5.0",
+        "prettier": "^2.5.1",
+        "sass": "^1.49.9",
+        "sass-loader": "^12",
+        "vue": "^3.2.31"
+    }
 }

package/postcss.config.js

@@ -2,4 +2,4 @@ module.exports = {
     plugins: {
         autoprefixer: {}
     }
-}
+};

package/src/app.js

@@ -1,4 +1,4 @@
-import { createApp, h } from 'vue'
+import { createApp, h } from 'vue';
 
 let rootComponent;
 function setRootComponent(inComponent) {
@@ -17,7 +17,7 @@ const app = createApp({
     },
 
     render() {
-        return h(rootComponent)
+        return h(rootComponent);
     }
 });
 

package/src/components/ajax-select.vue

@@ -1,8 +1,12 @@
 <template>
-    <select v-if="!options" disabled><option>{{ loadingText || 'Loading...' }}</option></select>
+    <select v-if="!options" disabled>
+        <option>{{ loadingText || 'Loading...' }}</option>
+    </select>
     <select v-else v-model="selectedItem">
         <option v-if="nullText" :value="null">{{ nullText }}</option>
-        <option v-for="option in options" :key="option.id" :value="option">{{ textKey ? option[textKey] : option }}</option>
+        <option v-for="option in options" :key="option.id" :value="option">
+            {{ textKey ? option[textKey] : option }}
+        </option>
     </select>
 </template>
 
@@ -14,7 +18,7 @@ export default {
         return {
             options: null,
             selectedItem: null
-        }
+        };
     },
 
     watch: {
@@ -38,7 +42,7 @@ export default {
     methods: {
         async load() {
             this.options = null;
-            let params = this.params ? { params: this.params } : undefined
+            let params = this.params ? { params: this.params } : undefined;
             let result = await this.$http.get(this.url, params);
             let options = this.itemsKey ? result.data[this.itemsKey] : result.data;
             this.preprocessor && this.preprocessor(options);
@@ -46,5 +50,5 @@ export default {
             this.selectedItem = this.modelValue;
         }
     }
-}
-</script>
+};
+</script>

package/src/components/alert.vue

@@ -1,5 +1,5 @@
 <template>
-    <modal class="vf-alert" :class="classes">
+    <Modal class="vf-alert" :class="classes">
         <template v-if="!this.isBare" v-slot:header>
             <h1>{{ title }}</h1>
         </template>
@@ -14,13 +14,18 @@
             </template>
             <button v-else class="default" @click="ok" v-autofocus>OK</button>
         </template>
-    </modal>
+    </Modal>
 </template>
 
 <script>
 import app from '../app';
+import Modal from './modal';
 
 const classDef = {
+    components: {
+        Modal
+    },
+
     data() {
         return {
             isBare: false,
@@ -29,17 +34,15 @@ const classDef = {
             title: null,
             message: null,
             shouldConfirm: false
-        }
+        };
     },
 
     created() {
-        if (typeof(this.message) == 'object') {
+        if (typeof this.message == 'object') {
             if (this.message.html) {
                 this.isHtml = true;
                 this.message = this.message.html;
-            }
-
-            else if (this.message instanceof Error) {
+            } else if (this.message instanceof Error) {
                 let err = this.message;
                 err.handle();
 
@@ -60,51 +63,46 @@ export default classDef;
 async function launchModal(context, classDef, ...args) {
     classDef = { ...classDef, __modalId: Math.random().toString(36).substring(2, 10) };
     return await context.$modal.apply(context, [classDef, ...args]);
-};
+}
 
-app.config.globalProperties.$alert = async function(title, message) {
+app.config.globalProperties.$alert = async function (title, message) {
     return await launchModal(this, classDef, { title, message });
-}
+};
 
-app.config.globalProperties.$confirm = async function(title, message, options) {
+app.config.globalProperties.$confirm = async function (title, message, options) {
     options = options || {};
     const result = await launchModal(this, classDef, { title, message, shouldConfirm: true, ...options });
     return !!result;
-}
+};
 
-app.config.globalProperties.$confirmDestroy = function(title, message, options) {
+app.config.globalProperties.$confirmDestroy = function (title, message, options) {
     options = options || {};
     options.classes = options.classes || [];
     options.classes.push('destructive');
     return this.$confirm(title, message, options);
-}
+};
 
-app.config.globalProperties.$wait = function(title, message) {
+app.config.globalProperties.$wait = function (title, message) {
     if (title && !message) {
         message = title;
         title = undefined;
-    }
-    else if (!title && !message) {
+    } else if (!title && !message) {
         message = 'Please wait...';
     }
 
     let resolved = null;
     let promise = new Promise((resolve, reject) => {
         launchModal(this, classDef, { title, message, isBare: true, classes: ['wait'] }, resolve);
-    })
-    .then(inResolved => resolved = inResolved);
+    }).then(inResolved => (resolved = inResolved));
 
     this.$endWait = async () => {
         delete this.$endWait;
-        if (resolved)
-            await resolved.$dismiss();
-        else
-            await promise.then(() => resolved.$dismiss());
-    }
+        if (resolved) await resolved.$dismiss();
+        else await promise.then(() => resolved.$dismiss());
+    };
 
     return this.$endWait;
-}
-
+};
 </script>
 
 <style lang="scss">
@@ -129,4 +127,4 @@ app.config.globalProperties.$wait = function(title, message) {
         }
     }
 }
-</style>
+</style>

package/src/components/index.js

@@ -1,17 +1,12 @@
 import app from '../app';
-
-import AjaxSelect from './ajax-select'
+import AjaxSelect from './ajax-select';
 app.component('AjaxSelect', AjaxSelect);
 
-// do not register Alert with Vue or our customizations to
-// on-the-fly alerts won't take effect, as Vue will use
-// the already-cached 'Alert' component instead of recompiling
-// TODO: ^ is this for mutating Alert during dev, or...?
-import Alert from './alert'
-Alert;
+import Alert from './alert';
+app.component('Alert', Alert);
 
-import Modal from './modal'
+import Modal from './modal';
 app.component('Modal', Modal);
 
-import SmartSelect from './smart-select'
-app.component('SmartSelect', SmartSelect);
+import SmartSelect from './smart-select';
+app.component('SmartSelect', SmartSelect);

package/src/components/modal.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="vf-overlay vf-modal-wrap">
-        <form action="." class="vf-modal" :class="{ scrolls: $isPropTruthy(this.scrolls) }" @submit.prevent="$emit('formSubmit')">
+        <form
+            action="."
+            class="vf-modal"
+            :class="{ scrolls: $isPropTruthy(this.scrolls) }"
+            @submit.prevent="$emit('formSubmit')"
+        >
             <div v-if="$slots.header" class="vf-modal-header">
                 <slot name="header" />
                 <i v-if="$isPropTruthy(this.closeX)" class="close" @click="$parent.$dismiss()"></i>
@@ -26,8 +31,7 @@ export default {
 
         if (this.$isPropTruthy(this.closeOnMaskClick)) {
             this.$el.addEventListener('click', e => {
-                if (e.target == this.$el)
-                    this.$parent.$dismiss();
+                if (e.target == this.$el) this.$parent.$dismiss();
             });
         }
     },
@@ -49,7 +53,7 @@ export default {
             }
         }
     }
-}
+};
 
 import app from '../app';
 import { markRaw } from 'vue';
@@ -66,14 +70,18 @@ function bootModal(modalId) {
     this.$options.storeParent = this.$modalOpener;
 
     let originalDataFn = this.$options.data;
-    this.$options.data = function() {
+    this.$options.data = function () {
         const injectedData = config.injectedData || {};
         const keepOriginalKeys = this.$options.keepOriginal || [];
         let data = originalDataFn ? originalDataFn.apply(this) : {};
 
         for (let key in injectedData) {
             if (!keepOriginalKeys.includes(key)) {
-                if (injectedData[key] !== null && typeof(injectedData[key]) == 'object' && injectedData[key].constructor === Object) {
+                if (
+                    injectedData[key] !== null &&
+                    typeof injectedData[key] == 'object' &&
+                    injectedData[key].constructor === Object
+                ) {
                     data[key] = cloneDeep(injectedData[key]);
                 } else {
                     data[key] = injectedData[key];
@@ -116,7 +124,7 @@ app.mixin({
     }
 });
 
-app.config.globalProperties.$modal = function(classDef, injectedData, instanceCreationCallback) {
+app.config.globalProperties.$modal = function (classDef, injectedData, instanceCreationCallback) {
     return new Promise((resolve, reject) => {
         const modalId = classDef.__modalId || classDef.__file || Math.random().toString(36).substring(2, 10);
         classDef.__modalId = modalId;
@@ -132,7 +140,7 @@ app.config.globalProperties.$modal = function(classDef, injectedData, instanceCr
             app.vm.store.rootInjections.push(markRaw(classDef));
         });
     });
-}
+};
 
 // TODO: see about a injecting a root modal container & HMR inside it
 // modals, on render, can hot move themselves to body end
@@ -163,7 +171,7 @@ app.config.globalProperties.$modal = function(classDef, injectedData, instanceCr
 
 .vf-modal {
     background: white;
-    box-shadow: 0px 3px 6px 0px rgba(0,0,0,.15);
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
     min-width: 200px;
     max-width: 95%;
     max-height: 95%;
@@ -187,4 +195,4 @@ app.config.globalProperties.$modal = function(classDef, injectedData, instanceCr
     flex-shrink: 1;
     flex-basis: 0%;
 }
-</style>
+</style>

package/src/components/smart-select.vue

@@ -41,14 +41,16 @@ import debounce from 'lodash/debounce';
 const nullSymbol = Symbol(null);
 const createSymbol = Symbol('create');
 
-const VALID_KEYS = `\`1234567890-=[]\;',./~!@#$%^&*()_+{}|:"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM`;
+const VALID_KEYS = `\`1234567890-=[]\\;',./~!@#$%^&*()_+{}|:"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM`;
 
 export default {
-    emits: ['optionsLoaded', 'createItem'],
+    emits: ['optionsLoaded', 'createItem', 'update:modelValue'],
 
     props: [
         'modelValue',
         'options',
+        'prependOptions',
+        'appendOptions',
         'preload',
         'url',
         'urlParams',
@@ -71,8 +73,7 @@ export default {
     data() {
         return {
             isLoaded: false,
-            resolvedOptions: [],
-            decoratedOptions: [],
+            loadedOptions: [],
             isSearching: false,
             searchText: '',
             selectedOption: null,
@@ -84,8 +85,11 @@ export default {
     },
 
     computed: {
+        /**
+         * EFFECTIVE PROPS
+         */
         effectiveDisabled() {
-            return this.disabled || !this.resolvedOptions;
+            return this.disabled || !this.loadedOptions;
         },
 
         effectivePlaceholder() {
@@ -94,8 +98,73 @@ export default {
             return this.placeholder || '';
         },
 
+        effectiveIdKey() {
+            return this.idKey || 'id';
+        },
+
+        effectiveTitleKey() {
+            return this.titleKey || 'name';
+        },
+
+        effectiveValueKey() {
+            if (this.valueKey) return this.valueKey;
+            if (this.options && !Array.isArray(this.options)) return this.effectiveIdKey;
+            return undefined;
+        },
+
+        effectiveNoResultsText() {
+            return this.noResultsText || 'No options match your search.';
+        },
+
+        /**
+         * OPTIONS GENERATION
+         */
+
+        loadedOptionsArray() {
+            return this.arrayifyOptions(this.loadedOptions);
+        },
+
+        prependOptionsArray() {
+            return this.prependOptions ? this.arrayifyOptions(this.prependOptions) : [];
+        },
+
+        appendOptionsArray() {
+            return this.appendOptions ? this.arrayifyOptions(this.appendOptions) : [];
+        },
+
+        fullOptionsArray() {
+            return [...this.prependOptionsArray, ...this.loadedOptionsArray, ...this.appendOptionsArray];
+        },
+
+        optionsDescriptors() {
+            return this.fullOptionsArray.map((option, index) => {
+                const title = this.getOptionTitle(option);
+                const subtitle = this.getOptionSubtitle(option);
+                const strippedTitle = title ? title.text.trim().toLowerCase() : '';
+                const strippedSubtitle = subtitle ? subtitle.text.trim().toLowerCase() : '';
+
+                let searchContent = [];
+                if (this.searchFields) {
+                    this.searchFields.forEach(field => {
+                        option[field] && searchContent.push(String(option[field]).toLowerCase());
+                    });
+                } else {
+                    searchContent.push(strippedTitle);
+                    strippedSubtitle && searchContent.push(strippedSubtitle);
+                }
+
+                return {
+                    key: typeof option == 'object' ? option[this.effectiveIdKey] || index : option,
+                    titleHtml: title.html,
+                    subtitleHtml: subtitle?.html,
+                    searchContent: searchContent.join(''),
+                    ref: option
+                };
+            });
+        },
+
         effectiveOptions() {
-            let options = [...this.decoratedOptions];
+            let options = [...this.optionsDescriptors];
 
             if (this.isSearching) {
                 const strippedSearchText = this.searchText.trim().toLowerCase();
@@ -115,7 +184,8 @@ export default {
                     });
 
                     if (this.shouldShowCreateOption) {
-                        const hasExactMatch = options.find(option => option.searchContent === strippedSearchText) !== undefined;
+                        const hasExactMatch =
+                            options.find(option => option.searchContent === strippedSearchText) !== undefined;
                         if (!hasExactMatch) {
                             options.push({
                                 key: createSymbol,
@@ -124,9 +194,7 @@ export default {
                         }
                     }
                 }
-            }
-
-            else if (this.nullTitle) {
+            } else if (this.nullTitle) {
                 options.unshift({
                     key: nullSymbol,
                     titleHtml: this.nullTitle
@@ -134,18 +202,6 @@ export default {
             }
 
             return options;
-        },
-
-        effectiveIdKey() {
-            return this.idKey || 'id';
-        },
-
-        effectiveTitleKey() {
-            return this.titleKey || 'name';
-        },
-
-        effectiveNoResultsText() {
-            return this.noResultsText || 'No options match your search.';
         }
     },
 
@@ -157,7 +213,7 @@ export default {
         },
 
         options() {
-            this.resolvedOptions = this.options;
+            this.loadedOptions = this.options;
         },
 
         url() {
@@ -170,32 +226,7 @@ export default {
 
         // data
 
-        resolvedOptions() {
-            this.decoratedOptions = this.resolvedOptions.map((option, index) => {
-                const title = this.getOptionTitle(option);
-                const subtitle = this.getOptionSubtitle(option);
-                const strippedTitle = title ? title.text.trim().toLowerCase() : '';
-                const strippedSubtitle = subtitle ? subtitle.text.trim().toLowerCase() : '';
-
-                let searchContent = [];
-                if (this.searchFields) {
-                    this.searchFields.forEach(field => {
-                        option[field] && searchContent.push(String(option[field]).toLowerCase());
-                    });
-                } else {
-                    searchContent.push(strippedTitle);
-                    strippedSubtitle && searchContent.push(strippedSubtitle);
-                }
-
-                return {
-                    key: typeof option == 'object' ? option[this.effectiveIdKey] || index : option,
-                    titleHtml: title.html,
-                    subtitleHtml: subtitle?.html,
-                    searchContent: searchContent.join(''),
-                    ref: option
-                };
-            });
-
+        optionsDescriptors() {
             this.shouldDisplayOptions && setTimeout(this.highlightInitialOption, 0);
         },
 
@@ -226,7 +257,7 @@ export default {
         this.shouldShowCreateOption = this.$attrs['onCreateItem'] !== undefined;
 
         if (this.options) {
-            this.resolvedOptions = this.options;
+            this.loadedOptions = this.options;
             this.isLoaded = true;
         } else if (this.$isPropTruthy(this.preload)) {
             this.performInitialLoad();
@@ -235,7 +266,10 @@ export default {
         this.handleValueChanged();
 
         this.$watch('selectedOption', () => {
-            const newValue = this.selectedOption && this.valueKey ? this.selectedOption[this.valueKey] : this.selectedOption;
+            const newValue =
+                this.selectedOption && this.effectiveValueKey
+                    ? this.selectedOption[this.effectiveValueKey]
+                    : this.selectedOption;
             newValue === this.modelValue || this.$emit('update:modelValue', newValue);
         });
     },
@@ -243,7 +277,7 @@ export default {
     methods: {
         async performInitialLoad() {
             await this.reloadOptions();
-            this.$emit('optionsLoaded', this.resolvedOptions);
+            this.$emit('optionsLoaded', this.loadedOptions);
 
             if (this.$isPropTruthy(this.remoteSearch)) {
                 this.$watch('searchText', debounce(this.reloadOptionsIfSearching, 250));
@@ -254,7 +288,7 @@ export default {
             if (this.preload) return this.reloadOptions();
             if (!this.isLoaded) return;
             this.isLoaded = false;
-            this.resolvedOptions = [];
+            this.loadedOptions = [];
         },
 
         async reloadOptions() {
@@ -263,7 +297,7 @@ export default {
             this.$isPropTruthy(this.remoteSearch) && this.searchText && (params.q = this.searchText);
 
             const result = await this.$http.get(this.url, { params: params });
-            this.resolvedOptions = result.data;
+            this.loadedOptions = result.data;
             this.isLoaded = true;
         },
 
@@ -429,10 +463,10 @@ export default {
                 this.selectedOptionTitle = null;
                 this.$emit('createItem', createText);
             } else {
-                const optionIndex = this.decoratedOptions.findIndex(
+                const selectedDecoratedOption = this.optionsDescriptors.find(
                     decoratedOption => decoratedOption.key == option.key
                 );
-                const realOption = this.resolvedOptions[optionIndex];
+                const realOption = selectedDecoratedOption.ref;
                 this.selectedOption = realOption;
                 this.selectedOptionTitle = this.getOptionTitle(this.selectedOption).text;
                 this.searchText = this.selectedOptionTitle || '';
@@ -443,8 +477,10 @@ export default {
 
         handleValueChanged() {
             if (this.modelValue) {
-                if (this.valueKey) {
-                    this.selectedOption = this.resolvedOptions.find(option => option[this.valueKey] === this.modelValue);
+                if (this.effectiveValueKey) {
+                    this.selectedOption = this.fullOptionsArray.find(
+                        option => option[this.effectiveValueKey] === this.modelValue
+                    );
                 } else {
                     this.selectedOption = this.modelValue;
                 }
@@ -507,7 +543,16 @@ export default {
         },
 
         addRemoteOption(option) {
-            this.resolvedOptions.push(option);
+            this.loadedOptions.push(option);
+        },
+
+        arrayifyOptions(options) {
+            return Array.isArray(options)
+                ? options
+                : Object.entries(options).map(entry => ({
+                      [this.effectiveIdKey]: entry[0],
+                      [this.effectiveTitleKey]: entry[1]
+                  }));
         }
     }
 };

package/src/config.js

@@ -8,4 +8,4 @@ function applyConfiguration(inOptions) {
 
 Object.defineProperty(options, 'set', { value: applyConfiguration, enumerable: false });
 
-export default options;
+export default options;