@opensig/opendesign
Version:
266 lines (265 loc) • 12.1 kB
JavaScript
;
const vue = require("vue");
const core = require("@vueuse/core");
const types = require("./types.js");
const index = require("../figure/index.js");
const htmlTag = require("../_components/html-tag.js");
const clientOnly = require("../_components/client-only.js");
const is = require("../_utils/is.js");
const vueUtils = require("../_utils/vue-utils.js");
const index$1 = require("../popover/index.js");
const useElementOverflown = require("../hooks/use-element-overflown.js");
require("../hooks/use-theme.js");
require("../_utils/global.js");
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__ */ vue.defineComponent({
__name: "OCard",
props: types.cardProps,
setup(__props) {
const props = __props;
const slots = vue.useSlots();
const showFadeOut = vue.computed(() => {
return props.textOverflow === "fade";
});
const hasMain = vue.computed(
() => slots.main || props.icon || slots.icon || props.title || slots.title || slots.header || props.detail || slots.detail || slots.default
);
const isTitleLimited = vue.computed(() => {
return !is.isUndefined(props.titleMaxRow);
});
const isDetailLimited = vue.computed(() => {
return !is.isUndefined(props.detailMaxRow) && showFadeOut.value;
});
const hasCover = vue.computed(() => {
return Boolean(slots.cover || props.cover);
});
const hasTitleIcon = vue.computed(() => {
return props.titleIcon;
});
const cardRef = vue.ref();
const titleRef = vue.ref();
const detailRef = vue.ref();
const isTitleOverflow = useElementOverflown.useElementOverflown(titleRef);
const isDetailOverflow = useElementOverflown.useElementOverflown(detailRef);
const { width: cardWidth } = core.useElementBounding(cardRef);
const popoverStyle = vue.computed(() => ({
"--card-popover-width": cardWidth.value ? `${cardWidth.value * 0.8}px` : void 0
}));
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(htmlTag), {
ref_key: "cardRef",
ref: cardRef,
tag: !!props.href ? "a" : "div",
href: props.href,
class: vue.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: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "card", {}, () => [
vue.createCommentVNode(" cover "),
hasCover.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass([
"o-card-cover",
vue.unref(vueUtils.mergeClass)(
`o-card-cover-${props.layout}`,
{
"o-card-only-cover": !hasMain.value
},
props.coverClass
)
])
},
[
vue.renderSlot(_ctx.$slots, "cover", {}, () => [
props.cover ? (vue.openBlock(), vue.createBlock(vue.unref(index.OFigure), {
key: 0,
ratio: props.coverRatio,
class: vue.normalizeClass(["o-card-cover-img", { "is-full": !props.coverRatio }]),
src: props.cover,
fit: props.coverFit
}, null, 8, ["ratio", "src", "fit", "class"])) : vue.createCommentVNode("v-if", true)
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
!!hasMain.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "main", {}, () => [
vue.createCommentVNode(" icon "),
props.icon || !!slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
vue.unref(is.isString)(props.icon) ? (vue.openBlock(), vue.createBlock(vue.unref(index.OFigure), {
key: 0,
src: props.icon
}, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon), { key: 1 }))
])
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("div", null, [
vue.createCommentVNode(" header "),
props.title || !!slots.header || !!slots.title ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass({
"o-card-header": true,
"o-card-header-with-icon": hasTitleIcon.value
})
},
[
vue.renderSlot(_ctx.$slots, "header", {}, () => [
hasTitleIcon.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
vue.unref(is.isString)(props.titleIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(index.OFigure), {
key: 0,
src: props.titleIcon,
class: "o-card-title-icon-figure"
}, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.titleIcon), { key: 1 }))
])) : vue.createCommentVNode("v-if", true),
props.title ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
ref_key: "titleRef",
ref: titleRef,
class: vue.normalizeClass(["o-card-title", { "o-card-title-limited": isTitleLimited.value }]),
style: vue.normalizeStyle({ "--card-title-row": props.titleRow, "--card-title-max-row": props.titleMaxRow })
},
[
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.title),
1
/* TEXT */
)
])
],
6
/* CLASS, STYLE */
)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(clientOnly), null, {
default: vue.withCtx(() => [
vue.unref(isTitleOverflow) && props.showOverflowTooltip ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.OPopover), {
key: 0,
offset: 12,
target: titleRef.value,
"adjust-min-width": false,
"adjust-width": false,
position: "bottom",
class: "o-card-popover",
style: vue.normalizeStyle(popoverStyle.value)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(props.title),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["target", "style"])) : vue.createCommentVNode("v-if", true)
]),
_: 1
/* STABLE */
})
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" content "),
vue.createElementVNode("div", _hoisted_5, [
props.detail || !!slots.detail ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
ref_key: "detailRef",
ref: detailRef,
class: vue.normalizeClass(["o-card-detail", { "o-card-detail-limited": isDetailLimited.value }]),
style: vue.normalizeStyle({ "--card-detail-row": props.detailRow, "--card-detail-max-row": props.detailMaxRow })
},
[
vue.renderSlot(_ctx.$slots, "detail", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.detail),
1
/* TEXT */
)
])
],
6
/* CLASS, STYLE */
)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(clientOnly), null, {
default: vue.withCtx(() => [
vue.unref(isDetailOverflow) && props.showOverflowTooltip ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.OPopover), {
key: 0,
offset: 12,
target: detailRef.value,
"adjust-min-width": false,
"adjust-width": false,
position: "bottom",
class: "o-card-popover",
style: vue.normalizeStyle(popoverStyle.value)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(props.detail),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["target", "style"])) : vue.createCommentVNode("v-if", true)
]),
_: 1
/* STABLE */
}),
vue.renderSlot(_ctx.$slots, "default")
])
]),
vue.createCommentVNode(" footer "),
!!slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
vue.renderSlot(_ctx.$slots, "footer")
])) : vue.createCommentVNode("v-if", true)
])
])
])) : vue.createCommentVNode("v-if", true)
])
]),
_: 3
/* FORWARDED */
}, 8, ["tag", "href", "class"]);
};
}
});
module.exports = _sfc_main;