venice-ui 3.0.36 → 3.0.39

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 (9) hide show
  1. package/dist/cjs/components/DatePicker/DatePicker.js +2 -2
  2. package/dist/cjs/components/Filters/Filters.js +17 -41
  3. package/dist/esm/components/DatePicker/DatePicker.js +2 -2
  4. package/dist/esm/components/Filters/Filters.js +17 -41
  5. package/dist/types/components/DatePicker/DatePicker.d.ts +1 -0
  6. package/dist/types/components/Filters/Filters.d.ts +3 -2
  7. package/dist/types/components/Table/Table.d.ts +2 -1
  8. package/dist/types/types/types.d.ts +1 -0
  9. package/package.json +1 -1
package/dist/cjs/components/DatePicker/DatePicker.js CHANGED
@@ -48,7 +48,7 @@ const DatePicker = ({ name, value, label, labelPosition = 'top', theme, themeVar
48
48
  months: config_2.wordbook.calendar.months,
49
49
  weekdaysShort: config_2.wordbook.calendar.weekdaysShort,
50
50
  firstDayOfWeek: 1,
51
- }, placeholder = config_2.wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth }) => {
51
+ }, placeholder = config_2.wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth, withoutClearIcon = false }) => {
52
52
  const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
53
53
  theme,
54
54
  themeVariant,
@@ -89,7 +89,7 @@ const DatePicker = ({ name, value, label, labelPosition = 'top', theme, themeVar
89
89
  react_1.default.createElement(DatePicker_styles_1.DatePickerValue, { theme: resolvedTheme, config: datePickerConfig, size: size },
90
90
  value ? (0, date_fns_1.format)(new Date(value), 'dd-MM-yyyy') : placeholder,
91
91
  react_1.default.createElement(Aligment_1.Aligment, { width: "auto", align: "flex-end", gap: datePickerConfig.size.common.iconGap },
92
- value && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
92
+ (value && !withoutClearIcon) && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
93
93
  if (e?.stopPropagation) {
94
94
  e.stopPropagation();
95
95
  }
package/dist/cjs/components/Filters/Filters.js CHANGED
@@ -90,27 +90,12 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
90
90
  return headers
91
91
  .filter((h) => !h.action)
92
92
  .map((h) => {
93
+ const type = h.filterType || 'select';
93
94
  const key = h.valueSource || h.name;
94
95
  const values = (elements || [])
95
96
  .map((it) => it?.[key])
96
97
  .filter((v) => v !== undefined && v !== null);
97
- const nameLower = (h.name || '').toString().toLowerCase();
98
- if (nameLower === 'age' || nameLower.includes('age')) {
99
- const nums = values
100
- .map((v) => Number(v))
101
- .filter((n) => !Number.isNaN(n));
102
- const min = nums.length ? Math.min(...nums) : 0;
103
- const max = nums.length ? Math.max(...nums) : 0;
104
- return {
105
- label: h.name,
106
- name: key,
107
- type: 'range',
108
- min,
109
- max,
110
- collapsible: true,
111
- };
112
- }
113
- if (h.scope && h.scope.length) {
98
+ if (type === 'select' && h.scope && h.scope.length) {
114
99
  return {
115
100
  label: h.name,
116
101
  name: key,
@@ -119,26 +104,26 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
119
104
  collapsible: true,
120
105
  };
121
106
  }
122
- if (h.date) {
107
+ if (type === 'date') {
123
108
  const dates = values
124
109
  .map((v) => (v ? new Date(v).getTime() : NaN))
125
110
  .filter((d) => !Number.isNaN(d));
126
111
  const min = dates.length
127
- ? new Date(Math.min(...dates)).toISOString()
112
+ ? Math.min(...dates)
128
113
  : undefined;
129
114
  const max = dates.length
130
- ? new Date(Math.max(...dates)).toISOString()
115
+ ? Math.max(...dates)
131
116
  : undefined;
132
117
  return {
133
118
  label: h.name,
134
119
  name: key,
135
120
  type: 'date',
136
- min,
137
- max,
121
+ min: min,
122
+ max: max,
138
123
  collapsible: true,
139
124
  };
140
125
  }
141
- if (h.isCount) {
126
+ if (type === 'range') {
142
127
  const nums = values
143
128
  .map((v) => Number(v))
144
129
  .filter((n) => !Number.isNaN(n));
@@ -151,19 +136,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
151
136
  collapsible: true,
152
137
  };
153
138
  }
154
- const numericValues = values
155
- .map((v) => Number(v))
156
- .filter((n) => !Number.isNaN(n));
157
- if (numericValues.length === values.length && values.length > 0) {
158
- return {
159
- label: h.name,
160
- name: key,
161
- type: 'range',
162
- min: Math.min(...numericValues),
163
- max: Math.max(...numericValues),
164
- collapsible: true,
165
- };
166
- }
167
139
  return {
168
140
  label: h.name,
169
141
  name: key,
@@ -172,7 +144,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
172
144
  collapsible: true,
173
145
  };
174
146
  });
175
- }, [filters, headers, elements]);
147
+ }, [filters, headers, elements, fullElements]);
176
148
  const generateStateObj = (0, react_1.useCallback)(() => {
177
149
  const obj = {};
178
150
  filtersConfig.forEach((filter) => {
@@ -192,6 +164,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
192
164
  });
193
165
  return obj;
194
166
  }, [filtersConfig]);
167
+ console.log(filtersConfig);
195
168
  const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
196
169
  const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
197
170
  const [collapsedFilters, setCollapsedFilters] = (0, react_1.useState)({});
@@ -275,6 +248,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
275
248
  }, []);
276
249
  const setRangeFilter = (0, react_1.useCallback)((name, value) => {
277
250
  const [filterName, filterParam] = String(name).split('_');
251
+ console.log(filterName, filterParam, value);
278
252
  setActiveFilters((prev) => ({
279
253
  ...prev,
280
254
  [filterName]: { ...prev[filterName], [filterParam]: value },
@@ -321,8 +295,8 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
321
295
  else if (f.type === 'date') {
322
296
  if (!isFilterActive(f))
323
297
  return;
324
- const fromTsRaw = normalizeDateValue(f.min);
325
- const toTsRaw = normalizeDateValue(f.max);
298
+ const fromTsRaw = f.min;
299
+ const toTsRaw = f.max;
326
300
  const fromDate = fromTsRaw !== undefined ? new Date(fromTsRaw) : null;
327
301
  const toDate = toTsRaw !== undefined ? new Date(toTsRaw) : null;
328
302
  const fromTs = fromDate
@@ -427,10 +401,12 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
427
401
  react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
428
402
  react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
429
403
  case 'date':
404
+ const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
405
+ const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
430
406
  return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
431
407
  react_1.default.createElement(Filters_styles_1.FilterGrid, null,
432
- react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }),
433
- react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }))));
408
+ react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }),
409
+ react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_max`, value: maxValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }))));
434
410
  case 'text':
435
411
  return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
436
412
  react_1.default.createElement(Input_1.Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));
package/dist/esm/components/DatePicker/DatePicker.js CHANGED
@@ -12,7 +12,7 @@ export const DatePicker = ({ name, value, label, labelPosition = 'top', theme, t
12
12
  months: wordbook.calendar.months,
13
13
  weekdaysShort: wordbook.calendar.weekdaysShort,
14
14
  firstDayOfWeek: 1,
15
- }, placeholder = wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth }) => {
15
+ }, placeholder = wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth, withoutClearIcon = false }) => {
16
16
  const resolvedThemeData = resolveThemeWithComponentsConfig({
17
17
  theme,
18
18
  themeVariant,
@@ -53,7 +53,7 @@ export const DatePicker = ({ name, value, label, labelPosition = 'top', theme, t
53
53
  React.createElement(DatePickerValue, { theme: resolvedTheme, config: datePickerConfig, size: size },
54
54
  value ? format(new Date(value), 'dd-MM-yyyy') : placeholder,
55
55
  React.createElement(Aligment, { width: "auto", align: "flex-end", gap: datePickerConfig.size.common.iconGap },
56
- value && !readOnly && (React.createElement(Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
56
+ (value && !withoutClearIcon) && !readOnly && (React.createElement(Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
57
57
  if (e?.stopPropagation) {
58
58
  e.stopPropagation();
59
59
  }
package/dist/esm/components/Filters/Filters.js CHANGED
@@ -54,27 +54,12 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
54
54
  return headers
55
55
  .filter((h) => !h.action)
56
56
  .map((h) => {
57
+ const type = h.filterType || 'select';
57
58
  const key = h.valueSource || h.name;
58
59
  const values = (elements || [])
59
60
  .map((it) => it?.[key])
60
61
  .filter((v) => v !== undefined && v !== null);
61
- const nameLower = (h.name || '').toString().toLowerCase();
62
- if (nameLower === 'age' || nameLower.includes('age')) {
63
- const nums = values
64
- .map((v) => Number(v))
65
- .filter((n) => !Number.isNaN(n));
66
- const min = nums.length ? Math.min(...nums) : 0;
67
- const max = nums.length ? Math.max(...nums) : 0;
68
- return {
69
- label: h.name,
70
- name: key,
71
- type: 'range',
72
- min,
73
- max,
74
- collapsible: true,
75
- };
76
- }
77
- if (h.scope && h.scope.length) {
62
+ if (type === 'select' && h.scope && h.scope.length) {
78
63
  return {
79
64
  label: h.name,
80
65
  name: key,
@@ -83,26 +68,26 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
83
68
  collapsible: true,
84
69
  };
85
70
  }
86
- if (h.date) {
71
+ if (type === 'date') {
87
72
  const dates = values
88
73
  .map((v) => (v ? new Date(v).getTime() : NaN))
89
74
  .filter((d) => !Number.isNaN(d));
90
75
  const min = dates.length
91
- ? new Date(Math.min(...dates)).toISOString()
76
+ ? Math.min(...dates)
92
77
  : undefined;
93
78
  const max = dates.length
94
- ? new Date(Math.max(...dates)).toISOString()
79
+ ? Math.max(...dates)
95
80
  : undefined;
96
81
  return {
97
82
  label: h.name,
98
83
  name: key,
99
84
  type: 'date',
100
- min,
101
- max,
85
+ min: min,
86
+ max: max,
102
87
  collapsible: true,
103
88
  };
104
89
  }
105
- if (h.isCount) {
90
+ if (type === 'range') {
106
91
  const nums = values
107
92
  .map((v) => Number(v))
108
93
  .filter((n) => !Number.isNaN(n));
@@ -115,19 +100,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
115
100
  collapsible: true,
116
101
  };
117
102
  }
118
- const numericValues = values
119
- .map((v) => Number(v))
120
- .filter((n) => !Number.isNaN(n));
121
- if (numericValues.length === values.length && values.length > 0) {
122
- return {
123
- label: h.name,
124
- name: key,
125
- type: 'range',
126
- min: Math.min(...numericValues),
127
- max: Math.max(...numericValues),
128
- collapsible: true,
129
- };
130
- }
131
103
  return {
132
104
  label: h.name,
133
105
  name: key,
@@ -136,7 +108,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
136
108
  collapsible: true,
137
109
  };
138
110
  });
139
- }, [filters, headers, elements]);
111
+ }, [filters, headers, elements, fullElements]);
140
112
  const generateStateObj = useCallback(() => {
141
113
  const obj = {};
142
114
  filtersConfig.forEach((filter) => {
@@ -156,6 +128,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
156
128
  });
157
129
  return obj;
158
130
  }, [filtersConfig]);
131
+ console.log(filtersConfig);
159
132
  const [openFilters, setOpenFilters] = useState(false);
160
133
  const [activeFilters, setActiveFilters] = useState(generateStateObj());
161
134
  const [collapsedFilters, setCollapsedFilters] = useState({});
@@ -239,6 +212,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
239
212
  }, []);
240
213
  const setRangeFilter = useCallback((name, value) => {
241
214
  const [filterName, filterParam] = String(name).split('_');
215
+ console.log(filterName, filterParam, value);
242
216
  setActiveFilters((prev) => ({
243
217
  ...prev,
244
218
  [filterName]: { ...prev[filterName], [filterParam]: value },
@@ -285,8 +259,8 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
285
259
  else if (f.type === 'date') {
286
260
  if (!isFilterActive(f))
287
261
  return;
288
- const fromTsRaw = normalizeDateValue(f.min);
289
- const toTsRaw = normalizeDateValue(f.max);
262
+ const fromTsRaw = f.min;
263
+ const toTsRaw = f.max;
290
264
  const fromDate = fromTsRaw !== undefined ? new Date(fromTsRaw) : null;
291
265
  const toDate = toTsRaw !== undefined ? new Date(toTsRaw) : null;
292
266
  const fromTs = fromDate
@@ -391,10 +365,12 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
391
365
  React.createElement(Numerical, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
392
366
  React.createElement(Numerical, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
393
367
  case 'date':
368
+ const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
369
+ const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
394
370
  return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
395
371
  React.createElement(FilterGrid, null,
396
- React.createElement(DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }),
397
- React.createElement(DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }))));
372
+ React.createElement(DatePicker, { name: `${filter.name}_min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }),
373
+ React.createElement(DatePicker, { name: `${filter.name}_max`, value: maxValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }))));
398
374
  case 'text':
