taro-ui-vue3/lib/card/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 {Image, Text, View} from "@tarojs/components";
const AtCard = defineComponent({
  name: "AtCard",
  props: {
    note: {
      type: String,
      default: ""
    },
    isFull: Boolean,
    thumb: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    extra: {
      type: String,
      default: ""
    },
    extraStyle: {
      type: Object,
      default: () => ({})
    },
    icon: Object,
    renderIcon: Object,
    onClick: Function
  },
  setup(props, {attrs, slots}) {
    const rootClasses = computed(() => ({
      "at-card": true,
      "at-card--full": props.isFull
    }));
    const iconClasses = computed(() => {
      var _a;
      return {
        [`at-icon-${(_a = props.icon) == null ? void 0 : _a.value}`]: Boolean(props.icon && props.icon.value),
        "at-card__header-icon": true,
        "at-icon": true
      };
    });
    const iconStyle = computed(() => ({
      color: props.icon && props.icon.color || "",
      fontSize: props.icon && `${props.icon.size}px` || ""
    }));
    function handleClick(args) {
      if (typeof props.onClick === "function") {
        props.onClick(args);
      }
    }
    return () => h(View, mergeProps(attrs, {
      class: rootClasses.value,
      onTap: handleClick
    }), {
      default: () => [
        h(View, {
          class: "at-card__header"
        }, {
          default: () => [
            props.thumb && h(View, {
              class: "at-card__header-thumb"
            }, {
              default: () => [
                h(Image, {
                  class: "at-card__header-thumb-info",
                  mode: "scaleToFill",
                  src: props.thumb
                })
              ]
            }),
            !props.thumb && props.renderIcon && h(props.renderIcon),
            !props.thumb && props.icon && props.icon.value && h(Text, {
              class: iconClasses.value,
              style: iconStyle.value
            }),
            props.title && h(Text, {
              class: "at-card__header-title"
            }, {default: () => props.title}),
            props.extra && h(Text, {
              class: "at-card__header-extra",
              style: __objSpread({}, props.extraStyle)
            }, {default: () => props.extra})
          ]
        }),
        h(View, {
          class: "at-card__content"
        }, {
          default: () => [
            h(View, {
              class: "at-card__content-info"
            }, {default: () => {
              var _a;
              return (_a = slots.default) == null ? void 0 : _a.call(slots);
            }}),
            props.note && h(View, {
              class: "at-card__content-note"
            }, {default: () => props.note})
          ]
        })
      ]
    });
  }
});
var card_default = AtCard;
export {
  card_default as default
};