@signal24/vue-foundation 4.6.1 → 4.7.1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.6.1",
+    "version": "4.7.1",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "bin": {
@@ -39,37 +39,37 @@
     "dependencies": {
         "date-fns": "^2.30.0",
         "lodash": "^4.17.21",
-        "type-fest": "^3.11.0",
+        "type-fest": "^4.1.0",
         "uuid": "^9.0.0",
         "vue": "^3.3.4"
     },
     "devDependencies": {
         "@nabla/vite-plugin-eslint": "^1.5.0",
-        "@rushstack/eslint-patch": "^1.3.0",
-        "@tsconfig/node18": "^2.0.1",
+        "@rushstack/eslint-patch": "^1.3.2",
+        "@tsconfig/node18": "^18.2.0",
         "@types/jsdom": "^21.1.1",
-        "@types/lodash": "^4.14.194",
-        "@types/node": "^18.15.11",
-        "@types/uuid": "^9.0.1",
+        "@types/lodash": "^4.14.196",
+        "@types/node": "^18.17.1",
+        "@types/uuid": "^9.0.2",
         "@vitejs/plugin-vue": "^4.2.3",
-        "@vue/eslint-config-prettier": "^7.1.0",
+        "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/eslint-config-typescript": "^11.0.3",
-        "@vue/test-utils": "^2.3.2",
+        "@vue/test-utils": "^2.4.1",
         "@vue/tsconfig": "^0.4.0",
-        "cypress": "^12.12.0",
-        "eslint": "^8.41.0",
+        "cypress": "^12.17.2",
+        "eslint": "^8.46.0",
         "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.14.0",
-        "jsdom": "^22.0.0",
-        "openapi-typescript-codegen": "^0.24.0",
-        "prettier": "^2.8.8",
-        "sass": "^1.62.1",
+        "eslint-plugin-unused-imports": "^3.0.0",
+        "eslint-plugin-vue": "^9.16.1",
+        "jsdom": "^22.1.0",
+        "openapi-typescript-codegen": "^0.25.0",
+        "prettier": "^3.0.0",
+        "sass": "^1.64.2",
         "start-server-and-test": "^2.0.0",
-        "typescript": "~5.0.4",
-        "vite": "^4.3.8",
-        "vitest": "^0.31.1",
-        "vue-tsc": "^1.6.5"
+        "typescript": "~5.1.6",
+        "vite": "^4.4.7",
+        "vitest": "^0.33.0",
+        "vue-tsc": "^1.8.8"
     }
 }

package/src/components/modal.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" class="vf-overlay vf-modal-wrap" :class="props.class" ref="overlay">
+    <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 v-if="$slots.header" class="vf-modal-header">
                 <slot name="header" />
@@ -16,7 +16,8 @@
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue';
+import { compact } from 'lodash';
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue';
 
 import { maskForm, unmaskForm } from '../helpers/mask';
 import { dismissOverlayInjectionByInternalInstance } from './overlay-container';
@@ -32,11 +33,17 @@ const props = defineProps<{
 }>();
 
 defineEmits(['formSubmit']);
-defineExpose({ mask, unmask });
+defineExpose({ mask, unmask, hide, unhide });
 
 const overlay = ref<HTMLElement>();
 const form = ref<HTMLFormElement>();
 
