taro-ui-vue3/lib/grid/index.js

Taro UI Rewritten in Vue 3.0

var __defProp = Object.defineProperty;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
var __objSpread = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import {h, defineComponent, computed, mergeProps} from "vue";
import _chunk from "lodash-es/chunk";
import {Image, View, Text} from "@tarojs/components";
import {mergeStyle} from "../utils/common";
const AtGrid = defineComponent({
  name: "AtGrid",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    columnNum: {
      type: Number,
      default: 3
    },
    hasBorder: {
      type: Boolean,
      default: true
    },
    mode: {
      type: String,
      default: "square"
    },
    onClick: {
      type: Function,
      default: () => () => {
      }
    }
  },
  setup(props, {attrs}) {
    const gridGroup = computed(() => _chunk(props.data, props.columnNum));
    const bodyClass = computed(() => ({
      "at-grid-item": true,
      "at-grid__flex-item": true,
      [`at-grid-item--${props.mode}`]: true,
      "at-grid-item--no-border": !props.hasBorder
    }));
    const gridItemClass = computed(() => (index) => __objSpread(__objSpread({}, bodyClass.value), {
      "at-grid-item--last": index === props.columnNum - 1
    }));
    const flexStyle = computed(() => ({
      flex: `0 0 ${100 / props.columnNum}%`
    }));
    const iconInfoClass = computed(() => (childItem) => {
      var _a, _b, _c, _d, _e, _f;
      return {
        [`${((_a = childItem.iconInfo) == null ? void 0 : _a.prefixClass) || "at-icon"}`]: true,
        [`${((_b = childItem.iconInfo) == null ? void 0 : _b.prefixClass) || "at-icon"}-${(_c = childItem.iconInfo) == null ? void 0 : _c.value}`]: Boolean((_d = childItem.iconInfo) == null ? void 0 : _d.value),
        [`${(_e = childItem.iconInfo) == null ? void 0 : _e.className}`]: Boolean((_f = childItem.iconInfo) == null ? void 0 : _f.className)
      };
    });
    const iconInfoStyle = computed(() => (childItem) => {
      var _a, _b;
      return mergeStyle({
        color: (_a = childItem.iconInfo) == null ? void 0 : _a.color,
        fontSize: `${((_b = childItem.iconInfo) == null ? void 0 : _b.size) || 24}px`
      }, childItem.iconInfo.customStyle);
    });
    function handleClick(item, index, row, event) {
      if (typeof props.onClick === "function") {
        const clickIndex = row * props.columnNum + index;
        props.onClick(item, clickIndex, event);
      }
    }
    return () => {
      if (Array.isArray(props.data) && props.data.length === 0) {
        return null;
      }
      return h(View, mergeProps(attrs, {
        class: "at-grid"
      }), {
        default: () => gridGroup.value.map((item, i) => h(View, {
          class: "at-grid__flex",
          key: `at-grid-group-${i}`
        }, {
          default: () => item.map((childItem, index) => h(View, {
            key: `at-grid-item-${index}`,
            class: gridItemClass.value(index),
            style: flexStyle.value,
            onTap: handleClick.bind(this, childItem, index, i)
          }, {
            default: () => [
              h(View, {
                class: "at-grid-item__content"
              }, {
                default: () => [
                  h(View, {
                    class: "at-grid-item__content-inner"
                  }, {
                    default: () => [
                      h(View, {
                        class: "content-inner__icon"
                      }, {
                        default: () => [
                          childItem.image && h(Image, {
                            class: "content-inner__img",
                            mode: "scaleToFill",
                            src: childItem.image
                          }),
                          childItem.iconInfo && !childItem.image && h(Text, {
                            class: iconInfoClass.value(childItem),
                            style: iconInfoStyle.value(childItem)
                          })
                        ]
                      }),
                      h(Text, {
                        class: "content-inner__text"
                      }, {default: () => [childItem.value]})
                    ]
                  })
                ]
              })
            ]
          }))
        }))
      });
    };
  }
});
var grid_default = AtGrid;
export {
  grid_default as default
};