element-plus/es/components/message-box/src/index.mjs.map

A Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue"],"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    >\n      <div\n        class=\"el-overlay-message-box\"\n        @click=\"overlayEvent.onClick\"\n        @mousedown=\"overlayEvent.onMousedown\"\n        @mouseup=\"overlayEvent.onMouseup\"\n      >\n        <div\n          ref=\"rootRef\"\n          v-trap-focus\n          role=\"dialog\"\n          :aria-label=\"title || 'dialog'\"\n          aria-modal=\"true\"\n          :class=\"[\n            'el-message-box',\n            customClass,\n            { 'el-message-box--center': center, 'is-draggable': draggable },\n          ]\"\n          :style=\"customStyle\"\n          @click.stop=\"\"\n        >\n          <div\n            v-if=\"title !== null && title !== undefined\"\n            ref=\"headerRef\"\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\">\n                <close />\n              </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=\"btnSize\"\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              :loading=\"confirmButtonLoading\"\n              :class=\"[confirmButtonClasses]\"\n              :round=\"roundButton\"\n              :disabled=\"confirmButtonDisabled\"\n              :size=\"btnSize\"\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      </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  useSize,\n  useDraggable,\n  useSameTarget,\n  useZIndex,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport {\n  on,\n  off,\n  isValidComponentSize,\n  TypeComponents,\n  TypeComponentsMap,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\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    draggable: 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    const { nextZIndex } = useZIndex()\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: 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 btnSize = useSize(\n      computed(() => props.buttonSize),\n      { prop: true, form: true, formItem: true }\n    )\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const rootRef = ref<HTMLElement>()\n    const headerRef = ref<HTMLElement>()\n    const inputRef = ref<HTMLElement>()\n    const confirmRef = ref<HTMLElement>()\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 = 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    const draggable = computed(() => props.draggable)\n    useDraggable(rootRef, headerRef, draggable)\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 overlayEvent = useSameTarget(handleWrapperClick)\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      overlayEvent,\n      visible,\n      hasMessage,\n      typeClass,\n      btnSize,\n      iconComponent,\n      confirmButtonClasses,\n      rootRef,\n      headerRef,\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":[],"mappings":"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"}