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

package/slider/index.es.js

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