@progress/kendo-vue-layout 4.0.1-dev.202310191530 → 4.1.0-dev.202311061329

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.
@@ -30,6 +30,9 @@ var DrawerVue2 = {
30
30
  default: 'ltr'
31
31
  },
32
32
  item: [String, Object, Function],
33
+ navigationHeader: [String, Object, Function],
34
+ navigationFooter: [String, Object, Function],
35
+ navigationContent: [String, Object, Function],
33
36
  mode: {
34
37
  type: String,
35
38
  default: 'overlay',
@@ -105,8 +108,14 @@ var DrawerVue2 = {
105
108
  width = _a.width,
106
109
  miniWidth = _a.miniWidth,
107
110
  items = _a.items,
108
- item = _a.item;
111
+ item = _a.item,
112
+ navigationHeader = _a.navigationHeader,
113
+ navigationFooter = _a.navigationFooter,
114
+ navigationContent = _a.navigationContent;
109
115
  var itemRender = item ? templateRendering.call(this, item, getListeners.call(this)) : undefined;
116
+ var headerRender = navigationHeader ? templateRendering.call(this, navigationHeader, getListeners.call(this)) : undefined;
117
+ var footerRender = navigationFooter ? templateRendering.call(this, navigationFooter, getListeners.call(this)) : undefined;
118
+ var contentRender = navigationContent ? templateRendering.call(this, navigationContent, getListeners.call(this)) : undefined;
110
119
  this.drawer.expanded = expanded;
111
120
  this.drawer.mode = mode;
112
121
  this.drawer.dir = this.currentDir;
@@ -117,6 +126,9 @@ var DrawerVue2 = {
117
126
  this.drawer.miniWidth = miniWidth;
118
127
  this.drawer.items = items;
119
128
  this.drawer.item = itemRender;
129
+ this.drawer.header = headerRender;
130
+ this.drawer.footer = footerRender;
131
+ this.drawer.content = contentRender;
120
132
  },
121
133
  provide: function provide() {
122
134
  return {
@@ -84,7 +84,10 @@ var DrawerNavigationVue2 = {
84
84
  dir = _a.dir,
85
85
  width = _a.width,
86
86
  miniWidth = _a.miniWidth,
87
- items = _a.items;
87
+ items = _a.items,
88
+ header = _a.header,
89
+ footer = _a.footer,
90
+ content = _a.content;
88
91
  var customSettings = typeof animation !== 'boolean' ? animation : animation === false ? NO_ANIMATION : DEFAULT_ANIMATION;
89
92
  var navWidth = width ? width : DEFAULT_EXPANDED_WIDTH;
90
93
  var navMiniWidth = miniWidth ? miniWidth : DEFAULT_MINI_WIDTH;
@@ -178,6 +181,18 @@ var DrawerNavigationVue2 = {
178
181
  });
179
182
  return itemRendering;
180
183
  }, this), watermark]);
184
+ var drawerHeader = getTemplate.call(this, {
185
+ h: h,
186
+ template: header
187
+ });
188
+ var drawerFooter = getTemplate.call(this, {
189
+ h: h,
190
+ template: footer
191
+ });
192
+ var drawerCustomContent = getTemplate.call(this, {
193
+ h: h,
194
+ template: content
195
+ });
181
196
  var drawerNavigation = h("div", {
182
197
  style: drawerAnimation,
183
198
  "class": this.navigationClassNames
@@ -188,7 +203,7 @@ var DrawerNavigationVue2 = {
188
203
  } : {
189
204
  width: navWidth + 'px'
190
205
  }
191
- }, [drawerItems || defaultSlot])]);
206
+ }, [drawerHeader, !content ? drawerItems || defaultSlot : drawerCustomContent, drawerFooter])]);
192
207
  return drawerNavigation;
193
208
  },
194
209
  methods: {
@@ -66,4 +66,20 @@ export interface DrawerProps {
66
66
  * Fires when a Drawer item is selected.
67
67
  */
68
68
  onSelect?: (event: DrawerSelectEvent) => void;
69
+ /**
70
+ * Provides the option to define a `header` in the Drawer component ([see example]({% slug custom_rendering %})).
71
+ * The header is rendered above the Drawer Items. By default, the property is not defined.
72
+ */
73
+ navigationHeader?: String | Object | Function;
74
+ /**
75
+ * Provides the option to define a `footer` in the Drawer component ([see example]({% slug custom_rendering %})).
76
+ * The footer is rendered below the Drawer Items. By default, the property is not defined.
77
+ */
78
+ navigationFooter?: String | Object | Function;
79
+ /**
80
+ * Provides the option to define a custom template inside the navigational section of the Drawer component ([see example]({% slug custom_rendering %})).
81
+ * When defined, the custom template will override the default [DrawerItem]({% slug api_layout_draweritem %}) rendering.
82
+ * By default, the property is not defined.
83
+ */
84
+ navigationContent?: String | Object | Function;
69
85
  }
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-vue-layout',
6
6
  productName: 'Kendo UI for Vue',
7
7
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
8
- publishDate: 1697728660,
8
+ publishDate: 1699276634,
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
  };
