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

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

{"version":3,"file":"drawer.vue2.mjs","sources":["../../../components/drawer/drawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Button } from '@/components/button'\nimport { Icon } from '@/components/icon'\nimport { Masker } from '@/components/masker'\nimport { Renderer } from '@/components/renderer'\n\nimport { computed, nextTick, reactive, ref, shallowReadonly, toRef, watch } from 'vue'\n\nimport {\n  createSizeProp,\n  emitEvent,\n  useIcons,\n  useLocale,\n  useNameHelper,\n  useProps\n} from '@vexip-ui/config'\nimport { useMoving } from '@vexip-ui/hooks'\nimport { getGlobalCount, isPromise, toNumber } from '@vexip-ui/utils'\nimport { drawerProps } from './props'\nimport { drawerPlacements } from './symbol'\n\nimport type { DrawerSlots } from './symbol'\n\ndefineOptions({ name: 'Drawer' })\n\nconst _props = defineProps(drawerProps)\nconst props = useProps('drawer', _props, {\n  locale: null,\n  transfer: false,\n  active: {\n    default: false,\n    static: true\n  },\n  width: {\n    default: 280,\n    validator: value => typeof value === 'string' || value > 0\n  },\n  height: {\n    default: 280,\n    validator: value => typeof value === 'string' || value > 0\n  },\n  placement: {\n    default: 'right',\n    validator: value => drawerPlacements.includes(value)\n  },\n  title: '',\n  closable: true,\n  inner: false,\n  maskClose: true,\n  drawerClass: null,\n  hideMask: false,\n  onBeforeClose: {\n    default: null,\n    isFunc: true\n  },\n  resizable: false,\n  autoRemove: false,\n  footer: false,\n  confirmText: null,\n  cancelText: null,\n  loading: false,\n  confirmType: 'primary',\n  cancelType: 'default',\n  actionSize: createSizeProp('small'),\n  undivided: false,\n  disableEsc: false,\n  slots: () => ({})\n})\n\nconst emit = defineEmits(['update:active'])\n\nconst slots = defineSlots<DrawerSlots>()\n\nconst nh = useNameHelper('drawer')\nconst icons = useIcons()\nconst locale = useLocale('drawer', toRef(props, 'locale'))\n\nconst currentActive = ref(props.active)\nconst currentWidth = ref(props.width)\nconst currentHeight = ref(props.height)\n\nconst wrapper = ref<HTMLElement>()\n\nconst idIndex = `${getGlobalCount()}`\n\nconst { target: resizer, moving: resizing } = useMoving({\n  onStart: (state, event) => {\n    if (!props.resizable || event.button > 0 || !wrapper.value) {\n      return false\n    }\n\n    const width = `${currentWidth.value}`.endsWith('%')\n      ? wrapper.value.offsetWidth\n      : toNumber(currentWidth.value)\n    const height = `${currentHeight.value}`.endsWith('%')\n      ? wrapper.value.offsetHeight\n      : toNumber(currentHeight.value)\n\n    state.xStart = width\n    state.yStart = height\n\n    emitEvent(props.onResizeStart, { width, height })\n  },\n  onMove: (state, event) => {\n    const deltaX = event.clientX - state.clientX\n    const deltaY = event.clientY - state.clientY\n\n    let width = toNumber(currentWidth.value)\n    let height = toNumber(currentHeight.value)\n\n    switch (props.placement) {\n      case 'top': {\n        height = state.yStart + deltaY\n        break\n      }\n      case 'right': {\n        width = state.xStart - deltaX\n        break\n      }\n      case 'bottom': {\n        height = state.yStart - deltaY\n        break\n      }\n      default: {\n        width = state.xStart + deltaX\n      }\n    }\n\n    currentWidth.value = Math.max(width, 100)\n    currentHeight.value = Math.max(height, 100)\n\n    emitEvent(props.onResizeMove, {\n      width: toNumber(currentWidth.value),\n      height: toNumber(currentHeight.value)\n    })\n  },\n  onEnd: () => {\n    emitEvent(props.onResizeEnd, {\n      width: toNumber(currentWidth.value),\n      height: toNumber(currentHeight.value)\n    })\n  }\n})\n\nconst className = computed(() => {\n  return [\n    nh.b(),\n    nh.bs('vars'),\n    {\n      [nh.bm('inherit')]: props.inherit,\n      [nh.bm('inner')]: props.inner,\n      [nh.bm('closable')]: props.closable,\n      [nh.bm('resizable')]: props.resizable,\n      [nh.bm('undivided')]: props.undivided\n    }\n  ]\n})\nconst moveTransition = computed(() => {\n  return nh.ns(`move-${props.placement}`)\n})\nconst wrapperClass = computed(() => {\n  return [\n    nh.be('wrapper'),\n    nh.bem('wrapper', props.placement),\n    {\n      [nh.bem('wrapper', 'hide-mask')]: props.hideMask,\n      [nh.bem('wrapper', 'resizing')]: resizing.value\n    },\n    props.drawerClass\n  ]\n})\nconst wrapperStyle = computed(() => {\n  const placement = props.placement\n\n  if (placement === 'top' || placement === 'bottom') {\n    const height = currentHeight.value\n\n    return {\n      height: `${height}`.endsWith('%') ? height : `${height}px`\n    }\n  }\n\n  const width = currentWidth.value\n\n  return {\n    width: `${width}`.endsWith('%') ? width : `${width}px`\n  }\n})\nconst hasTitle = computed(() => {\n  return !!(slots.header || slots.title || props.title || props.slots.header || props.slots.title)\n})\nconst titleId = computed(() => `${nh.bs(idIndex)}__title`)\nconst bodyId = computed(() => `${nh.bs(idIndex)}__body`)\n\nwatch(\n  () => props.active,\n  value => {\n    currentActive.value = value\n  }\n)\nwatch(\n  () => props.width,\n  value => {\n    currentWidth.value = value\n  }\n)\nwatch(\n  () => props.height,\n  value => {\n    currentHeight.value = value\n  }\n)\n\ndefineExpose({\n  resizing,\n  titleId,\n  bodyId,\n  wrapper,\n  resizer,\n  handleConfirm,\n  handleCancel,\n  handleClose\n})\n\nconst slotParams = shallowReadonly(\n  reactive({\n    resizing,\n    handleConfirm,\n    handleCancel,\n    handleClose\n  })\n)\n\nfunction setActive(active: boolean) {\n  if (currentActive.value === active) return\n\n  currentActive.value = active\n\n  emit('update:active', active)\n  emitEvent(props.onToggle, active)\n}\n\nasync function handleClose(isConfirm = false) {\n  let result: unknown = true\n\n  if (typeof props.onBeforeClose === 'function') {\n    result = props.onBeforeClose(isConfirm)\n\n    if (isPromise(result)) {\n      result = await result\n    }\n  }\n\n  if (result !== false) {\n    nextTick(() => {\n      setActive(false)\n      emitEvent(props.onClose)\n    })\n  }\n\n  return result\n}\n\nfunction handleMaskClose() {\n  if (props.maskClose) {\n    return handleClose()\n  }\n}\n\nfunction handleShow() {\n  emitEvent(props.onShow)\n}\n\nfunction handleHide() {\n  emitEvent(props.onHide)\n}\n\nfunction handleConfirm() {\n  handleClose(true)\n  emitEvent(props.onConfirm)\n}\n\nfunction handleCancel() {\n  handleClose(false)\n  emitEvent(props.onCancel)\n}\n</script>\n\n<template>\n  <Masker\n    v-model:active=\"currentActive\"\n    :inherit=\"props.inherit\"\n    :class=\"className\"\n    :inner=\"props.inner\"\n    :transition-name=\"moveTransition\"\n    :closable=\"props.maskClose\"\n    :disabled=\"props.hideMask\"\n    :on-before-close=\"handleMaskClose\"\n    :transfer=\"props.transfer\"\n    :auto-remove=\"props.autoRemove\"\n    :disable-esc=\"props.disableEsc\"\n    @show=\"handleShow\"\n    @hide=\"handleHide\"\n  >\n    <template #default=\"{ show }\">\n      <section\n        v-show=\"show\"\n        ref=\"wrapper\"\n        :class=\"wrapperClass\"\n        :style=\"wrapperStyle\"\n        role=\"dialog\"\n        :aria-modal=\"show ? 'true' : undefined\"\n        :aria-labelledby=\"titleId\"\n        :aria-describedby=\"bodyId\"\n      >\n        <div v-if=\"hasTitle\" :class=\"nh.be('header')\">\n          <slot name=\"header\" v-bind=\"slotParams\">\n            <Renderer :renderer=\"props.slots.header\" :data=\"slotParams\">\n              <div :id=\"titleId\" :class=\"nh.be('title')\">\n                <slot name=\"title\" v-bind=\"slotParams\">\n                  <Renderer :renderer=\"props.slots.title\" :data=\"slotParams\">\n                    {{ props.title }}\n                  </Renderer>\n                </slot>\n              </div>\n              <button\n                v-if=\"props.closable\"\n                type=\"button\"\n                :class=\"nh.be('close')\"\n                @click=\"handleClose()\"\n              >\n                <slot name=\"close\" v-bind=\"slotParams\">\n                  <Renderer :renderer=\"props.slots.close\" :data=\"slotParams\">\n                    <Icon\n                      v-bind=\"icons.close\"\n                      :scale=\"+(icons.close.scale || 1) * 1.2\"\n                      label=\"close\"\n                    ></Icon>\n                  </Renderer>\n                </slot>\n              </button>\n            </Renderer>\n          </slot>\n        </div>\n        <div :id=\"bodyId\" :class=\"nh.be('content')\">\n          <slot v-bind=\"slotParams\">\n            <Renderer :renderer=\"props.slots.default\" :data=\"slotParams\"></Renderer>\n          </slot>\n        </div>\n        <div v-if=\"props.footer || slots.footer || props.slots.footer\" :class=\"nh.be('footer')\">\n          <slot name=\"footer\" v-bind=\"slotParams\">\n            <Renderer :renderer=\"props.slots.footer\" :data=\"slotParams\">\n              <Button\n                :class=\"[nh.be('button'), nh.bem('button', 'cancel')]\"\n                inherit\n                text\n                :type=\"props.cancelType\"\n                :size=\"props.actionSize\"\n                @click=\"handleCancel\"\n              >\n                {{ props.cancelText || locale.cancel }}\n              </Button>\n              <Button\n                :class=\"[nh.be('button'), nh.bem('button', 'confirm')]\"\n                inherit\n                :type=\"props.confirmType\"\n                :size=\"props.actionSize\"\n                :loading=\"props.loading\"\n                @click=\"handleConfirm\"\n              >\n                {{ props.confirmText || locale.confirm }}\n              </Button>\n            </Renderer>\n          </slot>\n        </div>\n        <div\n          v-if=\"props.resizable\"\n          ref=\"resizer\"\n          :class=\"[\n            nh.be('handler'),\n            nh.bem('handler', props.placement),\n            {\n              [nh.bem('handler', 'resizing')]: resizing\n            }\n          ]\"\n        >\n          <slot name=\"handler\" v-bind=\"slotParams\">\n            <Renderer :renderer=\"props.slots.handler\" :data=\"slotParams\"></Renderer>\n          </slot>\n        </div>\n      </section>\n    </template>\n  </Masker>\n</template>\n"],"names":["props","useProps","__props","value","drawerPlacements","createSizeProp","emit","__emit","slots","_useSlots","nh","useNameHelper","icons","useIcons","locale","useLocale","toRef","currentActive","ref","currentWidth","currentHeight","wrapper","idIndex","getGlobalCount","resizer","resizing","useMoving","state","event","width","toNumber","height","emitEvent","deltaX","deltaY","className","computed","moveTransition","wrapperClass","wrapperStyle","placement","hasTitle","titleId","bodyId","watch","__expose","handleConfirm","handleCancel","handleClose","slotParams","shallowReadonly","reactive","setActive","active","isConfirm","result","isPromise","nextTick","handleMaskClose","handleShow","handleHide"],"mappings":"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"}