@element-plus/nightly 0.0.20220124 → 0.0.20220128

package/es/components/transfer/src/index.vue.d.ts

@@ -58,6 +58,252 @@ declare const _default: import("vue").DefineComponent<{
     rightPanelTitle: import("vue").ComputedRef<string>;
     panelFilterPlaceholder: import("vue").ComputedRef<string>;
     clearQuery: (which: 'left' | 'right') => void;
+    leftPanel: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            data: unknown[];
+            filterable: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: ArrayConstructor;
+                default(): never[];
+            };
+            optionRender: FunctionConstructor;
+            placeholder: StringConstructor;
+            title: StringConstructor;
+            filterable: BooleanConstructor;
+            format: ObjectConstructor;
+            filterMethod: FunctionConstructor;
+            defaultChecked: ArrayConstructor;
+            props: ObjectConstructor;
+        }>> & {
+            "onChecked-change"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "filterable">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "checked-change", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: ArrayConstructor;
+                default(): never[];
+            };
+            optionRender: FunctionConstructor;
+            placeholder: StringConstructor;
+            title: StringConstructor;
+            filterable: BooleanConstructor;
+            format: ObjectConstructor;
+            filterMethod: FunctionConstructor;
+            defaultChecked: ArrayConstructor;
+            props: ObjectConstructor;
+        }>> & {
+            "onChecked-change"?: ((...args: any[]) => any) | undefined;
+        }, {
+            labelProp: import("vue").ComputedRef<any>;
+            keyProp: import("vue").ComputedRef<any>;
+            disabledProp: import("vue").ComputedRef<any>;
+            filteredData: import("vue").ComputedRef<unknown[]>;
+            checkedSummary: import("vue").ComputedRef<any>;
+            isIndeterminate: import("vue").ComputedRef<boolean>;
+            handleAllCheckedChange: (value: Key[]) => void;
+            checked: import("vue").Ref<never[]>;
+            allChecked: import("vue").Ref<boolean>;
+            query: import("vue").Ref<string>;
+            inputHover: import("vue").Ref<boolean>;
+            checkChangeByUser: import("vue").Ref<boolean>;
+            hasNoMatch: import("vue").ComputedRef<boolean>;
+            SearchIcon: 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<{}>>, {}>;
+            hasFooter: import("vue").ComputedRef<boolean>;
+            t: import("element-plus/es/hooks").Translator;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "checked-change"[], string, {
+            data: unknown[];
+            filterable: boolean;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        data: {
+            type: ArrayConstructor;
+            default(): never[];
+        };
+        optionRender: FunctionConstructor;
+        placeholder: StringConstructor;
+        title: StringConstructor;
+        filterable: BooleanConstructor;
+        format: ObjectConstructor;
+        filterMethod: FunctionConstructor;
+        defaultChecked: ArrayConstructor;
+        props: ObjectConstructor;
+    }>> & {
+        "onChecked-change"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{
+        labelProp: import("vue").ComputedRef<any>;
+        keyProp: import("vue").ComputedRef<any>;
+        disabledProp: import("vue").ComputedRef<any>;
+        filteredData: import("vue").ComputedRef<unknown[]>;
+        checkedSummary: import("vue").ComputedRef<any>;
+        isIndeterminate: import("vue").ComputedRef<boolean>;
+        handleAllCheckedChange: (value: Key[]) => void;
+        checked: import("vue").Ref<never[]>;
+        allChecked: import("vue").Ref<boolean>;
+        query: import("vue").Ref<string>;
+        inputHover: import("vue").Ref<boolean>;
+        checkChangeByUser: import("vue").Ref<boolean>;
+        hasNoMatch: import("vue").ComputedRef<boolean>;
+        SearchIcon: 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<{}>>, {}>;
+        hasFooter: import("vue").ComputedRef<boolean>;
+        t: import("element-plus/es/hooks").Translator;
+    }> & {} & {} & import("vue").ComponentCustomProperties) | undefined>;
+    rightPanel: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            data: unknown[];
+            filterable: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: ArrayConstructor;
+                default(): never[];
+            };
+            optionRender: FunctionConstructor;
+            placeholder: StringConstructor;
+            title: StringConstructor;
+            filterable: BooleanConstructor;
+            format: ObjectConstructor;
+            filterMethod: FunctionConstructor;
+            defaultChecked: ArrayConstructor;
+            props: ObjectConstructor;
+        }>> & {
+            "onChecked-change"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "filterable">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "checked-change", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: ArrayConstructor;
+                default(): never[];
+            };
+            optionRender: FunctionConstructor;
+            placeholder: StringConstructor;
+            title: StringConstructor;
+            filterable: BooleanConstructor;
+            format: ObjectConstructor;
+            filterMethod: FunctionConstructor;
+            defaultChecked: ArrayConstructor;
+            props: ObjectConstructor;
+        }>> & {
+            "onChecked-change"?: ((...args: any[]) => any) | undefined;
+        }, {
+            labelProp: import("vue").ComputedRef<any>;
+            keyProp: import("vue").ComputedRef<any>;
+            disabledProp: import("vue").ComputedRef<any>;
+            filteredData: import("vue").ComputedRef<unknown[]>;
+            checkedSummary: import("vue").ComputedRef<any>;
+            isIndeterminate: import("vue").ComputedRef<boolean>;
+            handleAllCheckedChange: (value: Key[]) => void;
+            checked: import("vue").Ref<never[]>;
+            allChecked: import("vue").Ref<boolean>;
+            query: import("vue").Ref<string>;
+            inputHover: import("vue").Ref<boolean>;
+            checkChangeByUser: import("vue").Ref<boolean>;
+            hasNoMatch: import("vue").ComputedRef<boolean>;
+            SearchIcon: 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<{}>>, {}>;
+            hasFooter: import("vue").ComputedRef<boolean>;
+            t: import("element-plus/es/hooks").Translator;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "checked-change"[], string, {
+            data: unknown[];
+            filterable: boolean;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        data: {
+            type: ArrayConstructor;
+            default(): never[];
+        };
+        optionRender: FunctionConstructor;
+        placeholder: StringConstructor;
+        title: StringConstructor;
+        filterable: BooleanConstructor;
+        format: ObjectConstructor;
+        filterMethod: FunctionConstructor;
+        defaultChecked: ArrayConstructor;
+        props: ObjectConstructor;
+    }>> & {
+        "onChecked-change"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{
+        labelProp: import("vue").ComputedRef<any>;
+        keyProp: import("vue").ComputedRef<any>;
+        disabledProp: import("vue").ComputedRef<any>;
+        filteredData: import("vue").ComputedRef<unknown[]>;
+        checkedSummary: import("vue").ComputedRef<any>;
+        isIndeterminate: import("vue").ComputedRef<boolean>;
+        handleAllCheckedChange: (value: Key[]) => void;
+        checked: import("vue").Ref<never[]>;
+        allChecked: import("vue").Ref<boolean>;
+        query: import("vue").Ref<string>;
+        inputHover: import("vue").Ref<boolean>;
+        checkChangeByUser: import("vue").Ref<boolean>;
+        hasNoMatch: import("vue").ComputedRef<boolean>;
+        SearchIcon: 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<{}>>, {}>;
+        hasFooter: import("vue").ComputedRef<boolean>;
+        t: import("element-plus/es/hooks").Translator;
+    }> & {} & {} & import("vue").ComponentCustomProperties) | undefined>;
     optionRender: import("vue").ComputedRef<(option: any) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/es/index.mjs

@@ -100,7 +100,7 @@ export { rowProps } from './components/row/src/row.mjs';
 export { ElRow } from './components/row/index.mjs';
 export { BAR_MAP, renderThumbStyle } from './components/scrollbar/src/util.mjs';
 export { scrollbarEmits, scrollbarProps } from './components/scrollbar/src/scrollbar.mjs';
-export { barProps } from './components/scrollbar/src/bar.mjs';
+export { thumbProps } from './components/scrollbar/src/thumb.mjs';
 export { ElScrollbar } from './components/scrollbar/index.mjs';
 export { selectGroupKey, selectKey } from './components/select/src/token.mjs';
 export { ElOption, ElOptionGroup, ElSelect } from './components/select/index.mjs';

package/es/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.20220124";
+export declare const version = "0.0.20220128";

package/es/version.mjs

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

package/es/version.mjs.map

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

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

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

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

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

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

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

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

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

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

@@ -85,6 +85,17 @@ export declare const ElCarousel: import("../../utils/types").SFCWithInstall<impo
     next: () => void;
     setActiveItem: (index: any) => void;
     root: import("vue").Ref<null>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     initialIndex: {
         type: NumberConstructor;

package/lib/components/carousel/src/item.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var util = require('../../../utils/util.js');
 var error = require('../../../utils/error.js');
+require('../../../hooks/index.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
 
 const CARD_SCALE = 0.83;
 const _sfc_main = vue.defineComponent({
@@ -18,6 +20,7 @@ const _sfc_main = vue.defineComponent({
     }
   },
   setup(props) {
+    const ns = index.useNamespace("carousel");
     const instance = vue.getCurrentInstance();
     const data = vue.reactive({
       hover: false,
@@ -118,27 +121,28 @@ const _sfc_main = vue.defineComponent({
       itemStyle,
       translateItem,
       type: injectCarouselScope.type,
-      handleItemClick
+      handleItemClick,
+      ns
     };
   }
 });
-const _hoisted_1 = {
-  key: 0,
-  class: "el-carousel__mask"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(["el-carousel__item", {
-      "is-active": _ctx.data.active,
-      "el-carousel__item--card": _ctx.type === "card",
-      "is-in-stage": _ctx.data.inStage,
-      "is-hover": _ctx.data.hover,
-      "is-animating": _ctx.data.animating
-    }]),
+    class: vue.normalizeClass([
+      _ctx.ns.e("item"),
+      _ctx.ns.is("active", _ctx.data.active),
+      _ctx.ns.is("in-stage", _ctx.data.inStage),
+      _ctx.ns.is("hover", _ctx.data.hover),
+      _ctx.ns.is("animating", _ctx.data.animating),
+      { [_ctx.ns.em("item", "card")]: _ctx.type === "card" }
+    ]),
     style: vue.normalizeStyle(_ctx.itemStyle),
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args))
   }, [
-    _ctx.type === "card" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1, null, 512)), [
+    _ctx.type === "card" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: vue.normalizeClass(_ctx.ns.e("mask"))
+    }, null, 2)), [
       [vue.vShow, !_ctx.data.active]
     ]) : vue.createCommentVNode("v-if", true),
     vue.renderSlot(_ctx.$slots, "default")

