@element-plus/nightly 0.0.20220117 → 0.0.20220121

package/lib/components/result/src/result.vue_vue_type_script_lang.js

@@ -3,12 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
+require('../../../hooks/index.js');
 var result = require('./result.js');
+var index = require('../../../hooks/use-namespace/index.js');
 
 var script = vue.defineComponent({
   name: "ElResult",
   props: result.resultProps,
   setup(props) {
+    const ns = index.useNamespace("result");
     const resultIcon = vue.computed(() => {
       const icon = props.icon;
       const iconClass = icon && result.IconMap[icon] ? result.IconMap[icon] : "icon-info";
@@ -19,6 +22,7 @@ var script = vue.defineComponent({
       };
     });
     return {
+      ns,
       resultIcon
     };
   }

package/lib/components/result/src/result.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"result.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/result/src/result.vue"],"sourcesContent":["<template>\n  <div class=\"el-result\">\n    <div class=\"el-result__icon\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" class=\"el-result__title\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" class=\"el-result__subtitle\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" class=\"el-result__extra\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { resultProps, IconComponentMap, IconMap } from './result'\n\nexport default defineComponent({\n  name: 'ElResult',\n  props: resultProps,\n  setup(props) {\n    const resultIcon = computed(() => {\n      const icon = props.icon\n      const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n      const iconComponent =\n        IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n      return {\n        class: iconClass,\n        component: iconComponent,\n      }\n    })\n\n    return {\n      resultIcon,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","resultProps","IconMap","IconComponentMap"],"mappings":";;;;;;;AA4BA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAEC,kBAAW;EAClB,MAAM,KAAK,EAAE;IACX,MAAM,UAAU;MACd,MAAM;MACN,MAAM,SAAS,GAAG,IAAI,IAAIC;MAC1B,MAAM,aAAa,GAAGC;MACtB,OAAO;QACL,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE,aAAa;;MAE1B,CAAC;WACI;gBACK;MACV;;;;;;"}
+{"version":3,"file":"result.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/result/src/result.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('icon')\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" :class=\"ns.e('title')\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" :class=\"ns.e('subtitle')\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" :class=\"ns.e('extra')\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { resultProps, IconComponentMap, IconMap } from './result'\n\nexport default defineComponent({\n  name: 'ElResult',\n  props: resultProps,\n  setup(props) {\n    const ns = useNamespace('result')\n\n    const resultIcon = computed(() => {\n      const icon = props.icon\n      const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n      const iconComponent =\n        IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n      return {\n        class: iconClass,\n        component: iconComponent,\n      }\n    })\n\n    return {\n      ns,\n      resultIcon,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","resultProps","useNamespace","IconComponentMap"],"mappings":";;;;;;;;;AA6BA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAEC,kBAAW;EAClB,MAAM,KAAK,EAAE;IACX,MAAM,EAAE,GAAGC;IACX,MAAM;MACJ,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC;;MAExB,MAAM,aAAa,GAAGC;MACtB,OAAO;QACL,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;QACX;;WAEG;QACH;gBACQ;MACV;;;;;;"}

package/lib/components/result/src/result.vue_vue_type_template_id_263c10e5_lang.js

@@ -4,44 +4,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 
-const _hoisted_1 = { class: "el-result" };
-const _hoisted_2 = { class: "el-result__icon" };
-const _hoisted_3 = {
-  key: 0,
-  class: "el-result__title"
-};
-const _hoisted_4 = {
-  key: 1,
-  class: "el-result__subtitle"
-};
-const _hoisted_5 = {
-  key: 2,
-  class: "el-result__extra"
-};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.createElementVNode("div", _hoisted_2, [
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(_ctx.ns.b())
+  }, [
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(_ctx.ns.e("icon"))
+    }, [
       vue.renderSlot(_ctx.$slots, "icon", {}, () => [
         _ctx.resultIcon.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.resultIcon.component), {
           key: 0,
           class: vue.normalizeClass(_ctx.resultIcon.class)
         }, null, 8, ["class"])) : vue.createCommentVNode("v-if", true)
       ])
-    ]),
-    _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+    ], 2),
+    _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: vue.normalizeClass(_ctx.ns.e("title"))
+    }, [
       vue.renderSlot(_ctx.$slots, "title", {}, () => [
         vue.createElementVNode("p", null, vue.toDisplayString(_ctx.title), 1)
       ])
-    ])) : vue.createCommentVNode("v-if", true),
-    _ctx.subTitle || _ctx.$slots.subTitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+    ], 2)) : vue.createCommentVNode("v-if", true),
+    _ctx.subTitle || _ctx.$slots.subTitle ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 1,
+      class: vue.normalizeClass(_ctx.ns.e("subtitle"))
+    }, [
       vue.renderSlot(_ctx.$slots, "subTitle", {}, () => [
         vue.createElementVNode("p", null, vue.toDisplayString(_ctx.subTitle), 1)
       ])
-    ])) : vue.createCommentVNode("v-if", true),
-    _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+    ], 2)) : vue.createCommentVNode("v-if", true),
+    _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 2,
+      class: vue.normalizeClass(_ctx.ns.e("extra"))
+    }, [
       vue.renderSlot(_ctx.$slots, "extra")
-    ])) : vue.createCommentVNode("v-if", true)
-  ]);
+    ], 2)) : vue.createCommentVNode("v-if", true)
+  ], 2);
 }
 
 exports.render = render;

