@element-plus/nightly 0.0.20220207 → 0.0.20220208

package/lib/components/color-picker/src/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var debounce = require('lodash/debounce');
+var lodashUnified = require('lodash-unified');
 var index = require('../../button/index.js');
 var index$3 = require('../../icon/index.js');
 require('../../../directives/index.js');
@@ -23,12 +23,9 @@ var useOption = require('./useOption.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var index$4 = require('../../../directives/click-outside/index.js');
 var index$5 = require('../../../hooks/use-locale/index.js');
+var index$6 = require('../../../hooks/use-namespace/index.js');
 var form = require('../../../tokens/form.js');
-var index$6 = require('../../../hooks/use-common-props/index.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var index$7 = require('../../../hooks/use-common-props/index.js');
 
 const _sfc_main = vue.defineComponent({
   name: "ElColorPicker",
@@ -62,6 +59,7 @@ const _sfc_main = vue.defineComponent({
   emits: ["change", "active-change", constants.UPDATE_MODEL_EVENT],
   setup(props, { emit }) {
     const { t } = index$5.useLocale();
+    const ns = index$6.useNamespace("color");
     const elForm = vue.inject(form.elFormKey, {});
     const elFormItem = vue.inject(form.elFormItemKey, {});
     const hue = vue.ref(null);
@@ -82,9 +80,9 @@ const _sfc_main = vue.defineComponent({
       }
       return displayedRgb(color$1, props.showAlpha);
     });
-    const colorSize = index$6.useSize();
+    const colorSize = index$7.useSize();
     const colorDisabled = vue.computed(() => {
-      return props.disabled || elForm.disabled;
+      return !!(props.disabled || elForm.disabled);
     });
     const currentColor = vue.computed(() => {
       return !props.modelValue && !showPanelColor.value ? "" : color$1.value;
@@ -115,7 +113,7 @@ const _sfc_main = vue.defineComponent({
     function setShowPicker(value) {
       showPicker.value = value;
     }
-    const debounceSetShowPicker = debounce__default["default"](setShowPicker, 100);
+    const debounceSetShowPicker = lodashUnified.debounce(setShowPicker, 100);
     function hide() {
       debounceSetShowPicker(false);
       resetColor();
@@ -195,6 +193,7 @@ const _sfc_main = vue.defineComponent({
       clear,
       confirmValue,
       t,
+      ns,
       hue,
       svPanel,
       alpha,
@@ -202,13 +201,6 @@ const _sfc_main = vue.defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "el-color-dropdown__main-wrapper" };
-const _hoisted_2 = { class: "el-color-dropdown__btns" };
-const _hoisted_3 = { class: "el-color-dropdown__value" };
-const _hoisted_4 = {
-  key: 0,
-  class: "el-color-picker__mask"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_hue_slider = vue.resolveComponent("hue-slider");
   const _component_sv_panel = vue.resolveComponent("sv-panel");
@@ -229,7 +221,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "fallback-placements": ["bottom", "top", "right", "left"],
     offset: 0,
     "gpu-acceleration": false,
-    "popper-class": `el-color-picker__panel el-color-dropdown ${_ctx.popperClass}`,
+    "popper-class": [_ctx.ns.be("picker", "panel"), _ctx.ns.b("dropdown"), _ctx.popperClass],
     "stop-popper-mouse-event": false,
     effect: "light",
     trigger: "click",
@@ -238,7 +230,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     content: vue.withCtx(() => [
       vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", null, [
-        vue.createElementVNode("div", _hoisted_1, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(_ctx.ns.be("dropdown", "main-wrapper"))
+        }, [
           vue.createVNode(_component_hue_slider, {
             ref: "hue",
             class: "hue-slider",
@@ -249,7 +243,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ref: "svPanel",
             color: _ctx.color
           }, null, 8, ["color"])
-        ]),
+        ], 2),
         _ctx.showAlpha ? (vue.openBlock(), vue.createBlock(_component_alpha_slider, {
           key: 0,
           ref: "alpha",
@@ -261,8 +255,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           color: _ctx.color,
           colors: _ctx.predefine
         }, null, 8, ["color", "colors"])) : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", _hoisted_2, [
-          vue.createElementVNode("span", _hoisted_3, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(_ctx.ns.be("dropdown", "btns"))
+        }, [
+          vue.createElementVNode("span", {
+            class: vue.normalizeClass(_ctx.ns.be("dropdown", "value"))
+          }, [
             vue.createVNode(_component_el_input, {
               modelValue: _ctx.customInput,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.customInput = $event),
@@ -271,30 +269,30 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               onKeyup: vue.withKeys(_ctx.handleConfirm, ["enter"]),
               onBlur: _ctx.handleConfirm
             }, null, 8, ["modelValue", "onKeyup", "onBlur"])
-          ]),
+          ], 2),
           vue.createVNode(_component_el_button, {
             size: "small",
             type: "text",
-            class: "el-color-dropdown__link-btn",
+            class: vue.normalizeClass(_ctx.ns.be("dropdown", "link-btn")),
             onClick: _ctx.clear
           }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(_ctx.t("el.colorpicker.clear")), 1)
             ]),
             _: 1
-          }, 8, ["onClick"]),
+          }, 8, ["class", "onClick"]),
           vue.createVNode(_component_el_button, {
             plain: "",
             size: "small",
-            class: "el-color-dropdown__btn",
+            class: vue.normalizeClass(_ctx.ns.be("dropdown", "btn")),
             onClick: _ctx.confirmValue
           }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(_ctx.t("el.colorpicker.confirm")), 1)
             ]),
             _: 1
-          }, 8, ["onClick"])
-        ])
+          }, 8, ["class", "onClick"])
+        ], 2)
       ])), [
         [_directive_click_outside, _ctx.hide]
       ])