@@ -30,6 +30,9 @@ var DrawerVue2 = {
30
30
  default: 'ltr'
31
31
  },
32
32
  item: [String, Object, Function],
33
+ navigationHeader: [String, Object, Function],
34
+ navigationFooter: [String, Object, Function],
35
+ navigationContent: [String, Object, Function],
33
36
  mode: {
34
37
  type: String,
35
38
  default: 'overlay',
@@ -105,8 +108,14 @@ var DrawerVue2 = {
105
108
  width = _a.width,
106
109
  miniWidth = _a.miniWidth,
107
110
  items = _a.items,
108
- item = _a.item;
111
+ item = _a.item,
112
+ navigationHeader = _a.navigationHeader,
113
+ navigationFooter = _a.navigationFooter,
114
+ navigationContent = _a.navigationContent;
109
115
  var itemRender = item ? templateRendering.call(this, item, getListeners.call(this)) : undefined;
116
+ var headerRender = navigationHeader ? templateRendering.call(this, navigationHeader, getListeners.call(this)) : undefined;
117
+ var footerRender = navigationFooter ? templateRendering.call(this, navigationFooter, getListeners.call(this)) : undefined;
118
+ var contentRender = navigationContent ? templateRendering.call(this, navigationContent, getListeners.call(this)) : undefined;
110
119
  this.drawer.expanded = expanded;
111
120
  this.drawer.mode = mode;
112
121
  this.drawer.dir = this.currentDir;
@@ -117,6 +126,9 @@ var DrawerVue2 = {
117
126
  this.drawer.miniWidth = miniWidth;
118
127
  this.drawer.items = items;
119
128
  this.drawer.item = itemRender;
129
+ this.drawer.header = headerRender;
130
+ this.drawer.footer = footerRender;
131
+ this.drawer.content = contentRender;
120
132
  },
121
133
  provide: function provide() {
122
134
  return {
@@ -84,7 +84,10 @@ var DrawerNavigationVue2 = {
84
84
  dir = _a.dir,
85
85
  width = _a.width,
86
86
  miniWidth = _a.miniWidth,
87
- items = _a.items;
87
+ items = _a.items,
88
+ header = _a.header,
89
+ footer = _a.footer,
90
+ content = _a.content;
88
91
  var customSettings = typeof animation !== 'boolean' ? animation : animation === false ? NO_ANIMATION : DEFAULT_ANIMATION;
89
92
  var navWidth = width ? width : DEFAULT_EXPANDED_WIDTH;
90
93
  var navMiniWidth = miniWidth ? miniWidth : DEFAULT_MINI_WIDTH;
@@ -178,6 +181,18 @@ var DrawerNavigationVue2 = {
178
181
  });
179
182
  return itemRendering;
180
183
  }, this), watermark]);
184
+ var drawerHeader = getTemplate.call(this, {
185
+ h: h,
186
+ template: header
187
+ });
188
+ var drawerFooter = getTemplate.call(this, {
189
+ h: h,
190
+ template: footer
191
+ });
192
+ var drawerCustomContent = getTemplate.call(this, {
193
+ h: h,
194
+ template: content
195
+ });
181
196
  var drawerNavigation = h("div", {
182
197
  style: drawerAnimation,
183
198
  "class": this.navigationClassNames
@@ -188,7 +203,7 @@ var DrawerNavigationVue2 = {
188
203
  } : {
189
204
  width: navWidth + 'px'
190
205
  }
191
- }, [drawerItems || defaultSlot])]);
206
+ }, [drawerHeader, !content ? drawerItems || defaultSlot : drawerCustomContent, drawerFooter])]);
192
207
  return drawerNavigation;
193
208
  },
