@element-plus/nightly 0.0.20220117 → 0.0.20220121

package/es/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../packages/element-plus/index.ts"],"sourcesContent":["import installer from './defaults'\nexport * from '@element-plus/components'\nexport * from '@element-plus/directives'\nexport * from '@element-plus/hooks'\nexport * from '@element-plus/tokens'\nexport * from '@element-plus/utils/popup-manager'\nexport { makeInstaller } from './make-installer'\n\nexport const install = installer.install\nexport const version = installer.version\nexport default installer\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOY,MAAC,OAAO,GAAG,SAAS,CAAC,QAAQ;AAC7B,MAAC,OAAO,GAAG,SAAS,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../packages/element-plus/index.ts"],"sourcesContent":["import installer from './defaults'\nexport * from '@element-plus/components'\nexport * from '@element-plus/directives'\nexport * from '@element-plus/hooks'\nexport * from '@element-plus/tokens'\nexport * from '@element-plus/utils/popup-manager'\nexport { makeInstaller } from './make-installer'\n\nexport const install = installer.install\nexport const version = installer.version\nexport default installer\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOY,MAAC,OAAO,GAAG,SAAS,CAAC,QAAQ;AAC7B,MAAC,OAAO,GAAG,SAAS,CAAC;;;;"}

package/es/utils/scrollbar-width.mjs

@@ -1,7 +1,7 @@
 import { isClient } from '@vueuse/core';
 
 let scrollBarWidth;
