@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 11.1 kB

Source Map (JSON)

{"version":3,"file":"toast.vue.cjs","sources":["../../../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 >\n \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 >\n <template #titleOverride>\n \n <slot name=\"titleOverride\" />\n </template>\n \n <slot>\n {{ message }}\n </slot>\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n :close-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"closeToast\"\n >\n \n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 compatConfig: { MODE: 3 },\n name: 'DtToast',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [SrOnlyCloseButtonMixin],\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 () { 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 * 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 `v-model` with this prop to update\n * the data in your component.\n * Supports v-model\n * @values true, false\n */\n show: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Props for the toast close button.\n */\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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 * 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 emits: [\n /**\n * Close button click event\n *\n * @event close\n */\n 'close',\n\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\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 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 shouldSetTimeout () {\n return !!this.duration && this.duration >= this.minDuration;\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 unmounted () {\n clearTimeout(this.displayTimer);\n },\n\n methods: {\n closeToast (event) {\n this.$emit('update:show', false);\n this.$emit('close', event);\n },\n\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};\n</script>\n"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","TOAST_ROLES","NOTICE_KINDS","TOAST_MIN_DURATION","_createElementBlock","_normalizeClass","_createElementVNode","_createBlock","_withCtx","_renderSlot","_createCommentVNode","_createVNode","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;AA6DA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,kBACVA,YAAY;AAAA,IACZ,iBAAAC,eAAe;AAAA,IACf,gBAAAC,cAAc;AAAA,EACf;AAAA,EAED,QAAQ,CAACC,qBAAAA,OAAsB;AAAA,EAE/B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAW;AAAE,eAAOC,qBAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAW;AAAE,eAAOA,qBAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS;AACnB,eAAOC,gBAAW,YAAC,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS;AACnB,eAAOC,iBAAY,aAAC,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,aAAa;AACvB,eAAO,YAAYC,gBAAAA;AAAAA,MACpB;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAaA,gBAAkB;AAAA;EAElC;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,YAAM,cAAc;AAAA,QAClB,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM;AAAA;AAGR,aAAO,YAAY,KAAK,IAAI;AAAA,IAC7B;AAAA,IAED,mBAAoB;AAClB,aAAO,CAAC,CAAC,KAAK,YAAY,KAAK,YAAY,KAAK;AAAA,IACjD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,SAAS,SAAU,MAAM;AACvB,aAAK,UAAU;AACf,YAAI,MAAM;AACR,eAAK,WAAU;AAAA,eACV;AACL,uBAAa,KAAK,YAAY;AAAA,QAChC;AAAA,MACD;AAAA,MAED,WAAW;AAAA,IACZ;AAAA,EACF;AAAA,EAED,YAAa;AACX,iBAAa,KAAK,YAAY;AAAA,EAC/B;AAAA,EAED,SAAS;AAAA,IACP,WAAY,OAAO;AACjB,WAAK,MAAM,eAAe,KAAK;AAC/B,WAAK,MAAM,SAAS,KAAK;AAAA,IAC1B;AAAA,IAED,aAAc;AACZ,UAAI,KAAK,kBAAkB;AACzB,aAAK,eAAe,WAAW,MAAM;AACnC,eAAK,UAAU;AACf,eAAK,MAAM,eAAe,KAAK;AAAA,QACjC,GAAG,KAAK,QAAQ;AAAA,MAClB;AAAA,IACD;AAAA,EACF;AACH;AA9RA,MAAA,aAAA,CAAA,aAAA;AAWS,MAAA,aAAA,EAAA,OAAM,kBAAiB;;;;;SATtB,MAAO,4BADfC,IA8CM,mBAAA,OAAA;AAAA,IA/CR,KAAA;AAAA,IAGK,OAHLC,IAAAA,eAAA;AAAA;MAGqC,SAAS;AAAA,8BAAgC,OAAS,UAAA;AAAA;IAKnF,WAAQ;AAAA,IACP,gBAAW,CAAI,MAAO,SAAE,SAAQ;AAAA;IAEjCC,IAAA,mBAmCM,OAnCN,YAmCM;AAAA,OAjCK,OAAQ,6BADjBC,IAMiB,YAAA,2BAAA;AAAA,QAlBvB,KAAA;AAAA,QAcS,MAAM,OAAI;AAAA;QAdnB,SAAAC,IAAA,QAiBQ,MAAoB;AAAA,UAApBC,eAAoB,KAAA,QAAA,MAAA;AAAA;QAjB5B,GAAA;AAAA,yBAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAmBMC,IAAAA,YAeoB,8BAAA;AAAA,QAdjB,YAAU,OAAO;AAAA,QACjB,cAAY,OAAS;AAAA,QACrB,OAAO,OAAK;AAAA,QACZ,MAAM,OAAI;AAAA;QAEA,2BAGT,MAA6B;AAAA,UAA7BF,eAA6B,KAAA,QAAA,eAAA;AAAA;QA5BvC,SAAAD,IAAA,QA+BQ,MAEO;AAAA,UAFPC,IAAAA,WAEO,4BAFP,MAEO;AAAA,YAjCfG,IAAAA,gBAAAC,IAAAA,gBAgCa,OAAO,OAAA,GAAA,CAAA;AAAA;;QAhCpB,GAAA;AAAA;MAmCMF,IAAAA,YAUmB,6BAAA;AAAA,QAThB,eAAa,OAAU;AAAA,QACvB,cAAY,OAAS;AAAA,QACrB,sBAAoB,OAAgB;AAAA,QACpC,yBAAuB,KAAmB;AAAA,QAC1C,+BAA6B,KAAwB;AAAA,QACrD,SAAO,SAAU;AAAA;QAzC1B,SAAAH,IAAA,QA4CQ,MAAsB;AAAA,UAAtBC,eAAsB,KAAA,QAAA,QAAA;AAAA;QA5C9B,GAAA;AAAA;;EAAA,GAAA,IAAA,UAAA,KAAAC,IAAA,mBAAA,IAAA,IAAA;;;;"}