@progress/kendo-vue-layout
Version:
156 lines (155 loc) • 4.5 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 _, createVNode as o, h as s } from "vue";
import { DrawerItem as j } from "./DrawerItem.mjs";
import { getDefaultSlots as E, WatermarkOverlay as F, templateRendering as M, getListeners as X, getTemplate as l } from "@progress/kendo-vue-common";
const P = 240, B = 50, H = {
type: "slide",
duration: 200
}, U = {
type: "slide",
duration: 0
}, J = /* @__PURE__ */ _({
name: "KendoDrawerNavigation",
props: {
item: [Object],
header: [Object],
footer: [Object],
content: [Object],
tabIndex: Number,
showLicenseWatermark: Boolean,
onSelect: Function
},
inject: {
kendoDrawer: {
default: null
}
},
computed: {
navigationClassNames() {
const {
position: e
} = this.kendoDrawer;
return {
"k-widget k-drawer": !0,
"k-drawer-start": e === "start",
"k-drawer-end": e === "end"
};
}
},
render() {
const e = E(this), {
animation: n,
expanded: c,
mode: d,
position: p,
mini: r,
dir: u,
width: h,
miniWidth: w,
items: f
} = this.kendoDrawer, y = this.$props.header, I = this.$props.footer, k = this.$props.content, t = typeof n != "boolean" ? n : n === !1 ? U : H, g = h || P, D = w || B, N = {
opacity: 1,
flexBasis: g + "px",
WebkitTransition: "all " + (t && t.duration) + "ms",
/* Safari */
transition: "all " + (t && t.duration) + "ms"
}, b = {
opacity: 1,
transform: "translateX(0px)",
WebkitTransition: "all " + (t && t.duration) + "ms",
/* Safari */
transition: "all " + (t && t.duration) + "ms"
}, x = {
opacity: r ? 1 : 0,
flexBasis: r ? D + "px" : 0,
WebkitTransition: "all " + (t && t.duration) + "ms",
/* Safari */
transition: "all " + (t && t.duration) + "ms"
}, T = {
opacity: 0,
transform: "translateX(-100%)",
WebkitTransition: "all " + (t && t.duration) + "ms",
/* Safari */
transition: "all " + (t && t.duration) + "ms"
}, W = {
opacity: 0,
transform: "translateX(100%)",
WebkitTransition: "all " + (t && t.duration) + "ms",
/* Safari */
transition: "all " + (t && t.duration) + "ms"
}, v = {
transform: "translateX(0%)",
WebkitTransitionDuration: (t && t.duration) + "ms",
/* Safari */
transitionDuration: (t && t.duration) + "ms"
}, O = this.showLicenseWatermark ? o(F, null, null) : null, A = c ? d === "push" ? N : b : d === "push" ? x : u === "ltr" && p === "start" || u === "rtl" && p === "end" ? r ? v : T : r ? v : W, $ = f && o("ul", {
class: "k-drawer-items",
role: "menubar",
"aria-orientation": "vertical",
"aria-expanded": c
}, [f.map(function(a, m) {
let i = this.$props.item;
i && !i.type && !i.render && (i = M.call(this, this.$props.item, X.call(this)));
const R = o(j, {
key: m,
index: m,
onClick: this.onDrawerItemSelect,
text: a.text,
icon: a.icon,
svgIcon: a.svgIcon,
separator: a.separator,
selected: a.selected,
targetItem: a.targetItem
}, null);
return l.call(this, {
h: s,
template: i,
defaultRendering: R,
additionalProps: {
...a,
index: m
},
additionalListeners: {
click: this.onDrawerItemSelect
}
});
}, this), O]), L = l.call(this, {
h: s,
template: y
}), S = l.call(this, {
h: s,
template: I
}), C = l.call(this, {
h: s,
template: k
});
return o("div", {
style: A,
class: this.navigationClassNames
}, [o("div", {
class: "k-drawer-wrapper",
style: !c && r && d === "overlay" ? {
width: D + "px"
} : {
width: g + "px"
}
}, [L, k ? C : $ || e, S])]);
},
methods: {
focus(e) {
this.$el && this.$el.focus(e);
},
onDrawerItemSelect(e, n) {
this.$emit("select", e, n);
}
}
});
export {
J as DrawerNavigation
};