element-plus/es/components/dialog/src/use-dialog.mjs.map

A Component Library for Vue 3

{"version":3,"file":"use-dialog.mjs","names":["isClient"],"sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport {\n  defaultNamespace,\n  useId,\n  useLockscreen,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport {\n  addUnit,\n  debugWarn,\n  isArray,\n  isClient,\n  isFunction,\n  isObject,\n} from '@element-plus/utils'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport { DEFAULT_DIALOG_TRANSITION } from './constants'\n\nimport type { CSSProperties, Ref, SetupContext, TransitionProps } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nconst COMPONENT_NAME = 'ElDialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  const instance = getCurrentInstance()!\n  const emit = instance.emit as SetupContext<DialogEmits>['emit']\n  const { nextZIndex } = useZIndex()\n\n  let lastPosition = ''\n  const titleId = useId()\n  const bodyId = useId()\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when destroyOnClose is true, we initialize it as false vise versa\n  const zIndex = ref(props.zIndex ?? nextZIndex())\n  const closing = ref(false)\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const config = useGlobalConfig()\n\n  const namespace = computed(() => config.value?.namespace ?? defaultNamespace)\n  const globalConfig = computed(() => config.value?.dialog)\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--${namespace.value}-dialog` as const\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      const width = addUnit(props.width)\n      if (width) {\n        style[`${varPrefix}-width`] = width\n      }\n    }\n    return style\n  })\n\n  const _draggable = computed(\n    () =>\n      (props.draggable ?? globalConfig.value?.draggable ?? false) &&\n      !props.fullscreen\n  )\n\n  const _alignCenter = computed(\n    () => props.alignCenter ?? globalConfig.value?.alignCenter ?? false\n  )\n\n  const _overflow = computed(\n    () => props.overflow ?? globalConfig.value?.overflow ?? false\n  )\n\n  const penetrable = computed(\n    () => props.modalPenetrable && !props.modal && !props.fullscreen\n  )\n\n  const overlayDialogStyle = computed<CSSProperties>(() => {\n    if (_alignCenter.value) {\n      return { display: 'flex' }\n    }\n    return {}\n  })\n\n  const transitionConfig = computed(() => {\n    const transition =\n      props.transition ??\n      globalConfig.value?.transition ??\n      DEFAULT_DIALOG_TRANSITION\n    const baseConfig = {\n      name: transition as string,\n      onAfterEnter: afterEnter,\n      onBeforeLeave: beforeLeave,\n      onAfterLeave: afterLeave,\n    }\n    if (isObject(transition)) {\n      const config = { ...transition } as TransitionProps\n      const _mergeHook = (\n        userHook: Arrayable<(el: Element) => void> | undefined,\n        defaultHook: () => void\n      ) => {\n        return (el: Element) => {\n          if (isArray(userHook)) {\n            userHook.forEach((fn) => {\n              if (isFunction(fn)) fn(el)\n            })\n          } else if (isFunction(userHook)) {\n            userHook(el)\n          }\n          defaultHook()\n        }\n      }\n      config.onAfterEnter = _mergeHook(config.onAfterEnter, afterEnter)\n      config.onBeforeLeave = _mergeHook(config.onBeforeLeave, beforeLeave)\n      config.onAfterLeave = _mergeHook(config.onAfterLeave, afterLeave)\n      if (!config.name) {\n        config.name = DEFAULT_DIALOG_TRANSITION\n        debugWarn(\n          COMPONENT_NAME,\n          `transition.name is missing when using object syntax, fallback to '${DEFAULT_DIALOG_TRANSITION}'`\n        )\n      }\n      return config\n    }\n\n    return baseConfig\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n    closing.value = false\n  }\n\n  function beforeLeave() {\n    closing.value = true\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function handleClose() {\n    function hide(shouldCancel?: boolean) {\n      if (shouldCancel) return\n      closed.value = true\n      visible.value = false\n    }\n\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (!isClient) return\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  function onOpenAutoFocus() {\n    emit('openAutoFocus')\n  }\n\n  function onCloseAutoFocus() {\n    emit('closeAutoFocus')\n  }\n\n  function onFocusoutPrevented(event: CustomEvent) {\n    if (event.detail?.focusReason === 'pointer') {\n      event.preventDefault()\n    }\n  }\n\n  if (props.lockScroll) {\n    useLockscreen(visible)\n  }\n\n  function onCloseRequested() {\n    if (props.closeOnPressEscape) {\n      handleClose()\n    }\n  }\n\n  function bringToFront() {\n    if (!visible.value || !penetrable.value || props.zIndex !== undefined) {\n      return\n    }\n\n    zIndex.value = nextZIndex()\n  }\n\n  watch(\n    () => props.zIndex,\n    () => {\n      zIndex.value = props.zIndex ?? nextZIndex()\n    }\n  )\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        closing.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        zIndex.value = props.zIndex ?? nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          emit('open')\n          if (targetRef.value) {\n            targetRef.value.parentElement!.scrollTop = 0\n            targetRef.value.parentElement!.scrollLeft = 0\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  watch(\n    () => props.fullscreen,\n    (val) => {\n      if (!targetRef.value) return\n      if (val) {\n        lastPosition = targetRef.value.style.transform\n        targetRef.value.style.transform = ''\n      } else {\n        targetRef.value.style.transform = lastPosition\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    close,\n    doClose,\n    onOpenAutoFocus,\n    onCloseAutoFocus,\n    onCloseRequested,\n    onFocusoutPrevented,\n    bringToFront,\n    titleId,\n    bodyId,\n    closed,\n    style,\n    overlayDialogStyle,\n    rendered,\n    visible,\n    zIndex,\n    transitionConfig,\n    _draggable,\n    _alignCenter,\n    _overflow,\n    closing,\n    penetrable,\n  }\n}\n"],"mappings":"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"}