vue-devui 1.0.0-rc.6 → 1.0.0-rc.9

package/tree/index.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { createVNode, defineComponent, toRefs, inject, computed, mergeProps, toRef, provide, renderSlot, useSlots, ref, watch } from "vue";
+import { createVNode, defineComponent, toRefs, inject, computed, toRef, provide, mergeProps, renderSlot, useSlots, ref, watch } from "vue";
 const USE_TREE_TOKEN = "use-tree-token";
 const NODE_HEIGHT = 30;
 const NODE_INDENT = 24;
@@ -69,6 +69,29 @@ const IconOpen = () => createVNode("svg", {
   "height": "2",
   "fill": "#5e7ce0"
 }, null)])]);
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var DTreeNodeToggle = defineComponent({
   name: "DTreeNodeToggle",
   props: {
@@ -84,10 +107,11 @@ var DTreeNodeToggle = defineComponent({
     const {
       toggleNode
     } = inject(USE_TREE_TOKEN);
+    const ns2 = useNamespace("tree");
     return () => {
       var _a;
       return createVNode("span", {
-        "class": ["devui-tree-node__folder", ((_a = data.value) == null ? void 0 : _a.disableToggle) && "toggle-disabled"],
+        "class": [ns2.e("node-folder"), ((_a = data.value) == null ? void 0 : _a.disableToggle) && "toggle-disabled"],
         "onClick": (event) => {
           event.stopPropagation();
           if (toggleNode) {
@@ -95,7 +119,7 @@ var DTreeNodeToggle = defineComponent({
           }
         }
       }, [data.value.isLeaf ? createVNode("span", {
-        "class": "devui-tree-node__indent"
+        "class": ns2.e("node-indent")
       }, null) : data.value.expanded ? createVNode(IconOpen, {
         "class": "mr-xs"
       }, null) : createVNode(IconClose, {
@@ -104,13 +128,12 @@ var DTreeNodeToggle = defineComponent({
     };
   }
 });
-var checkbox = "";
 const commonProps = {
   name: {
     type: String,
     default: void 0
   },
-  halfchecked: {
+  halfChecked: {
     type: Boolean,
     default: false
   },
@@ -136,27 +159,23 @@ const commonProps = {
   beforeChange: {
     type: Function,
     default: void 0
+  },
+  size: {
+    type: String,
+    default: "md"
   }
 };
 const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
-  halfchecked: {
-    type: Boolean,
-    default: false
-  },
   checked: {
     type: Boolean,
     default: false
   },
   value: {
-    type: String
+    type: [Number, String]
   },
   label: {
     type: String,
-    default: void 0
-  },
-  title: {
-    type: String,
-    default: void 0
+    default: ""
   },
   "onUpdate:checked": {
     type: Function,
@@ -171,6 +190,10 @@ const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
   },
   "onUpdate:modelValue": {
     type: Function
+  },
+  border: {
+    type: Boolean,
+    default: false
   }
 });
 const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
@@ -197,158 +220,260 @@ const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
   "onUpdate:modelValue": {
     type: Function,
     default: void 0
+  },
+  border: {
+    type: Boolean,
+    default: false
+  },
+  max: {
+    type: Number,
+    default: void 0
+  },
+  textColor: {
+    type: String,
+    default: ""
   }
 });
 const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+function useCheckbox(props, ctx) {
+  const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+  const isChecked = computed(() => props.checked || props.modelValue);
+  const mergedChecked = computed(() => {
+    var _a, _b;
+    return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
+  });
+  const isLimitDisabled = computed(() => {
+    const max = checkboxGroupConf == null ? void 0 : checkboxGroupConf.max.value;
+    return !!max && (checkboxGroupConf == null ? void 0 : checkboxGroupConf.modelValue.value.length) >= max && !mergedChecked.value;
+  });
+  const mergedDisabled = computed(() => {
+    return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled || isLimitDisabled.value;
+  });
+  const mergedIsShowTitle = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
+  });
+  const mergedShowAnimation = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
+  });
+  const mergedColor = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
+  });
+  const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
+  const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
+  const canChange = (checked, val) => {
+    var _a;
+    if (mergedDisabled.value) {
+      return Promise.resolve(false);
+    }
+    const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
+    if (beforeChange) {
+      const res = beforeChange(checked, val);
+      if (typeof res === "boolean") {
+        return Promise.resolve(res);
+      }
+      return res;
+    }
+    return Promise.resolve(true);
+  };
+  const toggle = () => {
+    const current = !isChecked.value;
+    checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
+    ctx.emit("update:checked", current);
+    ctx.emit("update:modelValue", current);
+    ctx.emit("change", current);
+  };
+  const handleClick = () => {
+    canChange(!isChecked.value, props.label).then((res) => res && toggle());
+  };
+  const size = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.size.value) != null ? _a : props.size;
+  });
+  const border = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.border.value) != null ? _a : props.border;
+  });
+  return {
+    mergedChecked,
+    mergedDisabled,
+    mergedIsShowTitle,
+    mergedShowAnimation,
+    mergedColor,
+    itemWidth,
+    direction,
+    handleClick,
+    size,
+    border
+  };
+}
+function useCheckboxGroup(props, ctx) {
+  const valList = toRef(props, "modelValue");
+  const defaultOpt = {
+    checked: false,
+    isShowTitle: true,
+    halfChecked: false,
+    showAnimation: true,
+    disabled: false
+  };
+  const toggleGroupVal = (val) => {
+    let index2 = -1;
+    if (["string", "number"].includes(typeof valList.value[0])) {
+      index2 = valList.value.findIndex((item) => item === val);
+    } else if (typeof valList.value[0] === "object") {
+      index2 = valList.value.findIndex((item) => item.value === val);
+    }
+    if (index2 === -1) {
+      if (typeof props.options[0] === "object") {
+        const newOne = props.options.find((item) => item.value === val);
+        const res2 = [...valList.value, newOne];
+        ctx.emit("update:modelValue", res2);
+        ctx.emit("change", res2);
+        return;
+      }
+      const res = [...valList.value, val];
+      ctx.emit("update:modelValue", res);
+      ctx.emit("change", res);
+      return;
+    }
+    valList.value.splice(index2, 1);
+    ctx.emit("update:modelValue", valList.value);
+    ctx.emit("change", valList.value);
+  };
+  const isItemChecked = (itemVal) => {
+    if (["string", "number"].includes(typeof valList.value[0])) {
+      return valList.value.includes(itemVal);
+    } else if (typeof valList.value[0] === "object") {
+      return valList.value.some((item) => item.value === itemVal);
+    }
+  };
+  provide(checkboxGroupInjectionKey, {
+    disabled: toRef(props, "disabled"),
+    isShowTitle: toRef(props, "isShowTitle"),
+    color: toRef(props, "color"),
+    showAnimation: toRef(props, "showAnimation"),
+    beforeChange: props.beforeChange,
+    isItemChecked,
+    toggleGroupVal,
+    itemWidth: toRef(props, "itemWidth"),
+    direction: toRef(props, "direction"),
+    size: toRef(props, "size"),
+    border: toRef(props, "border"),
+    max: toRef(props, "max"),
+    modelValue: toRef(props, "modelValue"),
+    textColor: toRef(props, "textColor")
+  });
+  return { defaultOpt };
+}
+function useCheckboxButton() {
+  const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+  const mergedTextColor = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.textColor.value) != null ? _a : void 0;
+  });
+  return {
+    mergedTextColor
+  };
+}
+var checkbox = "";
 var Checkbox = defineComponent({
   name: "DCheckbox",
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
-    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
-    const isChecked = computed(() => props.checked || props.modelValue);
-    const mergedDisabled = computed(() => {
-      return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
-    });
-    const mergedChecked = computed(() => {
-      var _a, _b;
-      return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
-    });
-    const mergedIsShowTitle = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
-    });
-    const mergedShowAnimation = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
-    });
-    const mergedColor = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
-    });
-    const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
-    const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
-    const canChange = (checked, val) => {
-      var _a;
-      if (mergedDisabled.value) {
-        return Promise.resolve(false);
-      }
-      const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
-      if (beforeChange) {
-        const res = beforeChange(checked, val);
-        if (typeof res === "boolean") {
-          return Promise.resolve(res);
-        }
-        return res;
-      }
-      return Promise.resolve(true);
-    };
-    const toggle = () => {
-      const current = !isChecked.value;
-      checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
-      ctx.emit("update:checked", current);
-      ctx.emit("update:modelValue", current);
-      ctx.emit("change", current);
-    };
-    const handleClick = () => {
-      canChange(!isChecked.value, props.label).then((res) => res && toggle());
-    };
-    return {
-      itemWidth,
-      direction,
-      mergedColor,
-      mergedDisabled,
-      mergedIsShowTitle,
-      mergedChecked,
-      mergedShowAnimation,
-      handleClick
-    };
-  },
-  render() {
-    var _a;
+    const ns2 = useNamespace("checkbox");
     const {
-      itemWidth,
-      direction,
       mergedChecked,
       mergedDisabled,
       mergedIsShowTitle,
       mergedShowAnimation,
-      halfchecked,
-      title,
-      label,
-      handleClick,
-      name,
-      value,
       mergedColor,
-      $slots
-    } = this;
-    const wrapperCls = {
-      "devui-checkbox-column-margin": direction === "column",
-      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
-    };
-    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
-    const checkboxCls = {
-      "devui-checkbox": true,
-      active: mergedChecked,
-      halfchecked,
-      disabled: mergedDisabled,
-      unchecked: !mergedChecked
-    };
-    const labelTitle = mergedIsShowTitle ? title || label : "";
-    const bgImgStyle = mergedColor && halfchecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
-    const spanStyle = [`border-color:${(mergedChecked || halfchecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfchecked ? mergedColor : ""}`];
-    const spanCls = {
-      "devui-checkbox-material": true,
-      "custom-color": mergedColor,
-      "devui-checkbox-no-label": !label && !$slots.default,
-      "devui-no-animation": !mergedShowAnimation,
-      "devui-checkbox-default-background": !halfchecked
-    };
-    const polygonCls = {
-      "devui-tick": true,
-      "devui-no-animation": !mergedShowAnimation
-    };
-    const stopPropagation = ($event) => $event.stopPropagation();
-    const inputProps = {
-      indeterminate: halfchecked
-    };
-    return createVNode("div", {
-      "class": wrapperCls,
-      "style": wrapperStyle
-    }, [createVNode("div", {
-      "class": checkboxCls
-    }, [createVNode("label", {
-      "title": labelTitle,
-      "onClick": handleClick
-    }, [createVNode("input", mergeProps({
-      "name": name || value,
-      "class": "devui-checkbox-input",
-      "type": "checkbox"
-    }, inputProps, {
-      "checked": mergedChecked,
-      "disabled": mergedDisabled,
-      "onClick": stopPropagation,
-      "onChange": stopPropagation
-    }), null), createVNode("span", {
-      "style": spanStyle,
-      "class": spanCls
-    }, [createVNode("span", {
-      "class": "devui-checkbox-halfchecked-bg"
-    }, null), createVNode("svg", {
-      "viewBox": "0 0 16 16",
-      "version": "1.1",
-      "xmlns": "http://www.w3.org/2000/svg",
-      "class": "devui-checkbox-tick"
-    }, [createVNode("g", {
-      "stroke": "none",
-      "stroke-width": "1",
-      "fill": "none",
-      "fill-rule": "evenodd"
-    }, [createVNode("polygon", {
-      "fill-rule": "nonzero",
-      "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
-      "class": polygonCls
-    }, null)])])]), label || ((_a = $slots.default) == null ? void 0 : _a.call($slots))])])]);
+      itemWidth,
+      direction,
+      handleClick,
+      size,
+      border
+    } = useCheckbox(props, ctx);
+    return () => {
+      var _a, _b;
+      const wrapperCls = {
+        [ns2.e("column-margin")]: direction === "column",
+        [ns2.e("wrap")]: typeof itemWidth !== "undefined"
+      };
+      const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
+      const checkboxCls = {
+        [ns2.b()]: true,
+        active: mergedChecked.value,
+        "half-checked": props.halfChecked,
+        disabled: mergedDisabled.value,
+        unchecked: !mergedChecked.value
+      };
+      const labelTitle = mergedIsShowTitle.value ? props.title || props.label : "";
+      const bgImgStyle = mergedColor.value && props.halfChecked || mergedColor.value ? `linear-gradient(${mergedColor.value}, ${mergedColor.value})` : "";
+      const spanStyle = [`border-color:${(mergedChecked.value || props.halfChecked) && mergedColor.value ? mergedColor.value : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor.value && props.halfChecked ? mergedColor.value : ""}`];
+      const spanCls = {
+        [ns2.e("material")]: true,
+        "custom-color": mergedColor.value,
+        [ns2.m("no-label")]: !props.label && !ctx.slots.default,
+        [ns2.m("no-animation")]: !mergedShowAnimation.value,
+        [ns2.e("default-background")]: !props.halfChecked
+      };
+      const polygonCls = {
+        [ns2.e("tick")]: true,
+        [ns2.m("no-animation")]: !mergedShowAnimation.value
+      };
+      const labelCls = {
+        [ns2.m(size.value)]: border.value,
+        [ns2.m("bordered")]: border.value
+      };
+      const stopPropagation = ($event) => $event.stopPropagation();
+      const inputProps = {
+        indeterminate: props.halfChecked
+      };
+      return createVNode("div", {
+        "class": wrapperCls,
+        "style": wrapperStyle
+      }, [createVNode("div", {
+        "class": checkboxCls
+      }, [createVNode("label", {
+        "title": labelTitle,
+        "onClick": handleClick,
+        "class": labelCls,
+        "style": {
+          width: itemWidth ? "100%" : "auto"
+        }
+      }, [createVNode("input", mergeProps({
+        "name": props.name || props.value,
+        "class": ns2.e("input"),
+        "type": "checkbox"
+      }, inputProps, {
+        "checked": mergedChecked.value,
+        "disabled": mergedDisabled.value,
+        "onClick": stopPropagation,
+        "onChange": stopPropagation
+      }), null), createVNode("span", {
+        "style": spanStyle,
+        "class": spanCls
+      }, [createVNode("span", {
+        "class": ns2.e("halfchecked-bg")
+      }, null), createVNode("svg", {
+        "viewBox": "0 0 16 16",
+        "version": "1.1",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "class": ns2.e("tick-wrap")
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("polygon", {
+        "fill-rule": "nonzero",
+        "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
+        "class": polygonCls
+      }, null)])])]), props.label || ((_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a))])])]);
+    };
   }
 });
 var checkboxGroup = "";
