@tint-ui/data-table 0.3.12 → 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/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.12",
+  "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

@@ -146,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;