@@ -302,45 +300,50 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     default: vue.withCtx(() => [
       vue.createElementVNode("div", {
         class: vue.normalizeClass([
-          "el-color-picker",
-          _ctx.colorDisabled ? "is-disabled" : "",
-          _ctx.colorSize ? `el-color-picker--${_ctx.colorSize}` : ""
+          _ctx.ns.b("picker"),
+          _ctx.ns.is("disabled", _ctx.colorDisabled),
+          _ctx.ns.bm("picker", _ctx.colorSize)
         ])
       }, [
-        _ctx.colorDisabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4)) : vue.createCommentVNode("v-if", true),
+        _ctx.colorDisabled ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(_ctx.ns.be("picker", "mask"))
+        }, null, 2)) : vue.createCommentVNode("v-if", true),
         vue.createElementVNode("div", {
-          class: "el-color-picker__trigger",
+          class: vue.normalizeClass(_ctx.ns.be("picker", "trigger")),
           onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleTrigger && _ctx.handleTrigger(...args))
         }, [
           vue.createElementVNode("span", {
-            class: vue.normalizeClass(["el-color-picker__color", { "is-alpha": _ctx.showAlpha }])
+            class: vue.normalizeClass([_ctx.ns.be("picker", "color"), _ctx.ns.is("alpha", _ctx.showAlpha)])
           }, [
             vue.createElementVNode("span", {
-              class: "el-color-picker__color-inner",
+              class: vue.normalizeClass(_ctx.ns.be("picker", "color-inner")),
               style: vue.normalizeStyle({
                 backgroundColor: _ctx.displayedColor
               })
             }, [
-              vue.withDirectives(vue.createVNode(_component_el_icon, { class: "el-color-picker__icon is-icon-arrow-down" }, {
+              vue.withDirectives(vue.createVNode(_component_el_icon, {
+                class: vue.normalizeClass([_ctx.ns.be("picker", "icon"), _ctx.ns.is("icon-arrow-down")])
+              }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(_component_arrow_down)
                 ]),
                 _: 1
-              }, 512), [
+              }, 8, ["class"]), [
                 [vue.vShow, _ctx.modelValue || _ctx.showPanelColor]
               ]),
               !_ctx.modelValue && !_ctx.showPanelColor ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
                 key: 0,
-                class: "el-color-picker__empty is-icon-close"
+                class: vue.normalizeClass([_ctx.ns.be("picker", "empty"), _ctx.ns.is("icon-close")])
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(_component_close)
                 ]),
                 _: 1
-              })) : vue.createCommentVNode("v-if", true)
-            ], 4)
+              }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
+            ], 6)
           ], 2)
-        ])
+        ], 2)
       ], 2)
     ]),
     _: 1

package/lib/components/color-picker/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n  >\n    <template #content>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #default>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                class=\"el-color-picker__icon is-icon-arrow-down\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                class=\"el-color-picker__empty is-icon-close\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElTooltip,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n        value: props.modelValue,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n          value: props.modelValue,\n        })\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElButton","ElTooltip","ElInput","ElIcon","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","isValidComponentSize","UPDATE_MODEL_EVENT","useLocale","inject","elFormKey","elFormItemKey","ref","color","reactive","Color","computed","useSize","debounce"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n  >\n    <template #content>\n      <div v-click-outside=\"hide\">\n        <div :class=\"ns.be('dropdown', 'main-wrapper')\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div :class=\"ns.be('dropdown', 'btns')\">\n          <span :class=\"ns.be('dropdown', 'value')\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            :class=\"ns.be('dropdown', 'link-btn')\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            :class=\"ns.be('dropdown', 'btn')\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #default>\n      <div\n        :class=\"[\n          ns.b('picker'),\n          ns.is('disabled', colorDisabled),\n          ns.bm('picker', colorSize),\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\"></div>\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize, useNamespace } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElTooltip,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const ns = useNamespace('color')\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n        value: props.modelValue,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return !!(props.disabled || elForm.disabled)\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n          value: props.modelValue,\n        })\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      ns,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElButton","ElTooltip","ElInput","ElIcon","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","isValidComponentSize","UPDATE_MODEL_EVENT","useLocale","useNamespace","inject","elFormKey","elFormItemKey","ref","color","reactive","Color","computed","useSize","debounce","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVC;AAAA,eACAC;AAAA,aACAC;AAAA,YACAC;AAAA,WACAC;AAAA,eACAC;AAAA,aACAC;AAAA,eACAC;AAAA,iBACAC;AAAA,eACAC;AAAA;AAAA,EAEF,YAAY;AAAA,kBACVC;AAAA;AAAA,EAEF,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,aAAa;AAAA,IACb,UAAU;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAWC;AAAA;AAAA,IAEb,aAAa;AAAA,IACb,WAAW;AAAA;AAAA,EAEb,OAAO,CAAC,UAAU,iBAAiBC;AAAA,EACnC,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,MAAMC;AACd,UAAM,KAAKC,qBAAa;AACxB,UAAM,SAASC,WAAOC,gBAAW;AACjC,UAAM,aAAaD,WAAOE,oBAAe;AAEzC,UAAM,MAAMC,QAAI;AAChB,UAAM,UAAUA,QAAI;AACpB,UAAM,QAAQA,QAAI;AAClB,UAAM,SAASA,QAAI;AAEnB,UAAMC,UAAQC,aACZ,IAAIC,iBAAM;AAAA,MACR,aAAa,MAAM;AAAA,MACnB,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA;AAGjB,UAAM,aAAaH,QAAI;AACvB,UAAM,iBAAiBA,QAAI;AAC3B,UAAM,cAAcA,QAAI;AAExB,UAAM,iBAAiBI,aAAS,MAAM;AACpC,UAAI,CAAC,MAAM,cAAc,CAAC,eAAe,OAAO;AAC9C,eAAO;AAAA;AAET,aAAO,aAAaH,SAAO,MAAM;AAAA;AAEnC,UAAM,YAAYI;AAClB,UAAM,gBAAgBD,aAAS,MAAM;AACnC,aAAO,CAAC,QAAQ,YAAY,OAAO;AAAA;AAGrC,UAAM,eAAeA,aAAS,MAAM;AAClC,aAAO,CAAC,MAAM,cAAc,CAAC,eAAe,QAAQ,KAAKH,QAAM;AAAA;AAGjE,cACE,MAAM,MAAM,YACZ,CAAC,WAAW;AACV,UAAI,CAAC,QAAQ;AACX,uBAAe,QAAQ;AAAA,iBACd,UAAU,WAAWA,QAAM,OAAO;AAC3C,gBAAM,WAAW;AAAA;AAAA;AAIvB,cACE,MAAM,aAAa,OACnB,CAAC,QAAQ;AACP,kBAAY,QAAQ;AACpB,WAAK,iBAAiB;AAAA;AAI1B,cACE,MAAMA,QAAM,OACZ,MAAM;AACJ,UAAI,CAAC,MAAM,cAAc,CAAC,eAAe,OAAO;AAC9C,uBAAe,QAAQ;AAAA;AAAA;AAM7B,0BAAsB,QAAO,WAAW;AACtC,UAAI,oBAAmBE,mBAAQ;AAC7B,cAAM,MAAM;AAAA;AAGd,YAAM,EAAE,GAAG,GAAG,MAAM,OAAM;AAC1B,aAAO,YACH,QAAQ,MAAM,MAAM,MAAM,OAAM,IAAI,WAAW,SAC/C,OAAO,MAAM,MAAM;AAAA;AAGzB,2BAAuB,OAAO;AAC5B,iBAAW,QAAQ;AAAA;AAGrB,UAAM,wBAAwBG,uBAAS,eAAe;AAEtD,oBAAgB;AACd,4BAAsB;AACtB;AAAA;AAGF,0BAAsB;AACpB,mBAAS,MAAM;AACb,YAAI,MAAM,YAAY;AACpB,kBAAM,WAAW,MAAM;AAAA,eAClB;AACL,yBAAe,QAAQ;AAAA;AAAA;AAAA;AAK7B,6BAAyB;AACvB,UAAI,cAAc;AAAO;AACzB,4BAAsB,CAAC,WAAW;AAAA;AAGpC,6BAAyB;AACvB,cAAM,WAAW,YAAY;AAAA;AAG/B,4BAAwB;AACtB,YAAM;AACN,iCAAyB;AACzB,WAAKZ;AACL,4BAAsB;AACtB;AAEA;AACE,kBAAM;AAAqB,6BACNS;AAAA,UACnB;AAAc,UACd,aAAa;AAAA;AAEf;AACE;AAAA;AAAA;AAAA;AAKN;AACE;AACA;AACA;AACA,UAAI,+BAAqB,MAAM;AAC7B,mBAAW;AAAW;AAExB;AAAA;AAGF;AACE;AACE,wBAAY;AAAqB;AAAA;AAGrC;AAGI;AACE;AACA;AACA,cAAM;AAAO;AAAA;AAKnB,yBAAkC;AAAA;AAChC;AAGF,eAAO;AAAA,MACL;AAAA,MACA;AAAA;AACA,aACAF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;AA1UU;AACJ;;AACU,IACjB;AAAA,IACA;AAAS,IACT;AAAA,IACA;AAAe,IACf;AAA8B,IAC/B;AAAc,IACd;AAAO,IACP;AAAA,IACA;AAAA;;AAEW;;AAKD;AAHO;;AACX;AAAqB,iBAAMM;AAAA;AAAsB;AAAe;;AACvB,uBAA3B;AAAS,YAAE;AAAK;;;AAEZ;;AAAe;AAAc;;AAEhC;UACf,KAAI;AAAA,eACE;AAAA,sBACG;AAAA;;AA4BL;AA1BO;WACX;AAAA;AAAc;;AACZ;AACsB;;AACE;AACV,cACX;AAAA,cACA;AAAmB;;;AAGxB;AACc;AACP;AACC;AACO;;;;;;;AAWH;AANL,YACL;AAAK;AACC;AACc;;;;;;;;;;;;;AAuCpB;AA9BE;AAAkB;AAA2B,oCAAuD;AAAA;;;AAM/F;UAAgB;AAAK;;AAuB1B;AAtBO,UAA6B,OAAKA;AAAA;;AAC7C,yCAAe;AAAA;;AACb;AACU;AACF;AAAqC;;;;AAM3B;;;AAEA;;;;AAHQ;;;gBAOrB;AAAK;;;AAEG;;;;;;;;;;;;;;;;;;;"}

