@dialpad/dialtone/dist/vue2/components/item_layout/item_layout.vue.cjs

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const _sfc_main = {
  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};
      `;
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c(_vm.as, { tag: "component", class: _vm.unstyled ? "d-item-layout--custom" : "d-item-layout", style: _vm.unstyled && _vm.dynamicGridTemplateColumns() }, [_vm.$slots.left ? _c("section", { class: [_vm.leftClass, "d-item-layout__left"], attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [_vm._t("left")], 2) : _vm._e(), _c("section", { class: [_vm.contentClass, "d-item-layout__content"], attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [_vm.$slots.default ? _c("div", { class: [_vm.titleClass, "d-item-layout__title"], attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [_vm._t("default")], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { class: [_vm.subtitleClass, "d-item-layout__subtitle", { "d-item-layout__subtitle-with-title": _vm.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e(), _vm.$slots.bottom ? _c("div", { class: [_vm.bottomClass, "d-item-layout__bottom"], attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()]), _vm.$slots.right ? _c("section", { class: [_vm.rightClass, "d-item-layout__right"], attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [_vm._t("right")], 2) : _vm._e(), _vm.$slots.selected ? _c("section", { class: [_vm.selectedClass, "d-item-layout__selected"], attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [_vm._t("selected")], 2) : _vm._e()]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const DtItemLayout = __component__.exports;
exports.default = DtItemLayout;
//# sourceMappingURL=item_layout.vue.cjs.map