@opensig/opendesign/es/card/OCard.vue.mjs

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

import { defineComponent, useSlots, computed, createBlock, openBlock, unref, normalizeClass, withCtx, renderSlot, createCommentVNode, createElementBlock, createVNode, createElementVNode, resolveDynamicComponent, normalizeStyle, createTextVNode, toDisplayString } from "vue";
import { cardProps } from "./types.mjs";
import { OFigure } from "../figure/index.mjs";
import HtmlTag from "../_components/html-tag.mjs";
import { isUndefined, isString } from "../_utils/is.mjs";
const _hoisted_1 = {
  key: 1,
  class: "o-card-main"
};
const _hoisted_2 = {
  key: 0,
  class: "o-card-icon"
};
const _hoisted_3 = { class: "o-card-main-wrap" };
const _hoisted_4 = {
  key: 0,
  class: "o-card-title-icon"
};
const _hoisted_5 = { class: "o-card-content" };
const _hoisted_6 = {
  key: 0,
  class: "o-card-footer"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OCard",
  props: cardProps,
  setup(__props) {
    const props = __props;
    const slots = useSlots();
    const hasMain = computed(
      () => slots.main || props.icon || slots.icon || props.title || slots.title || slots.header || props.detail || slots.detail || slots.default
    );
    const isTitleLimited = computed(() => {
      return !isUndefined(props.titleMaxRow);
    });
    const isDetailLimited = computed(() => {
      return !isUndefined(props.detailMaxRow);
    });
    const hasTitleIcon = computed(() => {
      return props.titleIcon;
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(HtmlTag), {
        tag: !!props.href ? "a" : "div",
        href: props.href,
        class: normalizeClass(["o-card", [
          `o-card-layout-${props.layout}`,
          {
            "o-card-hoverable": props.hoverable || !!props.href,
            "o-card-cursor-pointer": props.cursor === "pointer" || !!props.href,
            "o-card-no-responsive": props.noResponsive
          }
        ]]),
        tabindex: "-1"
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "card", {}, () => [
            createCommentVNode(" cover "),
            !!slots.cover || props.cover ? (openBlock(), createElementBlock(
              "div",
              {
                key: 0,
                class: normalizeClass(["o-card-cover", [
                  props.coverClass,
                  `o-card-cover-${props.layout}`,
                  {
                    "o-card-only-cover": !hasMain.value
                  }
                ]])
              },
              [
                renderSlot(_ctx.$slots, "cover", {}, () => [
                  createVNode(unref(OFigure), {
                    ratio: props.coverRatio,
                    class: normalizeClass(["o-card-cover-img", { "is-full": !props.coverRatio }]),
                    src: props.cover,
                    fit: props.coverFit
                  }, null, 8, ["ratio", "src", "fit", "class"])
                ])
              ],
              2
              /* CLASS */
            )) : createCommentVNode("v-if", true),
            !!hasMain.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
              renderSlot(_ctx.$slots, "main", {}, () => [
                createCommentVNode(" icon "),
                props.icon || !!slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [
                  renderSlot(_ctx.$slots, "icon", {}, () => [
                    unref(isString)(props.icon) ? (openBlock(), createBlock(unref(OFigure), {
                      key: 0,
                      src: props.icon
                    }, null, 8, ["src"])) : (openBlock(), createBlock(resolveDynamicComponent(props.icon), { key: 1 }))
                  ])
                ])) : createCommentVNode("v-if", true),
                createElementVNode("div", _hoisted_3, [
                  createElementVNode("div", null, [
                    createCommentVNode(" header "),
                    props.title || !!slots.header || !!slots.title ? (openBlock(), createElementBlock(
                      "div",
                      {
                        key: 0,
                        class: normalizeClass({
                          "o-card-header": true,
                          "o-card-header-with-icon": hasTitleIcon.value
                        })
                      },
                      [
                        renderSlot(_ctx.$slots, "header", {}, () => [
                          hasTitleIcon.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
                            unref(isString)(props.titleIcon) ? (openBlock(), createBlock(unref(OFigure), {
                              key: 0,
                              src: props.titleIcon,
                              class: "o-card-title-icon-figure"
                            }, null, 8, ["src"])) : (openBlock(), createBlock(resolveDynamicComponent(props.titleIcon), { key: 1 }))
                          ])) : createCommentVNode("v-if", true),
                          props.title ? (openBlock(), createElementBlock(
                            "div",
                            {
                              key: 1,
                              class: normalizeClass(["o-card-title", { "o-card-title-limited": isTitleLimited.value }]),
                              style: normalizeStyle({ "--card-title-row": props.titleRow, "--card-title-max-row": props.titleMaxRow })
                            },
                            [
                              renderSlot(_ctx.$slots, "title", {}, () => [
                                createTextVNode(
                                  toDisplayString(props.title),
                                  1
                                  /* TEXT */
                                )
                              ])
                            ],
                            6
                            /* CLASS, STYLE */
                          )) : createCommentVNode("v-if", true)
                        ])
                      ],
                      2
                      /* CLASS */
                    )) : createCommentVNode("v-if", true),
                    createCommentVNode(" content "),
                    createElementVNode("div", _hoisted_5, [
                      props.detail || !!slots.detail ? (openBlock(), createElementBlock(
                        "div",
                        {
                          key: 0,
                          class: normalizeClass(["o-card-detail", { "o-card-detail-limited": isDetailLimited.value }]),
                          style: normalizeStyle({ "--card-detail-row": props.detailRow, "--card-detail-max-row": props.detailMaxRow })
                        },
                        [
                          renderSlot(_ctx.$slots, "detail", {}, () => [
                            createTextVNode(
                              toDisplayString(props.detail),
                              1
                              /* TEXT */
                            )
                          ])
                        ],
                        6
                        /* CLASS, STYLE */
                      )) : createCommentVNode("v-if", true),
                      renderSlot(_ctx.$slots, "default")
                    ])
                  ]),
                  createCommentVNode(" footer "),
                  !!slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [
                    renderSlot(_ctx.$slots, "footer")
                  ])) : createCommentVNode("v-if", true)
                ])
              ])
            ])) : createCommentVNode("v-if", true)
          ])
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["tag", "href", "class"]);
    };
  }
});
export {
  _sfc_main as default
};