1 line
8.6 KiB
Plaintext
1 line
8.6 KiB
Plaintext
|
{"version":3,"file":"descriptions-cell.mjs","sources":["../../../../../../packages/components/descriptions/src/descriptions-cell.ts"],"sourcesContent":["import { defineComponent, h, inject, withDirectives } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { addUnit, getNormalizedProps } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { descriptionsKey } from './token'\n\nimport type { DirectiveArguments, PropType, VNode } from 'vue'\nimport type {\n IDescriptionsInject,\n IDescriptionsItemInject,\n} from './descriptions.type'\nimport type { DescriptionItemVNode } from './description-item'\n\nexport default defineComponent({\n name: 'ElDescriptionsCell',\n props: {\n cell: {\n type: Object as PropType<DescriptionItemVNode>,\n },\n tag: {\n type: String,\n default: 'td',\n },\n type: {\n type: String,\n },\n },\n setup() {\n const descriptions = inject(descriptionsKey, {} as IDescriptionsInject)\n\n return {\n descriptions,\n }\n },\n render() {\n const item = getNormalizedProps(\n this.cell as VNode\n ) as IDescriptionsItemInject\n\n const directives = (this.cell?.dirs || []).map((dire) => {\n const { dir, arg, modifiers, value } = dire\n return [dir, value, arg, modifiers]\n }) as DirectiveArguments\n\n const { border, direction } = this.descriptions\n const isVertical = direction === 'vertical'\n const renderLabel = () => this.cell?.children?.label?.() || item.label\n const renderContent = () => this.cell?.children?.default?.()\n const span = item.span\n const rowspan = item.rowspan\n const align = item.align ? `is-${item.align}` : ''\n const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align\n const className = item.className\n const labelClassName = item.labelClassName\n const width =\n this.type === 'label'\n ? item.labelWidth || this.descriptions.labelWidth || item.width\n : item.width\n\n const style = {\n width: addUnit(width),\n minWidth: addUnit(item.minWidth),\n }\n const ns = useNamespace('descriptions')\n\n switch (this.type) {\n case 'label':\n return withDirectives(\n h(\n this.tag,\n {\n style,\n class: [\n ns.e('cell'),\n ns.e('label'),\n ns.is('bordered-label', border),\n ns.is('vertical-label', isVertical),\n labelAlign,\n labelClassName,\n ],\n colSpan: isVertical ? span : 1,\n rowspan: isVertical ? 1 : rowspan,\n },\n renderLabel()\n ),\n directives\n )\n case 'content':\n return withDirectives(\n h(\n this.tag,\n {\n style,\n class: [\n ns.e('cell'),\n ns.e('content'),\n ns.is('bordered-content', border),\n ns.is('vertical-content', isVertical),\n align,\n className,\n ],\n colSpan: isVertical ? span : span * 2 - 1,\n rowspan: isVertical ? rowspan * 2 - 1 : rowspan,\n },\n renderContent()\n ),\n directives\n )\n default: {\n const label = renderLabel()\n const labelStyle: Record<string, any> = {}\n const width = addUnit(item.labelWidth || this.descriptions.labelWidth)\n if (width) {\n labelStyle.width = width\n labelStyle.display = 'inline-block'\n }\n return withDirectives(\n h(\n 'td',\n {\n style,\n class: [ns.e('cell'), align],\n colSpan: span,\n rowspan,\n },\n [\n !isNil(label)\n ? h(\n 'span',\n {\n style: labelStyle,\n c
|