@zeedhi/vuetify 1.109.0 → 1.110.0
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
|
@@ -40712,7 +40712,7 @@ __vue_render__$1t._withStripped = true;
|
|
|
40712
40712
|
/* style */
|
|
40713
40713
|
const __vue_inject_styles__$1t = function (inject) {
|
|
40714
40714
|
if (!inject) return
|
|
40715
|
-
inject("data-v-
|
|
40715
|
+
inject("data-v-36e94397_0", { source: ".zd-checkbox {\n margin: 0;\n padding: 0;\n}\n.zd-checkbox .v-label {\n font-weight: var(--zd-font-body1-weight);\n font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox > .v-input__control > .v-input__slot {\n margin: 0;\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n margin-right: var(--spacing-2);\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n display: none;\n}\n.zd-checkbox.zd-no-label .v-label {\n display: none;\n}\n.zd-checkbox.zd-no-helper > .v-input__control > .v-messages {\n display: none;\n}", map: undefined, media: undefined });
|
|
40716
40716
|
|
|
40717
40717
|
};
|
|
40718
40718
|
/* scoped */
|
|
@@ -40892,7 +40892,7 @@ __vue_render__$1s._withStripped = true;
|
|
|
40892
40892
|
/* style */
|
|
40893
40893
|
const __vue_inject_styles__$1s = function (inject) {
|
|
40894
40894
|
if (!inject) return
|
|
40895
|
-
inject("data-v-
|
|
40895
|
+
inject("data-v-b39ba328_0", { source: ".zd-checkbox-multiple .zd-checkbox-label {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n padding: 0 0 var(--spacing-2);\n align-items: flex-start;\n display: flex;\n}\n.zd-checkbox-multiple .zd-checkbox-horizontal {\n display: inline-grid;\n grid-template-columns: var(--checkbox-horizontal-columns);\n width: 100%;\n}\n.zd-checkbox-multiple .v-label {\n font-weight: var(--zd-font-body1-weight);\n font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox-multiple .v-input--selection-controls {\n padding: 0;\n margin: 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-messages {\n display: none;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot {\n margin: 0 10px 0 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot:hover .v-input--selection-controls__ripple::before {\n display: none;\n}\n.zd-checkbox-multiple.zd-no-label .v-label {\n display: none;\n}\n.zd-checkbox-multiple.zd-no-helper > .v-input__control > .v-messages {\n display: none;\n}", map: undefined, media: undefined });
|
|
40896
40896
|
|
|
40897
40897
|
};
|
|
40898
40898
|
/* scoped */
|
|
@@ -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 */
|
|
@@ -49641,8 +49642,6 @@ let ZdGridEditableCell = class ZdGridEditableCell extends ZdGridCell$1 {
|
|
|
49641
49642
|
this.$emit('enterEdit', event);
|
|
49642
49643
|
}
|
|
49643
49644
|
leaveEdit() {
|
|
49644
|
-
if (!this.editable)
|
|
49645
|
-
return;
|
|
49646
49645
|
this.editing = false;
|
|
49647
49646
|
}
|
|
49648
49647
|
mousedown(event) {
|
|
@@ -52417,6 +52416,17 @@ let ZdSelect = class ZdSelect extends __vue_component__$1m {
|
|
|
52417
52416
|
this.instance.viewCloseMenu = () => {
|
|
52418
52417
|
this.$refs.instance.isMenuActive = false;
|
|
52419
52418
|
};
|
|
52419
|
+
this.createTooltipElement();
|
|
52420
|
+
}
|
|
52421
|
+
/**
|
|
52422
|
+
* Creates a tooltip element to be shown in case of overflow in the selection input
|
|
52423
|
+
*/
|
|
52424
|
+
createTooltipElement() {
|
|
52425
|
+
const rootElement = this.componentRef.$el;
|
|
52426
|
+
const tooltipElement = document.createElement('span');
|
|
52427
|
+
tooltipElement.classList.add('zd-select-tooltip');
|
|
52428
|
+
rootElement.appendChild(tooltipElement);
|
|
52429
|
+
this.tooltipElement = tooltipElement;
|
|
52420
52430
|
}
|
|
52421
52431
|
mouseenter(event) {
|
|
52422
52432
|
this.instance.mouseenter(event, this.$el);
|
|
@@ -52518,7 +52528,7 @@ let ZdSelect = class ZdSelect extends __vue_component__$1m {
|
|
|
52518
52528
|
if (!element)
|
|
52519
52529
|
return;
|
|
52520
52530
|
const overflow = element.clientWidth < element.scrollWidth - 5;
|
|
52521
|
-
const tooltip = this
|
|
52531
|
+
const tooltip = this.tooltipElement;
|
|
52522
52532
|
if (overflow && tooltip) {
|
|
52523
52533
|
tooltip.classList.add('zd-select-tooltip-show');
|
|
52524
52534
|
const value = this.instance.displayValue;
|
|
@@ -52529,7 +52539,7 @@ let ZdSelect = class ZdSelect extends __vue_component__$1m {
|
|
|
52529
52539
|
}
|
|
52530
52540
|
}
|
|
52531
52541
|
removeTooltip() {
|
|
52532
|
-
const tooltip = this
|
|
52542
|
+
const tooltip = this.tooltipElement;
|
|
52533
52543
|
if (tooltip) {
|
|
52534
52544
|
tooltip.classList.remove('zd-select-tooltip-show');
|
|
52535
52545
|
}
|
|
@@ -53112,28 +53122,6 @@ var __vue_render__$K = function () {
|
|
|
53112
53122
|
},
|
|
53113
53123
|
proxy: true,
|
|
53114
53124
|
},
|
|
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
53125
|
],
|
|
53138
53126
|
null,
|
|
53139
53127
|
true
|
|
@@ -53156,7 +53144,7 @@ __vue_render__$K._withStripped = true;
|
|
|
53156
53144
|
/* style */
|
|
53157
53145
|
const __vue_inject_styles__$K = function (inject) {
|
|
53158
53146
|
if (!inject) return
|
|
53159
|
-
inject("data-v-
|
|
53147
|
+
inject("data-v-6c85c7f6_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.zd-select-multiple-container {\n width: calc(100% - 1px);\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
53148
|
|
|
53161
53149
|
};
|
|
53162
53150
|
/* scoped */
|
|
@@ -58685,31 +58673,64 @@ let ZdSelectTreeMultiple = class ZdSelectTreeMultiple extends ZdSelectTree$1 {
|
|
|
58685
58673
|
const input = this.$el.querySelector('input');
|
|
58686
58674
|
input === null || input === void 0 ? void 0 : input.select();
|
|
58687
58675
|
this.instance.changeSelectedNodes(selectedNodes, this.$el);
|
|
58676
|
+
const event = new Event('change');
|
|
58677
|
+
this.instance.change(event, this.$el);
|
|
58688
58678
|
}
|
|
58689
58679
|
onDeselect(node) {
|
|
58690
58680
|
const input = this.$el.querySelector('input');
|
|
58691
58681
|
input === null || input === void 0 ? void 0 : input.select();
|
|
58692
58682
|
this.instance.deselect(node, this.$el);
|
|
58693
58683
|
}
|
|
58684
|
+
getTreeSelectInstance() {
|
|
58685
|
+
return this.$refs.instance;
|
|
58686
|
+
}
|
|
58694
58687
|
get allSelected() {
|
|
58695
|
-
const
|
|
58696
|
-
|
|
58697
|
-
|
|
58698
|
-
|
|
58699
|
-
|
|
58700
|
-
|
|
58701
|
-
|
|
58702
|
-
|
|
58688
|
+
const treeselect = this.getTreeSelectInstance();
|
|
58689
|
+
if (!this.instance.search) {
|
|
58690
|
+
let nodesLength = 0;
|
|
58691
|
+
treeselect.traverseAllNodesByIndex((node) => {
|
|
58692
|
+
if (!this.instance.flat && node.children && node.children.length > 0)
|
|
58693
|
+
return true;
|
|
58694
|
+
nodesLength += 1;
|
|
58695
|
+
return true;
|
|
58696
|
+
});
|
|
58697
|
+
return this.instance.value.length === nodesLength;
|
|
58698
|
+
}
|
|
58699
|
+
// takes the filtered nodes and the selected nodes
|
|
58700
|
+
// then checks if each of the visible nodes are selected
|
|
58701
|
+
const filteredNodes = this.instance.getAllNodes(this.getVisibleNodes()).map((node) => node.id);
|
|
58702
|
+
const selectedNodes = treeselect.selectedNodes.map((node) => node.id);
|
|
58703
|
+
return filteredNodes.length && this.isSubsetOf(filteredNodes, selectedNodes);
|
|
58704
|
+
}
|
|
58705
|
+
/**
|
|
58706
|
+
* Checks if arr1 is a subset of arr2
|
|
58707
|
+
*/
|
|
58708
|
+
isSubsetOf(arr1, arr2) {
|
|
58709
|
+
return arr1.every((value) => arr2.includes(value));
|
|
58703
58710
|
}
|
|
58704
58711
|
selectAllClick() {
|
|
58705
58712
|
const event = new Event('click');
|
|
58706
|
-
this.
|
|
58713
|
+
const filteredNodes = this.getVisibleNodes();
|
|
58714
|
+
this.instance.onSelectAll(!this.allSelected, event, this.$el, filteredNodes);
|
|
58715
|
+
}
|
|
58716
|
+
/**
|
|
58717
|
+
* Retrieves the currently visible nodes in the tree
|
|
58718
|
+
*/
|
|
58719
|
+
getVisibleNodes() {
|
|
58720
|
+
const treeselect = this.getTreeSelectInstance();
|
|
58721
|
+
const filteredNodes = treeselect.forest.normalizedOptions.filter((node) => !treeselect.localSearch.active || treeselect.shouldOptionBeIncludedInSearchResult(node));
|
|
58722
|
+
return filteredNodes;
|
|
58707
58723
|
}
|
|
58708
58724
|
getMoreChipText(count) {
|
|
58709
58725
|
const keyToTranslate = 'MORE_ITEM';
|
|
58710
58726
|
const translatedText = I18n.translate(keyToTranslate, { count });
|
|
58711
58727
|
return translatedText;
|
|
58712
58728
|
}
|
|
58729
|
+
blur(event) {
|
|
58730
|
+
this.focused = false;
|
|
58731
|
+
this.instance.validate();
|
|
58732
|
+
this.instance.blur(event, this.$el);
|
|
58733
|
+
}
|
|
58713
58734
|
};
|
|
58714
58735
|
__decorate([
|
|
58715
58736
|
Prop({ type: [Boolean, String], default: false }),
|
|
@@ -58727,6 +58748,10 @@ __decorate([
|
|
|
58727
58748
|
Prop({ type: [Boolean, String], default: false }),
|
|
58728
58749
|
__metadata("design:type", Object)
|
|
58729
58750
|
], ZdSelectTreeMultiple.prototype, "showSelectAll", void 0);
|
|
58751
|
+
__decorate([
|
|
58752
|
+
Prop({ type: [String, Array], default: undefined }),
|
|
58753
|
+
__metadata("design:type", Array)
|
|
58754
|
+
], ZdSelectTreeMultiple.prototype, "value", void 0);
|
|
58730
58755
|
ZdSelectTreeMultiple = __decorate([
|
|
58731
58756
|
Component$1
|
|
58732
58757
|
], ZdSelectTreeMultiple);
|
package/dist/zd-vuetify.umd.js
CHANGED
|
@@ -40711,7 +40711,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
40711
40711
|
/* style */
|
|
40712
40712
|
const __vue_inject_styles__$1t = function (inject) {
|
|
40713
40713
|
if (!inject) return
|
|
40714
|
-
inject("data-v-
|
|
40714
|
+
inject("data-v-36e94397_0", { source: ".zd-checkbox {\n margin: 0;\n padding: 0;\n}\n.zd-checkbox .v-label {\n font-weight: var(--zd-font-body1-weight);\n font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox > .v-input__control > .v-input__slot {\n margin: 0;\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n margin-right: var(--spacing-2);\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n display: none;\n}\n.zd-checkbox.zd-no-label .v-label {\n display: none;\n}\n.zd-checkbox.zd-no-helper > .v-input__control > .v-messages {\n display: none;\n}", map: undefined, media: undefined });
|
|
40715
40715
|
|
|
40716
40716
|
};
|
|
40717
40717
|
/* scoped */
|
|
@@ -40891,7 +40891,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
40891
40891
|
/* style */
|
|
40892
40892
|
const __vue_inject_styles__$1s = function (inject) {
|
|
40893
40893
|
if (!inject) return
|
|
40894
|
-
inject("data-v-
|
|
40894
|
+
inject("data-v-b39ba328_0", { source: ".zd-checkbox-multiple .zd-checkbox-label {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n padding: 0 0 var(--spacing-2);\n align-items: flex-start;\n display: flex;\n}\n.zd-checkbox-multiple .zd-checkbox-horizontal {\n display: inline-grid;\n grid-template-columns: var(--checkbox-horizontal-columns);\n width: 100%;\n}\n.zd-checkbox-multiple .v-label {\n font-weight: var(--zd-font-body1-weight);\n font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox-multiple .v-input--selection-controls {\n padding: 0;\n margin: 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-messages {\n display: none;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot {\n margin: 0 10px 0 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot:hover .v-input--selection-controls__ripple::before {\n display: none;\n}\n.zd-checkbox-multiple.zd-no-label .v-label {\n display: none;\n}\n.zd-checkbox-multiple.zd-no-helper > .v-input__control > .v-messages {\n display: none;\n}", map: undefined, media: undefined });
|
|
40895
40895
|
|
|
40896
40896
|
};
|
|
40897
40897
|
/* scoped */
|
|
@@ -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 */
|
|
@@ -49640,8 +49641,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
49640
49641
|
this.$emit('enterEdit', event);
|
|
49641
49642
|
}
|
|
49642
49643
|
leaveEdit() {
|
|
49643
|
-
if (!this.editable)
|
|
49644
|
-
return;
|
|
49645
49644
|
this.editing = false;
|
|
49646
49645
|
}
|
|
49647
49646
|
mousedown(event) {
|
|
@@ -52416,6 +52415,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
52416
52415
|
this.instance.viewCloseMenu = () => {
|
|
52417
52416
|
this.$refs.instance.isMenuActive = false;
|
|
52418
52417
|
};
|
|
52418
|
+
this.createTooltipElement();
|
|
52419
|
+
}
|
|
52420
|
+
/**
|
|
52421
|
+
* Creates a tooltip element to be shown in case of overflow in the selection input
|
|
52422
|
+
*/
|
|
52423
|
+
createTooltipElement() {
|
|
52424
|
+
const rootElement = this.componentRef.$el;
|
|
52425
|
+
const tooltipElement = document.createElement('span');
|
|
52426
|
+
tooltipElement.classList.add('zd-select-tooltip');
|
|
52427
|
+
rootElement.appendChild(tooltipElement);
|
|
52428
|
+
this.tooltipElement = tooltipElement;
|
|
52419
52429
|
}
|
|
52420
52430
|
mouseenter(event) {
|
|
52421
52431
|
this.instance.mouseenter(event, this.$el);
|
|
@@ -52517,7 +52527,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
52517
52527
|
if (!element)
|
|
52518
52528
|
return;
|
|
52519
52529
|
const overflow = element.clientWidth < element.scrollWidth - 5;
|
|
52520
|
-
const tooltip = this
|
|
52530
|
+
const tooltip = this.tooltipElement;
|
|
52521
52531
|
if (overflow && tooltip) {
|
|
52522
52532
|
tooltip.classList.add('zd-select-tooltip-show');
|
|
52523
52533
|
const value = this.instance.displayValue;
|
|
@@ -52528,7 +52538,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
52528
52538
|
}
|
|
52529
52539
|
}
|
|
52530
52540
|
removeTooltip() {
|
|
52531
|
-
const tooltip = this
|
|
52541
|
+
const tooltip = this.tooltipElement;
|
|
52532
52542
|
if (tooltip) {
|
|
52533
52543
|
tooltip.classList.remove('zd-select-tooltip-show');
|
|
52534
52544
|
}
|
|
@@ -53111,28 +53121,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
53111
53121
|
},
|
|
53112
53122
|
proxy: true,
|
|
53113
53123
|
},
|
|
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
53124
|
],
|
|
53137
53125
|
null,
|
|
53138
53126
|
true
|
|
@@ -53155,7 +53143,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
53155
53143
|
/* style */
|
|
53156
53144
|
const __vue_inject_styles__$K = function (inject) {
|
|
53157
53145
|
if (!inject) return
|
|
53158
|
-
inject("data-v-
|
|
53146
|
+
inject("data-v-6c85c7f6_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.zd-select-multiple-container {\n width: calc(100% - 1px);\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
53147
|
|
|
53160
53148
|
};
|
|
53161
53149
|
/* scoped */
|
|
@@ -58684,31 +58672,64 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
58684
58672
|
const input = this.$el.querySelector('input');
|
|
58685
58673
|
input === null || input === void 0 ? void 0 : input.select();
|
|
58686
58674
|
this.instance.changeSelectedNodes(selectedNodes, this.$el);
|
|
58675
|
+
const event = new Event('change');
|
|
58676
|
+
this.instance.change(event, this.$el);
|
|
58687
58677
|
}
|
|
58688
58678
|
onDeselect(node) {
|
|
58689
58679
|
const input = this.$el.querySelector('input');
|
|
58690
58680
|
input === null || input === void 0 ? void 0 : input.select();
|
|
58691
58681
|
this.instance.deselect(node, this.$el);
|
|
58692
58682
|
}
|
|
58683
|
+
getTreeSelectInstance() {
|
|
58684
|
+
return this.$refs.instance;
|
|
58685
|
+
}
|
|
58693
58686
|
get allSelected() {
|
|
58694
|
-
const
|
|
58695
|
-
|
|
58696
|
-
|
|
58697
|
-
|
|
58698
|
-
|
|
58699
|
-
|
|
58700
|
-
|
|
58701
|
-
|
|
58687
|
+
const treeselect = this.getTreeSelectInstance();
|
|
58688
|
+
if (!this.instance.search) {
|
|
58689
|
+
let nodesLength = 0;
|
|
58690
|
+
treeselect.traverseAllNodesByIndex((node) => {
|
|
58691
|
+
if (!this.instance.flat && node.children && node.children.length > 0)
|
|
58692
|
+
return true;
|
|
58693
|
+
nodesLength += 1;
|
|
58694
|
+
return true;
|
|
58695
|
+
});
|
|
58696
|
+
return this.instance.value.length === nodesLength;
|
|
58697
|
+
}
|
|
58698
|
+
// takes the filtered nodes and the selected nodes
|
|
58699
|
+
// then checks if each of the visible nodes are selected
|
|
58700
|
+
const filteredNodes = this.instance.getAllNodes(this.getVisibleNodes()).map((node) => node.id);
|
|
58701
|
+
const selectedNodes = treeselect.selectedNodes.map((node) => node.id);
|
|
58702
|
+
return filteredNodes.length && this.isSubsetOf(filteredNodes, selectedNodes);
|
|
58703
|
+
}
|
|
58704
|
+
/**
|
|
58705
|
+
* Checks if arr1 is a subset of arr2
|
|
58706
|
+
*/
|
|
58707
|
+
isSubsetOf(arr1, arr2) {
|
|
58708
|
+
return arr1.every((value) => arr2.includes(value));
|
|
58702
58709
|
}
|
|
58703
58710
|
selectAllClick() {
|
|
58704
58711
|
const event = new Event('click');
|
|
58705
|
-
this.
|
|
58712
|
+
const filteredNodes = this.getVisibleNodes();
|
|
58713
|
+
this.instance.onSelectAll(!this.allSelected, event, this.$el, filteredNodes);
|
|
58714
|
+
}
|
|
58715
|
+
/**
|
|
58716
|
+
* Retrieves the currently visible nodes in the tree
|
|
58717
|
+
*/
|
|
58718
|
+
getVisibleNodes() {
|
|
58719
|
+
const treeselect = this.getTreeSelectInstance();
|
|
58720
|
+
const filteredNodes = treeselect.forest.normalizedOptions.filter((node) => !treeselect.localSearch.active || treeselect.shouldOptionBeIncludedInSearchResult(node));
|
|
58721
|
+
return filteredNodes;
|
|
58706
58722
|
}
|
|
58707
58723
|
getMoreChipText(count) {
|
|
58708
58724
|
const keyToTranslate = 'MORE_ITEM';
|
|
58709
58725
|
const translatedText = core.I18n.translate(keyToTranslate, { count });
|
|
58710
58726
|
return translatedText;
|
|
58711
58727
|
}
|
|
58728
|
+
blur(event) {
|
|
58729
|
+
this.focused = false;
|
|
58730
|
+
this.instance.validate();
|
|
58731
|
+
this.instance.blur(event, this.$el);
|
|
58732
|
+
}
|
|
58712
58733
|
};
|
|
58713
58734
|
__decorate([
|
|
58714
58735
|
vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
|
|
@@ -58726,6 +58747,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
|
|
|
58726
58747
|
vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
|
|
58727
58748
|
__metadata("design:type", Object)
|
|
58728
58749
|
], ZdSelectTreeMultiple.prototype, "showSelectAll", void 0);
|
|
58750
|
+
__decorate([
|
|
58751
|
+
vuePropertyDecorator.Prop({ type: [String, Array], default: undefined }),
|
|
58752
|
+
__metadata("design:type", Array)
|
|
58753
|
+
], ZdSelectTreeMultiple.prototype, "value", void 0);
|
|
58729
58754
|
ZdSelectTreeMultiple = __decorate([
|
|
58730
58755
|
vuePropertyDecorator.Component
|
|
58731
58756
|
], ZdSelectTreeMultiple);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/vuetify",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.110.0",
|
|
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": "8e3b40cddf3f044b5d54dd898ac312e546ff3819"
|
|
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
|
}
|