@progress/kendo-vue-layout 3.8.4-dev.202302221749 → 3.8.4-dev.202302231351

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.
Files changed (59) hide show
  1. package/dist/cdn/js/kendo-vue-layout.js +1 -1
  2. package/dist/es/gridlayout/GridLayout.d.ts +44 -0
  3. package/dist/es/gridlayout/GridLayout.js +125 -0
  4. package/dist/es/gridlayout/GridLayoutItem.d.ts +47 -0
  5. package/dist/es/gridlayout/GridLayoutItem.js +69 -0
  6. package/dist/es/gridlayout/interfaces/GridLayoutColumnProps.d.ts +10 -0
  7. package/dist/es/gridlayout/interfaces/GridLayoutColumnProps.js +1 -0
  8. package/dist/es/gridlayout/interfaces/GridLayoutItemProps.d.ts +39 -0
  9. package/dist/es/gridlayout/interfaces/GridLayoutItemProps.js +1 -0
  10. package/dist/es/gridlayout/interfaces/GridLayoutProps.d.ts +94 -0
  11. package/dist/es/gridlayout/interfaces/GridLayoutProps.js +1 -0
  12. package/dist/es/gridlayout/interfaces/GridLayoutRowProps.d.ts +10 -0
  13. package/dist/es/gridlayout/interfaces/GridLayoutRowProps.js +1 -0
  14. package/dist/es/main.d.ts +8 -0
  15. package/dist/es/main.js +8 -0
  16. package/dist/es/package-metadata.js +1 -1
  17. package/dist/es/stacklayout/StackLayout.d.ts +44 -0
  18. package/dist/es/stacklayout/StackLayout.js +93 -0
  19. package/dist/es/stacklayout/StackLayoutProps.d.ts +75 -0
  20. package/dist/es/stacklayout/StackLayoutProps.js +1 -0
  21. package/dist/esm/gridlayout/GridLayout.d.ts +44 -0
  22. package/dist/esm/gridlayout/GridLayout.js +125 -0
  23. package/dist/esm/gridlayout/GridLayoutItem.d.ts +47 -0
  24. package/dist/esm/gridlayout/GridLayoutItem.js +69 -0
  25. package/dist/esm/gridlayout/interfaces/GridLayoutColumnProps.d.ts +10 -0
  26. package/dist/esm/gridlayout/interfaces/GridLayoutColumnProps.js +1 -0
  27. package/dist/esm/gridlayout/interfaces/GridLayoutItemProps.d.ts +39 -0
  28. package/dist/esm/gridlayout/interfaces/GridLayoutItemProps.js +1 -0
  29. package/dist/esm/gridlayout/interfaces/GridLayoutProps.d.ts +94 -0
  30. package/dist/esm/gridlayout/interfaces/GridLayoutProps.js +1 -0
  31. package/dist/esm/gridlayout/interfaces/GridLayoutRowProps.d.ts +10 -0
  32. package/dist/esm/gridlayout/interfaces/GridLayoutRowProps.js +1 -0
  33. package/dist/esm/main.d.ts +8 -0
  34. package/dist/esm/main.js +8 -0
  35. package/dist/esm/package-metadata.js +1 -1
  36. package/dist/esm/stacklayout/StackLayout.d.ts +44 -0
  37. package/dist/esm/stacklayout/StackLayout.js +93 -0
  38. package/dist/esm/stacklayout/StackLayoutProps.d.ts +75 -0
  39. package/dist/esm/stacklayout/StackLayoutProps.js +1 -0
  40. package/dist/npm/gridlayout/GridLayout.d.ts +44 -0
  41. package/dist/npm/gridlayout/GridLayout.js +132 -0
  42. package/dist/npm/gridlayout/GridLayoutItem.d.ts +47 -0
  43. package/dist/npm/gridlayout/GridLayoutItem.js +76 -0
  44. package/dist/npm/gridlayout/interfaces/GridLayoutColumnProps.d.ts +10 -0
  45. package/dist/npm/gridlayout/interfaces/GridLayoutColumnProps.js +2 -0
  46. package/dist/npm/gridlayout/interfaces/GridLayoutItemProps.d.ts +39 -0
  47. package/dist/npm/gridlayout/interfaces/GridLayoutItemProps.js +2 -0
  48. package/dist/npm/gridlayout/interfaces/GridLayoutProps.d.ts +94 -0
  49. package/dist/npm/gridlayout/interfaces/GridLayoutProps.js +2 -0
  50. package/dist/npm/gridlayout/interfaces/GridLayoutRowProps.d.ts +10 -0
  51. package/dist/npm/gridlayout/interfaces/GridLayoutRowProps.js +2 -0
  52. package/dist/npm/main.d.ts +8 -0
  53. package/dist/npm/main.js +8 -0
  54. package/dist/npm/package-metadata.js +1 -1
  55. package/dist/npm/stacklayout/StackLayout.d.ts +44 -0
  56. package/dist/npm/stacklayout/StackLayout.js +100 -0
  57. package/dist/npm/stacklayout/StackLayoutProps.d.ts +75 -0
  58. package/dist/npm/stacklayout/StackLayoutProps.js +2 -0
  59. package/package.json +13 -13
