@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
154 lines (153 loc) • 5.03 kB
JavaScript
import { hasSlotContent } from "../../common/utils.js";
import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
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: false
},
/**
* 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 leftContentColumn = this.$slots.left ? "auto" : "";
const rightContentColumn = this.$slots.right ? "auto" : "";
const selectedContentColumn = this.$slots.selected ? "auto" : "";
return `
grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};
`;
},
hasSlotContent
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(resolveDynamicComponent($props.as), {
class: normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout"),
style: normalizeStyle($props.unstyled && $options.dynamicGridTemplateColumns())
}, {
default: withCtx(() => [
$options.hasSlotContent(_ctx.$slots.left) ? (openBlock(), createElementBlock("section", {
key: 0,
"data-qa": "dt-item-layout-left-wrapper",
class: normalizeClass([$props.leftClass, "d-item-layout__left"])
}, [
renderSlot(_ctx.$slots, "left")
], 2)) : createCommentVNode("", true),
createElementVNode("section", {
"data-qa": "dt-item-layout-content-wrapper",
class: normalizeClass([$props.contentClass, "d-item-layout__content"])
}, [
$options.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", {
key: 0,
"data-qa": "dt-item-layout-title-wrapper",
class: normalizeClass([$props.titleClass, "d-item-layout__title"])
}, [
renderSlot(_ctx.$slots, "default")
], 2)) : createCommentVNode("", true),
$options.hasSlotContent(_ctx.$slots.subtitle) ? (openBlock(), createElementBlock("div", {
key: 1,
"data-qa": "dt-item-layout-subtitle-wrapper",
class: normalizeClass([
$props.subtitleClass,
"d-item-layout--subtitle",
{ "d-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }
])
}, [
renderSlot(_ctx.$slots, "subtitle")
], 2)) : createCommentVNode("", true),
$options.hasSlotContent(_ctx.$slots.bottom) ? (openBlock(), createElementBlock("div", {
key: 2,
"data-qa": "dt-item-layout-bottom-wrapper",
class: normalizeClass([$props.bottomClass, "d-item-layout__bottom"])
}, [
renderSlot(_ctx.$slots, "bottom")
], 2)) : createCommentVNode("", true)
], 2),
$options.hasSlotContent(_ctx.$slots.right) ? (openBlock(), createElementBlock("section", {
key: 1,
"data-qa": "dt-item-layout-right-wrapper",
class: normalizeClass([$props.rightClass, "d-item-layout__right"])
}, [
renderSlot(_ctx.$slots, "right")
], 2)) : createCommentVNode("", true),
$options.hasSlotContent(_ctx.$slots.selected) ? (openBlock(), createElementBlock("section", {
key: 2,
"data-qa": "dt-item-layout-selected-wrapper",
class: normalizeClass([$props.selectedClass, "d-item-layout__selected"])
}, [
renderSlot(_ctx.$slots, "selected")
], 2)) : createCommentVNode("", true)
]),
_: 3
}, 8, ["class", "style"]);
}
const DtItemLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtItemLayout as default
};
//# sourceMappingURL=item_layout.vue.js.map