@progress/kendo-vue-notification 3.8.4-dev.202302231351 → 3.8.4
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/cdn/js/kendo-vue-notification.js +1 -1
- package/dist/es/Notification.d.ts +4 -0
- package/dist/es/Notification.js +27 -4
- package/dist/es/package-metadata.js +1 -1
- package/dist/esm/Notification.d.ts +4 -0
- package/dist/esm/Notification.js +27 -4
- package/dist/esm/package-metadata.js +1 -1
- package/dist/npm/Notification.d.ts +4 -0
- package/dist/npm/Notification.js +26 -3
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +3 -3
|
@@ -57,6 +57,10 @@ export interface NotificationProps {
|
|
|
57
57
|
* The `close` event which will be triggered when the **Close** button is clicked.
|
|
58
58
|
*/
|
|
59
59
|
onClose?: (event: NotificationEvent) => void;
|
|
60
|
+
/**
|
|
61
|
+
* Defines the aria-label attribute of the Notification component. Defaults to `undefined`.
|
|
62
|
+
*/
|
|
63
|
+
ariaLabel?: string;
|
|
60
64
|
}
|
|
61
65
|
/**
|
|
62
66
|
* @hidden
|
package/dist/es/Notification.js
CHANGED
|
@@ -5,7 +5,7 @@ var gh = allVue.h;
|
|
|
5
5
|
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
import { packageMetadata } from './package-metadata';
|
|
7
7
|
import { checkOutlineIcon, exclamationCircleIcon, infoCircleIcon, xIcon, xOutlineIcon } from '@progress/kendo-svg-icons';
|
|
8
|
-
import { validatePackage, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
|
|
8
|
+
import { validatePackage, getDefaultSlots, Icon, guid } from '@progress/kendo-vue-common';
|
|
9
9
|
var buttonTitle = 'Close';
|
|
10
10
|
/**
|
|
11
11
|
* @hidden
|
|
@@ -38,10 +38,15 @@ var NotificationVue2 = {
|
|
|
38
38
|
validator: function validator(value) {
|
|
39
39
|
return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
|
|
40
40
|
}
|
|
41
|
+
},
|
|
42
|
+
ariaLabel: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: undefined
|
|
41
45
|
}
|
|
42
46
|
},
|
|
43
47
|
created: function created() {
|
|
44
48
|
validatePackage(packageMetadata);
|
|
49
|
+
this.notificationContentId = guid();
|
|
45
50
|
},
|
|
46
51
|
computed: {
|
|
47
52
|
computedTheme: function computedTheme() {
|
|
@@ -101,8 +106,18 @@ var NotificationVue2 = {
|
|
|
101
106
|
return h("div", {
|
|
102
107
|
"class": "k-notification-container"
|
|
103
108
|
}, [h("div", {
|
|
109
|
+
role: 'alert',
|
|
110
|
+
attrs: this.v3 ? undefined : {
|
|
111
|
+
role: 'alert',
|
|
112
|
+
"aria-live": 'polite',
|
|
113
|
+
"aria-label": this.$props.ariaLabel,
|
|
114
|
+
"aria-describedby": this.notificationContentId
|
|
115
|
+
},
|
|
104
116
|
"class": this.wrapperClass,
|
|
105
|
-
style: this.$props.style
|
|
117
|
+
style: this.$props.style,
|
|
118
|
+
"aria-live": 'polite',
|
|
119
|
+
"aria-label": this.$props.ariaLabel,
|
|
120
|
+
"aria-describedby": this.notificationContentId
|
|
106
121
|
}, [type.icon && this.computedSvg.name && h(Icon, {
|
|
107
122
|
name: this.computedSvg.name,
|
|
108
123
|
attrs: this.v3 ? undefined : {
|
|
@@ -112,11 +127,19 @@ var NotificationVue2 = {
|
|
|
112
127
|
icon: this.computedSvg.icon,
|
|
113
128
|
"class": 'k-notification-status'
|
|
114
129
|
}), h("div", {
|
|
115
|
-
"class": "k-notification-content"
|
|
130
|
+
"class": "k-notification-content",
|
|
131
|
+
id: this.notificationContentId,
|
|
132
|
+
attrs: this.v3 ? undefined : {
|
|
133
|
+
id: this.notificationContentId
|
|
134
|
+
}
|
|
116
135
|
}, [defaultSlot]), closable && h("span", {
|
|
117
136
|
"class": "k-notification-actions"
|
|
118
137
|
}, [h("span", {
|
|
119
|
-
"class": "k-notification-action k-notification-close-action"
|
|
138
|
+
"class": "k-notification-action k-notification-close-action",
|
|
139
|
+
"aria-hidden": true,
|
|
140
|
+
attrs: this.v3 ? undefined : {
|
|
141
|
+
"aria-hidden": true
|
|
142
|
+
}
|
|
120
143
|
}, [h(Icon, {
|
|
121
144
|
name: "x",
|
|
122
145
|
attrs: this.v3 ? undefined : {
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-notification',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1677571456,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -57,6 +57,10 @@ export interface NotificationProps {
|
|
|
57
57
|
* The `close` event which will be triggered when the **Close** button is clicked.
|
|
58
58
|
*/
|
|
59
59
|
onClose?: (event: NotificationEvent) => void;
|
|
60
|
+
/**
|
|
61
|
+
* Defines the aria-label attribute of the Notification component. Defaults to `undefined`.
|
|
62
|
+
*/
|
|
63
|
+
ariaLabel?: string;
|
|
60
64
|
}
|
|
61
65
|
/**
|
|
62
66
|
* @hidden
|
package/dist/esm/Notification.js
CHANGED
|
@@ -5,7 +5,7 @@ var gh = allVue.h;
|
|
|
5
5
|
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
import { packageMetadata } from './package-metadata.js';
|
|
7
7
|
import { checkOutlineIcon, exclamationCircleIcon, infoCircleIcon, xIcon, xOutlineIcon } from '@progress/kendo-svg-icons';
|
|
8
|
-
import { validatePackage, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
|
|
8
|
+
import { validatePackage, getDefaultSlots, Icon, guid } from '@progress/kendo-vue-common';
|
|
9
9
|
var buttonTitle = 'Close';
|
|
10
10
|
/**
|
|
11
11
|
* @hidden
|
|
@@ -38,10 +38,15 @@ var NotificationVue2 = {
|
|
|
38
38
|
validator: function validator(value) {
|
|
39
39
|
return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
|
|
40
40
|
}
|
|
41
|
+
},
|
|
42
|
+
ariaLabel: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: undefined
|
|
41
45
|
}
|
|
42
46
|
},
|
|
43
47
|
created: function created() {
|
|
44
48
|
validatePackage(packageMetadata);
|
|
49
|
+
this.notificationContentId = guid();
|
|
45
50
|
},
|
|
46
51
|
computed: {
|
|
47
52
|
computedTheme: function computedTheme() {
|
|
@@ -101,8 +106,18 @@ var NotificationVue2 = {
|
|
|
101
106
|
return h("div", {
|
|
102
107
|
"class": "k-notification-container"
|
|
103
108
|
}, [h("div", {
|
|
109
|
+
role: 'alert',
|
|
110
|
+
attrs: this.v3 ? undefined : {
|
|
111
|
+
role: 'alert',
|
|
112
|
+
"aria-live": 'polite',
|
|
113
|
+
"aria-label": this.$props.ariaLabel,
|
|
114
|
+
"aria-describedby": this.notificationContentId
|
|
115
|
+
},
|
|
104
116
|
"class": this.wrapperClass,
|
|
105
|
-
style: this.$props.style
|
|
117
|
+
style: this.$props.style,
|
|
118
|
+
"aria-live": 'polite',
|
|
119
|
+
"aria-label": this.$props.ariaLabel,
|
|
120
|
+
"aria-describedby": this.notificationContentId
|
|
106
121
|
}, [type.icon && this.computedSvg.name && h(Icon, {
|
|
107
122
|
name: this.computedSvg.name,
|
|
108
123
|
attrs: this.v3 ? undefined : {
|
|
@@ -112,11 +127,19 @@ var NotificationVue2 = {
|
|
|
112
127
|
icon: this.computedSvg.icon,
|
|
113
128
|
"class": 'k-notification-status'
|
|
114
129
|
}), h("div", {
|
|
115
|
-
"class": "k-notification-content"
|
|
130
|
+
"class": "k-notification-content",
|
|
131
|
+
id: this.notificationContentId,
|
|
132
|
+
attrs: this.v3 ? undefined : {
|
|
133
|
+
id: this.notificationContentId
|
|
134
|
+
}
|
|
116
135
|
}, [defaultSlot]), closable && h("span", {
|
|
117
136
|
"class": "k-notification-actions"
|
|
118
137
|
}, [h("span", {
|
|
119
|
-
"class": "k-notification-action k-notification-close-action"
|
|
138
|
+
"class": "k-notification-action k-notification-close-action",
|
|
139
|
+
"aria-hidden": true,
|
|
140
|
+
attrs: this.v3 ? undefined : {
|
|
141
|
+
"aria-hidden": true
|
|
142
|
+
}
|
|
120
143
|
}, [h(Icon, {
|
|
121
144
|
name: "x",
|
|
122
145
|
attrs: this.v3 ? undefined : {
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-notification',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1677571456,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -57,6 +57,10 @@ export interface NotificationProps {
|
|
|
57
57
|
* The `close` event which will be triggered when the **Close** button is clicked.
|
|
58
58
|
*/
|
|
59
59
|
onClose?: (event: NotificationEvent) => void;
|
|
60
|
+
/**
|
|
61
|
+
* Defines the aria-label attribute of the Notification component. Defaults to `undefined`.
|
|
62
|
+
*/
|
|
63
|
+
ariaLabel?: string;
|
|
60
64
|
}
|
|
61
65
|
/**
|
|
62
66
|
* @hidden
|
package/dist/npm/Notification.js
CHANGED
|
@@ -44,10 +44,15 @@ var NotificationVue2 = {
|
|
|
44
44
|
validator: function validator(value) {
|
|
45
45
|
return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
|
|
46
46
|
}
|
|
47
|
+
},
|
|
48
|
+
ariaLabel: {
|
|
49
|
+
type: String,
|
|
50
|
+
default: undefined
|
|
47
51
|
}
|
|
48
52
|
},
|
|
49
53
|
created: function created() {
|
|
50
54
|
(0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
|
|
55
|
+
this.notificationContentId = (0, kendo_vue_common_1.guid)();
|
|
51
56
|
},
|
|
52
57
|
computed: {
|
|
53
58
|
computedTheme: function computedTheme() {
|
|
@@ -107,8 +112,18 @@ var NotificationVue2 = {
|
|
|
107
112
|
return h("div", {
|
|
108
113
|
"class": "k-notification-container"
|
|
109
114
|
}, [h("div", {
|
|
115
|
+
role: 'alert',
|
|
116
|
+
attrs: this.v3 ? undefined : {
|
|
117
|
+
role: 'alert',
|
|
118
|
+
"aria-live": 'polite',
|
|
119
|
+
"aria-label": this.$props.ariaLabel,
|
|
120
|
+
"aria-describedby": this.notificationContentId
|
|
121
|
+
},
|
|
110
122
|
"class": this.wrapperClass,
|
|
111
|
-
style: this.$props.style
|
|
123
|
+
style: this.$props.style,
|
|
124
|
+
"aria-live": 'polite',
|
|
125
|
+
"aria-label": this.$props.ariaLabel,
|
|
126
|
+
"aria-describedby": this.notificationContentId
|
|
112
127
|
}, [type.icon && this.computedSvg.name && h(kendo_vue_common_1.Icon, {
|
|
113
128
|
name: this.computedSvg.name,
|
|
114
129
|
attrs: this.v3 ? undefined : {
|
|
@@ -118,11 +133,19 @@ var NotificationVue2 = {
|
|
|
118
133
|
icon: this.computedSvg.icon,
|
|
119
134
|
"class": 'k-notification-status'
|
|
120
135
|
}), h("div", {
|
|
121
|
-
"class": "k-notification-content"
|
|
136
|
+
"class": "k-notification-content",
|
|
137
|
+
id: this.notificationContentId,
|
|
138
|
+
attrs: this.v3 ? undefined : {
|
|
139
|
+
id: this.notificationContentId
|
|
140
|
+
}
|
|
122
141
|
}, [defaultSlot]), closable && h("span", {
|
|
123
142
|
"class": "k-notification-actions"
|
|
124
143
|
}, [h("span", {
|
|
125
|
-
"class": "k-notification-action k-notification-close-action"
|
|
144
|
+
"class": "k-notification-action k-notification-close-action",
|
|
145
|
+
"aria-hidden": true,
|
|
146
|
+
attrs: this.v3 ? undefined : {
|
|
147
|
+
"aria-hidden": true
|
|
148
|
+
}
|
|
126
149
|
}, [h(kendo_vue_common_1.Icon, {
|
|
127
150
|
name: "x",
|
|
128
151
|
attrs: this.v3 ? undefined : {
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-notification',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1677571456,
|
|
12
12
|
version: '',
|
|
13
13
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
14
14
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-vue-notification",
|
|
3
3
|
"description": "Kendo UI for Vue Notification package",
|
|
4
|
-
"version": "3.8.4
|
|
4
|
+
"version": "3.8.4",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/telerik/kendo-vue.git"
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
"vue": "^2.6.12 || ^3.0.2"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@progress/kendo-vue-common": "3.8.4
|
|
43
|
+
"@progress/kendo-vue-common": "3.8.4"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@progress/kendo-licensing": "^1.3.0",
|
|
47
47
|
"@progress/kendo-svg-icons": "^1.0.0",
|
|
48
|
-
"@progress/kendo-vue-animation": "3.8.4
|
|
48
|
+
"@progress/kendo-vue-animation": "3.8.4"
|
|
49
49
|
},
|
|
50
50
|
"@progress": {
|
|
51
51
|
"friendlyName": "Notification",
|