@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 4.35 kB

Source Map (JSON)

{"version":3,"file":"empty_state.vue.cjs","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n class=\"d-empty-state__illustration\"\n >\n \n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n class=\"d-empty-state__icon\"\n >\n \n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"450\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <div :class=\"['d-empty-state__header-text', headlineClass]\">\n {{ headerText }}\n </div>\n\n <p\n v-if=\"bodyText\"\n :class=\"['d-empty-state__body-text', bodyClass]\"\n >\n {{ bodyText }}\n </p>\n </dt-stack>\n\n <slot name=\"body\" />\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n EMPTY_STATE_BODY_SIZE_MODIFIERS,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './empty_state_constants.js';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /**\n * The empty state size.\n * @values 'sm', 'md', 'lg'\n */\n size: {\n type: String,\n default: 'lg',\n validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Header text\n * @type {String}\n */\n headerText: {\n type: String,\n required: true,\n },\n\n /**\n * Body text\n * @type {String}\n */\n bodyText: {\n type: String,\n default: null,\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\nconst isSmallSize = computed(() => props.size === 'sm');\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[props.size]);\n\nconst headlineClass = computed(() => EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[props.size]);\n\nconst bodyClass = computed(() => EMPTY_STATE_BODY_SIZE_MODIFIERS[props.size]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"names":["useSlots","computed","hasSlotContent","EMPTY_STATE_SIZE_MODIFIERS","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","EMPTY_STATE_BODY_SIZE_MODIFIERS","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,UAAM,QAAQA,IAAQ,SAAA;AAEtB,UAAM,QAAQ;AA8Bd,UAAM,UAAUC,IAAQ,SAAC,MAAM;AAC7B,aAAOC,aAAc,eAAC,MAAM,IAAI;AAAA,IAClC,CAAC;AACD,UAAM,kBAAkBD,IAAQ,SAAC,MAAMC,aAAAA,eAAe,MAAM,YAAY,CAAC;AACzE,UAAM,cAAcD,IAAAA,SAAS,MAAM,MAAM,SAAS,IAAI;AAMtD,UAAM,WAAWA,IAAAA,SAAS,MAAM,QAAQ,UAAU,CAAC,gBAAgB,SAAS,YAAY,MAAM;AAM9F,UAAM,mBAAmBA,IAAQ,SAAC,MAAM,gBAAgB,SAAS,CAAC,YAAY,KAAK;AAEnF,UAAM,YAAYA,IAAQ,SAAC,MAAME,sBAAAA,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoBF,IAAQ,SAAC,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAeA,IAAQ,SAAC,MAAMG,sBAAAA,mCAAmC,MAAM,IAAI,CAAC;AAElF,UAAM,gBAAgBH,IAAQ,SAAC,MAAMI,sBAAAA,oCAAoC,MAAM,IAAI,CAAC;AAEpF,UAAM,YAAYJ,IAAQ,SAAC,MAAMK,sBAAAA,gCAAgC,MAAM,IAAI,CAAC;AAE5EC,QAAAA,UAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAACL,aAAAA,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,MAAM,2EAA2E;AAAA,MAC1F;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}