@dialpad/dialtone-vue/dist/lib/toast/toast.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"toast.cjs","sources":["../../../components/toast/layouts/toast_layout_default.vue","../../../components/toast/layouts/toast_layout_alternate_icon.vue","../../../components/toast/layouts/toast_layout_alternate.vue","../../../components/toast/toast.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport utils from '@/common/utils';\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport { TOAST_ROLES } from '../toast_constants.js';\nexport default {\n  name: 'ToastLayoutDefault',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  props: {\n    isShown: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"d-toast-layout-alternate__icon\"\n  >\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        v-if=\"defaultIcon\"\n        :size=\"size\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconAlertTriangle,\n  DtIconBell,\n  DtIconSparkle,\n} from '@dialpad/dialtone-icons/vue2';\nimport { TOAST_ALTERNATE_KINDS } from '../toast_constants.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconInfo],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconInfo],\n  ['base', DtIconBell],\n  ['gradient', DtIconSparkle],\n]);\n\nexport default {\n  name: 'DtToastLayoutAlternateIcon',\n  components: {\n    DtIconInfo,\n    DtIconAlertTriangle,\n    DtIconBell,\n    DtIconSparkle,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator (kind) {\n        return TOAST_ALTERNATE_KINDS.includes(kind);\n      },\n    },\n\n    size: {\n      type: String,\n      default: '400',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast-alternate',\n      kindClass,\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast-alternate__dialog\">\n      <div class=\"d-toast-alternate__header\">\n        <dt-toast-layout-alternate-icon\n          v-if=\"!hideIcon\"\n          :kind=\"kind\"\n          size=\"200\"\n          v-on=\"$listeners\"\n        >\n          <slot name=\"icon\" />\n        </dt-toast-layout-alternate-icon>\n        <dt-notice-content\n          :title-id=\"titleId\"\n          :content-id=\"contentId\"\n          :title=\"title\"\n          :role=\"role\"\n          v-on=\"$listeners\"\n        >\n          <template #titleOverride>\n            <slot name=\"titleOverride\" />\n          </template>\n        </dt-notice-content>\n\n        <!-- Close Button -->\n        <dt-notice-action\n          :hide-action=\"true\"\n          :hide-close=\"hideClose\"\n          button-size=\"xs\"\n          v-on=\"$listeners\"\n        />\n      </div>\n      <!-- Content Section -->\n      <div class=\"d-toast-alternate__content\">\n        <slot>\n          {{ message }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport utils from '@/common/utils';\nimport DtToastLayoutAlternateIcon from './toast_layout_alternate_icon.vue';\nimport { DtNoticeAction, DtNoticeContent } from '@/components/notice';\nimport { TOAST_ROLES, TOAST_ALTERNATE_KINDS } from '../toast_constants.js';\nexport default {\n  name: 'ToastLayoutAlternate',\n\n  components: {\n    DtNoticeAction,\n    DtNoticeContent,\n    DtToastLayoutAlternateIcon,\n  },\n\n  props: {\n    isShown: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning, gradient\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return TOAST_ALTERNATE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast-alternate--error',\n        info: 'd-toast-alternate--info',\n        success: 'd-toast-alternate--success',\n        warning: 'd-toast-alternate--warning',\n        gradient: 'd-toast-alternate--gradient',\n      };\n\n      return kindClasses[this.kind];\n    },\n  },\n};\n</script>\n","<template>\n  <component\n    :is=\"selectedLayout\"\n    :is-shown=\"isShown\"\n    :title-id=\"titleId\"\n    :content-id=\"contentId\"\n    :title=\"title\"\n    :message=\"message\"\n    :role=\"role\"\n    :kind=\"kind\"\n    :important=\"important\"\n    :hide-close=\"hideClose\"\n    :hide-icon=\"hideIcon\"\n    :hide-action=\"hideAction\"\n    v-on=\"$listeners\"\n    @close=\"handleClose\"\n  >\n    <!-- @slot Slot for custom icon -->\n    <template #icon>\n      <slot name=\"icon\" />\n    </template>\n    <template #titleOverride>\n      <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n      <slot name=\"titleOverride\" />\n    </template>\n    <!-- @slot the main textual content of the toast -->\n    <slot>\n      {{ message }}\n    </slot>\n    <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n    <template #action>\n      <slot name=\"action\" />\n    </template>\n  </component>\n</template>\n\n<script>\nimport { TOAST_MIN_DURATION, TOAST_LAYOUTS } from './toast_constants.js';\nimport ToastLayoutDefault from './layouts/toast_layout_default.vue';\nimport ToastLayoutAlternate from './layouts/toast_layout_alternate.vue';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    ToastLayoutDefault,\n    ToastLayoutAlternate,\n  },\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n    },\n\n    /**\n     * Severity level of the toast, could be different depending on which toast layout is used.\n     * @values base, error, info, success, warning, gradient\n     */\n    kind: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: undefined,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: undefined,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: undefined,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n\n    /**\n     * The layout / styling you wish to use for the toast.\n     * @values default, alternate\n     */\n    layout: {\n      type: String,\n      default: 'default',\n      validator: (layout) => {\n        return TOAST_LAYOUTS.includes(layout);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n\n    selectedLayout () {\n      return this.layout === 'alternate' ? ToastLayoutAlternate : ToastLayoutDefault;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n\n    handleClose () {\n      this.isShown = false;\n      this.$emit('update:show', false);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","utils","role","TOAST_ROLES","kind","NOTICE_KINDS","kindToIcon","DtIconInfo","DtIconAlertTriangle","DtIconBell","DtIconSparkle","TOAST_ALTERNATE_KINDS","s","ICON_SIZE_MODIFIERS","DtToastLayoutAlternateIcon","ToastLayoutDefault","ToastLayoutAlternate","duration","TOAST_MIN_DURATION","layout","TOAST_LAYOUTS","show"],"mappings":"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"}