element-plus 1.2.0-beta.1 → 1.2.0-beta.2

package/es/components/virtual-list/src/components/fixed-size-list.d.ts

@@ -7,8 +7,9 @@ declare const FixedSizeList: import("vue").DefineComponent<{
     readonly innerElement: import("../../../../utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<import("../../../../utils/types").StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly cache: import("../../../../utils/props").BuildPropReturn<NumberConstructor, 2, false, never, never>;
     readonly estimatedItemSize: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, false, never, never>;
     readonly layout: import("../../../../utils/props").BuildPropReturn<StringConstructor, "vertical", false, "horizontal" | "vertical", never>;
@@ -16,7 +17,7 @@ declare const FixedSizeList: import("vue").DefineComponent<{
     readonly total: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, true, never, never>;
     readonly itemSize: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<number | import("../types").ItemSize>, never, true, never, never>;
 }, {
-    clientSize: import("vue").ComputedRef<string | number>;
+    clientSize: import("vue").ComputedRef<string | number | undefined>;
     estimatedTotalSize: import("vue").ComputedRef<number>;
     windowStyle: import("vue").ComputedRef<(string | import("vue").CSSProperties | import("../../../../utils/types").StyleValue[] | {
         position: string;
@@ -39,6 +40,7 @@ declare const FixedSizeList: import("vue").DefineComponent<{
         scrollOffset: number;
         updateRequested: boolean;
         isScrollbarDragging: boolean;
+        scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     }>;
     getItemStyle: (idx: number) => import("vue").CSSProperties;
     onScroll: (e: Event) => void;
@@ -58,6 +60,7 @@ declare const FixedSizeList: import("vue").DefineComponent<{
     readonly useIsScrolling?: unknown;
     readonly width?: unknown;
     readonly perfMode?: unknown;
+    readonly scrollbarAlwaysOn?: unknown;
     readonly cache?: unknown;
     readonly estimatedItemSize?: unknown;
     readonly layout?: unknown;
@@ -66,12 +69,12 @@ declare const FixedSizeList: import("vue").DefineComponent<{
     readonly itemSize?: unknown;
 } & {
     height: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     layout: import("../../../../utils/props").BuildPropType<StringConstructor, "horizontal" | "vertical", never>;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
     total: number;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
@@ -80,17 +83,20 @@ declare const FixedSizeList: import("vue").DefineComponent<{
     initScrollOffset: number;
     itemSize: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<number | import("../types").ItemSize>, never, never>;
 } & {
+    width?: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     style?: import("../../../../utils/types").StyleValue | undefined;
     estimatedItemSize?: number | undefined;
 }> & {
     onScroll?: ((...args: any[]) => any) | undefined;
     "onItem-rendered"?: ((...args: any[]) => any) | undefined;
 }, {
+    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     layout: import("../../../../utils/props").BuildPropType<StringConstructor, "horizontal" | "vertical", never>;
     style: import("../../../../utils/types").StyleValue;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;

package/es/components/virtual-list/src/components/scrollbar.mjs

@@ -31,8 +31,7 @@ const ScrollBar = defineComponent({
       [ScrollbarDirKey[props.layout]]: "2px",
       right: "2px",
       bottom: "2px",
-      borderRadius: "4px",
-      ...props.visible ? {} : { display: "none" }
+      borderRadius: "4px"
     }));
     const thumbSize = computed(() => {
       const ratio = props.ratio;

package/es/components/virtual-list/src/components/scrollbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.mjs","sources":["../../../../../../../packages/components/virtual-list/src/components/scrollbar.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  ref,\n  reactive,\n  onMounted,\n  onBeforeUnmount,\n  watch,\n  h,\n  withModifiers,\n  unref,\n} from 'vue'\nimport { BAR_MAP } from '@element-plus/components/scrollbar'\nimport { on, off } from '@element-plus/utils/dom'\nimport { rAF, cAF } from '@element-plus/utils/raf'\nimport isServer from '@element-plus/utils/isServer'\n\nimport { SCROLLBAR_MIN_SIZE, HORIZONTAL, ScrollbarDirKey } from '../defaults'\nimport { virtualizedScrollbarProps } from '../props'\nimport { renderThumbStyle } from '../utils'\n\nimport type { CSSProperties } from 'vue'\n\nconst ScrollBar = defineComponent({\n  name: 'ElVirtualScrollBar',\n  props: virtualizedScrollbarProps,\n  emits: ['scroll', 'start-move', 'stop-move'],\n  setup(props, { emit }) {\n    const GAP = 4 // top 2 + bottom 2 | left 2 + right 2\n\n    // DOM refs\n    const trackRef = ref<HTMLElement>()\n    const thumbRef = ref<HTMLElement>()\n\n    // local variables\n    let frameHandle: null | number = null\n    let onselectstartStore: null | typeof document.onselectstart = null\n\n    // data\n    const state = reactive({\n      isDragging: false,\n      traveled: 0,\n    })\n\n    const bar = computed(() => BAR_MAP[props.layout])\n\n    const trackSize = computed(() => props.clientSize! - GAP)\n\n    const trackStyle = computed<CSSProperties>(() => ({\n      position: 'absolute',\n      width: HORIZONTAL === props.layout ? `${trackSize.value}px` : '6px',\n      height: HORIZONTAL === props.layout ? '6px' : `${trackSize.value}px`,\n      [ScrollbarDirKey[props.layout]]: '2px',\n      right: '2px',\n      bottom: '2px',\n      borderRadius: '4px',\n      ...(props.visible ? {} : { display: 'none' }),\n    }))\n\n    const thumbSize = computed(() => {\n      const ratio = props.ratio!\n      const clientSize = props.clientSize!\n      if (ratio >= 100) {\n        return Number.POSITIVE_INFINITY\n      }\n\n      if (ratio >= 50) {\n        return (ratio * clientSize) / 100\n      }\n\n      const SCROLLBAR_MAX_SIZE = clientSize / 3\n      return Math.floor(\n        Math.min(\n          Math.max(ratio * clientSize, SCROLLBAR_MIN_SIZE),\n          SCROLLBAR_MAX_SIZE\n        )\n      )\n    })\n\n    // const sizeRange = computed(() => props.size - thumbSize.value)\n\n    const thumbStyle = computed<CSSProperties>(() => {\n      if (!Number.isFinite(thumbSize.value)) {\n        return {\n          display: 'none',\n        }\n      }\n\n      const thumb = `${thumbSize.value}px`\n\n      const style: CSSProperties = renderThumbStyle(\n        {\n          bar: bar.value,\n          size: thumb,\n          move: state.traveled,\n        },\n        props.layout\n      )\n\n      return style\n    })\n\n    const totalSteps = computed(() =>\n      Math.floor(props.clientSize! - thumbSize.value - GAP)\n    )\n\n    const attachEvents = () => {\n      on(window, 'mousemove', onMouseMove)\n      on(window, 'mouseup', onMouseUp)\n\n      const thumbEl = unref(thumbRef)\n\n      if (!thumbEl) return\n\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n\n      on(thumbEl, 'touchmove', onMouseMove)\n      on(thumbEl, 'touchend', onMouseUp)\n    }\n\n    const detachEvents = () => {\n      off(window, 'mousemove', onMouseMove)\n      off(window, 'mouseup', onMouseUp)\n\n      document.onselectstart = onselectstartStore\n      onselectstartStore = null\n\n      const thumbEl = unref(thumbRef)\n      if (!thumbEl) return\n\n      off(thumbEl, 'touchmove', onMouseMove)\n      off(thumbEl, 'touchend', onMouseUp)\n    }\n\n    const onThumbMouseDown = (e: Event) => {\n      e.stopImmediatePropagation()\n      if (\n        (e as KeyboardEvent).ctrlKey ||\n        [1, 2].includes((e as MouseEvent).button)\n      ) {\n        return\n      }\n\n      state.isDragging = true\n      state[bar.value.axis] =\n        e.currentTarget![bar.value.offset] -\n        (e[bar.value.client] -\n          (e.currentTarget as HTMLElement).getBoundingClientRect()[\n            bar.value.direction\n          ])\n\n      emit('start-move')\n      attachEvents()\n    }\n\n    const onMouseUp = () => {\n      state.isDragging = false\n      state[bar.value.axis] = 0\n      emit('stop-move')\n      detachEvents()\n    }\n\n    const onMouseMove = (e: Event) => {\n      const { isDragging } = state\n      if (!isDragging) return\n      if (!thumbRef.value || !trackRef.value) return\n\n      const prevPage = state[bar.value.axis]\n      if (!prevPage) return\n\n      cAF(frameHandle!)\n      // using the current track's offset top/left - the current pointer's clientY/clientX\n      // to get the relative position of the pointer to the track.\n      const offset =\n        (trackRef.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n\n      // find where the thumb was clicked on.\n      const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage\n      /**\n       *  +--------------+                                   +--------------+\n       *  |              -  <--------- thumb.offsetTop       |              |\n       *  |             |+|             <--+                 |              |\n       *  |              -                 |                 |              |\n       *  |   Content    |                 |                 |              |\n       *  |              |                 |                 |              |\n       *  |              |                 |                 |              |\n       *  |              |                 |                 |              -\n       *  |              |                 +-->              |             |+|\n       *  |              |                                   |              -\n       *  +--------------+                                   +--------------+\n       */\n\n      // using the current position - prev position to\n\n      const distance = offset - thumbClickPosition\n      // get how many steps in total.\n      // gap of 2 on top, 2 on bottom, in total 4.\n      // using totalSteps ÷ totalSize getting each step's size * distance to get the new\n      // scroll offset to scrollTo\n      frameHandle = rAF(() => {\n        state.traveled = Math.max(\n          0,\n          Math.min(\n            distance,\n            totalSteps.value // 2 is the top value\n          )\n        )\n        emit('scroll', distance, totalSteps.value)\n      })\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumbRef.value![bar.value.offset] / 2\n      const distance = offset - thumbHalf\n\n      state.traveled = Math.max(0, Math.min(distance, totalSteps.value))\n      emit('scroll', distance, totalSteps.value)\n    }\n\n    const onScrollbarTouchStart = (e: Event) => e.preventDefault()\n\n    watch(\n      () => props.scrollFrom,\n      (v) => {\n        if (state.isDragging) return\n        /**\n         *  this is simply mapping the current scrollbar offset\n         *\n         *  formula 1:\n         *    v = scrollOffset / (estimatedTotalSize - clientSize)\n         *    traveled = v * (clientSize - thumbSize - GAP) --> v * totalSteps\n         *\n         *  formula 2:\n         *    traveled = (v * clientSize) / (clientSize / totalSteps) --> (v * clientSize) * (totalSteps / clientSize) --> v * totalSteps\n         */\n        state.traveled = Math.ceil(v! * totalSteps.value)\n      }\n    )\n\n    onMounted(() => {\n      if (isServer) return\n\n      on(trackRef.value!, 'touchstart', onScrollbarTouchStart)\n      on(thumbRef.value!, 'touchstart', onThumbMouseDown)\n    })\n\n    onBeforeUnmount(() => {\n      off(trackRef.value!, 'touchstart', onScrollbarTouchStart)\n      detachEvents()\n    })\n\n    return () => {\n      return h(\n        'div',\n        {\n          role: 'presentation',\n          ref: trackRef,\n          class: 'el-virtual-scrollbar',\n          style: trackStyle.value,\n          onMousedown: withModifiers(clickTrackHandler, ['stop', 'prevent']),\n        },\n        h(\n          'div',\n          {\n            ref: thumbRef,\n            class: 'el-scrollbar__thumb',\n            style: thumbStyle.value,\n            onMousedown: onThumbMouseDown,\n          },\n          []\n        )\n      )\n    }\n  },\n})\n\nexport default ScrollBar\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"scrollbar.mjs","sources":["../../../../../../../packages/components/virtual-list/src/components/scrollbar.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  ref,\n  reactive,\n  onMounted,\n  onBeforeUnmount,\n  watch,\n  h,\n  withModifiers,\n  unref,\n} from 'vue'\nimport { BAR_MAP } from '@element-plus/components/scrollbar'\nimport { on, off } from '@element-plus/utils/dom'\nimport { rAF, cAF } from '@element-plus/utils/raf'\nimport isServer from '@element-plus/utils/isServer'\n\nimport { SCROLLBAR_MIN_SIZE, HORIZONTAL, ScrollbarDirKey } from '../defaults'\nimport { virtualizedScrollbarProps } from '../props'\nimport { renderThumbStyle } from '../utils'\n\nimport type { CSSProperties } from 'vue'\n\nconst ScrollBar = defineComponent({\n  name: 'ElVirtualScrollBar',\n  props: virtualizedScrollbarProps,\n  emits: ['scroll', 'start-move', 'stop-move'],\n  setup(props, { emit }) {\n    const GAP = 4 // top 2 + bottom 2 | left 2 + right 2\n\n    // DOM refs\n    const trackRef = ref<HTMLElement>()\n    const thumbRef = ref<HTMLElement>()\n\n    // local variables\n    let frameHandle: null | number = null\n    let onselectstartStore: null | typeof document.onselectstart = null\n\n    // data\n    const state = reactive({\n      isDragging: false,\n      traveled: 0,\n    })\n\n    const bar = computed(() => BAR_MAP[props.layout])\n\n    const trackSize = computed(() => props.clientSize! - GAP)\n\n    const trackStyle = computed<CSSProperties>(() => ({\n      position: 'absolute',\n      width: HORIZONTAL === props.layout ? `${trackSize.value}px` : '6px',\n      height: HORIZONTAL === props.layout ? '6px' : `${trackSize.value}px`,\n      [ScrollbarDirKey[props.layout]]: '2px',\n      right: '2px',\n      bottom: '2px',\n      borderRadius: '4px',\n    }))\n\n    const thumbSize = computed(() => {\n      const ratio = props.ratio!\n      const clientSize = props.clientSize!\n      if (ratio >= 100) {\n        return Number.POSITIVE_INFINITY\n      }\n\n      if (ratio >= 50) {\n        return (ratio * clientSize) / 100\n      }\n\n      const SCROLLBAR_MAX_SIZE = clientSize / 3\n      return Math.floor(\n        Math.min(\n          Math.max(ratio * clientSize, SCROLLBAR_MIN_SIZE),\n          SCROLLBAR_MAX_SIZE\n        )\n      )\n    })\n\n    // const sizeRange = computed(() => props.size - thumbSize.value)\n\n    const thumbStyle = computed<CSSProperties>(() => {\n      if (!Number.isFinite(thumbSize.value)) {\n        return {\n          display: 'none',\n        }\n      }\n\n      const thumb = `${thumbSize.value}px`\n\n      const style: CSSProperties = renderThumbStyle(\n        {\n          bar: bar.value,\n          size: thumb,\n          move: state.traveled,\n        },\n        props.layout\n      )\n\n      return style\n    })\n\n    const totalSteps = computed(() =>\n      Math.floor(props.clientSize! - thumbSize.value - GAP)\n    )\n\n    const attachEvents = () => {\n      on(window, 'mousemove', onMouseMove)\n      on(window, 'mouseup', onMouseUp)\n\n      const thumbEl = unref(thumbRef)\n\n      if (!thumbEl) return\n\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n\n      on(thumbEl, 'touchmove', onMouseMove)\n      on(thumbEl, 'touchend', onMouseUp)\n    }\n\n    const detachEvents = () => {\n      off(window, 'mousemove', onMouseMove)\n      off(window, 'mouseup', onMouseUp)\n\n      document.onselectstart = onselectstartStore\n      onselectstartStore = null\n\n      const thumbEl = unref(thumbRef)\n      if (!thumbEl) return\n\n      off(thumbEl, 'touchmove', onMouseMove)\n      off(thumbEl, 'touchend', onMouseUp)\n    }\n\n    const onThumbMouseDown = (e: Event) => {\n      e.stopImmediatePropagation()\n      if (\n        (e as KeyboardEvent).ctrlKey ||\n        [1, 2].includes((e as MouseEvent).button)\n      ) {\n        return\n      }\n\n      state.isDragging = true\n      state[bar.value.axis] =\n        e.currentTarget![bar.value.offset] -\n        (e[bar.value.client] -\n          (e.currentTarget as HTMLElement).getBoundingClientRect()[\n            bar.value.direction\n          ])\n\n      emit('start-move')\n      attachEvents()\n    }\n\n    const onMouseUp = () => {\n      state.isDragging = false\n      state[bar.value.axis] = 0\n      emit('stop-move')\n      detachEvents()\n    }\n\n    const onMouseMove = (e: Event) => {\n      const { isDragging } = state\n      if (!isDragging) return\n      if (!thumbRef.value || !trackRef.value) return\n\n      const prevPage = state[bar.value.axis]\n      if (!prevPage) return\n\n      cAF(frameHandle!)\n      // using the current track's offset top/left - the current pointer's clientY/clientX\n      // to get the relative position of the pointer to the track.\n      const offset =\n        (trackRef.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n\n      // find where the thumb was clicked on.\n      const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage\n      /**\n       *  +--------------+                                   +--------------+\n       *  |              -  <--------- thumb.offsetTop       |              |\n       *  |             |+|             <--+                 |              |\n       *  |              -                 |                 |              |\n       *  |   Content    |                 |                 |              |\n       *  |              |                 |                 |              |\n       *  |              |                 |                 |              |\n       *  |              |                 |                 |              -\n       *  |              |                 +-->              |             |+|\n       *  |              |                                   |              -\n       *  +--------------+                                   +--------------+\n       */\n\n      // using the current position - prev position to\n\n      const distance = offset - thumbClickPosition\n      // get how many steps in total.\n      // gap of 2 on top, 2 on bottom, in total 4.\n      // using totalSteps ÷ totalSize getting each step's size * distance to get the new\n      // scroll offset to scrollTo\n      frameHandle = rAF(() => {\n        state.traveled = Math.max(\n          0,\n          Math.min(\n            distance,\n            totalSteps.value // 2 is the top value\n          )\n        )\n        emit('scroll', distance, totalSteps.value)\n      })\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumbRef.value![bar.value.offset] / 2\n      const distance = offset - thumbHalf\n\n      state.traveled = Math.max(0, Math.min(distance, totalSteps.value))\n      emit('scroll', distance, totalSteps.value)\n    }\n\n    const onScrollbarTouchStart = (e: Event) => e.preventDefault()\n\n    watch(\n      () => props.scrollFrom,\n      (v) => {\n        if (state.isDragging) return\n        /**\n         *  this is simply mapping the current scrollbar offset\n         *\n         *  formula 1:\n         *    v = scrollOffset / (estimatedTotalSize - clientSize)\n         *    traveled = v * (clientSize - thumbSize - GAP) --> v * totalSteps\n         *\n         *  formula 2:\n         *    traveled = (v * clientSize) / (clientSize / totalSteps) --> (v * clientSize) * (totalSteps / clientSize) --> v * totalSteps\n         */\n        state.traveled = Math.ceil(v! * totalSteps.value)\n      }\n    )\n\n    onMounted(() => {\n      if (isServer) return\n\n      on(trackRef.value!, 'touchstart', onScrollbarTouchStart)\n      on(thumbRef.value!, 'touchstart', onThumbMouseDown)\n    })\n\n    onBeforeUnmount(() => {\n      off(trackRef.value!, 'touchstart', onScrollbarTouchStart)\n      detachEvents()\n    })\n\n    return () => {\n      return h(\n        'div',\n        {\n          role: 'presentation',\n          ref: trackRef,\n          class: 'el-virtual-scrollbar',\n          style: trackStyle.value,\n          onMousedown: withModifiers(clickTrackHandler, ['stop', 'prevent']),\n        },\n        h(\n          'div',\n          {\n            ref: thumbRef,\n            class: 'el-scrollbar__thumb',\n            style: thumbStyle.value,\n            onMousedown: onThumbMouseDown,\n          },\n          []\n        )\n      )\n    }\n  },\n})\n\nexport default ScrollBar\n"],"names":[],"mappings":"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"}

package/es/components/virtual-list/src/props.d.ts

@@ -10,8 +10,9 @@ export declare const virtualizedProps: {
     readonly innerElement: import("element-plus/es/utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("element-plus/es/utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("element-plus/es/utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 };
 export declare const virtualizedListProps: {
     readonly className: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
@@ -22,8 +23,9 @@ export declare const virtualizedListProps: {
     readonly innerElement: import("element-plus/es/utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("element-plus/es/utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("element-plus/es/utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly cache: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 2, false, never, never>;
     readonly estimatedItemSize: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, never, false, never, never>;
     readonly layout: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "vertical", false, "horizontal" | "vertical", never>;
@@ -40,8 +42,9 @@ export declare const virtualizedGridProps: {
     readonly innerElement: import("element-plus/es/utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("element-plus/es/utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("element-plus/es/utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly columnCache: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 2, false, never, never>;
     readonly columnWidth: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<number | ItemSize>, never, true, never, never>;
     readonly estimatedColumnWidth: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, never, false, never, never>;

package/es/components/virtual-list/src/props.mjs

@@ -61,11 +61,15 @@ const virtualizedProps = buildProps({
   },
   width: {
     type: [Number, String],
-    required: true
+    required: false
   },
   perfMode: {
     type: Boolean,
     default: true
+  },
+  scrollbarAlwaysOn: {
+    type: Boolean,
+    default: false
   }
 });
 const virtualizedListProps = buildProps({

package/es/components/virtual-list/src/props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"props.mjs","sources":["../../../../../../packages/components/virtual-list/src/props.ts"],"sourcesContent":["import {\n  buildProp,\n  buildProps,\n  definePropType,\n  mutable,\n} from '@element-plus/utils/props'\nimport { VERTICAL } from './defaults'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { StyleValue } from '@element-plus/utils/types'\nimport type { ItemSize } from './types'\n\nconst itemSize = buildProp({\n  type: definePropType<number | ItemSize>([Number, Function]),\n  required: true,\n} as const)\n\nconst estimatedItemSize = buildProp({\n  type: Number,\n} as const)\n\nconst cache = buildProp({\n  type: Number,\n  default: 2,\n} as const)\n\nconst direction = buildProp({\n  type: String,\n  values: ['ltr', 'rtl'],\n  default: 'ltr',\n} as const)\n\nconst initScrollOffset = buildProp({\n  type: Number,\n  default: 0,\n} as const)\n\nconst total = buildProp({\n  type: Number,\n  required: true,\n} as const)\n\nconst layout = buildProp({\n  type: String,\n  values: ['horizontal', 'vertical'],\n  default: VERTICAL,\n} as const)\n\nexport const virtualizedProps = buildProps({\n  className: {\n    type: String,\n    default: '',\n  },\n\n  containerElement: {\n    type: definePropType<string | Element>([String, Object]),\n    default: 'div',\n  },\n\n  data: {\n    type: definePropType<any[]>(Array),\n    default: () => mutable([] as const),\n  },\n\n  /**\n   * @description controls the horizontal direction.\n   */\n  direction,\n\n  height: {\n    type: [String, Number],\n    required: true,\n  },\n\n  innerElement: {\n    type: [String, Object],\n    default: 'div',\n  },\n\n  style: {\n    type: definePropType<StyleValue>([Object, String, Array]),\n  },\n\n  useIsScrolling: {\n    type: Boolean,\n    default: false,\n  },\n\n  width: {\n    type: [Number, String],\n    required: true,\n  },\n\n  perfMode: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\n\nexport const virtualizedListProps = buildProps({\n  /**\n   * @description describes how many items should be pre rendered to the head\n   * and the tail of the window\n   */\n  cache,\n\n  estimatedItemSize,\n\n  /**\n   * @description controls the list's orientation\n   */\n  layout,\n\n  initScrollOffset,\n\n  /**\n   * @description describes the total number of the list.\n   */\n  total,\n\n  itemSize,\n  ...virtualizedProps,\n} as const)\n\nexport const virtualizedGridProps = buildProps({\n  columnCache: cache,\n  columnWidth: itemSize,\n  estimatedColumnWidth: estimatedItemSize,\n  estimatedRowHeight: estimatedItemSize,\n  initScrollLeft: initScrollOffset,\n  initScrollTop: initScrollOffset,\n  rowCache: cache,\n  rowHeight: itemSize,\n  totalColumn: total,\n  totalRow: total,\n  ...virtualizedProps,\n} as const)\n\nexport const virtualizedScrollbarProps = buildProps({\n  layout,\n  total,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  clientSize: {\n    type: Number,\n    required: true,\n  },\n  scrollFrom: {\n    type: Number,\n    required: true,\n  },\n  visible: Boolean,\n} as const)\n\nexport type VirtualizedProps = ExtractPropTypes<typeof virtualizedProps>\nexport type VirtualizedListProps = ExtractPropTypes<typeof virtualizedListProps>\nexport type VirtualizedGridProps = ExtractPropTypes<typeof virtualizedGridProps>\n\nexport type VirtualizedScrollbarProps = ExtractPropTypes<\n  typeof virtualizedScrollbarProps\n>\n"],"names":[],"mappings":";;;AAYA,MAAM,WAAW,UAAU;AAAA,EACzB,MAAM,eAAkC,CAAC,QAAQ;AAAA,EACjD,UAAU;AAAA;AAGZ,MAAM,oBAAoB,UAAU;AAAA,EAClC,MAAM;AAAA;AAGR,MAAM,QAAQ,UAAU;AAAA,EACtB,MAAM;AAAA,EACN,SAAS;AAAA;AAGX,MAAM,YAAY,UAAU;AAAA,EAC1B,MAAM;AAAA,EACN,QAAQ,CAAC,OAAO;AAAA,EAChB,SAAS;AAAA;AAGX,MAAM,mBAAmB,UAAU;AAAA,EACjC,MAAM;AAAA,EACN,SAAS;AAAA;AAGX,MAAM,QAAQ,UAAU;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA;AAGZ,MAAM,SAAS,UAAU;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ,CAAC,cAAc;AAAA,EACvB,SAAS;AAAA;MAGE,mBAAmB,WAAW;AAAA,EACzC,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAGX,kBAAkB;AAAA,IAChB,MAAM,eAAiC,CAAC,QAAQ;AAAA,IAChD,SAAS;AAAA;AAAA,EAGX,MAAM;AAAA,IACJ,MAAM,eAAsB;AAAA,IAC5B,SAAS,MAAM,QAAQ;AAAA;AAAA,EAMzB;AAAA,EAEA,QAAQ;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,UAAU;AAAA;AAAA,EAGZ,cAAc;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAGX,OAAO;AAAA,IACL,MAAM,eAA2B,CAAC,QAAQ,QAAQ;AAAA;AAAA,EAGpD,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAGX,OAAO;AAAA,IACL,MAAM,CAAC,QAAQ;AAAA,IACf,UAAU;AAAA;AAAA,EAGZ,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAIA,uBAAuB,WAAW;AAAA,EAK7C;AAAA,EAEA;AAAA,EAKA;AAAA,EAEA;AAAA,EAKA;AAAA,EAEA;AAAA,KACG;AAAA;MAGQ,uBAAuB,WAAW;AAAA,EAC7C,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AAAA,KACP;AAAA;MAGQ,4BAA4B,WAAW;AAAA,EAClD;AAAA,EACA;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,SAAS;AAAA;;;;"}
+{"version":3,"file":"props.mjs","sources":["../../../../../../packages/components/virtual-list/src/props.ts"],"sourcesContent":["import {\n  buildProp,\n  buildProps,\n  definePropType,\n  mutable,\n} from '@element-plus/utils/props'\nimport { VERTICAL } from './defaults'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { StyleValue } from '@element-plus/utils/types'\nimport type { ItemSize } from './types'\n\nconst itemSize = buildProp({\n  type: definePropType<number | ItemSize>([Number, Function]),\n  required: true,\n} as const)\n\nconst estimatedItemSize = buildProp({\n  type: Number,\n} as const)\n\nconst cache = buildProp({\n  type: Number,\n  default: 2,\n} as const)\n\nconst direction = buildProp({\n  type: String,\n  values: ['ltr', 'rtl'],\n  default: 'ltr',\n} as const)\n\nconst initScrollOffset = buildProp({\n  type: Number,\n  default: 0,\n} as const)\n\nconst total = buildProp({\n  type: Number,\n  required: true,\n} as const)\n\nconst layout = buildProp({\n  type: String,\n  values: ['horizontal', 'vertical'],\n  default: VERTICAL,\n} as const)\n\nexport const virtualizedProps = buildProps({\n  className: {\n    type: String,\n    default: '',\n  },\n\n  containerElement: {\n    type: definePropType<string | Element>([String, Object]),\n    default: 'div',\n  },\n\n  data: {\n    type: definePropType<any[]>(Array),\n    default: () => mutable([] as const),\n  },\n\n  /**\n   * @description controls the horizontal direction.\n   */\n  direction,\n\n  height: {\n    type: [String, Number],\n    required: true,\n  },\n\n  innerElement: {\n    type: [String, Object],\n    default: 'div',\n  },\n\n  style: {\n    type: definePropType<StyleValue>([Object, String, Array]),\n  },\n\n  useIsScrolling: {\n    type: Boolean,\n    default: false,\n  },\n\n  width: {\n    type: [Number, String],\n    required: false,\n  },\n\n  perfMode: {\n    type: Boolean,\n    default: true,\n  },\n  scrollbarAlwaysOn: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\n\nexport const virtualizedListProps = buildProps({\n  /**\n   * @description describes how many items should be pre rendered to the head\n   * and the tail of the window\n   */\n  cache,\n\n  estimatedItemSize,\n\n  /**\n   * @description controls the list's orientation\n   */\n  layout,\n\n  initScrollOffset,\n\n  /**\n   * @description describes the total number of the list.\n   */\n  total,\n\n  itemSize,\n  ...virtualizedProps,\n} as const)\n\nexport const virtualizedGridProps = buildProps({\n  columnCache: cache,\n  columnWidth: itemSize,\n  estimatedColumnWidth: estimatedItemSize,\n  estimatedRowHeight: estimatedItemSize,\n  initScrollLeft: initScrollOffset,\n  initScrollTop: initScrollOffset,\n  rowCache: cache,\n  rowHeight: itemSize,\n  totalColumn: total,\n  totalRow: total,\n  ...virtualizedProps,\n} as const)\n\nexport const virtualizedScrollbarProps = buildProps({\n  layout,\n  total,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  clientSize: {\n    type: Number,\n    required: true,\n  },\n  scrollFrom: {\n    type: Number,\n    required: true,\n  },\n  visible: Boolean,\n} as const)\n\nexport type VirtualizedProps = ExtractPropTypes<typeof virtualizedProps>\nexport type VirtualizedListProps = ExtractPropTypes<typeof virtualizedListProps>\nexport type VirtualizedGridProps = ExtractPropTypes<typeof virtualizedGridProps>\n\nexport type VirtualizedScrollbarProps = ExtractPropTypes<\n  typeof virtualizedScrollbarProps\n>\n"],"names":[],"mappings":";;;AAYA,MAAM,WAAW,UAAU;AAAA,EACzB,MAAM,eAAkC,CAAC,QAAQ;AAAA,EACjD,UAAU;AAAA;AAGZ,MAAM,oBAAoB,UAAU;AAAA,EAClC,MAAM;AAAA;AAGR,MAAM,QAAQ,UAAU;AAAA,EACtB,MAAM;AAAA,EACN,SAAS;AAAA;AAGX,MAAM,YAAY,UAAU;AAAA,EAC1B,MAAM;AAAA,EACN,QAAQ,CAAC,OAAO;AAAA,EAChB,SAAS;AAAA;AAGX,MAAM,mBAAmB,UAAU;AAAA,EACjC,MAAM;AAAA,EACN,SAAS;AAAA;AAGX,MAAM,QAAQ,UAAU;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA;AAGZ,MAAM,SAAS,UAAU;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ,CAAC,cAAc;AAAA,EACvB,SAAS;AAAA;MAGE,mBAAmB,WAAW;AAAA,EACzC,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAGX,kBAAkB;AAAA,IAChB,MAAM,eAAiC,CAAC,QAAQ;AAAA,IAChD,SAAS;AAAA;AAAA,EAGX,MAAM;AAAA,IACJ,MAAM,eAAsB;AAAA,IAC5B,SAAS,MAAM,QAAQ;AAAA;AAAA,EAMzB;AAAA,EAEA,QAAQ;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,UAAU;AAAA;AAAA,EAGZ,cAAc;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAGX,OAAO;AAAA,IACL,MAAM,eAA2B,CAAC,QAAQ,QAAQ;AAAA;AAAA,EAGpD,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAGX,OAAO;AAAA,IACL,MAAM,CAAC,QAAQ;AAAA,IACf,UAAU;AAAA;AAAA,EAGZ,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,mBAAmB;AAAA,IACjB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAIA,uBAAuB,WAAW;AAAA,EAK7C;AAAA,EAEA;AAAA,EAKA;AAAA,EAEA;AAAA,EAKA;AAAA,EAEA;AAAA,KACG;AAAA;MAGQ,uBAAuB,WAAW;AAAA,EAC7C,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AAAA,KACP;AAAA;MAGQ,4BAA4B,WAAW;AAAA,EAClD;AAAA,EACA;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,SAAS;AAAA;;;;"}

package/es/hooks/index.d.ts

@@ -15,3 +15,4 @@ export * from './use-css-var';
 export * from './use-locale';
 export * from './use-form-item';
 export * from './use-same-target';
+export * from './use-global-config';

package/es/hooks/index.mjs

@@ -15,4 +15,5 @@ export { themeVarsKey, useCssVar, useThemeVars } from './use-css-var/index.mjs';
 export { LocaleInjectionKey, localeProviderMaker, useLocale, useLocaleInject, useLocaleProps } from './use-locale/index.mjs';
 export { useFormItem, useFormItemProps } from './use-form-item/index.mjs';
 export { useSameTarget } from './use-same-target/index.mjs';
+export { useGlobalConfig } from './use-global-config/index.mjs';
 //# sourceMappingURL=index.mjs.map

package/es/hooks/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/es/hooks/use-global-config/index.d.ts

@@ -0,0 +1 @@
+export declare const useGlobalConfig: () => any;

package/es/hooks/use-global-config/index.mjs

@@ -0,0 +1,15 @@
+import { inject } from 'vue';
+import '../../tokens/index.mjs';
+import { configProviderContextKey } from '../../tokens/config-provider.mjs';
+
+const defaultConfig = {
+  button: {
+    autoInsertSpace: true
+  }
+};
+const useGlobalConfig = () => {
+  return inject(configProviderContextKey, defaultConfig);
+};
+
+export { useGlobalConfig };
+//# sourceMappingURL=index.mjs.map

package/es/hooks/use-global-config/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-global-config/index.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport type { ConfigProvdierContext } from '@element-plus/tokens'\n\nconst defaultConfig: ConfigProvdierContext = {\n  button: {\n    autoInsertSpace: true,\n  },\n}\n\nexport const useGlobalConfig = () => {\n  return inject(configProviderContextKey, defaultConfig)\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,gBAAuC;AAAA,EAC3C,QAAQ;AAAA,IACN,iBAAiB;AAAA;AAAA;MAIR,kBAAkB,MAAM;AACnC,SAAO,OAAO,0BAA0B;AAAA;;;;"}

package/es/hooks/use-locale/index.d.ts

@@ -1,9 +1,7 @@
-import type { InjectionKey, PropType, Ref } from 'vue';
+import type { InjectionKey, Ref } from 'vue';
 import type { Language } from 'element-plus/es/locale';
 export declare const useLocaleProps: {
-    locale: {
-        type: PropType<Language>;
-    };
+    locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<Language>, never, false, never, never>;
 };
 declare type Translator = (...args: any[]) => string;
 export declare type LocaleContext = {

package/es/hooks/use-locale/index.mjs

@@ -1,10 +1,11 @@
 import { getCurrentInstance, computed, provide, ref, inject } from 'vue';
 import defaultLang from '../../locale/lang/en.mjs';
+import { buildProp, definePropType } from '../../utils/props.mjs';
 
 const useLocaleProps = {
-  locale: {
-    type: Object
-  }
+  locale: buildProp({
+    type: definePropType(Object)
+  })
 };
 const LocaleInjectionKey = "ElLocaleInjection";
 let localeObjCache;

package/es/hooks/use-locale/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-locale/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, provide, ref } from 'vue'\nimport English from '@element-plus/locale/lang/en'\n\nimport type { InjectionKey, PropType, Ref } from 'vue'\nimport type { Language } from '@element-plus/locale'\n\nexport const useLocaleProps = {\n  locale: {\n    type: Object as PropType<Language>,\n  },\n}\n\ntype Translator = (...args: any[]) => string\n\nexport type LocaleContext = {\n  locale: Ref<Language>\n  lang: Ref<string>\n  t: Translator\n}\n\nexport const LocaleInjectionKey =\n  'ElLocaleInjection' as unknown as InjectionKey<LocaleContext>\n\n// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale\n// into the component as default injection value.\n// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266\nlet localeObjCache: LocaleContext\n\nfunction translate(path, option, current) {\n  const paths = path.split('.')\n  let value\n  for (let i = 0, j = paths.length; i < j; i++) {\n    const property = paths[i]\n    value = current[property]\n    if (i === j - 1) return template(value, option)\n    if (!value) return ''\n    current = value\n  }\n}\n\nexport const useLocale = () => {\n  const vm = getCurrentInstance()!\n  const props = vm.props as {\n    locale: Language\n  }\n\n  const locale = computed(() => props.locale || English)\n  const lang = computed(() => locale.value.name)\n\n  const _translator = (...args: any[]) => {\n    const [path, option] = args\n    return translate(path, option, locale.value)\n  }\n\n  const t = (...args: any[]) => {\n    return _translator(...args)\n  }\n\n  const provides = {\n    locale,\n    lang,\n    t,\n  } as LocaleContext\n\n  // this could be broken if someone tries to do following:\n\n  /**\n   * <config-provider :locale=\"lang1\">\n   *   <config-provider :locale=\"lang2\">\n   *     Something calls modal component.\n   *   </config-provider>\n   * </config-provider>\n   */\n  localeObjCache = provides\n  provide(LocaleInjectionKey, provides)\n}\n\nfunction template(str: string, option) {\n  if (!str || !option) return str\n  return str.replace(/\\{(\\w+)\\}/g, (_, key) => {\n    return option[key]\n  })\n}\n\nexport const localeProviderMaker = (locale = English) => {\n  const lang = ref(locale.name)\n  const localeRef = ref(locale)\n  return {\n    lang,\n    locale: localeRef,\n    t: (...args: any[]) => {\n      const [path, option] = args\n      return translate(path, option, localeRef.value)\n    },\n  }\n}\n\nexport const useLocaleInject = () => {\n  return inject(\n    LocaleInjectionKey,\n    localeObjCache || {\n      lang: ref(English.name),\n      locale: ref(English),\n      t: (...args) => {\n        const [path, option] = args\n        return translate(path, option, English)\n      },\n    }\n  )\n}\n"],"names":["English"],"mappings":";;;MAMa,iBAAiB;AAAA,EAC5B,QAAQ;AAAA,IACN,MAAM;AAAA;AAAA;MAYG,qBACX;AAKF,IAAI;AAEJ,mBAAmB,MAAM,QAAQ,SAAS;AACxC,QAAM,QAAQ,KAAK,MAAM;AACzB,MAAI;AACJ,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,IAAI,GAAG,KAAK;AAC5C,UAAM,WAAW,MAAM;AACvB,YAAQ,QAAQ;AAChB,QAAI,MAAM,IAAI;AAAG,aAAO,SAAS,OAAO;AACxC,QAAI,CAAC;AAAO,aAAO;AACnB,cAAU;AAAA;AAAA;MAID,YAAY,MAAM;AAC7B,QAAM,KAAK;AACX,QAAM,QAAQ,GAAG;AAIjB,QAAM,SAAS,SAAS,MAAM,MAAM,UAAUA;AAC9C,QAAM,OAAO,SAAS,MAAM,OAAO,MAAM;AAEzC,QAAM,cAAc,IAAI,SAAgB;AACtC,UAAM,CAAC,MAAM,UAAU;AACvB,WAAO,UAAU,MAAM,QAAQ,OAAO;AAAA;AAGxC,QAAM,IAAI,IAAI,SAAgB;AAC5B,WAAO,YAAY,GAAG;AAAA;AAGxB,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA;AAYF,mBAAiB;AACjB,UAAQ,oBAAoB;AAAA;AAG9B,kBAAkB,KAAa,QAAQ;AACrC,MAAI,CAAC,OAAO,CAAC;AAAQ,WAAO;AAC5B,SAAO,IAAI,QAAQ,cAAc,CAAC,GAAG,QAAQ;AAC3C,WAAO,OAAO;AAAA;AAAA;MAIL,sBAAsB,CAAC,SAASA,gBAAY;AACvD,QAAM,OAAO,IAAI,OAAO;AACxB,QAAM,YAAY,IAAI;AACtB,SAAO;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,GAAG,IAAI,SAAgB;AACrB,YAAM,CAAC,MAAM,UAAU;AACvB,aAAO,UAAU,MAAM,QAAQ,UAAU;AAAA;AAAA;AAAA;MAKlC,kBAAkB,MAAM;AACnC,SAAO,OACL,oBACA,kBAAkB;AAAA,IAChB,MAAM,IAAIA,YAAQ;AAAA,IAClB,QAAQ,IAAIA;AAAA,IACZ,GAAG,IAAI,SAAS;AACd,YAAM,CAAC,MAAM,UAAU;AACvB,aAAO,UAAU,MAAM,QAAQA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-locale/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, provide, ref } from 'vue'\nimport English from '@element-plus/locale/lang/en'\nimport { buildProp, definePropType } from '@element-plus/utils/props'\nimport type { InjectionKey, Ref } from 'vue'\nimport type { Language } from '@element-plus/locale'\n\nexport const useLocaleProps = {\n  locale: buildProp({\n    type: definePropType<Language>(Object),\n  }),\n}\n\ntype Translator = (...args: any[]) => string\n\nexport type LocaleContext = {\n  locale: Ref<Language>\n  lang: Ref<string>\n  t: Translator\n}\n\nexport const LocaleInjectionKey =\n  'ElLocaleInjection' as unknown as InjectionKey<LocaleContext>\n\n// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale\n// into the component as default injection value.\n// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266\nlet localeObjCache: LocaleContext\n\nfunction translate(path, option, current) {\n  const paths = path.split('.')\n  let value\n  for (let i = 0, j = paths.length; i < j; i++) {\n    const property = paths[i]\n    value = current[property]\n    if (i === j - 1) return template(value, option)\n    if (!value) return ''\n    current = value\n  }\n}\n\nexport const useLocale = () => {\n  const vm = getCurrentInstance()!\n  const props = vm.props as {\n    locale: Language\n  }\n\n  const locale = computed(() => props.locale || English)\n  const lang = computed(() => locale.value.name)\n\n  const _translator = (...args: any[]) => {\n    const [path, option] = args\n    return translate(path, option, locale.value)\n  }\n\n  const t = (...args: any[]) => {\n    return _translator(...args)\n  }\n\n  const provides = {\n    locale,\n    lang,\n    t,\n  } as LocaleContext\n\n  // this could be broken if someone tries to do following:\n\n  /**\n   * <config-provider :locale=\"lang1\">\n   *   <config-provider :locale=\"lang2\">\n   *     Something calls modal component.\n   *   </config-provider>\n   * </config-provider>\n   */\n  localeObjCache = provides\n  provide(LocaleInjectionKey, provides)\n}\n\nfunction template(str: string, option) {\n  if (!str || !option) return str\n  return str.replace(/\\{(\\w+)\\}/g, (_, key) => {\n    return option[key]\n  })\n}\n\nexport const localeProviderMaker = (locale = English) => {\n  const lang = ref(locale.name)\n  const localeRef = ref(locale)\n  return {\n    lang,\n    locale: localeRef,\n    t: (...args: any[]) => {\n      const [path, option] = args\n      return translate(path, option, localeRef.value)\n    },\n  }\n}\n\nexport const useLocaleInject = () => {\n  return inject(\n    LocaleInjectionKey,\n    localeObjCache || {\n      lang: ref(English.name),\n      locale: ref(English),\n      t: (...args) => {\n        const [path, option] = args\n        return translate(path, option, English)\n      },\n    }\n  )\n}\n"],"names":["English"],"mappings":";;;;MAMa,iBAAiB;AAAA,EAC5B,QAAQ,UAAU;AAAA,IAChB,MAAM,eAAyB;AAAA;AAAA;MAYtB,qBACX;AAKF,IAAI;AAEJ,mBAAmB,MAAM,QAAQ,SAAS;AACxC,QAAM,QAAQ,KAAK,MAAM;AACzB,MAAI;AACJ,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,IAAI,GAAG,KAAK;AAC5C,UAAM,WAAW,MAAM;AACvB,YAAQ,QAAQ;AAChB,QAAI,MAAM,IAAI;AAAG,aAAO,SAAS,OAAO;AACxC,QAAI,CAAC;AAAO,aAAO;AACnB,cAAU;AAAA;AAAA;MAID,YAAY,MAAM;AAC7B,QAAM,KAAK;AACX,QAAM,QAAQ,GAAG;AAIjB,QAAM,SAAS,SAAS,MAAM,MAAM,UAAUA;AAC9C,QAAM,OAAO,SAAS,MAAM,OAAO,MAAM;AAEzC,QAAM,cAAc,IAAI,SAAgB;AACtC,UAAM,CAAC,MAAM,UAAU;AACvB,WAAO,UAAU,MAAM,QAAQ,OAAO;AAAA;AAGxC,QAAM,IAAI,IAAI,SAAgB;AAC5B,WAAO,YAAY,GAAG;AAAA;AAGxB,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA;AAYF,mBAAiB;AACjB,UAAQ,oBAAoB;AAAA;AAG9B,kBAAkB,KAAa,QAAQ;AACrC,MAAI,CAAC,OAAO,CAAC;AAAQ,WAAO;AAC5B,SAAO,IAAI,QAAQ,cAAc,CAAC,GAAG,QAAQ;AAC3C,WAAO,OAAO;AAAA;AAAA;MAIL,sBAAsB,CAAC,SAASA,gBAAY;AACvD,QAAM,OAAO,IAAI,OAAO;AACxB,QAAM,YAAY,IAAI;AACtB,SAAO;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,GAAG,IAAI,SAAgB;AACrB,YAAM,CAAC,MAAM,UAAU;AACvB,aAAO,UAAU,MAAM,QAAQ,UAAU;AAAA;AAAA;AAAA;MAKlC,kBAAkB,MAAM;AACnC,SAAO,OACL,oBACA,kBAAkB;AAAA,IAChB,MAAM,IAAIA,YAAQ;AAAA,IAClB,QAAQ,IAAIA;AAAA,IACZ,GAAG,IAAI,SAAS;AACd,YAAM,CAAC,MAAM,UAAU;AACvB,aAAO,UAAU,MAAM,QAAQA;AAAA;AAAA;AAAA;;;;"}

package/es/hooks/use-popper/index.mjs

@@ -93,8 +93,9 @@ const usePopperProps = {
   }
 };
 const usePopperHook = () => {
+  var _a;
   const vm = getCurrentInstance();
-  const props = vm.props;
+  const props = (_a = vm.proxy) == null ? void 0 : _a.$props;
   const { slots } = vm;
   const arrowRef = ref(null);
   const triggerRef = ref(null);
@@ -138,8 +139,8 @@ const usePopperHook = () => {
     }
   }
   function detachPopper() {
-    var _a;
-    (_a = popperInstance == null ? void 0 : popperInstance.destroy) == null ? void 0 : _a.call(popperInstance);
+    var _a2;
+    (_a2 = popperInstance == null ? void 0 : popperInstance.destroy) == null ? void 0 : _a2.call(popperInstance);
     popperInstance = null;
   }
   function onPopperMouseEnter() {
@@ -226,8 +227,8 @@ const usePopperHook = () => {
     }, null) : null;
   }
   function triggerRenderer(triggerProps) {
-    var _a;
-    const trigger = (_a = slots.trigger) == null ? void 0 : _a.call(slots);
+    var _a2;
+    const trigger = (_a2 = slots.trigger) == null ? void 0 : _a2.call(slots);
     const firstElement = getFirstValidNode(trigger, 1);
     if (!firstElement)
       throwError("renderTrigger", "trigger expects single rooted node");

package/es/hooks/use-popper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-popper/index.ts"],"sourcesContent":["import {\n  cloneVNode,\n  computed,\n  Fragment,\n  getCurrentInstance,\n  h,\n  nextTick,\n  toDisplayString,\n  toRef,\n  Transition,\n  ref,\n  renderSlot,\n  withDirectives,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport { createPopper } from '@popperjs/core'\nimport { ClickOutside } from '@element-plus/directives'\nimport {\n  generateId,\n  isHTMLElement,\n  isString,\n  refAttacher,\n} from '@element-plus/utils/util'\nimport { getFirstValidNode } from '@element-plus/utils/vnode'\nimport { stop } from '@element-plus/utils/dom'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { throwError } from '@element-plus/utils/error'\n\nimport useTeleport from '../use-teleport'\nimport useTimeout from '../use-timeout'\nimport { useModelToggle } from '../use-model-toggle'\nimport { useTransitionFallthrough } from '../use-transition-fallthrough'\nimport { defaultPopperOptions, defaultModifiers } from './use-popper-options'\nimport { useTargetEvents, DEFAULT_TRIGGER } from './use-target-events'\n\nimport type {\n  CSSProperties,\n  ComponentPublicInstance,\n  ExtractPropTypes,\n  PropType,\n} from 'vue'\nimport type {\n  Instance as PopperInstance,\n  StrictModifiers,\n} from '@popperjs/core'\nimport type { RefElement, Nullable } from '@element-plus/utils/types'\nimport type { Trigger } from './use-target-events'\n\nexport type PopperEffect = 'light' | 'dark'\nexport type Offset = [number, number] | number\n\ntype ElementType = ComponentPublicInstance | HTMLElement\n\nexport const DARK_EFFECT = 'dark'\nexport const LIGHT_EFFECT = 'light'\n\nexport const usePopperControlProps = {\n  appendToBody: {\n    type: Boolean,\n    default: true,\n  },\n  arrowOffset: {\n    type: Number,\n  },\n  popperOptions: defaultPopperOptions,\n  popperClass: {\n    type: String,\n    default: '',\n  },\n}\n\nexport const usePopperProps = {\n  ...usePopperControlProps,\n  // the arrow size is an equailateral triangle with 10px side length, the 3rd side length ~ 14.1px\n  // adding a offset to the ceil of 4.1 should be 5 this resolves the problem of arrow overflowing out of popper.\n  autoClose: {\n    type: Number,\n    default: 0,\n  },\n  content: {\n    type: String,\n    default: '',\n  },\n  class: String,\n  style: Object,\n  hideAfter: {\n    type: Number,\n    default: 200,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  effect: {\n    type: String as PropType<PopperEffect>,\n    default: DARK_EFFECT,\n  },\n  enterable: {\n    type: Boolean,\n    default: true,\n  },\n  manualMode: {\n    type: Boolean,\n    default: false,\n  },\n  showAfter: {\n    type: Number,\n    default: 0,\n  },\n  pure: {\n    type: Boolean,\n    default: false,\n  },\n  showArrow: {\n    type: Boolean,\n    default: true,\n  },\n  transition: {\n    type: String,\n    default: 'el-fade-in-linear',\n  },\n  trigger: {\n    type: [String, Array] as PropType<Trigger>,\n    default: DEFAULT_TRIGGER,\n  },\n  visible: {\n    type: Boolean,\n    default: undefined,\n  },\n  stopPopperMouseEvent: {\n    type: Boolean,\n    default: true,\n  },\n}\n\nexport const usePopperHook = () => {\n  const vm = getCurrentInstance()\n  const props: ExtractPropTypes<typeof usePopperProps> = vm.props as any\n  const { slots } = vm\n\n  const arrowRef = ref<RefElement>(null)\n  const triggerRef = ref<ElementType>(null)\n  const popperRef = ref<RefElement>(null)\n\n  const popperStyle = ref<CSSProperties>({ zIndex: PopupManager.nextZIndex() })\n  const visible = ref(false)\n  const isManual = computed(\n    () => props.manualMode || props.trigger === 'manual'\n  )\n\n  const popperId = `el-popper-${generateId()}`\n  let popperInstance: Nullable<PopperInstance> = null\n\n  const { renderTeleport, showTeleport, hideTeleport } = useTeleport(\n    popupRenderer,\n    toRef(props, 'appendToBody')\n  )\n\n  const { show, hide } = useModelToggle({\n    indicator: visible,\n    onShow,\n    onHide,\n  })\n\n  const { registerTimeout, cancelTimeout } = useTimeout()\n\n  // event handlers\n\n  function onShow() {\n    popperStyle.value.zIndex = PopupManager.nextZIndex()\n    nextTick(initializePopper)\n  }\n\n  function onHide() {\n    hideTeleport()\n    nextTick(detachPopper)\n  }\n\n  /**\n   * The calling mechanism here is:\n   * when the visibility gets changed, let's say we change it to true\n   * the delayShow gets called which initializes a global root node for the popper content\n   * to insert in, then it register a timer for calling the show method, which changes the flag to\n   * true, then calls onShow method.\n   * So the order of invocation is: delayedShow -> timer(show) -> set the indicator to true -> onShow\n   */\n\n  function delayShow() {\n    if (isManual.value || props.disabled) return\n    // renders out the teleport element root.\n    showTeleport()\n    registerTimeout(show, props.showAfter)\n  }\n\n  function delayHide() {\n    if (isManual.value) return\n    registerTimeout(hide, props.hideAfter)\n  }\n\n  function onToggle() {\n    if (visible.value) {\n      delayShow()\n    } else {\n      delayHide()\n    }\n  }\n\n  function detachPopper() {\n    popperInstance?.destroy?.()\n    popperInstance = null\n  }\n\n  function onPopperMouseEnter() {\n    // if trigger is click, user won't be able to close popper when\n    // user tries to move the mouse over popper contents\n    if (props.enterable && props.trigger !== 'click') {\n      cancelTimeout()\n    }\n  }\n\n  function onPopperMouseLeave() {\n    const { trigger } = props\n    const shouldPrevent =\n      (isString(trigger) && (trigger === 'click' || trigger === 'focus')) ||\n      // we'd like to test array type trigger here, but the only case we need to cover is trigger === 'click' or\n      // trigger === 'focus', because that when trigger is string\n      // trigger.length === 1 and trigger[0] === 5 chars string is mutually exclusive.\n      // so there will be no need to test if trigger is array type.\n      (trigger.length === 1 &&\n        (trigger[0] === 'click' || trigger[0] === 'focus'))\n    if (shouldPrevent) return\n    delayHide()\n  }\n\n  function initializePopper() {\n    if (!visible.value || popperInstance !== null) {\n      return\n    }\n    const unwrappedTrigger = triggerRef.value\n    const $el = isHTMLElement(unwrappedTrigger)\n      ? unwrappedTrigger\n      : (unwrappedTrigger as ComponentPublicInstance).$el\n\n    popperInstance = createPopper($el, popperRef.value, buildPopperOptions())\n    popperInstance.update()\n  }\n\n  function buildPopperOptions() {\n    const modifiers = [...defaultModifiers, ...props.popperOptions.modifiers]\n\n    if (props.showArrow) {\n      modifiers.push({\n        name: 'arrow',\n        options: {\n          padding: props.arrowOffset || 5,\n          element: arrowRef.value,\n        },\n      } as StrictModifiers)\n    }\n\n    return {\n      ...props.popperOptions,\n      modifiers,\n    }\n  }\n\n  const { onAfterEnter, onAfterLeave, onBeforeEnter, onBeforeLeave } =\n    useTransitionFallthrough()\n\n  const events = useTargetEvents(delayShow, delayHide, onToggle)\n\n  const arrowRefAttacher = refAttacher(arrowRef)\n  const popperRefAttacher = refAttacher(popperRef)\n  const triggerRefAttacher = refAttacher(triggerRef)\n\n  // renderers\n  function popupRenderer() {\n    const mouseUpAndDown = props.stopPopperMouseEvent ? stop : NOOP\n    return h(\n      Transition as any,\n      {\n        name: props.transition,\n        onAfterEnter,\n        onAfterLeave,\n        onBeforeEnter,\n        onBeforeLeave,\n      },\n      {\n        default: () => () =>\n          visible.value\n            ? h(\n                'div',\n                {\n                  'aria-hidden': false,\n                  class: [\n                    props.popperClass,\n                    'el-popper',\n                    `is-${props.effect}`,\n                    props.pure ? 'is-pure' : '',\n                  ],\n                  style: popperStyle.value,\n                  id: popperId,\n                  ref: popperRefAttacher,\n                  role: 'tooltip',\n                  onMouseenter: onPopperMouseEnter,\n                  onMouseleave: onPopperMouseLeave,\n                  onClick: stop,\n                  onMousedown: mouseUpAndDown,\n                  onMouseup: mouseUpAndDown,\n                },\n                [\n                  renderSlot(slots, 'default', {}, () => [\n                    toDisplayString(props.content),\n                  ]),\n                  arrowRenderer(),\n                ]\n              )\n            : null,\n      }\n    )\n  }\n\n  function arrowRenderer() {\n    return props.showArrow\n      ? h(\n          'div',\n          {\n            ref: arrowRefAttacher,\n            class: 'el-popper__arrow',\n            'data-popper-arrow': '',\n          },\n          null\n        )\n      : null\n  }\n\n  function triggerRenderer(triggerProps) {\n    const trigger = slots.trigger?.()\n    const firstElement = getFirstValidNode(trigger, 1)\n    if (!firstElement)\n      throwError('renderTrigger', 'trigger expects single rooted node')\n    return cloneVNode(firstElement, triggerProps, true)\n  }\n\n  function render() {\n    const trigger = triggerRenderer({\n      'aria-describedby': popperId,\n      class: props.class,\n      style: props.style,\n      ref: triggerRefAttacher,\n      ...events,\n    })\n    return h(Fragment, null, [\n      isManual.value\n        ? trigger\n        : withDirectives(trigger, [[ClickOutside, delayHide]]),\n      renderTeleport(),\n    ])\n  }\n\n  return {\n    render,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-popper/index.ts"],"sourcesContent":["import {\n  cloneVNode,\n  computed,\n  Fragment,\n  getCurrentInstance,\n  h,\n  nextTick,\n  toDisplayString,\n  toRef,\n  Transition,\n  ref,\n  renderSlot,\n  withDirectives,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport { createPopper } from '@popperjs/core'\nimport { ClickOutside } from '@element-plus/directives'\nimport {\n  generateId,\n  isHTMLElement,\n  isString,\n  refAttacher,\n} from '@element-plus/utils/util'\nimport { getFirstValidNode } from '@element-plus/utils/vnode'\nimport { stop } from '@element-plus/utils/dom'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { throwError } from '@element-plus/utils/error'\n\nimport useTeleport from '../use-teleport'\nimport useTimeout from '../use-timeout'\nimport { useModelToggle } from '../use-model-toggle'\nimport { useTransitionFallthrough } from '../use-transition-fallthrough'\nimport { defaultPopperOptions, defaultModifiers } from './use-popper-options'\nimport { useTargetEvents, DEFAULT_TRIGGER } from './use-target-events'\n\nimport type {\n  CSSProperties,\n  ComponentPublicInstance,\n  ExtractPropTypes,\n  PropType,\n} from 'vue'\nimport type {\n  Instance as PopperInstance,\n  StrictModifiers,\n} from '@popperjs/core'\nimport type { RefElement, Nullable } from '@element-plus/utils/types'\nimport type { Trigger } from './use-target-events'\n\nexport type PopperEffect = 'light' | 'dark'\nexport type Offset = [number, number] | number\n\ntype ElementType = ComponentPublicInstance | HTMLElement\n\nexport const DARK_EFFECT = 'dark'\nexport const LIGHT_EFFECT = 'light'\n\nexport const usePopperControlProps = {\n  appendToBody: {\n    type: Boolean,\n    default: true,\n  },\n  arrowOffset: {\n    type: Number,\n  },\n  popperOptions: defaultPopperOptions,\n  popperClass: {\n    type: String,\n    default: '',\n  },\n}\n\nexport const usePopperProps = {\n  ...usePopperControlProps,\n  // the arrow size is an equailateral triangle with 10px side length, the 3rd side length ~ 14.1px\n  // adding a offset to the ceil of 4.1 should be 5 this resolves the problem of arrow overflowing out of popper.\n  autoClose: {\n    type: Number,\n    default: 0,\n  },\n  content: {\n    type: String,\n    default: '',\n  },\n  class: String,\n  style: Object,\n  hideAfter: {\n    type: Number,\n    default: 200,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  effect: {\n    type: String as PropType<PopperEffect>,\n    default: DARK_EFFECT,\n  },\n  enterable: {\n    type: Boolean,\n    default: true,\n  },\n  manualMode: {\n    type: Boolean,\n    default: false,\n  },\n  showAfter: {\n    type: Number,\n    default: 0,\n  },\n  pure: {\n    type: Boolean,\n    default: false,\n  },\n  showArrow: {\n    type: Boolean,\n    default: true,\n  },\n  transition: {\n    type: String,\n    default: 'el-fade-in-linear',\n  },\n  trigger: {\n    type: [String, Array] as PropType<Trigger>,\n    default: DEFAULT_TRIGGER,\n  },\n  visible: {\n    type: Boolean,\n    default: undefined,\n  },\n  stopPopperMouseEvent: {\n    type: Boolean,\n    default: true,\n  },\n}\n\nexport const usePopperHook = () => {\n  const vm = getCurrentInstance()!\n  const props: ExtractPropTypes<typeof usePopperProps> = vm.proxy?.$props as any\n  const { slots } = vm\n\n  const arrowRef = ref<RefElement>(null)\n  const triggerRef = ref<ElementType>(null)\n  const popperRef = ref<RefElement>(null)\n\n  const popperStyle = ref<CSSProperties>({ zIndex: PopupManager.nextZIndex() })\n  const visible = ref(false)\n  const isManual = computed(\n    () => props.manualMode || props.trigger === 'manual'\n  )\n\n  const popperId = `el-popper-${generateId()}`\n  let popperInstance: Nullable<PopperInstance> = null\n\n  const { renderTeleport, showTeleport, hideTeleport } = useTeleport(\n    popupRenderer,\n    toRef(props, 'appendToBody')\n  )\n\n  const { show, hide } = useModelToggle({\n    indicator: visible,\n    onShow,\n    onHide,\n  })\n\n  const { registerTimeout, cancelTimeout } = useTimeout()\n\n  // event handlers\n\n  function onShow() {\n    popperStyle.value.zIndex = PopupManager.nextZIndex()\n    nextTick(initializePopper)\n  }\n\n  function onHide() {\n    hideTeleport()\n    nextTick(detachPopper)\n  }\n\n  /**\n   * The calling mechanism here is:\n   * when the visibility gets changed, let's say we change it to true\n   * the delayShow gets called which initializes a global root node for the popper content\n   * to insert in, then it register a timer for calling the show method, which changes the flag to\n   * true, then calls onShow method.\n   * So the order of invocation is: delayedShow -> timer(show) -> set the indicator to true -> onShow\n   */\n\n  function delayShow() {\n    if (isManual.value || props.disabled) return\n    // renders out the teleport element root.\n    showTeleport()\n    registerTimeout(show, props.showAfter)\n  }\n\n  function delayHide() {\n    if (isManual.value) return\n    registerTimeout(hide, props.hideAfter)\n  }\n\n  function onToggle() {\n    if (visible.value) {\n      delayShow()\n    } else {\n      delayHide()\n    }\n  }\n\n  function detachPopper() {\n    popperInstance?.destroy?.()\n    popperInstance = null\n  }\n\n  function onPopperMouseEnter() {\n    // if trigger is click, user won't be able to close popper when\n    // user tries to move the mouse over popper contents\n    if (props.enterable && props.trigger !== 'click') {\n      cancelTimeout()\n    }\n  }\n\n  function onPopperMouseLeave() {\n    const { trigger } = props\n    const shouldPrevent =\n      (isString(trigger) && (trigger === 'click' || trigger === 'focus')) ||\n      // we'd like to test array type trigger here, but the only case we need to cover is trigger === 'click' or\n      // trigger === 'focus', because that when trigger is string\n      // trigger.length === 1 and trigger[0] === 5 chars string is mutually exclusive.\n      // so there will be no need to test if trigger is array type.\n      (trigger.length === 1 &&\n        (trigger[0] === 'click' || trigger[0] === 'focus'))\n    if (shouldPrevent) return\n    delayHide()\n  }\n\n  function initializePopper() {\n    if (!visible.value || popperInstance !== null) {\n      return\n    }\n    const unwrappedTrigger = triggerRef.value\n    const $el = isHTMLElement(unwrappedTrigger)\n      ? unwrappedTrigger\n      : (unwrappedTrigger as ComponentPublicInstance).$el\n\n    popperInstance = createPopper($el, popperRef.value, buildPopperOptions())\n    popperInstance.update()\n  }\n\n  function buildPopperOptions() {\n    const modifiers = [...defaultModifiers, ...props.popperOptions.modifiers]\n\n    if (props.showArrow) {\n      modifiers.push({\n        name: 'arrow',\n        options: {\n          padding: props.arrowOffset || 5,\n          element: arrowRef.value,\n        },\n      } as StrictModifiers)\n    }\n\n    return {\n      ...props.popperOptions,\n      modifiers,\n    }\n  }\n\n  const { onAfterEnter, onAfterLeave, onBeforeEnter, onBeforeLeave } =\n    useTransitionFallthrough()\n\n  const events = useTargetEvents(delayShow, delayHide, onToggle)\n\n  const arrowRefAttacher = refAttacher(arrowRef)\n  const popperRefAttacher = refAttacher(popperRef)\n  const triggerRefAttacher = refAttacher(triggerRef)\n\n  // renderers\n  function popupRenderer() {\n    const mouseUpAndDown = props.stopPopperMouseEvent ? stop : NOOP\n    return h(\n      Transition as any,\n      {\n        name: props.transition,\n        onAfterEnter,\n        onAfterLeave,\n        onBeforeEnter,\n        onBeforeLeave,\n      },\n      {\n        default: () => () =>\n          visible.value\n            ? h(\n                'div',\n                {\n                  'aria-hidden': false,\n                  class: [\n                    props.popperClass,\n                    'el-popper',\n                    `is-${props.effect}`,\n                    props.pure ? 'is-pure' : '',\n                  ],\n                  style: popperStyle.value,\n                  id: popperId,\n                  ref: popperRefAttacher,\n                  role: 'tooltip',\n                  onMouseenter: onPopperMouseEnter,\n                  onMouseleave: onPopperMouseLeave,\n                  onClick: stop,\n                  onMousedown: mouseUpAndDown,\n                  onMouseup: mouseUpAndDown,\n                },\n                [\n                  renderSlot(slots, 'default', {}, () => [\n                    toDisplayString(props.content),\n                  ]),\n                  arrowRenderer(),\n                ]\n              )\n            : null,\n      }\n    )\n  }\n\n  function arrowRenderer() {\n    return props.showArrow\n      ? h(\n          'div',\n          {\n            ref: arrowRefAttacher,\n            class: 'el-popper__arrow',\n            'data-popper-arrow': '',\n          },\n          null\n        )\n      : null\n  }\n\n  function triggerRenderer(triggerProps) {\n    const trigger = slots.trigger?.()\n    const firstElement = getFirstValidNode(trigger, 1)\n    if (!firstElement)\n      throwError('renderTrigger', 'trigger expects single rooted node')\n    return cloneVNode(firstElement, triggerProps, true)\n  }\n\n  function render() {\n    const trigger = triggerRenderer({\n      'aria-describedby': popperId,\n      class: props.class,\n      style: props.style,\n      ref: triggerRefAttacher,\n      ...events,\n    })\n    return h(Fragment, null, [\n      isManual.value\n        ? trigger\n        : withDirectives(trigger, [[ClickOutside, delayHide]]),\n      renderTeleport(),\n    ])\n  }\n\n  return {\n    render,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;MAqDa,cAAc;MACd,eAAe;MAEf,wBAAwB;AAAA,EACnC,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA;AAAA,EAER,eAAe;AAAA,EACf,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAIA,iBAAiB;AAAA,KACzB;AAAA,EAGH,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,SAAS;AAAA,IACP,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,sBAAsB;AAAA,IACpB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAIA,gBAAgB,MAAM;AAvInC;AAwIE,QAAM,KAAK;AACX,QAAM,QAAiD,SAAG,UAAH,mBAAU;AACjE,QAAM,EAAE,UAAU;AAElB,QAAM,WAAW,IAAgB;AACjC,QAAM,aAAa,IAAiB;AACpC,QAAM,YAAY,IAAgB;AAElC,QAAM,cAAc,IAAmB,EAAE,QAAQ,aAAa;AAC9D,QAAM,UAAU,IAAI;AACpB,QAAM,WAAW,SACf,MAAM,MAAM,cAAc,MAAM,YAAY;AAG9C,QAAM,WAAW,aAAa;AAC9B,MAAI,iBAA2C;AAE/C,QAAM,EAAE,gBAAgB,cAAc,iBAAiB,YACrD,eACA,MAAM,OAAO;AAGf,QAAM,EAAE,MAAM,SAAS,eAAe;AAAA,IACpC,WAAW;AAAA,IACX;AAAA,IACA;AAAA;AAGF,QAAM,EAAE,iBAAiB,kBAAkB;AAI3C,oBAAkB;AAChB,gBAAY,MAAM,SAAS,aAAa;AACxC,aAAS;AAAA;AAGX,oBAAkB;AAChB;AACA,aAAS;AAAA;AAYX,uBAAqB;AACnB,QAAI,SAAS,SAAS,MAAM;AAAU;AAEtC;AACA,oBAAgB,MAAM,MAAM;AAAA;AAG9B,uBAAqB;AACnB,QAAI,SAAS;AAAO;AACpB,oBAAgB,MAAM,MAAM;AAAA;AAG9B,sBAAoB;AAClB,QAAI,QAAQ,OAAO;AACjB;AAAA,WACK;AACL;AAAA;AAAA;AAIJ,0BAAwB;AA/M1B;AAgNI,4DAAgB,YAAhB;AACA,qBAAiB;AAAA;AAGnB,gCAA8B;AAG5B,QAAI,MAAM,aAAa,MAAM,YAAY,SAAS;AAChD;AAAA;AAAA;AAIJ,gCAA8B;AAC5B,UAAM,EAAE,YAAY;AACpB,UAAM,gBACH,SAAS,yBAAyB,WAAW,YAAY,YAKzD,QAAQ,WAAW,cACT,OAAO,WAAW,QAAQ,OAAO;AAC9C,QAAI;AAAe;AACnB;AAAA;AAGF,8BAA4B;AAC1B,QAAI,CAAC,QAAQ,SAAS,mBAAmB,MAAM;AAC7C;AAAA;AAEF,UAAM,mBAAmB,WAAW;AACpC,UAAM,MAAM,cAAc,oBACtB,mBACC,iBAA6C;AAElD,qBAAiB,aAAa,KAAK,UAAU,OAAO;AACpD,mBAAe;AAAA;AAGjB,gCAA8B;AAC5B,UAAM,YAAY,CAAC,GAAG,kBAAkB,GAAG,MAAM,cAAc;AAE/D,QAAI,MAAM,WAAW;AACnB,gBAAU,KAAK;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS,MAAM,eAAe;AAAA,UAC9B,SAAS,SAAS;AAAA;AAAA;AAAA;AAKxB,WAAO;AAAA,SACF,MAAM;AAAA,MACT;AAAA;AAAA;AAIJ,QAAM,EAAE,cAAc,cAAc,eAAe,kBACjD;AAEF,QAAM,SAAS,gBAAgB,WAAW,WAAW;AAErD,QAAM,mBAAmB,YAAY;AACrC,QAAM,oBAAoB,YAAY;AACtC,QAAM,qBAAqB,YAAY;AAGvC,2BAAyB;AACvB,UAAM,iBAAiB,MAAM,uBAAuB,OAAO;AAC3D,WAAO,EACL,YACA;AAAA,MACE,MAAM,MAAM;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OAEF;AAAA,MACE,SAAS,MAAM,MACb,QAAQ,QACJ,EACE,OACA;AAAA,QACE,eAAe;AAAA,QACf,OAAO;AAAA,UACL,MAAM;AAAA,UACN;AAAA,UACA,MAAM,MAAM;AAAA,UACZ,MAAM,OAAO,YAAY;AAAA;AAAA,QAE3B,OAAO,YAAY;AAAA,QACnB,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,MAAM;AAAA,QACN,cAAc;AAAA,QACd,cAAc;AAAA,QACd,SAAS;AAAA,QACT,aAAa;AAAA,QACb,WAAW;AAAA,SAEb;AAAA,QACE,WAAW,OAAO,WAAW,IAAI,MAAM;AAAA,UACrC,gBAAgB,MAAM;AAAA;AAAA,QAExB;AAAA,WAGJ;AAAA;AAAA;AAKZ,2BAAyB;AACvB,WAAO,MAAM,YACT,EACE,OACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,qBAAqB;AAAA,OAEvB,QAEF;AAAA;AAGN,2BAAyB,cAAc;AAhVzC;AAiVI,UAAM,UAAU,aAAM,YAAN;AAChB,UAAM,eAAe,kBAAkB,SAAS;AAChD,QAAI,CAAC;AACH,iBAAW,iBAAiB;AAC9B,WAAO,WAAW,cAAc,cAAc;AAAA;AAGhD,oBAAkB;AAChB,UAAM,UAAU,gBAAgB;AAAA,MAC9B,oBAAoB;AAAA,MACpB,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MACb,KAAK;AAAA,SACF;AAAA;AAEL,WAAO,EAAE,UAAU,MAAM;AAAA,MACvB,SAAS,QACL,UACA,eAAe,SAAS,CAAC,CAAC,cAAc;AAAA,MAC5C;AAAA;AAAA;AAIJ,SAAO;AAAA,IACL;AAAA;AAAA;;;;"}

package/es/index.mjs

@@ -152,10 +152,12 @@ export { themeVarsKey, useCssVar, useThemeVars } from './hooks/use-css-var/index
 export { LocaleInjectionKey, localeProviderMaker, useLocale, useLocaleInject, useLocaleProps } from './hooks/use-locale/index.mjs';
 export { useFormItem, useFormItemProps } from './hooks/use-form-item/index.mjs';
 export { useSameTarget } from './hooks/use-same-target/index.mjs';
+export { useGlobalConfig } from './hooks/use-global-config/index.mjs';
 export { elFormItemKey, elFormKey } from './tokens/form.mjs';
 export { elButtonGroupKey } from './tokens/button.mjs';
 export { elBreadcrumbKey } from './tokens/breadcrumb.mjs';
 export { elPaginationKey } from './tokens/pagination.mjs';
+export { configProviderContextKey } from './tokens/config-provider.mjs';
 
 const install = installer.install;
 const version = installer.version;

package/es/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../packages/element-plus/index.ts"],"sourcesContent":["import installer from './defaults'\nexport * from '@element-plus/components'\nexport * from '@element-plus/directives'\nexport * from '@element-plus/hooks'\nexport * from '@element-plus/tokens'\n\nexport { default as makeInstaller } from './make-installer'\nexport { default } from './defaults'\n\nexport const install = installer.install\nexport const version = installer.version\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MASa,UAAU,UAAU;MACpB,UAAU,UAAU;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../packages/element-plus/index.ts"],"sourcesContent":["import installer from './defaults'\nexport * from '@element-plus/components'\nexport * from '@element-plus/directives'\nexport * from '@element-plus/hooks'\nexport * from '@element-plus/tokens'\n\nexport { default as makeInstaller } from './make-installer'\nexport { default } from './defaults'\n\nexport const install = installer.install\nexport const version = installer.version\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MASa,UAAU,UAAU;MACpB,UAAU,UAAU;;;;"}

package/es/tokens/config-provider.d.ts

@@ -0,0 +1,4 @@
+import type { configProviderProps } from 'element-plus/es/components/config-provider/config-provider';
+import type { InjectionKey, ExtractPropTypes } from 'vue';
+export declare type ConfigProvdierContext = ExtractPropTypes<typeof configProviderProps>;
+export declare const configProviderContextKey: InjectionKey<ConfigProvdierContext>;

package/es/tokens/config-provider.mjs

@@ -0,0 +1,4 @@
+const configProviderContextKey = Symbol();
+
+export { configProviderContextKey };
+//# sourceMappingURL=config-provider.mjs.map

package/es/tokens/config-provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-provider.mjs","sources":["../../../../packages/tokens/config-provider.ts"],"sourcesContent":["import type { configProviderProps } from '@element-plus/components/config-provider/config-provider'\nimport type { InjectionKey, ExtractPropTypes } from 'vue'\n\nexport type ConfigProvdierContext = ExtractPropTypes<typeof configProviderProps>\n\nexport const configProviderContextKey: InjectionKey<ConfigProvdierContext> =\n  Symbol()\n"],"names":[],"mappings":"MAKa,2BACX;;;;"}

package/es/tokens/index.d.ts

@@ -2,3 +2,4 @@ export * from './form';
 export * from './button';
 export * from './breadcrumb';
 export * from './pagination';
+export * from './config-provider';

package/es/tokens/index.mjs

@@ -2,4 +2,5 @@ export { elFormItemKey, elFormKey } from './form.mjs';
 export { elButtonGroupKey } from './button.mjs';
 export { elBreadcrumbKey } from './breadcrumb.mjs';
 export { elPaginationKey } from './pagination.mjs';
+export { configProviderContextKey } from './config-provider.mjs';
 //# sourceMappingURL=index.mjs.map

package/es/tokens/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.2.0-beta.1";
+export declare const version = "1.2.0-beta.2";

package/es/version.mjs

@@ -1,4 +1,4 @@
-const version = "1.2.0-beta.1";
+const version = "1.2.0-beta.2";
 
 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 = '1.2.0-beta.1'\n"],"names":[],"mappings":"MAAa,UAAU;;;;"}
+{"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '1.2.0-beta.2'\n"],"names":[],"mappings":"MAAa,UAAU;;;;"}

package/lib/components/affix/src/affix.vue_vue&type=script&lang.js

@@ -94,6 +94,7 @@ var script = vue.defineComponent({
     });
     core.useEventListener(scrollContainer, "scroll", onScroll);
     core.useResizeObserver(root, () => update());
+    core.useResizeObserver(target, () => update());
     return {
       root,
       state,

package/lib/components/affix/src/affix.vue_vue&type=script&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"affix.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" class=\"el-affix\" :style=\"rootStyle\">\n    <div :class=\"{ 'el-affix--fixed': state.fixed }\" :style=\"affixStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  onMounted,\n  reactive,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils/dom'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAffix',\n\n  props: affixProps,\n  emits: affixEmits,\n\n  setup(props, { emit }) {\n    const target = shallowRef<HTMLElement>()\n    const root = shallowRef<HTMLDivElement>()\n    const scrollContainer = shallowRef<HTMLElement | Window>()\n\n    const state = reactive({\n      fixed: false,\n      height: 0, // height of root\n      width: 0, // width of root\n      scrollTop: 0, // scrollTop of documentElement\n      clientHeight: 0, // clientHeight of documentElement\n      transform: 0,\n    })\n\n    const rootStyle = computed<CSSProperties>(() => {\n      return {\n        height: state.fixed ? `${state.height}px` : '',\n        width: state.fixed ? `${state.width}px` : '',\n      }\n    })\n\n    const affixStyle = computed<CSSProperties | undefined>(() => {\n      if (!state.fixed) return\n\n      const offset = props.offset ? `${props.offset}px` : 0\n      const transform = state.transform\n        ? `translateY(${state.transform}px)`\n        : ''\n\n      return {\n        height: `${state.height}px`,\n        width: `${state.width}px`,\n        top: props.position === 'top' ? offset : '',\n        bottom: props.position === 'bottom' ? offset : '',\n        transform,\n        zIndex: props.zIndex,\n      }\n    })\n\n    const update = () => {\n      if (!root.value || !target.value || !scrollContainer.value) return\n\n      const rootRect = root.value.getBoundingClientRect()\n      const targetRect = target.value.getBoundingClientRect()\n      state.height = rootRect.height\n      state.width = rootRect.width\n      state.scrollTop =\n        scrollContainer.value instanceof Window\n          ? document.documentElement.scrollTop\n          : scrollContainer.value.scrollTop\n      state.clientHeight = document.documentElement.clientHeight\n\n      if (props.position === 'top') {\n        if (props.target) {\n          const difference = targetRect.bottom - props.offset - state.height\n          state.fixed = props.offset > rootRect.top && targetRect.bottom > 0\n          state.transform = difference < 0 ? difference : 0\n        } else {\n          state.fixed = props.offset > rootRect.top\n        }\n      } else {\n        if (props.target) {\n          const difference =\n            state.clientHeight - targetRect.top - props.offset - state.height\n          state.fixed =\n            state.clientHeight - props.offset < rootRect.bottom &&\n            state.clientHeight > targetRect.top\n          state.transform = difference < 0 ? -difference : 0\n        } else {\n          state.fixed = state.clientHeight - props.offset < rootRect.bottom\n        }\n      }\n    }\n\n    const onScroll = () => {\n      update()\n\n      emit('scroll', {\n        scrollTop: state.scrollTop,\n        fixed: state.fixed,\n      })\n    }\n\n    watch(\n      () => state.fixed,\n      () => {\n        emit('change', state.fixed)\n      }\n    )\n\n    onMounted(() => {\n      if (props.target) {\n        target.value =\n          document.querySelector<HTMLElement>(props.target) ?? undefined\n        if (!target.value) {\n          throw new Error(`Target is not existed: ${props.target}`)\n        }\n      } else {\n        target.value = document.documentElement\n      }\n      scrollContainer.value = getScrollContainer(root.value!, true)\n    })\n\n    useEventListener(scrollContainer, 'scroll', onScroll)\n    useResizeObserver(root, () => update())\n\n    return {\n      root,\n      state,\n      rootStyle,\n      affixStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","affixProps","affixEmits","shallowRef","reactive","computed","getScrollContainer"],"mappings":";;;;;;;;;AAsBA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,SAASC;AACf,UAAM,OAAOA;AACb,UAAM,kBAAkBA;AAExB,UAAM,QAAQC,aAAS;AAAA,MACrB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,cAAc;AAAA,MACd,WAAW;AAAA;AAGb,UAAM,YAAYC,aAAwB,MAAM;AAC9C,aAAO;AAAA,QACL,QAAQ,MAAM,QAAQ,GAAG,MAAM,aAAa;AAAA,QAC5C,OAAO,MAAM,QAAQ,GAAG,MAAM,YAAY;AAAA;AAAA;AAI9C,UAAM,aAAaA,aAAoC,MAAM;AAC3D,UAAI,CAAC,MAAM;AAAO;AAElB,YAAM,SAAS,MAAM,SAAS,GAAG,MAAM,aAAa;AACpD,YAAM,YAAY,MAAM,YACpB,cAAc,MAAM,iBACpB;AAEJ,aAAO;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,QACjB,OAAO,GAAG,MAAM;AAAA,QAChB,KAAK,MAAM,aAAa,QAAQ,SAAS;AAAA,QACzC,QAAQ,MAAM,aAAa,WAAW,SAAS;AAAA,QAC/C;AAAA,QACA,QAAQ,MAAM;AAAA;AAAA;AAIlB,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,KAAK,SAAS,CAAC,OAAO,SAAS,CAAC,gBAAgB;AAAO;AAE5D,YAAM,WAAW,KAAK,MAAM;AAC5B,YAAM,aAAa,OAAO,MAAM;AAChC,YAAM,SAAS,SAAS;AACxB,YAAM,QAAQ,SAAS;AACvB,YAAM,YACJ,gBAAgB,iBAAiB,SAC7B,SAAS,gBAAgB,YACzB,gBAAgB,MAAM;AAC5B,YAAM,eAAe,SAAS,gBAAgB;AAE9C,UAAI,MAAM,aAAa,OAAO;AAC5B,YAAI,MAAM,QAAQ;AAChB,gBAAM,aAAa,WAAW,SAAS,MAAM,SAAS,MAAM;AAC5D,gBAAM,QAAQ,MAAM,SAAS,SAAS,OAAO,WAAW,SAAS;AACjE,gBAAM,YAAY,aAAa,IAAI,aAAa;AAAA,eAC3C;AACL,gBAAM,QAAQ,MAAM,SAAS,SAAS;AAAA;AAAA,aAEnC;AACL,YAAI,MAAM,QAAQ;AAChB,gBAAM,aACJ,MAAM,eAAe,WAAW,MAAM,MAAM,SAAS,MAAM;AAC7D,gBAAM,QACJ,MAAM,eAAe,MAAM,SAAS,SAAS,UAC7C,MAAM,eAAe,WAAW;AAClC,gBAAM,YAAY,aAAa,IAAI,CAAC,aAAa;AAAA,eAC5C;AACL,gBAAM,QAAQ,MAAM,eAAe,MAAM,SAAS,SAAS;AAAA;AAAA;AAAA;AAKjE,UAAM,WAAW,MAAM;AACrB;AAEA,WAAK,UAAU;AAAA,QACb,WAAW,MAAM;AAAA,QACjB,OAAO,MAAM;AAAA;AAAA;AAIjB,cACE,MAAM,MAAM,OACZ,MAAM;AACJ,WAAK,UAAU,MAAM;AAAA;AAIzB,kBAAU,MAAM;;AACd,UAAI,MAAM,QAAQ;AAChB,eAAO,QACL,eAAS,cAA2B,MAAM,YAA1C,YAAqD;AACvD,YAAI,CAAC,OAAO,OAAO;AACjB,gBAAM,IAAI,MAAM,0BAA0B,MAAM;AAAA;AAAA,aAE7C;AACL,eAAO,QAAQ,SAAS;AAAA;AAE1B,sBAAgB,QAAQC,uBAAmB,KAAK,OAAQ;AAAA;AAG1D,0BAAiB,iBAAiB,UAAU;AAC5C,2BAAkB,MAAM,MAAM;AAE9B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"affix.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" class=\"el-affix\" :style=\"rootStyle\">\n    <div :class=\"{ 'el-affix--fixed': state.fixed }\" :style=\"affixStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  onMounted,\n  reactive,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils/dom'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAffix',\n\n  props: affixProps,\n  emits: affixEmits,\n\n  setup(props, { emit }) {\n    const target = shallowRef<HTMLElement>()\n    const root = shallowRef<HTMLDivElement>()\n    const scrollContainer = shallowRef<HTMLElement | Window>()\n\n    const state = reactive({\n      fixed: false,\n      height: 0, // height of root\n      width: 0, // width of root\n      scrollTop: 0, // scrollTop of documentElement\n      clientHeight: 0, // clientHeight of documentElement\n      transform: 0,\n    })\n\n    const rootStyle = computed<CSSProperties>(() => {\n      return {\n        height: state.fixed ? `${state.height}px` : '',\n        width: state.fixed ? `${state.width}px` : '',\n      }\n    })\n\n    const affixStyle = computed<CSSProperties | undefined>(() => {\n      if (!state.fixed) return\n\n      const offset = props.offset ? `${props.offset}px` : 0\n      const transform = state.transform\n        ? `translateY(${state.transform}px)`\n        : ''\n\n      return {\n        height: `${state.height}px`,\n        width: `${state.width}px`,\n        top: props.position === 'top' ? offset : '',\n        bottom: props.position === 'bottom' ? offset : '',\n        transform,\n        zIndex: props.zIndex,\n      }\n    })\n\n    const update = () => {\n      if (!root.value || !target.value || !scrollContainer.value) return\n\n      const rootRect = root.value.getBoundingClientRect()\n      const targetRect = target.value.getBoundingClientRect()\n      state.height = rootRect.height\n      state.width = rootRect.width\n      state.scrollTop =\n        scrollContainer.value instanceof Window\n          ? document.documentElement.scrollTop\n          : scrollContainer.value.scrollTop\n      state.clientHeight = document.documentElement.clientHeight\n\n      if (props.position === 'top') {\n        if (props.target) {\n          const difference = targetRect.bottom - props.offset - state.height\n          state.fixed = props.offset > rootRect.top && targetRect.bottom > 0\n          state.transform = difference < 0 ? difference : 0\n        } else {\n          state.fixed = props.offset > rootRect.top\n        }\n      } else {\n        if (props.target) {\n          const difference =\n            state.clientHeight - targetRect.top - props.offset - state.height\n          state.fixed =\n            state.clientHeight - props.offset < rootRect.bottom &&\n            state.clientHeight > targetRect.top\n          state.transform = difference < 0 ? -difference : 0\n        } else {\n          state.fixed = state.clientHeight - props.offset < rootRect.bottom\n        }\n      }\n    }\n\n    const onScroll = () => {\n      update()\n\n      emit('scroll', {\n        scrollTop: state.scrollTop,\n        fixed: state.fixed,\n      })\n    }\n\n    watch(\n      () => state.fixed,\n      () => {\n        emit('change', state.fixed)\n      }\n    )\n\n    onMounted(() => {\n      if (props.target) {\n        target.value =\n          document.querySelector<HTMLElement>(props.target) ?? undefined\n        if (!target.value) {\n          throw new Error(`Target is not existed: ${props.target}`)\n        }\n      } else {\n        target.value = document.documentElement\n      }\n      scrollContainer.value = getScrollContainer(root.value!, true)\n    })\n\n    useEventListener(scrollContainer, 'scroll', onScroll)\n    useResizeObserver(root, () => update())\n    useResizeObserver(target, () => update())\n\n    return {\n      root,\n      state,\n      rootStyle,\n      affixStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","affixProps","affixEmits","shallowRef","reactive","computed","getScrollContainer"],"mappings":";;;;;;;;;AAsBA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,SAASC;AACf,UAAM,OAAOA;AACb,UAAM,kBAAkBA;AAExB,UAAM,QAAQC,aAAS;AAAA,MACrB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,cAAc;AAAA,MACd,WAAW;AAAA;AAGb,UAAM,YAAYC,aAAwB,MAAM;AAC9C,aAAO;AAAA,QACL,QAAQ,MAAM,QAAQ,GAAG,MAAM,aAAa;AAAA,QAC5C,OAAO,MAAM,QAAQ,GAAG,MAAM,YAAY;AAAA;AAAA;AAI9C,UAAM,aAAaA,aAAoC,MAAM;AAC3D,UAAI,CAAC,MAAM;AAAO;AAElB,YAAM,SAAS,MAAM,SAAS,GAAG,MAAM,aAAa;AACpD,YAAM,YAAY,MAAM,YACpB,cAAc,MAAM,iBACpB;AAEJ,aAAO;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,QACjB,OAAO,GAAG,MAAM;AAAA,QAChB,KAAK,MAAM,aAAa,QAAQ,SAAS;AAAA,QACzC,QAAQ,MAAM,aAAa,WAAW,SAAS;AAAA,QAC/C;AAAA,QACA,QAAQ,MAAM;AAAA;AAAA;AAIlB,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,KAAK,SAAS,CAAC,OAAO,SAAS,CAAC,gBAAgB;AAAO;AAE5D,YAAM,WAAW,KAAK,MAAM;AAC5B,YAAM,aAAa,OAAO,MAAM;AAChC,YAAM,SAAS,SAAS;AACxB,YAAM,QAAQ,SAAS;AACvB,YAAM,YACJ,gBAAgB,iBAAiB,SAC7B,SAAS,gBAAgB,YACzB,gBAAgB,MAAM;AAC5B,YAAM,eAAe,SAAS,gBAAgB;AAE9C,UAAI,MAAM,aAAa,OAAO;AAC5B,YAAI,MAAM,QAAQ;AAChB,gBAAM,aAAa,WAAW,SAAS,MAAM,SAAS,MAAM;AAC5D,gBAAM,QAAQ,MAAM,SAAS,SAAS,OAAO,WAAW,SAAS;AACjE,gBAAM,YAAY,aAAa,IAAI,aAAa;AAAA,eAC3C;AACL,gBAAM,QAAQ,MAAM,SAAS,SAAS;AAAA;AAAA,aAEnC;AACL,YAAI,MAAM,QAAQ;AAChB,gBAAM,aACJ,MAAM,eAAe,WAAW,MAAM,MAAM,SAAS,MAAM;AAC7D,gBAAM,QACJ,MAAM,eAAe,MAAM,SAAS,SAAS,UAC7C,MAAM,eAAe,WAAW;AAClC,gBAAM,YAAY,aAAa,IAAI,CAAC,aAAa;AAAA,eAC5C;AACL,gBAAM,QAAQ,MAAM,eAAe,MAAM,SAAS,SAAS;AAAA;AAAA;AAAA;AAKjE,UAAM,WAAW,MAAM;AACrB;AAEA,WAAK,UAAU;AAAA,QACb,WAAW,MAAM;AAAA,QACjB,OAAO,MAAM;AAAA;AAAA;AAIjB,cACE,MAAM,MAAM,OACZ,MAAM;AACJ,WAAK,UAAU,MAAM;AAAA;AAIzB,kBAAU,MAAM;;AACd,UAAI,MAAM,QAAQ;AAChB,eAAO,QACL,eAAS,cAA2B,MAAM,YAA1C,YAAqD;AACvD,YAAI,CAAC,OAAO,OAAO;AACjB,gBAAM,IAAI,MAAM,0BAA0B,MAAM;AAAA;AAAA,aAE7C;AACL,eAAO,QAAQ,SAAS;AAAA;AAE1B,sBAAgB,QAAQC,uBAAmB,KAAK,OAAQ;AAAA;AAG1D,0BAAiB,iBAAiB,UAAU;AAC5C,2BAAkB,MAAM,MAAM;AAC9B,2BAAkB,QAAQ,MAAM;AAEhC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/affix/src/affix.vue_vue&type=template&id=0745df9e&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"affix.vue_vue&type=template&id=0745df9e&lang.js","sources":["../../../../../../packages/components/affix/src/affix.vue?vue&type=template&id=0745df9e&lang.js"],"sourcesContent":["<template>\n  <div ref=\"root\" class=\"el-affix\" :style=\"rootStyle\">\n    <div :class=\"{ 'el-affix--fixed': state.fixed }\" :style=\"affixStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  onMounted,\n  reactive,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils/dom'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAffix',\n\n  props: affixProps,\n  emits: affixEmits,\n\n  setup(props, { emit }) {\n    const target = shallowRef<HTMLElement>()\n    const root = shallowRef<HTMLDivElement>()\n    const scrollContainer = shallowRef<HTMLElement | Window>()\n\n    const state = reactive({\n      fixed: false,\n      height: 0, // height of root\n      width: 0, // width of root\n      scrollTop: 0, // scrollTop of documentElement\n      clientHeight: 0, // clientHeight of documentElement\n      transform: 0,\n    })\n\n    const rootStyle = computed<CSSProperties>(() => {\n      return {\n        height: state.fixed ? `${state.height}px` : '',\n        width: state.fixed ? `${state.width}px` : '',\n      }\n    })\n\n    const affixStyle = computed<CSSProperties | undefined>(() => {\n      if (!state.fixed) return\n\n      const offset = props.offset ? `${props.offset}px` : 0\n      const transform = state.transform\n        ? `translateY(${state.transform}px)`\n        : ''\n\n      return {\n        height: `${state.height}px`,\n        width: `${state.width}px`,\n        top: props.position === 'top' ? offset : '',\n        bottom: props.position === 'bottom' ? offset : '',\n        transform,\n        zIndex: props.zIndex,\n      }\n    })\n\n    const update = () => {\n      if (!root.value || !target.value || !scrollContainer.value) return\n\n      const rootRect = root.value.getBoundingClientRect()\n      const targetRect = target.value.getBoundingClientRect()\n      state.height = rootRect.height\n      state.width = rootRect.width\n      state.scrollTop =\n        scrollContainer.value instanceof Window\n          ? document.documentElement.scrollTop\n          : scrollContainer.value.scrollTop\n      state.clientHeight = document.documentElement.clientHeight\n\n      if (props.position === 'top') {\n        if (props.target) {\n          const difference = targetRect.bottom - props.offset - state.height\n          state.fixed = props.offset > rootRect.top && targetRect.bottom > 0\n          state.transform = difference < 0 ? difference : 0\n        } else {\n          state.fixed = props.offset > rootRect.top\n        }\n      } else {\n        if (props.target) {\n          const difference =\n            state.clientHeight - targetRect.top - props.offset - state.height\n          state.fixed =\n            state.clientHeight - props.offset < rootRect.bottom &&\n            state.clientHeight > targetRect.top\n          state.transform = difference < 0 ? -difference : 0\n        } else {\n          state.fixed = state.clientHeight - props.offset < rootRect.bottom\n        }\n      }\n    }\n\n    const onScroll = () => {\n      update()\n\n      emit('scroll', {\n        scrollTop: state.scrollTop,\n        fixed: state.fixed,\n      })\n    }\n\n    watch(\n      () => state.fixed,\n      () => {\n        emit('change', state.fixed)\n      }\n    )\n\n    onMounted(() => {\n      if (props.target) {\n        target.value =\n          document.querySelector<HTMLElement>(props.target) ?? undefined\n        if (!target.value) {\n          throw new Error(`Target is not existed: ${props.target}`)\n        }\n      } else {\n        target.value = document.documentElement\n      }\n      scrollContainer.value = getScrollContainer(root.value!, true)\n    })\n\n    useEventListener(scrollContainer, 'scroll', onScroll)\n    useResizeObserver(root, () => update())\n\n    return {\n      root,\n      state,\n      rootStyle,\n      affixStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;;0BACEA;IAAK,KAAI;AAAA,IAAO,OAAM;AAAA,IAAY,0BAAO;;IACvCC;MAAM,+CAA4B,WAAM;AAAA,MAAU,0BAAO;;MACvDC;;;;;;;"}
+{"version":3,"file":"affix.vue_vue&type=template&id=0745df9e&lang.js","sources":["../../../../../../packages/components/affix/src/affix.vue?vue&type=template&id=0745df9e&lang.js"],"sourcesContent":["<template>\n  <div ref=\"root\" class=\"el-affix\" :style=\"rootStyle\">\n    <div :class=\"{ 'el-affix--fixed': state.fixed }\" :style=\"affixStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  onMounted,\n  reactive,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils/dom'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAffix',\n\n  props: affixProps,\n  emits: affixEmits,\n\n  setup(props, { emit }) {\n    const target = shallowRef<HTMLElement>()\n    const root = shallowRef<HTMLDivElement>()\n    const scrollContainer = shallowRef<HTMLElement | Window>()\n\n    const state = reactive({\n      fixed: false,\n      height: 0, // height of root\n      width: 0, // width of root\n      scrollTop: 0, // scrollTop of documentElement\n      clientHeight: 0, // clientHeight of documentElement\n      transform: 0,\n    })\n\n    const rootStyle = computed<CSSProperties>(() => {\n      return {\n        height: state.fixed ? `${state.height}px` : '',\n        width: state.fixed ? `${state.width}px` : '',\n      }\n    })\n\n    const affixStyle = computed<CSSProperties | undefined>(() => {\n      if (!state.fixed) return\n\n      const offset = props.offset ? `${props.offset}px` : 0\n      const transform = state.transform\n        ? `translateY(${state.transform}px)`\n        : ''\n\n      return {\n        height: `${state.height}px`,\n        width: `${state.width}px`,\n        top: props.position === 'top' ? offset : '',\n        bottom: props.position === 'bottom' ? offset : '',\n        transform,\n        zIndex: props.zIndex,\n      }\n    })\n\n    const update = () => {\n      if (!root.value || !target.value || !scrollContainer.value) return\n\n      const rootRect = root.value.getBoundingClientRect()\n      const targetRect = target.value.getBoundingClientRect()\n      state.height = rootRect.height\n      state.width = rootRect.width\n      state.scrollTop =\n        scrollContainer.value instanceof Window\n          ? document.documentElement.scrollTop\n          : scrollContainer.value.scrollTop\n      state.clientHeight = document.documentElement.clientHeight\n\n      if (props.position === 'top') {\n        if (props.target) {\n          const difference = targetRect.bottom - props.offset - state.height\n          state.fixed = props.offset > rootRect.top && targetRect.bottom > 0\n          state.transform = difference < 0 ? difference : 0\n        } else {\n          state.fixed = props.offset > rootRect.top\n        }\n      } else {\n        if (props.target) {\n          const difference =\n            state.clientHeight - targetRect.top - props.offset - state.height\n          state.fixed =\n            state.clientHeight - props.offset < rootRect.bottom &&\n            state.clientHeight > targetRect.top\n          state.transform = difference < 0 ? -difference : 0\n        } else {\n          state.fixed = state.clientHeight - props.offset < rootRect.bottom\n        }\n      }\n    }\n\n    const onScroll = () => {\n      update()\n\n      emit('scroll', {\n        scrollTop: state.scrollTop,\n        fixed: state.fixed,\n      })\n    }\n\n    watch(\n      () => state.fixed,\n      () => {\n        emit('change', state.fixed)\n      }\n    )\n\n    onMounted(() => {\n      if (props.target) {\n        target.value =\n          document.querySelector<HTMLElement>(props.target) ?? undefined\n        if (!target.value) {\n          throw new Error(`Target is not existed: ${props.target}`)\n        }\n      } else {\n        target.value = document.documentElement\n      }\n      scrollContainer.value = getScrollContainer(root.value!, true)\n    })\n\n    useEventListener(scrollContainer, 'scroll', onScroll)\n    useResizeObserver(root, () => update())\n    useResizeObserver(target, () => update())\n\n    return {\n      root,\n      state,\n      rootStyle,\n      affixStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;;0BACEA;IAAK,KAAI;AAAA,IAAO,OAAM;AAAA,IAAY,0BAAO;;IACvCC;MAAM,+CAA4B,WAAM;AAAA,MAAU,0BAAO;;MACvDC;;;;;;;"}

package/lib/components/alert/src/alert.vue_vue&type=script&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/alert/src/alert.vue"],"sourcesContent":["<template>\n  <transition name=\"el-alert-fade\">\n    <div\n      v-show=\"visible\"\n      class=\"el-alert\"\n      :class=\"[typeClass, center ? 'is-center' : '', 'is-' + effect]\"\n      role=\"alert\"\n    >\n      <el-icon v-if=\"showIcon\" class=\"el-alert__icon\" :class=\"isBigIcon\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div class=\"el-alert__content\">\n        <span\n          v-if=\"title || $slots.title\"\n          class=\"el-alert__title\"\n          :class=\"[isBoldTitle]\"\n        >\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n        <p v-if=\"$slots.default || description\" class=\"el-alert__description\">\n          <slot>\n            {{ description }}\n          </slot>\n        </p>\n        <template v-if=\"closable\">\n          <div\n            v-if=\"closeText\"\n            class=\"el-alert__closebtn is-customed\"\n            @click=\"close\"\n          >\n            {{ closeText }}\n          </div>\n          <el-icon v-else class=\"el-alert__closebtn\" @click=\"close\">\n            <close />\n          </el-icon>\n        </template>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\nimport { alertProps, alertEmits } from './alert'\n\nexport default defineComponent({\n  name: 'ElAlert',\n\n  components: {\n    ElIcon,\n    ...TypeComponents,\n  },\n\n  props: alertProps,\n  emits: alertEmits,\n\n  setup(props, { emit, slots }) {\n    // state\n    const visible = ref(true)\n\n    // computed\n    const typeClass = computed(() => `el-alert--${props.type}`)\n    const iconComponent = computed(\n      () => TypeComponentsMap[props.type] || TypeComponentsMap['info']\n    )\n    const isBigIcon = computed(() =>\n      props.description || slots.default ? 'is-big' : ''\n    )\n    const isBoldTitle = computed(() =>\n      props.description || slots.default ? 'is-bold' : ''\n    )\n\n    // methods\n    const close = (evt: MouseEvent) => {\n      visible.value = false\n      emit('close', evt)\n    }\n\n    return {\n      visible,\n      typeClass,\n      iconComponent,\n      isBigIcon,\n      isBoldTitle,\n      close,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","TypeComponents","alertProps","alertEmits","ref","computed","TypeComponentsMap"],"mappings":";;;;;;;;;AA8CA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,YACVC;AAAA,OACGC;AAAA;AAAA,EAGL,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,MAAM,SAAS;AAE5B,UAAM,UAAUC,QAAI;AAGpB,UAAM,YAAYC,aAAS,MAAM,aAAa,MAAM;AACpD,UAAM,gBAAgBA,aACpB,MAAMC,uBAAkB,MAAM,SAASA,uBAAkB;AAE3D,UAAM,YAAYD,aAAS,MACzB,MAAM,eAAe,MAAM,UAAU,WAAW;AAElD,UAAM,cAAcA,aAAS,MAC3B,MAAM,eAAe,MAAM,UAAU,YAAY;AAInD,UAAM,QAAQ,CAAC,QAAoB;AACjC,cAAQ,QAAQ;AAChB,WAAK,SAAS;AAAA;AAGhB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"alert.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/alert/src/alert.vue"],"sourcesContent":["<template>\n  <transition name=\"el-alert-fade\">\n    <div\n      v-show=\"visible\"\n      class=\"el-alert\"\n      :class=\"[typeClass, center ? 'is-center' : '', 'is-' + effect]\"\n      role=\"alert\"\n    >\n      <el-icon\n        v-if=\"showIcon && iconComponent\"\n        class=\"el-alert__icon\"\n        :class=\"isBigIcon\"\n      >\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div class=\"el-alert__content\">\n        <span\n          v-if=\"title || $slots.title\"\n          class=\"el-alert__title\"\n          :class=\"[isBoldTitle]\"\n        >\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n        <p v-if=\"$slots.default || description\" class=\"el-alert__description\">\n          <slot>\n            {{ description }}\n          </slot>\n        </p>\n        <template v-if=\"closable\">\n          <div\n            v-if=\"closeText\"\n            class=\"el-alert__closebtn is-customed\"\n            @click=\"close\"\n          >\n            {{ closeText }}\n          </div>\n          <el-icon v-else class=\"el-alert__closebtn\" @click=\"close\">\n            <close />\n          </el-icon>\n        </template>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\nimport { alertProps, alertEmits } from './alert'\n\nexport default defineComponent({\n  name: 'ElAlert',\n\n  components: {\n    ElIcon,\n    ...TypeComponents,\n  },\n\n  props: alertProps,\n  emits: alertEmits,\n\n  setup(props, { emit, slots }) {\n    // state\n    const visible = ref(true)\n\n    // computed\n    const typeClass = computed(() => `el-alert--${props.type}`)\n    const iconComponent = computed(\n      () => TypeComponentsMap[props.type] || TypeComponentsMap['info']\n    )\n    const isBigIcon = computed(() =>\n      props.description || slots.default ? 'is-big' : ''\n    )\n    const isBoldTitle = computed(() =>\n      props.description || slots.default ? 'is-bold' : ''\n    )\n\n    // methods\n    const close = (evt: MouseEvent) => {\n      visible.value = false\n      emit('close', evt)\n    }\n\n    return {\n      visible,\n      typeClass,\n      iconComponent,\n      isBigIcon,\n      isBoldTitle,\n      close,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","TypeComponents","alertProps","alertEmits","ref","computed","TypeComponentsMap"],"mappings":";;;;;;;;;AAkDA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,YACVC;AAAA,OACGC;AAAA;AAAA,EAGL,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,MAAM,SAAS;AAE5B,UAAM,UAAUC,QAAI;AAGpB,UAAM,YAAYC,aAAS,MAAM,aAAa,MAAM;AACpD,UAAM,gBAAgBA,aACpB,MAAMC,uBAAkB,MAAM,SAASA,uBAAkB;AAE3D,UAAM,YAAYD,aAAS,MACzB,MAAM,eAAe,MAAM,UAAU,WAAW;AAElD,UAAM,cAAcA,aAAS,MAC3B,MAAM,eAAe,MAAM,UAAU,YAAY;AAInD,UAAM,QAAQ,CAAC,QAAoB;AACjC,cAAQ,QAAQ;AAChB,WAAK,SAAS;AAAA;AAGhB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}