@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 6.6 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=\"hasSlotContent($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=\"hasSlotContent($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=\"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 \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 \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 \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 \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"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","_normalizeStyle","$options","_withCtx","_ctx","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":"uOA0EKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eACN,MAAO,CAIL,GAAI,CACF,KAAM,OACN,QAAS,OAOX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,cAAe,CACb,KAAM,OACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,cAAe,CACb,KAAM,OACN,QAAS,KAIb,QAAS,CAIP,4BAA8B,CAC5B,MAAMC,EAAoB,KAAK,OAAO,KAAO,OAAS,GAChDC,EAAqB,KAAK,OAAO,MAAQ,OAAS,GAClDC,EAAwB,KAAK,OAAO,SAAW,OAAS,GAE9D,MAAO;AAAA,iCACoBF,CAAiB,QAAQC,CAAkB,IAAIC,CAAqB;AAAA,OAEjG,EAEA,eAAAC,EAAAA,eAEJ,+CAvKEC,EAAAA,YADFC,EAAAA,wBAESC,EAAA,EAAE,EAAA,CACN,MAHLC,EAAAA,eAGYD,EAAA,SAAQ,wBAAA,eAAA,EACf,MAJLE,EAAAA,eAIYF,EAAA,UAAYG,EAAA,2BAA0B,CAAA,IAJlD,QAAAC,EAAAA,QAMI,IAOU,CANFD,EAAA,eAAeE,EAAA,OAAO,IAAI,iBADlCC,EAAAA,mBAOU,UAAA,CAbd,IAAA,EAQM,UAAQ,8BACP,MATPL,EAAAA,gBASeD,EAAA,UAAS,qBAAA,CAAA,IAGlBO,aAAoBF,EAAA,OAAA,MAAA,OAZ1BG,EAAAA,mBAAA,GAAA,EAAA,EAcIC,EAAAA,mBAgCU,UAAA,CA/BR,UAAQ,iCACP,MAhBPR,EAAAA,gBAgBeD,EAAA,aAAY,wBAAA,CAAA,IAGbG,EAAA,eAAeE,EAAA,OAAO,OAAO,iBADrCC,EAAAA,mBAOM,MAAA,CAzBZ,IAAA,EAoBQ,UAAQ,+BACP,MArBTL,EAAAA,gBAqBiBD,EAAA,WAAU,sBAAA,CAAA,IAGnBO,aAAQF,EAAA,OAAA,SAAA,OAxBhBG,EAAAA,mBAAA,GAAA,EAAA,EA2BcL,EAAA,eAAeE,EAAA,OAAO,QAAQ,iBADtCC,EAAAA,mBAWM,MAAA,CArCZ,IAAA,EA4BQ,UAAQ,kCACP,MA7BTL,EAAAA,eAAA,CA6B4BD,EAAA,+EAAuGG,EAAA,eAAeE,EAAA,OAAO,OAAO,CAAA,MAOxJE,aAAwBF,EAAA,OAAA,UAAA,OApChCG,EAAAA,mBAAA,GAAA,EAAA,EAuCcL,EAAA,eAAeE,EAAA,OAAO,MAAM,iBADpCC,EAAAA,mBAOM,MAAA,CA7CZ,IAAA,EAwCQ,UAAQ,gCACP,MAzCTL,EAAAA,gBAyCiBD,EAAA,YAAW,uBAAA,CAAA,IAGpBO,aAAsBF,EAAA,OAAA,QAAA,OA5C9BG,EAAAA,mBAAA,GAAA,EAAA,MAgDYL,EAAA,eAAeE,EAAA,OAAO,KAAK,iBADnCC,EAAAA,mBAOU,UAAA,CAtDd,IAAA,EAiDM,UAAQ,+BACP,MAlDPL,EAAAA,gBAkDeD,EAAA,WAAU,sBAAA,CAAA,IAGnBO,aAAqBF,EAAA,OAAA,OAAA,OArD3BG,EAAAA,mBAAA,GAAA,EAAA,EAwDYL,EAAA,eAAeE,EAAA,OAAO,QAAQ,iBADtCC,EAAAA,mBAOU,UAAA,CA9Dd,IAAA,EAyDM,UAAQ,kCACP,MA1DPL,EAAAA,gBA0DeD,EAAA,cAAa,yBAAA,CAAA,IAGtBO,aAAwBF,EAAA,OAAA,UAAA,OA7D9BG,EAAAA,mBAAA,GAAA,EAAA,IAAA,EAAA"}