cnhis-design-vue 3.1.24-beta.7 → 3.1.24-beta.9

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

@@ -0,0 +1,134 @@
+import { defineComponent, computed, inject, createVNode, ref, createTextVNode } from 'vue';
+import { traverse } from '../../../../shared/utils/index.js';
+import { Reload, ChevronForward } from '@vicons/ionicons5';
+import { useVirtualList } from '@vueuse/core';
+import { isArray, isFunction } from 'lodash-es';
+import { InjectionSearchCascaderLoadingNode } from '../constants/index.js';
+
+const SearchMenuList = defineComponent({
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    activeNodes: {
+      type: Array,
+      default: () => []
+    },
+    labelKey: {
+      type: String,
+      default: "label"
+    }
+  },
+  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[props.labelKey]
+        }, [createVNode("div", {
+          "class": "search-cascader__optionText"
+        }, [item.data[props.labelKey]]), 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
+    },
+    labelKey: {
+      type: String,
+      default: "label"
+    },
+    currentNode: {
+      type: Object
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const activeNodes = ref([]);
+    function renderList(options) {
+      return createVNode(SearchMenuList, {
+        "labelKey": props.labelKey,
+        "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,5 @@
+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 './useCssVariable.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,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,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__input input{cursor:pointer!important}.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:300px;justify-content:center;padding:16px;width:100%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}