package/lib/components/result/src/result.vue_vue_type_template_id_263c10e5_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"result.vue_vue_type_template_id_263c10e5_lang.js","sources":["../../../../../../packages/components/result/src/result.vue?vue&type=template&id=263c10e5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-result\">\n    <div class=\"el-result__icon\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" class=\"el-result__title\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" class=\"el-result__subtitle\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" class=\"el-result__extra\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { resultProps, IconComponentMap, IconMap } from './result'\n\nexport default defineComponent({\n  name: 'ElResult',\n  props: resultProps,\n  setup(props) {\n    const resultIcon = computed(() => {\n      const icon = props.icon\n      const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n      const iconComponent =\n        IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n      return {\n        class: iconClass,\n        component: iconComponent,\n      }\n    })\n\n    return {\n      resultIcon,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;qBACO,KAAK,EAAC;;;;EAUyB;;;;EAKM;;;;EAKf;;;;;;;;;;;;;;;KAVd,4BAAe,MAAM;;;kEAEtB;;;;yBAGa;;;;;;;"}
+{"version":3,"file":"result.vue_vue_type_template_id_263c10e5_lang.js","sources":["../../../../../../packages/components/result/src/result.vue?vue&type=template&id=263c10e5&lang.js"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('icon')\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" :class=\"ns.e('title')\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" :class=\"ns.e('subtitle')\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" :class=\"ns.e('extra')\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { resultProps, IconComponentMap, IconMap } from './result'\n\nexport default defineComponent({\n  name: 'ElResult',\n  props: resultProps,\n  setup(props) {\n    const ns = useNamespace('result')\n\n    const resultIcon = computed(() => {\n      const icon = props.icon\n      const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n      const iconComponent =\n        IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n      return {\n        class: iconClass,\n        component: iconComponent,\n      }\n    })\n\n    return {\n      ns,\n      resultIcon,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;KAWe;0BAAX;;;;;YAEI;;;;oCAGyB;;;eAAiB;;;;;;;;;;;"}

package/lib/components/roving-focus-group/src/roving-focus-group-impl.vue.d.ts

@@ -9,28 +9,17 @@ declare const _default: import("vue").DefineComponent<{
     onBlur: FunctionConstructor;
     onFocus: FunctionConstructor;
     onMousedown: FunctionConstructor;
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("currentTabIdChange" | "entryFocus")[], "currentTabIdChange" | "entryFocus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    style?: unknown;
-    currentTabId?: unknown;
-    defaultCurrentTabId?: unknown;
-    loop?: unknown;
-    dir?: unknown;
-    orientation?: unknown;
-    onBlur?: unknown;
-    onFocus?: unknown;
-    onMousedown?: unknown;
-} & {
-    dir: string;
-    loop: boolean;
-} & {
-    style?: StyleValue | undefined;
-    onFocus?: Function | undefined;
-    onBlur?: Function | undefined;
-    onMousedown?: Function | undefined;
-    currentTabId?: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | null>, unknown, unknown> | undefined;
-    defaultCurrentTabId?: string | undefined;
-    orientation?: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<"horizontal" | "vertical" | undefined>, unknown, unknown>;
-}> & {
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("currentTabIdChange" | "entryFocus")[], "currentTabIdChange" | "entryFocus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    style: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<StyleValue>, unknown, unknown, unknown, unknown>;
+    currentTabId: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | null>, unknown, unknown, unknown, unknown>;
+    defaultCurrentTabId: StringConstructor;
+    loop: BooleanConstructor;
+    dir: import("../../../utils/props").BuildPropReturn<StringConstructor, string, unknown, string, unknown>;
+    orientation: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<"horizontal" | "vertical" | undefined>, unknown, unknown, unknown, unknown>;
+    onBlur: FunctionConstructor;
+    onFocus: FunctionConstructor;
+    onMousedown: FunctionConstructor;
+}>> & {
     onCurrentTabIdChange?: ((...args: any[]) => any) | undefined;
     onEntryFocus?: ((...args: any[]) => any) | undefined;
 }, {

package/lib/components/roving-focus-group/src/roving-focus-group.d.ts

@@ -31,21 +31,21 @@ declare const ElCollection: {
     compatConfig?: (Partial<Record<import("vue").DeprecationTypes, boolean | "suppress-warning">> & {
         MODE?: 2 | 3 | ((comp: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | null) => 2 | 3) | undefined;
     }) | undefined;
-    data?: ((this: import("vue").CreateComponentPublicInstance<Readonly<{} & {} & {}>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<{} & {} & {}>, {}, false, {
+    data?: ((this: import("vue").CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<ExtractPropTypes<{}>>, {}, false, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<{} & {} & {}>, {}, {}, {}, import("vue").MethodOptions, {}>, vm: import("vue").CreateComponentPublicInstance<Readonly<{} & {} & {}>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<{} & {} & {}>, {}, false, {
+    }, Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, {}>, vm: import("vue").CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<ExtractPropTypes<{}>>, {}, false, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<{} & {} & {}>, {}, {}, {}, import("vue").MethodOptions, {}>) => {}) | undefined;
+    }, Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, {}>) => {}) | undefined;
     computed?: {} | undefined;
     methods?: {} | undefined;
     watch?: {
@@ -159,21 +159,21 @@ declare const ElCollection: {
     compatConfig?: (Partial<Record<import("vue").DeprecationTypes, boolean | "suppress-warning">> & {
         MODE?: 2 | 3 | ((comp: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | null) => 2 | 3) | undefined;
     }) | undefined;
-    data?: ((this: import("vue").CreateComponentPublicInstance<Readonly<{} & {} & {}>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<{} & {} & {}>, {}, false, {
+    data?: ((this: import("vue").CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<ExtractPropTypes<{}>>, {}, false, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<{} & {} & {}>, {}, {}, {}, import("vue").MethodOptions, {}>, vm: import("vue").CreateComponentPublicInstance<Readonly<{} & {} & {}>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<{} & {} & {}>, {}, false, {
+    }, Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, {}>, vm: import("vue").CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<ExtractPropTypes<{}>>, {}, false, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<{} & {} & {}>, {}, {}, {}, import("vue").MethodOptions, {}>) => {}) | undefined;
+    }, Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, {}>) => {}) | undefined;
     computed?: {} | undefined;
     methods?: {} | undefined;
     watch?: {

package/lib/components/roving-focus-group/src/roving-focus-group.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/components/roving-focus-group/src/roving-focus-item.vue.d.ts

@@ -12,13 +12,16 @@ declare const _default: import("vue").DefineComponent<{
     handleKeydown: (event: Event) => void;
     handleFocus: (event: Event) => void;
     handleMousedown: (event: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "keydown" | "mousedown")[], "focus" | "keydown" | "mousedown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    focusable?: unknown;
-    active?: unknown;
-} & {
-    active: boolean;
-    focusable: boolean;
-} & {}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "keydown" | "mousedown")[], "focus" | "keydown" | "mousedown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    focusable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onMousedown?: ((...args: any[]) => any) | undefined;

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

@@ -1,23 +1,18 @@
 export declare const ElRow: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
     readonly tag: import("../../utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
     readonly gutter: import("../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
-    readonly justify: import("../../utils/props").BuildPropReturn<StringConstructor, "start", unknown, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    readonly justify: import("../../utils/props").BuildPropReturn<StringConstructor, "start", unknown, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     readonly align: import("../../utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom" | "middle", unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly tag?: unknown;
-    readonly gutter?: unknown;
-    readonly justify?: unknown;
-    readonly align?: unknown;
-} & {
-    align: import("../../utils/props").BuildPropType<StringConstructor, "top" | "bottom" | "middle", unknown>;
-    justify: import("../../utils/props").BuildPropType<StringConstructor, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
-    tag: string;
-    gutter: number;
-} & {}>, {
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly tag: import("../../utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly gutter: import("../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
+    readonly justify: import("../../utils/props").BuildPropReturn<StringConstructor, "start", unknown, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
+    readonly align: import("../../utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom" | "middle", unknown>;
+}>>, {
     align: import("../../utils/props").BuildPropType<StringConstructor, "top" | "bottom" | "middle", unknown>;
-    justify: import("../../utils/props").BuildPropType<StringConstructor, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    justify: import("../../utils/props").BuildPropType<StringConstructor, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     tag: string;
     gutter: number;
 }>> & Record<string, any>;

package/lib/components/row/src/row.d.ts

@@ -2,31 +2,27 @@ import type { ExtractPropTypes } from 'vue';
 export declare const rowProps: {
     readonly tag: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
     readonly gutter: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
-    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     readonly align: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom" | "middle", unknown>;
 };
 export declare type RowProps = ExtractPropTypes<typeof rowProps>;
-declare const _default: import("vue").DefineComponent<{
+declare const Row: import("vue").DefineComponent<{
     readonly tag: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
     readonly gutter: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
-    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     readonly align: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom" | "middle", unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly tag?: unknown;
-    readonly gutter?: unknown;
-    readonly justify?: unknown;
-    readonly align?: unknown;
-} & {
-    align: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "top" | "bottom" | "middle", unknown>;
-    justify: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
-    tag: string;
-    gutter: number;
-} & {}>, {
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    readonly tag: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly gutter: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
+    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
+    readonly align: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom" | "middle", unknown>;
+}>>, {
     align: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "top" | "bottom" | "middle", unknown>;
-    justify: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    justify: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     tag: string;
     gutter: number;
 }>;
-export default _default;
+export default Row;
+export declare type RowInstance = InstanceType<typeof Row>;

package/lib/components/row/src/row.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var props = require('../../../utils/props.js');
+require('../../../hooks/index.js');
+var index = require('../../../hooks/use-namespace/index.js');
 
 const rowProps = props.buildProps({
   tag: {
@@ -25,32 +27,33 @@ const rowProps = props.buildProps({
     default: "top"
   }
 });
-var Row = vue.defineComponent({
+const Row = vue.defineComponent({
   name: "ElRow",
   props: rowProps,
   setup(props, { slots }) {
+    const ns = index.useNamespace("row");
     const gutter = vue.computed(() => props.gutter);
     vue.provide("ElRow", {
       gutter
     });
     const style = vue.computed(() => {
-      const ret = {
+      const styles = {
         marginLeft: "",
         marginRight: ""
       };
       if (props.gutter) {
-        ret.marginLeft = `-${props.gutter / 2}px`;
-        ret.marginRight = ret.marginLeft;
+        styles.marginLeft = `-${props.gutter / 2}px`;
+        styles.marginRight = styles.marginLeft;
       }
-      return ret;
+      return styles;
     });
     return () => {
       var _a;
       return vue.h(props.tag, {
         class: [
-          "el-row",
-          props.justify !== "start" ? `is-justify-${props.justify}` : "",
-          props.align !== "top" ? `is-align-${props.align}` : ""
+          ns.b(),
+          ns.is(`justify-${props.justify}`, props.justify !== "start"),
+          ns.is(`align-${props.align}`, props.align !== "top")
         ],
         style: style.value
       }, (_a = slots.default) == null ? void 0 : _a.call(slots));

package/lib/components/row/src/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sources":["../../../../../../packages/components/row/src/row.ts"],"sourcesContent":["import { defineComponent, computed, h, provide } from 'vue'\nimport { buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const rowProps = buildProps({\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  gutter: {\n    type: Number,\n    default: 0,\n  },\n  justify: {\n    type: String,\n    values: ['start', 'center', 'end', 'space-around', 'space-between'],\n    default: 'start',\n  },\n  align: {\n    type: String,\n    values: ['top', 'middle', 'bottom'],\n    default: 'top',\n  },\n} as const)\nexport type RowProps = ExtractPropTypes<typeof rowProps>\n\nexport default defineComponent({\n  name: 'ElRow',\n  props: rowProps,\n\n  setup(props, { slots }) {\n    const gutter = computed(() => props.gutter)\n    provide('ElRow', {\n      gutter,\n    })\n\n    const style = computed(() => {\n      const ret = {\n        marginLeft: '',\n        marginRight: '',\n      }\n      if (props.gutter) {\n        ret.marginLeft = `-${props.gutter / 2}px`\n        ret.marginRight = ret.marginLeft\n      }\n      return ret\n    })\n\n    return () =>\n      h(\n        props.tag,\n        {\n          class: [\n            'el-row',\n            props.justify !== 'start' ? `is-justify-${props.justify}` : '',\n            props.align !== 'top' ? `is-align-${props.align}` : '',\n          ],\n          style: style.value,\n        },\n        slots.default?.()\n      )\n  },\n})\n"],"names":["buildProps","defineComponent","computed","provide","h"],"mappings":";;;;;;;AAEY,MAAC,QAAQ,GAAGA,gBAAU,CAAC;AACnC,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,CAAC;AACvE,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC;AACvC,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACH,UAAeC,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,KAAK,EAAE,QAAQ;AACjB,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAI,MAAM,MAAM,GAAGC,YAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC;AAChD,IAAIC,WAAO,CAAC,OAAO,EAAE;AACrB,MAAM,MAAM;AACZ,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,KAAK,GAAGD,YAAQ,CAAC,MAAM;AACjC,MAAM,MAAM,GAAG,GAAG;AAClB,QAAQ,UAAU,EAAE,EAAE;AACtB,QAAQ,WAAW,EAAE,EAAE;AACvB,OAAO,CAAC;AACR,MAAM,IAAI,KAAK,CAAC,MAAM,EAAE;AACxB,QAAQ,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AAClD,QAAQ,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,UAAU,CAAC;AACzC,OAAO;AACP,MAAM,OAAO,GAAG,CAAC;AACjB,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,MAAM;AACjB,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,OAAOE,KAAC,CAAC,KAAK,CAAC,GAAG,EAAE;AAC1B,QAAQ,KAAK,EAAE;AACf,UAAU,QAAQ;AAClB,UAAU,KAAK,CAAC,OAAO,KAAK,OAAO,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE;AACxE,UAAU,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;AAChE,SAAS;AACT,QAAQ,KAAK,EAAE,KAAK,CAAC,KAAK;AAC1B,OAAO,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;;"}
+{"version":3,"file":"row.js","sources":["../../../../../../packages/components/row/src/row.ts"],"sourcesContent":["import { defineComponent, computed, h, provide } from 'vue'\nimport { buildProps } from '@element-plus/utils/props'\nimport { useNamespace } from '@element-plus/hooks'\nimport type { ExtractPropTypes, CSSProperties } from 'vue'\n\nexport const rowProps = buildProps({\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  gutter: {\n    type: Number,\n    default: 0,\n  },\n  justify: {\n    type: String,\n    values: ['start', 'center', 'end', 'space-around', 'space-between'],\n    default: 'start',\n  },\n  align: {\n    type: String,\n    values: ['top', 'middle', 'bottom'],\n    default: 'top',\n  },\n} as const)\nexport type RowProps = ExtractPropTypes<typeof rowProps>\n\nconst Row = defineComponent({\n  name: 'ElRow',\n  props: rowProps,\n\n  setup(props, { slots }) {\n    const ns = useNamespace('row')\n\n    const gutter = computed(() => props.gutter)\n    provide('ElRow', {\n      gutter,\n    })\n\n    const style = computed(() => {\n      const styles: CSSProperties = {\n        marginLeft: '',\n        marginRight: '',\n      }\n      if (props.gutter) {\n        styles.marginLeft = `-${props.gutter / 2}px`\n        styles.marginRight = styles.marginLeft\n      }\n      return styles\n    })\n\n    return () =>\n      h(\n        props.tag,\n        {\n          class: [\n            ns.b(),\n            ns.is(`justify-${props.justify}`, props.justify !== 'start'),\n            ns.is(`align-${props.align}`, props.align !== 'top'),\n          ],\n          style: style.value,\n        },\n        slots.default?.()\n      )\n  },\n})\n\nexport default Row\nexport type RowInstance = InstanceType<typeof Row>\n"],"names":["buildProps","defineComponent","useNamespace","computed","provide","h"],"mappings":";;;;;;;;;AAGY,MAAC,QAAQ,GAAGA,gBAAU,CAAC;AACnC,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,CAAC;AACvE,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC;AACvC,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACE,MAAC,GAAG,GAAGC,mBAAe,CAAC;AAC5B,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,KAAK,EAAE,QAAQ;AACjB,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAI,MAAM,EAAE,GAAGC,kBAAY,CAAC,KAAK,CAAC,CAAC;AACnC,IAAI,MAAM,MAAM,GAAGC,YAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC;AAChD,IAAIC,WAAO,CAAC,OAAO,EAAE;AACrB,MAAM,MAAM;AACZ,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,KAAK,GAAGD,YAAQ,CAAC,MAAM;AACjC,MAAM,MAAM,MAAM,GAAG;AACrB,QAAQ,UAAU,EAAE,EAAE;AACtB,QAAQ,WAAW,EAAE,EAAE;AACvB,OAAO,CAAC;AACR,MAAM,IAAI,KAAK,CAAC,MAAM,EAAE;AACxB,QAAQ,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACrD,QAAQ,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/C,OAAO;AACP,MAAM,OAAO,MAAM,CAAC;AACpB,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,MAAM;AACjB,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,OAAOE,KAAC,CAAC,KAAK,CAAC,GAAG,EAAE;AAC1B,QAAQ,KAAK,EAAE;AACf,UAAU,EAAE,CAAC,CAAC,EAAE;AAChB,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC;AACtE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC;AAC9D,SAAS;AACT,QAAQ,KAAK,EAAE,KAAK,CAAC,KAAK;AAC1B,OAAO,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG;AACH,CAAC;;;;;"}

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

@@ -30,39 +30,27 @@ export declare const ElScrollbar: import("../../utils/types").SFCWithInstall<imp
         scrollTop: number;
         scrollLeft: number;
     }) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly height?: unknown;
-    readonly maxHeight?: unknown;
-    readonly native?: unknown;
-    readonly wrapStyle?: unknown;
-    readonly wrapClass?: unknown;
-    readonly viewClass?: unknown;
-    readonly viewStyle?: unknown;
-    readonly noresize?: unknown;
-    readonly tag?: unknown;
-    readonly always?: unknown;
-    readonly minSize?: unknown;
-} & {
-    height: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    always: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    maxHeight: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    native: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    wrapStyle: import("vue").StyleValue;
-    wrapClass: import("../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
-    viewClass: import("../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
-    viewStyle: import("../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
-    tag: string;
-    minSize: number;
-    noresize: boolean;
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly height: import("../../utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly maxHeight: import("../../utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly native: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly wrapStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("vue").StyleValue>, "", unknown, unknown, unknown>;
+    readonly wrapClass: import("../../utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewClass: import("../../utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewStyle: import("../../utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly noresize: BooleanConstructor;
+    readonly tag: import("../../utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly always: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly minSize: import("../../utils/props").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
+}>> & {
     onScroll?: ((args_0: {
         scrollTop: number;
         scrollLeft: number;
     }) => any) | undefined;
 }, {
     height: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    always: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     maxHeight: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    always: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     native: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     wrapStyle: import("vue").StyleValue;
     wrapClass: import("../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;

package/lib/components/scrollbar/src/bar.vue.d.ts

@@ -30,20 +30,13 @@ declare const _default: import("vue").DefineComponent<{
     visible: import("vue").Ref<boolean>;
     clickTrackHandler: (e: MouseEvent) => void;
     clickThumbHandler: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly vertical?: unknown;
-    readonly size?: unknown;
-    readonly move?: unknown;
-    readonly ratio?: unknown;
-    readonly always?: unknown;
-} & {
-    always: boolean;
-    vertical: boolean;
-    ratio: number;
-} & {
-    size?: string | undefined;
-    move?: number | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly vertical: BooleanConstructor;
+    readonly size: StringConstructor;
+    readonly move: NumberConstructor;
+    readonly ratio: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly always: BooleanConstructor;
+}>>, {
     always: boolean;
     vertical: boolean;
 }>;

package/lib/components/scrollbar/src/bar.vue_vue_type_script_lang.js

@@ -24,7 +24,7 @@ var script = vue.defineComponent({
     const visible = vue.ref(false);
     let cursorDown = false;
     let cursorLeave = false;
-    let onselectstartStore = null;
+    let onselectstartStore = core.isClient ? document.onselectstart : null;
     const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
     const thumbStyle = vue.computed(() => util.renderThumbStyle({
       size: props.size,
@@ -78,7 +78,7 @@ var script = vue.defineComponent({
       barStore.value[bar.value.axis] = 0;
       document.removeEventListener("mousemove", mouseMoveDocumentHandler);
       document.removeEventListener("mouseup", mouseUpDocumentHandler);
-      document.onselectstart = onselectstartStore;
+      restoreOnselectstart();
       if (cursorLeave)
         visible.value = false;
     };
@@ -90,7 +90,14 @@ var script = vue.defineComponent({
       cursorLeave = true;
       visible.value = cursorDown;
     };
-    vue.onBeforeUnmount(() => document.removeEventListener("mouseup", mouseUpDocumentHandler));
+    vue.onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== onselectstartStore)
+        document.onselectstart = onselectstartStore;
+    };
     core.useEventListener(vue.toRef(scrollbar$1, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
     core.useEventListener(vue.toRef(scrollbar$1, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
     return {

package/lib/components/scrollbar/src/bar.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { barProps } from './bar'\n\nconst COMPONENT_NAME = 'Bar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: barProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const barStore = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let onselectstartStore:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const offsetRatio = computed(\n      () =>\n        // offsetRatioX = original width of thumb / current width of thumb / ratioX\n        // offsetRatioY = original height of thumb / current height of thumb / ratioY\n        // instance height = wrap height - GAP\n        instance.value![bar.value.offset] ** 2 /\n        scrollbar.wrapElement![bar.value.scrollSize] /\n        props.ratio /\n        thumb.value![bar.value.offset]\n    )\n\n    const clickThumbHandler = (e: MouseEvent) => {\n      // prevent click event of middle and right button\n      e.stopPropagation()\n      if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n      window.getSelection()?.removeAllRanges()\n      startDrag(e)\n\n      const el = e.currentTarget as HTMLDivElement\n      if (!el) return\n      barStore.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumb.value[bar.value.offset] / 2\n      const thumbPositionPercentage =\n        ((offset - thumbHalf) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = barStore.value[bar.value.axis]\n      if (!prevPage) return\n\n      const offset =\n        (instance.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n      const thumbPositionPercentage =\n        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      barStore.value[bar.value.axis] = 0\n      document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n      document.onselectstart = onselectstartStore\n      if (cursorLeave) visible.value = false\n    }\n\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() =>\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    )\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","barProps","scrollbar","inject","ref","computed","useEventListener","toRef"],"mappings":";;;;;;;;;;;;;AAgCA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAEC,YAAQ;AACjB,EAAE,KAAK,CAAC,KAAK,EAAE;IACX,MAAMC,WAAS,GAAGC;IAClB,KAAKD;;IAEL,MAAM;IACN,MAAM,KAAK,GAAGE,SAAK,CAAC;IACpB,MAAM,QAAQ;UACR,OAAO,GAAGA,OAAG,CAAC,KAAK,CAAC,CAAC;;IAE3B,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,kBAAkB,GAAG,IAAI,CAAC;;IAE9B,MAAM,aAAaC;MACjB,IAAI,EAAE,MAAM,IAAI;;MAEhB,GAAG,EAAE,GAAG,CAAC;KACV,CAAC,EAAE;IACJ,MAAM,WAAW,GAAGA;UACd,iBAAiB,GAAG,CAAC,CAAC,KAAK;MAC/B,IAAI,GAAG;;MAEP,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC;eACT;;;MAGT,MAAM,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC;MAC3B,IAAI,CAAC,EAAE;QACL,OAAO;cACD,CAAC,KAAK,CAAC,GAAG;;;;;MAKlB,MAAM,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;MAC1B;YACM,uBAAuB,GAAG,CAAC,MAAM,GAAG,SAAS,IAAI,GAAG,GAAG,WAAW,CAAC;iBAChE,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,uBAAuB,GAAGH,WAAS,CAAC;;UAE1E,SAAS,GAAG,CAAC,CAAC,KAAK;QACrB,wBAAwB,EAAE,CAAC;gBACnB;cACF,CAAC,gBAAgB,CAAC;;;MAG1B,QAAQ,CAAC,aAAa,GAAG,MAAM,KAAK,CAAC;MACrC;UACI;MACJ,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK;;MAEnC,IAAI,UAAU,KAAK,KAAK;QACtB,OAAO;;MAET,IAAI,SAAS;eACJ;MACT,MAAM,MAAM,GAAG,CAAC,QAAQ,CAAC,MAAM;YACzB;YACA,uBAAuB,GAAG,CAAC,MAAM,GAAG,kBAAkB,IAAI,GAAG,GAAG;;;IAGxE,MAAM,sBAAsB,GAAG,MAAM;MACnC,UAAU,GAAG,KAAK;;MAElB,QAAQ,CAAC;cACD,CAAC,mBAAmB,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAC;cACxD,CAAC,aAAa;MACtB;QACE,OAAO,CAAC,QAAQ,KAAK,CAAC;MACxB;UACI,4BAA4B,MAAM;iBAC3B,GAAG,KAAK,CAAC;;MAEpB;UACI;iBACO,GAAG,IAAI,CAAC;;;;IAIrBI,qBAAgB,UAAM,CAACJ,WAAS,EAAE;yBAClB,CAACK,SAAK,CAACL;WAChB;MACL,QAAQ;MACR,KAAK;MACL,GAAG;MACH,UAAU;;;MAGV,iBAAiB;MACjB;;;;;;"}
+{"version":3,"file":"bar.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener, isClient } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { barProps } from './bar'\n\nconst COMPONENT_NAME = 'Bar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: barProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const barStore = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let onselectstartStore:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const offsetRatio = computed(\n      () =>\n        // offsetRatioX = original width of thumb / current width of thumb / ratioX\n        // offsetRatioY = original height of thumb / current height of thumb / ratioY\n        // instance height = wrap height - GAP\n        instance.value![bar.value.offset] ** 2 /\n        scrollbar.wrapElement![bar.value.scrollSize] /\n        props.ratio /\n        thumb.value![bar.value.offset]\n    )\n\n    const clickThumbHandler = (e: MouseEvent) => {\n      // prevent click event of middle and right button\n      e.stopPropagation()\n      if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n      window.getSelection()?.removeAllRanges()\n      startDrag(e)\n\n      const el = e.currentTarget as HTMLDivElement\n      if (!el) return\n      barStore.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumb.value[bar.value.offset] / 2\n      const thumbPositionPercentage =\n        ((offset - thumbHalf) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = barStore.value[bar.value.axis]\n      if (!prevPage) return\n\n      const offset =\n        (instance.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n      const thumbPositionPercentage =\n        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      barStore.value[bar.value.axis] = 0\n      document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n      restoreOnselectstart()\n      if (cursorLeave) visible.value = false\n    }\n\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== onselectstartStore)\n        document.onselectstart = onselectstartStore\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","barProps","scrollbar","inject","ref","isClient","computed","useEventListener"],"mappings":";;;;;;;;;;;;;AAgCA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAEC,YAAQ;AACjB,EAAE,KAAK,CAAC,KAAK,EAAE;IACX,MAAMC,WAAS,GAAGC;IAClB,KAAKD;;IAEL,MAAM;IACN,MAAM,KAAK,GAAGE,SAAK,CAAC;IACpB,MAAM,QAAQ;UACR,OAAO,GAAGA,OAAG,CAAC,KAAK,CAAC,CAAC;;IAE3B,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,kBAAkB,GAAGC,aAAQ;;IAEjC,MAAM,aAAaC;MACjB,IAAI,EAAE,MAAM,IAAI;;MAEhB,GAAG,EAAE,GAAG,CAAC;KACV,CAAC,EAAE;IACJ,MAAM,WAAW,GAAGA;UACd,iBAAiB,GAAG,CAAC,CAAC,KAAK;MAC/B,IAAI,GAAG;;MAEP,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC;eACT;;;MAGT,MAAM,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC;MAC3B,IAAI,CAAC,EAAE;QACL,OAAO;cACD,CAAC,KAAK,CAAC,GAAG;;;;;MAKlB,MAAM,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;MAC1B;YACM,uBAAuB,GAAG,CAAC,MAAM,GAAG,SAAS,IAAI,GAAG,GAAG,WAAW,CAAC;iBAChE,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,uBAAuB,GAAGJ,WAAS,CAAC;;UAE1E,SAAS,GAAG,CAAC,CAAC,KAAK;QACrB,wBAAwB,EAAE,CAAC;gBACnB;cACF,CAAC,gBAAgB,CAAC;;;MAG1B,QAAQ,CAAC,aAAa,GAAG,MAAM,KAAK,CAAC;MACrC;UACI;MACJ,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK;;MAEnC,IAAI,UAAU,KAAK,KAAK;QACtB,OAAO;;MAET,IAAI,SAAS;eACJ;MACT,MAAM,MAAM,GAAG,CAAC,QAAQ,CAAC,MAAM;YACzB;YACA,uBAAuB,GAAG,CAAC,MAAM,GAAG,kBAAkB,IAAI,GAAG,GAAG;;;IAGxE,MAAM,sBAAsB,GAAG,MAAM;MACnC,UAAU,GAAG,KAAK;;MAElB,QAAQ,CAAC;cACD,CAAC,mBAAmB,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAC;0BAC5C,EAAE;MACtB;QACE,OAAO,CAAC,QAAQ,KAAK,CAAC;MACxB;UACI,4BAA4B,MAAM;iBAC3B,GAAG,KAAK,CAAC;;MAEpB;UACI;iBACO,GAAG,IAAI,CAAC;;;;MAInB,oBAAoB,EAAE,CAAC;MACvB,QAAQ,CAAC;MACT,CAAC;UACG,oBAAoB,GAAG,MAAM;MACjC,IAAI,QAAQ,CAAC,aAAa,KAAK,kBAAkB;QAC/C,QAAQ,CAAC,aAAa,GAAG;MAC3B;IACFK;;IAEA,OAAO;MACL,QAAQ;MACR,KAAK;;MAEL,UAAU;MACV,OAAO;;MAEP;;;;;;;"}

package/lib/components/scrollbar/src/bar.vue_vue_type_template_id_2f63f10a_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar.vue_vue_type_template_id_2f63f10a_lang.js","sources":["../../../../../../packages/components/scrollbar/src/bar.vue?vue&type=template&id=2f63f10a&lang.js"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { barProps } from './bar'\n\nconst COMPONENT_NAME = 'Bar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: barProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const barStore = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let onselectstartStore:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const offsetRatio = computed(\n      () =>\n        // offsetRatioX = original width of thumb / current width of thumb / ratioX\n        // offsetRatioY = original height of thumb / current height of thumb / ratioY\n        // instance height = wrap height - GAP\n        instance.value![bar.value.offset] ** 2 /\n        scrollbar.wrapElement![bar.value.scrollSize] /\n        props.ratio /\n        thumb.value![bar.value.offset]\n    )\n\n    const clickThumbHandler = (e: MouseEvent) => {\n      // prevent click event of middle and right button\n      e.stopPropagation()\n      if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n      window.getSelection()?.removeAllRanges()\n      startDrag(e)\n\n      const el = e.currentTarget as HTMLDivElement\n      if (!el) return\n      barStore.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumb.value[bar.value.offset] / 2\n      const thumbPositionPercentage =\n        ((offset - thumbHalf) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = barStore.value[bar.value.axis]\n      if (!prevPage) return\n\n      const offset =\n        (instance.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n      const thumbPositionPercentage =\n        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      barStore.value[bar.value.axis] = 0\n      document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n      document.onselectstart = onselectstartStore\n      if (cursorLeave) visible.value = false\n    }\n\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() =>\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    )\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_normalizeStyle"],"mappings":";;;;;;;;;yBAEIA;;QAEE,KAAI;QACH;;;;UAIC,KAAI;UACJ,KAAK,EAACC;UACL;;;;;;;;;;;;"}
+{"version":3,"file":"bar.vue_vue_type_template_id_2f63f10a_lang.js","sources":["../../../../../../packages/components/scrollbar/src/bar.vue?vue&type=template&id=2f63f10a&lang.js"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener, isClient } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { barProps } from './bar'\n\nconst COMPONENT_NAME = 'Bar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: barProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const barStore = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let onselectstartStore:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const offsetRatio = computed(\n      () =>\n        // offsetRatioX = original width of thumb / current width of thumb / ratioX\n        // offsetRatioY = original height of thumb / current height of thumb / ratioY\n        // instance height = wrap height - GAP\n        instance.value![bar.value.offset] ** 2 /\n        scrollbar.wrapElement![bar.value.scrollSize] /\n        props.ratio /\n        thumb.value![bar.value.offset]\n    )\n\n    const clickThumbHandler = (e: MouseEvent) => {\n      // prevent click event of middle and right button\n      e.stopPropagation()\n      if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n      window.getSelection()?.removeAllRanges()\n      startDrag(e)\n\n      const el = e.currentTarget as HTMLDivElement\n      if (!el) return\n      barStore.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumb.value[bar.value.offset] / 2\n      const thumbPositionPercentage =\n        ((offset - thumbHalf) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = barStore.value[bar.value.axis]\n      if (!prevPage) return\n\n      const offset =\n        (instance.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n      const thumbPositionPercentage =\n        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      barStore.value[bar.value.axis] = 0\n      document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n      restoreOnselectstart()\n      if (cursorLeave) visible.value = false\n    }\n\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== onselectstartStore)\n        document.onselectstart = onselectstartStore\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_normalizeStyle"],"mappings":";;;;;;;;;yBAEIA;;QAEE,KAAI;QACH;;;;UAIC,KAAI;UACJ,KAAK,EAACC;UACL;;;;;;;;;;;;"}