@element-plus/nightly 0.0.20220118 → 0.0.20220119

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

@@ -8,33 +8,34 @@ export declare const ElAlert: import("../../utils/types").SFCWithInstall<import(
     readonly center: BooleanConstructor;
     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;
-    description: string;
-    closeText: string;
-    effect: import("../../utils/props").BuildPropType<StringConstructor, "light" | "dark", unknown>;
-    showIcon: boolean;
-    center: 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>;

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>;
@@ -15,3 +16,4 @@ 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

@@ -8,33 +8,34 @@ declare const _default: import("vue").DefineComponent<{
     readonly center: BooleanConstructor;
     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;
-    description: string;
-    closeText: string;
-    effect: import("../../../utils/props").BuildPropType<StringConstructor, "light" | "dark", unknown>;
-    showIcon: boolean;
-    center: 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>;

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;;;;;;;"}

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

@@ -4,60 +4,60 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 
-const _hoisted_1 = { class: "el-alert__content" };
-const _hoisted_2 = {
-  key: 1,
-  class: "el-alert__description"
-};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = vue.resolveComponent("el-icon");
   const _component_close = vue.resolveComponent("close");
   return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-alert-fade" }, {
     default: vue.withCtx(() => [
       vue.withDirectives(vue.createElementVNode("div", {
-        class: vue.normalizeClass(["el-alert", [_ctx.typeClass, _ctx.center ? "is-center" : "", "is-" + _ctx.effect]]),
+        class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.m(_ctx.type), _ctx.ns.is("center", _ctx.center), _ctx.ns.is(_ctx.effect)]),
         role: "alert"
       }, [
         _ctx.showIcon && _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
           key: 0,
-          class: vue.normalizeClass(["el-alert__icon", _ctx.isBigIcon])
+          class: vue.normalizeClass([_ctx.ns.e("icon"), _ctx.isBigIcon])
         }, {
           default: vue.withCtx(() => [
             (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
           ]),
           _: 1
         }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", _hoisted_1, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(_ctx.ns.e("content"))
+        }, [
           _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
-            class: vue.normalizeClass(["el-alert__title", [_ctx.isBoldTitle]])
+            class: vue.normalizeClass([_ctx.ns.e("title"), _ctx.isBoldTitle])
           }, [
             vue.renderSlot(_ctx.$slots, "title", {}, () => [
               vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
             ])
           ], 2)) : vue.createCommentVNode("v-if", true),
-          _ctx.$slots.default || _ctx.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, [
+          _ctx.$slots.default || _ctx.description ? (vue.openBlock(), vue.createElementBlock("p", {
+            key: 1,
+            class: vue.normalizeClass(_ctx.ns.e("description"))
+          }, [
             vue.renderSlot(_ctx.$slots, "default", {}, () => [
               vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
             ])
-          ])) : vue.createCommentVNode("v-if", true),
+          ], 2)) : vue.createCommentVNode("v-if", true),
           _ctx.closable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.closeText ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: "el-alert__closebtn is-customed",
+              class: vue.normalizeClass([_ctx.ns.e("closebtn"), _ctx.ns.is("customed")]),
               onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
-            }, vue.toDisplayString(_ctx.closeText), 1)) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
+            }, vue.toDisplayString(_ctx.closeText), 3)) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
               key: 1,
-              class: "el-alert__closebtn",
+              class: vue.normalizeClass(_ctx.ns.e("closebtn")),
               onClick: _ctx.close
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_component_close)
               ]),
               _: 1
-            }, 8, ["onClick"]))
+            }, 8, ["class", "onClick"]))
           ], 2112)) : vue.createCommentVNode("v-if", true)
-        ])
+        ], 2)
       ], 2), [
         [vue.vShow, _ctx.visible]
       ])

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

