{"version":3,"file":"tag2.mjs","sources":["../../../../../../packages/components/tag/src/tag.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"disableTransitions\"\n    :class=\"classes\"\n    :style=\"{ backgroundColor: color, color: fontColor }\"\n    @click=\"handleClick\"\n  >\n    <span :class=\"ns.e('content')\">\n      <slot />\n    </span>\n    <el-icon\n      v-if=\"closable\"\n      :style=\"{ color: fontColor || '' }\"\n      :class=\"ns.e('close')\"\n      @click.stop=\"handleClose\"\n      @mouseenter=\"handleMouseEnter($event)\"\n      @mouseleave=\"handleMouseLeave($event)\"\n    >\n      <Close />\n    </el-icon>\n  </span>\n  <transition v-else :name=\"`${ns.namespace.value}-zoom-in-center`\" appear>\n    <span\n      :class=\"classes\"\n      :style=\"{ backgroundColor: color, color: fontColor }\"\n      @click=\"handleClick\"\n    >\n      <span :class=\"ns.e('content')\">\n        <slot />\n      </span>\n      <el-icon\n        v-if=\"closable\"\n        :style=\"{ color: fontColor || '' }\"\n        :class=\"ns.e('close')\"\n        @click.stop=\"handleClose\"\n        @mouseenter=\"handleMouseEnter($event)\"\n        @mouseleave=\"handleMouseLeave($event)\"\n      >\n        <Close />\n      </el-icon>\n    </span>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { Close } from '@element-plus/icons-vue'\nimport ElIcon from '@park-ui/components/icon'\n\nimport { useNamespace, useSize } from '@park-ui/hooks'\nimport { tagEmits, tagProps } from './tag'\n\ndefineOptions({\n  name: 'ElTag',\n})\nconst props = defineProps(tagProps)\nconst emit = defineEmits(tagEmits)\n\nconst tagSize = useSize()\nconst ns = useNamespace('tag')\nconst classes = computed(() => {\n  const { type, hit, effect, closable, round } = props\n  return [\n    ns.b(),\n    ns.is('closable', closable),\n    ns.m(type),\n    ns.m(tagSize.value),\n    ns.m(effect),\n    ns.is('hit', hit),\n    ns.is('round', round),\n  ]\n})\n\n// methods\nconst handleClose = (event: MouseEvent) => {\n  emit('close', event)\n}\n\nconst handleClick = (event: MouseEvent) => {\n  emit('click', event)\n}\n\nconst handleMouseEnter = (event: MouseEvent) => {\n  /** 如果当前props存在font-color，表示在自定义颜色 */\n  if (props.fontColor) {\n    ;(event.target as any).style.backgroundColor = props.fontColor\n    ;(event.target as any).style.color = '#fff'\n  }\n}\n\nconst handleMouseLeave = (event: MouseEvent) => {\n  /** 移出需要还原图标的颜色 */\n  if (props.fontColor) {\n    ;(event.target as any).style.backgroundColor = ''\n    ;(event.target as any).style.color = props.fontColor\n  }\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA0DA,IAAA,MAAA,UAAA,OAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAA,aAAA,KAAA,CAAA,CAAA;AACA,IAAA,MAAA,OAAA,GAAA,SAAA,MAAA;AACA,MAAA,MAAA,EAAA,IAAA,EAAA,GAAA,EAAA,MAAA,EAAA,UAAA,KAAA,EAAA,GAAA,KAAA,CAAA;AACA,MAAA,OAAA;AAAA,QACA,GAAA,CAAA,EAAA;AAAA,QACA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,QAAA,CAAA;AAAA,QACA,EAAA,CAAA,EAAA,IAAA,CAAA;AAAA,QACA,EAAA,CAAA,CAAA,CAAA,OAAA,CAAA,KAAA,CAAA;AAAA,QACA,EAAA,CAAA,EAAA,MAAA,CAAA;AAAA,QACA,EAAA,CAAA,EAAA,CAAA,KAAA,EAAA,GAAA,CAAA;AAAA,QACA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,KAAA,CAAA;AAAA,OACA,CAAA;AAAA,KACA,CAAA,CAAA;AAGA,IAAA,MAAA,WAAA,GAAA,CAAA,KAAA,KAAA;AACA,MAAA,IAAA,CAAA,SAAA,KAAA,CAAA,CAAA;AAAA,KACA,CAAA;AAEA,IAAA,MAAA,WAAA,GAAA,CAAA,KAAA,KAAA;AACA,MAAA,IAAA,CAAA,SAAA,KAAA,CAAA,CAAA;AAAA,KACA,CAAA;AAEA,IAAA,MAAA,gBAAA,GAAA,CAAA,KAAA,KAAA;AAEA,MAAA,IAAA,MAAA,SAAA,EAAA;AACA,QAAA,CAAA;AAAA,QAAA,KAAA,CAAA,MAAA,CAAA,KAAA,CAAA,eAAA,GAAA,KAAA,CAAA,SAAA,CAAA;AACA,QAAA,KAAA,CAAA,MAAA,CAAA,KAAA,CAAA,KAAA,GAAA,MAAA,CAAA;AAAA,OACA;AAAA,KACA,CAAA;AAEA,IAAA,MAAA,gBAAA,GAAA,CAAA,KAAA,KAAA;AAEA,MAAA,IAAA,MAAA,SAAA,EAAA;AACA,QAAA,CAAA;AAAA,QAAA,KAAA,CAAA,MAAA,CAAA,KAAA,CAAA,eAAA,GAAA,EAAA,CAAA;AACA,QAAA,KAAA,CAAA,MAAA,CAAA,KAAA,CAAA,KAAA,GAAA,KAAA,CAAA,SAAA,CAAA;AAAA,OACA;AAAA,KACA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}