@progress/kendo-vue-dropdowns 7.0.1-develop.2 → 7.0.1-develop.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +10 -10
- package/DropDownTree/DropDownTree.js +1 -1
- package/DropDownTree/DropDownTree.mjs +22 -22
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +71 -71
- package/MultiSelectTree/MultiSelectTree.js +1 -1
- package/MultiSelectTree/MultiSelectTree.mjs +34 -34
- package/common/List.js +1 -1
- package/common/List.mjs +7 -7
- package/common/ListContainer.js +1 -1
- package/common/ListContainer.mjs +29 -29
- package/common/ListFilter.js +1 -1
- package/common/ListFilter.mjs +12 -12
- package/common/SearchBar.js +1 -1
- package/common/SearchBar.mjs +4 -4
- package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
- package/index.d.mts +78 -79
- package/index.d.ts +78 -79
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as $e, h as _, createVNode as
|
|
8
|
+
import { defineComponent as $e, h as _, createVNode as l, ref as Q, inject as Fe, isVNode as Te } from "vue";
|
|
9
9
|
import { templateRendering as b, getListeners as I, Keys as f, canUseDOM as Oe, getRef as X, guid as Z, classNames as R, kendoThemeMaps as Ve, setRef as we, Icon as Re } from "@progress/kendo-vue-common";
|
|
10
10
|
import { ListContainer as De } from "../common/ListContainer.mjs";
|
|
11
11
|
import { List as Be } from "../common/List.mjs";
|
|
@@ -37,16 +37,16 @@ var S = /* @__PURE__ */ function(e) {
|
|
|
37
37
|
const vt = /* @__PURE__ */ $e({
|
|
38
38
|
name: "KendoMultiSelect",
|
|
39
39
|
emits: {
|
|
40
|
-
changemodel:
|
|
41
|
-
"update:modelValue":
|
|
42
|
-
filterchange:
|
|
43
|
-
change:
|
|
44
|
-
pagechange:
|
|
45
|
-
focus:
|
|
46
|
-
blur:
|
|
47
|
-
open:
|
|
48
|
-
close:
|
|
49
|
-
scroll:
|
|
40
|
+
changemodel: (e) => !0,
|
|
41
|
+
"update:modelValue": (e) => !0,
|
|
42
|
+
filterchange: (e) => !0,
|
|
43
|
+
change: (e) => !0,
|
|
44
|
+
pagechange: (e) => !0,
|
|
45
|
+
focus: (e) => !0,
|
|
46
|
+
blur: (e) => !0,
|
|
47
|
+
open: (e) => !0,
|
|
48
|
+
close: (e) => !0,
|
|
49
|
+
scroll: (e) => !0
|
|
50
50
|
},
|
|
51
51
|
model: {
|
|
52
52
|
event: "changemodel"
|
|
@@ -272,7 +272,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
272
272
|
virtual: e,
|
|
273
273
|
groupField: t = "",
|
|
274
274
|
dataItems: s = []
|
|
275
|
-
} = this.$props, i = e ? e.skip : 0, n = this.isOpen, o = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened,
|
|
275
|
+
} = this.$props, i = e ? e.skip : 0, n = this.isOpen, o = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, r = !o && n, d = o && !n, c = Object.assign({}, {
|
|
276
276
|
animate: !0,
|
|
277
277
|
height: "200px"
|
|
278
278
|
}, this.$props.popupSettings), a = this.$refs.list, p = this.$refs.scrollElement;
|
|
@@ -284,7 +284,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
284
284
|
focusedItem: m,
|
|
285
285
|
focusedIndex: $
|
|
286
286
|
} = this.getFocusedState();
|
|
287
|
-
t !== "" && ($ = (g = this.base.getGroupedDataModernMode(s, t)) == null ? void 0 : g.indexOf(m)),
|
|
287
|
+
t !== "" && ($ = (g = this.base.getGroupedDataModernMode(s, t)) == null ? void 0 : g.indexOf(m)), r && e ? (this.base.scrollToVirtualItem(e, $ - i), this.prevCurrentOpened = !0) : r && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][t], this), this.base.scrollToItem($), this.prevCurrentOpened = !0) : n && o && m && this.base.scrollToItem($ - i);
|
|
288
288
|
}
|
|
289
289
|
this.scrollToFocused = !1, this.searchBarRef(), this.setValidity();
|
|
290
290
|
},
|
|
@@ -322,7 +322,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
322
322
|
dataItems: s = [],
|
|
323
323
|
dataItemKey: i,
|
|
324
324
|
virtual: n
|
|
325
|
-
} = this.$props, o = this.computedValue(),
|
|
325
|
+
} = this.$props, o = this.computedValue(), r = n ? n.skip : 0, d = s[e - r], c = o.findIndex((g) => te(g, d, i));
|
|
326
326
|
let a = [];
|
|
327
327
|
c !== -1 ? (a = o, a.splice(c, 1)) : a = [...o, d], (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) && !this.adaptiveState && this.clearFilter(t), this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.triggerOnChange(a, t), this.base.triggerPageChangeCornerItems(d, t);
|
|
328
328
|
},
|
|
@@ -337,9 +337,9 @@ const vt = /* @__PURE__ */ $e({
|
|
|
337
337
|
allowCustom: s,
|
|
338
338
|
dataItems: i = []
|
|
339
339
|
} = this.$props, n = this.isOpen, o = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
|
|
340
|
-
focusedType:
|
|
340
|
+
focusedType: r,
|
|
341
341
|
focusedIndex: d
|
|
342
|
-
} = this.getFocusedState(), c = s && o, a = oe(
|
|
342
|
+
} = this.getFocusedState(), c = s && o, a = oe(r), p = this.base, g = p.vs;
|
|
343
343
|
if (n && t === f.up && a)
|
|
344
344
|
this.currentFocusedIndex !== void 0 && (e.data.currentFocusedIndex = void 0);
|
|
345
345
|
else {
|
|
@@ -358,9 +358,9 @@ const vt = /* @__PURE__ */ $e({
|
|
|
358
358
|
dataItems: s = [],
|
|
359
359
|
allowCustom: i,
|
|
360
360
|
virtual: n
|
|
361
|
-
} = this.$props, o = n ? n.skip : 0,
|
|
361
|
+
} = this.$props, o = n ? n.skip : 0, r = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
|
|
362
362
|
focusedIndex: d
|
|
363
|
-
} = this.getFocusedState(), c = i &&
|
|
363
|
+
} = this.getFocusedState(), c = i && r, a = s[e - o];
|
|
364
364
|
a && d !== e ? this.currentFocusedIndex !== e && (t.data.currentFocusedIndex = e, t.data.activedescendant = L.PopupList) : c && e === -1 && this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.base.triggerPageChangeCornerItems(a, t);
|
|
365
365
|
},
|
|
366
366
|
searchBarRef() {
|
|
@@ -383,19 +383,19 @@ const vt = /* @__PURE__ */ $e({
|
|
|
383
383
|
} = this.getFocusedState(), o = this.base.initState();
|
|
384
384
|
if (o.event = e, !s && this.computedValue().length > 0 && (t === f.left || t === f.right || t === f.home || t === f.end || t === f.delete || t === f.backspace))
|
|
385
385
|
return this.onTagsNavigate(e, o);
|
|
386
|
-
const
|
|
386
|
+
const r = () => {
|
|
387
387
|
e.preventDefault(), this.base.togglePopup(o), this.applyState(o);
|
|
388
388
|
};
|
|
389
|
-
i ? e.altKey && t === f.up ?
|
|
389
|
+
i ? e.altKey && t === f.up ? r() : t === f.up || t === f.down ? (e.preventDefault(), this.onNavigate(o, t)) : t === f.enter ? (e.preventDefault(), this.$props.allowCustom && s && n === null ? this.customItemSelect(e) : this.selectFocusedItem(e)) : t === f.esc && (this.adaptiveState && this.handleWrapperClick(e), r()) : e.altKey && t === f.down && r();
|
|
390
390
|
},
|
|
391
391
|
onTagsNavigate(e, t) {
|
|
392
392
|
const s = e.keyCode, i = this.currentFocusedTag, n = this._tags, o = this.$props.dataItemKey;
|
|
393
|
-
let
|
|
394
|
-
const c =
|
|
393
|
+
let r = i ? n.findIndex((a) => ae(a, i, o)) : -1, d;
|
|
394
|
+
const c = r !== -1;
|
|
395
395
|
if (s === f.left)
|
|
396
|
-
c ?
|
|
396
|
+
c ? r = Math.max(0, r - 1) : r = n.length - 1, d = n[r];
|
|
397
397
|
else if (s === f.right)
|
|
398
|
-
|
|
398
|
+
r === n.length - 1 ? d = void 0 : c && (r = Math.min(n.length - 1, r + 1), d = n[r]);
|
|
399
399
|
else if (s === f.home)
|
|
400
400
|
d = n[0];
|
|
401
401
|
else if (s === f.end)
|
|
@@ -403,12 +403,12 @@ const vt = /* @__PURE__ */ $e({
|
|
|
403
403
|
else if (s === f.delete) {
|
|
404
404
|
if (c) {
|
|
405
405
|
const a = this.computedValue();
|
|
406
|
-
H(a, n[
|
|
406
|
+
H(a, n[r].data, o), this.triggerOnChange(a, t);
|
|
407
407
|
}
|
|
408
408
|
} else if (s === f.backspace) {
|
|
409
409
|
const a = this.computedValue();
|
|
410
410
|
if (c)
|
|
411
|
-
H(a, n[
|
|
411
|
+
H(a, n[r].data, o), this.triggerOnChange(a, t);
|
|
412
412
|
else if (!c && n.length) {
|
|
413
413
|
const p = n.pop();
|
|
414
414
|
H(a, p.data, o), this.triggerOnChange(a, t);
|
|
@@ -439,7 +439,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
439
439
|
dataItems: i = [],
|
|
440
440
|
dataItemKey: n,
|
|
441
441
|
virtual: o,
|
|
442
|
-
textField:
|
|
442
|
+
textField: r,
|
|
443
443
|
focusedItemIndex: d = Ee
|
|
444
444
|
} = this.$props, c = o && o.skip || 0;
|
|
445
445
|
let a;
|
|
@@ -457,7 +457,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
457
457
|
focusedType: S.CustomItem
|
|
458
458
|
};
|
|
459
459
|
if (t)
|
|
460
|
-
return a = d(i, t,
|
|
460
|
+
return a = d(i, t, r), {
|
|
461
461
|
focusedItem: i[a],
|
|
462
462
|
focusedIndex: a + c,
|
|
463
463
|
focusedType: S.ListItem
|
|
@@ -572,14 +572,14 @@ const vt = /* @__PURE__ */ $e({
|
|
|
572
572
|
} = this.$props;
|
|
573
573
|
let {
|
|
574
574
|
dataItems: o = []
|
|
575
|
-
} = this.$props,
|
|
575
|
+
} = this.$props, r;
|
|
576
576
|
if (!n || !o.length)
|
|
577
577
|
return;
|
|
578
578
|
const d = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : s ? s.children[0].offsetHeight : 0), a = e.target.scrollTop - t.skip * d;
|
|
579
|
-
n && (o = this.base.getGroupedDataModernMode(o, n), o = this.base.getGroupedDataModernMode(o, n),
|
|
579
|
+
n && (o = this.base.getGroupedDataModernMode(o, n), o = this.base.getGroupedDataModernMode(o, n), r = o[0][n]);
|
|
580
580
|
for (let p = 1; p < o.length && !(d * p > a); p++)
|
|
581
|
-
o[p] && o[p][n] && (
|
|
582
|
-
|
|
581
|
+
o[p] && o[p][n] && (r = o[p][n]);
|
|
582
|
+
r !== this.group && (i.data.group = r, this.applyState(i));
|
|
583
583
|
}
|
|
584
584
|
},
|
|
585
585
|
render() {
|
|
@@ -590,7 +590,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
590
590
|
disabled: i,
|
|
591
591
|
tags: n,
|
|
592
592
|
textField: o,
|
|
593
|
-
dataItemKey:
|
|
593
|
+
dataItemKey: r,
|
|
594
594
|
virtual: d,
|
|
595
595
|
loading: c,
|
|
596
596
|
size: a,
|
|
@@ -598,10 +598,10 @@ const vt = /* @__PURE__ */ $e({
|
|
|
598
598
|
rounded: g,
|
|
599
599
|
tagsRounded: m,
|
|
600
600
|
removeTagIcon: $,
|
|
601
|
-
adaptiveTitle:
|
|
601
|
+
adaptiveTitle: re,
|
|
602
602
|
header: P,
|
|
603
603
|
footer: W,
|
|
604
|
-
inputAttributes:
|
|
604
|
+
inputAttributes: le,
|
|
605
605
|
groupStickyHeaderItemRender: de,
|
|
606
606
|
dataItems: F = []
|
|
607
607
|
} = this.$props, ue = this.currentFocused, D = Object.assign({}, {
|
|
@@ -627,7 +627,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
627
627
|
} = this.$props, {
|
|
628
628
|
focusedIndex: O
|
|
629
629
|
} = this.getFocusedState(), C = v.length === 0 || G.length === 0 && !M ? k : void 0, V = h === L.TagsList && B !== void 0 ? `tag-${this.base.guid}-${B.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${O}`;
|
|
630
|
-
return
|
|
630
|
+
return l(Ae, {
|
|
631
631
|
id: u,
|
|
632
632
|
size: Math.max((C || "").length, M.length, 1),
|
|
633
633
|
tabIndex: this.$props.tabIndex,
|
|
@@ -647,7 +647,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
647
647
|
"aria-describedBy": `tagslist-${this.base.guid}${this.$props.ariaDescribedBy ? " " + this.$props.ariaDescribedBy : ""}`,
|
|
648
648
|
"aria-labelledBy": this.$props.ariaLabelledBy,
|
|
649
649
|
"aria-label": this.$props.ariaLabel,
|
|
650
|
-
inputAttributes:
|
|
650
|
+
inputAttributes: le
|
|
651
651
|
}, null);
|
|
652
652
|
}, U = function() {
|
|
653
653
|
let u;
|
|
@@ -657,14 +657,14 @@ const vt = /* @__PURE__ */ $e({
|
|
|
657
657
|
focusedIndex: w
|
|
658
658
|
} = this.getFocusedState(), K = `translateY(${y.translate}px)`;
|
|
659
659
|
let J = F;
|
|
660
|
-
return h && (J = this.base.getGroupedDataModernMode(F, h)),
|
|
660
|
+
return h && (J = this.base.getGroupedDataModernMode(F, h)), l(Be, {
|
|
661
661
|
id: this.base.listBoxId,
|
|
662
662
|
show: A,
|
|
663
663
|
dataItems: J.slice(),
|
|
664
664
|
focusedIndex: w,
|
|
665
665
|
value: this.computedValue(),
|
|
666
666
|
textField: o,
|
|
667
|
-
valueField:
|
|
667
|
+
valueField: r,
|
|
668
668
|
optionsGuid: this.base.guid,
|
|
669
669
|
ref: "list",
|
|
670
670
|
wrapperStyle: {
|
|
@@ -686,7 +686,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
686
686
|
default: () => [u]
|
|
687
687
|
});
|
|
688
688
|
}, ge = function() {
|
|
689
|
-
return y.enabled &&
|
|
689
|
+
return y.enabled && l("div", {
|
|
690
690
|
ref: "scrollElement",
|
|
691
691
|
key: "scrollElementKey"
|
|
692
692
|
}, null);
|
|
@@ -695,22 +695,22 @@ const vt = /* @__PURE__ */ $e({
|
|
|
695
695
|
allowCustom: h
|
|
696
696
|
} = this.$props, k = b.call(this, this.$props.groupStickyHeaderItemRender, I.call(this)), O = u.getTemplateDef.call(this, P), C = u.getTemplateDef.call(this, W), V = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
|
|
697
697
|
focusedType: w
|
|
698
|
-
} = this.getFocusedState(), K = h && V &&
|
|
698
|
+
} = this.getFocusedState(), K = h && V && l("div", {
|
|
699
699
|
class: "k-list",
|
|
700
700
|
key: "customitem",
|
|
701
701
|
onClick: this.customItemSelect
|
|
702
|
-
}, [
|
|
702
|
+
}, [l("div", {
|
|
703
703
|
class: R("k-item k-custom-item", {
|
|
704
704
|
"k-focus": oe(w)
|
|
705
705
|
})
|
|
706
|
-
}, [V,
|
|
706
|
+
}, [V, l(Re, {
|
|
707
707
|
name: "plus",
|
|
708
708
|
icon: je,
|
|
709
709
|
style: {
|
|
710
710
|
float: "right"
|
|
711
711
|
}
|
|
712
712
|
}, null)])]);
|
|
713
|
-
return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(F[0], this.$props.groupField)),
|
|
713
|
+
return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(F[0], this.$props.groupField)), l(De, {
|
|
714
714
|
ref: "container",
|
|
715
715
|
onMousedown: Qe,
|
|
716
716
|
dir: s !== void 0 ? s : u.dirCalculated,
|
|
@@ -730,18 +730,18 @@ const vt = /* @__PURE__ */ $e({
|
|
|
730
730
|
},
|
|
731
731
|
itemsCount: F.length
|
|
732
732
|
}, {
|
|
733
|
-
default: () => [O &&
|
|
733
|
+
default: () => [O && l("div", {
|
|
734
734
|
class: "k-list-header"
|
|
735
|
-
}, [O]), K, this.group && F.length !== 0 &&
|
|
735
|
+
}, [O]), K, this.group && F.length !== 0 && l(ee, {
|
|
736
736
|
group: this.group,
|
|
737
737
|
render: k
|
|
738
|
-
}, null), U.call(this), C &&
|
|
738
|
+
}, null), U.call(this), C && l("div", {
|
|
739
739
|
class: "k-list-footer"
|
|
740
740
|
}, [C]), d && P]
|
|
741
741
|
});
|
|
742
742
|
}, ve = function() {
|
|
743
743
|
const u = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
|
|
744
|
-
return this.$props.filterable &&
|
|
744
|
+
return this.$props.filterable && l(qe, {
|
|
745
745
|
value: u,
|
|
746
746
|
ref: "filterInput",
|
|
747
747
|
onChange: this.onChangeHandler,
|
|
@@ -750,17 +750,17 @@ const vt = /* @__PURE__ */ $e({
|
|
|
750
750
|
rounded: g,
|
|
751
751
|
fillMode: p
|
|
752
752
|
}, null);
|
|
753
|
-
}, be = () => [
|
|
753
|
+
}, be = () => [l("div", {
|
|
754
754
|
class: "k-actionsheet-titlebar-group k-hbox"
|
|
755
|
-
}, [
|
|
755
|
+
}, [l("div", {
|
|
756
756
|
class: "k-actionsheet-title"
|
|
757
|
-
}, [
|
|
757
|
+
}, [l("div", {
|
|
758
758
|
class: "k-text-center"
|
|
759
|
-
}, [
|
|
759
|
+
}, [re]), l("div", {
|
|
760
760
|
class: "k-actionsheet-subtitle k-text-center"
|
|
761
|
-
}, null)]),
|
|
761
|
+
}, null)]), l("div", {
|
|
762
762
|
class: "k-actionsheet-actions"
|
|
763
|
-
}, [
|
|
763
|
+
}, [l(j, {
|
|
764
764
|
tabIndex: 5,
|
|
765
765
|
"aria-label": "Cancel",
|
|
766
766
|
"aria-disabled": "false",
|
|
@@ -769,11 +769,11 @@ const vt = /* @__PURE__ */ $e({
|
|
|
769
769
|
onClick: this.onCancel,
|
|
770
770
|
icon: "x",
|
|
771
771
|
svgIcon: _e
|
|
772
|
-
}, null)])]),
|
|
772
|
+
}, null)])]), l("div", {
|
|
773
773
|
class: "k-actionsheet-titlebar-group k-actionsheet-filter"
|
|
774
774
|
}, [ve.call(this)])], Ie = b.call(this, be, I.call(this)), Se = () => {
|
|
775
775
|
const u = q.toLanguageString(se, ie[se]), h = q.toLanguageString(ne, ie[ne]);
|
|
776
|
-
return [
|
|
776
|
+
return [l(j, {
|
|
777
777
|
size: "large",
|
|
778
778
|
"aria-label": u,
|
|
779
779
|
"aria-disabled": "false",
|
|
@@ -781,7 +781,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
781
781
|
onClick: this.onCancel
|
|
782
782
|
}, E(u) ? u : {
|
|
783
783
|
default: () => [u]
|
|
784
|
-
}),
|
|
784
|
+
}), l(j, {
|
|
785
785
|
themeColor: "primary",
|
|
786
786
|
size: "large",
|
|
787
787
|
"aria-label": h,
|
|
@@ -793,24 +793,24 @@ const vt = /* @__PURE__ */ $e({
|
|
|
793
793
|
})];
|
|
794
794
|
}, ye = b.call(this, Se, I.call(this)), ke = () => {
|
|
795
795
|
const u = this.base.getTemplateDef.call(this, P, _), h = this.base.getTemplateDef.call(this, W, _), k = b.call(this, de, I.call(this));
|
|
796
|
-
return
|
|
796
|
+
return l("div", {
|
|
797
797
|
class: "k-list-container"
|
|
798
|
-
}, [u &&
|
|
798
|
+
}, [u && l("div", {
|
|
799
799
|
class: "k-list-header"
|
|
800
|
-
}, [u]),
|
|
800
|
+
}, [u]), l("div", {
|
|
801
801
|
class: R("k-list", {
|
|
802
802
|
[`k-list-${z[a] || a}`]: T ? !1 : a,
|
|
803
803
|
"k-list-lg": !!T,
|
|
804
804
|
"k-virtual-list": y.enabled
|
|
805
805
|
})
|
|
806
|
-
}, [this.group && F.length !== 0 &&
|
|
806
|
+
}, [this.group && F.length !== 0 && l(ee, {
|
|
807
807
|
group: this.group,
|
|
808
808
|
render: k
|
|
809
|
-
}, null), U.call(this), h &&
|
|
809
|
+
}, null), U.call(this), h && l("div", {
|
|
810
810
|
class: "k-list-footer"
|
|
811
811
|
}, [h])])]);
|
|
812
812
|
}, Ce = b.call(this, ke, I.call(this)), xe = function() {
|
|
813
|
-
return
|
|
813
|
+
return l(Ge, {
|
|
814
814
|
expand: A,
|
|
815
815
|
animation: !0,
|
|
816
816
|
animationStyles: this.animationStyles,
|
|
@@ -825,7 +825,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
825
825
|
}, null);
|
|
826
826
|
}, Y = [_(function() {
|
|
827
827
|
let u;
|
|
828
|
-
return
|
|
828
|
+
return l("span", {
|
|
829
829
|
ref: we(this, "kendoAnchor"),
|
|
830
830
|
class: R("k-multiselect", "k-input", {
|
|
831
831
|
[`k-input-${z[a] || a}`]: a,
|
|
@@ -845,7 +845,7 @@ const vt = /* @__PURE__ */ $e({
|
|
|
845
845
|
onFocusin: this.handleFocus,
|
|
846
846
|
onClick: this.handleWrapperClick,
|
|
847
847
|
onMousedown: Ne
|
|
848
|
-
}, [
|
|
848
|
+
}, [l(Me, {
|
|
849
849
|
removeTagIcon: $,
|
|
850
850
|
tagsRounded: m,
|
|
851
851
|
size: a,
|
|
@@ -854,24 +854,24 @@ const vt = /* @__PURE__ */ $e({
|
|
|
854
854
|
onTagdelete: this.onTagDelete,
|
|
855
855
|
dataItems: v,
|
|
856
856
|
guid: this.base.guid,
|
|
857
|
-
focused: B ? v.find((h) => ae(h, B,
|
|
857
|
+
focused: B ? v.find((h) => ae(h, B, r)) : void 0
|
|
858
858
|
}, E(u = fe.call(this, N)) ? u : {
|
|
859
859
|
default: () => [u]
|
|
860
|
-
}), v.length > 0 && ce &&
|
|
860
|
+
}), v.length > 0 && ce && l(He, {
|
|
861
861
|
onClearclick: this.clearButtonClick
|
|
862
|
-
}, null),
|
|
862
|
+
}, null), l("span", {
|
|
863
863
|
class: c ? "k-input-loading-icon k-icon k-i-loading" : void 0
|
|
864
864
|
}, null), !T && me.call(this)]);
|
|
865
865
|
}.call(this), {
|
|
866
866
|
...this.$attrs
|
|
867
867
|
}), T && xe.call(this)];
|
|
868
|
-
return t ?
|
|
868
|
+
return t ? l("span", {
|
|
869
869
|
class: this.spanClassNames,
|
|
870
870
|
dir: this.$props.dir
|
|
871
|
-
}, [Y, this.$props.label ? N ?
|
|
871
|
+
}, [Y, this.$props.label ? N ? l("label", {
|
|
872
872
|
for: N,
|
|
873
873
|
class: "k-floating-label"
|
|
874
|
-
}, [this.$props.label]) :
|
|
874
|
+
}, [this.$props.label]) : l("span", {
|
|
875
875
|
class: "k-label"
|
|
876
876
|
}, [this.$props.label]) : null]) : Y;
|
|
877
877
|
}
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),i=require("@progress/kendo-vue-common"),ae=require("@progress/kendo-vue-popup"),ne=require("@progress/kendo-vue-intl"),D=require("@progress/kendo-vue-treeview"),oe=require("../package-metadata.js"),y=require("../common/utils.js"),le=require("../DropDownTree/ListNoData.js"),p=require("../messages/main.js"),de=require("@progress/kendo-vue-labels"),$=require("@progress/kendo-vue-buttons"),re=require("../MultiSelect/TagList.js"),ce=require("../common/ClearButton.js"),E=require("../common/ListFilter.js"),he=require("./utils.js"),L=require("../common/constants.js"),ue=require("@progress/kendo-vue-layout"),pe=require("@progress/kendo-svg-icons"),fe=require("../common/DropDownBase.js");function F(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const ge="Please select a value from the list!",{sizeMap:q,roundedMap:me}=i.kendoThemeMaps,ve=e=>e.split("_").map(t=>parseInt(t,10)),A=(e,t)=>{const{validationMessage:a,valid:n,required:o}=e;return{customError:a!==void 0,valid:!!(n!==void 0?n:!o||t),valueMissing:!t}},ye=s.defineComponent({name:"KendoMultiSelectTree",model:{event:"changemodel"},emits:{open:null,close:null,focus:null,blur:null,change:null,filterchange:null,expandchange:null,changemodel:null,"update:modelValue":null},props:{opened:{type:Boolean,default:void 0},disabled:Boolean,dir:String,tabIndex:Number,accessKey:String,dataItems:{type:Array,default:function(){return[]}},value:Array,modelValue:Array,valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},checkField:{type:String,default:"checkField"},checkIndeterminateField:{type:String,default:"checkIndeterminateField"},expandField:String,subItemsField:{type:String,default:"items"},className:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},required:Boolean,name:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,tags:Array,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","outline","solid"].includes(e)}},item:[String,Function,Object],tag:[String,Function,Object],header:[String,Function,Object],footer:[String,Function,Object],listNoData:[String,Function,Object],adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0}},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:L.MOBILE_SMALL_DEVICE,medium:L.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,i.validatePackage(oe.packageMetadata),this.base=new fe(this),this.componentGuid=i.guid(),this.anchor=i.guid()},data(){return{focusedTagState:void 0,openState:!1,focusedState:!1,filterState:"",currentValue:[],popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{animationStyles(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return this.windowWidth<=this.adaptiveModeBreakpoints.medium&&this.$props.adaptive},isOpen(){return this.opened!==void 0?this.opened:this.openState},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return!!this.computedValue.length},tagsToRenderRef(){if(this.initialAdaptiveRenderingValues===void 0)return this.tags===void 0?this.computedValue.map(e=>({text:y.getItemValue(e,this.$props.textField),data:[e]})):[...this.tags];{const e=this.initialAdaptiveRenderingValues;return e.length>0&&e.map(t=>({text:y.getItemValue(t,this.$props.textField),data:[t]}))}}},watch:{isOpen:function(e){e&&this.value?this.initialAdaptiveRenderingValues=[...this.value]:this.initialAdaptiveRenderingValues=void 0}},mounted(){this.observer=i.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.elementRef=i.getRef(this,"kendoAnchor"),this.inputRef=i.getRef(this,"input"),this.selectRef=i.getRef(this,"select"),this.treeViewRef=i.getRef(this,"treeView"),this.skipFocusRef=!1,this.popupRef=i.getRef(this,"popup"),this.calculatePopupWidth()},updated(){this.inputRef=i.getRef(this,"input"),this.treeViewRef=i.getRef(this,"treeView"),this.popupRef&&this.isOpen&&this.hasValue&&this.popupRef.reposition(),this.setValidity(),this.calculatePopupWidth()},render(){let e;const t=this.$props.id||this.componentGuid,{dataItems:a,dataItemKey:n,popupSettings:o={},disabled:r,placeholder:l,label:d,name:c,checkField:g,checkIndeterminateField:k,subItemsField:I,validationMessage:O,valid:P,value:C,required:R,validityStyles:W,adaptiveTitle:z}=this.$props,b=i.getTabIndex(this.$props.tabIndex,r),w=ne.provideLocalizationService(this),j=A({validationMessage:O,valid:P,required:R},this.hasValue),V=this.$props.dir,K=this.adaptiveState,N=i.templateRendering.call(this,this.item,i.getListeners.call(this)),_=i.templateRendering.call(this,this.tag,i.getListeners.call(this)),G=i.templateRendering.call(this,this.$props.header,i.getListeners.call(this)),H=i.templateRendering.call(this,this.$props.footer,i.getListeners.call(this)),T=i.getTemplate.call(this,{h:s.h,template:G}),x=i.getTemplate.call(this,{h:s.h,template:H}),U=i.templateRendering.call(this,this.$props.listNoData,i.getListeners.call(this)),J=s.createVNode(le.ListNoData,null,F(e=w.toLanguageString(p.nodata,p.messages[p.nodata]))?e:{default:()=>[e]}),M=i.getTemplate.call(this,{h:s.h,defaultRendering:J,template:U}),B=!W||j.valid,{size:h,rounded:m,fillMode:v}=this.$props,Q=()=>[s.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[s.createVNode("div",{class:"k-actionsheet-title"},[s.createVNode("div",{class:"k-text-center"},[z]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[l])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode($.Button,{tabIndex:5,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onCancel,icon:"x",svgIcon:pe.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(E.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:i.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:h,rounded:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null)])],X=i.templateRendering.call(this,Q,i.getListeners.call(this)),Y=()=>{const u=w.toLanguageString(p.adaptiveModeFooterCancel,p.messages[p.adaptiveModeFooterCancel]),f=w.toLanguageString(p.adaptiveModeFooterApply,p.messages[p.adaptiveModeFooterApply]);return[s.createVNode($.Button,{size:"large","aria-label":u,"aria-disabled":"false",type:"button",onClick:this.onCancel},F(u)?u:{default:()=>[u]}),s.createVNode($.Button,{themeColor:"primary",size:"large","aria-label":f,"aria-disabled":"false",type:"button",onClick:this.closePopup},F(f)?f:{default:()=>[f]})]},Z=i.templateRendering.call(this,Y,i.getListeners.call(this)),ee=()=>{const u=this.base.getTemplateDef.call(this,T,s.h),f=this.base.getTemplateDef.call(this,x,s.h);return[u&&s.createVNode("div",{class:"k-list-header"},[u]),a.length>0?s.createVNode(D.TreeView,{ref:i.setRef(this,"treeView"),tabIndex:b,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:I,expandIcons:!0,onItemclick:this.onChange,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:"large",item:N},null):M,f&&s.createVNode("div",{class:"k-list-footer"},[f])]},te=i.templateRendering.call(this,ee,i.getListeners.call(this)),ie=function(){return s.createVNode(ue.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,footerClassName:"k-actions k-actions-stretched",contentClassName:"!k-overflow-hidden",header:X,content:te,footer:Z,onClose:this.onCancel,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},se=function(){return s.createVNode("span",{ref:i.setRef(this,"kendoAnchor"),class:i.classNames("k-multiselecttree k-input",this.$props.className,{[`k-input-${q[h]||h}`]:h,[`k-rounded-${me[m]||m}`]:m,[`k-input-${v}`]:v,"k-focus":this.focusedState&&!r,"k-invalid":!B,"k-disabled":r,"k-loading":this.$props.loading,"k-required":R}),tabindex:b,accesskey:this.$props.accessKey,id:t,dir:V,onKeydown:this.onWrapperKeyDown,onMousedown:this.onWrapperMouseDown,onFocusin:this.onFocus,onFocusout:this.onBlur,role:"combobox","aria-haspopup":"tree","aria-expanded":this.isOpen,"aria-disabled":r,"aria-label":d,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaLabelledBy?this.$props.ariaLabelledBy:"tagslist-"+t,"aria-required":this.$props.required,onClick:this.onWrapperClick},[this.tagsToRenderRef.length>0&&s.createVNode(re.TagList,{id:"tagslist-"+t,class:i.classNames("k-input-values k-chip-list k-selection-multiple",{[`k-chip-list-${q[h]||h}`]:h,"k-readonly":this.hasValue}),tagRender:_,onTagdelete:this.onTagDelete,dataItems:this.tagsToRenderRef,guid:t,focused:this.focusedTagState?this.tagsToRenderRef.find(u=>this.focusedTagState&&y.matchTags(u,this.focusedTagState,n)):void 0,tagsRounded:m,size:h,fillMode:v},null),s.createVNode("span",{class:"k-input-inner",role:"combobox",tabindex:b,"aria-expanded":this.isOpen,"aria-describedby":"tagslist-"+t,"aria-label":this.$props.ariaLabelledBy},[this.tagsToRenderRef.length===0&&s.createVNode("span",{class:"k-input-value-text"},[l])]),this.$props.loading&&s.createVNode(i.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!r&&s.createVNode(ce.ClearButton,{onClearclick:this.onClear},null),s.createVNode("select",{name:c,ref:i.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,required:R,title:d,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},[s.createVNode("option",{value:this.$props.valueMap?this.$props.valueMap.call(void 0,C):C},null)]),!K&&s.createVNode(ae.Popup,{style:{width:this.popupWidth,direction:V},popupClass:i.classNames(o.popupClass,"k-multiselecttree-popup","popup-"+this.componentGuid),class:i.classNames(o.className,{"k-rtl":V==="rtl"}),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo,ref:i.setRef(this,"popup")},{default:()=>[this.$props.filterable&&s.createVNode(E.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:i.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:h,rounded:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null),T&&s.createVNode("div",{class:"k-list-header"},[T]),a.length>0?s.createVNode(D.TreeView,{ref:i.setRef(this,"treeView"),tabIndex:b,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:I,expandIcons:!0,onItemclick:this.onChange,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:h,item:N},null):M,x&&s.createVNode("div",{class:"k-list-footer"},[x])]})])},S=[s.h(se.call(this),{...this.$attrs}),K&&ie.call(this)];return d?s.createVNode(de.FloatingLabel,{label:d,editorValue:this.hasValue,editorPlaceholder:l,editorValid:B,editorDisabled:r,editorId:t,dir:V},F(S)?S:{default:()=>[S]}):S},methods:{clearFilter(e){this.onFilterChange(e,"")},onCancel(e){const t={event:e,target:this},a={items:[],operation:"toggle",value:this.initialAdaptiveRenderingValues,...t};this.$emit("change",a),this.closePopup(e)},calculateMedia(e){for(let t of e)this.windowWidth=t.target.clientWidth},calculatePopupWidth(){this.elementRef&&(this.popupWidth=this.popupSettings.width!==void 0?this.popupSettings.width:this.elementRef.offsetWidth+"px")},focus(){this.$el&&this.$el.focus()},setValidity(){if(this.selectRef&&this.selectRef.setCustomValidity){const{validationMessage:e,valid:t,required:a}=this.$props,n=A({validationMessage:e,valid:t,required:a},this.hasValue);this.selectRef.setCustomValidity(n.valid?"":this.validationMessage===void 0?ge:this.validationMessage)}},changeValue(e,t,a){const n={dataItemKey:this.dataItemKey,checkField:this.checkField,checkIndeterminateField:this.checkIndeterminateField,expandField:this.expandField,subItemsField:this.subItemsField},o=he.getMultiSelectTreeValue(this.dataItems,{...n,items:t,operation:a,value:this.computedValue}),r={items:t,operation:a,value:o,...e};this.$emit("changemodel",o),this.$emit("update:modelValue",o),this.$emit("change",r)},onChange(e){if(y.areSame(e.item,this.computedValue,this.dataItemKey))return;const{item:t,event:a}=e,n={event:a,target:this};this.changeValue(n,[t],"toggle")},openPopup(e){if(!this.isOpen){const t={...e};this.$emit("open",t),this.opened===void 0&&(this.openState=!0)}},closePopup(e){if(this.$props.filterable&&this.clearFilter({...e,target:{...e.target,value:""}}),this.isOpen){const t={...e};this.$emit("close",t),this.opened===void 0&&(this.openState=!1)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focusedState&&this.isOpen)this.closePopup({target:this});else if(this.$props.filterable){const e=this.inputRef&&this.inputRef.input;this.focusElement(e)}else this.focusElement(this.treeViewRef&&this.treeViewRef.input)},onPopupClosed(){this.focusedState&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focusedState&&!this.skipFocusRef){this.focusedState=!0;const t={event:e,target:this};this.$emit("focus",t)}},onBlur(e){if(this.focusedState&&!this.skipFocusRef&&!this.adaptiveState){this.focusedTagState=void 0,this.focusedState=!1;const t={event:e,target:this},a={...t};(!e.relatedTarget||!e.relatedTarget.closest(".popup-"+this.componentGuid))&&(this.$emit("blur",a),this.closePopup(t))}},onWrapperMouseDown(){this.focusedState&&this.switchFocus(i.noop)},onWrapperClick(e){if(!this.$props.disabled&&!e.defaultPrevented){this.focusedState=!0;const t={event:e,target:this};this.isOpen||this.openPopup(t)}},onWrapperKeyDown(e){const{keyCode:t,altKey:a}=e,n=this.treeViewRef&&this.treeViewRef.$el,o=this.inputRef&&this.inputRef.input;if(this.$props.disabled||e.defaultPrevented&&o===e.target)return;const r={event:e,target:this};if(this.computedValue&&this.computedValue.length>0&&(t===i.Keys.left||t===i.Keys.right||t===i.Keys.home||t===i.Keys.end||t===i.Keys.delete||t===i.Keys.backspace)){const l=this.tagsToRenderRef;let d=this.focusedTagState?l.findIndex(k=>y.matchTags(k,this.focusedTagState,this.dataItemKey)):-1,c;const g=d!==-1;t===i.Keys.left?(g?d=Math.max(0,d-1):d=l.length-1,c=l[d]):t===i.Keys.right?g?(d=Math.min(l.length-1,d+1),c=l[d]):c=l[0]:t===i.Keys.home?c=l[0]:t===i.Keys.end?c=l[l.length-1]:(t===i.Keys.delete||t===i.Keys.backspace)&&g&&this.changeValue(r,l[d].data,"delete"),c!==this.focusedTagState&&(this.focusedTagState=c)}if(this.isOpen)if(t===i.Keys.esc||a&&t===i.Keys.up)e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),this.closePopup(r);else if(n&&n.querySelector(".k-focus")&&(t===i.Keys.up||t===i.Keys.down||t===i.Keys.left||t===i.Keys.right||t===i.Keys.home||t===i.Keys.end)){if(t===i.Keys.up){const l=Array.from(n.querySelectorAll(".k-treeview-item")),d=[...l].reverse().find(c=>!!(c&&c.querySelector(".k-focus")));if(d&&l.indexOf(d)===0)return this.switchFocus(()=>{this.focusElement(o||this.elementRef)})}this.switchFocus(i.noop)}else t===i.Keys.down&&this.switchFocus(()=>{this.focusElement(o||n)});else a&&t===i.Keys.down&&(e.preventDefault(),this.openPopup(r))},onInputKeyDown(e){const{keyCode:t,altKey:a}=e;(t===i.Keys.esc||a&&t===i.Keys.up)&&(e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),t===i.Keys.esc&&this.adaptiveState?this.onCancel(e):this.closePopup(e)),!(a||t!==i.Keys.up&&t!==i.Keys.down)&&(e.preventDefault(),this.switchFocus(t===i.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)}))},onClear(e){const t={event:e,target:this};this.changeValue(t,[],"clear"),this.closePopup(t),this.filterState="",e.preventDefault()},onTagDelete(e,t){if(this.closePopup({target:this}),!this.focusedState){const a=this.inputRef&&this.inputRef.input;this.focusElement(a)}this.changeValue({event:t,target:this},e,"delete")},onExpand(e){const{item:t,itemHierarchicalIndex:a,event:n}=e,o={level:ve(a),item:t,event:n,target:this};this.$emit("expandchange",o)},onFilterChange(e,t){const a=t?"":e.target.value,o={filter:{field:this.$props.textField,operator:"contains",value:a},event:e,target:this};this.$emit("filterchange",o),this.$props.filter===void 0&&(this.filterState=a)}}});exports.MultiSelectTree=ye;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),i=require("@progress/kendo-vue-common"),ae=require("@progress/kendo-vue-popup"),ne=require("@progress/kendo-vue-intl"),D=require("@progress/kendo-vue-treeview"),oe=require("../package-metadata.js"),y=require("../common/utils.js"),le=require("../DropDownTree/ListNoData.js"),p=require("../messages/main.js"),re=require("@progress/kendo-vue-labels"),$=require("@progress/kendo-vue-buttons"),de=require("../MultiSelect/TagList.js"),ce=require("../common/ClearButton.js"),E=require("../common/ListFilter.js"),ue=require("./utils.js"),L=require("../common/constants.js"),he=require("@progress/kendo-vue-layout"),pe=require("@progress/kendo-svg-icons"),fe=require("../common/DropDownBase.js");function F(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const ge="Please select a value from the list!",{sizeMap:q,roundedMap:me}=i.kendoThemeMaps,ve=e=>e.split("_").map(t=>parseInt(t,10)),A=(e,t)=>{const{validationMessage:a,valid:n,required:o}=e;return{customError:a!==void 0,valid:!!(n!==void 0?n:!o||t),valueMissing:!t}},ye=s.defineComponent({name:"KendoMultiSelectTree",model:{event:"changemodel"},emits:{open:e=>!0,close:e=>!0,focus:e=>!0,blur:e=>!0,change:e=>!0,filterchange:e=>!0,expandchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0},props:{opened:{type:Boolean,default:void 0},disabled:Boolean,dir:String,tabIndex:Number,accessKey:String,dataItems:{type:Array,default:function(){return[]}},value:Array,modelValue:Array,valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},checkField:{type:String,default:"checkField"},checkIndeterminateField:{type:String,default:"checkIndeterminateField"},expandField:String,subItemsField:{type:String,default:"items"},className:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},required:Boolean,name:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,tags:Array,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","outline","solid"].includes(e)}},item:[String,Function,Object],tag:[String,Function,Object],header:[String,Function,Object],footer:[String,Function,Object],listNoData:[String,Function,Object],adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0}},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:L.MOBILE_SMALL_DEVICE,medium:L.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,i.validatePackage(oe.packageMetadata),this.base=new fe(this),this.componentGuid=i.guid(),this.anchor=i.guid()},data(){return{focusedTagState:void 0,openState:!1,focusedState:!1,filterState:"",currentValue:[],popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{animationStyles(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return this.windowWidth<=this.adaptiveModeBreakpoints.medium&&this.$props.adaptive},isOpen(){return this.opened!==void 0?this.opened:this.openState},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return!!this.computedValue.length},tagsToRenderRef(){if(this.initialAdaptiveRenderingValues===void 0)return this.tags===void 0?this.computedValue.map(e=>({text:y.getItemValue(e,this.$props.textField),data:[e]})):[...this.tags];{const e=this.initialAdaptiveRenderingValues;return e.length>0&&e.map(t=>({text:y.getItemValue(t,this.$props.textField),data:[t]}))}}},watch:{isOpen:function(e){e&&this.value?this.initialAdaptiveRenderingValues=[...this.value]:this.initialAdaptiveRenderingValues=void 0}},mounted(){this.observer=i.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.elementRef=i.getRef(this,"kendoAnchor"),this.inputRef=i.getRef(this,"input"),this.selectRef=i.getRef(this,"select"),this.treeViewRef=i.getRef(this,"treeView"),this.skipFocusRef=!1,this.popupRef=i.getRef(this,"popup"),this.calculatePopupWidth()},updated(){this.inputRef=i.getRef(this,"input"),this.treeViewRef=i.getRef(this,"treeView"),this.popupRef&&this.isOpen&&this.hasValue&&this.popupRef.reposition(),this.setValidity(),this.calculatePopupWidth()},render(){let e;const t=this.$props.id||this.componentGuid,{dataItems:a,dataItemKey:n,popupSettings:o={},disabled:d,placeholder:l,label:r,name:c,checkField:g,checkIndeterminateField:k,subItemsField:I,validationMessage:O,valid:P,value:C,required:R,validityStyles:W,adaptiveTitle:z}=this.$props,b=i.getTabIndex(this.$props.tabIndex,d),w=ne.provideLocalizationService(this),j=A({validationMessage:O,valid:P,required:R},this.hasValue),V=this.$props.dir,K=this.adaptiveState,N=i.templateRendering.call(this,this.item,i.getListeners.call(this)),_=i.templateRendering.call(this,this.tag,i.getListeners.call(this)),G=i.templateRendering.call(this,this.$props.header,i.getListeners.call(this)),H=i.templateRendering.call(this,this.$props.footer,i.getListeners.call(this)),T=i.getTemplate.call(this,{h:s.h,template:G}),x=i.getTemplate.call(this,{h:s.h,template:H}),U=i.templateRendering.call(this,this.$props.listNoData,i.getListeners.call(this)),J=s.createVNode(le.ListNoData,null,F(e=w.toLanguageString(p.nodata,p.messages[p.nodata]))?e:{default:()=>[e]}),M=i.getTemplate.call(this,{h:s.h,defaultRendering:J,template:U}),B=!W||j.valid,{size:u,rounded:m,fillMode:v}=this.$props,Q=()=>[s.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[s.createVNode("div",{class:"k-actionsheet-title"},[s.createVNode("div",{class:"k-text-center"},[z]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[l])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode($.Button,{tabIndex:5,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onCancel,icon:"x",svgIcon:pe.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(E.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:i.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:u,rounded:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null)])],X=i.templateRendering.call(this,Q,i.getListeners.call(this)),Y=()=>{const h=w.toLanguageString(p.adaptiveModeFooterCancel,p.messages[p.adaptiveModeFooterCancel]),f=w.toLanguageString(p.adaptiveModeFooterApply,p.messages[p.adaptiveModeFooterApply]);return[s.createVNode($.Button,{size:"large","aria-label":h,"aria-disabled":"false",type:"button",onClick:this.onCancel},F(h)?h:{default:()=>[h]}),s.createVNode($.Button,{themeColor:"primary",size:"large","aria-label":f,"aria-disabled":"false",type:"button",onClick:this.closePopup},F(f)?f:{default:()=>[f]})]},Z=i.templateRendering.call(this,Y,i.getListeners.call(this)),ee=()=>{const h=this.base.getTemplateDef.call(this,T,s.h),f=this.base.getTemplateDef.call(this,x,s.h);return[h&&s.createVNode("div",{class:"k-list-header"},[h]),a.length>0?s.createVNode(D.TreeView,{ref:i.setRef(this,"treeView"),tabIndex:b,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:I,expandIcons:!0,onItemclick:this.onChange,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:"large",item:N},null):M,f&&s.createVNode("div",{class:"k-list-footer"},[f])]},te=i.templateRendering.call(this,ee,i.getListeners.call(this)),ie=function(){return s.createVNode(he.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,footerClassName:"k-actions k-actions-stretched",contentClassName:"!k-overflow-hidden",header:X,content:te,footer:Z,onClose:this.onCancel,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},se=function(){return s.createVNode("span",{ref:i.setRef(this,"kendoAnchor"),class:i.classNames("k-multiselecttree k-input",this.$props.className,{[`k-input-${q[u]||u}`]:u,[`k-rounded-${me[m]||m}`]:m,[`k-input-${v}`]:v,"k-focus":this.focusedState&&!d,"k-invalid":!B,"k-disabled":d,"k-loading":this.$props.loading,"k-required":R}),tabindex:b,accesskey:this.$props.accessKey,id:t,dir:V,onKeydown:this.onWrapperKeyDown,onMousedown:this.onWrapperMouseDown,onFocusin:this.onFocus,onFocusout:this.onBlur,role:"combobox","aria-haspopup":"tree","aria-expanded":this.isOpen,"aria-disabled":d,"aria-label":r,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaLabelledBy?this.$props.ariaLabelledBy:"tagslist-"+t,"aria-required":this.$props.required,onClick:this.onWrapperClick},[this.tagsToRenderRef.length>0&&s.createVNode(de.TagList,{id:"tagslist-"+t,class:i.classNames("k-input-values k-chip-list k-selection-multiple",{[`k-chip-list-${q[u]||u}`]:u,"k-readonly":this.hasValue}),tagRender:_,onTagdelete:this.onTagDelete,dataItems:this.tagsToRenderRef,guid:t,focused:this.focusedTagState?this.tagsToRenderRef.find(h=>this.focusedTagState&&y.matchTags(h,this.focusedTagState,n)):void 0,tagsRounded:m,size:u,fillMode:v},null),s.createVNode("span",{class:"k-input-inner",role:"combobox",tabindex:b,"aria-expanded":this.isOpen,"aria-describedby":"tagslist-"+t,"aria-label":this.$props.ariaLabelledBy},[this.tagsToRenderRef.length===0&&s.createVNode("span",{class:"k-input-value-text"},[l])]),this.$props.loading&&s.createVNode(i.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!d&&s.createVNode(ce.ClearButton,{onClearclick:this.onClear},null),s.createVNode("select",{name:c,ref:i.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,required:R,title:r,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},[s.createVNode("option",{value:this.$props.valueMap?this.$props.valueMap.call(void 0,C):C},null)]),!K&&s.createVNode(ae.Popup,{style:{width:this.popupWidth,direction:V},popupClass:i.classNames(o.popupClass,"k-multiselecttree-popup","popup-"+this.componentGuid),class:i.classNames(o.className,{"k-rtl":V==="rtl"}),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo,ref:i.setRef(this,"popup")},{default:()=>[this.$props.filterable&&s.createVNode(E.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:i.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:u,rounded:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null),T&&s.createVNode("div",{class:"k-list-header"},[T]),a.length>0?s.createVNode(D.TreeView,{ref:i.setRef(this,"treeView"),tabIndex:b,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:I,expandIcons:!0,onItemclick:this.onChange,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:u,item:N},null):M,x&&s.createVNode("div",{class:"k-list-footer"},[x])]})])},S=[s.h(se.call(this),{...this.$attrs}),K&&ie.call(this)];return r?s.createVNode(re.FloatingLabel,{label:r,editorValue:this.hasValue,editorPlaceholder:l,editorValid:B,editorDisabled:d,editorId:t,dir:V},F(S)?S:{default:()=>[S]}):S},methods:{clearFilter(e){this.onFilterChange(e,"")},onCancel(e){const t={event:e,target:this},a={items:[],operation:"toggle",value:this.initialAdaptiveRenderingValues,...t};this.$emit("change",a),this.closePopup(e)},calculateMedia(e){for(let t of e)this.windowWidth=t.target.clientWidth},calculatePopupWidth(){this.elementRef&&(this.popupWidth=this.popupSettings.width!==void 0?this.popupSettings.width:this.elementRef.offsetWidth+"px")},focus(){this.$el&&this.$el.focus()},setValidity(){if(this.selectRef&&this.selectRef.setCustomValidity){const{validationMessage:e,valid:t,required:a}=this.$props,n=A({validationMessage:e,valid:t,required:a},this.hasValue);this.selectRef.setCustomValidity(n.valid?"":this.validationMessage===void 0?ge:this.validationMessage)}},changeValue(e,t,a){const n={dataItemKey:this.dataItemKey,checkField:this.checkField,checkIndeterminateField:this.checkIndeterminateField,expandField:this.expandField,subItemsField:this.subItemsField},o=ue.getMultiSelectTreeValue(this.dataItems,{...n,items:t,operation:a,value:this.computedValue}),d={items:t,operation:a,value:o,...e};this.$emit("changemodel",o),this.$emit("update:modelValue",o),this.$emit("change",d)},onChange(e){if(y.areSame(e.item,this.computedValue,this.dataItemKey))return;const{item:t,event:a}=e,n={event:a,target:this};this.changeValue(n,[t],"toggle")},openPopup(e){if(!this.isOpen){const t={...e};this.$emit("open",t),this.opened===void 0&&(this.openState=!0)}},closePopup(e){if(this.$props.filterable&&this.clearFilter({...e,target:{...e.target,value:""}}),this.isOpen){const t={...e};this.$emit("close",t),this.opened===void 0&&(this.openState=!1)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focusedState&&this.isOpen)this.closePopup({target:this});else if(this.$props.filterable){const e=this.inputRef&&this.inputRef.input;this.focusElement(e)}else this.focusElement(this.treeViewRef&&this.treeViewRef.input)},onPopupClosed(){this.focusedState&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focusedState&&!this.skipFocusRef){this.focusedState=!0;const t={event:e,target:this};this.$emit("focus",t)}},onBlur(e){if(this.focusedState&&!this.skipFocusRef&&!this.adaptiveState){this.focusedTagState=void 0,this.focusedState=!1;const t={event:e,target:this},a={...t};(!e.relatedTarget||!e.relatedTarget.closest(".popup-"+this.componentGuid))&&(this.$emit("blur",a),this.closePopup(t))}},onWrapperMouseDown(){this.focusedState&&this.switchFocus(i.noop)},onWrapperClick(e){if(!this.$props.disabled&&!e.defaultPrevented){this.focusedState=!0;const t={event:e,target:this};this.isOpen||this.openPopup(t)}},onWrapperKeyDown(e){const{keyCode:t,altKey:a}=e,n=this.treeViewRef&&this.treeViewRef.$el,o=this.inputRef&&this.inputRef.input;if(this.$props.disabled||e.defaultPrevented&&o===e.target)return;const d={event:e,target:this};if(this.computedValue&&this.computedValue.length>0&&(t===i.Keys.left||t===i.Keys.right||t===i.Keys.home||t===i.Keys.end||t===i.Keys.delete||t===i.Keys.backspace)){const l=this.tagsToRenderRef;let r=this.focusedTagState?l.findIndex(k=>y.matchTags(k,this.focusedTagState,this.dataItemKey)):-1,c;const g=r!==-1;t===i.Keys.left?(g?r=Math.max(0,r-1):r=l.length-1,c=l[r]):t===i.Keys.right?g?(r=Math.min(l.length-1,r+1),c=l[r]):c=l[0]:t===i.Keys.home?c=l[0]:t===i.Keys.end?c=l[l.length-1]:(t===i.Keys.delete||t===i.Keys.backspace)&&g&&this.changeValue(d,l[r].data,"delete"),c!==this.focusedTagState&&(this.focusedTagState=c)}if(this.isOpen)if(t===i.Keys.esc||a&&t===i.Keys.up)e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),this.closePopup(d);else if(n&&n.querySelector(".k-focus")&&(t===i.Keys.up||t===i.Keys.down||t===i.Keys.left||t===i.Keys.right||t===i.Keys.home||t===i.Keys.end)){if(t===i.Keys.up){const l=Array.from(n.querySelectorAll(".k-treeview-item")),r=[...l].reverse().find(c=>!!(c&&c.querySelector(".k-focus")));if(r&&l.indexOf(r)===0)return this.switchFocus(()=>{this.focusElement(o||this.elementRef)})}this.switchFocus(i.noop)}else t===i.Keys.down&&this.switchFocus(()=>{this.focusElement(o||n)});else a&&t===i.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:t,altKey:a}=e;(t===i.Keys.esc||a&&t===i.Keys.up)&&(e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),t===i.Keys.esc&&this.adaptiveState?this.onCancel(e):this.closePopup(e)),!(a||t!==i.Keys.up&&t!==i.Keys.down)&&(e.preventDefault(),this.switchFocus(t===i.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)}))},onClear(e){const t={event:e,target:this};this.changeValue(t,[],"clear"),this.closePopup(t),this.filterState="",e.preventDefault()},onTagDelete(e,t){if(this.closePopup({target:this}),!this.focusedState){const a=this.inputRef&&this.inputRef.input;this.focusElement(a)}this.changeValue({event:t,target:this},e,"delete")},onExpand(e){const{item:t,itemHierarchicalIndex:a,event:n}=e,o={level:ve(a),item:t,event:n,target:this};this.$emit("expandchange",o)},onFilterChange(e,t){const a=t?"":e.target.value,o={filter:{field:this.$props.textField,operator:"contains",value:a},event:e,target:this};this.$emit("filterchange",o),this.$props.filter===void 0&&(this.filterState=a)}}});exports.MultiSelectTree=ye;
|