@jari-ace/element-plus-component 0.2.2 → 0.3.0

package/packages/components/userTag/index.ts

@@ -1,6 +1,6 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import UserInfoTag from "./UserInfoTag.vue";
-
-export const JaUserInfoTag: SFCWithInstall<typeof UserInfoTag> = withInstall(UserInfoTag);
-
-
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import UserInfoTag from "./UserInfoTag.vue";
+
+export const JaUserInfoTag: SFCWithInstall<typeof UserInfoTag> = withInstall(UserInfoTag);
+
+

package/packages/components/userTag/sharedAxios.ts

@@ -1,8 +1,8 @@
-import {createAxiosWithoutCache, type IAceAxios} from "@jari-ace/app-bolts";
-
-let axios: IAceAxios | undefined;
-
-export function useAxios() {
-    if (!axios) axios = createAxiosWithoutCache();
-    return axios;
-}
+import {createAxiosWithoutCache, type IAceAxios} from "@jari-ace/app-bolts";
+
+let axios: IAceAxios | undefined;
+
+export function useAxios() {
+    if (!axios) axios = createAxiosWithoutCache();
+    return axios;
+}

package/packages/directives/auth/index.ts

@@ -1,41 +1,41 @@
-import type {DirectiveBinding} from "vue";
-import {useLoginUser} from "@jari-ace/app-bolts";
-
-function disableOrHideElement(modifiers: any, el: HTMLElement) {
-    if (modifiers.disable) {
-        (el as any).disabled = true;
-        el.classList.add('disabled');
-    } else {
-        el.style.display = 'none';
-    }
-}
-
-/**
- * v-auth指令用法：
- * 默认如果用户有指定角色，就显示，否则隐藏：
- * v-auth="role1"
- * 支持多个角色检查，默认为并且关系，即要求用户拥有全部指定角色：
- * 数组参数形式 v-auth="[role1, role2]  或者 字符串参数 v-auth="'role1-name,role2-name'"
- * 也可以修改为拥有任一角色即可：
- * v-auth.any="[role1, role2]"
- * 如果要不隐藏只禁用：
- * v-auth.disable="role1"
- */
-export default {
-    // 当指令绑定到元素时调用
-    mounted(el: HTMLElement, binding: DirectiveBinding<string | string[] | undefined>) {
-        const user = useLoginUser();
-        const {value, modifiers} = binding;
-        const userPermissions = (typeof value === "string" ? value.split(/,/) : (value ?? []));
-        if (!userPermissions || userPermissions.length === 0) return;
-        if (modifiers.any) {
-            if (!userPermissions.some(p => user.hasRole(p))) {
-                disableOrHideElement(modifiers, el);
-            }
-        } else {
-            if (!userPermissions.every(p => user.hasRole(p))) {
-                disableOrHideElement(modifiers, el);
-            }
-        }
-    }
-}
+import type {DirectiveBinding} from "vue";
+import {useLoginUser} from "@jari-ace/app-bolts";
+
+function disableOrHideElement(modifiers: any, el: HTMLElement) {
+    if (modifiers.disable) {
+        (el as any).disabled = true;
+        el.classList.add('disabled');
+    } else {
+        el.style.display = 'none';
+    }
+}
+
+/**
+ * v-auth指令用法：
+ * 默认如果用户有指定角色，就显示，否则隐藏：
+ * v-auth="role1"
+ * 支持多个角色检查，默认为并且关系，即要求用户拥有全部指定角色：
+ * 数组参数形式 v-auth="[role1, role2]  或者 字符串参数 v-auth="'role1-name,role2-name'"
+ * 也可以修改为拥有任一角色即可：
+ * v-auth.any="[role1, role2]"
+ * 如果要不隐藏只禁用：
+ * v-auth.disable="role1"
+ */
+export default {
+    // 当指令绑定到元素时调用
+    mounted(el: HTMLElement, binding: DirectiveBinding<string | string[] | undefined>) {
+        const user = useLoginUser();
+        const {value, modifiers} = binding;
+        const userPermissions = (typeof value === "string" ? value.split(/,/) : (value ?? []));
+        if (!userPermissions || userPermissions.length === 0) return;
+        if (modifiers.any) {
+            if (!userPermissions.some(p => user.hasRole(p))) {
+                disableOrHideElement(modifiers, el);
+            }
+        } else {
+            if (!userPermissions.every(p => user.hasRole(p))) {
+                disableOrHideElement(modifiers, el);
+            }
+        }
+    }
+}

