@element-plus/nightly 0.0.20220127 → 0.0.20220131

package/es/components/scrollbar/src/scrollbar2.mjs

@@ -1,11 +1,13 @@
-import { defineComponent, ref, computed, watch, provide, reactive, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, ref, computed, watch, provide, reactive, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
 import { useResizeObserver, useEventListener } from '@vueuse/core';
 import { addUnit, isNumber } from '../../../utils/util.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
 import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
 import Bar from './bar2.mjs';
 import { scrollbarProps, scrollbarEmits } from './scrollbar.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
 
 const _sfc_main = defineComponent({
@@ -16,6 +18,7 @@ const _sfc_main = defineComponent({
   props: scrollbarProps,
   emits: scrollbarEmits,
   setup(props, { emit }) {
+    const ns = useNamespace("scrollbar");
     let stopResizeObserver = void 0;
     let stopResizeListener = void 0;
     const scrollbar$ = ref();
@@ -95,6 +98,7 @@ const _sfc_main = defineComponent({
         nextTick(() => update());
     });
     return {
+      ns,
       scrollbar$,
       wrap$,
       resize$,
@@ -113,26 +117,25 @@ const _sfc_main = defineComponent({
     };
   }
 });
-const _hoisted_1 = {
-  ref: "scrollbar$",
-  class: "el-scrollbar"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_bar = resolveComponent("bar");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
+  return openBlock(), createElementBlock("div", {
+    ref: "scrollbar$",
+    class: normalizeClass(_ctx.ns.b())
+  }, [
     createElementVNode("div", {
       ref: "wrap$",
       class: normalizeClass([
         _ctx.wrapClass,
-        "el-scrollbar__wrap",
-        _ctx.native ? "" : "el-scrollbar__wrap--hidden-default"
+        _ctx.ns.e("wrap"),
+        { [_ctx.ns.em("wrap", "hidden-default")]: !_ctx.native }
       ]),
       style: normalizeStyle(_ctx.style),
       onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleScroll && _ctx.handleScroll(...args))
     }, [
       (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
         ref: "resize$",
-        class: normalizeClass(["el-scrollbar__view", _ctx.viewClass]),
+        class: normalizeClass([_ctx.ns.e("view"), _ctx.viewClass]),
         style: normalizeStyle(_ctx.viewStyle)
       }, {
         default: withCtx(() => [
@@ -150,7 +153,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "ratio-x": _ctx.ratioX,
       "ratio-y": _ctx.ratioY
     }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : createCommentVNode("v-if", true)
-  ], 512);
+  ], 2);
 }
 var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/es/components/scrollbar/src/scrollbar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" class=\"el-scrollbar\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        'el-scrollbar__wrap',\n        native ? '' : 'el-scrollbar__wrap--hidden-default',\n      ]\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"['el-scrollbar__view', viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar\n        ref=\"barRef\"\n        :height=\"sizeHeight\"\n        :width=\"sizeWidth\"\n        :always=\"always\"\n        :ratio-x=\"ratioX\"\n        :ratio-y=\"ratioY\"\n      ></bar>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  reactive,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { addUnit, isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n  emits: scrollbarEmits,\n\n  setup(props, { emit }) {\n    let stopResizeObserver: (() => void) | undefined = undefined\n    let stopResizeListener: (() => void) | undefined = undefined\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const barRef = ref()\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'ElScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = computed<StyleValue>(() => {\n      const style: CSSProperties = {}\n      if (props.height) style.height = addUnit(props.height)\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n      return [props.wrapStyle, style]\n    })\n\n    const handleScroll = () => {\n      if (wrap$.value) {\n        barRef.value?.handleScroll(wrap$.value)\n\n        emit('scroll', {\n          scrollTop: wrap$.value.scrollTop,\n          scrollLeft: wrap$.value.scrollLeft,\n        })\n      }\n    }\n\n    const setScrollTop = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollTop = value\n    }\n\n    const setScrollLeft = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollLeft = value\n    }\n\n    const update = () => {\n      if (!wrap$.value) return\n\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n      const height = Math.max(originalHeight, props.minSize)\n      const width = Math.max(originalWidth, props.minSize)\n\n      ratioY.value =\n        originalHeight /\n        (offsetHeight - originalHeight) /\n        (height / (offsetHeight - height))\n      ratioX.value =\n        originalWidth /\n        (offsetWidth - originalWidth) /\n        (width / (offsetWidth - width))\n\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n    }\n\n    watch(\n      () => props.noresize,\n      (noresize) => {\n        if (noresize) {\n          stopResizeObserver?.()\n          stopResizeListener?.()\n        } else {\n          ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n          stopResizeListener = useEventListener('resize', update)\n        }\n      },\n      { immediate: true }\n    )\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n\n    return {\n      scrollbar$,\n      wrap$,\n      resize$,\n      barRef,\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAqDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,QAAI,qBAA+C;AACnD,QAAI,qBAA+C;AAEnD,UAAM,aAAa;AACnB,UAAM,QAAQ;AACd,UAAM,UAAU;AAEhB,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,SAAS;AACf,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,UAAM,SAAS,IAAI;AACnB,UAAM,SAAS,IAAI;AACnB,UAAM,QAAQ;AACd,UAAM,MAAM;AAEZ,UAAM,QAAQ,SAAqB,MAAM;AACvC,YAAM,SAAuB;AAC7B,UAAI,MAAM;AAAQ,eAAM,SAAS,QAAQ,MAAM;AAC/C,UAAI,MAAM;AAAW,eAAM,YAAY,QAAQ,MAAM;AACrD,aAAO,CAAC,MAAM,WAAW;AAAA;AAG3B,UAAM,eAAe,MAAM;AACzB,UAAI;AACF,eAAO;AAEP;AAAe,qBACF;AAAY,UACvB;AAAwB;AAAA;AAAA;AAK9B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAAyB;AAG3B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAA0B;AAG5B;AACE,UAAI;AAAc;AAElB;AACA,YAAM,oBAAoB,MAAM;AAEhC,YAAM,qCAAqC,MAAM;AACjD,YAAM;AACN,YAAM,wCAAwC;AAC9C,YAAM,aAAa,IAAI,eAAe;AAEtC;AAIA,aAAO,QACL,gDAEC;AAEH,kCAA4B;AAC5B,gBAAU,oCAAoC,GAAG,YAAY;AAAA;AAG/D;AAGI,UAAI;AACF;AACA;AAAA;AAEA;AAAC,QAAC;AACF;AAAgD;AAAA,OAGpD;AAGF;AAEW;AACW,MAClB;AAAa;AAIjB;AACE;AAAmB,iBAAS,MAAM;AAAA;AAGpC;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;AAjLiB;AAAM;;;;;AAmBnB;AAjBO;AACL;AAAqB;QAAwC;AAAA;;;AAM5D;;;AAIQ;AACP,QACL;AAAgB;;;AAET;;;;OAGK;AAAA;;AAET,MACH;AAAA,MACA;AAAO,MACP,YAAQ;AAAA,MACR;AAAS,MACT;AAAS;;;;;;;;;"}
+{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" :class=\"ns.b()\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        ns.e('wrap'),\n        { [ns.em('wrap', 'hidden-default')]: !native },\n      ]\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"[ns.e('view'), viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar\n        ref=\"barRef\"\n        :height=\"sizeHeight\"\n        :width=\"sizeWidth\"\n        :always=\"always\"\n        :ratio-x=\"ratioX\"\n        :ratio-y=\"ratioY\"\n      ></bar>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  reactive,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { addUnit, isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n  emits: scrollbarEmits,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('scrollbar')\n\n    let stopResizeObserver: (() => void) | undefined = undefined\n    let stopResizeListener: (() => void) | undefined = undefined\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const barRef = ref()\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'ElScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = computed<StyleValue>(() => {\n      const style: CSSProperties = {}\n      if (props.height) style.height = addUnit(props.height)\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n      return [props.wrapStyle, style]\n    })\n\n    const handleScroll = () => {\n      if (wrap$.value) {\n        barRef.value?.handleScroll(wrap$.value)\n\n        emit('scroll', {\n          scrollTop: wrap$.value.scrollTop,\n          scrollLeft: wrap$.value.scrollLeft,\n        })\n      }\n    }\n\n    const setScrollTop = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollTop = value\n    }\n\n    const setScrollLeft = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollLeft = value\n    }\n\n    const update = () => {\n      if (!wrap$.value) return\n\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n      const height = Math.max(originalHeight, props.minSize)\n      const width = Math.max(originalWidth, props.minSize)\n\n      ratioY.value =\n        originalHeight /\n        (offsetHeight - originalHeight) /\n        (height / (offsetHeight - height))\n      ratioX.value =\n        originalWidth /\n        (offsetWidth - originalWidth) /\n        (width / (offsetWidth - width))\n\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n    }\n\n    watch(\n      () => props.noresize,\n      (noresize) => {\n        if (noresize) {\n          stopResizeObserver?.()\n          stopResizeListener?.()\n        } else {\n          ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n          stopResizeListener = useEventListener('resize', update)\n        }\n      },\n      { immediate: true }\n    )\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n\n    return {\n      ns,\n      scrollbar$,\n      wrap$,\n      resize$,\n      barRef,\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;;;;;AAsDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,aAAa;AAExB,QAAI,qBAA+C;AACnD,QAAI,qBAA+C;AAEnD,UAAM,aAAa;AACnB,UAAM,QAAQ;AACd,UAAM,UAAU;AAEhB,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,SAAS;AACf,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,UAAM,SAAS,IAAI;AACnB,UAAM,SAAS,IAAI;AACnB,UAAM,QAAQ;AACd,UAAM,MAAM;AAEZ,UAAM,QAAQ,SAAqB,MAAM;AACvC,YAAM,SAAuB;AAC7B,UAAI,MAAM;AAAQ,eAAM,SAAS,QAAQ,MAAM;AAC/C,UAAI,MAAM;AAAW,eAAM,YAAY,QAAQ,MAAM;AACrD,aAAO,CAAC,MAAM,WAAW;AAAA;AAG3B,UAAM,eAAe,MAAM;AACzB,UAAI;AACF,eAAO;AAEP;AAAe,qBACF;AAAY,UACvB;AAAwB;AAAA;AAAA;AAK9B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAAyB;AAG3B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAA0B;AAG5B;AACE,UAAI;AAAc;AAElB;AACA,YAAM,oBAAoB,MAAM;AAEhC,YAAM,qCAAqC,MAAM;AACjD,YAAM;AACN,YAAM,wCAAwC;AAC9C,YAAM,aAAa,IAAI,eAAe;AAEtC;AAIA,aAAO,QACL,gDAEC;AAEH,kCAA4B;AAC5B,gBAAU,oCAAoC,GAAG,YAAY;AAAA;AAG/D;AAGI,UAAI;AACF;AACA;AAAA;AAEA;AAAC,QAAC;AACF;AAAgD;AAAA,OAGpD;AAGF;AAEW;AACW,MAClB;AAAa;AAIjB;AACE;AAAmB,iBAAS,MAAM;AAAA;AAGpC;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;AArLiB,SAAOA;AAAA;;AAC1B;AACa;AACL;AAAqB;AAAU,aAAyB;AAAE;;;AAMzD;;;AAIQ;AACP,QACL;AAAgB;;;AAET;;;;OAGK;AAAA;;AAET,MACH;AAAA,MACA;AAAO,MACP,YAAQ;AAAA,MACR;AAAS,MACT;AAAS;;;;;;;;;"}

package/es/components/scrollbar/src/thumb.vue.d.ts

@@ -5,6 +5,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly ratio: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
     readonly always: BooleanConstructor;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     instance: import("vue").Ref<HTMLDivElement | undefined>;
     thumb: import("vue").Ref<HTMLDivElement | undefined>;
     bar: import("vue").ComputedRef<{

package/es/components/scrollbar/src/thumb2.mjs

@@ -2,10 +2,12 @@ import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlo
 import { isClient, useEventListener } from '@vueuse/core';
 import '../../../tokens/index.mjs';
 import { throwError } from '../../../utils/error.mjs';
+import '../../../hooks/index.mjs';
 import { BAR_MAP, renderThumbStyle } from './util.mjs';
 import { thumbProps } from './thumb.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const COMPONENT_NAME = "Thumb";
 const _sfc_main = defineComponent({
@@ -13,6 +15,7 @@ const _sfc_main = defineComponent({
   props: thumbProps,
   setup(props) {
     const scrollbar = inject(scrollbarContextKey);
+    const ns = useNamespace("scrollbar");
     if (!scrollbar)
       throwError(COMPONENT_NAME, "can not inject scrollbar context");
     const instance = ref();
@@ -98,6 +101,7 @@ const _sfc_main = defineComponent({
     useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
     useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
     return {
+      ns,
       instance,
       thumb,
       bar,
@@ -109,25 +113,27 @@ const _sfc_main = defineComponent({
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(Transition, { name: "el-scrollbar-fade" }, {
+  return openBlock(), createBlock(Transition, {
+    name: _ctx.ns.b("fade")
+  }, {
     default: withCtx(() => [
       withDirectives(createElementVNode("div", {
         ref: "instance",
-        class: normalizeClass(["el-scrollbar__bar", "is-" + _ctx.bar.key]),
+        class: normalizeClass([_ctx.ns.e("bar"), _ctx.ns.is(_ctx.bar.key)]),
         onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
       }, [
         createElementVNode("div", {
           ref: "thumb",
-          class: "el-scrollbar__thumb",
+          class: normalizeClass(_ctx.ns.e("thumb")),
           style: normalizeStyle(_ctx.thumbStyle),
           onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
-        }, null, 36)
+        }, null, 38)
       ], 34), [
         [vShow, _ctx.always || _ctx.visible]
       ])
     ]),
     _: 1
-  });
+  }, 8, ["name"]);
 }
 var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/es/components/scrollbar/src/thumb2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"thumb2.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener, isClient } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: thumbProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const thumbState = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let originalOnSelectStart:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const offsetRatio = computed(\n      () =>\n        // offsetRatioX = original width of thumb / current width of thumb / ratioX\n        // offsetRatioY = original height of thumb / current height of thumb / ratioY\n        // instance height = wrap height - GAP\n        instance.value![bar.value.offset] ** 2 /\n        scrollbar.wrapElement![bar.value.scrollSize] /\n        props.ratio /\n        thumb.value![bar.value.offset]\n    )\n\n    const clickThumbHandler = (e: MouseEvent) => {\n      // prevent click event of middle and right button\n      e.stopPropagation()\n      if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n      window.getSelection()?.removeAllRanges()\n      startDrag(e)\n\n      const el = e.currentTarget as HTMLDivElement\n      if (!el) return\n      thumbState.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumb.value[bar.value.offset] / 2\n      const thumbPositionPercentage =\n        ((offset - thumbHalf) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      originalOnSelectStart = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = thumbState.value[bar.value.axis]\n      if (!prevPage) return\n\n      const offset =\n        (instance.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n      const thumbPositionPercentage =\n        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      thumbState.value[bar.value.axis] = 0\n      document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n      restoreOnselectstart()\n      if (cursorLeave) visible.value = false\n    }\n\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== originalOnSelectStart)\n        document.onselectstart = originalOnSelectStart\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;AAkCA,MAAM,iBAAiB;AACvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,YAAY,OAAO;AACzB,QAAI,CAAC;AACH,iBAAW,gBAAgB;AAE7B,UAAM,WAAW;AACjB,UAAM,QAAQ;AAEd,UAAM,aAAa,IAAI;AACvB,UAAM,UAAU,IAAI;AAEpB,QAAI,aAAa;AACjB,QAAI,cAAc;AAClB,QAAI,wBAEO,WAAW,SAAS,gBAAgB;AAE/C,UAAM,MAAM,SACV,MAAM,QAAQ,MAAM,WAAW,aAAa;AAG9C,UAAM,aAAa,SAAS,MAC1B,iBAAiB;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,KAAK,IAAI;AAAA;AAIb,UAAM,cAAc,SAClB,MAIE,SAAS,MAAO,IAAI,MAAM,WAAW,IACrC,UAAU,YAAa,IAAI,MAAM,cACjC,MAAM,QACN,MAAM,MAAO,IAAI,MAAM;AAG3B,UAAM,oBAAoB,CAAC,MAAkB;AAE3C;AACA,uBAAiB;AAA2B;AAE5C;AACA;AAEA,iBAAW,EAAE;AACb;AAAS;AACT;AAE8D;AAGhE;AACE,UAAI,iBAAiB;AAA0C;AAE/D;AAIA,YAAM,kBAAkB;AACxB,YAAM;AAIN,sCAAgC,UAC7B,oCACW,YAAY,UAAU,cAClC;AAAA;AAGJ;AACE;AACA;AACA;AACA,eAAS,iBAAiB,WAAW;AACrC;AACA;AAA+B;AAGjC;AACE,UAAI;AAAiC;AACrC;AAA0B;AAE1B;AACA;AAAe;AAEf;AAIA,YAAM,qDAAqD;AAC3D,YAAM,0BACF,UAAS;AAEb,sCAAgC,UAC7B,gDACuB,wBACxB;AAAA;AAGJ;AACE;AACA;AACA;AACA,eAAS,oBAAoB,WAAW;AACxC;AACA;AAAiB;AAAgB;AAGnC;AACE;AACA;AAAwB;AAG1B;AACE;AACA;AAAgB;AAGlB;AACE;AACA;AAAwC;AAG1C;AACE,UAAI;AACF;AAAyB;AAG7B;AAKA,qBACE,MAAM,WAAW,qBACjB;AAIF;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;AA/KI;AAZN,qBAEM;AAAU;AACR,QACL;AAAW;;AAEZ;AACa;AACN,UACJ;AAAK,UACL;AAAS;;;AATM;;;;;;;;;;;"}
+{"version":3,"file":"thumb2.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener, isClient } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { useNamespace } from '@element-plus/hooks'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: thumbProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    const ns = useNamespace('scrollbar')\n\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const thumbState = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let originalOnSelectStart:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const offsetRatio = computed(\n      () =>\n        // offsetRatioX = original width of thumb / current width of thumb / ratioX\n        // offsetRatioY = original height of thumb / current height of thumb / ratioY\n        // instance height = wrap height - GAP\n        instance.value![bar.value.offset] ** 2 /\n        scrollbar.wrapElement![bar.value.scrollSize] /\n        props.ratio /\n        thumb.value![bar.value.offset]\n    )\n\n    const clickThumbHandler = (e: MouseEvent) => {\n      // prevent click event of middle and right button\n      e.stopPropagation()\n      if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n      window.getSelection()?.removeAllRanges()\n      startDrag(e)\n\n      const el = e.currentTarget as HTMLDivElement\n      if (!el) return\n      thumbState.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumb.value[bar.value.offset] / 2\n      const thumbPositionPercentage =\n        ((offset - thumbHalf) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      originalOnSelectStart = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = thumbState.value[bar.value.axis]\n      if (!prevPage) return\n\n      const offset =\n        (instance.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n      const thumbPositionPercentage =\n        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      thumbState.value[bar.value.axis] = 0\n      document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n      restoreOnselectstart()\n      if (cursorLeave) visible.value = false\n    }\n\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== originalOnSelectStart)\n        document.onselectstart = originalOnSelectStart\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      ns,\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAmCA,MAAM,iBAAiB;AACvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,YAAY,OAAO;AACzB,UAAM,KAAK,aAAa;AAExB,QAAI,CAAC;AACH,iBAAW,gBAAgB;AAE7B,UAAM,WAAW;AACjB,UAAM,QAAQ;AAEd,UAAM,aAAa,IAAI;AACvB,UAAM,UAAU,IAAI;AAEpB,QAAI,aAAa;AACjB,QAAI,cAAc;AAClB,QAAI,wBAEO,WAAW,SAAS,gBAAgB;AAE/C,UAAM,MAAM,SACV,MAAM,QAAQ,MAAM,WAAW,aAAa;AAG9C,UAAM,aAAa,SAAS,MAC1B,iBAAiB;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,KAAK,IAAI;AAAA;AAIb,UAAM,cAAc,SAClB,MAIE,SAAS,MAAO,IAAI,MAAM,WAAW,IACrC,UAAU,YAAa,IAAI,MAAM,cACjC,MAAM,QACN,MAAM,MAAO,IAAI,MAAM;AAG3B,UAAM,oBAAoB,CAAC,MAAkB;AAE3C;AACA,uBAAiB;AAA2B;AAE5C;AACA;AAEA,iBAAW,EAAE;AACb;AAAS;AACT;AAE8D;AAGhE;AACE,UAAI,iBAAiB;AAA0C;AAE/D;AAIA,YAAM,kBAAkB;AACxB,YAAM;AAIN,sCAAgC,UAC7B,oCACW,YAAY,UAAU,cAClC;AAAA;AAGJ;AACE;AACA;AACA;AACA,eAAS,iBAAiB,WAAW;AACrC;AACA;AAA+B;AAGjC;AACE,UAAI;AAAiC;AACrC;AAA0B;AAE1B;AACA;AAAe;AAEf;AAIA,YAAM,qDAAqD;AAC3D,YAAM,0BACF,UAAS;AAEb,sCAAgC,UAC7B,gDACuB,wBACxB;AAAA;AAGJ;AACE;AACA;AACA;AACA,eAAS,oBAAoB,WAAW;AACxC;AACA;AAAiB;AAAgB;AAGnC;AACE;AACA;AAAwB;AAG1B;AACE;AACA;AAAgB;AAGlB;AACE;AACA;AAAwC;AAG1C;AACE,UAAI;AACF;AAAyB;AAG7B;AAKA,qBACE,MAAM,WAAW,qBACjB;AAIF;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;SAhMe;AAAI;;;AACrB,qBAEM;AAAU;AACR,QACL;AAAW;;AAEZ;AACa;AACL,UACL;AAAO,UACP,sBAAS;AAAA;;;AATM;;;;;;;;;;;"}

package/es/components/skeleton/index.d.ts

@@ -5,6 +5,17 @@ export declare const ElSkeleton: import("../../utils/types").SFCWithInstall<impo
     readonly loading: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly throttle: import("../../utils/props").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     uiLoading: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly animated: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
@@ -21,7 +32,19 @@ export declare const ElSkeleton: import("../../utils/types").SFCWithInstall<impo
 }>> & {
     SkeletonItem: import("vue").DefineComponent<{
         readonly variant: import("../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;
-    }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    }, {
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         readonly variant: import("../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;
     }>>, {
         variant: import("../../utils/props").BuildPropType<StringConstructor, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;
@@ -30,7 +53,19 @@ export declare const ElSkeleton: import("../../utils/types").SFCWithInstall<impo
 export default ElSkeleton;
 export declare const ElSkeletonItem: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
     readonly variant: import("../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly variant: import("../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;
 }>>, {
     variant: import("../../utils/props").BuildPropType<StringConstructor, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;

package/es/components/skeleton/src/skeleton-item.vue.d.ts

@@ -1,6 +1,18 @@
 declare const _default: import("vue").DefineComponent<{
     readonly variant: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly variant: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;
 }>>, {
     variant: import("../../../utils/props").BuildPropType<StringConstructor, "text" | "button" | "circle" | "caption" | "h1" | "h3" | "p" | "image" | "rect", unknown>;

package/es/components/skeleton/src/skeleton-item2.mjs

@@ -1,19 +1,27 @@
 import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode } from 'vue';
+import '../../../hooks/index.mjs';
 import ImgPlaceholder from './image-placeholder.mjs';
 import { skeletonItemProps } from './skeleton-item.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElSkeletonItem",
   components: {
     ImgPlaceholder
   },
-  props: skeletonItemProps
+  props: skeletonItemProps,
+  setup() {
+    const ns = useNamespace("skeleton");
+    return {
+      ns
+    };
+  }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_img_placeholder = resolveComponent("img-placeholder");
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["el-skeleton__item", `el-skeleton__${_ctx.variant}`])
+    class: normalizeClass([_ctx.ns.e("item"), _ctx.ns.e(_ctx.variant)])
   }, [
     _ctx.variant === "image" ? (openBlock(), createBlock(_component_img_placeholder, { key: 0 })) : createCommentVNode("v-if", true)
   ], 2);

package/es/components/skeleton/src/skeleton-item2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-item2.mjs","sources":["../../../../../../packages/components/skeleton/src/skeleton-item.vue"],"sourcesContent":["<template>\n  <div :class=\"['el-skeleton__item', `el-skeleton__${variant}`]\">\n    <img-placeholder v-if=\"variant === 'image'\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport ImgPlaceholder from './image-placeholder.vue'\nimport { skeletonItemProps } from './skeleton-item'\n\nexport default defineComponent({\n  name: 'ElSkeletonItem',\n  components: {\n    ImgPlaceholder,\n  },\n  props: skeletonItemProps,\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;AAWA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA;;;SAfIA;AAAA;KACc;AAAA;;;;;;;"}
+{"version":3,"file":"skeleton-item2.mjs","sources":["../../../../../../packages/components/skeleton/src/skeleton-item.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.e('item'), ns.e(variant)]\">\n    <img-placeholder v-if=\"variant === 'image'\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport ImgPlaceholder from './image-placeholder.vue'\nimport { skeletonItemProps } from './skeleton-item'\n\nexport default defineComponent({\n  name: 'ElSkeletonItem',\n  components: {\n    ImgPlaceholder,\n  },\n  props: skeletonItemProps,\n  setup() {\n    const ns = useNamespace('skeleton')\n    return {\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;AAYA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,QAAQ;AACN,UAAM,KAAK,aAAa;AACxB,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;SApBOA,gCAAO,OAAU;AAAA;KACH;AAAA;;;;;;;"}

package/es/components/skeleton/src/skeleton.vue.d.ts

@@ -5,6 +5,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly loading: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly throttle: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     uiLoading: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly animated: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;

package/es/components/skeleton/src/skeleton2.mjs

@@ -1,8 +1,9 @@
-import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, mergeProps, Fragment, renderList, renderSlot, createVNode, createBlock, normalizeClass, createCommentVNode, normalizeProps } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, mergeProps, Fragment, renderList, renderSlot, createVNode, normalizeClass, createBlock, createCommentVNode, normalizeProps } from 'vue';
 import '../../../hooks/index.mjs';
 import SkeletonItem from './skeleton-item2.mjs';
 import { skeletonProps } from './skeleton.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { useThrottleRender } from '../../../hooks/use-throttle-render/index.mjs';
 
 const _sfc_main = defineComponent({
@@ -12,11 +13,13 @@ const _sfc_main = defineComponent({
   },
   props: skeletonProps,
   setup(props) {
+    const ns = useNamespace("skeleton");
     const innerLoading = computed(() => {
       return props.loading;
     });
     const uiLoading = useThrottleRender(innerLoading, props.throttle);
     return {
+      ns,
       uiLoading
     };
   }
@@ -25,22 +28,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_skeleton_item = resolveComponent("el-skeleton-item");
   return _ctx.uiLoading ? (openBlock(), createElementBlock("div", mergeProps({
     key: 0,
-    class: ["el-skeleton", _ctx.animated ? "is-animated" : ""]
+    class: [_ctx.ns.b(), _ctx.ns.is("animated", _ctx.animated)]
   }, _ctx.$attrs), [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.count, (i) => {
       return openBlock(), createElementBlock(Fragment, { key: i }, [
         _ctx.loading ? renderSlot(_ctx.$slots, "template", { key: i }, () => [
           createVNode(_component_el_skeleton_item, {
-            class: "is-first",
+            class: normalizeClass(_ctx.ns.is("first")),
             variant: "p"
-          }),
+          }, null, 8, ["class"]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (item) => {
             return openBlock(), createBlock(_component_el_skeleton_item, {
               key: item,
-              class: normalizeClass({
-                "el-skeleton__paragraph": true,
-                "is-last": item === _ctx.rows && _ctx.rows > 1
-              }),
+              class: normalizeClass([
+                _ctx.ns.e("paragraph"),
+                _ctx.ns.is("last", item === _ctx.rows && _ctx.rows > 1)
+              ]),
               variant: "p"
             }, null, 8, ["class"]);
           }), 128))

package/es/components/skeleton/src/skeleton2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton2.mjs","sources":["../../../../../../packages/components/skeleton/src/skeleton.vue"],"sourcesContent":["<template>\n  <template v-if=\"uiLoading\">\n    <div\n      :class=\"['el-skeleton', animated ? 'is-animated' : '']\"\n      v-bind=\"$attrs\"\n    >\n      <template v-for=\"i in count\" :key=\"i\">\n        <slot v-if=\"loading\" :key=\"i\" name=\"template\">\n          <el-skeleton-item class=\"is-first\" variant=\"p\" />\n          <el-skeleton-item\n            v-for=\"item in rows\"\n            :key=\"item\"\n            :class=\"{\n              'el-skeleton__paragraph': true,\n              'is-last': item === rows && rows > 1,\n            }\"\n            variant=\"p\"\n          />\n        </slot>\n      </template>\n    </div>\n  </template>\n  <template v-else>\n    <slot v-bind=\"$attrs\"></slot>\n  </template>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { useThrottleRender } from '@element-plus/hooks'\nimport SkeletonItem from './skeleton-item.vue'\nimport { skeletonProps } from './skeleton'\n\nexport default defineComponent({\n  name: 'ElSkeleton',\n  components: {\n    [SkeletonItem.name]: SkeletonItem,\n  },\n  props: skeletonProps,\n  setup(props) {\n    const innerLoading = computed(() => {\n      return props.loading\n    })\n\n    const uiLoading = useThrottleRender(innerLoading, props.throttle)\n\n    return {\n      uiLoading,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_createBlock"],"mappings":";;;;;;;AAiCA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,KACT,aAAa,OAAO;AAAA;AAAA,EAEvB,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,eAAe,SAAS,MAAM;AAClC,aAAO,MAAM;AAAA;AAGf,UAAM,YAAY,kBAAkB,cAAc,MAAM;AAExD,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;IA5CC,KAAK;AAAA,WACE,gBAAM;AAAA;oEAEsB;aACtBA,aAAOC;AAAA,aAAnB,qBACE,KAAiD;AAAA,sBAAzB,6BAAU;AAAA,YAAC,OAAO;AAAA;;+CASxCC;mBANMF,aAAIG;AAAA,cACT,KAAK;AAAA;0CAAoF;AAAA;;;;;;;;KAWlG;;;;;;"}
+{"version":3,"file":"skeleton2.mjs","sources":["../../../../../../packages/components/skeleton/src/skeleton.vue"],"sourcesContent":["<template>\n  <template v-if=\"uiLoading\">\n    <div :class=\"[ns.b(), ns.is('animated', animated)]\" v-bind=\"$attrs\">\n      <template v-for=\"i in count\" :key=\"i\">\n        <slot v-if=\"loading\" :key=\"i\" name=\"template\">\n          <el-skeleton-item :class=\"ns.is('first')\" variant=\"p\" />\n          <el-skeleton-item\n            v-for=\"item in rows\"\n            :key=\"item\"\n            :class=\"[\n              ns.e('paragraph'),\n              ns.is('last', item === rows && rows > 1),\n            ]\"\n            variant=\"p\"\n          />\n        </slot>\n      </template>\n    </div>\n  </template>\n  <template v-else>\n    <slot v-bind=\"$attrs\"></slot>\n  </template>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { useNamespace, useThrottleRender } from '@element-plus/hooks'\nimport SkeletonItem from './skeleton-item.vue'\nimport { skeletonProps } from './skeleton'\n\nexport default defineComponent({\n  name: 'ElSkeleton',\n  components: {\n    [SkeletonItem.name]: SkeletonItem,\n  },\n  props: skeletonProps,\n  setup(props) {\n    const ns = useNamespace('skeleton')\n    const innerLoading = computed(() => {\n      return props.loading\n    })\n\n    const uiLoading = useThrottleRender(innerLoading, props.throttle)\n\n    return {\n      ns,\n      uiLoading,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_Fragment","_createBlock"],"mappings":";;;;;;;;AA8BA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,KACT,aAAa,OAAO;AAAA;AAAA,EAEvB,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,KAAK,aAAa;AACxB,UAAM,eAAe,SAAS,MAAM;AAClC,aAAO,MAAM;AAAA;AAGf,UAAM,YAAY,kBAAkB,cAAc,MAAM;AAExD,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;;;;IA5CI,KAAK;AAAA,WAAiD,MAAM;AAAA;oEAC5B;aACtBA,aAAOC;AAAA,aAAnB,qBACE,KAAwD;AAAA,sBAAhC,6BAAO;AAAA,YAAW,OAAOC,eAAI;AAAA;sBACrD;AAAA,+CAQEC;mBANMH,aAAII;AAAA,cACT,KAAK;AAAA,cAAqB,OAACF;AAAA,gBAA6B,QAAG,EAAE;AAAA;;;;;;;;KAWtE;;;;;;"}

package/es/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.20220127";
+export declare const version = "0.0.20220131";

package/es/version.mjs

@@ -1,4 +1,4 @@
-const version = "0.0.20220127";
+const version = "0.0.20220131";
 
 export { version };
 //# sourceMappingURL=version.mjs.map

package/es/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20220127'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}
+{"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20220131'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}

package/lib/components/avatar/index.d.ts

@@ -9,7 +9,7 @@ export declare const ElAvatar: import("../../utils/types").SFCWithInstall<import
 }, {
     hasLoadError: import("vue").Ref<boolean>;
     avatarClass: import("vue").ComputedRef<string[]>;
-    sizeStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+    sizeStyle: import("vue").ComputedRef<import("vue").CSSProperties | undefined>;
     fitStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
     handleError: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/lib/components/avatar/src/avatar.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     hasLoadError: import("vue").Ref<boolean>;
     avatarClass: import("vue").ComputedRef<string[]>;
-    sizeStyle: import("vue").ComputedRef<CSSProperties>;
+    sizeStyle: import("vue").ComputedRef<CSSProperties | undefined>;
     fitStyle: import("vue").ComputedRef<CSSProperties>;
     handleError: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/lib/components/avatar/src/avatar2.js

@@ -34,9 +34,9 @@ const _sfc_main = vue.defineComponent({
     });
     const sizeStyle = vue.computed(() => {
       const { size } = props;
-      return {
-        "--el-avatar-size": util.isNumber(size) ? util.addUnit(size) : void 0
-      };
+      return util.isNumber(size) ? {
+        "--el-avatar-size": util.addUnit(size)
+      } : void 0;
     });
     const fitStyle = vue.computed(() => ({
       objectFit: props.fit

package/lib/components/avatar/src/avatar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar2.js","sources":["../../../../../../packages/components/avatar/src/avatar.vue"],"sourcesContent":["<template>\n  <span :class=\"avatarClass\" :style=\"sizeStyle\">\n    <img\n      v-if=\"(src || srcSet) && !hasLoadError\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :srcset=\"srcSet\"\n      :style=\"fitStyle\"\n      @error=\"handleError\"\n    />\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <slot v-else></slot>\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { addUnit, isNumber, isString } from '@element-plus/utils/util'\nimport { avatarEmits, avatarProps } from './avatar'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAvatar',\n  components: {\n    ElIcon,\n  },\n  props: avatarProps,\n  emits: avatarEmits,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('avatar')\n\n    const hasLoadError = ref(false)\n\n    const avatarClass = computed(() => {\n      const { size, icon, shape } = props\n      const classList = [ns.b()]\n      if (isString(size)) classList.push(ns.m(size))\n      if (icon) classList.push(ns.m('icon'))\n      if (shape) classList.push(ns.m(shape))\n      return classList\n    })\n\n    const sizeStyle = computed(() => {\n      const { size } = props\n      return {\n        '--el-avatar-size': isNumber(size) ? addUnit(size) : undefined,\n      } as CSSProperties\n    })\n\n    const fitStyle = computed<CSSProperties>(() => ({\n      objectFit: props.fit,\n    }))\n\n    // need reset hasLoadError to false if src changed\n    watch(\n      () => props.src,\n      () => (hasLoadError.value = false)\n    )\n\n    function handleError(e: Event) {\n      hasLoadError.value = true\n      emit('error', e)\n    }\n\n    return {\n      hasLoadError,\n      avatarClass,\n      sizeStyle,\n      fitStyle,\n      handleError,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","avatarProps","avatarEmits","useNamespace","ref","computed","isString","isNumber","addUnit","_openBlock","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAKC,qBAAa;AAExB,UAAM,eAAeC,QAAI;AAEzB,UAAM,cAAcC,aAAS,MAAM;AACjC,YAAM,EAAE,MAAM,MAAM,UAAU;AAC9B,YAAM,YAAY,CAAC,GAAG;AACtB,UAAIC,gBAAS;AAAO,kBAAU,KAAK,GAAG,EAAE;AACxC,UAAI;AAAM,kBAAU,KAAK,GAAG,EAAE;AAC9B,UAAI;AAAO,kBAAU,KAAK,GAAG,EAAE;AAC/B,aAAO;AAAA;AAGT,UAAM,YAAYD,aAAS,MAAM;AAC/B,YAAM,EAAE,SAAS;AACjB,aAAO;AAAA,QACL,oBAAoBE,cAAS,QAAQC,aAAQ,QAAQ;AAAA;AAAA;AAIzD,UAAM,WAAWH,aAAwB;AAAO,MAC9C,WAAW,MAAM;AAAA;AAInB,cACE,MAAM,MAAM,KACZ,MAAO,aAAa,QAAQ;AAG9B,yBAAqB,GAAU;AAC7B,mBAAa,QAAQ;AACrB,WAAK,SAAS;AAAA;AAGhB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;SA1EQI,wCAAa;AAAA,IAAG,OAAKC,mBAAE;AAAA;;sBACjC;MAEG,KAAK;AAAA,MACL,KAAK;AAAA,MACL,UAAQ;AAAA,MACR,QAAK;AAAA,MACL,OAAKC;AAAA;OAEY,UAAI,6DACE;AAAA,2BAAxB;AAAA;;;;;;;;;;"}
+{"version":3,"file":"avatar2.js","sources":["../../../../../../packages/components/avatar/src/avatar.vue"],"sourcesContent":["<template>\n  <span :class=\"avatarClass\" :style=\"sizeStyle\">\n    <img\n      v-if=\"(src || srcSet) && !hasLoadError\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :srcset=\"srcSet\"\n      :style=\"fitStyle\"\n      @error=\"handleError\"\n    />\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <slot v-else></slot>\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { addUnit, isNumber, isString } from '@element-plus/utils/util'\nimport { avatarEmits, avatarProps } from './avatar'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAvatar',\n  components: {\n    ElIcon,\n  },\n  props: avatarProps,\n  emits: avatarEmits,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('avatar')\n\n    const hasLoadError = ref(false)\n\n    const avatarClass = computed(() => {\n      const { size, icon, shape } = props\n      const classList = [ns.b()]\n      if (isString(size)) classList.push(ns.m(size))\n      if (icon) classList.push(ns.m('icon'))\n      if (shape) classList.push(ns.m(shape))\n      return classList\n    })\n\n    const sizeStyle = computed(() => {\n      const { size } = props\n      return isNumber(size)\n        ? ({\n            '--el-avatar-size': addUnit(size),\n          } as CSSProperties)\n        : undefined\n    })\n\n    const fitStyle = computed<CSSProperties>(() => ({\n      objectFit: props.fit,\n    }))\n\n    // need reset hasLoadError to false if src changed\n    watch(\n      () => props.src,\n      () => (hasLoadError.value = false)\n    )\n\n    function handleError(e: Event) {\n      hasLoadError.value = true\n      emit('error', e)\n    }\n\n    return {\n      hasLoadError,\n      avatarClass,\n      sizeStyle,\n      fitStyle,\n      handleError,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","avatarProps","avatarEmits","useNamespace","ref","computed","isString","isNumber","addUnit","_openBlock","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAKC,qBAAa;AAExB,UAAM,eAAeC,QAAI;AAEzB,UAAM,cAAcC,aAAS,MAAM;AACjC,YAAM,EAAE,MAAM,MAAM,UAAU;AAC9B,YAAM,YAAY,CAAC,GAAG;AACtB,UAAIC,gBAAS;AAAO,kBAAU,KAAK,GAAG,EAAE;AACxC,UAAI;AAAM,kBAAU,KAAK,GAAG,EAAE;AAC9B,UAAI;AAAO,kBAAU,KAAK,GAAG,EAAE;AAC/B,aAAO;AAAA;AAGT,UAAM,YAAYD,aAAS,MAAM;AAC/B,YAAM,EAAE,SAAS;AACjB,aAAOE,cAAS,QACX;AAAA,QACC,oBAAoBC,aAAQ;AAAA,UAE9B;AAAA;AAGN,UAAM,WAAWH,aAAwB;AAAO,MAC9C,WAAW,MAAM;AAAA;AAInB,cACE,MAAM,MAAM,KACZ,MAAO,aAAa,QAAQ;AAG9B,yBAAqB,GAAU;AAC7B,mBAAa,QAAQ;AACrB,WAAK,SAAS;AAAA;AAGhB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;SA5EQI,wCAAa;AAAA,IAAG,OAAKC,mBAAE;AAAA;;sBACjC;MAEG,KAAK;AAAA,MACL,KAAK;AAAA,MACL,UAAQ;AAAA,MACR,QAAK;AAAA,MACL,OAAKC;AAAA;OAEY,UAAI,6DACE;AAAA,2BAAxB;AAAA;;;;;;;;;;"}

package/lib/components/cascader/index.d.ts

@@ -1501,6 +1501,17 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
                 scrollLeft: number;
             }) => any) | undefined;
         }, {
+            ns: {
+                namespace: import("vue").ComputedRef<string>;
+                b: (blockSuffix?: string) => string;
+                e: (element?: string | undefined) => string;
+                m: (modifier?: string | undefined) => string;
+                be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+                em: (element?: string | undefined, modifier?: string | undefined) => string;
+                bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+                bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+                is: (name: string, state?: boolean) => string;
+            };
             scrollbar$: import("vue").Ref<HTMLDivElement | undefined>;
             wrap$: import("vue").Ref<HTMLDivElement | undefined>;
             resize$: import("vue").Ref<HTMLElement | undefined>;
@@ -1571,6 +1582,17 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
             scrollLeft: number;
         }) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
         scrollbar$: import("vue").Ref<HTMLDivElement | undefined>;
         wrap$: import("vue").Ref<HTMLDivElement | undefined>;
         resize$: import("vue").Ref<HTMLElement | undefined>;
@@ -3193,6 +3215,17 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
                 scrollLeft: number;
             }) => any) | undefined;
         }, {
+            ns: {
+                namespace: import("vue").ComputedRef<string>;
+                b: (blockSuffix?: string) => string;
+                e: (element?: string | undefined) => string;
+                m: (modifier?: string | undefined) => string;
+                be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+                em: (element?: string | undefined, modifier?: string | undefined) => string;
+                bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+                bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+                is: (name: string, state?: boolean) => string;
+            };
             scrollbar$: import("vue").Ref<HTMLDivElement | undefined>;
             wrap$: import("vue").Ref<HTMLDivElement | undefined>;
             resize$: import("vue").Ref<HTMLElement | undefined>;
@@ -3263,6 +3296,17 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
             scrollLeft: number;
         }) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
         scrollbar$: import("vue").Ref<HTMLDivElement | undefined>;
         wrap$: import("vue").Ref<HTMLDivElement | undefined>;
         resize$: import("vue").Ref<HTMLElement | undefined>;

package/lib/components/cascader/src/index.js

@@ -515,7 +515,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ref: "input",
           modelValue: _ctx.inputValue,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.inputValue = $event),
-          modelModifiers: { trim: true },
           placeholder: _ctx.inputPlaceholder,
           readonly: _ctx.readonly,
           disabled: _ctx.isDisabled,
@@ -586,12 +585,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             onCompositionupdate: _cache[9] || (_cache[9] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
             onCompositionend: _cache[10] || (_cache[10] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args))
           }, null, 40, _hoisted_2)), [
-            [
-              vue.vModelText,
-              _ctx.searchInputValue,
-              void 0,
-              { trim: true }
-            ]
+            [vue.vModelText, _ctx.searchInputValue]
           ]) : vue.createCommentVNode("v-if", true)
         ], 512)) : vue.createCommentVNode("v-if", true)
       ], 38)), [