vexip-ui/lib/components/masker/masker.vue2.cjs.map

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

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