@@ -357,102 +482,105 @@ defineComponent({
   props: checkboxGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx) {
-    const valList = toRef(props, "modelValue");
-    const defaultOpt = {
-      checked: false,
-      isShowTitle: true,
-      halfchecked: false,
-      showAnimation: true,
-      disabled: false
-    };
-    const toggleGroupVal = (val) => {
-      let index2 = -1;
-      if (typeof valList.value[0] === "string") {
-        index2 = valList.value.findIndex((item) => item === val);
-      } else if (typeof valList.value[0] === "object") {
-        index2 = valList.value.findIndex((item) => item.value === val);
-      }
-      if (index2 === -1) {
-        if (typeof props.options[0] === "object") {
-          const newOne = props.options.find((item) => item.value === val);
-          const res2 = [...valList.value, newOne];
-          ctx.emit("update:modelValue", res2);
-          ctx.emit("change", res2);
-          return;
-        }
-        const res = [...valList.value, val];
-        ctx.emit("update:modelValue", res);
-        ctx.emit("change", res);
-        return;
-      }
-      valList.value.splice(index2, 1);
-      ctx.emit("update:modelValue", valList.value);
-      ctx.emit("change", valList.value);
-    };
-    const isItemChecked = (itemVal) => {
-      if (typeof valList.value[0] === "string") {
-        return valList.value.includes(itemVal);
-      } else if (typeof valList.value[0] === "object") {
-        return valList.value.some((item) => item.value === itemVal);
-      }
-    };
-    provide(checkboxGroupInjectionKey, {
-      disabled: toRef(props, "disabled"),
-      isShowTitle: toRef(props, "isShowTitle"),
-      color: toRef(props, "color"),
-      showAnimation: toRef(props, "showAnimation"),
-      beforeChange: props.beforeChange,
-      isItemChecked,
-      toggleGroupVal,
-      itemWidth: toRef(props, "itemWidth"),
-      direction: toRef(props, "direction")
-    });
-    return {
+    const ns2 = useNamespace("checkbox");
+    const {
       defaultOpt
+    } = useCheckboxGroup(props, ctx);
+    return () => {
+      var _a, _b;
+      let children = (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a);
+      const getContent = () => {
+        var _a2;
+        if (children) {
+          return children;
+        } else {
+          if (((_a2 = props.options) == null ? void 0 : _a2.length) > 0) {
+            children = props.options.map((opt) => {
+              let mergedOpt = null;
+              if (typeof opt === "string") {
+                mergedOpt = Object.assign({}, defaultOpt, {
+                  label: opt,
+                  value: opt
+                });
+              } else if (typeof opt === "object") {
+                mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
+                  label: opt.name
+                }));
+              }
+              return createVNode(Checkbox, mergedOpt, null);
+            });
+          }
+          return children;
+        }
+      };
+      return createVNode("div", {
+        "class": ns2.e("group")
+      }, [createVNode("div", {
+        "class": {
+          [ns2.m("list-inline")]: props.direction === "row"
+        }
+      }, [getContent()])]);
     };
