@signal24/vue-foundation 4.15.0 → 4.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.15.0",
+    "version": "4.16.0",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {
@@ -34,7 +34,7 @@
     },
     "license": "MIT",
     "dependencies": {
-        "uuid": "^9.0.1"
+        "uuid": "^10.0.0"
     },
     "peerDependencies": {
         "@signal24/openapi-client-codegen": "^1.1.0",
@@ -43,37 +43,37 @@
         "vue": "^3.4.0"
     },
     "devDependencies": {
-        "@nabla/vite-plugin-eslint": "^2.0.2",
-        "@rushstack/eslint-patch": "^1.6.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.2",
-        "@types/jsdom": "^21.1.6",
-        "@types/lodash": "^4.14.202",
-        "@types/node": "^20.10.5",
-        "@types/uuid": "^9.0.7",
-        "@vitejs/plugin-vue": "^5.0.0",
+        "@tsconfig/node20": "^20.1.4",
+        "@types/jsdom": "^21.1.7",
+        "@types/lodash": "^4.17.7",
+        "@types/node": "^20.16.3",
+        "@types/uuid": "^10.0.0",
+        "@vitejs/plugin-vue": "^5.1.3",
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/eslint-config-typescript": "^13.0.0",
-        "@vue/test-utils": "^2.4.3",
+        "@vue/test-utils": "^2.4.6",
         "@vue/tsconfig": "^0.5.1",
-        "cypress": "^13.6.2",
-        "date-fns": "^3.0.6",
-        "eslint": "^8.56.0",
-        "eslint-plugin-cypress": "^3.3.0",
-        "eslint-plugin-simple-import-sort": "^12.1.0",
-        "eslint-plugin-unused-imports": "^4.0.0",
-        "eslint-plugin-vue": "^9.19.2",
-        "jsdom": "^23.0.1",
+        "cypress": "^13.14.1",
+        "date-fns": "^3.6.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-cypress": "^3.5.0",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
+        "eslint-plugin-unused-imports": "^4.1.3",
+        "eslint-plugin-vue": "^9.28.0",
+        "jsdom": "^25.0.0",
         "lodash": "^4.17.21",
-        "prettier": "^3.1.1",
-        "sass": "^1.69.6",
-        "start-server-and-test": "^2.0.3",
-        "type-fest": "^4.9.0",
-        "typescript": "~5.3.3",
-        "vite": "^5.0.10",
-        "vitest": "^1.1.0",
-        "vue": "^3.4.0",
-        "vue-tsc": "^1.8.27"
+        "prettier": "^3.3.3",
+        "sass": "^1.77.8",
+        "start-server-and-test": "^2.0.5",
+        "type-fest": "^4.26.0",
+        "typescript": "~5.5.4",
+        "vite": "^5.4.3",
+        "vitest": "^2.0.5",
+        "vue": "^3.5.0",
+        "vue-tsc": "^2.1.4"
     },
     "packageManager": "yarn@4.0.2"
 }

package/src/components/alert-modal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal class="vf-alert" :class="classes">
+    <Modal :class="['vf-alert', ...(classes ?? [])]">
         <template v-if="title" v-slot:header>
             <h1>{{ title }}</h1>
         </template>

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

