@dialpad/dialtone-vue/dist/lib/empty-state/empty-state.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"empty-state.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      <!-- @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>\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';\nimport { DtStack } from '@/components/stack';\n\nexport default {\n  name: 'DtEmptyState',\n\n  components: {\n    DtStack,\n  },\n\n  props: {\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\n  computed: {\n    hasIcon () {\n      return this.$scopedSlots.icon && this.$scopedSlots.icon();\n    },\n\n    hasIllustration () {\n      return this.$scopedSlots.illustration && this.$scopedSlots.illustration();\n    },\n\n    isSmallSize () {\n      return this.size === 'sm';\n    },\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     */\n    showIcon () {\n      return this.hasIcon && (!this.hasIllustration || this.isSmallSize);\n    },\n\n    /**\n     * Illustration will always be shown in lg and md size\n     * Illustration will not be shown in sm size\n     */\n    showIllustration () {\n      return this.hasIllustration && !this.isSmallSize;\n    },\n\n    sizeClass () {\n      return EMPTY_STATE_SIZE_MODIFIERS[this.size];\n    },\n\n    emptyStateClasses () {\n      return ['d-empty-state', this.sizeClass];\n    },\n\n    contentClass () {\n      return EMPTY_STATE_CONTENT_SIZE_MODIFIERS[this.size];\n    },\n\n    headlineClass () {\n      return EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[this.size];\n    },\n\n    bodyClass () {\n      return EMPTY_STATE_BODY_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  mounted () {\n    if (!this.bodyText && !this.$slots.body) {\n      console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n    }\n  },\n};\n</script>\n"],"names":["_sfc_main","DtStack","s","EMPTY_STATE_SIZE_MODIFIERS","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","EMPTY_STATE_BODY_SIZE_MODIFIERS"],"mappings":"mPAoDAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,QAAAC,EAAAA,OACA,EAEA,MAAA,CAKA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,GAAA,OAAA,KAAAC,4BAAA,EAAA,SAAAD,CAAA,CACA,EAMA,WAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,SAAA,CACA,SAAA,CACA,OAAA,KAAA,aAAA,MAAA,KAAA,aAAA,KAAA,CACA,EAEA,iBAAA,CACA,OAAA,KAAA,aAAA,cAAA,KAAA,aAAA,aAAA,CACA,EAEA,aAAA,CACA,OAAA,KAAA,OAAA,IACA,EAMA,UAAA,CACA,OAAA,KAAA,UAAA,CAAA,KAAA,iBAAA,KAAA,YACA,EAMA,kBAAA,CACA,OAAA,KAAA,iBAAA,CAAA,KAAA,WACA,EAEA,WAAA,CACA,OAAAC,EAAAA,2BAAA,KAAA,IAAA,CACA,EAEA,mBAAA,CACA,MAAA,CAAA,gBAAA,KAAA,SAAA,CACA,EAEA,cAAA,CACA,OAAAC,EAAAA,mCAAA,KAAA,IAAA,CACA,EAEA,eAAA,CACA,OAAAC,EAAAA,oCAAA,KAAA,IAAA,CACA,EAEA,WAAA,CACA,OAAAC,EAAAA,gCAAA,KAAA,IAAA,CACA,CACA,EAEA,SAAA,CACA,CAAA,KAAA,UAAA,CAAA,KAAA,OAAA,MACA,QAAA,MAAA,2EAAA,CAEA,CACA"}