package/lib/components/color-picker/src/index.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     predefine: ArrayConstructor;
 }, {
     color: Color;
-    colorDisabled: import("vue").ComputedRef<boolean | undefined>;
+    colorDisabled: import("vue").ComputedRef<boolean>;
     colorSize: import("vue").ComputedRef<ComponentSize>;
     displayedColor: import("vue").ComputedRef<string>;
     showPanelColor: import("vue").Ref<boolean>;
@@ -26,6 +26,17 @@ declare const _default: import("vue").DefineComponent<{
     clear: () => void;
     confirmValue: () => void;
     t: import("element-plus/es/hooks").Translator;
+    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;
+    };
     hue: import("vue").Ref<null>;
     svPanel: import("vue").Ref<null>;
     alpha: import("vue").Ref<null>;

package/lib/components/index.js

@@ -130,7 +130,7 @@ var skeleton = require('./skeleton/src/skeleton.js');
 var skeletonItem = require('./skeleton/src/skeleton-item.js');
 var space = require('./space/src/space.js');
 var useSpace = require('./space/src/use-space.js');
-var _switch = require('./switch/src/switch2.js');
+var _switch = require('./switch/src/switch.js');
 var tabs = require('./tabs/src/tabs.js');
 var tabBar = require('./tabs/src/tab-bar.js');
 var tabNav = require('./tabs/src/tab-nav.js');
@@ -141,7 +141,7 @@ var constant = require('./time-picker/src/common/constant.js');
 var props = require('./time-picker/src/common/props.js');
 var picker = require('./time-picker/src/common/picker.js');
 var panelTimePick = require('./time-picker/src/time-picker-com/panel-time-pick.js');
-var timelineItem = require('./timeline/src/timeline-item2.js');
+var timelineItem = require('./timeline/src/timeline-item.js');
 var tooltip = require('./tooltip/src/tooltip.js');
 var tokens$1 = require('./tooltip/src/tokens.js');
 var constants = require('../utils/constants.js');

package/lib/components/infinite-scroll/src/index.js

@@ -4,14 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var shared = require('@vue/shared');
-var throttle = require('lodash/throttle');
+var lodashUnified = require('lodash-unified');
 var dom = require('../../../utils/dom.js');
 var error = require('../../../utils/error.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-
 const SCOPE = "ElInfiniteScroll";
 const CHECK_INTERVAL = 50;
 const DEFAULT_DELAY = 200;
@@ -94,7 +90,7 @@ const InfiniteScroll = {
     const { delay, immediate } = getScrollOptions(el, instance);
     const container = dom.getScrollContainer(el, true);
     const containerEl = container === window ? document.documentElement : container;
-    const onScroll = throttle__default["default"](handleScroll.bind(null, el, cb), delay);
+    const onScroll = lodashUnified.throttle(handleScroll.bind(null, el, cb), delay);
     if (!container)
       return;
     el[SCOPE] = {
@@ -107,7 +103,7 @@ const InfiniteScroll = {
       lastScrollTop: containerEl.scrollTop
     };
     if (immediate) {
-      const observer = new MutationObserver(throttle__default["default"](checkFull.bind(null, el, cb), CHECK_INTERVAL));
+      const observer = new MutationObserver(lodashUnified.throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL));
       el[SCOPE].observer = observer;
       observer.observe(el, { childList: true, subtree: true });
       checkFull(el, cb);

package/lib/components/infinite-scroll/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../packages/components/infinite-scroll/src/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { isFunction } from '@vue/shared'\nimport throttle from 'lodash/throttle'\nimport {\n  getScrollContainer,\n  getOffsetTopDistance,\n} from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\n\nimport type { ObjectDirective, ComponentPublicInstance } from 'vue'\n\nexport const SCOPE = 'ElInfiniteScroll'\nexport const CHECK_INTERVAL = 50\nexport const DEFAULT_DELAY = 200\nexport const DEFAULT_DISTANCE = 0\n\nconst attributes = {\n  delay: {\n    type: Number,\n    default: DEFAULT_DELAY,\n  },\n  distance: {\n    type: Number,\n    default: DEFAULT_DISTANCE,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  immediate: {\n    type: Boolean,\n    default: true,\n  },\n}\n\ntype Attrs = typeof attributes\ntype ScrollOptions = { [K in keyof Attrs]: Attrs[K]['default'] }\ntype InfiniteScrollCallback = () => void\ntype InfiniteScrollEl = HTMLElement & {\n  [SCOPE]: {\n    container: HTMLElement | Window\n    containerEl: HTMLElement\n    instance: ComponentPublicInstance\n    delay: number // export for test\n    lastScrollTop: number\n    cb: InfiniteScrollCallback\n    onScroll: () => void\n    observer?: MutationObserver\n  }\n}\n\nconst getScrollOptions = (\n  el: HTMLElement,\n  instance: ComponentPublicInstance\n): ScrollOptions => {\n  return Object.entries(attributes).reduce((acm, [name, option]) => {\n    const { type, default: defaultValue } = option\n    const attrVal = el.getAttribute(`infinite-scroll-${name}`)\n    let value = instance[attrVal] ?? attrVal ?? defaultValue\n    value = value === 'false' ? false : value\n    value = type(value)\n    acm[name] = Number.isNaN(value) ? defaultValue : value\n    return acm\n  }, {} as ScrollOptions)\n}\n\nconst destroyObserver = (el: InfiniteScrollEl) => {\n  const { observer } = el[SCOPE]\n\n  if (observer) {\n    observer.disconnect()\n    delete el[SCOPE].observer\n  }\n}\n\nconst handleScroll = (el: InfiniteScrollEl, cb: InfiniteScrollCallback) => {\n  const { container, containerEl, instance, observer, lastScrollTop } =\n    el[SCOPE]\n  const { disabled, distance } = getScrollOptions(el, instance)\n  const { clientHeight, scrollHeight, scrollTop } = containerEl\n  const delta = scrollTop - lastScrollTop\n\n  el[SCOPE].lastScrollTop = scrollTop\n\n  // trigger only if full check has done and not disabled and scroll down\n  if (observer || disabled || delta < 0) return\n\n  let shouldTrigger = false\n\n  if (container === el) {\n    shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance\n  } else {\n    // get the scrollHeight since el might be visible overflow\n    const { clientTop, scrollHeight: height } = el\n    const offsetTop = getOffsetTopDistance(el, containerEl)\n    shouldTrigger =\n      scrollTop + clientHeight >= offsetTop + clientTop + height - distance\n  }\n\n  if (shouldTrigger) {\n    cb.call(instance)\n  }\n}\n\nfunction checkFull(el: InfiniteScrollEl, cb: InfiniteScrollCallback) {\n  const { containerEl, instance } = el[SCOPE]\n  const { disabled } = getScrollOptions(el, instance)\n\n  if (disabled || containerEl.clientHeight === 0) return\n\n  if (containerEl.scrollHeight <= containerEl.clientHeight) {\n    cb.call(instance)\n  } else {\n    destroyObserver(el)\n  }\n}\n\nconst InfiniteScroll: ObjectDirective<\n  InfiniteScrollEl,\n  InfiniteScrollCallback\n> = {\n  async mounted(el, binding) {\n    const { instance, value: cb } = binding\n\n    if (!isFunction(cb)) {\n      throwError(SCOPE, \"'v-infinite-scroll' binding value must be a function\")\n    }\n\n    // ensure parentNode mounted\n    await nextTick()\n\n    const { delay, immediate } = getScrollOptions(el, instance)\n    const container = getScrollContainer(el, true)\n    const containerEl =\n      container === window\n        ? document.documentElement\n        : (container as HTMLElement)\n    const onScroll = throttle(handleScroll.bind(null, el, cb), delay)\n\n    if (!container) return\n\n    el[SCOPE] = {\n      instance,\n      container,\n      containerEl,\n      delay,\n      cb,\n      onScroll,\n      lastScrollTop: containerEl.scrollTop,\n    }\n\n    if (immediate) {\n      const observer = new MutationObserver(\n        throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL)\n      )\n      el[SCOPE].observer = observer\n      observer.observe(el, { childList: true, subtree: true })\n      checkFull(el, cb)\n    }\n\n    container.addEventListener('scroll', onScroll)\n  },\n  unmounted(el) {\n    const { container, onScroll } = el[SCOPE]\n\n    container?.removeEventListener('scroll', onScroll)\n    destroyObserver(el)\n  },\n  async updated(el) {\n    if (!el[SCOPE]) {\n      await nextTick()\n    }\n    const { containerEl, cb, observer } = el[SCOPE]\n    if (containerEl.clientHeight && observer) {\n      checkFull(el, cb)\n    }\n  },\n}\n\nexport default InfiniteScroll\n"],"names":["getOffsetTopDistance","isFunction","throwError","nextTick","getScrollContainer","throttle"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../packages/components/infinite-scroll/src/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { isFunction } from '@vue/shared'\nimport { throttle } from 'lodash-unified'\nimport {\n  getScrollContainer,\n  getOffsetTopDistance,\n} from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\n\nimport type { ObjectDirective, ComponentPublicInstance } from 'vue'\n\nexport const SCOPE = 'ElInfiniteScroll'\nexport const CHECK_INTERVAL = 50\nexport const DEFAULT_DELAY = 200\nexport const DEFAULT_DISTANCE = 0\n\nconst attributes = {\n  delay: {\n    type: Number,\n    default: DEFAULT_DELAY,\n  },\n  distance: {\n    type: Number,\n    default: DEFAULT_DISTANCE,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  immediate: {\n    type: Boolean,\n    default: true,\n  },\n}\n\ntype Attrs = typeof attributes\ntype ScrollOptions = { [K in keyof Attrs]: Attrs[K]['default'] }\ntype InfiniteScrollCallback = () => void\ntype InfiniteScrollEl = HTMLElement & {\n  [SCOPE]: {\n    container: HTMLElement | Window\n    containerEl: HTMLElement\n    instance: ComponentPublicInstance\n    delay: number // export for test\n    lastScrollTop: number\n    cb: InfiniteScrollCallback\n    onScroll: () => void\n    observer?: MutationObserver\n  }\n}\n\nconst getScrollOptions = (\n  el: HTMLElement,\n  instance: ComponentPublicInstance\n): ScrollOptions => {\n  return Object.entries(attributes).reduce((acm, [name, option]) => {\n    const { type, default: defaultValue } = option\n    const attrVal = el.getAttribute(`infinite-scroll-${name}`)\n    let value = instance[attrVal] ?? attrVal ?? defaultValue\n    value = value === 'false' ? false : value\n    value = type(value)\n    acm[name] = Number.isNaN(value) ? defaultValue : value\n    return acm\n  }, {} as ScrollOptions)\n}\n\nconst destroyObserver = (el: InfiniteScrollEl) => {\n  const { observer } = el[SCOPE]\n\n  if (observer) {\n    observer.disconnect()\n    delete el[SCOPE].observer\n  }\n}\n\nconst handleScroll = (el: InfiniteScrollEl, cb: InfiniteScrollCallback) => {\n  const { container, containerEl, instance, observer, lastScrollTop } =\n    el[SCOPE]\n  const { disabled, distance } = getScrollOptions(el, instance)\n  const { clientHeight, scrollHeight, scrollTop } = containerEl\n  const delta = scrollTop - lastScrollTop\n\n  el[SCOPE].lastScrollTop = scrollTop\n\n  // trigger only if full check has done and not disabled and scroll down\n  if (observer || disabled || delta < 0) return\n\n  let shouldTrigger = false\n\n  if (container === el) {\n    shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance\n  } else {\n    // get the scrollHeight since el might be visible overflow\n    const { clientTop, scrollHeight: height } = el\n    const offsetTop = getOffsetTopDistance(el, containerEl)\n    shouldTrigger =\n      scrollTop + clientHeight >= offsetTop + clientTop + height - distance\n  }\n\n  if (shouldTrigger) {\n    cb.call(instance)\n  }\n}\n\nfunction checkFull(el: InfiniteScrollEl, cb: InfiniteScrollCallback) {\n  const { containerEl, instance } = el[SCOPE]\n  const { disabled } = getScrollOptions(el, instance)\n\n  if (disabled || containerEl.clientHeight === 0) return\n\n  if (containerEl.scrollHeight <= containerEl.clientHeight) {\n    cb.call(instance)\n  } else {\n    destroyObserver(el)\n  }\n}\n\nconst InfiniteScroll: ObjectDirective<\n  InfiniteScrollEl,\n  InfiniteScrollCallback\n> = {\n  async mounted(el, binding) {\n    const { instance, value: cb } = binding\n\n    if (!isFunction(cb)) {\n      throwError(SCOPE, \"'v-infinite-scroll' binding value must be a function\")\n    }\n\n    // ensure parentNode mounted\n    await nextTick()\n\n    const { delay, immediate } = getScrollOptions(el, instance)\n    const container = getScrollContainer(el, true)\n    const containerEl =\n      container === window\n        ? document.documentElement\n        : (container as HTMLElement)\n    const onScroll = throttle(handleScroll.bind(null, el, cb), delay)\n\n    if (!container) return\n\n    el[SCOPE] = {\n      instance,\n      container,\n      containerEl,\n      delay,\n      cb,\n      onScroll,\n      lastScrollTop: containerEl.scrollTop,\n    }\n\n    if (immediate) {\n      const observer = new MutationObserver(\n        throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL)\n      )\n      el[SCOPE].observer = observer\n      observer.observe(el, { childList: true, subtree: true })\n      checkFull(el, cb)\n    }\n\n    container.addEventListener('scroll', onScroll)\n  },\n  unmounted(el) {\n    const { container, onScroll } = el[SCOPE]\n\n    container?.removeEventListener('scroll', onScroll)\n    destroyObserver(el)\n  },\n  async updated(el) {\n    if (!el[SCOPE]) {\n      await nextTick()\n    }\n    const { containerEl, cb, observer } = el[SCOPE]\n    if (containerEl.clientHeight && observer) {\n      checkFull(el, cb)\n    }\n  },\n}\n\nexport default InfiniteScroll\n"],"names":["getOffsetTopDistance","isFunction","throwError","nextTick","getScrollContainer","throttle"],"mappings":"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"}

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

@@ -17,6 +17,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "success" | "warning" | "info" | "error", unknown>;
     readonly zIndex: import("../../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, 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;
+    };
     horizontalClass: import("vue").ComputedRef<"right" | "left">;
     typeClass: import("vue").ComputedRef<string>;
     iconComponent: import("vue").ComputedRef<any>;

package/lib/components/notification/src/notification2.js

@@ -7,8 +7,10 @@ var core = require('@vueuse/core');
 var aria = require('../../../utils/aria.js');
 var index = require('../../icon/index.js');
 var icon = require('../../../utils/icon.js');
+require('../../../hooks/index.js');
 var notification = require('./notification.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
 
 const _sfc_main = vue.defineComponent({
   name: "ElNotification",
@@ -19,11 +21,12 @@ const _sfc_main = vue.defineComponent({
   props: notification.notificationProps,
   emits: notification.notificationEmits,
   setup(props) {
+    const ns = index$1.useNamespace("notification");
     const visible = vue.ref(false);
     let timer = void 0;
     const typeClass = vue.computed(() => {
       const type = props.type;
-      return type && icon.TypeComponentsMap[props.type] ? `el-notification--${type}` : "";
+      return type && icon.TypeComponentsMap[props.type] ? ns.m(type) : "";
     });
     const iconComponent = vue.computed(() => {
       return icon.TypeComponentsMap[props.type] || props.icon || "";
@@ -68,6 +71,7 @@ const _sfc_main = vue.defineComponent({
     });
     core.useEventListener(document, "keydown", onKeydown);
     return {
+      ns,
       horizontalClass,
       typeClass,
       iconComponent,
@@ -80,22 +84,21 @@ const _sfc_main = vue.defineComponent({
   }
 });
 const _hoisted_1 = ["id"];
-const _hoisted_2 = { class: "el-notification__group" };
-const _hoisted_3 = ["textContent"];
-const _hoisted_4 = { key: 0 };
-const _hoisted_5 = ["innerHTML"];
+const _hoisted_2 = ["textContent"];
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = ["innerHTML"];
 function _sfc_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-notification-fade",
+    name: _ctx.ns.b("fade"),
     onBeforeLeave: _ctx.onClose,
     onAfterLeave: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("destroy"))
   }, {
     default: vue.withCtx(() => [
       vue.withDirectives(vue.createElementVNode("div", {
         id: _ctx.id,
-        class: vue.normalizeClass(["el-notification", _ctx.customClass, _ctx.horizontalClass]),
+        class: vue.normalizeClass([_ctx.ns.b(), _ctx.customClass, _ctx.horizontalClass]),
         style: vue.normalizeStyle(_ctx.positionStyle),
         role: "alert",
         onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)),
@@ -104,49 +107,51 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, [
         _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
           key: 0,
-          class: vue.normalizeClass(["el-notification__icon", _ctx.typeClass])
+          class: vue.normalizeClass([_ctx.ns.e("icon"), _ctx.typeClass])
         }, {
           default: vue.withCtx(() => [
             (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
           ]),
           _: 1
         }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", _hoisted_2, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(_ctx.ns.e("group"))
+        }, [
           vue.createElementVNode("h2", {
-            class: "el-notification__title",
+            class: vue.normalizeClass(_ctx.ns.e("title")),
             textContent: vue.toDisplayString(_ctx.title)
-          }, null, 8, _hoisted_3),
+          }, null, 10, _hoisted_2),
           vue.withDirectives(vue.createElementVNode("div", {
-            class: "el-notification__content",
+            class: vue.normalizeClass(_ctx.ns.e("content")),
             style: vue.normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 })
           }, [
             vue.renderSlot(_ctx.$slots, "default", {}, () => [
-              !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_4, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                 vue.createCommentVNode(" Caution here, message could've been compromized, nerver use user's input as message "),
                 vue.createCommentVNode(" eslint-disable-next-line "),
-                vue.createElementVNode("p", { innerHTML: _ctx.message }, null, 8, _hoisted_5)
+                vue.createElementVNode("p", { innerHTML: _ctx.message }, null, 8, _hoisted_4)
               ], 2112))
             ])
-          ], 4), [
+          ], 6), [
             [vue.vShow, _ctx.message]
           ]),
           _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
             key: 0,
-            class: "el-notification__closeBtn",
+            class: vue.normalizeClass(_ctx.ns.e("closeBtn")),
             onClick: vue.withModifiers(_ctx.close, ["stop"])
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(_component_close)
             ]),
             _: 1
-          }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
-        ])
+          }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
+        ], 2)
       ], 46, _hoisted_1), [
         [vue.vShow, _ctx.visible]
       ])
     ]),
     _: 3
