@dialpad/dialtone-vue 3.121.0 → 3.122.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component-documentation.json +1 -1
- package/dist/lib/notice.cjs +10 -1
- package/dist/lib/notice.cjs.map +1 -1
- package/dist/lib/notice.js +10 -1
- package/dist/lib/notice.js.map +1 -1
- package/dist/types/components/notice/notice.vue.d.ts +19 -0
- package/dist/types/components/notice/notice.vue.d.ts.map +1 -1
- package/package.json +5 -5
package/dist/lib/notice.cjs
CHANGED
|
@@ -108,6 +108,15 @@ const _sfc_main = {
|
|
|
108
108
|
hideAction: {
|
|
109
109
|
type: Boolean,
|
|
110
110
|
default: false
|
|
111
|
+
},
|
|
112
|
+
/**
|
|
113
|
+
* Truncates the content instead of wrapping.
|
|
114
|
+
* Used when the notice needs to have a fixed height.
|
|
115
|
+
* @values true, false
|
|
116
|
+
*/
|
|
117
|
+
truncateText: {
|
|
118
|
+
type: Boolean,
|
|
119
|
+
default: false
|
|
111
120
|
}
|
|
112
121
|
},
|
|
113
122
|
emits: [
|
|
@@ -137,7 +146,7 @@ const _sfc_main = {
|
|
|
137
146
|
return [
|
|
138
147
|
"d-notice",
|
|
139
148
|
noticeKinds[this.kind],
|
|
140
|
-
{ "d-notice--important": this.important }
|
|
149
|
+
{ "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
|
|
141
150
|
];
|
|
142
151
|
}
|
|
143
152
|
}
|
package/dist/lib/notice.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notice.cjs","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-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 name: 'DtNotice',\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: 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 * Props for the notice close button.\n */\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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 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 },\n ];\n },\n },\n};\n</script>\n"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","NOTICE_ROLES","NOTICE_KINDS","_createElementBlock","_createBlock","_renderSlot","_createVNode"],"mappings":";;;;;;;;;;;;;;;AAmDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,kBACVA,cAAY;AAAA,IACZ,iBAAAC,cAAe;AAAA,IACf,gBAAAC,cAAc;AAAA,EACf;AAAA,EAED,QAAQ,CAACC,qBAAAA,sBAAsB;AAAA,EAE/B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAOC,iBAAY,aAAC,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAOC,iBAAY,aAAC,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;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,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,YAAM,cAAc;AAAA,QAClB,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM;AAAA;AAER,aAAO;AAAA,QACL;AAAA,QACA,YAAY,KAAK,IAAI;AAAA,QACrB,EAAE,uBAAuB,KAAK,
|
|
1
|
+
{"version":3,"file":"notice.cjs","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-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 name: 'DtNotice',\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: 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 * Props for the notice close button.\n */\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","NOTICE_ROLES","NOTICE_KINDS","_createElementBlock","_createBlock","_renderSlot","_createVNode"],"mappings":"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"}
|
package/dist/lib/notice.js
CHANGED
|
@@ -106,6 +106,15 @@ const _sfc_main = {
|
|
|
106
106
|
hideAction: {
|
|
107
107
|
type: Boolean,
|
|
108
108
|
default: false
|
|
109
|
+
},
|
|
110
|
+
/**
|
|
111
|
+
* Truncates the content instead of wrapping.
|
|
112
|
+
* Used when the notice needs to have a fixed height.
|
|
113
|
+
* @values true, false
|
|
114
|
+
*/
|
|
115
|
+
truncateText: {
|
|
116
|
+
type: Boolean,
|
|
117
|
+
default: false
|
|
109
118
|
}
|
|
110
119
|
},
|
|
111
120
|
emits: [
|
|
@@ -135,7 +144,7 @@ const _sfc_main = {
|
|
|
135
144
|
return [
|
|
136
145
|
"d-notice",
|
|
137
146
|
noticeKinds[this.kind],
|
|
138
|
-
{ "d-notice--important": this.important }
|
|
147
|
+
{ "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
|
|
139
148
|
];
|
|
140
149
|
}
|
|
141
150
|
}
|
package/dist/lib/notice.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notice.js","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-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 name: 'DtNotice',\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: 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 * Props for the notice close button.\n */\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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 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 },\n ];\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_createBlock","_renderSlot","_createVNode"],"mappings":";;;;;;;;;;;;;AAmDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,QAAQ,CAAC,sBAAsB;AAAA,EAE/B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAO,aAAa,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAO,aAAa,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;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,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,YAAM,cAAc;AAAA,QAClB,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM;AAAA;AAER,aAAO;AAAA,QACL;AAAA,QACA,YAAY,KAAK,IAAI;AAAA,QACrB,EAAE,uBAAuB,KAAK,
|
|
1
|
+
{"version":3,"file":"notice.js","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-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 name: 'DtNotice',\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: 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 * Props for the notice close button.\n */\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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"],"names":["_createElementBlock","_createBlock","_renderSlot","_createVNode"],"mappings":"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"}
|
|
@@ -82,6 +82,15 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
82
82
|
type: BooleanConstructor;
|
|
83
83
|
default: boolean;
|
|
84
84
|
};
|
|
85
|
+
/**
|
|
86
|
+
* Truncates the content instead of wrapping.
|
|
87
|
+
* Used when the notice needs to have a fixed height.
|
|
88
|
+
* @values true, false
|
|
89
|
+
*/
|
|
90
|
+
truncateText: {
|
|
91
|
+
type: BooleanConstructor;
|
|
92
|
+
default: boolean;
|
|
93
|
+
};
|
|
85
94
|
}, any, any, {
|
|
86
95
|
noticeClass(): any[];
|
|
87
96
|
}, {}, {
|
|
@@ -192,6 +201,15 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
192
201
|
type: BooleanConstructor;
|
|
193
202
|
default: boolean;
|
|
194
203
|
};
|
|
204
|
+
/**
|
|
205
|
+
* Truncates the content instead of wrapping.
|
|
206
|
+
* Used when the notice needs to have a fixed height.
|
|
207
|
+
* @values true, false
|
|
208
|
+
*/
|
|
209
|
+
truncateText: {
|
|
210
|
+
type: BooleanConstructor;
|
|
211
|
+
default: boolean;
|
|
212
|
+
};
|
|
195
213
|
}>> & {
|
|
196
214
|
onClick?: ((...args: any[]) => any) | undefined;
|
|
197
215
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
@@ -206,6 +224,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
206
224
|
hideAction: boolean;
|
|
207
225
|
important: boolean;
|
|
208
226
|
hideIcon: boolean;
|
|
227
|
+
truncateText: boolean;
|
|
209
228
|
}, {}>;
|
|
210
229
|
export default _default;
|
|
211
230
|
//# sourceMappingURL=notice.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notice.vue.d.ts","sourceRoot":"","sources":["../../../../components/notice/notice.vue.js"],"names":[],"mappings":";IAwBI;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;;;;OAKG;;;;;;IASH;;;;OAIG;;;;;IAMH;;;OAGG;;;;;;IASH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"notice.vue.d.ts","sourceRoot":"","sources":["../../../../components/notice/notice.vue.js"],"names":[],"mappings":";IAwBI;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;;;;OAKG;;;;;;IASH;;;;OAIG;;;;;IAMH;;;OAGG;;;;;;IASH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IArGH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;;;;OAKG;;;;;;IASH;;;;OAIG;;;;;IAMH;;;OAGG;;;;;;IASH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;;OAIG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone-vue",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.122.0",
|
|
4
4
|
"description": "Vue component library for Dialpad's design system Dialtone",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"emoji-toolkit": "8.0.0",
|
|
33
33
|
"tippy.js": "6.3.7",
|
|
34
34
|
"@dialpad/dialtone-emojis": "1.0.2",
|
|
35
|
-
"@dialpad/dialtone-icons": "4.
|
|
35
|
+
"@dialpad/dialtone-icons": "4.14.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@percy/cli": "1.28.2",
|
|
@@ -79,12 +79,12 @@
|
|
|
79
79
|
"vue-tsc": "^1.8.25",
|
|
80
80
|
"yo": "^5.0.0",
|
|
81
81
|
"yorkie": "^2.0.0",
|
|
82
|
-
"@dialpad/
|
|
83
|
-
"@dialpad/dialtone
|
|
82
|
+
"@dialpad/dialtone-css": "8.31.0",
|
|
83
|
+
"@dialpad/generator-dialtone": "0.1.0"
|
|
84
84
|
},
|
|
85
85
|
"peerDependencies": {
|
|
86
86
|
"vue": ">=3.2",
|
|
87
|
-
"@dialpad/dialtone-css": "^8.
|
|
87
|
+
"@dialpad/dialtone-css": "^8.31.0"
|
|
88
88
|
},
|
|
89
89
|
"bugs": {
|
|
90
90
|
"email": "dialtone@dialpad.com"
|