@signal24/vue-foundation 3.3.2 → 3.6.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.2",
-  "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.6.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,6 +1,8 @@
 <template>
-    <modal class="vf-alert" :class="classes">
-        <h1 v-if="!this.isBare" v-slot:header>{{ title }}</h1>
+    <Modal class="vf-alert" :class="classes">
+        <template v-if="!this.isBare" v-slot:header>
+            <h1>{{ title }}</h1>
+        </template>
 
         <div v-if="isHtml" v-html="message" class="user-message"></div>
         <div v-else v-user-text="message"></div>
@@ -12,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,
@@ -27,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();
 
@@ -58,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">
@@ -127,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,10 +41,10 @@ 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',
@@ -72,7 +72,6 @@ export default {
         return {
             isLoaded: false,
             resolvedOptions: [],
-            decoratedOptions: [],
             isSearching: false,
             searchText: '',
             selectedOption: null,
@@ -84,6 +83,10 @@ export default {
     },
 
     computed: {
+        hasManualOptionsObject() {
+            return this.options && typeof this.options === 'object' && !Array.isArray(this.options);
+        },
+
         effectiveDisabled() {
             return this.disabled || !this.resolvedOptions;
         },
@@ -115,7 +118,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 +128,7 @@ export default {
                         }
                     }
                 }
-            }
-
-            else if (this.nullTitle) {
+            } else if (this.nullTitle) {
                 options.unshift({
                     key: nullSymbol,
                     titleHtml: this.nullTitle
@@ -144,34 +146,27 @@ export default {
             return this.titleKey || 'name';
         },
 
-        effectiveNoResultsText() {
-            return this.noResultsText || 'No options match your search.';
-        }
-    },
-
-    watch: {
-        // props
-
-        modelValue() {
-            this.handleValueChanged();
-        },
-
-        options() {
-            this.resolvedOptions = this.options;
+        effectiveValueKey() {
+            if (this.valueKey) return this.valueKey;
+            if (this.hasManualOptionsObject) return this.effectiveIdKey;
+            return undefined;
         },
 
-        url() {
-            this.handleSourceUpdate();
+        effectiveNoResultsText() {
+            return this.noResultsText || 'No options match your search.';
         },
 
-        urlParams() {
-            this.handleSourceUpdate();
+        resolvedOptionsArray() {
+            return this.hasManualOptionsObject
+                ? Object.entries(this.resolvedOptions).map(entry => ({
+                      [this.effectiveIdKey]: entry[0],
+                      [this.effectiveTitleKey]: entry[1]
+                  }))
+                : this.resolvedOptions;
         },
 
-        // data
-
-        resolvedOptions() {
-            this.decoratedOptions = this.resolvedOptions.map((option, index) => {
+        decoratedOptions() {
+            return this.resolvedOptionsArray.map((option, index) => {
                 const title = this.getOptionTitle(option);
                 const subtitle = this.getOptionSubtitle(option);
                 const strippedTitle = title ? title.text.trim().toLowerCase() : '';
@@ -195,7 +190,31 @@ export default {
                     ref: option
                 };
             });
+        }
+    },
+
+    watch: {
+        // props
+
+        modelValue() {
+            this.handleValueChanged();
+        },
+
+        options() {
+            this.resolvedOptions = this.options;
+        },
+
+        url() {
+            this.handleSourceUpdate();
+        },
+
+        urlParams() {
+            this.handleSourceUpdate();
+        },
+
+        // data
 
+        decoratedOptions() {
             this.shouldDisplayOptions && setTimeout(this.highlightInitialOption, 0);
         },
 
@@ -227,6 +246,7 @@ export default {
 
         if (this.options) {
             this.resolvedOptions = this.options;
+            // this.buildDecoratedOptions();
             this.isLoaded = true;
         } else if (this.$isPropTruthy(this.preload)) {
             this.performInitialLoad();
@@ -235,7 +255,8 @@ 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);
         });
     },
@@ -429,10 +450,10 @@ export default {
                 this.selectedOptionTitle = null;
                 this.$emit('createItem', createText);
             } else {
-                const optionIndex = this.decoratedOptions.findIndex(
+                const selectedDecoratedOption = this.decoratedOptions.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 +464,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.resolvedOptionsArray.find(
+                        option => option[this.effectiveValueKey] === this.modelValue
+                    );
                 } else {
                     this.selectedOption = this.modelValue;
                 }

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;

package/src/directives/autofocus.js

@@ -1,6 +1,7 @@
-import app from '../app';
 import $ from 'jquery';
 
+import app from '../app';
+
 app.directive('autofocus', {
     mounted: fn,
     updated: fn
@@ -11,6 +12,6 @@ function fn(el, binding) {
     if (binding.value !== undefined && !binding.value) return;
     if (binding.oldValue !== undefined && binding.value == binding.oldValue) return;
     el.hasAutoFocused = true;
-    el = ['BUTTON','INPUT','TEXTAREA','SELECT'].indexOf(el.tagName) > -1 ? el : $(el).find('input:first')[0];
+    el = ['BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName) > -1 ? el : $(el).find('input:first')[0];
     setTimeout(() => el.focus(), 10);
-}
+}

package/src/directives/confirm-button.js

@@ -1,4 +1,4 @@
-import app from '../app'
+import app from '../app';
 
 app.directive('confirm-button', {
     mounted(el) {
@@ -37,4 +37,4 @@ app.directive('confirm-button', {
             el.addEventListener('mouseout', el._resetHandler);
         });
     }
-});
+});

package/src/directives/date-input.js

@@ -1,20 +1,18 @@
-import app from '../app';
 import moment from 'moment';
 
+import app from '../app';
+
 app.directive('date-input', {
     beforeMount: fn
 });
 
-function fn(el, binding) {
+function fn(el) {
     el.addEventListener('blur', () => {
         let val = el.value;
-        if (/^[0-9]{1,2}\/[0-9]{1,2}$/.test(val))
-            val += '/' + moment().format('YY');
+        if (/^[0-9]{1,2}\/[0-9]{1,2}$/.test(val)) val += '/' + moment().format('YY');
         let ts = Date.parse(val);
-        if (isNaN(ts))
-            el.value = '';
-        else
-            el.value = moment(ts).format('MM/DD/YYYY');
+        if (isNaN(ts)) el.value = '';
+        else el.value = moment(ts).format('MM/DD/YYYY');
         el.dispatchEvent(new Event('input'));
     });
-}
+}

package/src/directives/datetime.js

@@ -1,6 +1,7 @@
-import app from '../app';
 import moment from 'moment';
 
+import app from '../app';
+
 app.directive('datetime', {
     beforeMount: applyDateTime,
     updated: applyDateTime
@@ -19,26 +20,27 @@ function getDateTimeValue(el, binding) {
     let prefix = '';
     let thatMoment = el.attributes.local ? moment(binding.value) : moment.utc(binding.value);
 
-    if (!el.attributes['display-utc'])
-        thatMoment.local();
+    if (!el.attributes['display-utc']) thatMoment.local();
 
     let format = el.attributes.format ? el.attributes.format.value : null;
 
     if (!format && el.attributes['relative-date']) {
         let thisMoment = moment();
-        if (thisMoment.year() == thatMoment.year() && thisMoment.month() == thatMoment.month() && thisMoment.date() == thatMoment.date()) {
+        if (
+            thisMoment.year() == thatMoment.year() &&
+            thisMoment.month() == thatMoment.month() &&
+            thisMoment.date() == thatMoment.date()
+        ) {
             prefix = 'at';
             format = 'HH:mm';
         }
     }
 
-    if (!format)
-        format = 'MM/DD/YY HH:mm';
+    if (!format) format = 'MM/DD/YY HH:mm';
 
     let result = thatMoment.format(format);
 
-    if (prefix)
-        result = prefix + ' ' + result;
+    if (prefix) result = prefix + ' ' + result;
 
     return result;
-}
+}