tdesign-vue-next
Version:
TDesign Component for vue-next
1 lines • 10.3 kB
Source Map (JSON)
{"version":3,"file":"tag.mjs","sources":["../../../components/tag/tag.tsx"],"sourcesContent":["import { computed, defineComponent, getCurrentInstance, h, VNode } from 'vue';\nimport { CloseIcon as TdCloseIcon } from 'tdesign-icons-vue-next';\nimport { isString } from 'lodash-es';\nimport tinycolor from 'tinycolor2';\n\nimport props from './props';\nimport {\n useConfig,\n useContent,\n useTNodeJSX,\n useGlobalIcon,\n usePrefixClass,\n useCommonClassName,\n} from '@tdesign/shared-hooks';\n\nimport { Styles } from '../common';\n\nexport default defineComponent({\n name: 'TTag',\n props,\n setup(props) {\n const { globalConfig: tagGlobalConfig } = useConfig('tag');\n const COMPONENT_NAME = usePrefixClass('tag');\n const { CloseIcon } = useGlobalIcon({ CloseIcon: TdCloseIcon });\n const renderTNodeJSX = useTNodeJSX();\n const renderContent = useContent();\n const { SIZE } = useCommonClassName();\n const { vnode } = getCurrentInstance();\n\n const tagClass = computed(() => {\n return [\n `${COMPONENT_NAME.value}`,\n `${COMPONENT_NAME.value}--${props.theme}`,\n `${COMPONENT_NAME.value}--${props.variant}`,\n {\n [`${COMPONENT_NAME.value}--ellipsis`]: props.maxWidth,\n [`${COMPONENT_NAME.value}--close`]: props.closable,\n [`${COMPONENT_NAME.value}--disabled`]: props.disabled,\n [SIZE.value[props.size]]: props.size !== 'medium',\n },\n props.shape !== 'square' && `${COMPONENT_NAME.value}--${props.shape}`,\n ];\n });\n const tagStyle = computed<Styles>(() => {\n return getTagColorStyle();\n });\n\n const textStyle = computed<Styles>(() => {\n if (!props.maxWidth) return {};\n\n return {\n maxWidth: isNaN(Number(props.maxWidth)) ? String(props.maxWidth) : `${props.maxWidth}px`,\n };\n });\n\n const getTagColorStyle = () => {\n const { color, variant } = props;\n if (!color) return {};\n\n const luminance = tinycolor(color).getLuminance();\n\n const style: Styles = {\n color: luminance > 0.5 ? 'black' : 'white',\n };\n\n if (variant === 'outline' || variant === 'light-outline') {\n style.borderColor = color;\n }\n if (variant !== 'outline') {\n const getLightestShade = () => {\n const { r, g, b } = tinycolor(color).toRgb();\n // alpha 0.1 is designed by @wen1kang\n return `rgba(${r}, ${g}, ${b}, 0.1)`;\n };\n style.backgroundColor = variant === 'dark' ? color : getLightestShade();\n }\n if (variant !== 'dark') {\n style.color = color;\n }\n return style;\n };\n\n const handleClick = (e: MouseEvent) => {\n if (props.disabled) return;\n props.onClick?.({ e });\n };\n\n const getCloseIcon = () => {\n if (!props.closable) return null;\n const iconClassName = `${COMPONENT_NAME.value}__icon-close`;\n if (tagGlobalConfig.value.closeIcon) {\n return h(tagGlobalConfig.value.closeIcon(h) as VNode, { class: iconClassName });\n }\n return (\n <CloseIcon\n onClick={({ e }: { e: MouseEvent }) => {\n if (e) e.stopPropagation();\n props.onClose?.({ e });\n }}\n class={iconClassName}\n />\n );\n };\n\n const renderTitle = (tagContent: string) => {\n const vProps = vnode.props || {};\n if (Reflect.has(vProps, 'title')) {\n return vProps.title || undefined;\n }\n\n if (tagContent) {\n return tagContent;\n }\n\n return undefined;\n };\n\n return () => {\n // 关闭按钮 自定义组件使用 nativeOnClick 绑定事件\n const closeIcon = getCloseIcon();\n // 标签内容\n const tagContent = renderContent('default', 'content');\n // 图标\n const icon = renderTNodeJSX('icon');\n\n const title = renderTitle(isString(tagContent) ? tagContent : '');\n\n return (\n <div class={tagClass.value} style={tagStyle.value} onClick={handleClick}>\n {icon}\n <span\n class={props.maxWidth ? `${COMPONENT_NAME.value}--text` : undefined}\n style={textStyle.value}\n title={title}\n >\n {tagContent}\n </span>\n {!props.disabled && closeIcon}\n </div>\n );\n };\n },\n});\n"],"names":["defineComponent","name","props","setup","_useConfig","useConfig","tagGlobalConfig","globalConfig","COMPONENT_NAME","usePrefixClass","_useGlobalIcon","useGlobalIcon","CloseIcon","TdCloseIcon","renderTNodeJSX","useTNodeJSX","renderContent","useContent","_useCommonClassName","useCommonClassName","SIZE","_getCurrentInstance","getCurrentInstance","vnode","tagClass","computed","concat","value","theme","variant","_defineProperty","maxWidth","closable","disabled","size","shape","tagStyle","getTagColorStyle","textStyle","isNaN","Number","String","color","luminance","tinycolor","getLuminance","style","borderColor","getLightestShade","_tinycolor$toRgb","toRgb","r","g","b","backgroundColor","handleClick","e","_props2$onClick","onClick","getCloseIcon","iconClassName","closeIcon","h","_createVNode","_ref2","_props2$onClose","stopPropagation","onClose","renderTitle","tagContent","vProps","Reflect","has","title","icon","isString"],"mappings":"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"}