@dialpad/dialtone-vue

Version:

Vue component library for Dialpad's design system Dialtone

dialtone.dialpad.com/vue

1 lines • 4.72 kB

Source Map (JSON)

{"version":3,"file":"item-layout.cjs","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=\"$slots.left\"\n data-qa=\"dt-item-layout-left-wrapper\"\n :class=\"[leftClass, 'd-item-layout__left']\"\n >\n \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=\"$slots.default\"\n data-qa=\"dt-item-layout-title-wrapper\"\n :class=\"[titleClass, 'd-item-layout__title']\"\n >\n \n <slot />\n </div>\n <div\n v-if=\"$slots.subtitle\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"[subtitleClass, 'd-item-layout__subtitle', { 'd-item-layout__subtitle-with-title': $slots.default }]\"\n >\n \n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"$slots.bottom\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n :class=\"[bottomClass, 'd-item-layout__bottom']\"\n >\n \n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"$slots.right\"\n data-qa=\"dt-item-layout-right-wrapper\"\n :class=\"[rightClass, 'd-item-layout__right']\"\n >\n \n <slot name=\"right\" />\n </section>\n <section\n v-if=\"$slots.selected\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n :class=\"[selectedClass, 'd-item-layout__selected']\"\n >\n \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>\nexport default {\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};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn"],"mappings":"0KAoEAA,EAAA,CACA,KAAA,eACA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,QAAA,KACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,aAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,cAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,cAAA,CACA,KAAA,OACA,QAAA,EACA,CACA,EAEA,QAAA,CAIA,4BAAA,CACA,MAAAC,EAAA,KAAA,OAAA,KAAA,OAAA,GACAC,EAAA,KAAA,OAAA,MAAA,OAAA,GACAC,EAAA,KAAA,OAAA,SAAA,OAAA,GAEA,MAAA;AAAA,iCACAF,CAAA,QAAAC,CAAA,IAAAC,CAAA;AAAA,OAEA,CACA,CACA"}