@deot/vc 1.0.39 → 1.0.41

package/dist/index.d.ts

@@ -568,6 +568,8 @@ export declare const Components: {
     type: BooleanConstructor;
     default: boolean;
     };
+    renderOption: Render;
+    renderOptionGroup: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -651,6 +653,8 @@ export declare const Components: {
     type: BooleanConstructor;
     default: boolean;
     };
+    renderOption: Render;
+    renderOptionGroup: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -760,6 +764,8 @@ export declare const Components: {
     type: BooleanConstructor;
     default: boolean;
     };
+    renderOption: Render;
+    renderOptionGroup: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -843,6 +849,8 @@ export declare const Components: {
     type: BooleanConstructor;
     default: boolean;
     };
+    renderOption: Render;
+    renderOptionGroup: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -8366,6 +8374,8 @@ export declare const Components: {
     showBar: boolean;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
     Select: DefineComponent<ExtractPropTypes<    {
+    renderOption: Render;
+    renderOptionGroup: Render;
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -8441,6 +8451,8 @@ export declare const Components: {
     };
     portalClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
     }>, () => JSX_2.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("clear" | "change" | "close" | "update:modelValue" | "visible-change" | "ready")[], "clear" | "change" | "close" | "update:modelValue" | "visible-change" | "ready", PublicProps, Readonly<ExtractPropTypes<    {
+    renderOption: Render;
+    renderOptionGroup: Render;
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -8541,6 +8553,8 @@ export declare const Components: {
     searchable: boolean;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
     MSelect: DefineComponent<ExtractPropTypes<    {
+    renderOption: Render;
+    renderOptionGroup: Render;
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -8616,6 +8630,8 @@ export declare const Components: {
     };
     portalClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
     }>, () => JSX_2.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("clear" | "change" | "close" | "update:modelValue" | "visible-change" | "ready")[], "clear" | "change" | "close" | "update:modelValue" | "visible-change" | "ready", PublicProps, Readonly<ExtractPropTypes<    {
+    renderOption: Render;
+    renderOptionGroup: Render;
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -11681,10 +11697,6 @@ export declare const Components: {
     type: StringConstructor;
     default: string;
     };
-    renderAfterExpand: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     checkStrictly: {
     type: BooleanConstructor;
     default: boolean;
@@ -11709,11 +11721,6 @@ export declare const Components: {
     default: () => never[];
     };
     currentNodeValue: (StringConstructor | NumberConstructor)[];
-    render: PropType<Props["render"]>;
-    showCheckbox: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     draggable: {
     type: BooleanConstructor;
     default: boolean;
@@ -11727,10 +11734,6 @@ export declare const Components: {
     highlightCurrent: BooleanConstructor;
     loadData: FunctionConstructor;
     filterNode: FunctionConstructor;
-    accordion: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     indent: {
     type: NumberConstructor;
     default: number;
@@ -11750,6 +11753,19 @@ export declare const Components: {
     type: BooleanConstructor;
     default: boolean;
     };
+    accordion: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    renderNodeLabel: Render;
+    renderNodeAfterExpand: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    showCheckbox: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     numerable: {
     type: BooleanConstructor;
     default: boolean;
@@ -11776,10 +11792,6 @@ export declare const Components: {
     type: StringConstructor;
     default: string;
     };
-    renderAfterExpand: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     checkStrictly: {
     type: BooleanConstructor;
     default: boolean;
@@ -11804,11 +11816,6 @@ export declare const Components: {
     default: () => never[];
     };
     currentNodeValue: (StringConstructor | NumberConstructor)[];
-    render: PropType<Props["render"]>;
-    showCheckbox: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     draggable: {
     type: BooleanConstructor;
     default: boolean;
@@ -11822,10 +11829,6 @@ export declare const Components: {
     highlightCurrent: BooleanConstructor;
     loadData: FunctionConstructor;
     filterNode: FunctionConstructor;
-    accordion: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     indent: {
     type: NumberConstructor;
     default: number;
@@ -11845,6 +11848,19 @@ export declare const Components: {
     type: BooleanConstructor;
     default: boolean;
     };
+    accordion: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    renderNodeLabel: Render;
+    renderNodeAfterExpand: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    showCheckbox: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     numerable: {
     type: BooleanConstructor;
     default: boolean;
@@ -11897,10 +11913,10 @@ export declare const Components: {
     checkStrictly: boolean;
     autoExpandParent: boolean;
     checkDescendants: boolean;
-    renderAfterExpand: boolean;
+    renderNodeAfterExpand: boolean;
+    showCheckbox: boolean;
     expandOnClickNode: boolean;
     checkOnClickNode: boolean;
-    showCheckbox: boolean;
     highlightCurrent: boolean;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
     MTree: DefineComponent<ExtractPropTypes<    {
@@ -11917,10 +11933,6 @@ export declare const Components: {
     type: StringConstructor;
     default: string;
     };
-    renderAfterExpand: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     checkStrictly: {
     type: BooleanConstructor;
     default: boolean;
@@ -11945,11 +11957,6 @@ export declare const Components: {
     default: () => never[];
     };
     currentNodeValue: (StringConstructor | NumberConstructor)[];
-    render: PropType<Props["render"]>;
-    showCheckbox: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     draggable: {
     type: BooleanConstructor;
     default: boolean;
@@ -11963,10 +11970,6 @@ export declare const Components: {
     highlightCurrent: BooleanConstructor;
     loadData: FunctionConstructor;
     filterNode: FunctionConstructor;
-    accordion: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     indent: {
     type: NumberConstructor;
     default: number;
@@ -11986,6 +11989,19 @@ export declare const Components: {
     type: BooleanConstructor;
     default: boolean;
     };
+    accordion: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    renderNodeLabel: Render;
+    renderNodeAfterExpand: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    showCheckbox: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     numerable: {
     type: BooleanConstructor;
     default: boolean;
@@ -12012,10 +12028,6 @@ export declare const Components: {
     type: StringConstructor;
     default: string;
     };
-    renderAfterExpand: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     checkStrictly: {
     type: BooleanConstructor;
     default: boolean;
@@ -12040,11 +12052,6 @@ export declare const Components: {
     default: () => never[];
     };
     currentNodeValue: (StringConstructor | NumberConstructor)[];
-    render: PropType<Props["render"]>;
-    showCheckbox: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     draggable: {
     type: BooleanConstructor;
     default: boolean;
@@ -12058,10 +12065,6 @@ export declare const Components: {
     highlightCurrent: BooleanConstructor;
     loadData: FunctionConstructor;
     filterNode: FunctionConstructor;
-    accordion: {
-    type: BooleanConstructor;
-    default: boolean;
-    };
     indent: {
     type: NumberConstructor;
     default: number;
@@ -12081,6 +12084,19 @@ export declare const Components: {
     type: BooleanConstructor;
     default: boolean;
     };
+    accordion: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    renderNodeLabel: Render;
+    renderNodeAfterExpand: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    showCheckbox: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     numerable: {
     type: BooleanConstructor;
     default: boolean;
@@ -12133,10 +12149,10 @@ export declare const Components: {
     checkStrictly: boolean;
     autoExpandParent: boolean;
     checkDescendants: boolean;
-    renderAfterExpand: boolean;
+    renderNodeAfterExpand: boolean;
+    showCheckbox: boolean;
     expandOnClickNode: boolean;
     checkOnClickNode: boolean;
-    showCheckbox: boolean;
     highlightCurrent: boolean;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
     Upload: DefineComponent<ExtractPropTypes<    {

package/dist/index.iife.js

@@ -11309,7 +11309,7 @@ var Vc = (function (exports, vue) {
     el: "body",
     alive: false,
     multiple: false,
-    aliveRegExp: { className: /(vc-hack-alive|vc-hack-cp)/ },
+    aliveRegExp: { className: /(vc-portal-alive)/ },
     aliveVisibleKey: "isVisible",
     aliveUpdateKey: "update",
     leaveDelay: 300,
@@ -11534,7 +11534,8 @@ var Vc = (function (exports, vue) {
         leaf = Portal.leafs.get(name);
         leaf.target = target;
         leaf.propsData.value = propsData$;
-        leaf.wrapper?.[aliveUpdateKey]?.(options);
+        const next = leaf.wrapper?.[aliveUpdateKey];
+        next && vue.nextTick(() => next(options));
       } else {
         const wrapper = this.wrapper;
         const app = vue.createApp({
@@ -11549,7 +11550,7 @@ var Vc = (function (exports, vue) {
                   if (container && e.target && !container.contains(e.target) && !path?.some((item) => utils.eleInRegExp(item, aliveRegExp))) {
                     /* istanbul ignore else -- @preserve */
                     if (leaf.wrapper && leaf.wrapper?.[aliveVisibleKey]) {
-                      leaf.wrapper[aliveVisibleKey] = false;
+                      typeof leaf.wrapper[aliveVisibleKey] === "function" ? leaf.wrapper[aliveVisibleKey](false) : leaf.wrapper[aliveVisibleKey] = false;
                     }
                     leaveDelay ? setTimeout($onDestroyed, leaveDelay) : $onDestroyed();
                   }
@@ -12140,6 +12141,8 @@ var Vc = (function (exports, vue) {
   const props$19 = {
     ...pick(props$1c, popoverKeys$1),
     ...pick(props$1g, inputKeys$2),
+    renderOption: [Function],
+    renderOptionGroup: [Function],
     data: {
       type: Array,
       default: () => []
@@ -13449,7 +13452,7 @@ var Vc = (function (exports, vue) {
       default: true
     }
   };
-  function _isSlot$3(s) {
+  function _isSlot$2(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   const COMPONENT_NAME$1w = "vc-expand";
@@ -13473,7 +13476,7 @@ var Vc = (function (exports, vue) {
             enter: 200,
             leave: 200
           }
-        }, _isSlot$3(_slot = vue.withDirectives(vue.createVNode(Content, null, {
+        }, _isSlot$2(_slot = vue.withDirectives(vue.createVNode(Content, null, {
           default: () => [(props2.alive || !props2.alive && isActive.value) && slots.default?.()]
         }), [[vue.vShow, isActive.value]])) ? _slot : {
           default: () => [_slot]
@@ -13609,7 +13612,7 @@ var Vc = (function (exports, vue) {
   const formatter = (format, arr) => {
     return format.replace("DD", arr[0]).replace("HH", arr[1]).replace("mm", arr[2]).replace("ss", arr[3]).replace("SSS", arr[4]);
   };
-  function _isSlot$2(s) {
+  function _isSlot$1(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   const COMPONENT_NAME$1t = "vc-countdown";
@@ -13738,7 +13741,7 @@ var Vc = (function (exports, vue) {
             // @ts-ignore
             vue.createVNode(Content, {
               "class": "vc-countdown"
-            }, _isSlot$2(_slot = slots.default(binds.value)) ? _slot : {
+            }, _isSlot$1(_slot = slots.default(binds.value)) ? _slot : {
               default: () => [_slot]
             })
           );
@@ -20662,7 +20665,9 @@ var Vc = (function (exports, vue) {
     filterable: {
       type: Boolean,
       default: true
-    }
+    },
+    render: [Function],
+    row: Object
   };
   const COMPONENT_NAME$J = "vc-select-option";
   const Option = /* @__PURE__ */ vue.defineComponent({
@@ -20676,7 +20681,7 @@ var Vc = (function (exports, vue) {
         const v = String(props2.label || props2.value);
         return v.trim();
       });
-      const isSelect = vue.computed(() => {
+      const isChecked = vue.computed(() => {
         const {
           current
         } = owner.exposed;
@@ -20693,13 +20698,22 @@ var Vc = (function (exports, vue) {
         const regex = owner.exposed.searchRegex.value;
         return regex.test(formatterLabel.value) || !props2.filterable;
       });
-      const handleSelect = (e) => {
-        e.stopPropagation();
+      const customOptions = vue.computed(() => {
+        return {
+          store: {
+            last: isLast.value,
+            checked: isChecked.value,
+            click: handleClick
+          },
+          row: props2.row
+        };
+      });
+      const handleClick = () => {
         if (props2.disabled) return;
-        if (!owner.exposed.multiple.value && isSelect.value) {
+        if (!owner.exposed.multiple.value && isChecked.value) {
           owner.exposed.close();
           return;
-        } else if (isSelect.value) {
+        } else if (isChecked.value) {
           owner.exposed.remove(props2.value, formatterLabel.value);
           return;
         }
@@ -20710,15 +20724,17 @@ var Vc = (function (exports, vue) {
       };
       return () => {
         if (!isActive.value) return;
-        return vue.createVNode("div", {
+        return typeof props2.render === "function" ? vue.createVNode(Customer, vue.mergeProps({
+          "render": props2.render
+        }, customOptions.value), null) : slots.default ? slots.default(customOptions.value) : vue.createVNode("div", {
           "disabled": props2.disabled && "disabled",
           "class": [{
-            "is-select": isSelect.value,
+            "is-select": isChecked.value,
             "is-last": isLast.value
           }, "vc-select-option"],
-          "onClick": handleSelect,
+          "onClick": vue.withModifiers(handleClick, ["stop"]),
           "onMousedown": handlePrevent
-        }, [slots.default ? slots.default() : formatterLabel.value, isSelect.value && vue.createVNode(Icon, {
+        }, [formatterLabel.value, isChecked.value && vue.createVNode(Icon, {
           "type": "correct"
         }, null)]);
       };
@@ -20731,7 +20747,9 @@ var Vc = (function (exports, vue) {
     },
     label: {
       type: [String, Number]
-    }
+    },
+    row: Object,
+    render: [Function]
   };
   const COMPONENT_NAME$I = "vc-select-option-group";
   const OptionGroup = /* @__PURE__ */ vue.defineComponent({
@@ -20744,18 +20762,24 @@ var Vc = (function (exports, vue) {
         const v = String(props2.label || props2.value);
         return v.trim();
       });
+      const customOptions = vue.computed(() => {
+        return {
+          row: props2.row
+        };
+      });
       return () => {
         return vue.createVNode("div", {
           "class": "vc-select-option-group"
-        }, [vue.createVNode("div", {
+        }, [typeof props2.render === "function" ? vue.createVNode(Customer, vue.mergeProps({
+          "render": props2.render
+        }, customOptions.value), null) : slots.title ? slots.title({
+          row: props2.row
+        }) : vue.createVNode("div", {
           "class": "vc-select-option-group__title"
         }, [formatterLabel.value]), vue.createVNode("div", null, [slots?.default?.()])]);
       };
     }
   });
-  function _isSlot$1(s) {
-    return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
-  }
   const COMPONENT_NAME$H = "vc-select";
   const Select = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$H,
@@ -20971,29 +20995,41 @@ var Vc = (function (exports, vue) {
               "max-height": "200px"
             }, {
               default: () => [props2.data ? vue.createVNode("div", null, [props2.data.map((item) => {
-                let _slot;
-                return Array.isArray(item.children) ? vue.createVNode(OptionGroup, {
+                return Array.isArray(item.children) && item.children.length ? vue.createVNode(OptionGroup, {
+                  "row": item,
                   "value": item.value,
                   "label": item.label,
-                  "key": item.value
-                }, _isSlot$1(_slot = item.children.map(($item) => {
-                  return vue.createVNode(Option, {
-                    "key": $item.value,
-                    "value": $item.value,
-                    "label": $item.label,
-                    "disabled": $item.disabled,
-                    "filterable": $item.filterable
-                  }, null);
-                })) ? _slot : {
-                  default: () => [_slot]
+                  "key": item.value,
+                  "render": props2.renderOptionGroup
+                }, {
+                  title: slots?.optionGroup,
+                  default: () => {
+                    return item.children.map(($item) => {
+                      return vue.createVNode(Option, {
+                        "key": $item.value,
+                        "row": $item,
+                        "value": $item.value,
+                        "label": $item.label,
+                        "disabled": $item.disabled,
+                        "filterable": $item.filterable,
+                        "render": props2.renderOption
+                      }, {
+                        default: slots?.option
+                      });
+                    });
+                  }
                 }) : vue.createVNode(Option, {
                   "key": item.value,
+                  "row": item,
                   "value": item.value,
                   "label": item.label,
                   "disabled": item.disabled,
-                  "filterable": item.filterable
-                }, null);
-              })]) : slots.default?.()]
+                  "filterable": item.filterable,
+                  "render": props2.renderOption
+                }, {
+                  default: slots?.option
+                });
+              })]) : slots?.default?.()]
             })]);
           }
         });
@@ -28273,112 +28309,33 @@ var Vc = (function (exports, vue) {
       }
     };
   };
-  const selectKeys = [
-    "separator",
-    "numerable",
-    "nullValue"
-  ];
   const props$4 = {
-    ...pick(props$19, selectKeys),
-    // 暂不支持，仅作为默认值
-    max: {
-      type: Number,
-      default: Infinity,
-      validator: (v) => v >= 1
-    },
-    // 确保所有value是唯一的; 否则会出现问题
-    data: {
-      type: Array,
-      default: () => []
-    },
-    emptyText: {
-      type: String,
-      default: "暂无数据"
-    },
-    renderAfterExpand: {
-      type: Boolean,
-      default: true
-    },
-    checkStrictly: {
-      type: Boolean,
-      default: false
-    },
-    defaultExpandAll: Boolean,
-    expandOnClickNode: {
-      type: Boolean,
-      default: true
-    },
-    checkOnClickNode: Boolean,
-    checkDescendants: {
-      type: Boolean,
-      default: false
+    node: {
+      type: Object,
+      default: () => ({})
     },
-    autoExpandParent: {
+    renderNodeLabel: Function,
+    renderNodeAfterExpand: {
       type: Boolean,
       default: true
     },
-    // checkedValues -> modelValue
-    modelValue: [String, Number, Array],
-    // Value[]
-    expandedValues: {
-      type: Array,
-      default: () => []
-    },
-    currentNodeValue: [String, Number],
-    render: Function,
     showCheckbox: {
       type: Boolean,
       default: false
     },
-    draggable: {
-      type: Boolean,
-      default: false
-    },
-    allowDrag: Function,
-    allowDrop: Function,
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    highlightCurrent: Boolean,
-    loadData: Function,
-    filterNode: Function,
     accordion: {
       type: Boolean,
       default: false
     },
-    indent: {
-      type: Number,
-      default: 18
-    },
-    iconClass: String,
-    keyValue: {
-      type: Object,
-      default: () => KEY_VALUE
-    },
     allowDispatch: {
       type: Boolean,
       default: true
     }
   };
-  const treeKeys$1 = [
-    "render",
-    "renderAfterExpand",
-    "showCheckbox",
-    "accordion",
-    "allowDispatch"
-  ];
-  const props$3 = {
-    ...pick(props$4, treeKeys$1),
-    node: {
-      type: Object,
-      default: () => ({})
-    }
-  };
   const COMPONENT_NAME$5 = "vc-tree-node";
   const TreeNodeContent = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$5,
-    props: props$3,
+    props: props$4,
     emits: ["node-expand"],
     setup(props2, {
       emit
@@ -28552,20 +28509,20 @@ var Vc = (function (exports, vue) {
         }, null), node.states.loading && vue.createVNode(Spin, {
           "size": 12,
           "class": "vc-tree-node__loading-icon"
-        }, null), props2.render ? vue.createVNode(Customer, {
-          "render": props2.render,
+        }, null), props2.renderNodeLabel ? vue.createVNode(Customer, {
+          "render": props2.renderNodeLabel,
           "store": node,
           "row": node.states.data
         }, null) : vue.createVNode("span", null, [node.getter.label])]), vue.createVNode(TransitionCollapse, null, {
-          default: () => [(!props2.renderAfterExpand || childNodeRendered.value) && vue.withDirectives(vue.createVNode("div", {
+          default: () => [(!props2.renderNodeAfterExpand || childNodeRendered.value) && vue.withDirectives(vue.createVNode("div", {
             "aria-expanded": expanded.value,
             "class": "vc-tree-node__children",
             "role": "group"
           }, [node.childNodes.map((child) => {
             return vue.createVNode(TreeNodeContent, {
               "key": getNodeKey(child),
-              "render": props2.render,
-              "renderAfterExpand": props2.renderAfterExpand,
+              "renderNodeLabel": props2.renderNodeLabel,
+              "renderNodeAfterExpand": props2.renderNodeAfterExpand,
               "showCheckbox": props2.showCheckbox,
               "allowDispatch": props2.allowDispatch,
               "accordion": props2.accordion,
@@ -28791,10 +28748,89 @@ var Vc = (function (exports, vue) {
       treeItemArray
     };
   };
+  const selectKeys = [
+    "separator",
+    "numerable",
+    "nullValue"
+  ];
+  const treeNodeContentKeys = [
+    "renderNodeLabel",
+    "renderNodeAfterExpand",
+    "showCheckbox",
+    "accordion",
+    "allowDispatch"
+  ];
+  const props$3 = {
+    ...pick(props$19, selectKeys),
+    ...pick(props$4, treeNodeContentKeys),
+    // 暂不支持，仅作为默认值
+    max: {
+      type: Number,
+      default: Infinity,
+      validator: (v) => v >= 1
+    },
+    // 确保所有value是唯一的; 否则会出现问题
+    data: {
+      type: Array,
+      default: () => []
+    },
+    emptyText: {
+      type: String,
+      default: "暂无数据"
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    defaultExpandAll: Boolean,
+    expandOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    checkOnClickNode: Boolean,
+    checkDescendants: {
+      type: Boolean,
+      default: false
+    },
+    autoExpandParent: {
+      type: Boolean,
+      default: true
+    },
+    // checkedValues -> modelValue
+    modelValue: [String, Number, Array],
+    // Value[]
+    expandedValues: {
+      type: Array,
+      default: () => []
+    },
+    currentNodeValue: [String, Number],
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    allowDrag: Function,
+    allowDrop: Function,
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    highlightCurrent: Boolean,
+    loadData: Function,
+    filterNode: Function,
+    indent: {
+      type: Number,
+      default: 18
+    },
+    iconClass: String,
+    keyValue: {
+      type: Object,
+      default: () => KEY_VALUE
+    }
+  };
   const COMPONENT_NAME$4 = "vc-tree";
   const Tree2 = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$4,
-    props: props$4,
+    props: props$3,
     emits: ["update:modelValue", "change", "check-change", "current-change", "node-click", "node-contextmenu", "node-collapse", "node-expand", "check", "node-drag-start", "node-drag-end", "node-drop", "node-drag-leave", "node-drag-enter", "node-drag-over"],
     setup(props2, {
       expose,
@@ -28968,8 +29004,8 @@ var Vc = (function (exports, vue) {
         }, [root.childNodes.map((child) => {
           return vue.createVNode(TreeNodeContent, {
             "key": getNodeKey(child),
-            "render": props2.render,
-            "renderAfterExpand": props2.renderAfterExpand,
+            "renderNodeLabel": props2.renderNodeLabel,
+            "renderNodeAfterExpand": props2.renderNodeAfterExpand,
             "showCheckbox": props2.showCheckbox,
             "allowDispatch": props2.allowDispatch,
             "accordion": props2.accordion,
@@ -28990,11 +29026,12 @@ var Vc = (function (exports, vue) {
   const treeKeys = [
     "checkStrictly",
     "data",
-    "max"
+    "max",
+    "renderNodeLabel"
   ];
   const props$2 = {
     ...props$19,
-    ...pick(props$4, treeKeys)
+    ...pick(props$3, treeKeys)
   };
   const COMPONENT_NAME$3 = "vc-tree-select";
   const TreeSelect = /* @__PURE__ */ vue.defineComponent({
@@ -29205,6 +29242,7 @@ var Vc = (function (exports, vue) {
                 "checkStrictly": props2.checkStrictly,
                 "allowDispatch": false,
                 "showCheckbox": true,
+                "renderNodeLabel": props2.renderNodeLabel,
                 "onChange": handleChange
               }, null)]
             })]);

package/dist/index.umd.cjs

@@ -11312,7 +11312,7 @@
     el: "body",
     alive: false,
     multiple: false,
-    aliveRegExp: { className: /(vc-hack-alive|vc-hack-cp)/ },
+    aliveRegExp: { className: /(vc-portal-alive)/ },
     aliveVisibleKey: "isVisible",
     aliveUpdateKey: "update",
     leaveDelay: 300,
@@ -11537,7 +11537,8 @@
         leaf = Portal.leafs.get(name);
         leaf.target = target;
         leaf.propsData.value = propsData$;
-        leaf.wrapper?.[aliveUpdateKey]?.(options);
+        const next = leaf.wrapper?.[aliveUpdateKey];
+        next && vue.nextTick(() => next(options));
       } else {
         const wrapper = this.wrapper;
         const app = vue.createApp({
@@ -11552,7 +11553,7 @@
                   if (container && e.target && !container.contains(e.target) && !path?.some((item) => utils.eleInRegExp(item, aliveRegExp))) {
                     /* istanbul ignore else -- @preserve */
                     if (leaf.wrapper && leaf.wrapper?.[aliveVisibleKey]) {
-                      leaf.wrapper[aliveVisibleKey] = false;
+                      typeof leaf.wrapper[aliveVisibleKey] === "function" ? leaf.wrapper[aliveVisibleKey](false) : leaf.wrapper[aliveVisibleKey] = false;
                     }
                     leaveDelay ? setTimeout($onDestroyed, leaveDelay) : $onDestroyed();
                   }
@@ -12143,6 +12144,8 @@
   const props$19 = {
     ...pick(props$1c, popoverKeys$1),
     ...pick(props$1g, inputKeys$2),
+    renderOption: [Function],
+    renderOptionGroup: [Function],
     data: {
       type: Array,
       default: () => []
@@ -13452,7 +13455,7 @@
       default: true
     }
   };
-  function _isSlot$3(s) {
+  function _isSlot$2(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   const COMPONENT_NAME$1w = "vc-expand";
@@ -13476,7 +13479,7 @@
             enter: 200,
             leave: 200
           }
-        }, _isSlot$3(_slot = vue.withDirectives(vue.createVNode(Content, null, {
+        }, _isSlot$2(_slot = vue.withDirectives(vue.createVNode(Content, null, {
           default: () => [(props2.alive || !props2.alive && isActive.value) && slots.default?.()]
         }), [[vue.vShow, isActive.value]])) ? _slot : {
           default: () => [_slot]
@@ -13612,7 +13615,7 @@
   const formatter = (format, arr) => {
     return format.replace("DD", arr[0]).replace("HH", arr[1]).replace("mm", arr[2]).replace("ss", arr[3]).replace("SSS", arr[4]);
   };
-  function _isSlot$2(s) {
+  function _isSlot$1(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   const COMPONENT_NAME$1t = "vc-countdown";
@@ -13741,7 +13744,7 @@
             // @ts-ignore
             vue.createVNode(Content, {
               "class": "vc-countdown"
-            }, _isSlot$2(_slot = slots.default(binds.value)) ? _slot : {
+            }, _isSlot$1(_slot = slots.default(binds.value)) ? _slot : {
               default: () => [_slot]
             })
           );
@@ -20665,7 +20668,9 @@
     filterable: {
       type: Boolean,
       default: true
-    }
+    },
+    render: [Function],
+    row: Object
   };
   const COMPONENT_NAME$J = "vc-select-option";
   const Option = /* @__PURE__ */ vue.defineComponent({
@@ -20679,7 +20684,7 @@
         const v = String(props2.label || props2.value);
         return v.trim();
       });
-      const isSelect = vue.computed(() => {
+      const isChecked = vue.computed(() => {
         const {
           current
         } = owner.exposed;
@@ -20696,13 +20701,22 @@
         const regex = owner.exposed.searchRegex.value;
         return regex.test(formatterLabel.value) || !props2.filterable;
       });
-      const handleSelect = (e) => {
-        e.stopPropagation();
+      const customOptions = vue.computed(() => {
+        return {
+          store: {
+            last: isLast.value,
+            checked: isChecked.value,
+            click: handleClick
+          },
+          row: props2.row
+        };
+      });
+      const handleClick = () => {
         if (props2.disabled) return;
-        if (!owner.exposed.multiple.value && isSelect.value) {
+        if (!owner.exposed.multiple.value && isChecked.value) {
           owner.exposed.close();
           return;
-        } else if (isSelect.value) {
+        } else if (isChecked.value) {
           owner.exposed.remove(props2.value, formatterLabel.value);
           return;
         }
@@ -20713,15 +20727,17 @@
       };
       return () => {
         if (!isActive.value) return;
-        return vue.createVNode("div", {
+        return typeof props2.render === "function" ? vue.createVNode(Customer, vue.mergeProps({
+          "render": props2.render
+        }, customOptions.value), null) : slots.default ? slots.default(customOptions.value) : vue.createVNode("div", {
           "disabled": props2.disabled && "disabled",
           "class": [{
-            "is-select": isSelect.value,
+            "is-select": isChecked.value,
             "is-last": isLast.value
           }, "vc-select-option"],
-          "onClick": handleSelect,
+          "onClick": vue.withModifiers(handleClick, ["stop"]),
           "onMousedown": handlePrevent
-        }, [slots.default ? slots.default() : formatterLabel.value, isSelect.value && vue.createVNode(Icon, {
+        }, [formatterLabel.value, isChecked.value && vue.createVNode(Icon, {
           "type": "correct"
         }, null)]);
       };
@@ -20734,7 +20750,9 @@
     },
     label: {
       type: [String, Number]
-    }
+    },
+    row: Object,
+    render: [Function]
   };
   const COMPONENT_NAME$I = "vc-select-option-group";
   const OptionGroup = /* @__PURE__ */ vue.defineComponent({
@@ -20747,18 +20765,24 @@
         const v = String(props2.label || props2.value);
         return v.trim();
       });
+      const customOptions = vue.computed(() => {
+        return {
+          row: props2.row
+        };
+      });
       return () => {
         return vue.createVNode("div", {
           "class": "vc-select-option-group"
-        }, [vue.createVNode("div", {
+        }, [typeof props2.render === "function" ? vue.createVNode(Customer, vue.mergeProps({
+          "render": props2.render
+        }, customOptions.value), null) : slots.title ? slots.title({
+          row: props2.row
+        }) : vue.createVNode("div", {
           "class": "vc-select-option-group__title"
         }, [formatterLabel.value]), vue.createVNode("div", null, [slots?.default?.()])]);
       };
     }
   });
-  function _isSlot$1(s) {
-    return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
-  }
   const COMPONENT_NAME$H = "vc-select";
   const Select = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$H,
@@ -20974,29 +20998,41 @@
               "max-height": "200px"
             }, {
               default: () => [props2.data ? vue.createVNode("div", null, [props2.data.map((item) => {
-                let _slot;
-                return Array.isArray(item.children) ? vue.createVNode(OptionGroup, {
+                return Array.isArray(item.children) && item.children.length ? vue.createVNode(OptionGroup, {
+                  "row": item,
                   "value": item.value,
                   "label": item.label,
-                  "key": item.value
-                }, _isSlot$1(_slot = item.children.map(($item) => {
-                  return vue.createVNode(Option, {
-                    "key": $item.value,
-                    "value": $item.value,
-                    "label": $item.label,
-                    "disabled": $item.disabled,
-                    "filterable": $item.filterable
-                  }, null);
-                })) ? _slot : {
-                  default: () => [_slot]
+                  "key": item.value,
+                  "render": props2.renderOptionGroup
+                }, {
+                  title: slots?.optionGroup,
+                  default: () => {
+                    return item.children.map(($item) => {
+                      return vue.createVNode(Option, {
+                        "key": $item.value,
+                        "row": $item,
+                        "value": $item.value,
+                        "label": $item.label,
+                        "disabled": $item.disabled,
+                        "filterable": $item.filterable,
+                        "render": props2.renderOption
+                      }, {
+                        default: slots?.option
+                      });
+                    });
+                  }
                 }) : vue.createVNode(Option, {
                   "key": item.value,
+                  "row": item,
                   "value": item.value,
                   "label": item.label,
                   "disabled": item.disabled,
-                  "filterable": item.filterable
-                }, null);
-              })]) : slots.default?.()]
+                  "filterable": item.filterable,
+                  "render": props2.renderOption
+                }, {
+                  default: slots?.option
+                });
+              })]) : slots?.default?.()]
             })]);
           }
         });
@@ -28276,112 +28312,33 @@
       }
     };
   };
-  const selectKeys = [
-    "separator",
-    "numerable",
-    "nullValue"
-  ];
   const props$4 = {
-    ...pick(props$19, selectKeys),
-    // 暂不支持，仅作为默认值
-    max: {
-      type: Number,
-      default: Infinity,
-      validator: (v) => v >= 1
-    },
-    // 确保所有value是唯一的; 否则会出现问题
-    data: {
-      type: Array,
-      default: () => []
-    },
-    emptyText: {
-      type: String,
-      default: "暂无数据"
-    },
-    renderAfterExpand: {
-      type: Boolean,
-      default: true
-    },
-    checkStrictly: {
-      type: Boolean,
-      default: false
-    },
-    defaultExpandAll: Boolean,
-    expandOnClickNode: {
-      type: Boolean,
-      default: true
-    },
-    checkOnClickNode: Boolean,
-    checkDescendants: {
-      type: Boolean,
-      default: false
+    node: {
+      type: Object,
+      default: () => ({})
     },
-    autoExpandParent: {
+    renderNodeLabel: Function,
+    renderNodeAfterExpand: {
       type: Boolean,
       default: true
     },
-    // checkedValues -> modelValue
-    modelValue: [String, Number, Array],
-    // Value[]
-    expandedValues: {
-      type: Array,
-      default: () => []
-    },
-    currentNodeValue: [String, Number],
-    render: Function,
     showCheckbox: {
       type: Boolean,
       default: false
     },
-    draggable: {
-      type: Boolean,
-      default: false
-    },
-    allowDrag: Function,
-    allowDrop: Function,
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    highlightCurrent: Boolean,
-    loadData: Function,
-    filterNode: Function,
     accordion: {
       type: Boolean,
       default: false
     },
-    indent: {
-      type: Number,
-      default: 18
-    },
-    iconClass: String,
-    keyValue: {
-      type: Object,
-      default: () => KEY_VALUE
-    },
     allowDispatch: {
       type: Boolean,
       default: true
     }
   };
-  const treeKeys$1 = [
-    "render",
-    "renderAfterExpand",
-    "showCheckbox",
-    "accordion",
-    "allowDispatch"
-  ];
-  const props$3 = {
-    ...pick(props$4, treeKeys$1),
-    node: {
-      type: Object,
-      default: () => ({})
-    }
-  };
   const COMPONENT_NAME$5 = "vc-tree-node";
   const TreeNodeContent = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$5,
-    props: props$3,
+    props: props$4,
     emits: ["node-expand"],
     setup(props2, {
       emit
@@ -28555,20 +28512,20 @@
         }, null), node.states.loading && vue.createVNode(Spin, {
           "size": 12,
           "class": "vc-tree-node__loading-icon"
-        }, null), props2.render ? vue.createVNode(Customer, {
-          "render": props2.render,
+        }, null), props2.renderNodeLabel ? vue.createVNode(Customer, {
+          "render": props2.renderNodeLabel,
           "store": node,
           "row": node.states.data
         }, null) : vue.createVNode("span", null, [node.getter.label])]), vue.createVNode(TransitionCollapse, null, {
-          default: () => [(!props2.renderAfterExpand || childNodeRendered.value) && vue.withDirectives(vue.createVNode("div", {
+          default: () => [(!props2.renderNodeAfterExpand || childNodeRendered.value) && vue.withDirectives(vue.createVNode("div", {
             "aria-expanded": expanded.value,
             "class": "vc-tree-node__children",
             "role": "group"
           }, [node.childNodes.map((child) => {
             return vue.createVNode(TreeNodeContent, {
               "key": getNodeKey(child),
-              "render": props2.render,
-              "renderAfterExpand": props2.renderAfterExpand,
+              "renderNodeLabel": props2.renderNodeLabel,
+              "renderNodeAfterExpand": props2.renderNodeAfterExpand,
               "showCheckbox": props2.showCheckbox,
               "allowDispatch": props2.allowDispatch,
               "accordion": props2.accordion,
@@ -28794,10 +28751,89 @@
       treeItemArray
     };
   };
+  const selectKeys = [
+    "separator",
+    "numerable",
+    "nullValue"
+  ];
+  const treeNodeContentKeys = [
+    "renderNodeLabel",
+    "renderNodeAfterExpand",
+    "showCheckbox",
+    "accordion",
+    "allowDispatch"
+  ];
+  const props$3 = {
+    ...pick(props$19, selectKeys),
+    ...pick(props$4, treeNodeContentKeys),
+    // 暂不支持，仅作为默认值
+    max: {
+      type: Number,
+      default: Infinity,
+      validator: (v) => v >= 1
+    },
+    // 确保所有value是唯一的; 否则会出现问题
+    data: {
+      type: Array,
+      default: () => []
+    },
+    emptyText: {
+      type: String,
+      default: "暂无数据"
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    defaultExpandAll: Boolean,
+    expandOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    checkOnClickNode: Boolean,
+    checkDescendants: {
+      type: Boolean,
+      default: false
+    },
+    autoExpandParent: {
+      type: Boolean,
+      default: true
+    },
+    // checkedValues -> modelValue
+    modelValue: [String, Number, Array],
+    // Value[]
+    expandedValues: {
+      type: Array,
+      default: () => []
+    },
+    currentNodeValue: [String, Number],
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    allowDrag: Function,
+    allowDrop: Function,
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    highlightCurrent: Boolean,
+    loadData: Function,
+    filterNode: Function,
+    indent: {
+      type: Number,
+      default: 18
+    },
+    iconClass: String,
+    keyValue: {
+      type: Object,
+      default: () => KEY_VALUE
+    }
+  };
   const COMPONENT_NAME$4 = "vc-tree";
   const Tree2 = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$4,
-    props: props$4,
+    props: props$3,
     emits: ["update:modelValue", "change", "check-change", "current-change", "node-click", "node-contextmenu", "node-collapse", "node-expand", "check", "node-drag-start", "node-drag-end", "node-drop", "node-drag-leave", "node-drag-enter", "node-drag-over"],
     setup(props2, {
       expose,
@@ -28971,8 +29007,8 @@
         }, [root.childNodes.map((child) => {
           return vue.createVNode(TreeNodeContent, {
             "key": getNodeKey(child),
-            "render": props2.render,
-            "renderAfterExpand": props2.renderAfterExpand,
+            "renderNodeLabel": props2.renderNodeLabel,
+            "renderNodeAfterExpand": props2.renderNodeAfterExpand,
             "showCheckbox": props2.showCheckbox,
             "allowDispatch": props2.allowDispatch,
             "accordion": props2.accordion,
@@ -28993,11 +29029,12 @@
   const treeKeys = [
     "checkStrictly",
     "data",
-    "max"
+    "max",
+    "renderNodeLabel"
   ];
   const props$2 = {
     ...props$19,
-    ...pick(props$4, treeKeys)
+    ...pick(props$3, treeKeys)
   };
   const COMPONENT_NAME$3 = "vc-tree-select";
   const TreeSelect = /* @__PURE__ */ vue.defineComponent({
@@ -29208,6 +29245,7 @@
                 "checkStrictly": props2.checkStrictly,
                 "allowDispatch": false,
                 "showCheckbox": true,
+                "renderNodeLabel": props2.renderNodeLabel,
                 "onChange": handleChange
               }, null)]
             })]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/vc-components": "^1.0.39",
-    "@deot/vc-hooks": "^1.0.39",
-    "@deot/vc-shared": "^1.0.39"
+    "@deot/vc-components": "^1.0.41",
+    "@deot/vc-hooks": "^1.0.41",
+    "@deot/vc-shared": "^1.0.41"
   },
   "peerDependencies": {
     "vue": "*"