@vuu-ui/vuu-filters 0.7.0 → 0.7.1-debug

package/index.css

@@ -1,2 +1,57 @@
-.salt-theme{--vuuFilterEditor-lineHeight: 28px}.salt-density-high{--vuuFilterEditor-buttonWidth: 20px;--vuuFilterEditor-height: 22px;--vuuFilterEditor-lineHeight: 20px}.vuuFilterInput{--vuuFilterEditor-background: var(--salt-container-primary-background);--vuuFilterEditor-color: var(--salt-text-primary-foreground);--vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);--vuuFilterEditor-fontSize: var(--salt-text-fontSize);--vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);--vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);--vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);--vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);--vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);--vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);--vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);--vuuFilterEditor-suggestion-height: 24px;--vuuFilterEditor-variableColor: blue;align-items:center;border-color:var(--salt-container-secondary-borderColor);border-style:solid none;border-width:1px;box-sizing:border-box;display:flex;height:var(--vuuFilterEditor-height, 30px)}.vuuFilterInput-Editor{flex:1 1 auto;height:100%}.vuuFilterInput-FilterButton,.vuuFilterInput-ClearButton{--vuu-icon-size: 12px;--saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px)}.vuuIllustration{--vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);background:var(--salt-container-secondary-background);color:var(--salt-text-secondary-foreground)}.vuuFilterDropdown,.vuuFilterSwitch{--saltToolbarField-marginTop: 0;height:100%}.vuuFilterDropdown.saltFormField-focused:before{top:2px!important;bottom:2px!important}
+/* src/filter-input/FilterInput.css */
+.salt-theme {
+  --vuuFilterEditor-lineHeight: 28px;
+}
+.salt-density-high {
+  --vuuFilterEditor-buttonWidth: 20px;
+  --vuuFilterEditor-height: 22px;
+  --vuuFilterEditor-lineHeight: 20px;
+}
+.vuuFilterInput {
+  --vuuFilterEditor-background: var(--salt-container-primary-background);
+  --vuuFilterEditor-color: var(--salt-text-primary-foreground);
+  --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
+  --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
+  --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
+  --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
+  --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
+  --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);
+  --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
+  --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
+  --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);
+  --vuuFilterEditor-suggestion-height: 24px;
+  --vuuFilterEditor-variableColor: blue;
+  align-items: center;
+  border-color: var(--salt-container-secondary-borderColor);
+  border-style: solid none;
+  border-width: 1px;
+  box-sizing: border-box;
+  display: flex;
+  height: var(--vuuFilterEditor-height, 30px);
+}
+.vuuFilterInput-Editor {
+  flex: 1 1 auto;
+  height: 100%;
+}
+.vuuFilterInput-FilterButton,
+.vuuFilterInput-ClearButton {
+  --vuu-icon-size: 12px;
+  --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);
+}
+.vuuIllustration {
+  --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);
+  background: var(--salt-container-secondary-background);
+  color: var(--salt-text-secondary-foreground);
+}
+
+/* src/filter-toolbar/FilterToolbar.css */
+.vuuFilterDropdown,
+.vuuFilterSwitch {
+  --saltToolbarField-marginTop: 0;
+  height: 100%;
+}
+.vuuFilterDropdown.saltFormField-focused:before {
+  top: 2px !important;
+  bottom: 2px !important;
+}
 /*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/vuu-filters/src/filter-input/FilterInput.css", "../../../packages/vuu-filters/src/filter-toolbar/FilterToolbar.css"],
   "sourcesContent": ["\n.salt-theme {\n    --vuuFilterEditor-lineHeight: 28px;\n}\n\n.salt-density-high {\n    --vuuFilterEditor-buttonWidth: 20px;\n    --vuuFilterEditor-height: 22px;\n    --vuuFilterEditor-lineHeight: 20px;\n}\n\n.vuuFilterInput {\n    --vuuFilterEditor-background: var(--salt-container-primary-background);\n    --vuuFilterEditor-color: var(--salt-text-primary-foreground);\n    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n    --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);\n    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n    --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n    --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n    --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n    --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);\n    --vuuFilterEditor-suggestion-height: 24px;\n    --vuuFilterEditor-variableColor: blue;\n\n    align-items: center;\n    border-color: var(--salt-container-secondary-borderColor);\n    border-style: solid none;\n    border-width: 1px;\n    box-sizing: border-box;\n    display: flex;\n    height: var(--vuuFilterEditor-height, 30px);\n}\n\n.vuuFilterInput-Editor {\n    flex: 1 1 auto;\n    height: 100%;\n}\n\n.vuuFilterInput-FilterButton,\n.vuuFilterInput-ClearButton {\n    --vuu-icon-size: 12px;\n    --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);\n}\n\n.vuuIllustration {\n    --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);\n    background: var(--salt-container-secondary-background);\n    color: var(--salt-text-secondary-foreground);\n}\n\n\n", ".vuuFilterDropdown,\n.vuuFilterSwitch {\n    --saltToolbarField-marginTop: 0;\n\n    height: 100%;\n}\n\n.vuuFilterDropdown.saltFormField-focused:before {\n    top: 2px !important;\n    bottom: 2px !important;\n}"],
-  "mappings": "AACA,YACI,mCAGJ,mBACI,oCACA,+BACA,mCAGJ,gBACI,uEACA,6DACA,gEACA,sDACA,qEACA,4EACA,8EACA,uIACA,0EACA,4FACA,yEACA,0CACA,sCAEA,mBACA,yDACA,wBACA,iBACA,sBACA,aACA,2CAGJ,uBACI,cACA,YAGJ,yDAEI,sBACA,6DAGJ,iBACI,2FACA,sDACA,4CCjDJ,oCAEI,gCAEA,YAGJ,gDACI,kBACA",
+  "mappings": ";AACA;AACI;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AAAA;AAEI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;;;ACjDJ;AAAA;AAEI;AAEA;AAAA;AAGJ;AACI;AACA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vuu-ui/vuu-filters",
-  "version": "0.7.0",
+  "version": "0.7.1-debug",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.7.0",
-    "@vuu-ui/vuu-data": "0.7.0",
-    "@vuu-ui/vuu-utils": "0.7.0",
+    "@vuu-ui/vuu-codemirror": "0.7.1-debug",
+    "@vuu-ui/vuu-data": "0.7.1-debug",
+    "@vuu-ui/vuu-utils": "0.7.1-debug",
     "@salt-ds/core": "1.2.0",
     "@heswell/salt-lab": "1.0.0-alpha.2"
   },

package/types/column-filter/ColumnFilter.d.ts

@@ -0,0 +1,11 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { HTMLAttributes } from "react";
+type FilterPanelProps = HTMLAttributes<HTMLDivElement> & {
+    table: VuuTable;
+    columns: ColumnDescriptor[];
+    onFilterSubmit: (filterQuery: string, filter?: Filter) => void;
+};
+export declare const ColumnFilter: ({ className, table, columns, onFilterSubmit, ...htmlAttributes }: FilterPanelProps) => JSX.Element;
+export {};

package/types/column-filter/ColumnListItem.d.ts

@@ -0,0 +1,3 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { ListItemType } from "@heswell/salt-lab";
+export declare const ColumnListItem: ListItemType<ColumnDescriptor>;

package/types/column-filter/RangeFilter.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { TypeaheadParams } from "@vuu-ui/vuu-protocol-types";
+export type IRange = {
+    start?: number;
+    end?: number;
+};
+type RangeFilterProps = {
+    defaultTypeaheadParams: TypeaheadParams;
+    filterValues: IRange | undefined;
+    onChange: (newValues: IRange, filter?: Filter) => void;
+};
+export declare const RangeFilter: ({ defaultTypeaheadParams, filterValues, onChange, }: RangeFilterProps) => JSX.Element;
+export {};

package/types/column-filter/TypeaheadFilter.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TypeaheadParams } from "@vuu-ui/vuu-protocol-types";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+export type TypeaheadFilterProps = {
+    defaultTypeaheadParams: TypeaheadParams;
+    onChange: (newValues: string[], filter?: Filter) => void;
+    filterValues?: string[];
+};
+export declare const TypeaheadFilter: ({ defaultTypeaheadParams, filterValues, onChange: onFilterChange, }: TypeaheadFilterProps) => JSX.Element;

package/types/column-filter/index.d.ts

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

package/types/column-filter/useColumnFilterStore.d.ts

@@ -0,0 +1,12 @@
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { IRange } from "./RangeFilter";
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+export declare const useColumnFilterStore: (onFilterSubmit: (filterQuery: string, filter?: Filter) => void) => {
+    clear: () => void;
+    selectedColumnName: string;
+    rangeValue: IRange;
+    typeaheadValue: string[];
+    onSelectedColumnChange: (column: ColumnDescriptor | null) => void;
+    onRangeChange: (newValues: IRange, newFilter?: Filter) => void;
+    onTypeaheadChange: (newValues: string[], newFilter?: Filter) => void;
+};

package/types/column-filter/utils.d.ts

@@ -0,0 +1,4 @@
+import { Filter } from "@vuu-ui/vuu-filter-types";
+export declare const isStartsWithValue: (value: string) => boolean;
+export declare const getTypeaheadFilter: (column: string, filterValues: string[], isStartsWithFilter?: boolean) => Filter | undefined;
+export declare const getRangeFilter: (column: string, startValue?: number, endValue?: number) => Filter | undefined;

package/types/filter-input/useFilterSuggestionProvider.d.ts

@@ -1,3 +1,4 @@
+import { SuggestionFetcher } from "@vuu-ui/vuu-data";
 import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
 import { IFilterSuggestionProvider } from "@vuu-ui/vuu-filters";
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
@@ -10,5 +11,6 @@ export interface SuggestionProviderHookProps {
     namedFilters?: Map<string, string>;
     saveOptions?: FilterSaveOptions;
     table: VuuTable;
+    typeaheadHook?: () => SuggestionFetcher;
 }
-export declare const useFilterSuggestionProvider: ({ columns, namedFilters, saveOptions, table, }: SuggestionProviderHookProps) => IFilterSuggestionProvider;
+export declare const useFilterSuggestionProvider: ({ columns, namedFilters, saveOptions, table, typeaheadHook: useTypeahead, }: SuggestionProviderHookProps) => IFilterSuggestionProvider;

package/types/filter-utils.d.ts

@@ -1,3 +1,4 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
 import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
 import { Filter, FilterClause, FilterCombinatorOp } from "@vuu-ui/vuu-filter-types";
 export declare const AND = "and";
@@ -36,7 +37,7 @@ export declare const removeFilter: (sourceFilter: Filter, filterToRemove: Filter
 } | null;
 export declare const splitFilterOnColumn: (filter: Filter | null, columnName: string) => [Filter | null, Filter | null];
 export declare const overrideColName: (filter: Filter, column: string) => Filter;
-export declare const filterIncludesColumn: (filter: Filter, column: KeyedColumnDescriptor) => boolean;
+export declare const filterIncludesColumn: (filter: Filter, column: ColumnDescriptor) => boolean;
 export declare const filterEquals: (f1?: Filter, f2?: Filter, strict?: boolean) => boolean;
 export declare const updateFilter: (filter: Filter | undefined, newFilter: Filter | undefined, mode: "add" | "replace") => Filter | undefined;
 export {};

package/types/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./column-filter";
 export * from "./filter-input";
 export * from "./filter-toolbar";
 export * from "./filter-evaluation-utils";