xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 5.02 kB
Source Map (JSON)
{"version":3,"file":"tag.mjs","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import { computed, defineComponent, h, VNode } from 'vue';\n\nimport props from './props';\nimport { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';\nimport { useTNodeJSX, useContent } from '../hooks/tnode';\nimport isString from 'lodash/isString';\n\nexport default defineComponent({\n name: 'XTag',\n props,\n setup(props) {\n const { globalConfig: tagGlobalConfig } = useConfig('tag');\n const COMPONENT_NAME = usePrefixClass('tag');\n const renderTNodeJSX = useTNodeJSX();\n const renderContent = useContent();\n const { SIZE } = useCommonClassName();\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\n const tagStyle = computed<Record<string, string>>(() => {\n const { maxWidth } = props;\n return props.maxWidth\n ? {\n maxWidth: isNaN(Number(maxWidth)) ? String(maxWidth) : `${maxWidth}px`,\n }\n : {};\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 <icon-ri-close-line\n onClick={({ e }: { e: MouseEvent }) => {\n e.stopPropagation();\n props.onClose?.({ e });\n }}\n class={iconClassName}\n />\n );\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 = isString(tagContent) ? tagContent : '';\n const titleAttribute = title && props.maxWidth ? title : undefined;\n\n return (\n <span class={tagClass.value} style={tagStyle.value} onClick={handleClick}>\n {icon}\n {props.maxWidth ? (\n <span class={{ [`${COMPONENT_NAME.value}--text`]: props.maxWidth }} title={titleAttribute}>\n {tagContent}\n </span>\n ) : (\n tagContent\n )}\n {!props.disabled && closeIcon}\n </span>\n );\n };\n },\n});\n"],"names":["name","props","maxWidth","e","_resolveComponent","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,WAAA,eAAA,CAAA;AACEA,EAAAA,IAAAA,EAAAA,MAAAA;AACAC,EAAAA,KAAAA,EAAAA,KAAAA;;AAEE,IAAA,IAAA,UAAA,GAAA,SAAA,CAAA,KAAA,CAAA;;AACM,IAAA,IAAA,cAAA,GAAA,cAAA,CAAA,KAAA,CAAA,CAAA;AACN,IAAA,IAAA,cAAA,GAAA,WAAA,EAAA,CAAA;AACA,IAAA,IAAA,aAAA,GAAA,UAAA,EAAA,CAAA;AACM,IAAA,IAAA,mBAAA,GAAA,kBAAA,EAAA;;AAEA,IAAA,IAAA,QAAA,GAAA,QAAA,CAAA,YAAA;AAA0B,MAAA,IAAA,IAAA,CAAA;;AAahC,KAAA,CAAA,CAAA;AAEM,IAAA,IAAA,QAAA,GAAA,QAAA,CAAA,YAAA;AACE,MAAA,IAAA,QAAA,GAAA,MAAA,CAAA,QAAA,CAAA;;AAGAC,QAAAA,QAAAA,EAAAA,KAAAA,CAAAA,MAAAA,CAAAA,QAAAA,CAAAA,CAAAA,GAAAA,MAAAA,CAAAA,QAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAAA,CAAAA,QAAAA,EAAAA,IAAAA,CAAAA;;AAGR,KAAA,CAAA,CAAA;AAEM,IAAA,IAAA,WAAA,GAAA,SAAA,WAAA,CAAA,CAAA,EAAA;AAAiC,MAAA,IAAA,eAAA,CAAA;;AAErCD,MAAAA,CAAAA,eAAAA,GAAAA,MAAAA,CAAAA,OAAAA,MAAAA,IAAAA,IAAAA,eAAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,eAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAAA;AAAkBE,QAAAA,CAAAA,EAAAA,CAAAA;AAAE,OAAA,CAAA,CAAA;;AAGtB,IAAA,IAAA,YAAA,GAAA,SAAA,YAAA,GAAA;AACE,MAAA,IAAA,CAAA,MAAA,CAAA,QAAA,EAAA,OAAA,IAAA,CAAA;AACM,MAAA,IAAA,aAAA,GAAA,EAAA,CAAA,MAAA,CAAA,cAAA,CAAA,KAAA,EAAA,cAAA,CAAA,CAAA;AACF,MAAA,IAAA,eAAA,CAAA,KAAA,CAAA,SAAA,EAAA;;;AAC2E,SAAA,CAAA,CAAA;AAC/E,OAAA;yBACAC,uBAAA,EAAA;;AAE2C,UAAA,IAAA,eAAA,CAAA;AAAA,UAAA,IAAA,CAAA,GAAA,KAAA,CAAA,CAAA,CAAA;;AAErCH,UAAAA,CAAAA,eAAAA,GAAAA,MAAAA,CAAAA,OAAAA,MAAAA,IAAAA,IAAAA,eAAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,eAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAAA;AAAkBE,YAAAA,CAAAA,EAAAA,CAAAA;AAAE,WAAA,CAAA,CAAA;;;AAGxB,OAAA,EAAA,IAAA,CAAA,CAAA;;AAIJ,IAAA,OAAA,YAAA;AAEE,MAAA,IAAA,SAAA,GAAA,YAAA,EAAA,CAAA;AAEM,MAAA,IAAA,UAAA,GAAA,aAAA,CAAA,SAAA,EAAA,SAAA,CAAA,CAAA;AAEA,MAAA,IAAA,IAAA,GAAA,cAAA,CAAA,MAAA,CAAA,CAAA;;;AAMJ,MAAA,OAAAE,WAAA,CAAA,MAAA,EAAA;;;;AAA6D,OAAA,EAAA,CAAA,IAAA,EAAA,MAAA,CAAA,QAAA,GAAAA,WAAA,CAAA,MAAA,EAAA;;;;;AAanE,GAAA;AACF,CAAA,CAAA;;;;"}