194
209
  methods: {
@@ -66,4 +66,20 @@ export interface DrawerProps {
66
66
  * Fires when a Drawer item is selected.
67
67
  */
68
68
  onSelect?: (event: DrawerSelectEvent) => void;
69
+ /**
70
+ * Provides the option to define a `header` in the Drawer component ([see example]({% slug custom_rendering %})).
71
+ * The header is rendered above the Drawer Items. By default, the property is not defined.
72
+ */
73
+ navigationHeader?: String | Object | Function;
74
+ /**
75
+ * Provides the option to define a `footer` in the Drawer component ([see example]({% slug custom_rendering %})).
76
+ * The footer is rendered below the Drawer Items. By default, the property is not defined.
77
+ */
78
+ navigationFooter?: String | Object | Function;
79
+ /**
80
+ * Provides the option to define a custom template inside the navigational section of the Drawer component ([see example]({% slug custom_rendering %})).
81
+ * When defined, the custom template will override the default [DrawerItem]({% slug api_layout_draweritem %}) rendering.
82
+ * By default, the property is not defined.
83
+ */
84
+ navigationContent?: String | Object | Function;
69
85
  }
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-vue-layout',
6
6
  productName: 'Kendo UI for Vue',
7
7
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
8
- publishDate: 1697728660,
8
+ publishDate: 1699276634,
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
  };
@@ -36,6 +36,9 @@ var DrawerVue2 = {
36
36
  default: 'ltr'
37
37
  },
38
38
  item: [String, Object, Function],
39
+ navigationHeader: [String, Object, Function],
40
+ navigationFooter: [String, Object, Function],
41
+ navigationContent: [String, Object, Function],
39
42
  mode: {
40
43
  type: String,
41
44
  default: 'overlay',
@@ -111,8 +114,14 @@ var DrawerVue2 = {
111
114
  width = _a.width,
112
115
  miniWidth = _a.miniWidth,
113
116
  items = _a.items,
114
- item = _a.item;
117
+ item = _a.item,
118
+ navigationHeader = _a.navigationHeader,
119
+ navigationFooter = _a.navigationFooter,
120
+ navigationContent = _a.navigationContent;
115
121
  var itemRender = item ? kendo_vue_common_1.templateRendering.call(this, item, kendo_vue_common_1.getListeners.call(this)) : undefined;
122
+ var headerRender = navigationHeader ? kendo_vue_common_1.templateRendering.call(this, navigationHeader, kendo_vue_common_1.getListeners.call(this)) : undefined;
123
+ var footerRender = navigationFooter ? kendo_vue_common_1.templateRendering.call(this, navigationFooter, kendo_vue_common_1.getListeners.call(this)) : undefined;
124
+ var contentRender = navigationContent ? kendo_vue_common_1.templateRendering.call(this, navigationContent, kendo_vue_common_1.getListeners.call(this)) : undefined;
116
125
  this.drawer.expanded = expanded;
117
126
  this.drawer.mode = mode;
118
127
  this.drawer.dir = this.currentDir;
@@ -123,6 +132,9 @@ var DrawerVue2 = {
123
132
  this.drawer.miniWidth = miniWidth;
124
133
  this.drawer.items = items;
125
134
  this.drawer.item = itemRender;
135
+ this.drawer.header = headerRender;
136
+ this.drawer.footer = footerRender;
137
+ this.drawer.content = contentRender;
126
138
  },
127
139
  provide: function provide() {
128
140
  return {
@@ -90,7 +90,10 @@ var DrawerNavigationVue2 = {
90
90
  dir = _a.dir,
91
91
  width = _a.width,
92
92
  miniWidth = _a.miniWidth,
93
- items = _a.items;
93
+ items = _a.items,
94
+ header = _a.header,
95
+ footer = _a.footer,
96
+ content = _a.content;
94
97
  var customSettings = typeof animation !== 'boolean' ? animation : animation === false ? NO_ANIMATION : DEFAULT_ANIMATION;
95
98
  var navWidth = width ? width : DEFAULT_EXPANDED_WIDTH;
96
99
  var navMiniWidth = miniWidth ? miniWidth : DEFAULT_MINI_WIDTH;
@@ -184,6 +187,18 @@ var DrawerNavigationVue2 = {
184
187
  });
185
188
  return itemRendering;
186
189
  }, this), watermark]);
190
+ var drawerHeader = kendo_vue_common_1.getTemplate.call(this, {
191
+ h: h,
192
+ template: header
193
+ });
194
+ var drawerFooter = kendo_vue_common_1.getTemplate.call(this, {
195
+ h: h,
196
+ template: footer
197
+ });
198
+ var drawerCustomContent = kendo_vue_common_1.getTemplate.call(this, {
199
+ h: h,
200
+ template: content
201
+ });
187
202
  var drawerNavigation = h("div", {
188
203
  style: drawerAnimation,
189
204
  "class": this.navigationClassNames
@@ -194,7 +209,7 @@ var DrawerNavigationVue2 = {
194
209
  } : {
195
210
  width: navWidth + 'px'
196
211
  }
197
- }, [drawerItems || defaultSlot])]);
212
+ }, [drawerHeader, !content ? drawerItems || defaultSlot : drawerCustomContent, drawerFooter])]);
198
213
  return drawerNavigation;
