{"version":3,"file":"notification.mjs","sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\r\n  <transition\r\n    name=\"sg-notification-fade\"\r\n    @before-leave=\"onClose\"\r\n    @after-leave=\"$emit('destroy')\"\r\n  >\r\n    <div\r\n      v-show=\"visible\"\r\n      :id=\"id\"\r\n      :class=\"[\r\n        ns.b(),\r\n        { [ns.m(type)]: type && !icon },\r\n        ns.is('description', isDescription),\r\n        customClass,\r\n        horizontalClass\r\n      ]\"\r\n      :style=\"positionStyle\"\r\n      role=\"alert\"\r\n      @mouseenter=\"clearTimer\"\r\n      @mouseleave=\"startTimer\"\r\n      @click=\"onClick\"\r\n    >\r\n      <sg-badge\r\n        v-if=\"repeatNum > 1\"\r\n        :value=\"repeatNum\"\r\n        :type=\"badgeType\"\r\n        :class=\"ns.e('badge')\"\r\n      >\r\n      </sg-badge>\r\n      <sg-icon v-if=\"iconComponent\" :class=\"ns.e('icon')\">\r\n        <component :is=\"iconComponent\" />\r\n      </sg-icon>\r\n      <div :class=\"ns.e('group')\">\r\n        <div :class=\"ns.e('title')\">{{ title }}</div>\r\n        <div v-if=\"isDescription\" :class=\"ns.e('content')\">\r\n          <slot>\r\n            {{ description }}\r\n          </slot>\r\n        </div>\r\n        <sg-icon\r\n          v-if=\"closable\"\r\n          :class=\"ns.e('closebtn')\"\r\n          @click.stop=\"close\"\r\n        >\r\n          <Close />\r\n        </sg-icon>\r\n      </div>\r\n    </div>\r\n  </transition>\r\n</template>\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, ref, onMounted, watch } from 'vue'\r\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\r\nimport { useGlobalComponentSettings } from '@sgui-plus/hooks'\r\nimport { EVENT_CODE } from '@sgui-plus/utils/aria'\r\nimport { SgIcon } from '@sgui-plus/components/icon'\r\nimport SgBadge from '@sgui-plus/components/badge'\r\nimport { TypeComponents, TypeComponentsMap } from '@sgui-plus/utils/icon'\r\nimport { notificationProps, notificationEmits } from './notification'\r\nimport type { BadgeProps } from '@sgui-plus/components/badge'\r\n\r\nimport type { CSSProperties } from 'vue'\r\n\r\nexport default defineComponent({\r\n  name: 'SgNotification',\r\n\r\n  components: {\r\n    SgIcon,\r\n    SgBadge,\r\n    ...TypeComponents,\r\n  },\r\n\r\n  props: notificationProps,\r\n  emits: notificationEmits,\r\n\r\n  setup(props, { slots }) {\r\n    const { ns, zIndex } = useGlobalComponentSettings('notification')\r\n    const { nextZIndex, currentZIndex } = zIndex\r\n\r\n    const visible = ref(false)\r\n    let timer: (() => void) | undefined = undefined\r\n\r\n    const badgeType = ref<BadgeProps['type']>(\r\n      props.type ? (props.type === 'error' ? 'danger' : props.type) : 'primary'\r\n    )\r\n\r\n    const iconComponent = computed(() => {\r\n      return TypeComponentsMap[props.type] || props.icon || ''\r\n    })\r\n\r\n    const isDescription = computed(() => !!props.description || !!slots.default)\r\n\r\n    const horizontalClass = computed(() =>\r\n      props.position.endsWith('right') ? 'right' : 'left'\r\n    )\r\n\r\n    const verticalProperty = computed(() =>\r\n      props.position.startsWith('top') ? 'top' : 'bottom'\r\n    )\r\n\r\n    const positionStyle = computed<CSSProperties>(() => {\r\n      return {\r\n        [verticalProperty.value]: `${props.offset}px`,\r\n        zIndex: currentZIndex.value,\r\n      }\r\n    })\r\n\r\n    function startTimer() {\r\n      if (props.duration > 0) {\r\n        ;({ stop: timer } = useTimeoutFn(() => {\r\n          if (visible.value) close()\r\n        }, props.duration))\r\n      }\r\n    }\r\n\r\n    function clearTimer() {\r\n      timer?.()\r\n    }\r\n\r\n    function close() {\r\n      visible.value = false\r\n    }\r\n\r\n    function onKeydown({ code }: KeyboardEvent) {\r\n      if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {\r\n        clearTimer() // press delete/backspace clear timer\r\n      } else if (code === EVENT_CODE.esc) {\r\n        // press esc to close the notification\r\n        if (visible.value) {\r\n          close()\r\n        }\r\n      } else {\r\n        startTimer() // resume timer\r\n      }\r\n    }\r\n\r\n    // lifecycle\r\n    onMounted(() => {\r\n      startTimer()\r\n      nextZIndex()\r\n      visible.value = true\r\n    })\r\n\r\n    watch(\r\n      () => props.repeatNum,\r\n      () => {\r\n        clearTimer()\r\n        startTimer()\r\n      }\r\n    )\r\n\r\n    useEventListener(document, 'keydown', onKeydown)\r\n\r\n    return {\r\n      ns,\r\n\r\n      horizontalClass,\r\n      iconComponent,\r\n      isDescription,\r\n      positionStyle,\r\n      visible,\r\n      badgeType,\r\n\r\n      close,\r\n      clearTimer,\r\n      startTimer,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode","_normalizeClass","_normalizeStyle","_createCommentVNode","_toDisplayString","_createElementBlock","_withModifiers"],"mappings":";;;;;;;;2BACEA,gBA+Ca,CAAA,OAAA,CAAA,CAAA;AA7CV,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACrB,IAAA,EAAA,sBAAA;AAAA,IAHH,aA+Ca,EAAA,IAAA,CAAA,OAAA;AAAA,IAAA,YAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,KAAA,CAAA,SAAA,CAAA,CAAA;;;aAxCJC,OAAE,CAAA,MAAA;AAAA,MACDC,cAAA,CAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,QAAa,EAAI,EAAA,IAAA,CAAA,EAAA;AAAA,QAAA,KAAA,EAAgBC,cAAS,CAAA;AAAA,UAA8B,QAAG,CAAE,EAAA;AAAA,UAAyC,EAAW,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,IAAA,EAAA;AAAA,UAAW,IAAe,CAAA,EAAA,CAAA,EAAA,CAAA,aAAA,EAAA,IAAA,CAAA,aAAA,CAAA;AAAA,UAAA,IAAA,CAAA,WAAA;UAOhK,IAAK,CAAA,eAAA;AAAA,SAAA,CAAA;QAEL,KAAU,EAAAC,cAAA,CAAA,IAAA,CAAA,aAAA,CAAA;AAAA,QACV,IAAA,EAAA,OAAA;AAAA,QACA,YAAA,EAAK,uCAAE,IAAO,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,QAAA,YAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;iBAGP,MAAS,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,OAAA,IAAA,IAAA,CAAA,OAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,OAAA,EAAA;yCACE,EAAAN,WAAA,CAAA,mBAAA,EAAA;AAAA,UAChB,GAAI,EAAA,CAAA;AAAA,UACJ,KAAK,EAAA,IAAA,CAAA,SAAA;AAAA,UAAA,IAAA,EAAA,IAAA,CAAA,SAAA;;AAGO,SAAA,EAAA,IAAA,EAAA,CAAA,EAAa,kDAA5B,MAEU,EAAA,IAAA,CAAA;AAAA,QAAA,IAAA,CAAA,aAAA,IAAAD,SAAA,gBAF4B,kBAAI,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;AACP,UAAA,KAAA,EAAAM,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA;AAAA,SAAA,EAAA;;;;;SAgB7B,EAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAdAE,kBAAK,CAAA,MAAA,EAAI,IAAE,CAAA;AAAA,QAAAH,kBAAA,CAAA,KAAA,EAAA;UACf,KAA6C,EAAAC,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA;AAAA,SAAA,EAAA;AAAd,UAAAD,kBAAA,CAAA,KAAA,EAAA;AAAA,YACpB,KAAa,EAAAC,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA;AAAA,WAAA,EAAAG,eAAA,CAAxB,IAIM,CAAA,KAAA,CAAA,EAAA,CAAA,CAAA;AAAA,UAAA,IAAA,CAAA,aAAA,IAAAT,SAAA,EAJgC,EAAAU,kBAAA,CAAA,KAAA,EAAA;AAAA,YAAA,GAAA,EAAA,CAAA;YACpC,KAEO,EAAAJ,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA,WAAA,EAAA;;;;AAGD,WAAA,EAAA,CAAQ,wBADhB,MAMU,EAAA,IAAA,CAAA;AAAA,UAAA,IAAA,CAAA,QAAA,IAAAN,SAAA,gBAJA,kBAAI,EAAA;AAAA,YACX,GAAA,EAAA,CAAA;AAAA,YAAA,KAAA,EAAAM,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;AAEQ,YAAA,OAAA,EAAAK,aAAA,CAAA,IAAA,CAAA,KAAA,EAAA,CAAA,MAAA,CAAA,CAAA;AAAA,WAAA,EAAA;;;;;;AArCL,SAAA,EAAA,CAAA,CAAA;AAAA,OAAA,EAAA,EAAA,EAAA,UAAA,CAAA,EAAA;;;;;;;;;;;"}