@signal24/vue-foundation 4.2.0 → 4.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.2.0",
+    "version": "4.2.2",
     "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

@@ -20,8 +20,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import { formatError } from '@/helpers/error';
-
+import { formatError } from '../helpers/error';
 import Modal from './modal.vue';
 
 const props = defineProps<{

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/datetime.ts

@@ -1,7 +1,7 @@
 import { format } from 'date-fns';
 import type { DirectiveBinding, ObjectDirective } from 'vue';
 
-import { VfOptions } from '@/config';
+import { VfOptions } from '../config';
 
 export const vDatetime: ObjectDirective<HTMLElement, string> = {
     beforeMount: applyDateTime,

package/src/helpers/error.ts

@@ -1,5 +1,4 @@
-import { showAlert } from '@/components/alert-helpers';
-
+import { showAlert } from '../components/alert-helpers';
 import { VfOptions } from '../config';
 
 export class UserError extends Error {

package/src/helpers/mask.ts

@@ -1,4 +1,4 @@
-import type { AnyComponentPublicInstance } from '@/components';
+import type { AnyComponentPublicInstance } from '../components/modal-container';
 
 /*///////////////////////////////////////////////
 Component Overlay Masking
@@ -51,7 +51,7 @@ interface IFormMaskState {
     [FormMaskState]?: {
         disabledElements: HTMLElement[];
         waitButton: HTMLElement;
-        buttonText: string;
+        buttonHtml: string;
     };
 }
 type FormMaskElement = Element & IFormMaskState;
@@ -63,7 +63,7 @@ export function maskForm(formOrCmp: Element | AnyComponentPublicInstance, button
     const buttonEl = (
         buttonSelector instanceof Element ? buttonSelector : form.querySelectorAll(buttonSelector ?? 'button:not([disabled])')[0]
     ) as HTMLElement;
-    const originalButtonText = buttonEl.tagName === 'INPUT' ? (buttonEl as HTMLInputElement).value : buttonEl.innerText;
+    const originalButtonHtml = buttonEl.tagName === 'INPUT' ? (buttonEl as HTMLInputElement).value : buttonEl.innerHTML;
     buttonEl.setAttribute('disabled', 'disabled');
     buttonEl.innerText = buttonText ?? 'Please wait...';
 
@@ -74,7 +74,7 @@ export function maskForm(formOrCmp: Element | AnyComponentPublicInstance, button
     (form as FormMaskElement)[FormMaskState] = {
         disabledElements: inputs,
         waitButton: buttonEl,
-        buttonText: originalButtonText
+        buttonHtml: originalButtonHtml
     };
 
     return () => unmaskForm(form);
@@ -89,7 +89,7 @@ export function unmaskForm(formOrCmp: Element | AnyComponentPublicInstance) {
     form.classList.remove('vf-masked');
 
     state.disabledElements.forEach(el => el.removeAttribute('disabled'));
-    state.waitButton.innerText = state.buttonText;
+    state.waitButton.innerHTML = state.buttonHtml;
     state.waitButton.removeAttribute('disabled');
 
     delete (form as FormMaskElement)[FormMaskState];

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/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

@@ -4,9 +4,33 @@ 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;
+
+export function loadOpenapiOverrides() {
+    if (!existsSync('./openapi-specs.overrides.json')) {
+        return;
+    }
 
-export function openapiClientGeneratorPlugin(openapiYamlPath: string) {
+    try {
+        const overridesContent = readFileSync('./openapi-specs.overrides.json', 'utf8');
+        overridesMap = JSON.parse(overridesContent);
+    } catch (e) {
+        console.error('Failed to load openapi-specs.overrides.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 +38,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 +51,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 +74,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 +86,26 @@ 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/`);
+        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: {