Cell.mjs 3.4 KB

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