@signal24/vue-foundation 4.2.1 → 4.2.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.2.1",
+    "version": "4.2.4",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "bin": {
@@ -39,15 +39,17 @@
         "date-fns": "^2.30.0",
         "lodash": "^4.17.21",
         "type-fest": "^3.11.0",
+        "uuid": "^9.0.0",
         "vue": "^3.3.4"
     },
     "devDependencies": {
         "@nabla/vite-plugin-eslint": "^1.5.0",
-        "@rushstack/eslint-patch": "^1.2.0",
+        "@rushstack/eslint-patch": "^1.3.0",
         "@tsconfig/node18": "^2.0.1",
         "@types/jsdom": "^21.1.1",
         "@types/lodash": "^4.14.194",
         "@types/node": "^18.15.11",
+        "@types/uuid": "^9.0.1",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vue/eslint-config-prettier": "^7.1.0",
         "@vue/eslint-config-typescript": "^11.0.3",
@@ -58,7 +60,7 @@
         "eslint-plugin-cypress": "^2.13.3",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-unused-imports": "^2.0.0",
-        "eslint-plugin-vue": "^9.13.0",
+        "eslint-plugin-vue": "^9.14.0",
         "jsdom": "^22.0.0",
         "openapi-typescript-codegen": "^0.24.0",
         "prettier": "^2.8.8",

package/src/components/alert-modal.vue

@@ -1,6 +1,6 @@
 <template>
     <Modal class="vf-alert" :class="classes">
-        <template v-if="!isBare" v-slot:header>
+        <template v-if="!isBare && title" v-slot:header>
             <h1>{{ title }}</h1>
         </template>
 

package/src/components/ez-smart-select.vue

@@ -1,5 +1,5 @@
 <template>
-    <VfSmartSelect v-model="selectedItem" :options="options" :formatter="ezFormatter" :null-title="nullTitle" />
+    <VfSmartSelect v-model="selectedItem" :options="computedOpts" :formatter="ezFormatter" :null-title="nullTitle" />
 </template>
 
 <script lang="ts" setup>
@@ -18,7 +18,7 @@ const props = defineProps<{
     formatter?: (value: any) => string;
 }>();
 
-const options = computed(() => {
+const computedOpts = computed(() => {
     return Array.isArray(props.options)
         ? props.options.map(o => ({ value: o, label: o }))
         : Object.entries(props.options).map(([value, label]) => ({
@@ -38,14 +38,14 @@ const emit = defineEmits<{
     (e: 'update:modelValue', value: string | null): void;
 }>();
 
-const selectedItem = ref<GenericObject | null>(options.value.find(o => o.value === props.modelValue) ?? null);
+const selectedItem = ref<GenericObject | null>(computedOpts.value.find(o => o.value === props.modelValue) ?? null);
 watch(
     () => props.modelValue,
     value => {
-        selectedItem.value = options.value.find(o => o.value === value) ?? null;
+        selectedItem.value = computedOpts.value.find(o => o.value === value) ?? null;
     }
 );
 watch(selectedItem, value => {
-    emit('update:modelValue', value ? options.value.find(o => isEqual(o, value))?.value ?? null : null);
+    emit('update:modelValue', value ? computedOpts.value.find(o => isEqual(o, value))?.value ?? null : null);
 });
 </script>

package/src/directives/infinite-scroll.ts

@@ -1,9 +1,23 @@
 import type { DirectiveBinding, ObjectDirective } from 'vue';
 
-import { type IInfiniteScrollOptions, useInfiniteScroll } from '../hooks/infinite-scroll';
+import { InfiniteScrollHandler } from '../hooks/infinite-scroll';
 
-export const vInfiniteScroll: ObjectDirective<Element, IInfiniteScrollOptions> = {
-    created(_el: Element, binding: DirectiveBinding<IInfiniteScrollOptions>) {
-        useInfiniteScroll(binding.value, binding.instance!.$);
+const HandlerSymbol = Symbol('InfiniteScrollHandler');
+type InfiniteScrollElement = Element & { [HandlerSymbol]?: InfiniteScrollHandler };
+type InfiniteScrollBindingValue = () => void;
+
+export const vInfiniteScroll: ObjectDirective<Element, InfiniteScrollBindingValue> = {
+    mounted(el: InfiniteScrollElement, binding: DirectiveBinding<InfiniteScrollBindingValue>) {
+        el[HandlerSymbol] = new InfiniteScrollHandler(el, binding.value);
+    },
+
+    updated(el: InfiniteScrollElement, binding: DirectiveBinding<InfiniteScrollBindingValue>) {
+        el[HandlerSymbol]?.uninstall();
+        el[HandlerSymbol] = new InfiniteScrollHandler(el, binding.value);
+    },
+
+    unmounted(el: InfiniteScrollElement) {
+        el[HandlerSymbol]?.uninstall();
+        delete el[HandlerSymbol];
     }
 };

package/src/helpers/openapi.ts

@@ -18,17 +18,17 @@ interface IBaseHttpRequest {
     request<T>(options: IRequestOptions): ICancelablePromise<T>;
 }
 
-interface IApiClient {
+export interface IApiClient {
     request: IBaseHttpRequest;
 }
 
-interface IApiError extends Error {
+export interface IApiError extends Error {
     status: number;
     statusText: string;
     body: any;
 }
 
-declare class ICancelablePromise<T = any> {
+export declare class ICancelablePromise<T = any> {
     constructor(executor: (resolve: (value: any) => void, reject: (reason: any) => void, onCancel: (cancel: () => void) => void) => void);
     then<TResult1 = any, TResult2 = never>(
         onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
@@ -46,7 +46,7 @@ interface IWrappedApiClientOptions<P extends ICancelablePromise = ICancelablePro
     CancelablePromise: new (...arguments_: Arguments) => P;
 }
 
-function isApiError(err: any): err is IApiError {
+export function isApiError(err: any): err is IApiError {
     return err instanceof Error && 'status' in err && 'body' in err;
 }
 

package/src/helpers/string.ts

@@ -1,3 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+
 // placing this here so we don't have to use the ESLint rule everywhere
 // eslint-disable-next-line vue/prefer-import-from-vue
 export { escapeHtml } from '@vue/shared';
@@ -25,3 +27,7 @@ export function formatUSCurrency(value: string | number) {
             .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
     );
 }
+
+export function uuid() {
+    return uuidv4();
+}

package/src/hooks/infinite-scroll.ts

@@ -27,22 +27,19 @@ export function installScrollHook(cmp: InfiniteScrollComponent, options: IInfini
 
     if (options.elScrolledToBottom) {
         hookState.el = new InfiniteScrollHandler(cmp.vnode.el as Element, options.elScrolledToBottom);
-        hookState.el.install();
     }
 
     if (options.ancestorScrolledToBottom) {
         const scrollableAncestorEl = discoverScrollableAncestorEl(cmp.vnode.el as Element);
         if (scrollableAncestorEl) {
             hookState.ancestor = new InfiniteScrollHandler(scrollableAncestorEl, options.ancestorScrolledToBottom);
-            hookState.ancestor.install();
         } else {
-            console.warn('no scollable ancestor found for component:', cmp);
+            console.warn('[VueFoundation] No scollable ancestor found for component:', cmp);
         }
     }
 
     if (options.windowScrolledToBottom) {
         hookState.window = new InfiniteScrollHandler(window as unknown as Element, options.windowScrolledToBottom);
-        hookState.window.install();
     }
 
     cmp[HookState] = hookState;
@@ -83,7 +80,9 @@ function discoverScrollableAncestorEl(el: Element): Element | null {
 export class InfiniteScrollHandler {
     isTripped = false;
 
-    constructor(private el: Element, private handler: (e: Event) => void) {}
+    constructor(private el: Element, private handler: (e: Event) => void) {
+        this.install();
+    }
 
     install() {
         this.el.addEventListener('scroll', this.onScrollWithContext);

package/src/vite-plugins/vite-openapi-plugin.cli.ts

@@ -2,14 +2,15 @@
 
 import { existsSync } from 'fs';
 
-import { generateOpenapiClient } from './vite-openapi-plugin.js';
+import { generateOpenapiClient, loadOpenapiOverrides } from './vite-openapi-plugin.js';
 
 if (!process.argv[2]) {
-    throw new Error('Usage: vf-generate-openapi-client <openapi-yaml-path>');
+    throw new Error('Usage: vf-generate-openapi-client <openapi-yaml-path> [<openapi-output-path>]');
 }
 
 if (!existsSync(process.argv[2])) {
     throw new Error(`OpenAPI YAML file not found: ${process.argv[2]}`);
 }
 
-await generateOpenapiClient(process.argv[2]);
+loadOpenapiOverrides();
+await generateOpenapiClient(process.argv[2], process.argv[3]);

package/src/vite-plugins/vite-openapi-plugin.ts

@@ -1,12 +1,38 @@
 import { createHash } from 'node:crypto';
-import { existsSync, readFileSync, watch } from 'node:fs';
+import { copyFileSync, existsSync, readFileSync, watch } from 'node:fs';
 import { rm } from 'node:fs/promises';
 
 import * as OpenAPI from 'openapi-typescript-codegen';
 
+const DEFAULT_OUT_PATH = './src/openapi-client-generated';
+
 let generatedHash: string | null = null;
+let overridesMap: Record<string, string> | null = null;
+let overridesInverseMap: Record<string, string> | null = null;
+
+export function loadOpenapiOverrides() {
+    if (!existsSync('./openapi-specs.dev.json')) {
+        return;
+    }
 
-export function openapiClientGeneratorPlugin(openapiYamlPath: string) {
+    try {
+        const overridesContent = readFileSync('./openapi-specs.dev.json', 'utf8');
+        overridesMap = JSON.parse(overridesContent);
+        overridesInverseMap = Object.fromEntries(Object.entries(overridesMap!).map(([k, v]) => [v, k]));
+    } catch (e) {
+        console.error('Failed to load openapi-specs.dev.json:', e);
+    }
+}
+
+export function openapiClientGeneratorPlugin(
+    openapiYamlPath: string,
+    outPath: string = DEFAULT_OUT_PATH
+): {
+    name: string;
+    apply: 'serve';
+    buildStart(): void;
+    closeBundle(): void;
+} {
     let generator: ReturnType<typeof getGenerator> = null;
 
     return {
@@ -14,7 +40,11 @@ export function openapiClientGeneratorPlugin(openapiYamlPath: string) {
         apply: 'serve',
 
         buildStart() {
-            generator = getGenerator(openapiYamlPath);
+            // apply a slight delay so any output doesn't get pushed off screen
+            setTimeout(() => {
+                loadOpenapiOverrides();
+                generator = getGenerator(openapiYamlPath, outPath);
+            }, 250);
         },
 
         closeBundle() {
@@ -23,19 +53,21 @@ export function openapiClientGeneratorPlugin(openapiYamlPath: string) {
     };
 }
 
-function getGenerator(openapiYamlPath: string) {
-    if (!existsSync(openapiYamlPath)) {
-        console.log(`OpenAPI YAML file not found: ${openapiYamlPath}`);
+function getGenerator(openapiYamlPath: string, outPath: string) {
+    const resolvedPath = overridesMap?.[openapiYamlPath] ?? openapiYamlPath;
+
+    if (!existsSync(resolvedPath)) {
+        console.log(`OpenAPI YAML file not found: ${resolvedPath}`);
         return null;
     }
 
-    const watcher = watch(openapiYamlPath);
+    const watcher = watch(resolvedPath);
     watcher.on('change', () => {
         // give the writes a moment to settle
-        setTimeout(() => generateOpenapiClient(openapiYamlPath), 100);
+        setTimeout(() => generateOpenapiClient(resolvedPath, outPath), 100);
     });
 
-    generateOpenapiClient(openapiYamlPath);
+    generateOpenapiClient(resolvedPath, outPath);
 
     return {
         close() {
@@ -44,7 +76,7 @@ function getGenerator(openapiYamlPath: string) {
     };
 }
 
-export async function generateOpenapiClient(openapiYamlPath: string) {
+async function generateOpenapiClientInternal(openapiYamlPath: string, outPath: string = DEFAULT_OUT_PATH) {
     const yaml = readFileSync(openapiYamlPath, 'utf8');
     const hash = createHash('sha256').update(yaml).digest('hex');
 
@@ -56,21 +88,30 @@ export async function generateOpenapiClient(openapiYamlPath: string) {
 
     try {
         try {
-            await rm('./src/openapi-client-generated', { recursive: true });
+            await rm(outPath, { recursive: true });
         } catch (e) {
             // ignore
         }
 
         await OpenAPI.generate({
             input: openapiYamlPath,
-            output: './src/openapi-client-generated',
+            output: outPath,
             clientName: 'ApiClient',
             useOptions: true,
             useUnionTypes: true
         });
 
-        console.log(`[${new Date().toISOString()}] Generated client from ${openapiYamlPath} to ./src/openapi-client/`);
+        if (overridesInverseMap?.[openapiYamlPath]) {
+            copyFileSync(openapiYamlPath, overridesInverseMap[openapiYamlPath]);
+        }
+
+        console.log(`[${new Date().toISOString()}] Generated client from ${openapiYamlPath} to ${outPath}/`);
     } catch (err) {
         console.error(`[${new Date().toISOString()}] Error generating client from ${openapiYamlPath}:`, err);
     }
 }
+
+export async function generateOpenapiClient(openapiYamlPath: string, outPath: string = DEFAULT_OUT_PATH) {
+    const resolvedPath = overridesMap?.[openapiYamlPath] ?? openapiYamlPath;
+    return generateOpenapiClientInternal(resolvedPath, outPath);
+}

package/{vite.config.js → vite.config.ts}

@@ -27,7 +27,7 @@ export default defineConfig({
             output: {
                 assetFileNames: assetInfo => {
                     if (assetInfo.name === 'index.css') return 'vue-foundation.css';
-                    return assetInfo.name;
+                    return assetInfo.name!;
                 },
                 exports: 'named',
                 globals: {