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

package/splitter/index.es.js

@@ -21,21 +21,45 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return 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 { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, toRefs, provide, reactive, 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, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var baseOverlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const CommonOverlay = defineComponent({
   setup(props, ctx) {
+    const ns2 = useNamespace("overlay");
     return () => {
       let _slot;
       return createVNode(Teleport, {
         "to": "#d-overlay-anchor"
       }, {
         default: () => [createVNode(Transition, {
-          "name": "devui-overlay-fade"
+          "name": ns2.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 ns2 = useNamespace("overlay");
   const backgroundClass = computed(() => {
-    return [
-      "devui-overlay-background",
-      props.backgroundClass,
-      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
-    ];
+    return [ns2.e("background"), props.backgroundClass, !props.hasBackdrop ? ns2.em("background", "disabled") : ns2.em("background", "color")];
   });
   const overlayClass = computed(() => {
-    return "devui-overlay";
+    return ns2.b();
   });
   const handleBackdropClick = (event) => {
     var _a;
@@ -296,6 +317,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
+    const ns2 = useNamespace("flexible-overlay");
     const {
       arrowRef,
       overlayRef,
@@ -308,14 +330,70 @@ const FlexibleOverlay = defineComponent({
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
-        "class": "devui-flexible-overlay"
+        "class": ns2.b()
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
-        "class": "devui-flexible-overlay-arrow"
+        "class": ns2.e("arrow")
       }, null)]);
     };
   }
 });
+const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
+const isObject = (val) => val !== null && typeof val === "object";
+const ns = useNamespace("popper-trigger");
+function wrapContent(content) {
+  return h("span", { class: ns.b() }, content);
+}
+function getFirstValidChild(nodes) {
+  for (const child of nodes) {
+    if (isObject(child)) {
+      if (child.type === Comment) {
+        continue;
+      }
+      if (child.type === "svg" || child.type === Text) {
+        return wrapContent(child);
+      }
+      if (child.type === Fragment) {
+        return getFirstValidChild(child.children);
+      }
+      return child;
+    }
+    return wrapContent(child);
+  }
+  return null;
+}
+var PopperTrigger = defineComponent({
+  name: "DPopperTrigger",
+  setup(_, ctx) {
+    const {
+      slots,
+      attrs
+    } = ctx;
+    return () => {
+      var _a;
+      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
+      const triggerRef = inject(POPPER_TRIGGER_TOKEN);
+      if (!defaultSlot) {
+        return null;
+      }
+      const firstValidChild = getFirstValidChild(defaultSlot);
+      if (!firstValidChild) {
+        return null;
+      }
+      return withDirectives(cloneVNode(firstValidChild, attrs), [[{
+        mounted(el) {
+          triggerRef.value = el;
+        },
+        updated(el) {
+          triggerRef.value = el;
+        },
+        unmounted() {
+          triggerRef.value = null;
+        }
+      }]]);
+    };
+  }
+});
 const tooltipProps = {
   content: {
     type: String,
@@ -336,6 +414,18 @@ const tooltipProps = {
   mouseLeaveDelay: {
     type: Number,
     default: 100
+  },
+  enterable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  hideAfter: {
+    type: Number,
+    default: 0
   }
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -1049,7 +1139,7 @@ var lodash = { exports: {} };
       var objectCtorString = funcToString.call(Object2);
       var oldDash = root._;
       var reIsNative = RegExp2("^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$");
-      var Buffer2 = moduleExports ? context.Buffer : undefined$1, Symbol = context.Symbol, Uint8Array2 = context.Uint8Array, allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined$1, symIterator = Symbol ? Symbol.iterator : undefined$1, symToStringTag = Symbol ? Symbol.toStringTag : undefined$1;
+      var Buffer2 = moduleExports ? context.Buffer : undefined$1, Symbol2 = context.Symbol, Uint8Array2 = context.Uint8Array, allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol2 ? Symbol2.isConcatSpreadable : undefined$1, symIterator = Symbol2 ? Symbol2.iterator : undefined$1, symToStringTag = Symbol2 ? Symbol2.toStringTag : undefined$1;
       var defineProperty = function() {
         try {
           var func = getNative(Object2, "defineProperty");
@@ -1064,7 +1154,7 @@ var lodash = { exports: {} };
       var metaMap = WeakMap2 && new WeakMap2();
       var realNames = {};
       var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap2);
-      var symbolProto = Symbol ? Symbol.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
+      var symbolProto = Symbol2 ? Symbol2.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
       function lodash2(value) {
         if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
           if (value instanceof LodashWrapper) {
@@ -1080,7 +1170,7 @@ var lodash = { exports: {} };
         function object() {
         }
         return function(proto) {
-          if (!isObject(proto)) {
+          if (!isObject2(proto)) {
             return {};
           }
           if (objectCreate) {
@@ -1442,7 +1532,7 @@ var lodash = { exports: {} };
         if (result2 !== undefined$1) {
           return result2;
         }
-        if (!isObject(value)) {
+        if (!isObject2(value)) {
           return value;
         }
         var isArr = isArray(value);
@@ -1518,7 +1608,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        return setTimeout(function() {
+        return setTimeout2(function() {
           func.apply(undefined$1, args);
         }, wait);
       }
@@ -1789,7 +1879,7 @@ var lodash = { exports: {} };
         return true;
       }
       function baseIsNative(value) {
-        if (!isObject(value) || isMasked(value)) {
+        if (!isObject2(value) || isMasked(value)) {
           return false;
         }
         var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
@@ -1829,7 +1919,7 @@ var lodash = { exports: {} };
         return result2;
       }
       function baseKeysIn(object) {
-        if (!isObject(object)) {
+        if (!isObject2(object)) {
           return nativeKeysIn(object);
         }
         var isProto = isPrototype(object), result2 = [];
@@ -1874,7 +1964,7 @@ var lodash = { exports: {} };
         }
         baseFor(source, function(srcValue, key) {
           stack || (stack = new Stack());
-          if (isObject(srcValue)) {
+          if (isObject2(srcValue)) {
             baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
             var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : undefined$1;
@@ -1914,7 +2004,7 @@ var lodash = { exports: {} };
             newValue = objValue;
             if (isArguments(objValue)) {
               newValue = toPlainObject(objValue);
-            } else if (!isObject(objValue) || isFunction(objValue)) {
+            } else if (!isObject2(objValue) || isFunction(objValue)) {
               newValue = initCloneObject(srcValue);
             }
           } else {
@@ -2053,7 +2143,7 @@ var lodash = { exports: {} };
         return shuffleSelf(array, baseClamp(n, 0, array.length));
       }
       function baseSet(object, path, value, customizer) {
-        if (!isObject(object)) {
+        if (!isObject2(object)) {
           return object;
         }
         path = castPath(path, object);
@@ -2067,7 +2157,7 @@ var lodash = { exports: {} };
             var objValue = nested[key];
             newValue = customizer ? customizer(objValue, key, nested) : undefined$1;
             if (newValue === undefined$1) {
-              newValue = isObject(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
+              newValue = isObject2(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
             }
           }
           assignValue(nested, key, newValue);
@@ -2298,7 +2388,7 @@ var lodash = { exports: {} };
         end = end === undefined$1 ? length : end;
         return !start && end >= length ? array : baseSlice(array, start, end);
       }
-      var clearTimeout = ctxClearTimeout || function(id) {
+      var clearTimeout2 = ctxClearTimeout || function(id) {
         return root.clearTimeout(id);
       };
       function cloneBuffer(buffer, isDeep) {
@@ -2517,7 +2607,7 @@ var lodash = { exports: {} };
               return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
           }
           var thisBinding = baseCreate(Ctor.prototype), result2 = Ctor.apply(thisBinding, args);
-          return isObject(result2) ? result2 : thisBinding;
+          return isObject2(result2) ? result2 : thisBinding;
         };
       }
       function createCurry(func, bitmask, arity) {
@@ -2831,7 +2921,7 @@ var lodash = { exports: {} };
         return objValue;
       }
       function customDefaultsMerge(objValue, srcValue, key, object, source, stack) {
-        if (isObject(objValue) && isObject(srcValue)) {
+        if (isObject2(objValue) && isObject2(srcValue)) {
           stack.set(srcValue, objValue);
           baseMerge(objValue, srcValue, undefined$1, customDefaultsMerge, stack);
           stack["delete"](srcValue);
@@ -3179,7 +3269,7 @@ var lodash = { exports: {} };
         return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
       }
       function isIterateeCall(value, index2, object) {
-        if (!isObject(object)) {
+        if (!isObject2(object)) {
           return false;
         }
         var type = typeof index2;
@@ -3222,7 +3312,7 @@ var lodash = { exports: {} };
         return value === proto;
       }
       function isStrictComparable(value) {
-        return value === value && !isObject(value);
+        return value === value && !isObject2(value);
       }
       function matchesStrictComparable(key, srcValue) {
         return function(object) {
@@ -3327,7 +3417,7 @@ var lodash = { exports: {} };
         return object[key];
       }
       var setData = shortOut(baseSetData);
-      var setTimeout = ctxSetTimeout || function(func, wait) {
+      var setTimeout2 = ctxSetTimeout || function(func, wait) {
         return root.setTimeout(func, wait);
       };
       var setToString = shortOut(baseSetToString);
@@ -4104,7 +4194,7 @@ var lodash = { exports: {} };
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
-        if (isObject(options)) {
+        if (isObject2(options)) {
           leading = !!options.leading;
           maxing = "maxWait" in options;
           maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
@@ -4119,7 +4209,7 @@ var lodash = { exports: {} };
         }
         function leadingEdge(time) {
           lastInvokeTime = time;
-          timerId = setTimeout(timerExpired, wait);
+          timerId = setTimeout2(timerExpired, wait);
           return leading ? invokeFunc(time) : result2;
         }
         function remainingWait(time) {
@@ -4135,7 +4225,7 @@ var lodash = { exports: {} };
           if (shouldInvoke(time)) {
             return trailingEdge(time);
           }
-          timerId = setTimeout(timerExpired, remainingWait(time));
+          timerId = setTimeout2(timerExpired, remainingWait(time));
         }
         function trailingEdge(time) {
           timerId = undefined$1;
@@ -4147,7 +4237,7 @@ var lodash = { exports: {} };
         }
         function cancel() {
           if (timerId !== undefined$1) {
-            clearTimeout(timerId);
+            clearTimeout2(timerId);
           }
           lastInvokeTime = 0;
           lastArgs = lastCallTime = lastThis = timerId = undefined$1;
@@ -4165,13 +4255,13 @@ var lodash = { exports: {} };
               return leadingEdge(lastCallTime);
             }
             if (maxing) {
-              clearTimeout(timerId);
-              timerId = setTimeout(timerExpired, wait);
+              clearTimeout2(timerId);
+              timerId = setTimeout2(timerExpired, wait);
               return invokeFunc(lastCallTime);
             }
           }
           if (timerId === undefined$1) {
-            timerId = setTimeout(timerExpired, wait);
+            timerId = setTimeout2(timerExpired, wait);
           }
           return result2;
         }
@@ -4274,7 +4364,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        if (isObject(options)) {
+        if (isObject2(options)) {
           leading = "leading" in options ? !!options.leading : leading;
           trailing = "trailing" in options ? !!options.trailing : trailing;
         }
@@ -4382,7 +4472,7 @@ var lodash = { exports: {} };
         return typeof value == "number" && nativeIsFinite(value);
       }
       function isFunction(value) {
-        if (!isObject(value)) {
+        if (!isObject2(value)) {
           return false;
         }
         var tag = baseGetTag(value);
@@ -4394,7 +4484,7 @@ var lodash = { exports: {} };
       function isLength(value) {
         return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
       }
-      function isObject(value) {
+      function isObject2(value) {
         var type = typeof value;
         return value != null && (type == "object" || type == "function");
       }
@@ -4501,9 +4591,9 @@ var lodash = { exports: {} };
         if (isSymbol(value)) {
           return NAN;
         }
-        if (isObject(value)) {
+        if (isObject2(value)) {
           var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-          value = isObject(other) ? other + "" : other;
+          value = isObject2(other) ? other + "" : other;
         }
         if (typeof value != "string") {
           return value === 0 ? value : +value;
@@ -4724,7 +4814,7 @@ var lodash = { exports: {} };
           var Ctor = object && object.constructor;
           if (isArrLike) {
             accumulator = isArr ? new Ctor() : [];
-          } else if (isObject(object)) {
+          } else if (isObject2(object)) {
             accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object)) : {};
           } else {
             accumulator = {};
@@ -5006,7 +5096,7 @@ var lodash = { exports: {} };
       }
       function truncate(string, options) {
         var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
-        if (isObject(options)) {
+        if (isObject2(options)) {
           var separator = "separator" in options ? options.separator : separator;
           length = "length" in options ? toInteger(options.length) : length;
           omission = "omission" in options ? baseToString(options.omission) : omission;
@@ -5136,13 +5226,13 @@ var lodash = { exports: {} };
       });
       function mixin(object, source, options) {
         var props = keys(source), methodNames = baseFunctions(source, props);
-        if (options == null && !(isObject(source) && (methodNames.length || !props.length))) {
+        if (options == null && !(isObject2(source) && (methodNames.length || !props.length))) {
           options = source;
           source = object;
           object = this;
           methodNames = baseFunctions(source, keys(source));
         }
-        var chain2 = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object);
+        var chain2 = !(isObject2(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object);
         arrayEach(methodNames, function(methodName) {
           var func = source[methodName];
           object[methodName] = func;
@@ -5488,7 +5578,7 @@ var lodash = { exports: {} };
       lodash2.isNil = isNil;
       lodash2.isNull = isNull;
       lodash2.isNumber = isNumber;
-      lodash2.isObject = isObject;
+      lodash2.isObject = isObject2;
       lodash2.isObjectLike = isObjectLike;
       lodash2.isPlainObject = isPlainObject;
       lodash2.isRegExp = isRegExp;
@@ -5757,7 +5847,7 @@ const TransformOriginMap = {
   right: "-8px 50%"
 };
 function useTooltip(origin, props) {
-  const { position, mouseEnterDelay, mouseLeaveDelay } = toRefs(props);
+  const { position, mouseEnterDelay, mouseLeaveDelay, enterable, disabled, hideAfter } = toRefs(props);
   const visible = ref(false);
   const isEnter = ref(false);
   const positionArr = computed(() => typeof position.value === "string" ? [position.value] : position.value);
@@ -5772,6 +5862,9 @@ function useTooltip(origin, props) {
     !isEnter.value && (visible.value = false);
   }, mouseLeaveDelay.value);
   const onMouseenter = () => {
+    if (disabled.value) {
+      return;
+    }
     isEnter.value = true;
     enter();
   };
@@ -5782,11 +5875,29 @@ function useTooltip(origin, props) {
   const onPositionChange = (pos) => {
     placement.value = pos;
   };
+  const quickLeave = () => {
+    isEnter.value = false;
+    visible.value = false;
+  };
+  const onMouseenterOverlay = () => {
+    if (!enterable.value) {
+      quickLeave();
+    } else {
+      onMouseenter();
+    }
+  };
   onMounted(() => {
     origin.value.addEventListener("mouseenter", onMouseenter);
     origin.value.addEventListener("mouseleave", onMouseleave);
   });
-  return { visible, placement, positionArr, overlayStyles, onPositionChange };
+  let timer;
+  watch(visible, (newVal) => {
+    if (newVal && hideAfter.value) {
+      timer && clearTimeout(timer);
+      timer = setTimeout(quickLeave, hideAfter.value);
+    }
+  });
+  return { visible, placement, positionArr, overlayStyles, onPositionChange, onMouseenter, onMouseleave, onMouseenterOverlay };
 }
 var tooltip = "";
 var DToolTip = defineComponent({
@@ -5806,38 +5917,43 @@ var DToolTip = defineComponent({
       placement,
       positionArr,
       overlayStyles,
-      onPositionChange
+      onPositionChange,
+      onMouseleave,
+      onMouseenterOverlay
     } = useTooltip(origin, props);
-    return () => {
-      var _a;
-      return createVNode(Fragment, null, [createVNode("div", {
-        "ref": origin,
-        "class": "devui-tooltip-reference"
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
-        "to": "body"
+    const ns2 = useNamespace("tooltip");
+    provide(POPPER_TRIGGER_TOKEN, origin);
+    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    }), createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? ns2.m(`fade-${placement.value}`) : ""
       }, {
-        default: () => [createVNode(Transition, {
-          "name": showAnimation.value ? `devui-tooltip-fade-${placement.value}` : ""
+        default: () => [createVNode(FlexibleOverlay, {
+          "modelValue": visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          "ref": tooltipRef,
+          "class": ns2.b(),
+          "origin": origin.value,
+          "position": positionArr.value,
+          "offset": 6,
+          "show-arrow": true,
+          "style": overlayStyles.value,
+          "onPositionChange": onPositionChange,
+          "onMouseenter": onMouseenterOverlay,
+          "onMouseleave": onMouseleave
         }, {
-          default: () => [createVNode(FlexibleOverlay, {
-            "modelValue": visible.value,
-            "onUpdate:modelValue": ($event) => visible.value = $event,
-            "ref": tooltipRef,
-            "class": "devui-tooltip",
-            "origin": origin.value,
-            "position": positionArr.value,
-            "offset": 6,
-            "show-arrow": true,
-            "style": overlayStyles.value,
-            "onPositionChange": onPositionChange
-          }, {
-            default: () => [createVNode("span", {
-              "innerHTML": content.value
-            }, null)]
-          })]
+          default: () => [createVNode("span", {
+            "innerHTML": content.value
+          }, null)]
         })]
-      })]);
-    };
+      })]
+    })]);
   }
 });
 function setStyle(element, style) {
@@ -5957,9 +6073,10 @@ var DSplitterBar = defineComponent({
   },
   props: splitterBarProps,
   setup(props) {
+    const ns2 = useNamespace("splitter");
     const store = inject("splitterStore");
     const state = reactive({
-      wrapperClass: `devui-splitter-bar devui-splitter-bar-${props.orientation}`
+      wrapperClass: `${ns2.e("bar")} ${ns2.em("bar", props.orientation)} `
     });
     const domRef = ref();
     watch([() => props.splitBarSize, domRef], ([curSplitBarSize, ele]) => {
@@ -6003,7 +6120,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,
+        [ns2.e("collapse")]: isCollapsible,
         collapsed: isCollapsed,
         hidden: isNearPaneCollapsed
       };
@@ -6158,9 +6275,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 +6428,7 @@ var Splitter = defineComponent({
     const state = reactive({
       panes: []
     });
+    const ns2 = useNamespace("splitter");
     state.panes = ((_b = (_a = ctx.slots).DSplitterPane) == null ? void 0 : _b.call(_a)) || [];
     store.setPanes({
       panes: state.panes
@@ -6353,7 +6469,7 @@ var Splitter = defineComponent({
         orientation,
         showCollapseButton
       } = props;
-      const wrapperClass = ["devui-splitter", `devui-splitter-${orientation}`];
+      const wrapperClass = [ns2.b(), ns2.m(orientation)];
       return createVNode("div", {
         "class": wrapperClass,
         "ref": domRef
@@ -6417,6 +6533,7 @@ var SplitterPane = defineComponent({
     const store = inject("splitterStore");
     const domRef = ref();
     const orderRef = ref();
+    const ns2 = useNamespace("splitter");
     watch([orderRef, domRef], ([order, ele]) => {
       if (!ele) {
         return;
@@ -6430,7 +6547,7 @@ var SplitterPane = defineComponent({
         return;
       }
       ele.style.flexBasis = curSize;
-      const paneFixedClass = "devui-splitter-pane-fixed";
+      const paneFixedClass = ns2.em("pane", "fixed");
       if (curSize) {
         addClass(ele, paneFixedClass);
       } else {
@@ -6478,7 +6595,7 @@ var SplitterPane = defineComponent({
       if (!ele) {
         return;
       }
-      const paneHiddenClass = "devui-splitter-pane-hidden";
+      const paneHiddenClass = ns2.em("pane", "hidden");
       if (!collapsed) {
         removeClass(ele, paneHiddenClass);
       } else {
@@ -6502,7 +6619,7 @@ var SplitterPane = defineComponent({
       if (!(ele instanceof HTMLElement)) {
         return;
       }
-      const flexGrowClass = "devui-splitter-pane-grow";
+      const flexGrowClass = ns2.em("pane", "grow");
       if (hasClass(ele, flexGrowClass)) {
         removeClass(ele, flexGrowClass);
       } else if (collapsed) {
@@ -6517,7 +6634,7 @@ var SplitterPane = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": "devui-splitter-pane",
+        "class": ns2.e("pane"),
         "ref": domRef
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };