vue-devui 1.0.0-rc.7 → 1.0.0-rc.8

package/tooltip/style.css

@@ -1 +1 @@
-@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-tooltip-reference{display:inline-block}.devui-tooltip{max-width:200px;min-height:26px;padding:4px 16px;font-size:var(--devui-font-size, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6);letter-spacing:0;line-height:1.5;background:var(--devui-feedback-overlay-bg, #464d6e);box-shadow:none;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;text-align:start;border-radius:var(--devui-border-radius-feedback, 4px);font-style:normal;font-weight:400;line-break:auto;text-decoration:none;text-shadow:none;text-transform:none;word-spacing:normal;white-space:normal;opacity:1;z-index:var(--devui-z-index-pop-up, 1060)}.devui-tooltip-fade-bottom-enter-from,.devui-tooltip-fade-bottom-leave-to,.devui-tooltip-fade-top-enter-from,.devui-tooltip-fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-tooltip-fade-bottom-enter-to,.devui-tooltip-fade-bottom-leave-from,.devui-tooltip-fade-top-enter-to,.devui-tooltip-fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-tooltip-fade-bottom-enter-active,.devui-tooltip-fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip-fade-bottom-leave-active,.devui-tooltip-fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-tooltip-fade-left-enter-from,.devui-tooltip-fade-left-leave-to,.devui-tooltip-fade-right-enter-from,.devui-tooltip-fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-tooltip-fade-left-enter-to,.devui-tooltip-fade-left-leave-from,.devui-tooltip-fade-right-enter-to,.devui-tooltip-fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-tooltip-fade-left-enter-active,.devui-tooltip-fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip-fade-left-leave-active,.devui-tooltip-fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}
+@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay__fade-enter{opacity:0}.devui-overlay__fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay__fade-leave{opacity:1}.devui-overlay__fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay__background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay__background--color{background:rgba(0,0,0,.4)}.devui-overlay__background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay__background--disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-tooltip__reference{display:inline-block}.devui-tooltip{max-width:200px;min-height:26px;padding:4px 16px;font-size:var(--devui-font-size, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6);letter-spacing:0;line-height:1.5;background:var(--devui-feedback-overlay-bg, #464d6e);box-shadow:none;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;text-align:start;border-radius:var(--devui-border-radius-feedback, 4px);font-style:normal;font-weight:400;line-break:auto;text-decoration:none;text-shadow:none;text-transform:none;word-spacing:normal;white-space:normal;opacity:1;z-index:var(--devui-z-index-pop-up, 1060)}.devui-tooltip-fade-bottom-enter-from,.devui-tooltip-fade-bottom-leave-to,.devui-tooltip-fade-top-enter-from,.devui-tooltip-fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-tooltip-fade-bottom-enter-to,.devui-tooltip-fade-bottom-leave-from,.devui-tooltip-fade-top-enter-to,.devui-tooltip-fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-tooltip-fade-bottom-enter-active,.devui-tooltip-fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip-fade-bottom-leave-active,.devui-tooltip-fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-tooltip-fade-left-enter-from,.devui-tooltip-fade-left-leave-to,.devui-tooltip-fade-right-enter-from,.devui-tooltip-fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-tooltip-fade-left-enter-to,.devui-tooltip-fade-left-leave-from,.devui-tooltip-fade-right-enter-to,.devui-tooltip-fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-tooltip-fade-left-enter-active,.devui-tooltip-fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip-fade-left-leave-active,.devui-tooltip-fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}

package/tree/index.es.js

@@ -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) {
+  const namespace = `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
   },
@@ -139,10 +162,6 @@ const commonProps = {
   }
 };
 const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
-  halfchecked: {
-    type: Boolean,
-    default: false
-  },
   checked: {
     type: Boolean,
     default: false
@@ -154,10 +173,6 @@ const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
     type: String,
     default: void 0
   },
-  title: {
-    type: String,
-    default: void 0
-  },
   "onUpdate:checked": {
     type: Function,
     default: void 0
@@ -200,12 +215,14 @@ const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
   }
 });
 const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+var checkbox = "";
 var Checkbox = defineComponent({
   name: "DCheckbox",
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
     const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+    const ns2 = useNamespace("checkbox");
     const isChecked = computed(() => props.checked || props.modelValue);
     const mergedDisabled = computed(() => {
       return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
@@ -261,7 +278,8 @@ var Checkbox = defineComponent({
       mergedIsShowTitle,
       mergedChecked,
       mergedShowAnimation,
-      handleClick
+      handleClick,
+      ns: ns2
     };
   },
   render() {
@@ -273,44 +291,45 @@ var Checkbox = defineComponent({
       mergedDisabled,
       mergedIsShowTitle,
       mergedShowAnimation,
-      halfchecked,
+      halfChecked,
       title,
       label,
       handleClick,
       name,
       value,
       mergedColor,
+      ns: ns2,
       $slots
     } = this;
     const wrapperCls = {
-      "devui-checkbox-column-margin": direction === "column",
-      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
+      [ns2.e("column-margin")]: direction === "column",
+      [ns2.e("wrap")]: typeof itemWidth !== "undefined"
     };
     const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
     const checkboxCls = {
-      "devui-checkbox": true,
+      [ns2.b()]: true,
       active: mergedChecked,
-      halfchecked,
+      "half-checked": 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 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,
+      [ns2.e("material")]: true,
       "custom-color": mergedColor,
-      "devui-checkbox-no-label": !label && !$slots.default,
-      "devui-no-animation": !mergedShowAnimation,
-      "devui-checkbox-default-background": !halfchecked
+      [ns2.m("no-label")]: !label && !$slots.default,
+      [ns2.m("no-animation")]: !mergedShowAnimation,
+      [ns2.e("default-background")]: !halfChecked
     };
     const polygonCls = {
-      "devui-tick": true,
-      "devui-no-animation": !mergedShowAnimation
+      [ns2.e("tick")]: true,
+      [ns2.m("no-animation")]: !mergedShowAnimation
     };
     const stopPropagation = ($event) => $event.stopPropagation();
     const inputProps = {
-      indeterminate: halfchecked
+      indeterminate: halfChecked
     };
     return createVNode("div", {
       "class": wrapperCls,
@@ -322,7 +341,7 @@ var Checkbox = defineComponent({
       "onClick": handleClick
     }, [createVNode("input", mergeProps({
       "name": name || value,
-      "class": "devui-checkbox-input",
+      "class": ns2.e("input"),
       "type": "checkbox"
     }, inputProps, {
       "checked": mergedChecked,
@@ -333,12 +352,12 @@ var Checkbox = defineComponent({
       "style": spanStyle,
       "class": spanCls
     }, [createVNode("span", {
-      "class": "devui-checkbox-halfchecked-bg"
+      "class": ns2.e("halfchecked-bg")
     }, null), createVNode("svg", {
       "viewBox": "0 0 16 16",
       "version": "1.1",
       "xmlns": "http://www.w3.org/2000/svg",
-      "class": "devui-checkbox-tick"
+      "class": ns2.e("tick-wrap")
     }, [createVNode("g", {
       "stroke": "none",
       "stroke-width": "1",
@@ -361,7 +380,7 @@ defineComponent({
     const defaultOpt = {
       checked: false,
       isShowTitle: true,
-      halfchecked: false,
+      halfChecked: false,
       showAnimation: true,
       disabled: false
     };
@@ -445,14 +464,12 @@ defineComponent({
     }, [children])]);
   }
 });
+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 +477,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 +489,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 +557,7 @@ var DTreeNode = defineComponent({
       toggleNode,
       getChildren
     } = inject(USE_TREE_TOKEN);
+    const ns2 = useNamespace("tree");
     const {
       nodeClass,
       nodeStyle,
@@ -600,7 +608,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 +972,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 +996,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

package/tree/index.umd.js

@@ -1 +1 @@
-var ce=Object.defineProperty,de=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var se=Object.prototype.hasOwnProperty,ie=Object.prototype.propertyIsEnumerable;var U=(N,e,b)=>e in N?ce(N,e,{enumerable:!0,configurable:!0,writable:!0,value:b}):N[e]=b,V=(N,e)=>{for(var b in e||(e={}))se.call(e,b)&&U(N,b,e[b]);if($)for(var b of $(e))ie.call(e,b)&&U(N,b,e[b]);return N},C=(N,e)=>de(N,re(e));(function(N,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(N=typeof globalThis!="undefined"?globalThis:N||self,e(N.index={},N.Vue))})(this,function(N,e){"use strict";const b="use-tree-token",M=()=>e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"svg-icon"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("rect",{x:"0.5",y:"0.5",width:"15",height:"15",rx:"2",stroke:"#252b3a"},null),e.createVNode("path",{fill:"#252b3a",d:"M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"},null)])]),W=()=>e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"svg-icon svg-icon-close"},[e.createVNode("g",{"stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("rect",{x:"0.5",y:"0.5",width:"15",height:"15",rx:"2",stroke:"#5e7ce0"},null),e.createVNode("rect",{x:"4",y:"7",width:"8",height:"2",fill:"#5e7ce0"},null)])]);var E=e.defineComponent({name:"DTreeNodeToggle",props:{data:{type:Object,default:()=>({})}},setup(o){const{data:n}=e.toRefs(o),{toggleNode:t}=e.inject(b);return()=>{var l;return e.createVNode("span",{class:["devui-tree-node__folder",((l=n.value)==null?void 0:l.disableToggle)&&"toggle-disabled"],onClick:s=>{s.stopPropagation(),t&&t(n.value)}},[n.value.isLeaf?e.createVNode("span",{class:"devui-tree-node__indent"},null):n.value.expanded?e.createVNode(W,{class:"mr-xs"},null):e.createVNode(M,{class:"mr-xs"},null)])}}}),fe="";const L={name:{type:String,default:void 0},halfchecked:{type:Boolean,default:!1},isShowTitle:{type:Boolean,default:!0},title:{type:String},color:{type:String,default:void 0},showAnimation:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0}},q=C(V({},L),{halfchecked:{type:Boolean,default:!1},checked:{type:Boolean,default:!1},value:{type:String},label:{type:String,default:void 0},title:{type:String,default:void 0},"onUpdate:checked":{type:Function,default:void 0},onChange:{type:Function,default:void 0},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}}),z=C(V({},L),{modelValue:{type:Array,required:!0},direction:{type:String,default:"column"},itemWidth:{type:Number,default:void 0},options:{type:Array,default:()=>[]},onChange:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}}),_=Symbol("d-checkbox-group");var O=e.defineComponent({name:"DCheckbox",props:q,emits:["change","update:checked","update:modelValue"],setup(o,n){const t=e.inject(_,null),l=e.computed(()=>o.checked||o.modelValue),s=e.computed(()=>(t==null?void 0:t.disabled.value)||o.disabled),h=e.computed(()=>{var g,p;return(p=(g=t==null?void 0:t.isItemChecked)==null?void 0:g.call(t,o.value))!=null?p:l.value}),c=e.computed(()=>{var g;return(g=t==null?void 0:t.isShowTitle.value)!=null?g:o.isShowTitle}),f=e.computed(()=>{var g;return(g=t==null?void 0:t.showAnimation.value)!=null?g:o.showAnimation}),d=e.computed(()=>{var g;return(g=t==null?void 0:t.color.value)!=null?g:o.color}),i=t==null?void 0:t.itemWidth.value,r=t==null?void 0:t.direction.value,u=(g,p)=>{var v;if(s.value)return Promise.resolve(!1);const k=(v=o.beforeChange)!=null?v:t==null?void 0:t.beforeChange;if(k){const y=k(g,p);return typeof y=="boolean"?Promise.resolve(y):y}return Promise.resolve(!0)},a=()=>{const g=!l.value;t==null||t.toggleGroupVal(o.value),n.emit("update:checked",g),n.emit("update:modelValue",g),n.emit("change",g)};return{itemWidth:i,direction:r,mergedColor:d,mergedDisabled:s,mergedIsShowTitle:c,mergedChecked:h,mergedShowAnimation:f,handleClick:()=>{u(!l.value,o.label).then(g=>g&&a())}}},render(){var F;const{itemWidth:o,direction:n,mergedChecked:t,mergedDisabled:l,mergedIsShowTitle:s,mergedShowAnimation:h,halfchecked:c,title:f,label:d,handleClick:i,name:r,value:u,mergedColor:a,$slots:m}=this,g={"devui-checkbox-column-margin":n==="column","devui-checkbox-wrap":typeof o!="undefined"},p=o?[`width: ${o}px`]:[],k={"devui-checkbox":!0,active:t,halfchecked:c,disabled:l,unchecked:!t},v=s?f||d:"",y=a&&c||a?`linear-gradient(${a}, ${a})`:"",w=[`border-color:${(t||c)&&a?a:""}`,`background-image:${y}`,`background-color:${a&&c?a:""}`],D={"devui-checkbox-material":!0,"custom-color":a,"devui-checkbox-no-label":!d&&!m.default,"devui-no-animation":!h,"devui-checkbox-default-background":!c},T={"devui-tick":!0,"devui-no-animation":!h},S=oe=>oe.stopPropagation(),le={indeterminate:c};return e.createVNode("div",{class:g,style:p},[e.createVNode("div",{class:k},[e.createVNode("label",{title:v,onClick:i},[e.createVNode("input",e.mergeProps({name:r||u,class:"devui-checkbox-input",type:"checkbox"},le,{checked:t,disabled:l,onClick:S,onChange:S}),null),e.createVNode("span",{style:w,class:D},[e.createVNode("span",{class:"devui-checkbox-halfchecked-bg"},null),e.createVNode("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"devui-checkbox-tick"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.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:T},null)])])]),d||((F=m.default)==null?void 0:F.call(m))])])])}}),ge="";e.defineComponent({name:"DCheckboxGroup",props:z,emits:["change","update:modelValue"],setup(o,n){const t=e.toRef(o,"modelValue"),l={checked:!1,isShowTitle:!0,halfchecked:!1,showAnimation:!0,disabled:!1},s=c=>{let f=-1;if(typeof t.value[0]=="string"?f=t.value.findIndex(d=>d===c):typeof t.value[0]=="object"&&(f=t.value.findIndex(d=>d.value===c)),f===-1){if(typeof o.options[0]=="object"){const i=o.options.find(u=>u.value===c),r=[...t.value,i];n.emit("update:modelValue",r),n.emit("change",r);return}const d=[...t.value,c];n.emit("update:modelValue",d),n.emit("change",d);return}t.value.splice(f,1),n.emit("update:modelValue",t.value),n.emit("change",t.value)},h=c=>{if(typeof t.value[0]=="string")return t.value.includes(c);if(typeof t.value[0]=="object")return t.value.some(f=>f.value===c)};return e.provide(_,{disabled:e.toRef(o,"disabled"),isShowTitle:e.toRef(o,"isShowTitle"),color:e.toRef(o,"color"),showAnimation:e.toRef(o,"showAnimation"),beforeChange:o.beforeChange,isItemChecked:h,toggleGroupVal:s,itemWidth:e.toRef(o,"itemWidth"),direction:e.toRef(o,"direction")}),{defaultOpt:l}},render(){var h;const{direction:o,$slots:n,defaultOpt:t,options:l}=this;let s=(h=n.default)==null?void 0:h.call(n);return(l==null?void 0:l.length)>0&&(s=l.map(c=>{let f=null;return typeof c=="string"?f=Object.assign({},t,{label:c,value:c}):typeof c=="object"&&(f=Object.assign({},t,C(V({},c),{label:c.name}))),e.createVNode(O,f,null)})),e.createVNode("div",{class:"devui-checkbox-group"},[e.createVNode("div",{class:{"devui-checkbox-list-inline":o==="row"}},[s])])}});function P(o){const{getChildren:n}=e.inject(b),t=e.computed(()=>{var i;return["devui-tree-node",((i=o.value)==null?void 0:i.expanded)&&"devui-tree-node__open"]}),l=e.computed(()=>{var i;return{paddingLeft:`${24*(((i=o.value)==null?void 0:i.level)-1)}px`}}),s=e.computed(()=>{var i,r;return[!((i=o.value)==null?void 0:i.isLeaf)&&((r=o.value)==null?void 0:r.expanded)&&"devui-tree-node__vline"]}),h=e.computed(()=>{var i;return{height:`${30*(n(o.value,{expanded:!0}).length-1)+30/2+1}px`,left:`${24*(((i=o.value)==null?void 0:i.level)-1)+9}px`,top:`${30}px`}}),c=e.computed(()=>{var i;return[((i=o.value)==null?void 0:i.level)!==1&&"devui-tree-node__hline"]}),f=e.computed(()=>{var i;return["devui-tree-node__content",((i=o.value)==null?void 0:i.selected)&&"active"]}),d=e.computed(()=>{var i;return["devui-tree-node__title",((i=o.value)==null?void 0:i.disableSelect)&&"select-disabled"]});return{nodeClass:t,nodeStyle:l,nodeContentClass:f,nodeTitleClass:d,nodeVLineClass:s,nodeVLineStyle:h,nodeHLineClass:c}}var j=e.defineComponent({name:"DTreeNodeContent",props:{data:{type:Object,default:()=>({})}},setup(o){const{data:n}=e.toRefs(o),{nodeTitleClass:t}=P(n);return()=>{var l;return e.createVNode("span",{class:t.value},[(l=n.value)==null?void 0:l.label])}}}),K=e.defineComponent({name:"DTreeNode",props:{data:{type:Object,default:()=>({})},check:{type:Boolean,default:!1}},setup(o,{slots:n}){const{data:t,check:l}=e.toRefs(o),{toggleSelectNode:s,toggleCheckNode:h,toggleNode:c,getChildren:f}=e.inject(b),{nodeClass:d,nodeStyle:i,nodeContentClass:r,nodeVLineClass:u,nodeVLineStyle:a,nodeHLineClass:m}=P(t),g=e.computed(()=>{const p=f==null?void 0:f(t.value),k=p==null?void 0:p.filter(v=>v.checked);return["upward","both"].includes(l.value)?k.length>0&&k.length<p.length:!1});return()=>{var k,v,y;const p={key:(k=t.value)==null?void 0:k.id,disabled:(v=t.value)==null?void 0:v.disableCheck,halfchecked:g.value,modelValue:(y=t.value)==null?void 0:y.checked,"onUpdate:modelValue":()=>{h(t.value)},onClick:w=>{w.stopPropagation()}};return e.createVNode("div",{class:d.value,style:i.value},[e.createVNode("span",{class:u.value,style:a.value},null),e.createVNode("div",{class:r.value,onClick:()=>{s(t.value)}},[e.createVNode("span",{class:m.value},null),n.icon?e.renderSlot(e.useSlots(),"icon",{nodeData:t,toggleNode:c}):e.createVNode(E,{data:t.value},null),e.createVNode("div",{class:"devui-tree-node__content--value-wrapper",style:{height:`${30}px`}},[l.value&&e.createVNode(O,p,null),n.default?e.renderSlot(e.useSlots(),"default",{nodeData:t}):e.createVNode(j,{data:t},null)])])])}}});function Z(){return function(n,t){const{getNode:l,setNodeValue:s}=t;return{expandNode:d=>{d.disableToggle||s(d,"expanded",!0)},collapseNode:d=>{d.disableToggle||s(d,"expanded",!1)},toggleNode:d=>{d.disableToggle||(l(d).expanded?s(d,"expanded",!1):s(d,"expanded",!0))}}}}function J(o=8){const n="abcdefghijklmnopqrstuvwxyz0123456789";let t="";for(let l=0;l<o;l++)t+=n[parseInt((Math.random()*n.length).toString())];return t}function Q(o,...n){return Object.entries(o).filter(t=>!n.includes(t[0])).reduce((t,l)=>Object.assign({},t,{[l[0]]:l[1]}),{})}function x(o,n="children",t=0,l=[]){return t++,o.reduce((s,h)=>{var d,i;const c=Object.assign({},h);if(c.id===void 0&&(c.id=J(),c.idType="random"),c.level=t,l.length>0&&((d=l[l.length-1])==null?void 0:d.level)>=t)for(;((i=l[l.length-1])==null?void 0:i.level)>=t;)l.pop();l.push(c);const f=l[l.length-2];return f&&(c.parentId=f.id),c[n]?s.concat(Q(c,"children"),x(c[n],n,t,l)):s.concat(C(V({},c),{isLeaf:!0}))},[])}const A={expanded:!1,recursive:!0};function B(){return function(n){const t=r=>n.value.find(u=>u.id===r.id).level,l=(r,u=A)=>{const a=()=>e.computed(()=>{let v=[];const y=[];for(let w=0,D=n==null?void 0:n.value.length;w<D;w++){const T=n==null?void 0:n.value[w];v.map(S=>S.id).includes(T.id)||(T.expanded!==!0&&(v=l(T)),y.push(T))}return y}),m=[],g=V(V({},A),u),p=g.expanded?a():n,k=p.value.findIndex(v=>v.id===r.id);for(let v=k+1;v<p.value.length&&t(r)<p.value[v].level;v++)(g.recursive||t(r)===p.value[v].level-1)&&m.push(p.value[v]);return m},s=r=>n.value.find(u=>u.id===r.parentId),h=()=>e.computed(()=>{let r=[];const u=[];for(let a=0,m=n==null?void 0:n.value.length;a<m;a++){const g=n==null?void 0:n.value[a];r.map(p=>p.id).includes(g.id)||(g.expanded!==!0&&(r=l(g)),u.push(g))}return u}),c=r=>n.value.findIndex(u=>u.id===r.id);return{getLevel:t,getChildren:l,getParent:s,getExpendedTree:h,getIndex:c,getNode:r=>n.value.find(u=>u.id===r.id),setNodeValue:(r,u,a)=>{n.value[c(r)][u]=a},setTree:r=>{n.value=x(r)}}}}const X=[B(),Z()];function Y(o,n=[]){const t=e.ref(x(o)),l=B()(t),s=X.concat(n).reduce((h,c)=>V(V({},h),c(t,l)),{});return V({treeData:t},s)}function G(o=e.ref({checkStrategy:"both"})){return function(t,l){const{setNodeValue:s,getNode:h,getChildren:c,getParent:f}=l,d=a=>{s(a,"checked",!0)},i=a=>{s(a,"checked",!1)},r=a=>{const m=f(a);if(!m)return;const g=c(m,{recursive:!1}),p=g.filter(v=>v.checked),k=()=>{p.length===0?s(m,"checked",!1):p.length===g.length&&s(m,"checked",!0)};m.parentId?(k(),r(m)):k()};return{checkNode:d,uncheckNode:i,toggleCheckNode:a=>{h(a).checked?(s(a,"checked",!1),["downward","both"].includes(o.value.checkStrategy)&&c(a).forEach(m=>s(m,"checked",!1))):(s(a,"checked",!0),["downward","both"].includes(o.value.checkStrategy)&&c(a).forEach(m=>s(m,"checked",!0))),["upward","both"].includes(o.value.checkStrategy)&&r(a)}}}}function ee(){return function(n,t){const{setNodeValue:l}=t;let s;const h=d=>{if(!d.disableSelect){if(s){const i=n.value.findIndex(r=>r.id===s.id);l(n.value[i],"selected",!1)}l(d,"selected",!0),s=d}},c=d=>{l(d,"selected",!1)};return{selectNode:h,deselectNode:c,toggleSelectNode:d=>{d.selected?c(d):h(d)}}}}function R(){return function(n,t){const{setNodeValue:l,getChildren:s,getIndex:h,getLevel:c}=t;return{insertBefore:(r,u,a)=>{const m=s(r),g=m[m.length-1];let p=h(r)+1;a?p=h(a):g&&(p=h(g)+1),l(r,"expanded",!0),l(r,"isLeaf",!1);const k=C(V({},u),{level:c(r)+1,parentId:r.id,isLeaf:!0});n.value=n.value.slice(0,p).concat(k,n.value.slice(p,n.value.length))},removeNode:(r,u={recursive:!0})=>{u.recursive||s(r).forEach(a=>{l(a,"level",c(a)-1)}),n.value=n.value.filter(a=>u.recursive?a.id!==r.id&&!s(r).map(m=>m.id).includes(a.id):a.id!==r.id)},editNode:(r,u)=>{l(r,"label",u)}}}}function te(){return function(n,t){const{setNodeValue:l,getChildren:s}=t,{removeNode:h}=R()(n,t);return{mergeTreeNodes:()=>{const f=d=>{var r;if(d.isLeaf)return;const i=s(d,{recursive:!1});(i==null?void 0:i.length)===1?s(i[0],{recursive:!1}).length!==0?(l(d,"label",d.label+" / "+((r=i[0])==null?void 0:r.label)),h(i[0],{recursive:!1}),f(d)):l(i[0],"parentId",d.id):i.forEach(u=>{f(u)})};n.value.filter(d=>d.level===1).forEach(d=>{f(d)})}}}}const H={data:{type:Object,default:[]},check:{type:[Boolean,String],default:!1}};var he="",I=e.defineComponent({name:"DTree",props:H,setup(o,{slots:n,expose:t}){const{data:l,check:s}=e.toRefs(o),h=[ee(),R(),te()],c=e.ref({checkStrategy:s.value||"both"});e.watch(s,u=>{c.value.checkStrategy=u}),s.value&&h.push(G(c));const f=Y(l.value,h),{setTree:d,getExpendedTree:i,toggleNode:r}=f;return e.watch(l,d),e.provide(b,f),t({treeFactory:f}),()=>e.createVNode("div",{class:"devui-tree"},[i==null?void 0:i().value.map(u=>n.default?e.renderSlot(e.useSlots(),"default",{treeFactory:f,nodeData:u}):e.createVNode(K,{data:u,check:s.value},{default:()=>n.content?e.renderSlot(e.useSlots(),"content",{nodeData:u}):e.createVNode(j,{data:u},null),icon:()=>n.icon?e.renderSlot(e.useSlots(),"icon",{nodeData:u,toggleNode:r}):e.createVNode(E,{data:u},null)}))])}}),ne={title:"Tree \u6811",category:"\u6570\u636E\u5C55\u793A",status:"20%",install(o){o.component(I.name,I)}};N.Tree=I,N.default=ne,N.treeProps=H,Object.defineProperty(N,"__esModule",{value:!0}),N[Symbol.toStringTag]="Module"});
+var ae=Object.defineProperty,ie=Object.defineProperties;var ue=Object.getOwnPropertyDescriptors;var q=Object.getOwnPropertySymbols;var fe=Object.prototype.hasOwnProperty,ge=Object.prototype.propertyIsEnumerable;var z=(v,e,k)=>e in v?ae(v,e,{enumerable:!0,configurable:!0,writable:!0,value:k}):v[e]=k,w=(v,e)=>{for(var k in e||(e={}))fe.call(e,k)&&z(v,k,e[k]);if(q)for(var k of q(e))ge.call(e,k)&&z(v,k,e[k]);return v},S=(v,e)=>ie(v,ue(e));(function(v,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(v=typeof globalThis!="undefined"?globalThis:v||self,e(v.index={},v.Vue))})(this,function(v,e){"use strict";const k="use-tree-token",K=()=>e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"svg-icon"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("rect",{x:"0.5",y:"0.5",width:"15",height:"15",rx:"2",stroke:"#252b3a"},null),e.createVNode("path",{fill:"#252b3a",d:"M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"},null)])]),Z=()=>e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"svg-icon svg-icon-close"},[e.createVNode("g",{"stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("rect",{x:"0.5",y:"0.5",width:"15",height:"15",rx:"2",stroke:"#5e7ce0"},null),e.createVNode("rect",{x:"4",y:"7",width:"8",height:"2",fill:"#5e7ce0"},null)])]);function D(o,n,t){let l=o;return n&&(l+=`__${n}`),t&&(l+=`--${t}`),l}function x(o){const n=`devui-${o}`;return{b:()=>D(n),e:s=>s?D(n,s):"",m:s=>s?D(n,"",s):"",em:(s,f)=>s&&f?D(n,s,f):""}}var P=e.defineComponent({name:"DTreeNodeToggle",props:{data:{type:Object,default:()=>({})}},setup(o){const{data:n}=e.toRefs(o),{toggleNode:t}=e.inject(k),l=x("tree");return()=>{var d;return e.createVNode("span",{class:[l.e("node-folder"),((d=n.value)==null?void 0:d.disableToggle)&&"toggle-disabled"],onClick:h=>{h.stopPropagation(),t&&t(n.value)}},[n.value.isLeaf?e.createVNode("span",{class:l.e("node-indent")},null):n.value.expanded?e.createVNode(Z,{class:"mr-xs"},null):e.createVNode(K,{class:"mr-xs"},null)])}}});const j={name:{type:String,default:void 0},halfChecked:{type:Boolean,default:!1},isShowTitle:{type:Boolean,default:!0},title:{type:String},color:{type:String,default:void 0},showAnimation:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0}},J=S(w({},j),{checked:{type:Boolean,default:!1},value:{type:String},label:{type:String,default:void 0},"onUpdate:checked":{type:Function,default:void 0},onChange:{type:Function,default:void 0},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}}),Q=S(w({},j),{modelValue:{type:Array,required:!0},direction:{type:String,default:"column"},itemWidth:{type:Number,default:void 0},options:{type:Array,default:()=>[]},onChange:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}}),_=Symbol("d-checkbox-group");var me="",A=e.defineComponent({name:"DCheckbox",props:J,emits:["change","update:checked","update:modelValue"],setup(o,n){const t=e.inject(_,null),l=x("checkbox"),d=e.computed(()=>o.checked||o.modelValue),h=e.computed(()=>(t==null?void 0:t.disabled.value)||o.disabled),s=e.computed(()=>{var u,b;return(b=(u=t==null?void 0:t.isItemChecked)==null?void 0:u.call(t,o.value))!=null?b:d.value}),f=e.computed(()=>{var u;return(u=t==null?void 0:t.isShowTitle.value)!=null?u:o.isShowTitle}),c=e.computed(()=>{var u;return(u=t==null?void 0:t.showAnimation.value)!=null?u:o.showAnimation}),i=e.computed(()=>{var u;return(u=t==null?void 0:t.color.value)!=null?u:o.color}),r=t==null?void 0:t.itemWidth.value,p=t==null?void 0:t.direction.value,a=(u,b)=>{var y;if(h.value)return Promise.resolve(!1);const m=(y=o.beforeChange)!=null?y:t==null?void 0:t.beforeChange;if(m){const V=m(u,b);return typeof V=="boolean"?Promise.resolve(V):V}return Promise.resolve(!0)},g=()=>{const u=!d.value;t==null||t.toggleGroupVal(o.value),n.emit("update:checked",u),n.emit("update:modelValue",u),n.emit("change",u)};return{itemWidth:r,direction:p,mergedColor:i,mergedDisabled:h,mergedIsShowTitle:f,mergedChecked:s,mergedShowAnimation:c,handleClick:()=>{a(!d.value,o.label).then(u=>u&&g())},ns:l}},render(){var W;const{itemWidth:o,direction:n,mergedChecked:t,mergedDisabled:l,mergedIsShowTitle:d,mergedShowAnimation:h,halfChecked:s,title:f,label:c,handleClick:i,name:r,value:p,mergedColor:a,ns:g,$slots:N}=this,u={[g.e("column-margin")]:n==="column",[g.e("wrap")]:typeof o!="undefined"},b=o?[`width: ${o}px`]:[],m={[g.b()]:!0,active:t,"half-checked":s,disabled:l,unchecked:!t},y=d?f||c:"",V=a&&s||a?`linear-gradient(${a}, ${a})`:"",I=[`border-color:${(t||s)&&a?a:""}`,`background-image:${V}`,`background-color:${a&&s?a:""}`],T={[g.e("material")]:!0,"custom-color":a,[g.m("no-label")]:!c&&!N.default,[g.m("no-animation")]:!h,[g.e("default-background")]:!s},O={[g.e("tick")]:!0,[g.m("no-animation")]:!h},M=de=>de.stopPropagation(),re={indeterminate:s};return e.createVNode("div",{class:u,style:b},[e.createVNode("div",{class:m},[e.createVNode("label",{title:y,onClick:i},[e.createVNode("input",e.mergeProps({name:r||p,class:g.e("input"),type:"checkbox"},re,{checked:t,disabled:l,onClick:M,onChange:M}),null),e.createVNode("span",{style:I,class:T},[e.createVNode("span",{class:g.e("halfchecked-bg")},null),e.createVNode("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:g.e("tick-wrap")},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.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:O},null)])])]),c||((W=N.default)==null?void 0:W.call(N))])])])}}),Ne="";e.defineComponent({name:"DCheckboxGroup",props:Q,emits:["change","update:modelValue"],setup(o,n){const t=e.toRef(o,"modelValue"),l={checked:!1,isShowTitle:!0,halfChecked:!1,showAnimation:!0,disabled:!1},d=s=>{let f=-1;if(typeof t.value[0]=="string"?f=t.value.findIndex(c=>c===s):typeof t.value[0]=="object"&&(f=t.value.findIndex(c=>c.value===s)),f===-1){if(typeof o.options[0]=="object"){const i=o.options.find(p=>p.value===s),r=[...t.value,i];n.emit("update:modelValue",r),n.emit("change",r);return}const c=[...t.value,s];n.emit("update:modelValue",c),n.emit("change",c);return}t.value.splice(f,1),n.emit("update:modelValue",t.value),n.emit("change",t.value)},h=s=>{if(typeof t.value[0]=="string")return t.value.includes(s);if(typeof t.value[0]=="object")return t.value.some(f=>f.value===s)};return e.provide(_,{disabled:e.toRef(o,"disabled"),isShowTitle:e.toRef(o,"isShowTitle"),color:e.toRef(o,"color"),showAnimation:e.toRef(o,"showAnimation"),beforeChange:o.beforeChange,isItemChecked:h,toggleGroupVal:d,itemWidth:e.toRef(o,"itemWidth"),direction:e.toRef(o,"direction")}),{defaultOpt:l}},render(){var h;const{direction:o,$slots:n,defaultOpt:t,options:l}=this;let d=(h=n.default)==null?void 0:h.call(n);return(l==null?void 0:l.length)>0&&(d=l.map(s=>{let f=null;return typeof s=="string"?f=Object.assign({},t,{label:s,value:s}):typeof s=="object"&&(f=Object.assign({},t,S(w({},s),{label:s.name}))),e.createVNode(A,f,null)})),e.createVNode("div",{class:"devui-checkbox-group"},[e.createVNode("div",{class:{"devui-checkbox-list-inline":o==="row"}},[d])])}});const C=x("tree");function B(o){const{getChildren:n}=e.inject(k),t=e.computed(()=>{var i;return[C.e("node"),((i=o.value)==null?void 0:i.expanded)&&C.em("node","open")]}),l=e.computed(()=>{var i;return{paddingLeft:`${24*(((i=o.value)==null?void 0:i.level)-1)}px`}}),d=e.computed(()=>{var i,r;return[!((i=o.value)==null?void 0:i.isLeaf)&&((r=o.value)==null?void 0:r.expanded)&&C.e("node-vline")]}),h=e.computed(()=>{var i;return{height:`${30*(n(o.value,{expanded:!0}).length-1)+30/2+1}px`,left:`${24*(((i=o.value)==null?void 0:i.level)-1)+9}px`,top:`${30}px`}}),s=e.computed(()=>{var i;return[((i=o.value)==null?void 0:i.level)!==1&&C.e("node-hline")]}),f=e.computed(()=>{var i;return[C.e("node-content"),((i=o.value)==null?void 0:i.selected)&&"active"]}),c=e.computed(()=>{var i;return[C.e("node-title"),((i=o.value)==null?void 0:i.disableSelect)&&"select-disabled"]});return{nodeClass:t,nodeStyle:l,nodeContentClass:f,nodeTitleClass:c,nodeVLineClass:d,nodeVLineStyle:h,nodeHLineClass:s}}var R=e.defineComponent({name:"DTreeNodeContent",props:{data:{type:Object,default:()=>({})}},setup(o){const{data:n}=e.toRefs(o),{nodeTitleClass:t}=B(n);return()=>{var l;return e.createVNode("span",{class:t.value},[(l=n.value)==null?void 0:l.label])}}}),X=e.defineComponent({name:"DTreeNode",props:{data:{type:Object,default:()=>({})},check:{type:Boolean,default:!1}},setup(o,{slots:n}){const{data:t,check:l}=e.toRefs(o),{toggleSelectNode:d,toggleCheckNode:h,toggleNode:s,getChildren:f}=e.inject(k),c=x("tree"),{nodeClass:i,nodeStyle:r,nodeContentClass:p,nodeVLineClass:a,nodeVLineStyle:g,nodeHLineClass:N}=B(t),u=e.computed(()=>{const b=f==null?void 0:f(t.value),m=b==null?void 0:b.filter(y=>y.checked);return["upward","both"].includes(l.value)?m.length>0&&m.length<b.length:!1});return()=>{var m,y,V;const b={key:(m=t.value)==null?void 0:m.id,disabled:(y=t.value)==null?void 0:y.disableCheck,halfchecked:u.value,modelValue:(V=t.value)==null?void 0:V.checked,"onUpdate:modelValue":()=>{h(t.value)},onClick:I=>{I.stopPropagation()}};return e.createVNode("div",{class:i.value,style:r.value},[e.createVNode("span",{class:a.value,style:g.value},null),e.createVNode("div",{class:p.value,onClick:()=>{d(t.value)}},[e.createVNode("span",{class:N.value},null),n.icon?e.renderSlot(e.useSlots(),"icon",{nodeData:t,toggleNode:s}):e.createVNode(P,{data:t.value},null),e.createVNode("div",{class:c.em("node-content","value-wrapper"),style:{height:`${30}px`}},[l.value&&e.createVNode(A,b,null),n.default?e.renderSlot(e.useSlots(),"default",{nodeData:t}):e.createVNode(R,{data:t},null)])])])}}});function Y(){return function(n,t){const{getNode:l,setNodeValue:d}=t;return{expandNode:c=>{c.disableToggle||d(c,"expanded",!0)},collapseNode:c=>{c.disableToggle||d(c,"expanded",!1)},toggleNode:c=>{c.disableToggle||(l(c).expanded?d(c,"expanded",!1):d(c,"expanded",!0))}}}}function G(o=8){const n="abcdefghijklmnopqrstuvwxyz0123456789";let t="";for(let l=0;l<o;l++)t+=n[parseInt((Math.random()*n.length).toString())];return t}function ee(o,...n){return Object.entries(o).filter(t=>!n.includes(t[0])).reduce((t,l)=>Object.assign({},t,{[l[0]]:l[1]}),{})}function E(o,n="children",t=0,l=[]){return t++,o.reduce((d,h)=>{var c,i;const s=Object.assign({},h);if(s.id===void 0&&(s.id=G(),s.idType="random"),s.level=t,l.length>0&&((c=l[l.length-1])==null?void 0:c.level)>=t)for(;((i=l[l.length-1])==null?void 0:i.level)>=t;)l.pop();l.push(s);const f=l[l.length-2];return f&&(s.parentId=f.id),s[n]?d.concat(ee(s,"children"),E(s[n],n,t,l)):d.concat(S(w({},s),{isLeaf:!0}))},[])}const H={expanded:!1,recursive:!0};function $(){return function(n){const t=r=>n.value.find(p=>p.id===r.id).level,l=(r,p=H)=>{const a=()=>e.computed(()=>{let m=[];const y=[];for(let V=0,I=n==null?void 0:n.value.length;V<I;V++){const T=n==null?void 0:n.value[V];m.map(O=>O.id).includes(T.id)||(T.expanded!==!0&&(m=l(T)),y.push(T))}return y}),g=[],N=w(w({},H),p),u=N.expanded?a():n,b=u.value.findIndex(m=>m.id===r.id);for(let m=b+1;m<u.value.length&&t(r)<u.value[m].level;m++)(N.recursive||t(r)===u.value[m].level-1)&&g.push(u.value[m]);return g},d=r=>n.value.find(p=>p.id===r.parentId),h=()=>e.computed(()=>{let r=[];const p=[];for(let a=0,g=n==null?void 0:n.value.length;a<g;a++){const N=n==null?void 0:n.value[a];r.map(u=>u.id).includes(N.id)||(N.expanded!==!0&&(r=l(N)),p.push(N))}return p}),s=r=>n.value.findIndex(p=>p.id===r.id);return{getLevel:t,getChildren:l,getParent:d,getExpendedTree:h,getIndex:s,getNode:r=>n.value.find(p=>p.id===r.id),setNodeValue:(r,p,a)=>{n.value[s(r)][p]=a},setTree:r=>{n.value=E(r)}}}}const te=[$(),Y()];function ne(o,n=[]){const t=e.ref(E(o)),l=$()(t),d=te.concat(n).reduce((h,s)=>w(w({},h),s(t,l)),{});return w({treeData:t},d)}function le(o=e.ref({checkStrategy:"both"})){return function(t,l){const{setNodeValue:d,getNode:h,getChildren:s,getParent:f}=l,c=a=>{d(a,"checked",!0)},i=a=>{d(a,"checked",!1)},r=a=>{const g=f(a);if(!g)return;const N=s(g,{recursive:!1}),u=N.filter(m=>m.checked),b=()=>{u.length===0?d(g,"checked",!1):u.length===N.length&&d(g,"checked",!0)};g.parentId?(b(),r(g)):b()};return{checkNode:c,uncheckNode:i,toggleCheckNode:a=>{h(a).checked?(d(a,"checked",!1),["downward","both"].includes(o.value.checkStrategy)&&s(a).forEach(g=>d(g,"checked",!1))):(d(a,"checked",!0),["downward","both"].includes(o.value.checkStrategy)&&s(a).forEach(g=>d(g,"checked",!0))),["upward","both"].includes(o.value.checkStrategy)&&r(a)}}}}function oe(){return function(n,t){const{setNodeValue:l}=t;let d;const h=c=>{if(!c.disableSelect){if(d){const i=n.value.findIndex(r=>r.id===d.id);l(n.value[i],"selected",!1)}l(c,"selected",!0),d=c}},s=c=>{l(c,"selected",!1)};return{selectNode:h,deselectNode:s,toggleSelectNode:c=>{c.selected?s(c):h(c)}}}}function F(){return function(n,t){const{setNodeValue:l,getChildren:d,getIndex:h,getLevel:s}=t;return{insertBefore:(r,p,a)=>{const g=d(r),N=g[g.length-1];let u=h(r)+1;a?u=h(a):N&&(u=h(N)+1),l(r,"expanded",!0),l(r,"isLeaf",!1);const b=S(w({},p),{level:s(r)+1,parentId:r.id,isLeaf:!0});n.value=n.value.slice(0,u).concat(b,n.value.slice(u,n.value.length))},removeNode:(r,p={recursive:!0})=>{p.recursive||d(r).forEach(a=>{l(a,"level",s(a)-1)}),n.value=n.value.filter(a=>p.recursive?a.id!==r.id&&!d(r).map(g=>g.id).includes(a.id):a.id!==r.id)},editNode:(r,p)=>{l(r,"label",p)}}}}function se(){return function(n,t){const{setNodeValue:l,getChildren:d}=t,{removeNode:h}=F()(n,t);return{mergeTreeNodes:()=>{const f=c=>{var r;if(c.isLeaf)return;const i=d(c,{recursive:!1});(i==null?void 0:i.length)===1?d(i[0],{recursive:!1}).length!==0?(l(c,"label",c.label+" / "+((r=i[0])==null?void 0:r.label)),h(i[0],{recursive:!1}),f(c)):l(i[0],"parentId",c.id):i.forEach(p=>{f(p)})};n.value.filter(c=>c.level===1).forEach(c=>{f(c)})}}}}const U={data:{type:Object,default:[]},check:{type:[Boolean,String],default:!1}};var ve="",L=e.defineComponent({name:"DTree",props:U,setup(o,{slots:n,expose:t}){const{data:l,check:d}=e.toRefs(o),h=x("tree"),s=[oe(),F(),se()],f=e.ref({checkStrategy:d.value||"both"});e.watch(d,a=>{f.value.checkStrategy=a}),d.value&&s.push(le(f));const c=ne(l.value,s),{setTree:i,getExpendedTree:r,toggleNode:p}=c;return e.watch(l,i),e.provide(k,c),t({treeFactory:c}),()=>e.createVNode("div",{class:h.b()},[r==null?void 0:r().value.map(a=>n.default?e.renderSlot(e.useSlots(),"default",{treeFactory:c,nodeData:a}):e.createVNode(X,{data:a,check:d.value},{default:()=>n.content?e.renderSlot(e.useSlots(),"content",{nodeData:a}):e.createVNode(R,{data:a},null),icon:()=>n.icon?e.renderSlot(e.useSlots(),"icon",{nodeData:a,toggleNode:p}):e.createVNode(P,{data:a},null)}))])}}),ce={title:"Tree \u6811",category:"\u6570\u636E\u5C55\u793A",status:"20%",install(o){o.component(L.name,L)}};v.Tree=L,v.default=ce,v.treeProps=U,Object.defineProperty(v,"__esModule",{value:!0}),v[Symbol.toStringTag]="Module"});

package/tree/style.css

@@ -1 +1 @@
-.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox-tick{position:absolute}.devui-checkbox .devui-checkbox-tick .devui-tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.halfchecked) .devui-tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox-material:not(.custom-color),.devui-checkbox.halfchecked:not(.disabled) .devui-checkbox-material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox-material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color)>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.halfchecked .devui-checkbox-material.custom-color>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox-material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox-material.devui-checkbox-default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox-material.devui-checkbox-no-label{margin-right:0}.devui-checkbox .devui-checkbox-material>.devui-checkbox-halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox-material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):focus,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):focus,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox-input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-checkbox.disabled .devui-checkbox-material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox-material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material .devui-checkbox-halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #adb0b8);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-no-animation{transition:none!important}.devui-checkbox-column-margin{height:28px;line-height:28px}.devui-checkbox-wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:block}.devui-checkbox-list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox-list-inline div:not(:last-child){margin-right:20px}.devui-checkbox-list-inline>*{margin-top:8px}@charset "UTF-8";.devui-text-ellipsis,.devui-tree-node .devui-tree-node__title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.devui-tree-indicator{height:1px;background-color:var(--devui-brand, #5e7ce0);position:absolute}.devui-tree-node{color:var(--devui-text-weak, #575d6c);line-height:1.5;white-space:nowrap;position:relative}.devui-tree-node .devui-drop-draggable{border-top:1px solid transparent;border-bottom:1px solid transparent}.devui-tree-node .devui-drop-inner{color:var(--devui-brand, #5e7ce0)}.devui-tree-node .devui-drop-prev{border-top:1px solid var(--devui-brand, #5e7ce0)}.devui-tree-node .devui-drop-next{border-bottom:1px solid var(--devui-brand, #5e7ce0)}.devui-tree-node .devui-tree-node__content{display:inline-flex;align-items:center;font-size:var(--devui-font-size, 12px);padding-right:10px;width:100%;border-radius:var(--devui-border-radius, 2px);padding-left:6px}.devui-tree-node .devui-tree-node__content.active{background-color:var(--devui-list-item-selected-bg, #e9edfa);text-decoration:none;border-color:transparent}.devui-tree-node .devui-tree-node__content:not(.active):hover{background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-tree-node .devui-tree-node__content--value-wrapper{display:inline-flex;align-items:center;width:100%;height:30px}.devui-tree-node .devui-tree-node__content--value-wrapper .devui-tree-node_loading{margin-left:50px}.devui-tree-node .devui-tree-node__content--value-wrapper .devui-tree-node_loading .devui-loading-area{background:none}.devui-tree-node .devui-tree-node__children{padding-left:10px}.devui-tree-node .devui-tree-node__children:first-child{border-left-color:transparent}.devui-tree-node .devui-tree-node__children .devui-tree-node{margin-left:8px;content:"";position:relative}.devui-tree-node .devui-tree-node__children .devui-tree-node:last-child{border-left-color:transparent}.devui-tree-node .devui-tree-node__title{margin-left:5px;display:inline-block;border:1px dashed transparent;border-radius:var(--devui-border-radius, 2px);max-width:100%}.devui-tree-node .devui-tree-node__title:not(.disabled){cursor:pointer}.devui-tree-node .devui-tree-node__edit{margin-left:.4em;padding:.1em}.devui-tree-node .devui-tree-node__edit>.devui-input-sm{height:26px}.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error,.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error:hover,.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error:focus{border-color:var(--devui-danger, #f66f6a)}.devui-tree-node .devui-tree-node__leaf:not(.disabled){cursor:default}.devui-tree-node .devui-tree-node__leaf .devui-tree-node__leaf--default{color:#f2a71f}.devui-tree-node .devui-tree-node__leaf .devui-leaf-icon-none{display:inline-block;width:16px;height:16px}.devui-tree-node .devui-tree-node__folder{display:inline-block;vertical-align:middle;user-select:none;font-size:var(--devui-font-size-icon, 16px);height:16px;line-height:16px}.devui-tree-node .devui-tree-node__folder .devui-tree-node__folder--icon{display:inline-block;height:16px;line-height:16px}.devui-tree-node .devui-tree-node__folder .devui-tree-node__folder--icon:hover svg g path{fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree-node .devui-tree-node__folder .devui-tree-node__folder--icon:hover svg g rect{stroke:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree-node .devui-tree-node__folder:not(.disabled){cursor:pointer}.devui-tree-node .devui-tree-node__folder .devui-tree-node__folder--default{color:#f2b806}.devui-tree-node__indent{display:inline-block;width:16px;height:16px;margin-left:8px}.devui-tree-node .devui-loading-children{display:inline-block;vertical-align:middle;margin-left:.5em;margin-top:.15em;color:var(--devui-info, #5e7ce0);font-style:italic;font-size:1em;animation-name:devui-loading-children;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes devui-loading-children{0%{color:#627fe1}12.5%{color:#627fe1}25%{color:#617fe1}37.5%{color:#617ee1}50%{color:#607ee0}62.5%{color:#607ee0}75%{color:#5f7de0}87.5%{color:#5e7ce0}to{color:#5e7ce0}}.devui-tree-node svg.svg-icon path{fill:var(--devui-icon-text, #252b3a)}.devui-tree-node svg.svg-icon rect{stroke:var(--devui-icon-text, #252b3a)}.devui-tree-node.devui-tree-node__open:not(.devui-tree-node__customIcon)>.devui-tree-node__content svg.svg-icon path{fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree-node.devui-tree-node__open:not(.devui-tree-node__customIcon)>.devui-tree-node__content svg.svg-icon rect{stroke:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree-node.devui-tree-node__open:not(.devui-tree-node__customIcon)>.devui-tree-node__content svg.svg-icon.svg-icon-close rect:last-child{stroke:none;fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree-node svg.svg-icon.svg-icon-close rect:last-child{stroke:none;fill:var(--devui-icon-text, #252b3a)}::ng-deep .devui-tree-mask{background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-tree-node.devui-tree-without-virtual-scroll.devui-tree-node__open>.devui-tree-node__content{position:relative}.devui-tree-node.devui-tree-without-virtual-scroll>.devui-tree-node__children{position:relative}.devui-tree-node.devui-tree-without-virtual-scroll>.devui-tree-node__children:before{content:"";width:1px;height:calc(100% - 15px);background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;left:9px;top:0}.devui-tree-node.devui-tree-without-virtual-scroll>.devui-tree-node__children .devui-tree-node__content{position:relative}.devui-tree-node.devui-tree-without-virtual-scroll>.devui-tree-node__children .devui-tree-node__content:before{content:"";width:8px;height:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;left:-9px;top:50%}.devui-tree-vertical-line{width:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute}.devui-tree-horizontal-line{height:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;top:50%;margin-left:-16px}.toggle-disabled{cursor:not-allowed!important}.toggle-disabled svg.svg-icon rect{stroke:var(--devui-disabled-text, #adb0b8)!important}.toggle-disabled svg.svg-icon.svg-icon-close rect:last-child{stroke:none!important;fill:var(--devui-disabled-text, #adb0b8)!important}.toggle-disabled svg.svg-icon path{fill:var(--devui-disabled-text, #adb0b8)!important}.select-disabled{color:var(--devui-disabled-text, #adb0b8)!important;cursor:not-allowed!important;background-color:transparent!important}.devui-tree-node{font-size:0}.devui-tree-node,.devui-tree-node__content{position:relative}.devui-tree-node__vline{width:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute}.devui-tree-node__hline{width:8px;height:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;left:-14px;top:50%}
+.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox__tick-wrap{position:absolute}.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox__material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label{margin-right:0}.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-checkbox.disabled .devui-checkbox__material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox__material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #adb0b8);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-checkbox--no-animation{transition:none!important}.devui-checkbox__column-margin{height:28px;line-height:28px}.devui-checkbox__wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:block}.devui-checkbox-list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox-list-inline div:not(:last-child){margin-right:20px}.devui-checkbox-list-inline>*{margin-top:8px}@charset "UTF-8";.devui-text-ellipsis,.devui-tree__node .devui-tree__node-title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.devui-tree-indicator{height:1px;background-color:var(--devui-brand, #5e7ce0);position:absolute}.devui-tree__node{color:var(--devui-text-weak, #575d6c);line-height:1.5;white-space:nowrap;position:relative}.devui-tree__node .devui-tree__drop-draggable{border-top:1px solid transparent;border-bottom:1px solid transparent}.devui-tree__node .devui-tree__drop-inner{color:var(--devui-brand, #5e7ce0)}.devui-tree__node .devui-tree__drop-prev{border-top:1px solid var(--devui-brand, #5e7ce0)}.devui-tree__node .devui-tree__drop-next{border-bottom:1px solid var(--devui-brand, #5e7ce0)}.devui-tree__node .devui-tree__node-content{display:inline-flex;align-items:center;font-size:var(--devui-font-size, 12px);padding-right:10px;width:100%;border-radius:var(--devui-border-radius, 2px);padding-left:6px}.devui-tree__node .devui-tree__node-content.active{background-color:var(--devui-list-item-selected-bg, #e9edfa);text-decoration:none;border-color:transparent}.devui-tree__node .devui-tree__node-content:not(.active):hover{background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-tree__node .devui-tree__node-content--value-wrapper{display:inline-flex;align-items:center;width:100%;height:30px}.devui-tree__node .devui-tree__node-content--value-wrapper .devui-tree__node-loading{margin-left:50px}.devui-tree__node .devui-tree__node-content--value-wrapper .devui-tree__node-loading .devui-loading-area{background:none}.devui-tree__node .devui-tree-node__children{padding-left:10px}.devui-tree__node .devui-tree-node__children:first-child{border-left-color:transparent}.devui-tree__node .devui-tree-node__children .devui-tree__node{margin-left:8px;content:"";position:relative}.devui-tree__node .devui-tree-node__children .devui-tree__node:last-child{border-left-color:transparent}.devui-tree__node .devui-tree__node-title{margin-left:5px;display:inline-block;border:1px dashed transparent;border-radius:var(--devui-border-radius, 2px);max-width:100%}.devui-tree__node .devui-tree__node-title:not(.disabled){cursor:pointer}.devui-tree__node .devui-tree-node__edit{margin-left:.4em;padding:.1em}.devui-tree__node .devui-tree-node__edit>.devui-input-sm{height:26px}.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error,.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error:hover,.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error:focus{border-color:var(--devui-danger, #f66f6a)}.devui-tree__node .devui-tree-node__leaf:not(.disabled){cursor:default}.devui-tree__node .devui-tree-node__leaf .devui-tree-node__leaf--default{color:#f2a71f}.devui-tree__node .devui-tree-node__leaf .devui-leaf-icon-none{display:inline-block;width:16px;height:16px}.devui-tree__node .devui-tree__node-folder{display:inline-block;vertical-align:middle;user-select:none;font-size:var(--devui-font-size-icon, 16px);height:16px;line-height:16px}.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon{display:inline-block;height:16px;line-height:16px}.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon:hover svg g path{fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon:hover svg g rect{stroke:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree__node .devui-tree__node-folder:not(.disabled){cursor:pointer}.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--default{color:#f2b806}.devui-tree__node-indent{display:inline-block;width:16px;height:16px;margin-left:8px}.devui-tree__node .devui-loading-children{display:inline-block;vertical-align:middle;margin-left:.5em;margin-top:.15em;color:var(--devui-info, #5e7ce0);font-style:italic;font-size:1em;animation-name:devui-loading-children;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes devui-loading-children{0%{color:#627fe1}12.5%{color:#627fe1}25%{color:#617fe1}37.5%{color:#617ee1}50%{color:#607ee0}62.5%{color:#607ee0}75%{color:#5f7de0}87.5%{color:#5e7ce0}to{color:#5e7ce0}}.devui-tree__node svg.svg-icon path{fill:var(--devui-icon-text, #252b3a)}.devui-tree__node svg.svg-icon rect{stroke:var(--devui-icon-text, #252b3a)}.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon path{fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon rect{stroke:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon.svg-icon-close rect:last-child{stroke:none;fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-tree__node svg.svg-icon.svg-icon-close rect:last-child{stroke:none;fill:var(--devui-icon-text, #252b3a)}::ng-deep .devui-tree-mask{background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-tree__node.devui-tree-without-virtual-scroll.devui-tree__node--open>.devui-tree__node-content{position:relative}.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children{position:relative}.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children:before{content:"";width:1px;height:calc(100% - 15px);background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;left:9px;top:0}.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children .devui-tree__node-content{position:relative}.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children .devui-tree__node-content:before{content:"";width:8px;height:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;left:-9px;top:50%}.devui-tree-vertical-line{width:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute}.devui-tree-horizontal-line{height:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;top:50%;margin-left:-16px}.toggle-disabled{cursor:not-allowed!important}.toggle-disabled svg.svg-icon rect{stroke:var(--devui-disabled-text, #adb0b8)!important}.toggle-disabled svg.svg-icon.svg-icon-close rect:last-child{stroke:none!important;fill:var(--devui-disabled-text, #adb0b8)!important}.toggle-disabled svg.svg-icon path{fill:var(--devui-disabled-text, #adb0b8)!important}.select-disabled{color:var(--devui-disabled-text, #adb0b8)!important;cursor:not-allowed!important;background-color:transparent!important}.devui-tree__node{font-size:0}.devui-tree__node,.devui-tree__node-content{position:relative}.devui-tree__node-vline{width:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute}.devui-tree__node-hline{width:8px;height:1px;background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;left:-14px;top:50%}

package/upload/index.es.js

@@ -90,13 +90,37 @@ var Icon = defineComponent({
     };
   }
 });
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `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 Close = defineComponent({
   emits: ["click"],
   setup(props, {
     emit
   }) {
+    const ns2 = useNamespace("notification");
     return () => createVNode("div", {
-      "class": "devui-notification-icon-close",
+      "class": ns2.e("icon-close"),
       "onClick": (e) => emit("click", e)
     }, [createVNode(Icon, {
       "name": "close",
@@ -104,6 +128,7 @@ var Close = defineComponent({
     }, null)]);
   }
 });
+const ns = useNamespace("notification");
 function SuccessIcon() {
   return createVNode("svg", {
     "width": "16px",
@@ -128,7 +153,7 @@ function SuccessIcon() {
     "xlink:href": "#path-s"
   }, null)]), createVNode("use", {
     "id": "Mask",
-    "class": "devui-notification-image-success-path",
+    "class": ns.e("image-success-path"),
     "xlink:href": "#path-s"
   }, null)])]);
 }
@@ -146,10 +171,10 @@ function WarningIcon() {
     "fill": "none",
     "fill-rule": "evenodd"
   }, [createVNode("path", {
-    "class": "devui-icon-warning-outer",
+    "class": ns.e("warning-outer"),
     "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117            15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873            0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
   }, null), createVNode("path", {
-    "class": "devui-icon-warning-inner",
+    "class": ns.e("warning-inner"),
     "stroke-width": "0.3",
     "fill-rule": "nonzero",
     "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105            L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
@@ -170,7 +195,7 @@ function InfoIcon() {
     "fill": "none",
     "fill-rule": "evenodd"
   }, [createVNode("path", {
-    "class": "devui-notification-image-info-path",
+    "class": ns.e("image-info-path"),
     "d": "M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z",
     "id": "info"
   }, null)])]);
@@ -199,7 +224,7 @@ function ErrorIcon() {
     "xlink:href": "#path-e"
   }, null)]), createVNode("use", {
     "id": "Mask",
-    "class": "devui-notification-image-error-path",
+    "class": ns.e("image-error-path"),
     "xlink:href": "#path-e"
   }, null)])]);
 }