package/lib/components/carousel/src/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../../../../packages/components/carousel/src/item.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"data.ready\"\n    class=\"el-carousel__item\"\n    :class=\"{\n      'is-active': data.active,\n      'el-carousel__item--card': type === 'card',\n      'is-in-stage': data.inStage,\n      'is-hover': data.hover,\n      'is-animating': data.animating,\n    }\"\n    :style=\"itemStyle\"\n    @click=\"handleItemClick\"\n  >\n    <div\n      v-if=\"type === 'card'\"\n      v-show=\"!data.active\"\n      class=\"el-carousel__mask\"\n    ></div>\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  reactive,\n  onMounted,\n  inject,\n  computed,\n  toRefs,\n  getCurrentInstance,\n  onUnmounted,\n} from 'vue'\nimport { autoprefixer } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport type { CSSProperties } from 'vue'\nimport type { InjectCarouselScope, ICarouselItemProps } from './carousel'\n\nconst CARD_SCALE = 0.83\nexport default defineComponent({\n  name: 'ElCarouselItem',\n  props: {\n    name: { type: String, default: '' },\n    label: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n  setup(props: ICarouselItemProps) {\n    // instance\n    const instance = getCurrentInstance()\n\n    // data\n    const data = reactive({\n      hover: false,\n      translate: 0,\n      scale: 1,\n      active: false,\n      ready: false,\n      inStage: false,\n      animating: false,\n    })\n\n    // inject\n    const injectCarouselScope: InjectCarouselScope = inject(\n      'injectCarouselScope'\n    )\n\n    // computed\n    const parentDirection = computed(() => {\n      return injectCarouselScope.direction\n    })\n\n    const itemStyle = computed(() => {\n      const translateType =\n        parentDirection.value === 'vertical' ? 'translateY' : 'translateX'\n      const value = `${translateType}(${data.translate}px) scale(${data.scale})`\n      const style: CSSProperties = {\n        transform: value,\n      }\n      return autoprefixer(style)\n    })\n\n    // methods\n\n    function processIndex(index, activeIndex, length) {\n      if (activeIndex === 0 && index === length - 1) {\n        return -1\n      } else if (activeIndex === length - 1 && index === 0) {\n        return length\n      } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {\n        return length + 1\n      } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {\n        return -2\n      }\n      return index\n    }\n\n    function calcCardTranslate(index, activeIndex) {\n      const parentWidth = injectCarouselScope.root.value?.offsetWidth || 0\n      if (data.inStage) {\n        return (\n          (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n        )\n      } else if (index < activeIndex) {\n        return (-(1 + CARD_SCALE) * parentWidth) / 4\n      } else {\n        return ((3 + CARD_SCALE) * parentWidth) / 4\n      }\n    }\n\n    function calcTranslate(index, activeIndex, isVertical) {\n      const distance =\n        (isVertical\n          ? injectCarouselScope.root.value?.offsetHeight\n          : injectCarouselScope.root.value?.offsetWidth) || 0\n      return distance * (index - activeIndex)\n    }\n\n    const translateItem = (\n      index: number,\n      activeIndex: number,\n      oldIndex: number\n    ) => {\n      const parentType = injectCarouselScope.type\n      const length = injectCarouselScope.items.value.length\n      if (parentType !== 'card' && oldIndex !== undefined) {\n        data.animating = index === activeIndex || index === oldIndex\n      }\n      if (index !== activeIndex && length > 2 && injectCarouselScope.loop) {\n        index = processIndex(index, activeIndex, length)\n      }\n      if (parentType === 'card') {\n        if (parentDirection.value === 'vertical') {\n          debugWarn(\n            'Carousel',\n            'vertical direction is not supported in card mode'\n          )\n        }\n        data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1\n        data.active = index === activeIndex\n        data.translate = calcCardTranslate(index, activeIndex)\n        data.scale = data.active ? 1 : CARD_SCALE\n      } else {\n        data.active = index === activeIndex\n        const isVertical = parentDirection.value === 'vertical'\n        data.translate = calcTranslate(index, activeIndex, isVertical)\n      }\n      data.ready = true\n    }\n\n    function handleItemClick() {\n      if (injectCarouselScope && injectCarouselScope.type === 'card') {\n        const index = injectCarouselScope.items.value\n          .map((d) => d.uid)\n          .indexOf(instance.uid)\n        injectCarouselScope.setActiveItem(index)\n      }\n    }\n\n    // lifecycle\n    onMounted(() => {\n      if (injectCarouselScope.addItem) {\n        injectCarouselScope.addItem({\n          uid: instance.uid,\n          ...props,\n          ...toRefs(data),\n          translateItem,\n        })\n      }\n    })\n\n    onUnmounted(() => {\n      if (injectCarouselScope.removeItem) {\n        injectCarouselScope.removeItem(instance.uid)\n      }\n    })\n\n    return {\n      data,\n      itemStyle,\n      translateItem,\n      type: injectCarouselScope.type,\n      handleItemClick,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","getCurrentInstance","reactive","inject","computed","autoprefixer"],"mappings":";;;;;;;;;AAsCA,MAAM,aAAa;AACnB,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM,EAAE,MAAM,QAAQ,SAAS;AAAA,IAC/B,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAA2B;AAE/B,UAAM,WAAWC;AAGjB,UAAM,OAAOC,aAAS;AAAA,MACpB,OAAO;AAAA,MACP,WAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA;AAIb,UAAM,sBAA2CC,WAC/C;AAIF,UAAM,kBAAkBC,aAAS,MAAM;AACrC,aAAO,oBAAoB;AAAA;AAG7B,UAAM,YAAYA,aAAS,MAAM;AAC/B,YAAM,gBACJ,gBAAgB,UAAU,aAAa,eAAe;AACxD,YAAM,QAAQ,GAAG,iBAAiB,KAAK,sBAAsB,KAAK;AAClE,YAAM,QAAuB;AAAA,QAC3B,WAAW;AAAA;AAEb,aAAOC,kBAAa;AAAA;AAKtB,0BAAsB,OAAO,aAAa,QAAQ;AAChD,UAAI,gBAAgB,KAAK,UAAU,SAAS,GAAG;AAC7C,eAAO;AAAA,iBACE,gBAAgB,SAAS,KAAK,UAAU,GAAG;AACpD,eAAO;AAAA,iBACE,QAAQ,cAAc,KAAK,cAAc,SAAS,SAAS,GAAG;AACvE,eAAO,SAAS;AAAA,iBACP,QAAQ,cAAc,KAAK,QAAQ,eAAe,SAAS,GAAG;AACvE,eAAO;AAAA;AAET,aAAO;AAAA;AAGT,+BAA2B,OAAO,aAAa;AAC7C,YAAM;AACN;AACE,eACG;AAAgE;AAGnE;AAA2C;AAE3C;AAA0C;AAAA;AAI9C;AACE,yDAE0B;AAE1B;AAA2B;AAG7B;AAKE;AACA,+CAAyC;AACzC,yBAAmB;AACjB,4DAAoD;AAAA;AAEtD,mCAA6B,kCAAkC;AAC7D;AAAyC;AAE3C;AACE;AACE,oBACE;AACA;AAGJ;AACA;AACA,aAAK,8BAA8B;AACnC,aAAK;AAA0B,aAC1B;AACL,aAAK,mBAAmB;AACxB;AACA,aAAK;AAA8C;AAErD;AAAa;AAGf;AACE;AACE;AAGA;AAAkC;AAAA;AAKtC;AACE;AACE;AAA4B,UAC1B;AAAc;AACX,aACA;AAAO,UACV;AAAA;AAAA;AAAA;AAKN;AACE;AACE;AAAwC;AAAA;AAI5C;AAAO,MACL;AAAA;AACA,MACA;AAAA,MACA;AAA0B,MAC1B;AAAA;AAAA;AAAA;;;AAtKK;;;;AAdkB,2BACI,sBAAW;AAAA;;AAAqF;AAAyB;AAA6B;;;AAQ7K;;AAGE,2CACG;AAAW;SAGtB;AAAa;;AAjBK;;;;;;;;;"}
+{"version":3,"file":"item.js","sources":["../../../../../../packages/components/carousel/src/item.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"data.ready\"\n    :class=\"[\n      ns.e('item'),\n      ns.is('active', data.active),\n      ns.is('in-stage', data.inStage),\n      ns.is('hover', data.hover),\n      ns.is('animating', data.animating),\n      { [ns.em('item', 'card')]: type === 'card' },\n    ]\"\n    :style=\"itemStyle\"\n    @click=\"handleItemClick\"\n  >\n    <div\n      v-if=\"type === 'card'\"\n      v-show=\"!data.active\"\n      :class=\"ns.e('mask')\"\n    ></div>\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  reactive,\n  onMounted,\n  inject,\n  computed,\n  toRefs,\n  getCurrentInstance,\n  onUnmounted,\n} from 'vue'\nimport { autoprefixer } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { useNamespace } from '@element-plus/hooks'\nimport type { CSSProperties } from 'vue'\nimport type { InjectCarouselScope, ICarouselItemProps } from './carousel'\n\nconst CARD_SCALE = 0.83\nexport default defineComponent({\n  name: 'ElCarouselItem',\n  props: {\n    name: { type: String, default: '' },\n    label: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n  setup(props: ICarouselItemProps) {\n    const ns = useNamespace('carousel')\n    // instance\n    const instance = getCurrentInstance()\n\n    // data\n    const data = reactive({\n      hover: false,\n      translate: 0,\n      scale: 1,\n      active: false,\n      ready: false,\n      inStage: false,\n      animating: false,\n    })\n\n    // inject\n    const injectCarouselScope: InjectCarouselScope = inject(\n      'injectCarouselScope'\n    )\n\n    // computed\n    const parentDirection = computed(() => {\n      return injectCarouselScope.direction\n    })\n\n    const itemStyle = computed(() => {\n      const translateType =\n        parentDirection.value === 'vertical' ? 'translateY' : 'translateX'\n      const value = `${translateType}(${data.translate}px) scale(${data.scale})`\n      const style: CSSProperties = {\n        transform: value,\n      }\n      return autoprefixer(style)\n    })\n\n    // methods\n\n    function processIndex(index, activeIndex, length) {\n      if (activeIndex === 0 && index === length - 1) {\n        return -1\n      } else if (activeIndex === length - 1 && index === 0) {\n        return length\n      } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {\n        return length + 1\n      } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {\n        return -2\n      }\n      return index\n    }\n\n    function calcCardTranslate(index, activeIndex) {\n      const parentWidth = injectCarouselScope.root.value?.offsetWidth || 0\n      if (data.inStage) {\n        return (\n          (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n        )\n      } else if (index < activeIndex) {\n        return (-(1 + CARD_SCALE) * parentWidth) / 4\n      } else {\n        return ((3 + CARD_SCALE) * parentWidth) / 4\n      }\n    }\n\n    function calcTranslate(index, activeIndex, isVertical) {\n      const distance =\n        (isVertical\n          ? injectCarouselScope.root.value?.offsetHeight\n          : injectCarouselScope.root.value?.offsetWidth) || 0\n      return distance * (index - activeIndex)\n    }\n\n    const translateItem = (\n      index: number,\n      activeIndex: number,\n      oldIndex: number\n    ) => {\n      const parentType = injectCarouselScope.type\n      const length = injectCarouselScope.items.value.length\n      if (parentType !== 'card' && oldIndex !== undefined) {\n        data.animating = index === activeIndex || index === oldIndex\n      }\n      if (index !== activeIndex && length > 2 && injectCarouselScope.loop) {\n        index = processIndex(index, activeIndex, length)\n      }\n      if (parentType === 'card') {\n        if (parentDirection.value === 'vertical') {\n          debugWarn(\n            'Carousel',\n            'vertical direction is not supported in card mode'\n          )\n        }\n        data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1\n        data.active = index === activeIndex\n        data.translate = calcCardTranslate(index, activeIndex)\n        data.scale = data.active ? 1 : CARD_SCALE\n      } else {\n        data.active = index === activeIndex\n        const isVertical = parentDirection.value === 'vertical'\n        data.translate = calcTranslate(index, activeIndex, isVertical)\n      }\n      data.ready = true\n    }\n\n    function handleItemClick() {\n      if (injectCarouselScope && injectCarouselScope.type === 'card') {\n        const index = injectCarouselScope.items.value\n          .map((d) => d.uid)\n          .indexOf(instance.uid)\n        injectCarouselScope.setActiveItem(index)\n      }\n    }\n\n    // lifecycle\n    onMounted(() => {\n      if (injectCarouselScope.addItem) {\n        injectCarouselScope.addItem({\n          uid: instance.uid,\n          ...props,\n          ...toRefs(data),\n          translateItem,\n        })\n      }\n    })\n\n    onUnmounted(() => {\n      if (injectCarouselScope.removeItem) {\n        injectCarouselScope.removeItem(instance.uid)\n      }\n    })\n\n    return {\n      data,\n      itemStyle,\n      translateItem,\n      type: injectCarouselScope.type,\n      handleItemClick,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","useNamespace","getCurrentInstance","reactive","inject","computed","autoprefixer"],"mappings":";;;;;;;;;;;AAuCA,MAAM,aAAa;AACnB,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM,EAAE,MAAM,QAAQ,SAAS;AAAA,IAC/B,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAA2B;AAC/B,UAAM,KAAKC,mBAAa;AAExB,UAAM,WAAWC;AAGjB,UAAM,OAAOC,aAAS;AAAA,MACpB,OAAO;AAAA,MACP,WAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA;AAIb,UAAM,sBAA2CC,WAC/C;AAIF,UAAM,kBAAkBC,aAAS,MAAM;AACrC,aAAO,oBAAoB;AAAA;AAG7B,UAAM,YAAYA,aAAS,MAAM;AAC/B,YAAM,gBACJ,gBAAgB,UAAU,aAAa,eAAe;AACxD,YAAM,QAAQ,GAAG,iBAAiB,KAAK,sBAAsB,KAAK;AAClE,YAAM,QAAuB;AAAA,QAC3B,WAAW;AAAA;AAEb,aAAOC,kBAAa;AAAA;AAKtB,0BAAsB,OAAO,aAAa,QAAQ;AAChD,UAAI,gBAAgB,KAAK,UAAU,SAAS,GAAG;AAC7C,eAAO;AAAA,iBACE,gBAAgB,SAAS,KAAK,UAAU,GAAG;AACpD,eAAO;AAAA,iBACE,QAAQ,cAAc,KAAK,cAAc,SAAS,SAAS,GAAG;AACvE,eAAO,SAAS;AAAA,iBACP,QAAQ,cAAc,KAAK,QAAQ,eAAe,SAAS,GAAG;AACvE,eAAO;AAAA;AAET,aAAO;AAAA;AAGT,+BAA2B,OAAO,aAAa;AAC7C,YAAM;AACN;AACE,eACG;AAAgE;AAGnE;AAA2C;AAE3C;AAA0C;AAAA;AAI9C;AACE,yDAE0B;AAE1B;AAA2B;AAG7B;AAKE;AACA,+CAAyC;AACzC,yBAAmB;AACjB,4DAAoD;AAAA;AAEtD,mCAA6B,kCAAkC;AAC7D;AAAyC;AAE3C;AACE;AACE,oBACE;AACA;AAGJ;AACA;AACA,aAAK,8BAA8B;AACnC,aAAK;AAA0B,aAC1B;AACL,aAAK,mBAAmB;AACxB;AACA,aAAK;AAA8C;AAErD;AAAa;AAGf;AACE;AACE;AAGA;AAAkC;AAAA;AAKtC;AACE;AACE;AAA4B,UAC1B;AAAc;AACX,aACA;AAAO,UACV;AAAA;AAAA;AAAA;AAKN;AACE;AACE;AAAwC;AAAA;AAI5C;AAAO,MACL;AAAA;AACA,MACA;AAAA,MACA;AAA0B,MAC1B;AAAA,MACA;AAAA;AAAA;AAAA;;;AAvLI,2BAAc;AAAA;AAAqB;AAAiD,MAAqB,QAAG;AAAiB,MAAc,QAAG,GAAE,cAAc;AAAA,WAA0B,MAAG;AAAqB;;;AAShN;;AAGE;;AAEA;;AADQ;;AAGH;;AAjBK;;;;;;;;;"}