@@ -0,0 +1,93 @@
1
+ // @ts-ignore
2
+ import * as Vue from 'vue';
3
+ var allVue = Vue;
4
+ var gh = allVue.h;
5
+ var isV3 = allVue.version && allVue.version[0] === '3';
6
+ import { validatePackage } from '@progress/kendo-licensing';
7
+ import { packageMetadata } from '../package-metadata.js';
8
+ import { getDefaultSlots, guid } from '@progress/kendo-vue-common';
9
+ /**
10
+ * @hidden
11
+ */
12
+ var StackLayoutVue2 = {
13
+ name: 'KendoStackLayout',
14
+ props: {
15
+ id: String,
16
+ orientation: {
17
+ type: String,
18
+ default: 'horizontal',
19
+ validator: function validator(value) {
20
+ return ['horizontal', 'vertical'].includes(value);
21
+ }
22
+ },
23
+ gap: {
24
+ type: [String, Number]
25
+ },
26
+ align: {
27
+ type: Object,
28
+ validator: function validator(value) {
29
+ return ['top', 'middle', 'bottom', 'stretch'].includes(value.vertical) && ['start', 'center', 'end', 'stretch'].includes(value.horizontal);
30
+ }
31
+ }
32
+ },
33
+ created: function created() {
34
+ validatePackage(packageMetadata);
35
+ this.layoutId = guid();
36
+ },
37
+ computed: {
38
+ hAlign: function hAlign() {
39
+ return this.$props.align && this.$props.align.horizontal ? this.$props.align.horizontal : 'stretch';
40
+ },
41
+ vAlign: function vAlign() {
42
+ return this.$props.align && this.$props.align.vertical ? this.$props.align.vertical : 'stretch';
43
+ },
44
+ stackLayoutClasses: function stackLayoutClasses() {
45
+ var orientation = this.$props.orientation;
46
+ var isHorizontal = orientation === 'horizontal';
47
+ return {
48
+ 'k-stack-layout': true,
49
+ 'k-hstack': orientation === 'horizontal',
50
+ 'k-vstack': orientation === 'vertical',
51
+ 'k-justify-content-start': isHorizontal && this.hAlign === 'start' || !isHorizontal && this.vAlign === 'top',
52
+ 'k-justify-content-center': isHorizontal && this.hAlign === 'center' || !isHorizontal && this.vAlign === 'middle',
53
+ 'k-justify-content-end': isHorizontal && this.hAlign === 'end' || !isHorizontal && this.vAlign === 'bottom',
54
+ 'k-justify-content-stretch': isHorizontal && this.hAlign === 'stretch' || !isHorizontal && this.vAlign === 'stretch',
55
+ 'k-align-items-start': !isHorizontal && this.hAlign === 'start' || isHorizontal && this.vAlign === 'top',
56
+ 'k-align-items-center': !isHorizontal && this.hAlign === 'center' || isHorizontal && this.vAlign === 'middle',
57
+ 'k-align-items-end': !isHorizontal && this.hAlign === 'end' || isHorizontal && this.vAlign === 'bottom',
58
+ 'k-align-items-stretch': !isHorizontal && this.hAlign === 'stretch' || isHorizontal && this.vAlign === 'stretch'
59
+ };
60
+ },
61
+ stackLayoutStyles: function stackLayoutStyles() {
62
+ return {
63
+ gap: "".concat(typeof this.$props.gap === 'number' ? this.$props.gap + 'px' : this.$props.gap)
64
+ };
65
+ }
66
+ },
67
+ // @ts-ignore
68
+ setup: !isV3 ? undefined : function () {
69
+ var v3 = !!isV3;
70
+ return {
71
+ v3: v3
72
+ };
73
+ },
74
+ render: function render(createElement) {
75
+ var h = gh || createElement;
76
+ var defaultSlot = getDefaultSlots(this);
77
+ var id = this.$props.id;
78
+ return h("div", {
79
+ "class": this.stackLayoutClasses,
80
+ style: this.stackLayoutStyles,
81
+ id: id || this.layoutId,
82
+ attrs: this.v3 ? undefined : {
83
+ id: id || this.layoutId
84
+ }
85
+ }, [defaultSlot]);
86
+ }
87
+ };
88
+ /**
89
+ * Represents the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
90
+ * Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.
91
+ */
92
+ var StackLayout = StackLayoutVue2;
93
+ export { StackLayout, StackLayoutVue2 };
@@ -0,0 +1,75 @@
1
+ /**
2
+ * Represents the props of the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
3
+ */
4
+ export interface StackLayoutProps {
5
+ /**
6
+ * Sets the `id` property of the root StackLayout element.
7
+ */
8
+ id?: string;
9
+ /**
10
+ * Specifies the gap between the inner elements ([see example]({% slug layout_stacklayout %}#toc-gaps)).
11
+ */
12
+ gap?: number | string;
13
+ /**
14
+ * Specifies the orientation of the StackLayout.
15
+ * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
16
+ *
17
+ * The possible values are:
18
+ * * (Default)`horizontal`
19
+ * * `vertical`
20
+ */
21
+ orientation?: StackLayoutOrientation | string;
22
+ /**
23
+ * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
24
+ * Demo ([here]({% slug layout_stacklayout %}#toc-horizontal-align)) and ([here]({% slug layout_stacklayout %}#toc-vertical-align)).
25
+ *
26
+ * The possible keys are:
27
+ * * `horizontal`—Defines the possible horizontal alignment of the inner StackLayout elements.
28
+ * * `start`—Uses the start point of the container.
29
+ * * `center`—Uses the central point of the container.
30
+ * * `end`—Uses the end point of the container.
31
+ * * (Default)`stretch`—Stretches the items to fill the width of the container.
32
+ * * `vertical`—Defines the possible vertical alignment of the inner StackLayout elements.
33
+ * * `top`—Uses the top point of the container.
34
+ * * `middle`—Uses the middle point of the container.
35
+ * * `bottom`—Uses the bottom point of the container.
36
+ * * (Default)`stretch`—Stretches the items to fill the height of the container.
37
+ */
38
+ align?: StackLayoutAlign;
39
+ }
40
+ /**
41
+ * Specifies the orientation of the StackLayout ([see example]({% slug layout_stacklayout %}#toc-orientation)).
42
+ *
43
+ * The possible values are:
44
+ * * (Default)`horizontal`
45
+ * * `vertical`
46
+ *
47
+ */
48
+ export declare type StackLayoutOrientation = 'horizontal' | 'vertical';
49
+ /**
50
+ * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
51
+ */
52
+ export interface StackLayoutAlign {
53
+ /**
54
+ * Defines the possible horizontal alignment of the inner StackLayout elements
55
+ * ([see example]({% slug layout_stacklayout %}#toc-horizontal-align)).
56
+ *
57
+ * The available values are:
58
+ * - `start`—Uses the start point of the container.
59
+ * - `center`—Uses the center point of the container.
60
+ * - `end`—Uses the end point of the container.
61
+ * - (Default)`stretch`—Stretches the items to fill the width of the container.
62
+ */
63
+ horizontal?: 'start' | 'center' | 'end' | 'stretch';
64
+ /**
65
+ * Defines the possible vertical alignment of the inner StackLayout elements
66
+ * ([see example]({% slug layout_stacklayout %}#toc-vertical-align)).
67
+ *
68
+ * The available values are:
69
+ * - `top`—Uses the top point of the container.
70
+ * - `middle`—Uses the middle point of the container.
71
+ * - `bottom`—Uses the bottom point of the container.
72
+ * - (Default)`stretch`—Stretches the items to fill the height of the container.
73
+ */
74
+ vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
75
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,44 @@
1
+ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
2
+ declare type DefaultData<V> = object | ((this: V) => {});
3
+ declare type DefaultMethods<V> = {
4
+ [key: string]: (this: V, ...args: any[]) => any;
5
+ };
6
+ import { GridLayoutProps } from './interfaces/GridLayoutProps';
7
+ /**
8
+ * @hidden
9
+ */
10
+ export interface GridLayoutData {
11
+ }
12
+ /**
13
+ * @hidden
14
+ */
15
+ export interface GridLayoutState {
16
+ v3: boolean;
17
+ }
18
+ /**
19
+ * @hidden
20
+ */
21
+ export interface GridLayoutMethods {
22
+ [key: string]: any;
23
+ }
24
+ /**
25
+ * @hidden
26
+ */
27
+ export interface GridLayoutComputed {
28
+ [key: string]: any;
29
+ }
30
+ /**
31
+ * @hidden
32
+ */
33
+ export interface GridLayoutAll extends Vue2type, GridLayoutMethods, GridLayoutState, GridLayoutData, GridLayoutComputed {
34
+ }
35
+ /**
36
+ * @hidden
37
+ */
38
+ declare let GridLayoutVue2: ComponentOptions<GridLayoutAll, DefaultData<GridLayoutData>, DefaultMethods<GridLayoutAll>, GridLayoutComputed, RecordPropsDefinition<GridLayoutProps>>;
39
+ /**
40
+ * Represents the Object which is passed to
41
+ * callback of the GridLayout component.
42
+ */
43
+ declare const GridLayout: DefineComponent<GridLayoutProps, any, GridLayoutData, GridLayoutComputed, GridLayoutMethods, {}, {}, {}, string, GridLayoutProps, GridLayoutProps, {}>;
44
+ export { GridLayout, GridLayoutVue2 };
@@ -0,0 +1,132 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.GridLayoutVue2 = exports.GridLayout = void 0;
7
+ // @ts-ignore
8
+ var Vue = require("vue");
9
+ var allVue = Vue;
10
+ var gh = allVue.h;
11
+ var isV3 = allVue.version && allVue.version[0] === '3';
12
+ var kendo_licensing_1 = require("@progress/kendo-licensing");
13
+ var package_metadata_1 = require("../package-metadata");
14
+ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
15
+ var GridLayoutItem_1 = require("./GridLayoutItem");
16
+ /**
17
+ * @hidden
18
+ */
19
+ var GridLayoutVue2 = {
20
+ name: 'KendoGridLayout',
21
+ props: {
22
+ id: String,
23
+ gap: {
24
+ type: Object
25
+ },
26
+ align: {
27
+ type: Object,
28
+ validator: function validator(value) {
29
+ return ['top', 'middle', 'bottom', 'stretch'].includes(value.vertical) && ['start', 'center', 'end', 'stretch'].includes(value.horizontal);
30
+ }
31
+ },
32
+ rows: Array,
33
+ cols: Array,
34
+ items: Array
35
+ },
36
+ created: function created() {
37
+ (0, kendo_licensing_1.validatePackage)(package_metadata_1.packageMetadata);
38
+ this.layoutId = (0, kendo_vue_common_1.guid)();
39
+ },
40
+ computed: {
41
+ hAlign: function hAlign() {
42
+ return this.$props.align && this.$props.align.horizontal ? this.$props.align.horizontal : 'stretch';
43
+ },
44
+ vAlign: function vAlign() {
45
+ return this.$props.align && this.$props.align.vertical ? this.$props.align.vertical : 'stretch';
46
+ },
47
+ gridLayoutClasses: function gridLayoutClasses() {
48
+ return {
49
+ 'k-grid-layout': true,
50
+ 'k-justify-items-start': this.hAlign === 'start',
51
+ 'k-justify-items-center': this.hAlign === 'center',
52
+ 'k-justify-items-end': this.hAlign === 'end',
53
+ 'k-justify-items-stretch': this.hAlign === 'stretch',
54
+ 'k-align-items-start': this.vAlign === 'top',
55
+ 'k-align-items-center': this.vAlign === 'middle',
56
+ 'k-align-items-end': this.vAlign === 'bottom',
57
+ 'k-align-items-stretch': this.vAlign === 'stretch'
58
+ };
59
+ },
60
+ gapStyle: function gapStyle() {
61
+ return this.gap ? "".concat(typeof this.gap.rows === 'number' ? this.gap.rows + 'px' : this.gap.rows) + ' ' + "".concat(typeof this.gap.cols === 'number' ? this.gap.cols + 'px' : this.gap.cols) : undefined;
62
+ },
63
+ gridTemplateRowsStyle: function gridTemplateRowsStyle() {
64
+ return this.$props.rows && this.$props.rows.map(function (row) {
65
+ return "".concat(typeof row.height === 'number' ? row.height + 'px' : row.height);
66
+ }).join(' ');
67
+ },
68
+ gridTemplateColumnsStyle: function gridTemplateColumnsStyle() {
69
+ return this.$props.cols && this.$props.cols.map(function (col) {
70
+ return "".concat(typeof col.width === 'number' ? col.width + 'px' : col.width);
71
+ }).join(' ');
72
+ },
73
+ gridLayoutStyles: function gridLayoutStyles() {
74
+ return {
75
+ gap: this.gapStyle,
76
+ gridTemplateColumns: this.gridTemplateColumnsStyle,
77
+ gridTemplateRows: this.gridTemplateRowsStyle
78
+ };
79
+ }
80
+ },
81
+ // @ts-ignore
82
+ setup: !isV3 ? undefined : function () {
83
+ var v3 = !!isV3;
84
+ return {
85
+ v3: v3
86
+ };
87
+ },
88
+ render: function render(createElement) {
89
+ var h = gh || createElement;
90
+ var _a = this.$props,
91
+ id = _a.id,
92
+ items = _a.items;
93
+ return h("div", {
94
+ "class": this.gridLayoutClasses,
95
+ style: this.gridLayoutStyles,
96
+ id: id || this.layoutId,
97
+ attrs: this.v3 ? undefined : {
98
+ id: id || this.layoutId
99
+ }
100
+ }, [items.map(function (item) {
101
+ var contentTemplate = kendo_vue_common_1.templateRendering.call(this, item.content, kendo_vue_common_1.getListeners.call(this));
102
+ return (
103
+ // @ts-ignore
104
+ h(GridLayoutItem_1.GridLayoutItem, {
105
+ content: contentTemplate,
106
+ attrs: this.v3 ? undefined : {
107
+ content: contentTemplate,
108
+ id: item.id,
109
+ col: item.col,
110
+ colSpan: item.colSpan,
111
+ row: item.row,
112
+ rowSpan: item.rowSpan
113
+ },
114
+ "class": item.class,
115
+ style: item.style,
116
+ id: item.id,
117
+ col: item.col,
118
+ colSpan: item.colSpan,
119
+ row: item.row,
120
+ rowSpan: item.rowSpan
121
+ })
122
+ );
123
+ }, this)]);
124
+ }
125
+ };
126
+ exports.GridLayoutVue2 = GridLayoutVue2;
127
+ /**
128
+ * Represents the Object which is passed to
129
+ * callback of the GridLayout component.
130
+ */
131
+ var GridLayout = GridLayoutVue2;
132
+ exports.GridLayout = GridLayout;
@@ -0,0 +1,47 @@
1
+ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
2
+ declare type DefaultData<V> = object | ((this: V) => {});
3
+ declare type DefaultMethods<V> = {
4
+ [key: string]: (this: V, ...args: any[]) => any;
5
+ };
6
+ import { GridLayoutItemProps } from './interfaces/GridLayoutItemProps';
7
+ /**
8
+ * Represents the Object which is passed to the [`ref`](https://vuejs.org/docs/refs-and-the-dom.html)
9
+ * callback of the GridLayoutItem component.
10
+ */
11
+ /**
12
+ * @hidden
13
+ */
14
+ export interface GridLayoutItemState {
15
+ v3: boolean;
16
+ }
17
+ /**
18
+ * @hidden
19
+ */
20
+ export interface GridLayoutItemData {
21
+ }
22
+ /**
23
+ * @hidden
24
+ */
25
+ export interface GridLayoutItemMethods {
26
+ [key: string]: any;
27
+ }
28
+ /**
29
+ * @hidden
30
+ */
31
+ export interface GridLayoutItemComputed {
32
+ [key: string]: any;
33
+ }
34
+ /**
35
+ * @hidden
36
+ */
37
+ export interface GridLayoutItemAll extends Vue2type, GridLayoutItemMethods, GridLayoutItemState, GridLayoutItemData, GridLayoutItemComputed {
38
+ }
39
+ /**
40
+ * @hidden
41
+ */
42
+ declare let GridLayoutItemVue2: ComponentOptions<GridLayoutItemAll, DefaultData<GridLayoutItemData>, DefaultMethods<GridLayoutItemAll>, GridLayoutItemComputed, RecordPropsDefinition<GridLayoutItemProps>>;
43
+ /**
44
+ * @hidden
45
+ */
46
+ declare const GridLayoutItem: DefineComponent<GridLayoutItemProps, any, GridLayoutItemData, GridLayoutItemComputed, GridLayoutItemMethods, {}, {}, {}, string, GridLayoutItemProps, GridLayoutItemProps, {}>;
47
+ export { GridLayoutItem, GridLayoutItemVue2 };
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.GridLayoutItemVue2 = exports.GridLayoutItem = void 0;
7
+ // @ts-ignore
8
+ var Vue = require("vue");
9
+ var allVue = Vue;
10
+ var gh = allVue.h;
11
+ var isV3 = allVue.version && allVue.version[0] === '3';
12
+ var ref = allVue.ref;
13
+ var inject = allVue.inject;
14
+ var kendo_licensing_1 = require("@progress/kendo-licensing");
15
+ var package_metadata_1 = require("../package-metadata");
16
+ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
17
+ /**
18
+ * @hidden
19
+ */
20
+ var GridLayoutItemVue2 = {
21
+ name: 'KendoGridLayoutItem',
22
+ props: {
23
+ content: [String, Function, Object],
24
+ id: String,
25
+ col: Number,
26
+ colSpan: Number,
27
+ row: Number,
28
+ rowSpan: Number
29
+ },
30
+ created: function created() {
31
+ (0, kendo_licensing_1.validatePackage)(package_metadata_1.packageMetadata);
32
+ this.itemId = (0, kendo_vue_common_1.guid)();
33
+ },
34
+ // @ts-ignore
35
+ setup: !isV3 ? undefined : function () {
36
+ var v3 = !!isV3;
37
+ return {
38
+ v3: v3
39
+ };
40
+ },
41
+ computed: {
42
+ gridLayoutItemStyles: function gridLayoutItemStyles() {
43
+ var _a = this.$props,
44
+ row = _a.row,
45
+ col = _a.col,
46
+ rowSpan = _a.rowSpan,
47
+ colSpan = _a.colSpan;
48
+ return {
49
+ gridArea: "".concat(row || 'auto', " / ").concat(col || 'auto', " / ").concat(rowSpan ? 'span ' + rowSpan : 'auto', " / ").concat(colSpan ? 'span ' + colSpan : 'auto')
50
+ };
51
+ }
52
+ },
53
+ render: function render(createElement) {
54
+ var h = gh || createElement;
55
+ var _a = this.$props,
56
+ id = _a.id,
57
+ content = _a.content;
58
+ var contentToRender = kendo_vue_common_1.getTemplate.call(this, {
59
+ h: h,
60
+ template: content
61
+ });
62
+ return h("div", {
63
+ style: this.gridLayoutItemStyles,
64
+ id: id || this.itemId,
65
+ attrs: this.v3 ? undefined : {
66
+ id: id || this.itemId
67
+ }
68
+ }, [contentToRender]);
69
+ }
70
+ };
71
+ exports.GridLayoutItemVue2 = GridLayoutItemVue2;
72
+ /**
73
+ * @hidden
74
+ */
75
+ var GridLayoutItem = GridLayoutItemVue2;
76
+ exports.GridLayoutItem = GridLayoutItem;
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Represents the props of the [Kendo UI for Vue GridLayout column]({% slug overview_gridlayout %}).
3
+ */
4
+ export interface GridLayoutColumnProps {
5
+ /**
6
+ * Specifies the width of the GridLayout
7
+ * column ([see example]({% slug overview_gridlayout %}#toc-vue-gridlayout-demo-preview)).
8
+ */
9
+ width?: number | string;
10
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,39 @@
1
+ /**
2
+ * Represents the props of the [Kendo UI for Vue GridLayoutItem component]({% slug overview_gridlayout %}).
3
+ */
4
+ export interface GridLayoutItemProps {
5
+ /**
6
+ * Sets additional CSS classes to the GridLayoutItem.
7
+ */
8
+ class?: string;
9
+ /**
10
+ * Sets additional CSS styles to the GridLayoutItem.
11
+ */
12
+ style?: any;
13
+ /**
14
+ * Sets the `id` property of the root GridLayoutItem element.
15
+ */
16
+ id?: string;
17
+ /**
18
+ * Defines the column line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
19
+ */
20
+ col?: number;
21
+ /**
22
+ * Specifies the number of columns over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
23
+ * Defaults to `1`.
24
+ */
25
+ colSpan?: number;
26
+ /**
27
+ * Defines the row line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
28
+ */
29
+ row?: number;
30
+ /**
31
+ * Specifies the number of rows over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
32
+ * Defaults to `1`.
33
+ */
34
+ rowSpan?: number;
35
+ /**
36
+ * Sets the content of the GridLayoutItem.
37
+ */
38
+ content?: any;
39
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,94 @@
1
+ import { GridLayoutColumnProps } from './GridLayoutColumnProps';
2
+ import { GridLayoutRowProps } from './GridLayoutRowProps';
3
+ /**
4
+ * Represents the props of the [Kendo UI for Vue GridLayout component]({% slug overview_gridlayout %}).
5
+ */
6
+ export interface GridLayoutProps {
7
+ /**
8
+ * Sets additional CSS classes to the GridLayout.
9
+ */
10
+ className?: string;
11
+ /**
12
+ * Sets additional CSS styles to the GridLayout.
13
+ */
14
+ style?: any;
15
+ /**
16
+ * Sets the `id` property of the root GridLayout element.
17
+ */
18
+ id?: string;
19
+ /**
20
+ * Specifies the gaps between the elements ([see example]({% slug layout_gridlayout %}#toc-gaps)).
21
+ *
22
+ * * The possible keys are:
23
+ * * `rows`
24
+ * * `columns`
25
+ */
26
+ gap?: GridLayoutGap;
27
+ /**
28
+ * Specifies the horizontal and vertical alignment of the inner GridLayout elements (see demos
29
+ * [here]({% slug layout_gridlayout %}#toc-horizontal-align) and [here]({% slug layout_gridlayout %}#toc-vertical-align)).
30
+ *
31
+ * The possible keys are:
32
+ * * `horizontal`&mdash;Defines the possible horizontal alignment of the inner GridLayout elements.
33
+ * * `start`&mdash;Uses the start point of the container.
34
+ * * `center`&mdash;Uses the central point of the container.
35
+ * * `end`&mdash;Uses the end point of the container.
36
+ * * (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
37
+ * * `vertical`&mdash; Defines the possible vertical alignment of the inner GridLayout elements.
38
+ * * `top`&mdash;Uses the top point of the container.
39
+ * * `middle`&mdash;Uses the middle point of the container.
40
+ * * `bottom`&mdash;Uses the bottom point of the container.
41
+ * * (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
42
+ */
43
+ align?: GridLayoutAlign | any;
44
+ /**
45
+ * Specifies the default number of columns and their widths ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
46
+ */
47
+ cols?: GridLayoutColumnProps[];
48
+ /**
49
+ * Specifies the default number of rows and their height ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
50
+ */
51
+ rows?: GridLayoutRowProps[];
52
+ /**
53
+ * The collection of GridLayoutItems.
54
+ */
55
+ items?: GridLayoutProps[];
56
+ }
57
+ /**
58
+ * Specifies the gaps between the elements.
59
+ */
60
+ export interface GridLayoutGap {
61
+ /**
62
+ * Represents the row gap between the elements
63
+ */
64
+ rows?: number | string;
65
+ /**
66
+ * Represents the column gap between the elements
67
+ */
68
+ cols?: number | string;
69
+ }
70
+ /**
71
+ * Specifies the horizontal and vertical alignment of the inner GridLayout elements.
72
+ */
73
+ export interface GridLayoutAlign {
74
+ /**
75
+ * Defines the possible horizontal alignment of the inner GridLayout elements.
76
+ *
77
+ * The available values are:
78
+ * - `start`&mdash;Uses the start point of the container.
79
+ * - `center`&mdash;Uses the center point of the container.
80
+ * - `end`&mdash;Uses the end point of the container.
81
+ * - (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
82
+ */
83
+ horizontal?: 'start' | 'center' | 'end' | 'stretch';
84
+ /**
85
+ * Defines the possible vertical alignment of the inner GridLayout elements.
86
+ *
87
+ * The available values are:
88
+ * - `top`&mdash;Uses the top point of the container.
89
+ * - `middle`&mdash;Uses the middle point of the container.
90
+ * - `bottom`&mdash;Uses the bottom point of the container.
91
+ * - (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
92
+ */
93
+ vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
94
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Represents the props of the [Kendo UI for Vue GridLayout row]({% slug overview_gridlayout %}).
3
+ */
4
+ export interface GridLayoutRowProps {
5
+ /**
6
+ * Specifies the height of the GridLayout
7
+ * row ([see example]({% slug overview_gridlayout %}#toc-vue-gridlayout-demo-preview)).
8
+ */
9
+ height?: number | string;
10
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -61,3 +61,11 @@ export * from './bottomnavigation/BottomNavigationItemProps';
61
61
  export * from './bottomnavigation/BottomNavigationItem';
62
62
  export * from './bottomnavigation/models/events';
63
63
  export * from './expansionpanel/main';
64
+ export * from './gridlayout/GridLayout';
65
+ export * from './gridlayout/GridLayoutItem';
66
+ export * from './gridlayout/interfaces/GridLayoutProps';
67
+ export * from './gridlayout/interfaces/GridLayoutItemProps';
68
+ export * from './gridlayout/interfaces/GridLayoutRowProps';
69
+ export * from './gridlayout/interfaces/GridLayoutColumnProps';
70
+ export * from './stacklayout/StackLayout';
71
+ export * from './stacklayout/StackLayoutProps';
package/dist/npm/main.js CHANGED
@@ -77,3 +77,11 @@ __exportStar(require("./bottomnavigation/BottomNavigationItemProps"), exports);
77
77
  __exportStar(require("./bottomnavigation/BottomNavigationItem"), exports);
78
78
  __exportStar(require("./bottomnavigation/models/events"), exports);
79
79
  __exportStar(require("./expansionpanel/main"), exports);
80
+ __exportStar(require("./gridlayout/GridLayout"), exports);
81
+ __exportStar(require("./gridlayout/GridLayoutItem"), exports);
82
+ __exportStar(require("./gridlayout/interfaces/GridLayoutProps"), exports);
83
+ __exportStar(require("./gridlayout/interfaces/GridLayoutItemProps"), exports);
84
+ __exportStar(require("./gridlayout/interfaces/GridLayoutRowProps"), exports);
85
+ __exportStar(require("./gridlayout/interfaces/GridLayoutColumnProps"), exports);
86
+ __exportStar(require("./stacklayout/StackLayout"), exports);
87
+ __exportStar(require("./stacklayout/StackLayoutProps"), exports);