@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
95 lines (94 loc) • 3.17 kB
JavaScript
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const l = {
name: "DtItemLayout",
props: {
/**
* Set this prop to render layout as a specific HTML element.
*/
as: {
type: String,
default: "div"
},
/**
* Set this prop to remove the default styling.
* @values true, false
*/
unstyled: {
type: Boolean,
default: !1
},
/**
* Set the class for the left section.
*/
leftClass: {
type: String,
default: ""
},
/**
* Set the class for the content section.
*/
contentClass: {
type: String,
default: ""
},
/**
* Set the class for the title section.
*/
titleClass: {
type: String,
default: ""
},
/**
* Set the class for the subtitle section.
*/
subtitleClass: {
type: String,
default: ""
},
/**
* Set the class for the bottom section.
*/
bottomClass: {
type: String,
default: ""
},
/**
* Set the class for the right section.
*/
rightClass: {
type: String,
default: ""
},
/**
* Set the class for the selected section.
*/
selectedClass: {
type: String,
default: ""
}
},
methods: {
/**
* Generate dynamic grid template columns
*/
dynamicGridTemplateColumns() {
const s = this.$slots.left ? "auto" : "", t = this.$slots.right ? "auto" : "", e = this.$slots.selected ? "auto" : "";
return `
grid-template-columns: ${s} 1fr ${t} ${e};
`;
}
}
};
var o = function() {
var t = this, e = t._self._c;
return e(t.as, { tag: "component", class: t.unstyled ? "d-item-layout--custom" : "d-item-layout", style: t.unstyled && t.dynamicGridTemplateColumns() }, [t.$slots.left ? e("section", { class: [t.leftClass, "d-item-layout__left"], attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [t._t("left")], 2) : t._e(), e("section", { class: [t.contentClass, "d-item-layout__content"], attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [t.$slots.default ? e("div", { class: [t.titleClass, "d-item-layout__title"], attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [t._t("default")], 2) : t._e(), t.$slots.subtitle ? e("div", { class: [t.subtitleClass, "d-item-layout__subtitle", { "d-item-layout__subtitle-with-title": t.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [t._t("subtitle")], 2) : t._e(), t.$slots.bottom ? e("div", { class: [t.bottomClass, "d-item-layout__bottom"], attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [t._t("bottom")], 2) : t._e()]), t.$slots.right ? e("section", { class: [t.rightClass, "d-item-layout__right"], attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [t._t("right")], 2) : t._e(), t.$slots.selected ? e("section", { class: [t.selectedClass, "d-item-layout__selected"], attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [t._t("selected")], 2) : t._e()]);
}, i = [], d = /* @__PURE__ */ a(
l,
o,
i
);
const r = d.exports;
export {
r as default
};
//# sourceMappingURL=item-layout.js.map