element-plus 1.2.0-beta.2 → 1.2.0-beta.6

package/es/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_template_id_7035e868_lang.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue?vue&type=template&id=7035e868&lang.js"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n      @click.self=\"handleWrapperClick\"\n    >\n      <div\n        ref=\"root\"\n        v-trap-focus\n        :aria-label=\"title || 'dialog'\"\n        aria-modal=\"true\"\n        :class=\"[\n          'el-message-box',\n          customClass,\n          { 'el-message-box--center': center },\n        ]\"\n        :style=\"customStyle\"\n      >\n        <div\n          v-if=\"title !== null && title !== undefined\"\n          class=\"el-message-box__header\"\n        >\n          <div class=\"el-message-box__title\">\n            <el-icon\n              v-if=\"iconComponent && center\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            v-if=\"showClose\"\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            @click=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n            @keydown.prevent.enter=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n          >\n            <el-icon class=\"el-message-box__close\"><close /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <el-icon\n              v-if=\"iconComponent && !center && hasMessage\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div v-show=\"showInput\" class=\"el-message-box__input\">\n            <el-input\n              ref=\"inputRef\"\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              :placeholder=\"inputPlaceholder\"\n              :class=\"{ invalid: validateError }\"\n              @keydown.prevent.enter=\"handleInputEnter\"\n            />\n            <div\n              class=\"el-message-box__errormsg\"\n              :style=\"{\n                visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n              }\"\n            >\n              {{ editorErrorMessage }}\n            </div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            v-if=\"showCancelButton\"\n            :loading=\"cancelButtonLoading\"\n            :class=\"[cancelButtonClass]\"\n            :round=\"roundButton\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('cancel')\"\n            @keydown.prevent.enter=\"handleAction('cancel')\"\n          >\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            v-show=\"showConfirmButton\"\n            ref=\"confirmRef\"\n            type=\"primary\"\n            plain\n            :loading=\"confirmButtonLoading\"\n            :class=\"[confirmButtonClasses]\"\n            :round=\"roundButton\"\n            :disabled=\"confirmButtonDisabled\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('confirm')\"\n            @keydown.prevent.enter=\"handleAction('confirm')\"\n          >\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockscreen,\n  useLocale,\n  useRestoreActive,\n  usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocale()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const inputRef = ref<ComponentPublicInstance>(null)\n    const confirmRef = ref<ComponentPublicInstance>(null)\n\n    const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockscreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      visible,\n      hasMessage,\n      typeClass,\n      iconComponent,\n      confirmButtonClasses,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createVNode","_createElementVNode","_createElementBlock","_renderSlot"],"mappings":";;;;;EAuBU,OAAM;AAAA;qBAED,OAAM;qBAyBR,OAAM;qBACJ,OAAM;;;EAQc,OAAM;AAAA;;;qBAOP,OAAM;sBAmB3B,OAAM;;;;;;;;sBApFjBA;IAAY,MAAK;AAAA,IAAkB,oDAAa;;qBAC9C;qBAAAC;QAEG,WAAS;QACT,oCAAkC;QAClC,MAAM;QACN,uBAAY;;yBAEb;yBAAAC;YACE,KAAI;AAAA,YAEH,cAAY;YACb,cAAW;AAAA,YACV;;;;;YAKA,sBAAO;;YAGA,uBAAkB,eAAU,uBADpCC,0BAAA;cAIED,0BAAA;gBAEU,sBAAiB,4BADzBF;;kBAEE,uBAAM,0BACE;;mCAER;kCAAAA,oCAAgB;;;;gBAElBE,iDAAS;;cAGH,+BADRC;;gBAEE,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,cAAW;AAAA,gBACV;gBAGA;;gBAIDF,kCAAS,OAAM;mCAAwB;oBAAAA,YAAS;AAAA;AAAA;;;;YAGpDC,0BAAA;cACEA,0BAAA;gBAEU,uBAAkB,eAAU,gCADpCF;;kBAEE,uBAAM,0BACE;;mCAER;kCAAAA,oCAAgB;;;;gBAEP,gCAAXG,0BAAA;kBACEC,uCAAA;qBACY,8CAAVD,oDAAuC,mCACvCA;;sBAAU,WAAQ;;;;;6BAIxBD,0BAAA;gBACED;kBACE,KAAI;AAAA,8BACK;+EAAA;kBACR,MAAM;kBACN,aAAa;kBACb,iCAAkB;kBAClB,kCAAuB;;gBAE1BC;kBACE,OAAM;AAAA,kBACL;;;mCAIE;;wBAfM;;;YAmBfA,0BAAA;cAEU,sCADRF;;gBAEG,SAAS;gBACT,uBAAQ;gBACR,OAAO;gBACP,MAAM;gBACN,+CAAO;gBACP,wEAAuB;;iCAExB;kDAAG,yBAAoB;;;;6BAEzBC;gBAEE,KAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,OAAA;AAAA,gBACC,SAAS;gBACT,uBAAQ;gBACR,OAAO;gBACP,UAAU;gBACV,MAAM;gBACN,+CAAO;gBACP,wEAAuB;;iCAExB;kDAAG,0BAAqB;;;;wBAZhB;;;;;;;;;gBA/FN;;;;;;;;;"}

