@signal24/vue-foundation 4.2.2 → 4.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.2.2",
+    "version": "4.3.0",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "bin": {

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

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

@@ -1,5 +1,5 @@
 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';
@@ -7,31 +7,50 @@ import * as OpenAPI from 'openapi-typescript-codegen';
 const DEFAULT_OUT_PATH = './src/openapi-client-generated';
 
 let generatedHash: string | null = null;
+let generatorMap: Record<string, string> = {};
 let overridesMap: Record<string, string> | null = null;
+let overridesInverseMap: Record<string, string> | null = null;
 
-export function loadOpenapiOverrides() {
-    if (!existsSync('./openapi-specs.overrides.json')) {
+export function loadOpenapiConfig() {
+    loadGeneratorMap();
+    loadOverridesMap();
+}
+
+function loadGeneratorMap() {
+    if (!existsSync('./openapi-specs.json')) {
+        console.error('openapi-specs.json not found. Cannot generate OpenAPI client.');
         return;
     }
 
     try {
-        const overridesContent = readFileSync('./openapi-specs.overrides.json', 'utf8');
+        const specsContent = readFileSync('./openapi-specs.json', 'utf8');
+        generatorMap = JSON.parse(specsContent);
+    } catch (e) {
+        console.error('Failed to load openapi-specs.json:', e);
+    }
+}
+
+function loadOverridesMap() {
+    if (!existsSync('./openapi-specs.dev.json')) {
+        return;
+    }
+
+    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.overrides.json:', e);
+        console.error('Failed to load openapi-specs.dev.json:', e);
     }
 }
 
-export function openapiClientGeneratorPlugin(
-    openapiYamlPath: string,
-    outPath: string = DEFAULT_OUT_PATH
-): {
+export function openapiClientGeneratorPlugin(): {
     name: string;
     apply: 'serve';
     buildStart(): void;
     closeBundle(): void;
 } {
-    let generator: ReturnType<typeof getGenerator> = null;
+    let generators: ReturnType<typeof createWatchfulGenerators> | null = null;
 
     return {
         name: 'openapi-types-generator',
@@ -40,18 +59,26 @@ export function openapiClientGeneratorPlugin(
         buildStart() {
             // apply a slight delay so any output doesn't get pushed off screen
             setTimeout(() => {
-                loadOpenapiOverrides();
-                generator = getGenerator(openapiYamlPath, outPath);
+                generators = createWatchfulGenerators();
             }, 250);
         },
 
         closeBundle() {
-            generator?.close();
+            if (generators) {
+                for (const generator of generators) {
+                    generator?.close();
+                }
+            }
         }
     };
 }
 
-function getGenerator(openapiYamlPath: string, outPath: string) {
+function createWatchfulGenerators() {
+    loadOpenapiConfig();
+    return Object.entries(generatorMap).map(([openapiYamlPath, outPath]) => createWatchfulGenerator(openapiYamlPath, outPath));
+}
+
+function createWatchfulGenerator(openapiYamlPath: string, outPath: string) {
     const resolvedPath = overridesMap?.[openapiYamlPath] ?? openapiYamlPath;
 
     if (!existsSync(resolvedPath)) {
@@ -74,7 +101,15 @@ function getGenerator(openapiYamlPath: string, outPath: string) {
     };
 }
 
-async function generateOpenapiClientInternal(openapiYamlPath: string, outPath: string = DEFAULT_OUT_PATH) {
+export async function generateConfiguredOpenapiClients() {
+    loadOpenapiConfig();
+    for (const [openapiYamlPath, outPath] of Object.entries(generatorMap)) {
+        const resolvedPath = overridesMap?.[openapiYamlPath] ?? openapiYamlPath;
+        await generateOpenapiClient(resolvedPath, outPath);
+    }
+}
+
+export async function generateOpenapiClient(openapiYamlPath: string, outPath: string = DEFAULT_OUT_PATH) {
     const yaml = readFileSync(openapiYamlPath, 'utf8');
     const hash = createHash('sha256').update(yaml).digest('hex');
 
@@ -99,13 +134,12 @@ async function generateOpenapiClientInternal(openapiYamlPath: string, outPath: s
             useUnionTypes: true
         });
 
+        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);
-}