GridItem.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default,
  21. gridItemProps: () => gridItemProps
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = require("vue");
  25. var import_vue2 = require("vue");
  26. var import_utils = require("../utils");
  27. var import_Grid = require("../grid/Grid");
  28. var import_use = require("@vant/use");
  29. var import_use_route = require("../composables/use-route");
  30. var import_icon = require("../icon");
  31. var import_badge = require("../badge");
  32. const [name, bem] = (0, import_utils.createNamespace)("grid-item");
  33. const gridItemProps = (0, import_utils.extend)({}, import_use_route.routeProps, {
  34. dot: Boolean,
  35. text: String,
  36. icon: String,
  37. badge: import_utils.numericProp,
  38. iconColor: String,
  39. iconPrefix: String,
  40. badgeProps: Object
  41. });
  42. var stdin_default = (0, import_vue2.defineComponent)({
  43. name,
  44. props: gridItemProps,
  45. setup(props, {
  46. slots
  47. }) {
  48. const {
  49. parent,
  50. index
  51. } = (0, import_use.useParent)(import_Grid.GRID_KEY);
  52. const route = (0, import_use_route.useRoute)();
  53. if (!parent) {
  54. if (process.env.NODE_ENV !== "production") {
  55. console.error("[Vant] <GridItem> must be a child component of <Grid>.");
  56. }
  57. return;
  58. }
  59. const rootStyle = (0, import_vue2.computed)(() => {
  60. const {
  61. square,
  62. gutter,
  63. columnNum
  64. } = parent.props;
  65. const percent = `${100 / +columnNum}%`;
  66. const style = {
  67. flexBasis: percent
  68. };
  69. if (square) {
  70. style.paddingTop = percent;
  71. } else if (gutter) {
  72. const gutterValue = (0, import_utils.addUnit)(gutter);
  73. style.paddingRight = gutterValue;
  74. if (index.value >= columnNum) {
  75. style.marginTop = gutterValue;
  76. }
  77. }
  78. return style;
  79. });
  80. const contentStyle = (0, import_vue2.computed)(() => {
  81. const {
  82. square,
  83. gutter
  84. } = parent.props;
  85. if (square && gutter) {
  86. const gutterValue = (0, import_utils.addUnit)(gutter);
  87. return {
  88. right: gutterValue,
  89. bottom: gutterValue,
  90. height: "auto"
  91. };
  92. }
  93. });
  94. const renderIcon = () => {
  95. if (slots.icon) {
  96. return (0, import_vue.createVNode)(import_badge.Badge, (0, import_vue.mergeProps)({
  97. "dot": props.dot,
  98. "content": props.badge
  99. }, props.badgeProps), {
  100. default: slots.icon
  101. });
  102. }
  103. if (props.icon) {
  104. return (0, import_vue.createVNode)(import_icon.Icon, {
  105. "dot": props.dot,
  106. "name": props.icon,
  107. "size": parent.props.iconSize,
  108. "badge": props.badge,
  109. "class": bem("icon"),
  110. "color": props.iconColor,
  111. "badgeProps": props.badgeProps,
  112. "classPrefix": props.iconPrefix
  113. }, null);
  114. }
  115. };
  116. const renderText = () => {
  117. if (slots.text) {
  118. return slots.text();
  119. }
  120. if (props.text) {
  121. return (0, import_vue.createVNode)("span", {
  122. "class": bem("text")
  123. }, [props.text]);
  124. }
  125. };
  126. const renderContent = () => {
  127. if (slots.default) {
  128. return slots.default();
  129. }
  130. return [renderIcon(), renderText()];
  131. };
  132. return () => {
  133. const {
  134. center,
  135. border,
  136. square,
  137. gutter,
  138. reverse,
  139. direction,
  140. clickable
  141. } = parent.props;
  142. const classes = [bem("content", [direction, {
  143. center,
  144. square,
  145. reverse,
  146. clickable,
  147. surround: border && gutter
  148. }]), {
  149. [import_utils.BORDER]: border
  150. }];
  151. return (0, import_vue.createVNode)("div", {
  152. "class": [bem({
  153. square
  154. })],
  155. "style": rootStyle.value
  156. }, [(0, import_vue.createVNode)("div", {
  157. "role": clickable ? "button" : void 0,
  158. "class": classes,
  159. "style": contentStyle.value,
  160. "tabindex": clickable ? 0 : void 0,
  161. "onClick": route
  162. }, [renderContent()])]);
  163. };
  164. }
  165. });