@@ -1 +1 @@
-{"version":3,"file":"alert.vue_vue_type_template_id_1755b449_lang.js","sources":["../../../../../../packages/components/alert/src/alert.vue?vue&type=template&id=1755b449&lang.js"],"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":["_createBlock","_createCommentVNode"],"mappings":";;;;;;;;;;EAuBgD;;;;;;;;;;QAnB1C,KAAK,iDACa,EAAEA;;;SAIZ;8BADR;;;;;;;;;;sCAOA;;;;qBAGS;;;;;;;;;;;;;;;;;;;6BAaG;sBACLC;;;;;;;;;;;;"}
+{"version":3,"file":"alert.vue_vue_type_template_id_1755b449_lang.js","sources":["../../../../../../packages/components/alert/src/alert.vue?vue&type=template&id=1755b449&lang.js"],"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":[],"mappings":";;;;;;;;;;;;;;;QAKM,IAAI;;+CAG6B;;;;;;;;;;;;2CAKlB,CAAC;;wCAEU;;;kDACX;;;;;;;;;;gBAI4B;;;;;;;;;kCAOtB;;;;;;;;yBAMA;;;;;;;;;"}

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

@@ -75,31 +75,53 @@ declare const _Autocomplete: SFCWithInstall<import("vue").DefineComponent<{
     select: (item: any) => void;
     highlight: (index: number) => void;
     onSuggestionShow: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear")[], "input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    valueKey?: unknown;
-    modelValue?: unknown;
-    debounce?: unknown;
-    placement?: unknown;
-    fetchSuggestions?: unknown;
-    popperClass?: unknown;
-    triggerOnFocus?: unknown;
-    selectWhenUnmatched?: unknown;
-    hideLoading?: unknown;
-    popperAppendToBody?: unknown;
-    highlightFirstItem?: unknown;
-} & {
-    modelValue: string | number;
-    placement: import("@popperjs/core").Placement;
-    popperClass: string;
-    valueKey: string;
-    debounce: number;
-    fetchSuggestions: (queryString: string, cb: (data: any[]) => void) => void;
-    triggerOnFocus: boolean;
-    selectWhenUnmatched: boolean;
-    hideLoading: boolean;
-    popperAppendToBody: boolean;
-    highlightFirstItem: boolean;
-} & {}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear")[], "input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    valueKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    placement: {
+        type: import("vue").PropType<import("@popperjs/core").Placement>;
+        validator: (val: string) => boolean;
+        default: string;
+    };
+    fetchSuggestions: {
+        type: import("vue").PropType<(queryString: string, cb: (data: any[]) => void) => void>;
+        default: () => void;
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    triggerOnFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectWhenUnmatched: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popperAppendToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    highlightFirstItem: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
@@ -197,31 +219,53 @@ export declare const ElAutocomplete: SFCWithInstall<import("vue").DefineComponen
     select: (item: any) => void;
     highlight: (index: number) => void;
     onSuggestionShow: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear")[], "input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    valueKey?: unknown;
-    modelValue?: unknown;
-    debounce?: unknown;
-    placement?: unknown;
-    fetchSuggestions?: unknown;
-    popperClass?: unknown;
-    triggerOnFocus?: unknown;
-    selectWhenUnmatched?: unknown;
-    hideLoading?: unknown;
-    popperAppendToBody?: unknown;
-    highlightFirstItem?: unknown;
-} & {
-    modelValue: string | number;
-    placement: import("@popperjs/core").Placement;
-    popperClass: string;
-    valueKey: string;
-    debounce: number;
-    fetchSuggestions: (queryString: string, cb: (data: any[]) => void) => void;
-    triggerOnFocus: boolean;
-    selectWhenUnmatched: boolean;
-    hideLoading: boolean;
-    popperAppendToBody: boolean;
-    highlightFirstItem: boolean;
-} & {}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear")[], "input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    valueKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    placement: {
+        type: import("vue").PropType<import("@popperjs/core").Placement>;
+        validator: (val: string) => boolean;
+        default: string;
+    };
+    fetchSuggestions: {
+        type: import("vue").PropType<(queryString: string, cb: (data: any[]) => void) => void>;
+        default: () => void;
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    triggerOnFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectWhenUnmatched: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popperAppendToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    highlightFirstItem: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;