-  },
-  render() {
-    var _a;
+  }
+});
+var checkboxButton = "";
+defineComponent({
+  name: "DCheckboxButton",
+  props: checkboxProps,
+  emits: ["change", "update:checked", "update:modelValue"],
+  setup(props, ctx) {
+    const ns2 = useNamespace("checkbox-button");
     const {
-      direction,
-      $slots,
-      defaultOpt,
-      options
-    } = this;
-    let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
-    if ((options == null ? void 0 : options.length) > 0) {
-      children = options.map((opt) => {
-        let mergedOpt = null;
-        if (typeof opt === "string") {
-          mergedOpt = Object.assign({}, defaultOpt, {
-            label: opt,
-            value: opt
-          });
-        } else if (typeof opt === "object") {
-          mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
-            label: opt.name
-          }));
-        }
-        return createVNode(Checkbox, mergedOpt, null);
-      });
-    }
-    return createVNode("div", {
-      "class": "devui-checkbox-group"
-    }, [createVNode("div", {
-      "class": {
-        "devui-checkbox-list-inline": direction === "row"
-      }
-    }, [children])]);
+      mergedChecked,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedColor,
+      handleClick,
+      size
+    } = useCheckbox(props, ctx);
+    const {
+      mergedTextColor
+    } = useCheckboxButton();
+    return () => {
+      var _a, _b;
+      const labelTitle = mergedIsShowTitle.value ? props.title || props.label : "";
+      const spanStyle = [`border-color:${mergedChecked.value && mergedColor.value ? mergedColor.value : ""}`, `background-color:${mergedChecked.value && mergedColor.value ? mergedColor.value : ""}`, `color:${mergedChecked.value && mergedTextColor.value ? mergedTextColor.value : ""}`];
+      const labelCls = {
+        [ns2.b()]: true,
+        active: mergedChecked.value,
+        disabled: mergedDisabled.value,
+        unchecked: !mergedChecked.value
+      };
+      const spanCls = {
+        [ns2.e("content")]: true,
+        [ns2.m(size.value)]: true
+      };
+      const stopPropagation = ($event) => $event.stopPropagation();
+      return createVNode("label", {
+        "title": labelTitle,
+        "onClick": handleClick,
+        "class": labelCls
+      }, [createVNode("input", {
+        "name": props.name || props.value,
+        "class": ns2.e("input"),
+        "type": "checkbox",
+        "checked": mergedChecked.value,
+        "disabled": mergedDisabled.value,
+        "onClick": stopPropagation,
+        "onChange": stopPropagation
+      }, null), createVNode("span", {
+        "style": spanStyle,
+        "class": spanCls
+      }, [props.label || ((_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a))])]);
+    };
   }
 });
