@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 6.37 kB
Source Map (JSON)
{"version":3,"file":"item-layout.cjs","names":[],"sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n :style=\"unstyled && dynamicGridTemplateColumns()\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n :class=\"[leftClass, 'd-item-layout__left']\"\n >\n <!-- @slot Slot for left content -->\n <slot name=\"left\" />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n :class=\"[contentClass, 'd-item-layout__content']\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n :class=\"[titleClass, 'd-item-layout__title']\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"[\n subtitleClass,\n 'd-item-layout--subtitle',\n { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n ]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n :class=\"[bottomClass, 'd-item-layout__bottom']\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n :class=\"[rightClass, 'd-item-layout__right']\"\n >\n <!-- @slot Slot for right content -->\n <slot name=\"right\" />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n :class=\"[selectedClass, 'd-item-layout__selected']\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtItemLayout',\n props: {\n /**\n * Set this prop to render layout as a specific HTML element.\n */\n as: {\n type: String,\n default: 'div',\n },\n\n /**\n * Set this prop to remove the default styling.\n * @values true, false\n */\n unstyled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Set the class for the left section.\n */\n leftClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the content section.\n */\n contentClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the title section.\n */\n titleClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the subtitle section.\n */\n subtitleClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the bottom section.\n */\n bottomClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the right section.\n */\n rightClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the selected section.\n */\n selectedClass: {\n type: String,\n default: '',\n },\n },\n\n methods: {\n /**\n * Generate dynamic grid template columns\n */\n dynamicGridTemplateColumns () {\n const leftContentColumn = this.$slots.left ? 'auto' : '';\n const rightContentColumn = this.$slots.right ? 'auto' : '';\n const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n return `\n grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n `;\n },\n\n hasSlotContent,\n },\n};\n</script>\n"],"mappings":"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"}