@progress/kendo-vue-layout
Version:
278 lines (277 loc) • 8.82 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 w, h as f, createVNode as i, isVNode as D } from "vue";
import { Slide as G } from "@progress/kendo-vue-animation";
import { templateRendering as h, getListeners as d, getTemplate as g, setRef as T, classNames as j, getRef as I, FOCUSABLE_ELEMENTS as R, Navigation as F, guid as P, validatePackage as K } from "@progress/kendo-vue-common";
import { packageMetadata as _ } from "../package-metadata.mjs";
import { ActionSheetItem as C } from "./ActionSheetItem.mjs";
import { ActionSheetHeader as z } from "./ActionSheetHeader.mjs";
import { ActionSheetFooter as B } from "./ActionSheetFooter.mjs";
import { ActionSheetContent as L } from "./ActionSheetContent.mjs";
function b(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !D(t);
}
const U = 300, Y = /* @__PURE__ */ w({
name: "KendoActionSheet",
props: {
expand: Boolean,
animation: {
type: Boolean,
default: !0
},
animationDuration: {
type: Number,
default: U
},
animationStyles: Object,
tabIndex: Number,
items: Array,
subTitle: String,
title: String,
className: String,
headerClassName: {
type: String,
default: void 0
},
contentClassName: {
type: String,
default: void 0
},
headerStyle: {
type: String,
default: void 0
},
footerClassName: {
type: String,
default: void 0
},
header: [String, Object, Function],
content: [String, Object, Function],
footer: [String, Object, Function],
item: [String, Object, Function],
navigatable: {
type: Boolean,
default: !0
},
navigatableElements: {
type: Array,
default: function() {
return [];
}
},
actions: Object,
onClose: Function
},
created() {
this.bottomPosition = {
bottom: "0px",
width: "100%"
}, this.guidId = P(), K(_);
},
mounted() {
this.element = I(this, "actionSheet"), this.$props.expand && !this.show && (this.show = !0);
},
updated() {
if (this.element = I(this, "actionSheet"), this.$props.expand && !this.show && (this.show = !0), this.element && !this.$props.className && (this.element.style.setProperty("--kendo-actionsheet-height", "auto"), this.element.style.setProperty("--kendo-actionsheet-max-height", "none")), this.element && this.$props.navigatable) {
const t = this.$props.navigatableElements, o = [".k-actionsheet-item", ".k-actionsheet-actions", ...[".k-actionsheet-footer", ".k-actionsheet-content", ".k-actionsheet-titlebar"].map((l) => R.concat(t).map((a) => `${l} ${a}`)).flat()];
this.navigation = new F({
tabIndex: this.$props.tabIndex || 0,
root: this.element,
rovingTabIndex: !1,
selectors: o,
keyboardEvents: {
keydown: {
Tab: this.onTab,
Enter: this.onEnter,
Escape: this.onEscape
}
}
}), t.length !== 0 ? this.navigation.focusElement(this.element.querySelector(t[0]), null) : this.navigation.focusElement(this.navigation.first, null);
}
},
data() {
return {
show: !1,
slide: !1
};
},
computed: {
topGroupItems() {
var t;
return (t = this.items) == null ? void 0 : t.filter((n) => !n.group || n.group === "top");
},
bottomGroupItems() {
var t;
return (t = this.items) == null ? void 0 : t.filter((n) => n.group === "bottom");
},
shouldRenderSeparator() {
return this.topGroupItems && this.topGroupItems.length > 0 && this.bottomGroupItems && this.bottomGroupItems.length > 0;
}
},
render() {
const {
title: t,
subTitle: n,
animationStyles: o,
animation: l,
expand: a,
tabIndex: s,
className: S,
animationDuration: y,
headerClassName: $,
contentClassName: E,
footerClassName: N,
actions: k
} = this.$props, x = h.call(this, this.$props.header, d.call(this)), p = g.call(this, {
h: f,
template: x,
defaultRendering: null
}), A = h.call(this, this.$props.content, d.call(this)), m = g.call(this, {
h: f,
template: A,
defaultRendering: null
}), O = h.call(this, this.$props.footer, d.call(this)), u = g.call(this, {
h: f,
template: O,
defaultRendering: null
}), v = i("div", {
class: j("k-actionsheet", S, {
"k-actionsheet-bottom": !S
}),
role: "dialog",
"aria-modal": "true",
"aria-hidden": !1,
"aria-labelledby": this.guidId,
ref: T(this, "actionSheet"),
onKeydown: this.handleKeyDown
}, [this.$props.header && !t && !n && i(z, {
headerClassName: $
}, b(p) ? p : {
default: () => [p]
}), (t || n) && i("div", {
class: "k-actionsheet-titlebar k-text-center"
}, [i("div", {
class: "k-actionsheet-titlebar-group k-hbox"
}, [i("div", {
class: "k-actionsheet-title",
id: this.guidId
}, [t && i("div", null, [t]), n && i("div", {
class: "k-actionsheet-subtitle"
}, [n])]), k && i("div", {
class: "k-actionsheet-actions"
}, [k])])]), this.$props.content ? i(L, {
contentClassName: E
}, b(m) ? m : {
default: () => [m]
}) : i("div", {
class: "k-actionsheet-content"
}, [i("div", {
class: "k-list-ul",
role: "group"
}, [this.topGroupItems && this.topGroupItems.map(function(e, r) {
const c = h.call(this, this.$props.item || e.content, d.call(this));
return i(C, {
style: e.style,
class: e.class,
title: e.title,
description: e.description,
disabled: e.disabled,
id: r,
key: r,
item: e,
icon: e.icon,
svgIcon: e.svgIcon,
iconSize: e.iconSize,
iconColor: e.iconColor,
tabIndex: s || 0,
content: c,
onClick: this.handleItemClick
}, null);
}, this)]), this.shouldRenderSeparator && i("hr", {
class: "k-hr"
}, null), i("div", {
class: "k-list-ul",
role: "group"
}, [this.bottomGroupItems && this.bottomGroupItems.map(function(e, r) {
var c;
return i(C, {
style: e.style,
class: e.class,
id: r + (((c = this.topGroupItems) == null ? void 0 : c.length) || 0),
key: r,
item: e,
title: e.title,
description: e.description,
disabled: e.disabled,
icon: e.icon,
svgIcon: e.svgIcon,
iconSize: e.iconSize,
iconColor: e.iconColor,
tabIndex: s || 0,
onClick: this.handleItemClick
}, null);
}, this)])]), this.$props.footer && i(B, {
footerClassName: N
}, b(u) ? u : {
default: () => [u]
})]);
return this.show && i("div", {
class: "k-actionsheet-container"
}, [i("div", {
class: "k-overlay",
onClick: this.handleOverlayClick
}, null), l ? i(G, {
onExited: this.hideActionSheet,
direction: "up",
componentChildStyle: o || this.bottomPosition,
transitionEnterDuration: y,
transitionExitDuration: y,
appear: a
}, {
default: () => [a ? v : null]
}) : v]);
},
methods: {
handleKeyDown(t) {
this.$props.navigatable && this.navigation.triggerKeyboardEvent(t);
},
onTab(t, n, o) {
o.preventDefault(), o.shiftKey ? n.focusPrevious(t) : n.focusNext(t);
},
handleOverlayClick(t) {
this.$emit("close", t), this.$props.animation || this.hideActionSheet();
},
handleItemClick(t) {
this.$emit("itemselect", t), this.$props.animation || this.hideActionSheet();
},
onEnter(t, n, o) {
if (t.ariaDisabled)
return;
const l = t.className && t.className.indexOf("k-actionsheet-item") !== -1, a = n.elements.filter((s) => s.className.indexOf("k-actionsheet-item") !== -1);
if (l) {
o.preventDefault();
const s = this.$props.items[a.indexOf(t)];
this.$emit("itemselect", {
syntheticEvent: o,
item: s,
title: s && s.title
});
}
this.$props.animation || this.hideActionSheet();
},
onEscape(t, n, o) {
o.preventDefault(), this.$emit("close", o), this.$props.animation || this.hideActionSheet();
},
hideActionSheet() {
this.show = !1;
}
}
});
export {
Y as ActionSheet
};