@fuf-stack/megapixels 0.7.3 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Filter/index.cjs +6 -12
- package/dist/Filter/index.d.cts +2 -328
- package/dist/Filter/index.d.ts +2 -328
- package/dist/Filter/index.js +3 -13
- package/dist/Filter-Bc0LWCnZ.cjs +811 -0
- package/dist/Filter-Bc0LWCnZ.cjs.map +1 -0
- package/dist/Filter-nSuQco2t.js +751 -0
- package/dist/Filter-nSuQco2t.js.map +1 -0
- package/dist/index-BYqvJZ2C.d.ts +382 -0
- package/dist/index-BYqvJZ2C.d.ts.map +1 -0
- package/dist/index-_lmq8laN.d.cts +382 -0
- package/dist/index-_lmq8laN.d.cts.map +1 -0
- package/dist/index.cjs +7 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -5
- package/dist/index.d.ts +2 -5
- package/dist/index.js +7 -10
- package/dist/index.js.map +1 -1
- package/package.json +20 -21
- package/dist/Filter/index.cjs.map +0 -1
- package/dist/Filter/index.js.map +0 -1
- package/dist/chunk-KHENACVH.cjs +0 -723
- package/dist/chunk-KHENACVH.cjs.map +0 -1
- package/dist/chunk-YX3ABWOU.js +0 -723
- package/dist/chunk-YX3ABWOU.js.map +0 -1
package/dist/chunk-KHENACVH.cjs
DELETED
|
@@ -1,723 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
|
|
21
|
-
// src/Filter/Filter.tsx
|
|
22
|
-
var _debug = require('debug'); var _debug2 = _interopRequireDefault(_debug);
|
|
23
|
-
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
24
|
-
var _Form = require('@fuf-stack/uniform/Form'); var _Form2 = _interopRequireDefault(_Form);
|
|
25
|
-
|
|
26
|
-
// src/Filter/hooks/useFilterValidation.ts
|
|
27
|
-
var _react = require('react');
|
|
28
|
-
var _veto = require('@fuf-stack/veto');
|
|
29
|
-
var useFilterValidation = (filters2, withSearch) => {
|
|
30
|
-
return _react.useMemo.call(void 0, () => {
|
|
31
|
-
let filterSchema = {};
|
|
32
|
-
filters2.forEach((f) => {
|
|
33
|
-
filterSchema = __spreadProps(__spreadValues({}, filterSchema), {
|
|
34
|
-
[f.name]: f.validation(f.config)
|
|
35
|
-
});
|
|
36
|
-
});
|
|
37
|
-
const validationSchema = __spreadValues({
|
|
38
|
-
// filter validation
|
|
39
|
-
filter: _veto.stringToJSON.call(void 0, ).pipe(_veto.object.call(void 0, filterSchema)).or(_veto.object.call(void 0, filterSchema)).optional().nullable().transform((val) => {
|
|
40
|
-
return val != null ? val : void 0;
|
|
41
|
-
})
|
|
42
|
-
}, withSearch ? { search: _veto.string.call(void 0, { min: 0 }).nullable().optional() } : {});
|
|
43
|
-
return _veto.veto.call(void 0, validationSchema);
|
|
44
|
-
}, [filters2, withSearch]);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
// src/Filter/Subcomponents/ActiveFilters.tsx
|
|
48
|
-
var _Label = require('@fuf-stack/pixels/Label'); var _Label2 = _interopRequireDefault(_Label);
|
|
49
|
-
|
|
50
|
-
// src/Filter/Subcomponents/FiltersContext.tsx
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
var _useFormContext = require('@fuf-stack/uniform/hooks/useFormContext');
|
|
61
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
62
|
-
var FiltersContext = _react.createContext.call(void 0,
|
|
63
|
-
void 0
|
|
64
|
-
);
|
|
65
|
-
var FiltersContextProvider = ({
|
|
66
|
-
children,
|
|
67
|
-
config: config3
|
|
68
|
-
}) => {
|
|
69
|
-
const {
|
|
70
|
-
formState,
|
|
71
|
-
getFieldState,
|
|
72
|
-
setValue,
|
|
73
|
-
triggerSubmit,
|
|
74
|
-
unregister,
|
|
75
|
-
watch
|
|
76
|
-
} = _useFormContext.useFormContext.call(void 0, );
|
|
77
|
-
const [currentModalFilter, setCurrentModalFilter] = _react.useState.call(void 0, null);
|
|
78
|
-
const filterValue = watch("filter", {});
|
|
79
|
-
const getFilterFormFieldName = _react.useCallback.call(void 0, (name) => {
|
|
80
|
-
return `filter.${name}`;
|
|
81
|
-
}, []);
|
|
82
|
-
const getFilterValueByName = _react.useCallback.call(void 0,
|
|
83
|
-
(name) => {
|
|
84
|
-
return filterValue[name];
|
|
85
|
-
},
|
|
86
|
-
[filterValue]
|
|
87
|
-
);
|
|
88
|
-
const showFilterModal = _react.useCallback.call(void 0,
|
|
89
|
-
(name) => {
|
|
90
|
-
const prev = getFilterValueByName(name);
|
|
91
|
-
setCurrentModalFilter({
|
|
92
|
-
name,
|
|
93
|
-
hadValue: typeof prev !== "undefined",
|
|
94
|
-
previousValue: prev
|
|
95
|
-
});
|
|
96
|
-
},
|
|
97
|
-
[getFilterValueByName]
|
|
98
|
-
);
|
|
99
|
-
const closeFilterModal = _react.useCallback.call(void 0, () => {
|
|
100
|
-
if (currentModalFilter == null ? void 0 : currentModalFilter.name) {
|
|
101
|
-
const fieldName = getFilterFormFieldName(currentModalFilter.name);
|
|
102
|
-
if (currentModalFilter.hadValue) {
|
|
103
|
-
setValue(fieldName, currentModalFilter.previousValue);
|
|
104
|
-
} else {
|
|
105
|
-
unregister(fieldName);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
setCurrentModalFilter(null);
|
|
109
|
-
}, [getFilterFormFieldName, currentModalFilter, setValue, unregister]);
|
|
110
|
-
const lastSubmitCountRef = _react.useRef.call(void 0, 0);
|
|
111
|
-
_react.useEffect.call(void 0, () => {
|
|
112
|
-
if (formState.submitCount !== lastSubmitCountRef.current && formState.isSubmitSuccessful) {
|
|
113
|
-
setCurrentModalFilter(null);
|
|
114
|
-
}
|
|
115
|
-
lastSubmitCountRef.current = formState.submitCount;
|
|
116
|
-
}, [
|
|
117
|
-
formState.submitCount,
|
|
118
|
-
formState.isSubmitSuccessful,
|
|
119
|
-
setCurrentModalFilter
|
|
120
|
-
]);
|
|
121
|
-
const activeFilters = _react.useMemo.call(void 0, () => {
|
|
122
|
-
return config3.filter((f) => {
|
|
123
|
-
return Object.hasOwn(filterValue != null ? filterValue : {}, f.name);
|
|
124
|
-
}).map((f) => {
|
|
125
|
-
return f.name;
|
|
126
|
-
});
|
|
127
|
-
}, [config3, filterValue]);
|
|
128
|
-
const unusedFilters = _react.useMemo.call(void 0, () => {
|
|
129
|
-
return config3.filter((f) => {
|
|
130
|
-
return !Object.hasOwn(filterValue != null ? filterValue : {}, f.name);
|
|
131
|
-
}).map((f) => {
|
|
132
|
-
return f.name;
|
|
133
|
-
});
|
|
134
|
-
}, [config3, filterValue]);
|
|
135
|
-
const getFilterInstanceByName = _react.useCallback.call(void 0,
|
|
136
|
-
(name) => {
|
|
137
|
-
return config3.find((f) => {
|
|
138
|
-
return f.name === name;
|
|
139
|
-
});
|
|
140
|
-
},
|
|
141
|
-
[config3]
|
|
142
|
-
);
|
|
143
|
-
const addFilter = _react.useCallback.call(void 0,
|
|
144
|
-
(name) => {
|
|
145
|
-
const inst = getFilterInstanceByName(name);
|
|
146
|
-
showFilterModal(name);
|
|
147
|
-
setValue(getFilterFormFieldName(name), inst.defaultValue);
|
|
148
|
-
},
|
|
149
|
-
[
|
|
150
|
-
getFilterFormFieldName,
|
|
151
|
-
getFilterInstanceByName,
|
|
152
|
-
setValue,
|
|
153
|
-
showFilterModal
|
|
154
|
-
]
|
|
155
|
-
);
|
|
156
|
-
const removeFilter = _react.useCallback.call(void 0,
|
|
157
|
-
(name) => {
|
|
158
|
-
unregister(getFilterFormFieldName(name));
|
|
159
|
-
if ((currentModalFilter == null ? void 0 : currentModalFilter.name) === name) {
|
|
160
|
-
setCurrentModalFilter(null);
|
|
161
|
-
}
|
|
162
|
-
triggerSubmit();
|
|
163
|
-
},
|
|
164
|
-
[
|
|
165
|
-
getFilterFormFieldName,
|
|
166
|
-
currentModalFilter,
|
|
167
|
-
setCurrentModalFilter,
|
|
168
|
-
triggerSubmit,
|
|
169
|
-
unregister
|
|
170
|
-
]
|
|
171
|
-
);
|
|
172
|
-
const hasError = _react.useCallback.call(void 0,
|
|
173
|
-
(name) => {
|
|
174
|
-
return getFieldState(getFilterFormFieldName(name)).invalid;
|
|
175
|
-
},
|
|
176
|
-
[getFieldState, getFilterFormFieldName]
|
|
177
|
-
);
|
|
178
|
-
const contextValue = _react.useMemo.call(void 0, () => {
|
|
179
|
-
return {
|
|
180
|
-
activeFilters,
|
|
181
|
-
addFilter,
|
|
182
|
-
closeFilterModal,
|
|
183
|
-
getFilterFormFieldName,
|
|
184
|
-
getFilterValueByName,
|
|
185
|
-
getFilterInstanceByName,
|
|
186
|
-
hasError,
|
|
187
|
-
modalFilterName: currentModalFilter == null ? void 0 : currentModalFilter.name,
|
|
188
|
-
removeFilter,
|
|
189
|
-
showFilterModal,
|
|
190
|
-
unusedFilters
|
|
191
|
-
};
|
|
192
|
-
}, [
|
|
193
|
-
activeFilters,
|
|
194
|
-
addFilter,
|
|
195
|
-
closeFilterModal,
|
|
196
|
-
getFilterFormFieldName,
|
|
197
|
-
getFilterValueByName,
|
|
198
|
-
getFilterInstanceByName,
|
|
199
|
-
hasError,
|
|
200
|
-
currentModalFilter,
|
|
201
|
-
removeFilter,
|
|
202
|
-
showFilterModal,
|
|
203
|
-
unusedFilters
|
|
204
|
-
]);
|
|
205
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FiltersContext.Provider, { value: contextValue, children });
|
|
206
|
-
};
|
|
207
|
-
var useFilters = () => {
|
|
208
|
-
const ctx = _react.useContext.call(void 0, FiltersContext);
|
|
209
|
-
if (!ctx) {
|
|
210
|
-
throw new Error("useFilters must be used within FiltersContextProvider");
|
|
211
|
-
}
|
|
212
|
-
return ctx;
|
|
213
|
-
};
|
|
214
|
-
|
|
215
|
-
// src/Filter/Subcomponents/ActiveFilters.tsx
|
|
216
|
-
|
|
217
|
-
var ActiveFilters = ({ className = void 0 }) => {
|
|
218
|
-
const {
|
|
219
|
-
activeFilters,
|
|
220
|
-
getFilterValueByName,
|
|
221
|
-
getFilterInstanceByName,
|
|
222
|
-
hasError,
|
|
223
|
-
removeFilter,
|
|
224
|
-
showFilterModal
|
|
225
|
-
} = useFilters();
|
|
226
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: activeFilters.map((name) => {
|
|
227
|
-
const instance = getFilterInstanceByName(name);
|
|
228
|
-
const value = getFilterValueByName(name);
|
|
229
|
-
const DisplayComponent = instance.components.Display;
|
|
230
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
231
|
-
"button",
|
|
232
|
-
{
|
|
233
|
-
"aria-label": `Open ${name} filter`,
|
|
234
|
-
type: "button",
|
|
235
|
-
onClick: () => {
|
|
236
|
-
showFilterModal(name);
|
|
237
|
-
},
|
|
238
|
-
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
239
|
-
_Label2.default,
|
|
240
|
-
{
|
|
241
|
-
className,
|
|
242
|
-
color: hasError(name) ? "danger" : "primary",
|
|
243
|
-
variant: "flat",
|
|
244
|
-
onClose: () => {
|
|
245
|
-
removeFilter(name);
|
|
246
|
-
},
|
|
247
|
-
children: [
|
|
248
|
-
instance.icon,
|
|
249
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayComponent, { config: instance.config, value })
|
|
250
|
-
]
|
|
251
|
-
}
|
|
252
|
-
)
|
|
253
|
-
},
|
|
254
|
-
name
|
|
255
|
-
);
|
|
256
|
-
}) });
|
|
257
|
-
};
|
|
258
|
-
var ActiveFilters_default = ActiveFilters;
|
|
259
|
-
|
|
260
|
-
// src/Filter/Subcomponents/AddFilterMenu.tsx
|
|
261
|
-
var _fa6 = require('react-icons/fa6');
|
|
262
|
-
var _Menu = require('@fuf-stack/pixels/Menu'); var _Menu2 = _interopRequireDefault(_Menu);
|
|
263
|
-
|
|
264
|
-
var AddFilterMenu = ({ classNames = {} }) => {
|
|
265
|
-
const { unusedFilters, addFilter, getFilterInstanceByName } = useFilters();
|
|
266
|
-
const menuItems = unusedFilters.map((name) => {
|
|
267
|
-
var _a;
|
|
268
|
-
const instance = getFilterInstanceByName(name);
|
|
269
|
-
const config3 = instance.config;
|
|
270
|
-
const label = (_a = config3 == null ? void 0 : config3.text) != null ? _a : name;
|
|
271
|
-
return {
|
|
272
|
-
key: name,
|
|
273
|
-
icon: instance.icon,
|
|
274
|
-
label,
|
|
275
|
-
onClick: () => {
|
|
276
|
-
addFilter(name);
|
|
277
|
-
}
|
|
278
|
-
};
|
|
279
|
-
});
|
|
280
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
281
|
-
_Menu2.default,
|
|
282
|
-
{
|
|
283
|
-
isDisabled: !menuItems.length,
|
|
284
|
-
items: menuItems,
|
|
285
|
-
placement: "bottom-start",
|
|
286
|
-
className: {
|
|
287
|
-
item: classNames.addFilterMenuItem,
|
|
288
|
-
trigger: classNames.addFilterMenuButton
|
|
289
|
-
},
|
|
290
|
-
triggerButtonProps: {
|
|
291
|
-
"aria-label": "Add Filter",
|
|
292
|
-
"data-testid": "add_filter_button",
|
|
293
|
-
disableRipple: true,
|
|
294
|
-
size: "sm",
|
|
295
|
-
variant: "bordered"
|
|
296
|
-
},
|
|
297
|
-
children: [
|
|
298
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaSliders, {}),
|
|
299
|
-
"Filter"
|
|
300
|
-
]
|
|
301
|
-
}
|
|
302
|
-
);
|
|
303
|
-
};
|
|
304
|
-
var AddFilterMenu_default = AddFilterMenu;
|
|
305
|
-
|
|
306
|
-
// src/Filter/Subcomponents/FilterModal.tsx
|
|
307
|
-
|
|
308
|
-
var _pi = require('react-icons/pi');
|
|
309
|
-
var _Button = require('@fuf-stack/pixels/Button'); var _Button2 = _interopRequireDefault(_Button);
|
|
310
|
-
var _Modal = require('@fuf-stack/pixels/Modal'); var _Modal2 = _interopRequireDefault(_Modal);
|
|
311
|
-
var _SubmitButton = require('@fuf-stack/uniform/SubmitButton'); var _SubmitButton2 = _interopRequireDefault(_SubmitButton);
|
|
312
|
-
|
|
313
|
-
var FilterModal = ({ classNames = {} }) => {
|
|
314
|
-
var _a, _b;
|
|
315
|
-
const {
|
|
316
|
-
closeFilterModal,
|
|
317
|
-
getFilterFormFieldName,
|
|
318
|
-
getFilterInstanceByName,
|
|
319
|
-
modalFilterName,
|
|
320
|
-
removeFilter
|
|
321
|
-
} = useFilters();
|
|
322
|
-
if (!modalFilterName) {
|
|
323
|
-
return null;
|
|
324
|
-
}
|
|
325
|
-
const instance = getFilterInstanceByName(modalFilterName);
|
|
326
|
-
const config3 = instance.config;
|
|
327
|
-
const FormComponent = instance.components.Form;
|
|
328
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
329
|
-
_Modal2.default,
|
|
330
|
-
{
|
|
331
|
-
isOpen: true,
|
|
332
|
-
onClose: closeFilterModal,
|
|
333
|
-
className: {
|
|
334
|
-
body: classNames.body,
|
|
335
|
-
footer: classNames.footer,
|
|
336
|
-
header: classNames.header
|
|
337
|
-
},
|
|
338
|
-
footer: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
339
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
340
|
-
_Button2.default,
|
|
341
|
-
{
|
|
342
|
-
ariaLabel: "Remove filter",
|
|
343
|
-
color: "danger",
|
|
344
|
-
testId: "remove_filter_button",
|
|
345
|
-
variant: "flat",
|
|
346
|
-
onClick: () => {
|
|
347
|
-
removeFilter(modalFilterName);
|
|
348
|
-
},
|
|
349
|
-
children: "Remove"
|
|
350
|
-
}
|
|
351
|
-
),
|
|
352
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SubmitButton2.default, { ariaLabel: "Apply filter", testId: "apply_filter_button", children: "Apply Filter" })
|
|
353
|
-
] }),
|
|
354
|
-
header: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
355
|
-
(_a = instance.icon) != null ? _a : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pi.PiSlidersHorizontalBold, {}),
|
|
356
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: `${(_b = config3 == null ? void 0 : config3.text) != null ? _b : modalFilterName} Filter` })
|
|
357
|
-
] }),
|
|
358
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Suspense, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
359
|
-
FormComponent,
|
|
360
|
-
{
|
|
361
|
-
config: config3,
|
|
362
|
-
fieldName: getFilterFormFieldName(modalFilterName)
|
|
363
|
-
}
|
|
364
|
-
) })
|
|
365
|
-
}
|
|
366
|
-
);
|
|
367
|
-
};
|
|
368
|
-
var FilterModal_default = FilterModal;
|
|
369
|
-
|
|
370
|
-
// src/Filter/Subcomponents/SearchInput.tsx
|
|
371
|
-
|
|
372
|
-
var _fa = require('react-icons/fa');
|
|
373
|
-
var _pixelmotion = require('@fuf-stack/pixel-motion');
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
var _Input = require('@fuf-stack/uniform/Input'); var _Input2 = _interopRequireDefault(_Input);
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
var SearchInput = ({ classNames = {}, config: config3 }) => {
|
|
380
|
-
var _a;
|
|
381
|
-
const { formState, setFocus, triggerSubmit } = _useFormContext.useFormContext.call(void 0, );
|
|
382
|
-
const isInitiallyVisible = !!((_a = formState == null ? void 0 : formState.defaultValues) == null ? void 0 : _a.search);
|
|
383
|
-
const [isVisible, setIsVisible] = _react.useState.call(void 0, isInitiallyVisible);
|
|
384
|
-
const placeholder = typeof config3 === "object" ? config3.placeholder : void 0;
|
|
385
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classNames.searchWrapper, children: [
|
|
386
|
-
!isVisible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
387
|
-
_Button2.default,
|
|
388
|
-
{
|
|
389
|
-
ariaLabel: "Show search input",
|
|
390
|
-
className: classNames.searchShowButton,
|
|
391
|
-
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaSearch, {}),
|
|
392
|
-
size: "sm",
|
|
393
|
-
testId: "show_search_input_button",
|
|
394
|
-
variant: "bordered",
|
|
395
|
-
onClick: () => {
|
|
396
|
-
setIsVisible(true);
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
),
|
|
400
|
-
isVisible ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
401
|
-
_pixelmotion.motion.div,
|
|
402
|
-
{
|
|
403
|
-
animate: { opacity: 1 },
|
|
404
|
-
className: classNames.searchMotionDiv,
|
|
405
|
-
initial: !isInitiallyVisible ? { opacity: 0.5 } : false,
|
|
406
|
-
onAnimationComplete: () => {
|
|
407
|
-
if (!isInitiallyVisible) {
|
|
408
|
-
setFocus("search");
|
|
409
|
-
}
|
|
410
|
-
},
|
|
411
|
-
transition: {
|
|
412
|
-
duration: 0.3,
|
|
413
|
-
ease: "circOut"
|
|
414
|
-
},
|
|
415
|
-
children: [
|
|
416
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
417
|
-
_Input2.default,
|
|
418
|
-
{
|
|
419
|
-
clearable: true,
|
|
420
|
-
debounceDelay: 0,
|
|
421
|
-
name: "search",
|
|
422
|
-
placeholder,
|
|
423
|
-
size: "sm",
|
|
424
|
-
className: {
|
|
425
|
-
input: classNames.searchInput,
|
|
426
|
-
inputWrapper: classNames.searchInputWrapper
|
|
427
|
-
},
|
|
428
|
-
onClear: () => {
|
|
429
|
-
triggerSubmit();
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
),
|
|
433
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
434
|
-
_SubmitButton2.default,
|
|
435
|
-
{
|
|
436
|
-
ariaLabel: "Submit search",
|
|
437
|
-
children: null,
|
|
438
|
-
className: classNames.searchSubmitButton,
|
|
439
|
-
color: "primary",
|
|
440
|
-
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaSearch, {}),
|
|
441
|
-
size: "sm",
|
|
442
|
-
testId: "submit_search_button"
|
|
443
|
-
}
|
|
444
|
-
)
|
|
445
|
-
]
|
|
446
|
-
},
|
|
447
|
-
"search-input"
|
|
448
|
-
) : null
|
|
449
|
-
] });
|
|
450
|
-
};
|
|
451
|
-
var SearchInput_default = SearchInput;
|
|
452
|
-
|
|
453
|
-
// src/Filter/Filter.tsx
|
|
454
|
-
|
|
455
|
-
var debug = _debug2.default.call(void 0, "megapixels:Filter");
|
|
456
|
-
var filterVariants = _pixelutils.tv.call(void 0, {
|
|
457
|
-
slots: {
|
|
458
|
-
// outer wrapper
|
|
459
|
-
base: "flex flex-auto flex-col",
|
|
460
|
-
// add filter menu trigger button
|
|
461
|
-
addFilterMenuButton: "",
|
|
462
|
-
// add filter menu item
|
|
463
|
-
addFilterMenuItem: "",
|
|
464
|
-
// active filter label
|
|
465
|
-
activeFilterLabel: "h-8 cursor-pointer rounded-md dark:text-foreground",
|
|
466
|
-
// filter modal body
|
|
467
|
-
filterModalBody: "",
|
|
468
|
-
// filter modal header
|
|
469
|
-
filterModalHeader: "flex items-center gap-3 text-default-700",
|
|
470
|
-
// filter modal footer
|
|
471
|
-
filterModalFooter: "justify-between",
|
|
472
|
-
// form element
|
|
473
|
-
form: "mb-3 flex flex-wrap gap-3",
|
|
474
|
-
// search input field
|
|
475
|
-
searchInput: "",
|
|
476
|
-
// search input wrapper (inner control)
|
|
477
|
-
searchInputWrapper: "",
|
|
478
|
-
// search motion container
|
|
479
|
-
searchMotionDiv: "flex w-72 gap-2",
|
|
480
|
-
// search show button
|
|
481
|
-
searchShowButton: "",
|
|
482
|
-
// search submit button
|
|
483
|
-
searchSubmitButton: "",
|
|
484
|
-
// search wrapper
|
|
485
|
-
searchWrapper: "flex items-center"
|
|
486
|
-
}
|
|
487
|
-
});
|
|
488
|
-
var Filter = ({
|
|
489
|
-
children = void 0,
|
|
490
|
-
className = void 0,
|
|
491
|
-
config: config3,
|
|
492
|
-
formName = "filterComponentForm",
|
|
493
|
-
onChange,
|
|
494
|
-
values
|
|
495
|
-
}) => {
|
|
496
|
-
const handleSubmit = (nextValues) => {
|
|
497
|
-
debug("handleSubmit", { nextValues });
|
|
498
|
-
onChange(nextValues);
|
|
499
|
-
};
|
|
500
|
-
const validation = useFilterValidation(
|
|
501
|
-
config3.filters,
|
|
502
|
-
Boolean(config3.search)
|
|
503
|
-
);
|
|
504
|
-
const {
|
|
505
|
-
data: valuesValidated,
|
|
506
|
-
errors,
|
|
507
|
-
success
|
|
508
|
-
} = validation.validate(values);
|
|
509
|
-
const variants = filterVariants();
|
|
510
|
-
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
511
|
-
debug("render", {
|
|
512
|
-
props: { config: config3, values },
|
|
513
|
-
validation: { errors, success, valuesValidated }
|
|
514
|
-
});
|
|
515
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classNames.base, children: [
|
|
516
|
-
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
517
|
-
_Form2.default,
|
|
518
|
-
{
|
|
519
|
-
className: classNames.form,
|
|
520
|
-
debug: { disable: true },
|
|
521
|
-
initialValues: valuesValidated != null ? valuesValidated : {},
|
|
522
|
-
name: formName,
|
|
523
|
-
onSubmit: handleSubmit,
|
|
524
|
-
validation,
|
|
525
|
-
children: [
|
|
526
|
-
config3.search ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
527
|
-
SearchInput_default,
|
|
528
|
-
{
|
|
529
|
-
config: config3.search,
|
|
530
|
-
classNames: {
|
|
531
|
-
searchInput: classNames.searchInput,
|
|
532
|
-
searchInputWrapper: classNames.searchInputWrapper,
|
|
533
|
-
searchMotionDiv: classNames.searchMotionDiv,
|
|
534
|
-
searchShowButton: classNames.searchShowButton,
|
|
535
|
-
searchSubmitButton: classNames.searchSubmitButton,
|
|
536
|
-
searchWrapper: classNames.searchWrapper
|
|
537
|
-
}
|
|
538
|
-
}
|
|
539
|
-
) : null,
|
|
540
|
-
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FiltersContextProvider, { config: config3.filters, children: [
|
|
541
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActiveFilters_default, { className: classNames.activeFilterLabel }),
|
|
542
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
543
|
-
AddFilterMenu_default,
|
|
544
|
-
{
|
|
545
|
-
classNames: {
|
|
546
|
-
addFilterMenuButton: classNames.addFilterMenuButton,
|
|
547
|
-
addFilterMenuItem: classNames.addFilterMenuItem
|
|
548
|
-
}
|
|
549
|
-
}
|
|
550
|
-
),
|
|
551
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
552
|
-
FilterModal_default,
|
|
553
|
-
{
|
|
554
|
-
classNames: {
|
|
555
|
-
body: classNames.filterModalBody,
|
|
556
|
-
footer: classNames.filterModalFooter,
|
|
557
|
-
header: classNames.filterModalHeader
|
|
558
|
-
}
|
|
559
|
-
}
|
|
560
|
-
)
|
|
561
|
-
] })
|
|
562
|
-
]
|
|
563
|
-
}
|
|
564
|
-
),
|
|
565
|
-
children == null ? void 0 : children(valuesValidated != null ? valuesValidated : {})
|
|
566
|
-
] });
|
|
567
|
-
};
|
|
568
|
-
var Filter_default = Filter;
|
|
569
|
-
|
|
570
|
-
// src/Filter/filters/createFilter.ts
|
|
571
|
-
var createFilter = (definition) => {
|
|
572
|
-
return ({ name, icon, config: config3 }) => {
|
|
573
|
-
return {
|
|
574
|
-
components: definition.components,
|
|
575
|
-
config: __spreadValues(__spreadValues({}, definition.defaults.config), config3 != null ? config3 : {}),
|
|
576
|
-
defaultValue: definition.defaults.value,
|
|
577
|
-
icon,
|
|
578
|
-
name,
|
|
579
|
-
validation: definition.validation
|
|
580
|
-
};
|
|
581
|
-
};
|
|
582
|
-
};
|
|
583
|
-
var createFilter_default = createFilter;
|
|
584
|
-
|
|
585
|
-
// src/Filter/filters/boolean/Display.tsx
|
|
586
|
-
|
|
587
|
-
var Display = ({
|
|
588
|
-
value,
|
|
589
|
-
config: { text, textPrefix, textNoWord }
|
|
590
|
-
}) => {
|
|
591
|
-
if (typeof value === "boolean") {
|
|
592
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: `${value ? textPrefix : `${textPrefix} ${textNoWord != null ? textNoWord : "no"}`} ${text}` });
|
|
593
|
-
}
|
|
594
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: `${text}...` });
|
|
595
|
-
};
|
|
596
|
-
var Display_default = Display;
|
|
597
|
-
|
|
598
|
-
// src/Filter/filters/boolean/Form.tsx
|
|
599
|
-
var _Switch = require('@fuf-stack/uniform/Switch'); var _Switch2 = _interopRequireDefault(_Switch);
|
|
600
|
-
|
|
601
|
-
var Form2 = ({
|
|
602
|
-
fieldName,
|
|
603
|
-
config: { text, textPrefix }
|
|
604
|
-
}) => {
|
|
605
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Switch2.default, { label: `${textPrefix} ${text}`, name: fieldName });
|
|
606
|
-
};
|
|
607
|
-
var Form_default = Form2;
|
|
608
|
-
|
|
609
|
-
// src/Filter/filters/boolean/schema.ts
|
|
610
|
-
|
|
611
|
-
var config = _veto.object.call(void 0, {
|
|
612
|
-
/**
|
|
613
|
-
* Human‑readable label used in the UI (e.g. in the chip and modal header).
|
|
614
|
-
* Examples: "Magical", "Haunted"
|
|
615
|
-
*/
|
|
616
|
-
text: _veto.string.call(void 0, ),
|
|
617
|
-
/**
|
|
618
|
-
* Optional word shown before the label when building sentence‑like chips.
|
|
619
|
-
* Examples: "is" → "is Magical"
|
|
620
|
-
*/
|
|
621
|
-
textPrefix: _veto.string.call(void 0, ).optional(),
|
|
622
|
-
/**
|
|
623
|
-
* Optional negation word used when a boolean value is false.
|
|
624
|
-
* Examples: "not" → "is not Magical"
|
|
625
|
-
*/
|
|
626
|
-
textNoWord: _veto.string.call(void 0, ).optional()
|
|
627
|
-
});
|
|
628
|
-
var validate = (_config) => {
|
|
629
|
-
return _veto.boolean.call(void 0, ).optional();
|
|
630
|
-
};
|
|
631
|
-
|
|
632
|
-
// src/Filter/filters/boolean/boolean.ts
|
|
633
|
-
var boolean2 = createFilter_default({
|
|
634
|
-
components: { Display: Display_default, Form: Form_default },
|
|
635
|
-
defaults: {
|
|
636
|
-
value: true,
|
|
637
|
-
config: { text: "Active", textPrefix: "is", textNoWord: "no" }
|
|
638
|
-
},
|
|
639
|
-
validation: validate
|
|
640
|
-
});
|
|
641
|
-
|
|
642
|
-
// src/Filter/filters/checkboxes/Display.tsx
|
|
643
|
-
var Display2 = ({
|
|
644
|
-
value,
|
|
645
|
-
config: { text, options }
|
|
646
|
-
}) => {
|
|
647
|
-
if (value && value.length > 0) {
|
|
648
|
-
const labels = value.map((val) => {
|
|
649
|
-
var _a, _b;
|
|
650
|
-
return (_b = (_a = options.find((op) => {
|
|
651
|
-
return op.value === val;
|
|
652
|
-
})) == null ? void 0 : _a.label) != null ? _b : val;
|
|
653
|
-
}).join(" ");
|
|
654
|
-
return `${text} is ${labels}`;
|
|
655
|
-
}
|
|
656
|
-
return `${text} is ...`;
|
|
657
|
-
};
|
|
658
|
-
var Display_default2 = Display2;
|
|
659
|
-
|
|
660
|
-
// src/Filter/filters/checkboxes/Form.tsx
|
|
661
|
-
var _Checkboxes = require('@fuf-stack/uniform/Checkboxes'); var _Checkboxes2 = _interopRequireDefault(_Checkboxes);
|
|
662
|
-
|
|
663
|
-
var Form3 = ({ fieldName, config: config3 }) => {
|
|
664
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Checkboxes2.default, { name: fieldName, options: config3.options });
|
|
665
|
-
};
|
|
666
|
-
var Form_default2 = Form3;
|
|
667
|
-
|
|
668
|
-
// src/Filter/filters/checkboxes/schema.ts
|
|
669
|
-
|
|
670
|
-
var config2 = _veto.object.call(void 0, {
|
|
671
|
-
/**
|
|
672
|
-
* Human‑readable label used in the UI (e.g. label and modal header).
|
|
673
|
-
* Example: "Snacks", "Mood"
|
|
674
|
-
*/
|
|
675
|
-
text: _veto.string.call(void 0, ),
|
|
676
|
-
/**
|
|
677
|
-
* Options rendered as multiple checkboxes. Each option needs a `label`
|
|
678
|
-
* (what the user sees) and a `value` (what is written into the form state).
|
|
679
|
-
*/
|
|
680
|
-
options: _veto.array.call(void 0, _veto.object.call(void 0, { label: _veto.string.call(void 0, ), value: _veto.string.call(void 0, ) }))
|
|
681
|
-
});
|
|
682
|
-
var validate2 = (cfg) => {
|
|
683
|
-
return _veto.refineArray.call(void 0, _veto.array.call(void 0, _veto.string.call(void 0, )).optional())({
|
|
684
|
-
unique: true,
|
|
685
|
-
custom: (values, ctx) => {
|
|
686
|
-
if (!cfg) {
|
|
687
|
-
return;
|
|
688
|
-
}
|
|
689
|
-
values.forEach((value) => {
|
|
690
|
-
if (!cfg.options.find((option) => {
|
|
691
|
-
return (option == null ? void 0 : option.value) === value;
|
|
692
|
-
})) {
|
|
693
|
-
ctx.addIssue({
|
|
694
|
-
code: "custom",
|
|
695
|
-
message: `Invalid value: ${value}`
|
|
696
|
-
});
|
|
697
|
-
}
|
|
698
|
-
});
|
|
699
|
-
}
|
|
700
|
-
});
|
|
701
|
-
};
|
|
702
|
-
|
|
703
|
-
// src/Filter/filters/checkboxes/checkboxes.ts
|
|
704
|
-
var checkboxes = createFilter_default({
|
|
705
|
-
components: { Display: Display_default2, Form: Form_default2 },
|
|
706
|
-
defaults: { value: [], config: { text: "Options", options: [] } },
|
|
707
|
-
validation: validate2
|
|
708
|
-
});
|
|
709
|
-
|
|
710
|
-
// src/Filter/index.ts
|
|
711
|
-
var filters = {
|
|
712
|
-
boolean: boolean2,
|
|
713
|
-
checkboxes
|
|
714
|
-
};
|
|
715
|
-
var Filter_default2 = Filter_default;
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
exports.filterVariants = filterVariants; exports.createFilter_default = createFilter_default; exports.filters = filters; exports.Filter_default = Filter_default2;
|
|
723
|
-
//# sourceMappingURL=chunk-KHENACVH.cjs.map
|