@progress/kendo-vue-layout
Version:
139 lines (138 loc) • 3.75 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 a, h as s } from "vue";
import { Keys as o, getDefaultSlots as $, templateRendering as i, getListeners as d, getTemplate as r, getTabIndex as v, Icon as C, getIconName as l, validatePackage as R } from "@progress/kendo-vue-common";
import { chevronUpIcon as w, chevronDownIcon as y } from "@progress/kendo-svg-icons";
import { packageMetadata as F } from "../package-metadata.mjs";
const j = /* @__PURE__ */ S({
name: "KendoExpansionPanel",
props: {
dir: String,
id: String,
tabIndex: Number,
title: String,
subtitle: String,
titleRender: [String, Object, Function],
subtitleRender: [String, Object, Function],
expandIcon: String,
expandSvgIcon: Object,
collapseIcon: String,
collapseSvgIcon: Object,
expanded: Boolean,
disabled: Boolean
},
created() {
R(F);
},
computed: {
wrapperClass() {
const {
expanded: e,
disabled: t
} = this.$props;
return {
"k-expander": !0,
"k-expanded": e,
"k-focus": this.focused && !t,
"k-disabled": t
};
},
expandIconName() {
const {
expanded: e,
expandIcon: t,
collapseIcon: n
} = this.$props;
return e ? t ? l(t) : "chevron-up" : n ? l(n) : "chevron-down";
},
expandSVGIcon() {
const {
expanded: e,
expandSvgIcon: t,
collapseSvgIcon: n
} = this.$props;
return e ? t || w : n || y;
}
},
data() {
return {
focused: !1
};
},
render() {
const e = $(this), {
expanded: t = !1,
disabled: n,
title: c,
titleRender: p,
subtitle: h,
subtitleRender: u,
ariaControls: x,
tabIndex: b,
id: f
} = this.$props, m = i.call(this, p, d.call(this)), g = r.call(this, {
h: s,
template: m,
defaultRendering: a("div", {
class: "k-expander-title"
}, [c])
}), I = i.call(this, u, d.call(this)), k = r.call(this, {
h: s,
template: I,
defaultRendering: a("div", {
class: "k-expander-sub-title"
}, [h])
});
return a("div", {
class: this.wrapperClass,
onFocusin: this.handleFocus,
onFocusout: this.handleBlur,
id: f,
onKeydown: this.onKeyDown
}, [a("div", {
role: "button",
ref: "header",
"aria-controls": x,
"aria-expanded": t,
"aria-disabled": n,
tabindex: v(b, n),
class: "k-expander-header",
onClick: this.onClick
}, [g, a("span", {
class: "k-spacer"
}, null), k, a("span", {
class: "k-expander-indicator"
}, [a(C, {
name: this.expandIconName,
icon: this.expandSVGIcon
}, null)])]), e]);
},
methods: {
onClick(e) {
this.$props.disabled || this.$emit("action", {
event: e,
expanded: this.expanded
});
},
onKeyDown(e) {
this.$props.disabled || (e.keyCode === o.enter || e.keyCode === o.space) && e.target === this.$refs.header && (e.preventDefault(), this.$emit("action", {
event: e,
expanded: this.expanded
}));
},
handleFocus() {
this.$props.disabled || (this.focused = !0);
},
handleBlur() {
this.$props.disabled || (this.focused = !1);
}
}
});
export {
j as ExpansionPanel
};