@tint-ui/data-table 0.3.11 → 0.3.13

package/cjs/filter-adapters/option.js

@@ -65,7 +65,9 @@ const FilterOptionType = ({
     lexicon,
     icon,
     groupBy = null,
-    disableSearch = false
+    disableSearch = false,
+    multiple,
+    toggleMode
   } = ctx;
   const selectedOptions = getSelectedOptions();
   const optionGroups = React.useMemo(() => groupBy ? createOptionGroups(options, groupBy) : [{
@@ -111,12 +113,16 @@ const FilterOptionType = ({
     } = option.config || {};
     return /*#__PURE__*/React.createElement(_command.CommandItem, {
       key: option.value,
+      "data-multiple": multiple,
       onSelect: () => {
         const selectedValues = new Set(value);
         if (isSelected) {
+          if (!toggleMode) {
+            return;
+          }
           selectedValues.delete(optionValue);
         } else {
-          if (!filter.multiple) {
+          if (!multiple) {
             selectedValues.clear();
           }
           selectedValues.add(optionValue);
@@ -126,7 +132,7 @@ const FilterOptionType = ({
     }, /*#__PURE__*/React.createElement("div", {
       className: (0, _clsx.default)(classes.checkbox, isSelected && classes.selected)
     }, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
-      icon: "check",
+      icon: multiple ? "filter-option-checkbox" : "filter-option-radio",
       "aria-hidden": "true"
     })), !(0, _isEmpty.isEmptyString)(icon) && /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
       icon: icon,

package/cjs/filter-adapters/use-option-filter.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _context = require("../context");
 var _errorMessage = require("@tint-ui/tools/error-message");
 var _makeOption = require("@tint-ui/tools/make-option");
-const _excluded = ["options", "initialOptions"];
+const _excluded = ["options", "initialOptions", "toggleMode"];
 const getOptions = (result, dump) => {
   const options = [];
   if (result.length) {
@@ -26,9 +26,11 @@ const getOptions = (result, dump) => {
 const useOptionFilter = function (filter) {
   const {
       name,
+      multiple = false,
       config: {
         options: filterOptions,
-        initialOptions
+        initialOptions,
+        toggleMode = multiple
       } = {}
     } = filter,
     rest = (0, _objectWithoutPropertiesLoose2.default)(filter.config, _excluded);
@@ -181,6 +183,8 @@ const useOptionFilter = function (filter) {
     name,
     column,
     inputProps,
+    multiple,
+    toggleMode,
     getSelectedOptions,
     lexicon: ctx.lexicon,
     size: ctx.toolbar.size,

package/cjs/use-data-table.js

@@ -20,7 +20,8 @@ var _utils = require("./utils");
 const _excluded = ["globalFilter"],
   _excluded2 = ["columnFilters"],
   _excluded3 = ["sorting"],
-  _excluded4 = ["pagination"];
+  _excluded4 = ["pagination"],
+  _excluded5 = ["onFilterReset", "state"];
 const createHash = function (name, keyName, manual, cells) {
   let hash = `${name}[${keyName},${manual ? "1" : "0"}]://`;
   for (const cell of cells) {
@@ -388,10 +389,14 @@ const useDataTable = function (props) {
         if (!mount) {
           return;
         }
+        const cb = refOptions.current?.onFilterReset;
         setState(prev => {
           if (prev.loading) {
             return prev;
           }
+          if (cb) {
+            cb();
+          }
           const state = Object.assign({}, prev, {
             pagination: {
               pageSize: prev.pagination.pageSize,
@@ -408,15 +413,20 @@ const useDataTable = function (props) {
         });
       },
       onPageSizeChange(pageSize) {
+        const cb = refOptions.current?.onPaginationChange;
         setState(prev => {
           if (prev.loading || prev.pagination.pageSize === pageSize) {
             return prev;
           }
+          const paginationState = {
+            pageSize,
+            pageIndex: 0
+          };
+          if (cb) {
+            cb(paginationState);
+          }
           const state = Object.assign({}, prev, {
-            pagination: {
-              pageSize,
-              pageIndex: 0
-            }
+            pagination: paginationState
           });
           if (force(state)) {
             state.loading = true;
@@ -723,10 +733,22 @@ const useDataTable = function (props) {
       }
     };
   }, [onRowClick, loading]);
+  let optProp = {};
+  let optState = {};
+  if (options != null) {
+    const {
+        state
+      } = options,
+      prop = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded5);
+    optProp = prop;
+    if (state) {
+      optState = state;
+    }
+  }
   const {
     pagination
   } = state;
-  const tableCtx = (0, _reactTable.useReactTable)(Object.assign({}, options, {
+  const tableCtx = (0, _reactTable.useReactTable)(Object.assign({}, optProp, {
     pageCount: manual ? state.pageCount : undefined,
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getPaginationRowModel: (0, _reactTable.getPaginationRowModel)(),
@@ -741,7 +763,7 @@ const useDataTable = function (props) {
     manualFiltering: manual,
     manualSorting: manual,
     manualPagination: manual,
-    state: Object.assign({}, options?.state || null, {
+    state: Object.assign({}, optState, {
       columnVisibility,
       sorting: state.sorting,
       globalFilter: state.globalFilter,

package/filter-adapters/option.js

@@ -60,7 +60,9 @@ const FilterOptionType = ({
     lexicon,
     icon,
     groupBy = null,
-    disableSearch = false
+    disableSearch = false,
+    multiple,
+    toggleMode
   } = ctx;
   const selectedOptions = getSelectedOptions();
   const optionGroups = React.useMemo(() => groupBy ? createOptionGroups(options, groupBy) : [{
@@ -106,12 +108,16 @@ const FilterOptionType = ({
     } = option.config || {};
     return /*#__PURE__*/React.createElement(CommandItem, {
       key: option.value,
+      "data-multiple": multiple,
       onSelect: () => {
         const selectedValues = new Set(value);
         if (isSelected) {
+          if (!toggleMode) {
+            return;
+          }
           selectedValues.delete(optionValue);
         } else {
-          if (!filter.multiple) {
+          if (!multiple) {
             selectedValues.clear();
           }
           selectedValues.add(optionValue);
@@ -121,7 +127,7 @@ const FilterOptionType = ({
     }, /*#__PURE__*/React.createElement("div", {
       className: clsx(classes.checkbox, isSelected && classes.selected)
     }, /*#__PURE__*/React.createElement(SvgThemeIcon, {
-      icon: "check",
+      icon: multiple ? "filter-option-checkbox" : "filter-option-radio",
       "aria-hidden": "true"
     })), !isEmptyString(icon) && /*#__PURE__*/React.createElement(SvgThemeIcon, {
       icon: icon,

package/filter-adapters/use-option-filter.d.ts

@@ -9,6 +9,8 @@ declare const useOptionFilter: <TData>(filter: DataTableDisplayFilter<keyof TDat
         onValueChange(inputText: string): void;
         onFocus(): void;
     };
+    multiple: boolean;
+    toggleMode: boolean;
     getSelectedOptions: () => InputSelectOption<object>[];
     lexicon: import("../types").LexiconType;
     size: import("../types").DataTableToolbarSize;

package/filter-adapters/use-option-filter.js

@@ -19,9 +19,11 @@ const getOptions = (result, dump) => {
 const useOptionFilter = function (filter) {
   const {
     name,
+    multiple = false,
     config: {
       options: filterOptions,
       initialOptions,
+      toggleMode = multiple,
       ...rest
     } = {}
   } = filter;
@@ -178,6 +180,8 @@ const useOptionFilter = function (filter) {
     name,
     column,
     inputProps,
+    multiple,
+    toggleMode,
     getSelectedOptions,
     lexicon: ctx.lexicon,
     size: ctx.toolbar.size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tint-ui/data-table",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "author": "phragon@websoftlab.com",
   "license": "MIT",
   "dependencies": {

package/styles-filter.css

@@ -1 +1 @@
-.tui-data-table-filter_badges{align-items:center;gap:.5rem}.tui-data-table-filter_badges [data-size=sm]{gap:.25rem}.tui-data-table-filter_badge{border-radius:calc(var(--radius) - 4px);display:inline-block;font-weight:400;max-width:120px;overflow:hidden;padding-left:.25rem;padding-right:.25rem;text-overflow:ellipsis;white-space:nowrap}.tui-data-table-filter_popover{max-width:200px;padding:0}.tui-data-table-filter{border-style:dashed}.tui-data-table-filter>.tui-data-table-filter_badge,.tui-data-table-filter>.tui-data-table-filter_badges{margin-left:.25rem;margin-right:-.5rem}.tui-data-table-filter:hover .tui-data-table-filter_badge{background-color:hsl(var(--background))}.tui-data-table-filter_mobile{display:inline-flex}@media (min-width:1024px){.tui-data-table-filter_mobile{display:none}}.tui-data-table-filter_mobile.tui-data-table-filter_badge{display:flow-root}@media (min-width:1024px){.tui-data-table-filter_mobile.tui-data-table-filter_badge{display:none}}.tui-data-table-filter_desktop{display:none}@media (min-width:1024px){.tui-data-table-filter_desktop{display:inline-flex}}.tui-data-table-filter_checkbox{align-items:center;border:1px dashed #64748b80;border-radius:calc(var(--radius) - 4px);display:inline-flex;height:1rem;justify-content:center;opacity:.5;width:1rem}.tui-data-table-filter_checkbox svg{height:1rem;visibility:hidden;width:1rem}.tui-data-table-filter_checkbox.tui-data-table-filter_selected{border-color:#0000;opacity:1}.tui-data-table-filter_checkbox.tui-data-table-filter_selected svg{visibility:visible}.tui-data-table-filter_text{width:180px}@media (min-width:1024px){.tui-data-table-filter_text{width:220px}}.tui-data-table-filter_text.tui-data-table-filter_text--mobile{width:100%}.tui-data-table-filter_icon{color:hsl(var(--muted-foreground));height:1rem;margin-right:.5rem;width:1rem}.tui-data-table-filter_label{margin-right:auto}
+.tui-data-table-filter_badges{align-items:center;gap:.5rem}.tui-data-table-filter_badges [data-size=sm]{gap:.25rem}.tui-data-table-filter_badge{border-radius:calc(var(--radius) - 4px);display:inline-block;font-weight:400;max-width:120px;overflow:hidden;padding-left:.25rem;padding-right:.25rem;text-overflow:ellipsis;white-space:nowrap}.tui-data-table-filter_popover{max-width:200px;padding:0}.tui-data-table-filter{border-style:dashed}.tui-data-table-filter>.tui-data-table-filter_badge,.tui-data-table-filter>.tui-data-table-filter_badges{margin-left:.25rem;margin-right:-.5rem}.tui-data-table-filter:hover .tui-data-table-filter_badge{background-color:hsl(var(--background))}.tui-data-table-filter_mobile{display:inline-flex}@media (min-width:1024px){.tui-data-table-filter_mobile{display:none}}.tui-data-table-filter_mobile.tui-data-table-filter_badge{display:flow-root}@media (min-width:1024px){.tui-data-table-filter_mobile.tui-data-table-filter_badge{display:none}}.tui-data-table-filter_desktop{display:none}@media (min-width:1024px){.tui-data-table-filter_desktop{display:inline-flex}}.tui-data-table-filter_checkbox{align-items:center;border:1px dashed #64748b80;border-radius:calc(var(--radius) - 4px);display:inline-flex;height:1rem;justify-content:center;opacity:.5;width:1rem}.tui-data-table-filter_checkbox svg{height:1rem;visibility:hidden;width:1rem}.tui-data-table-filter_checkbox.tui-data-table-filter_selected{border-color:#0000;opacity:1}.tui-data-table-filter_checkbox.tui-data-table-filter_selected svg{visibility:visible}[data-multiple=false]>.tui-data-table-filter_checkbox{border-radius:9999px}[data-multiple=false]>.tui-data-table-filter_checkbox.tui-data-table-filter_selected{background-color:hsl(var(--foreground));color:hsl(var(--background))}.tui-data-table-filter_text{width:180px}@media (min-width:1024px){.tui-data-table-filter_text{width:220px}}.tui-data-table-filter_text.tui-data-table-filter_text--mobile{width:100%}.tui-data-table-filter_icon{color:hsl(var(--muted-foreground));height:1rem;margin-right:.5rem;width:1rem}.tui-data-table-filter_label{margin-right:auto}

package/styles-filter.module.css

@@ -47,6 +47,12 @@
 .checkbox.selected svg {
   @apply visible;
 }
+[data-multiple=false] > .checkbox {
+  @apply rounded-full;
+}
+[data-multiple=false] > .checkbox.selected {
+  @apply bg-foreground text-background;
+}
 
 .text {
   @apply w-[180px] lg:w-[220px];

package/styles-filter.module.scss

@@ -47,6 +47,12 @@
 			@apply visible;
 		}
 	}
+	[data-multiple="false"] > & {
+		@apply rounded-full;
+		&.selected {
+			@apply bg-foreground text-background;
+		}
+	}
 }
 
 .text {

package/types.d.ts

@@ -34,6 +34,7 @@ export type DataTableToolbarSize = "sm" | "md" | "lg";
 export type DataTableNavbarSize = "sm" | "md" | "lg";
 export interface DataTableOptions<TData> extends Partial<Omit<TableOptions<TData>, "pageCount" | "getCoreRowModel" | "getPaginationRowModel" | "getFilteredRowModel" | "getSortedRowModel" | "globalFilterFn" | "manualFiltering" | "manualSorting" | "manualPagination" | "data" | "columns" | "state">> {
     state?: Partial<Omit<TableState, "columnVisibility" | "sorting" | "globalFilter" | "columnFilters" | "pagination">>;
+    onFilterReset?: () => void;
 }
 export interface DataTableCoreProps<TData> extends FilterType<TData> {
     table: DataTableType<TData>;
@@ -145,6 +146,7 @@ export interface DataTableFilterOptionConfig {
     disableSearch?: boolean;
     autoSelect?: boolean;
     groupBy?: string;
+    toggleMode?: boolean;
 }
 export type DataTableDisplayCell<TValue = string, TConfig extends object = any> = Required<Omit<DataTableCellType<TValue, TConfig>, "filter">> & {
     filter: boolean;

package/use-data-table.d.ts

@@ -1,3 +1,3 @@
-import { DataTableCoreProps, DataTableContextType } from "./types";
+import type { DataTableCoreProps, DataTableContextType } from "./types";
 declare const useDataTable: <TData extends object>(props: DataTableCoreProps<TData>) => DataTableContextType<TData>;
 export { useDataTable };

package/use-data-table.js

@@ -380,10 +380,14 @@ const useDataTable = function (props) {
         if (!mount) {
           return;
         }
+        const cb = refOptions.current?.onFilterReset;
         setState(prev => {
           if (prev.loading) {
             return prev;
           }
+          if (cb) {
+            cb();
+          }
           const state = {
             ...prev,
             pagination: {
@@ -401,16 +405,21 @@ const useDataTable = function (props) {
         });
       },
       onPageSizeChange(pageSize) {
+        const cb = refOptions.current?.onPaginationChange;
         setState(prev => {
           if (prev.loading || prev.pagination.pageSize === pageSize) {
             return prev;
           }
+          const paginationState = {
+            pageSize,
+            pageIndex: 0
+          };
+          if (cb) {
+            cb(paginationState);
+          }
           const state = {
             ...prev,
-            pagination: {
-              pageSize,
-              pageIndex: 0
-            }
+            pagination: paginationState
           };
           if (force(state)) {
             state.loading = true;
@@ -721,11 +730,24 @@ const useDataTable = function (props) {
       }
     };
   }, [onRowClick, loading]);
+  let optProp = {};
+  let optState = {};
+  if (options != null) {
+    const {
+      onFilterReset,
+      state,
+      ...prop
+    } = options;
+    optProp = prop;
+    if (state) {
+      optState = state;
+    }
+  }
   const {
     pagination
   } = state;
   const tableCtx = useReactTable({
-    ...options,
+    ...optProp,
     pageCount: manual ? state.pageCount : undefined,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -741,7 +763,7 @@ const useDataTable = function (props) {
     manualSorting: manual,
     manualPagination: manual,
     state: {
-      ...(options?.state || null),
+      ...optState,
       columnVisibility,
       sorting: state.sorting,
       globalFilter: state.globalFilter,