@progress/kendo-vue-layout
Version:
96 lines (95 loc) • 3.27 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as n, createVNode as e } from "vue";
import { packageMetadata as o } from "../package-metadata.mjs";
import { templateRendering as a, getListeners as l, validatePackage as p, guid as h } from "@progress/kendo-vue-common";
import { GridLayoutItem as d } from "./GridLayoutItem.mjs";
const y = /* @__PURE__ */ n({
name: "KendoGridLayout",
props: {
id: String,
gap: {
type: Object
},
align: {
type: Object,
validator: function(t) {
return ["top", "middle", "bottom", "stretch", void 0].includes(t.vertical) && ["start", "center", "end", "stretch", void 0].includes(t.horizontal);
}
},
rows: Array,
cols: Array,
items: Array
},
created() {
p(o), this.layoutId = h();
},
computed: {
hAlign() {
return this.$props.align && this.$props.align.horizontal ? this.$props.align.horizontal : "stretch";
},
vAlign() {
return this.$props.align && this.$props.align.vertical ? this.$props.align.vertical : "stretch";
},
gridLayoutClasses() {
return {
"k-grid-layout": !0,
"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() {
return this.gap ? `${typeof this.gap.rows == "number" ? this.gap.rows + "px" : this.gap.rows} ${typeof this.gap.cols == "number" ? this.gap.cols + "px" : this.gap.cols}` : void 0;
},
gridTemplateRowsStyle() {
return this.$props.rows && this.$props.rows.map((t) => `${typeof t.height == "number" ? t.height + "px" : t.height}`).join(" ");
},
gridTemplateColumnsStyle() {
return this.$props.cols && this.$props.cols.map((t) => `${typeof t.width == "number" ? t.width + "px" : t.width}`).join(" ");
},
gridLayoutStyles() {
return {
gap: this.gapStyle,
gridTemplateColumns: this.gridTemplateColumnsStyle,
gridTemplateRows: this.gridTemplateRowsStyle
};
}
},
render() {
const {
id: t,
items: s
} = this.$props;
return e("div", {
class: this.gridLayoutClasses,
style: this.gridLayoutStyles,
id: t || this.layoutId
}, [s.map(function(i) {
const r = a.call(this, i.content, l.call(this));
return e(d, {
content: r,
class: i.class,
style: i.style,
id: i.id,
col: i.col,
colSpan: i.colSpan,
row: i.row,
rowSpan: i.rowSpan
}, null);
}, this)]);
}
});
export {
y as GridLayout
};