@solidpb/ui-kit 0.5.2 → 0.6.0

package/dist/components/DateInput/DateInput.jsx

@@ -25,6 +25,9 @@ const dateInput = tv({
             xl: "input-xl",
         },
     },
+    defaultVariants: {
+        size: "sm",
+    },
 });
 export const DateInput = (props) => {
     // yyyy-mm-dd for input value

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -11,7 +11,7 @@ type DropdownMenuRootProps<T extends ValidComponent = "div"> = PolymorphicProps<
     class?: string;
 };
 type DropDownMenuItemProps<T extends ValidComponent = "div"> = PolymorphicProps<T, DropdownMenuItemProps<T>> & {
-    onSelect: () => void;
+    onSelect?: () => void;
 };
 interface DropdownMenuComponents {
     MenuItem: ParentComponent<DropDownMenuItemProps>;
@@ -22,6 +22,6 @@ export declare const DropdownMenu: ParentComponent<DropdownMenuRootProps> & Drop
 export declare const DropdownMenuTrigger: ParentComponent<ButtonProps>;
 export declare const DropdownMenuContent: ParentComponent<DropdownMenuProps>;
 export declare const DropdownMenuItem: ParentComponent<{
-    onSelect: () => void;
+    onSelect?: () => void;
 }>;
 export default DropdownMenu;

package/dist/components/FilterBar/AddFilter.d.ts

@@ -3,7 +3,6 @@ interface AddFilterProps<T> {
     availableFields: FilterField<T>[];
     onAddFilters: (filters: Filter<T>[]) => void;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
-    setOpen: (v: boolean) => void;
 }
 export declare const AddFilter: <T>(props: AddFilterProps<T>) => import("solid-js").JSX.Element;
 export default AddFilter;

package/dist/components/FilterBar/AddFilter.jsx

@@ -3,7 +3,6 @@ import FiltersEdit from "./FiltersEdit";
 export const AddFilter = (props) => {
     const handleSaveFilters = (filters) => {
         props.onAddFilters(filters);
-        props.setOpen(false);
     };
     return (<FiltersEdit addConditionTrigger={<>
           <Plus class="h-[1em] w-[1em]"/> <span>Condition</span>

package/dist/components/FilterBar/EditAdvancedFilter.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "solid-js";
+import { AdvancedFilter } from "./FilterBar";
+interface EditAdvancedFilterProps {
+    filter?: AdvancedFilter;
+    onSave: (filter: AdvancedFilter) => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+export declare const EditAdvancedFilter: Component<EditAdvancedFilterProps>;
+export default EditAdvancedFilter;

package/dist/components/FilterBar/EditAdvancedFilter.jsx

@@ -0,0 +1,16 @@
+import { createSignal } from "solid-js";
+import { Input } from "../Input";
+import { Button } from "../Button";
+export const EditAdvancedFilter = (props) => {
+    const [filter, setFilter] = createSignal(props.filter ?? { filter: "", label: "Filter" });
+    return (<div class="flex flex-col gap-2 sm:min-w-150">
+      <Input label="Filter Name" value={filter().label} onChange={(v) => setFilter({ ...filter(), label: v })}/>
+      <Input label="Expression" inputProps={{ placeholder: "Expression", class: "w-full" }} value={filter().filter} onChange={(v) => setFilter({ ...filter(), filter: v })} size={props.size}/>
+      <div class="flex justify-end">
+        <Button appearance="success" onClick={() => props.onSave(filter())}>
+          Save
+        </Button>
+      </div>
+    </div>);
+};
+export default EditAdvancedFilter;

package/dist/components/FilterBar/EditFilters.d.ts

@@ -3,7 +3,6 @@ interface EditFiltersProps<T> {
     availableFields: FilterField<T>[];
     onSaveFilters: (filters: Filter<T>[]) => void;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
-    setOpen: (v: boolean) => void;
     currentFilters: Filter<T>[];
 }
 export declare const EditFilters: <T>(props: EditFiltersProps<T>) => import("solid-js").JSX.Element;

package/dist/components/FilterBar/EditFilters.jsx

@@ -3,7 +3,6 @@ import FiltersEdit from "./FiltersEdit";
 export const EditFilters = (props) => {
     const handleSaveFilters = (filters) => {
         props.onSaveFilters(filters);
-        props.setOpen(false);
     };
     return (<FiltersEdit addConditionTrigger={<>
           <Plus class="h-[1em] w-[1em]"/> <span>Condition</span>

package/dist/components/FilterBar/FilterBar.d.ts

@@ -1,17 +1,13 @@
 import { JSXElement } from "solid-js";
 export type FieldType = "text" | "number" | "date" | "select" | "bool";
-export type FilterOperator = "loose_contains" | "fuzzy_match" | "is" | "is_not" | "greater_than" | "less_than" | "between" | "in" | "not_in" | "is_set" | "is_not_set";
+export type FilterOperator = "=" | "!=" | ">" | ">=" | "<" | "<=" | "~" | "!~" | "?=" | "?!=" | "?>" | "?>=" | "?<" | "?<=" | "?~" | "?!~";
 export declare const filterDefaults: Record<FieldType, FilterOperator>;
 export declare const filterLabels: Record<FieldType, Partial<Record<FilterOperator, string>>>;
 export type FilterSelectValue = {
     label: string;
     value: string;
 };
-export type FilterDateValue = {
-    startDate: Date | null;
-    endDate: Date | null;
-};
-export type FilterValue = string | number | boolean | FilterSelectValue | FilterDateValue | null;
+export type FilterValue = string | number | boolean | FilterSelectValue | Date | null;
 export interface Filter<T> {
     field: FilterField<T>;
     operator: FilterOperator;
@@ -20,6 +16,10 @@ export interface Filter<T> {
 export interface FilterGroup<T> {
     filters: Filter<T>[];
 }
+export interface AdvancedFilter {
+    label: string;
+    filter: string;
+}
 export interface FilterField<T> {
     name: keyof T;
     label: string;
@@ -33,22 +33,31 @@ export interface SortOption<T> {
     field: keyof T;
     direction: "asc" | "desc";
 }
+interface SavedFilterPreset<T> {
+    filter: AdvancedFilter;
+    sortBy?: SortOption<T>[];
+    onApply: () => void;
+}
 interface FilterBarProps<T> {
-    items?: (Filter<T> | FilterGroup<T>)[];
-    setItems?: (items: (Filter<T> | FilterGroup<T>)[]) => void;
+    items?: (Filter<T> | FilterGroup<T> | AdvancedFilter)[];
+    setItems?: (items: (Filter<T> | FilterGroup<T> | AdvancedFilter)[]) => void;
     availableFields?: FilterField<T>[];
     leftAction?: JSXElement;
     sortBy?: SortOption<T>;
     setSortBy?: (sort?: SortOption<T>) => void;
     onAddFilterGroup: (filters: Filter<T>[]) => void;
     onUpdateFilterGroup: (ind: number, filters: Filter<T>[]) => void;
-    onFilterRemove: (ind: number, filter: Filter<T>) => void;
+    onAddAdvancedFilter: (filter: AdvancedFilter) => void;
+    onUpdateAdvancedFilter: (ind: number, filter: AdvancedFilter) => void;
+    onFilterRemove: (ind: number, filter: Filter<T> | FilterGroup<T> | AdvancedFilter) => void;
     onGroupDrag: (sourceInd: number, targetInd: number, sourceFilterGroupInd?: number) => void;
     value: string;
     onChangeValue: (val: string) => void;
     placeholder?: string;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     class?: string;
+    savedFilters?: SavedFilterPreset<T>[];
+    onSavePreset?: (name: string, items: (Filter<T> | FilterGroup<T> | AdvancedFilter)[]) => void;
 }
 export declare const FilterBar: <T>(props: FilterBarProps<T>) => import("solid-js").JSX.Element;
 export {};

package/dist/components/FilterBar/FilterBar.jsx

@@ -1,62 +1,59 @@
-import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { createEffect, createMemo, createSignal, For, Match, onCleanup, Show, Switch, } from "solid-js";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { TextField } from "@kobalte/core/text-field";
 import { tv } from "tailwind-variants";
 import Search from "lucide-solid/icons/search";
 import ListFilter from "lucide-solid/icons/list-filter";
+import Plus from "lucide-solid/icons/plus";
+import Sparkles from "lucide-solid/icons/sparkles";
 import ArrowDown from "lucide-solid/icons/arrow-down-narrow-wide";
+import Save from "lucide-solid/icons/save";
 import invariant from "tiny-invariant";
-import { FilterChip, FilterGroupChip } from "./FilterChip";
+import { AdvancedFilterChip, FilterChip, FilterGroupChip } from "./FilterChip";
 import AddFilter from "./AddFilter";
 import AddSortingDropdown from "./AddSortingDropdown";
 import EditFilters from "./EditFilters";
 import { DropdownMenu } from "../DropdownMenu";
 import { Modal } from "../Modal";
+import EditAdvancedFilter from "./EditAdvancedFilter";
 import { Button } from "../Button";
+import { Input } from "../Input";
 export const filterDefaults = {
-    text: "loose_contains",
-    bool: "is",
-    number: "is",
-    select: "is",
-    date: "greater_than",
+    text: "~",
+    bool: "=",
+    number: "=",
+    select: "=",
+    date: ">",
 };
 export const filterLabels = {
     text: {
-        loose_contains: "Contains",
-        in: "Contains (strict)",
-        not_in: "Doesn't contain",
-        fuzzy_match: "Fuzzy contains",
-        is: "Is",
-        is_not: "Is not",
-        is_set: "Is set",
-        is_not_set: "Is not set",
+        "~": "Contains",
+        // "~*": "Fuzzy contains",
+        // "~": "Contains (strict)",
+        "!~": "Doesn't contain",
+        "=": "Is",
+        "!=": "Is not",
     },
     bool: {
-        is: "Is",
+        "=": "Is",
     },
     number: {
-        is: "Is",
-        greater_than: "Is greater than",
-        less_than: "Is less than",
-        between: "Is between",
-        is_not: "Is not",
+        "=": "Is",
+        ">": "Is greater than",
+        "<": "Is less than",
+        "!=": "Is not",
     },
     select: {
-        is: "Is",
-        is_not: "Is not",
-        in: "Contains",
-        not_in: "Doesn't contain",
-        is_set: "Is set",
-        is_not_set: "Is not set",
+        "=": "Is",
+        "!=": "Is not",
+        "~": "Contains",
+        "!~": "Doesn't contain",
     },
     date: {
-        greater_than: "Is after",
-        less_than: "Is before",
-        between: "Is between",
-        is: "Is",
-        is_not: "Is not",
-        is_set: "Is set",
-        is_not_set: "Is not set",
+        ">": "Is after",
+        "<": "Is before",
+        "=": "Is",
+        "!=": "Is not",
     },
 };
 const filterBarBase = tv({
@@ -96,6 +93,9 @@ export const FilterBar = (props) => {
     let ref;
     const [dragging, setDragging] = createSignal("idle");
     const [filterDropdownOpen, setFilterDropdownOpen] = createSignal(false);
+    const [saveFilterPresetOpen, setSaveFilterPresetOpen] = createSignal(false);
+    const [filterPresetName, setFilterPresetName] = createSignal("");
+    const [advancedFilterDropdownOpen, setAdvancedFilterDropdownOpen] = createSignal(false);
     const [showFieldDropdown, setShowFieldDropdown] = createSignal(false);
     const textFields = createMemo(() => props.availableFields?.filter((f) => f.type === "text"));
     const handleTextValueChange = (val) => {
@@ -106,14 +106,18 @@ export const FilterBar = (props) => {
     const createTextFilter = (field) => {
         const newFilter = {
             field,
-            operator: "loose_contains",
+            operator: "~",
             value: props.value,
         };
         props.onAddFilterGroup([newFilter]);
         handleTextValueChange("");
     };
-    const isFilterGroup = (item) => {
-        return "filters" in item;
+    const getFilterType = (item) => {
+        if ("filter" in item)
+            return "advanced";
+        if ("filters" in item)
+            return "group";
+        return "filter";
     };
     createEffect(() => {
         const element = ref;
@@ -178,12 +182,71 @@ export const FilterBar = (props) => {
             <Search class="w-[1em] h-[1em] opacity-90"/>
             <TextField.Input placeholder={props.placeholder || "Search"} class="grow focus:outline-none" onFocusIn={() => setShowFieldDropdown(!!props.value)} onFocusOut={() => setShowFieldDropdown(false)}/>
           </TextField>
-          <Modal title="Add filters" open={filterDropdownOpen()} onOpenChange={setFilterDropdownOpen}>
-            <Modal.Trigger as={Button} modifier="square" class="join-item">
+          <DropdownMenu>
+            <DropdownMenu.Trigger modifier="square" class="join-item">
               <ListFilter class="w-[1em] h-[1em]"/>
-            </Modal.Trigger>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <Show when={props.savedFilters && props.savedFilters.length > 0}>
+                <For each={props.savedFilters}>
+                  {(filter) => (<DropdownMenu.MenuItem onSelect={filter.onApply}>
+                      <a>
+                        <span>{filter.filter.label}</span>
+                      </a>
+                    </DropdownMenu.MenuItem>)}
+                </For>
+                <div class="bg-base-300 w-full h-px my-1"/>
+              </Show>
+              <DropdownMenu.MenuItem onSelect={() => setFilterDropdownOpen(true)}>
+                <a>
+                  <Plus class="h-[1em] w-[1em]"/>
+                  <span>Add filters</span>
+                </a>
+              </DropdownMenu.MenuItem>
+              <DropdownMenu.MenuItem onSelect={() => setAdvancedFilterDropdownOpen(true)}>
+                <a>
+                  <Sparkles class="h-[1em] w-[1em]"/>
+                  <span>Add Advanced filter</span>
+                </a>
+              </DropdownMenu.MenuItem>
+              <div class="bg-base-300 w-full h-px my-1"/>
+              <DropdownMenu.MenuItem onSelect={() => setSaveFilterPresetOpen(true)}>
+                <a>
+                  <Save class="h-[1em] w-[1em]"/>
+                  <span>Save current filters</span>
+                </a>
+              </DropdownMenu.MenuItem>
+            </DropdownMenu.Content>
+          </DropdownMenu>
+          <Modal title="Save Filter Preset" open={saveFilterPresetOpen()} onOpenChange={setSaveFilterPresetOpen}>
+            <Modal.Modal>
+              <div class="flex flex-col gap-3">
+                <Input value={filterPresetName()} onChange={setFilterPresetName} label="Name" inputProps={{ placeholder: "Name" }}/>
+                <Button appearance="success" onClick={() => {
+            if (filterPresetName()) {
+                props.onSavePreset?.(filterPresetName(), props.items ?? []);
+                setSaveFilterPresetOpen(false);
+            }
+        }}>
+                  Save
+                </Button>
+              </div>
+            </Modal.Modal>
+          </Modal>
+          <Modal title="Add filters" open={filterDropdownOpen()} onOpenChange={setFilterDropdownOpen}>
             <Modal.Modal class="bg-base-200">
-              <AddFilter size={props.size} availableFields={props.availableFields ?? []} onAddFilters={props.onAddFilterGroup} setOpen={setFilterDropdownOpen}/>
+              <AddFilter size={props.size} availableFields={props.availableFields ?? []} onAddFilters={(filters) => {
+            props.onAddFilterGroup(filters);
+            setFilterDropdownOpen(false);
+        }}/>
+            </Modal.Modal>
+          </Modal>
+          <Modal title="Add Advanced Filter" open={advancedFilterDropdownOpen()} onOpenChange={setAdvancedFilterDropdownOpen}>
+            <Modal.Modal>
+              <EditAdvancedFilter size={props.size} onSave={(filter) => {
+            props.onAddAdvancedFilter(filter);
+            setAdvancedFilterDropdownOpen(false);
+        }}/>
             </Modal.Modal>
           </Modal>
           <Show when={props.setSortBy}>
@@ -220,11 +283,29 @@ export const FilterBar = (props) => {
           {(item, i) => {
             const [itemOpen, setItemOpen] = createSignal(false);
             return (<Modal title="Edit filters" open={itemOpen()} onOpenChange={setItemOpen}>
-                <Show when={isFilterGroup(item)} fallback={<Modal.Trigger as={FilterChip} onDelete={() => props.onFilterRemove(i(), item)} filter={item} size={props.size} onGroupDrag={(sourceInd, sourceFilterGroupInd) => props.onGroupDrag(sourceInd, i(), sourceFilterGroupInd)} index={i()} setOpen={setItemOpen}/>}>
-                  <Modal.Trigger as={FilterGroupChip} filterGroup={item} size={props.size} onGroupDrag={(sourceInd, sourceFilterGroupInd) => props.onGroupDrag(sourceInd, i(), sourceFilterGroupInd)} index={i()} setOpen={setItemOpen}/>
-                </Show>
+                <Switch>
+                  <Match when={getFilterType(item) === "advanced"}>
+                    <Modal.Trigger as={AdvancedFilterChip} index={i()} size={props.size} filter={item} onDelete={() => props.onFilterRemove(i(), item)} setOpen={setItemOpen}/>
+                  </Match>
+                  <Match when={getFilterType(item) === "filter"}>
+                    <Modal.Trigger as={FilterChip} onDelete={() => props.onFilterRemove(i(), item)} filter={item} size={props.size} onGroupDrag={(sourceInd, sourceFilterGroupInd) => props.onGroupDrag(sourceInd, i(), sourceFilterGroupInd)} index={i()} setOpen={setItemOpen}/>
+                  </Match>
+                  <Match when={getFilterType(item) === "group"}>
+                    <Modal.Trigger as={FilterGroupChip} filterGroup={item} size={props.size} onGroupDrag={(sourceInd, sourceFilterGroupInd) => props.onGroupDrag(sourceInd, i(), sourceFilterGroupInd)} index={i()} setOpen={setItemOpen}/>
+                  </Match>
+                </Switch>
                 <Modal.Modal class="bg-base-200">
-                  <EditFilters size={props.size} availableFields={props.availableFields ?? []} onSaveFilters={(filters) => props.onUpdateFilterGroup(i(), filters)} currentFilters={isFilterGroup(item) ? item.filters : [item]} setOpen={setItemOpen}/>
+                  <Show when={getFilterType(item) === "group" || getFilterType(item) === "filter"} fallback={<EditAdvancedFilter size={props.size} filter={item} onSave={(updatedFilter) => {
+                        props.onUpdateAdvancedFilter(i(), updatedFilter);
+                        setItemOpen(false);
+                    }}/>}>
+                    <EditFilters size={props.size} availableFields={props.availableFields ?? []} onSaveFilters={(filters) => {
+                    props.onUpdateFilterGroup(i(), filters);
+                    setItemOpen(false);
+                }} currentFilters={getFilterType(item) === "group"
+                    ? item.filters
+                    : [item]}/>
+                  </Show>
                 </Modal.Modal>
               </Modal>);
         }}

package/dist/components/FilterBar/FilterChip.d.ts

@@ -1,7 +1,7 @@
-import { Setter } from "solid-js";
-import { Filter, FilterGroup } from "./FilterBar";
+import { Component, Setter } from "solid-js";
+import { AdvancedFilter, Filter, FilterGroup } from "./FilterBar";
 interface FilterChipOrGroupProps {
-    onGroupDrag: (sourceInd: number, sourceFilterGroupInd?: number) => void;
+    onGroupDrag?: (sourceInd: number, sourceFilterGroupInd?: number) => void;
     onDelete?: () => void;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     class?: string;
@@ -20,4 +20,8 @@ interface FilterGroupProps<T> extends FilterChipOrGroupProps {
     onClick?: (filterGroup: FilterGroup<T>) => void;
 }
 export declare const FilterGroupChip: <T>(props: FilterGroupProps<T>) => import("solid-js").JSX.Element;
+interface AdvancedFilterChipProps extends FilterChipOrGroupProps {
+    filter: AdvancedFilter;
+}
+export declare const AdvancedFilterChip: Component<AdvancedFilterChipProps>;
 export default FilterChip;

package/dist/components/FilterBar/FilterChip.jsx

@@ -2,6 +2,7 @@ import { createEffect, createMemo, createSignal, For, onCleanup } from "solid-js
 import { dropTargetForElements, draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import invariant from "tiny-invariant";
 import CloseIcon from "lucide-solid/icons/x";
+import Sparkles from "lucide-solid/icons/sparkles";
 import { tv } from "tailwind-variants";
 import { filterLabels } from "./FilterBar";
 import { Button } from "../Button";
@@ -39,9 +40,7 @@ export const FilterChip = (props) => {
                     return val.label;
                 }
                 else {
-                    let valText = val.startDate ? String(val.startDate.toLocaleDateString("en-GB")) : "";
-                    if (val.endDate)
-                        valText += ` - ${val.endDate.toLocaleDateString("en-GB")}`;
+                    let valText = val ? String(val.toLocaleDateString("en-GB")) : "";
                     return valText;
                 }
         }
@@ -74,7 +73,7 @@ export const FilterChip = (props) => {
                 if (source.data.index === props.index)
                     return;
                 // add the target ind and group source ind if it exists
-                props.onGroupDrag(source.data.index, source.data.groupIndex);
+                props.onGroupDrag?.(source.data.index, source.data.groupIndex);
             },
         });
         onCleanup(dispose);
@@ -167,7 +166,7 @@ export const FilterGroupChip = (props) => {
                 if (location.current.dropTargets[0].element !== ref)
                     return;
                 // add the target ind and group source ind if it exists
-                props.onGroupDrag(source.data.index, source.data.groupIndex);
+                props.onGroupDrag?.(source.data.index, source.data.groupIndex);
             },
         });
         onCleanup(dispose);
@@ -217,4 +216,77 @@ export const FilterGroupChip = (props) => {
       </Button>
     </div>);
 };
+export const AdvancedFilterChip = (props) => {
+    let ref;
+    const [dragging, setDragging] = createSignal("idle");
+    createEffect(() => {
+        const element = ref;
+        invariant(element);
+        const dispose = dropTargetForElements({
+            element,
+            canDrop() {
+                return false;
+            },
+            onDragEnter() {
+                setDragging("dragging-over");
+            },
+            onDrag() {
+                if (dragging() !== "dragging-over") {
+                    setDragging("dragging-over");
+                }
+            },
+            onDragLeave() {
+                setDragging("idle");
+            },
+            onDrop({ source }) {
+                setDragging("idle");
+                if (source.data.index === props.index)
+                    return;
+                // add the target ind and group source ind if it exists
+                props.onGroupDrag?.(source.data.index, source.data.groupIndex);
+            },
+        });
+        onCleanup(dispose);
+    });
+    createEffect(() => {
+        const element = ref;
+        invariant(element);
+        const dispose = draggable({
+            element,
+            getInitialData() {
+                return {
+                    isAdvancedFilterChip: true,
+                    index: props.index,
+                    isInGroup: false,
+                    groupIndex: -1,
+                };
+            },
+            onDragStart() {
+                setDragging("dragging");
+            },
+            onDrop() {
+                setDragging("idle");
+            },
+        });
+        onCleanup(() => dispose());
+    });
+    const bgStyle = createMemo(() => {
+        if (dragging() === "dragging-over") {
+            return { "background-color": "color-mix(in srgb, var(--color-primary) 10%, transparent)" };
+        }
+        return {};
+    });
+    return (<div class={filterChip({ size: props.size, class: props.class })} ref={ref} style={{ opacity: dragging() === "dragging" ? 0.2 : 1, ...bgStyle() }} onClick={() => props.setOpen?.((prev) => !prev)}>
+      <div class="tooltip tooltip-bottom tooltip-neutral flex items-center">
+        <Sparkles class="w-[0.9em] h-[0.9em] mr-1"/>
+        <span>{String(props.filter.label)}</span>
+        <div class="inline tooltip-content">
+          <span class="font-bold">{String(props.filter.filter)}</span>
+        </div>
+      </div>
+      {props.onDelete && (<Button onClick={props.onDelete} size="xs" variant="ghost" class="p-0.5 m-0 h-min">
+          <CloseIcon class="w-[1em] h-[1em]" stroke-width={4}/>
+        </Button>)}
+    </div>);
+};
 export default FilterChip;

package/dist/components/FilterBar/FilterEdit.jsx

@@ -1,5 +1,4 @@
 import { createMemo, createSignal, Match, Show, Switch } from "solid-js";
-import { createStore } from "solid-js/store";
 import X from "lucide-solid/icons/x";
 import { filterDefaults, filterLabels, } from "./FilterBar";
 import { Select } from "../Select";
@@ -17,9 +16,11 @@ export const FilterEdit = (props) => {
     const [selectedTextValue, setSelectedTextValue] = createSignal(props.filter.field?.type === "text" ? props.filter.value : "");
     const [selectedNumberValue, setSelectedNumberValue] = createSignal(props.filter.field?.type === "number" ? props.filter.value : 0);
     const [selectedSelectValue, setSelectedSelectValue] = createSignal(props.filter.field?.type === "select" ? props.filter.value : null);
-    const [selectedDateValues, setSelectedDateValues] = createStore(props.filter.field?.type === "date"
+    const [selectedDateValue, setSelectedDateValue] = createSignal(props.filter.field?.type === "date"
         ? props.filter.value
-        : { startDate: null, endDate: null });
+            ? new Date(props.filter.value)
+            : null
+        : null);
     const availableOperators = createMemo(() => props.filter.field
         ? Object.entries(filterLabels[props.filter.field.type]).map(([value, label]) => ({
             label,
@@ -28,26 +29,17 @@ export const FilterEdit = (props) => {
         : []);
     const handleOperatorChange = (operator) => {
         props.setOperator(operator);
-        if (["is_set", "is_not_set"].includes(operator ?? "")) {
-            props.setValue(null);
-            props.setCanConfirm(true);
-        }
-        else {
-            switch (props.filter.field?.type) {
-                case "number":
-                    props.setValue(0);
-                    props.setCanConfirm(true);
-                    return;
-                case "text":
-                    props.setValue("");
-                default:
-                    props.setValue(undefined);
-            }
-            props.setCanConfirm(false);
-            // hmm, for ux I don't want to clear too much when switching operator. will see how this feels.
-            // need to do this for canConfirm behaviour atm
-            setSelectedDateValues("endDate", null);
+        switch (props.filter.field?.type) {
+            case "number":
+                props.setValue(0);
+                props.setCanConfirm(true);
+                return;
+            case "text":
+                props.setValue("");
+            default:
+                props.setValue(undefined);
         }
+        props.setCanConfirm(false);
     };
     const handleFieldChange = (f) => {
         props.setField(f);
@@ -55,13 +47,8 @@ export const FilterEdit = (props) => {
         handleOperatorChange(newOperator);
     };
     const canConfirm = (val) => {
-        if (!props.filter.field || !props.filter.operator || val === undefined || val === "")
-            return false;
-        if (props.filter.field?.type === "date" &&
-            props.filter.operator === "between" &&
-            (selectedDateValues.endDate === null || selectedDateValues.startDate === null)) {
+        if (!props.filter.field || !props.filter.operator || val === undefined || val === "" || val === null)
             return false;
-        }
         return true;
     };
     const handleValueChange = (val) => {
@@ -104,8 +91,7 @@ export const FilterEdit = (props) => {
             { label: "Is False", value: false },
         ]} size={props.size} class="min-w-50"/>
           </Match>
-          <Match when={props.filter.field?.type === "text" &&
-            !["is_set", "is_not_set"].includes(props.filter.operator ?? "")}>
+          <Match when={props.filter.field?.type === "text"}>
             <Input label="Value" value={selectedTextValue()} onChange={(val) => {
             setSelectedTextValue(val);
             handleValueChange(val);
@@ -117,8 +103,7 @@ export const FilterEdit = (props) => {
             handleValueChange(val);
         }} inputProps={{ class: "w-full" }} size={props.size} class="min-w-50"/>
           </Match>
-          <Match when={props.filter.field?.type === "select" &&
-            !["is_set", "is_not_set"].includes(props.filter.operator ?? "")}>
+          <Match when={props.filter.field?.type === "select"}>
             <Show when={["in", "not_in"].includes(props.filter.operator ?? "")} fallback={<Select value={selectedSelectValue()} label="Value" labelKey="label" valueKey="value" onChange={(val) => {
                 setSelectedSelectValue(val);
                 handleValueChange(val);
@@ -129,28 +114,11 @@ export const FilterEdit = (props) => {
         }} size={props.size} class="min-w-50"/>
             </Show>
           </Match>
-          <Match when={props.filter.field?.type === "date" &&
-            !["is_set", "is_not_set"].includes(props.filter.operator ?? "")}>
-            <DateInput value={selectedDateValues.startDate} onChange={(val) => {
-            setSelectedDateValues("startDate", val);
-            let newVal = undefined;
-            if (val && !(props.filter.operator === "between" && selectedDateValues.endDate !== null)) {
-                newVal = { ...selectedDateValues };
-            }
-            handleValueChange(newVal);
-        }} max={selectedDateValues.endDate ? selectedDateValues.endDate.toISOString().slice(0, 10) : undefined} label={props.filter.operator === "between" ? "Start" : ""} size={props.size} class="min-w-50"/>
-            <Show when={props.filter.operator === "between"}>
-              <DateInput value={selectedDateValues.endDate} label="End" min={selectedDateValues.startDate
-            ? selectedDateValues.startDate.toISOString().slice(0, 10)
-            : undefined} onChange={(val) => {
-            setSelectedDateValues("endDate", val);
-            let newVal = undefined;
-            if (val && selectedDateValues.startDate !== null) {
-                newVal = { ...selectedDateValues };
-            }
-            handleValueChange(newVal);
-        }} size={props.size} class="min-w-50"/>
-            </Show>
+          <Match when={props.filter.field?.type === "date"}>
+            <DateInput value={selectedDateValue()} onChange={(val) => {
+            setSelectedDateValue(val);
+            handleValueChange(val);
+        }} label="Date" size={props.size} class="min-w-50"/>
           </Match>
         </Switch>
       </div>

package/dist/components/Form.d.ts

@@ -1,4 +1,4 @@
-import { JSXElement } from "solid-js";
+import { JSXElement, Setter } from "solid-js";
 import { type SwitchProps } from "./Switch";
 import { type SelectProps } from "./Select";
 import { type InputRootProps } from "./Input";
@@ -11,6 +11,7 @@ import { type FileInputProps } from "./FileInput";
 import { RelationPickerProps } from "./RelationPicker";
 export interface FormProps<T> {
     data: Partial<T>;
+    setData: Setter<Partial<T>>;
     title?: string;
     onSave?: (values: Partial<T>) => Promise<void>;
     onCancel?: () => void;

package/dist/components/Form.jsx

@@ -1,5 +1,4 @@
 import { splitProps } from "solid-js";
-import { createStore } from "solid-js/store";
 import { tv } from "tailwind-variants";
 import { InternalFormContext, useInternalFormContext } from "./formContext";
 import { Switch } from "./Switch";
@@ -18,17 +17,16 @@ const formClass = tv({
 });
 export function createForm() {
     const Form = (props) => {
-        const [values, setValues] = createStore({ ...props.data });
         const setValue = (key, value) => {
-            setValues(key, value);
+            props.setData((prev) => ({ ...prev, [key]: value }));
         };
         const getValue = (key) => {
-            return values[key];
+            return props.data[key];
         };
         const contextValue = { setValue, getValue };
         const handleSubmit = (e) => {
             e.preventDefault();
-            props.onSave?.(values);
+            props.onSave?.(props.data);
         };
         return (<InternalFormContext.Provider value={contextValue}>
         <form onSubmit={handleSubmit} class={formClass({ class: props.class })}>
@@ -94,18 +92,7 @@ export function createForm() {
         return (<Slider {...props} value={form.getValue(props.field)} onChange={(v) => form.setValue(props.field, v)}/>);
     };
     const RelationField = (props) => {
-        const form = useInternalFormContext();
-        const [local, others] = splitProps(props, ["onChange"]);
-        const handleChange = (val) => {
-            if (props.multi) {
-                form.setValue(props.field, (Array.isArray(val) ? val.map((v) => v.id) : []));
-            }
-            else {
-                form.setValue(props.field, (val?.id || null));
-            }
-            local.onChange?.(val);
-        };
-        return <RelationPicker {...others} onChange={handleChange}/>;
+        return <RelationPicker {...props}/>;
     };
     Form.TextField = TextField;
     Form.NumberField = NumberField;

package/dist/components/RelationPicker.jsx

@@ -121,14 +121,7 @@ export const RelationPicker = (props) => {
                       {!props.multi && values() && (props.href || props.onLinkClick) && (<a class="btn btn-ghost btn-primary btn-xs btn-square" href={props.href} onClick={() => props.onLinkClick?.(props.value)}>
                           <Link class="w-[1em] h-[1em]"/>
                         </a>)}
-                      <Combobox.Input onBlur={(e) => {
-                    if (!props.value) {
-                        e.currentTarget.value = "";
-                    }
-                    else {
-                        e.currentTarget.value = String(state.selectedOptions()[0][props.labelKey]);
-                    }
-                }} ref={inputRef} onInput={(e) => props.onTextInputChange?.(e.currentTarget.value)} onKeyDown={handleKeyDown}/>
+                      <Combobox.Input onBlur={(e) => (e.currentTarget.value = "")} ref={inputRef} onInput={(e) => props.onTextInputChange?.(e.currentTarget.value)} onKeyDown={handleKeyDown}/>
                     </>}>
                   <div class="flex flex-wrap gap-1 w-full">
                     <For each={state.selectedOptions()}>

package/dist/components/{Table/Table.jsx → Table.jsx}

@@ -7,8 +7,8 @@ import { createSolidTable, flexRender, getCoreRowModel } from "@tanstack/solid-t
 import { tv } from "tailwind-variants";
 import Loader from "lucide-solid/icons/loader";
 import GripVertical from "lucide-solid/icons/grip-vertical";
-import { triggerFlash } from "../../methods/triggerFlash";
-import { iconSize } from "../../constants";
+import { triggerFlash } from "../methods/triggerFlash";
+import { iconSize } from "../constants";
 const tableClass = tv({
     base: "table table-pin-rows",
     variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidpb/ui-kit",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/components/Table/index.d.ts

@@ -1 +0,0 @@
-export * from "./Table";

package/dist/components/Table/index.js

@@ -1 +0,0 @@
-export * from "./Table";