@@ -46,6 +46,6 @@ watch(
     }
 );
 watch(selectedItem, value => {
-    emit('update:modelValue', value ? computedOpts.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/components/modal.vue

@@ -29,7 +29,7 @@ const props = defineProps<{
     closeOnMaskClick?: boolean;
     scrolls?: boolean;
     closeX?: boolean;
-    class?: string;
+    class?: string | string[];
 }>();
 
 defineEmits(['formSubmit']);
@@ -41,7 +41,7 @@ const form = ref<HTMLFormElement>();
 const isHidden = ref(false);
 
 const classList = computed(() => {
-    return compact([props.class, isHidden.value && 'hidden']);
+    return compact([...(Array.isArray(props.class) ? props.class : [props.class]), isHidden.value && 'hidden']);
 });
 
 onMounted(() => {

package/src/directives/hotkey.ts

@@ -0,0 +1,51 @@
+import { last } from 'lodash';
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+export const vHotkey: ObjectDirective<HTMLButtonElement, string> = {
+    mounted: setup,
+    updated: reset,
+    unmounted: teardown
+};
+
+const ElementsByHotkey = new Map<string, HTMLButtonElement[]>();
+
+function setup(el: HTMLButtonElement, binding: DirectiveBinding<string>) {
+    if (ElementsByHotkey.size === 0) {
+        window.addEventListener('keydown', handleKeydown);
+    }
+
+    ElementsByHotkey.set(binding.value.toLowerCase(), [...(ElementsByHotkey.get(binding.value.toLowerCase()) ?? []), el]);
+}
+
+function teardown(el: HTMLButtonElement, binding: DirectiveBinding<string>) {
+    const elements = ElementsByHotkey.get(binding.value.toLowerCase());
+    if (elements) {
+        const index = elements.indexOf(el);
+        if (index !== -1) {
+            elements.splice(index, 1);
+        }
+
+        if (elements.length === 0) {
+            ElementsByHotkey.delete(binding.value.toLowerCase());
+        }
+    }
+
+    if (ElementsByHotkey.size === 0) {
+        window.removeEventListener('keydown', handleKeydown);
+    }
+}
+
+function reset(el: HTMLButtonElement, binding: DirectiveBinding<string>) {
+    teardown(el, binding);
+    setup(el, binding);
+}
+
+function handleKeydown(event: KeyboardEvent) {
+    const hotkey = event.key.toLowerCase();
+    const elements = ElementsByHotkey.get(hotkey);
+    if (elements) {
+        const element = last(elements);
+        element?.click();
+        event.preventDefault();
+    }
+}

package/src/directives/index.ts

@@ -6,6 +6,7 @@ import { vDateInput } from './date-input';
 import { vDatetime } from './datetime';
 import { vDisabled } from './disabled';
 import { vDuration } from './duration';
+import { vHotkey } from './hotkey';
 import { vInfiniteScroll } from './infinite-scroll';
 import { vReadonly } from './readonly';
 import { vTooltip } from './tooltip';
@@ -18,6 +19,7 @@ declare module 'vue' {
         vDatetime: typeof vDatetime;
         vDisabled: typeof vDisabled;
         vDuration: typeof vDuration;
+        vHotkey: typeof vHotkey;
         vInfiniteScroll: typeof vInfiniteScroll;
         vReadonly: typeof vReadonly;
         vTooltip: typeof vTooltip;
@@ -31,6 +33,7 @@ export function registerDirectives(app: App<Element>): void {
     app.directive('datetime', vDatetime);
     app.directive('disabled', vDisabled);
     app.directive('duration', vDuration);
+    app.directive('hotkey', vHotkey);
     app.directive('infinite-scroll', vInfiniteScroll);
     app.directive('readonly', vReadonly);
     app.directive('tooltip', vTooltip);

package/src/directives/tooltip.ts

@@ -47,6 +47,8 @@ interface ITooltipOptions {
     class?: string | string[];
 }
 
+// todo: improve with mutation observer to see removal of node
+
 class VfTooltip {
     private lastMoveEvt?: MouseEvent;
     private checkInterval?: ReturnType<typeof setInterval>;
@@ -66,6 +68,7 @@ class VfTooltip {
     ) {
         el.addEventListener('mouseenter', this.handleTargetMouseEnterWithContext);
         el.addEventListener('mouseleave', this.handleTargetMouseLeaveWithContext);
+        el.addEventListener('click', this.handleTargetMouseLeaveWithContext);
     }
 
     configure(config: ITooltipOptions) {
@@ -189,5 +192,6 @@ class VfTooltip {
 
         this.el.removeEventListener('mouseenter', this.handleTargetMouseEnterWithContext);
         this.el.removeEventListener('mouseleave', this.handleTargetMouseLeaveWithContext);
+        this.el.removeEventListener('click', this.handleTargetMouseLeaveWithContext);
     }
 }