@progress/kendo-vue-layout 3.8.4-dev.202302221027 → 3.8.4-dev.202302231256

package/dist/es/gridlayout/GridLayout.d.ts

@@ -0,0 +1,44 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { GridLayoutProps } from './interfaces/GridLayoutProps';
+/**
+ * @hidden
+ */
+export interface GridLayoutData {
+}
+/**
+ * @hidden
+ */
+export interface GridLayoutState {
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface GridLayoutMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface GridLayoutComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface GridLayoutAll extends Vue2type, GridLayoutMethods, GridLayoutState, GridLayoutData, GridLayoutComputed {
+}
+/**
+ * @hidden
+ */
+declare let GridLayoutVue2: ComponentOptions<GridLayoutAll, DefaultData<GridLayoutData>, DefaultMethods<GridLayoutAll>, GridLayoutComputed, RecordPropsDefinition<GridLayoutProps>>;
+/**
+ * Represents the Object which is passed to
+ * callback of the GridLayout component.
+ */
+declare const GridLayout: DefineComponent<GridLayoutProps, any, GridLayoutData, GridLayoutComputed, GridLayoutMethods, {}, {}, {}, string, GridLayoutProps, GridLayoutProps, {}>;
+export { GridLayout, GridLayoutVue2 };

package/dist/es/gridlayout/GridLayout.js

@@ -0,0 +1,125 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { getListeners, guid, templateRendering } from '@progress/kendo-vue-common';
+import { GridLayoutItem } from './GridLayoutItem';
+/**
+ * @hidden
+ */
+var GridLayoutVue2 = {
+  name: 'KendoGridLayout',
+  props: {
+    id: String,
+    gap: {
+      type: Object
+    },
+    align: {
+      type: Object,
+      validator: function validator(value) {
+        return ['top', 'middle', 'bottom', 'stretch'].includes(value.vertical) && ['start', 'center', 'end', 'stretch'].includes(value.horizontal);
+      }
+    },
+    rows: Array,
+    cols: Array,
+    items: Array
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.layoutId = guid();
+  },
+  computed: {
+    hAlign: function hAlign() {
+      return this.$props.align && this.$props.align.horizontal ? this.$props.align.horizontal : 'stretch';
+    },
+    vAlign: function vAlign() {
+      return this.$props.align && this.$props.align.vertical ? this.$props.align.vertical : 'stretch';
+    },
+    gridLayoutClasses: function gridLayoutClasses() {
+      return {
+        'k-grid-layout': true,
+        'k-justify-items-start': this.hAlign === 'start',
+        'k-justify-items-center': this.hAlign === 'center',
+        'k-justify-items-end': this.hAlign === 'end',
+        'k-justify-items-stretch': this.hAlign === 'stretch',
+        'k-align-items-start': this.vAlign === 'top',
+        'k-align-items-center': this.vAlign === 'middle',
+        'k-align-items-end': this.vAlign === 'bottom',
+        'k-align-items-stretch': this.vAlign === 'stretch'
+      };
+    },
+    gapStyle: function gapStyle() {
+      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;
+    },
+    gridTemplateRowsStyle: function gridTemplateRowsStyle() {
+      return this.$props.rows && this.$props.rows.map(function (row) {
+        return "".concat(typeof row.height === 'number' ? row.height + 'px' : row.height);
+      }).join(' ');
+    },
+    gridTemplateColumnsStyle: function gridTemplateColumnsStyle() {
+      return this.$props.cols && this.$props.cols.map(function (col) {
+        return "".concat(typeof col.width === 'number' ? col.width + 'px' : col.width);
+      }).join(' ');
+    },
+    gridLayoutStyles: function gridLayoutStyles() {
+      return {
+        gap: this.gapStyle,
+        gridTemplateColumns: this.gridTemplateColumnsStyle,
+        gridTemplateRows: this.gridTemplateRowsStyle
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      id = _a.id,
+      items = _a.items;
+    return h("div", {
+      "class": this.gridLayoutClasses,
+      style: this.gridLayoutStyles,
+      id: id || this.layoutId,
+      attrs: this.v3 ? undefined : {
+        id: id || this.layoutId
+      }
+    }, [items.map(function (item) {
+      var contentTemplate = templateRendering.call(this, item.content, getListeners.call(this));
+      return (
+        // @ts-ignore
+        h(GridLayoutItem, {
+          content: contentTemplate,
+          attrs: this.v3 ? undefined : {
+            content: contentTemplate,
+            id: item.id,
+            col: item.col,
+            colSpan: item.colSpan,
+            row: item.row,
+            rowSpan: item.rowSpan
+          },
+          "class": item.class,
+          style: item.style,
+          id: item.id,
+          col: item.col,
+          colSpan: item.colSpan,
+          row: item.row,
+          rowSpan: item.rowSpan
+        })
+      );
+    }, this)]);
+  }
+};
+/**
+ * Represents the Object which is passed to
+ * callback of the GridLayout component.
+ */
+var GridLayout = GridLayoutVue2;
+export { GridLayout, GridLayoutVue2 };

package/dist/es/gridlayout/GridLayoutItem.d.ts

@@ -0,0 +1,47 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { GridLayoutItemProps } from './interfaces/GridLayoutItemProps';
+/**
+ * Represents the Object which is passed to the [`ref`](https://vuejs.org/docs/refs-and-the-dom.html)
+ * callback of the GridLayoutItem component.
+ */
+/**
+ * @hidden
+ */
+export interface GridLayoutItemState {
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface GridLayoutItemData {
+}
+/**
+ * @hidden
+ */
+export interface GridLayoutItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface GridLayoutItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface GridLayoutItemAll extends Vue2type, GridLayoutItemMethods, GridLayoutItemState, GridLayoutItemData, GridLayoutItemComputed {
+}
+/**
+ * @hidden
+ */
+declare let GridLayoutItemVue2: ComponentOptions<GridLayoutItemAll, DefaultData<GridLayoutItemData>, DefaultMethods<GridLayoutItemAll>, GridLayoutItemComputed, RecordPropsDefinition<GridLayoutItemProps>>;
+/**
+ * @hidden
+ */
+declare const GridLayoutItem: DefineComponent<GridLayoutItemProps, any, GridLayoutItemData, GridLayoutItemComputed, GridLayoutItemMethods, {}, {}, {}, string, GridLayoutItemProps, GridLayoutItemProps, {}>;
+export { GridLayoutItem, GridLayoutItemVue2 };

package/dist/es/gridlayout/GridLayoutItem.js

@@ -0,0 +1,69 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { getTemplate, guid } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+var GridLayoutItemVue2 = {
+  name: 'KendoGridLayoutItem',
+  props: {
+    content: [String, Function, Object],
+    id: String,
+    col: Number,
+    colSpan: Number,
+    row: Number,
+    rowSpan: Number
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.itemId = guid();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  computed: {
+    gridLayoutItemStyles: function gridLayoutItemStyles() {
+      var _a = this.$props,
+        row = _a.row,
+        col = _a.col,
+        rowSpan = _a.rowSpan,
+        colSpan = _a.colSpan;
+      return {
+        gridArea: "".concat(row || 'auto', " / ").concat(col || 'auto', " / ").concat(rowSpan ? 'span ' + rowSpan : 'auto', " / ").concat(colSpan ? 'span ' + colSpan : 'auto')
+      };
+    }
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      id = _a.id,
+      content = _a.content;
+    var contentToRender = getTemplate.call(this, {
+      h: h,
+      template: content
+    });
+    return h("div", {
+      style: this.gridLayoutItemStyles,
+      id: id || this.itemId,
+      attrs: this.v3 ? undefined : {
+        id: id || this.itemId
+      }
+    }, [contentToRender]);
+  }
+};
+/**
+ * @hidden
+ */
+var GridLayoutItem = GridLayoutItemVue2;
+export { GridLayoutItem, GridLayoutItemVue2 };

package/dist/es/gridlayout/interfaces/GridLayoutColumnProps.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Represents the props of the [Kendo UI for Vue GridLayout column]({% slug overview_gridlayout %}).
+ */
+export interface GridLayoutColumnProps {
+    /**
+     * Specifies the width of the GridLayout
+     * column ([see example]({% slug overview_gridlayout %}#toc-vue-gridlayout-demo-preview)).
+     */
+    width?: number | string;
+}

package/dist/es/gridlayout/interfaces/GridLayoutColumnProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/gridlayout/interfaces/GridLayoutItemProps.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Represents the props of the [Kendo UI for Vue GridLayoutItem component]({% slug overview_gridlayout %}).
+ */
+export interface GridLayoutItemProps {
+    /**
+     * Sets additional CSS classes to the GridLayoutItem.
+     */
+    class?: string;
+    /**
+     * Sets additional CSS styles to the GridLayoutItem.
+     */
+    style?: any;
+    /**
+     * Sets the `id` property of the root GridLayoutItem element.
+     */
+    id?: string;
+    /**
+     * Defines the column line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
+     */
+    col?: number;
+    /**
+     * Specifies the number of columns over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
+     * Defaults to `1`.
+     */
+    colSpan?: number;
+    /**
+     * Defines the row line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
+     */
+    row?: number;
+    /**
+     * Specifies the number of rows over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
+     * Defaults to `1`.
+     */
+    rowSpan?: number;
+    /**
+     * Sets the content of the GridLayoutItem.
+     */
+    content?: any;
+}

package/dist/es/gridlayout/interfaces/GridLayoutItemProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/gridlayout/interfaces/GridLayoutProps.d.ts

@@ -0,0 +1,94 @@
+import { GridLayoutColumnProps } from './GridLayoutColumnProps';
+import { GridLayoutRowProps } from './GridLayoutRowProps';
+/**
+ * Represents the props of the [Kendo UI for Vue GridLayout component]({% slug overview_gridlayout %}).
+ */
+export interface GridLayoutProps {
+    /**
+     * Sets additional CSS classes to the GridLayout.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the GridLayout.
+     */
+    style?: any;
+    /**
+     * Sets the `id` property of the root GridLayout element.
+     */
+    id?: string;
+    /**
+     * Specifies the gaps between the elements ([see example]({% slug layout_gridlayout %}#toc-gaps)).
+     *
+     * * The possible keys are:
+     * * `rows`
+     * * `columns`
+     */
+    gap?: GridLayoutGap;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner GridLayout elements (see demos
+     * [here]({% slug layout_gridlayout %}#toc-horizontal-align) and [here]({% slug layout_gridlayout %}#toc-vertical-align)).
+     *
+     * The possible keys are:
+     * * `horizontal`—Defines the possible horizontal alignment of the inner GridLayout elements.
+     *   * `start`—Uses the start point of the container.
+     *   * `center`—Uses the central point of the container.
+     *   * `end`—Uses the end point of the container.
+     *   * (Default)`stretch`—Stretches the items to fill the width of the container.
+     * * `vertical`— Defines the possible vertical alignment of the inner GridLayout elements.
+     *   * `top`—Uses the top point of the container.
+     *   * `middle`—Uses the middle point of the container.
+     *   * `bottom`—Uses the bottom point of the container.
+     *   * (Default)`stretch`—Stretches the items to fill the height of the container.
+     */
+    align?: GridLayoutAlign | any;
+    /**
+     * Specifies the default number of columns and their widths ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
+     */
+    cols?: GridLayoutColumnProps[];
+    /**
+     * Specifies the default number of rows and their height ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
+     */
+    rows?: GridLayoutRowProps[];
+    /**
+     * The collection of GridLayoutItems.
+     */
+    items?: GridLayoutProps[];
+}
+/**
+ * Specifies the gaps between the elements.
+ */
+export interface GridLayoutGap {
+    /**
+     * Represents the row gap between the elements
+     */
+    rows?: number | string;
+    /**
+     * Represents the column gap between the elements
+     */
+    cols?: number | string;
+}
+/**
+ * Specifies the horizontal and vertical alignment of the inner GridLayout elements.
+ */
+export interface GridLayoutAlign {
+    /**
+     * Defines the possible horizontal alignment of the inner GridLayout elements.
+     *
+     * The available values are:
+     * - `start`—Uses the start point of the container.
+     * - `center`—Uses the center point of the container.
+     * - `end`—Uses the end point of the container.
+     * - (Default)`stretch`—Stretches the items to fill the width of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Defines the possible vertical alignment of the inner GridLayout elements.
+     *
+     * The available values are:
+     * - `top`—Uses the top point of the container.
+     * - `middle`—Uses the middle point of the container.
+     * - `bottom`—Uses the bottom point of the container.
+     * - (Default)`stretch`—Stretches the items to fill the height of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
+}

package/dist/es/gridlayout/interfaces/GridLayoutProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/gridlayout/interfaces/GridLayoutRowProps.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Represents the props of the [Kendo UI for Vue GridLayout row]({% slug overview_gridlayout %}).
+ */
+export interface GridLayoutRowProps {
+    /**
+     * Specifies the height of the GridLayout
+     * row ([see example]({% slug overview_gridlayout %}#toc-vue-gridlayout-demo-preview)).
+     */
+    height?: number | string;
+}

package/dist/es/gridlayout/interfaces/GridLayoutRowProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/main.d.ts

@@ -61,3 +61,11 @@ export * from './bottomnavigation/BottomNavigationItemProps';
 export * from './bottomnavigation/BottomNavigationItem';
 export * from './bottomnavigation/models/events';
 export * from './expansionpanel/main';
+export * from './gridlayout/GridLayout';
+export * from './gridlayout/GridLayoutItem';
+export * from './gridlayout/interfaces/GridLayoutProps';
+export * from './gridlayout/interfaces/GridLayoutItemProps';
+export * from './gridlayout/interfaces/GridLayoutRowProps';
+export * from './gridlayout/interfaces/GridLayoutColumnProps';
+export * from './stacklayout/StackLayout';
+export * from './stacklayout/StackLayoutProps';

package/dist/es/main.js

@@ -61,3 +61,11 @@ export * from './bottomnavigation/BottomNavigationItemProps';
 export * from './bottomnavigation/BottomNavigationItem';
 export * from './bottomnavigation/models/events';
 export * from './expansionpanel/main';
+export * from './gridlayout/GridLayout';
+export * from './gridlayout/GridLayoutItem';
+export * from './gridlayout/interfaces/GridLayoutProps';
+export * from './gridlayout/interfaces/GridLayoutItemProps';
+export * from './gridlayout/interfaces/GridLayoutRowProps';
+export * from './gridlayout/interfaces/GridLayoutColumnProps';
+export * from './stacklayout/StackLayout';
+export * from './stacklayout/StackLayoutProps';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1677060858,
+    publishDate: 1677156185,
     version: '',
     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'
 };

package/dist/es/stacklayout/StackLayout.d.ts

@@ -0,0 +1,44 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { StackLayoutProps } from './StackLayoutProps';
+/**
+ * @hidden
+ */
+export interface StackLayoutData {
+}
+/**
+ * @hidden
+ */
+export interface StackLayoutState {
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface StackLayoutMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface StackLayoutComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface StackLayoutAll extends Vue2type, StackLayoutMethods, StackLayoutState, StackLayoutData, StackLayoutComputed {
+}
+/**
+ * @hidden
+ */
+declare let StackLayoutVue2: ComponentOptions<StackLayoutAll, DefaultData<StackLayoutData>, DefaultMethods<StackLayoutAll>, StackLayoutComputed, RecordPropsDefinition<StackLayoutProps>>;
+/**
+ * Represents the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
+ * Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.
+ */
+declare const StackLayout: DefineComponent<StackLayoutProps, any, StackLayoutData, StackLayoutComputed, StackLayoutMethods, {}, {}, {}, string, StackLayoutProps, StackLayoutProps, {}>;
+export { StackLayout, StackLayoutVue2 };

package/dist/es/stacklayout/StackLayout.js

@@ -0,0 +1,93 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { getDefaultSlots, guid } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+var StackLayoutVue2 = {
+  name: 'KendoStackLayout',
+  props: {
+    id: String,
+    orientation: {
+      type: String,
+      default: 'horizontal',
+      validator: function validator(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
+    },
+    gap: {
+      type: [String, Number]
+    },
+    align: {
+      type: Object,
+      validator: function validator(value) {
+        return ['top', 'middle', 'bottom', 'stretch'].includes(value.vertical) && ['start', 'center', 'end', 'stretch'].includes(value.horizontal);
+      }
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.layoutId = guid();
+  },
+  computed: {
+    hAlign: function hAlign() {
+      return this.$props.align && this.$props.align.horizontal ? this.$props.align.horizontal : 'stretch';
+    },
+    vAlign: function vAlign() {
+      return this.$props.align && this.$props.align.vertical ? this.$props.align.vertical : 'stretch';
+    },
+    stackLayoutClasses: function stackLayoutClasses() {
+      var orientation = this.$props.orientation;
+      var isHorizontal = orientation === 'horizontal';
+      return {
+        'k-stack-layout': true,
+        'k-hstack': orientation === 'horizontal',
+        'k-vstack': orientation === 'vertical',
+        'k-justify-content-start': isHorizontal && this.hAlign === 'start' || !isHorizontal && this.vAlign === 'top',
+        'k-justify-content-center': isHorizontal && this.hAlign === 'center' || !isHorizontal && this.vAlign === 'middle',
+        'k-justify-content-end': isHorizontal && this.hAlign === 'end' || !isHorizontal && this.vAlign === 'bottom',
+        'k-justify-content-stretch': isHorizontal && this.hAlign === 'stretch' || !isHorizontal && this.vAlign === 'stretch',
+        'k-align-items-start': !isHorizontal && this.hAlign === 'start' || isHorizontal && this.vAlign === 'top',
+        'k-align-items-center': !isHorizontal && this.hAlign === 'center' || isHorizontal && this.vAlign === 'middle',
+        'k-align-items-end': !isHorizontal && this.hAlign === 'end' || isHorizontal && this.vAlign === 'bottom',
+        'k-align-items-stretch': !isHorizontal && this.hAlign === 'stretch' || isHorizontal && this.vAlign === 'stretch'
+      };
+    },
+    stackLayoutStyles: function stackLayoutStyles() {
+      return {
+        gap: "".concat(typeof this.$props.gap === 'number' ? this.$props.gap + 'px' : this.$props.gap)
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var id = this.$props.id;
+    return h("div", {
+      "class": this.stackLayoutClasses,
+      style: this.stackLayoutStyles,
+      id: id || this.layoutId,
+      attrs: this.v3 ? undefined : {
+        id: id || this.layoutId
+      }
+    }, [defaultSlot]);
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
+ * Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.
+ */
+var StackLayout = StackLayoutVue2;
+export { StackLayout, StackLayoutVue2 };