@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.72 kB
Source Map (JSON)
{"version":3,"file":"empty-state.cjs","names":[],"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 <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n class=\"d-empty-state__icon\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\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"],"mappings":"8jBAsDA,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EA8BR,GAAA,EAAA,EAAA,cACG,EAAA,eAAe,EAAM,KAAK,CACjC,CACI,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,aAAa,CAAC,CACpE,GAAA,EAAA,EAAA,cAA6B,EAAM,OAAS,KAAK,CAMjD,GAAA,EAAA,EAAA,cAA0B,EAAQ,QAAU,CAAC,EAAgB,OAAS,EAAY,OAAO,CAMzF,GAAA,EAAA,EAAA,cAAkC,EAAgB,OAAS,CAAC,EAAY,MAAM,CAE9E,GAAA,EAAA,EAAA,cAA2B,EAAA,2BAA2B,EAAM,MAAM,CAElE,GAAA,EAAA,EAAA,cAAmC,CAAC,gBAAiB,EAAU,MAAM,CAAC,CAEtE,GAAA,EAAA,EAAA,cAA8B,EAAA,mCAAmC,EAAM,MAAM,CAE7E,GAAA,EAAA,EAAA,cAA+B,EAAA,oCAAoC,EAAM,MAAM,CAE/E,GAAA,EAAA,EAAA,cAA2B,EAAA,gCAAgC,EAAM,MAAM,QAE7E,EAAA,EAAA,eAAgB,CACV,CAAC,EAAM,UAAY,CAAC,EAAA,eAAe,EAAM,KAAK,EAChD,QAAQ,MAAM,4EAA4E,EAE5F,yDA9EW,EAAA,QAAA,CAAA,CAtCR,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,2BAQlB,CALC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKD,OANP,EAMO,EAAA,EAAA,EAAA,YADuB,EAAA,OAAA,eAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,+BAkBV,EAAA,QAAA,CAAA,CAbT,IAAI,MACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,MAAY,CAAA,6BAIzC,EAAA,EAAA,EAAA,oBAAA,MAAA,CAFA,OAAA,EAAA,EAAA,gBAAK,CAAA,6BAAiC,EAAA,MAAa,CAAA,CAAA,EAAA,EAAA,EAAA,iBACpD,EAAA,WAAU,CAAA,EAAA,CAIP,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIJ,IAAA,OAHD,OAAA,EAAA,EAAA,gBAAK,CAAA,2BAA+B,EAAA,MAAS,CAAA,wBAE3C,EAAA,SAAQ,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,oCAIK,EAAA,OAAA,OAAA"}