@dolusoft/vue3-datatable 1.8.38 → 1.8.42
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/vue3-datatable.cjs +94 -34
- package/dist/vue3-datatable.css +9 -9
- package/dist/vue3-datatable.js +94 -34
- package/package.json +1 -1
package/dist/vue3-datatable.cjs
CHANGED
|
@@ -2469,7 +2469,7 @@ const _export_sfc = (sfc, props) => {
|
|
|
2469
2469
|
}
|
|
2470
2470
|
return target;
|
|
2471
2471
|
};
|
|
2472
|
-
const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-
|
|
2472
|
+
const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-4d01a2fa"]]);
|
|
2473
2473
|
const __default__$4 = {
|
|
2474
2474
|
name: "ButtonRightPanel"
|
|
2475
2475
|
};
|
|
@@ -2495,7 +2495,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
|
|
|
2495
2495
|
};
|
|
2496
2496
|
}
|
|
2497
2497
|
});
|
|
2498
|
-
const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-
|
|
2498
|
+
const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d739c6bf"]]);
|
|
2499
2499
|
const sides = ["top", "right", "bottom", "left"];
|
|
2500
2500
|
const alignments = ["start", "end"];
|
|
2501
2501
|
const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
|
|
@@ -5365,10 +5365,10 @@ const _hoisted_17$1 = {
|
|
|
5365
5365
|
key: 0,
|
|
5366
5366
|
class: "bh-filter bh-relative"
|
|
5367
5367
|
};
|
|
5368
|
-
const _hoisted_18$1 = ["onUpdate:modelValue"];
|
|
5369
|
-
const _hoisted_19$1 = ["onUpdate:modelValue"];
|
|
5370
|
-
const _hoisted_20$1 = ["onUpdate:modelValue"];
|
|
5371
|
-
const _hoisted_21$1 = ["onUpdate:modelValue"];
|
|
5368
|
+
const _hoisted_18$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5369
|
+
const _hoisted_19$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5370
|
+
const _hoisted_20$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5371
|
+
const _hoisted_21$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5372
5372
|
const _hoisted_22$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: void 0 }, "All", -1);
|
|
5373
5373
|
const _hoisted_23$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: true }, "True", -1);
|
|
5374
5374
|
const _hoisted_24$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: false }, "False", -1);
|
|
@@ -5381,10 +5381,10 @@ const _hoisted_26$1 = {
|
|
|
5381
5381
|
key: 1,
|
|
5382
5382
|
class: "bh-filter-input-wrapper"
|
|
5383
5383
|
};
|
|
5384
|
-
const _hoisted_27$1 = ["onUpdate:modelValue"];
|
|
5385
|
-
const _hoisted_28$1 = ["onUpdate:modelValue"];
|
|
5386
|
-
const _hoisted_29$1 = ["onUpdate:modelValue"];
|
|
5387
|
-
const _hoisted_30$1 = ["onUpdate:modelValue"];
|
|
5384
|
+
const _hoisted_27$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5385
|
+
const _hoisted_28$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5386
|
+
const _hoisted_29$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5387
|
+
const _hoisted_30$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5388
5388
|
const _hoisted_31$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: void 0 }, "All", -1);
|
|
5389
5389
|
const _hoisted_32$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: true }, "True", -1);
|
|
5390
5390
|
const _hoisted_33$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: false }, "False", -1);
|
|
@@ -5423,7 +5423,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5423
5423
|
"filterDatetimeUpdate",
|
|
5424
5424
|
"clearAllFilters"
|
|
5425
5425
|
],
|
|
5426
|
-
setup(__props, { emit: __emit }) {
|
|
5426
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
5427
5427
|
const selectedAll = vue.ref(null);
|
|
5428
5428
|
const props = __props;
|
|
5429
5429
|
const emit = __emit;
|
|
@@ -5436,6 +5436,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5436
5436
|
const filterInputs = vue.ref({});
|
|
5437
5437
|
const columnConditions = vue.ref({});
|
|
5438
5438
|
const watchedFields = vue.ref(/* @__PURE__ */ new Set());
|
|
5439
|
+
const debounceTimers = /* @__PURE__ */ new Map();
|
|
5440
|
+
const processChangeFunctions = /* @__PURE__ */ new Map();
|
|
5439
5441
|
const columnsMap = vue.computed(() => {
|
|
5440
5442
|
var _a;
|
|
5441
5443
|
const map = /* @__PURE__ */ new Map();
|
|
@@ -5457,18 +5459,21 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5457
5459
|
filterInputs.value[col.field] = col.value || "";
|
|
5458
5460
|
}
|
|
5459
5461
|
watchedFields.value.add(col.field);
|
|
5460
|
-
|
|
5462
|
+
debounceTimers.set(col.field, null);
|
|
5461
5463
|
vue.watch(
|
|
5462
5464
|
() => filterInputs.value[col.field],
|
|
5463
5465
|
(newValue) => {
|
|
5466
|
+
var _a2;
|
|
5464
5467
|
const column = columnsMap.value.get(col.field);
|
|
5465
5468
|
if (!column) return;
|
|
5466
5469
|
const isEmpty = newValue === "" || newValue === null || newValue === void 0;
|
|
5467
|
-
|
|
5468
|
-
|
|
5469
|
-
|
|
5470
|
+
const existingTimer = debounceTimers.get(col.field);
|
|
5471
|
+
if (existingTimer) {
|
|
5472
|
+
clearTimeout(existingTimer);
|
|
5473
|
+
debounceTimers.set(col.field, null);
|
|
5470
5474
|
}
|
|
5471
5475
|
const processChange = () => {
|
|
5476
|
+
debounceTimers.set(col.field, null);
|
|
5472
5477
|
if (column.type === "string" || column.type === "String") {
|
|
5473
5478
|
column.value = isEmpty ? "" : typeof newValue === "string" ? newValue.trim() : newValue;
|
|
5474
5479
|
} else {
|
|
@@ -5485,16 +5490,44 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5485
5490
|
}
|
|
5486
5491
|
emit("filterChange");
|
|
5487
5492
|
};
|
|
5493
|
+
processChangeFunctions.set(col.field, processChange);
|
|
5488
5494
|
if (isEmpty) {
|
|
5489
5495
|
processChange();
|
|
5490
5496
|
} else {
|
|
5491
|
-
|
|
5497
|
+
const debounceTime = ((_a2 = props.all) == null ? void 0 : _a2.filterDebounce) ?? 100;
|
|
5498
|
+
debounceTimers.set(col.field, setTimeout(processChange, debounceTime));
|
|
5492
5499
|
}
|
|
5493
5500
|
}
|
|
5494
5501
|
);
|
|
5495
5502
|
}
|
|
5496
5503
|
});
|
|
5497
5504
|
};
|
|
5505
|
+
const flushFilterDebounce = (field) => {
|
|
5506
|
+
const timer = debounceTimers.get(field);
|
|
5507
|
+
if (timer) {
|
|
5508
|
+
clearTimeout(timer);
|
|
5509
|
+
debounceTimers.set(field, null);
|
|
5510
|
+
const processChange = processChangeFunctions.get(field);
|
|
5511
|
+
if (processChange) {
|
|
5512
|
+
processChange();
|
|
5513
|
+
}
|
|
5514
|
+
}
|
|
5515
|
+
};
|
|
5516
|
+
const flushAllFilterDebounces = () => {
|
|
5517
|
+
debounceTimers.forEach((timer, field) => {
|
|
5518
|
+
if (timer) {
|
|
5519
|
+
clearTimeout(timer);
|
|
5520
|
+
debounceTimers.set(field, null);
|
|
5521
|
+
const processChange = processChangeFunctions.get(field);
|
|
5522
|
+
if (processChange) {
|
|
5523
|
+
processChange();
|
|
5524
|
+
}
|
|
5525
|
+
}
|
|
5526
|
+
});
|
|
5527
|
+
};
|
|
5528
|
+
const handleFilterEnter = (field) => {
|
|
5529
|
+
flushFilterDebounce(field);
|
|
5530
|
+
};
|
|
5498
5531
|
const handleClearAllFilters = () => {
|
|
5499
5532
|
var _a;
|
|
5500
5533
|
Object.keys(filterInputs.value).forEach((key) => {
|
|
@@ -5634,6 +5667,10 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5634
5667
|
}
|
|
5635
5668
|
emit("filterChange");
|
|
5636
5669
|
};
|
|
5670
|
+
__expose({
|
|
5671
|
+
flushFilterDebounce,
|
|
5672
|
+
flushAllFilterDebounces
|
|
5673
|
+
});
|
|
5637
5674
|
return (_ctx, _cache) => {
|
|
5638
5675
|
const _component_VDropdown = vue.resolveComponent("VDropdown");
|
|
5639
5676
|
return vue.openBlock(), vue.createElementBlock("tr", _hoisted_1$1, [
|
|
@@ -5806,16 +5843,18 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5806
5843
|
key: 0,
|
|
5807
5844
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5808
5845
|
type: "text",
|
|
5809
|
-
class: "bh-form-control"
|
|
5810
|
-
|
|
5846
|
+
class: "bh-form-control",
|
|
5847
|
+
onKeydown: vue.withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5848
|
+
}, null, 40, _hoisted_18$1)), [
|
|
5811
5849
|
[vue.vModelText, filterInputs.value[col.field]]
|
|
5812
5850
|
]) : vue.createCommentVNode("", true),
|
|
5813
5851
|
col.type === "number" || col.type === "integer" || col.type === "Integer" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
|
|
5814
5852
|
key: 1,
|
|
5815
5853
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5816
5854
|
type: "number",
|
|
5817
|
-
class: "bh-form-control"
|
|
5818
|
-
|
|
5855
|
+
class: "bh-form-control",
|
|
5856
|
+
onKeydown: vue.withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5857
|
+
}, null, 40, _hoisted_19$1)), [
|
|
5819
5858
|
[
|
|
5820
5859
|
vue.vModelText,
|
|
5821
5860
|
filterInputs.value[col.field],
|
|
@@ -5830,13 +5869,15 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5830
5869
|
updateValue: (val) => {
|
|
5831
5870
|
filterInputs.value[col.field] = val;
|
|
5832
5871
|
emit("filterDatetimeUpdate", col.field, val);
|
|
5833
|
-
}
|
|
5872
|
+
},
|
|
5873
|
+
onEnter: () => handleFilterEnter(col.field)
|
|
5834
5874
|
}) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
|
|
5835
5875
|
key: 1,
|
|
5836
5876
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5837
5877
|
type: "date",
|
|
5838
|
-
class: "bh-form-control"
|
|
5839
|
-
|
|
5878
|
+
class: "bh-form-control",
|
|
5879
|
+
onKeydown: vue.withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5880
|
+
}, null, 40, _hoisted_20$1)), [
|
|
5840
5881
|
[vue.vModelText, filterInputs.value[col.field]]
|
|
5841
5882
|
])
|
|
5842
5883
|
], 64)) : col.type === "bool" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
|
|
@@ -5844,8 +5885,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5844
5885
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5845
5886
|
class: "bh-form-control",
|
|
5846
5887
|
onClick: _cache[1] || (_cache[1] = //@ts-ignore
|
|
5847
|
-
(...args) => props.isOpenFilter && props.isOpenFilter(...args))
|
|
5848
|
-
|
|
5888
|
+
(...args) => props.isOpenFilter && props.isOpenFilter(...args)),
|
|
5889
|
+
onKeydown: vue.withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5890
|
+
}, _hoisted_25$1, 40, _hoisted_21$1)), [
|
|
5849
5891
|
[vue.vModelSelect, filterInputs.value[col.field]]
|
|
5850
5892
|
]) : vue.createCommentVNode("", true)
|
|
5851
5893
|
], 64)) : vue.createCommentVNode("", true),
|
|
@@ -5862,8 +5904,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5862
5904
|
type: "text",
|
|
5863
5905
|
class: vue.normalizeClass(["bh-form-control", {
|
|
5864
5906
|
"bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
|
|
5865
|
-
}])
|
|
5866
|
-
|
|
5907
|
+
}]),
|
|
5908
|
+
onKeydown: vue.withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5909
|
+
}, null, 42, _hoisted_27$1)), [
|
|
5867
5910
|
[vue.vModelText, filterInputs.value[col.field]]
|
|
5868
5911
|
]) : vue.createCommentVNode("", true),
|
|
5869
5912
|
col.type === "number" || col.type === "integer" || col.type === "Integer" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
|
|
@@ -5872,8 +5915,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5872
5915
|
type: "number",
|
|
5873
5916
|
class: vue.normalizeClass(["bh-form-control", {
|
|
5874
5917
|
"bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
|
|
5875
|
-
}])
|
|
5876
|
-
|
|
5918
|
+
}]),
|
|
5919
|
+
onKeydown: vue.withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5920
|
+
}, null, 42, _hoisted_28$1)), [
|
|
5877
5921
|
[
|
|
5878
5922
|
vue.vModelText,
|
|
5879
5923
|
filterInputs.value[col.field],
|
|
@@ -5889,15 +5933,17 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5889
5933
|
filterInputs.value[col.field] = val;
|
|
5890
5934
|
emit("filterDatetimeUpdate", col.field, val);
|
|
5891
5935
|
},
|
|
5892
|
-
hasLabel: hasConditionSet(col) && props.all.useNewColumnFilter
|
|
5936
|
+
hasLabel: hasConditionSet(col) && props.all.useNewColumnFilter,
|
|
5937
|
+
onEnter: () => handleFilterEnter(col.field)
|
|
5893
5938
|
}) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
|
|
5894
5939
|
key: 1,
|
|
5895
5940
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5896
5941
|
type: "date",
|
|
5897
5942
|
class: vue.normalizeClass(["bh-form-control", {
|
|
5898
5943
|
"bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
|
|
5899
|
-
}])
|
|
5900
|
-
|
|
5944
|
+
}]),
|
|
5945
|
+
onKeydown: vue.withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5946
|
+
}, null, 42, _hoisted_29$1)), [
|
|
5901
5947
|
[vue.vModelText, filterInputs.value[col.field]]
|
|
5902
5948
|
])
|
|
5903
5949
|
], 64)) : col.type === "bool" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
|
|
@@ -5905,8 +5951,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
5905
5951
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5906
5952
|
class: "bh-form-control",
|
|
5907
5953
|
onClick: _cache[2] || (_cache[2] = //@ts-ignore
|
|
5908
|
-
(...args) => props.isOpenFilter && props.isOpenFilter(...args))
|
|
5909
|
-
|
|
5954
|
+
(...args) => props.isOpenFilter && props.isOpenFilter(...args)),
|
|
5955
|
+
onKeydown: vue.withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5956
|
+
}, _hoisted_34$1, 40, _hoisted_30$1)), [
|
|
5910
5957
|
[vue.vModelSelect, filterInputs.value[col.field]]
|
|
5911
5958
|
]) : vue.createCommentVNode("", true)
|
|
5912
5959
|
])) : vue.createCommentVNode("", true),
|
|
@@ -6149,6 +6196,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
6149
6196
|
sortDirection: { default: "asc" },
|
|
6150
6197
|
columnFilter: { type: Boolean, default: false },
|
|
6151
6198
|
columnFilterLang: { default: null },
|
|
6199
|
+
filterDebounce: { default: 100 },
|
|
6152
6200
|
useNewColumnFilter: { type: Boolean, default: false },
|
|
6153
6201
|
showFloatingFilterLabel: { type: Boolean, default: false },
|
|
6154
6202
|
pagination: { type: Boolean, default: true },
|
|
@@ -6272,6 +6320,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
6272
6320
|
return (col == null ? void 0 : col.field) || null;
|
|
6273
6321
|
});
|
|
6274
6322
|
const hasAnyActiveFilter = vue.ref(false);
|
|
6323
|
+
const columnHeaderRef = vue.ref(null);
|
|
6275
6324
|
const updateHasAnyActiveFilter = () => {
|
|
6276
6325
|
hasAnyActiveFilter.value = props.columns.some((col) => {
|
|
6277
6326
|
return col.value !== void 0 && col.value !== null && col.value !== "";
|
|
@@ -6575,6 +6624,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
6575
6624
|
}
|
|
6576
6625
|
}
|
|
6577
6626
|
return !!column;
|
|
6627
|
+
},
|
|
6628
|
+
/**
|
|
6629
|
+
* Flush all pending filter debounces
|
|
6630
|
+
* Call this before getColumnFilters() when Enter is pressed
|
|
6631
|
+
* to ensure all filter values are immediately processed
|
|
6632
|
+
*/
|
|
6633
|
+
flushAllFilterDebounces() {
|
|
6634
|
+
var _a2, _b2;
|
|
6635
|
+
(_b2 = (_a2 = columnHeaderRef.value) == null ? void 0 : _a2.flushAllFilterDebounces) == null ? void 0 : _b2.call(_a2);
|
|
6578
6636
|
}
|
|
6579
6637
|
});
|
|
6580
6638
|
vue.watch(
|
|
@@ -7068,6 +7126,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
7068
7126
|
})
|
|
7069
7127
|
}, [
|
|
7070
7128
|
vue.createVNode(_sfc_main$1, {
|
|
7129
|
+
ref_key: "columnHeaderRef",
|
|
7130
|
+
ref: columnHeaderRef,
|
|
7071
7131
|
all: props,
|
|
7072
7132
|
expandedrows: expandedrows.value,
|
|
7073
7133
|
currentSortColumn: currentSortColumn.value,
|
package/dist/vue3-datatable.css
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
|
|
2
|
-
.expandbtn[data-v-
|
|
2
|
+
.expandbtn[data-v-4d01a2fa] {
|
|
3
3
|
cursor: pointer;
|
|
4
|
-
}
|
|
4
|
+
}
|
|
5
5
|
|
|
6
|
-
.rightpanelbtn[data-v-
|
|
7
|
-
cursor: pointer;
|
|
8
|
-
display: inline-flex;
|
|
9
|
-
align-items: center;
|
|
10
|
-
justify-content: center;
|
|
11
|
-
width: 24px;
|
|
6
|
+
.rightpanelbtn[data-v-d739c6bf] {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
width: 24px;
|
|
12
12
|
height: 24px;
|
|
13
|
-
}
|
|
13
|
+
}
|
|
14
14
|
.splitpanes{display:flex;width:100%;height:100%}.splitpanes--vertical{flex-direction:row}.splitpanes--horizontal{flex-direction:column}.splitpanes--dragging .splitpanes__pane{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.splitpanes__pane{width:100%;height:100%;overflow:hidden}.splitpanes--vertical .splitpanes__pane{transition:width .2s ease-out}.splitpanes--horizontal .splitpanes__pane{transition:height .2s ease-out}.splitpanes--dragging .splitpanes__pane{transition:none}.splitpanes__splitter{touch-action:none}.splitpanes--vertical>.splitpanes__splitter{min-width:1px;cursor:col-resize}.splitpanes--horizontal>.splitpanes__splitter{min-height:1px;cursor:row-resize}.splitpanes.default-theme .splitpanes__pane{background-color:#f2f2f2}.splitpanes.default-theme .splitpanes__splitter{background-color:#fff;box-sizing:border-box;position:relative;flex-shrink:0}.splitpanes.default-theme .splitpanes__splitter:before,.splitpanes.default-theme .splitpanes__splitter:after{content:"";position:absolute;top:50%;left:50%;background-color:#00000026;transition:background-color .3s}.splitpanes.default-theme .splitpanes__splitter:hover:before,.splitpanes.default-theme .splitpanes__splitter:hover:after{background-color:#00000040}.splitpanes.default-theme .splitpanes__splitter:first-child{cursor:auto}.default-theme.splitpanes .splitpanes .splitpanes__splitter{z-index:1}.default-theme.splitpanes--vertical>.splitpanes__splitter,.default-theme .splitpanes--vertical>.splitpanes__splitter{width:7px;border-left:1px solid #eee;margin-left:-1px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{transform:translateY(-50%);width:1px;height:30px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:before{margin-left:-2px}.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{margin-left:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter,.default-theme .splitpanes--horizontal>.splitpanes__splitter{height:7px;border-top:1px solid #eee;margin-top:-1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{transform:translate(-50%);width:30px;height:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before{margin-top:-2px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{margin-top:1px}
|
|
15
15
|
|
|
16
16
|
.left-menu-container {
|
package/dist/vue3-datatable.js
CHANGED
|
@@ -2468,7 +2468,7 @@ const _export_sfc = (sfc, props) => {
|
|
|
2468
2468
|
}
|
|
2469
2469
|
return target;
|
|
2470
2470
|
};
|
|
2471
|
-
const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-
|
|
2471
|
+
const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-4d01a2fa"]]);
|
|
2472
2472
|
const __default__$4 = {
|
|
2473
2473
|
name: "ButtonRightPanel"
|
|
2474
2474
|
};
|
|
@@ -2494,7 +2494,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
2494
2494
|
};
|
|
2495
2495
|
}
|
|
2496
2496
|
});
|
|
2497
|
-
const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-
|
|
2497
|
+
const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d739c6bf"]]);
|
|
2498
2498
|
const sides = ["top", "right", "bottom", "left"];
|
|
2499
2499
|
const alignments = ["start", "end"];
|
|
2500
2500
|
const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
|
|
@@ -5364,10 +5364,10 @@ const _hoisted_17$1 = {
|
|
|
5364
5364
|
key: 0,
|
|
5365
5365
|
class: "bh-filter bh-relative"
|
|
5366
5366
|
};
|
|
5367
|
-
const _hoisted_18$1 = ["onUpdate:modelValue"];
|
|
5368
|
-
const _hoisted_19$1 = ["onUpdate:modelValue"];
|
|
5369
|
-
const _hoisted_20$1 = ["onUpdate:modelValue"];
|
|
5370
|
-
const _hoisted_21$1 = ["onUpdate:modelValue"];
|
|
5367
|
+
const _hoisted_18$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5368
|
+
const _hoisted_19$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5369
|
+
const _hoisted_20$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5370
|
+
const _hoisted_21$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5371
5371
|
const _hoisted_22$1 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, "All", -1);
|
|
5372
5372
|
const _hoisted_23$1 = /* @__PURE__ */ createElementVNode("option", { value: true }, "True", -1);
|
|
5373
5373
|
const _hoisted_24$1 = /* @__PURE__ */ createElementVNode("option", { value: false }, "False", -1);
|
|
@@ -5380,10 +5380,10 @@ const _hoisted_26$1 = {
|
|
|
5380
5380
|
key: 1,
|
|
5381
5381
|
class: "bh-filter-input-wrapper"
|
|
5382
5382
|
};
|
|
5383
|
-
const _hoisted_27$1 = ["onUpdate:modelValue"];
|
|
5384
|
-
const _hoisted_28$1 = ["onUpdate:modelValue"];
|
|
5385
|
-
const _hoisted_29$1 = ["onUpdate:modelValue"];
|
|
5386
|
-
const _hoisted_30$1 = ["onUpdate:modelValue"];
|
|
5383
|
+
const _hoisted_27$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5384
|
+
const _hoisted_28$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5385
|
+
const _hoisted_29$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5386
|
+
const _hoisted_30$1 = ["onUpdate:modelValue", "onKeydown"];
|
|
5387
5387
|
const _hoisted_31$1 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, "All", -1);
|
|
5388
5388
|
const _hoisted_32$1 = /* @__PURE__ */ createElementVNode("option", { value: true }, "True", -1);
|
|
5389
5389
|
const _hoisted_33$1 = /* @__PURE__ */ createElementVNode("option", { value: false }, "False", -1);
|
|
@@ -5422,7 +5422,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5422
5422
|
"filterDatetimeUpdate",
|
|
5423
5423
|
"clearAllFilters"
|
|
5424
5424
|
],
|
|
5425
|
-
setup(__props, { emit: __emit }) {
|
|
5425
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
5426
5426
|
const selectedAll = ref(null);
|
|
5427
5427
|
const props = __props;
|
|
5428
5428
|
const emit = __emit;
|
|
@@ -5435,6 +5435,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5435
5435
|
const filterInputs = ref({});
|
|
5436
5436
|
const columnConditions = ref({});
|
|
5437
5437
|
const watchedFields = ref(/* @__PURE__ */ new Set());
|
|
5438
|
+
const debounceTimers = /* @__PURE__ */ new Map();
|
|
5439
|
+
const processChangeFunctions = /* @__PURE__ */ new Map();
|
|
5438
5440
|
const columnsMap = computed(() => {
|
|
5439
5441
|
var _a;
|
|
5440
5442
|
const map = /* @__PURE__ */ new Map();
|
|
@@ -5456,18 +5458,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5456
5458
|
filterInputs.value[col.field] = col.value || "";
|
|
5457
5459
|
}
|
|
5458
5460
|
watchedFields.value.add(col.field);
|
|
5459
|
-
|
|
5461
|
+
debounceTimers.set(col.field, null);
|
|
5460
5462
|
watch(
|
|
5461
5463
|
() => filterInputs.value[col.field],
|
|
5462
5464
|
(newValue) => {
|
|
5465
|
+
var _a2;
|
|
5463
5466
|
const column = columnsMap.value.get(col.field);
|
|
5464
5467
|
if (!column) return;
|
|
5465
5468
|
const isEmpty = newValue === "" || newValue === null || newValue === void 0;
|
|
5466
|
-
|
|
5467
|
-
|
|
5468
|
-
|
|
5469
|
+
const existingTimer = debounceTimers.get(col.field);
|
|
5470
|
+
if (existingTimer) {
|
|
5471
|
+
clearTimeout(existingTimer);
|
|
5472
|
+
debounceTimers.set(col.field, null);
|
|
5469
5473
|
}
|
|
5470
5474
|
const processChange = () => {
|
|
5475
|
+
debounceTimers.set(col.field, null);
|
|
5471
5476
|
if (column.type === "string" || column.type === "String") {
|
|
5472
5477
|
column.value = isEmpty ? "" : typeof newValue === "string" ? newValue.trim() : newValue;
|
|
5473
5478
|
} else {
|
|
@@ -5484,16 +5489,44 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5484
5489
|
}
|
|
5485
5490
|
emit("filterChange");
|
|
5486
5491
|
};
|
|
5492
|
+
processChangeFunctions.set(col.field, processChange);
|
|
5487
5493
|
if (isEmpty) {
|
|
5488
5494
|
processChange();
|
|
5489
5495
|
} else {
|
|
5490
|
-
|
|
5496
|
+
const debounceTime = ((_a2 = props.all) == null ? void 0 : _a2.filterDebounce) ?? 100;
|
|
5497
|
+
debounceTimers.set(col.field, setTimeout(processChange, debounceTime));
|
|
5491
5498
|
}
|
|
5492
5499
|
}
|
|
5493
5500
|
);
|
|
5494
5501
|
}
|
|
5495
5502
|
});
|
|
5496
5503
|
};
|
|
5504
|
+
const flushFilterDebounce = (field) => {
|
|
5505
|
+
const timer = debounceTimers.get(field);
|
|
5506
|
+
if (timer) {
|
|
5507
|
+
clearTimeout(timer);
|
|
5508
|
+
debounceTimers.set(field, null);
|
|
5509
|
+
const processChange = processChangeFunctions.get(field);
|
|
5510
|
+
if (processChange) {
|
|
5511
|
+
processChange();
|
|
5512
|
+
}
|
|
5513
|
+
}
|
|
5514
|
+
};
|
|
5515
|
+
const flushAllFilterDebounces = () => {
|
|
5516
|
+
debounceTimers.forEach((timer, field) => {
|
|
5517
|
+
if (timer) {
|
|
5518
|
+
clearTimeout(timer);
|
|
5519
|
+
debounceTimers.set(field, null);
|
|
5520
|
+
const processChange = processChangeFunctions.get(field);
|
|
5521
|
+
if (processChange) {
|
|
5522
|
+
processChange();
|
|
5523
|
+
}
|
|
5524
|
+
}
|
|
5525
|
+
});
|
|
5526
|
+
};
|
|
5527
|
+
const handleFilterEnter = (field) => {
|
|
5528
|
+
flushFilterDebounce(field);
|
|
5529
|
+
};
|
|
5497
5530
|
const handleClearAllFilters = () => {
|
|
5498
5531
|
var _a;
|
|
5499
5532
|
Object.keys(filterInputs.value).forEach((key) => {
|
|
@@ -5633,6 +5666,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5633
5666
|
}
|
|
5634
5667
|
emit("filterChange");
|
|
5635
5668
|
};
|
|
5669
|
+
__expose({
|
|
5670
|
+
flushFilterDebounce,
|
|
5671
|
+
flushAllFilterDebounces
|
|
5672
|
+
});
|
|
5636
5673
|
return (_ctx, _cache) => {
|
|
5637
5674
|
const _component_VDropdown = resolveComponent("VDropdown");
|
|
5638
5675
|
return openBlock(), createElementBlock("tr", _hoisted_1$1, [
|
|
@@ -5805,16 +5842,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5805
5842
|
key: 0,
|
|
5806
5843
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5807
5844
|
type: "text",
|
|
5808
|
-
class: "bh-form-control"
|
|
5809
|
-
|
|
5845
|
+
class: "bh-form-control",
|
|
5846
|
+
onKeydown: withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5847
|
+
}, null, 40, _hoisted_18$1)), [
|
|
5810
5848
|
[vModelText, filterInputs.value[col.field]]
|
|
5811
5849
|
]) : createCommentVNode("", true),
|
|
5812
5850
|
col.type === "number" || col.type === "integer" || col.type === "Integer" ? withDirectives((openBlock(), createElementBlock("input", {
|
|
5813
5851
|
key: 1,
|
|
5814
5852
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5815
5853
|
type: "number",
|
|
5816
|
-
class: "bh-form-control"
|
|
5817
|
-
|
|
5854
|
+
class: "bh-form-control",
|
|
5855
|
+
onKeydown: withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5856
|
+
}, null, 40, _hoisted_19$1)), [
|
|
5818
5857
|
[
|
|
5819
5858
|
vModelText,
|
|
5820
5859
|
filterInputs.value[col.field],
|
|
@@ -5829,13 +5868,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5829
5868
|
updateValue: (val) => {
|
|
5830
5869
|
filterInputs.value[col.field] = val;
|
|
5831
5870
|
emit("filterDatetimeUpdate", col.field, val);
|
|
5832
|
-
}
|
|
5871
|
+
},
|
|
5872
|
+
onEnter: () => handleFilterEnter(col.field)
|
|
5833
5873
|
}) : withDirectives((openBlock(), createElementBlock("input", {
|
|
5834
5874
|
key: 1,
|
|
5835
5875
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5836
5876
|
type: "date",
|
|
5837
|
-
class: "bh-form-control"
|
|
5838
|
-
|
|
5877
|
+
class: "bh-form-control",
|
|
5878
|
+
onKeydown: withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5879
|
+
}, null, 40, _hoisted_20$1)), [
|
|
5839
5880
|
[vModelText, filterInputs.value[col.field]]
|
|
5840
5881
|
])
|
|
5841
5882
|
], 64)) : col.type === "bool" ? withDirectives((openBlock(), createElementBlock("select", {
|
|
@@ -5843,8 +5884,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5843
5884
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5844
5885
|
class: "bh-form-control",
|
|
5845
5886
|
onClick: _cache[1] || (_cache[1] = //@ts-ignore
|
|
5846
|
-
(...args) => props.isOpenFilter && props.isOpenFilter(...args))
|
|
5847
|
-
|
|
5887
|
+
(...args) => props.isOpenFilter && props.isOpenFilter(...args)),
|
|
5888
|
+
onKeydown: withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5889
|
+
}, _hoisted_25$1, 40, _hoisted_21$1)), [
|
|
5848
5890
|
[vModelSelect, filterInputs.value[col.field]]
|
|
5849
5891
|
]) : createCommentVNode("", true)
|
|
5850
5892
|
], 64)) : createCommentVNode("", true),
|
|
@@ -5861,8 +5903,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5861
5903
|
type: "text",
|
|
5862
5904
|
class: normalizeClass(["bh-form-control", {
|
|
5863
5905
|
"bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
|
|
5864
|
-
}])
|
|
5865
|
-
|
|
5906
|
+
}]),
|
|
5907
|
+
onKeydown: withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5908
|
+
}, null, 42, _hoisted_27$1)), [
|
|
5866
5909
|
[vModelText, filterInputs.value[col.field]]
|
|
5867
5910
|
]) : createCommentVNode("", true),
|
|
5868
5911
|
col.type === "number" || col.type === "integer" || col.type === "Integer" ? withDirectives((openBlock(), createElementBlock("input", {
|
|
@@ -5871,8 +5914,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5871
5914
|
type: "number",
|
|
5872
5915
|
class: normalizeClass(["bh-form-control", {
|
|
5873
5916
|
"bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
|
|
5874
|
-
}])
|
|
5875
|
-
|
|
5917
|
+
}]),
|
|
5918
|
+
onKeydown: withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5919
|
+
}, null, 42, _hoisted_28$1)), [
|
|
5876
5920
|
[
|
|
5877
5921
|
vModelText,
|
|
5878
5922
|
filterInputs.value[col.field],
|
|
@@ -5888,15 +5932,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5888
5932
|
filterInputs.value[col.field] = val;
|
|
5889
5933
|
emit("filterDatetimeUpdate", col.field, val);
|
|
5890
5934
|
},
|
|
5891
|
-
hasLabel: hasConditionSet(col) && props.all.useNewColumnFilter
|
|
5935
|
+
hasLabel: hasConditionSet(col) && props.all.useNewColumnFilter,
|
|
5936
|
+
onEnter: () => handleFilterEnter(col.field)
|
|
5892
5937
|
}) : withDirectives((openBlock(), createElementBlock("input", {
|
|
5893
5938
|
key: 1,
|
|
5894
5939
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5895
5940
|
type: "date",
|
|
5896
5941
|
class: normalizeClass(["bh-form-control", {
|
|
5897
5942
|
"bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
|
|
5898
|
-
}])
|
|
5899
|
-
|
|
5943
|
+
}]),
|
|
5944
|
+
onKeydown: withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5945
|
+
}, null, 42, _hoisted_29$1)), [
|
|
5900
5946
|
[vModelText, filterInputs.value[col.field]]
|
|
5901
5947
|
])
|
|
5902
5948
|
], 64)) : col.type === "bool" ? withDirectives((openBlock(), createElementBlock("select", {
|
|
@@ -5904,8 +5950,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
5904
5950
|
"onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
|
|
5905
5951
|
class: "bh-form-control",
|
|
5906
5952
|
onClick: _cache[2] || (_cache[2] = //@ts-ignore
|
|
5907
|
-
(...args) => props.isOpenFilter && props.isOpenFilter(...args))
|
|
5908
|
-
|
|
5953
|
+
(...args) => props.isOpenFilter && props.isOpenFilter(...args)),
|
|
5954
|
+
onKeydown: withKeys(($event) => handleFilterEnter(col.field), ["enter"])
|
|
5955
|
+
}, _hoisted_34$1, 40, _hoisted_30$1)), [
|
|
5909
5956
|
[vModelSelect, filterInputs.value[col.field]]
|
|
5910
5957
|
]) : createCommentVNode("", true)
|
|
5911
5958
|
])) : createCommentVNode("", true),
|
|
@@ -6148,6 +6195,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
6148
6195
|
sortDirection: { default: "asc" },
|
|
6149
6196
|
columnFilter: { type: Boolean, default: false },
|
|
6150
6197
|
columnFilterLang: { default: null },
|
|
6198
|
+
filterDebounce: { default: 100 },
|
|
6151
6199
|
useNewColumnFilter: { type: Boolean, default: false },
|
|
6152
6200
|
showFloatingFilterLabel: { type: Boolean, default: false },
|
|
6153
6201
|
pagination: { type: Boolean, default: true },
|
|
@@ -6271,6 +6319,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
6271
6319
|
return (col == null ? void 0 : col.field) || null;
|
|
6272
6320
|
});
|
|
6273
6321
|
const hasAnyActiveFilter = ref(false);
|
|
6322
|
+
const columnHeaderRef = ref(null);
|
|
6274
6323
|
const updateHasAnyActiveFilter = () => {
|
|
6275
6324
|
hasAnyActiveFilter.value = props.columns.some((col) => {
|
|
6276
6325
|
return col.value !== void 0 && col.value !== null && col.value !== "";
|
|
@@ -6574,6 +6623,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
6574
6623
|
}
|
|
6575
6624
|
}
|
|
6576
6625
|
return !!column;
|
|
6626
|
+
},
|
|
6627
|
+
/**
|
|
6628
|
+
* Flush all pending filter debounces
|
|
6629
|
+
* Call this before getColumnFilters() when Enter is pressed
|
|
6630
|
+
* to ensure all filter values are immediately processed
|
|
6631
|
+
*/
|
|
6632
|
+
flushAllFilterDebounces() {
|
|
6633
|
+
var _a2, _b2;
|
|
6634
|
+
(_b2 = (_a2 = columnHeaderRef.value) == null ? void 0 : _a2.flushAllFilterDebounces) == null ? void 0 : _b2.call(_a2);
|
|
6577
6635
|
}
|
|
6578
6636
|
});
|
|
6579
6637
|
watch(
|
|
@@ -7067,6 +7125,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
7067
7125
|
})
|
|
7068
7126
|
}, [
|
|
7069
7127
|
createVNode(_sfc_main$1, {
|
|
7128
|
+
ref_key: "columnHeaderRef",
|
|
7129
|
+
ref: columnHeaderRef,
|
|
7070
7130
|
all: props,
|
|
7071
7131
|
expandedrows: expandedrows.value,
|
|
7072
7132
|
currentSortColumn: currentSortColumn.value,
|