@extclp/vexip-ui/es/components/confirm/confirm.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"confirm.vue2.mjs","sources":["../../../components/confirm/confirm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Button } from '@/components/button'\nimport { Icon } from '@/components/icon'\nimport { Modal } from '@/components/modal'\nimport { Renderer } from '@/components/renderer'\n\nimport { nextTick, onMounted, reactive, ref, toRef } from 'vue'\n\nimport { useIcons, useLocale, useNameHelper, useProps } from '@vexip-ui/config'\nimport { isFunction, isPromise } from '@vexip-ui/utils'\nimport { confirmProps } from './props'\n\nimport type { ConfirmButtonType, ConfirmOptions, ConfirmRenderFn, ConfirmState } from './symbol'\n\nconst positionValidator = (value: string | number) => {\n  return value === 'auto' || !Number.isNaN(parseFloat(value as string))\n}\nconst positionProp = {\n  default: 'auto',\n  validator: positionValidator\n}\n\nconst confirmButtonTypes = Object.freeze<ConfirmButtonType[]>([\n  'default',\n  'primary',\n  'info',\n  'success',\n  'warning',\n  'error'\n])\n\ndefineOptions({ name: 'Confirm' })\n\nconst _props = defineProps(confirmProps)\nconst props = useProps('confirm', _props, {\n  locale: null,\n  width: {\n    default: 420,\n    validator: positionValidator\n  },\n  height: positionProp,\n  top: positionProp,\n  left: positionProp,\n  right: positionProp,\n  bottom: positionProp,\n  maskClose: false,\n  confirmType: {\n    default: 'primary',\n    validator: value => confirmButtonTypes.includes(value)\n  },\n  cancelType: {\n    default: 'default',\n    validator: value => confirmButtonTypes.includes(value)\n  },\n  confirmText: null,\n  cancelText: null,\n  icon: {\n    isFunc: true,\n    default: false\n  },\n  className: null,\n  style: null,\n  renderer: {\n    default: null,\n    isFunc: true,\n    static: true\n  },\n  iconProps: () => ({}),\n  closable: false,\n  parseHtml: false,\n  contentAlign: 'left',\n  actionsAlign: 'right',\n  cancelable: true,\n  xOffset: 0,\n  yOffset: 0\n})\n\nconst nh = useNameHelper('confirm')\nconst icons = useIcons()\nconst locale = useLocale('confirm', toRef(props, 'locale'))\n\nconst commonProps = [\n  'className',\n  'style',\n  'icon',\n  'iconProps',\n  'maskClose',\n  'confirmType',\n  'cancelType',\n  'confirmText',\n  'cancelText',\n  'parseHtml',\n  'closable',\n  'contentAlign',\n  'actionsAlign',\n  'cancelable',\n  'width',\n  'height',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'xOffset',\n  'yOffset'\n] as const\n\nconst state = reactive<ConfirmState>({\n  ...commonProps.reduce((prev, current) => ((prev[current] = props[current]), prev), {} as any),\n  visible: false,\n  loading: false,\n  title: '',\n  content: '',\n  raw: {}\n})\n\nconst rendererR = ref<ConfirmRenderFn | null>(props.renderer)\n\nlet beforeConfirmR: (() => unknown) | null = null\n\nlet onConfirm: (() => void) | null = null\nlet onCancel: (() => void) | null = null\n\nconst mountedPromise = new Promise<void>(resolve => {\n  onMounted(() => {\n    nextTick(resolve)\n  })\n})\n\ndefineExpose({ state, openConfirm, handleReset })\n\nasync function openConfirm(options: ConfirmOptions) {\n  await mountedPromise\n\n  return await new Promise<boolean>(resolve => {\n    for (const prop of commonProps) {\n      ;(state as any)[prop] = options[prop] ?? props[prop]\n    }\n\n    state.title = options.title ?? ''\n    state.content = options.content ?? ''\n\n    state.raw = options\n\n    rendererR.value = isFunction(options.renderer) ? options.renderer : props.renderer\n    beforeConfirmR = isFunction(options.onBeforeConfirm) ? options.onBeforeConfirm : null\n\n    if (isFunction(rendererR.value)) {\n      const render = rendererR.value\n\n      rendererR.value = () => render(state, handleConfirm, handleCancel)\n    }\n\n    state.visible = true\n    onConfirm = () => {\n      resolve(true)\n      beforeConfirmR = null\n    }\n    onCancel = () => {\n      resolve(false)\n      beforeConfirmR = null\n    }\n  })\n}\n\nasync function handleConfirm() {\n  state.loading = true\n\n  if (isFunction(beforeConfirmR)) {\n    let result = beforeConfirmR()\n\n    if (isPromise(result)) {\n      result = await result\n    }\n\n    if (result === false) {\n      state.loading = false\n\n      return\n    }\n  }\n\n  state.visible = false\n  state.loading = false\n\n  if (isFunction(onConfirm)) {\n    onConfirm()\n    onConfirm = null\n  }\n}\n\nfunction handleCancel() {\n  state.visible = false\n\n  if (isFunction(onCancel)) {\n    onCancel()\n    onCancel = null\n  }\n}\n\nfunction handleReset() {\n  for (const prop of commonProps) {\n    ;(state as any)[prop] = props[prop]\n  }\n\n  state.visible = false\n  state.loading = false\n  state.title = ''\n  state.content = ''\n\n  state.raw = {}\n\n  rendererR.value = props.renderer\n}\n</script>\n\n<template>\n  <!-- eslint-disable vue/no-v-html -->\n  <div :class=\"[nh.b(), nh.bs('vars')]\">\n    <Modal\n      no-footer\n      :auto-remove=\"false\"\n      :transfer=\"false\"\n      :closable=\"false\"\n      :active=\"state.visible\"\n      :modal-class=\"state.className\"\n      :modal-style=\"state.style\"\n      :width=\"state.width\"\n      :height=\"state.height\"\n      :top=\"state.top\"\n      :left=\"state.left\"\n      :right=\"state.right\"\n      :bottom=\"state.bottom\"\n      :x-offset=\"state.xOffset\"\n      :y-offset=\"state.yOffset\"\n      :mask-close=\"state.maskClose\"\n      @hide=\"handleReset\"\n    >\n      <Renderer v-if=\"isFunction(rendererR)\" :renderer=\"rendererR\"></Renderer>\n      <template v-else>\n        <div v-if=\"state.title\" :class=\"nh.be('header')\">\n          <div :class=\"nh.be('title')\">\n            {{ state.title }}\n          </div>\n          <button\n            v-if=\"state.closable\"\n            type=\"button\"\n            :class=\"nh.be('close')\"\n            @mousedown.stop\n            @click=\"handleCancel\"\n          >\n            <slot name=\"close\">\n              <Icon\n                v-bind=\"icons.close\"\n                :scale=\"+(icons.close.scale || 1) * 1.2\"\n                label=\"close\"\n              ></Icon>\n            </slot>\n          </button>\n        </div>\n        <div\n          :class=\"[\n            nh.be('body'),\n            nh.bem('body', state.contentAlign),\n            !state.title && nh.bem('body', 'no-title')\n          ]\"\n        >\n          <div v-if=\"state.icon !== false\" :class=\"nh.be('icon')\">\n            <Icon\n              v-if=\"typeof state.icon !== 'boolean'\"\n              v-bind=\"state.iconProps\"\n              :icon=\"state.icon\"\n            ></Icon>\n            <Icon\n              v-else\n              :scale=\"2.2\"\n              v-bind=\"{\n                ...(state.cancelable ? icons.question : icons.warning),\n                ...state.iconProps\n              }\"\n              :icon=\"(state.cancelable ? icons.question : icons.warning).icon\"\n            ></Icon>\n          </div>\n          <div v-if=\"state.parseHtml\" :class=\"nh.be('content')\" v-html=\"state.content\"></div>\n          <div v-else :class=\"nh.be('content')\">\n            {{ state.content }}\n          </div>\n        </div>\n        <div :class=\"[nh.be('footer'), nh.bem('footer', state.actionsAlign)]\">\n          <Button\n            v-if=\"state.cancelable\"\n            :class=\"[nh.be('button'), nh.bem('button', 'cancel')]\"\n            inherit\n            no-pulse\n            :type=\"state.cancelType\"\n            @click=\"handleCancel\"\n          >\n            {{ state.cancelText || locale.cancel }}\n          </Button>\n          <Button\n            :class=\"[nh.be('button'), nh.bem('button', 'confirm')]\"\n            inherit\n            no-pulse\n            :type=\"state.confirmType\"\n            :loading=\"state.loading\"\n            @click=\"handleConfirm\"\n          >\n            {{ state.confirmText || locale.confirm }}\n          </Button>\n        </div>\n      </template>\n    </Modal>\n  </div>\n</template>\n"],"names":["positionValidator","value","positionProp","confirmButtonTypes","props","useProps","__props","nh","useNameHelper","icons","useIcons","locale","useLocale","toRef","commonProps","state","reactive","prev","current","rendererR","ref","beforeConfirmR","onConfirm","onCancel","mountedPromise","resolve","onMounted","nextTick","__expose","openConfirm","handleReset","options","prop","isFunction","render","handleConfirm","handleCancel","result","isPromise"],"mappings":"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"}