cnhis-design-vue 3.1.23-beta.2 → 3.1.23-beta.3

package/es/components/search-cascader/src/SearchCascader.js

@@ -0,0 +1,183 @@
+import { defineComponent, ref, computed, provide, nextTick, openBlock, createBlock, unref, normalizeStyle, withCtx, createVNode, isRef, createElementVNode, renderSlot } from 'vue';
+import { uuidGenerator } from '../../../shared/utils/index2.js';
+import { onClickOutside, useDebounceFn } from '@vueuse/core';
+import { isString, isArray, isFunction } from 'lodash-es';
+import { NPopover, NInput } from 'naive-ui';
+import { InjectionSearchCascaderLoadingNode } from './constants/index2.js';
+import { useCssVariable } from './hooks/useCssVariable2.js';
+import { getParentNodeList } from './utils/index2.js';
+import { SearchMenu } from './components/SearchMenu.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchCascader",
+  props: {
+    value: { type: [String, Array] },
+    clearable: { type: Boolean, default: false },
+    childKey: { type: String, default: "children" },
+    placeholder: { type: String, default: "\u8BF7\u9009\u62E9" },
+    fetchOptions: { type: Function },
+    beforeSetValue: { type: Function }
+  },
+  emits: ["update:value"],
+  setup(__props, { expose, emit: emits }) {
+    const props = __props;
+    function onClear() {
+      emits("update:value", []);
+    }
+    const cssVariable = useCssVariable();
+    const optionsRef = ref([{}]);
+    const uuid = uuidGenerator();
+    const show = ref(false);
+    const patternContent = ref("");
+    const displayValue = computed({
+      get() {
+        if (show.value)
+          return patternContent.value;
+        if (isString(props.value))
+          return props.value;
+        if (isArray(props.value))
+          return arrayOptionsToString(props.value);
+        return "";
+        function arrayOptionsToString(optionList) {
+          return optionList.reduce((res, item, idx) => {
+            if (idx === 0)
+              return item.label;
+            return res + " / " + item.label;
+          }, "");
+        }
+      },
+      set(value) {
+        patternContent.value = value;
+        search(void 0, value);
+      }
+    });
+    function openMenu() {
+      if (show.value)
+        return;
+      optionsRef.value = [];
+      show.value = true;
+      patternContent.value = "";
+      search();
+    }
+    async function closeMenu() {
+      var _a;
+      show.value = false;
+      (_a = inputRef.value) == null ? void 0 : _a.blur();
+    }
+    const inputRef = ref();
+    onClickOutside(inputRef, (evt) => {
+      var _a;
+      if (!show.value)
+        return;
+      if (!evt.target)
+        return closeMenu();
+      if (isInPopper(evt.target)) {
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+        return;
+      }
+      closeMenu();
+      function isInPopper(targetEle) {
+        let result = false;
+        let current = targetEle;
+        while (current) {
+          if (current.id === uuid) {
+            result = true;
+            break;
+          }
+          current = current.parentElement;
+        }
+        return result;
+      }
+    });
+    const popoverRef = ref();
+    const currentNode = ref();
+    const loadingNode = ref(null);
+    provide(InjectionSearchCascaderLoadingNode, loadingNode);
+    const search = useDebounceFn(async (node, keyword) => {
+      var _a;
+      if (!isFunction(props.fetchOptions)) {
+        emits("update:value", node ? [node] : []);
+        return closeMenu();
+      }
+      loadingNode.value = node;
+      try {
+        const options = await props.fetchOptions(node, keyword);
+        if (!isValidOption(options)) {
+          if (!node)
+            return;
+          node.isLeaf = true;
+          emits("update:value", getParentNodeList(node));
+          return closeMenu();
+        }
+        if (node) {
+          node[props.childKey] = options.map((option) => enrichOption(option, node));
+        } else {
+          optionsRef.value = options;
+        }
+        currentNode.value = node;
+      } finally {
+        loadingNode.value = null;
+        await nextTick();
+        (_a = popoverRef.value) == null ? void 0 : _a.syncPosition();
+      }
+      function enrichOption(option, parent) {
+        return { ...option, parent };
+      }
+      function isValidOption(options) {
+        return isArray(options) && !!options.length;
+      }
+    }, 400);
+    expose({
+      setOptions(options) {
+        optionsRef.value = options;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NPopover), {
+        class: "search-cascader",
+        trigger: "manual",
+        show: show.value,
+        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => show.value = $event),
+        "show-arrow": false,
+        placement: "bottom-start",
+        style: normalizeStyle(unref(cssVariable)),
+        width: optionsRef.value.length ? void 0 : "trigger",
+        ref_key: "popoverRef",
+        ref: popoverRef
+      }, {
+        trigger: withCtx(() => [
+          createVNode(unref(NInput), {
+            placeholder: __props.placeholder,
+            clearable: __props.clearable,
+            onClear,
+            value: unref(displayValue),
+            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(displayValue) ? displayValue.value = $event : null),
+            ref_key: "inputRef",
+            ref: inputRef,
+            onFocus: openMenu
+          }, null, 8, ["placeholder", "clearable", "value"])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("section", { id: unref(uuid) }, [
+            createVNode(unref(SearchMenu), {
+              options: optionsRef.value,
+              onNodeClick: unref(search),
+              "current-node": currentNode.value
+            }, {
+              empty: withCtx(() => [
+                renderSlot(_ctx.$slots, "empty")
+              ]),
+              _: 3
+            }, 8, ["options", "onNodeClick", "current-node"])
+          ], 8, _hoisted_1)
+        ]),
+        _: 3
+      }, 8, ["show", "style", "width"]);
+    };
+  }
+});
+var script = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "SearchCascader.vue"]]);
+
+export { script as default };

