@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 6.29 kB
Source Map (JSON)
{"version":3,"file":"notice.cjs","names":[],"sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n <aside\n :class=\"noticeClass\"\n data-qa=\"notice\"\n >\n <dt-notice-icon\n v-if=\"!hideIcon\"\n :kind=\"kind\"\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 >\n <template #titleOverride>\n <!-- @slot Allows you to override the title, only use this if you need\n to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the notice -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n @close=\"$emit('close')\"\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 </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtNotice',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\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 notice. This can be left blank to remove the title from the notice entirely.\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n * important message that does contain interactive elements.\n * @values alert, alertdialog, status\n */\n role: {\n type: String,\n default: 'status',\n validate (role) {\n return NOTICE_ROLES.includes(role);\n },\n },\n\n /**\n * Used in scenarios where the message needs to visually dominate the screen.\n * This will also change the aria role from status to alert.\n * @values true, false\n */\n important: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Severity level of the notice, sets the icon and background\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /**\n * Hides the close button from the notice\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 * Truncates the content instead of wrapping.\n * Used when the notice needs to have a fixed height.\n * @values true, false\n */\n truncateText: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Close button click event\n *\n * @event close\n */\n 'close',\n\n /**\n * Native button click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n noticeClass () {\n const noticeKinds = {\n error: 'd-notice--error',\n info: 'd-notice--info',\n success: 'd-notice--success',\n warning: 'd-notice--warning',\n base: 'd-notice--base',\n };\n return [\n 'd-notice',\n noticeKinds[this.kind],\n { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n ];\n },\n },\n};\n</script>\n"],"mappings":"8VA+CA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,MAAO,CAKL,QAAS,CACP,KAAM,OACN,QAAS,IAAA,GACV,CAMD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAQD,KAAM,CACJ,KAAM,OACN,QAAS,SACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAOD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAOD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAO,CAML,QAQA,QACD,CAED,SAAU,CACR,aAAe,CAQb,MAAO,CACL,WARkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACP,CAGa,KAAK,MACjB,CAAE,sBAAuB,KAAK,UAAW,qBAAsB,KAAK,aAAc,CACnF,EAEJ,CACF,oNA7JS,QAAA,CAhCL,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CACnB,UAAQ,WAGC,EAAA,2CAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKQ,EAAA,OAJd,KAAM,EAAA,iCAGa,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,qCAeF,EAAA,CAZjB,WAAU,EAAA,QACV,aAAY,EAAA,UACZ,MAAO,EAAA,MACP,KAAM,EAAA,OAEI,eAAA,EAAA,EAAA,aAGoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA,2BAGvB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,oEASS,EAAA,CANhB,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}