@vuesax-alpha/nightly/es/components/notification/src/notification2.mjs.map

A Component Library for Vue 3

{"version":3,"file":"notification2.mjs","sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"vs-notification\"\n    @before-enter=\"onTransitionBeforeEnter\"\n    @enter=\"onTransitionEnter\"\n    @leave=\"onTransitionLeave\"\n  >\n    <div\n      v-show=\"visible\"\n      ref=\"notifyRef\"\n      :class=\"notifyKls\"\n      :style=\"notifyStyles\"\n      @click=\"handleClick\"\n    >\n      <template v-if=\"!loading\">\n        <template v-if=\"icon\">\n          <div\n            v-if=\"typeof icon === 'string'\"\n            :class=\"ns.e('icon')\"\n            :style=\"{ fontSize: addUnit(iconSize) }\"\n            v-html=\"icon\"\n          />\n          <div v-else :class=\"ns.e('icon')\">\n            <vs-icon :size=\"addUnit(iconSize)\">\n              <component :is=\"icon\" />\n            </vs-icon>\n          </div>\n        </template>\n\n        <div :class=\"ns.e('content')\">\n          <div v-if=\"title\" :class=\"ns.e('title')\">\n            <h4>{{ title }}</h4>\n          </div>\n\n          <div v-if=\"content\" :class=\"ns.e('text')\">\n            <slot>\n              <p v-if=\"dangerousHtmlString\" v-html=\"content\" />\n              <p v-else>\n                {{ content }}\n              </p>\n            </slot>\n          </div>\n        </div>\n      </template>\n      <div v-else :class=\"ns.e('loading')\" />\n\n      <button v-if=\"showClose\" :class=\"ns.e('close')\" @click=\"handleClickClose\">\n        <icon-close hover=\"less\" />\n      </button>\n\n      <div\n        v-if=\"progressAuto\"\n        :class=\"ns.e('progress')\"\n        :style=\"{ width: `${currentProgress}%` }\"\n      />\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onBeforeUnmount, onMounted, ref, unref } from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport {\n  useColor,\n  useGlobalComponentSettings,\n  useVuesaxBaseComponent,\n} from '@vuesax-alpha/hooks'\nimport { IconClose, VsIcon } from '@vuesax-alpha/components/icon'\nimport { addUnit, getVsColor } from '@vuesax-alpha/utils'\nimport { notificationProps } from './notification'\n\ndefineOptions({\n  name: 'VsNotification',\n})\n\nconst props = defineProps(notificationProps)\n\nconst { ns, zIndex } = useGlobalComponentSettings('notification')\n\nconst { currentZIndex, nextZIndex } = zIndex\n\nconst color = useColor()\n\nconst notifyRef = ref<HTMLElement>()\nconst visible = ref(false)\nlet timer: (() => void) | undefined = undefined\n\nconst vsBaseClasses = useVuesaxBaseComponent(color)\nconst notifyKls = computed(() => [\n  ns.b(),\n  vsBaseClasses,\n  ns.is('flat', props.flat),\n  ns.is('sticky', props.sticky),\n  ns.is('border', !!props.border),\n  ns.is('color', !!color.value),\n  ns.is('icon', !!props.icon),\n  ns.is('on-click', !!props.onClick),\n  ns.is('on-click-close', !!props.onClickClose),\n  props.shape && ns.is(props.shape),\n  ns.is('loading', props.loading),\n  ns.is('not-padding', props.notPadding),\n  ns.is('width-full', props.width == 'full'),\n  ns.is('width-auto', props.width == 'auto'),\n])\n\nconst notifyStyles = computed(() => [\n  {\n    zIndex: unref(currentZIndex),\n  },\n  ns.cssVar({\n    color: getVsColor(color),\n    border: getVsColor(props.border),\n  }),\n])\n\nconst handleClick = () => {\n  props.onClick?.()\n}\n\nconst handleClickClose = () => {\n  if (!props.onClickClose?.()) {\n    return\n  }\n  visible.value = false\n\n  props.onClose?.()\n}\n\nconst onTransitionBeforeEnter = (el: Element) => {\n  nextZIndex()\n  const _el = el as HTMLElement\n  _el.style.maxHeight = `0`\n  _el.style.padding = `0 20px`\n}\n\nconst onTransitionEnter = (el: Element, done: () => void) => {\n  const h = el.scrollHeight\n  const _el = el as HTMLElement\n  _el.style.maxHeight = `${h + 40}px`\n  if (window.innerWidth < 600) {\n    _el.style.padding = `15px`\n  } else {\n    _el.style.padding = `20px`\n  }\n  done()\n}\n\nconst onTransitionLeave = (_: Element, done: () => void) => {\n  setTimeout(() => {\n    notifyRef.value?.remove()\n    done()\n    props.onClose?.()\n  }, 150)\n}\n\nconst startTimer = () => {\n  if (props.duration > 0) {\n    ;({ stop: timer } = useTimeoutFn(() => {\n      if (visible.value) close()\n    }, props.duration))\n  }\n}\n\nconst clearTimer = () => {\n  timer?.()\n}\n\nconst open = () => {\n  clearTimer()\n  startTimer()\n  nextZIndex()\n\n  visible.value = true\n}\n\nconst close = () => {\n  visible.value = false\n}\n\nlet intervalProgress = 0\nconst currentProgress = ref(0)\n\nconst handleProgress = () => {\n  if (props.progressAuto && props.duration > 0) {\n    intervalProgress = setInterval(() => {\n      currentProgress.value += 1\n    }, props.duration / 100)\n  }\n}\n\nonMounted(() => {\n  open()\n  handleProgress()\n})\n\nonBeforeUnmount(() => {\n  clearInterval(intervalProgress)\n})\n\ndefineExpose({\n  visible,\n  /** @description close notification */\n  close,\n  /** @description open notification */\n  open,\n})\n</script>\n"],"names":[],"mappings":"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"}