@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
154 lines (153 loc) • 5.21 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
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: common_utils.hasSlotContent
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.as), {
class: vue.normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout"),
style: vue.normalizeStyle($props.unstyled && $options.dynamicGridTemplateColumns())
}, {
default: vue.withCtx(() => [
$options.hasSlotContent(_ctx.$slots.left) ? (vue.openBlock(), vue.createElementBlock("section", {
key: 0,
"data-qa": "dt-item-layout-left-wrapper",
class: vue.normalizeClass([$props.leftClass, "d-item-layout__left"])
}, [
vue.renderSlot(_ctx.$slots, "left")
], 2)) : vue.createCommentVNode("", true),
vue.createElementVNode("section", {
"data-qa": "dt-item-layout-content-wrapper",
class: vue.normalizeClass([$props.contentClass, "d-item-layout__content"])
}, [
$options.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
"data-qa": "dt-item-layout-title-wrapper",
class: vue.normalizeClass([$props.titleClass, "d-item-layout__title"])
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)) : vue.createCommentVNode("", true),
$options.hasSlotContent(_ctx.$slots.subtitle) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
"data-qa": "dt-item-layout-subtitle-wrapper",
class: vue.normalizeClass([
$props.subtitleClass,
"d-item-layout--subtitle",
{ "d-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }
])
}, [
vue.renderSlot(_ctx.$slots, "subtitle")
], 2)) : vue.createCommentVNode("", true),
$options.hasSlotContent(_ctx.$slots.bottom) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
"data-qa": "dt-item-layout-bottom-wrapper",
class: vue.normalizeClass([$props.bottomClass, "d-item-layout__bottom"])
}, [
vue.renderSlot(_ctx.$slots, "bottom")
], 2)) : vue.createCommentVNode("", true)
], 2),
$options.hasSlotContent(_ctx.$slots.right) ? (vue.openBlock(), vue.createElementBlock("section", {
key: 1,
"data-qa": "dt-item-layout-right-wrapper",
class: vue.normalizeClass([$props.rightClass, "d-item-layout__right"])
}, [
vue.renderSlot(_ctx.$slots, "right")
], 2)) : vue.createCommentVNode("", true),
$options.hasSlotContent(_ctx.$slots.selected) ? (vue.openBlock(), vue.createElementBlock("section", {
key: 2,
"data-qa": "dt-item-layout-selected-wrapper",
class: vue.normalizeClass([$props.selectedClass, "d-item-layout__selected"])
}, [
vue.renderSlot(_ctx.$slots, "selected")
], 2)) : vue.createCommentVNode("", true)
]),
_: 3
}, 8, ["class", "style"]);
}
const DtItemLayout = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtItemLayout;
//# sourceMappingURL=item_layout.vue.cjs.map