199
214
  },
200
215
  methods: {
@@ -66,4 +66,20 @@ export interface DrawerProps {
66
66
  * Fires when a Drawer item is selected.
67
67
  */
68
68
  onSelect?: (event: DrawerSelectEvent) => void;
69
+ /**
70
+ * Provides the option to define a `header` in the Drawer component ([see example]({% slug custom_rendering %})).
71
+ * The header is rendered above the Drawer Items. By default, the property is not defined.
72
+ */
73
+ navigationHeader?: String | Object | Function;
74
+ /**
75
+ * Provides the option to define a `footer` in the Drawer component ([see example]({% slug custom_rendering %})).
76
+ * The footer is rendered below the Drawer Items. By default, the property is not defined.
77
+ */
78
+ navigationFooter?: String | Object | Function;
79
+ /**
80
+ * Provides the option to define a custom template inside the navigational section of the Drawer component ([see example]({% slug custom_rendering %})).
81
+ * When defined, the custom template will override the default [DrawerItem]({% slug api_layout_draweritem %}) rendering.
82
+ * By default, the property is not defined.
83
+ */
84
+ navigationContent?: String | Object | Function;
69
85
  }
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-vue-layout',
9
9
  productName: 'Kendo UI for Vue',
10
10
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
11
- publishDate: 1697728660,
11
+ publishDate: 1699276634,
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-layout",
3
3
  "description": "Kendo UI for Vue Layouts package",
4
- "version": "4.0.1-dev.202310191530",
4
+ "version": "4.1.0-dev.202311061329",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/telerik/kendo-vue.git"
@@ -45,9 +45,9 @@
45
45
  "vue": "^2.6.12 || ^3.0.2"
46
46
  },
47
47
  "dependencies": {
48
- "@progress/kendo-vue-animation": "4.0.1-dev.202310191530",
49
- "@progress/kendo-vue-common": "4.0.1-dev.202310191530",
50
- "@progress/kendo-vue-popup": "4.0.1-dev.202310191530"
48
+ "@progress/kendo-vue-animation": "4.1.0-dev.202311061329",
49
+ "@progress/kendo-vue-common": "4.1.0-dev.202311061329",
50
+ "@progress/kendo-vue-popup": "4.1.0-dev.202311061329"
51
51
  },
52
52
  "devDependencies": {
53
53
  "@progress/kendo-data-query": "^1.5.0",
@@ -55,15 +55,15 @@
55
55
  "@progress/kendo-drawing": "^1.8.0",
56
56
  "@progress/kendo-licensing": "^1.3.0",
57
57
  "@progress/kendo-svg-icons": "^2.0.0",
58
- "@progress/kendo-vue-buttons": "4.0.1-dev.202310191530",
59
- "@progress/kendo-vue-charts": "4.0.1-dev.202310191530",
60
- "@progress/kendo-vue-dateinputs": "4.0.1-dev.202310191530",
61
- "@progress/kendo-vue-dropdowns": "4.0.1-dev.202310191530",
62
- "@progress/kendo-vue-grid": "4.0.1-dev.202310191530",
63
- "@progress/kendo-vue-indicators": "4.0.1-dev.202310191530",
64
- "@progress/kendo-vue-inputs": "4.0.1-dev.202310191530",
65
- "@progress/kendo-vue-intl": "4.0.1-dev.202310191530",
66
- "@progress/kendo-vue-progressbars": "4.0.1-dev.202310191530"
58
+ "@progress/kendo-vue-buttons": "4.1.0-dev.202311061329",
59
+ "@progress/kendo-vue-charts": "4.1.0-dev.202311061329",
60
+ "@progress/kendo-vue-dateinputs": "4.1.0-dev.202311061329",
61
+ "@progress/kendo-vue-dropdowns": "4.1.0-dev.202311061329",
62
+ "@progress/kendo-vue-grid": "4.1.0-dev.202311061329",
63
+ "@progress/kendo-vue-indicators": "4.1.0-dev.202311061329",
64
+ "@progress/kendo-vue-inputs": "4.1.0-dev.202311061329",
65
+ "@progress/kendo-vue-intl": "4.1.0-dev.202311061329",
66
+ "@progress/kendo-vue-progressbars": "4.1.0-dev.202311061329"
67
67
  },
68
68
  "@progress": {
69
69
  "friendlyName": "Layouts",