persagy-vant 0.0.43 → 0.0.45

package/es/tree-select/TreeSelect.mjs

@@ -1,23 +1,28 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
 };
-import { computed, defineComponent, Transition, createVNode as _createVNode } from "vue";
+import { computed, defineComponent, shallowReactive, Transition, createVNode as _createVNode } from "vue";
 import { makeArrayProp, createNamespace, truthProp } from "../utils/index.mjs";
 import { Cell } from "../cell/index.mjs";
 import { Icon } from "../icon/index.mjs";
+import { Loading } from "../loading/index.mjs";
 const [name, bem] = createNamespace("tree-select");
 const treeSelectProps = {
   items: makeArrayProp(),
@@ -28,20 +33,31 @@ const treeSelectProps = {
   selectableParent: Boolean,
   showParentSelect: Boolean,
   showSelectLevels: Array,
-  showDivider: truthProp
+  showDivider: truthProp,
+  loadChildren: Function
 };
 var stdin_default = defineComponent({
   name,
   props: treeSelectProps,
-  emits: ["update:modelValue", "update:expandedKeys", "select", "expand"],
+  emits: ["update:modelValue", "update:expandedKeys", "select", "expand", "load", "load-error"],
   setup(props, {
     emit,
     slots
   }) {
     const selectedKeys = computed(() => props.modelValue);
     const expandedKeys = computed(() => props.expandedKeys);
+    const resolvedChildren = shallowReactive(/* @__PURE__ */ new Map());
+    const loadingKeys = shallowReactive(/* @__PURE__ */ new Set());
+    const loadedKeys = shallowReactive(/* @__PURE__ */ new Set());
     const isExpanded = (id) => expandedKeys.value.includes(id);
     const isSelected = (id) => selectedKeys.value.includes(id);
+    const isLoading = (id) => loadingKeys.has(id);
+    const getChildren = (item) => {
+      var _a;
+      return ((_a = item.children) == null ? void 0 : _a.length) ? item.children : resolvedChildren.get(item.id) || item.children || [];
+    };
+    const isLoadable = (item) => !!props.loadChildren && Array.isArray(item.children) && !item.children.length && !loadedKeys.has(item.id);
+    const isBranch = (item) => !!getChildren(item).length || isLoadable(item) || isLoading(item.id);
     const isSelectionVisible = (hasChildren, level) => {
       var _a;
       const configuredVisibility = (_a = props.showSelectLevels) == null ? void 0 : _a[level];
@@ -53,10 +69,7 @@ var stdin_default = defineComponent({
       paddingLeft: `calc(var(--van-padding-md) + ${level * 16}px)`,
       "--van-tree-select-divider-left": `calc(var(--van-padding-md) + ${level * 16}px)`
     });
-    const getDescendantIds = (item) => {
-      var _a;
-      return ((_a = item.children) == null ? void 0 : _a.flatMap((child) => [child.id, ...getDescendantIds(child)])) || [];
-    };
+    const getDescendantIds = (item) => getChildren(item).flatMap((child) => [child.id, ...getDescendantIds(child)]);
     const getSelectionState = (item) => {
       const descendantIds = getDescendantIds(item);
       if (!props.cascade || !descendantIds.length) {
@@ -71,11 +84,11 @@ var stdin_default = defineComponent({
     };
     const syncParentSelection = (items, values) => {
       items.forEach((item) => {
-        var _a;
-        if (!((_a = item.children) == null ? void 0 : _a.length))
+        const children = getChildren(item);
+        if (!children.length)
           return;
-        syncParentSelection(item.children, values);
-        const childIds = item.children.map((child) => child.id);
+        syncParentSelection(children, values);
+        const childIds = children.map((child) => child.id);
         const index = values.indexOf(item.id);
         const allChildrenSelected = childIds.every((id) => values.includes(id));
         if (allChildrenSelected && index === -1)
@@ -84,13 +97,45 @@ var stdin_default = defineComponent({
           values.splice(index, 1);
       });
     };
-    const toggleExpanded = (id) => {
+    const updateExpanded = (id, expanded) => {
       const next = expandedKeys.value.slice();
       const index = next.indexOf(id);
-      index === -1 ? next.push(id) : next.splice(index, 1);
+      if (expanded && index === -1)
+        next.push(id);
+      if (!expanded && index !== -1)
+        next.splice(index, 1);
       emit("update:expandedKeys", next);
-      emit("expand", id, index === -1);
+      emit("expand", id, expanded);
     };
+    const toggleExpanded = (item) => __async(this, null, function* () {
+      const {
+        id
+      } = item;
+      if (isLoading(id))
+        return;
+      if (isExpanded(id)) {
+        updateExpanded(id, false);
+        return;
+      }
+      if (isLoadable(item)) {
+        loadingKeys.add(id);
+        try {
+          const result = yield props.loadChildren(item);
+          const children = Array.isArray(result) ? result : [];
+          resolvedChildren.set(id, children);
+          loadedKeys.add(id);
+          emit("load", item, children);
+          if (children.length)
+            updateExpanded(id, true);
+        } catch (error) {
+          emit("load-error", item, error);
+        } finally {
+          loadingKeys.delete(id);
+        }
+        return;
+      }
+      updateExpanded(id, true);
+    });
     const updateSelected = (item, selected) => {
       if (item.disabled || item.selectable === false)
         return;
@@ -109,12 +154,13 @@ var stdin_default = defineComponent({
       emit("select", item, selected);
     };
     const renderNodes = (items, level = 0) => items.map((item) => {
-      var _a;
-      const hasChildren = !!((_a = item.children) == null ? void 0 : _a.length);
+      const children = getChildren(item);
+      const hasChildren = isBranch(item);
       const expanded = isExpanded(item.id);
+      const loading = isLoading(item.id);
       const renderTitle = () => {
-        var _a2;
-        return ((_a2 = slots.title) == null ? void 0 : _a2.call(slots, {
+        var _a;
+        return ((_a = slots.title) == null ? void 0 : _a.call(slots, {
           item,
           level,
           hasChildren
@@ -134,36 +180,29 @@ var stdin_default = defineComponent({
       }
       const selectable = item.selectable !== false && isSelectionVisible(hasChildren, level);
       const selectionState = getSelectionState(item);
-      return _createVNode("div", {
-        "key": item.id,
-        "class": bem("node")
-      }, [_createVNode(Cell, {
-        "class": bem("cell", {
-          branch: hasChildren
-        }),
-        "title": item.text,
-        "border": props.showDivider,
-        "style": getNodeStyle(level),
-        "rightSelect": selectable && selectionState !== "indeterminate" ? selectionState === "checked" : void 0,
-        "selectType": props.multiple ? "checkbox" : "radio",
-        "onUpdate:rightSelect": (value) => updateSelected(item, value)
-      }, __spreadValues({
+      const cellSlots = {
         title: () => [hasChildren ? _createVNode("button", {
           "type": "button",
           "class": bem("expand-control"),
           "disabled": item.disabled,
+          "aria-busy": loading,
+          "aria-disabled": loading,
           "onClick": (event) => {
             event.stopPropagation();
-            toggleExpanded(item.id);
+            toggleExpanded(item);
           }
-        }, [_createVNode(Icon, {
+        }, [loading ? _createVNode(Loading, {
+          "class": bem("loading"),
+          "size": "var(--van-tree-select-arrow-size)"
+        }, null) : _createVNode(Icon, {
           "name": "trangle-down",
           "class": bem("arrow", {
             expanded
           })
         }, null), _createVNode("span", null, [renderTitle()])]) : _createVNode("span", null, [renderTitle()])]
-      }, selectable && selectionState === "indeterminate" ? {
-        "right-select": () => _createVNode("button", {
+      };
+      if (selectable && selectionState === "indeterminate") {
+        cellSlots["right-select"] = () => _createVNode("button", {
           "type": "button",
           "class": bem("indeterminate"),
           "aria-label": `\u90E8\u5206\u9009\u4E2D${item.text}`,
@@ -171,13 +210,27 @@ var stdin_default = defineComponent({
             event.stopPropagation();
             updateSelected(item, true);
           }
-        }, null)
-      } : {})), _createVNode(Transition, {
+        }, null);
+      }
+      return _createVNode("div", {
+        "key": item.id,
+        "class": bem("node")
+      }, [_createVNode(Cell, {
+        "class": bem("cell", {
+          branch: hasChildren
+        }),
+        "title": item.text,
+        "border": props.showDivider,
+        "style": getNodeStyle(level),
+        "rightSelect": selectable && selectionState !== "indeterminate" ? selectionState === "checked" : void 0,
+        "selectType": props.multiple ? "checkbox" : "radio",
+        "onUpdate:rightSelect": (value) => updateSelected(item, value)
+      }, cellSlots), _createVNode(Transition, {
         "name": "van-tree-select-expand"
       }, {
         default: () => [hasChildren && expanded && _createVNode("div", {
           "class": bem("children")
-        }, [renderNodes(item.children, level + 1)])]
+        }, [renderNodes(children, level + 1)])]
       })]);
     });
     return () => _createVNode("div", {

package/es/tree-select/index.css

@@ -1 +1 @@
-:root{--van-tree-select-indent: var(--van-padding-md);--van-tree-select-arrow-size: 16px;--van-tree-select-animation-duration: .24s;--van-tree-select-divider-left: var(--van-padding-md)}.van-tree-select{overflow:hidden;color:var(--van-cell-text-color);background:var(--van-white)}.van-tree-select__node{overflow:hidden}.van-tree-select__leaf{position:relative;box-sizing:border-box}.van-tree-select__leaf--divider:not(:last-child):after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-tree-select-divider-left);height:1px;background:var(--van-border-color);content:"";transform:scaleY(.5)}.van-tree-select__cell{min-height:44px;padding:10px var(--van-padding-md)}.van-tree-select__cell .van-cell__title-row{align-items:center}.van-tree-select__cell .van-cell__title{font-size:var(--van-font-size-md);line-height:22px}.van-tree-select__node:not(:last-child)>.van-tree-select__cell:not(.van-cell--borderless):after{display:block;left:var(--van-tree-select-divider-left)}.van-tree-select__cell--branch:not(.van-cell--borderless):after{display:block;left:var(--van-tree-select-divider-left)}.van-tree-select__arrow{flex:none;margin-right:var(--van-padding-base);color:var(--van-gray-5);font-size:var(--van-tree-select-arrow-size);transition:transform var(--van-tree-select-animation-duration) ease}.van-tree-select__arrow--expanded{transform:rotate(0)}.van-tree-select__arrow:not(.van-tree-select__arrow--expanded){transform:rotate(-90deg)}.van-tree-select__expand-control{display:inline-flex;align-items:center;padding:0;color:inherit;font:inherit;line-height:inherit;text-align:left;background:transparent;border:0}.van-tree-select__expand-control:not(:disabled){cursor:pointer}.van-tree-select__expand-control:disabled{color:var(--van-text-color-3);cursor:not-allowed}.van-tree-select__children{overflow:hidden}.van-tree-select__indeterminate{position:relative;display:block;width:14px;height:14px;padding:0;background:var(--van-primary-color);border:0;border-radius:50%}.van-tree-select__indeterminate:after{position:absolute;top:calc(50% - 1px);right:25%;left:25%;height:2px;content:"";background:var(--van-white);border-radius:1px}.van-tree-select-expand-enter-active,.van-tree-select-expand-leave-active{overflow:hidden;transition:max-height var(--van-tree-select-animation-duration) ease,opacity var(--van-tree-select-animation-duration) ease}.van-tree-select-expand-enter-from,.van-tree-select-expand-leave-to{max-height:0;opacity:0}.van-tree-select-expand-enter-to,.van-tree-select-expand-leave-from{max-height:1000px;opacity:1}
+:root{--van-tree-select-indent: var(--van-padding-md);--van-tree-select-arrow-size: 16px;--van-tree-select-animation-duration: .24s;--van-tree-select-divider-left: var(--van-padding-md)}.van-tree-select{overflow:hidden;color:var(--van-cell-text-color);background:var(--van-white)}.van-tree-select__node{overflow:hidden}.van-tree-select__leaf{position:relative;box-sizing:border-box}.van-tree-select__leaf--divider:not(:last-child):after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-tree-select-divider-left);height:1px;background:var(--van-border-color);content:"";transform:scaleY(.5)}.van-tree-select__cell{min-height:44px;padding:10px var(--van-padding-md)}.van-tree-select__cell .van-cell__title-row{align-items:center}.van-tree-select__cell .van-cell__title{font-size:var(--van-font-size-md);line-height:22px}.van-tree-select__node:not(:last-child)>.van-tree-select__cell:not(.van-cell--borderless):after{display:block;left:var(--van-tree-select-divider-left)}.van-tree-select__cell--branch:not(.van-cell--borderless):after{display:block;left:var(--van-tree-select-divider-left)}.van-tree-select__arrow{flex:none;margin-right:var(--van-padding-base);color:var(--van-gray-5);font-size:var(--van-tree-select-arrow-size);transition:transform var(--van-tree-select-animation-duration) ease}.van-tree-select__arrow--expanded{transform:rotate(0)}.van-tree-select__arrow:not(.van-tree-select__arrow--expanded){transform:rotate(-90deg)}.van-tree-select__loading{flex:none;margin-right:var(--van-padding-base);color:var(--van-gray-5)}.van-tree-select__expand-control{display:inline-flex;align-items:center;padding:0;color:inherit;font:inherit;line-height:inherit;text-align:left;background:transparent;border:0}.van-tree-select__expand-control:not(:disabled){cursor:pointer}.van-tree-select__expand-control:disabled{color:var(--van-text-color-3);cursor:not-allowed}.van-tree-select__children{overflow:hidden}.van-tree-select__indeterminate{position:relative;display:block;width:14px;height:14px;padding:0;background:var(--van-primary-color);border:0;border-radius:50%}.van-tree-select__indeterminate:after{position:absolute;top:calc(50% - 1px);right:25%;left:25%;height:2px;content:"";background:var(--van-white);border-radius:1px}.van-tree-select-expand-enter-active,.van-tree-select-expand-leave-active{overflow:hidden;transition:max-height var(--van-tree-select-animation-duration) ease,opacity var(--van-tree-select-animation-duration) ease}.van-tree-select-expand-enter-from,.van-tree-select-expand-leave-to{max-height:0;opacity:0}.van-tree-select-expand-enter-to,.van-tree-select-expand-leave-from{max-height:1000px;opacity:1}

package/es/tree-select/index.d.ts

@@ -20,7 +20,8 @@ export declare const TreeSelect: import("../utils").WithInstall<import("vue").De
         type: BooleanConstructor;
         default: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:modelValue" | "update:expandedKeys" | "expand")[], "select" | "update:modelValue" | "update:expandedKeys" | "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    loadChildren: import("vue").PropType<import("./TreeSelect").TreeSelectLoadChildren>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:modelValue" | "load" | "update:expandedKeys" | "expand" | "load-error")[], "select" | "update:modelValue" | "load" | "update:expandedKeys" | "expand" | "load-error", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: import("vue").PropType<import("./TreeSelect").TreeSelectItem[]>;
         default: () => never[];
@@ -42,11 +43,14 @@ export declare const TreeSelect: import("../utils").WithInstall<import("vue").De
         type: BooleanConstructor;
         default: true;
     };
+    loadChildren: import("vue").PropType<import("./TreeSelect").TreeSelectLoadChildren>;
 }>> & {
+    onLoad?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:expandedKeys"?: ((...args: any[]) => any) | undefined;
     onExpand?: ((...args: any[]) => any) | undefined;
+    "onLoad-error"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: import("../utils").Numeric[];
     multiple: boolean;
@@ -58,7 +62,7 @@ export declare const TreeSelect: import("../utils").WithInstall<import("vue").De
     showDivider: boolean;
 }>>;
 export default TreeSelect;
-export type { TreeSelectItem, TreeSelectChild, TreeSelectProps, } from './TreeSelect';
+export type { TreeSelectItem, TreeSelectChild, TreeSelectLoadChildren, TreeSelectProps, } from './TreeSelect';
 declare module 'vue' {
     interface GlobalComponents {
         VanTreeSelect: typeof TreeSelect;

package/es/tree-select/index.less

@@ -66,6 +66,12 @@
     &:not(.van-tree-select__arrow--expanded) { transform: rotate(-90deg); }
   }
 
+  &__loading {
+    flex: none;
+    margin-right: var(--van-padding-base);
+    color: var(--van-gray-5);
+  }
+
   &__expand-control {
     display: inline-flex;
     align-items: center;

package/es/tree-select/style/index.mjs

@@ -2,6 +2,7 @@ import "../../style/base.css";
 import "../../badge/index.css";
 import "../../icon/index.css";
 import "../../tag/index.css";
+import "../../loading/index.css";
 import "../../checkbox-group/index.css";
 import "../../checkbox/index.css";
 import "../../radio-group/index.css";

package/es/tree-select/style/less.mjs

@@ -2,6 +2,7 @@ import "../../style/base.less";
 import "../../badge/index.less";
 import "../../icon/index.less";
 import "../../tag/index.less";
+import "../../loading/index.less";
 import "../../checkbox-group/index.less";
 import "../../checkbox/index.less";
 import "../../radio-group/index.less";