@progress/kendo-vue-layout
Version:
298 lines (297 loc) • 9.38 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 R, h as b, createVNode as l, ref as O, isVNode as M } from "vue";
import { packageMetadata as $ } from "../package-metadata.mjs";
import { templateRendering as g, getListeners as y, getTemplate as f, getTabIndex as K, getDir as W, canUseDOM as z, kendoThemeMaps as B, validatePackage as j } from "@progress/kendo-vue-common";
import { BreadcrumbOrderedList as S } from "./BreadcrumbOrderedList.mjs";
import { BreadcrumbListItem as p } from "./BreadcrumbListItem.mjs";
import { BreadcrumbDelimiter as H } from "./BreadcrumbDelimiter.mjs";
import { BreadcrumbLink as w } from "./BreadcrumbLink.mjs";
function T(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !M(e);
}
const _ = /* @__PURE__ */ R({
name: "KendoBreadcrumb",
emits: {
select: (e) => !0,
keydown: null
},
props: {
id: String,
tabIndex: Number,
disabled: Boolean,
collapseMode: {
type: String,
default: "auto",
validator: function(e) {
return ["auto", "wrap", "none"].includes(e);
}
},
ariaLabel: {
type: String,
default: "Breadcrumb"
},
breadcrumbOrderedList: [Object, Function, String],
breadcrumbListItem: [Object, Function, String],
breadcrumbDelimiter: [Object, Function, String],
breadcrumbLink: [Object, Function, String],
dataItems: {
type: Array,
default: []
},
size: {
type: String,
default: "medium"
},
dir: {
type: String,
default: void 0
},
valueField: {
type: String,
default: "id"
},
textField: {
type: String,
default: "text"
},
svgIconField: {
type: String,
default: "svgIcon"
},
iconField: {
type: String,
default: "icon"
},
onSelect: Function,
onKeydown: Function
},
created() {
this.observer = null, j($);
},
data() {
return {
currentDir: "ltr",
localData: [...this.dataItems],
listItems: [],
itemsData: [],
addDelimiter: !1
};
},
computed: {
itemClasses() {
const {
disabled: e,
size: i,
collapseMode: a
} = this.$props;
return {
"k-breadcrumb": !0,
"k-rtl": this.currentDir === "rtl",
"k-disabled": e,
"k-breadcrumb-md": !i,
"k-breadcrumb-wrap": a === "wrap",
[`k-breadcrumb-${B.sizeMap[i] || i}`]: i
};
}
},
setup() {
return {
breadcrumbRef: O(null)
};
},
mounted() {
this.currentDir = W(this.$el, this.$props.dir), this.listItems = this.breadcrumbRef.querySelectorAll("li"), this.itemsData = Array.from(this.listItems).map((e, i) => ({
id: i,
name: e.innerText,
width: e.offsetWidth,
visible: !0
})), this.resizeObserver = z && window.ResizeObserver && new ResizeObserver(this.calculateMedia), this.breadcrumbRef && this.resizeObserver && (this.resizeObserver.observe(this.breadcrumbRef), this.$nextTick(() => {
this.calculateMedia();
}));
},
unmounted() {
document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect();
},
render() {
let e;
const {
id: i,
dir: a,
tabIndex: t,
collapseMode: d,
disabled: h,
ariaLabel: v,
valueField: n,
svgIconField: u,
iconField: m,
textField: r
} = this.$props, x = g.call(this, this.$props.breadcrumbDelimiter, y.call(this)), o = this.$props.breadcrumbDelimiter ? f.call(this, {
h: b,
template: x,
additionalProps: {
dir: this.currentDir,
tabIndex: t
}
}) : l(H, {
dir: this.currentDir,
tabIndex: t
}, null), D = g.call(this, this.$props.breadcrumbLink, y.call(this)), k = l(w, {
id: this.localData[0][n],
isLast: this.localData.length - 1 === 0,
isFirst: !0,
tabIndex: t,
svgIcon: this.localData[0][u] || void 0,
icon: this.localData[0][m] || void 0,
text: this.localData[0][r] ? String(this.localData[0][r]) : void 0,
disabled: this.localData[0].disabled,
onSelect: this.handleSelect,
onKeydown: this.handleKeyDown
}, null), I = f.call(this, {
h: b,
template: D,
defaultRendering: k,
additionalProps: {
id: this.localData[0][n],
isLast: this.localData.length - 1 === 0,
isFirst: !0,
tabIndex: t,
svgIcon: this.localData[0][u] || void 0,
icon: this.localData[0][m] || void 0,
text: this.localData[0][r] ? String(this.localData[0][r]) : void 0,
disabled: this.localData[0].disabled,
onSelect: this.handleSelect,
onKeydown: this.handleKeyDown
},
defaultSlots: o
});
return l("nav", {
id: i,
ref: (s) => this.breadcrumbRef = s,
tabindex: K(t, h),
dir: this.currentDir,
"aria-label": v,
class: this.itemClasses
}, [d === "wrap" && l(S, {
rootItem: !0,
dir: a,
tabIndex: t
}, {
default: () => [l(p, {
key: this.localData[0][n],
isFirstItem: !0,
isLastItem: this.dataItems.length - 1 === 0
}, {
default: () => [I, this.localData.length > 1 && o, this.addDelimiter && d === "auto" && o]
})]
}), l(S, {
dir: a,
tabIndex: t,
collapseMode: this.$props.collapseMode
}, T(e = this.localData.map((s, c) => {
if (c === 0 && d !== "wrap")
return l(p, {
key: this.localData[0][n],
isFirstItem: !0,
isLastItem: this.localData.length - 1 === 0
}, {
default: () => [I, o, this.addDelimiter && d === "auto" && o]
});
if (c > 0) {
const L = l(w, {
id: s[n],
isLast: this.localData.length - 1 === c,
isFirst: !1,
tabIndex: t,
svgIcon: s[u] || void 0,
icon: s[m] || void 0,
text: s[r] ? String(s[r]) : void 0,
disabled: s.disabled,
onSelect: this.handleSelect,
onKeydown: this.handleKeyDown
}, null), F = f.call(this, {
h: b,
template: D,
defaultRendering: L,
additionalProps: {
id: s[n],
isLast: this.localData.length - 1 === c,
isFirst: !1,
tabIndex: t,
svgIcon: s[u] || void 0,
icon: s[m] || void 0,
text: s[r] ? String(s[r]) : void 0,
disabled: s.disabled,
onSelect: this.handleSelect,
onKeydown: this.handleKeyDown
}
});
return l(p, {
key: s[n],
isFirstItem: !1,
isLastItem: this.localData.length - 1 === c
}, {
default: () => [F, c !== this.localData.length - 1 && o]
});
}
})) ? e : {
default: () => [e]
})]);
},
methods: {
getLastHiddenItemWidth() {
const e = this.itemsData.slice().reverse().findIndex((i) => i.id !== 0 && i.visible === !1);
if (e !== -1) {
const i = this.itemsData.length - 1 - e, a = this.itemsData[i].width;
return [i, a];
}
return [-1, 0];
},
calculateMedia() {
if (this.breadcrumbRef.offsetWidth) {
this.listItems = this.breadcrumbRef.querySelectorAll("li");
let e = this.itemsData.reduce((t, d) => d.visible ? t + d.width : t, 0);
for (; this.breadcrumbRef.offsetWidth + 1 < e && this.collapseMode === "auto"; ) {
const t = this.itemsData.findIndex((h) => h.id !== 0 && h.visible === !0);
this.itemsData[t].visible = !1, this.listItems[t].style.display = "none";
const d = this.itemsData[t].width;
e = e - d, this.addDelimiter = !0;
}
let [i, a] = this.getLastHiddenItemWidth();
if (i !== -1)
for (; this.breadcrumbRef.offsetWidth - 1 > e + a && this.addDelimiter && (this.itemsData[i].visible = !0, this.listItems[i].style.display = "", e = e + a, this.addDelimiter = this.itemsData.findIndex((t) => t.visible === !1) !== -1, [i, a] = this.getLastHiddenItemWidth(), i !== -1); )
;
(this.collapseMode === "wrap" || this.collapseMode === "none") && (this.listItems.forEach((t) => {
t.style.display = "";
}), this.itemsData.forEach((t) => {
t.visible = !0;
}));
}
},
handleSelect(e) {
const i = this.dataItems.findIndex((t) => t.id === e.id), a = this.dataItems.slice(0, i + 1);
this.localData = a, this.itemsData = a, this.$emit("select", {
event: e,
id: e.id
});
},
handleKeyDown(e) {
if (e.event.key === "Enter") {
const i = this.dataItems.findIndex((t) => t.id === e.id), a = this.dataItems.slice(0, i + 1);
this.localData = a, this.itemsData = a;
}
this.$emit("keydown", {
event: e,
id: e.id
});
}
}
});
export {
_ as Breadcrumb
};