@platforma-sdk/ui-vue 1.54.0 → 1.54.7

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.
Files changed (171) hide show
  1. package/.turbo/turbo-build.log +142 -195
  2. package/.turbo/turbo-formatter$colon$check.log +2 -2
  3. package/.turbo/turbo-linter$colon$check.log +2 -2
  4. package/.turbo/turbo-types$colon$check.log +1 -1
  5. package/CHANGELOG.md +16 -0
  6. package/dist/AgGridVue/useAgGridOptions.js +2 -3
  7. package/dist/AgGridVue/useAgGridOptions.js.map +1 -1
  8. package/dist/components/PlAdvancedFilter/constants.d.ts +1 -1
  9. package/dist/components/PlAdvancedFilter/index.d.ts +2 -2
  10. package/dist/components/PlAdvancedFilter/index.d.ts.map +1 -1
  11. package/dist/components/PlAdvancedFilter/index.js.map +1 -1
  12. package/dist/components/PlAgDataTable/PlAgDataTableV2.vue.d.ts.map +1 -1
  13. package/dist/components/PlAgDataTable/PlAgDataTableV2.vue2.js +135 -146
  14. package/dist/components/PlAgDataTable/PlAgDataTableV2.vue2.js.map +1 -1
  15. package/dist/components/PlAgDataTable/PlAgRowCount.vue.js +7 -8
  16. package/dist/components/PlAgDataTable/PlAgRowCount.vue.js.map +1 -1
  17. package/dist/components/PlAgDataTable/sources/table-state-v2.d.ts +3 -2
  18. package/dist/components/PlAgDataTable/sources/table-state-v2.d.ts.map +1 -1
  19. package/dist/components/PlAgDataTable/sources/table-state-v2.js +93 -96
  20. package/dist/components/PlAgDataTable/sources/table-state-v2.js.map +1 -1
  21. package/dist/components/PlAgDataTable/types.d.ts +3 -44
  22. package/dist/components/PlAgDataTable/types.d.ts.map +1 -1
  23. package/dist/components/PlAgDataTable/types.js +26 -42
  24. package/dist/components/PlAgDataTable/types.js.map +1 -1
  25. package/dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue.js +9 -10
  26. package/dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue.js.map +1 -1
  27. package/dist/components/PlAgRowNumHeader.vue.js +8 -9
  28. package/dist/components/PlAgRowNumHeader.vue.js.map +1 -1
  29. package/dist/components/PlAnnotations/components/FilterSidebar.vue.d.ts.map +1 -1
  30. package/dist/components/PlAnnotations/components/FilterSidebar.vue2.js +76 -74
  31. package/dist/components/PlAnnotations/components/FilterSidebar.vue2.js.map +1 -1
  32. package/dist/components/PlAnnotations/components/PlAnnotations.vue2.js.map +1 -1
  33. package/dist/components/PlTableFilters/PlTableFiltersV2.vue.d.ts +7 -9
  34. package/dist/components/PlTableFilters/PlTableFiltersV2.vue.d.ts.map +1 -1
  35. package/dist/components/PlTableFilters/PlTableFiltersV2.vue2.js +82 -132
  36. package/dist/components/PlTableFilters/PlTableFiltersV2.vue2.js.map +1 -1
  37. package/dist/components/PlTableFilters/PlTableFiltersV2.vue3.js +4 -17
  38. package/dist/components/PlTableFilters/PlTableFiltersV2.vue3.js.map +1 -1
  39. package/dist/components/PlTableFilters/index.d.ts +0 -1
  40. package/dist/components/PlTableFilters/index.d.ts.map +1 -1
  41. package/dist/index.js +1 -1
  42. package/dist/lib/util/helpers/dist/prettyBytes.js.map +1 -1
  43. package/package.json +6 -6
  44. package/src/components/PlAdvancedFilter/index.ts +1 -1
  45. package/src/components/PlAgDataTable/PlAgDataTableV2.vue +3 -22
  46. package/src/components/PlAgDataTable/sources/table-state-v2.ts +66 -59
  47. package/src/components/PlAgDataTable/types.ts +15 -78
  48. package/src/components/PlAnnotations/components/FilterSidebar.vue +3 -6
  49. package/src/components/PlTableFilters/PlTableFiltersV2.vue +100 -232
  50. package/src/components/PlTableFilters/index.ts +0 -1
  51. package/dist/_virtual/index.js +0 -6
  52. package/dist/_virtual/index.js.map +0 -1
  53. package/dist/_virtual/re.js +0 -5
  54. package/dist/_virtual/re.js.map +0 -1
  55. package/dist/components/PlTableFilters/PlTableAddFilterV2.vue.d.ts +0 -15
  56. package/dist/components/PlTableFilters/PlTableAddFilterV2.vue.d.ts.map +0 -1
  57. package/dist/components/PlTableFilters/PlTableAddFilterV2.vue.js +0 -97
  58. package/dist/components/PlTableFilters/PlTableAddFilterV2.vue.js.map +0 -1
  59. package/dist/components/PlTableFilters/PlTableAddFilterV2.vue2.js +0 -5
  60. package/dist/components/PlTableFilters/PlTableAddFilterV2.vue2.js.map +0 -1
  61. package/dist/components/PlTableFilters/PlTableFilterEntryV2.vue.d.ts +0 -11
  62. package/dist/components/PlTableFilters/PlTableFilterEntryV2.vue.d.ts.map +0 -1
  63. package/dist/components/PlTableFilters/PlTableFilterEntryV2.vue.js +0 -142
  64. package/dist/components/PlTableFilters/PlTableFilterEntryV2.vue.js.map +0 -1
  65. package/dist/components/PlTableFilters/PlTableFilterEntryV2.vue2.js +0 -5
  66. package/dist/components/PlTableFilters/PlTableFilterEntryV2.vue2.js.map +0 -1
  67. package/dist/components/PlTableFilters/filters-state.d.ts +0 -7
  68. package/dist/components/PlTableFilters/filters-state.d.ts.map +0 -1
  69. package/dist/components/PlTableFilters/filters-state.js +0 -79
  70. package/dist/components/PlTableFilters/filters-state.js.map +0 -1
  71. package/dist/components/PlTableFilters/filters_logic.d.ts +0 -24
  72. package/dist/components/PlTableFilters/filters_logic.d.ts.map +0 -1
  73. package/dist/components/PlTableFilters/filters_logic.js +0 -348
  74. package/dist/components/PlTableFilters/filters_logic.js.map +0 -1
  75. package/dist/components/PlTableFilters/types.d.ts +0 -26
  76. package/dist/components/PlTableFilters/types.d.ts.map +0 -1
  77. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/classes/comparator.js +0 -57
  78. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/classes/comparator.js.map +0 -1
  79. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/classes/range.js +0 -149
  80. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/classes/range.js.map +0 -1
  81. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/classes/semver.js +0 -170
  82. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/classes/semver.js.map +0 -1
  83. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/clean.js +0 -15
  84. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/clean.js.map +0 -1
  85. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/cmp.js +0 -40
  86. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/cmp.js.map +0 -1
  87. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/coerce.js +0 -34
  88. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/coerce.js.map +0 -1
  89. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/compare-build.js +0 -15
  90. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/compare-build.js.map +0 -1
  91. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/compare-loose.js +0 -12
  92. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/compare-loose.js.map +0 -1
  93. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/compare.js +0 -12
  94. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/compare.js.map +0 -1
  95. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/diff.js +0 -25
  96. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/diff.js.map +0 -1
  97. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/eq.js +0 -12
  98. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/eq.js.map +0 -1
  99. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/gt.js +0 -12
  100. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/gt.js.map +0 -1
  101. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/gte.js +0 -12
  102. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/gte.js.map +0 -1
  103. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/inc.js +0 -22
  104. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/inc.js.map +0 -1
  105. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/lt.js +0 -12
  106. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/lt.js.map +0 -1
  107. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/lte.js +0 -12
  108. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/lte.js.map +0 -1
  109. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/major.js +0 -12
  110. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/major.js.map +0 -1
  111. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/minor.js +0 -12
  112. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/minor.js.map +0 -1
  113. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/neq.js +0 -12
  114. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/neq.js.map +0 -1
  115. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/parse.js +0 -22
  116. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/parse.js.map +0 -1
  117. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/patch.js +0 -12
  118. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/patch.js.map +0 -1
  119. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/prerelease.js +0 -15
  120. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/prerelease.js.map +0 -1
  121. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/rcompare.js +0 -12
  122. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/rcompare.js.map +0 -1
  123. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/rsort.js +0 -12
  124. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/rsort.js.map +0 -1
  125. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/satisfies.js +0 -19
  126. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/satisfies.js.map +0 -1
  127. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/sort.js +0 -12
  128. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/sort.js.map +0 -1
  129. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/valid.js +0 -15
  130. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/valid.js.map +0 -1
  131. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/index.js +0 -98
  132. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/index.js.map +0 -1
  133. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/constants.js +0 -29
  134. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/constants.js.map +0 -1
  135. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/debug.js +0 -9
  136. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/debug.js.map +0 -1
  137. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/identifiers.js +0 -17
  138. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/identifiers.js.map +0 -1
  139. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/lrucache.js +0 -33
  140. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/lrucache.js.map +0 -1
  141. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/parse-options.js +0 -11
  142. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/parse-options.js.map +0 -1
  143. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/re.js +0 -33
  144. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/re.js.map +0 -1
  145. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/gtr.js +0 -12
  146. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/gtr.js.map +0 -1
  147. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/intersects.js +0 -12
  148. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/intersects.js.map +0 -1
  149. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/ltr.js +0 -12
  150. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/ltr.js.map +0 -1
  151. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/max-satisfying.js +0 -23
  152. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/max-satisfying.js.map +0 -1
  153. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/min-satisfying.js +0 -23
  154. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/min-satisfying.js.map +0 -1
  155. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/min-version.js +0 -43
  156. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/min-version.js.map +0 -1
  157. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/outside.js +0 -45
  158. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/outside.js.map +0 -1
  159. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/simplify.js +0 -25
  160. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/simplify.js.map +0 -1
  161. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/subset.js +0 -95
  162. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/subset.js.map +0 -1
  163. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/to-comparators.js +0 -12
  164. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/to-comparators.js.map +0 -1
  165. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/valid.js +0 -18
  166. package/dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/valid.js.map +0 -1
  167. package/src/components/PlTableFilters/PlTableAddFilterV2.vue +0 -84
  168. package/src/components/PlTableFilters/PlTableFilterEntryV2.vue +0 -157
  169. package/src/components/PlTableFilters/filters-state.ts +0 -152
  170. package/src/components/PlTableFilters/filters_logic.ts +0 -444
  171. package/src/components/PlTableFilters/types.ts +0 -32
