{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-notice/index.vue"],"sourcesContent":["<template>\r\n  <transition\r\n    name=\"ivue-notification-fade\"\r\n    @before-leave=\"onClose\"\r\n    @after-leave=\"$emit('destroy')\"\r\n  >\r\n    <div\r\n      :class=\"classes\"\r\n      :style=\"wrapperStyles\"\r\n      @mouseenter=\"handleMouseenter\"\r\n      @mouseleave=\"handleMouseleave\"\r\n      v-show=\"data.visible\"\r\n    >\r\n      <!-- 内容 -->\r\n      <div :class=\"contentClasses\" ref=\"content\">\r\n        <template v-if=\"type === 'normal'\">\r\n          <div :class=\"[`${prefixCls}-content`, haveDesc]\">\r\n            <div :class=\"`${prefixCls}-title`\">{{ title }}</div>\r\n            <div :class=\"`${prefixCls}-desc`\">{{ desc }}</div>\r\n          </div>\r\n        </template>\r\n        <template v-else>\r\n          <div\r\n            :class=\"`${prefixCls}-content ${prefixCls}-have-icon ${prefixCls}-have-${type} ${haveDesc}`\"\r\n          >\r\n            <i\r\n              :class=\"`ivue-icon ${prefixCls}-icon ${prefixCls}-icon-${type}`\"\r\n              >{{ data.iconTypes[type] }}</i\r\n            >\r\n            <div :class=\"`${prefixCls}-title`\">{{ title }}</div>\r\n            <div :class=\"`${prefixCls}-desc`\">{{ desc }}</div>\r\n          </div>\r\n        </template>\r\n      </div>\r\n      <!-- render 渲染 -->\r\n      <div :class=\"contentHaveIcon\" v-if=\"renderFunc\">\r\n        <render-cell :render=\"renderFunc\"></render-cell>\r\n      </div>\r\n      <!-- 关闭按钮 -->\r\n      <div\r\n        :class=\"`${baseClasses}-close`\"\r\n        @click.stop=\"handleClose\"\r\n        v-show=\"closable\"\r\n      >\r\n        <i class=\"ivue-icon\">close</i>\r\n      </div>\r\n    </div>\r\n  </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, reactive, onMounted, PropType } from 'vue';\r\nimport { useEventListener } from '@vueuse/core';\r\n\r\nimport { oneOf } from '../../utils/assist';\r\nimport { EVENT_CODE } from '../../utils/helpers';\r\nimport RenderCell from '../../utils/render';\r\n\r\n// types\r\nimport type { Props, Data, Position, Type } from './types/notice';\r\n\r\nconst prefixCls = 'ivue-notice';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['destroy'],\r\n  props: {\r\n    /**\r\n     * 内容\r\n     *\r\n     * @type {String}\r\n     */\r\n    content: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 类型名称\r\n     *\r\n     * @type {String}\r\n     */\r\n    type: {\r\n      type: String as PropType<Type>,\r\n      default: 'normal',\r\n    },\r\n    /**\r\n     * 样式名称\r\n     *\r\n     * @type {String}\r\n     */\r\n    className: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 是否有关闭按钮\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    closable: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    /**\r\n     * render 渲染函数\r\n     *\r\n     * @type {Function}\r\n     */\r\n    render: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * 关闭方法\r\n     *\r\n     * @type {Function}\r\n     */\r\n    onClose: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * 组件名称\r\n     *\r\n     * @type {String}\r\n     */\r\n    id: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    /**\r\n     * 延迟关闭时间\r\n     *\r\n     * @type {Function}\r\n     */\r\n    duration: {\r\n      type: Number,\r\n      default: 4500,\r\n    },\r\n    /**\r\n     * 偏移位置\r\n     *\r\n     * @type {Number}\r\n     */\r\n    offset: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * 自定义弹出位置\r\n     *\r\n     * @type {String}\r\n     */\r\n    position: {\r\n      type: String as PropType<Position>,\r\n      validator(value: string) {\r\n        return oneOf(value, [\r\n          'top-right',\r\n          'top-left',\r\n          'bottom-right',\r\n          'bottom-left',\r\n        ]);\r\n      },\r\n      default: 'top-right',\r\n    },\r\n    /**\r\n     * 当前index\r\n     *\r\n     * @type {Number}\r\n     */\r\n    zIndex: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * 标题\r\n     *\r\n     * @type {String}\r\n     */\r\n    title: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 描述\r\n     *\r\n     * @type {String}\r\n     */\r\n    desc: {\r\n      type: String,\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 是否有描述\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      haveDesc: false,\r\n      /**\r\n       * 关闭时间\r\n       *\r\n       * @type {Function}\r\n       */\r\n      closeTimer: null,\r\n      /**\r\n       * 显示\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      visible: false,\r\n      /**\r\n       * 图标类型\r\n       *\r\n       * @type {Object}\r\n       */\r\n      iconTypes: {\r\n        success: 'check_circle',\r\n        info: 'info',\r\n        warning: 'warning',\r\n        error: 'error',\r\n      },\r\n    });\r\n\r\n    // computed\r\n\r\n    // 原始class\r\n    const baseClasses = computed(() => {\r\n      return `${prefixCls}-notice`;\r\n    });\r\n\r\n    // 外层样式\r\n    const classes = computed(() => {\r\n      const _baseClass = baseClasses.value;\r\n\r\n      return [\r\n        'ivue-notice',\r\n        baseClasses.value,\r\n        {\r\n          [`${props.className}`]: !!props.className,\r\n          [`${_baseClass}-closable`]: props.closable,\r\n          [`${_baseClass}-have-desc`]: data.haveDesc,\r\n        },\r\n        horizontalClass.value,\r\n      ];\r\n    });\r\n\r\n    // 当前方向\r\n    const verticalProperty = computed(() => {\r\n      return props.position.startsWith('top') ? 'top' : 'bottom';\r\n    });\r\n\r\n    // 弹出方向\r\n    const horizontalClass = computed(() => {\r\n      return props.position.indexOf('right') > 1 ? 'right' : 'left';\r\n    });\r\n\r\n    // 外层样式\r\n    const wrapperStyles = computed(() => {\r\n      return {\r\n        [verticalProperty.value]: `${props.offset}px`,\r\n        'z-index': props.zIndex,\r\n      };\r\n    });\r\n\r\n    // 有描述\r\n    const haveDesc = computed(() => {\r\n      return props.render && !props.title\r\n        ? ''\r\n        : props.desc || props.render\r\n        ? `${prefixCls}-have-desc`\r\n        : '';\r\n    });\r\n\r\n    // 内容样式\r\n    const contentClasses = computed(() => {\r\n      const _baseClass = baseClasses.value;\r\n\r\n      return {\r\n        [`${_baseClass}-content`]: true,\r\n        [`${_baseClass}-content-render`]: props.render,\r\n      };\r\n    });\r\n\r\n    // 是否有图标\r\n    const contentHaveIcon = computed(() => {\r\n      return {\r\n        [`${prefixCls}-content-have-icon`]: props.type !== 'normal',\r\n      };\r\n    });\r\n\r\n    // render 函数\r\n    const renderFunc = computed(() => {\r\n      return props.render;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 关闭\r\n    const handleClose = () => {\r\n      data.visible = false;\r\n    };\r\n\r\n    // 清除关闭时间\r\n    const clearCloseTimer = () => {\r\n      if (data.closeTimer) {\r\n        clearTimeout(data.closeTimer);\r\n        data.closeTimer = null;\r\n      }\r\n    };\r\n\r\n    // 开始时间\r\n    const startTime = () => {\r\n      // 重新设置延迟关闭\r\n      if (props.duration > 0) {\r\n        data.closeTimer = setTimeout(() => {\r\n          handleClose();\r\n        }, props.duration);\r\n      }\r\n    };\r\n\r\n    // 鼠标进入\r\n    const handleMouseenter = () => {\r\n      clearTimeout(data.closeTimer);\r\n      data.closeTimer = null;\r\n    };\r\n\r\n    // 鼠标移开\r\n    const handleMouseleave = () => {\r\n      startTime();\r\n    };\r\n\r\n    // 键盘点击\r\n    const onKeydown = ({ code }: KeyboardEvent) => {\r\n      if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {\r\n        clearCloseTimer(); // press delete/backspace clear timer\r\n      } else if (code === EVENT_CODE.esc) {\r\n        // press esc to close the notification\r\n        if (data.visible) {\r\n          handleClose();\r\n        }\r\n      } else {\r\n        startTime(); // resume timer\r\n      }\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      startTime();\r\n\r\n      data.visible = true;\r\n\r\n      useEventListener(document, 'keydown', onKeydown);\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      data,\r\n\r\n      // computed\r\n      classes,\r\n      baseClasses,\r\n      contentClasses,\r\n      contentHaveIcon,\r\n      renderFunc,\r\n      wrapperStyles,\r\n      haveDesc,\r\n\r\n      // methods\r\n      handleClose,\r\n      clearCloseTimer,\r\n      handleMouseenter,\r\n      handleMouseleave,\r\n      horizontalClass,\r\n    };\r\n  },\r\n  components: {\r\n    RenderCell,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode","_normalizeClass","_normalizeStyle","_createCommentVNode","_createElementBlock","_toDisplayString","_withModifiers"],"mappings":"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"}