@extclp/vexip-ui/es/components/tag/tag.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"tag.mjs","sources":["../../../components/tag/tag.tsx"],"sourcesContent":["import { Icon } from '@/components/icon'\r\nimport { Renderer } from '@/components/renderer'\r\n\r\nimport { computed, defineComponent, renderSlot } from 'vue'\r\n\r\nimport { createSizeProp, emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { adjustAlpha, isClient, mixColor, parseColorToRgba } from '@vexip-ui/utils'\r\nimport { tagProps } from './props'\r\n\r\nimport type { TagType } from './symbol'\r\n\r\nconst tagTypes = Object.freeze<TagType[]>([\r\n  'default',\r\n  'primary',\r\n  'info',\r\n  'success',\r\n  'error',\r\n  'warning',\r\n  'lime',\r\n  'pink',\r\n  'magenta',\r\n  'tomato',\r\n  'orange',\r\n  'cyan',\r\n  'navy',\r\n  'gold',\r\n  'purple',\r\n])\r\n\r\nexport default defineComponent({\r\n  name: 'Tag',\r\n  components: {\r\n    Icon,\r\n  },\r\n  props: tagProps,\r\n  emits: [],\r\n  setup(_props, { slots }) {\r\n    const props = useProps('tag', _props, {\r\n      size: createSizeProp(),\r\n      type: {\r\n        default: 'default',\r\n        validator: (value: TagType) => tagTypes.includes(value),\r\n      },\r\n      border: false,\r\n      closable: false,\r\n      color: null,\r\n      simple: false,\r\n      circle: false,\r\n      prefix: '',\r\n      prefixBg: '',\r\n      prefixColor: '',\r\n      suffix: '',\r\n      suffixBg: '',\r\n      suffixColor: '',\r\n      disabled: false,\r\n      slots: () => ({}),\r\n    })\r\n\r\n    const nh = useNameHelper('tag')\r\n    const icons = useIcons()\r\n\r\n    const className = computed(() => {\r\n      return {\r\n        [nh.b()]: true,\r\n        [nh.bs('vars')]: true,\r\n        [nh.bm('inherit')]: props.inherit,\r\n        [nh.bm(props.size)]: props.size !== 'default',\r\n        [nh.bm(props.type)]: props.type !== 'default',\r\n        [nh.bm('border')]: props.border,\r\n        [nh.bm('simple')]: props.simple,\r\n        [nh.bm('circle')]: props.circle,\r\n        [nh.bm('closable')]: props.closable,\r\n        [nh.bm('disabled')]: props.disabled,\r\n      }\r\n    })\r\n    const style = computed(() => {\r\n      if (!props.color) return undefined\r\n\r\n      const rootStyle = isClient ? getComputedStyle(document.documentElement) : null\r\n      const white = parseColorToRgba(rootStyle?.getPropertyValue(nh.nv('color-white')) || '#fff')\r\n      const baseColor = parseColorToRgba(props.color)\r\n      const base = baseColor.toString()\r\n\r\n      return nh.cvm({\r\n        color: 'var(--vxp-color-white)',\r\n        'bg-color': base,\r\n        'b-color': base,\r\n        'close-color': 'var(--vxp-color-white)',\r\n        'd-color': mixColor(white, baseColor, 0.3).toString(),\r\n        ...(props.simple || props.border\r\n          ? {\r\n            color: base,\r\n            'close-color': base,\r\n          }\r\n          : {}),\r\n        ...(props.simple\r\n          ? {\r\n            'bg-color': adjustAlpha(baseColor, 0.2).toString(),\r\n          }\r\n          : {}),\r\n      })\r\n    })\r\n\r\n    function handleClose(event: MouseEvent) {\r\n      if (!props.closable || props.disabled || event.button > 0) {\r\n        return false\r\n      }\r\n\r\n      event.stopPropagation()\r\n      emitEvent(props.onClose)\r\n    }\r\n\r\n    function renderClose() {\r\n      if (!props.closable) return null\r\n\r\n      return (\r\n        <button type={'button'} class={nh.be('close')} onClick={handleClose}>\r\n          <Icon {...icons.value.close} label={'close'}></Icon>\r\n        </button>\r\n      )\r\n    }\r\n\r\n    return () => {\r\n      const hasPrefix = !!(props.prefix === 0 || props.prefix || slots.prefix || props.slots.prefix)\r\n      const hasSuffix = !!(props.suffix === 0 || props.suffix || slots.suffix || props.slots.suffix)\r\n\r\n      return (\r\n        <div class={className.value} style={style.value}>\r\n          {hasPrefix ? (\r\n            <span\r\n              class={[nh.be('unit'), nh.be('prefix')]}\r\n              style={{\r\n                color: props.prefixColor,\r\n                backgroundColor: props.prefixBg,\r\n                borderColor: props.prefixBg,\r\n              }}\r\n            >\r\n              {renderSlot(slots, 'prefix', undefined, () => [\r\n                <Renderer renderer={props.slots.prefix}>{props.prefix}</Renderer>,\r\n              ])}\r\n            </span>\r\n          ) : null}\r\n          <span class={[nh.be('unit'), nh.be('content')]}>\r\n            {renderSlot(slots, 'default', undefined, () => [\r\n              <Renderer renderer={props.slots.default}></Renderer>,\r\n            ])}\r\n            {!hasSuffix && renderClose()}\r\n          </span>\r\n          {hasSuffix ? (\r\n            <span\r\n              class={[nh.be('unit'), nh.be('suffix')]}\r\n              style={{\r\n                color: props.suffixColor,\r\n                backgroundColor: props.suffixBg,\r\n                borderColor: props.suffixBg,\r\n              }}\r\n            >\r\n              {renderSlot(slots, 'suffix', undefined, () => [\r\n                <Renderer renderer={props.slots.suffix}>{props.suffix}</Renderer>,\r\n              ])}\r\n              {renderClose()}\r\n            </span>\r\n          ) : null}\r\n        </div>\r\n      )\r\n    }\r\n  },\r\n})\r\n"],"names":["tagTypes","Object","freeze","defineComponent","name","components","Icon","props","tagProps","emits","setup","_props","slots","useProps","size","createSizeProp","type","default","validator","value","includes","border","closable","color","simple","circle","prefix","prefixBg","prefixColor","suffix","suffixBg","suffixColor","disabled","nh","useNameHelper","icons","useIcons","className","computed","b","bs","bm","inherit","style","rootStyle","isClient","getComputedStyle","document","documentElement","white","parseColorToRgba","getPropertyValue","nv","baseColor","base","toString","cvm","mixColor","adjustAlpha","handleClose","event","button","stopPropagation","emitEvent","onClose","renderClose","_createVNode","be","_mergeProps","close","hasPrefix","hasSuffix","backgroundColor","borderColor","renderSlot","undefined","Renderer"],"mappings":"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"}