@signal24/vue-foundation 4.16.0 → 4.17.0

package/eslint.config.mjs

@@ -0,0 +1,67 @@
+import eslint from '@eslint/js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import unusedImports from 'eslint-plugin-unused-imports';
+import pluginVue from 'eslint-plugin-vue';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+    // global ignores
+    {
+        ignores: ['dist/', '.yarn/']
+    },
+
+    // presets
+    eslint.configs.recommended,
+    ...tseslint.configs.recommended,
+    ...pluginVue.configs['flat/recommended'],
+
+    // register parser options
+    {
+        files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
+        languageOptions: {
+            parserOptions: {
+                parser: tseslint.parser,
+                extraFileExtensions: ['.vue'],
+                projectService: true
+            },
+
+            // not sure why some of these TS generics are needed.
+            // will circle back when Vue officially updates to ESLint 9
+            globals: {
+                Omit: false,
+                Record: false
+            }
+        }
+    },
+
+    // plugins & configs
+    eslintPluginPrettierRecommended,
+    {
+        plugins: {
+            'unused-imports': unusedImports,
+            'simple-import-sort': simpleImportSort
+        },
+
+        rules: {
+            'no-console': 'off',
+            'no-debugger': 'off',
+            'simple-import-sort/imports': 'error',
+            'simple-import-sort/exports': 'error',
+            'prettier/prettier': 'warn',
+            'no-unused-vars': 'off',
+            'unused-imports/no-unused-imports': 'error',
+            'unused-imports/no-unused-vars': [
+                'warn',
+                {
+                    vars: 'all',
+                    varsIgnorePattern: '^_',
+                    args: 'all',
+                    argsIgnorePattern: '^_'
+                }
+            ]
+            // 'vue/multi-word-component-names': 'off',
+            // 'vue/no-reserved-component-names': 'off'
+        }
+    }
+);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.16.0",
+    "version": "4.17.0",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {
@@ -23,13 +23,13 @@
         "dev": "vite",
         "build": "rm -rf dist && vite build && vue-tsc -p tsconfig.app.json && tsc -p tsconfig.vite-plugins.json && find dist -name '*.tsbuildinfo' -delete",
         "build:watch": "fswatch -o src | xargs -n1 -I{} yarn build",
-        "preview": "vite preview",
+        "demo": "vite -c ./demo/vite.config.ts ./demo",
         "test:types": "vue-tsc -p tsconfig.vitest.json",
         "test:unit": "vitest",
         "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
         "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
         "test:e2e:dev:remote": "DISPLAY=:0 yarn test:e2e:dev",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts --fix --ignore-path .gitignore",
+        "lint": "eslint --fix .",
         "format": "prettier --write ."
     },
     "license": "MIT",
@@ -43,10 +43,11 @@
         "vue": "^3.4.0"
     },
     "devDependencies": {
+        "@eslint/js": "^9.9.1",
         "@nabla/vite-plugin-eslint": "^2.0.4",
-        "@rushstack/eslint-patch": "^1.10.4",
         "@signal24/openapi-client-codegen": "^1.1.0",
         "@tsconfig/node20": "^20.1.4",
+        "@types/eslint__js": "^8.42.3",
         "@types/jsdom": "^21.1.7",
         "@types/lodash": "^4.17.7",
         "@types/node": "^20.16.3",
@@ -58,7 +59,7 @@
         "@vue/tsconfig": "^0.5.1",
         "cypress": "^13.14.1",
         "date-fns": "^3.6.0",
-        "eslint": "^8.57.0",
+        "eslint": "^9.9.1",
         "eslint-plugin-cypress": "^3.5.0",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-unused-imports": "^4.1.3",
@@ -66,13 +67,14 @@
         "jsdom": "^25.0.0",
         "lodash": "^4.17.21",
         "prettier": "^3.3.3",
-        "sass": "^1.77.8",
+        "sass": "^1.78.0",
         "start-server-and-test": "^2.0.5",
         "type-fest": "^4.26.0",
-        "typescript": "~5.5.4",
+        "typescript": "^5.5.4",
+        "typescript-eslint": "^8.4.0",
         "vite": "^5.4.3",
         "vitest": "^2.0.5",
-        "vue": "^3.5.0",
+        "vue": "^3.5.1",
         "vue-tsc": "^2.1.4"
     },
     "packageManager": "yarn@4.0.2"

package/src/components/alert-helpers.ts