package/es/components/message-box/src/message-box.type.d.ts

@@ -45,45 +45,83 @@ export declare interface MessageBoxState {
     zIndex: number;
 }
 export declare type Callback = ((value: string, action: Action) => any) | ((action: Action) => any);
+/** Options used in MessageBox */
 export interface ElMessageBoxOptions {
+    /** Callback before MessageBox closes, and it will prevent MessageBox from closing */
     beforeClose?: (action: Action, instance: MessageBoxState, done: () => void) => void;
+    /** Custom class name for MessageBox */
     customClass?: string;
+    /** Custom inline style for MessageBox */
     customStyle?: CSSProperties;
+    /** MessageBox closing callback if you don't prefer Promise */
     callback?: Callback;
+    /** Text content of cancel button */
     cancelButtonText?: string;
+    /** Text content of confirm button */
     confirmButtonText?: string;
+    /** Custom class name of cancel button */
     cancelButtonClass?: string;
+    /** Custom class name of confirm button */
     confirmButtonClass?: string;
+    /** Whether to align the content in center */
     center?: boolean;
+    /** Content of the MessageBox */
     message?: string | VNode;
+    /** Title of the MessageBox */
     title?: string;
+    /** Message type, used for icon display */
     type?: MessageType;
+    /** Message box type */
     boxType?: MessageBoxType;
+    /** Custom icon component */
     icon?: string | Component;
+    /** Whether message is treated as HTML string */
     dangerouslyUseHTMLString?: boolean;
+    /** Whether to distinguish canceling and closing */
     distinguishCancelAndClose?: boolean;
+    /** Whether to lock body scroll when MessageBox prompts */
     lockScroll?: boolean;
+    /** Whether to show a cancel button */
     showCancelButton?: boolean;
+    /** Whether to show a confirm button */
     showConfirmButton?: boolean;
+    /** Whether to show a close button */
     showClose?: boolean;
+    /** Whether to use round button */
     roundButton?: boolean;
+    /** Whether MessageBox can be closed by clicking the mask */
     closeOnClickModal?: boolean;
+    /** Whether MessageBox can be closed by pressing the ESC */
     closeOnPressEscape?: boolean;
+    /** Whether to close MessageBox when hash changes */
     closeOnHashChange?: boolean;
+    /** Whether to show an input */
     showInput?: boolean;
+    /** Placeholder of input */
     inputPlaceholder?: string;
+    /** Initial value of input */
     inputValue?: string;
+    /** Regexp for the input */
     inputPattern?: RegExp;
+    /** Input Type: text, textArea, password or number */
     inputType?: string;
+    /** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */
     inputValidator?: MessageBoxInputValidator;
+    /** Error message when validation fails */
     inputErrorMessage?: string;
 }
 export declare type ElMessageBoxShortcutMethod = ((message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], options?: ElMessageBoxOptions) => Promise<MessageBoxData>) & ((message: ElMessageBoxOptions['message'], options?: ElMessageBoxOptions) => Promise<MessageBoxData>);
 export interface IElMessageBox {
+    /** Show a message box */
+    /** Show a message box */
     (options: ElMessageBoxOptions): Promise<MessageBoxData>;
+    /** Show an alert message box */
     alert: ElMessageBoxShortcutMethod;
+    /** Show a confirm message box */
     confirm: ElMessageBoxShortcutMethod;
+    /** Show a prompt message box */
     prompt: ElMessageBoxShortcutMethod;
+    /** Close current message box */
     close(): void;
 }
 export {};

package/es/components/message-box/src/messageBox.mjs

@@ -3,9 +3,9 @@ import { hasOwn, isString } from '@vue/shared';
 import isServer from '../../../utils/isServer.mjs';
 import '../../../utils/util.mjs';
 import './index.mjs';
-import script from './index.vue_vue&type=script&lang.mjs';
+import script from './index.vue_vue_type_script_lang.mjs';
 
