@opensig/opendesign
Version:
<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>
181 lines (180 loc) • 7.88 kB
JavaScript
;
const vue = require("vue");
const types = require("./types.js");
const index = require("../figure/index.js");
const htmlTag = require("../_components/html-tag.js");
const is = require("../_utils/is.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 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);
});
const hasTitleIcon = vue.computed(() => {
return props.titleIcon;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(htmlTag), {
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
}
]]),
tabindex: "-1"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "card", {}, () => [
vue.createCommentVNode(" cover "),
!!slots.cover || props.cover ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-card-cover", [
props.coverClass,
`o-card-cover-${props.layout}`,
{
"o-card-only-cover": !hasMain.value
}
]])
},
[
vue.renderSlot(_ctx.$slots, "cover", {}, () => [
vue.createVNode(vue.unref(index.OFigure), {
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"])
])
],
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,
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)
])
],
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,
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.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;