cnhis-design-vue 3.1.17-beta.9 → 3.1.18-beta.3

package/es/components/shortcut-provider/index.d.ts

@@ -0,0 +1,23 @@
+import { SFCWithInstall } from '../../../es/shared/types';
+export * from './src/hooks';
+export * from './src/types';
+declare const ShortcutProvider: SFCWithInstall<import("vue").DefineComponent<{
+    scope: {
+        type: (SymbolConstructor | StringConstructor)[];
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        scope: {
+            type: (SymbolConstructor | StringConstructor)[];
+        };
+    }>> & {
+        [x: `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
+    shortcutWrapperRef: import("vue").Ref<HTMLElement | undefined>;
+    manager: import("./src/hooks").ShortcutManager;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scope: {
+        type: (SymbolConstructor | StringConstructor)[];
+    };
+}>>, {}>>;
+export default ShortcutProvider;

package/es/components/shortcut-provider/index.js

@@ -0,0 +1,12 @@
+import { COMPONENT_NAMESPACE } from '../../shared/global/variable.js';
+import { safeComponentRegister } from '../../shared/utils/index.js';
+import script from './src/ShortcutProvider.js';
+export { GlobalShortcutProvider, ShortcutManager, useShortcuts } from './src/hooks/useShortcuts.js';
+export { useShortcutSignature } from './src/hooks/useShortcutSignature.js';
+
+const ShortcutProvider = script;
+ShortcutProvider.install = function(app) {
+  safeComponentRegister(app, ShortcutProvider, COMPONENT_NAMESPACE + "ShortcutProvider");
+};
+
+export { ShortcutProvider as default };

package/es/components/shortcut-provider/src/ShortcutProvider.js

@@ -0,0 +1,35 @@
+import { defineComponent, ref, provide, onBeforeUnmount, openBlock, createElementBlock, renderSlot } from 'vue';
+import { InjectionShortcutManager } from './constants/index.js';
+import '../index.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+import { ShortcutManager } from './hooks/useShortcuts.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ShortcutProvider",
+  props: {
+    scope: { type: [String, Symbol] }
+  },
+  setup(__props) {
+    const props = __props;
+    const shortcutWrapperRef = ref();
+    const manager = new ShortcutManager(shortcutWrapperRef, props.scope || String(Date.now())).start();
+    provide(InjectionShortcutManager, manager);
+    onBeforeUnmount(() => {
+      manager.destroy();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", {
+        ref_key: "shortcutWrapperRef",
+        ref: shortcutWrapperRef,
+        "is-shortcut-capture": "",
+        class: "shortcut-provider",
+        tabindex: -9999
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+var script = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "ShortcutProvider.vue"]]);
+
+export { script as default };

package/es/components/shortcut-provider/src/ShortcutProvider.vue.d.ts

@@ -0,0 +1,21 @@
+import { ShortcutManager } from '../../../../es/components/shortcut-provider';
+declare const _default: import("vue").DefineComponent<{
+    scope: {
+        type: (SymbolConstructor | StringConstructor)[];
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        scope: {
+            type: (SymbolConstructor | StringConstructor)[];
+        };
+    }>> & {
+        [x: `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
+    shortcutWrapperRef: import("vue").Ref<HTMLElement | undefined>;
+    manager: ShortcutManager;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scope: {
+        type: (SymbolConstructor | StringConstructor)[];
+    };
+}>>, {}>;
+export default _default;

package/es/components/shortcut-provider/src/constants/index.d.ts

@@ -0,0 +1,7 @@
+import { InjectionKey } from 'vue';
+import { ShortcutManager } from '../../../../../es/components/shortcut-provider/src/hooks';
+export declare enum ShortcutStatus {
+    INACTIVE = 0,
+    ACTIVE = 1
+}
+export declare const InjectionShortcutManager: InjectionKey<ShortcutManager>;

package/es/components/shortcut-provider/src/hooks/useShortcutSignature.js

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue';
+import { transformKey2DisplaySignature } from '../utils/index.js';
+
+function useShortcutSignature() {
+  const signatureRef = ref(() => "");
+  const shortcut = computed(() => {
+    return transformKey2DisplaySignature(signatureRef.value());
+  });
+  return { signatureRef, shortcut };
+}
+
+export { useShortcutSignature };

package/es/components/shortcut-provider/src/hooks/useShortcuts.d.ts

@@ -0,0 +1,33 @@
+import { MaybeRef } from '@vueuse/core';
+import { ShortcutItem, ShortcutOption, ShortcutSignatureInfo } from '../../../../../es/components/shortcut-provider/src/types';
+export declare const GlobalShortcutProvider: unique symbol;
+export declare class ShortcutManager {
+    private readonly shortcutCallbackMap;
+    private readonly shortcutCache;
+    private readonly environmentEle;
+    private handle?;
+    disabled: boolean;
+    static log(message: string, dryRun?: boolean): string;
+    constructor(environmentEle?: MaybeRef<HTMLElement | undefined>, scope?: string | Symbol);
+    get traverse(): Omit<ShortcutItem, "callback">[];
+    private query;
+    update(key: string, info: KeyboardEvent | Partial<ShortcutSignatureInfo>): Promise<void>;
+    register(shortcutItem: ShortcutItem): {
+        stop: () => void;
+        start: () => void;
+        signature: () => string;
+    };
+    start(): this;
+    destroy(): void;
+    clear(): void;
+}
+export declare function useShortcuts(scope?: MaybeRef<string | Symbol | undefined>): {
+    register: (shortcut: ShortcutOption) => {
+        stop: () => void;
+        signature: () => string;
+    };
+    traverse: () => Omit<ShortcutItem, "callback">[];
+    clear: () => void;
+    update: (key: string, info: KeyboardEvent | Partial<ShortcutSignatureInfo>) => Promise<void>;
+    updateManagerDisabled: (disabled?: boolean) => void;
+};

package/es/components/shortcut-provider/src/hooks/useShortcuts.js

@@ -0,0 +1,181 @@
+import { useEventListener, useDebounceFn } from '@vueuse/core';
+import { pick, omit, isFunction, isString } from 'lodash-es';
+import { reactive, ref, unref, computed, getCurrentInstance, inject, onBeforeUnmount, onDeactivated, onActivated } from 'vue';
+import { ShortcutStatus, InjectionShortcutManager } from '../constants/index.js';
+import { normalizeSignatureInfo, getKeySignature, getDisplaySignature, isInvalidSignature, isKeyboardEvent, findAncestor, isShortcutProvider } from '../utils/index.js';
+
+const GlobalShortcutProvider = Symbol("Glob");
+const ShortcutManagerCacheMap = /* @__PURE__ */ new Map();
+class ShortcutManager {
+  constructor(environmentEle, scope = GlobalShortcutProvider) {
+    this.shortcutCallbackMap = reactive(/* @__PURE__ */ new Map());
+    this.shortcutCache = ref({});
+    this.disabled = false;
+    this.environmentEle = environmentEle || window;
+    ShortcutManagerCacheMap.set(scope, this);
+  }
+  static log(message, dryRun = false) {
+    const _message = `[ShortcutManager] ${message}`;
+    !dryRun && console.warn(_message);
+    return _message;
+  }
+  get traverse() {
+    return [...Object.values(this.shortcutCache.value)].sort((a, b) => (a.order || 0) - (b.order || 0));
+  }
+  query(key) {
+    return this.shortcutCache.value[key];
+  }
+  async update(key, info) {
+    var _a, _b;
+    const oldKeySignature = (_a = this.query(key)) == null ? void 0 : _a.currentKeySignature;
+    info && checkSignature(this.shortcutCache, info);
+    const item = this.query(key);
+    if (!item)
+      return;
+    await ((_b = item.onUpdate) == null ? void 0 : _b.call(item, key, info ? normalizeSignatureInfo(info) : void 0));
+    checkSignature(this.shortcutCache, info);
+    item.currentKeySignature = getKeySignature(info);
+    item.shortcutSignature = normalizeSignatureInfo(info);
+    this.shortcutCallbackMap.set(item.currentKeySignature, this.shortcutCallbackMap.get(oldKeySignature));
+    this.shortcutCallbackMap.delete(oldKeySignature);
+    function checkSignature(shortcutCache, info2) {
+      if (oldKeySignature === getKeySignature(info2))
+        return;
+      if (Object.values(shortcutCache.value).some((v) => v.currentKeySignature === getKeySignature(info2))) {
+        throw `\u91CD\u590D\u7684\u5FEB\u6377\u952E=> ${getDisplaySignature(info2)}`;
+      }
+      if (isInvalidSignature(info2)) {
+        throw `\u975E\u6CD5\u7684\u5FEB\u6377\u952E=>${info2.key}`;
+      }
+    }
+  }
+  register(shortcutItem) {
+    const item = this.query(shortcutItem.key);
+    if (item) {
+      item.status = ShortcutStatus.ACTIVE;
+      this.shortcutCallbackMap.set(item.currentKeySignature, shortcutItem.callback);
+      Object.assign(item, pick(shortcutItem, ["debounce", "debounceOption", "label", "order", "key"]));
+      return createHandler(item);
+    }
+    this.shortcutCache.value[shortcutItem.key] = omit(shortcutItem, ["callback"]);
+    this.shortcutCallbackMap.set(shortcutItem.currentKeySignature, shortcutItem.callback);
+    return createHandler(this.shortcutCache.value[shortcutItem.key]);
+    function createHandler(shortcut) {
+      return {
+        stop: () => {
+          shortcut.status = ShortcutStatus.INACTIVE;
+        },
+        start: () => {
+          shortcut.status = ShortcutStatus.ACTIVE;
+        },
+        signature: () => shortcut.currentKeySignature
+      };
+    }
+  }
+  start() {
+    if (this.handle) {
+      ShortcutManager.log(`\u8BF7\u52FF\u91CD\u590D\u542F\u52A8=>${this}`);
+      return this;
+    }
+    this.handle = async (event) => {
+      if (!isKeyboardEvent(event) || this.disabled)
+        return;
+      const providerWrapper = findAncestor(event.target, isShortcutProvider);
+      if (providerWrapper && providerWrapper !== unref(this.environmentEle)) {
+        return;
+      }
+      const keySignature = getKeySignature(event);
+      const callback = this.shortcutCallbackMap.get(keySignature);
+      if (!callback)
+        return;
+      event.preventDefault();
+      const shortcutItem = Object.values(this.shortcutCache.value).find((item) => item.currentKeySignature === keySignature);
+      if (!shortcutItem || shortcutItem.status !== ShortcutStatus.ACTIVE || shortcutItem.disabled)
+        return;
+      callback();
+    };
+    useEventListener(this.environmentEle, "keyup", this.handle, { capture: true });
+    return this;
+  }
+  destroy() {
+    var _a;
+    this.handle && ((_a = unref(this.environmentEle)) == null ? void 0 : _a.removeEventListener("keyup", this.handle, { capture: true }));
+    this.handle = void 0;
+    this.clear();
+  }
+  clear() {
+    this.shortcutCallbackMap.clear();
+    this.shortcutCache.value = {};
+  }
+}
+const globManager = new ShortcutManager().start();
+function useShortcuts(scope) {
+  function useManager() {
+    return computed(() => {
+      if (unref(scope)) {
+        const result = ShortcutManagerCacheMap.get(unref(scope));
+        if (!result)
+          ShortcutManager.log(`\u4E0D\u5B58\u5728\u7684scope=>${scope}, \u5C06\u4F7F\u7528\u5168\u5C40\u5FEB\u6377\u952E`);
+        return result || globManager;
+      } else if (getCurrentInstance()) {
+        return inject(InjectionShortcutManager, globManager);
+      } else {
+        ShortcutManager.log("\u975Esetup\u8BED\u5883\u4E0B\u7684shortcut\u5C06\u5F71\u54CD\u5168\u5C40");
+        return globManager;
+      }
+    });
+  }
+  const manager = useManager();
+  function createShortcutItem(shortcut) {
+    return {
+      ...shortcut,
+      shortcutSignature: normalizeSignatureInfo(shortcut.shortcutSignature),
+      currentKeySignature: getKeySignature(shortcut.shortcutSignature),
+      key: keyFor(shortcut),
+      status: ShortcutStatus.ACTIVE,
+      callback: callbackFor(shortcut)
+    };
+    function callbackFor(shortcut2) {
+      var _a, _b;
+      if (!isFunction(shortcut2.callback)) {
+        throw new Error(ShortcutManager.log(`\u975E\u6CD5\u7684callback\u7C7B\u578B=>${shortcut2.callback}`, true));
+      }
+      if (!shortcut2.debounce)
+        return shortcut2.callback;
+      return useDebounceFn(shortcut2.callback, (_b = (_a = shortcut2.debounceOption) == null ? void 0 : _a.duration) != null ? _b : 300);
+    }
+    function keyFor(shortcut2) {
+      const key = shortcut2.key || shortcut2.label;
+      if (!isString(key)) {
+        throw new Error(ShortcutManager.log(`\u975E\u6CD5\u7684key\u7C7B\u578B=>${key}`, true));
+      }
+      return key;
+    }
+  }
+  function register(shortcut) {
+    const { stop, signature, start } = unref(manager).register(createShortcutItem(shortcut));
+    if (getCurrentInstance()) {
+      onBeforeUnmount(stop);
+      onDeactivated(stop);
+      onActivated(start);
+    } else {
+      ShortcutManager.log("\u5728\u975Esetup\u8BED\u5883\u4E0B\u4F7F\u7528register\u51FD\u6570,\u7EC4\u4EF6\u9500\u6BC1\u65F6\u53EF\u80FD\u9700\u8981\u624B\u52A8\u8C03\u7528stop\u51FD\u6570\u4F7F\u5FEB\u6377\u952E\u5931\u6D3B");
+    }
+    return { stop, signature };
+  }
+  function traverse() {
+    return unref(manager).traverse;
+  }
+  function update(key, info) {
+    return unref(manager).update(key, info);
+  }
+  function updateManagerDisabled(disabled) {
+    unref(manager).disabled = !!disabled;
+  }
+  function clear() {
+    unref(manager).clear();
+  }
+  return { register, traverse, clear, update, updateManagerDisabled };
+}
+
+export { GlobalShortcutProvider, ShortcutManager, useShortcuts };

package/es/components/shortcut-provider/src/types/index.d.ts

@@ -0,0 +1,43 @@
+import { ShortcutStatus } from '../../../../../es/components/shortcut-provider/src/constants';
+export interface ShortcutSignatureInfo {
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    key: string;
+}
+export declare type ShortcutOption = {
+    label: string;
+    shortcutSignature: ShortcutSignatureInfo;
+    callback(): void;
+} & Partial<{
+    /**
+     * @description 更新快捷键回调
+     * @param key
+     * @param newSignature 用户输入的快捷键签名
+     */
+    onUpdate(key: string, newSignature?: ShortcutSignatureInfo): Promise<void>;
+    /**
+     * 快捷键输入框展位文本
+     */
+    placeholder: string;
+    /**
+     * 快捷键输入框编辑状态下的展位文本
+     */
+    editPlaceholder: string;
+    key: string;
+    order: number;
+    disabled: boolean;
+    debounce: boolean;
+    debounceOption: {
+        duration?: number;
+    };
+    /**
+     * 快捷键编辑组件的操作按钮
+     */
+    operation: Array<'state' | 'reset'>;
+}>;
+export interface ShortcutItem extends ShortcutOption {
+    status: ShortcutStatus;
+    currentKeySignature: string;
+    key: string;
+}

package/es/components/shortcut-provider/src/utils/index.d.ts

@@ -0,0 +1,10 @@
+import { ShortcutSignatureInfo } from '../../../../../es/components/shortcut-provider/src/types';
+export declare function isKeyboardEvent(event: any): event is KeyboardEvent;
+export declare function normalizeSignatureInfo(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): Required<ShortcutSignatureInfo>;
+export declare function getKeySignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): string;
+export declare function inKeyBlackList(key: string): boolean | undefined;
+export declare function isInvalidSignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): boolean | undefined;
+export declare function getDisplaySignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): string;
+export declare function transformKey2DisplaySignature(keySignature: string): string;
+export declare function isShortcutProvider(ele: HTMLElement): boolean;
+export declare function findAncestor(ele: HTMLElement | null, finder: (ele: HTMLElement) => boolean): HTMLElement | null;