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

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.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/npm/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/npm/stacklayout/StackLayout.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StackLayoutVue2 = exports.StackLayout = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_licensing_1 = require("@progress/kendo-licensing");
+var package_metadata_1 = require("../package-metadata");
+var kendo_vue_common_1 = require("@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() {
+    (0, kendo_licensing_1.validatePackage)(package_metadata_1.packageMetadata);
+    this.layoutId = (0, kendo_vue_common_1.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 = (0, kendo_vue_common_1.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]);
+  }
+};
+exports.StackLayoutVue2 = StackLayoutVue2;
+/**
+ * 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;
+exports.StackLayout = StackLayout;

package/dist/npm/stacklayout/StackLayoutProps.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Represents the props of the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
+ */
+export interface StackLayoutProps {
+    /**
+     * Sets the `id` property of the root StackLayout element.
+     */
+    id?: string;
+    /**
+     * Specifies the gap between the inner elements ([see example]({% slug layout_stacklayout %}#toc-gaps)).
+     */
+    gap?: number | string;
+    /**
+     * Specifies the orientation of the StackLayout.
+     * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
+     *
+     * The possible values are:
+     * * (Default)`horizontal`
+     * * `vertical`
+     */
+    orientation?: StackLayoutOrientation | string;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
+     * Demo ([here]({% slug layout_stacklayout %}#toc-horizontal-align)) and ([here]({% slug layout_stacklayout %}#toc-vertical-align)).
+     *
+     * The possible keys are:
+     * * `horizontal`—Defines the possible horizontal alignment of the inner StackLayout 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 StackLayout 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?: StackLayoutAlign;
+}
+/**
+ * Specifies the orientation of the StackLayout ([see example]({% slug layout_stacklayout %}#toc-orientation)).
+ *
+ * The possible values are:
+ * * (Default)`horizontal`
+ * * `vertical`
+ *
+ */
+export declare type StackLayoutOrientation = 'horizontal' | 'vertical';
+/**
+ * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
+ */
+export interface StackLayoutAlign {
+    /**
+     * Defines the possible horizontal alignment of the inner StackLayout elements
+     * ([see example]({% slug layout_stacklayout %}#toc-horizontal-align)).
+     *
+     * 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 StackLayout elements
+     * ([see example]({% slug layout_stacklayout %}#toc-vertical-align)).
+     *
+     * 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/npm/stacklayout/StackLayoutProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-layout",
   "description": "Kendo UI for Vue Layouts package",
-  "version": "3.8.4-dev.202302221027",
+  "version": "3.8.4-dev.202302231256",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -44,9 +44,9 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-animation": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-common": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-popup": "3.8.4-dev.202302221027"
+    "@progress/kendo-vue-animation": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-common": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-popup": "3.8.4-dev.202302231256"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.0",
@@ -54,15 +54,15 @@
     "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.3.0",
     "@progress/kendo-svg-icons": "^1.0.0",
-    "@progress/kendo-vue-buttons": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-charts": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-dateinputs": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-dropdowns": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-grid": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-indicators": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-inputs": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-intl": "3.8.4-dev.202302221027",
-    "@progress/kendo-vue-progressbars": "3.8.4-dev.202302221027"
+    "@progress/kendo-vue-buttons": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-charts": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-dateinputs": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-dropdowns": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-grid": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-indicators": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-inputs": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-intl": "3.8.4-dev.202302231256",
+    "@progress/kendo-vue-progressbars": "3.8.4-dev.202302231256"
   },
   "@progress": {
     "friendlyName": "Layouts",