-const messageInstance = new Map();
+const messageInstance = /* @__PURE__ */ new Map();
 const initInstance = (props, container) => {
   const vnode = h(script, props);
   render(vnode, container);

package/es/components/message-box/src/messageBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"messageBox.mjs","sources":["../../../../../../packages/components/message-box/src/messageBox.ts"],"sourcesContent":["import { h, watch, render } from 'vue'\nimport { hasOwn } from '@vue/shared'\nimport isServer from '@element-plus/utils/isServer'\nimport { isVNode, isString } from '@element-plus/utils/util'\nimport MessageBoxConstructor from './index.vue'\n\nimport type { ComponentPublicInstance, VNode } from 'vue'\nimport type {\n  Action,\n  Callback,\n  MessageBoxState,\n  IElMessageBox,\n  ElMessageBoxOptions,\n  MessageBoxData,\n} from './message-box.type'\n\n// component default merge props & data\n\nconst messageInstance = new Map<\n  ComponentPublicInstance<{ doClose: () => void }>, // marking doClose as function\n  {\n    options: any\n    callback: Callback\n    resolve: (res: any) => void\n    reject: (reason?: any) => void\n  }\n>()\n\nconst initInstance = (props: any, container: HTMLElement) => {\n  const vnode = h(MessageBoxConstructor, props)\n  render(vnode, container)\n  document.body.appendChild(container.firstElementChild)\n  return vnode.component\n}\n\nconst genContainer = () => {\n  return document.createElement('div')\n}\n\nconst showMessage = (options: any) => {\n  const container = genContainer()\n  // Adding destruct method.\n  // when transition leaves emitting `vanish` evt. so that we can do the clean job.\n  options.onVanish = () => {\n    // not sure if this causes mem leak, need proof to verify that.\n    // maybe calling out like 1000 msg-box then close them all.\n    render(null, container)\n    messageInstance.delete(vm) // Remove vm to avoid mem leak.\n    // here we were suppose to call document.body.removeChild(container.firstElementChild)\n    // but render(null, container) did that job for us. so that we do not call that directly\n  }\n\n  options.onAction = (action: Action) => {\n    const currentMsg = messageInstance.get(vm)\n    let resolve: Action | { value: string; action: Action }\n    if (options.showInput) {\n      resolve = { value: vm.inputValue, action }\n    } else {\n      resolve = action\n    }\n    if (options.callback) {\n      options.callback(resolve, instance.proxy)\n    } else {\n      if (action === 'cancel' || action === 'close') {\n        if (options.distinguishCancelAndClose && action !== 'cancel') {\n          currentMsg.reject('close')\n        } else {\n          currentMsg.reject('cancel')\n        }\n      } else {\n        currentMsg.resolve(resolve)\n      }\n    }\n  }\n\n  const instance = initInstance(options, container)\n\n  // This is how we use message box programmably.\n  // Maybe consider releasing a template version?\n  // get component instance like v2.\n  const vm = instance.proxy as ComponentPublicInstance<\n    {\n      visible: boolean\n      doClose: () => void\n    } & MessageBoxState\n  >\n\n  for (const prop in options) {\n    if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {\n      vm[prop as string] = options[prop]\n    }\n  }\n\n  watch(\n    () => vm.message,\n    (newVal, oldVal) => {\n      if (isVNode(newVal)) {\n        // Override slots since message is vnode type.\n        instance.slots.default = () => [newVal]\n      } else if (isVNode(oldVal) && !isVNode(newVal)) {\n        delete instance.slots.default\n      }\n    },\n    {\n      immediate: true,\n    }\n  )\n\n  // change visibility after everything is settled\n  vm.visible = true\n  return vm\n}\n\nasync function MessageBox(options: ElMessageBoxOptions): Promise<MessageBoxData>\nfunction MessageBox(\n  options: ElMessageBoxOptions | string | VNode\n): Promise<{ value: string; action: Action } | Action> {\n  if (isServer) return\n  let callback\n  if (isString(options) || isVNode(options)) {\n    options = {\n      message: options,\n    }\n  } else {\n    callback = options.callback\n  }\n\n  return new Promise((resolve, reject) => {\n    const vm = showMessage(options)\n    // collect this vm in order to handle upcoming events.\n    messageInstance.set(vm, {\n      options,\n      callback,\n      resolve,\n      reject,\n    })\n  })\n}\n\nMessageBox.alert = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        type: '',\n        closeOnPressEscape: false,\n        closeOnClickModal: false,\n      },\n      options,\n      {\n        boxType: 'alert',\n      }\n    )\n  )\n}\n\nMessageBox.confirm = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        type: '',\n        showCancelButton: true,\n      },\n      options,\n      {\n        boxType: 'confirm',\n      }\n    )\n  )\n}\n\nMessageBox.prompt = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        showCancelButton: true,\n        showInput: true,\n        type: '',\n      },\n      options,\n      {\n        boxType: 'prompt',\n      }\n    )\n  )\n}\n\nMessageBox.close = () => {\n  // instance.setupInstall.doClose()\n  // instance.setupInstall.state.visible = false\n\n  messageInstance.forEach((_, vm) => {\n    vm.doClose()\n  })\n\n  messageInstance.clear()\n}\n\nexport default MessageBox as IElMessageBox\n"],"names":["MessageBoxConstructor"],"mappings":"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"}
+{"version":3,"file":"messageBox.mjs","sources":["../../../../../../packages/components/message-box/src/messageBox.ts"],"sourcesContent":["import { h, watch, render } from 'vue'\nimport { hasOwn } from '@vue/shared'\nimport isServer from '@element-plus/utils/isServer'\nimport { isVNode, isString } from '@element-plus/utils/util'\nimport MessageBoxConstructor from './index.vue'\n\nimport type { ComponentPublicInstance, VNode } from 'vue'\nimport type {\n  Action,\n  Callback,\n  MessageBoxState,\n  IElMessageBox,\n  ElMessageBoxOptions,\n  MessageBoxData,\n} from './message-box.type'\n\n// component default merge props & data\n\nconst messageInstance = new Map<\n  ComponentPublicInstance<{ doClose: () => void }>, // marking doClose as function\n  {\n    options: any\n    callback: Callback\n    resolve: (res: any) => void\n    reject: (reason?: any) => void\n  }\n>()\n\nconst initInstance = (props: any, container: HTMLElement) => {\n  const vnode = h(MessageBoxConstructor, props)\n  render(vnode, container)\n  document.body.appendChild(container.firstElementChild)\n  return vnode.component\n}\n\nconst genContainer = () => {\n  return document.createElement('div')\n}\n\nconst showMessage = (options: any) => {\n  const container = genContainer()\n  // Adding destruct method.\n  // when transition leaves emitting `vanish` evt. so that we can do the clean job.\n  options.onVanish = () => {\n    // not sure if this causes mem leak, need proof to verify that.\n    // maybe calling out like 1000 msg-box then close them all.\n    render(null, container)\n    messageInstance.delete(vm) // Remove vm to avoid mem leak.\n    // here we were suppose to call document.body.removeChild(container.firstElementChild)\n    // but render(null, container) did that job for us. so that we do not call that directly\n  }\n\n  options.onAction = (action: Action) => {\n    const currentMsg = messageInstance.get(vm)\n    let resolve: Action | { value: string; action: Action }\n    if (options.showInput) {\n      resolve = { value: vm.inputValue, action }\n    } else {\n      resolve = action\n    }\n    if (options.callback) {\n      options.callback(resolve, instance.proxy)\n    } else {\n      if (action === 'cancel' || action === 'close') {\n        if (options.distinguishCancelAndClose && action !== 'cancel') {\n          currentMsg.reject('close')\n        } else {\n          currentMsg.reject('cancel')\n        }\n      } else {\n        currentMsg.resolve(resolve)\n      }\n    }\n  }\n\n  const instance = initInstance(options, container)\n\n  // This is how we use message box programmably.\n  // Maybe consider releasing a template version?\n  // get component instance like v2.\n  const vm = instance.proxy as ComponentPublicInstance<\n    {\n      visible: boolean\n      doClose: () => void\n    } & MessageBoxState\n  >\n\n  for (const prop in options) {\n    if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {\n      vm[prop as string] = options[prop]\n    }\n  }\n\n  watch(\n    () => vm.message,\n    (newVal, oldVal) => {\n      if (isVNode(newVal)) {\n        // Override slots since message is vnode type.\n        instance.slots.default = () => [newVal]\n      } else if (isVNode(oldVal) && !isVNode(newVal)) {\n        delete instance.slots.default\n      }\n    },\n    {\n      immediate: true,\n    }\n  )\n\n  // change visibility after everything is settled\n  vm.visible = true\n  return vm\n}\n\nasync function MessageBox(options: ElMessageBoxOptions): Promise<MessageBoxData>\nfunction MessageBox(\n  options: ElMessageBoxOptions | string | VNode\n): Promise<{ value: string; action: Action } | Action> {\n  if (isServer) return\n  let callback\n  if (isString(options) || isVNode(options)) {\n    options = {\n      message: options,\n    }\n  } else {\n    callback = options.callback\n  }\n\n  return new Promise((resolve, reject) => {\n    const vm = showMessage(options)\n    // collect this vm in order to handle upcoming events.\n    messageInstance.set(vm, {\n      options,\n      callback,\n      resolve,\n      reject,\n    })\n  })\n}\n\nMessageBox.alert = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        type: '',\n        closeOnPressEscape: false,\n        closeOnClickModal: false,\n      },\n      options,\n      {\n        boxType: 'alert',\n      }\n    )\n  )\n}\n\nMessageBox.confirm = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        type: '',\n        showCancelButton: true,\n      },\n      options,\n      {\n        boxType: 'confirm',\n      }\n    )\n  )\n}\n\nMessageBox.prompt = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        showCancelButton: true,\n        showInput: true,\n        type: '',\n      },\n      options,\n      {\n        boxType: 'prompt',\n      }\n    )\n  )\n}\n\nMessageBox.close = () => {\n  // instance.setupInstall.doClose()\n  // instance.setupInstall.state.visible = false\n\n  messageInstance.forEach((_, vm) => {\n    vm.doClose()\n  })\n\n  messageInstance.clear()\n}\n\nexport default MessageBox as IElMessageBox\n"],"names":["MessageBoxConstructor"],"mappings":"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"}

