@progress/kendo-vue-layout
Version:
80 lines (79 loc) • 2.89 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 s, createVNode as n } from "vue";
import { packageMetadata as e } from "../package-metadata.mjs";
import { getDefaultSlots as r, validatePackage as o, guid as a } from "@progress/kendo-vue-common";
const p = /* @__PURE__ */ s({
name: "KendoStackLayout",
props: {
id: String,
orientation: {
type: String,
default: "horizontal",
validator: function(i) {
return ["horizontal", "vertical"].includes(i);
}
},
gap: {
type: [String, Number]
},
align: {
type: Object,
validator: function(i) {
return ["top", "middle", "bottom", "stretch", void 0].includes(i.vertical) && ["start", "center", "end", "stretch", void 0].includes(i.horizontal);
}
}
},
created() {
o(e), this.layoutId = a();
},
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";
},
stackLayoutClasses() {
const {
orientation: i
} = this.$props, t = i === "horizontal";
return {
"k-stack-layout": !0,
"k-hstack": i === "horizontal",
"k-vstack": i === "vertical",
"k-justify-content-start": t && this.hAlign === "start" || !t && this.vAlign === "top",
"k-justify-content-center": t && this.hAlign === "center" || !t && this.vAlign === "middle",
"k-justify-content-end": t && this.hAlign === "end" || !t && this.vAlign === "bottom",
"k-justify-content-stretch": t && this.hAlign === "stretch" || !t && this.vAlign === "stretch",
"k-align-items-start": !t && this.hAlign === "start" || t && this.vAlign === "top",
"k-align-items-center": !t && this.hAlign === "center" || t && this.vAlign === "middle",
"k-align-items-end": !t && this.hAlign === "end" || t && this.vAlign === "bottom",
"k-align-items-stretch": !t && this.hAlign === "stretch" || t && this.vAlign === "stretch"
};
},
stackLayoutStyles() {
return {
gap: `${typeof this.$props.gap == "number" ? this.$props.gap + "px" : this.$props.gap}`
};
}
},
render() {
const i = r(this), {
id: t
} = this.$props;
return n("div", {
class: this.stackLayoutClasses,
style: this.stackLayoutStyles,
id: t || this.layoutId
}, [i]);
}
});
export {
p as StackLayout
};