package/es/components/search-cascader/src/SearchCascader.vue.d.ts

@@ -0,0 +1,135 @@
+import { AnyObject, Func, Nullable } from '../../../../es/shared/types';
+import { PropType } from 'vue';
+declare type ValueType = string | AnyObject[];
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: PropType<ValueType>;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    childKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    fetchOptions: {
+        type: PropType<Func<any[], any>>;
+    };
+    beforeSetValue: {
+        type: PropType<(value: ValueType) => void | ValueType | Promise<ValueType>>;
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        value: {
+            type: PropType<ValueType>;
+        };
+        clearable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        childKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        placeholder: {
+            type: StringConstructor;
+            default: string;
+        };
+        fetchOptions: {
+            type: PropType<Func<any[], any>>;
+        };
+        beforeSetValue: {
+            type: PropType<(value: ValueType) => void | ValueType | Promise<ValueType>>;
+        };
+    }>> & {
+        "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    }>>;
+    emits: (event: "update:value", ...args: any[]) => void;
+    emitValue: (value: unknown) => void;
+    onClear: () => void;
+    cssVariable: {
+        '--menu-width': number;
+    };
+    optionsRef: import("vue").Ref<AnyObject[]>;
+    uuid: string;
+    show: import("vue").Ref<boolean>;
+    patternContent: import("vue").Ref<string>;
+    displayValue: import("vue").WritableComputedRef<string>;
+    openMenu: () => void;
+    closeMenu: () => Promise<void>;
+    inputRef: import("vue").Ref<any>;
+    popoverRef: import("vue").Ref<any>;
+    currentNode: import("vue").Ref<AnyObject | undefined>;
+    loadingNode: import("vue").Ref<Nullable<AnyObject>>;
+    search: (node?: AnyObject, keyword?: string) => Promise<void>;
+    NInput: any;
+    NPopover: any;
+    SearchMenu: import("vue").DefineComponent<{
+        childKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        options: {
+            type: PropType<AnyObject[]>;
+            default: () => never[];
+        };
+        onNodeClick: {
+            type: PropType<Func<any[], any>>;
+        };
+        currentNode: {
+            type: PropType<AnyObject>;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        childKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        options: {
+            type: PropType<AnyObject[]>;
+            default: () => never[];
+        };
+        onNodeClick: {
+            type: PropType<Func<any[], any>>;
+        };
+        currentNode: {
+            type: PropType<AnyObject>;
+        };
+    }>>, {
+        options: AnyObject[];
+        childKey: string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<ValueType>;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    childKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    fetchOptions: {
+        type: PropType<Func<any[], any>>;
+    };
+    beforeSetValue: {
+        type: PropType<(value: ValueType) => void | ValueType | Promise<ValueType>>;
+    };
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    placeholder: string;
+    clearable: boolean;
+    childKey: string;
+}>;
+export default _default;

package/es/components/search-cascader/src/components/SearchMenu.d.ts

@@ -0,0 +1,36 @@
+import { AnyObject, Func } from '../../../../../es/shared/types';
+import { PropType } from 'vue';
+export declare const SearchMenu: import("vue").DefineComponent<{
+    childKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    onNodeClick: {
+        type: PropType<Func<any[], any>>;
+    };
+    currentNode: {
+        type: PropType<AnyObject>;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    childKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    onNodeClick: {
+        type: PropType<Func<any[], any>>;
+    };
+    currentNode: {
+        type: PropType<AnyObject>;
+    };
+}>>, {
+    options: AnyObject[];
+    childKey: string;
+}>;

package/es/components/search-cascader/src/components/SearchMenu.js

@@ -0,0 +1,125 @@
+import { defineComponent, computed, inject, createVNode, ref, createTextVNode } from 'vue';
+import { traverse } from '../../../../shared/utils/index2.js';
+import { Reload, ChevronForward } from '@vicons/ionicons5';
+import { useVirtualList } from '@vueuse/core';
+import { isArray, isFunction } from 'lodash-es';
+import { InjectionSearchCascaderLoadingNode } from '../constants/index2.js';
+
+const SearchMenuList = defineComponent({
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    activeNodes: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["nodeClick"],
+  setup(props, {
+    emit
+  }) {
+    const optionsRef = computed(() => props.options);
+    const {
+      list,
+      containerProps,
+      wrapperProps
+    } = useVirtualList(optionsRef, {
+      itemHeight: 32,
+      overscan: 5
+    });
+    const loadingNode = inject(InjectionSearchCascaderLoadingNode);
+    return () => {
+      return createVNode("div", {
+        "class": "search-cascader__optionWrapper",
+        "ref": containerProps.ref,
+        "style": containerProps.style,
+        "onScroll": containerProps.onScroll
+      }, [createVNode("div", {
+        "style": wrapperProps.value.style
+      }, [list.value.map((item) => {
+        var _a;
+        return createVNode("div", {
+          "class": ["search-cascader__option", {
+            "search-cascader__option--active": (_a = props.activeNodes) == null ? void 0 : _a.includes(item.data)
+          }],
+          "onClick": () => emit("nodeClick", item.data),
+          "title": item.data.label
+        }, [createVNode("div", {
+          "class": "search-cascader__optionText"
+        }, [item.data.label]), loadingNode.value === item.data ? createVNode(Reload, {
+          "class": "rotate"
+        }, null) : item.data.isLeaf ? null : createVNode(ChevronForward, null, null)]);
+      })])]);
+    };
+  }
+});
+const SearchMenu = defineComponent({
+  props: {
+    childKey: {
+      type: String,
+      default: "children"
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    onNodeClick: {
+      type: Function
+    },
+    currentNode: {
+      type: Object
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const activeNodes = ref([]);
+    function renderList(options) {
+      return createVNode(SearchMenuList, {
+        "activeNodes": activeNodes.value,
+        "onNodeClick": props.onNodeClick,
+        "options": options
+      }, null);
+    }
+    function renderEmpty() {
+      return createVNode("section", {
+        "class": "search-cascader__emptyWrapper"
+      }, [isFunction(slots.empty) ? slots.empty() : createVNode("section", null, [createTextVNode("empty")])]);
+    }
+    function isNodeExpand(node) {
+      let result = false;
+      traverse(node, (n, stop) => {
+        if (n !== props.currentNode)
+          return;
+        result = true;
+        stop();
+      }, ["children"]);
+      return result;
+    }
+    function getRenderNodeList() {
+      if (!isArray(props.options) || !props.currentNode)
+        return [];
+      const result = [props.options];
+      let _options = props.options;
+      activeNodes.value.length = 0;
+      while (isArray(_options)) {
+        const expandNode = _options.find(isNodeExpand);
+        if (!expandNode)
+          break;
+        activeNodes.value.push(expandNode);
+        _options = expandNode[props.childKey];
+        result.push(_options);
+      }
+      return result;
+    }
+    return () => {
+      return createVNode("section", {
+        "class": "search-cascader__menuWrapper"
+      }, [!isArray(props.options) || !props.options.length ? renderEmpty() : !props.currentNode ? renderList(props.options) : getRenderNodeList().map(renderList)]);
+    };
+  }
+});
+
+export { SearchMenu };

package/es/components/search-cascader/src/components/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchMenu';

package/es/components/search-cascader/src/components/index.js

@@ -0,0 +1 @@
+export { SearchMenu } from './SearchMenu.js';

package/es/components/search-cascader/src/constants/index.d.ts

@@ -0,0 +1,3 @@
+import { AnyObject, Nullable } from '../../../../../es/shared/types';
+import { InjectionKey, Ref } from 'vue';
+export declare const InjectionSearchCascaderLoadingNode: InjectionKey<Ref<Nullable<AnyObject>>>;

package/es/components/search-cascader/src/constants/index.js

@@ -0,0 +1 @@
+export { InjectionSearchCascaderLoadingNode } from './index2.js';

package/es/components/search-cascader/src/constants/index2.js

@@ -0,0 +1,3 @@
+const InjectionSearchCascaderLoadingNode = Symbol("InjectionSearchCascaderLoadingNode ");
+
+export { InjectionSearchCascaderLoadingNode };

package/es/components/search-cascader/src/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useCssVariable';

package/es/components/search-cascader/src/hooks/index.js

@@ -0,0 +1 @@
+export { useCssVariable } from './useCssVariable2.js';

package/es/components/search-cascader/src/hooks/useCssVariable.d.ts

@@ -0,0 +1,3 @@
+export declare function useCssVariable(): {
+    '--menu-width': number;
+};

package/es/components/search-cascader/src/hooks/useCssVariable.js

@@ -0,0 +1 @@
+export { useCssVariable } from './useCssVariable2.js';

package/es/components/search-cascader/src/hooks/useCssVariable2.js

@@ -0,0 +1,7 @@
+function useCssVariable() {
+  return {
+    "--menu-width": 150
+  };
+}
+
+export { useCssVariable };

package/es/components/search-cascader/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { AnyObject } from '../../../../../es/shared/types';
+export declare function getParentNodeList(node: AnyObject): never[];

package/es/components/search-cascader/src/utils/index.js

@@ -0,0 +1 @@
+export { getParentNodeList } from './index2.js';

package/es/components/search-cascader/src/utils/index2.js

@@ -0,0 +1,11 @@
+function getParentNodeList(node) {
+  const result = [];
+  let currentNode = node;
+  while (currentNode) {
+    result.unshift(currentNode);
+    currentNode = currentNode.parent;
+  }
+  return result;
+}
+
+export { getParentNodeList };

package/es/components/search-cascader/style/index.css

@@ -0,0 +1 @@
+.search-cascader__menuWrapper{display:flex;flex-wrap:nowrap;margin:-8px -14px}.search-cascader__option{align-items:center;border-radius:4px;box-sizing:border-box;display:flex;height:32px;justify-content:space-between;padding:0 8px 0 16px;width:100%}.search-cascader__option--active{background:#f8f8f8}.search-cascader__option:hover{background:#f5f5f5;cursor:pointer}.search-cascader__optionWrapper{background:#fff;height:256px;overflow-x:auto;width:calc(var(--menu-width)*1px)}.search-cascader__optionWrapper:not(:last-of-type){border:solid #e5e5e5;border-width:0 1px 0 0}.search-cascader__optionText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 20px)}.search-cascader__option svg{color:#bfbfbf;flex-shrink:0;font-size:12px;width:20px}.search-cascader__option svg.rotate{animation:rotate 1s linear infinite}.search-cascader__emptyWrapper{align-items:center;background:#fff;box-sizing:border-box;display:flex;height:200px;justify-content:center;padding:16px;width:100%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}

package/es/shared/utils/index.d.ts

@@ -1,6 +1,6 @@
 import { AnyObject, ArrayAble } from '../../../es/shared/types';
 import { App, Component } from 'vue';
-export declare function traverse<T extends ArrayAble<AnyObject>>(target: T, handler: (item: T extends Array<infer P> ? P : T) => void, keys?: ArrayAble<string>): void;
+export declare function traverse<T extends ArrayAble<AnyObject>>(target: T, handler: (item: T extends Array<infer P> ? P : T, stop: () => void) => void, keys?: ArrayAble<string>): void;
 export declare function safeComponentRegister(app: App, component: Component, cName?: string | undefined, scheduler?: () => void): void;
 export declare function generateTimeFormat(format: string): string | undefined;
 export declare function arrayed<T>(maybeArray: T): T extends Array<any> ? T : [T];

package/es/shared/utils/index2.js

@@ -2,12 +2,21 @@ import { useMemoize } from '@vueuse/core';
 import { isArray, isString } from 'lodash-es';
 
 function traverse(target, handler, keys = "children") {
-  arrayed(target).forEach((item) => {
-    handler(item);
-    arrayed(keys).forEach((key) => {
-      isArray(item[key]) && traverse(item[key], handler);
+  function stop() {
+    throw "silence break traverse";
+  }
+  try {
+    arrayed(target).forEach((item) => {
+      handler(item, stop);
+      arrayed(keys).forEach((key) => {
+        isArray(item[key]) && traverse(item[key], handler);
+      });
     });
-  });
+  } catch (err) {
+    if (err === "silence break traverse")
+      return;
+    throw err;
+  }
 }
 function safeComponentRegister(app, component, cName = component.name, scheduler) {
   if (!cName)