@progress/kendo-vue-dropdowns 9.3.0-develop.3 → 9.3.0-develop.4
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/AutoComplete/AutoComplete.js +1 -1
- package/AutoComplete/AutoComplete.mjs +1 -1
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +2 -1
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +73 -73
- package/DropDownTree/DropDownTree.js +1 -1
- package/DropDownTree/DropDownTree.mjs +2 -2
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +87 -87
- package/MultiSelect/TagList.js +1 -1
- package/MultiSelect/TagList.mjs +12 -10
- package/MultiSelectTree/MultiSelectTree.js +1 -1
- package/MultiSelectTree/MultiSelectTree.mjs +2 -2
- package/common/SearchBar.js +1 -1
- package/common/SearchBar.mjs +1 -1
- package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
|
@@ -5,8 +5,8 @@
|
|
|
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, createVNode as
|
|
9
|
-
import { kendoThemeMaps as xe, templateRendering as
|
|
8
|
+
import { defineComponent as $e, createVNode as a, h as T, ref as N, isVNode as Ce } from "vue";
|
|
9
|
+
import { kendoThemeMaps as xe, templateRendering as x, getListeners as O, getTemplate as Oe, Keys as m, canUseDOM as A, getRef as W, guid as G, classNames as B, noop as q, getTabIndex as we, setRef as U, Icon as Fe } from "@progress/kendo-vue-common";
|
|
10
10
|
import { Button as Y } from "@progress/kendo-vue-buttons";
|
|
11
11
|
import { ListContainer as De } from "../common/ListContainer.mjs";
|
|
12
12
|
import { ListFilter as Ve } from "../common/ListFilter.mjs";
|
|
@@ -243,15 +243,15 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
243
243
|
virtual: s,
|
|
244
244
|
groupField: l,
|
|
245
245
|
textField: o
|
|
246
|
-
} = this.$props, i = this.isOpen, d = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened,
|
|
247
|
-
if (this.$refs.scroller, r && (this.base.vs.list = r.list, this.base.list = r.list), f && (this.base.vs.scrollElement = f), c && (this.filterInput = c), r && e.length && this.base.vs.scrollerRef(r.$el), this.$props.popupSettings.animate ||
|
|
246
|
+
} = this.$props, i = this.isOpen, d = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, n = !d && i, r = this.$refs.list, c = this.$refs.filterInput, f = this.$refs.scrollElement;
|
|
247
|
+
if (this.$refs.scroller, r && (this.base.vs.list = r.list, this.base.list = r.list), f && (this.base.vs.scrollElement = f), c && (this.filterInput = c), r && e.length && this.base.vs.scrollerRef(r.$el), this.$props.popupSettings.animate || n && this.onPopupOpened(), s && this.virtualTotalHasChanged)
|
|
248
248
|
this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
|
|
249
249
|
else {
|
|
250
250
|
const p = this.computedValue(), g = this.prevCurrentValue;
|
|
251
251
|
let h = e.findIndex((b) => I(b, p, t));
|
|
252
252
|
l && (h = (v = this.base.getGroupedDataModernMode(e, l)) == null ? void 0 : v.indexOf(p));
|
|
253
253
|
const k = !I(g, p, t);
|
|
254
|
-
|
|
254
|
+
n && s ? (this.base.scrollToVirtualItem(s, h), this.prevCurrentOpened = !0) : n && !s ? (e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][l], this), this.base.scrollToItem(h), this.prevCurrentOpened = !0) : i && d && p && k && !this._navigated ? this.base.scrollToItem(h) : i && d && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
|
|
255
255
|
}
|
|
256
256
|
this._navigated = !1, this.prevCurrentValue = this.computedValue(), this.setValidity();
|
|
257
257
|
},
|
|
@@ -323,8 +323,8 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
323
323
|
virtual: l,
|
|
324
324
|
dataItemKey: o,
|
|
325
325
|
defaultItem: i
|
|
326
|
-
} = this.$props, d = l ? l.skip : 0,
|
|
327
|
-
this.triggerOnChange(
|
|
326
|
+
} = this.$props, d = l ? l.skip : 0, n = e === -1 && i !== void 0 ? i : s[e - d], r = !I(n, this.computedValue(), o);
|
|
327
|
+
this.triggerOnChange(n, t), r && this.base.triggerPageChangeCornerItems(n, t);
|
|
328
328
|
},
|
|
329
329
|
onNavigate(e, t) {
|
|
330
330
|
const {
|
|
@@ -336,7 +336,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
336
336
|
total: 0,
|
|
337
337
|
pageSize: 0
|
|
338
338
|
}
|
|
339
|
-
} = this.$props, d = this.base.vs,
|
|
339
|
+
} = this.$props, d = this.base.vs, n = this.computedValue(), r = s.findIndex((f) => I(f, n, o)), c = this.base.navigation.navigate({
|
|
340
340
|
current: i.skip + r,
|
|
341
341
|
max: (d.enabled ? i.total : s.length) - 1,
|
|
342
342
|
min: l !== void 0 ? -1 : 0,
|
|
@@ -357,24 +357,24 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
357
357
|
itemIndex: D
|
|
358
358
|
}));
|
|
359
359
|
const o = this.searchState.word, i = this.searchState.last, d = Pe(o, i);
|
|
360
|
-
let
|
|
360
|
+
let n = l.length, r = Math.max(0, t.findIndex((b) => I(b, this.computedValue(), s))), c;
|
|
361
361
|
this.$props.defaultItem && (c = {
|
|
362
362
|
item: this.$props.defaultItem,
|
|
363
363
|
itemIndex: -1
|
|
364
|
-
},
|
|
364
|
+
}, n += 1, r += 1), r += d ? 1 : 0, l = _e(l, r, c);
|
|
365
365
|
let f, v, p, g = 0;
|
|
366
366
|
const {
|
|
367
367
|
textField: h,
|
|
368
368
|
ignoreCase: k
|
|
369
369
|
} = this.$props;
|
|
370
|
-
for (; g <
|
|
370
|
+
for (; g < n; ) {
|
|
371
371
|
if (f = F(l[g].item, h), v = d && Z(f, i, k), p = Z(f, o, k), v || p) {
|
|
372
372
|
g = l[g].itemIndex;
|
|
373
373
|
break;
|
|
374
374
|
}
|
|
375
375
|
g++;
|
|
376
376
|
}
|
|
377
|
-
if (g !==
|
|
377
|
+
if (g !== n) {
|
|
378
378
|
const b = this.base.initState();
|
|
379
379
|
b.event = e, this.handleItemSelect(g, b), this.applyState(b), this.valueDuringOnChange = void 0;
|
|
380
380
|
}
|
|
@@ -391,14 +391,14 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
391
391
|
total: 0,
|
|
392
392
|
pageSize: 0
|
|
393
393
|
}
|
|
394
|
-
} = this.$props, d = this.isOpen,
|
|
394
|
+
} = this.$props, d = this.isOpen, n = e.keyCode, r = n === m.home || n === m.end, c = n === m.up || n === m.down, f = !d && (e.altKey && n === m.down || n === m.enter || n === m.space), v = d && (e.altKey && n === m.up || n === m.esc), p = s && (n === m.left || n === m.right), g = c || !l && (p || r), h = this.base.initState();
|
|
395
395
|
if (h.event = e, !o) {
|
|
396
396
|
if (r && this.base.vs.enabled)
|
|
397
|
-
|
|
398
|
-
else if (d &&
|
|
397
|
+
n === m.home ? i.skip !== 0 ? (this.base.triggerOnPageChange(h, 0, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[0], h) : i.skip < i.total - i.pageSize ? (this.base.triggerOnPageChange(h, i.total - i.pageSize, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[t.length - 1], h);
|
|
398
|
+
else if (d && n === m.enter) {
|
|
399
399
|
const k = this.focusedIndex();
|
|
400
400
|
k !== void 0 && this.handleItemSelect(k, h), this.base.togglePopup(h), e.preventDefault();
|
|
401
|
-
} else f || v ? (this.adaptiveState && this.handleWrapperClick(e), this.base.togglePopup(h), e.preventDefault()) : g && (this.onNavigate(h,
|
|
401
|
+
} else f || v ? (this.adaptiveState && this.handleWrapperClick(e), this.base.togglePopup(h), e.preventDefault()) : g && (this.onNavigate(h, n), e.preventDefault());
|
|
402
402
|
this.applyState(h);
|
|
403
403
|
}
|
|
404
404
|
},
|
|
@@ -494,7 +494,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
494
494
|
} = this.$props, d;
|
|
495
495
|
if (!o || !i.length)
|
|
496
496
|
return;
|
|
497
|
-
const
|
|
497
|
+
const n = s && ((v = s.querySelector(".k-list-item")) == null ? void 0 : v.offsetHeight) || 0, r = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : n), f = e.target.scrollTop - t.skip * r;
|
|
498
498
|
o && (i = this.base.getGroupedDataModernMode(i, o), d = i[0][o]);
|
|
499
499
|
for (let p = 1; p < i.length && !(r * p > f); p++)
|
|
500
500
|
i[p] && i[p][o] && (d = i[p][o]);
|
|
@@ -512,7 +512,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
512
512
|
},
|
|
513
513
|
size: i,
|
|
514
514
|
rounded: d,
|
|
515
|
-
fillMode:
|
|
515
|
+
fillMode: n,
|
|
516
516
|
dataItemKey: r,
|
|
517
517
|
dataItems: c = [],
|
|
518
518
|
disabled: f,
|
|
@@ -525,22 +525,22 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
525
525
|
header: D,
|
|
526
526
|
footer: H,
|
|
527
527
|
groupStickyHeaderItemRender: te
|
|
528
|
-
} = this.$props,
|
|
528
|
+
} = this.$props, $ = this.isOpen, ie = F(this.computedValue(), this.$props.textField), se = !this.$props.validityStyles || this.validity().valid, S = this.base, w = S.vs, L = this.$props.id || this.inputId;
|
|
529
529
|
w.enabled = this.$props.virtual !== void 0;
|
|
530
530
|
const V = Object.assign({}, {
|
|
531
531
|
animate: !0,
|
|
532
532
|
height: "200px"
|
|
533
|
-
}, this.$props.popupSettings),
|
|
533
|
+
}, this.$props.popupSettings), ne = Re(this).toLanguageString(Q, Le[Q]), M = this.adaptiveState;
|
|
534
534
|
this.group === void 0 && this.$props.groupField !== void 0 && (this.group = F(this.$props.dataItems[0], this.$props.groupField));
|
|
535
|
-
const
|
|
535
|
+
const ae = x.call(this, this.$props.valueRender, O.call(this)), le = this.currentFocused, K = this.primitiveValue(), oe = c.findIndex((u) => I(u, K, r)), re = a("span", {
|
|
536
536
|
class: "k-input-inner",
|
|
537
537
|
id: this.dropDownListId
|
|
538
|
-
}, [
|
|
538
|
+
}, [a("span", {
|
|
539
539
|
class: "k-input-value-text"
|
|
540
540
|
}, [ie])]);
|
|
541
541
|
let de = Oe.call(this, {
|
|
542
542
|
h: T,
|
|
543
|
-
template:
|
|
543
|
+
template: ae,
|
|
544
544
|
defaultRendering: re,
|
|
545
545
|
additionalProps: {
|
|
546
546
|
value: this.computedValue(),
|
|
@@ -548,7 +548,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
548
548
|
}
|
|
549
549
|
});
|
|
550
550
|
const ue = function(u) {
|
|
551
|
-
return
|
|
551
|
+
return a("select", {
|
|
552
552
|
name: this.$props.name,
|
|
553
553
|
id: L,
|
|
554
554
|
ref: U(this, "select"),
|
|
@@ -563,20 +563,20 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
563
563
|
position: "absolute",
|
|
564
564
|
left: "50%"
|
|
565
565
|
}
|
|
566
|
-
}, [
|
|
566
|
+
}, [a("option", {
|
|
567
567
|
value: this.$props.valueMap ? this.$props.valueMap.call(void 0, u) : u
|
|
568
568
|
}, null)]);
|
|
569
|
-
}, pe = () => [
|
|
569
|
+
}, pe = () => [a("div", {
|
|
570
570
|
class: "k-actionsheet-titlebar-group k-hbox"
|
|
571
|
-
}, [
|
|
571
|
+
}, [a("div", {
|
|
572
572
|
class: "k-actionsheet-title"
|
|
573
|
-
}, [
|
|
573
|
+
}, [a("div", {
|
|
574
574
|
class: "k-text-center"
|
|
575
|
-
}, [b]),
|
|
575
|
+
}, [b]), a("div", {
|
|
576
576
|
class: "k-actionsheet-subtitle k-text-center"
|
|
577
|
-
}, null)]),
|
|
577
|
+
}, null)]), a("div", {
|
|
578
578
|
class: "k-actionsheet-actions"
|
|
579
|
-
}, [
|
|
579
|
+
}, [a(Y, {
|
|
580
580
|
tabIndex: 5,
|
|
581
581
|
"aria-label": "Cancel",
|
|
582
582
|
"aria-disabled": "false",
|
|
@@ -585,29 +585,29 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
585
585
|
onClick: this.handleWrapperClick,
|
|
586
586
|
icon: "x",
|
|
587
587
|
svgIcon: je
|
|
588
|
-
}, null)])]),
|
|
588
|
+
}, null)])]), a("div", {
|
|
589
589
|
class: "k-actionsheet-titlebar-group k-actionsheet-filter"
|
|
590
|
-
}, [j.call(this)])], he =
|
|
591
|
-
const u = S.getTemplateDef.call(this, D, T), y = S.getTemplateDef.call(this, H, T),
|
|
592
|
-
return
|
|
590
|
+
}, [j.call(this)])], he = x.call(this, pe, O.call(this)), ce = () => {
|
|
591
|
+
const u = S.getTemplateDef.call(this, D, T), y = S.getTemplateDef.call(this, H, T), C = x.call(this, te, O.call(this));
|
|
592
|
+
return a("div", {
|
|
593
593
|
class: "k-list-container"
|
|
594
|
-
}, [u &&
|
|
594
|
+
}, [u && a("div", {
|
|
595
595
|
class: "k-list-header"
|
|
596
|
-
}, [u]),
|
|
596
|
+
}, [u]), a("div", {
|
|
597
597
|
class: B("k-list", {
|
|
598
598
|
[`k-list-${E[i] || i}`]: M ? !1 : i,
|
|
599
599
|
"k-list-lg": !!M,
|
|
600
600
|
"k-virtual-list": w.enabled
|
|
601
601
|
})
|
|
602
|
-
}, [P.call(this), this.group && c.length !== 0 &&
|
|
602
|
+
}, [P.call(this), this.group && c.length !== 0 && a(J, {
|
|
603
603
|
group: this.group,
|
|
604
|
-
render:
|
|
605
|
-
}, null), _.call(this), y &&
|
|
604
|
+
render: C
|
|
605
|
+
}, null), _.call(this), y && a("div", {
|
|
606
606
|
class: "k-list-footer"
|
|
607
607
|
}, [y])])]);
|
|
608
|
-
}, fe =
|
|
609
|
-
return
|
|
610
|
-
expand:
|
|
608
|
+
}, fe = x.call(this, ce, O.call(this)), me = function() {
|
|
609
|
+
return a(He, {
|
|
610
|
+
expand: $,
|
|
611
611
|
animation: !0,
|
|
612
612
|
animationStyles: this.animationStyles,
|
|
613
613
|
className: this.classNameAdaptive,
|
|
@@ -622,7 +622,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
622
622
|
textField: u,
|
|
623
623
|
defaultItem: y
|
|
624
624
|
} = this.$props;
|
|
625
|
-
return y !== void 0 &&
|
|
625
|
+
return y !== void 0 && a(Me, {
|
|
626
626
|
defaultItem: y,
|
|
627
627
|
textField: u,
|
|
628
628
|
selected: I(this.computedValue(), y, r),
|
|
@@ -633,13 +633,13 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
633
633
|
let u;
|
|
634
634
|
const {
|
|
635
635
|
textField: y,
|
|
636
|
-
groupField:
|
|
636
|
+
groupField: C
|
|
637
637
|
} = this.$props;
|
|
638
638
|
let R = this.$props.dataItems || [];
|
|
639
|
-
const be =
|
|
640
|
-
return
|
|
639
|
+
const be = x.call(this, this.$props.itemRender, O.call(this)), ye = x.call(this, this.$props.groupHeaderItemRender, O.call(this)), Ie = x.call(this, this.$props.listNoDataRender, O.call(this)), ke = o.skip, Se = `translateY(${w.translate}px)`;
|
|
640
|
+
return C && (R = this.base.getGroupedDataModernMode(R, C)), a(Te, {
|
|
641
641
|
id: this.base.listBoxId,
|
|
642
|
-
show:
|
|
642
|
+
show: $,
|
|
643
643
|
dataItems: R.slice(),
|
|
644
644
|
focusedIndex: this.focusedIndex(),
|
|
645
645
|
value: this.computedValue(),
|
|
@@ -660,14 +660,14 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
660
660
|
itemRender: be,
|
|
661
661
|
groupHeaderItemRender: ye,
|
|
662
662
|
noDataRender: Ie,
|
|
663
|
-
groupField:
|
|
663
|
+
groupField: C,
|
|
664
664
|
onScroll: this.onScroll
|
|
665
665
|
}, We(u = ge.call(this)) ? u : {
|
|
666
666
|
default: () => [u]
|
|
667
667
|
});
|
|
668
668
|
}, j = function() {
|
|
669
669
|
const u = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
|
|
670
|
-
return this.$props.filterable &&
|
|
670
|
+
return this.$props.filterable && a(Ve, {
|
|
671
671
|
value: u,
|
|
672
672
|
ref: "filterInput",
|
|
673
673
|
onChange: this.handleListFilterChange,
|
|
@@ -679,13 +679,13 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
679
679
|
ariaActivedescendantId: `option-${this.base.guid}-${this.focusedIndex()}`
|
|
680
680
|
}, null);
|
|
681
681
|
}, ge = function() {
|
|
682
|
-
return w.enabled &&
|
|
682
|
+
return w.enabled && a("div", {
|
|
683
683
|
ref: "scrollElement",
|
|
684
684
|
key: "scrollElementKey"
|
|
685
685
|
}, null);
|
|
686
686
|
}, ve = function() {
|
|
687
|
-
const u =
|
|
688
|
-
return
|
|
687
|
+
const u = x.call(this, this.$props.groupStickyHeaderItemRender, O.call(this)), y = S.getTemplateDef.call(this, D), C = S.getTemplateDef.call(this, H);
|
|
688
|
+
return a(De, {
|
|
689
689
|
ref: "container",
|
|
690
690
|
onMousedown: ee,
|
|
691
691
|
dir: l !== void 0 ? l : S.dirCalculated,
|
|
@@ -698,31 +698,31 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
698
698
|
}),
|
|
699
699
|
className: B("k-list-container", V.className),
|
|
700
700
|
anchor: this.anchor,
|
|
701
|
-
show:
|
|
701
|
+
show: $
|
|
702
702
|
},
|
|
703
703
|
onOpen: this.onPopupOpened,
|
|
704
704
|
onClose: this.onPopupClosed,
|
|
705
705
|
onBlur: this.handleBlur
|
|
706
706
|
}, {
|
|
707
|
-
default: () => [j.call(this), P.call(this), this.group && c.length !== 0 &&
|
|
707
|
+
default: () => [j.call(this), P.call(this), this.group && c.length !== 0 && a(J, {
|
|
708
708
|
group: this.group,
|
|
709
709
|
render: u
|
|
710
|
-
}, null), y &&
|
|
710
|
+
}, null), y && a("div", {
|
|
711
711
|
class: "k-list-header"
|
|
712
|
-
}, [y]), _.call(this),
|
|
712
|
+
}, [y]), _.call(this), C && a("div", {
|
|
713
713
|
class: "k-list-footer"
|
|
714
|
-
}, [
|
|
714
|
+
}, [C])]
|
|
715
715
|
});
|
|
716
716
|
};
|
|
717
717
|
this.$props.virtual !== void 0 && (S.vs.skip = o.skip, S.vs.total = o.total, S.vs.pageSize = o.pageSize);
|
|
718
718
|
const z = [T(function() {
|
|
719
719
|
var u;
|
|
720
|
-
return
|
|
720
|
+
return a("span", {
|
|
721
721
|
ref: U(this, "kendoAnchor"),
|
|
722
722
|
class: B("k-dropdownlist k-picker", t, {
|
|
723
723
|
[`k-picker-${E[i] || i}`]: i,
|
|
724
724
|
[`k-rounded-${Ae[d] || d}`]: d,
|
|
725
|
-
[`k-picker-${
|
|
725
|
+
[`k-picker-${n}`]: n,
|
|
726
726
|
"k-focus": le,
|
|
727
727
|
"k-disabled": f,
|
|
728
728
|
"k-invalid": !se,
|
|
@@ -734,7 +734,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
734
734
|
width: void 0
|
|
735
735
|
} : e,
|
|
736
736
|
dir: l,
|
|
737
|
-
onMousedown:
|
|
737
|
+
onMousedown: $ ? ee : q,
|
|
738
738
|
onFocusin: this.handleFocus,
|
|
739
739
|
onFocusout: this.handleBlur,
|
|
740
740
|
tabindex: (u = we(v, f)) != null ? u : 0,
|
|
@@ -744,25 +744,25 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
744
744
|
role: "combobox",
|
|
745
745
|
onClick: f ? q : this.handleWrapperClick,
|
|
746
746
|
"aria-disabled": f || void 0,
|
|
747
|
-
"aria-haspopup":
|
|
748
|
-
"aria-expanded":
|
|
749
|
-
"aria-
|
|
750
|
-
"aria-activedescendant":
|
|
747
|
+
"aria-haspopup": "listbox",
|
|
748
|
+
"aria-expanded": $ || !1,
|
|
749
|
+
"aria-controls": $ ? this.base.listBoxId : void 0,
|
|
750
|
+
"aria-activedescendant": $ ? "option-" + this.base.guid + "-" + (oe + (o ? o.skip : 0)) : void 0,
|
|
751
751
|
"aria-label": this.$props.ariaLabel || this.$props.label,
|
|
752
752
|
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
753
|
-
"aria-
|
|
753
|
+
"aria-describedby": $ ? this.dropDownListId : void 0,
|
|
754
754
|
title: this.$props.title
|
|
755
|
-
}, [de, p &&
|
|
755
|
+
}, [de, p && a(Fe, {
|
|
756
756
|
name: "loading",
|
|
757
757
|
class: "k-input-loading-icon",
|
|
758
758
|
key: "loading"
|
|
759
|
-
}, null),
|
|
759
|
+
}, null), a(Y, {
|
|
760
760
|
type: "button",
|
|
761
761
|
tabIndex: -1,
|
|
762
762
|
size: i,
|
|
763
|
-
fillMode:
|
|
763
|
+
fillMode: n,
|
|
764
764
|
rounded: null,
|
|
765
|
-
ariaLabel:
|
|
765
|
+
ariaLabel: ne,
|
|
766
766
|
class: "k-input-button",
|
|
767
767
|
icon: g || "chevron-down",
|
|
768
768
|
svgIcon: h || ze,
|
|
@@ -771,15 +771,15 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
|
|
|
771
771
|
}.call(this), {
|
|
772
772
|
...this.$attrs
|
|
773
773
|
}), M && me.call(this)];
|
|
774
|
-
return s ?
|
|
774
|
+
return s ? a("span", {
|
|
775
775
|
class: this.spanClassNames,
|
|
776
776
|
onFocusin: this.handleFocus,
|
|
777
777
|
onFocusout: this.handleBlur,
|
|
778
778
|
dir: this.$props.dir
|
|
779
|
-
}, [z, this.$props.label ? L ?
|
|
779
|
+
}, [z, this.$props.label ? L ? a("label", {
|
|
780
780
|
for: L,
|
|
781
781
|
class: "k-floating-label"
|
|
782
|
-
}, [this.$props.label]) :
|
|
782
|
+
}, [this.$props.label]) : a("span", {
|
|
783
783
|
class: "k-label"
|
|
784
784
|
}, [this.$props.label]) : null]) : z;
|
|
785
785
|
}
|
|
@@ -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"),t=require("@progress/kendo-vue-common"),ne=require("@progress/kendo-vue-popup"),ae=require("@progress/kendo-vue-intl"),O=require("@progress/kendo-vue-treeview"),b=require("../package-metadata.js"),k=require("../common/utils.js"),oe=require("./ListNoData.js"),c=require("../messages/main.js"),le=require("@progress/kendo-vue-labels"),T=require("../common/ListFilter.js"),B=require("@progress/kendo-vue-buttons"),w=require("@progress/kendo-svg-icons"),K=require("../common/constants.js"),re=require("@progress/kendo-vue-layout"),de=require("../common/DropDownBase.js");function L(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const{sizeMap:ue,roundedMap:ce}=t.kendoThemeMaps,pe="Please select a value from the list!",E=e=>e.split("_").map(i=>parseInt(i,10)),S=(e,i)=>{const{validationMessage:n,valid:a,required:o}=e;return{customError:n!==void 0,valid:!!(a!==void 0?a:!o||i),valueMissing:!i}},he=s.defineComponent({name:"KendoDropDownTree",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:{type:[Object,String,Number,Boolean],default:function(){}},modelValue:{type:[Object,String,Number,Boolean],default:function(){}},valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},selectField:{type:String,default:"selected"},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,ariaLabel:{type:String,default:void 0},ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},item:[String,Function,Object],header:[String,Function,Object],footer:[String,Function,Object],valueRender:[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:K.MOBILE_SMALL_DEVICE,medium:K.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,t.validatePackage(b.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI(b.packageMetadata),this.licenseMessage=t.getLicenseMessage(b.packageMetadata),this.base=new de(this),this.componentGuid=t.guid(),this.anchor=t.guid()},data(){return{showLicenseWatermark:!1,licenseMessage:void 0,currentOpened:!1,focused:!1,filterState:"",currentValue:void 0,popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{wrapperClass(){const{validationMessage:e,valid:i,required:n,validityStyles:a}=this.$props,o=S({validationMessage:e,valid:i,required:n},this.hasValue),d=!a||o.valid,{size:r,rounded:l,fillMode:u}=this.$props;return{"k-dropdowntree":!0,"k-picker":!0,[this.$props.className]:this.$props.className,[`k-picker-${ue[r]||r}`]:r,[`k-rounded-${ce[l]||l}`]:l,[`k-picker-${u}`]:u,"k-focus":this.focused,"k-invalid":!d,"k-loading":this.$props.loading,"k-required":n,"k-disabled":this.$props.disabled}},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.currentOpened},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return k.isPresent(this.computedValue)},currentValueText(){return this.hasValue?k.getItemValue(this.computedValue,this.$props.textField):""}},watch:{isOpen:function(e){e&&this.value?this.initialAdaptiveRenderingValues=[this.value]:this.initialAdaptiveRenderingValues=void 0}},mounted(){this.observer=t.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.elementRef=t.getRef(this,"kendoAnchor"),this.inputRef=t.getRef(this,"input"),this.selectRef=t.getRef(this,"select"),this.treeViewRef=t.getRef(this,"treeView"),this.skipFocusRef=!1,this.popupRef=t.getRef(this,"popup"),this.calculatePopupWidth()},updated(){this.inputRef=t.getRef(this,"input"),this.treeViewRef=t.getRef(this,"treeView"),this.popupRef&&this.isOpen&&this.hasValue&&this.popupRef.reposition(),this.setValidity(),this.calculatePopupWidth()},render(){let e;const i=this.$props.id||this.componentGuid,{dataItems:n,dataItemKey:a,popupSettings:o,disabled:d,placeholder:r,label:l,name:u,selectField:R,subItemsField:$,validationMessage:q,valid:W,required:F,validityStyles:P,adaptiveTitle:A}=this.$props,g=t.getTabIndex(this.$props.tabIndex,d),x=ae.provideLocalizationService(this),z=S({validationMessage:q,valid:W,required:F},this.hasValue),I=this.adaptiveState,p=this.$props.dir,N=t.templateRendering.call(this,this.item,t.getListeners.call(this)),j=t.templateRendering.call(this,this.valueRender,t.getListeners.call(this)),_=t.templateRendering.call(this,this.$props.header,t.getListeners.call(this)),G=t.templateRendering.call(this,this.$props.footer,t.getListeners.call(this)),v=t.getTemplate.call(this,{h:s.h,template:_}),y=t.getTemplate.call(this,{h:s.h,template:G}),H=t.templateRendering.call(this,this.$props.listNoData,t.getListeners.call(this)),U=s.createVNode(oe.ListNoData,null,L(e=x.toLanguageString(c.nodata,c.messages[c.nodata]))?e:{default:()=>[e]}),M=t.getTemplate.call(this,{h:s.h,defaultRendering:U,template:H}),J=s.createVNode("span",{class:"k-input-value-text"},[this.currentValueText||r]),Q=t.getTemplate.call(this,{h:s.h,defaultRendering:J,template:j,additionalProps:{value:this.computedValue}}),X=()=>[s.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[s.createVNode("div",{class:"k-actionsheet-title"},[s.createVNode("div",{class:"k-text-center"},[A]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[r])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode(B.Button,{tabIndex:1,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onWrapperClick,icon:"x",svgIcon:w.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(T.ListFilter,{tabIndex:0,value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:h,rounded:D,fillMode:V,onFocus:this.onFocus,onBlur:this.onBlur},null)])],Y=t.templateRendering.call(this,X,t.getListeners.call(this)),Z=()=>{const m=this.base.getTemplateDef.call(this,v,s.h),C=this.base.getTemplateDef.call(this,y,s.h);return[m&&s.createVNode("div",{class:"k-list-header"},[m]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:a,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:"large",item:N},null):M,C&&s.createVNode("div",{class:"k-list-footer"},[C])]},ee=t.templateRendering.call(this,Z,t.getListeners.call(this)),te=function(){return s.createVNode(re.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,header:Y,content:ee,contentClassName:"!k-overflow-hidden",onClose:this.onWrapperClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ie=!P||z.valid,{size:h,rounded:D,fillMode:V}=this.$props,se=function(){return s.createVNode("span",{class:this.wrapperClass,tabindex:g,accesskey:this.$props.accessKey,id:i,dir:p,ref:t.setRef(this,"kendoAnchor"),onKeydown:this.onWrapperKeyDown,onClick:this.onWrapperClick,onMousedown:this.onWrapperMouseDown,onFocusin:this.onFocus,onFocusout:this.onBlur,role:"combobox","aria-haspopup":"tree","aria-expanded":this.isOpen,"aria-disabled":d,"aria-label":l||this.$props.ariaLabel,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-required":F},[s.createVNode("span",{class:"k-input-inner"},[Q]),this.$props.loading&&s.createVNode(t.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!d&&s.createVNode("span",{onClick:this.onClear,class:"k-clear-value",title:x.toLanguageString(c.clear,c.messages[c.clear]),role:"button",tabindex:-1,onMousedown:m=>m.preventDefault()},[s.createVNode(t.Icon,{name:"x",icon:w.xIcon},null)]),s.createVNode(B.Button,{tabIndex:-1,type:"button","aria-label":"select",class:"k-input-button",size:h,fillMode:V,themeColor:"base",rounded:null,icon:"chevron-down",svgIcon:w.chevronDownIcon},null),s.createVNode("select",{name:u,ref:t.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,title:l,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,this.computedValue):this.computedValue},null)]),this.showLicenseWatermark?s.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null,!I&&s.createVNode(ne.Popup,{style:{width:this.popupWidth,direction:p},ref:t.setRef(this,"popup"),class:t.classNames(o.className,{"k-rtl":p==="rtl"}),popupClass:t.classNames(o.popupClass,"k-dropdowntree-popup","popup-"+this.componentGuid),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo},{default:()=>[this.$props.filterable&&s.createVNode(T.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,onBlur:this.onBlur,size:h,rounded:D,fillMode:V},null),v&&s.createVNode("div",{class:"k-list-header"},[v]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:a,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:h,item:N},null):M,y&&s.createVNode("div",{class:"k-list-footer"},[y])]})])},f=[s.h(se.call(this),{...this.$attrs}),I&&te.call(this)];return l?s.createVNode(le.FloatingLabel,{label:l,editorValue:this.currentValueText,editorPlaceholder:r,editorValid:ie,editorDisabled:d,editorId:i,focused:this.focused,dir:p},L(f)?f:{default:()=>[f]}):f},methods:{calculateMedia(e){for(let i of e)this.windowWidth=i.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:i,required:n}=this.$props,a=S({validationMessage:e,valid:i,required:n},this.hasValue);this.selectRef.setCustomValidity(a.valid?"":this.validationMessage===void 0?pe:this.validationMessage)}},openPopup(e){if(!this.isOpen){const i={...e};this.$emit("open",i),this.currentOpened=!0}},closePopup(e){if(this.isOpen){const i={...e};this.$emit("close",i),this.currentOpened=!1}},onWrapperClick(e){if(this.onFilterChange({...e,target:{value:""}}),!e.defaultPrevented&&this.$el){this.focused=!0;const i={event:e,target:this};(this.isOpen?this.closePopup:this.openPopup)(i)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},onWrapperKeyDown(e){const{keyCode:i,altKey:n}=e,a=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.isOpen)if(i===t.Keys.esc||n&&i===t.Keys.up)e.preventDefault(),this.closePopup(d);else if(a&&a.querySelector(".k-focus")&&(i===t.Keys.up||i===t.Keys.down||i===t.Keys.left||i===t.Keys.right||i===t.Keys.home||i===t.Keys.end)){if(i===t.Keys.up&&o){const r=Array.from(a.querySelectorAll(".k-treeview-item")),l=[...r].reverse().find(u=>!!(u&&u.querySelector(".k-focus")));if(l&&r.indexOf(l)===0)return this.switchFocus(()=>{this.focusElement(o)})}this.switchFocus(t.noop)}else i===t.Keys.down&&this.switchFocus(()=>{this.focusElement(o||a)});else n&&i===t.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:i,altKey:n}=e;if(i===t.Keys.esc)this.onWrapperClick(e);else if(n||i!==t.Keys.up&&i!==t.Keys.down)return;e.preventDefault(),this.switchFocus(i===t.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)})},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focused&&this.isOpen&&!this.currentOpened)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.$el)},onPopupClosed(){this.focused&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focused&&!this.skipFocusRef){this.focused=!0;const i={event:e,target:this};this.$emit("focus",i)}},onBlur(e){var i;if(this.focused&&!this.skipFocusRef){this.focused=!1;const n={event:e,target:this},a={...n},o=e.relatedTarget||((i=e.event)==null?void 0:i.relatedTarget);!(o!=null&&o.closest(".popup-"+this.componentGuid))&&!this.adaptiveState&&(this.$emit("blur",a),this.closePopup(n))}},onWrapperMouseDown(){this.focused&&this.switchFocus(t.noop)},changeValue(e,i,n){const a={value:i,level:n?E(n):[],...e};this.$emit("changemodel",i),this.$emit("update:modelValue",i),this.$emit("change",a),this.currentValue=i},onChange(e){if(k.areSame(e.item,this.computedValue,this.dataItemKey)||!this.$el)return;const{item:i,itemHierarchicalIndex:n,event:a}=e,o={event:a,target:this};this.changeValue(o,i,n),this.closePopup(o)},onClear(e){const i={event:e,target:this};this.changeValue(i,null),this.closePopup(i),e.preventDefault()},onExpand(e){const{item:i,itemHierarchicalIndex:n,event:a}=e,o={level:E(n),item:i,event:a,target:this};this.$emit("expandchange",o)},onFilterChange(e){const n={filter:{field:this.$props.textField,operator:"contains",value:e.target.value},event:e,target:this};this.$emit("filterchange",n),this.$props.filter===void 0&&(this.filterState=e.target.value)}}});exports.DropDownTree=he;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),t=require("@progress/kendo-vue-common"),ne=require("@progress/kendo-vue-popup"),ae=require("@progress/kendo-vue-intl"),O=require("@progress/kendo-vue-treeview"),b=require("../package-metadata.js"),k=require("../common/utils.js"),oe=require("./ListNoData.js"),c=require("../messages/main.js"),le=require("@progress/kendo-vue-labels"),T=require("../common/ListFilter.js"),B=require("@progress/kendo-vue-buttons"),w=require("@progress/kendo-svg-icons"),K=require("../common/constants.js"),re=require("@progress/kendo-vue-layout"),de=require("../common/DropDownBase.js");function L(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const{sizeMap:ue,roundedMap:ce}=t.kendoThemeMaps,pe="Please select a value from the list!",E=e=>e.split("_").map(i=>parseInt(i,10)),S=(e,i)=>{const{validationMessage:n,valid:a,required:o}=e;return{customError:n!==void 0,valid:!!(a!==void 0?a:!o||i),valueMissing:!i}},he=s.defineComponent({name:"KendoDropDownTree",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:{type:[Object,String,Number,Boolean],default:function(){}},modelValue:{type:[Object,String,Number,Boolean],default:function(){}},valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},selectField:{type:String,default:"selected"},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,ariaLabel:{type:String,default:void 0},ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},item:[String,Function,Object],header:[String,Function,Object],footer:[String,Function,Object],valueRender:[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:K.MOBILE_SMALL_DEVICE,medium:K.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,t.validatePackage(b.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI(b.packageMetadata),this.licenseMessage=t.getLicenseMessage(b.packageMetadata),this.base=new de(this),this.componentGuid=t.guid(),this.anchor=t.guid()},data(){return{showLicenseWatermark:!1,licenseMessage:void 0,currentOpened:!1,focused:!1,filterState:"",currentValue:void 0,popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{wrapperClass(){const{validationMessage:e,valid:i,required:n,validityStyles:a}=this.$props,o=S({validationMessage:e,valid:i,required:n},this.hasValue),d=!a||o.valid,{size:r,rounded:l,fillMode:u}=this.$props;return{"k-dropdowntree":!0,"k-picker":!0,[this.$props.className]:this.$props.className,[`k-picker-${ue[r]||r}`]:r,[`k-rounded-${ce[l]||l}`]:l,[`k-picker-${u}`]:u,"k-focus":this.focused,"k-invalid":!d,"k-loading":this.$props.loading,"k-required":n,"k-disabled":this.$props.disabled}},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.currentOpened},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return k.isPresent(this.computedValue)},currentValueText(){return this.hasValue?k.getItemValue(this.computedValue,this.$props.textField):""}},watch:{isOpen:function(e){e&&this.value?this.initialAdaptiveRenderingValues=[this.value]:this.initialAdaptiveRenderingValues=void 0}},mounted(){this.observer=t.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.elementRef=t.getRef(this,"kendoAnchor"),this.inputRef=t.getRef(this,"input"),this.selectRef=t.getRef(this,"select"),this.treeViewRef=t.getRef(this,"treeView"),this.skipFocusRef=!1,this.popupRef=t.getRef(this,"popup"),this.calculatePopupWidth()},updated(){this.inputRef=t.getRef(this,"input"),this.treeViewRef=t.getRef(this,"treeView"),this.popupRef&&this.isOpen&&this.hasValue&&this.popupRef.reposition(),this.setValidity(),this.calculatePopupWidth()},render(){let e;const i=this.$props.id||this.componentGuid,{dataItems:n,dataItemKey:a,popupSettings:o,disabled:d,placeholder:r,label:l,name:u,selectField:R,subItemsField:$,validationMessage:q,valid:W,required:F,validityStyles:P,adaptiveTitle:A}=this.$props,g=t.getTabIndex(this.$props.tabIndex,d),x=ae.provideLocalizationService(this),z=S({validationMessage:q,valid:W,required:F},this.hasValue),I=this.adaptiveState,p=this.$props.dir,N=t.templateRendering.call(this,this.item,t.getListeners.call(this)),j=t.templateRendering.call(this,this.valueRender,t.getListeners.call(this)),_=t.templateRendering.call(this,this.$props.header,t.getListeners.call(this)),G=t.templateRendering.call(this,this.$props.footer,t.getListeners.call(this)),v=t.getTemplate.call(this,{h:s.h,template:_}),y=t.getTemplate.call(this,{h:s.h,template:G}),H=t.templateRendering.call(this,this.$props.listNoData,t.getListeners.call(this)),U=s.createVNode(oe.ListNoData,null,L(e=x.toLanguageString(c.nodata,c.messages[c.nodata]))?e:{default:()=>[e]}),M=t.getTemplate.call(this,{h:s.h,defaultRendering:U,template:H}),J=s.createVNode("span",{class:"k-input-value-text"},[this.currentValueText||r]),Q=t.getTemplate.call(this,{h:s.h,defaultRendering:J,template:j,additionalProps:{value:this.computedValue}}),X=()=>[s.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[s.createVNode("div",{class:"k-actionsheet-title"},[s.createVNode("div",{class:"k-text-center"},[A]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[r])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode(B.Button,{tabIndex:1,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onWrapperClick,icon:"x",svgIcon:w.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(T.ListFilter,{tabIndex:0,value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:h,rounded:D,fillMode:V,onFocus:this.onFocus,onBlur:this.onBlur},null)])],Y=t.templateRendering.call(this,X,t.getListeners.call(this)),Z=()=>{const m=this.base.getTemplateDef.call(this,v,s.h),C=this.base.getTemplateDef.call(this,y,s.h);return[m&&s.createVNode("div",{class:"k-list-header"},[m]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:a,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:"large",item:N},null):M,C&&s.createVNode("div",{class:"k-list-footer"},[C])]},ee=t.templateRendering.call(this,Z,t.getListeners.call(this)),te=function(){return s.createVNode(re.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,header:Y,content:ee,contentClassName:"!k-overflow-hidden",onClose:this.onWrapperClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ie=!P||z.valid,{size:h,rounded:D,fillMode:V}=this.$props,se=function(){return s.createVNode("span",{class:this.wrapperClass,tabindex:g,accesskey:this.$props.accessKey,id:i,dir:p,ref:t.setRef(this,"kendoAnchor"),onKeydown:this.onWrapperKeyDown,onClick:this.onWrapperClick,onMousedown:this.onWrapperMouseDown,onFocusin:this.onFocus,onFocusout:this.onBlur,role:"combobox","aria-haspopup":"tree","aria-expanded":this.isOpen,"aria-disabled":d||void 0,"aria-label":l||this.$props.ariaLabel,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-required":F||void 0},[s.createVNode("span",{class:"k-input-inner"},[Q]),this.$props.loading&&s.createVNode(t.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!d&&s.createVNode("span",{onClick:this.onClear,class:"k-clear-value",title:x.toLanguageString(c.clear,c.messages[c.clear]),role:"button",tabindex:-1,onMousedown:m=>m.preventDefault()},[s.createVNode(t.Icon,{name:"x",icon:w.xIcon},null)]),s.createVNode(B.Button,{tabIndex:-1,type:"button","aria-label":"select",class:"k-input-button",size:h,fillMode:V,themeColor:"base",rounded:null,icon:"chevron-down",svgIcon:w.chevronDownIcon},null),s.createVNode("select",{name:u,ref:t.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,title:l,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,this.computedValue):this.computedValue},null)]),this.showLicenseWatermark?s.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null,!I&&s.createVNode(ne.Popup,{style:{width:this.popupWidth,direction:p},ref:t.setRef(this,"popup"),class:t.classNames(o.className,{"k-rtl":p==="rtl"}),popupClass:t.classNames(o.popupClass,"k-dropdowntree-popup","popup-"+this.componentGuid),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo},{default:()=>[this.$props.filterable&&s.createVNode(T.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,onBlur:this.onBlur,size:h,rounded:D,fillMode:V},null),v&&s.createVNode("div",{class:"k-list-header"},[v]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:a,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:h,item:N},null):M,y&&s.createVNode("div",{class:"k-list-footer"},[y])]})])},f=[s.h(se.call(this),{...this.$attrs}),I&&te.call(this)];return l?s.createVNode(le.FloatingLabel,{label:l,editorValue:this.currentValueText,editorPlaceholder:r,editorValid:ie,editorDisabled:d,editorId:i,focused:this.focused,dir:p},L(f)?f:{default:()=>[f]}):f},methods:{calculateMedia(e){for(let i of e)this.windowWidth=i.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:i,required:n}=this.$props,a=S({validationMessage:e,valid:i,required:n},this.hasValue);this.selectRef.setCustomValidity(a.valid?"":this.validationMessage===void 0?pe:this.validationMessage)}},openPopup(e){if(!this.isOpen){const i={...e};this.$emit("open",i),this.currentOpened=!0}},closePopup(e){if(this.isOpen){const i={...e};this.$emit("close",i),this.currentOpened=!1}},onWrapperClick(e){if(this.onFilterChange({...e,target:{value:""}}),!e.defaultPrevented&&this.$el){this.focused=!0;const i={event:e,target:this};(this.isOpen?this.closePopup:this.openPopup)(i)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},onWrapperKeyDown(e){const{keyCode:i,altKey:n}=e,a=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.isOpen)if(i===t.Keys.esc||n&&i===t.Keys.up)e.preventDefault(),this.closePopup(d);else if(a&&a.querySelector(".k-focus")&&(i===t.Keys.up||i===t.Keys.down||i===t.Keys.left||i===t.Keys.right||i===t.Keys.home||i===t.Keys.end)){if(i===t.Keys.up&&o){const r=Array.from(a.querySelectorAll(".k-treeview-item")),l=[...r].reverse().find(u=>!!(u&&u.querySelector(".k-focus")));if(l&&r.indexOf(l)===0)return this.switchFocus(()=>{this.focusElement(o)})}this.switchFocus(t.noop)}else i===t.Keys.down&&this.switchFocus(()=>{this.focusElement(o||a)});else n&&i===t.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:i,altKey:n}=e;if(i===t.Keys.esc)this.onWrapperClick(e);else if(n||i!==t.Keys.up&&i!==t.Keys.down)return;e.preventDefault(),this.switchFocus(i===t.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)})},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focused&&this.isOpen&&!this.currentOpened)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.$el)},onPopupClosed(){this.focused&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focused&&!this.skipFocusRef){this.focused=!0;const i={event:e,target:this};this.$emit("focus",i)}},onBlur(e){var i;if(this.focused&&!this.skipFocusRef){this.focused=!1;const n={event:e,target:this},a={...n},o=e.relatedTarget||((i=e.event)==null?void 0:i.relatedTarget);!(o!=null&&o.closest(".popup-"+this.componentGuid))&&!this.adaptiveState&&(this.$emit("blur",a),this.closePopup(n))}},onWrapperMouseDown(){this.focused&&this.switchFocus(t.noop)},changeValue(e,i,n){const a={value:i,level:n?E(n):[],...e};this.$emit("changemodel",i),this.$emit("update:modelValue",i),this.$emit("change",a),this.currentValue=i},onChange(e){if(k.areSame(e.item,this.computedValue,this.dataItemKey)||!this.$el)return;const{item:i,itemHierarchicalIndex:n,event:a}=e,o={event:a,target:this};this.changeValue(o,i,n),this.closePopup(o)},onClear(e){const i={event:e,target:this};this.changeValue(i,null),this.closePopup(i),e.preventDefault()},onExpand(e){const{item:i,itemHierarchicalIndex:n,event:a}=e,o={level:E(n),item:i,event:a,target:this};this.$emit("expandchange",o)},onFilterChange(e){const n={filter:{field:this.$props.textField,operator:"contains",value:e.target.value},event:e,target:this};this.$emit("filterchange",n),this.$props.filter===void 0&&(this.filterState=e.target.value)}}});exports.DropDownTree=he;
|
|
@@ -388,11 +388,11 @@ const {
|
|
|
388
388
|
role: "combobox",
|
|
389
389
|
"aria-haspopup": "tree",
|
|
390
390
|
"aria-expanded": this.isOpen,
|
|
391
|
-
"aria-disabled": d,
|
|
391
|
+
"aria-disabled": d || void 0,
|
|
392
392
|
"aria-label": l || this.$props.ariaLabel,
|
|
393
393
|
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
394
394
|
"aria-describedby": this.$props.ariaDescribedBy,
|
|
395
|
-
"aria-required": D
|
|
395
|
+
"aria-required": D || void 0
|
|
396
396
|
}, [
|
|
397
397
|
i("span", {
|
|
398
398
|
class: "k-input-inner"
|