+const ns = useNamespace("tree");
 function useTreeNode(data) {
   const { getChildren } = inject(USE_TREE_TOKEN);
   const nodeClass = computed(() => {
     var _a;
-    return [
-      "devui-tree-node",
-      ((_a = data.value) == null ? void 0 : _a.expanded) && "devui-tree-node__open"
-    ];
+    return [ns.e("node"), ((_a = data.value) == null ? void 0 : _a.expanded) && ns.em("node", "open")];
   });
   const nodeStyle = computed(() => {
     var _a;
@@ -460,9 +588,7 @@ function useTreeNode(data) {
   });
   const nodeVLineClass = computed(() => {
     var _a, _b;
-    return [
-      !((_a = data.value) == null ? void 0 : _a.isLeaf) && ((_b = data.value) == null ? void 0 : _b.expanded) && "devui-tree-node__vline"
-    ];
+    return [!((_a = data.value) == null ? void 0 : _a.isLeaf) && ((_b = data.value) == null ? void 0 : _b.expanded) && ns.e("node-vline")];
   });
   const nodeVLineStyle = computed(() => {
     var _a;
@@ -474,23 +600,15 @@ function useTreeNode(data) {
   });
   const nodeHLineClass = computed(() => {
     var _a;
-    return [
-      ((_a = data.value) == null ? void 0 : _a.level) !== 1 && "devui-tree-node__hline"
-    ];
+    return [((_a = data.value) == null ? void 0 : _a.level) !== 1 && ns.e("node-hline")];
   });
   const nodeContentClass = computed(() => {
     var _a;
-    return [
-      "devui-tree-node__content",
-      ((_a = data.value) == null ? void 0 : _a.selected) && "active"
-    ];
+    return [ns.e("node-content"), ((_a = data.value) == null ? void 0 : _a.selected) && "active"];
   });
   const nodeTitleClass = computed(() => {
     var _a;
-    return [
-      "devui-tree-node__title",
-      ((_a = data.value) == null ? void 0 : _a.disableSelect) && "select-disabled"
-    ];
+    return [ns.e("node-title"), ((_a = data.value) == null ? void 0 : _a.disableSelect) && "select-disabled"];
   });
   return {
     nodeClass,
@@ -550,6 +668,7 @@ var DTreeNode = defineComponent({
       toggleNode,
       getChildren
     } = inject(USE_TREE_TOKEN);
+    const ns2 = useNamespace("tree");
     const {
       nodeClass,
       nodeStyle,
@@ -600,7 +719,7 @@ var DTreeNode = defineComponent({
       }) : createVNode(DTreeNodeToggle, {
         "data": data.value
       }, null), createVNode("div", {
-        "class": "devui-tree-node__content--value-wrapper",
+        "class": ns2.em("node-content", "value-wrapper"),
         "style": {
           height: `${NODE_HEIGHT}px`
         }
@@ -964,6 +1083,7 @@ var Tree = defineComponent({
       data,
       check
     } = toRefs(props);
+    const ns2 = useNamespace("tree");
     const userPlugins = [useSelect(), useOperate(), useMergeNodes()];
     const checkOptions = ref({
       checkStrategy: check.value || "both"
@@ -987,7 +1107,7 @@ var Tree = defineComponent({
     });
     return () => {
       return createVNode("div", {
-        "class": "devui-tree"
+        "class": ns2.b()
       }, [getExpendedTree == null ? void 0 : getExpendedTree().value.map((treeNode) => slots.default ? renderSlot(useSlots(), "default", {
         treeFactory,
         nodeData: treeNode