package/packages/directives/autofocus/index.ts

@@ -1,29 +1,29 @@
-/**
- * 在组件mount后自动聚焦控件
- */
-
-const timeoutHandles = new Map<HTMLElement, number>();
-
-export default {
-    mounted(el: HTMLElement) {
-        let handle;
-        if (el instanceof HTMLInputElement) {
-            handle = setTimeout(() => el?.focus(), 500)
-            timeoutHandles.set(el, handle);
-        } else {
-            const el1 = el.querySelectorAll('input')
-            if (el1.length > 0 && el1.item(0) instanceof HTMLInputElement) {
-                handle = setTimeout(() => (
-                    el1?.item(0) as HTMLInputElement
-                )?.focus(), 500)
-                timeoutHandles.set(el, handle)
-            }
-        }
-    },
-    onUnmounted(el: HTMLElement) {
-        if (timeoutHandles.has(el)) {
-            clearTimeout(timeoutHandles.get(el))
-            timeoutHandles.delete(el)
-        }
-    }
-}
+/**
+ * 在组件mount后自动聚焦控件
+ */
+
+const timeoutHandles = new Map<HTMLElement, number>();
+
+export default {
+    mounted(el: HTMLElement) {
+        let handle;
+        if (el instanceof HTMLInputElement) {
+            handle = setTimeout(() => el?.focus(), 500)
+            timeoutHandles.set(el, handle);
+        } else {
+            const el1 = el.querySelectorAll('input')
+            if (el1.length > 0 && el1.item(0) instanceof HTMLInputElement) {
+                handle = setTimeout(() => (
+                    el1?.item(0) as HTMLInputElement
+                )?.focus(), 500)
+                timeoutHandles.set(el, handle)
+            }
+        }
+    },
+    onUnmounted(el: HTMLElement) {
+        if (timeoutHandles.has(el)) {
+            clearTimeout(timeoutHandles.get(el))
+            timeoutHandles.delete(el)
+        }
+    }
+}

package/packages/directives/index.ts

@@ -1,10 +1,10 @@
-import autofocus from "./autofocus";
-import shortcut from "./shortcut";
-import auth from "./auth";
-import type {App} from "vue";
-
-export function installDirectives(app: App) {
-    app.directive('focus', autofocus)
-    app.directive('shortcut', shortcut)
-    app.directive('auth', auth)
-}
+import autofocus from "./autofocus";
+import shortcut from "./shortcut";
+import auth from "./auth";
+import type {App} from "vue";
+
+export function installDirectives(app: App) {
+    app.directive('focus', autofocus)
+    app.directive('shortcut', shortcut)
+    app.directive('auth', auth)
+}

package/packages/directives/shortcut/index.ts