package/es/components/notification/src/notification.d.ts

@@ -15,7 +15,7 @@ export declare const notificationProps: {
     readonly position: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "top-right", unknown, "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown>;
     readonly showClose: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly title: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
-    readonly type: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "success" | "warning" | "error" | "info", unknown>;
+    readonly type: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "success" | "warning" | "info" | "error", unknown>;
     readonly zIndex: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
 };
 export declare type NotificationProps = ExtractPropTypes<typeof notificationProps>;

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

@@ -14,10 +14,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly position: import("../../../utils/props").BuildPropReturn<StringConstructor, "top-right", unknown, "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown>;
     readonly showClose: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly title: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
-    readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "success" | "warning" | "error" | "info", unknown>;
+    readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "success" | "warning" | "info" | "error", unknown>;
     readonly zIndex: import("../../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
 }, {
-    horizontalClass: import("vue").ComputedRef<"left" | "right">;
+    horizontalClass: import("vue").ComputedRef<"right" | "left">;
     typeClass: import("vue").ComputedRef<string>;
     iconComponent: import("vue").ComputedRef<any>;
     positionStyle: import("vue").ComputedRef<CSSProperties>;
@@ -43,40 +43,40 @@ declare const _default: import("vue").DefineComponent<{
     readonly type?: unknown;
     readonly zIndex?: unknown;
 } & {
-    type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "success" | "warning" | "error" | "info", unknown>;
+    type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "success" | "warning" | "info" | "error", unknown>;
+    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | Comment>, unknown, unknown>;
+    title: string;
     zIndex: number;
+    message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>, unknown, unknown>;
     offset: number;
     position: import("../../../utils/props").BuildPropType<StringConstructor, "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown>;
-    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | Comment>, unknown, unknown>;
-    title: string;
     onClose: () => void;
     id: string;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     duration: number;
-    message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>>, unknown, unknown>;
     dangerouslyUseHTMLString: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 } & {
     onClick?: (() => void) | undefined;
 }> & {
     onDestroy?: (() => any) | undefined;
 }, {
-    type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "success" | "warning" | "error" | "info", unknown>;
+    type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "success" | "warning" | "info" | "error", unknown>;
+    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | Comment>, unknown, unknown>;
+    title: string;
     zIndex: number;
+    message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>, unknown, unknown>;
     offset: number;
     position: import("../../../utils/props").BuildPropType<StringConstructor, "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown>;
-    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | Comment>, unknown, unknown>;
-    title: string;
     id: string;
     onClick: () => void;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     duration: number;
-    message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>>, unknown, unknown>;
     dangerouslyUseHTMLString: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 }>;
 export default _default;

package/es/components/notification/src/notification.vue_vue_type_script_lang.mjs

@@ -0,0 +1,79 @@
+import { defineComponent, ref, computed, onMounted } from 'vue';
+import { useTimeoutFn, useEventListener } from '@vueuse/core';
+import { EVENT_CODE } from '../../../utils/aria.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { TypeComponents, TypeComponentsMap } from '../../../utils/icon.mjs';
+import { notificationProps, notificationEmits } from './notification.mjs';
+
+var script = defineComponent({
+  name: "ElNotification",
+  components: {
+    ElIcon,
+    ...TypeComponents
+  },
+  props: notificationProps,
+  emits: notificationEmits,
+  setup(props) {
+    const visible = ref(false);
+    let timer = void 0;
+    const typeClass = computed(() => {
+      const type = props.type;
+      return type && TypeComponentsMap[props.type] ? `el-notification--${type}` : "";
+    });
+    const iconComponent = computed(() => {
+      return TypeComponentsMap[props.type] || props.icon || "";
+    });
+    const horizontalClass = computed(() => props.position.endsWith("right") ? "right" : "left");
+    const verticalProperty = computed(() => props.position.startsWith("top") ? "top" : "bottom");
+    const positionStyle = computed(() => {
+      return {
+        [verticalProperty.value]: `${props.offset}px`,
+        zIndex: props.zIndex
+      };
+    });
+    function startTimer() {
+      if (props.duration > 0) {
+        ;
+        ({ stop: timer } = useTimeoutFn(() => {
+          if (visible.value)
+            close();
+        }, props.duration));
+      }
+    }
+    function clearTimer() {
+      timer == null ? void 0 : timer();
+    }
+    function close() {
+      visible.value = false;
+    }
+    function onKeydown({ code }) {
+      if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {
+        clearTimer();
+      } else if (code === EVENT_CODE.esc) {
+        if (visible.value) {
+          close();
+        }
+      } else {
+        startTimer();
+      }
+    }
+    onMounted(() => {
+      startTimer();
+      visible.value = true;
+    });
+    useEventListener(document, "keydown", onKeydown);
+    return {
+      horizontalClass,
+      typeClass,
+      iconComponent,
+      positionStyle,
+      visible,
+      close,
+      clearTimer,
+      startTimer
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=notification.vue_vue_type_script_lang.mjs.map

package/es/components/notification/src/notification.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.vue_vue_type_script_lang.mjs","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":[],"mappings":";;;;;;;AA0DA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,OACG;AAAA;AAAA,EAGL,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,UAAU,IAAI;AACpB,QAAI,QAAkC;AAEtC,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,OAAO,MAAM;AACnB,aAAO,QAAQ,kBAAkB,MAAM,QACnC,oBAAoB,SACpB;AAAA;AAGN,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,kBAAkB,MAAM,SAAS,MAAM,QAAQ;AAAA;AAGxD,UAAM,kBAAkB,SAAS,MAC/B,MAAM,SAAS,SAAS,WAAW,UAAU;AAG/C,UAAM,mBAAmB,SAAS,MAChC,MAAM,SAAS,WAAW,SAAS,QAAQ;AAG7C,UAAM,gBAAgB,SAAwB,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,UAAU,aAAa,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,SAAS,WAAW,UAAU,SAAS,WAAW,WAAW;AAC/D;AAAA,iBACS,SAAS,WAAW,KAAK;AAElC,YAAI,QAAQ,OAAO;AACjB;AAAA;AAAA,aAEG;AACL;AAAA;AAAA;AAKJ,cAAU,MAAM;AACd;AACA,cAAQ,QAAQ;AAAA;AAGlB,qBAAiB,UAAU,WAAW;AAEtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/components/notification/src/notification.vue_vue_type_template_id_d6b81f36_lang.mjs

@@ -0,0 +1,74 @@
+import { resolveComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, resolveDynamicComponent, createCommentVNode, toDisplayString, renderSlot, createElementBlock, Fragment, vShow, withModifiers, createVNode } from 'vue';
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "el-notification__group" };
+const _hoisted_3 = ["textContent"];
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = ["innerHTML"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_close = resolveComponent("close");
+  return openBlock(), createBlock(Transition, {
+    name: "el-notification-fade",
+    onBeforeLeave: _ctx.onClose,
+    onAfterLeave: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("destroy"))
+  }, {
+    default: withCtx(() => [
+      withDirectives(createElementVNode("div", {
+        id: _ctx.id,
+        class: normalizeClass(["el-notification", _ctx.customClass, _ctx.horizontalClass]),
+        style: normalizeStyle(_ctx.positionStyle),
+        role: "alert",
+        onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)),
+        onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args)),
+        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+      }, [
+        _ctx.iconComponent ? (openBlock(), createBlock(_component_el_icon, {
+          key: 0,
+          class: normalizeClass(["el-notification__icon", _ctx.typeClass])
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
+          ]),
+          _: 1
+        }, 8, ["class"])) : createCommentVNode("v-if", true),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("h2", {
+            class: "el-notification__title",
+            textContent: toDisplayString(_ctx.title)
+          }, null, 8, _hoisted_3),
+          withDirectives(createElementVNode("div", {
+            class: "el-notification__content",
+            style: normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 })
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              !_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(_ctx.message), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createCommentVNode(" Caution here, message could've been compromized, nerver use user's input as message "),
+                createCommentVNode(" eslint-disable-next-line "),
+                createElementVNode("p", { innerHTML: _ctx.message }, null, 8, _hoisted_5)
+              ], 2112))
+            ])
+          ], 4), [
+            [vShow, _ctx.message]
+          ]),
+          _ctx.showClose ? (openBlock(), createBlock(_component_el_icon, {
+            key: 0,
+            class: "el-notification__closeBtn",
+            onClick: withModifiers(_ctx.close, ["stop"])
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_close)
+            ]),
+            _: 1
+          }, 8, ["onClick"])) : createCommentVNode("v-if", true)
+        ])
+      ], 46, _hoisted_1), [
+        [vShow, _ctx.visible]
+      ])
+    ]),
+    _: 3
+  }, 8, ["onBeforeLeave"]);
+}
+
+export { render };
+//# sourceMappingURL=notification.vue_vue_type_template_id_d6b81f36_lang.mjs.map

