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

package/slider/index.es.js

@@ -27,8 +27,35 @@ const sliderProps = {
   tipsRenderer: {
     type: String,
     default: ""
+  },
+  color: {
+    type: String,
+    default: ""
   }
 };
+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 slider = "";
 var Slider = defineComponent({
   name: "DSlider",
@@ -38,6 +65,7 @@ var Slider = defineComponent({
     let isClick = true;
     let startPosition = 0;
     let startX = 0;
+    const ns = useNamespace("slider");
     const popoverShow = ref(false);
     const sliderRunway = ref(null);
     const inputValue = ref(props.modelValue);
@@ -61,7 +89,8 @@ var Slider = defineComponent({
       }
     }
     function setPostion(newPosition) {
-      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
+      const clientWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
+      const sliderWidth = Math.round(clientWidth);
       if (newPosition < 0) {
         newPosition = 0;
       }
@@ -103,10 +132,11 @@ var Slider = defineComponent({
     }
     const renderShowInput = () => {
       return props.showInput ? createVNode("div", {
-        "class": "devui-input__out-wrap"
+        "class": ns.e("input-wrap")
       }, [createVNode("input", {
         "onInput": handleOnInput,
-        "value": inputValue.value + ""
+        "value": inputValue.value + "",
+        "disabled": props.disabled
       }, null)]) : "";
     };
     if (props.modelValue > props.max) {
@@ -117,7 +147,7 @@ var Slider = defineComponent({
       percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
     }
     onMounted(() => {
-      const sliderWidth = sliderRunway.value.clientWidth;
+      const sliderWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
       currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
     });
     function handleButtonMousedown(event) {
@@ -132,7 +162,8 @@ var Slider = defineComponent({
     }
     function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
-        startX = event.target.getBoundingClientRect().left;
+        const _e = event.target;
+        startX = _e.getBoundingClientRect().left;
         const currentX = event.clientX;
         setPostion(currentX - startX);
         handleButtonMousedown(event);
@@ -145,41 +176,46 @@ var Slider = defineComponent({
     });
     const popover = () => {
       return createVNode("div", {
-        "class": "devui-slider_popover",
+        "class": ns.e("popover"),
         "style": {
           left: percentDispaly.value,
           opacity: popoverShow.value ? 1 : 0
         }
       }, [createVNode("div", {
-        "class": "devui-slider_popover-arrow"
+        "class": ns.e("popover-arrow")
       }, null), createVNode("div", {
-        "class": "devui-slider_popover-content"
+        "class": ns.e("popover-content")
       }, [inputValue.value + " " + props.tipsRenderer])]);
     };
+    const color = computed(() => {
+      return props.disabled ? "" : props.color;
+    });
     return () => createVNode("div", {
-      "class": "devui-slider"
+      "class": ns.b()
     }, [createVNode("div", {
       "ref": sliderRunway,
-      "class": "devui-slider__runway" + disableClass.value,
+      "class": [ns.e("runway"), disableClass.value],
       "onMousedown": handleRunwayMousedown,
       "onMouseout": () => popoverShow.value = false
     }, [createVNode("div", {
-      "class": "devui-slider__bar" + disableClass.value,
+      "class": [ns.e("bar"), disableClass.value],
       "style": {
-        width: percentDispaly.value
+        width: percentDispaly.value,
+        backgroundColor: color.value
       }
     }, null), createVNode("div", {
-      "class": "devui-slider__button" + disableClass.value,
+      "class": [ns.e("button"), disableClass.value],
       "style": {
-        left: percentDispaly.value
+        left: percentDispaly.value,
+        borderColor: color.value
       },
       "onMousedown": handleButtonMousedown,
       "onMouseenter": () => popoverShow.value = true,
       "onMouseout": () => popoverShow.value = false
     }, null), props.tipsRenderer === "null" ? "" : popover()]), createVNode("span", {
-      "class": "devui-min_count"
+      "class": ns.e("min-count")
     }, [props.min]), createVNode("span", {
-      "class": "devui-max_count"
+      "class": ns.e("max-count")
     }, [props.max]), renderShowInput()]);
   }
 });

package/slider/index.umd.js

@@ -1 +1 @@
-(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue))})(this,function(u,t){"use strict";const M={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",c=t.defineComponent({name:"DSlider",props:M,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,o=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),s=t.ref(0),h=t.ref(0),a=t.ref("");function S(n){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,a.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(a.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))}}function N(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const r=i/((e.max-e.min)/e.step),y=Math.round(n/r)*r;if(Math.round(y)>=i){s.value=i,l.value=e.max,a.value="100%",v.emit("update:modelValue",e.max);return}a.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,s.value=n,v.emit("update:modelValue",l.value)}function E(n){m=!1,o=n.clientX,f=s.value,h.value=f}function _(n){d.value=!0;const r=n.clientX-o;h.value=f+r,N(h.value)}function b(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",b)}const X=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:S,value:l.value+""},null)]):"";e.modelValue>e.max?a.value="100%":e.modelValue<e.min?a.value="0%":a.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;s.value=n*(l.value-e.min)/(e.max-e.min)});function g(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",_),window.addEventListener("mouseup",b))}function D(n){if(!e.disabled&&m){o=n.target.getBoundingClientRect().left;const i=n.clientX;N(i-o),g(n)}else return}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:a.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:D,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:a.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:a.value},onMousedown:g,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),X()])}}),x={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(c.name,c)}};u.Slider=c,u.default=x,u.sliderProps=M,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
+(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.index={},o.Vue))})(this,function(o,t){"use strict";const g={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""},color:{type:String,default:""}};function v(e,u,m){let r=e;return u&&(r+=`__${u}`),m&&(r+=`--${m}`),r}function D(e){const u=`devui-${e}`;return{b:()=>v(u),e:a=>a?v(u,a):"",m:a=>a?v(u,"",a):"",em:(a,c)=>a&&c?v(u,a,c):""}}var W="",V=t.defineComponent({name:"DSlider",props:g,emits:["update:modelValue"],setup(e,u){let m=!0,r=0,f=0;const d=D("slider"),a=t.ref(!1),c=t.ref(null),l=t.ref(e.modelValue),b=t.ref(0),y=t.ref(0),i=t.ref("");function R(n){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,i.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(i.value=(l.value-e.min)*100/(e.max-e.min)+"%",u.emit("update:modelValue",l.value))}}function M(n){const h=c.value?c.value.clientWidth:0,s=Math.round(h);n<0&&(n=0);const C=s/((e.max-e.min)/e.step),N=Math.round(n/C)*C;if(Math.round(N)>=s){b.value=s,l.value=e.max,i.value="100%",u.emit("update:modelValue",e.max);return}i.value=Math.round(N*100/s)+"%",l.value=Math.round(N*(e.max-e.min)/s)+e.min,b.value=n,u.emit("update:modelValue",l.value)}function _(n){m=!1,f=n.clientX,r=b.value,y.value=r}function x(n){a.value=!0;const s=n.clientX-f;y.value=r+s,M(y.value)}function S(){a.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",x),window.removeEventListener("mouseup",S)}const B=()=>e.showInput?t.createVNode("div",{class:d.e("input-wrap")},[t.createVNode("input",{onInput:R,value:l.value+"",disabled:e.disabled},null)]):"";e.modelValue>e.max?i.value="100%":e.modelValue<e.min?i.value="0%":i.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=c.value?c.value.clientWidth:0;b.value=n*(l.value-e.min)/(e.max-e.min)});function E(n){a.value=!0,!e.disabled&&(n.preventDefault(),_(n),window.addEventListener("mousemove",x),window.addEventListener("mouseup",S))}function L(n){if(!e.disabled&&m){f=n.target.getBoundingClientRect().left;const s=n.clientX;M(s-f),E(n)}else return}const w=t.computed(()=>e.disabled?" disabled":""),P=()=>t.createVNode("div",{class:d.e("popover"),style:{left:i.value,opacity:a.value?1:0}},[t.createVNode("div",{class:d.e("popover-arrow")},null),t.createVNode("div",{class:d.e("popover-content")},[l.value+" "+e.tipsRenderer])]),X=t.computed(()=>e.disabled?"":e.color);return()=>t.createVNode("div",{class:d.b()},[t.createVNode("div",{ref:c,class:[d.e("runway"),w.value],onMousedown:L,onMouseout:()=>a.value=!1},[t.createVNode("div",{class:[d.e("bar"),w.value],style:{width:i.value,backgroundColor:X.value}},null),t.createVNode("div",{class:[d.e("button"),w.value],style:{left:i.value,borderColor:X.value},onMousedown:E,onMouseenter:()=>a.value=!0,onMouseout:()=>a.value=!1},null),e.tipsRenderer==="null"?"":P()]),t.createVNode("span",{class:d.e("min-count")},[e.min]),t.createVNode("span",{class:d.e("max-count")},[e.max]),B()])}}),I={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(V.name,V)}};o.Slider=V,o.default=I,o.sliderProps=g,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});

package/slider/style.css

@@ -1 +1 @@
-.devui-slider{position:relative;width:90%;display:block}.devui-slider.disabled{cursor:not-allowed;background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway{position:relative;width:100%;padding:4px 0;margin:4px 0;cursor:pointer;box-sizing:border-box;height:5px;display:flex;align-items:center;background-color:var(--devui-default-bg, #f3f6f8)}.devui-slider__runway.disabled{cursor:not-allowed}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-default-line, #5e7ce0);border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);position:absolute}.devui-slider__runway .devui-slider__bar.disabled{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__bar.disabled:hover{cursor:not-allowed}.devui-slider__runway .devui-slider__button{position:absolute;width:14px;height:14px;border:2px solid var(--devui-default-line, #5e7ce0);background-color:var(--devui-base-bg, #ffffff);border-radius:50%;margin-left:-7px;transition:transform .2s ease-in-out}.devui-slider__runway .devui-slider__button:hover{transform:scale(1.2)}.devui-slider__runway .devui-slider__button.disabled{background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.devui-slider__runway .devui-slider_popover{position:relative;bottom:26px;transform:translate(-50%);border-radius:var(--devui-border-radius-feedback, 4px);font-size:var(--devui-font-size-sm, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-arrow{position:absolute;left:50%;margin-left:-4px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-content{padding:5px 14px;text-align:center;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider .devui-min_count{position:absolute;top:15px;left:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-max_count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-input__out-wrap{font-size:var(--devui-font-size, 12px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-input__out-wrap input{width:40px;text-align:center}
+.devui-slider{position:relative;width:90%;display:block}.devui-slider.disabled{cursor:not-allowed;background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway{position:relative;width:100%;padding:4px 0;margin:4px 0;cursor:pointer;box-sizing:border-box;height:5px;display:flex;align-items:center;background-color:var(--devui-default-bg, #f3f6f8)}.devui-slider__runway.disabled{cursor:not-allowed}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-default-line, #5e7ce0);border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);position:absolute}.devui-slider__runway .devui-slider__bar.disabled{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__bar.disabled:hover{cursor:not-allowed}.devui-slider__runway .devui-slider__button{position:absolute;width:14px;height:14px;border:2px solid var(--devui-default-line, #5e7ce0);background-color:var(--devui-base-bg, #ffffff);border-radius:50%;margin-left:-7px;transition:transform .2s ease-in-out}.devui-slider__runway .devui-slider__button:hover{transform:scale(1.2)}.devui-slider__runway .devui-slider__button.disabled{background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.devui-slider__runway .devui-slider__popover{position:relative;bottom:26px;transform:translate(-50%);border-radius:var(--devui-border-radius-feedback, 4px);font-size:var(--devui-font-size-sm, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-slider__runway .devui-slider__popover .devui-slider__popover-arrow{position:absolute;left:50%;margin-left:-4px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider__runway .devui-slider__popover .devui-slider__popover-content{padding:5px 14px;text-align:center;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider .devui-slider__min-count{position:absolute;top:15px;left:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-slider__max-count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-slider__input-wrap{font-size:var(--devui-font-size, 12px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-slider__input-wrap input{width:40px;text-align:center}

package/splitter/index.es.js

@@ -23,19 +23,43 @@ var __publicField = (obj, key, value) => {
 };
 import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, toRefs, Fragment, inject, reactive, withDirectives, provide, resolveComponent, onUpdated } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+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 baseOverlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const CommonOverlay = defineComponent({
   setup(props, ctx) {
+    const ns = useNamespace("overlay");
     return () => {
       let _slot;
       return createVNode(Teleport, {
         "to": "#d-overlay-anchor"
       }, {
         default: () => [createVNode(Transition, {
-          "name": "devui-overlay-fade"
+          "name": ns.e("fade")
         }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
           default: () => [_slot]
         })]
@@ -78,15 +102,12 @@ const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
 });
 const overlayEmits = ["update:visible", "backdropClick"];
 function useOverlayLogic(props, ctx) {
+  const ns = useNamespace("overlay");
   const backgroundClass = computed(() => {
-    return [
-      "devui-overlay-background",
-      props.backgroundClass,
-      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
-    ];
+    return [ns.e("background"), props.backgroundClass, !props.hasBackdrop ? ns.em("background", "disabled") : ns.em("background", "color")];
   });
   const overlayClass = computed(() => {
-    return "devui-overlay";
+    return ns.b();
   });
   const handleBackdropClick = (event) => {
     var _a;
@@ -296,6 +317,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
+    const ns = useNamespace("flexible-overlay");
     const {
       arrowRef,
       overlayRef,
@@ -308,10 +330,10 @@ const FlexibleOverlay = defineComponent({
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
-        "class": "devui-flexible-overlay"
+        "class": ns.b()
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
-        "class": "devui-flexible-overlay-arrow"
+        "class": ns.e("arrow")
       }, null)]);
     };
   }
@@ -5786,7 +5808,7 @@ function useTooltip(origin, props) {
     origin.value.addEventListener("mouseenter", onMouseenter);
     origin.value.addEventListener("mouseleave", onMouseleave);
   });
-  return { visible, placement, positionArr, overlayStyles, onPositionChange };
+  return { visible, placement, positionArr, overlayStyles, onPositionChange, onMouseenter, onMouseleave };
 }
 var tooltip = "";
 var DToolTip = defineComponent({
@@ -5806,13 +5828,16 @@ var DToolTip = defineComponent({
       placement,
       positionArr,
       overlayStyles,
-      onPositionChange
+      onPositionChange,
+      onMouseenter,
+      onMouseleave
     } = useTooltip(origin, props);
+    const ns = useNamespace("tooltip");
     return () => {
       var _a;
       return createVNode(Fragment, null, [createVNode("div", {
         "ref": origin,
-        "class": "devui-tooltip-reference"
+        "class": ns.e("reference")
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
         "to": "body"
       }, {
@@ -5823,13 +5848,15 @@ var DToolTip = defineComponent({
             "modelValue": visible.value,
             "onUpdate:modelValue": ($event) => visible.value = $event,
             "ref": tooltipRef,
-            "class": "devui-tooltip",
+            "class": ns.b(),
             "origin": origin.value,
             "position": positionArr.value,
             "offset": 6,
             "show-arrow": true,
             "style": overlayStyles.value,
-            "onPositionChange": onPositionChange
+            "onPositionChange": onPositionChange,
+            "onMouseenter": onMouseenter,
+            "onMouseleave": onMouseleave
           }, {
             default: () => [createVNode("span", {
               "innerHTML": content.value
@@ -5957,9 +5984,10 @@ var DSplitterBar = defineComponent({
   },
   props: splitterBarProps,
   setup(props) {
+    const ns = useNamespace("splitter");
     const store = inject("splitterStore");
     const state = reactive({
-      wrapperClass: `devui-splitter-bar devui-splitter-bar-${props.orientation}`
+      wrapperClass: `${ns.e("bar")} ${ns.em("bar", props.orientation)} `
     });
     const domRef = ref();
     watch([() => props.splitBarSize, domRef], ([curSplitBarSize, ele]) => {
@@ -6003,7 +6031,7 @@ var DSplitterBar = defineComponent({
       const isCollapsed = (_d = (_c = pane == null ? void 0 : pane.component) == null ? void 0 : _c.props) == null ? void 0 : _d.collapsed;
       const isNearPaneCollapsed = nearPane == null ? void 0 : nearPane.collapsed;
       return {
-        "devui-collapse": isCollapsible,
+        [ns.e("collapse")]: isCollapsible,
         collapsed: isCollapsed,
         hidden: isNearPaneCollapsed
       };
@@ -6158,9 +6186,7 @@ var DSplitterBar = defineComponent({
             handleCollapsePrePane();
           }
         }, null)]
-      }), createVNode("div", {
-        "class": "devui-resize-handle"
-      }, null), props.showCollapseButton && createVNode(DToolTip, {
+      }), props.showCollapseButton && createVNode(DToolTip, {
         "content": renderCollapsedTip()
       }, {
         default: () => [createVNode("div", {
@@ -6313,6 +6339,7 @@ var Splitter = defineComponent({
     const state = reactive({
       panes: []
     });
+    const ns = useNamespace("splitter");
     state.panes = ((_b = (_a = ctx.slots).DSplitterPane) == null ? void 0 : _b.call(_a)) || [];
     store.setPanes({
       panes: state.panes
@@ -6353,7 +6380,7 @@ var Splitter = defineComponent({
         orientation,
         showCollapseButton
       } = props;
-      const wrapperClass = ["devui-splitter", `devui-splitter-${orientation}`];
+      const wrapperClass = [ns.b(), ns.m(orientation)];
       return createVNode("div", {
         "class": wrapperClass,
         "ref": domRef
@@ -6417,6 +6444,7 @@ var SplitterPane = defineComponent({
     const store = inject("splitterStore");
     const domRef = ref();
     const orderRef = ref();
+    const ns = useNamespace("splitter");
     watch([orderRef, domRef], ([order, ele]) => {
       if (!ele) {
         return;
@@ -6430,7 +6458,7 @@ var SplitterPane = defineComponent({
         return;
       }
       ele.style.flexBasis = curSize;
-      const paneFixedClass = "devui-splitter-pane-fixed";
+      const paneFixedClass = ns.em("pane", "fixed");
       if (curSize) {
         addClass(ele, paneFixedClass);
       } else {
@@ -6478,7 +6506,7 @@ var SplitterPane = defineComponent({
       if (!ele) {
         return;
       }
-      const paneHiddenClass = "devui-splitter-pane-hidden";
+      const paneHiddenClass = ns.em("pane", "hidden");
       if (!collapsed) {
         removeClass(ele, paneHiddenClass);
       } else {
@@ -6502,7 +6530,7 @@ var SplitterPane = defineComponent({
       if (!(ele instanceof HTMLElement)) {
         return;
       }
-      const flexGrowClass = "devui-splitter-pane-grow";
+      const flexGrowClass = ns.em("pane", "grow");
       if (hasClass(ele, flexGrowClass)) {
         removeClass(ele, flexGrowClass);
       } else if (collapsed) {
@@ -6517,7 +6545,7 @@ var SplitterPane = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": "devui-splitter-pane",
+        "class": ns.e("pane"),
         "ref": domRef
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };