@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
152 lines (151 loc) • 4.21 kB
JavaScript
import { hasSlotContent as u } from "../../common/utils/index.js";
import { createBlock as r, openBlock as s, resolveDynamicComponent as m, normalizeStyle as y, normalizeClass as a, withCtx as c, createElementBlock as o, createCommentVNode as n, createElementVNode as C, renderSlot as d } from "vue";
import { _ as f } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const h = {
compatConfig: { MODE: 3 },
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 t = this.$slots.left ? "auto" : "", i = this.$slots.right ? "auto" : "", e = this.$slots.selected ? "auto" : "";
return `
grid-template-columns: ${t} 1fr ${i} ${e};
`;
},
hasSlotContent: u
}
};
function g(t, i, e, S, b, l) {
return s(), r(m(e.as), {
class: a(e.unstyled ? "d-item-layout--custom" : "d-item-layout"),
style: y(e.unstyled && l.dynamicGridTemplateColumns())
}, {
default: c(() => [
l.hasSlotContent(t.$slots.left) ? (s(), o("section", {
key: 0,
"data-qa": "dt-item-layout-left-wrapper",
class: a([e.leftClass, "d-item-layout__left"])
}, [
d(t.$slots, "left")
], 2)) : n("", !0),
C("section", {
"data-qa": "dt-item-layout-content-wrapper",
class: a([e.contentClass, "d-item-layout__content"])
}, [
l.hasSlotContent(t.$slots.default) ? (s(), o("div", {
key: 0,
"data-qa": "dt-item-layout-title-wrapper",
class: a([e.titleClass, "d-item-layout__title"])
}, [
d(t.$slots, "default")
], 2)) : n("", !0),
l.hasSlotContent(t.$slots.subtitle) ? (s(), o("div", {
key: 1,
"data-qa": "dt-item-layout-subtitle-wrapper",
class: a([
e.subtitleClass,
"d-item-layout--subtitle",
{ "d-item-layout--subtitle--with-title": l.hasSlotContent(t.$slots.default) }
])
}, [
d(t.$slots, "subtitle")
], 2)) : n("", !0),
l.hasSlotContent(t.$slots.bottom) ? (s(), o("div", {
key: 2,
"data-qa": "dt-item-layout-bottom-wrapper",
class: a([e.bottomClass, "d-item-layout__bottom"])
}, [
d(t.$slots, "bottom")
], 2)) : n("", !0)
], 2),
l.hasSlotContent(t.$slots.right) ? (s(), o("section", {
key: 1,
"data-qa": "dt-item-layout-right-wrapper",
class: a([e.rightClass, "d-item-layout__right"])
}, [
d(t.$slots, "right")
], 2)) : n("", !0),
l.hasSlotContent(t.$slots.selected) ? (s(), o("section", {
key: 2,
"data-qa": "dt-item-layout-selected-wrapper",
class: a([e.selectedClass, "d-item-layout__selected"])
}, [
d(t.$slots, "selected")
], 2)) : n("", !0)
]),
_: 3
}, 8, ["class", "style"]);
}
const _ = /* @__PURE__ */ f(h, [["render", g]]);
export {
_ as default
};
//# sourceMappingURL=item-layout.js.map