package/es/components/notification/src/notification.vue_vue_type_template_id_d6b81f36_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.vue_vue_type_template_id_d6b81f36_lang.mjs","sources":["../../../../../../packages/components/notification/src/notification.vue?vue&type=template&id=d6b81f36&lang.js"],"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":["_createBlock","_createElementVNode","_toDisplayString","_renderSlot","_createElementBlock","_createCommentVNode","_createVNode"],"mappings":";;;qBAuBW,OAAM;;;;;;;sBAtBfA;IACE,MAAK;AAAA,IACJ,eAAc;IACd,oDAAa;;qBAEd;qBAAAC;QAEG,IAAI;QACJ,0CAA2B,kBAAa;QACxC,sBAAO;QACR,MAAK;AAAA,QACJ,qDAAY;QACZ,qDAAY;QACZ,gDAAO;;QAGA,mCADRD;;UAEE,uBAAM,yBACE;;2BAER;0BAAAA,oCAAgB;;;;QAElBC,0BAAA;UACEA;YAAI,OAAM;AAAA,yBAAyBC,gBAAQ;;yBAC3CD;YAEE,OAAM;AAAA,YACL,wBAAS,aAAQ;;YAElBE,uCAAA;eACY,8CAAVC,oDAAuC,mCAGvCA;gBAFAC;gBACAA;gBACAJ,0BAAU,WAAQ;;;;oBARZ;;UAYF,+BADRD;;YAEE,OAAM;AAAA,YACL,uBAAY;;6BAEb;cAAAM;;;;;;gBAnCI;;;;;;;;;"}

