descriptions-cell.mjs 3.0 KB

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