@@ -1,192 +1,192 @@
-import {
-    type DirectiveBinding,
-    type RendererElement,
-    type RendererNode,
-    type VNode
-} from "vue";
-
-function isValidShortcut(keys: string[]): boolean {
-    const validModifiers = ["Ctrl", "Alt", "Shift", "Meta"];
-    const validKeys = [
-        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
-        "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
-        "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "Tab",
-        "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12",
-        "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight",
-        "Enter", "Escape", "Space"
-    ];
-    if (keys.length < 2) {
-        return false;
-    }
-    for (let i = 0; i < keys.length - 1; i++) {
-        if (!validModifiers.includes(keys[i])) {
-            return false;
-        }
-    }
-    const mainKey = keys[keys.length - 1];
-    return validKeys.includes(mainKey);
-}
-
-type ShortCutCallback = (el: HTMLElement, binding: DirectiveBinding<ShortCutCallback>, vNode: VNode) => void;
-
-let currentHandler: Record<string, ShortcutHandlerStackItem> = {};
-
-function registerShortcut(binding: DirectiveBinding<ShortCutCallback>,
-                          el: HTMLElement,
-                          vNode: VNode<RendererNode, RendererElement, {
-                              [p: string]: any
-                          }>) {
-    const keys = binding.arg?.split('+') ?? [];
-    if (!keys || keys.length === 0) return;
-    if (isValidShortcut(keys)) {
-        if (el.__vueShortcutHandler__) {
-            return;
-        }
-        const handler = (event: KeyboardEvent) => {
-            let isMatch = true;
-            for (const key of keys) {
-                if (key === 'Ctrl' && !event.ctrlKey) isMatch = false;
-                if (key === 'Alt' && !event.altKey) isMatch = false;
-                if (key === 'Shift' && !event.shiftKey) isMatch = false;
-                if (key === 'Meta' && !event.metaKey) isMatch = false;
-            }
-            const mainKey = keys.length > 0 ? keys[keys.length - 1] : null;
-            if (event.key && mainKey && event.key.toUpperCase()
-                !== mainKey.toUpperCase()) isMatch = false;
-            let disabled = false;
-            if (vNode.component) {
-                disabled = vNode.component.props?.disabled as boolean
-            } else if (vNode.props) {
-                disabled = vNode.props.disabled as boolean
-            } else {
-                disabled = el.hasAttribute('disabled')
-            }
-            if (isMatch && !disabled) {
-                event.preventDefault();
-                if (binding.value) {
-                    binding.value(el, binding, vNode)
-                } else {
-                    el.focus();
-                    el.click();
-                }
-            }
-        };
-        doRegister({
-            keys: binding.arg,
-            handler,
-            el,
-            prev: currentHandler[binding.arg]
-        });
-    } else {
-        console.warn(`Invalid shortcut key combination: ${keys.join('+')}`);
-    }
-}
-
-function unregisterShortcut(el: HTMLElement) {
-    if (el.__vueShortcutHandler__) {
-        doUnregister(el.__vueShortcutHandler__);
-
-    }
-}
-
-function doRegister(item: ShortcutHandlerStackItem) {
-    const current = item.prev;
-    const doc = (
-        window.rawWindow ?? window
-    ).document;
-    if (current) {
-        doc.removeEventListener('keydown', current.handler);
-    }
-    doc.addEventListener('keydown', item.handler);
-    currentHandler[item.keys] = item;
-    item.el.__vueShortcutHandler__ = item;
-}
-
-function doUnregister(item: ShortcutHandlerStackItem) {
-    const current = currentHandler[item.keys];
-    if (current && current == item) {
-        const doc = (
-            window.rawWindow ?? window
-        ).document;
-        doc.removeEventListener('keydown', item.handler);
-        if (item.prev) {
-            doc.addEventListener('keydown', item.prev.handler);
-            currentHandler[item.keys] = item.prev;
-        } else {
-            currentHandler[item.keys] = undefined;
-        }
-    } else if (current) {
-        //如果不是当前快捷键，就从栈链中移除
-        let p = current;
-        while (p && p.prev != item) {
-            p = p.prev;
-        }
-        if (p) {
-            p.prev = item.prev;
-        }
-    }
-    if (item.prev) {
-        delete item.prev;
-    }
-    delete item.el.__vueShortcutHandler__;
-}
-
-// 判断元素是否可见的辅助函数
-const isElementVisible = (el: HTMLElement) => {
-    // 检查元素或其父元素是否被隐藏
-    if (el.offsetParent === null) {
-        return false; // 如果 offsetParent 为 null，说明元素或其父元素被隐藏
-    }
-
-    // 检查元素是否在视口内
-    const rect = el.getBoundingClientRect();
-    const win = window.rawWindow ?? window;
-    return (
-        rect.top <= win.innerHeight &&
-        rect.bottom >= 0 &&
-        rect.left <= win.innerWidth &&
-        rect.right >= 0
-    );
-};
-
-// 配置 Intersection Observer
-const observerOption = {
-    root: null, // 默认为视口
-    rootMargin: '0px',
-    threshold: 0.1, // 当 10% 的元素可见时触发
-};
-/**
- * 支持对元素标签点击事件添加快捷键触发，完整的写法：
- * <div v-shortcut:Alt+N="() => doClick()"></div>
- * 如果元素已经定义了click事件，那么可以简写为
- * <div v-shortcut:Alt+N @click="doClick"><div>
- */
-export default {
-    mounted(el: HTMLElement, binding: DirectiveBinding<ShortCutCallback>, vNode: VNode) {
-        // 如果元素已经可见，直接注册快捷键
-        if (isElementVisible(el)) {
-            registerShortcut(binding, el, vNode);
-        }
-        // 回调函数，处理可见性变化
-        const callback = (entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    // 元素可见时触发
-                    registerShortcut(binding, el, vNode);
-                } else {
-                    // 元素不可见时触发
-                    unregisterShortcut(el);
-                }
-            });
-        };
-        // 创建观察器
-        const observer = new IntersectionObserver(callback, observerOption);
-        el.__visibilityObserver__ = observer; // 将观察器挂载到元素上，便于卸载时使用
-        observer.observe(el); // 开始观察
-    },
-    unmounted(el: HTMLElement) {
-        el.__visibilityObserver__.disconnect();
-        delete el.__visibilityObserver__;
-        unregisterShortcut(el);
-    }
-};
+import {
+    type DirectiveBinding,
+    type RendererElement,
+    type RendererNode,
+    type VNode
+} from "vue";
+
+function isValidShortcut(keys: string[]): boolean {
+    const validModifiers = ["Ctrl", "Alt", "Shift", "Meta"];
+    const validKeys = [
+        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
+        "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
+        "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "Tab",
+        "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12",
+        "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight",
+        "Enter", "Escape", "Space"
+    ];
+    if (keys.length < 2) {
+        return false;
+    }
+    for (let i = 0; i < keys.length - 1; i++) {
+        if (!validModifiers.includes(keys[i])) {
+            return false;
+        }
+    }
+    const mainKey = keys[keys.length - 1];
+    return validKeys.includes(mainKey);
+}
+
+type ShortCutCallback = (el: HTMLElement, binding: DirectiveBinding<ShortCutCallback>, vNode: VNode) => void;
+
+let currentHandler: Record<string, ShortcutHandlerStackItem> = {};
+
+function registerShortcut(binding: DirectiveBinding<ShortCutCallback>,
+                          el: HTMLElement,
+                          vNode: VNode<RendererNode, RendererElement, {
+                              [p: string]: any
+                          }>) {
+    const keys = binding.arg?.split('+') ?? [];
+    if (!keys || keys.length === 0) return;
+    if (isValidShortcut(keys)) {
+        if (el.__vueShortcutHandler__) {
+            return;
+        }
+        const handler = (event: KeyboardEvent) => {
+            let isMatch = true;
+            for (const key of keys) {
+                if (key === 'Ctrl' && !event.ctrlKey) isMatch = false;
+                if (key === 'Alt' && !event.altKey) isMatch = false;
+                if (key === 'Shift' && !event.shiftKey) isMatch = false;
+                if (key === 'Meta' && !event.metaKey) isMatch = false;
+            }
+            const mainKey = keys.length > 0 ? keys[keys.length - 1] : null;
+            if (event.key && mainKey && event.key.toUpperCase()
+                !== mainKey.toUpperCase()) isMatch = false;
+            let disabled = false;
+            if (vNode.component) {
+                disabled = vNode.component.props?.disabled as boolean
+            } else if (vNode.props) {
+                disabled = vNode.props.disabled as boolean
+            } else {
+                disabled = el.hasAttribute('disabled')
+            }
+            if (isMatch && !disabled) {
+                event.preventDefault();
+                if (binding.value) {
+                    binding.value(el, binding, vNode)
+                } else {
+                    el.focus();
+                    el.click();
+                }
+            }
+        };
+        doRegister({
+            keys: binding.arg,
+            handler,
+            el,
+            prev: currentHandler[binding.arg]
+        });
+    } else {
+        console.warn(`Invalid shortcut key combination: ${keys.join('+')}`);
+    }
+}
+
+function unregisterShortcut(el: HTMLElement) {
+    if (el.__vueShortcutHandler__) {
+        doUnregister(el.__vueShortcutHandler__);
+
+    }
+}
+
+function doRegister(item: ShortcutHandlerStackItem) {
+    const current = item.prev;
+    const doc = (
+        window.rawWindow ?? window
+    ).document;
+    if (current) {
+        doc.removeEventListener('keydown', current.handler);
+    }
+    doc.addEventListener('keydown', item.handler);
+    currentHandler[item.keys] = item;
+    item.el.__vueShortcutHandler__ = item;
+}
+
+function doUnregister(item: ShortcutHandlerStackItem) {
+    const current = currentHandler[item.keys];
+    if (current && current == item) {
+        const doc = (
+            window.rawWindow ?? window
+        ).document;
+        doc.removeEventListener('keydown', item.handler);
+        if (item.prev) {
+            doc.addEventListener('keydown', item.prev.handler);
+            currentHandler[item.keys] = item.prev;
+        } else {
+            currentHandler[item.keys] = undefined;
+        }
+    } else if (current) {
+        //如果不是当前快捷键，就从栈链中移除
+        let p = current;
+        while (p && p.prev != item) {
+            p = p.prev;
+        }
+        if (p) {
+            p.prev = item.prev;
+        }
+    }
+    if (item.prev) {
+        delete item.prev;
+    }
+    delete item.el.__vueShortcutHandler__;
+}
+
+// 判断元素是否可见的辅助函数
+const isElementVisible = (el: HTMLElement) => {
+    // 检查元素或其父元素是否被隐藏
+    if (el.offsetParent === null) {
+        return false; // 如果 offsetParent 为 null，说明元素或其父元素被隐藏
+    }
+
+    // 检查元素是否在视口内
+    const rect = el.getBoundingClientRect();
+    const win = window.rawWindow ?? window;
+    return (
+        rect.top <= win.innerHeight &&
+        rect.bottom >= 0 &&
+        rect.left <= win.innerWidth &&
+        rect.right >= 0
+    );
+};
+
+// 配置 Intersection Observer
+const observerOption = {
+    root: null, // 默认为视口
+    rootMargin: '0px',
+    threshold: 0.1, // 当 10% 的元素可见时触发
+};
+/**
+ * 支持对元素标签点击事件添加快捷键触发，完整的写法：
+ * <div v-shortcut:Alt+N="() => doClick()"></div>
+ * 如果元素已经定义了click事件，那么可以简写为
+ * <div v-shortcut:Alt+N @click="doClick"><div>
+ */
+export default {
+    mounted(el: HTMLElement, binding: DirectiveBinding<ShortCutCallback>, vNode: VNode) {
+        // 如果元素已经可见，直接注册快捷键
+        if (isElementVisible(el)) {
+            registerShortcut(binding, el, vNode);
+        }
+        // 回调函数，处理可见性变化
+        const callback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    // 元素可见时触发
+                    registerShortcut(binding, el, vNode);
+                } else {
+                    // 元素不可见时触发
+                    unregisterShortcut(el);
+                }
+            });
+        };
+        // 创建观察器
+        const observer = new IntersectionObserver(callback, observerOption);
+        el.__visibilityObserver__ = observer; // 将观察器挂载到元素上，便于卸载时使用
+        observer.observe(el); // 开始观察
+    },
+    unmounted(el: HTMLElement) {
+        el.__visibilityObserver__.disconnect();
+        delete el.__visibilityObserver__;
+        unregisterShortcut(el);
+    }
+};