-function scrollbarWidth() {
+function getScrollBarWidth() {
   var _a;
   if (!isClient)
     return 0;
@@ -25,5 +25,5 @@ function scrollbarWidth() {
   return scrollBarWidth;
 }
 
-export { scrollbarWidth as default };
+export { getScrollBarWidth as default };
 //# sourceMappingURL=scrollbar-width.mjs.map

package/es/utils/scrollbar-width.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar-width.mjs","sources":["../../../../packages/utils/scrollbar-width.ts"],"sourcesContent":["import { isClient } from '@vueuse/core'\n\nlet scrollBarWidth: number\n\nexport default function (): number {\n  if (!isClient) return 0\n  if (scrollBarWidth !== undefined) return scrollBarWidth\n\n  const outer = document.createElement('div')\n  outer.className = 'el-scrollbar__wrap'\n  outer.style.visibility = 'hidden'\n  outer.style.width = '100px'\n  outer.style.position = 'absolute'\n  outer.style.top = '-9999px'\n  document.body.appendChild(outer)\n\n  const widthNoScroll = outer.offsetWidth\n  outer.style.overflow = 'scroll'\n\n  const inner = document.createElement('div')\n  inner.style.width = '100%'\n  outer.appendChild(inner)\n\n  const widthWithScroll = inner.offsetWidth\n  outer.parentNode?.removeChild(outer)\n  scrollBarWidth = widthNoScroll - widthWithScroll\n\n  return scrollBarWidth\n}\n"],"names":[],"mappings":";;AACA,IAAI,cAAc,CAAC;AACJ,uBAAQ,GAAG;AAC1B,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,IAAI,CAAC,QAAQ;AACf,IAAI,OAAO,CAAC,CAAC;AACb,EAAE,IAAI,cAAc,KAAK,KAAK,CAAC;AAC/B,IAAI,OAAO,cAAc,CAAC;AAC1B,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,SAAS,GAAG,oBAAoB,CAAC;AACzC,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;AACpC,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;AAC9B,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;AACpC,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC;AAC9B,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC;AAC1C,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAClC,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;AAC7B,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3B,EAAE,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC;AAC5C,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnE,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,CAAC;AACnD,EAAE,OAAO,cAAc,CAAC;AACxB;;;;"}
+{"version":3,"file":"scrollbar-width.mjs","sources":["../../../../packages/utils/scrollbar-width.ts"],"sourcesContent":["import { isClient } from '@vueuse/core'\n\nlet scrollBarWidth: number\n\nexport default function (): number {\n  if (!isClient) return 0\n  if (scrollBarWidth !== undefined) return scrollBarWidth\n\n  const outer = document.createElement('div')\n  outer.className = 'el-scrollbar__wrap'\n  outer.style.visibility = 'hidden'\n  outer.style.width = '100px'\n  outer.style.position = 'absolute'\n  outer.style.top = '-9999px'\n  document.body.appendChild(outer)\n\n  const widthNoScroll = outer.offsetWidth\n  outer.style.overflow = 'scroll'\n\n  const inner = document.createElement('div')\n  inner.style.width = '100%'\n  outer.appendChild(inner)\n\n  const widthWithScroll = inner.offsetWidth\n  outer.parentNode?.removeChild(outer)\n  scrollBarWidth = widthNoScroll - widthWithScroll\n\n  return scrollBarWidth\n}\n"],"names":[],"mappings":";;AACA,IAAI,cAAc,CAAC;AACJ,0BAAQ,GAAG;AAC1B,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,IAAI,CAAC,QAAQ;AACf,IAAI,OAAO,CAAC,CAAC;AACb,EAAE,IAAI,cAAc,KAAK,KAAK,CAAC;AAC/B,IAAI,OAAO,cAAc,CAAC;AAC1B,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,SAAS,GAAG,oBAAoB,CAAC;AACzC,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;AACpC,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;AAC9B,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;AACpC,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC;AAC9B,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC;AAC1C,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAClC,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;AAC7B,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3B,EAAE,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC;AAC5C,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnE,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,CAAC;AACnD,EAAE,OAAO,cAAc,CAAC;AACxB;;;;"}

package/es/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.20220117";
+export declare const version = "0.0.20220121";

package/es/version.mjs

@@ -1,4 +1,4 @@
-const version = "0.0.20220117";
+const version = "0.0.20220121";
 
 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.20220117'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}
+{"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20220121'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}

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

@@ -4,6 +4,17 @@ export declare const ElAffix: import("../../utils/types").SFCWithInstall<import(
     readonly offset: import("../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly position: import("../../utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom", unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     root: import("vue").ShallowRef<HTMLDivElement | undefined>;
     state: {
         fixed: boolean;
@@ -22,17 +33,12 @@ export declare const ElAffix: import("../../utils/types").SFCWithInstall<import(
         fixed: boolean;
     }) => boolean;
     change: (fixed: boolean) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly zIndex?: unknown;
-    readonly target?: unknown;
-    readonly offset?: unknown;
-    readonly position?: unknown;
-} & {
-    zIndex: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<import("csstype").ZIndexProperty>, unknown, unknown>;
-    target: string;
-    offset: number;
-    position: import("../../utils/props").BuildPropType<StringConstructor, "top" | "bottom", unknown>;
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly zIndex: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("csstype").ZIndexProperty>, 100, unknown, unknown, unknown>;
+    readonly target: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly offset: import("../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
+    readonly position: import("../../utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom", unknown>;
+}>> & {
     onChange?: ((fixed: boolean) => any) | undefined;
     onScroll?: ((args_0: {
         scrollTop: number;

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

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes } from 'vue';
 import type { ZIndexProperty } from 'csstype';
+import type Affix from './affix.vue';
 export declare const affixProps: {
     readonly zIndex: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<ZIndexProperty>, 100, unknown, unknown, unknown>;
     readonly target: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
@@ -15,3 +16,4 @@ export declare const affixEmits: {
     change: (fixed: boolean) => boolean;
 };
 export declare type AffixEmits = typeof affixEmits;
+export declare type AffixInstance = InstanceType<typeof Affix>;

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

@@ -1 +1 @@
-{"version":3,"file":"affix.js","sources":["../../../../../../packages/components/affix/src/affix.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { ZIndexProperty } from 'csstype'\n\nexport const affixProps = buildProps({\n  zIndex: {\n    type: definePropType<ZIndexProperty>([Number, String]),\n    default: 100,\n  },\n  target: {\n    type: String,\n    default: '',\n  },\n  offset: {\n    type: Number,\n    default: 0,\n  },\n  position: {\n    type: String,\n    values: ['top', 'bottom'],\n    default: 'top',\n  },\n} as const)\nexport type AffixProps = ExtractPropTypes<typeof affixProps>\n\nexport const affixEmits = {\n  scroll: ({ scrollTop, fixed }: { scrollTop: number; fixed: boolean }) =>\n    typeof scrollTop === 'number' && typeof fixed === 'boolean',\n  change: (fixed: boolean) => typeof fixed === 'boolean',\n}\nexport type AffixEmits = typeof affixEmits\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC7B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,OAAO,SAAS,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,SAAS;AAC/F,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,SAAS;AAC/C;;;;;"}
+{"version":3,"file":"affix.js","sources":["../../../../../../packages/components/affix/src/affix.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\nimport type { ZIndexProperty } from 'csstype'\nimport type Affix from './affix.vue'\n\nexport const affixProps = buildProps({\n  zIndex: {\n    type: definePropType<ZIndexProperty>([Number, String]),\n    default: 100,\n  },\n  target: {\n    type: String,\n    default: '',\n  },\n  offset: {\n    type: Number,\n    default: 0,\n  },\n  position: {\n    type: String,\n    values: ['top', 'bottom'],\n    default: 'top',\n  },\n} as const)\nexport type AffixProps = ExtractPropTypes<typeof affixProps>\n\nexport const affixEmits = {\n  scroll: ({ scrollTop, fixed }: { scrollTop: number; fixed: boolean }) =>\n    typeof scrollTop === 'number' && typeof fixed === 'boolean',\n  change: (fixed: boolean) => typeof fixed === 'boolean',\n}\nexport type AffixEmits = typeof affixEmits\n\nexport type AffixInstance = InstanceType<typeof Affix>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC7B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,OAAO,SAAS,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,SAAS;AAC/F,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,SAAS;AAC/C;;;;;"}

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

@@ -5,6 +5,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly offset: import("../../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly position: import("../../../utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom", unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     root: import("vue").ShallowRef<HTMLDivElement | undefined>;
     state: {
         fixed: boolean;
@@ -23,17 +34,12 @@ declare const _default: import("vue").DefineComponent<{
         fixed: boolean;
     }) => boolean;
     change: (fixed: boolean) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly zIndex?: unknown;
-    readonly target?: unknown;
-    readonly offset?: unknown;
-    readonly position?: unknown;
-} & {
-    zIndex: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<import("csstype").ZIndexProperty>, unknown, unknown>;
-    target: string;
-    offset: number;
-    position: import("../../../utils/props").BuildPropType<StringConstructor, "top" | "bottom", unknown>;
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly zIndex: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("csstype").ZIndexProperty>, 100, unknown, unknown, unknown>;
+    readonly target: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly offset: import("../../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
+    readonly position: import("../../../utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom", unknown>;
+}>> & {
     onChange?: ((fixed: boolean) => any) | undefined;
     onScroll?: ((args_0: {
         scrollTop: number;

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

@@ -5,13 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var core = require('@vueuse/core');
 var dom = require('../../../utils/dom.js');
+require('../../../hooks/index.js');
 var affix = require('./affix.js');
+var index = require('../../../hooks/use-namespace/index.js');
 
 var script = vue.defineComponent({
   name: "ElAffix",
   props: affix.affixProps,
   emits: affix.affixEmits,
   setup(props, { emit }) {
+    const ns = index.useNamespace("affix");
     const target = vue.shallowRef();
     const root = vue.shallowRef();
     const scrollContainer = vue.shallowRef();
@@ -96,6 +99,7 @@ var script = vue.defineComponent({
     core.useResizeObserver(root, () => update());
     core.useResizeObserver(target, () => update());
     return {
+      ns,
       root,
       state,
       rootStyle,

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

@@ -1 +1 @@
-{"version":3,"file":"affix.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" class=\"el-affix\" :style=\"rootStyle\">\n    <div :class=\"{ 'el-affix--fixed': state.fixed }\" :style=\"affixStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  onMounted,\n  reactive,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils/dom'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAffix',\n\n  props: affixProps,\n  emits: affixEmits,\n\n  setup(props, { emit }) {\n    const target = shallowRef<HTMLElement>()\n    const root = shallowRef<HTMLDivElement>()\n    const scrollContainer = shallowRef<HTMLElement | Window>()\n\n    const state = reactive({\n      fixed: false,\n      height: 0, // height of root\n      width: 0, // width of root\n      scrollTop: 0, // scrollTop of documentElement\n      clientHeight: 0, // clientHeight of documentElement\n      transform: 0,\n    })\n\n    const rootStyle = computed<CSSProperties>(() => {\n      return {\n        height: state.fixed ? `${state.height}px` : '',\n        width: state.fixed ? `${state.width}px` : '',\n      }\n    })\n\n    const affixStyle = computed<CSSProperties | undefined>(() => {\n      if (!state.fixed) return\n\n      const offset = props.offset ? `${props.offset}px` : 0\n      const transform = state.transform\n        ? `translateY(${state.transform}px)`\n        : ''\n\n      return {\n        height: `${state.height}px`,\n        width: `${state.width}px`,\n        top: props.position === 'top' ? offset : '',\n        bottom: props.position === 'bottom' ? offset : '',\n        transform,\n        zIndex: props.zIndex,\n      }\n    })\n\n    const update = () => {\n      if (!root.value || !target.value || !scrollContainer.value) return\n\n      const rootRect = root.value.getBoundingClientRect()\n      const targetRect = target.value.getBoundingClientRect()\n      state.height = rootRect.height\n      state.width = rootRect.width\n      state.scrollTop =\n        scrollContainer.value instanceof Window\n          ? document.documentElement.scrollTop\n          : scrollContainer.value.scrollTop || 0\n      state.clientHeight = document.documentElement.clientHeight\n\n      if (props.position === 'top') {\n        if (props.target) {\n          const difference = targetRect.bottom - props.offset - state.height\n          state.fixed = props.offset > rootRect.top && targetRect.bottom > 0\n          state.transform = difference < 0 ? difference : 0\n        } else {\n          state.fixed = props.offset > rootRect.top\n        }\n      } else {\n        if (props.target) {\n          const difference =\n            state.clientHeight - targetRect.top - props.offset - state.height\n          state.fixed =\n            state.clientHeight - props.offset < rootRect.bottom &&\n            state.clientHeight > targetRect.top\n          state.transform = difference < 0 ? -difference : 0\n        } else {\n          state.fixed = state.clientHeight - props.offset < rootRect.bottom\n        }\n      }\n    }\n\n    const onScroll = () => {\n      update()\n\n      emit('scroll', {\n        scrollTop: state.scrollTop,\n        fixed: state.fixed,\n      })\n    }\n\n    watch(\n      () => state.fixed,\n      () => {\n        emit('change', state.fixed)\n      }\n    )\n\n    onMounted(() => {\n      if (props.target) {\n        target.value =\n          document.querySelector<HTMLElement>(props.target) ?? undefined\n        if (!target.value) {\n          throw new Error(`Target is not existed: ${props.target}`)\n        }\n      } else {\n        target.value = document.documentElement\n      }\n      scrollContainer.value = getScrollContainer(root.value!, true)\n    })\n\n    useEventListener(scrollContainer, 'scroll', onScroll)\n    useResizeObserver(root, () => update())\n    useResizeObserver(target, () => update())\n\n    return {\n      root,\n      state,\n      rootStyle,\n      affixStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","affixProps","reactive"],"mappings":";;;;;;;;;AAkBA,aAAeA,mBAAe;;AAE9B,EAAE,KAAK,EAAEC,gBAAU;;AAEnB,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE;IACrB,MAAM,MAAM;;IAEZ,MAAM;IACN,MAAM,KAAK,GAAGC;;MAEZ,MAAM,GAAG;MACT,KAAK,EAAE,CAAC;MACR,SAAS,EAAE,CAAC;MACZ,YAAY,EAAE,CAAC;;KAEhB,CAAC,CAAC;UACG;MACJ;QACE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC;QACvB,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG;OAC3C,CAAC;MACF,CAAC;IACH;;QAEI,OAAO;MACT;YACM,SAAS,GAAG,MAAM,SAAS,GAAG,CAAC,WAAW;aACzC;;;;QAIL,MAAM,EAAE,KAAK,SAAS,KAAK,QAAQ,GAAG,MAAM,GAAG,EAAE;iBACxC;;OAEV,CAAC;MACF,CAAC;UACG,MAAM,GAAG,MAAM;UACf,CAAC;;MAEL;YACM,UAAU,GAAG,MAAM,CAAC;WACrB,CAAC,MAAM,GAAG,QAAQ,CAAC;WACnB,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;WACxB,CAAC,SAAS,GAAG,eAAe,CAAC,iBAAiB;WAC9C,CAAC;UACF,MAAM,QAAQ;;;;UAId,KAAK,UAAU;SAChB,MAAM;;SAEN;OACF,MAAM;QACL,IAAI,KAAK,OAAO,EAAE;UAChB,MAAM,UAAU,GAAG;UACnB,KAAK,CAAC;UACN,KAAK,CAAC,SAAS,GAAG,UAAU,GAAG,CAAC,GAAG,CAAC;eAC/B;UACL,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,YAAY,GAAG;SACpC;;MAEH;kBACY,GAAG;YACT,EAAE;UACJ,CAAC,QAAQ;iBACF,EAAE,KAAK,UAAU;QAC1B,KAAK,EAAE;;;aAGN,CAAC;WACC,QAAQ,EAAE,KAAK;;iBAEb,CAAC,MAAM;UACV,EAAE,CAAC;eACE,CAAC,MAAM,EAAE;cACV,CAAC,KAAK,GAAG,CAAC,EAAE,GAAG,QAAQ,CAAC;YAC1B,CAAC,MAAM,CAAC;UACV;;;;;;KAML,CAAC,CAAC;;;0BAGc;WACV;UACD;MACJ;;;MAGA;MACA;;;;;;"}
+{"version":3,"file":"affix.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" :class=\"ns.b()\" :style=\"rootStyle\">\n    <div :class=\"{ [ns.m('fixed')]: state.fixed }\" :style=\"affixStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  onMounted,\n  reactive,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils/dom'\nimport { useNamespace } from '@element-plus/hooks'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAffix',\n\n  props: affixProps,\n  emits: affixEmits,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('affix')\n\n    const target = shallowRef<HTMLElement>()\n    const root = shallowRef<HTMLDivElement>()\n    const scrollContainer = shallowRef<HTMLElement | Window>()\n\n    const state = reactive({\n      fixed: false,\n      height: 0, // height of root\n      width: 0, // width of root\n      scrollTop: 0, // scrollTop of documentElement\n      clientHeight: 0, // clientHeight of documentElement\n      transform: 0,\n    })\n\n    const rootStyle = computed<CSSProperties>(() => {\n      return {\n        height: state.fixed ? `${state.height}px` : '',\n        width: state.fixed ? `${state.width}px` : '',\n      }\n    })\n\n    const affixStyle = computed<CSSProperties | undefined>(() => {\n      if (!state.fixed) return\n\n      const offset = props.offset ? `${props.offset}px` : 0\n      const transform = state.transform\n        ? `translateY(${state.transform}px)`\n        : ''\n\n      return {\n        height: `${state.height}px`,\n        width: `${state.width}px`,\n        top: props.position === 'top' ? offset : '',\n        bottom: props.position === 'bottom' ? offset : '',\n        transform,\n        zIndex: props.zIndex,\n      }\n    })\n\n    const update = () => {\n      if (!root.value || !target.value || !scrollContainer.value) return\n\n      const rootRect = root.value.getBoundingClientRect()\n      const targetRect = target.value.getBoundingClientRect()\n      state.height = rootRect.height\n      state.width = rootRect.width\n      state.scrollTop =\n        scrollContainer.value instanceof Window\n          ? document.documentElement.scrollTop\n          : scrollContainer.value.scrollTop || 0\n      state.clientHeight = document.documentElement.clientHeight\n\n      if (props.position === 'top') {\n        if (props.target) {\n          const difference = targetRect.bottom - props.offset - state.height\n          state.fixed = props.offset > rootRect.top && targetRect.bottom > 0\n          state.transform = difference < 0 ? difference : 0\n        } else {\n          state.fixed = props.offset > rootRect.top\n        }\n      } else {\n        if (props.target) {\n          const difference =\n            state.clientHeight - targetRect.top - props.offset - state.height\n          state.fixed =\n            state.clientHeight - props.offset < rootRect.bottom &&\n            state.clientHeight > targetRect.top\n          state.transform = difference < 0 ? -difference : 0\n        } else {\n          state.fixed = state.clientHeight - props.offset < rootRect.bottom\n        }\n      }\n    }\n\n    const onScroll = () => {\n      update()\n\n      emit('scroll', {\n        scrollTop: state.scrollTop,\n        fixed: state.fixed,\n      })\n    }\n\n    watch(\n      () => state.fixed,\n      () => {\n        emit('change', state.fixed)\n      }\n    )\n\n    onMounted(() => {\n      if (props.target) {\n        target.value =\n          document.querySelector<HTMLElement>(props.target) ?? undefined\n        if (!target.value) {\n          throw new Error(`Target is not existed: ${props.target}`)\n        }\n      } else {\n        target.value = document.documentElement\n      }\n      scrollContainer.value = getScrollContainer(root.value!, true)\n    })\n\n    useEventListener(scrollContainer, 'scroll', onScroll)\n    useResizeObserver(root, () => update())\n    useResizeObserver(target, () => update())\n\n    return {\n      ns,\n      root,\n      state,\n      rootStyle,\n      affixStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","affixProps","useNamespace","shallowRef","computed","useEventListener"],"mappings":";;;;;;;;;;;AAmBA,aAAeA,mBAAe;;AAE9B,EAAE,KAAK,EAAEC,gBAAU;;AAEnB,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE;IACrB,MAAM,EAAE,GAAGC;;IAEX,MAAM,IAAI,GAAGC;IACb,MAAM;;MAEJ,KAAK,EAAE,KAAK;MACZ,SAAS;;MAET,SAAS,EAAE;MACX,YAAY,EAAE,CAAC;MACf,SAAS,EAAE,CAAC;;IAEd,MAAM,SAAS,GAAGC;MAChB,OAAO;QACL,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE;QACzB,KAAK,OAAO,CAAC,KAAK,GAAG,CAAC;OACvB,CAAC;MACF,CAAC;UACG;;;MAGJ,MAAM,MAAM,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,CAAC,OAAO;MAC9C;aACO;QACL,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;;;;QAI3B,SAAS;cACH,EAAE,KAAK,CAAC,MAAM;;MAEtB,CAAC;UACG,MAAM,GAAG,MAAM;UACf,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;QACnC;;MAEF;WACK,CAAC,MAAM,GAAG,QAAQ,CAAC;WACnB,CAAC,KAAK,GAAG,QAAQ,CAAC;WAClB,UAAU,GAAG,gBAAgB,KAAK;WAClC,CAAC,YAAY,GAAG,QAAQ,CAAC,eAAe;UACzC,KAAK,CAAC;QACR,IAAI,KAAK,CAAC,MAAM,EAAE;;;;eAIX;UACL,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;;OAE7C,MAAM;QACL,IAAI,KAAK,CAAC,QAAQ;UAChB,MAAM,UAAU,GAAG,KAAK,CAAC;UACzB,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;UACpB,KAAK,CAAC;SACP,MAAM;UACL,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,YAAY,GAAG;;OAEtC;;UAEG,QAAQ,GAAG,MAAM;YACf,EAAE,CAAC;UACL,CAAC,QAAQ,EAAE;iBACJ,EAAE,KAAK,CAAC,SAAS;aACrB,EAAE,KAAK,CAAC,KAAK;QAClB;;;MAGF,IAAI,CAAC;;iBAEE,CAAC,MAAM;YACR,CAAC;UACH,KAAK,CAAC,MAAM;cACR,CAAC,KAAK,GAAG,CAAC,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC;YACrD,CAAC,MAAM,CAAC,KAAK,EAAE;UACjB,MAAM,IAAI,MAAM,wBAAwB,EAAE,KAAK;;aAE5C;QACL;;;;IAIJC,sBAAiB;;;WAGV;QACH;UACE;MACJ;;;MAGA;MACA;;;;;;"}

package/lib/components/affix/src/affix.vue_vue_type_template_id_0745df9e_lang.js

@@ -7,16 +7,16 @@ var vue = require('vue');
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     ref: "root",
-    class: "el-affix",
+    class: vue.normalizeClass(_ctx.ns.b()),
     style: vue.normalizeStyle(_ctx.rootStyle)
   }, [
     vue.createElementVNode("div", {
-      class: vue.normalizeClass({ "el-affix--fixed": _ctx.state.fixed }),
+      class: vue.normalizeClass({ [_ctx.ns.m("fixed")]: _ctx.state.fixed }),
       style: vue.normalizeStyle(_ctx.affixStyle)
     }, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 6)
-  ], 4);
+  ], 6);
 }
 
 exports.render = render;

package/lib/components/affix/src/affix.vue_vue_type_template_id_0745df9e_lang.js.map

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

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

@@ -6,45 +6,46 @@ export declare const ElAlert: import("../../utils/types").SFCWithInstall<import(
     readonly closeText: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly showIcon: BooleanConstructor;
     readonly center: BooleanConstructor;
-    readonly effect: import("../../utils/props").BuildPropReturn<StringConstructor, "light", unknown, "dark" | "light", unknown>;
+    readonly effect: import("../../utils/props").BuildPropReturn<StringConstructor, "light", unknown, "light" | "dark", unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     visible: import("vue").Ref<boolean>;
-    typeClass: import("vue").ComputedRef<string>;
     iconComponent: import("vue").ComputedRef<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>>;
-    isBigIcon: import("vue").ComputedRef<"" | "is-big">;
-    isBoldTitle: import("vue").ComputedRef<"" | "is-bold">;
+    isBigIcon: import("vue").ComputedRef<string>;
+    isBoldTitle: import("vue").ComputedRef<string>;
     close: (evt: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (evt: MouseEvent) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly title?: unknown;
-    readonly description?: unknown;
-    readonly type?: unknown;
-    readonly closable?: unknown;
-    readonly closeText?: unknown;
-    readonly showIcon?: unknown;
-    readonly center?: unknown;
-    readonly effect?: unknown;
-} & {
-    type: import("../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "info" | "error", unknown>;
-    closable: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    title: string;
-    center: boolean;
-    description: string;
-    closeText: string;
-    effect: import("../../utils/props").BuildPropType<StringConstructor, "dark" | "light", unknown>;
-    showIcon: boolean;
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly title: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly description: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "info", unknown, "success" | "warning" | "info" | "error", unknown>;
+    readonly closable: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly closeText: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly showIcon: BooleanConstructor;
+    readonly center: BooleanConstructor;
+    readonly effect: import("../../utils/props").BuildPropReturn<StringConstructor, "light", unknown, "light" | "dark", unknown>;
+}>> & {
     onClose?: ((evt: MouseEvent) => any) | undefined;
 }, {
     type: import("../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "info" | "error", unknown>;
     closable: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     title: string;
-    center: boolean;
     description: string;
     closeText: string;
-    effect: import("../../utils/props").BuildPropType<StringConstructor, "dark" | "light", unknown>;
+    effect: import("../../utils/props").BuildPropType<StringConstructor, "light" | "dark", unknown>;
     showIcon: boolean;
+    center: boolean;
 }>> & Record<string, any>;
 export default ElAlert;
 export * from './src/alert';

package/lib/components/alert/index.js

@@ -9,6 +9,7 @@ var alert_vue_vue_type_script_lang = require('./src/alert.vue_vue_type_script_la
 
 const ElAlert = withInstall.withInstall(alert_vue_vue_type_script_lang["default"]);
 
+exports.alertEffects = alert.alertEffects;
 exports.alertEmits = alert.alertEmits;
 exports.alertProps = alert.alertProps;
 exports.ElAlert = ElAlert;

package/lib/components/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/alert/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Alert from './src/alert.vue'\n\nexport const ElAlert = withInstall(Alert)\nexport default ElAlert\n\nexport * from './src/alert'\n"],"names":["withInstall","Alert"],"mappings":";;;;;;;;;AAEY,MAAC,OAAO,GAAGA,uBAAW,CAACC,yCAAK;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/alert/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Alert from './src/alert.vue'\n\nexport const ElAlert = withInstall(Alert)\nexport default ElAlert\n\nexport * from './src/alert'\n"],"names":["withInstall","Alert"],"mappings":";;;;;;;;;AAEY,MAAC,OAAO,GAAGA,uBAAW,CAACC,yCAAK;;;;;;;;"}

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

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes } from 'vue';
-export declare type AlertEffect = 'light' | 'dark';
+import type Alert from './alert.vue';
+export declare const alertEffects: readonly ["light", "dark"];
 export declare const alertProps: {
     readonly title: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly description: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
@@ -8,10 +9,11 @@ export declare const alertProps: {
     readonly closeText: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly showIcon: BooleanConstructor;
     readonly center: BooleanConstructor;
-    readonly effect: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "light", unknown, "dark" | "light", unknown>;
+    readonly effect: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "light", unknown, "light" | "dark", unknown>;
 };
 export declare type AlertProps = ExtractPropTypes<typeof alertProps>;
 export declare const alertEmits: {
     close: (evt: MouseEvent) => boolean;
 };
 export declare type AlertEmits = typeof alertEmits;
+export declare type AlertInstance = InstanceType<typeof Alert>;

package/lib/components/alert/src/alert.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var icon = require('../../../utils/icon.js');
 var props = require('../../../utils/props.js');
 
+const alertEffects = ["light", "dark"];
 const alertProps = props.buildProps({
   title: {
     type: String,
@@ -31,7 +32,7 @@ const alertProps = props.buildProps({
   center: Boolean,
   effect: {
     type: String,
-    values: ["light", "dark"],
+    values: alertEffects,
     default: "light"
   }
 });
@@ -39,6 +40,7 @@ const alertEmits = {
   close: (evt) => evt instanceof MouseEvent
 };
 
+exports.alertEffects = alertEffects;
 exports.alertEmits = alertEmits;
 exports.alertProps = alertProps;
 //# sourceMappingURL=alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../../../../packages/components/alert/src/alert.ts"],"sourcesContent":["import { TypeComponentsMap } from '@element-plus/utils/icon'\nimport { buildProps, keyOf } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport type AlertEffect = 'light' | 'dark'\n\nexport const alertProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  description: {\n    type: String,\n    default: '',\n  },\n  type: {\n    type: String,\n    values: keyOf(TypeComponentsMap),\n    default: 'info',\n  },\n  closable: {\n    type: Boolean,\n    default: true,\n  },\n  closeText: {\n    type: String,\n    default: '',\n  },\n  showIcon: Boolean,\n  center: Boolean,\n  effect: {\n    type: String,\n    values: ['light', 'dark'],\n    default: 'light',\n  },\n} as const)\nexport type AlertProps = ExtractPropTypes<typeof alertProps>\n\nexport const alertEmits = {\n  close: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\nexport type AlertEmits = typeof alertEmits\n"],"names":["buildProps","keyOf","TypeComponentsMap"],"mappings":";;;;;;;AAEY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAEC,WAAK,CAACC,sBAAiB,CAAC;AACpC,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;AAC7B,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC3C;;;;;"}
+{"version":3,"file":"alert.js","sources":["../../../../../../packages/components/alert/src/alert.ts"],"sourcesContent":["import { TypeComponentsMap } from '@element-plus/utils/icon'\nimport { buildProps, keyOf } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\nimport type Alert from './alert.vue'\n\nexport const alertEffects = ['light', 'dark'] as const\n\nexport const alertProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  description: {\n    type: String,\n    default: '',\n  },\n  type: {\n    type: String,\n    values: keyOf(TypeComponentsMap),\n    default: 'info',\n  },\n  closable: {\n    type: Boolean,\n    default: true,\n  },\n  closeText: {\n    type: String,\n    default: '',\n  },\n  showIcon: Boolean,\n  center: Boolean,\n  effect: {\n    type: String,\n    values: alertEffects,\n    default: 'light',\n  },\n} as const)\nexport type AlertProps = ExtractPropTypes<typeof alertProps>\n\nexport const alertEmits = {\n  close: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\nexport type AlertEmits = typeof alertEmits\n\nexport type AlertInstance = InstanceType<typeof Alert>\n"],"names":["buildProps","keyOf","TypeComponentsMap"],"mappings":";;;;;;;AAEY,MAAC,YAAY,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE;AAClC,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAEC,WAAK,CAACC,sBAAiB,CAAC;AACpC,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,YAAY;AACxB,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC3C;;;;;;"}

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

@@ -6,44 +6,45 @@ declare const _default: import("vue").DefineComponent<{
     readonly closeText: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly showIcon: BooleanConstructor;
     readonly center: BooleanConstructor;
-    readonly effect: import("../../../utils/props").BuildPropReturn<StringConstructor, "light", unknown, "dark" | "light", unknown>;
+    readonly effect: import("../../../utils/props").BuildPropReturn<StringConstructor, "light", unknown, "light" | "dark", unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     visible: import("vue").Ref<boolean>;
-    typeClass: import("vue").ComputedRef<string>;
     iconComponent: import("vue").ComputedRef<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>>;
-    isBigIcon: import("vue").ComputedRef<"" | "is-big">;
-    isBoldTitle: import("vue").ComputedRef<"" | "is-bold">;
+    isBigIcon: import("vue").ComputedRef<string>;
+    isBoldTitle: import("vue").ComputedRef<string>;
     close: (evt: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (evt: MouseEvent) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly title?: unknown;
-    readonly description?: unknown;
-    readonly type?: unknown;
-    readonly closable?: unknown;
-    readonly closeText?: unknown;
-    readonly showIcon?: unknown;
-    readonly center?: unknown;
-    readonly effect?: unknown;
-} & {
-    type: import("../../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "info" | "error", unknown>;
-    closable: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    title: string;
-    center: boolean;
-    description: string;
-    closeText: string;
-    effect: import("../../../utils/props").BuildPropType<StringConstructor, "dark" | "light", unknown>;
-    showIcon: boolean;
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly title: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly description: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "info", unknown, "success" | "warning" | "info" | "error", unknown>;
+    readonly closable: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly closeText: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly showIcon: BooleanConstructor;
+    readonly center: BooleanConstructor;
+    readonly effect: import("../../../utils/props").BuildPropReturn<StringConstructor, "light", unknown, "light" | "dark", unknown>;
+}>> & {
     onClose?: ((evt: MouseEvent) => any) | undefined;
 }, {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "info" | "error", unknown>;
     closable: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     title: string;
-    center: boolean;
     description: string;
     closeText: string;
-    effect: import("../../../utils/props").BuildPropType<StringConstructor, "dark" | "light", unknown>;
+    effect: import("../../../utils/props").BuildPropType<StringConstructor, "light" | "dark", unknown>;
     showIcon: boolean;
+    center: boolean;
 }>;
 export default _default;

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var index = require('../../icon/index.js');
 var icon = require('../../../utils/icon.js');
+require('../../../hooks/index.js');
 var alert = require('./alert.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
 
 var script = vue.defineComponent({
   name: "ElAlert",
@@ -16,18 +18,18 @@ var script = vue.defineComponent({
   props: alert.alertProps,
   emits: alert.alertEmits,
   setup(props, { emit, slots }) {
+    const ns = index$1.useNamespace("alert");
     const visible = vue.ref(true);
-    const typeClass = vue.computed(() => `el-alert--${props.type}`);
     const iconComponent = vue.computed(() => icon.TypeComponentsMap[props.type] || icon.TypeComponentsMap["info"]);
-    const isBigIcon = vue.computed(() => props.description || slots.default ? "is-big" : "");
-    const isBoldTitle = vue.computed(() => props.description || slots.default ? "is-bold" : "");
+    const isBigIcon = vue.computed(() => props.description || slots.default ? ns.is("big") : "");
+    const isBoldTitle = vue.computed(() => props.description || slots.default ? ns.is("bold") : "");
     const close = (evt) => {
       visible.value = false;
       emit("close", evt);
     };
     return {
+      ns,
       visible,
-      typeClass,
       iconComponent,
       isBigIcon,
       isBoldTitle,

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

@@ -1 +1 @@
-{"version":3,"file":"alert.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/alert/src/alert.vue"],"sourcesContent":["<template>\n  <transition name=\"el-alert-fade\">\n    <div\n      v-show=\"visible\"\n      class=\"el-alert\"\n      :class=\"[typeClass, center ? 'is-center' : '', 'is-' + effect]\"\n      role=\"alert\"\n    >\n      <el-icon\n        v-if=\"showIcon && iconComponent\"\n        class=\"el-alert__icon\"\n        :class=\"isBigIcon\"\n      >\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div class=\"el-alert__content\">\n        <span\n          v-if=\"title || $slots.title\"\n          class=\"el-alert__title\"\n          :class=\"[isBoldTitle]\"\n        >\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n        <p v-if=\"$slots.default || description\" class=\"el-alert__description\">\n          <slot>\n            {{ description }}\n          </slot>\n        </p>\n        <template v-if=\"closable\">\n          <div\n            v-if=\"closeText\"\n            class=\"el-alert__closebtn is-customed\"\n            @click=\"close\"\n          >\n            {{ closeText }}\n          </div>\n          <el-icon v-else class=\"el-alert__closebtn\" @click=\"close\">\n            <close />\n          </el-icon>\n        </template>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\nimport { alertProps, alertEmits } from './alert'\n\nexport default defineComponent({\n  name: 'ElAlert',\n\n  components: {\n    ElIcon,\n    ...TypeComponents,\n  },\n\n  props: alertProps,\n  emits: alertEmits,\n\n  setup(props, { emit, slots }) {\n    // state\n    const visible = ref(true)\n\n    // computed\n    const typeClass = computed(() => `el-alert--${props.type}`)\n    const iconComponent = computed(\n      () => TypeComponentsMap[props.type] || TypeComponentsMap['info']\n    )\n    const isBigIcon = computed(() =>\n      props.description || slots.default ? 'is-big' : ''\n    )\n    const isBoldTitle = computed(() =>\n      props.description || slots.default ? 'is-bold' : ''\n    )\n\n    // methods\n    const close = (evt: MouseEvent) => {\n      visible.value = false\n      emit('close', evt)\n    }\n\n    return {\n      visible,\n      typeClass,\n      iconComponent,\n      isBigIcon,\n      isBoldTitle,\n      close,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","alertProps","alertEmits","computed"],"mappings":";;;;;;;;;AAgDA,aAAeA,mBAAe;;AAE9B,EAAE,UAAU;YACRC,YAAM;;GAEP;OACI,EAAEC;OACF,EAAEC,gBAAU;EACjB;;IAEE,MAAM,SAAS;IACf,MAAM;;IAEN,MAAM,WAAW,GAAGC,YAAQ;IAC5B,MAAM;MACJ,OAAO,CAAC,QAAQ,KAAK,CAAC;;KAEvB;IACD,OAAO;MACL,OAAO;MACP,SAAS;;MAET,SAAS;MACT,WAAW;;KAEZ,CAAC;;;;;;"}
+{"version":3,"file":"alert.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/alert/src/alert.vue"],"sourcesContent":["<template>\n  <transition name=\"el-alert-fade\">\n    <div\n      v-show=\"visible\"\n      :class=\"[ns.b(), ns.m(type), ns.is('center', center), ns.is(effect)]\"\n      role=\"alert\"\n    >\n      <el-icon\n        v-if=\"showIcon && iconComponent\"\n        :class=\"[ns.e('icon'), isBigIcon]\"\n      >\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div :class=\"ns.e('content')\">\n        <span\n          v-if=\"title || $slots.title\"\n          :class=\"[ns.e('title'), isBoldTitle]\"\n        >\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n        <p v-if=\"$slots.default || description\" :class=\"ns.e('description')\">\n          <slot>\n            {{ description }}\n          </slot>\n        </p>\n        <template v-if=\"closable\">\n          <div\n            v-if=\"closeText\"\n            :class=\"[ns.e('closebtn'), ns.is('customed')]\"\n            @click=\"close\"\n          >\n            {{ closeText }}\n          </div>\n          <el-icon v-else :class=\"ns.e('closebtn')\" @click=\"close\">\n            <close />\n          </el-icon>\n        </template>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { alertProps, alertEmits } from './alert'\n\nexport default defineComponent({\n  name: 'ElAlert',\n\n  components: {\n    ElIcon,\n    ...TypeComponents,\n  },\n\n  props: alertProps,\n  emits: alertEmits,\n\n  setup(props, { emit, slots }) {\n    const ns = useNamespace('alert')\n\n    // state\n    const visible = ref(true)\n\n    // computed\n    const iconComponent = computed(\n      () => TypeComponentsMap[props.type] || TypeComponentsMap['info']\n    )\n    const isBigIcon = computed(() =>\n      props.description || slots.default ? ns.is('big') : ''\n    )\n    const isBoldTitle = computed(() =>\n      props.description || slots.default ? ns.is('bold') : ''\n    )\n\n    // methods\n    const close = (evt: MouseEvent) => {\n      visible.value = false\n      emit('close', evt)\n    }\n\n    return {\n      ns,\n      visible,\n      iconComponent,\n      isBigIcon,\n      isBoldTitle,\n      close,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","alertProps","alertEmits","computed"],"mappings":";;;;;;;;;;;AA8CA,aAAeA,mBAAe;;AAE9B,EAAE,UAAU;YACRC,YAAM;;GAEP;OACI,EAAEC;OACF,EAAEC,gBAAU;EACjB;;IAEE,MAAM,OAAO;IACb,MAAM;;IAEN,MAAM,WAAW,GAAGC,YAAQ;IAC5B,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK;;UAEjB,CAAC;KACN,CAAC;;QAEE;MACF,OAAO;MACP,aAAa;;MAEb,WAAW;MACX,KAAK;;;;;;;"}