@zeedhi/vuetify 1.109.0 → 1.109.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
|
@@ -43325,6 +43325,7 @@ var __vue_render__$1i = function () {
|
|
|
43325
43325
|
tag: "span",
|
|
43326
43326
|
cssClass: "zd-display-flex",
|
|
43327
43327
|
grid: _vm.instance.grid,
|
|
43328
|
+
allowDuplicate: _vm.instance.allowDuplicate,
|
|
43328
43329
|
},
|
|
43329
43330
|
},
|
|
43330
43331
|
[
|
|
@@ -43560,7 +43561,7 @@ __vue_render__$1i._withStripped = true;
|
|
|
43560
43561
|
/* style */
|
|
43561
43562
|
const __vue_inject_styles__$1i = function (inject) {
|
|
43562
43563
|
if (!inject) return
|
|
43563
|
-
inject("data-v-
|
|
43564
|
+
inject("data-v-60c4b970_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-helper-values-option {\n cursor: pointer;\n}\n.date-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
|
|
43564
43565
|
|
|
43565
43566
|
};
|
|
43566
43567
|
/* scoped */
|
|
@@ -52417,6 +52418,17 @@ let ZdSelect = class ZdSelect extends __vue_component__$1m {
|
|
|
52417
52418
|
this.instance.viewCloseMenu = () => {
|
|
52418
52419
|
this.$refs.instance.isMenuActive = false;
|
|
52419
52420
|
};
|
|
52421
|
+
this.createTooltipElement();
|
|
52422
|
+
}
|
|
52423
|
+
/**
|
|
52424
|
+
* Creates a tooltip element to be shown in case of overflow in the selection input
|
|
52425
|
+
*/
|
|
52426
|
+
createTooltipElement() {
|
|
52427
|
+
const rootElement = this.componentRef.$el;
|
|
52428
|
+
const tooltipElement = document.createElement('span');
|
|
52429
|
+
tooltipElement.classList.add('zd-select-tooltip');
|
|
52430
|
+
rootElement.appendChild(tooltipElement);
|
|
52431
|
+
this.tooltipElement = tooltipElement;
|
|
52420
52432
|
}
|
|
52421
52433
|
mouseenter(event) {
|
|
52422
52434
|
this.instance.mouseenter(event, this.$el);
|
|
@@ -52518,7 +52530,7 @@ let ZdSelect = class ZdSelect extends __vue_component__$1m {
|
|
|
52518
52530
|
if (!element)
|
|
52519
52531
|
return;
|
|
52520
52532
|
const overflow = element.clientWidth < element.scrollWidth - 5;
|
|
52521
|
-
const tooltip = this
|
|
52533
|
+
const tooltip = this.tooltipElement;
|
|
52522
52534
|
if (overflow && tooltip) {
|
|
52523
52535
|
tooltip.classList.add('zd-select-tooltip-show');
|
|
52524
52536
|
const value = this.instance.displayValue;
|
|
@@ -52529,7 +52541,7 @@ let ZdSelect = class ZdSelect extends __vue_component__$1m {
|
|
|
52529
52541
|
}
|
|
52530
52542
|
}
|
|
52531
52543
|
removeTooltip() {
|
|
52532
|
-
const tooltip = this
|
|
52544
|
+
const tooltip = this.tooltipElement;
|
|
52533
52545
|
if (tooltip) {
|
|
52534
52546
|
tooltip.classList.remove('zd-select-tooltip-show');
|
|
52535
52547
|
}
|
|
@@ -53112,28 +53124,6 @@ var __vue_render__$K = function () {
|
|
|
53112
53124
|
},
|
|
53113
53125
|
proxy: true,
|
|
53114
53126
|
},
|
|
53115
|
-
{
|
|
53116
|
-
key: "label",
|
|
53117
|
-
fn: function () {
|
|
53118
|
-
return [
|
|
53119
|
-
_c("span", [
|
|
53120
|
-
_vm._v(
|
|
53121
|
-
_vm._s(
|
|
53122
|
-
_vm.instance.showLabel
|
|
53123
|
-
? _vm.$t(_vm.instance.label)
|
|
53124
|
-
: undefined
|
|
53125
|
-
)
|
|
53126
|
-
),
|
|
53127
|
-
]),
|
|
53128
|
-
_vm._v(" "),
|
|
53129
|
-
_c("span", {
|
|
53130
|
-
ref: "tooltip",
|
|
53131
|
-
staticClass: "zd-select-tooltip",
|
|
53132
|
-
}),
|
|
53133
|
-
]
|
|
53134
|
-
},
|
|
53135
|
-
proxy: true,
|
|
53136
|
-
},
|
|
53137
53127
|
],
|
|
53138
53128
|
null,
|
|
53139
53129
|
true
|
|
@@ -53156,7 +53146,7 @@ __vue_render__$K._withStripped = true;
|
|
|
53156
53146
|
/* style */
|
|
53157
53147
|
const __vue_inject_styles__$K = function (inject) {
|
|
53158
53148
|
if (!inject) return
|
|
53159
|
-
inject("data-v-
|
|
53149
|
+
inject("data-v-5bf89b41_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 .v-input__control .v-input__slot .v-select__slot input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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}\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 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.theme--light {\n color: var(--zd-font-color);\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.zd-select.zd-select-modal-selection .v-input__append-inner .v-input__icon--append .v-icon {\n background-color: var(--v-primary-base) !important;\n color: white !important;\n border-radius: 3px !important;\n margin-right: 2px !important;\n transform: rotate(0) !important;\n}\n.zd-select-tooltip {\n z-index: 10000;\n position: fixed;\n color: white;\n background-color: var(--v-grey-lighten1);\n border-radius: var(--border);\n padding: var(--spacing-1) var(--spacing-2);\n opacity: 0.9;\n display: none;\n font-size: 14px;\n line-height: 22px;\n text-transform: none;\n width: auto;\n pointer-events: none;\n white-space: pre;\n}\n.zd-select-tooltip.zd-select-tooltip-show {\n display: block;\n white-space: normal;\n}\n.v-menu__content.zd-select-menu {\n box-shadow: var(--shadow-2);\n max-height: 40vh !important;\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}\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}\n.zd-select-overflow {\n overflow: hidden !important;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.zd-select-modal-selection-grid {\n margin-top: 0 !important;\n}", map: undefined, media: undefined });
|
|
53160
53150
|
|
|
53161
53151
|
};
|
|
53162
53152
|
/* scoped */
|
|
@@ -58685,31 +58675,64 @@ let ZdSelectTreeMultiple = class ZdSelectTreeMultiple extends ZdSelectTree$1 {
|
|
|
58685
58675
|
const input = this.$el.querySelector('input');
|
|
58686
58676
|
input === null || input === void 0 ? void 0 : input.select();
|
|
58687
58677
|
this.instance.changeSelectedNodes(selectedNodes, this.$el);
|
|
58678
|
+
const event = new Event('change');
|
|
58679
|
+
this.instance.change(event, this.$el);
|
|
58688
58680
|
}
|
|
58689
58681
|
onDeselect(node) {
|
|
58690
58682
|
const input = this.$el.querySelector('input');
|
|
58691
58683
|
input === null || input === void 0 ? void 0 : input.select();
|
|
58692
58684
|
this.instance.deselect(node, this.$el);
|
|
58693
58685
|
}
|
|
58686
|
+
getTreeSelectInstance() {
|
|
58687
|
+
return this.$refs.instance;
|
|
58688
|
+
}
|
|
58694
58689
|
get allSelected() {
|
|
58695
|
-
const
|
|
58696
|
-
|
|
58697
|
-
|
|
58698
|
-
|
|
58699
|
-
|
|
58700
|
-
|
|
58701
|
-
|
|
58702
|
-
|
|
58690
|
+
const treeselect = this.getTreeSelectInstance();
|
|
58691
|
+
if (!this.instance.search) {
|
|
58692
|
+
let nodesLength = 0;
|
|
58693
|
+
treeselect.traverseAllNodesByIndex((node) => {
|
|
58694
|
+
if (!this.instance.flat && node.children && node.children.length > 0)
|
|
58695
|
+
return true;
|
|
58696
|
+
nodesLength += 1;
|
|
58697
|
+
return true;
|
|
58698
|
+
});
|
|
58699
|
+
return this.instance.value.length === nodesLength;
|
|
58700
|
+
}
|
|
58701
|
+
// takes the filtered nodes and the selected nodes
|
|
58702
|
+
// then checks if each of the visible nodes are selected
|
|
58703
|
+
const filteredNodes = this.instance.getAllNodes(this.getVisibleNodes()).map((node) => node.id);
|
|
58704
|
+
const selectedNodes = treeselect.selectedNodes.map((node) => node.id);
|
|
58705
|
+
return filteredNodes.length && this.isSubsetOf(filteredNodes, selectedNodes);
|
|
58706
|
+
}
|
|
58707
|
+
/**
|
|
58708
|
+
* Checks if arr1 is a subset of arr2
|
|
58709
|
+
*/
|
|
58710
|
+
isSubsetOf(arr1, arr2) {
|
|
58711
|
+
return arr1.every((value) => arr2.includes(value));
|
|
58703
58712
|
}
|
|
58704
58713
|
selectAllClick() {
|
|
58705
58714
|
const event = new Event('click');
|
|
58706
|
-
this.
|
|
58715
|
+
const filteredNodes = this.getVisibleNodes();
|
|
58716
|
+
this.instance.onSelectAll(!this.allSelected, event, this.$el, filteredNodes);
|
|
58717
|
+
}
|
|
58718
|
+
/**
|
|
58719
|
+
* Retrieves the currently visible nodes in the tree
|
|
58720
|
+
*/
|
|
58721
|
+
getVisibleNodes() {
|
|
58722
|
+
const treeselect = this.getTreeSelectInstance();
|
|
58723
|
+
const filteredNodes = treeselect.forest.normalizedOptions.filter((node) => !treeselect.localSearch.active || treeselect.shouldOptionBeIncludedInSearchResult(node));
|
|
58724
|
+
return filteredNodes;
|
|
58707
58725
|
}
|
|
58708
58726
|
getMoreChipText(count) {
|
|
58709
58727
|
const keyToTranslate = 'MORE_ITEM';
|
|
58710
58728
|
const translatedText = I18n.translate(keyToTranslate, { count });
|
|
58711
58729
|
return translatedText;
|
|
58712
58730
|
}
|
|
58731
|
+
blur(event) {
|
|
58732
|
+
this.focused = false;
|
|
58733
|
+
this.instance.validate();
|
|
58734
|
+
this.instance.blur(event, this.$el);
|
|
58735
|
+
}
|
|
58713
58736
|
};
|
|
58714
58737
|
__decorate([
|
|
58715
58738
|
Prop({ type: [Boolean, String], default: false }),
|
|
@@ -58727,6 +58750,10 @@ __decorate([
|
|
|
58727
58750
|
Prop({ type: [Boolean, String], default: false }),
|
|
58728
58751
|
__metadata("design:type", Object)
|
|
58729
58752
|
], ZdSelectTreeMultiple.prototype, "showSelectAll", void 0);
|
|
58753
|
+
__decorate([
|
|
58754
|
+
Prop({ type: [String, Array], default: undefined }),
|
|
58755
|
+
__metadata("design:type", Array)
|
|
58756
|
+
], ZdSelectTreeMultiple.prototype, "value", void 0);
|
|
58730
58757
|
ZdSelectTreeMultiple = __decorate([
|
|
58731
58758
|
Component$1
|
|
58732
58759
|
], ZdSelectTreeMultiple);
|
package/dist/zd-vuetify.umd.js
CHANGED
|
@@ -43324,6 +43324,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
43324
43324
|
tag: "span",
|
|
43325
43325
|
cssClass: "zd-display-flex",
|
|
43326
43326
|
grid: _vm.instance.grid,
|
|
43327
|
+
allowDuplicate: _vm.instance.allowDuplicate,
|
|
43327
43328
|
},
|
|
43328
43329
|
},
|
|
43329
43330
|
[
|
|
@@ -43559,7 +43560,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
43559
43560
|
/* style */
|
|
43560
43561
|
const __vue_inject_styles__$1i = function (inject) {
|
|
43561
43562
|
if (!inject) return
|
|
43562
|
-
inject("data-v-
|
|
43563
|
+
inject("data-v-60c4b970_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-helper-values-option {\n cursor: pointer;\n}\n.date-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
|
|
43563
43564
|
|
|
43564
43565
|
};
|
|
43565
43566
|
/* scoped */
|
|
@@ -52416,6 +52417,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
52416
52417
|
this.instance.viewCloseMenu = () => {
|
|
52417
52418
|
this.$refs.instance.isMenuActive = false;
|
|
52418
52419
|
};
|
|
52420
|
+
this.createTooltipElement();
|
|
52421
|
+
}
|
|
52422
|
+
/**
|
|
52423
|
+
* Creates a tooltip element to be shown in case of overflow in the selection input
|
|
52424
|
+
*/
|
|
52425
|
+
createTooltipElement() {
|
|
52426
|
+
const rootElement = this.componentRef.$el;
|
|
52427
|
+
const tooltipElement = document.createElement('span');
|
|
52428
|
+
tooltipElement.classList.add('zd-select-tooltip');
|
|
52429
|
+
rootElement.appendChild(tooltipElement);
|
|
52430
|
+
this.tooltipElement = tooltipElement;
|
|
52419
52431
|
}
|
|
52420
52432
|
mouseenter(event) {
|
|
52421
52433
|
this.instance.mouseenter(event, this.$el);
|
|
@@ -52517,7 +52529,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
52517
52529
|
if (!element)
|
|
52518
52530
|
return;
|
|
52519
52531
|
const overflow = element.clientWidth < element.scrollWidth - 5;
|
|
52520
|
-
const tooltip = this
|
|
52532
|
+
const tooltip = this.tooltipElement;
|
|
52521
52533
|
if (overflow && tooltip) {
|
|
52522
52534
|
tooltip.classList.add('zd-select-tooltip-show');
|
|
52523
52535
|
const value = this.instance.displayValue;
|
|
@@ -52528,7 +52540,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
52528
52540
|
}
|
|
52529
52541
|
}
|
|
52530
52542
|
removeTooltip() {
|
|
52531
|
-
const tooltip = this
|
|
52543
|
+
const tooltip = this.tooltipElement;
|
|
52532
52544
|
if (tooltip) {
|
|
52533
52545
|
tooltip.classList.remove('zd-select-tooltip-show');
|
|
52534
52546
|
}
|
|
@@ -53111,28 +53123,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
53111
53123
|
},
|
|
53112
53124
|
proxy: true,
|
|
53113
53125
|
},
|
|
53114
|
-
{
|
|
53115
|
-
key: "label",
|
|
53116
|
-
fn: function () {
|
|
53117
|
-
return [
|
|
53118
|
-
_c("span", [
|
|
53119
|
-
_vm._v(
|
|
53120
|
-
_vm._s(
|
|
53121
|
-
_vm.instance.showLabel
|
|
53122
|
-
? _vm.$t(_vm.instance.label)
|
|
53123
|
-
: undefined
|
|
53124
|
-
)
|
|
53125
|
-
),
|
|
53126
|
-
]),
|
|
53127
|
-
_vm._v(" "),
|
|
53128
|
-
_c("span", {
|
|
53129
|
-
ref: "tooltip",
|
|
53130
|
-
staticClass: "zd-select-tooltip",
|
|
53131
|
-
}),
|
|
53132
|
-
]
|
|
53133
|
-
},
|
|
53134
|
-
proxy: true,
|
|
53135
|
-
},
|
|
53136
53126
|
],
|
|
53137
53127
|
null,
|
|
53138
53128
|
true
|
|
@@ -53155,7 +53145,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
53155
53145
|
/* style */
|
|
53156
53146
|
const __vue_inject_styles__$K = function (inject) {
|
|
53157
53147
|
if (!inject) return
|
|
53158
|
-
inject("data-v-
|
|
53148
|
+
inject("data-v-5bf89b41_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 .v-input__control .v-input__slot .v-select__slot input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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}\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 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.theme--light {\n color: var(--zd-font-color);\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.zd-select.zd-select-modal-selection .v-input__append-inner .v-input__icon--append .v-icon {\n background-color: var(--v-primary-base) !important;\n color: white !important;\n border-radius: 3px !important;\n margin-right: 2px !important;\n transform: rotate(0) !important;\n}\n.zd-select-tooltip {\n z-index: 10000;\n position: fixed;\n color: white;\n background-color: var(--v-grey-lighten1);\n border-radius: var(--border);\n padding: var(--spacing-1) var(--spacing-2);\n opacity: 0.9;\n display: none;\n font-size: 14px;\n line-height: 22px;\n text-transform: none;\n width: auto;\n pointer-events: none;\n white-space: pre;\n}\n.zd-select-tooltip.zd-select-tooltip-show {\n display: block;\n white-space: normal;\n}\n.v-menu__content.zd-select-menu {\n box-shadow: var(--shadow-2);\n max-height: 40vh !important;\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}\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}\n.zd-select-overflow {\n overflow: hidden !important;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.zd-select-modal-selection-grid {\n margin-top: 0 !important;\n}", map: undefined, media: undefined });
|
|
53159
53149
|
|
|
53160
53150
|
};
|
|
53161
53151
|
/* scoped */
|
|
@@ -58684,31 +58674,64 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
58684
58674
|
const input = this.$el.querySelector('input');
|
|
58685
58675
|
input === null || input === void 0 ? void 0 : input.select();
|
|
58686
58676
|
this.instance.changeSelectedNodes(selectedNodes, this.$el);
|
|
58677
|
+
const event = new Event('change');
|
|
58678
|
+
this.instance.change(event, this.$el);
|
|
58687
58679
|
}
|
|
58688
58680
|
onDeselect(node) {
|
|
58689
58681
|
const input = this.$el.querySelector('input');
|
|
58690
58682
|
input === null || input === void 0 ? void 0 : input.select();
|
|
58691
58683
|
this.instance.deselect(node, this.$el);
|
|
58692
58684
|
}
|
|
58685
|
+
getTreeSelectInstance() {
|
|
58686
|
+
return this.$refs.instance;
|
|
58687
|
+
}
|
|
58693
58688
|
get allSelected() {
|
|
58694
|
-
const
|
|
58695
|
-
|
|
58696
|
-
|
|
58697
|
-
|
|
58698
|
-
|
|
58699
|
-
|
|
58700
|
-
|
|
58701
|
-
|
|
58689
|
+
const treeselect = this.getTreeSelectInstance();
|
|
58690
|
+
if (!this.instance.search) {
|
|
58691
|
+
let nodesLength = 0;
|
|
58692
|
+
treeselect.traverseAllNodesByIndex((node) => {
|
|
58693
|
+
if (!this.instance.flat && node.children && node.children.length > 0)
|
|
58694
|
+
return true;
|
|
58695
|
+
nodesLength += 1;
|
|
58696
|
+
return true;
|
|
58697
|
+
});
|
|
58698
|
+
return this.instance.value.length === nodesLength;
|
|
58699
|
+
}
|
|
58700
|
+
// takes the filtered nodes and the selected nodes
|
|
58701
|
+
// then checks if each of the visible nodes are selected
|
|
58702
|
+
const filteredNodes = this.instance.getAllNodes(this.getVisibleNodes()).map((node) => node.id);
|
|
58703
|
+
const selectedNodes = treeselect.selectedNodes.map((node) => node.id);
|
|
58704
|
+
return filteredNodes.length && this.isSubsetOf(filteredNodes, selectedNodes);
|
|
58705
|
+
}
|
|
58706
|
+
/**
|
|
58707
|
+
* Checks if arr1 is a subset of arr2
|
|
58708
|
+
*/
|
|
58709
|
+
isSubsetOf(arr1, arr2) {
|
|
58710
|
+
return arr1.every((value) => arr2.includes(value));
|
|
58702
58711
|
}
|
|
58703
58712
|
selectAllClick() {
|
|
58704
58713
|
const event = new Event('click');
|
|
58705
|
-
this.
|
|
58714
|
+
const filteredNodes = this.getVisibleNodes();
|
|
58715
|
+
this.instance.onSelectAll(!this.allSelected, event, this.$el, filteredNodes);
|
|
58716
|
+
}
|
|
58717
|
+
/**
|
|
58718
|
+
* Retrieves the currently visible nodes in the tree
|
|
58719
|
+
*/
|
|
58720
|
+
getVisibleNodes() {
|
|
58721
|
+
const treeselect = this.getTreeSelectInstance();
|
|
58722
|
+
const filteredNodes = treeselect.forest.normalizedOptions.filter((node) => !treeselect.localSearch.active || treeselect.shouldOptionBeIncludedInSearchResult(node));
|
|
58723
|
+
return filteredNodes;
|
|
58706
58724
|
}
|
|
58707
58725
|
getMoreChipText(count) {
|
|
58708
58726
|
const keyToTranslate = 'MORE_ITEM';
|
|
58709
58727
|
const translatedText = core.I18n.translate(keyToTranslate, { count });
|
|
58710
58728
|
return translatedText;
|
|
58711
58729
|
}
|
|
58730
|
+
blur(event) {
|
|
58731
|
+
this.focused = false;
|
|
58732
|
+
this.instance.validate();
|
|
58733
|
+
this.instance.blur(event, this.$el);
|
|
58734
|
+
}
|
|
58712
58735
|
};
|
|
58713
58736
|
__decorate([
|
|
58714
58737
|
vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
|
|
@@ -58726,6 +58749,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
58726
58749
|
vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
|
|
58727
58750
|
__metadata("design:type", Object)
|
|
58728
58751
|
], ZdSelectTreeMultiple.prototype, "showSelectAll", void 0);
|
|
58752
|
+
__decorate([
|
|
58753
|
+
vuePropertyDecorator.Prop({ type: [String, Array], default: undefined }),
|
|
58754
|
+
__metadata("design:type", Array)
|
|
58755
|
+
], ZdSelectTreeMultiple.prototype, "value", void 0);
|
|
58729
58756
|
ZdSelectTreeMultiple = __decorate([
|
|
58730
58757
|
vuePropertyDecorator.Component
|
|
58731
58758
|
], ZdSelectTreeMultiple);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/vuetify",
|
|
3
|
-
"version": "1.109.
|
|
3
|
+
"version": "1.109.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.26.*",
|
|
52
52
|
"@types/sortablejs": "1.15.*"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "990a82d89ad8fa3d04aa558e717b7e9199418fee"
|
|
55
55
|
}
|
|
@@ -38,7 +38,12 @@ export default class ZdSelect extends ZdTextInput {
|
|
|
38
38
|
*/
|
|
39
39
|
protected componentRef: any;
|
|
40
40
|
private originalOnScroll;
|
|
41
|
+
tooltipElement: HTMLElement;
|
|
41
42
|
mounted(): void;
|
|
43
|
+
/**
|
|
44
|
+
* Creates a tooltip element to be shown in case of overflow in the selection input
|
|
45
|
+
*/
|
|
46
|
+
createTooltipElement(): void;
|
|
42
47
|
mouseenter(event: Event): void;
|
|
43
48
|
mouseleave(event: Event): void;
|
|
44
49
|
isOverflowing: IDictionary<boolean>;
|
|
@@ -1,16 +1,39 @@
|
|
|
1
1
|
import { SelectTreeMultiple, ISelectTreeMultipleNode } from '@zeedhi/common';
|
|
2
2
|
import { IDictionary } from '@zeedhi/core';
|
|
3
3
|
import ZdSelectTree from '../zd-select-tree/ZdSelectTree';
|
|
4
|
+
export declare type VueSelectTree = {
|
|
5
|
+
localSearch: {
|
|
6
|
+
active: boolean;
|
|
7
|
+
};
|
|
8
|
+
forest: {
|
|
9
|
+
normalizedOptions: any[];
|
|
10
|
+
selectedNodeIds: (string | number)[];
|
|
11
|
+
};
|
|
12
|
+
shouldOptionBeIncludedInSearchResult: (node: any) => boolean;
|
|
13
|
+
traverseAllNodesByIndex: (callback: (node: any) => boolean) => void;
|
|
14
|
+
selectedNodes: any[];
|
|
15
|
+
};
|
|
4
16
|
export default class ZdSelectTreeMultiple extends ZdSelectTree {
|
|
5
17
|
flat: boolean | string;
|
|
6
18
|
limit: number | string;
|
|
7
19
|
valueConsistsOf: string;
|
|
8
20
|
showSelectAll: boolean | string;
|
|
21
|
+
value: any[];
|
|
9
22
|
instance: SelectTreeMultiple;
|
|
10
23
|
instanceType: typeof SelectTreeMultiple;
|
|
11
24
|
onChangeSelectedNodes(selectedNodes: ISelectTreeMultipleNode<IDictionary>[]): void;
|
|
12
25
|
onDeselect(node: ISelectTreeMultipleNode<IDictionary>): void;
|
|
13
|
-
|
|
26
|
+
getTreeSelectInstance(): VueSelectTree;
|
|
27
|
+
get allSelected(): boolean | 0;
|
|
28
|
+
/**
|
|
29
|
+
* Checks if arr1 is a subset of arr2
|
|
30
|
+
*/
|
|
31
|
+
isSubsetOf(arr1: (number | string)[], arr2: (number | string)[]): boolean;
|
|
14
32
|
selectAllClick(): void;
|
|
33
|
+
/**
|
|
34
|
+
* Retrieves the currently visible nodes in the tree
|
|
35
|
+
*/
|
|
36
|
+
getVisibleNodes(): any[];
|
|
15
37
|
getMoreChipText(count: number): string;
|
|
38
|
+
blur(event: Event): void;
|
|
16
39
|
}
|