@@ -214,9 +239,10 @@ var TypeIcon = defineComponent({
     const {
       type
     } = toRefs(props);
+    const ns2 = useNamespace("notification");
     const classes = computed(() => ({
-      "devui-notification-image": true,
-      [`devui-notification-image-${type.value}`]: true
+      [ns2.e("image")]: true,
+      [ns2.em("image", type.value)]: true
     }));
     return () => createVNode("span", {
       "class": classes.value
@@ -288,6 +314,7 @@ var Notification = defineComponent({
       close: close2,
       handleDestroy
     } = useEvent(props, emit);
+    const ns2 = useNamespace("notification");
     return () => createVNode(Transition, {
       "name": "notification-fade",
       "onAfterLeave": handleDestroy
@@ -295,23 +322,23 @@ var Notification = defineComponent({
       default: () => {
         var _a;
         return [modelValue.value && createVNode("div", {
-          "class": "devui-notification"
+          "class": ns2.b()
         }, [createVNode("div", {
           "class": classes.value,
           "onMouseenter": interrupt,
           "onMouseleave": removeReset
         }, [createVNode("div", {
-          "class": "devui-notification-item"
+          "class": ns2.e("item")
         }, [createVNode(Close, {
           "onClick": close2
         }, null), title.value && createVNode(TypeIcon, {
           "type": type.value
         }, null), createVNode("div", {
-          "class": "devui-notification-message"
+          "class": ns2.e("message")
         }, [createVNode("span", {
-          "class": "devui-notification-title"
+          "class": ns2.e("title")
         }, [title.value]), createVNode("span", {
-          "class": "devui-notification-content"
+          "class": ns2.e("content")
         }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])])])])])];
       }
     });
@@ -783,6 +810,10 @@ var Upload = defineComponent({
       accept,
       webkitdirectory
     } = toRefs(props);
+    const ns2 = useNamespace("upload");
+    const inputGroupNs = useNamespace("input-group");
+    const formControlNs = useNamespace("form-control");
+    const inputGroupAddOnNs = useNamespace("input-group-addon");
     const {
       triggerSelectFiles,
       _validateFiles,
@@ -920,30 +951,30 @@ var Upload = defineComponent({
     return () => {
       var _a, _b, _c, _d;
       return createVNode("div", null, [withDirectives(createVNode("div", {
-        "class": "devui-upload",
+        "class": ns2.b(),
         "style": `border: ${isDropOVer.value ? "1px solid #15bf15" : "0"}`
       }, [((_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)) ? createVNode("div", {
         "onClick": handleClick
       }, [ctx.slots.default()]) : createVNode("div", {
-        "class": `devui-input-group ${disabled.value ? "disabled" : ""}`,
+        "class": [inputGroupNs.b(), disabled.value ? "disabled" : ""],
         "onClick": handleClick
       }, [fileUploaders.value.length === 0 && createVNode("div", {
-        "class": "devui-form-control devui-upload-placeholder"
+        "class": [formControlNs.b(), ns2.e("placeholder")]
       }, [placeholder.value]), fileUploaders.value.length > 0 && createVNode("ul", {
-        "class": "devui-form-control devui-files-list"
+        "class": [formControlNs.b(), ns2.e("files-list")]
       }, [fileUploaders.value.map((fileUploader, index2) => createVNode("li", {
         "key": index2,
-        "class": "devui-file-item devui-file-tag",
+        "class": [ns2.e("file-item"), ns2.e("file-tag")],
         "style": "display: inline-block; margin: 0 2px 2px 0",
         "title": fileUploader.file.name
       }, [createVNode("span", {
-        "class": `devui-filename ${fileUploader.status === UploadStatus.failed ? "devui-failed-color" : ""}`
+        "class": [ns2.e("filename"), fileUploader.status === UploadStatus.failed ? ns2.m("failed-color") : ""]
       }, [fileUploader.file.name]), createVNode(resolveComponent("d-icon"), {
         "name": "close",
-        "class": `${(fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.failed ? "devui-upload-delete-file-button" : ""} ${(fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.uploading || (fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.uploaded ? "devui-uploading-delete" : ""}`,
+        "class": [(fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.failed ? ns2.e("delete-file-button") : "", (fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.uploading || (fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.uploaded ? ns2.e("delete") : ""],
         "onClick": (event) => onDeleteFile(event, fileUploader.file, fileUploader.status)
       }, null), fileUploader.status === UploadStatus.uploading && createVNode("div", {
-        "class": "icon devui-upload-progress"
+        "class": ["icon", ns2.e("progress")]
       }, [createVNode(resolveComponent("d-progress"), {
         "isCircle": true,
         "percentage": fileUploader.percentage,
@@ -957,7 +988,7 @@ var Upload = defineComponent({
         "name": "right",
         "color": "#50d4ab"
       }, null)]))]), createVNode("span", {
-        "class": "devui-input-group-addon"
+        "class": inputGroupAddOnNs.b()
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "more-operate",
         "color": "#252b3a"