@@ -1,5 +1,5 @@
-import AlertModal from './alert-modal.vue';
 import { createOverlayInjection, presentOverlay, removeOverlayInjection } from './overlay-container';
+import AlertModal from './vf-alert-modal.vue';
 
 interface IAlertOptions {
     title?: string;

package/src/components/index.ts

@@ -1,8 +1,8 @@
-import VfAjaxSelect from './ajax-select.vue';
-import VfAlertModal from './alert-modal.vue';
-import VfEzSmartSelect from './ez-smart-select.vue';
-import VfModal from './modal.vue';
-import VfSmartSelect from './smart-select.vue';
+import VfAjaxSelect from './vf-ajax-select.vue';
+import VfAlertModal from './vf-alert-modal.vue';
+import VfEzSmartSelect from './vf-ez-smart-select.vue';
+import VfModal from './vf-modal.vue';
+import VfSmartSelect from './vf-smart-select.vue';
 
 export * from './alert-helpers';
 export * from './overlay-container';

package/src/components/overlay-container.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Writable } from 'type-fest';
 import {
     type AllowedComponentProps,
@@ -69,6 +70,7 @@ export type ObjectComponentProps<T extends Vue__ComponentPublicInstanceConstruct
     Omit<ObjectComponentConfig<T>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
 >;
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type ObjectOrDefault<T> = T extends object ? T : PropsWithCallback<{}>;
 export type OverlayComponent = Vue__ComponentPublicInstanceConstructor | ((props: any) => any);
 export type OverlayComponentConfig<T> = T extends Vue__ComponentPublicInstanceConstructor
@@ -124,7 +126,9 @@ export function createOverlayInjection<C extends OverlayComponent, R extends Com
 }
 
 export function dismissOverlayInjectionByInstance(instance: AnyComponentPublicInstance) {
-    instance.$ && dismissOverlayInjectionByInternalInstance(instance.$);
+    if (instance.$) {
+        dismissOverlayInjectionByInternalInstance(instance.$);
+    }
 }
 
 export function dismissOverlayInjectionByInternalInstance(instance: ComponentInternalInstance) {

package/src/components/toast-helpers.ts

@@ -1,5 +1,5 @@
 import { createOverlayInjection, type OverlayInjection, removeOverlayInjection } from './overlay-container';
-import Toast, { type IToastOptions } from './toast.vue';
+import Toast, { type IToastOptions } from './vf-toast.vue';
 
 export function showToast(options: IToastOptions) {
     const injection: OverlayInjection<typeof Toast, unknown> = createOverlayInjection(Toast, {

package/src/components/vf-ajax-select.vue

@@ -0,0 +1,61 @@
+<template>
+    <select v-if="!renderOptions" disabled>
+        <option>{{ props.loadingText || 'Loading...' }}</option>
+    </select>
+    <select v-else v-model="selectedItem">
+        <option v-if="props.nullText" :value="null">{{ props.nullText }}</option>
+        <option v-for="(renderOption, index) in renderOptions" :key="index" :value="options?.[index]">
+            {{ renderOption }}
+        </option>
+    </select>
+</template>
+
+<script setup lang="ts" generic="T">
+import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue';
+
+// todo: make type safe when Vue alpha is released
+
+const props = defineProps<{
+    modelValue: T;
+    loadFn: () => Promise<T[]>;
+    nullText?: string;
+    loadingText?: string;
+    displayKey?: keyof T;
+    preprocesor?: (option: T) => string;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [T];
+}>();
+
+const options = ref<T[] | null>(null);
+const renderOptions = computed(() => {
+    if (!options.value) {
+        return null;
+    }
+
+    const result = options.value.map(option => {
+        const typedOption = option as T;
+        if (props.preprocesor) return props.preprocesor(typedOption);
+        if (props.displayKey) return typedOption[props.displayKey];
+        return '';
+    });
+
+    return result;
+});
+
+const selectedItem = ref<T | null>(props.modelValue ?? null);
+
+watch(() => props.loadFn, load);
+watch(
+    () => props.modelValue,
+    () => (selectedItem.value = props.modelValue)
+);
+watch(selectedItem, () => emit('update:modelValue', selectedItem.value));
+
+async function load() {
+    options.value = await props.loadFn();
+}
+
+onMounted(load);
+</script>

package/src/components/{alert-modal.vue → vf-alert-modal.vue}

@@ -1,18 +1,18 @@
 <template>
     <Modal :class="['vf-alert', ...(classes ?? [])]">
-        <template v-if="title" v-slot:header>
+        <template v-if="title" #header>
             <h1>{{ title }}</h1>
         </template>
 
         <div v-if="isHtml" :innerHtml="message" class="user-message"></div>
         <div v-else :innerText="textMessage"></div>
 
-        <template v-if="!isBare" v-slot:footer>
+        <template v-if="!isBare" #footer>
             <template v-if="shouldConfirm">
-                <button class="primary" @click="() => callback(true)" v-autofocus>Confirm</button>
+                <button v-autofocus class="primary" @click="() => callback(true)">Confirm</button>
                 <button class="default" @click="() => callback(false)">Cancel</button>
             </template>
-            <button v-else class="default" @click="() => callback(true)" v-autofocus>OK</button>
+            <button v-else v-autofocus class="default" @click="() => callback(true)">OK</button>
         </template>
     </Modal>
 </template>
@@ -21,7 +21,7 @@
 import { computed } from 'vue';
 
 import { formatError } from '../helpers/error';
-import Modal from './modal.vue';
+import Modal from './vf-modal.vue';
 
 const props = defineProps<{
     isBare?: boolean;

package/src/components/{ez-smart-select.vue → vf-ez-smart-select.vue}

@@ -6,16 +6,19 @@
 import { isEqual } from 'lodash';
 import { computed, ref, watch } from 'vue';
 
-import VfSmartSelect from './smart-select.vue';
+import VfSmartSelect from './vf-smart-select.vue';
 
-type GenericObject = { [key: string]: any };
+interface IComputedOption {
+    value: string;
+    label: string;
+}
 
 const props = defineProps<{
     modelValue: string | null | undefined;
     nullTitle?: string;
     placeholder?: string;
-    options: Record<string, string> | string[];
-    formatter?: (value: any) => string;
+    options: { [K: string]: string } | string[];
+    formatter?: (item: IComputedOption) => string;
 }>();
 
 const computedOpts = computed(() => {
@@ -29,16 +32,16 @@ const computedOpts = computed(() => {
 
 const ezFormatter = computed(() => {
     if (props.formatter) {
-        return (o: GenericObject) => props.formatter?.(o.label);
+        return (o: IComputedOption) => props.formatter!(o);
     }
-    return (o: GenericObject) => o.label;
+    return (o: IComputedOption) => o.label;
 });
 
 const emit = defineEmits<{
     (e: 'update:modelValue', value: string | null): void;
 }>();
 
-const selectedItem = ref<GenericObject | null>(computedOpts.value.find(o => o.value === props.modelValue) ?? null);
+const selectedItem = ref<IComputedOption | null>(computedOpts.value.find(o => o.value === props.modelValue) ?? null);
 watch(
     () => props.modelValue,
     value => {
@@ -46,6 +49,7 @@ watch(
     }
 );
 watch(selectedItem, value => {
-    emit('update:modelValue', value ? (computedOpts.value.find(o => isEqual(o, value))?.value ?? null) : null);
+    const emitValue = value ? computedOpts.value.find(o => isEqual(o, value))?.value : null;
+    emit('update:modelValue', emitValue ?? null);
 });
 </script>

package/src/components/{modal.vue → vf-modal.vue}

@@ -1,6 +1,6 @@
 <template>
-    <div :id="id" class="vf-overlay vf-modal-wrap" :class="classList" ref="overlay">
-        <form action="." class="vf-modal" :class="{ scrolls }" @submit.prevent="$emit('formSubmit')" ref="form">
+    <div :id="id" ref="overlay" class="vf-overlay vf-modal-wrap" :class="classList">
+        <form ref="form" action="." class="vf-modal" :class="{ scrolls }" @submit.prevent="$emit('formSubmit')">
             <div v-if="$slots.header" class="vf-modal-header">
                 <slot name="header" />
                 <i v-if="props.closeX" class="close" @click="closeParent"></i>
@@ -57,7 +57,7 @@ onBeforeUnmount(() => {
     window.removeEventListener('keydown', handleEscapeKey);
 
     const areOtherModalsOpen = document.body.querySelectorAll('.vf-modal').length > 0;
-    areOtherModalsOpen || document.body.classList.remove('vf-modal-open');
+    if (!areOtherModalsOpen) document.body.classList.remove('vf-modal-open');
 });
 
 function handleOverlayClick(e: MouseEvent) {