Cell.mjs 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import { createVNode as _createVNode } from "vue";
  2. import { defineComponent } from "vue";
  3. import { isDef, extend, truthProp, unknownProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
  4. import { useRoute, routeProps } from "../composables/use-route.mjs";
  5. import { Icon } from "../icon/index.mjs";
  6. const [name, bem] = createNamespace("cell");
  7. const cellSharedProps = {
  8. tag: makeStringProp("div"),
  9. icon: String,
  10. size: String,
  11. title: numericProp,
  12. value: numericProp,
  13. label: numericProp,
  14. center: Boolean,
  15. isLink: Boolean,
  16. border: truthProp,
  17. required: Boolean,
  18. iconPrefix: String,
  19. valueClass: unknownProp,
  20. labelClass: unknownProp,
  21. titleClass: unknownProp,
  22. titleStyle: null,
  23. arrowDirection: String,
  24. clickable: {
  25. type: Boolean,
  26. default: null
  27. }
  28. };
  29. const cellProps = extend({}, cellSharedProps, routeProps);
  30. var stdin_default = defineComponent({
  31. name,
  32. props: cellProps,
  33. setup(props, {
  34. slots
  35. }) {
  36. const route = useRoute();
  37. const renderLabel = () => {
  38. const showLabel = slots.label || isDef(props.label);
  39. if (showLabel) {
  40. return _createVNode("div", {
  41. "class": [bem("label"), props.labelClass]
  42. }, [slots.label ? slots.label() : props.label]);
  43. }
  44. };
  45. const renderTitle = () => {
  46. var _a;
  47. if (slots.title || isDef(props.title)) {
  48. const titleSlot = (_a = slots.title) == null ? void 0 : _a.call(slots);
  49. if (Array.isArray(titleSlot) && titleSlot.length === 0) {
  50. return;
  51. }
  52. return _createVNode("div", {
  53. "class": [bem("title"), props.titleClass],
  54. "style": props.titleStyle
  55. }, [titleSlot || _createVNode("span", null, [props.title]), renderLabel()]);
  56. }
  57. };
  58. const renderValue = () => {
  59. const slot = slots.value || slots.default;
  60. const hasValue = slot || isDef(props.value);
  61. if (hasValue) {
  62. return _createVNode("div", {
  63. "class": [bem("value"), props.valueClass]
  64. }, [slot ? slot() : _createVNode("span", null, [props.value])]);
  65. }
  66. };
  67. const renderLeftIcon = () => {
  68. if (slots.icon) {
  69. return slots.icon();
  70. }
  71. if (props.icon) {
  72. return _createVNode(Icon, {
  73. "name": props.icon,
  74. "class": bem("left-icon"),
  75. "classPrefix": props.iconPrefix
  76. }, null);
  77. }
  78. };
  79. const renderRightIcon = () => {
  80. if (slots["right-icon"]) {
  81. return slots["right-icon"]();
  82. }
  83. if (props.isLink) {
  84. const name2 = props.arrowDirection && props.arrowDirection !== "right" ? `arrow-${props.arrowDirection}` : "arrow";
  85. return _createVNode(Icon, {
  86. "name": name2,
  87. "class": bem("right-icon")
  88. }, null);
  89. }
  90. };
  91. return () => {
  92. var _a;
  93. const {
  94. tag,
  95. size,
  96. center,
  97. border,
  98. isLink,
  99. required
  100. } = props;
  101. const clickable = (_a = props.clickable) != null ? _a : isLink;
  102. const classes = {
  103. center,
  104. required,
  105. clickable,
  106. borderless: !border
  107. };
  108. if (size) {
  109. classes[size] = !!size;
  110. }
  111. return _createVNode(tag, {
  112. "class": bem(classes),
  113. "role": clickable ? "button" : void 0,
  114. "tabindex": clickable ? 0 : void 0,
  115. "onClick": route
  116. }, {
  117. default: () => {
  118. var _a2;
  119. return [renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), (_a2 = slots.extra) == null ? void 0 : _a2.call(slots)];
  120. }
  121. });
  122. };
  123. }
  124. });
  125. export {
  126. cellProps,
  127. cellSharedProps,
  128. stdin_default as default
  129. };