@@ -1,102 +1,111 @@
1
1
  <script lang="ts" setup>
2
+ import type { PTableColumnSpec, PTableColumnId, ListOptionBase } from "@platforma-sdk/model";
2
3
  import {
3
- type PlDataTableFilterState,
4
4
  canonicalizeJson,
5
- type PTableColumnId,
5
+ Annotation,
6
+ Domain,
7
+ readAnnotation,
8
+ readDomain,
9
+ parseJson,
10
+ getAxisId,
6
11
  } from "@platforma-sdk/model";
7
- import type { PlDataTableFiltersSettings } from "./types";
8
- import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
12
+ import { computed, onMounted, ref } from "vue";
13
+ import { PlBtnGhost, PlSlideModal, usePlBlockPageTitleTeleportTarget } from "@milaboratories/uikit";
9
14
  import {
10
- PlBtnGhost,
11
- PlSlideModal,
12
- PlBtnSecondary,
13
- PlMaskIcon16,
14
- PlElementList,
15
- usePlBlockPageTitleTeleportTarget,
16
- } from "@milaboratories/uikit";
17
- import { useFilters } from "./filters-state";
18
- import PlTableAddFilterV2 from "./PlTableAddFilterV2.vue";
19
- import PlTableFilterEntryV2 from "./PlTableFilterEntryV2.vue";
20
- import { isJsonEqual } from "@milaboratories/helpers";
15
+ PlAdvancedFilter,
16
+ PlAdvancedFilterSupportedFilters,
17
+ type PlAdvancedFilterItem,
18
+ } from "../PlAdvancedFilter";
19
+ import type { PlAdvancedFilterColumnId } from "../PlAdvancedFilter/types";
21
20
 
