@fesjs/fes-design
Version:
fes-design for PC
54 lines (49 loc) • 2.04 kB
JavaScript
import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, normalizeStyle } from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import { useTheme } from '../_theme/useTheme';
import { cardProps } from './props';
const prefixCls = getPrefixCls('card');
var script = defineComponent({
name: 'FCard',
props: cardProps,
setup(props) {
useTheme();
const classes = computed(() => ({
[prefixCls]: true,
[`${prefixCls}-size--${props.size}`]: props.size,
[`${prefixCls}-shadow--${props.shadow}`]: props.shadow,
'is-bordered': props.bordered
}));
const headerClasses = computed(() => ({
[`${prefixCls}__header`]: true,
'no-divider': !props.divider
}));
const footerClasses = computed(() => ({
[`${prefixCls}__footer`]: true,
'no-divider': !props.divider
}));
return {
prefixCls,
classes,
headerClasses,
footerClasses
};
}
});
function render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.classes)
}, [_ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.headerClasses)
}, [renderSlot(_ctx.$slots, "header", {}, () => [createTextVNode(toDisplayString(_ctx.header), 1 /* TEXT */)])], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
class: normalizeClass(`${_ctx.prefixCls}__body`),
style: normalizeStyle(_ctx.bodyStyle)
}, [renderSlot(_ctx.$slots, "default")], 6 /* CLASS, STYLE */), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(_ctx.footerClasses)
}, [renderSlot(_ctx.$slots, "footer")], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
}
script.render = render;
script.__file = "components/card/card.vue";
export { script as default };