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

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

{"version":3,"file":"masker.vue2.mjs","sources":["../../../components/masker/masker.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Portal } from '@/components/portal'\r\nimport { ResizeObserver } from '@/components/resize-observer'\r\n\r\nimport { computed, nextTick, ref, watch } from 'vue'\r\n\r\nimport { emitEvent, useNameHelper, useProps, useZIndex } from '@vexip-ui/config'\r\nimport { getLast, isPromise, queryTabables } from '@vexip-ui/utils'\r\nimport { maskerProps } from './props'\r\n\r\ndefineOptions({ name: 'Masker' })\r\n\r\nconst nh = useNameHelper('masker')\r\nconst _props = defineProps(maskerProps)\r\nconst props = useProps('masker', _props, {\r\n  active: {\r\n    default: false,\r\n    static: true,\r\n  },\r\n  closable: false,\r\n  inner: false,\r\n  maskTransition: () => nh.ns('fade'),\r\n  transitionName: () => nh.ns('fade'),\r\n  disabled: false,\r\n  onBeforeClose: {\r\n    default: null,\r\n    isFunc: true,\r\n  },\r\n  transfer: false,\r\n  autoRemove: false,\r\n  permeable: false,\r\n  disableEsc: false,\r\n})\r\n\r\nconst emit = defineEmits(['update:active'])\r\n\r\nconst slots = defineSlots<{\r\n  mask?: () => any,\r\n  default?: (params: { show: boolean }) => any,\r\n}>()\r\n\r\nconst getIndex = useZIndex()\r\n\r\nconst currentActive = ref(props.active)\r\n// If initial active, we should set a valid index as initial value\r\nconst zIndex = ref(props.active ? getIndex() : 0)\r\nconst wrapperShow = ref(props.active)\r\n\r\nconst wrapper = ref<HTMLElement>()\r\nconst topTrap = ref<HTMLElement>()\r\nconst bottomTrap = ref<HTMLElement>()\r\n\r\nlet maskShow = false\r\nlet contentShow = false\r\nlet stable = false\r\nlet prevFocusedEl: HTMLElement | null = null\r\n\r\nconst transferTo = computed(() => {\r\n  return props.inner\r\n    ? ''\r\n    : typeof props.transfer === 'boolean'\r\n      ? props.transfer\r\n        ? 'body'\r\n        : ''\r\n      : props.transfer\r\n})\r\nconst className = computed(() => {\r\n  return [\r\n    nh.b(),\r\n    nh.bs('vars'),\r\n    {\r\n      [nh.bm('inherit')]: transferTo.value !== 'body' && props.inherit,\r\n      [nh.bm('inner')]: props.inner,\r\n      [nh.bm('disabled')]: props.disabled,\r\n    },\r\n  ]\r\n})\r\n\r\nwatch(\r\n  () => props.active,\r\n  value => {\r\n    currentActive.value = value\r\n\r\n    if (value) {\r\n      wrapperShow.value = value\r\n    }\r\n  },\r\n)\r\nwatch(currentActive, value => {\r\n  if (!value) {\r\n    stable = false\r\n\r\n    if (prevFocusedEl) {\r\n      prevFocusedEl.focus()\r\n      prevFocusedEl = null\r\n    }\r\n  } else {\r\n    prevFocusedEl = document.activeElement as HTMLElement\r\n    zIndex.value = getIndex()\r\n  }\r\n\r\n  if ((!props.maskTransition || props.disabled) && !props.transitionName) {\r\n    value ? afterOpen() : afterClose()\r\n  }\r\n})\r\nwatch(\r\n  [() => props.permeable, wrapper],\r\n  () => {\r\n    if (wrapper.value) {\r\n      wrapper.value.removeEventListener('wheel', disableWheel)\r\n\r\n      if (!props.permeable) {\r\n        wrapper.value.addEventListener('wheel', disableWheel)\r\n      }\r\n    }\r\n  },\r\n  { immediate: true, flush: 'post' },\r\n)\r\n\r\ndefineExpose({\r\n  currentActive,\r\n  zIndex,\r\n  wrapperShow,\r\n  wrapper,\r\n  topTrap,\r\n  bottomTrap,\r\n})\r\n\r\nfunction disableWheel(event: WheelEvent) {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n}\r\n\r\nfunction toggleActive(active: boolean) {\r\n  if (currentActive.value === active) return\r\n\r\n  currentActive.value = active\r\n\r\n  emit('update:active', active)\r\n  emitEvent(props.onToggle, active)\r\n}\r\n\r\nasync function handleClose() {\r\n  if (!props.closable) return\r\n\r\n  let result: unknown = true\r\n\r\n  if (typeof props.onBeforeClose === 'function') {\r\n    result = props.onBeforeClose()\r\n\r\n    if (isPromise(result)) {\r\n      result = await result\r\n    }\r\n  }\r\n\r\n  if (result !== false) {\r\n    nextTick(() => {\r\n      toggleActive(false)\r\n      emitEvent(props.onClose)\r\n    })\r\n  }\r\n}\r\n\r\nfunction afterOpen() {\r\n  if (!currentActive.value) return\r\n\r\n  const activeEl = document && document.activeElement\r\n\r\n  if (!activeEl || !wrapper.value || !wrapper.value.contains(activeEl)) {\r\n    topTrap.value?.focus()\r\n  }\r\n\r\n  nextTick(() => {\r\n    stable = true\r\n    emitEvent(props.onShow)\r\n  })\r\n}\r\n\r\nfunction afterClose() {\r\n  if (currentActive.value) return\r\n\r\n  nextTick(() => {\r\n    wrapperShow.value = false\r\n    emitEvent(props.onHide)\r\n  })\r\n}\r\n\r\nfunction afterMaskOpen() {\r\n  if (!currentActive.value) return\r\n\r\n  maskShow = true\r\n  ;(!props.transitionName || !slots.default || contentShow) && afterOpen()\r\n}\r\n\r\nfunction afterMaskClose() {\r\n  if (currentActive.value) return\r\n\r\n  maskShow = false\r\n  ;(!props.transitionName || !slots.default || !contentShow) && afterClose()\r\n}\r\n\r\nfunction afterContentOpen() {\r\n  if (!currentActive.value) return\r\n\r\n  contentShow = true\r\n  ;(!props.maskTransition || props.disabled || maskShow) && afterOpen()\r\n}\r\n\r\nfunction afterContentClose() {\r\n  if (currentActive.value) return\r\n\r\n  contentShow = false\r\n  ;(!props.maskTransition || props.disabled || !maskShow) && afterClose()\r\n}\r\n\r\nfunction handleMaskClick(event: MouseEvent) {\r\n  emitEvent(props.onMaskClick, event)\r\n  handleClose()\r\n}\r\n\r\nfunction handleFocusIn(event: FocusEvent) {\r\n  const target = event.target as HTMLElement\r\n\r\n  if (!stable || !wrapper.value || !target || !topTrap.value || !bottomTrap.value) {\r\n    return\r\n  }\r\n\r\n  const tabables = queryTabables(wrapper.value)\r\n\r\n  if (!tabables.length) {\r\n    return\r\n  }\r\n\r\n  if (topTrap.value === target) {\r\n    getLast(tabables)!.focus()\r\n  } else if (bottomTrap.value === target) {\r\n    tabables[0].focus()\r\n  }\r\n}\r\n\r\nfunction handleResize(entry: ResizeObserverEntry) {\r\n  emitEvent(props.onResize, entry)\r\n}\r\n\r\nfunction handleEscape(event: KeyboardEvent) {\r\n  if (!props.disableEsc) {\r\n    event.preventDefault()\r\n    handleClose()\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <Portal v-if=\"!props.autoRemove || wrapperShow\" :to=\"transferTo\">\r\n    <div\r\n      v-bind=\"$attrs\"\r\n      ref=\"wrapper\"\r\n      :class=\"[className, $attrs.class]\"\r\n      tabindex=\"-1\"\r\n      :style=\"{\r\n        zIndex,\r\n        ...($attrs.style || {}),\r\n        pointerEvents: wrapperShow ? undefined : 'none',\r\n        visibility: wrapperShow ? undefined : 'hidden',\r\n      }\"\r\n      @focusin=\"handleFocusIn\"\r\n      @keydown.escape=\"handleEscape\"\r\n    >\r\n      <ResizeObserver @resize=\"handleResize\">\r\n        <Transition\r\n          v-if=\"!props.disabled\"\r\n          appear\r\n          :name=\"props.maskTransition\"\r\n          @after-enter=\"afterMaskOpen\"\r\n          @after-leave=\"afterMaskClose\"\r\n        >\r\n          <div v-show=\"currentActive\" :class=\"nh.be('mask')\" @click=\"handleMaskClick\">\r\n            <slot name=\"mask\">\r\n              <div :class=\"nh.be('mask-inner')\"></div>\r\n            </slot>\r\n          </div>\r\n        </Transition>\r\n        <div\r\n          v-else\r\n          :class=\"nh.be('placeholder')\"\r\n          role=\"none\"\r\n          aria-hidden\r\n        ></div>\r\n      </ResizeObserver>\r\n      <div\r\n        ref=\"topTrap\"\r\n        tabindex=\"0\"\r\n        role=\"none\"\r\n        style=\"width: 0; height: 0; overflow: hidden; outline: none\"\r\n      ></div>\r\n      <div :class=\"nh.be('content')\" @wheel.stop.prevent>\r\n        <Transition\r\n          v-if=\"props.transitionName\"\r\n          appear\r\n          :name=\"props.transitionName\"\r\n          @after-enter=\"afterContentOpen\"\r\n          @after-leave=\"afterContentClose\"\r\n        >\r\n          <slot :show=\"currentActive\"></slot>\r\n        </Transition>\r\n        <slot v-else :show=\"currentActive\"></slot>\r\n      </div>\r\n      <div\r\n        ref=\"bottomTrap\"\r\n        tabindex=\"0\"\r\n        role=\"none\"\r\n        style=\"width: 0; height: 0; overflow: hidden; outline: none\"\r\n      ></div>\r\n    </div>\r\n  </Portal>\r\n</template>\r\n"],"names":["nh","useNameHelper","props","useProps","__props","emit","__emit","slots","_useSlots","getIndex","useZIndex","currentActive","ref","zIndex","wrapperShow","wrapper","topTrap","bottomTrap","maskShow","contentShow","stable","prevFocusedEl","transferTo","computed","className","watch","value","afterOpen","afterClose","disableWheel","__expose","event","toggleActive","active","emitEvent","handleClose","result","isPromise","nextTick","activeEl","_a","afterMaskOpen","afterMaskClose","afterContentOpen","afterContentClose","handleMaskClick","handleFocusIn","target","tabables","queryTabables","getLast","handleResize","entry","handleEscape","_unref","_createBlock","Portal","_createElementVNode","_mergeProps","_ctx","$attrs","_createVNode","ResizeObserver","_createElementBlock","_normalizeClass","_Transition","_renderSlot"],"mappings":"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"}