package/packages/hooks/useAppInstances.ts

@@ -1,34 +1,34 @@
-import {type AppInstance, createAxiosWithoutCache, useAppApi} from "@jari-ace/app-bolts";
-
-
-let appCache: AppInstance[] = [];
-
-export async function useAppInstances() {
-    const axios = createAxiosWithoutCache()
-    const api = useAppApi(axios)
-    if (appCache.length === 0) {
-        appCache = await api.getAll(true);
-    }
-    return {
-        async getById(appId: string) {
-            let app = appCache.find(a => a.id === appId);
-            if (!app) {
-                app = await api.getById(appId);
-                if (app) {
-                    appCache.push(app);
-                }
-            }
-            return app;
-        },
-        async getByName(appName: string) {
-            let app = appCache.find(a => a.name === appName);
-            if (!app) {
-                app = await api.getByName(appName);
-                if (app) {
-                    appCache.push(app);
-                }
-            }
-            return app;
-        }
-    }
-}
+import {type AppInstance, createAxiosWithoutCache, useAppApi} from "@jari-ace/app-bolts";
+
+
+let appCache: AppInstance[] = [];
+
+export async function useAppInstances() {
+    const axios = createAxiosWithoutCache()
+    const api = useAppApi(axios)
+    if (appCache.length === 0) {
+        appCache = await api.getAll(true);
+    }
+    return {
+        async getById(appId: string) {
+            let app = appCache.find(a => a.id === appId);
+            if (!app) {
+                app = await api.getById(appId);
+                if (app) {
+                    appCache.push(app);
+                }
+            }
+            return app;
+        },
+        async getByName(appName: string) {
+            let app = appCache.find(a => a.name === appName);
+            if (!app) {
+                app = await api.getByName(appName);
+                if (app) {
+                    appCache.push(app);
+                }
+            }
+            return app;
+        }
+    }
+}