Permalink
Browse files

feat(card): add card-body functional component & card-img fixes (#843)

* feat(card-img): add img-fluid class and img-bottom ability

* fix(card-img): reduce repetitive code

* fix(card): keep img from rendering when no img

* refactor(card): remove difficult ternaries

* feat(card): add body tag, remove img slot

* feat(card-body): add card-body FC

* fix: add card-body to lib export and fix some docs

* [meta.json] removed unused slot names

* fix(card): update to bg-variant & border-variant

* fix(card): doc fixes for new props

* chore(docs): better markup formatting

* fix(docs): bad syntax + better formatting

* fix(docs): card doc fmt

* fix(docs): more fmt

* fix(docs): blockquote ex on card

* Card-body custom class assignment test

* fix(test): use helpers and ref on card test
  • Loading branch information...
alexsasharegan committed Aug 15, 2017
1 parent 2ed7470 commit f88ab23edcf65a761be3f07c553927eab92ae162

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -14,14 +14,6 @@
{
"name": "footer",
"description": "For custom rendering of footer content"
},
{
"name": "body",
"description": "Optional body section"
},
{
"name": "no-body",
"description": "Optional section without card-body wrapper"
}
]
}
@@ -0,0 +1,65 @@
import { mergeData, prefixPropName, copyProps } from "../utils";
import { assign } from "../utils/object";
import { cardMixin } from "../mixins";

export const props = assign({}, copyProps(cardMixin.props, prefixPropName.bind(null, "body")), {
title: {
type: String,
default: null
},
titleTag: {
type: String,
default: "h4"
},
subTitle: {
type: String,
default: null
},
subTitleTag: {
type: String,
default: "h6"
},
overlay: {
type: Boolean,
default: false
}
});

export default {
functional: true,
props,
render(h, { props, data, slots }) {
let cardBodyChildren = [];
if (props.title) {
cardBodyChildren.push(
h(props.titleTag, {
staticClass: "card-title",
domProps: { innerHTML: props.title }
})
);
}
if (props.subTitle) {
cardBodyChildren.push(
h(props.subTitleTag, {
staticClass: "card-subtitle mb-2 text-muted",
domProps: { innerHTML: props.subTitle }
})
);
}
cardBodyChildren.push(slots().default);

return h(
props.bodyTag,
mergeData(data, {
staticClass: "card-body",
class: {
"card-img-overlay": props.overlay,
[`bg-${props.bodyBgVariant}`]: Boolean(props.bodyBgVariant),
[`border-${props.bodyBorderVariant}`]: Boolean(props.bodyBorderVariant),
[`text-${props.bodyTextVariant}`]: Boolean(props.bodyTextVariant)
}
}),
cardBodyChildren
);
}
};
@@ -1,46 +1,31 @@
import { mergeData } from "../utils";
import { mergeData, prefixPropName, copyProps } from "../utils";
import { assign } from "../utils/object";
import { cardMixin } from "../mixins";

export const props = {
export const props = assign({}, copyProps(cardMixin.props, prefixPropName.bind(null, "footer")), {
footer: {
type: String,
default: null
},
footerBordered: {
type: Boolean,
default: false
},
footerVariant: {
type: String,
default: null
},
footerTextVariant: {
type: String,
default: null
},
footerClass: {
type: [String, Object, Array],
default: null
},
footerTag: {
type: String,
default: "div"
}
};
});

export default {
functional: true,
props,
render(h, { props, data, slots }) {
const variantPrefix = props.footerBordered ? "border-" : "bg-";

return h(
props.footerTag,
mergeData(data, {
staticClass: "card-footer",
class: [
props.footerClass,
{
[variantPrefix + props.footerVariant]: Boolean(props.footerVariant),
[`bg-${props.footerBgVariant}`]: Boolean(props.footerBgVariant),
[`border-${props.footerBorderVariant}`]: Boolean(props.footerBorderVariant),
[`text-${props.footerTextVariant}`]: Boolean(props.footerTextVariant)
}
]
@@ -1,46 +1,31 @@
import { mergeData } from "../utils";
import { mergeData, prefixPropName, copyProps } from "../utils";
import { assign } from "../utils/object";
import { cardMixin } from "../mixins";

export const props = {
export const props = assign({}, copyProps(cardMixin.props, prefixPropName.bind(null, "header")), {
header: {
type: String,
default: null
},
headerBordered: {
type: Boolean,
default: false
},
headerVariant: {
type: String,
default: null
},
headerTextVariant: {
type: String,
default: null
},
headerClass: {
type: [String, Object, Array],
default: null
},
headerTag: {
type: String,
default: "div"
}
};
});

export default {
functional: true,
props,
render(h, { props, data, slots }) {
const variantPrefix = props.headerBordered ? "border-" : "bg-";

return h(
props.headerTag,
mergeData(data, {
staticClass: "card-header",
class: [
props.headerClass,
{
[variantPrefix + props.headerVariant]: Boolean(props.headerVariant),
[`bg-${props.headerBgVariant}`]: Boolean(props.headerBgVariant),
[`border-${props.headerBorderVariant}`]: Boolean(props.headerBorderVariant),
[`text-${props.headerTextVariant}`]: Boolean(props.headerTextVariant)
}
]
@@ -1,13 +1,26 @@
import { mergeData } from "../utils";

export const props = {
src: {
type: String,
default: null,
required: true
},
alt: {
type: String,
default: null
},
top: {
type: Boolean,
default: false
},
bottom: {
type: Boolean,
default: false
},
fluid: {
type: Boolean,
default: false
}
};

@@ -17,11 +30,18 @@ export default {
render(h, { props, data, slots }) {
let staticClass = "card-img";
if (props.top) {
staticClass = "card-img-top";
staticClass += "-top";
} else if (props.bottom) {
staticClass = "card-img-bottom";
staticClass += "-bottom";
}

return h("img", mergeData(data, { staticClass }));
return h(
"img",
mergeData(data, {
staticClass,
class: { "img-fluid": props.fluid },
attrs: { src: props.src, alt: props.alt }
})
);
}
};
Oops, something went wrong.

0 comments on commit f88ab23

Please sign in to comment.