399
375
  return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
400
376
  React.createElement(Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));
package/dist/types/components/DatePicker/DatePicker.d.ts CHANGED
@@ -25,6 +25,7 @@ interface IDatePickerProps {
25
25
  autoConfirm?: boolean;
26
26
  placeholder?: string;
27
27
  componentWidth?: string;
28
+ withoutClearIcon?: boolean;
28
29
  }
29
30
  export declare const DatePicker: FC<IDatePickerProps>;
30
31
  export {};
package/dist/types/components/Filters/Filters.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FC } from 'react';
2
2
  import { AppTheme, ThemeName } from '../../config';
3
- import { ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
3
+ import { FilterType, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
4
4
  interface IHeader {
5
5
  name: string;
6
6
  valueSource?: string;
@@ -11,6 +11,7 @@ interface IHeader {
11
11
  value?: string;
12
12
  label?: string;
13
13
  }>;
14
+ filterType?: FilterType;
14
15
  }
15
16
  export interface IApplyFilterResults {
16
17
  name: string;
@@ -31,7 +32,7 @@ export interface IFilterProps {
31
32
  }>;
32
33
  label: string;
33
34
  name: string;
34
- type: 'select' | 'range' | string;
35
+ type: 'select' | 'range' | 'date' | 'text';
35
36
  allowValues?: string[] | number[];
36
37
  min?: number;
37
38
  max?: number;
package/dist/types/components/Table/Table.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { AppTheme, ThemeName } from '../../config';
2
2
  import { FC } from 'react';
3
- import { IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
3
+ import { FilterType, IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
4
4
  interface ITableProps {
5
5
  theme?: AppTheme;
6
6
  themeVariant?: ThemeName;
@@ -33,6 +33,7 @@ export interface ITableHeaderProps {
33
33
  isCount?: boolean;
34
34
  scope?: ITableScopeProps[];
35
35
  size?: InputSize;
36
+ filterType?: FilterType;
36
37
  }
37
38
  export interface ITableSortProps {
38
39
  name: string;
package/dist/types/types/types.d.ts CHANGED
@@ -8,3 +8,4 @@ export type TIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4'
8
8
  export type THelperMode = 'default' | 'error' | 'success';
9
9
  export type AdditionalType = 'button' | 'toggle';
10
10
  export type TagType = 'default' | 'success' | 'warning' | 'error';
11
+ export type FilterType = 'text' | 'number' | 'date' | 'select' | 'range';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.36",
3
+ "version": "3.0.39",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",