@vuu-ui/vuu-filters 0.8.27 → 0.8.28-debug
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/cjs/index.js +6569 -1
- package/cjs/index.js.map +4 -4
- package/esm/index.js +6652 -1
- package/esm/index.js.map +4 -4
- package/index.css +247 -1
- package/index.css.map +3 -3
- package/package.json +9 -9
- package/types/FilterModel.d.ts +43 -0
- package/types/filter-bar/FilterBar.d.ts +3 -4
- package/types/filter-bar/filterBarFocusManagement.d.ts +1 -0
- package/types/filter-bar/useFilterBar.d.ts +16 -21
- package/types/filter-bar/useFilterState.d.ts +1 -1
- package/types/filter-clause/FilterClause.d.ts +18 -0
- package/types/filter-clause/FilterMenu.d.ts +0 -1
- package/types/filter-clause/filterClauseFocusManagement.d.ts +16 -0
- package/types/filter-clause/filterClauseTypes.d.ts +3 -2
- package/types/filter-clause/index.d.ts +2 -2
- package/types/filter-clause/useFilterClause.d.ts +24 -0
- package/types/filter-clause/value-editors/FilterClauseValueEditor.d.ts +13 -0
- package/types/filter-clause/value-editors/FilterClauseValueEditorDate.d.ts +10 -0
- package/types/filter-clause/value-editors/FilterClauseValueEditorNumber.d.ts +10 -0
- package/types/filter-clause/value-editors/FilterClauseValueEditorText.d.ts +11 -0
- package/types/filter-editor/FilterClauseCombinator.d.ts +10 -0
- package/types/filter-editor/FilterEditor.d.ts +17 -0
- package/types/filter-editor/index.d.ts +1 -0
- package/types/filter-editor/useFilterEditor.d.ts +31 -0
- package/types/filter-pill/FilterPill.d.ts +8 -5
- package/types/filter-pill/FilterPillMenuOptions.d.ts +12 -0
- package/types/filter-pill/getFilterTooltipText.d.ts +2 -0
- package/types/filter-pill-menu/FilterPillMenu.d.ts +1 -1
- package/types/filter-utils.d.ts +0 -1
- package/types/index.d.ts +2 -1
- package/LICENSE +0 -201
- package/types/filter-builder-menu/FilterBuilderMenu.d.ts +0 -10
- package/types/filter-builder-menu/index.d.ts +0 -1
- package/types/filter-clause/DateInput.d.ts +0 -9
- package/types/filter-clause/FilterClauseEditor.d.ts +0 -17
- package/types/filter-clause/FilterClauseTextValueEditor.d.ts +0 -11
- package/types/filter-clause/FilterClauseValueEditor.d.ts +0 -9
- package/types/filter-clause/NumericInput.d.ts +0 -9
- package/types/filter-clause/useFilterClauseEditor.d.ts +0 -32
package/index.css
CHANGED
|
@@ -1,2 +1,248 @@
|
|
|
1
|
-
|
|
1
|
+
/* src/filter-clause/ExpandoCombobox.css */
|
|
2
|
+
.vuuExpandoCombobox {
|
|
3
|
+
--expando-combobox-height: var(--vuuExpandoCombobox-height, var(--salt-size-base));
|
|
4
|
+
--expando-combobox-fontSize: var(--vuuExpandoCombobox-fontSize, 12px);
|
|
5
|
+
--saltInput-outline: none;
|
|
6
|
+
--saltInput-fontSize: var(--expando-combobox-fontSize);
|
|
7
|
+
--saltInput-height: var(--expando-combobox-height);
|
|
8
|
+
--saltInput-minWidth: 4px;
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
height: var(--expando-combobox-height);
|
|
12
|
+
min-width: 4px;
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
.vuuExpandoCombobox .saltInput {
|
|
16
|
+
background-color: transparent;
|
|
17
|
+
position: absolute;
|
|
18
|
+
}
|
|
19
|
+
.vuuExpandoCombobox .vuuDropdown {
|
|
20
|
+
height: 100%;
|
|
21
|
+
}
|
|
22
|
+
.vuuExpandoCombobox-Input.saltInput {
|
|
23
|
+
border: none;
|
|
24
|
+
left: 0px;
|
|
25
|
+
margin: 0;
|
|
26
|
+
min-height: 100%;
|
|
27
|
+
padding: 0;
|
|
28
|
+
right: 0px;
|
|
29
|
+
width: auto;
|
|
30
|
+
}
|
|
31
|
+
.vuuExpandoCombobox .saltInput-input {
|
|
32
|
+
border: none;
|
|
33
|
+
box-sizing: content-box;
|
|
34
|
+
display: block;
|
|
35
|
+
flex: 1;
|
|
36
|
+
font: inherit;
|
|
37
|
+
margin: 0;
|
|
38
|
+
min-width: 0;
|
|
39
|
+
outline: none;
|
|
40
|
+
padding: 0;
|
|
41
|
+
}
|
|
42
|
+
.vuuExpandoCombobox:before {
|
|
43
|
+
content: attr(data-text);
|
|
44
|
+
display: block;
|
|
45
|
+
font-size: var(--expando-combobox-fontSize);
|
|
46
|
+
height: 0px;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
white-space: pre-wrap;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* src/filter-clause/FilterClause.css */
|
|
52
|
+
.vuuFilterClause {
|
|
53
|
+
--vuuExpandoInput-top: 0;
|
|
54
|
+
--content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));
|
|
55
|
+
--vuuExpandoInput-height: var(--content-height);
|
|
56
|
+
--vuuExpandoCombobox-height: var(--content-height);
|
|
57
|
+
--saltButton-height: 16px;
|
|
58
|
+
--saltButton-width: 16px;
|
|
59
|
+
--salt-focused-outlineStyle: dotted;
|
|
60
|
+
align-items: center;
|
|
61
|
+
background: var(--salt-container-primary-background);
|
|
62
|
+
border-color: var(--vuu-color-gray-45);
|
|
63
|
+
border-radius: var(--saltButton-borderRadius);
|
|
64
|
+
border-width: 1px;
|
|
65
|
+
border-style: solid;
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: row;
|
|
68
|
+
gap: var(--salt-spacing-50);
|
|
69
|
+
height: var(--salt-size-base);
|
|
70
|
+
min-width: calc(var(--salt-size-base) * 4);
|
|
71
|
+
padding: 0 var(--salt-spacing-100);
|
|
72
|
+
width: fit-content;
|
|
73
|
+
}
|
|
74
|
+
.vuuFilterClause:focus-within {
|
|
75
|
+
border-color: var(--vuu-color-purple-10);
|
|
76
|
+
}
|
|
77
|
+
.vuu-density-high .vuuFilterClause {
|
|
78
|
+
padding: 4px 8px;
|
|
79
|
+
gap: 4px;
|
|
80
|
+
--salt-text-lineHeight: 12px;
|
|
81
|
+
--saltInputLegacy-fontSize: 12px;
|
|
82
|
+
--saltInputLegacy-minWidth: 12px;
|
|
83
|
+
}
|
|
84
|
+
.vuu-density-high .vuuFilterClause .saltInput {
|
|
85
|
+
padding: 0;
|
|
86
|
+
min-height: 16px;
|
|
87
|
+
height: 16px;
|
|
88
|
+
}
|
|
89
|
+
.vuuFilterClause .vuuExpandoCombobox {
|
|
90
|
+
flex-basis: auto;
|
|
91
|
+
flex-shrink: 0;
|
|
92
|
+
flex-grow: 0;
|
|
93
|
+
}
|
|
94
|
+
.vuuFilterClauseOperator-hidden {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
.vuuFilterClause .saltInput-focused,
|
|
98
|
+
.vuuFilterClause .saltTokenizedInput-focused {
|
|
99
|
+
outline: none;
|
|
100
|
+
color: var(--salt-content-primary-foreground);
|
|
101
|
+
}
|
|
102
|
+
.vuu-theme .saltList {
|
|
103
|
+
--list-borderWidth: 1px;
|
|
104
|
+
--list-borderStyle: solid;
|
|
105
|
+
border-radius: 4px;
|
|
106
|
+
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
|
|
107
|
+
}
|
|
108
|
+
.saltListItem[aria-selected=true]:not(.saltListItem-checkbox) {
|
|
109
|
+
--list-item-background: var(--list-item-background-active);
|
|
110
|
+
color: var(--list-item-text-color-active);
|
|
111
|
+
}
|
|
112
|
+
.saltTokenizedInput {
|
|
113
|
+
height: 16px;
|
|
114
|
+
min-height: 16px;
|
|
115
|
+
}
|
|
116
|
+
.saltTokenizedInput .saltInputPill {
|
|
117
|
+
--pill-fontSize: 12px;
|
|
118
|
+
--saltButton-borderStyle: none;
|
|
119
|
+
--pill-background: none;
|
|
120
|
+
height: 16px;
|
|
121
|
+
margin: 0;
|
|
122
|
+
}
|
|
123
|
+
.saltTokenizedInput-pillGroup {
|
|
124
|
+
padding: 0;
|
|
125
|
+
height: 16px;
|
|
126
|
+
}
|
|
127
|
+
.vuuFilterClause-DatePicker {
|
|
128
|
+
border: none;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* src/filter-editor/FilterClauseCombinator.css */
|
|
132
|
+
.vuuFilterClauseCombinator {
|
|
133
|
+
--saltButton-height: calc(var(--salt-spacing-400));
|
|
134
|
+
font-size: 9px;
|
|
135
|
+
padding: 0 4px;
|
|
136
|
+
}
|
|
137
|
+
.vuuFilterClauseCombinator:focus {
|
|
138
|
+
background-color: var(--vuu-color-gray-50);
|
|
139
|
+
color: white;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* src/filter-editor/FilterEditor.css */
|
|
143
|
+
.vuuFilterEditor {
|
|
144
|
+
align-items: center;
|
|
145
|
+
display: flex;
|
|
146
|
+
gap: var(--salt-spacing-200);
|
|
147
|
+
height: var(--vuuFilterEditor-height, calc(var(--salt-size-base) + var(--salt-size-unit)));
|
|
148
|
+
padding: 0 var(--salt-spacing-400);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* src/filter-pill/FilterPill.css */
|
|
152
|
+
.vuuFilterPill {
|
|
153
|
+
--saltButton-textTransform: none;
|
|
154
|
+
max-width: var(--vuuFilterPill-maxWidth, 200px);
|
|
155
|
+
}
|
|
156
|
+
.vuuFilterPill-tooltip ul {
|
|
157
|
+
padding-left: var(--salt-spacing-400);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* src/filter-bar/FilterBar.css */
|
|
161
|
+
.vuuFilterBar {
|
|
162
|
+
--vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z" /></svg>');
|
|
163
|
+
--vuuOverflowContainer-minWidth: 0;
|
|
164
|
+
align-items: center;
|
|
165
|
+
background-color: var(--salt-container-secondary-background);
|
|
166
|
+
border-color: var(--salt-container-primary-borderColor);
|
|
167
|
+
border-style: var(--vuuFilterBar-borderStyle, none none solid none);
|
|
168
|
+
border-width: 1px;
|
|
169
|
+
display: flex;
|
|
170
|
+
flex: var(--vuuFilterBar-flex);
|
|
171
|
+
gap: var(--salt-spacing-100);
|
|
172
|
+
height: calc(var(--salt-size-base) + var(--salt-spacing-100) + 1px);
|
|
173
|
+
padding: 0px var(--salt-spacing-200);
|
|
174
|
+
}
|
|
175
|
+
.vuuFilterBar-filters {
|
|
176
|
+
align-items: center;
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-wrap: nowrap;
|
|
179
|
+
gap: 6px;
|
|
180
|
+
}
|
|
181
|
+
.vuuFilterbar-icon {
|
|
182
|
+
display: inline-block;
|
|
183
|
+
height: 16px;
|
|
184
|
+
width: 16px;
|
|
185
|
+
}
|
|
186
|
+
.vuuFilterBar [data-icon=tune] {
|
|
187
|
+
--vuu-icon-size: 16px;
|
|
188
|
+
--vuu-icon-svg: var(--vuu-svg-tune);
|
|
189
|
+
}
|
|
190
|
+
.vuuFilterBar [data-icon=plus] {
|
|
191
|
+
--vuu-icon-size: 16px;
|
|
192
|
+
}
|
|
193
|
+
.vuuFilterBar .vuuToolbar {
|
|
194
|
+
flex: 0 1 auto;
|
|
195
|
+
}
|
|
196
|
+
.vuuFilterBar-Editor {
|
|
197
|
+
display: flex;
|
|
198
|
+
flex-direction: row;
|
|
199
|
+
align-items: center;
|
|
200
|
+
gap: var(--salt-spacing-100);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* src/filter-input/FilterInput.css */
|
|
204
|
+
.salt-theme {
|
|
205
|
+
--vuuFilterEditor-lineHeight: 28px;
|
|
206
|
+
}
|
|
207
|
+
.salt-density-high {
|
|
208
|
+
--vuuFilterEditor-buttonWidth: 20px;
|
|
209
|
+
--vuuFilterEditor-height: 22px;
|
|
210
|
+
--vuuFilterEditor-lineHeight: 20px;
|
|
211
|
+
}
|
|
212
|
+
.vuuFilterInput {
|
|
213
|
+
--vuuFilterEditor-background: var(--salt-container-primary-background);
|
|
214
|
+
--vuuFilterEditor-color: var(--salt-content-primary-foreground);
|
|
215
|
+
--vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
|
|
216
|
+
--vuuFilterEditor-fontSize: var(--salt-text-fontSize);
|
|
217
|
+
--vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);
|
|
218
|
+
--vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
|
|
219
|
+
--vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
|
|
220
|
+
--vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);
|
|
221
|
+
--vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
|
|
222
|
+
--vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
|
|
223
|
+
--vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);
|
|
224
|
+
--vuuFilterEditor-suggestion-height: 24px;
|
|
225
|
+
--vuuFilterEditor-variableColor: var(--vuu-color_purple-10);
|
|
226
|
+
align-items: center;
|
|
227
|
+
border-color: var(--salt-container-secondary-borderColor);
|
|
228
|
+
border-style: solid none;
|
|
229
|
+
border-width: 1px;
|
|
230
|
+
box-sizing: border-box;
|
|
231
|
+
display: flex;
|
|
232
|
+
height: var(--vuuFilterEditor-height, 30px);
|
|
233
|
+
}
|
|
234
|
+
.vuuFilterInput-Editor {
|
|
235
|
+
flex: 1 1 auto;
|
|
236
|
+
height: 100%;
|
|
237
|
+
}
|
|
238
|
+
.vuuFilterInput-FilterButton,
|
|
239
|
+
.vuuFilterInput-ClearButton {
|
|
240
|
+
--vuu-icon-size: 12px;
|
|
241
|
+
--saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);
|
|
242
|
+
}
|
|
243
|
+
.vuuIllustration {
|
|
244
|
+
--vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);
|
|
245
|
+
background: var(--salt-container-secondary-background);
|
|
246
|
+
color: var(--salt-text-secondary-foreground);
|
|
247
|
+
}
|
|
2
248
|
/*# sourceMappingURL=index.css.map */
|
package/index.css.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/vuu-filters/src/filter-
|
|
4
|
-
"sourcesContent": [".
|
|
5
|
-
"mappings": "AAAA,CAAC,
|
|
3
|
+
"sources": ["../../../packages/vuu-filters/src/filter-clause/ExpandoCombobox.css", "../../../packages/vuu-filters/src/filter-clause/FilterClause.css", "../../../packages/vuu-filters/src/filter-editor/FilterClauseCombinator.css", "../../../packages/vuu-filters/src/filter-editor/FilterEditor.css", "../../../packages/vuu-filters/src/filter-pill/FilterPill.css", "../../../packages/vuu-filters/src/filter-bar/FilterBar.css", "../../../packages/vuu-filters/src/filter-input/FilterInput.css"],
|
|
4
|
+
"sourcesContent": [".vuuExpandoCombobox {\n --expando-combobox-height: var(--vuuExpandoCombobox-height, var(--salt-size-base));\n --expando-combobox-fontSize: var(--vuuExpandoCombobox-fontSize, 12px);\n\n --saltInput-outline: none;\n --saltInput-fontSize: var(--expando-combobox-fontSize);\n --saltInput-height: var(--expando-combobox-height);\n --saltInput-minWidth: 4px;\n\n display: inline-flex;\n flex-direction: column;\n height: var(--expando-combobox-height);\n min-width: 4px;\n padding: 0;\n}\n\n.vuuExpandoCombobox .saltInput {\n background-color: transparent;\n position: absolute;\n}\n\n.vuuExpandoCombobox .vuuDropdown {\n height: 100%;\n}\n\n/** double up the selector just to increase specificity, won't need when we use cascade layers */\n.vuuExpandoCombobox-Input.saltInput {\n border: none;\n left: 0px;\n margin: 0;\n min-height: 100%;\n padding: 0;\n right: 0px;\n width: auto;\n}\n\n.vuuExpandoCombobox .saltInput-input {\n border: none;\n box-sizing: content-box;\n display: block;\n flex: 1;\n font: inherit;\n margin: 0;\n min-width: 0;\n outline: none;\n padding: 0;\n}\n\n.vuuExpandoCombobox:before {\n content: attr(data-text);\n display: block;\n font-size: var(--expando-combobox-fontSize);\n height: 0px;\n overflow: hidden;\n /* visibility: hidden; */\n white-space: pre-wrap;\n /* position: absolute; */\n}\n", ".vuuFilterClause {\n --vuuExpandoInput-top: 0;\n --content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));\n --vuuExpandoInput-height: var(--content-height);\n --vuuExpandoCombobox-height: var(--content-height);\n --saltButton-height: 16px;\n --saltButton-width: 16px;\n --salt-focused-outlineStyle: dotted;\n\n align-items: center;\n background: var(--salt-container-primary-background);\n border-color: var(--vuu-color-gray-45);\n border-radius: var(--saltButton-borderRadius);\n border-width: 1px;\n border-style: solid;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n min-width: calc(var(--salt-size-base) * 4);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n.vuuFilterClause:focus-within {\n border-color: var(--vuu-color-purple-10);\n}\n\n.vuu-density-high .vuuFilterClause {\n padding: 4px 8px;\n gap: 4px;\n --salt-text-lineHeight: 12px;\n --saltInputLegacy-fontSize: 12px;\n --saltInputLegacy-minWidth: 12px;\n}\n\n.vuu-density-high .vuuFilterClause .saltInput {\n padding: 0;\n min-height: 16px;\n height: 16px;\n}\n\n.vuuFilterClause .vuuExpandoCombobox {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n}\n\n.vuuFilterClauseOperator-hidden {\n display: none;\n}\n\n\n.vuuFilterClause .saltInput-focused,\n.vuuFilterClause .saltTokenizedInput-focused {\n outline: none;\n color: var(--salt-content-primary-foreground);\n}\n\n.vuu-theme .saltList {\n --list-borderWidth: 1px;\n --list-borderStyle: solid;\n border-radius: 4px;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.saltTokenizedInput {\n height: 16px;\n min-height: 16px;\n}\n\n.saltTokenizedInput .saltInputPill {\n --pill-fontSize: 12px;\n --saltButton-borderStyle: none;\n --pill-background: none;\n height: 16px;\n margin: 0;\n}\n\n.saltTokenizedInput-pillGroup {\n padding: 0;\n height: 16px;\n}\n\n.vuuFilterClause-DatePicker {\n border: none;\n}\n", ".vuuFilterClauseCombinator {\n --saltButton-height: calc(var(--salt-spacing-400));\n font-size: 9px;\n padding: 0 4px;\n}\n.vuuFilterClauseCombinator:focus {\n background-color: var(--vuu-color-gray-50);\n color: white;\n}", ".vuuFilterEditor {\n align-items: center;\n display: flex;\n gap: var(--salt-spacing-200);\n height: var(--vuuFilterEditor-height, calc(var(--salt-size-base) + var(--salt-size-unit)));\n padding: 0 var(--salt-spacing-400);\n}", ".vuuFilterPill {\n --saltButton-textTransform: none;\n max-width: var(--vuuFilterPill-maxWidth, 200px);\n}\n\n.vuuFilterPill-tooltip {\n ul {\n padding-left: var(--salt-spacing-400);\n } \n}\n\n", ".vuuFilterBar {\n --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z\" /></svg>');\n --vuuOverflowContainer-minWidth: 0;\n\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--vuuFilterBar-borderStyle, none none solid none);\n border-width: 1px;\n display: flex;\n flex: var(--vuuFilterBar-flex);\n gap: var(--salt-spacing-100);\n height: calc(var(--salt-size-base) + var(--salt-spacing-100) + 1px);\n padding: 0px var(--salt-spacing-200);\n}\n\n.vuuFilterBar-filters {\n align-items: center;\n display: flex; \n flex-wrap: nowrap;\n gap: 6px;\n}\n\n.vuuFilterbar-icon {\n display: inline-block;\n height: 16px;\n width: 16px;\n}\n\n.vuuFilterBar [data-icon=\"tune\"] {\n --vuu-icon-size: 16px;\n --vuu-icon-svg: var(--vuu-svg-tune);\n}\n\n.vuuFilterBar [data-icon=\"plus\"] {\n --vuu-icon-size: 16px;\n}\n\n.vuuFilterBar .vuuToolbar {\n flex: 0 1 auto;\n}\n\n.vuuFilterBar-Editor {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--salt-spacing-100);}\n", "\n.salt-theme {\n --vuuFilterEditor-lineHeight: 28px;\n}\n\n.salt-density-high {\n --vuuFilterEditor-buttonWidth: 20px;\n --vuuFilterEditor-height: 22px;\n --vuuFilterEditor-lineHeight: 20px;\n}\n\n.vuuFilterInput {\n --vuuFilterEditor-background: var(--salt-container-primary-background);\n --vuuFilterEditor-color: var(--salt-content-primary-foreground);\n --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);\n --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);\n --vuuFilterEditor-suggestion-height: 24px;\n --vuuFilterEditor-variableColor: var(--vuu-color_purple-10);\n\n align-items: center;\n border-color: var(--salt-container-secondary-borderColor);\n border-style: solid none;\n border-width: 1px;\n box-sizing: border-box;\n display: flex;\n height: var(--vuuFilterEditor-height, 30px);\n}\n\n.vuuFilterInput-Editor {\n flex: 1 1 auto;\n height: 100%;\n}\n\n.vuuFilterInput-FilterButton,\n.vuuFilterInput-ClearButton {\n --vuu-icon-size: 12px;\n --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);\n}\n\n.vuuIllustration {\n --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);\n background: var(--salt-container-secondary-background);\n color: var(--salt-text-secondary-foreground);\n}\n\n\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuu-ui/vuu-filters",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.28-debug",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"devDependencies": {
|
|
8
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
9
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
10
|
-
"@vuu-ui/vuu-filter-types": "0.8.
|
|
8
|
+
"@vuu-ui/vuu-data-types": "0.8.28-debug",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "0.8.28-debug",
|
|
10
|
+
"@vuu-ui/vuu-filter-types": "0.8.28-debug",
|
|
11
11
|
"@types/uuid": "^9.0.2"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@vuu-ui/vuu-codemirror": "0.8.
|
|
15
|
-
"@vuu-ui/vuu-data-react": "0.8.
|
|
16
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "0.8.
|
|
18
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
14
|
+
"@vuu-ui/vuu-codemirror": "0.8.28-debug",
|
|
15
|
+
"@vuu-ui/vuu-data-react": "0.8.28-debug",
|
|
16
|
+
"@vuu-ui/vuu-popups": "0.8.28-debug",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "0.8.28-debug",
|
|
18
|
+
"@vuu-ui/vuu-utils": "0.8.28-debug",
|
|
19
19
|
"@salt-ds/core": "1.17.0",
|
|
20
20
|
"uuid": "9.0.0"
|
|
21
21
|
},
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Filter, FilterClause, FilterClauseOp, FilterCombinatorOp } from "@vuu-ui/vuu-filter-types";
|
|
2
|
+
import { EventEmitter } from "@vuu-ui/vuu-utils";
|
|
3
|
+
export type FilterStatusChangeHandler = (isValid: boolean) => void;
|
|
4
|
+
export type FilterChangeHandler = (filter: Partial<Filter>, isValid: boolean) => void;
|
|
5
|
+
export type FilterClauseChangeHandler = (filter: Partial<FilterClause>, isValid: boolean) => void;
|
|
6
|
+
export type FilterClauseModelEvents = {
|
|
7
|
+
filterClause: FilterClauseChangeHandler;
|
|
8
|
+
isValid: FilterStatusChangeHandler;
|
|
9
|
+
};
|
|
10
|
+
export type FilterModelEvents = {
|
|
11
|
+
filter: FilterChangeHandler;
|
|
12
|
+
isValid: FilterStatusChangeHandler;
|
|
13
|
+
};
|
|
14
|
+
export declare class FilterClauseModel extends EventEmitter<FilterClauseModelEvents> {
|
|
15
|
+
#private;
|
|
16
|
+
constructor(filterClause: Partial<FilterClause>);
|
|
17
|
+
get isValid(): boolean;
|
|
18
|
+
private setIsValid;
|
|
19
|
+
get column(): undefined | string;
|
|
20
|
+
set column(column: undefined | string);
|
|
21
|
+
get op(): import("@vuu-ui/vuu-filter-types").SingleValueFilterClauseOp | "in" | undefined;
|
|
22
|
+
setOp(op: undefined | FilterClauseOp): void;
|
|
23
|
+
setValue(value: undefined | string | string[] | number | number[] | boolean | boolean[], isFinal?: boolean): void;
|
|
24
|
+
asFilter(throwIfInvalid?: boolean): FilterClause;
|
|
25
|
+
}
|
|
26
|
+
export declare class FilterModel extends EventEmitter<FilterModelEvents> {
|
|
27
|
+
#private;
|
|
28
|
+
constructor(filter?: Filter);
|
|
29
|
+
get isValid(): boolean;
|
|
30
|
+
private setIsValid;
|
|
31
|
+
addNewFilterClause(operator?: FilterCombinatorOp): void;
|
|
32
|
+
addFilterClause(filterClause?: Partial<FilterClause>): void;
|
|
33
|
+
removeFilterClause(filterClause: FilterClauseModel): void;
|
|
34
|
+
checkValidStatus(): void;
|
|
35
|
+
onFilterClauseChange: FilterChangeHandler;
|
|
36
|
+
onFilterClauseStatusChange: (isValid: boolean) => void;
|
|
37
|
+
getFilterClause(index: number): FilterClauseModel;
|
|
38
|
+
get op(): FilterCombinatorOp | undefined;
|
|
39
|
+
setOp(op: FilterCombinatorOp): void;
|
|
40
|
+
get filterClauses(): FilterClauseModel[];
|
|
41
|
+
get isMultiClauseFilter(): boolean;
|
|
42
|
+
asFilter(throwIfInvalid?: boolean): Filter;
|
|
43
|
+
}
|
|
@@ -2,10 +2,10 @@ import { DataSourceFilter, TableSchema } from "@vuu-ui/vuu-data-types";
|
|
|
2
2
|
import { Filter, FilterState } from "@vuu-ui/vuu-filter-types";
|
|
3
3
|
import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
4
4
|
import { HTMLAttributes } from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { FilterClauseProps } from "../filter-clause";
|
|
6
6
|
import "./FilterBar.css";
|
|
7
7
|
export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
8
|
-
FilterClauseEditorProps?: Partial<
|
|
8
|
+
FilterClauseEditorProps?: Partial<FilterClauseProps>;
|
|
9
9
|
/**
|
|
10
10
|
* This is used to apply tailored filters based on column types and other attributes.
|
|
11
11
|
* NOTE: Always make sure that these are passed with proper re-render optimization, otherwise,
|
|
@@ -18,7 +18,6 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
18
18
|
onFilterDeleted?: (filter: Filter) => void;
|
|
19
19
|
onFilterRenamed?: (filter: Filter, name: string) => void;
|
|
20
20
|
onFilterStateChanged?: (state: FilterState) => void;
|
|
21
|
-
showMenu?: boolean;
|
|
22
21
|
tableSchema?: TableSchema;
|
|
23
22
|
}
|
|
24
|
-
export declare const FilterBar: ({ FilterClauseEditorProps, className: classNameProp, columnDescriptors, defaultFilterState, filterState, onApplyFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged,
|
|
23
|
+
export declare const FilterBar: ({ FilterClauseEditorProps, className: classNameProp, columnDescriptors, defaultFilterState, filterState, onApplyFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, tableSchema, ...htmlAttributes }: FilterBarProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const navigateToNextItem: (el: HTMLElement | EventTarget, direction?: "bwd" | "fwd") => void;
|
|
@@ -1,35 +1,30 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ColumnDescriptorsByName, Filter, FilterClause, FilterWithPartialClause } from "@vuu-ui/vuu-filter-types";
|
|
1
|
+
import { ColumnDescriptorsByName, Filter } from "@vuu-ui/vuu-filter-types";
|
|
3
2
|
import { PromptProps } from "@vuu-ui/vuu-popups";
|
|
4
|
-
import {
|
|
5
|
-
import { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, RefObject } from "react";
|
|
6
|
-
import { FilterClauseCancelHandler } from "../filter-clause/useFilterClauseEditor";
|
|
3
|
+
import { KeyboardEventHandler, RefObject } from "react";
|
|
7
4
|
import { FilterPillProps } from "../filter-pill";
|
|
8
5
|
import { FilterBarProps } from "./FilterBar";
|
|
9
|
-
|
|
6
|
+
import { FilterEditCancelHandler, FilterEditSaveHandler } from "../filter-editor";
|
|
7
|
+
type InteractedFilterState = {
|
|
8
|
+
filter?: Filter;
|
|
9
|
+
index: number;
|
|
10
|
+
state: "create" | "edit" | "rename";
|
|
11
|
+
};
|
|
12
|
+
export interface FilterBarHookProps extends Pick<FilterBarProps, "columnDescriptors" | "defaultFilterState" | "filterState" | "onApplyFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged"> {
|
|
10
13
|
containerRef: RefObject<HTMLDivElement>;
|
|
11
14
|
}
|
|
12
|
-
export declare const useFilterBar: ({ columnDescriptors, containerRef, defaultFilterState, filterState, onApplyFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged,
|
|
15
|
+
export declare const useFilterBar: ({ columnDescriptors, containerRef, defaultFilterState, filterState, onApplyFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, }: FilterBarHookProps) => {
|
|
13
16
|
activeFilterIndex: number[];
|
|
14
17
|
addButtonProps: {
|
|
15
18
|
ref: RefObject<HTMLButtonElement>;
|
|
19
|
+
onClick: () => void;
|
|
16
20
|
onKeyDown: KeyboardEventHandler<Element>;
|
|
17
21
|
};
|
|
18
22
|
columnsByName: ColumnDescriptorsByName;
|
|
19
|
-
editFilter: Partial<Filter> | FilterWithPartialClause | undefined;
|
|
20
23
|
filters: Filter[];
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
onClickRemoveFilter: () => void;
|
|
26
|
-
onChangeFilterClause: (idx: number) => (filterClause: Partial<FilterClause>) => void;
|
|
27
|
-
onFocusFilterClause: () => void;
|
|
28
|
-
onKeyDownFilterbar: (evt: KeyboardEvent) => void;
|
|
29
|
-
onKeyDownMenu: KeyboardEventHandler<Element>;
|
|
30
|
-
onMenuAction: MenuActionHandler;
|
|
31
|
-
onNavigateOutOfBounds: NavigationOutOfBoundsHandler;
|
|
32
|
-
pillProps: Partial<FilterPillProps>;
|
|
24
|
+
interactedFilterState: InteractedFilterState | undefined;
|
|
25
|
+
onCancelEdit: FilterEditCancelHandler;
|
|
26
|
+
onSave: FilterEditSaveHandler;
|
|
27
|
+
pillProps: Omit<FilterPillProps, "filter" | "selected">;
|
|
33
28
|
promptProps: PromptProps | null;
|
|
34
|
-
showMenu: boolean | undefined;
|
|
35
29
|
};
|
|
30
|
+
export {};
|
|
@@ -9,7 +9,7 @@ export interface FiltersHookProps {
|
|
|
9
9
|
export declare const useFilterState: ({ defaultFilterState, onFilterDeleted, onFilterRenamed, onFilterStateChanged, filterState: filterStateProp, }: FiltersHookProps) => {
|
|
10
10
|
activeFilterIndex: number[];
|
|
11
11
|
filters: Filter[];
|
|
12
|
-
|
|
12
|
+
onToggleFilterActive: (filterIndex: number, preserveRemainingFilters?: any) => void;
|
|
13
13
|
onAddFilter: (filter: Filter) => number;
|
|
14
14
|
onChangeFilter: (oldFilter: Filter, newFilter: Filter) => number;
|
|
15
15
|
onDeleteFilter: (filter: Filter) => number;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { SuggestionFetcher, TableSchema } from "@vuu-ui/vuu-data-types";
|
|
2
|
+
import { ColumnDescriptorsByName } from "@vuu-ui/vuu-filter-types";
|
|
3
|
+
import { CloseReason } from "@vuu-ui/vuu-ui-controls";
|
|
4
|
+
import { HTMLAttributes } from "react";
|
|
5
|
+
import { FilterClauseModel } from "../FilterModel";
|
|
6
|
+
import "./FilterClause.css";
|
|
7
|
+
export type FilterClauseCancelType = "Backspace" | "Escape";
|
|
8
|
+
export type FilterClauseCancelHandler = (filterClause: FilterClauseModel, reason: FilterClauseCancelType) => void;
|
|
9
|
+
export interface FilterClauseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
10
|
+
columnsByName: ColumnDescriptorsByName;
|
|
11
|
+
filterClauseModel: FilterClauseModel;
|
|
12
|
+
onCancel?: FilterClauseCancelHandler;
|
|
13
|
+
onDropdownClose?: (closeReason: CloseReason) => void;
|
|
14
|
+
onDropdownOpen?: () => void;
|
|
15
|
+
suggestionProvider?: () => SuggestionFetcher;
|
|
16
|
+
tableSchema: TableSchema;
|
|
17
|
+
}
|
|
18
|
+
export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownClose, onDropdownOpen, filterClauseModel, suggestionProvider, tableSchema, ...htmlAttributes }: FilterClauseProps) => JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { KeyboardEvent } from "react";
|
|
2
|
+
type FilterClauseFieldName = "column" | "operator" | "value";
|
|
3
|
+
export declare const getFocusedFieldDetails: () => [number, string] | [];
|
|
4
|
+
export declare const focusField: (fieldOrClause: HTMLElement | null) => void;
|
|
5
|
+
export declare const elementIsFilterCombinator: (element: Element | null) => element is HTMLElement;
|
|
6
|
+
export declare const elementIsFilterClause: (element: Element | null) => element is HTMLElement;
|
|
7
|
+
export declare const focusFilterClauseField: (filterEditor: HTMLElement, filterClauseIndex: number, fieldName?: FilterClauseFieldName) => void;
|
|
8
|
+
export declare const focusLastClauseValue: (filterEditor: HTMLElement) => void;
|
|
9
|
+
export declare const focusNextFocusableElement: (direction?: "fwd" | "bwd") => void;
|
|
10
|
+
export declare const focusNextElement: () => void;
|
|
11
|
+
export declare const clauseIsNotFirst: (el: HTMLElement) => boolean | undefined;
|
|
12
|
+
export declare const tabToPreviousFilterCombinator: (currentElement: HTMLElement) => void;
|
|
13
|
+
export declare const navigateToNextFilterClause: (currentElement: HTMLElement, direction?: "bwd" | "fwd") => void;
|
|
14
|
+
export declare const navigateToNextItemIfAtBoundary: (evt: KeyboardEvent<HTMLInputElement>) => void;
|
|
15
|
+
export declare const focusFirstClauseIfAllClausesValid: (filterEditor: HTMLElement) => void;
|
|
16
|
+
export {};
|
|
@@ -2,11 +2,12 @@ import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
|
2
2
|
import { CloseReason } from "@vuu-ui/vuu-ui-controls";
|
|
3
3
|
import { InputProps } from "@salt-ds/core";
|
|
4
4
|
import { TableSchemaTable } from "@vuu-ui/vuu-data-types";
|
|
5
|
-
|
|
5
|
+
import { FilterClauseValueChangeHandler } from "./useFilterClause";
|
|
6
|
+
export interface FilterClauseValueEditor {
|
|
6
7
|
InputProps?: InputProps;
|
|
7
8
|
column: ColumnDescriptor;
|
|
8
9
|
onDeselect?: () => void;
|
|
9
|
-
|
|
10
|
+
onChangeValue: FilterClauseValueChangeHandler;
|
|
10
11
|
onOpenChange?: (open: boolean, closeReason: CloseReason) => void;
|
|
11
12
|
table?: TableSchemaTable;
|
|
12
13
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export * from "./ExpandoCombobox";
|
|
2
|
-
export * from "./
|
|
3
|
-
export * from "./
|
|
2
|
+
export * from "./FilterClause";
|
|
3
|
+
export * from "./value-editors/FilterClauseValueEditorText";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { FilterClause } from "@vuu-ui/vuu-filter-types";
|
|
2
|
+
import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
3
|
+
import { SingleSelectionHandler } from "@vuu-ui/vuu-ui-controls";
|
|
4
|
+
import { FocusEventHandler, KeyboardEvent } from "react";
|
|
5
|
+
import { FilterClauseProps } from "./FilterClause";
|
|
6
|
+
export type FilterClauseEditorHookProps = Pick<FilterClauseProps, "columnsByName" | "filterClauseModel" | "onCancel">;
|
|
7
|
+
export type FilterClauseValueChangeHandler = (value: string | string[] | number | number[], isFinal?: boolean) => void;
|
|
8
|
+
export declare const useFilterClause: ({ filterClauseModel, onCancel, columnsByName, }: FilterClauseEditorHookProps) => {
|
|
9
|
+
InputProps: {
|
|
10
|
+
inputProps: {
|
|
11
|
+
onKeyDownCapture: (evt: KeyboardEvent<HTMLInputElement>) => void;
|
|
12
|
+
tabIndex: number;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
columnRef: import("react").RefObject<HTMLDivElement>;
|
|
16
|
+
filterClause: Partial<FilterClause>;
|
|
17
|
+
onChangeValue: FilterClauseValueChangeHandler;
|
|
18
|
+
onDeselectValue: () => void;
|
|
19
|
+
onColumnSelect: SingleSelectionHandler<ColumnDescriptor>;
|
|
20
|
+
onFocus: FocusEventHandler<Element>;
|
|
21
|
+
onOperatorSelect: SingleSelectionHandler<string>;
|
|
22
|
+
operatorRef: import("react").RefObject<HTMLDivElement>;
|
|
23
|
+
selectedColumn: ColumnDescriptor;
|
|
24
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TableSchema } from "@vuu-ui/vuu-data-types";
|
|
3
|
+
import { useFilterClause } from "../useFilterClause";
|
|
4
|
+
import { SingleValueFilterClauseOp } from "@vuu-ui/vuu-filter-types";
|
|
5
|
+
import { FilterClauseProps } from "../FilterClause";
|
|
6
|
+
type FilterClauseValueEditorProps = Pick<ReturnType<typeof useFilterClause>, "selectedColumn" | "InputProps" | "onChangeValue" | "onDeselectValue"> & Pick<FilterClauseProps, "suggestionProvider"> & {
|
|
7
|
+
table?: TableSchema["table"];
|
|
8
|
+
} & {
|
|
9
|
+
operator?: SingleValueFilterClauseOp | "in";
|
|
10
|
+
value?: string | string[] | number | number[] | boolean | boolean[];
|
|
11
|
+
};
|
|
12
|
+
export declare const FilterClauseValueEditor: React.FC<FilterClauseValueEditorProps>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { NumericFilterClauseOp } from "@vuu-ui/vuu-filter-types";
|
|
3
|
+
import { FilterClauseValueEditor } from "../filterClauseTypes";
|
|
4
|
+
interface FilterClauseValueEditorDateProps extends Pick<FilterClauseValueEditor, "onChangeValue" | "InputProps"> {
|
|
5
|
+
className?: string;
|
|
6
|
+
value: number | undefined;
|
|
7
|
+
operator: NumericFilterClauseOp;
|
|
8
|
+
}
|
|
9
|
+
export declare const FilterClauseValueEditorDate: (props: FilterClauseValueEditorDateProps) => JSX.Element;
|
|
10
|
+
export {};
|