package/es/components/notification/src/notification2.mjs

@@ -1,6 +1,6 @@
-import script from './notification.vue_vue&type=script&lang.mjs';
-export { default } from './notification.vue_vue&type=script&lang.mjs';
-import { render } from './notification.vue_vue&type=template&id=d6b81f36&lang.mjs';
+import script from './notification.vue_vue_type_script_lang.mjs';
+export { default } from './notification.vue_vue_type_script_lang.mjs';
+import { render } from './notification.vue_vue_type_template_id_d6b81f36_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/notification/src/notification.vue";

package/es/components/notification/src/notify.d.ts

@@ -1,5 +1,13 @@
 import type { VNode } from 'vue';
 import type { NotificationOptions, Notify } from './notification';
+/**
+ * This function gets called when user click `x` button or press `esc` or the time reached its limitation.
+ * Emitted by transition@before-leave event so that we can fetch the current notification.offsetHeight, if this was called
+ * by @after-leave the DOM element will be removed from the page thus we can no longer fetch the offsetHeight.
+ * @param {String} id notification id to be closed
+ * @param {Position} position the positioning strategy
+ * @param {Function} userOnClose the callback called when close passed by user
+ */
 export declare function close(id: string, position: NotificationOptions['position'], userOnClose?: (vm: VNode) => void): void;
 export declare function closeAll(): void;
 declare const _default: Notify;