package/lib/components/carousel/src/main.js

@@ -7,8 +7,10 @@ var throttle = require('lodash/throttle');
 var resizeEvent = require('../../../utils/resize-event.js');
 var index = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
+require('../../../hooks/index.js');
 var error = require('../../../utils/error.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -67,6 +69,7 @@ const _sfc_main = vue.defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
+    const ns = index$1.useNamespace("carousel");
     const data = vue.reactive({
       activeIndex: -1,
       containerWidth: 0,
@@ -80,22 +83,19 @@ const _sfc_main = vue.defineComponent({
       return items.value.some((item) => item.label.toString().length > 0);
     });
     const carouselClasses = vue.computed(() => {
-      const classes = ["el-carousel", `el-carousel--${props.direction}`];
+      const classes = [ns.b(), ns.m(props.direction)];
       if (props.type === "card") {
-        classes.push("el-carousel--card");
+        classes.push(ns.m("card"));
       }
       return classes;
     });
     const indicatorsClasses = vue.computed(() => {
-      const classes = [
-        "el-carousel__indicators",
-        `el-carousel__indicators--${props.direction}`
-      ];
+      const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
       if (hasLabel.value) {
-        classes.push("el-carousel__indicators--labels");
+        classes.push(ns.em("indicators", "labels"));
       }
       if (props.indicatorPosition === "outside" || props.type === "card") {
-        classes.push("el-carousel__indicators--outside");
+        classes.push(ns.em("indicators", "outside"));
       }
       return classes;
     });
@@ -267,13 +267,13 @@ const _sfc_main = vue.defineComponent({
       prev,
       next,
       setActiveItem,
-      root
+      root,
+      ns
     };
   }
 });
 const _hoisted_1 = ["onMouseenter", "onClick"];
-const _hoisted_2 = { class: "el-carousel__button" };
-const _hoisted_3 = { key: 0 };
+const _hoisted_2 = { key: 0 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_arrow_left = vue.resolveComponent("arrow-left");
   const _component_el_icon = vue.resolveComponent("el-icon");
@@ -285,7 +285,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onMouseleave: _cache[7] || (_cache[7] = vue.withModifiers((...args) => _ctx.handleMouseLeave && _ctx.handleMouseLeave(...args), ["stop"]))
   }, [
     vue.createElementVNode("div", {
-      class: "el-carousel__container",
+      class: vue.normalizeClass(_ctx.ns.e("container")),
       style: vue.normalizeStyle({ height: _ctx.height })
     }, [
       _ctx.arrowDisplay ? (vue.openBlock(), vue.createBlock(vue.Transition, {
@@ -295,7 +295,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         default: vue.withCtx(() => [
           vue.withDirectives(vue.createElementVNode("button", {
             type: "button",
-            class: "el-carousel__arrow el-carousel__arrow--left",
+            class: vue.normalizeClass([_ctx.ns.e("arrow"), _ctx.ns.em("arrow", "left")]),
             onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.handleButtonEnter("left")),
             onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.handleButtonLeave && _ctx.handleButtonLeave(...args)),
             onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => _ctx.throttledArrowClick(_ctx.data.activeIndex - 1), ["stop"]))
@@ -306,7 +306,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             })
-          ], 544), [
+          ], 34), [
             [
               vue.vShow,
               (_ctx.arrow === "always" || _ctx.data.hover) && (_ctx.props.loop || _ctx.data.activeIndex > 0)
@@ -322,7 +322,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         default: vue.withCtx(() => [
           vue.withDirectives(vue.createElementVNode("button", {
             type: "button",
-            class: "el-carousel__arrow el-carousel__arrow--right",
+            class: vue.normalizeClass([_ctx.ns.e("arrow"), _ctx.ns.em("arrow", "right")]),
             onMouseenter: _cache[3] || (_cache[3] = ($event) => _ctx.handleButtonEnter("right")),
             onMouseleave: _cache[4] || (_cache[4] = (...args) => _ctx.handleButtonLeave && _ctx.handleButtonLeave(...args)),
             onClick: _cache[5] || (_cache[5] = vue.withModifiers(($event) => _ctx.throttledArrowClick(_ctx.data.activeIndex + 1), ["stop"]))
@@ -333,7 +333,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             })
-          ], 544), [
+          ], 34), [
             [
               vue.vShow,
               (_ctx.arrow === "always" || _ctx.data.hover) && (_ctx.props.loop || _ctx.data.activeIndex < _ctx.items.length - 1)
@@ -343,7 +343,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       })) : vue.createCommentVNode("v-if", true),
       vue.renderSlot(_ctx.$slots, "default")
-    ], 4),
+    ], 6),
     _ctx.indicatorPosition !== "none" ? (vue.openBlock(), vue.createElementBlock("ul", {
       key: 0,
       class: vue.normalizeClass(_ctx.indicatorsClasses)
@@ -352,16 +352,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         return vue.openBlock(), vue.createElementBlock("li", {
           key: index,
           class: vue.normalizeClass([
-            "el-carousel__indicator",
-            "el-carousel__indicator--" + _ctx.direction,
-            { "is-active": index === _ctx.data.activeIndex }
+            _ctx.ns.e("indicator"),
+            _ctx.ns.em("indicator", _ctx.direction),
+            _ctx.ns.is("active", index === _ctx.data.activeIndex)
           ]),
           onMouseenter: ($event) => _ctx.throttledIndicatorHover(index),
           onClick: vue.withModifiers(($event) => _ctx.handleIndicatorClick(index), ["stop"])
         }, [
-          vue.createElementVNode("button", _hoisted_2, [
-            _ctx.hasLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(item.label), 1)) : vue.createCommentVNode("v-if", true)
-          ])
+          vue.createElementVNode("button", {
+            class: vue.normalizeClass(_ctx.ns.e("button"))
+          }, [
+            _ctx.hasLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(item.label), 1)) : vue.createCommentVNode("v-if", true)
+          ], 2)
         ], 42, _hoisted_1);
       }), 128))
     ], 2)) : vue.createCommentVNode("v-if", true)