@progress/kendo-vue-notification 3.7.4-dev.202212300853 → 3.7.4-dev.202301120847

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.
@@ -49,6 +49,10 @@ export interface NotificationProps {
49
49
  style?: 'none' | 'success' | 'error' | 'warning' | 'info';
50
50
  icon?: boolean;
51
51
  };
52
+ /**
53
+ * Configures the `themeColor` of the Notification.
54
+ */
55
+ themeColor?: string;
52
56
  /**
53
57
  * The `close` event which will be triggered when the **Close** button is clicked.
54
58
  */
@@ -64,7 +68,7 @@ export interface NotificationState {
64
68
  */
65
69
  export interface NotificationComputed {
66
70
  [key: string]: any;
67
- skeletonClasses: object;
71
+ wrapperClass: object;
68
72
  }
69
73
  /**
70
74
  * @hidden
@@ -4,6 +4,7 @@ var allVue = Vue;
4
4
  var gh = allVue.h;
5
5
  var isV3 = allVue.version && allVue.version[0] === '3';
6
6
  import { packageMetadata } from './package-metadata';
7
+ import { checkOutlineIcon, exclamationCircleIcon, infoCircleIcon, xIcon, xOutlineIcon } from '@progress/kendo-svg-icons';
7
8
  import { validatePackage, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
8
9
  var buttonTitle = 'Close';
9
10
  /**
@@ -30,11 +31,59 @@ var NotificationVue2 = {
30
31
  validator: function validator(value) {
31
32
  return ['none', 'success', 'error', 'warning', 'info'].includes(value.style);
32
33
  }
34
+ },
35
+ themeColor: {
36
+ type: String,
37
+ default: 'base',
38
+ validator: function validator(value) {
39
+ return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
40
+ }
33
41
  }
34
42
  },
35
43
  created: function created() {
36
44
  validatePackage(packageMetadata);
37
45
  },
46
+ computed: {
47
+ computedTheme: function computedTheme() {
48
+ var _a = this.$props,
49
+ type = _a.type,
50
+ themeColor = _a.themeColor;
51
+ return type.style !== 'none' ? type.style : themeColor;
52
+ },
53
+ computedSvg: function computedSvg() {
54
+ switch (this.computedTheme) {
55
+ case 'success':
56
+ return {
57
+ name: 'check-outline',
58
+ icon: checkOutlineIcon
59
+ };
60
+ case 'error':
61
+ return {
62
+ name: 'x-outline',
63
+ icon: xOutlineIcon
64
+ };
65
+ case 'info':
66
+ return {
67
+ name: 'info-circle',
68
+ icon: infoCircleIcon
69
+ };
70
+ case 'warning':
71
+ return {
72
+ name: 'exclamation-circle',
73
+ icon: exclamationCircleIcon
74
+ };
75
+ default:
76
+ return {};
77
+ }
78
+ },
79
+ wrapperClass: function wrapperClass() {
80
+ var _a;
81
+ var closable = this.$props.closable;
82
+ return _a = {
83
+ 'k-notification': true
84
+ }, _a["k-notification-".concat(this.computedTheme)] = this.computedTheme, _a['k-notification-closable'] = closable, _a;
85
+ }
86
+ },
38
87
  // @ts-ignore
39
88
  setup: !isV3 ? undefined : function () {
40
89
  var v3 = !!isV3;
@@ -52,28 +101,36 @@ var NotificationVue2 = {
52
101
  return h("div", {
53
102
  "class": "k-notification-container"
54
103
  }, [h("div", {
55
- "class": 'k-widget k-notification' + (type.style === 'none' ? '' : " k-notification-".concat(type.style)) + (closable ? ' k-notification-closable' : ''),
104
+ "class": this.wrapperClass,
56
105
  style: this.$props.style
57
- }, [h("div", {
58
- "class": "k-notification-wrap"
59
- }, [type.icon && h(Icon, {
60
- name: type.style,
106
+ }, [type.icon && this.computedSvg.name && h(Icon, {
107
+ name: this.computedSvg.name,
61
108
  attrs: this.v3 ? undefined : {
62
- name: type.style
63
- }
109
+ name: this.computedSvg.name,
110
+ icon: this.computedSvg.icon
111
+ },
112
+ icon: this.computedSvg.icon,
113
+ "class": 'k-notification-status'
64
114
  }), h("div", {
65
115
  "class": "k-notification-content"
66
- }, [defaultSlot]), closable && h("a", {
67
- "class": "k-icon k-i-close",
68
- title: buttonTitle,
116
+ }, [defaultSlot]), closable && h("span", {
117
+ "class": "k-notification-actions"
118
+ }, [h("span", {
119
+ "class": "k-notification-action k-notification-close-action"
120
+ }, [h(Icon, {
121
+ name: "x",
69
122
  attrs: this.v3 ? undefined : {
123
+ name: "x",
124
+ icon: xIcon,
70
125
  title: buttonTitle
71
126
  },
127
+ icon: xIcon,
128
+ title: buttonTitle,
72
129
  onClick: this.handleClick,
73
130
  on: this.v3 ? undefined : {
74
131
  "click": this.handleClick
75
132
  }
76
- })])])]);
133
+ })])])])]);
77
134
  },
78
135
  methods: {
79
136
  handleClick: function handleClick(event) {
@@ -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: 1672390096,
8
+ publishDate: 1673512762,
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
  };
@@ -49,6 +49,10 @@ export interface NotificationProps {
49
49
  style?: 'none' | 'success' | 'error' | 'warning' | 'info';
50
50
  icon?: boolean;
51
51
  };
52
+ /**
53
+ * Configures the `themeColor` of the Notification.
54
+ */
55
+ themeColor?: string;
52
56
  /**
53
57
  * The `close` event which will be triggered when the **Close** button is clicked.
54
58
  */
@@ -64,7 +68,7 @@ export interface NotificationState {
64
68
  */
65
69
  export interface NotificationComputed {
66
70
  [key: string]: any;
67
- skeletonClasses: object;
71
+ wrapperClass: object;
68
72
  }
69
73
  /**
70
74
  * @hidden
@@ -4,6 +4,7 @@ var allVue = Vue;
4
4
  var gh = allVue.h;
5
5
  var isV3 = allVue.version && allVue.version[0] === '3';
6
6
  import { packageMetadata } from './package-metadata.js';
7
+ import { checkOutlineIcon, exclamationCircleIcon, infoCircleIcon, xIcon, xOutlineIcon } from '@progress/kendo-svg-icons';
7
8
  import { validatePackage, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
8
9
  var buttonTitle = 'Close';
9
10
  /**
@@ -30,11 +31,59 @@ var NotificationVue2 = {
30
31
  validator: function validator(value) {
31
32
  return ['none', 'success', 'error', 'warning', 'info'].includes(value.style);
32
33
  }
34
+ },
35
+ themeColor: {
36
+ type: String,
37
+ default: 'base',
38
+ validator: function validator(value) {
39
+ return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
40
+ }
33
41
  }
34
42
  },
35
43
  created: function created() {
36
44
  validatePackage(packageMetadata);
37
45
  },
46
+ computed: {
47
+ computedTheme: function computedTheme() {
48
+ var _a = this.$props,
49
+ type = _a.type,
50
+ themeColor = _a.themeColor;
51
+ return type.style !== 'none' ? type.style : themeColor;
52
+ },
53
+ computedSvg: function computedSvg() {
54
+ switch (this.computedTheme) {
55
+ case 'success':
56
+ return {
57
+ name: 'check-outline',
58
+ icon: checkOutlineIcon
59
+ };
60
+ case 'error':
61
+ return {
62
+ name: 'x-outline',
63
+ icon: xOutlineIcon
64
+ };
65
+ case 'info':
66
+ return {
67
+ name: 'info-circle',
68
+ icon: infoCircleIcon
69
+ };
70
+ case 'warning':
71
+ return {
72
+ name: 'exclamation-circle',
73
+ icon: exclamationCircleIcon
74
+ };
75
+ default:
76
+ return {};
77
+ }
78
+ },
79
+ wrapperClass: function wrapperClass() {
80
+ var _a;
81
+ var closable = this.$props.closable;
82
+ return _a = {
83
+ 'k-notification': true
84
+ }, _a["k-notification-".concat(this.computedTheme)] = this.computedTheme, _a['k-notification-closable'] = closable, _a;
85
+ }
86
+ },
38
87
  // @ts-ignore
39
88
  setup: !isV3 ? undefined : function () {
40
89
  var v3 = !!isV3;
@@ -52,28 +101,36 @@ var NotificationVue2 = {
52
101
  return h("div", {
53
102
  "class": "k-notification-container"
54
103
  }, [h("div", {
55
- "class": 'k-widget k-notification' + (type.style === 'none' ? '' : " k-notification-".concat(type.style)) + (closable ? ' k-notification-closable' : ''),
104
+ "class": this.wrapperClass,
56
105
  style: this.$props.style
57
- }, [h("div", {
58
- "class": "k-notification-wrap"
59
- }, [type.icon && h(Icon, {
60
- name: type.style,
106
+ }, [type.icon && this.computedSvg.name && h(Icon, {
107
+ name: this.computedSvg.name,
61
108
  attrs: this.v3 ? undefined : {
62
- name: type.style
63
- }
109
+ name: this.computedSvg.name,
110
+ icon: this.computedSvg.icon
111
+ },
112
+ icon: this.computedSvg.icon,
113
+ "class": 'k-notification-status'
64
114
  }), h("div", {
65
115
  "class": "k-notification-content"
66
- }, [defaultSlot]), closable && h("a", {
67
- "class": "k-icon k-i-close",
68
- title: buttonTitle,
116
+ }, [defaultSlot]), closable && h("span", {
117
+ "class": "k-notification-actions"
118
+ }, [h("span", {
119
+ "class": "k-notification-action k-notification-close-action"
120
+ }, [h(Icon, {
121
+ name: "x",
69
122
  attrs: this.v3 ? undefined : {
123
+ name: "x",
124
+ icon: xIcon,
70
125
  title: buttonTitle
71
126
  },
127
+ icon: xIcon,
128
+ title: buttonTitle,
72
129
  onClick: this.handleClick,
73
130
  on: this.v3 ? undefined : {
74
131
  "click": this.handleClick
75
132
  }
76
- })])])]);
133
+ })])])])]);
77
134
  },
78
135
  methods: {
79
136
  handleClick: function handleClick(event) {
@@ -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: 1672390096,
8
+ publishDate: 1673512762,
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
  };
@@ -49,6 +49,10 @@ export interface NotificationProps {
49
49
  style?: 'none' | 'success' | 'error' | 'warning' | 'info';
50
50
  icon?: boolean;
51
51
  };
52
+ /**
53
+ * Configures the `themeColor` of the Notification.
54
+ */
55
+ themeColor?: string;
52
56
  /**
53
57
  * The `close` event which will be triggered when the **Close** button is clicked.
54
58
  */
@@ -64,7 +68,7 @@ export interface NotificationState {
64
68
  */
65
69
  export interface NotificationComputed {
66
70
  [key: string]: any;
67
- skeletonClasses: object;
71
+ wrapperClass: object;
68
72
  }
69
73
  /**
70
74
  * @hidden
@@ -10,6 +10,7 @@ var allVue = Vue;
10
10
  var gh = allVue.h;
11
11
  var isV3 = allVue.version && allVue.version[0] === '3';
12
12
  var package_metadata_1 = require("./package-metadata");
13
+ var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
13
14
  var kendo_vue_common_1 = require("@progress/kendo-vue-common");
14
15
  var buttonTitle = 'Close';
15
16
  /**
@@ -36,11 +37,59 @@ var NotificationVue2 = {
36
37
  validator: function validator(value) {
37
38
  return ['none', 'success', 'error', 'warning', 'info'].includes(value.style);
38
39
  }
40
+ },
41
+ themeColor: {
42
+ type: String,
43
+ default: 'base',
44
+ validator: function validator(value) {
45
+ return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
46
+ }
39
47
  }
40
48
  },
41
49
  created: function created() {
42
50
  (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
43
51
  },
52
+ computed: {
53
+ computedTheme: function computedTheme() {
54
+ var _a = this.$props,
55
+ type = _a.type,
56
+ themeColor = _a.themeColor;
57
+ return type.style !== 'none' ? type.style : themeColor;
58
+ },
59
+ computedSvg: function computedSvg() {
60
+ switch (this.computedTheme) {
61
+ case 'success':
62
+ return {
63
+ name: 'check-outline',
64
+ icon: kendo_svg_icons_1.checkOutlineIcon
65
+ };
66
+ case 'error':
67
+ return {
68
+ name: 'x-outline',
69
+ icon: kendo_svg_icons_1.xOutlineIcon
70
+ };
71
+ case 'info':
72
+ return {
73
+ name: 'info-circle',
74
+ icon: kendo_svg_icons_1.infoCircleIcon
75
+ };
76
+ case 'warning':
77
+ return {
78
+ name: 'exclamation-circle',
79
+ icon: kendo_svg_icons_1.exclamationCircleIcon
80
+ };
81
+ default:
82
+ return {};
83
+ }
84
+ },
85
+ wrapperClass: function wrapperClass() {
86
+ var _a;
87
+ var closable = this.$props.closable;
88
+ return _a = {
89
+ 'k-notification': true
90
+ }, _a["k-notification-".concat(this.computedTheme)] = this.computedTheme, _a['k-notification-closable'] = closable, _a;
91
+ }
92
+ },
44
93
  // @ts-ignore
45
94
  setup: !isV3 ? undefined : function () {
46
95
  var v3 = !!isV3;
@@ -58,28 +107,36 @@ var NotificationVue2 = {
58
107
  return h("div", {
59
108
  "class": "k-notification-container"
60
109
  }, [h("div", {
61
- "class": 'k-widget k-notification' + (type.style === 'none' ? '' : " k-notification-".concat(type.style)) + (closable ? ' k-notification-closable' : ''),
110
+ "class": this.wrapperClass,
62
111
  style: this.$props.style
63
- }, [h("div", {
64
- "class": "k-notification-wrap"
65
- }, [type.icon && h(kendo_vue_common_1.Icon, {
66
- name: type.style,
112
+ }, [type.icon && this.computedSvg.name && h(kendo_vue_common_1.Icon, {
113
+ name: this.computedSvg.name,
67
114
  attrs: this.v3 ? undefined : {
68
- name: type.style
69
- }
115
+ name: this.computedSvg.name,
116
+ icon: this.computedSvg.icon
117
+ },
118
+ icon: this.computedSvg.icon,
119
+ "class": 'k-notification-status'
70
120
  }), h("div", {
71
121
  "class": "k-notification-content"
72
- }, [defaultSlot]), closable && h("a", {
73
- "class": "k-icon k-i-close",
74
- title: buttonTitle,
122
+ }, [defaultSlot]), closable && h("span", {
123
+ "class": "k-notification-actions"
124
+ }, [h("span", {
125
+ "class": "k-notification-action k-notification-close-action"
126
+ }, [h(kendo_vue_common_1.Icon, {
127
+ name: "x",
75
128
  attrs: this.v3 ? undefined : {
129
+ name: "x",
130
+ icon: kendo_svg_icons_1.xIcon,
76
131
  title: buttonTitle
77
132
  },
133
+ icon: kendo_svg_icons_1.xIcon,
134
+ title: buttonTitle,
78
135
  onClick: this.handleClick,
79
136
  on: this.v3 ? undefined : {
80
137
  "click": this.handleClick
81
138
  }
82
- })])])]);
139
+ })])])])]);
83
140
  },
84
141
  methods: {
85
142
  handleClick: function handleClick(event) {
@@ -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: 1672390096,
11
+ publishDate: 1673512762,
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.7.4-dev.202212300853",
4
+ "version": "3.7.4-dev.202301120847",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/telerik/kendo-vue.git"
@@ -35,15 +35,17 @@
35
35
  "Telerik"
36
36
  ],
37
37
  "peerDependencies": {
38
- "@progress/kendo-licensing": "^1.0.1",
38
+ "@progress/kendo-licensing": "^1.3.0",
39
+ "@progress/kendo-svg-icons": "^1.0.0",
39
40
  "vue": "^2.6.12 || ^3.0.2"
40
41
  },
41
42
  "dependencies": {
42
- "@progress/kendo-vue-common": "3.7.4-dev.202212300853"
43
+ "@progress/kendo-vue-common": "3.7.4-dev.202301120847"
43
44
  },
44
45
  "devDependencies": {
45
- "@progress/kendo-licensing": "^1.0.1",
46
- "@progress/kendo-vue-animation": "3.7.4-dev.202212300853"
46
+ "@progress/kendo-licensing": "^1.3.0",
47
+ "@progress/kendo-svg-icons": "^1.0.0",
48
+ "@progress/kendo-vue-animation": "3.7.4-dev.202301120847"
47
49
  },
48
50
  "@progress": {
49
51
  "friendlyName": "Notification",