package/es/components/notification/src/notify.mjs

@@ -5,7 +5,7 @@ import '../../../utils/util.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
 import './notification2.mjs';
 import { notificationTypes } from './notification.mjs';
-import script from './notification.vue_vue&type=script&lang.mjs';
+import script from './notification.vue_vue_type_script_lang.mjs';
 
 const notifications = {
   "top-left": [],

package/es/components/overlay/index.d.ts

@@ -21,8 +21,8 @@ export declare const ElOverlay: import("vue").DefineComponent<{
 }> & {
     onClick?: ((evt: MouseEvent) => any) | undefined;
 }, {
-    zIndex: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<import("csstype").ZIndexProperty>, unknown, unknown>;
     mask: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    zIndex: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<import("csstype").ZIndexProperty>, unknown, unknown>;
     customMaskEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     overlayClass: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | string[] | Record<string, boolean>>, unknown, unknown>;
 }>;

package/es/components/overlay/src/overlay.d.ts

@@ -34,8 +34,8 @@ declare const _default: import("vue").DefineComponent<{
 }> & {
     onClick?: ((evt: MouseEvent) => any) | undefined;
 }, {
-    zIndex: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<ZIndexProperty>, unknown, unknown>;
     mask: import("element-plus/es/utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    zIndex: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<ZIndexProperty>, unknown, unknown>;
     customMaskEvent: import("element-plus/es/utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     overlayClass: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<string | string[] | Record<string, boolean>>, unknown, unknown>;
 }>;

package/es/components/page-header/index.d.ts

@@ -10,7 +10,7 @@ export declare const ElPageHeader: import("../../utils/types").SFCWithInstall<im
     };
 }, {
     handleClick: () => void;
-    t: (...args: any[]) => string;
+    t: import("../..").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     back: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
@@ -18,15 +18,15 @@ export declare const ElPageHeader: import("../../utils/types").SFCWithInstall<im
     readonly title?: unknown;
     readonly content?: unknown;
 } & {
-    content: string;
     icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    content: string;
 } & {
     title?: string | undefined;
 }> & {
     onBack?: (() => any) | undefined;
 }, {
-    content: string;
     icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    content: string;
 }>> & Record<string, any>;
 export default ElPageHeader;
 export * from './src/page-header';

package/es/components/page-header/index.mjs

@@ -1,7 +1,7 @@
 import { withInstall } from '../../utils/with-install.mjs';
 import './src/page-header2.mjs';
 export { pageHeaderEmits, pageHeaderProps } from './src/page-header.mjs';
-import script from './src/page-header.vue_vue&type=script&lang.mjs';
+import script from './src/page-header.vue_vue_type_script_lang.mjs';
 
 const ElPageHeader = withInstall(script);
 

package/es/components/page-header/src/page-header.mjs

@@ -1,4 +1,4 @@
-import { Back } from '@element-plus/icons';
+import { Back } from '@element-plus/icons-vue';
 
 const pageHeaderProps = {
   icon: {

package/es/components/page-header/src/page-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.mjs","sources":["../../../../../../packages/components/page-header/src/page-header.ts"],"sourcesContent":["import { Back } from '@element-plus/icons'\nimport type { ExtractPropTypes, PropType, Component } from 'vue'\n\nexport const pageHeaderProps = {\n  icon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: Back,\n  },\n  title: String,\n  content: {\n    type: String,\n    default: '',\n  },\n} as const\nexport type PageHeaderProps = ExtractPropTypes<typeof pageHeaderProps>\n\nexport const pageHeaderEmits = {\n  back: () => true,\n}\nexport type PageHeaderEmits = typeof pageHeaderEmits\n"],"names":[],"mappings":";;MAGa,kBAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,EACP,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAKA,kBAAkB;AAAA,EAC7B,MAAM,MAAM;AAAA;;;;"}
+{"version":3,"file":"page-header.mjs","sources":["../../../../../../packages/components/page-header/src/page-header.ts"],"sourcesContent":["import { Back } from '@element-plus/icons-vue'\nimport type { ExtractPropTypes, PropType, Component } from 'vue'\n\nexport const pageHeaderProps = {\n  icon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: Back,\n  },\n  title: String,\n  content: {\n    type: String,\n    default: '',\n  },\n} as const\nexport type PageHeaderProps = ExtractPropTypes<typeof pageHeaderProps>\n\nexport const pageHeaderEmits = {\n  back: () => true,\n}\nexport type PageHeaderEmits = typeof pageHeaderEmits\n"],"names":[],"mappings":";;MAGa,kBAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,EACP,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAKA,kBAAkB;AAAA,EAC7B,MAAM,MAAM;AAAA;;;;"}

package/es/components/page-header/src/page-header.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     handleClick: () => void;
-    t: (...args: any[]) => string;
+    t: import("element-plus/es/hooks").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     back: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
@@ -18,14 +18,14 @@ declare const _default: import("vue").DefineComponent<{
     readonly title?: unknown;
     readonly content?: unknown;
 } & {
-    content: string;
     icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    content: string;
 } & {
     title?: string | undefined;
 }> & {
     onBack?: (() => any) | undefined;
 }, {
-    content: string;
     icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    content: string;
 }>;
 export default _default;

package/es/components/page-header/src/page-header.vue_vue_type_script_lang.mjs

@@ -0,0 +1,27 @@
+import { defineComponent } from 'vue';
+import { ElIcon } from '../../icon/index.mjs';
+import '../../../hooks/index.mjs';
+import { pageHeaderProps, pageHeaderEmits } from './page-header.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+
+var script = defineComponent({
+  name: "ElPageHeader",
+  components: {
+    ElIcon
+  },
+  props: pageHeaderProps,
+  emits: pageHeaderEmits,
+  setup(_, { emit }) {
+    const { t } = useLocale();
+    function handleClick() {
+      emit("back");
+    }
+    return {
+      handleClick,
+      t
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=page-header.vue_vue_type_script_lang.mjs.map

package/es/components/page-header/src/page-header.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/page-header/src/page-header.vue"],"sourcesContent":["<template>\n  <div class=\"el-page-header\">\n    <div class=\"el-page-header__left\" @click=\"handleClick\">\n      <div v-if=\"icon || $slots.icon\" class=\"el-page-header__icon\">\n        <slot name=\"icon\">\n          <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n        </slot>\n      </div>\n      <div class=\"el-page-header__title\">\n        <slot name=\"title\">{{ title || t('el.pageHeader.title') }}</slot>\n      </div>\n    </div>\n    <div class=\"el-page-header__content\">\n      <slot name=\"content\">{{ content }}</slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\n\nimport { useLocale } from '@element-plus/hooks'\nimport { pageHeaderEmits, pageHeaderProps } from './page-header'\n\nexport default defineComponent({\n  name: 'ElPageHeader',\n\n  components: {\n    ElIcon,\n  },\n\n  props: pageHeaderProps,\n  emits: pageHeaderEmits,\n\n  setup(_, { emit }) {\n    const { t } = useLocale()\n\n    function handleClick() {\n      emit('back')\n    }\n\n    return {\n      handleClick,\n      t,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;AAwBA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA;AAAA,EAGF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,GAAG,EAAE,QAAQ;AACjB,UAAM,EAAE,MAAM;AAEd,2BAAuB;AACrB,WAAK;AAAA;AAGP,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}