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