{"version":3,"file":"tag2.mjs","sources":["../../../../../../packages/components/tag/src/tag.vue"],"sourcesContent":["<template>\r\n  <transition :name=\"transition ?`${ns.namespace.value}-zoom-in-center` : ''\">\r\n    <span\r\n      :class=\"classes\"\r\n      :style=\"style\"\r\n      @click=\"handleClick\"\r\n    >\r\n      <span :class=\"ns.e('content')\">\r\n        <slot></slot>\r\n      </span>\r\n      <sg-icon v-if=\"closable\" :class=\"ns.e('close')\" @click=\"handleClose\">\r\n        <Close />\r\n      </sg-icon>\r\n    </span>\r\n  </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed, defineComponent, watch } from 'vue'\r\nimport { TinyColor } from '@ctrl/tinycolor'\r\nimport SgIcon from '@sgui-plus/components/icon'\r\nimport { Close } from '@sgui-plus/icons-vue'\r\n\r\nimport { useSize, useNamespace } from '@sgui-plus/hooks'\r\nimport { tagProps, tagEmits } from './tag'\r\n\r\nexport default defineComponent({\r\n  name: 'SgTag',\r\n\r\n  components: { SgIcon, Close },\r\n\r\n  props: tagProps,\r\n  emits: tagEmits,\r\n\r\n  setup(props, { emit }) {\r\n    const tagSize = useSize()\r\n    const ns = useNamespace('tag')\r\n    const classes = computed(() => {\r\n      const { type, closable, fill, outline, checkable, checked } = props\r\n      return [\r\n        ns.b(),\r\n        ns.is('closable', closable),\r\n        ns.m(type),\r\n        ns.m(tagSize.value),\r\n        ns.m(fill ? 'dark' : outline ? 'plain' : 'light'),\r\n        ns.is('checkable', checkable),\r\n        ns.is('checked', checkable && checked)\r\n      ]\r\n    })\r\n\r\n    // methods\r\n    const handleClose = (event: MouseEvent) => {\r\n      event.stopPropagation()\r\n      emit('onClose', event)\r\n    }\r\n\r\n    const handleClick = (event: MouseEvent) => {\r\n      emit('onClick', event)\r\n    }\r\n\r\n    // watch\r\n    if (props.checkable) {\r\n      watch(\r\n        () => props.checked,\r\n        (newVal, oldVal) => {\r\n          if (newVal === oldVal) return\r\n          emit('onChange', newVal)\r\n        }\r\n      )\r\n    }\r\n\r\n    const style = computed(() => {\r\n      const style: any = {}\r\n\r\n      if (props.checkable && !props.checked) {\r\n        return style\r\n      }\r\n\r\n      if (props.color) {\r\n        const color = new TinyColor(props.color)\r\n        const backgroundColor = color.tint(90)\r\n        const borderColor = color.tint(70)\r\n\r\n        style['--sg-tag-text-color'] = props.color\r\n        style['--sg-tag-hover-color'] = props.color\r\n        style['--sg-tag-bg-color'] = backgroundColor\r\n        style['--sg-tag-border-color'] = borderColor\r\n      }\r\n\r\n      if (props.backgroundColor) {\r\n        style['--sg-tag-bg-color'] = props.backgroundColor\r\n      }\r\n\r\n      return style\r\n    })\r\n\r\n    return {\r\n      ns,\r\n      classes,\r\n      style,\r\n      handleClose,\r\n      handleClick,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_withCtx","_createElementVNode","_normalizeClass","_normalizeStyle","_renderSlot","_openBlock","_createBlock"],"mappings":";;;;;;6BACEA,gBAaa,CAAA,SAAA,CAAA,CAAA;;AADJ,IAAA,IAAA,EAAA,IAAA,CAAA,UAAA,GAAA,CAAA,EAAA,IAAA,CAAA,EAAA,CAAA,SAAA,CAAA,KAAA,CAAA,eAAA,CAAA,GAAA,EAAA;AAAA,GAAA,EAAA;AAVC,IAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAAC,kBAAA,CACA,MAAE,EAAA;AAAA,QACP,KAAK,EAAAC,cAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,KAAA,CAAA;QAEN,OAEO,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,WAAA,IAAA,IAAA,CAAA,WAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,OAAA,EAAA;;UADL,KAAa,EAAAD,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA,SAAA,EAAA;UAEAE,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,EAAA,CAAA,CAAA;AAAQ,QAAA,IAAA,CAAA,QAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAE,kBAAI,EAAA;AAAA,UAAY,GAAA,EAAA,CAAA;AAAA,UAAA,KAAA,EAAAJ,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;"}