13432f894bedcb0113a1a75003505c14cb403a202bf8002ecacadcc02dcb6e235b2d43fb58fab6c980585ea84bb30289f3e9825386a76be13289f2c7fe15c4 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import { defineComponent, inject, withDirectives, h } from 'vue';
  2. import { isNil } from 'lodash-unified';
  3. import { descriptionsKey } from './token.mjs';
  4. import { getNormalizedProps } from '../../../utils/vue/vnode.mjs';
  5. import { addUnit } from '../../../utils/dom/style.mjs';
  6. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  7. var ElDescriptionsCell = defineComponent({
  8. name: "ElDescriptionsCell",
  9. props: {
  10. cell: {
  11. type: Object
  12. },
  13. tag: {
  14. type: String,
  15. default: "td"
  16. },
  17. type: {
  18. type: String
  19. }
  20. },
  21. setup() {
  22. const descriptions = inject(descriptionsKey, {});
  23. return {
  24. descriptions
  25. };
  26. },
  27. render() {
  28. var _a;
  29. const item = getNormalizedProps(this.cell);
  30. const directives = (((_a = this.cell) == null ? void 0 : _a.dirs) || []).map((dire) => {
  31. const { dir, arg, modifiers, value } = dire;
  32. return [dir, value, arg, modifiers];
  33. });
  34. const { border, direction } = this.descriptions;
  35. const isVertical = direction === "vertical";
  36. const renderLabel = () => {
  37. var _a2, _b, _c;
  38. return ((_c = (_b = (_a2 = this.cell) == null ? void 0 : _a2.children) == null ? void 0 : _b.label) == null ? void 0 : _c.call(_b)) || item.label;
  39. };
  40. const renderContent = () => {
  41. var _a2, _b, _c;
  42. return (_c = (_b = (_a2 = this.cell) == null ? void 0 : _a2.children) == null ? void 0 : _b.default) == null ? void 0 : _c.call(_b);
  43. };
  44. const span = item.span;
  45. const rowspan = item.rowspan;
  46. const align = item.align ? `is-${item.align}` : "";
  47. const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align;
  48. const className = item.className;
  49. const labelClassName = item.labelClassName;
  50. const width = this.type === "label" ? item.labelWidth || this.descriptions.labelWidth || item.width : item.width;
  51. const style = {
  52. width: addUnit(width),
  53. minWidth: addUnit(item.minWidth)
  54. };
  55. const ns = useNamespace("descriptions");
  56. switch (this.type) {
  57. case "label":
  58. return withDirectives(h(this.tag, {
  59. style,
  60. class: [
  61. ns.e("cell"),
  62. ns.e("label"),
  63. ns.is("bordered-label", border),
  64. ns.is("vertical-label", isVertical),
  65. labelAlign,
  66. labelClassName
  67. ],
  68. colSpan: isVertical ? span : 1,
  69. rowspan: isVertical ? 1 : rowspan
  70. }, renderLabel()), directives);
  71. case "content":
  72. return withDirectives(h(this.tag, {
  73. style,
  74. class: [
  75. ns.e("cell"),
  76. ns.e("content"),
  77. ns.is("bordered-content", border),
  78. ns.is("vertical-content", isVertical),
  79. align,
  80. className
  81. ],
  82. colSpan: isVertical ? span : span * 2 - 1,
  83. rowspan: isVertical ? rowspan * 2 - 1 : rowspan
  84. }, renderContent()), directives);
  85. default: {
  86. const label = renderLabel();
  87. const labelStyle = {};
  88. const width2 = addUnit(item.labelWidth || this.descriptions.labelWidth);
  89. if (width2) {
  90. labelStyle.width = width2;
  91. labelStyle.display = "inline-block";
  92. }
  93. return withDirectives(h("td", {
  94. style,
  95. class: [ns.e("cell"), align],
  96. colSpan: span,
  97. rowspan
  98. }, [
  99. !isNil(label) ? h("span", {
  100. style: labelStyle,
  101. class: [ns.e("label"), labelClassName]
  102. }, label) : void 0,
  103. h("span", {
  104. class: [ns.e("content"), className]
  105. }, renderContent())
  106. ]), directives);
  107. }
  108. }
  109. }
  110. });
  111. export { ElDescriptionsCell as default };
  112. //# sourceMappingURL=descriptions-cell.mjs.map