@zeedhi/vuetify 1.45.0 → 1.45.1
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/dist/zd-vuetify.esm.js
CHANGED
|
@@ -40221,7 +40221,7 @@ let ZdSelect = class ZdSelect extends __vue_component__$18 {
|
|
|
40221
40221
|
this.originalOnScroll(event);
|
|
40222
40222
|
if (this.instance.datasource.loadAll)
|
|
40223
40223
|
return;
|
|
40224
|
-
if (this.instance.
|
|
40224
|
+
if (!this.instance.showLoadMore())
|
|
40225
40225
|
return;
|
|
40226
40226
|
const elem = event.target;
|
|
40227
40227
|
if (!elem)
|
|
@@ -40289,7 +40289,7 @@ let ZdSelect = class ZdSelect extends __vue_component__$18 {
|
|
|
40289
40289
|
if (!this.componentRef || !this.componentRef.updateMenuDimensions)
|
|
40290
40290
|
return;
|
|
40291
40291
|
// Update menu position
|
|
40292
|
-
this.componentRef.updateMenuDimensions
|
|
40292
|
+
this.$nextTick(this.componentRef.updateMenuDimensions);
|
|
40293
40293
|
}
|
|
40294
40294
|
};
|
|
40295
40295
|
__decorate([
|
|
@@ -40610,14 +40610,6 @@ var __vue_render__$K = function () {
|
|
|
40610
40610
|
_c(
|
|
40611
40611
|
"div",
|
|
40612
40612
|
{
|
|
40613
|
-
directives: [
|
|
40614
|
-
{
|
|
40615
|
-
name: "show",
|
|
40616
|
-
rawName: "v-show",
|
|
40617
|
-
value: _vm.instance.showLoadMore(),
|
|
40618
|
-
expression: "instance.showLoadMore()",
|
|
40619
|
-
},
|
|
40620
|
-
],
|
|
40621
40613
|
staticClass: "zd-select-append-item",
|
|
40622
40614
|
on: {
|
|
40623
40615
|
mousedown: function ($event) {
|
|
@@ -40665,7 +40657,7 @@ __vue_render__$K._withStripped = true;
|
|
|
40665
40657
|
/* style */
|
|
40666
40658
|
const __vue_inject_styles__$K = function (inject) {
|
|
40667
40659
|
if (!inject) return
|
|
40668
|
-
inject("data-v-
|
|
40660
|
+
inject("data-v-b1b2a69a_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n padding-left: 0;\n padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n text-align: right;\n}\n.zd-select .v-select__selections {\n padding: 0;\n width: 172px;\n overflow: hidden;\n white-space: nowrap;\n flex-wrap: nowrap;\n text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n color: var(--zd-font-color);\n margin: 0;\n max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n font-size: var(--zd-font-body2-size);\n font-weight: var(--zd-font-body2-size);\n color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n height: auto;\n min-height: 40px;\n padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item:not(.theme--dark) {\n color: var(--zd-font-color);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n height: auto;\n line-height: unset;\n white-space: unset;\n overflow: auto;\n text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n height: auto;\n min-height: 24px;\n padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n text-align: right;\n}", map: undefined, media: undefined });
|
|
40669
40661
|
|
|
40670
40662
|
};
|
|
40671
40663
|
/* scoped */
|
|
@@ -44462,56 +44454,63 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
|
|
|
44462
44454
|
constructor() {
|
|
44463
44455
|
super(...arguments);
|
|
44464
44456
|
this.instanceType = SelectMultiple;
|
|
44465
|
-
this.
|
|
44457
|
+
this.expandedMode = false;
|
|
44458
|
+
this.rows = 1;
|
|
44466
44459
|
this.lastDisplayedChip = 0;
|
|
44467
44460
|
this.allSelected = false;
|
|
44461
|
+
this.hasHiddenRows = false;
|
|
44462
|
+
}
|
|
44463
|
+
get maxRowsNumber() {
|
|
44464
|
+
return Number(this.instance.maxRows || Infinity);
|
|
44468
44465
|
}
|
|
44469
44466
|
mounted() {
|
|
44470
44467
|
this.componentRef = this.$refs.instance;
|
|
44471
44468
|
this.element = this.componentRef.$el;
|
|
44472
|
-
this.initialHeight = this.element.offsetHeight;
|
|
44473
44469
|
this.listener = () => this.handleResize();
|
|
44474
44470
|
window.addEventListener('resize', this.listener);
|
|
44475
|
-
|
|
44476
|
-
|
|
44477
|
-
|
|
44471
|
+
this.initialHeight = this.element.offsetHeight;
|
|
44472
|
+
}
|
|
44473
|
+
onValueChange() {
|
|
44474
|
+
if (this.componentRef.isFocused)
|
|
44475
|
+
return;
|
|
44476
|
+
this.refreshDisplay();
|
|
44478
44477
|
}
|
|
44479
44478
|
beforeDestroy() {
|
|
44480
44479
|
window.removeEventListener('resize', this.listener);
|
|
44481
44480
|
}
|
|
44482
|
-
|
|
44483
|
-
|
|
44484
|
-
|
|
44485
|
-
|
|
44486
|
-
|
|
44487
|
-
this.oneLineMode = prevMode;
|
|
44481
|
+
initChipConfig() {
|
|
44482
|
+
this.refreshDisplay(() => {
|
|
44483
|
+
this.$nextTick(() => {
|
|
44484
|
+
this.initialHeight = this.element.offsetHeight;
|
|
44485
|
+
});
|
|
44488
44486
|
if (this.componentRef.isFocused) {
|
|
44489
44487
|
this.updateMenu();
|
|
44490
44488
|
}
|
|
44491
44489
|
});
|
|
44492
|
-
this.unwatchValue();
|
|
44493
44490
|
}
|
|
44494
44491
|
calcDisplay(force = false) {
|
|
44495
44492
|
var _a;
|
|
44496
44493
|
const chips = this.getChips();
|
|
44497
|
-
if (chips.length
|
|
44498
|
-
|
|
44499
|
-
|
|
44500
|
-
|
|
44501
|
-
|
|
44502
|
-
this.lastDisplayedChip = ((_a = this.instance.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
44503
|
-
}
|
|
44494
|
+
if (chips.length === 0)
|
|
44495
|
+
return;
|
|
44496
|
+
if (this.element.offsetHeight > this.initialHeight || force) {
|
|
44497
|
+
this.lastDisplayedChip = this.getLastChipIndex(chips);
|
|
44498
|
+
return;
|
|
44504
44499
|
}
|
|
44500
|
+
this.lastDisplayedChip = ((_a = this.instance.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
44505
44501
|
}
|
|
44506
44502
|
getLastChipIndex(chips) {
|
|
44507
44503
|
let lastIndex = -1;
|
|
44508
44504
|
let filledWidth = 0;
|
|
44509
44505
|
const firstChip = chips[0];
|
|
44510
|
-
|
|
44506
|
+
let baseTop = firstChip.offsetTop;
|
|
44511
44507
|
const marginX = this.getMarginX(firstChip);
|
|
44508
|
+
if (!firstChip.parentElement)
|
|
44509
|
+
return 0;
|
|
44512
44510
|
let inputWidth = firstChip.parentElement.offsetWidth;
|
|
44513
44511
|
inputWidth -= this.getPaddingX(firstChip.parentElement);
|
|
44514
|
-
|
|
44512
|
+
let rowCount = 1;
|
|
44513
|
+
this.hasHiddenRows = chips.some((chip, index) => {
|
|
44515
44514
|
if (chip.offsetTop === baseTop) {
|
|
44516
44515
|
const chipWidth = chip.offsetWidth + marginX;
|
|
44517
44516
|
filledWidth += chipWidth;
|
|
@@ -44520,9 +44519,16 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
|
|
|
44520
44519
|
}
|
|
44521
44520
|
return false;
|
|
44522
44521
|
}
|
|
44522
|
+
rowCount += 1;
|
|
44523
|
+
if (rowCount <= this.rows) {
|
|
44524
|
+
baseTop = chip.offsetTop;
|
|
44525
|
+
filledWidth = chip.offsetWidth + marginX;
|
|
44526
|
+
lastIndex = index;
|
|
44527
|
+
return false;
|
|
44528
|
+
}
|
|
44523
44529
|
return true;
|
|
44524
44530
|
});
|
|
44525
|
-
if (!
|
|
44531
|
+
if (!this.hasHiddenRows) {
|
|
44526
44532
|
lastIndex = this.instance.value.length - 1;
|
|
44527
44533
|
}
|
|
44528
44534
|
return lastIndex;
|
|
@@ -44552,7 +44558,7 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
|
|
|
44552
44558
|
const { input, menu } = this.componentRef.$refs;
|
|
44553
44559
|
input.focus();
|
|
44554
44560
|
menu.isActive = !this.instance.readonly && !this.instance.disabled && !menu.isActive;
|
|
44555
|
-
this.
|
|
44561
|
+
this.rows = menu.isActive ? this.maxRowsNumber : 1;
|
|
44556
44562
|
this.$nextTick(() => { this.componentRef.isFocused = true; });
|
|
44557
44563
|
}
|
|
44558
44564
|
/**
|
|
@@ -44572,20 +44578,18 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
|
|
|
44572
44578
|
}
|
|
44573
44579
|
selectClick(event) {
|
|
44574
44580
|
const { menu } = this.componentRef.$refs;
|
|
44575
|
-
if (!menu.isActive)
|
|
44576
|
-
this.
|
|
44581
|
+
if (!menu.isActive) {
|
|
44582
|
+
this.rows = this.maxRowsNumber;
|
|
44583
|
+
if (this.instance.maxRows) {
|
|
44584
|
+
this.$nextTick(() => {
|
|
44585
|
+
this.calcDisplay(true);
|
|
44586
|
+
});
|
|
44587
|
+
}
|
|
44588
|
+
}
|
|
44577
44589
|
this.instance.click(event, this.$el);
|
|
44578
44590
|
}
|
|
44579
44591
|
handleResize() {
|
|
44580
|
-
|
|
44581
|
-
this.oneLineMode = false;
|
|
44582
|
-
this.$nextTick(() => {
|
|
44583
|
-
if (!this.checkOverflow()) {
|
|
44584
|
-
this.calcDisplay(true);
|
|
44585
|
-
}
|
|
44586
|
-
this.oneLineMode = true;
|
|
44587
|
-
});
|
|
44588
|
-
}
|
|
44592
|
+
this.refreshDisplay();
|
|
44589
44593
|
}
|
|
44590
44594
|
get moreItemsText() {
|
|
44591
44595
|
this.instance.moreChip = this.instance.value.length - this.lastDisplayedChip - 1;
|
|
@@ -44594,19 +44598,36 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
|
|
|
44594
44598
|
selectChange(value, event) {
|
|
44595
44599
|
this.instance.selectChange(value.map((item) => item.originalRow), event, this.$el);
|
|
44596
44600
|
this.changeSelectAllItemsValue();
|
|
44601
|
+
const { menu } = this.componentRef.$refs;
|
|
44602
|
+
if (menu.isActive && this.instance.maxRows) {
|
|
44603
|
+
this.refreshDisplay();
|
|
44604
|
+
}
|
|
44597
44605
|
}
|
|
44598
44606
|
selectBlur(event) {
|
|
44599
|
-
if (
|
|
44600
|
-
this.
|
|
44607
|
+
if (this.rows !== 1) {
|
|
44608
|
+
this.rows = 1;
|
|
44601
44609
|
this.calcDisplay();
|
|
44602
44610
|
this.$nextTick(() => this.checkOverflow());
|
|
44603
44611
|
}
|
|
44604
44612
|
this.superMethods(__vue_component__$K).selectBlur.call(this, event);
|
|
44605
44613
|
}
|
|
44606
44614
|
selectFocus(event) {
|
|
44607
|
-
this.
|
|
44615
|
+
this.rows = this.maxRowsNumber;
|
|
44616
|
+
this.refreshDisplay();
|
|
44608
44617
|
this.superMethods(__vue_component__$K).selectFocus.call(this, event);
|
|
44609
44618
|
}
|
|
44619
|
+
refreshDisplay(cb) {
|
|
44620
|
+
const prevMode = this.expandedMode;
|
|
44621
|
+
this.expandedMode = true;
|
|
44622
|
+
this.$nextTick(() => {
|
|
44623
|
+
this.expandedMode = prevMode;
|
|
44624
|
+
if (!this.checkOverflow()) {
|
|
44625
|
+
this.calcDisplay(true);
|
|
44626
|
+
}
|
|
44627
|
+
if (cb)
|
|
44628
|
+
cb();
|
|
44629
|
+
});
|
|
44630
|
+
}
|
|
44610
44631
|
onSelectAll(event) {
|
|
44611
44632
|
this.allSelected = !this.allSelected;
|
|
44612
44633
|
this.$nextTick(() => {
|
|
@@ -44657,6 +44678,16 @@ __decorate([
|
|
|
44657
44678
|
PropWatch({ type: [Boolean, String], default: false }),
|
|
44658
44679
|
__metadata("design:type", Boolean)
|
|
44659
44680
|
], ZdSelectMultiple.prototype, "showSelectAll", void 0);
|
|
44681
|
+
__decorate([
|
|
44682
|
+
PropWatch({ type: [String, Number], default: undefined }),
|
|
44683
|
+
__metadata("design:type", Object)
|
|
44684
|
+
], ZdSelectMultiple.prototype, "maxRows", void 0);
|
|
44685
|
+
__decorate([
|
|
44686
|
+
Watch('instance.value'),
|
|
44687
|
+
__metadata("design:type", Function),
|
|
44688
|
+
__metadata("design:paramtypes", []),
|
|
44689
|
+
__metadata("design:returntype", void 0)
|
|
44690
|
+
], ZdSelectMultiple.prototype, "onValueChange", null);
|
|
44660
44691
|
ZdSelectMultiple = __decorate([
|
|
44661
44692
|
Component$2
|
|
44662
44693
|
], ZdSelectMultiple);
|
|
@@ -44698,7 +44729,6 @@ var __vue_render__$k = function () {
|
|
|
44698
44729
|
),
|
|
44699
44730
|
"zd-no-border": !_vm.instance.showBorder,
|
|
44700
44731
|
"zd-dense": _vm.instance.dense,
|
|
44701
|
-
"zd-select-multiple--one-line": _vm.oneLineMode,
|
|
44702
44732
|
"zd-select-multiple-autocomplete": _vm.instance.autocomplete,
|
|
44703
44733
|
"zd-input-required": _vm.instance.validations.required,
|
|
44704
44734
|
},
|
|
@@ -44710,7 +44740,6 @@ var __vue_render__$k = function () {
|
|
|
44710
44740
|
id: _vm.instance.name,
|
|
44711
44741
|
"return-object": "",
|
|
44712
44742
|
"validate-on-blur": "",
|
|
44713
|
-
"no-filter": "",
|
|
44714
44743
|
multiple: "",
|
|
44715
44744
|
name: _vm.instance.name,
|
|
44716
44745
|
loading: _vm.instance.datasource.loading,
|
|
@@ -44747,6 +44776,7 @@ var __vue_render__$k = function () {
|
|
|
44747
44776
|
fixed: true,
|
|
44748
44777
|
"max-width": _vm.parentWidth,
|
|
44749
44778
|
closeOnContentClick: false,
|
|
44779
|
+
maxHeight: _vm.instance.menuMaxHeight,
|
|
44750
44780
|
},
|
|
44751
44781
|
"search-input": _vm.instance.search,
|
|
44752
44782
|
"append-icon": _vm.$getIcon(_vm.instance.appendIcon),
|
|
@@ -44926,7 +44956,9 @@ var __vue_render__$k = function () {
|
|
|
44926
44956
|
key: "selection",
|
|
44927
44957
|
fn: function (props) {
|
|
44928
44958
|
return [
|
|
44929
|
-
|
|
44959
|
+
_vm.expandedMode ||
|
|
44960
|
+
!_vm.hasHiddenRows ||
|
|
44961
|
+
props.index <= _vm.lastDisplayedChip
|
|
44930
44962
|
? _c(
|
|
44931
44963
|
"v-chip",
|
|
44932
44964
|
{
|
|
@@ -44950,7 +44982,9 @@ var __vue_render__$k = function () {
|
|
|
44950
44982
|
)
|
|
44951
44983
|
: _vm._e(),
|
|
44952
44984
|
_vm._v(" "),
|
|
44953
|
-
_vm.
|
|
44985
|
+
!_vm.expandedMode &&
|
|
44986
|
+
_vm.hasHiddenRows &&
|
|
44987
|
+
props.index === _vm.lastDisplayedChip + 1
|
|
44954
44988
|
? _c("span", { staticClass: "more-items grey--text caption" }, [
|
|
44955
44989
|
_vm._v(_vm._s(_vm.moreItemsText)),
|
|
44956
44990
|
])
|
|
@@ -45018,14 +45052,6 @@ var __vue_render__$k = function () {
|
|
|
45018
45052
|
_c(
|
|
45019
45053
|
"div",
|
|
45020
45054
|
{
|
|
45021
|
-
directives: [
|
|
45022
|
-
{
|
|
45023
|
-
name: "show",
|
|
45024
|
-
rawName: "v-show",
|
|
45025
|
-
value: _vm.instance.showLoadMore(),
|
|
45026
|
-
expression: "instance.showLoadMore()",
|
|
45027
|
-
},
|
|
45028
|
-
],
|
|
45029
45055
|
staticClass: "zd-select-append-item",
|
|
45030
45056
|
on: {
|
|
45031
45057
|
mousedown: function ($event) {
|
|
@@ -45073,7 +45099,7 @@ __vue_render__$k._withStripped = true;
|
|
|
45073
45099
|
/* style */
|
|
45074
45100
|
const __vue_inject_styles__$k = function (inject) {
|
|
45075
45101
|
if (!inject) return
|
|
45076
|
-
inject("data-v-
|
|
45102
|
+
inject("data-v-9f031bd2_0", { source: ".zd-select-multiple .v-select__slot .v-select__selections {\n flex-wrap: wrap;\n padding-bottom: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n margin-bottom: 0.2rem;\n margin-top: 0.2rem;\n}\n.zd-select-multiple .v-select__slot .v-select__selections input {\n position: relative;\n top: -2px;\n}\n.zd-select-multiple-autocomplete.v-input:not(.v-input--is-focused) > .v-input__control > .v-input__slot > .v-select__slot input {\n padding: 0;\n}\n.zd-select-multiple .v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n padding: 0;\n}\n.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n padding: 0 var(--spacing-1);\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n margin: 0 var(--spacing-1) 0 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n font-size: 14px !important;\n margin-left: var(--spacing-2);\n margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n margin-bottom: 0.2rem;\n margin-top: 0.2rem;\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n opacity: 0.5;\n}", map: undefined, media: undefined });
|
|
45077
45103
|
|
|
45078
45104
|
};
|
|
45079
45105
|
/* scoped */
|
|
@@ -48227,26 +48253,7 @@ let ZdTree = class ZdTree extends ZdComponentRender$1 {
|
|
|
48227
48253
|
mounted() {
|
|
48228
48254
|
this.instance.setTree(this.$refs.tree);
|
|
48229
48255
|
this.setAfterTitleMargin();
|
|
48230
|
-
|
|
48231
|
-
}
|
|
48232
|
-
destroy() {
|
|
48233
|
-
document.removeEventListener('click', this.unselect);
|
|
48234
|
-
}
|
|
48235
|
-
unselect(event) {
|
|
48236
|
-
var _a;
|
|
48237
|
-
const tree = (_a = this.$refs.tree) === null || _a === void 0 ? void 0 : _a.$el;
|
|
48238
|
-
if (!tree)
|
|
48239
|
-
return;
|
|
48240
|
-
if (tree.contains(event.target))
|
|
48241
|
-
return;
|
|
48242
|
-
this.instance.selectedNodes.forEach((node) => {
|
|
48243
|
-
if (!node.path)
|
|
48244
|
-
return;
|
|
48245
|
-
const instanceNode = this.instance.getNode(node.path);
|
|
48246
|
-
if (!instanceNode)
|
|
48247
|
-
return;
|
|
48248
|
-
instanceNode.isSelected = false;
|
|
48249
|
-
});
|
|
48256
|
+
this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true });
|
|
48250
48257
|
}
|
|
48251
48258
|
dataChange() {
|
|
48252
48259
|
this.instance.createNodesFromDatasource();
|
|
@@ -48390,12 +48397,6 @@ __decorate([
|
|
|
48390
48397
|
__metadata("design:paramtypes", []),
|
|
48391
48398
|
__metadata("design:returntype", void 0)
|
|
48392
48399
|
], ZdTree.prototype, "dataChange", null);
|
|
48393
|
-
__decorate([
|
|
48394
|
-
Watch('instance.nodes', { deep: true }),
|
|
48395
|
-
__metadata("design:type", Function),
|
|
48396
|
-
__metadata("design:paramtypes", []),
|
|
48397
|
-
__metadata("design:returntype", void 0)
|
|
48398
|
-
], ZdTree.prototype, "nodeChange", null);
|
|
48399
48400
|
ZdTree = __decorate([
|
|
48400
48401
|
Component({
|
|
48401
48402
|
components: { ZdTreeCheckbox: __vue_component__$4, ZdTreeAfterTitle: __vue_component__$3 },
|
package/dist/zd-vuetify.umd.js
CHANGED
|
@@ -40220,7 +40220,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
40220
40220
|
this.originalOnScroll(event);
|
|
40221
40221
|
if (this.instance.datasource.loadAll)
|
|
40222
40222
|
return;
|
|
40223
|
-
if (this.instance.
|
|
40223
|
+
if (!this.instance.showLoadMore())
|
|
40224
40224
|
return;
|
|
40225
40225
|
const elem = event.target;
|
|
40226
40226
|
if (!elem)
|
|
@@ -40288,7 +40288,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
40288
40288
|
if (!this.componentRef || !this.componentRef.updateMenuDimensions)
|
|
40289
40289
|
return;
|
|
40290
40290
|
// Update menu position
|
|
40291
|
-
this.componentRef.updateMenuDimensions
|
|
40291
|
+
this.$nextTick(this.componentRef.updateMenuDimensions);
|
|
40292
40292
|
}
|
|
40293
40293
|
};
|
|
40294
40294
|
__decorate([
|
|
@@ -40609,14 +40609,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
40609
40609
|
_c(
|
|
40610
40610
|
"div",
|
|
40611
40611
|
{
|
|
40612
|
-
directives: [
|
|
40613
|
-
{
|
|
40614
|
-
name: "show",
|
|
40615
|
-
rawName: "v-show",
|
|
40616
|
-
value: _vm.instance.showLoadMore(),
|
|
40617
|
-
expression: "instance.showLoadMore()",
|
|
40618
|
-
},
|
|
40619
|
-
],
|
|
40620
40612
|
staticClass: "zd-select-append-item",
|
|
40621
40613
|
on: {
|
|
40622
40614
|
mousedown: function ($event) {
|
|
@@ -40664,7 +40656,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
40664
40656
|
/* style */
|
|
40665
40657
|
const __vue_inject_styles__$K = function (inject) {
|
|
40666
40658
|
if (!inject) return
|
|
40667
|
-
inject("data-v-
|
|
40659
|
+
inject("data-v-b1b2a69a_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n padding-left: 0;\n padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n text-align: right;\n}\n.zd-select .v-select__selections {\n padding: 0;\n width: 172px;\n overflow: hidden;\n white-space: nowrap;\n flex-wrap: nowrap;\n text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n color: var(--zd-font-color);\n margin: 0;\n max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n font-size: var(--zd-font-body2-size);\n font-weight: var(--zd-font-body2-size);\n color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n height: auto;\n min-height: 40px;\n padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item:not(.theme--dark) {\n color: var(--zd-font-color);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n height: auto;\n line-height: unset;\n white-space: unset;\n overflow: auto;\n text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n height: auto;\n min-height: 24px;\n padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n text-align: right;\n}", map: undefined, media: undefined });
|
|
40668
40660
|
|
|
40669
40661
|
};
|
|
40670
40662
|
/* scoped */
|
|
@@ -44461,56 +44453,63 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44461
44453
|
constructor() {
|
|
44462
44454
|
super(...arguments);
|
|
44463
44455
|
this.instanceType = common.SelectMultiple;
|
|
44464
|
-
this.
|
|
44456
|
+
this.expandedMode = false;
|
|
44457
|
+
this.rows = 1;
|
|
44465
44458
|
this.lastDisplayedChip = 0;
|
|
44466
44459
|
this.allSelected = false;
|
|
44460
|
+
this.hasHiddenRows = false;
|
|
44461
|
+
}
|
|
44462
|
+
get maxRowsNumber() {
|
|
44463
|
+
return Number(this.instance.maxRows || Infinity);
|
|
44467
44464
|
}
|
|
44468
44465
|
mounted() {
|
|
44469
44466
|
this.componentRef = this.$refs.instance;
|
|
44470
44467
|
this.element = this.componentRef.$el;
|
|
44471
|
-
this.initialHeight = this.element.offsetHeight;
|
|
44472
44468
|
this.listener = () => this.handleResize();
|
|
44473
44469
|
window.addEventListener('resize', this.listener);
|
|
44474
|
-
|
|
44475
|
-
|
|
44476
|
-
|
|
44470
|
+
this.initialHeight = this.element.offsetHeight;
|
|
44471
|
+
}
|
|
44472
|
+
onValueChange() {
|
|
44473
|
+
if (this.componentRef.isFocused)
|
|
44474
|
+
return;
|
|
44475
|
+
this.refreshDisplay();
|
|
44477
44476
|
}
|
|
44478
44477
|
beforeDestroy() {
|
|
44479
44478
|
window.removeEventListener('resize', this.listener);
|
|
44480
44479
|
}
|
|
44481
|
-
|
|
44482
|
-
|
|
44483
|
-
|
|
44484
|
-
|
|
44485
|
-
|
|
44486
|
-
this.oneLineMode = prevMode;
|
|
44480
|
+
initChipConfig() {
|
|
44481
|
+
this.refreshDisplay(() => {
|
|
44482
|
+
this.$nextTick(() => {
|
|
44483
|
+
this.initialHeight = this.element.offsetHeight;
|
|
44484
|
+
});
|
|
44487
44485
|
if (this.componentRef.isFocused) {
|
|
44488
44486
|
this.updateMenu();
|
|
44489
44487
|
}
|
|
44490
44488
|
});
|
|
44491
|
-
this.unwatchValue();
|
|
44492
44489
|
}
|
|
44493
44490
|
calcDisplay(force = false) {
|
|
44494
44491
|
var _a;
|
|
44495
44492
|
const chips = this.getChips();
|
|
44496
|
-
if (chips.length
|
|
44497
|
-
|
|
44498
|
-
|
|
44499
|
-
|
|
44500
|
-
|
|
44501
|
-
this.lastDisplayedChip = ((_a = this.instance.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
44502
|
-
}
|
|
44493
|
+
if (chips.length === 0)
|
|
44494
|
+
return;
|
|
44495
|
+
if (this.element.offsetHeight > this.initialHeight || force) {
|
|
44496
|
+
this.lastDisplayedChip = this.getLastChipIndex(chips);
|
|
44497
|
+
return;
|
|
44503
44498
|
}
|
|
44499
|
+
this.lastDisplayedChip = ((_a = this.instance.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
44504
44500
|
}
|
|
44505
44501
|
getLastChipIndex(chips) {
|
|
44506
44502
|
let lastIndex = -1;
|
|
44507
44503
|
let filledWidth = 0;
|
|
44508
44504
|
const firstChip = chips[0];
|
|
44509
|
-
|
|
44505
|
+
let baseTop = firstChip.offsetTop;
|
|
44510
44506
|
const marginX = this.getMarginX(firstChip);
|
|
44507
|
+
if (!firstChip.parentElement)
|
|
44508
|
+
return 0;
|
|
44511
44509
|
let inputWidth = firstChip.parentElement.offsetWidth;
|
|
44512
44510
|
inputWidth -= this.getPaddingX(firstChip.parentElement);
|
|
44513
|
-
|
|
44511
|
+
let rowCount = 1;
|
|
44512
|
+
this.hasHiddenRows = chips.some((chip, index) => {
|
|
44514
44513
|
if (chip.offsetTop === baseTop) {
|
|
44515
44514
|
const chipWidth = chip.offsetWidth + marginX;
|
|
44516
44515
|
filledWidth += chipWidth;
|
|
@@ -44519,9 +44518,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44519
44518
|
}
|
|
44520
44519
|
return false;
|
|
44521
44520
|
}
|
|
44521
|
+
rowCount += 1;
|
|
44522
|
+
if (rowCount <= this.rows) {
|
|
44523
|
+
baseTop = chip.offsetTop;
|
|
44524
|
+
filledWidth = chip.offsetWidth + marginX;
|
|
44525
|
+
lastIndex = index;
|
|
44526
|
+
return false;
|
|
44527
|
+
}
|
|
44522
44528
|
return true;
|
|
44523
44529
|
});
|
|
44524
|
-
if (!
|
|
44530
|
+
if (!this.hasHiddenRows) {
|
|
44525
44531
|
lastIndex = this.instance.value.length - 1;
|
|
44526
44532
|
}
|
|
44527
44533
|
return lastIndex;
|
|
@@ -44551,7 +44557,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44551
44557
|
const { input, menu } = this.componentRef.$refs;
|
|
44552
44558
|
input.focus();
|
|
44553
44559
|
menu.isActive = !this.instance.readonly && !this.instance.disabled && !menu.isActive;
|
|
44554
|
-
this.
|
|
44560
|
+
this.rows = menu.isActive ? this.maxRowsNumber : 1;
|
|
44555
44561
|
this.$nextTick(() => { this.componentRef.isFocused = true; });
|
|
44556
44562
|
}
|
|
44557
44563
|
/**
|
|
@@ -44571,20 +44577,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44571
44577
|
}
|
|
44572
44578
|
selectClick(event) {
|
|
44573
44579
|
const { menu } = this.componentRef.$refs;
|
|
44574
|
-
if (!menu.isActive)
|
|
44575
|
-
this.
|
|
44580
|
+
if (!menu.isActive) {
|
|
44581
|
+
this.rows = this.maxRowsNumber;
|
|
44582
|
+
if (this.instance.maxRows) {
|
|
44583
|
+
this.$nextTick(() => {
|
|
44584
|
+
this.calcDisplay(true);
|
|
44585
|
+
});
|
|
44586
|
+
}
|
|
44587
|
+
}
|
|
44576
44588
|
this.instance.click(event, this.$el);
|
|
44577
44589
|
}
|
|
44578
44590
|
handleResize() {
|
|
44579
|
-
|
|
44580
|
-
this.oneLineMode = false;
|
|
44581
|
-
this.$nextTick(() => {
|
|
44582
|
-
if (!this.checkOverflow()) {
|
|
44583
|
-
this.calcDisplay(true);
|
|
44584
|
-
}
|
|
44585
|
-
this.oneLineMode = true;
|
|
44586
|
-
});
|
|
44587
|
-
}
|
|
44591
|
+
this.refreshDisplay();
|
|
44588
44592
|
}
|
|
44589
44593
|
get moreItemsText() {
|
|
44590
44594
|
this.instance.moreChip = this.instance.value.length - this.lastDisplayedChip - 1;
|
|
@@ -44593,19 +44597,36 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44593
44597
|
selectChange(value, event) {
|
|
44594
44598
|
this.instance.selectChange(value.map((item) => item.originalRow), event, this.$el);
|
|
44595
44599
|
this.changeSelectAllItemsValue();
|
|
44600
|
+
const { menu } = this.componentRef.$refs;
|
|
44601
|
+
if (menu.isActive && this.instance.maxRows) {
|
|
44602
|
+
this.refreshDisplay();
|
|
44603
|
+
}
|
|
44596
44604
|
}
|
|
44597
44605
|
selectBlur(event) {
|
|
44598
|
-
if (
|
|
44599
|
-
this.
|
|
44606
|
+
if (this.rows !== 1) {
|
|
44607
|
+
this.rows = 1;
|
|
44600
44608
|
this.calcDisplay();
|
|
44601
44609
|
this.$nextTick(() => this.checkOverflow());
|
|
44602
44610
|
}
|
|
44603
44611
|
this.superMethods(__vue_component__$K).selectBlur.call(this, event);
|
|
44604
44612
|
}
|
|
44605
44613
|
selectFocus(event) {
|
|
44606
|
-
this.
|
|
44614
|
+
this.rows = this.maxRowsNumber;
|
|
44615
|
+
this.refreshDisplay();
|
|
44607
44616
|
this.superMethods(__vue_component__$K).selectFocus.call(this, event);
|
|
44608
44617
|
}
|
|
44618
|
+
refreshDisplay(cb) {
|
|
44619
|
+
const prevMode = this.expandedMode;
|
|
44620
|
+
this.expandedMode = true;
|
|
44621
|
+
this.$nextTick(() => {
|
|
44622
|
+
this.expandedMode = prevMode;
|
|
44623
|
+
if (!this.checkOverflow()) {
|
|
44624
|
+
this.calcDisplay(true);
|
|
44625
|
+
}
|
|
44626
|
+
if (cb)
|
|
44627
|
+
cb();
|
|
44628
|
+
});
|
|
44629
|
+
}
|
|
44609
44630
|
onSelectAll(event) {
|
|
44610
44631
|
this.allSelected = !this.allSelected;
|
|
44611
44632
|
this.$nextTick(() => {
|
|
@@ -44656,6 +44677,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44656
44677
|
PropWatch({ type: [Boolean, String], default: false }),
|
|
44657
44678
|
__metadata("design:type", Boolean)
|
|
44658
44679
|
], ZdSelectMultiple.prototype, "showSelectAll", void 0);
|
|
44680
|
+
__decorate([
|
|
44681
|
+
PropWatch({ type: [String, Number], default: undefined }),
|
|
44682
|
+
__metadata("design:type", Object)
|
|
44683
|
+
], ZdSelectMultiple.prototype, "maxRows", void 0);
|
|
44684
|
+
__decorate([
|
|
44685
|
+
vuePropertyDecorator.Watch('instance.value'),
|
|
44686
|
+
__metadata("design:type", Function),
|
|
44687
|
+
__metadata("design:paramtypes", []),
|
|
44688
|
+
__metadata("design:returntype", void 0)
|
|
44689
|
+
], ZdSelectMultiple.prototype, "onValueChange", null);
|
|
44659
44690
|
ZdSelectMultiple = __decorate([
|
|
44660
44691
|
Component__default["default"]
|
|
44661
44692
|
], ZdSelectMultiple);
|
|
@@ -44697,7 +44728,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44697
44728
|
),
|
|
44698
44729
|
"zd-no-border": !_vm.instance.showBorder,
|
|
44699
44730
|
"zd-dense": _vm.instance.dense,
|
|
44700
|
-
"zd-select-multiple--one-line": _vm.oneLineMode,
|
|
44701
44731
|
"zd-select-multiple-autocomplete": _vm.instance.autocomplete,
|
|
44702
44732
|
"zd-input-required": _vm.instance.validations.required,
|
|
44703
44733
|
},
|
|
@@ -44709,7 +44739,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44709
44739
|
id: _vm.instance.name,
|
|
44710
44740
|
"return-object": "",
|
|
44711
44741
|
"validate-on-blur": "",
|
|
44712
|
-
"no-filter": "",
|
|
44713
44742
|
multiple: "",
|
|
44714
44743
|
name: _vm.instance.name,
|
|
44715
44744
|
loading: _vm.instance.datasource.loading,
|
|
@@ -44746,6 +44775,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44746
44775
|
fixed: true,
|
|
44747
44776
|
"max-width": _vm.parentWidth,
|
|
44748
44777
|
closeOnContentClick: false,
|
|
44778
|
+
maxHeight: _vm.instance.menuMaxHeight,
|
|
44749
44779
|
},
|
|
44750
44780
|
"search-input": _vm.instance.search,
|
|
44751
44781
|
"append-icon": _vm.$getIcon(_vm.instance.appendIcon),
|
|
@@ -44925,7 +44955,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44925
44955
|
key: "selection",
|
|
44926
44956
|
fn: function (props) {
|
|
44927
44957
|
return [
|
|
44928
|
-
|
|
44958
|
+
_vm.expandedMode ||
|
|
44959
|
+
!_vm.hasHiddenRows ||
|
|
44960
|
+
props.index <= _vm.lastDisplayedChip
|
|
44929
44961
|
? _c(
|
|
44930
44962
|
"v-chip",
|
|
44931
44963
|
{
|
|
@@ -44949,7 +44981,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
44949
44981
|
)
|
|
44950
44982
|
: _vm._e(),
|
|
44951
44983
|
_vm._v(" "),
|
|
44952
|
-
_vm.
|
|
44984
|
+
!_vm.expandedMode &&
|
|
44985
|
+
_vm.hasHiddenRows &&
|
|
44986
|
+
props.index === _vm.lastDisplayedChip + 1
|
|
44953
44987
|
? _c("span", { staticClass: "more-items grey--text caption" }, [
|
|
44954
44988
|
_vm._v(_vm._s(_vm.moreItemsText)),
|
|
44955
44989
|
])
|
|
@@ -45017,14 +45051,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
45017
45051
|
_c(
|
|
45018
45052
|
"div",
|
|
45019
45053
|
{
|
|
45020
|
-
directives: [
|
|
45021
|
-
{
|
|
45022
|
-
name: "show",
|
|
45023
|
-
rawName: "v-show",
|
|
45024
|
-
value: _vm.instance.showLoadMore(),
|
|
45025
|
-
expression: "instance.showLoadMore()",
|
|
45026
|
-
},
|
|
45027
|
-
],
|
|
45028
45054
|
staticClass: "zd-select-append-item",
|
|
45029
45055
|
on: {
|
|
45030
45056
|
mousedown: function ($event) {
|
|
@@ -45072,7 +45098,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
45072
45098
|
/* style */
|
|
45073
45099
|
const __vue_inject_styles__$k = function (inject) {
|
|
45074
45100
|
if (!inject) return
|
|
45075
|
-
inject("data-v-
|
|
45101
|
+
inject("data-v-9f031bd2_0", { source: ".zd-select-multiple .v-select__slot .v-select__selections {\n flex-wrap: wrap;\n padding-bottom: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n margin-bottom: 0.2rem;\n margin-top: 0.2rem;\n}\n.zd-select-multiple .v-select__slot .v-select__selections input {\n position: relative;\n top: -2px;\n}\n.zd-select-multiple-autocomplete.v-input:not(.v-input--is-focused) > .v-input__control > .v-input__slot > .v-select__slot input {\n padding: 0;\n}\n.zd-select-multiple .v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n padding: 0;\n}\n.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n padding: 0 var(--spacing-1);\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n margin: 0 var(--spacing-1) 0 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n font-size: 14px !important;\n margin-left: var(--spacing-2);\n margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n margin-bottom: 0.2rem;\n margin-top: 0.2rem;\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n opacity: 0.5;\n}", map: undefined, media: undefined });
|
|
45076
45102
|
|
|
45077
45103
|
};
|
|
45078
45104
|
/* scoped */
|
|
@@ -48226,26 +48252,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
48226
48252
|
mounted() {
|
|
48227
48253
|
this.instance.setTree(this.$refs.tree);
|
|
48228
48254
|
this.setAfterTitleMargin();
|
|
48229
|
-
|
|
48230
|
-
}
|
|
48231
|
-
destroy() {
|
|
48232
|
-
document.removeEventListener('click', this.unselect);
|
|
48233
|
-
}
|
|
48234
|
-
unselect(event) {
|
|
48235
|
-
var _a;
|
|
48236
|
-
const tree = (_a = this.$refs.tree) === null || _a === void 0 ? void 0 : _a.$el;
|
|
48237
|
-
if (!tree)
|
|
48238
|
-
return;
|
|
48239
|
-
if (tree.contains(event.target))
|
|
48240
|
-
return;
|
|
48241
|
-
this.instance.selectedNodes.forEach((node) => {
|
|
48242
|
-
if (!node.path)
|
|
48243
|
-
return;
|
|
48244
|
-
const instanceNode = this.instance.getNode(node.path);
|
|
48245
|
-
if (!instanceNode)
|
|
48246
|
-
return;
|
|
48247
|
-
instanceNode.isSelected = false;
|
|
48248
|
-
});
|
|
48255
|
+
this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true });
|
|
48249
48256
|
}
|
|
48250
48257
|
dataChange() {
|
|
48251
48258
|
this.instance.createNodesFromDatasource();
|
|
@@ -48389,12 +48396,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
48389
48396
|
__metadata("design:paramtypes", []),
|
|
48390
48397
|
__metadata("design:returntype", void 0)
|
|
48391
48398
|
], ZdTree.prototype, "dataChange", null);
|
|
48392
|
-
__decorate([
|
|
48393
|
-
vuePropertyDecorator.Watch('instance.nodes', { deep: true }),
|
|
48394
|
-
__metadata("design:type", Function),
|
|
48395
|
-
__metadata("design:paramtypes", []),
|
|
48396
|
-
__metadata("design:returntype", void 0)
|
|
48397
|
-
], ZdTree.prototype, "nodeChange", null);
|
|
48398
48399
|
ZdTree = __decorate([
|
|
48399
48400
|
vuePropertyDecorator.Component({
|
|
48400
48401
|
components: { ZdTreeCheckbox: __vue_component__$4, ZdTreeAfterTitle: __vue_component__$3 },
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/vuetify",
|
|
3
|
-
"version": "1.45.
|
|
3
|
+
"version": "1.45.1",
|
|
4
4
|
"description": "Zeedhi Components based on Vuetify",
|
|
5
5
|
"author": "Zeedhi <zeedhi@teknisa.com>",
|
|
6
6
|
"license": "ISC",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"@types/prismjs": "^1.16.2",
|
|
52
52
|
"@types/sortablejs": "^1.10.6"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "eefaaf360eeaddb8155c6738c9bf08b78886fffc"
|
|
55
55
|
}
|
|
@@ -7,19 +7,23 @@ import ZdSelect from '../zd-select/ZdSelect.vue';
|
|
|
7
7
|
export default class ZdSelectMultiple extends ZdSelect {
|
|
8
8
|
value: [] | string;
|
|
9
9
|
showSelectAll: boolean;
|
|
10
|
+
maxRows: string | number | undefined;
|
|
10
11
|
instance: SelectMultiple;
|
|
11
12
|
instanceType: typeof SelectMultiple;
|
|
12
|
-
|
|
13
|
+
expandedMode: boolean;
|
|
14
|
+
rows: number;
|
|
13
15
|
lastDisplayedChip: number;
|
|
14
16
|
allSelected: boolean;
|
|
17
|
+
hasHiddenRows: boolean;
|
|
15
18
|
private componentRef;
|
|
16
19
|
private element;
|
|
17
20
|
private initialHeight;
|
|
18
21
|
private listener;
|
|
19
|
-
|
|
22
|
+
get maxRowsNumber(): number;
|
|
20
23
|
mounted(): void;
|
|
21
|
-
beforeDestroy(): void;
|
|
22
24
|
onValueChange(): void;
|
|
25
|
+
beforeDestroy(): void;
|
|
26
|
+
initChipConfig(): void;
|
|
23
27
|
private calcDisplay;
|
|
24
28
|
private getLastChipIndex;
|
|
25
29
|
/**
|
|
@@ -45,6 +49,7 @@ export default class ZdSelectMultiple extends ZdSelect {
|
|
|
45
49
|
selectChange(value: any, event: Event): void;
|
|
46
50
|
selectBlur(event: Event): void;
|
|
47
51
|
selectFocus(event?: Event): void;
|
|
52
|
+
refreshDisplay(cb?: Function): void;
|
|
48
53
|
onSelectAll(event: Event): void;
|
|
49
54
|
removeItem(item: IDictionary<any>): void;
|
|
50
55
|
get formattedData(): any;
|
|
@@ -27,8 +27,6 @@ export default class ZdTree extends ZdComponentRender {
|
|
|
27
27
|
selectedNodesTitle: string;
|
|
28
28
|
private beforeNodeState;
|
|
29
29
|
mounted(): void;
|
|
30
|
-
destroy(): void;
|
|
31
|
-
unselect(event: MouseEvent): void;
|
|
32
30
|
dataChange(): void;
|
|
33
31
|
nodeChange(): void;
|
|
34
32
|
onNodeDrop(nodes: any, position: any, event: Event): void;
|