maille
Version:
Component library for MithrilJS
67 lines (66 loc) • 2.25 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const mithril_1 = __importDefault(require("mithril")); // +standalone
class Card {
view(vnode) {
const classes = new Set(["maille", "maille-card"]);
// Add styling classes
if (vnode.attrs.rounded) {
classes.add("rounded");
}
if (vnode.attrs.bordered) {
classes.add("bordered");
}
if (vnode.attrs.size) {
classes.add(`size-${vnode.attrs.size}`);
}
if (vnode.attrs.shadowed) {
classes.add("shadowed");
}
if (vnode.attrs.shadowedOnHover) {
classes.add("shadowed-on-hover");
}
// Add classnames from the vnode if present
if (vnode.attrs.className) {
vnode.attrs.className.split(" ").forEach(c => classes.add(c));
}
const className = [...classes].join(" ");
// Build card component
return mithril_1.default("div", { className }, [
this.buildHeader(vnode),
this.buildImage(vnode),
mithril_1.default(".maille-card-content", vnode.children),
this.buildFooter(vnode),
]);
}
buildFooter(vnode) {
if (!vnode.attrs.footer) {
return null;
}
return mithril_1.default(".maile-card-footer", vnode.attrs.footer);
}
buildHeader(vnode) {
if (!vnode.attrs.header) {
return null;
}
return mithril_1.default(".maile-card-header", vnode.attrs.header);
}
buildImage(vnode) {
if (!vnode || !vnode.attrs || !vnode.attrs.image) {
return null;
}
const image = vnode.attrs.image;
const imageClasses = [];
if (image.fullWidth) {
imageClasses.push("full-width");
}
const className = imageClasses.join(" ");
return mithril_1.default(".maille-card-image-container", [
mithril_1.default("img.maille-card-image-img", { className, src: image.src }),
]);
}
}
exports.default = Card;