hongluan-ui/es/components/message-box/src/index.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue"],"sourcesContent":["<template>\n  <transition name=\"fade\">\n    <hl-overlay\n      v-show=\"visible\"\n      :mask=\"modal\"\n      :overlay-class=\"[modalClass]\"\n      :z-index=\"zIndex\"\n      :msg-overlay-id=\"messageBoxId\"\n      @click.self=\"handleWrapperClick\"\n    />\n  </transition>\n  <teleport :to=\"rootContainer\">\n    <transition :name=\"animationName\" @after-leave=\"afterLeave\">\n      <div\n        v-show=\"visible\"\n        ref=\"messageBoxRef\"\n        role=\"dialog\"\n        :aria-label=\"title\"\n        aria-modal=\"true\"\n        :aria-describedby=\"!showInput ? contentId : undefined\"\n        :class=\"[namespace + '-message-box', customClass]\"\n        :style=\"{ zIndex: zIndex + 1, ...customStyle }\"\n        :msg-box-id=\"messageBoxId\"\n        @click.self=\"handleWrapperClick\"\n      >\n        <hl-focus-trap\n          loop\n          :trapped=\"visible\"\n          :focus-trap-el=\"rootRef\"\n          :focus-start-el=\"focusStartRef\"\n          @release-requested=\"onCloseRequested\"\n        >\n          <div\n            ref=\"rootRef\"\n            :class=\"[\n              namespace + '-panel',\n              hasDefinedIcon ? `${type === 'error' ? 'danger' : type}` : '',\n              'borderless',\n            ]\"\n            tabindex=\"-1\"\n            @click.stop\n          >\n            <div\n              ref=\"headerRef\"\n              class=\"panel-header\"\n            >\n              <div v-if=\"type || $slots.icon\" class=\"panel-header-left\">\n                <slot name=\"icon\">\n                  <hl-icon>\n                    <system-success v-if=\"type === 'success'\" />\n                    <system-info v-else-if=\"type === 'info'\" />\n                    <system-warning v-else-if=\"type === 'warning'\" />\n                    <system-error v-else-if=\"['danger', 'error'].includes(type)\" />\n                  </hl-icon>\n                </slot>\n              </div>\n              <h5 class=\"panel-title\">{{ title }}</h5>\n              <div class=\"panel-header-right\">\n                <hl-button\n                  v-if=\"showClose\"\n                  :aria-label=\"t('hl.messagebox.close')\"\n                  class=\"panel-close\"\n                  @click=\"\n                    handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n                  \"\n                  @keydown.prevent.enter=\"\n                    handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n                  \"\n                >\n                  <hl-icon>\n                    <system-close />\n                  </hl-icon>\n                </hl-button>\n              </div>\n            </div>\n            <div :id=\"contentId\" class=\"panel-body\">\n              <slot>\n                <span v-if=\"!dangerouslyUseHTMLString\">\n                  {{ message }}\n                </span>\n                <span v-else v-html=\"message\"></span>\n              </slot>\n            </div>\n            <div class=\"panel-footer items-center\">\n              <hl-button\n                v-if=\"showCancelButton\"\n                :loading=\"cancelButtonLoading\"\n                :class=\"[cancelButtonClass, 'm-r-md']\"\n                :type=\"cancelButtonType\"\n                :size=\"buttonSize\"\n                :round=\"roundButton\"\n                @click=\"handleAction('cancel')\"\n                @keydown.prevent.enter=\"handleAction('cancel')\"\n              >\n                {{ cancelButtonText || t('hl.messagebox.cancel') }}\n              </hl-button>\n              <hl-button\n                v-show=\"showConfirmButton\"\n                ref=\"confirmRef\"\n                :loading=\"confirmButtonLoading\"\n                :round=\"roundButton\"\n                :type=\"confirmButtonType\"\n                :size=\"buttonSize\"\n                :disabled=\"confirmButtonDisabled\"\n                @click=\"handleAction('confirm')\"\n                @keydown.prevent.enter=\"handleAction('confirm')\"\n              >\n                {{ confirmButtonText || t('hl.messagebox.confirm') }}\n              </hl-button>\n            </div>\n          </div>\n        </hl-focus-trap>\n      </div>\n    </transition>\n  </teleport>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  reactive,\n  ref,\n  toRefs,\n  isVNode,\n  watch,\n} from 'vue'\nimport HlButton from '@hongluan-ui/components/button'\nimport { HlOverlay } from '@hongluan-ui/components/overlay'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport HlFocusTrap from '@hongluan-ui/components/focus-trap'\nimport { SystemSuccess, SystemInfo, SystemWarning, SystemError, SystemClose } from '@hongluan-ui/components/system-icon'\nimport { useLocale, useId, useLockscreen, useNamespace, useZIndex } from '@hongluan-ui/hooks'\nimport { isString, generateId, isValidComponentSize, isElement } from '@hongluan-ui/utils'\nimport { MessageTypeIconMap } from '@hongluan-ui/constants'\n\nimport type { ComponentPublicInstance, PropType, VNode } from 'vue'\nimport type { ComponentSize } from '@hongluan-ui/constants'\nimport type { Action, MessageBoxState, MessageBoxType } from './message-box.type'\n\nexport default defineComponent({\n  name: 'MessageBox',\n  install: null,\n  components: {\n    HlOverlay,\n    HlButton,\n    HlIcon,\n    SystemSuccess,\n    SystemInfo,\n    SystemWarning,\n    SystemClose,\n    SystemError,\n    HlFocusTrap,\n  },\n  inheritAttrs: false,\n  props: {\n    id: String,\n    singleton: Boolean,\n    beforeClose: {\n      type: Function as PropType<\n      (action: Action, state: MessageBoxState, doClose: () => void) => any\n      >,\n      default: undefined,\n    },\n    callback: Function,\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n      default: 'md',\n    },\n    cancelButtonText: {\n      type: String,\n    },\n    cancelButtonClass: String,\n    center: Boolean,\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    confirmButtonText: {\n      type: String,\n    },\n    confirmButtonClass: String,\n    appendTo: {\n      type: [String, Object], // default append to body\n      default: 'body',\n    },\n    customClass: String,\n    customStyle: {\n      type: Object,\n      default: () => ({}),\n    },\n    dangerouslyUseHTMLString: Boolean,\n    distinguishCancelAndClose: Boolean,\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    message: {\n      type: [String, Object] as PropType<string | VNode>,\n      validator: (val: unknown) => {\n        return isString(val) || isVNode(val)\n      },\n    },\n    icon: {\n      type: Object as PropType<VNode>,\n      validator: (val: unknown) => isVNode(val),\n    },\n    modalFade: {\n      // implement this feature\n      type: Boolean,\n      default: true,\n    },\n    modalClass: {\n      type: String,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    roundButton: Boolean,\n    showCancelButton: Boolean,\n    showConfirmButton: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    confirmButtonType: {\n      type: String,\n      default: 'primary',\n    },\n    cancelButtonType: String,\n    title: String,\n    zIndex: {\n      type: Number,\n    },\n    animationName: {\n      type: String,\n      default: 'bounce',\n    },\n    type: { type: String, default: '' },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    const { namespace } = useNamespace()\n    const { t } = useLocale()\n\n    // const popup = usePopup(props, doClose)\n    const visible = ref(false)\n    const { nextZIndex } = useZIndex()\n    // s represents state\n    const state = reactive({\n      beforeClose: props.beforeClose,\n      callback: props.callback,\n      cancelButtonText: props.cancelButtonText,\n      cancelButtonClass: props.cancelButtonClass,\n      confirmButtonText: props.confirmButtonText,\n      confirmButtonClass: props.confirmButtonClass,\n      confirmButtonType: props.confirmButtonType || 'primary',\n      cancelButtonType: props.cancelButtonType || null,\n      customClass: props.customClass,\n      customStyle: props.customStyle,\n      dangerouslyUseHTMLString: props.dangerouslyUseHTMLString || false,\n      distinguishCancelAndClose: props.distinguishCancelAndClose || false,\n      message: props.message || null,\n      modalFade: props.modalFade || true,\n      modalClass: props.modalClass || '',\n      showCancelButton: props.showCancelButton || false,\n      showConfirmButton: props.showConfirmButton || (props.showConfirmButton !== false ? true : props.showConfirmButton),\n      type: props.type || '',\n      title: props.title || undefined,\n      showInput: false,\n      inputValue: '',\n      animationName: props.animationName,\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    }) as MessageBoxState\n    const hasMessage = computed(() => !!props.message)\n    const hasDefinedIcon = computed(() => {\n      return !!MessageTypeIconMap[props.type]\n    })\n\n    const rootRef = ref<HTMLElement>()\n    const headerRef = ref<HTMLElement>()\n    const focusStartRef = ref<HTMLElement>()\n    const confirmRef = ref<ComponentPublicInstance>(null)\n    const messageBoxRef = ref(null)\n\n    let cleanup: () => void | null = null\n\n    const rootContainer = computed(() => {\n      if (isString(props.appendTo)) {\n        const appendTo = document.querySelector<HTMLElement>(props.appendTo)\n        if (!isElement(appendTo)) {\n          return 'body'\n        }\n      }\n      return props.appendTo\n    })\n\n    const contentId = useId()\n\n    watch(() => visible.value, val => {\n      if (val) {\n        if (props.boxType !== 'prompt') {\n          focusStartRef.value = confirmRef.value?.$el ?? rootRef.value\n        }\n        state.zIndex = nextZIndex()\n      }\n      if (props.boxType !== 'prompt') return\n    })\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        window.addEventListener('hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        window.removeEventListener('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(props.distinguishCancelAndClose ? 'close' : 'cancel')\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      // delete prompt functions\n      return true\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    const afterLeave = () => {\n      emit('vanish')\n      cleanup && cleanup()\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    const onCloseRequested = () => {\n      if (props.closeOnPressEscape) {\n        handleClose()\n      }\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      cleanup = useLockscreen(visible, false)\n    }\n\n    return {\n      ...toRefs(state),\n      rootContainer,\n      rootRef,\n      headerRef,\n      focusStartRef,\n      contentId,\n      messageBoxId: generateId(),\n      namespace,\n      hasDefinedIcon,\n      visible,\n      hasMessage,\n      confirmRef,\n      messageBoxRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      onCloseRequested,\n      handleWrapperClick,\n      handleAction,\n      afterLeave,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_withModifiers","_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF,EACA,cAAc;AAAA,EACd,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,aAAa;AAAA,MACX,MAAM;AAAA,MAGN,SAAS;AAAA;AACX,IACA,UAAU;AAAA,IACV,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WAAW;AAAA,MACX,SAAS;AAAA;AACX,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA;AACR,IACA,mBAAmB;AAAA,IACnB,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,mBAAmB;AAAA,MACjB,MAAM;AAAA;AACR,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;AACX,IACA,aAAa;AAAA,IACb,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAQ;AACnB,IACA,0BAA0B;AAAA,IAC1B,2BAA2B;AAAA,IAC3B,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,WAAW,CAAC,QAAiB;AAC3B,eAAO,SAAS,GAAG,KAAK,QAAQ,GAAG;AAAA;AACrC;AACF,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW,CAAC,QAAiB,QAAQ,GAAG;AAAA;AAC1C,IACA,WAAW;AAAA,MAET,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,YAAY;AAAA,MACV,MAAM;AAAA;AACR,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,MAAM;AAAA;AACR,IACA,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,MAAM,EAAE,MAAM,QAAQ,SAAS;AAAG,IAClC,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;AACX;AACF,EACA,OAAO,CAAC,UAAU,QAAQ;AAAA,EAC1B,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,cAAc;AACtB,UAAM,EAAE,MAAM;AAGd,UAAM,UAAU,IAAI,KAAK;AACzB,UAAM,EAAE,eAAe;AAEvB,UAAM,QAAQ,SAAS;AAAA,MACrB,aAAa,MAAM;AAAA,MACnB,UAAU,MAAM;AAAA,MAChB,kBAAkB,MAAM;AAAA,MACxB,mBAAmB,MAAM;AAAA,MACzB,mBAAmB,MAAM;AAAA,MACzB,oBAAoB,MAAM;AAAA,MAC1B,mBAAmB,MAAM,qBAAqB;AAAA,MAC9C,kBAAkB,MAAM,oBAAoB;AAAA,MAC5C,aAAa,MAAM;AAAA,MACnB,aAAa,MAAM;AAAA,MACnB,0BAA0B,MAAM,4BAA4B;AAAA,MAC5D,2BAA2B,MAAM,6BAA6B;AAAA,MAC9D,SAAS,MAAM,WAAW;AAAA,MAC1B,WAAW,MAAM,aAAa;AAAA,MAC9B,YAAY,MAAM,cAAc;AAAA,MAChC,kBAAkB,MAAM,oBAAoB;AAAA,MAC5C,mBAAmB,MAAM,4BAA4B,sBAAsB,QAAQ,OAAO,MAAM;AAAA,MAChG,MAAM,MAAM,QAAQ;AAAA,MACpB,OAAO,MAAM,SAAS;AAAA,MACtB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,eAAe,MAAM;AAAA,MACrB,QAAQ;AAAA,MACR,sBAAsB;AAAA,MACtB,qBAAqB;AAAA,MACrB,uBAAuB;AAAA,MACvB,oBAAoB;AAAA,MAIpB,eAAe;AAAA,MACf,QAAQ;AAAW,KACpB;AACD,UAAM,aAAa,SAAS,MAAM,CAAC,CAAC,MAAM,OAAO;AACjD,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,CAAC,CAAC,mBAAmB,MAAM;AAAA,KACnC;AAED,UAAM,UAAU;AAChB,UAAM,YAAY;AAClB,UAAM,gBAAgB;AACtB,UAAM,aAAa,IAA6B,IAAI;AACpD,UAAM,gBAAgB,IAAI,IAAI;AAE9B,QAAI,UAA6B;AAEjC,UAAM,gBAAgB,SAAS,MAAM;AACnC,UAAI,SAAS,MAAM,QAAQ,GAAG;AAC5B,cAAM,WAAW,SAAS,cAA2B,MAAM,QAAQ;AACnE,YAAI,CAAC,UAAU,QAAQ,GAAG;AACxB,iBAAO;AAAA;AACT;AAEF,aAAO,MAAM;AAAA,KACd;AAED,UAAM,YAAY;AAElB,UAAM,MAAM,QAAQ,OAAO,SAAO;AAChC,UAAI;AACF;AACE;AAAuD;AAEzD;AAA0B;AAE5B;AAAgC;AAAA;AAGlC;AACE;AACA;AACE,eAAO;AAAsC;AAC/C;AAGF;AACE;AACE,eAAO,oBAAoB;AAAqB;AAClD;AAGF;AACE;AAAoB;AACpB;AACA;AACE;AAAkB;AAA2B;AAC9C;AAGH;AACE,UAAI;AACF;AAAiE;AACnE;AAGF;AACE,UAAI;AACF;AAAA,MACF;AAEA;AAEA;AACE,4BAAoB;AAAsB,MAC5C;AACE;AAAQ;AACV;AAGF;AAEE;AAAO,IACT;AAEA;AACE;AAAoB,IACtB;AAEA;AACE;AACA;AAAmB;AASrB;AACE;AACE;AAAY,MACd;AAAA;AAIF;AACE;AAAsC,IACxC;AAEA;AAAO;AACU;AACf,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAyB,MACzB;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;AACF;AAEJ;;;;;;;;;;;;gCA/ac;AAAW;AAQnB;AAAA;AALO;AACoB,UAC1B,WAAS;AAAA,UACT,kBAAgB;AAAA,UAChB,SAAK;AAAyB;mBALvBA;AAAO;;;;;AAQS,MAC1B;AAqGa;AArGM;AAA6B;0BAC9C;AAmGM;AAAA,iBAjGAC;AAAA;AACC,YACJ;AAAY,YACb,cAAW;AAAA,YACV;AAA2C,YAC3C;AAA+C,YAC/C;AAA2C,YAC3C;AAAY,YACZ;AAA8B;YAE/B;AAsFgB;AArFd;AACU,cACT;AAAe,cACf;AAAgB,cAChB;AAAmB;gCAEpB,MA8EM;AAAA;AAAA,uBA7EAA;AAAA;AACE;AAA2B;AAAiF;;;AAKzG;AACT;AAAW;;AAkCL;AA/BA;AACE;oBAEK;AASL;6BATgC;AAAA;sBACpC;AAOO;AADK;AAJoC;;;;;;;AAOlB;AACD;AAejB;;AAZI,wBACd;AAAM,wBACL,qBAA4B;AAAsC,wBAGlE;;;AAMS;AAAA;AADQ;AAAA;;;;;;;;;AAYlB,wBAPI;AAAA;AAAiB;oBACzB;AAKO;AADgC;;AAAhB;;;;AAGa;AAYxB;;AATA,sBACT;AAAyB,sBACzB;AAAM,sBACN;AAAM,sBACN;AAAO,sBACP,qBAAO;AAAY,sBACnB,WAAO;AAA4B;;AAEe;AAA3B;;;;AAcd,2BAVN;AAAA;AACM,sBACT;AAAO,sBACP;AAAM,sBACN;AAAM,sBACN,UAAU;AAAA,sBACV,qBAAO;AAAY,sBACnB;AAAmC;;AAEiB;AAA5B;;;;AAVA;;;;;;;;AAnFlB;;;;;;;;;;;;;"}