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

import { defineComponent, useSlots, computed, ref, createBlock, openBlock, unref, normalizeClass, withCtx, renderSlot, createCommentVNode, createElementBlock, createElementVNode, resolveDynamicComponent, createVNode, normalizeStyle, createTextVNode, toDisplayString } from "vue";
import { useElementBounding } from "@vueuse/core";
import { cardProps } from "./types.mjs";
import { OFigure } from "../figure/index.mjs";
import HtmlTag from "../_components/html-tag.mjs";
import ClientOnly from "../_components/client-only.mjs";
import { isUndefined, isString } from "../_utils/is.mjs";
import { mergeClass } from "../_utils/vue-utils.mjs";
import { OPopover } from "../popover/index.mjs";
import { useElementOverflown } from "../hooks/use-element-overflown.mjs";
import "../hooks/use-theme.mjs";
import "../_utils/global.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 showFadeOut = computed(() => {
      return props.textOverflow === "fade";
    });
    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) && showFadeOut.value;
    });
    const hasCover = computed(() => {
      return Boolean(slots.cover || props.cover);
    });
    const hasTitleIcon = computed(() => {
      return props.titleIcon;
    });
    const cardRef = ref();
    const titleRef = ref();
    const detailRef = ref();
    const isTitleOverflow = useElementOverflown(titleRef);
    const isDetailOverflow = useElementOverflown(detailRef);
    const { width: cardWidth } = useElementBounding(cardRef);
    const popoverStyle = computed(() => ({
      "--card-popover-width": cardWidth.value ? `${cardWidth.value * 0.8}px` : void 0
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(HtmlTag), {
        ref_key: "cardRef",
        ref: cardRef,
        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,
            "o-card-cover": hasCover.value
          }
        ]]),
        tabindex: "-1"
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "card", {}, () => [
            createCommentVNode(" cover "),
            hasCover.value ? (openBlock(), createElementBlock(
              "div",
              {
                key: 0,
                class: normalizeClass([
                  "o-card-cover",
                  unref(mergeClass)(
                    `o-card-cover-${props.layout}`,
                    {
                      "o-card-only-cover": !hasMain.value
                    },
                    props.coverClass
                  )
                ])
              },
              [
                renderSlot(_ctx.$slots, "cover", {}, () => [
                  props.cover ? (openBlock(), createBlock(unref(OFigure), {
                    key: 0,
                    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"])) : createCommentVNode("v-if", true)
                ])
              ],
              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,
                              ref_key: "titleRef",
                              ref: titleRef,
                              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),
                          createVNode(unref(ClientOnly), null, {
                            default: withCtx(() => [
                              unref(isTitleOverflow) && props.showOverflowTooltip ? (openBlock(), createBlock(unref(OPopover), {
                                key: 0,
                                offset: 12,
                                target: titleRef.value,
                                "adjust-min-width": false,
                                "adjust-width": false,
                                position: "bottom",
                                class: "o-card-popover",
                                style: normalizeStyle(popoverStyle.value)
                              }, {
                                default: withCtx(() => [
                                  createTextVNode(
                                    toDisplayString(props.title),
                                    1
                                    /* TEXT */
                                  )
                                ]),
                                _: 1
                                /* STABLE */
                              }, 8, ["target", "style"])) : createCommentVNode("v-if", true)
                            ]),
                            _: 1
                            /* STABLE */
                          })
                        ])
                      ],
                      2
                      /* CLASS */
                    )) : createCommentVNode("v-if", true),
                    createCommentVNode(" content "),
                    createElementVNode("div", _hoisted_5, [
                      props.detail || !!slots.detail ? (openBlock(), createElementBlock(
                        "div",
                        {
                          key: 0,
                          ref_key: "detailRef",
                          ref: detailRef,
                          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),
                      createVNode(unref(ClientOnly), null, {
                        default: withCtx(() => [
                          unref(isDetailOverflow) && props.showOverflowTooltip ? (openBlock(), createBlock(unref(OPopover), {
                            key: 0,
                            offset: 12,
                            target: detailRef.value,
                            "adjust-min-width": false,
                            "adjust-width": false,
                            position: "bottom",
                            class: "o-card-popover",
                            style: normalizeStyle(popoverStyle.value)
                          }, {
                            default: withCtx(() => [
                              createTextVNode(
                                toDisplayString(props.detail),
                                1
                                /* TEXT */
                              )
                            ]),
                            _: 1
                            /* STABLE */
                          }, 8, ["target", "style"])) : createCommentVNode("v-if", true)
                        ]),
                        _: 1
                        /* STABLE */
                      }),
                      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
};