-  }, 8, ["onBeforeLeave"]);
+  }, 8, ["name", "onBeforeLeave"]);
 }
 var NotificationConstructor = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 

package/lib/components/notification/src/notification2.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification2.js","sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"el-notification-fade\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      :class=\"['el-notification', customClass, horizontalClass]\"\n      :style=\"positionStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n      @click=\"onClick\"\n    >\n      <el-icon\n        v-if=\"iconComponent\"\n        class=\"el-notification__icon\"\n        :class=\"typeClass\"\n      >\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div class=\"el-notification__group\">\n        <h2 class=\"el-notification__title\" v-text=\"title\"></h2>\n        <div\n          v-show=\"message\"\n          class=\"el-notification__content\"\n          :style=\"!!title ? undefined : { margin: 0 }\"\n        >\n          <slot>\n            <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n            <!-- Caution here, message could've been compromized, nerver use user's input as message -->\n            <!-- eslint-disable-next-line -->\n            <p v-else v-html=\"message\"></p>\n          </slot>\n        </div>\n        <el-icon\n          v-if=\"showClose\"\n          class=\"el-notification__closeBtn\"\n          @click.stop=\"close\"\n        >\n          <close />\n        </el-icon>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\nimport { notificationProps, notificationEmits } from './notification'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElNotification',\n\n  components: {\n    ElIcon,\n    ...TypeComponents,\n  },\n\n  props: notificationProps,\n  emits: notificationEmits,\n\n  setup(props) {\n    const visible = ref(false)\n    let timer: (() => void) | undefined = undefined\n\n    const typeClass = computed(() => {\n      const type = props.type\n      return type && TypeComponentsMap[props.type]\n        ? `el-notification--${type}`\n        : ''\n    })\n\n    const iconComponent = computed(() => {\n      return TypeComponentsMap[props.type] || props.icon || ''\n    })\n\n    const horizontalClass = computed(() =>\n      props.position.endsWith('right') ? 'right' : 'left'\n    )\n\n    const verticalProperty = computed(() =>\n      props.position.startsWith('top') ? 'top' : 'bottom'\n    )\n\n    const positionStyle = computed<CSSProperties>(() => {\n      return {\n        [verticalProperty.value]: `${props.offset}px`,\n        zIndex: props.zIndex,\n      }\n    })\n\n    function startTimer() {\n      if (props.duration > 0) {\n        ;({ stop: timer } = useTimeoutFn(() => {\n          if (visible.value) close()\n        }, props.duration))\n      }\n    }\n\n    function clearTimer() {\n      timer?.()\n    }\n\n    function close() {\n      visible.value = false\n    }\n\n    function onKeydown({ code }: KeyboardEvent) {\n      if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {\n        clearTimer() // press delete/backspace clear timer\n      } else if (code === EVENT_CODE.esc) {\n        // press esc to close the notification\n        if (visible.value) {\n          close()\n        }\n      } else {\n        startTimer() // resume timer\n      }\n    }\n\n    // lifecycle\n    onMounted(() => {\n      startTimer()\n      visible.value = true\n    })\n\n    useEventListener(document, 'keydown', onKeydown)\n\n    return {\n      horizontalClass,\n      typeClass,\n      iconComponent,\n      positionStyle,\n      visible,\n\n      close,\n      clearTimer,\n      startTimer,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","TypeComponents","notificationProps","notificationEmits","ref","computed","TypeComponentsMap","useTimeoutFn","EVENT_CODE","_openBlock","_Transition","_createElementVNode","_normalizeClass","_normalizeStyle","_createCommentVNode","_createElementBlock","_withCtx"],"mappings":";;;;;;;;;;;;AA0DA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,YACVC;AAAA,OACGC;AAAA;AAAA,EAGL,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,UAAUC,QAAI;AACpB,QAAI,QAAkC;AAEtC,UAAM,YAAYC,aAAS,MAAM;AAC/B,YAAM,OAAO,MAAM;AACnB,aAAO,QAAQC,uBAAkB,MAAM,QACnC,oBAAoB,SACpB;AAAA;AAGN,UAAM,gBAAgBD,aAAS,MAAM;AACnC,aAAOC,uBAAkB,MAAM,SAAS,MAAM,QAAQ;AAAA;AAGxD,UAAM,kBAAkBD,aAAS,MAC/B,MAAM,SAAS,SAAS,WAAW,UAAU;AAG/C,UAAM,mBAAmBA,aAAS,MAChC,MAAM,SAAS,WAAW,SAAS,QAAQ;AAG7C,UAAM,gBAAgBA,aAAwB,MAAM;AAClD,aAAO;AAAA,SACJ,iBAAiB,QAAQ,GAAG,MAAM;AAAA,QACnC,QAAQ,MAAM;AAAA;AAAA;AAIlB,0BAAsB;AACpB,UAAI,MAAM,WAAW,GAAG;AACtB;AAAC,QAAC,GAAE,MAAM,UAAUE,kBAAa,MAAM;AACrC,cAAI,QAAQ;AAAO;AAAA,WAClB,MAAM;AAAA;AAAA;AAIb,0BAAsB;AACpB;AAAA;AAGF,qBAAiB;AACf,cAAQ,QAAQ;AAAA;AAGlB,uBAAmB,EAAE,QAAuB;AAC1C,UAAI,SAASC,gBAAW,UAAU,SAASA,gBAAW,WAAW;AAC/D;AAAA,iBACS,SAASA,gBAAW,KAAK;AAElC,YAAI,QAAQ,OAAO;AACjB;AAAA;AAAA,aAEG;AACL;AAAA;AAAA;AAKJ,kBAAU,MAAM;AACd;AACA,cAAQ,QAAQ;AAAA;AAGlB,0BAAiB,UAAU,WAAW;AAEtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;SA/IGC,iCAAsBC;AAAA,IAC1B;AAAA,IACA,eAAW;AAAA;;yBAEZ;AAAA,yBAESC;AAAA,QACN,SAAK;AAAA,QACL,OAAKC,mBAAE,oBAAa;AAAA,QACrB,OAAKC,mBAAO;AAAA,QACX;AAAA,QACA,cAAU,uCAAE;AAAA,QACZ,cAAK,uCAAE,mCAAO;AAAA;SAGP;AAAA;UACN,KAAK;AAAA;;+BAGL;AAAA;;;4BAEFC,uBAqBM,QArBN;AAAA,+BACE,OAAuD;AAAA,iCAA7C;AAAA;;sBACV;AAAA,6BAEQH,uBAA0B;AAAA,YAC/B,OAAK;AAAA;aAEN;AAAA,2BACY,wBAAwB;AAAA,iEAGlCI,uBAA+B,4EAF/BA;AAAA,gBACAD;AAAA,gBACAA,uBAA+B;AAAA;;;iBARzB;AAAA;;;YAaR,KAAK;AAAA,YACJ,OAAK;AAAA;;qBAENE,YAAS;AAAA;;;;;aAnCE;AAAA;;;;;;;;;;"}
+{"version":3,"file":"notification2.js","sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      :class=\"[ns.b(), customClass, horizontalClass]\"\n      :style=\"positionStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n      @click=\"onClick\"\n    >\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div :class=\"ns.e('group')\">\n        <h2 :class=\"ns.e('title')\" v-text=\"title\"></h2>\n        <div\n          v-show=\"message\"\n          :class=\"ns.e('content')\"\n          :style=\"!!title ? undefined : { margin: 0 }\"\n        >\n          <slot>\n            <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n            <!-- Caution here, message could've been compromized, nerver use user's input as message -->\n            <!-- eslint-disable-next-line -->\n            <p v-else v-html=\"message\"></p>\n          </slot>\n        </div>\n        <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n          <close />\n        </el-icon>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { notificationProps, notificationEmits } from './notification'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElNotification',\n\n  components: {\n    ElIcon,\n    ...TypeComponents,\n  },\n\n  props: notificationProps,\n  emits: notificationEmits,\n\n  setup(props) {\n    const ns = useNamespace('notification')\n    const visible = ref(false)\n    let timer: (() => void) | undefined = undefined\n\n    const typeClass = computed(() => {\n      const type = props.type\n      return type && TypeComponentsMap[props.type] ? ns.m(type) : ''\n    })\n\n    const iconComponent = computed(() => {\n      return TypeComponentsMap[props.type] || props.icon || ''\n    })\n\n    const horizontalClass = computed(() =>\n      props.position.endsWith('right') ? 'right' : 'left'\n    )\n\n    const verticalProperty = computed(() =>\n      props.position.startsWith('top') ? 'top' : 'bottom'\n    )\n\n    const positionStyle = computed<CSSProperties>(() => {\n      return {\n        [verticalProperty.value]: `${props.offset}px`,\n        zIndex: props.zIndex,\n      }\n    })\n\n    function startTimer() {\n      if (props.duration > 0) {\n        ;({ stop: timer } = useTimeoutFn(() => {\n          if (visible.value) close()\n        }, props.duration))\n      }\n    }\n\n    function clearTimer() {\n      timer?.()\n    }\n\n    function close() {\n      visible.value = false\n    }\n\n    function onKeydown({ code }: KeyboardEvent) {\n      if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {\n        clearTimer() // press delete/backspace clear timer\n      } else if (code === EVENT_CODE.esc) {\n        // press esc to close the notification\n        if (visible.value) {\n          close()\n        }\n      } else {\n        startTimer() // resume timer\n      }\n    }\n\n    // lifecycle\n    onMounted(() => {\n      startTimer()\n      visible.value = true\n    })\n\n    useEventListener(document, 'keydown', onKeydown)\n\n    return {\n      ns,\n      horizontalClass,\n      typeClass,\n      iconComponent,\n      positionStyle,\n      visible,\n\n      close,\n      clearTimer,\n      startTimer,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","TypeComponents","notificationProps","notificationEmits","useNamespace","ref","computed","TypeComponentsMap","useTimeoutFn","EVENT_CODE","_openBlock","_createBlock","_createElementVNode","_normalizeClass","_normalizeStyle","_createCommentVNode","_createElementBlock","_withCtx"],"mappings":";;;;;;;;;;;;;;AAmDA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,YACVC;AAAA,OACGC;AAAA;AAAA,EAGL,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,KAAKC,qBAAa;AACxB,UAAM,UAAUC,QAAI;AACpB,QAAI,QAAkC;AAEtC,UAAM,YAAYC,aAAS,MAAM;AAC/B,YAAM,OAAO,MAAM;AACnB,aAAO,QAAQC,uBAAkB,MAAM,QAAQ,GAAG,EAAE,QAAQ;AAAA;AAG9D,UAAM,gBAAgBD,aAAS,MAAM;AACnC,aAAOC,uBAAkB,MAAM,SAAS,MAAM,QAAQ;AAAA;AAGxD,UAAM,kBAAkBD,aAAS,MAC/B,MAAM,SAAS,SAAS,WAAW,UAAU;AAG/C,UAAM,mBAAmBA,aAAS,MAChC,MAAM,SAAS,WAAW,SAAS,QAAQ;AAG7C,UAAM,gBAAgBA,aAAwB,MAAM;AAClD,aAAO;AAAA,SACJ,iBAAiB,QAAQ,GAAG,MAAM;AAAA,QACnC,QAAQ,MAAM;AAAA;AAAA;AAIlB,0BAAsB;AACpB,UAAI,MAAM,WAAW,GAAG;AACtB;AAAC,QAAC,GAAE,MAAM,UAAUE,kBAAa,MAAM;AACrC,cAAI,QAAQ;AAAO;AAAA,WAClB,MAAM;AAAA;AAAA;AAIb,0BAAsB;AACpB;AAAA;AAGF,qBAAiB;AACf,cAAQ,QAAQ;AAAA;AAGlB,uBAAmB,EAAE,QAAuB;AAC1C,UAAI,SAASC,gBAAW,UAAU,SAASA,gBAAW,WAAW;AAC/D;AAAA,iBACS,SAASA,gBAAW,KAAK;AAElC,YAAI,QAAQ,OAAO;AACjB;AAAA;AAAA,aAEG;AACL;AAAA;AAAA;AAKJ,kBAAU,MAAM;AACd;AACA,cAAQ,QAAQ;AAAA;AAGlB,0BAAiB,UAAU,WAAW;AAEtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;SAxIKC,iBAAIC;AAAA,IACV,cAAY,EAAE;AAAA,IACd,eAAW;AAAA;;yBAEZ;AAAA,yBAESC;AAAA,QACN,SAAK;AAAA,QACL,OAAKC,mBAAE,mBAAa;AAAA,QACrB,OAAKC,mBAAO;AAAA,QACX;AAAA,QACA,cAAU,uCAAE;AAAA,QACZ,cAAK,uCAAE,mCAAO;AAAA;SAEA;AAAA;UAAgB,KAAK;AAAA;;+BAClC;AAAA;;;4BAEFC,uBAiBM;AAAA,+BAjBK,OAAE;AAAA;WACX;AAAA,iCAAU,MAAE;AAAA,sCAAe,QAAc;AAAA;uBACzC;AAAA,6BAEQH,uBAAM;AAAA,YACX,OAAKC,wBAAI;AAAA;aAEV;AAAA,2BACY,wBAAwB;AAAA,iEAGlCG,uBAA+B,4EAF/BA;AAAA,gBACAD;AAAA,gBACAA,uBAA+B;AAAA;;;iBARlB;AAAA;;;YAWU,KAAK;AAAA,YAAqB,OAAKF,wBAAO;AAAA;;qBAC/DI,YAAS;AAAA;;;;;aA3BE;AAAA;;;;;;;;;;"}

package/lib/components/overlay/src/overlay.js

@@ -6,7 +6,8 @@ var vue = require('vue');
 var vnode = require('../../../utils/vnode.js');
 require('../../../hooks/index.js');
 var props = require('../../../utils/props.js');
-var index = require('../../../hooks/use-same-target/index.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var index$1 = require('../../../hooks/use-same-target/index.js');
 
 const overlayProps = props.buildProps({
   mask: {
@@ -36,13 +37,14 @@ var Overlay = vue.defineComponent({
   props: overlayProps,
   emits: overlayEmits,
   setup(props, { slots, emit }) {
+    const ns = index.useNamespace("overlay");
     const onMaskClick = (e) => {
       emit("click", e);
     };
-    const { onClick, onMousedown, onMouseup } = index.useSameTarget(props.customMaskEvent ? void 0 : onMaskClick);
+    const { onClick, onMousedown, onMouseup } = index$1.useSameTarget(props.customMaskEvent ? void 0 : onMaskClick);
     return () => {
       return props.mask ? vue.createVNode("div", {
-        class: ["el-overlay", props.overlayClass],
+        class: [ns.b(), props.overlayClass],
         style: {
           zIndex: props.zIndex
         },