22
- const state = defineModel<PlDataTableFilterState[]>({
23
- default: [],
24
- });
21
+ const model = defineModel<PlAdvancedFilter>({ required: true });
25
22
  const props = defineProps<{
26
- settings: Readonly<PlDataTableFiltersSettings>;
23
+ columns: PTableColumnSpec[];
27
24
  }>();
28
- const { settings } = toRefs(props);
29
-
30
- const filters = useFilters(settings, state);
31
-
32
- const filtersOn = computed<boolean>(() =>
33
- filters.value.some((s) => s.filter && !s.filter.disabled),
34
- );
35
25
 
26
+ // Teleport for "Filters" button
36
27
  const mounted = ref(false);
37
28
  onMounted(() => {
38
29
  mounted.value = true;
39
30
  });
40
31
  const teleportTarget = usePlBlockPageTitleTeleportTarget("PlTableFiltersV2");
41
-
42
32
  const showManager = ref(false);
43
33
 
44
- const scrollIsActive = ref(false);
45
- const filterManager = ref<HTMLElement>();
46
- let observer: ResizeObserver;
47
- onMounted(() => {
48
- observer = new ResizeObserver(() => {
49
- const parent = filterManager.value?.parentElement;
50
- if (!parent) return;
51
- scrollIsActive.value =
52
- parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth;
53
- });
54
- if (filterManager.value && filterManager.value.parentElement) {
55
- observer.observe(filterManager.value!.parentElement);
56
- }
34
+ // Check if any filters are active
35
+ const filtersOn = computed(() => {
36
+ return model.value.filters.length > 0;
57
37
  });
58
38
 
59
- watch(filterManager, (newElement, oldElement) => {
60
- if (oldElement?.parentElement) {
61
- observer.unobserve(oldElement.parentElement);
62
- }
63
- if (newElement?.parentElement) {
64
- observer.observe(newElement.parentElement);
65
- }
39
+ // Convert PTableColumnSpec to PlAdvancedFilterColumnId
40
+ function makeFilterColumnId(spec: PTableColumnSpec): PlAdvancedFilterColumnId {
41
+ const id: PTableColumnId =
42
+ spec.type === "axis"
43
+ ? { type: "axis", id: getAxisId(spec.spec) }
44
+ : { type: "column", id: spec.id };
45
+ return canonicalizeJson<PTableColumnId>(id) as unknown as PlAdvancedFilterColumnId;
46
+ }
47
+
48
+ // Convert PTableColumnSpec[] to PlAdvancedFilterItem[]
49
+ const items = computed<PlAdvancedFilterItem[]>(() => {
50
+ return props.columns.map((col, idx) => {
51
+ const id = makeFilterColumnId(col);
52
+ const label =
53
+ readAnnotation(col.spec, Annotation.Label)?.trim() ?? `Unlabeled ${col.type} ${idx}`;
54
+ const alphabet =
55
+ readDomain(col.spec, Domain.Alphabet) ?? readAnnotation(col.spec, Annotation.Alphabet);
56
+ return {
57
+ id,
58
+ label,
59
+ spec: col.spec,
60
+ alphabet: alphabet ?? undefined,
61
+ };
62
+ });
66
63
  });
67
64
 
68
- onBeforeUnmount(() => {
69
- if (observer !== undefined) {
70
- observer.disconnect();
65
+ // Supported filters (same set as FilterSidebar)
66
+ const supportedFilters = [
67
+ "isNA",
68
+ "isNotNA",
69
+ "greaterThan",
70
+ "greaterThanOrEqual",
71
+ "lessThan",
72
+ "lessThanOrEqual",
73
+ "patternEquals",
74
+ "patternNotEquals",
75
+ "patternContainSubsequence",
76
+ "patternNotContainSubsequence",
77
+ "patternMatchesRegularExpression",
78
+ "patternFuzzyContainSubsequence",
79
+ "equal",
80
+ "notEqual",
81
+ ] as (typeof PlAdvancedFilterSupportedFilters)[number][];
82
+
83
+ // getSuggestOptions - provide discrete values from column annotations
84
+ function getSuggestOptions(params: {
85
+ columnId: PlAdvancedFilterColumnId;
86
+ axisIdx?: number;
87
+ searchStr: string;
88
+ searchType: "value" | "label";
89
+ }): ListOptionBase<string | number>[] {
90
+ const item = items.value.find((i) => i.id === params.columnId);
91
+ if (!item) return [];
92
+
93
+ const discreteValuesStr = readAnnotation(item.spec, Annotation.DiscreteValues);
94
+ if (!discreteValuesStr) return [];
95
+
96
+ try {
97
+ const values = parseJson<(string | number)[]>(discreteValuesStr);
98
+ return values
99
+ .filter((v) => {
100
+ if (!params.searchStr) return true;
101
+ const str = String(v).toLowerCase();
102
+ return str.includes(params.searchStr.toLowerCase());
103
+ })
104
+ .map((v) => ({ value: v, label: String(v) }));
105
+ } catch {
106
+ return [];
71
107
  }
72
- });
73
-
74
- const canAddFilter = computed<boolean>(() => filters.value.some((s) => !s.filter));
75
- const showAddFilter = ref(false);
76
-
77
- const canResetToDefaults = computed<boolean>(() => {
78
- return filters.value.some(
79
- (s) =>
80
- (!s.defaultFilter && s.filter) ||
81
- (s.defaultFilter &&
82
- (s.filter?.disabled === true || !isJsonEqual(s.filter?.value, s.defaultFilter))),
83
- );
84
- });
85
- const resetToDefaults = () => {
86
- filters.value.forEach((s) => {
87
- if (s.defaultFilter) {
88
- s.filter = {
89
- value: s.defaultFilter,
90
- disabled: false,
91
- open: false,
92
- };
93
- } else {
94
- s.filter = null;
95
- }
96
- });
97
- };
98
-
99
- const items = computed(() => filters.value.filter((s) => s.filter !== null));
108
+ }
100
109
  </script>
101
110
 
102
111
  <template>
@@ -109,165 +118,24 @@ const items = computed(() => filters.value.filter((s) => s.filter !== null));
109
118
  <PlSlideModal v-model="showManager" :close-on-outside-click="false">
110
119
  <template #title>Manage Filters</template>
111
120
 
112
- <div ref="filterManager" :class="$style['filter-manager']">
113
- <PlElementList
114
- v-model:items="items"
115
- :on-expand="
116
- (item) => {
117
- if (item.filter) {
118
- item.filter.open = !item.filter.open;
119
- }
120
- }
121
- "
122
- :is-expanded="(item) => item.filter?.open ?? false"
123
- :on-toggle="
124
- (item) => {
125
- if (item.filter) {
126
- item.filter.disabled = !item.filter.disabled;
127
- }
128
- }
129
- "
130
- :is-toggled="(item) => item.filter?.disabled ?? false"
131
- :on-remove="
132
- (item) => {
133
- if (item.filter) {
134
- item.filter = null;
135
- }
136
- }
137
- "
138
- :get-item-key="(item) => canonicalizeJson<PTableColumnId>(item.id)"
139
- disable-dragging
140
- >
141
- <template #item-title="{ item }">
142
- {{ item.label }}
143
- </template>
144
- <template #item-content="{ index }">
145
- <PlTableFilterEntryV2 v-model="filters.value[index]" />
146
- </template>
147
- </PlElementList>
148
-
149
- <div v-if="filters.value.length" :class="$style['add-action-wrapper']">
150
- <button :disabled="!canAddFilter" :class="$style['add-btn']" @click="showAddFilter = true">
151
- <PlMaskIcon16 name="add" />
152
- <div :class="$style['add-btn-title']">Add Filter</div>
153
- </button>
154
-
155
- <PlBtnSecondary :disabled="!canResetToDefaults" @click.stop="resetToDefaults">
156
- Reset to defaults
157
- </PlBtnSecondary>
158
- </div>
159
-
160
- <div v-if="!filters.value.length">No filters applicable</div>
121
+ <div v-if="items.length > 0" :class="$style.root">
122
+ <PlAdvancedFilter
123
+ v-model:filters="model"
124
+ :items="items"
125
+ :supported-filters="supportedFilters"
126
+ :get-suggest-options="getSuggestOptions"
127
+ :enable-dnd="false"
128
+ :enable-add-group-button="true"
129
+ />
161
130
  </div>
131
+ <div v-else>No filters applicable</div>
162
132
  </PlSlideModal>
163
-
164
- <PlTableAddFilterV2
165
- v-model="showAddFilter"
166
- :filters="filters.value"
167
- :set-filter="(idx, filter) => (filters.value[idx] = filter)"
168
- />
169
133
  </template>
170
134
 
171
- <style lang="scss" module>
172
- .filter-manager {
173
- --expand-icon-rotation: rotate(0deg);
135
+ <style module>
136
+ .root {
174
137
  display: flex;
175
138
  flex-direction: column;
176
- gap: 6px;
177
- }
178
-
179
- .add-action-wrapper {
180
- position: sticky;
181
- bottom: -16px;
182
- background-color: var(--bg-elevated-01);
183
- transition: all 0.15s ease-in-out;
184
- display: flex;
185
- flex-direction: column;
186
- gap: 6px;
187
- }
188
-
189
- .add-btn {
190
- height: 40px;
191
- background-color: var(--bg-elevated-01);
192
- display: flex;
193
- align-items: center;
194
- gap: 8px;
195
- padding-left: 12px;
196
- padding-right: 12px;
197
- border-radius: 6px;
198
- border: 1px dashed var(--border-color-div-grey);
199
- line-height: 0;
200
- cursor: pointer;
201
- text-align: left;
202
- }
203
-
204
- .add-btn:disabled {
205
- --icon-color: var(--dis-01);
206
- cursor: auto;
207
- }
208
-
209
- .add-btn:not([disabled]):hover {
210
- border-radius: 6px;
211
- border: 1px dashed var(--border-color-focus, #49cc49);
212
- background: rgba(99, 224, 36, 0.12);
213
- }
214
-
215
- .add-btn-title {
216
- flex-grow: 1;
217
- font-weight: 600;
218
- }
219
-
220
- .expand-icon {
221
- transition: all 0.15s ease-in-out;
222
- transform: var(--expand-icon-rotation);
223
- line-height: 0;
224
- cursor: pointer;
225
- }
226
-
227
- .toggle,
228
- .delete {
229
- line-height: 0;
230
- cursor: pointer;
231
- display: none;
232
- }
233
-
234
- .toggle .mask-24,
235
- .delete .mask-24 {
236
- --icon-color: var(--ic-02);
237
- }
238
-
239
- .toggle:hover .mask-24 {
240
- --icon-color: var(--ic-01);
241
- }
242
-
243
- .delete:hover .mask-24 {
244
- --icon-color: var(--ic-01);
245
- }
246
-
247
- .filter:hover .toggle,
248
- .filter:hover .delete {
249
- display: block;
250
- }
251
-
252
- .filter {
253
- border-radius: 6px;
254
- border: 1px solid var(--border-color-div-grey);
255
- background-color: var(--bg-base-light);
256
- transition: background-color 0.15s ease-in-out;
257
- overflow: auto;
258
- }
259
-
260
- .filter.disabled .expand-icon,
261
- .filter.disabled .title {
262
- opacity: 0.3;
263
- }
264
-
265
- .filter:hover {
266
- background-color: var(--bg-elevated-01);
267
- }
268
-
269
- .filter:global(.open) {
270
- background-color: var(--bg-elevated-01);
271
- --expand-icon-rotation: rotate(90deg);
139
+ gap: 12px;
272
140
  }
273
141
  </style>
@@ -1,2 +1 @@
1
1
  export { default as PlTableFiltersV2 } from "./PlTableFiltersV2.vue";
2
- export * from "./types";
@@ -1,6 +0,0 @@
1
- import { __require as r } from "../node_modules/.pnpm/semver@7.7.2/node_modules/semver/index.js";
2
- var s = r();
3
- export {
4
- s
5
- };
6
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
@@ -1,5 +0,0 @@
1
- var e = { exports: {} };
2
- export {
3
- e as __module
4
- };
5
- //# sourceMappingURL=re.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"re.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,15 +0,0 @@
1
- import { PlDataTableFilterStateInternal } from './types';
2
- type __VLS_Props = {
3
- filters: Readonly<PlDataTableFilterStateInternal[]>;
4
- setFilter(idx: number, filter: PlDataTableFilterStateInternal): void;
5
- };
6
- type __VLS_PublicProps = {
7
- modelValue: boolean;
8
- } & __VLS_Props;
9
- declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
10
- "update:modelValue": (value: boolean) => any;
11
- }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
12
- "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
13
- }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
14
- export default _default;
15
- //# sourceMappingURL=PlTableAddFilterV2.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PlTableAddFilterV2.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTableFilters/PlTableAddFilterV2.vue"],"names":[],"mappings":"AA+FA,OAAO,EAAE,KAAK,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAK9D,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,QAAQ,CAAC,8BAA8B,EAAE,CAAC,CAAC;IACpD,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,8BAA8B,GAAG,IAAI,CAAC;CACtE,CAAC;AAgDF,KAAK,iBAAiB,GAAG;IACzB,UAAU,EAAE,OAAO,CAAC;CACnB,GAAG,WAAW,CAAC;;;;;;AA+IhB,wBAQG"}
@@ -1,97 +0,0 @@
1
- import { defineComponent as k, mergeModels as x, useModel as y, computed as b, ref as v, watch as w, createBlock as c, openBlock as n, unref as r, withCtx as u, createElementVNode as B, createVNode as s, createElementBlock as P, createCommentVNode as V, createTextVNode as m } from "vue";
2
- import { deepClone as M } from "../../lib/util/helpers/dist/objects.js";
3
- import { PlSlideModal as N, PlDropdown as g, PlBtnPrimary as A, PlBtnGhost as U } from "@milaboratories/uikit";
4
- import { getFilterDefault as j } from "./filters_logic.js";
5
- import D from "./PlTableFilterEntryV2.vue.js";
6
- const E = { class: "d-flex flex-column gap-24" }, T = {
7
- key: 0,
8
- class: "text-subtitle-m",
9
- style: { color: "var(--txt-mask)" }
10
- }, $ = /* @__PURE__ */ k({
11
- __name: "PlTableAddFilterV2",
12
- props: /* @__PURE__ */ x({
13
- filters: {},
14
- setFilter: { type: Function }
15
- }, {
16
- modelValue: { type: Boolean, required: !0 },
17
- modelModifiers: {}
18
- }),
19
- emits: ["update:modelValue"],
20
- setup(f) {
21
- const d = y(f, "modelValue"), i = f, C = b(() => i.filters.map((o, e) => ({
22
- value: e,
23
- text: o.label
24
- })).filter((o) => i.filters[o.value].filter === null)), t = v(), l = v(null);
25
- w(
26
- () => t.value,
27
- (o) => {
28
- if (o === void 0)
29
- l.value = null;
30
- else {
31
- const e = M(i.filters[o]);
32
- e.filter || (e.filter = {
33
- value: e.defaultFilter ?? j(e.options[0].value),
34
- disabled: !1,
35
- open: !0
36
- }), l.value = e;
37
- }
38
- }
39
- );
40
- const p = () => {
41
- t.value = void 0, d.value = !1;
42
- }, F = () => {
43
- t.value !== void 0 && l.value && i.setFilter(t.value, l.value), p();
44
- };
45
- return (o, e) => (n(), c(r(N), {
46
- modelValue: d.value,
47
- "onUpdate:modelValue": e[2] || (e[2] = (a) => d.value = a),
48
- "close-on-outside-click": !1
49
- }, {
50
- title: u(() => [...e[3] || (e[3] = [
51
- m("Add Filter", -1)
52
- ])]),
53
- actions: u(() => [
54
- s(r(A), {
55
- disabled: !l.value,
56
- onClick: F
57
- }, {
58
- default: u(() => [...e[4] || (e[4] = [
59
- m("Add Filter", -1)
60
- ])]),
61
- _: 1
62
- }, 8, ["disabled"]),
63
- s(r(U), {
64
- "justify-center": !1,
65
- onClick: p
66
- }, {
67
- default: u(() => [...e[5] || (e[5] = [
68
- m("Cancel", -1)
69
- ])]),
70
- _: 1
71
- })
72
- ]),
73
- default: u(() => [
74
- B("div", E, [
75
- s(r(g), {
76
- modelValue: t.value,
77
- "onUpdate:modelValue": e[0] || (e[0] = (a) => t.value = a),
78
- options: C.value,
79
- label: "Column",
80
- placeholder: "Choose..."
81
- }, null, 8, ["modelValue", "options"]),
82
- t.value === void 0 ? (n(), P("div", T, " Choose a column to view and adjust its options ")) : V("", !0),
83
- l.value ? (n(), c(D, {
84
- key: 1,
85
- modelValue: l.value,
86
- "onUpdate:modelValue": e[1] || (e[1] = (a) => l.value = a)
87
- }, null, 8, ["modelValue"])) : V("", !0)
88
- ])
89
- ]),
90
- _: 1
91
- }, 8, ["modelValue"]));
92
- }
93
- });
94
- export {
95
- $ as default
96
- };
97
- //# sourceMappingURL=PlTableAddFilterV2.vue.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PlTableAddFilterV2.vue.js","sources":["../../../src/components/PlTableFilters/PlTableAddFilterV2.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { deepClone } from \"@milaboratories/helpers\";\nimport {\n PlBtnGhost,\n PlBtnPrimary,\n PlDropdown,\n PlSlideModal,\n type ListOption,\n} from \"@milaboratories/uikit\";\nimport { computed, ref, watch } from \"vue\";\nimport { type PlDataTableFilterStateInternal } from \"./types\";\nimport { getFilterDefault } from \"./filters_logic\";\nimport PlTableFilterEntryV2 from \"./PlTableFilterEntryV2.vue\";\n\nconst show = defineModel<boolean>({ required: true });\nconst props = defineProps<{\n filters: Readonly<PlDataTableFilterStateInternal[]>;\n setFilter(idx: number, filter: PlDataTableFilterStateInternal): void;\n}>();\n\nconst filterOptions = computed<ListOption<number>[]>(() => {\n return props.filters\n .map((s, i) => {\n return {\n value: i,\n text: s.label,\n };\n })\n .filter((o) => props.filters[o.value].filter === null);\n});\n\nconst newFilterIdx = ref<number>();\nconst newFilter = ref<PlDataTableFilterStateInternal | null>(null);\nwatch(\n () => newFilterIdx.value,\n (newFilterIdx) => {\n if (newFilterIdx === undefined) {\n newFilter.value = null;\n } else {\n const filterClone = deepClone(props.filters[newFilterIdx]);\n if (!filterClone.filter) {\n filterClone.filter = {\n value: filterClone.defaultFilter ?? getFilterDefault(filterClone.options[0].value),\n disabled: false,\n open: true,\n };\n }\n newFilter.value = filterClone;\n }\n },\n);\nconst discardFilter = () => {\n newFilterIdx.value = undefined;\n show.value = false;\n};\nconst applyFilter = () => {\n if (newFilterIdx.value !== undefined && newFilter.value) {\n props.setFilter(newFilterIdx.value, newFilter.value);\n }\n discardFilter();\n};\n</script>\n\n<template>\n <PlSlideModal v-model=\"show\" :close-on-outside-click=\"false\">\n <template #title>Add Filter</template>\n <div class=\"d-flex flex-column gap-24\">\n <PlDropdown\n v-model=\"newFilterIdx\"\n :options=\"filterOptions\"\n label=\"Column\"\n placeholder=\"Choose...\"\n />\n <div v-if=\"newFilterIdx === undefined\" class=\"text-subtitle-m\" style=\"color: var(--txt-mask)\">\n Choose a column to view and adjust its options\n </div>\n <PlTableFilterEntryV2 v-if=\"newFilter\" v-model=\"newFilter\" />\n </div>\n <template #actions>\n <PlBtnPrimary :disabled=\"!newFilter\" @click=\"applyFilter\">Add Filter</PlBtnPrimary>\n <PlBtnGhost :justify-center=\"false\" @click=\"discardFilter\">Cancel</PlBtnGhost>\n </template>\n </PlSlideModal>\n</template>\n"],"names":["show","_useModel","__props","props","filterOptions","computed","s","i","newFilterIdx","ref","newFilter","watch","filterClone","deepClone","getFilterDefault","discardFilter","applyFilter","_createBlock","_unref","PlSlideModal","$event","_cache","_createVNode","PlBtnPrimary","PlBtnGhost","_createElementVNode","_hoisted_1","PlDropdown","_createElementBlock","_hoisted_2","PlTableFilterEntryV2"],"mappings":";;;;;;;;;;;;;;;;;;;;AAcA,UAAMA,IAAOC,EAAoBC,GAAA,YAAmB,GAC9CC,IAAQD,GAKRE,IAAgBC,EAA+B,MAC5CF,EAAM,QACV,IAAI,CAACG,GAAGC,OACA;AAAA,MACL,OAAOA;AAAA,MACP,MAAMD,EAAE;AAAA,IAAA,EAEX,EACA,OAAO,CAAC,MAAMH,EAAM,QAAQ,EAAE,KAAK,EAAE,WAAW,IAAI,CACxD,GAEKK,IAAeC,EAAA,GACfC,IAAYD,EAA2C,IAAI;AACjE,IAAAE;AAAA,MACE,MAAMH,EAAa;AAAA,MACnB,CAACA,MAAiB;AAChB,YAAIA,MAAiB;AACnB,UAAAE,EAAU,QAAQ;AAAA,aACb;AACL,gBAAME,IAAcC,EAAUV,EAAM,QAAQK,CAAY,CAAC;AACzD,UAAKI,EAAY,WACfA,EAAY,SAAS;AAAA,YACnB,OAAOA,EAAY,iBAAiBE,EAAiBF,EAAY,QAAQ,CAAC,EAAE,KAAK;AAAA,YACjF,UAAU;AAAA,YACV,MAAM;AAAA,UAAA,IAGVF,EAAU,QAAQE;AAAA,QACpB;AAAA,MACF;AAAA,IAAA;AAEF,UAAMG,IAAgB,MAAM;AAC1B,MAAAP,EAAa,QAAQ,QACrBR,EAAK,QAAQ;AAAA,IACf,GACMgB,IAAc,MAAM;AACxB,MAAIR,EAAa,UAAU,UAAaE,EAAU,SAChDP,EAAM,UAAUK,EAAa,OAAOE,EAAU,KAAK,GAErDK,EAAA;AAAA,IACF;2BAIEE,EAkBeC,EAAAC,CAAA,GAAA;AAAA,kBAlBQnB,EAAA;AAAA,oDAAAA,EAAI,QAAAoB;AAAA,MAAG,0BAAwB;AAAA,IAAA;MACzC,SAAM,MAAU,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,UAAV,cAAU,EAAA;AAAA,MAAA;MAahB,WACT,MAAmF;AAAA,QAAnFC,EAAmFJ,EAAAK,CAAA,GAAA;AAAA,UAApE,WAAWb,EAAA;AAAA,UAAY,SAAOM;AAAA,QAAA;qBAAa,MAAU,CAAA,GAAAK,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,cAAV,cAAU,EAAA;AAAA,UAAA;;;QACpEC,EAA8EJ,EAAAM,CAAA,GAAA;AAAA,UAAjE,kBAAgB;AAAA,UAAQ,SAAOT;AAAA,QAAA;qBAAe,MAAM,CAAA,GAAAM,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,cAAN,UAAM,EAAA;AAAA,UAAA;;;;iBAdnE,MAWM;AAAA,QAXNI,EAWM,OAXNC,GAWM;AAAA,UAVJJ,EAKEJ,EAAAS,CAAA,GAAA;AAAA,wBAJSnB,EAAA;AAAA,0DAAAA,EAAY,QAAAY;AAAA,YACpB,SAAShB,EAAA;AAAA,YACV,OAAM;AAAA,YACN,aAAY;AAAA,UAAA;UAEHI,EAAA,UAAiB,eAA5BoB,EAEM,OAFNC,GAA8F,kDAE9F;UAC4BnB,EAAA,cAA5BO,EAA6Da,GAAA;AAAA;wBAAbpB,EAAA;AAAA,0DAAAA,EAAS,QAAAU;AAAA,UAAA;;;;;;;"}
@@ -1,5 +0,0 @@
1
- import f from "./PlTableAddFilterV2.vue.js";
2
- export {
3
- f as default
4
- };
5
- //# sourceMappingURL=PlTableAddFilterV2.vue2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PlTableAddFilterV2.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,11 +0,0 @@
1
- import { PlDataTableFilterStateInternal } from './types';
2
- type __VLS_PublicProps = {
3
- modelValue: PlDataTableFilterStateInternal;
4
- };
5
- declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
6
- "update:modelValue": (value: PlDataTableFilterStateInternal) => any;
7
- }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
8
- "onUpdate:modelValue"?: ((value: PlDataTableFilterStateInternal) => any) | undefined;
9
- }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
10
- export default _default;
11
- //# sourceMappingURL=PlTableFilterEntryV2.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PlTableFilterEntryV2.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTableFilters/PlTableFilterEntryV2.vue"],"names":[],"mappings":"AA0KA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAiB9D,KAAK,iBAAiB,GAAG;IACzB,UAAU,EAAE,8BAA8B,CAAC;CAC1C,CAAC;;;;;;AA0TF,wBAOG"}