{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-badge/index.vue"],"sourcesContent":["<template>\r\n  <!-- 状态点 -->\r\n  <span :class=\"prefixCls\" v-if=\"dot\">\r\n    <slot></slot>\r\n    <sup :style=\"styles\" :class=\"dotClasses\" v-show=\"showBadge\"></sup>\r\n  </span>\r\n  <!-- 状态点的颜色 -->\r\n  <span v-else-if=\"status\" :class=\"statusWrapperClasses\">\r\n    <span :class=\"statusClasses\" :style=\"statusStyles\"></span>\r\n    <!-- text -->\r\n    <span :class=\"`${prefixCls}-status--text`\">\r\n      <slot name=\"text\">{{ text }}</slot>\r\n    </span>\r\n  </span>\r\n  <!-- 普通显示 -->\r\n  <span :class=\"prefixCls\" v-else>\r\n    <slot></slot>\r\n    <transition :name=\"`${prefixCls}-fade`\">\r\n      <sup\r\n        :style=\"slotsStyles\"\r\n        :class=\"countSlotsClasses\"\r\n        v-if=\"$slots.count\"\r\n        v-show=\"showBadge\"\r\n      >\r\n        <slot name=\"count\"></slot>\r\n      </sup>\r\n      <sup\r\n        :style=\"styles\"\r\n        :class=\"countClasses\"\r\n        v-else-if=\"hasCount\"\r\n        v-show=\"showBadge\"\r\n      >\r\n        <sup>\r\n          <slot name=\"text\">{{ finalCount }}</slot>\r\n        </sup>\r\n      </sup>\r\n    </transition>\r\n  </span>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport hexToRgba from 'hex-to-rgba';\r\nimport { oneOf } from '../../utils/assist';\r\n\r\nimport {\r\n  defineComponent,\r\n  computed,\r\n  getCurrentInstance,\r\n  ComponentInternalInstance,\r\n} from 'vue';\r\n\r\n// type\r\nimport type { Props } from './types/badge';\r\n\r\nconst prefixCls = 'ivue-badge';\r\n\r\nfunction isCssColor(color: string) {\r\n  return !!color && !!color.match(/^(#|(rgb|hsl)a?\\()/);\r\n}\r\n\r\nconst initColorList = [\r\n  'blue',\r\n  'green',\r\n  'red',\r\n  'yellow',\r\n  'pink',\r\n  'orange',\r\n  'gold',\r\n  'lime',\r\n  'cyan',\r\n  'purple',\r\n  'success',\r\n  'processing',\r\n  'default',\r\n  'error',\r\n  'warning',\r\n];\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 显示的数字\r\n     *\r\n     * @type {Number}\r\n     */\r\n    count: {\r\n      type: Number,\r\n    },\r\n    /**\r\n     * 自定义的class名称，dot 模式下无效\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 {Number, String}\r\n     */\r\n    overflowCount: {\r\n      type: [Number, String],\r\n      default: 99,\r\n    },\r\n    /**\r\n     * 当数值为0时是否显示\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    showZero: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 自定义内容\r\n     *\r\n     * @type {String}\r\n     */\r\n    text: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 颜色\r\n     *\r\n     * @type {String}\r\n     */\r\n    color: {\r\n      type: String,\r\n      default: '#FF617F',\r\n    },\r\n    /**\r\n     * 数字偏移位置\r\n     *\r\n     * @type {Array}\r\n     */\r\n    offset: {\r\n      type: Array,\r\n    },\r\n    /**\r\n     * 显示成小红点\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    dot: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否显示徽标\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    show: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    /**\r\n     * 设置 Badge 为状态点\r\n     *\r\n     * @type {String}\r\n     */\r\n    status: {\r\n      type: String,\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // 支持访问内部组件实例\r\n    const { proxy } = getCurrentInstance() as ComponentInternalInstance;\r\n\r\n    // computed\r\n\r\n    // 原始class\r\n    const dotClasses = computed(() => {\r\n      let _color = {};\r\n\r\n      // 自定义颜色\r\n      if (!isCssColor(props.color)) {\r\n        _color = { [props.color]: true };\r\n      }\r\n\r\n      return [`${prefixCls}-dot`, _color];\r\n    });\r\n\r\n    // 数值样式\r\n    const countClasses = computed(() => {\r\n      const { color, className } = props;\r\n\r\n      let _color = {\r\n        [`${className}`]: !!className,\r\n        [`${prefixCls}-count--alone`]: alone.value,\r\n      };\r\n\r\n      // 自定义颜色\r\n      if (!isCssColor(color)) {\r\n        _color = {\r\n          ..._color,\r\n          [color]: true,\r\n        };\r\n      }\r\n\r\n      return [`${prefixCls}-count`, _color];\r\n    });\r\n\r\n    // 数值slot样式\r\n    const countSlotsClasses = computed(() => {\r\n      const { color, className } = props;\r\n\r\n      let _color = {\r\n        [`${className}`]: !!className,\r\n      };\r\n\r\n      // 自定义颜色\r\n      if (!isCssColor(color)) {\r\n        _color = {\r\n          ..._color,\r\n          [color]: true,\r\n        };\r\n      }\r\n\r\n      return [`${prefixCls}-count`, `${prefixCls}-count--custom`, _color];\r\n    });\r\n\r\n    // 状态点的颜色\r\n    const statusWrapperClasses = computed(() => {\r\n      return [prefixCls, `${prefixCls}-status`];\r\n    });\r\n\r\n    // 状态点的颜色\r\n    const statusClasses = computed(() => {\r\n      const { status, color } = props;\r\n\r\n      let _color = {\r\n        [`${prefixCls}-status--${color}`]:\r\n          !!color && oneOf(color, initColorList),\r\n      };\r\n\r\n      // 自定义颜色\r\n      if (!isCssColor(status)) {\r\n        _color = {\r\n          ..._color,\r\n          [`${prefixCls}-status--${status}`]: !!status,\r\n        };\r\n      }\r\n\r\n      return [`${prefixCls}-status--dot`, _color];\r\n    });\r\n\r\n    // 状态点的颜色\r\n    const statusStyles = computed(() => {\r\n      const { status } = props;\r\n\r\n      const style = {};\r\n\r\n      if (isCssColor(status)) {\r\n        style['background-color'] = status;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    // 微标位置\r\n    const styles = computed(() => {\r\n      const style = {};\r\n\r\n      if (props.offset && props.offset.length === 2) {\r\n        style['margin-top'] = `${props.offset[0]}px`;\r\n        style['margin-right'] = `${props.offset[1]}px`;\r\n      }\r\n\r\n      // 自定义颜色\r\n      if (isCssColor(props.color)) {\r\n        style['background-color'] = props.color;\r\n        style['box-shadow'] = `0 0 2px 1px ${hexToRgba(props.color, '0.5')}`;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    // 微标位置\r\n    const slotsStyles = computed(() => {\r\n      const style = {};\r\n\r\n      if (props.offset && props.offset.length === 2) {\r\n        style['margin-top'] = `${props.offset[0]}px`;\r\n        style['margin-right'] = `${props.offset[1]}px`;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    // 判断是否显示封顶数字值\r\n    const finalCount = computed(() => {\r\n      const { count, overflowCount, text } = props;\r\n\r\n      // 判断是否有文字\r\n      if (text !== '') {\r\n        return text;\r\n      }\r\n\r\n      // 显示的数字 >= 封顶的数字值 ? 封顶的数字值+ : 显示的数字\r\n      return parseInt(`${count}`) >= parseInt(`${overflowCount}`)\r\n        ? `${overflowCount}+`\r\n        : count;\r\n    });\r\n\r\n    // 是否显示数字\r\n    const showBadge = computed(() => {\r\n      const { count, dot, showZero, text, show } = props;\r\n\r\n      let status = false;\r\n\r\n      if (!show) {\r\n        return show;\r\n      }\r\n\r\n      // 是否有数字\r\n      if (count) {\r\n        // 是否等于0\r\n        status = !(parseInt(`${count}`) === 0);\r\n      }\r\n\r\n      // 是否显示成小红点\r\n      if (dot) {\r\n        status = true;\r\n\r\n        if (count !== null) {\r\n          // 是否等于0\r\n          if (parseInt(`${count}`) === 0) {\r\n            status = false;\r\n          }\r\n        }\r\n      }\r\n\r\n      // 是否有文本\r\n      if (text !== '') {\r\n        status = true;\r\n      }\r\n\r\n      // 0不显示 ||  当数值为0是是否显示\r\n      return status || showZero;\r\n    });\r\n\r\n    // 是否有数值\r\n    const hasCount = computed(() => {\r\n      const { count, text, showZero } = props;\r\n\r\n      if (count || text !== '') {\r\n        return true;\r\n      }\r\n\r\n      if (showZero && parseInt(`${count}`) === 0) {\r\n        return true;\r\n      } else {\r\n        return false;\r\n      }\r\n    });\r\n\r\n    // 是否有数值\r\n    const alone = computed(() => {\r\n      return proxy.$slots.default === undefined;\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // computed\r\n      dotClasses,\r\n      countClasses,\r\n      countSlotsClasses,\r\n      statusWrapperClasses,\r\n      statusClasses,\r\n      slotsStyles,\r\n      statusStyles,\r\n      styles,\r\n      finalCount,\r\n      showBadge,\r\n      hasCount,\r\n      alone,\r\n    };\r\n  },\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped></style>\r\n"],"names":["_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_normalizeClass","_withDirectives","_createElementVNode","_normalizeStyle","_renderSlot","_createVNode","_Transition","_vShow"],"mappings":";;;;SACE,YAAY,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;SACmBA,SAAG,EAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAA;AAAA,IAAlCC,mBAAA,sBAAA,CAAA;AAAA,IAAA,IAAA,CAAA,GAAA,IAAAH,SAAY,EAAA,qBAAE,MAAS,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,MACrB,KAAA,EAAaI,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,KAAA,EAAA;AAAA,iBACF,IAAE,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,MAAAC,cAAA,CAAcC,mBAAE,KAAU,EAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,MAAA,CAAA;AAAA,QAAmB,KAAA,EAAAH,cAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA;AAAA;OAG3C,CAAA;AAAA,KAAA,EAAA,CAAA,CAAA,IAAA,IAAA,CADjB,qBAOO,EAAAH,kBAAA,CAAAC,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAAC,mBANwB,wCAAE,CAAA;AAAA,MAAAG,mBAAA,MAAA,EAAA;AAAA,QAC/B,KAAA,EAA0DF,cAAA,CAAA,IAAA,CAAA,oBAAA,CAAA;AAAA,OAAA,EAAA;AAAA,2BAAvB,MAAE,EAAA;AAAA,UAAA,KAAA,EAAAA,cAAA,CAAA,IAAA,CAAA,aAAA,CAAA;AAAA,UACrC,KAAA,EAAaG,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,SACb,EAEO,MAAA,CAAA,CAAA;AAAA,QAAAJ,mBAFK,QAAK,CAAA;AAAA,QAAAG,mBAAA,MAAA,EAAA;AAAA,UACf,KAAmC,EAAAF,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,aAAA,CAAA,CAAA;AAAA,SAAA,EAAA;AAAA;;;;SAIvC,CAAA,CAAA;AAAA,KADA,EAAA,IAAa,CAAA,cACb,EAAA,EAsBOH,mBAAAC,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAAC,mBAtBK,4BAAE,CAAA;AAAA,MAAAG,mBAAA,MAAA,EAAA;AAAA,QACZ,KAAA,EAAaF,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,OACb,EAAA;AAAA,QAAAI,UAAA,CAAsB,IAAS,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,QAAAC,YAAAC,UAAA,EAAA;AAAA;;;YAErB,KAAA,MAAA,CAAA,KAAA,GAAAL,gBAAAL,SAAE,EAAA,EAAWC,mBAAA,KAAA,EAAA;AAAA,cAClB,GAAK,EAAA,CAAA;AAAA,cAAA,KAAA,EAAAM,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,cAIN,KAAA,EAA0BH,cAAA,CAAA,IAAA,CAAA,iBAAA,CAAA;AAAA,aAAA,EAAA;AAAA,yBAFlB,IAAS,CAAA,MAAA,EAAA,OAAA,CAAA;AAAA,aAAA,EAAA,CAAA,CAAA,GAAA;AAAA,cAON,CAAQO,KAAA,EAAA,IAAA,CAAA,SAAA,CAAA;AAAA,aAAA,IAAA,IAAA,CAAA,QAAA,GAAAN,gBAFbL,SAAE,EAAA,EAAMC,mBAAA,KAAA,EAAA;AAAA,cACb,GAAK,EAAA,CAAA;AAAA,cAAA,KAAA,EAAAM,cAAA,CAAA,IAAA,CAAA,MAAA,CAAA;AAAA,cAIN,KAAA,EAEMH,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,aAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;"}