+const isHidden = ref(false);
+
+const classList = computed(() => {
+    return compact([props.class, isHidden.value && 'hidden']);
+});
+
 onMounted(() => {
     document.body.classList.add('vf-modal-open');
 
@@ -80,6 +87,14 @@ function mask() {
 function unmask() {
     unmaskForm(form.value!);
 }
+
+function hide() {
+    isHidden.value = true;
+}
+
+function unhide() {
+    isHidden.value = false;
+}
 </script>
 
 <style lang="scss">
@@ -90,6 +105,10 @@ function unmask() {
     width: 100%;
     height: 100%;
     z-index: 100;
+
+    &.hidden {
+        display: none;
+    }
 }
 
 .vf-modal-wrap {

package/src/directives/tooltip.ts

@@ -60,7 +60,10 @@ class VfTooltip {
     private handleTargetMouseEnterWithContext = this.handleTargetMouseEnter.bind(this);
     private handleTargetMouseLeaveWithContext = this.handleTargetMouseLeave.bind(this);
 
-    constructor(private el: HTMLElement, private config: ITooltipOptions) {
+    constructor(
+        private el: HTMLElement,
+        private config: ITooltipOptions
+    ) {
         el.addEventListener('mouseenter', this.handleTargetMouseEnterWithContext);
         el.addEventListener('mouseleave', this.handleTargetMouseLeaveWithContext);
     }

package/src/helpers/openapi.ts

@@ -41,8 +41,10 @@ export declare class ICancelablePromise<T = any> {
 
 interface IWrappedApiClientOptions<P extends ICancelablePromise = ICancelablePromise, Arguments extends unknown[] = any[]> {
     apiClient: IApiClient;
+    wrapper?: (options: IRequestOptions, fn: (options: IRequestOptions) => P) => P;
     onRequest?: (options: IRequestOptions) => IRequestOptions;
     onError?: (err: Error, options: IRequestOptions) => Error | null | void;
+    afterRequest?: (options: IRequestOptions) => void;
     CancelablePromise: new (...arguments_: Arguments) => P;
 }
 
@@ -50,36 +52,42 @@ export function isApiError(err: any): err is IApiError {
     return err instanceof Error && 'status' in err && 'body' in err;
 }
 
-export function installApiClientInterceptors({ apiClient, onRequest, onError, CancelablePromise }: IWrappedApiClientOptions) {
+export function installApiClientInterceptors({ apiClient, wrapper, onRequest, onError, afterRequest, CancelablePromise }: IWrappedApiClientOptions) {
     const originalRequest = apiClient.request.request.bind(apiClient.request);
+    const resolvedWrapper = wrapper ?? ((options, fn) => fn(options));
     apiClient.request.request = (options: IRequestOptions) => {
-        options = rewriteOptionsForFileUpload(options);
-
-        if (onRequest) {
-            options = onRequest(options);
-        }
-
-        return new CancelablePromise((resolve: (value: any) => void, reject: (err: any) => void, onCancel: (handler: () => void) => void) => {
-            const promise = originalRequest(options);
-            onCancel(promise.cancel);
-            promise.then(resolve).catch(err => {
-                if (isApiError(err) && typeof err.body === 'object' && 'error' in err.body) {
-                    if (err.status === 422) {
-                        return reject(new UserError(err.body.error));
-                    }
-
-                    err.message = `${err.body.error} (${err.status})`;
-                }
-                if (onError) {
-                    const handlerResult = onError(err, options);
-                    if (handlerResult === null) {
-                        return;
-                    }
-                    if (handlerResult instanceof Error) {
-                        return reject(handlerResult);
-                    }
-                }
-                reject(err);
+        return resolvedWrapper(options, options => {
+            options = rewriteOptionsForFileUpload(options);
+
+            if (onRequest) {
+                options = onRequest(options);
+            }
+
+            return new CancelablePromise((resolve: (value: any) => void, reject: (err: any) => void, onCancel: (handler: () => void) => void) => {
+                const promise = originalRequest(options);
+                onCancel(promise.cancel);
+                promise
+                    .then(resolve)
+                    .catch(err => {
+                        if (isApiError(err) && typeof err.body === 'object' && 'error' in err.body) {
+                            if (err.status === 422) {
+                                return reject(new UserError(err.body.error));
+                            }
+
+                            err.message = `${err.body.error} (${err.status})`;
+                        }
+                        if (onError) {
+                            const handlerResult = onError(err, options);
+                            if (handlerResult === null) {
+                                return;
+                            }
+                            if (handlerResult instanceof Error) {
+                                return reject(handlerResult);
+                            }
+                        }
+                        reject(err);
+                    })
+                    .finally(() => afterRequest?.(options));
             });
         });
     };

package/src/hooks/infinite-scroll.ts

@@ -80,7 +80,10 @@ 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();
     }