xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 10 kB
Source Map (JSON)
{"version":3,"file":"card.mjs","sources":["../../src/card/card.tsx"],"sourcesContent":["import { defineComponent, computed } from 'vue';\n\nimport { usePrefixClass, useCommonClassName } from '../hooks/useConfig';\nimport { useTNodeJSX } from '../hooks/tnode';\nimport TLoading from '../loading';\nimport props from './props';\nimport isString from 'lodash/isString';\n\nexport default defineComponent({\n name: 'XCard',\n props,\n setup(props, { slots }) {\n const renderTNodeJSX = useTNodeJSX();\n const COMPONENT_NAME = usePrefixClass('card');\n const { SIZE } = useCommonClassName();\n\n const baseCls = computed(() => {\n const defaultClass = [COMPONENT_NAME.value];\n\n if (props.size === 'small') defaultClass.push(`${SIZE.value[props.size]}`);\n if (props.bordered) defaultClass.push(`${COMPONENT_NAME.value}--bordered`);\n if (props.shadow) defaultClass.push(`${COMPONENT_NAME.value}--shadow`);\n if (props.hoverShadow) defaultClass.push(`${COMPONENT_NAME.value}--shadow-hover`);\n\n return defaultClass;\n });\n\n const headerCls = computed(() => {\n const defaultClass = [`${COMPONENT_NAME.value}__header`];\n return props.headerBordered\n ? defaultClass.concat(`${COMPONENT_NAME.value}__title--bordered`)\n : [`${COMPONENT_NAME.value}__header`];\n });\n\n const headerWrapperCls = usePrefixClass('card__header-wrapper');\n const headerAvatarCls = usePrefixClass('card__avatar');\n const headerTitleCls = usePrefixClass('card__title');\n const headerSubTitleCls = usePrefixClass('card__subtitle');\n const headerDescriptionCls = usePrefixClass('card__description');\n const actionsCls = usePrefixClass('card__actions');\n\n const bodyCls = usePrefixClass('card__body');\n const coverCls = usePrefixClass('card__cover');\n const footerCls = usePrefixClass('card__footer');\n const footerWrapperCls = usePrefixClass('card__footer-wrapper');\n\n // 卡片风格：普通风格、海报风格1（操作区域在顶部）、海报风格2（操作区域在底部）。\n // 可选项：normal/poster1/poster2\n const isPoster2 = computed(() => props.theme === 'poster2');\n\n const showTitle = computed(() => props.title || slots.title);\n const showHeader = computed(() => props.header || slots.header);\n const showSubtitle = computed(() => props.subtitle || slots.subtitle);\n const showAvatar = computed(() => props.avatar || slots.avatar);\n const showDescription = computed(() => props.description || slots.description);\n const showStatus = computed(() => props.status || slots.status);\n const showActions = computed(() => props.actions || slots.actions);\n const showFooter = computed(() => props.footer || slots.footer);\n const showCover = computed(() => props.cover || slots.cover);\n const showLoading = computed(() => props.loading || slots.loading);\n const showContent = computed(() => props.content || slots.content || props.default || slots.default);\n\n // 是否展示头部区域\n const isHeaderRender = computed(\n () =>\n showHeader.value ||\n showTitle.value ||\n showSubtitle.value ||\n showDescription.value ||\n showAvatar.value ||\n (showStatus.value && isPoster2.value) ||\n (showActions.value && !isPoster2.value),\n );\n\n // 是否展示底部区域\n const isFooterRender = computed(() => showFooter.value || (showActions.value && isPoster2.value));\n\n // 头部区域渲染逻辑\n const renderHeader = () => {\n if (showHeader.value) return <div class={headerCls.value}>{renderTNodeJSX('header')}</div>;\n return (\n <div class={headerCls.value}>\n <div class={headerWrapperCls.value}>\n {showAvatar.value && <div class={headerAvatarCls.value}>{renderTNodeJSX('avatar')}</div>}\n <div>\n {showTitle.value && <span class={headerTitleCls.value}>{renderTNodeJSX('title')}</span>}\n {showSubtitle.value && <span class={headerSubTitleCls.value}>{renderTNodeJSX('subtitle')}</span>}\n {showDescription.value && <p class={headerDescriptionCls.value}>{renderTNodeJSX('description')}</p>}\n </div>\n </div>\n {showActions.value && !isPoster2.value && <div class={actionsCls.value}>{renderTNodeJSX('actions')}</div>}\n {showStatus.value && <div class={actionsCls.value}>{renderTNodeJSX('status')}</div>}\n </div>\n );\n };\n\n // 封面区域渲染逻辑\n const renderCover = () => {\n const textCover = isString(props.cover);\n return <div class={coverCls.value}>{textCover ? <img src={props.cover}></img> : renderTNodeJSX('cover')}</div>;\n };\n\n return () => {\n const content = (\n <div class={baseCls.value}>\n {isHeaderRender.value ? renderHeader() : null}\n {showCover.value ? renderCover() : null}\n {showContent.value && (\n <div class={bodyCls.value}>{renderTNodeJSX('default') || renderTNodeJSX('content')}</div>\n )}\n {isFooterRender.value && (\n <div class={footerCls.value}>\n <div class={footerWrapperCls.value}>{renderTNodeJSX('footer')}</div>\n {showActions.value && isPoster2.value && <div class={actionsCls.value}>{renderTNodeJSX('actions')}</div>}\n </div>\n )}\n </div>\n );\n\n if (showLoading.value) {\n return renderTNodeJSX('loading') || <TLoading>{content}</TLoading>;\n }\n return content;\n };\n },\n});\n"],"names":["_isVNode","name","props","setup","_createVNode","isString","TLoading"],"mappings":"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"}