@asteby/metacore-ui 2.8.0 → 2.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/data-table/filter-value-combobox.d.ts +29 -0
- package/dist/data-table/filter-value-combobox.d.ts.map +1 -0
- package/dist/data-table/filter-value-combobox.js +54 -0
- package/dist/data-table/filter-value-combobox.js.map +1 -0
- package/dist/data-table/index.d.ts +1 -0
- package/dist/data-table/index.d.ts.map +1 -1
- package/dist/data-table/index.js +1 -0
- package/dist/data-table/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { FilterOption } from './column-filter-control';
|
|
3
|
+
export interface FilterValueComboboxProps {
|
|
4
|
+
/** Inline options (static / already-loaded select values). */
|
|
5
|
+
staticOptions?: FilterOption[];
|
|
6
|
+
/**
|
|
7
|
+
* Lazy loader (facet columns). Called with the search term when the combobox
|
|
8
|
+
* mounts and on debounced typing. When set, options stream in server-side and
|
|
9
|
+
* cmdk's client filter is disabled.
|
|
10
|
+
*/
|
|
11
|
+
loadOptions?: (q?: string) => Promise<FilterOption[]>;
|
|
12
|
+
/** Currently-selected values (multi-select). */
|
|
13
|
+
selected: string[];
|
|
14
|
+
/** Toggle a value in/out of the selection. */
|
|
15
|
+
onToggle: (value: string) => void;
|
|
16
|
+
searchPlaceholder?: string;
|
|
17
|
+
loadingLabel?: string;
|
|
18
|
+
emptyLabel?: string;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* The multi-value checkbox combobox shared by every filter surface: the facet
|
|
23
|
+
* popover in `ColumnFilterControl` and the kanban lane funnel. Renders a search
|
|
24
|
+
* box, a checkbox + color dot + right-aligned count per option, and lazy-loads
|
|
25
|
+
* from `loadOptions` when given (otherwise filters `staticOptions` client-side).
|
|
26
|
+
* Purely a value picker — the caller owns any Apply/Clear affordance.
|
|
27
|
+
*/
|
|
28
|
+
export declare function FilterValueCombobox({ staticOptions, loadOptions, selected, onToggle, searchPlaceholder, loadingLabel, emptyLabel, className, }: FilterValueComboboxProps): React.JSX.Element;
|
|
29
|
+
//# sourceMappingURL=filter-value-combobox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-value-combobox.d.ts","sourceRoot":"","sources":["../../src/data-table/filter-value-combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAE3D,MAAM,WAAW,wBAAwB;IACvC,8DAA8D;IAC9D,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAA;IACrD,gDAAgD;IAChD,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,iBAAuC,EACvC,YAA0B,EAC1B,UAA8B,EAC9B,SAAS,GACV,EAAE,wBAAwB,qBAsF1B"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { CheckIcon } from '@radix-ui/react-icons';
|
|
4
|
+
import { cn } from '../lib/utils';
|
|
5
|
+
import { resolveColorCss } from '../lib/option-colors';
|
|
6
|
+
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '../primitives/command';
|
|
7
|
+
/**
|
|
8
|
+
* The multi-value checkbox combobox shared by every filter surface: the facet
|
|
9
|
+
* popover in `ColumnFilterControl` and the kanban lane funnel. Renders a search
|
|
10
|
+
* box, a checkbox + color dot + right-aligned count per option, and lazy-loads
|
|
11
|
+
* from `loadOptions` when given (otherwise filters `staticOptions` client-side).
|
|
12
|
+
* Purely a value picker — the caller owns any Apply/Clear affordance.
|
|
13
|
+
*/
|
|
14
|
+
export function FilterValueCombobox({ staticOptions, loadOptions, selected, onToggle, searchPlaceholder = 'Buscar valores...', loadingLabel = 'Cargando…', emptyLabel = 'Sin resultados.', className, }) {
|
|
15
|
+
const [query, setQuery] = React.useState('');
|
|
16
|
+
const [options, setOptions] = React.useState(staticOptions ?? []);
|
|
17
|
+
const [loading, setLoading] = React.useState(false);
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
if (!loadOptions) {
|
|
20
|
+
setOptions(staticOptions ?? []);
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
let cancelled = false;
|
|
24
|
+
const handle = setTimeout(() => {
|
|
25
|
+
setLoading(true);
|
|
26
|
+
loadOptions(query.trim() || undefined)
|
|
27
|
+
.then((opts) => {
|
|
28
|
+
if (!cancelled)
|
|
29
|
+
setOptions(Array.isArray(opts) ? opts : []);
|
|
30
|
+
})
|
|
31
|
+
.catch(() => {
|
|
32
|
+
if (!cancelled)
|
|
33
|
+
setOptions([]);
|
|
34
|
+
})
|
|
35
|
+
.finally(() => {
|
|
36
|
+
if (!cancelled)
|
|
37
|
+
setLoading(false);
|
|
38
|
+
});
|
|
39
|
+
}, query ? 250 : 0);
|
|
40
|
+
return () => {
|
|
41
|
+
cancelled = true;
|
|
42
|
+
clearTimeout(handle);
|
|
43
|
+
};
|
|
44
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
45
|
+
}, [query, loadOptions]);
|
|
46
|
+
const selectedSet = new Set(selected);
|
|
47
|
+
return (_jsxs(Command, { shouldFilter: !loadOptions, className: className, children: [_jsx(CommandInput, { placeholder: searchPlaceholder, value: query, onValueChange: setQuery }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: loading ? loadingLabel : emptyLabel }), _jsx(CommandGroup, { children: options.map((option) => {
|
|
48
|
+
const isSelected = selectedSet.has(option.value);
|
|
49
|
+
return (_jsxs(CommandItem, { value: option.value, onSelect: () => onToggle(option.value), onPointerDown: (e) => e.preventDefault(), children: [_jsx("div", { className: cn('mr-2 flex size-4 shrink-0 items-center justify-center rounded-sm border transition-colors', isSelected
|
|
50
|
+
? 'border-foreground bg-foreground text-background'
|
|
51
|
+
: 'border-muted-foreground/50 opacity-70 [&_svg]:invisible'), children: _jsx(CheckIcon, { className: 'h-3.5 w-3.5' }) }), option.color && (_jsx("span", { className: 'mr-1 size-2.5 rounded-full shrink-0', style: { backgroundColor: resolveColorCss(option.color) } })), _jsx("span", { className: 'truncate', children: option.label }), typeof option.count === 'number' && (_jsx("span", { className: 'ml-auto pl-2 text-xs tabular-nums text-muted-foreground', children: option.count }))] }, option.value));
|
|
52
|
+
}) })] })] }));
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=filter-value-combobox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-value-combobox.js","sourceRoot":"","sources":["../../src/data-table/filter-value-combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,4 +6,5 @@ export { DataTableToolbar } from './toolbar';
|
|
|
6
6
|
export { DataTableBulkActions } from './bulk-actions';
|
|
7
7
|
export { FilterableColumnHeader, type FilterOption, type ColumnFilterMeta, type ColumnFilterType, } from './filterable-column-header';
|
|
8
8
|
export { ColumnFilterControl, type ColumnFilterControlProps, } from './column-filter-control';
|
|
9
|
+
export { FilterValueCombobox, type FilterValueComboboxProps, } from './filter-value-combobox';
|
|
9
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EACL,sBAAsB,EACtB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,GACtB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,yBAAyB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EACL,sBAAsB,EACtB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,GACtB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,yBAAyB,CAAA"}
|
package/dist/data-table/index.js
CHANGED
|
@@ -6,4 +6,5 @@ export { DataTableToolbar } from './toolbar';
|
|
|
6
6
|
export { DataTableBulkActions } from './bulk-actions';
|
|
7
7
|
export { FilterableColumnHeader, } from './filterable-column-header';
|
|
8
8
|
export { ColumnFilterControl, } from './column-filter-control';
|
|
9
|
+
export { FilterValueCombobox, } from './filter-value-combobox';
|
|
9
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EACL,sBAAsB,GAIvB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,mBAAmB,GAEpB,MAAM,yBAAyB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EACL,sBAAsB,GAIvB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,mBAAmB,GAEpB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,mBAAmB,GAEpB,MAAM,yBAAyB,CAAA"}
|
package/package.json
CHANGED