@vuu-ui/vuu-filters 0.5.13 → 0.5.15

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@vuu-ui/vuu-filters",
-  "version": "0.5.13",
+  "version": "0.5.15",
+  "main": "src/index.ts",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
+  "scripts": {
+    "build": "node ../../scripts/run-build.mjs",
+    "lezer-generate:filter": "lezer-generator --output ./src/filter-input/filter-language-parser/generated/filter-parser.js ./src/filter-input/filter-language-parser/grammar/filter.grammar",
+    "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.js ./src/column-expression-input/column-language-parser/grammar/column.grammar",
+    "type-defs": "node ../../scripts/build-type-defs.mjs"
+  },
   "devDependencies": {
     "@lezer/generator": "^1.1.1"
   },
@@ -16,18 +23,10 @@
     "@lezer/common": "^1.0.1"
   },
   "peerDependencies": {
-    "@vuu-ui/vuu-data": "0.5.13",
-    "@vuu-ui/vuu-utils": "0.5.13",
+    "@vuu-ui/vuu-data": "0.5.15",
+    "@vuu-ui/vuu-utils": "0.5.15",
     "@heswell/salt-lab": "1.0.0-alpha.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  },
-  "files": [
-    "cjs",
-    "esm",
-    "index.css",
-    "index.css.map"
-  ],
-  "module": "esm/index.js",
-  "main": "cjs/index.js"
-}
+  }
+}

package/src/filter-input/FilterInput.css

@@ -0,0 +1,47 @@
+
+.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-borderColor-medium);
+    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);
+}
+
+

package/src/filter-input/FilterInput.tsx

@@ -0,0 +1,44 @@
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { Button } from "@salt-ds/core";
+import { HTMLAttributes } from "react";
+import { SuggestionConsumer, useCodeMirrorEditor } from "./useCodeMirrorEditor";
+
+import "./FilterInput.css";
+
+const classBase = "vuuFilterInput";
+
+export interface FilterInputProps
+  extends SuggestionConsumer,
+    HTMLAttributes<HTMLDivElement> {
+  existingFilter?: Filter;
+  onSubmitFilter?: (
+    filter: Filter | undefined,
+    filterQuery: string,
+    filterName?: string
+  ) => void;
+}
+
+export const FilterInput = ({
+  existingFilter,
+  onSubmitFilter,
+  suggestionProvider,
+  ...props
+}: FilterInputProps) => {
+  const { editorRef, clearInput } = useCodeMirrorEditor({
+    existingFilter,
+    onSubmitFilter,
+    suggestionProvider,
+  });
+
+  return (
+    <div {...props} className={classBase}>
+      <Button className={`${classBase}-FilterButton`} data-icon="filter" />
+      <div className={`${classBase}-Editor`} ref={editorRef} />
+      <Button
+        className={`${classBase}-ClearButton`}
+        data-icon="close-circle"
+        onClick={clearInput}
+      />
+    </div>
+  );
+};

package/src/filter-input/codemirror-basic-setup.ts

@@ -0,0 +1,100 @@
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting
+} from "@codemirror/language";
+import { Extension } from "@codemirror/state";
+import {
+  drawSelection, highlightSpecialChars, keymap
+} from "@codemirror/view";
+// import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
+// import {
+//   autocompletion,
+//   completionKeymap,
+//   closeBrackets,
+//   closeBracketsKeymap,
+// } from "@codemirror/autocomplete";
+// import { lintKeymap } from "@codemirror/lint";
+
+// (The superfluous function calls around the list of extensions work
+// around current limitations in tree-shaking software.)
+
+/// This is an extension value that just pulls together a number of
+/// extensions that you might want in a basic editor. It is meant as a
+/// convenient helper to quickly set up CodeMirror without installing
+/// and importing a lot of separate packages.
+///
+/// Specifically, it includes...
+///
+///  - [the default command bindings](#commands.defaultKeymap)
+///  - [line numbers](#view.lineNumbers)
+///  - [special character highlighting](#view.highlightSpecialChars)
+///  - [the undo history](#commands.history)
+///  - [a fold gutter](#language.foldGutter)
+///  - [custom selection drawing](#view.drawSelection)
+///  - [drop cursor](#view.dropCursor)
+///  - [multiple selections](#state.EditorState^allowMultipleSelections)
+///  - [reindentation on input](#language.indentOnInput)
+///  - [the default highlight style](#language.defaultHighlightStyle) (as fallback)
+///  - [bracket matching](#language.bracketMatching)
+///  - [bracket closing](#autocomplete.closeBrackets)
+///  - [autocompletion](#autocomplete.autocompletion)
+///  - [rectangular selection](#view.rectangularSelection) and [crosshair cursor](#view.crosshairCursor)
+///  - [active line highlighting](#view.highlightActiveLine)
+///  - [active line gutter highlighting](#view.highlightActiveLineGutter)
+///  - [selection match highlighting](#search.highlightSelectionMatches)
+///  - [search](#search.searchKeymap)
+///  - [linting](#lint.lintKeymap)
+///
+/// (You'll probably want to add some language package to your setup
+/// too.)
+///
+/// This extension does not allow customization. The idea is that,
+/// once you decide you want to configure your editor more precisely,
+/// you take this package's source (which is just a bunch of imports
+/// and an array literal), copy it into your own code, and adjust it
+/// as desired.
+// export const basicSetup: Extension = (() => [
+//   lineNumbers(),
+//   highlightActiveLineGutter(),
+//   highlightSpecialChars(),
+//   history(),
+//   foldGutter(),
+//   drawSelection(),
+//   dropCursor(),
+//   EditorState.allowMultipleSelections.of(true),
+//   indentOnInput(),
+//   syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+//   bracketMatching(),
+//   closeBrackets(),
+//   autocompletion(),
+//   rectangularSelection(),
+//   crosshairCursor(),
+//   highlightActiveLine(),
+//   highlightSelectionMatches(),
+//   keymap.of([
+//     ...closeBracketsKeymap,
+//     ...defaultKeymap,
+//     ...searchKeymap,
+//     ...historyKeymap,
+//     ...foldKeymap,
+//     ...completionKeymap,
+//     ...lintKeymap,
+//   ]),
+// ])();
+
+/// A minimal set of extensions to create a functional editor. Only
+/// includes [the default keymap](#commands.defaultKeymap), [undo
+/// history](#commands.history), [special character
+/// highlighting](#view.highlightSpecialChars), [custom selection
+/// drawing](#view.drawSelection), and [default highlight
+/// style](#language.defaultHighlightStyle).
+export const minimalSetup: Extension = (() => [
+  highlightSpecialChars(),
+  history(),
+  drawSelection(),
+  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  keymap.of([...defaultKeymap, ...historyKeymap]),
+])();
+
+export { EditorView } from "@codemirror/view";

package/src/filter-input/filter-language-parser/FilterLanguage.ts

@@ -0,0 +1,21 @@
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { styleTags, tags as tag } from "@lezer/highlight";
+import { parser } from "./generated/filter-parser";
+
+const filterLanguage = LRLanguage.define({
+  name: "VuuFilterQuery",
+  parser: parser.configure({
+    props: [
+      styleTags({
+        Identifier: tag.variableName,
+        String: tag.string,
+        Or: tag.emphasis,
+        Operator: tag.operator,
+      }),
+    ],
+  }),
+});
+
+export const filterLanguageSupport = () => {
+  return new LanguageSupport(filterLanguage);
+};

package/src/filter-input/filter-language-parser/generated/filter-parser.js

@@ -0,0 +1,16 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import {LRParser} from "@lezer/lr"
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "%jOVQPOOOOQO'#Cc'#CcO[QQO'#CbOOQO'#Ca'#CaOvQQO'#C`O!UQQO'#C_O!aQQO'#C^QOQPOOOOQO'#Ce'#CeO!iQPO,58|O!tQPO,59]OVQPO'#C|O!yQQO,58zOVQPO'#C}O#XQQO,58yO#dQPO'#CyOOQO,58x,58xO#iQPO'#CoOOQO'#Cm'#CmOOQO1G.h1G.hO!iQPO1G.wOOQO,59h,59hOOQO-E6z-E6zOOQO,59i,59iOOQO-E6{-E6{OOQO,59e,59eO#nQPO,59ZO#sQPO'#CtO#{QPO7+$cOOQO1G.u1G.uO!iQPO'#C{O$QQPO,59`OOQO<<G}<<G}OOQO,59g,59gOOQO-E6y-E6y",
+  stateData: "$Y~OtOS~OWPO~OYWOZWO[WO]WO^WO_WO`WOfYO~OkZOlSXnSXrSX~Ol]OnRXrRX~On_OrQX~OWbObbOdaO~OgdO~OkZOlSanSarSa~Ol]OnRarRa~OWiO~OWjO~OdmO~OinOjhX~OjpO~OinOjha~O",
+  goto: "#]rPPsvy!P!W!]P!bPPPPPPP!eP!nP!WPP!sPPPP!vP!y#P#VRVORUOQTORg]SSO]ReZVROZ]VQOZ]RXQQcXQkdRqnVbXdnRldR`UQokRroQ[SRf[Q^TRh^",
+  nodeNames: "⚠ Filter Expression OrExpression AndExpression FilterClause ColumnValueExpression Column Identifier Operator Eq NotEq Gt Lt Contains Starts Ends Value Int String Quote ColumnSetExpression In LBrack Values Comma RBrack And Or AsClause As",
+  maxTerm: 36,
+  skippedNodes: [0],
+  repeatNodeCount: 3,
+  tokenData: "1U~RkXY!vYZ!v]^!vpq!vqr#Xrs#d|}#i!Q![#n!^!_#v!_!`#{!`!a$Q!c!}$V!}#O$h#P#Q$m#R#S$V#T#U$r#U#V$V#V#W&p#W#X$V#X#Y*i#Y#]$V#]#^,e#^#c$V#c#d-a#d#g$V#g#h.]#h#o$V~!{St~XY!vYZ!v]^!vpq!v~#[P!_!`#_~#dOZ~~#iOd~~#nOi~~#sPb~!Q![#n~#{O]~~$QOY~~$VO[~P$[SWP!Q![$V!c!}$V#R#S$V#T#o$V~$mOg~~$rOj~R$wWWP!Q![$V!c!}$V#R#S$V#T#b$V#b#c%a#c#g$V#g#h&]#h#o$VR%fUWP!Q![$V!c!}$V#R#S$V#T#W$V#W#X%x#X#o$VR&PSkQWP!Q![$V!c!}$V#R#S$V#T#o$VR&dSnQWP!Q![$V!c!}$V#R#S$V#T#o$VR&uUWP!Q![$V!c!}$V#R#S$V#T#c$V#c#d'X#d#o$VR'^UWP!Q![$V!c!}$V#R#S$V#T#b$V#b#c'p#c#o$VR'uUWP!Q![$V!c!}$V#R#S$V#T#h$V#h#i(X#i#o$VR(^TWP!Q![$V!c!}$V#R#S$V#T#U(m#U#o$VR(rUWP!Q![$V!c!}$V#R#S$V#T#]$V#]#^)U#^#o$VR)ZUWP!Q![$V!c!}$V#R#S$V#T#b$V#b#c)m#c#o$VR)rUWP!Q![$V!c!}$V#R#S$V#T#g$V#g#h*U#h#o$VR*]S^QWP!Q![$V!c!}$V#R#S$V#T#o$VR*nUWP!Q![$V!c!}$V#R#S$V#T#b$V#b#c+Q#c#o$VR+VUWP!Q![$V!c!}$V#R#S$V#T#W$V#W#X+i#X#o$VR+nUWP!Q![$V!c!}$V#R#S$V#T#g$V#g#h,Q#h#o$VR,XS`QWP!Q![$V!c!}$V#R#S$V#T#o$VR,jUWP!Q![$V!c!}$V#R#S$V#T#b$V#b#c,|#c#o$VR-TSWPfQ!Q![$V!c!}$V#R#S$V#T#o$VR-fUWP!Q![$V!c!}$V#R#S$V#T#f$V#f#g-x#g#o$VR.PSWPlQ!Q![$V!c!}$V#R#S$V#T#o$VR.bUWP!Q![$V!c!}$V#R#S$V#T#h$V#h#i.t#i#o$VR.yTWP!Q![$V!c!}$V#R#S$V#T#U/Y#U#o$VR/_UWP!Q![$V!c!}$V#R#S$V#T#f$V#f#g/q#g#o$VR/vUWP!Q![$V!c!}$V#R#S$V#T#h$V#h#i0Y#i#o$VR0_UWP!Q![$V!c!}$V#R#S$V#T#g$V#g#h0q#h#o$VR0xSWP_Q!Q![$V!c!}$V#R#S$V#T#o$V",
+  tokenizers: [0, 1],
+  topRules: {"Filter":[0,1]},
+  tokenPrec: 0
+})

package/src/filter-input/filter-language-parser/generated/filter-parser.terms.js

@@ -0,0 +1,32 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const
+  Filter = 1,
+  Expression = 2,
+  OrExpression = 3,
+  AndExpression = 4,
+  FilterClause = 5,
+  ColumnValueExpression = 6,
+  Column = 7,
+  Identifier = 8,
+  Operator = 9,
+  Eq = 10,
+  NotEq = 11,
+  Gt = 12,
+  Lt = 13,
+  Contains = 14,
+  Starts = 15,
+  Ends = 16,
+  Value = 17,
+  Int = 18,
+  String = 19,
+  Quote = 20,
+  ColumnSetExpression = 21,
+  In = 22,
+  LBrack = 23,
+  Values = 24,
+  Comma = 25,
+  RBrack = 26,
+  And = 27,
+  Or = 28,
+  AsClause = 29,
+  As = 30

package/src/filter-input/filter-language-parser/grammar/filter.grammar

@@ -0,0 +1,53 @@
+@top Filter { Expression }
+
+Expression { OrExpression AsClause?}
+
+OrExpression { AndExpression (Or AndExpression)* }
+
+AndExpression { FilterClause ( And FilterClause )* }
+
+AsClause { As Identifier }
+
+FilterClause { ColumnValueExpression | ColumnSetExpression }
+
+ColumnValueExpression { Column Operator Value }
+
+ColumnSetExpression { Column In LBrack Values RBrack }
+
+NumericColumn { "~"+ }
+
+StringColumn { "$"+ }
+
+Column { Identifier }
+
+Operator { Eq | NotEq | Gt | Lt | Contains | Starts | Ends }
+
+Values { Value (Comma Value)* }
+
+Value { Identifier | Int | String }
+
+String { Quote Identifier Quote }
+
+@skip { space  }
+
+@tokens {
+  Contains { "contains" }
+  Starts { "starts" }
+  Ends { "ends" }
+  And { "and" }
+  Or { "or" }
+  As { "as" }
+  In { "in" }
+  Eq { "=" }
+  NotEq { "!=" }
+  Gt { ">" }
+  Lt { "<" }
+  Quote { "\""}
+  Comma { "," }
+  LBrack { "[" }
+  RBrack { "]" }
+  Identifier { $[a-zA-Z_]$[a-zA-Z_0-9]* }
+  Int { std.digit+ }
+  // String { '"' (!["\\] | "\\" _)* '"' }
+  space { $[ \t\n\r]+ }
+}

package/src/filter-input/filter-language-parser/index.ts

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

package/src/filter-input/filter-language-parser/walkTree.ts

@@ -0,0 +1,237 @@
+import { Tree } from "@lezer/common";
+import { Filter as FilterType } from "../../filterTypes";
+
+class Filter {
+  #name: string | undefined;
+  expression?: OrExpression;
+  get lastExpression(): AndExpression | undefined {
+    if (this.expression) {
+      const { filters: f } = this.expression;
+      return f[f.length - 1];
+    }
+  }
+  get lastFilterClause(): FilterClause | undefined {
+    const andExpression = this.lastExpression;
+    if (andExpression) {
+      const { filters: f } = andExpression;
+      return f[f.length - 1];
+    }
+  }
+
+  get name(): string | undefined {
+    return this.#name;
+  }
+  setName(value: string) {
+    this.#name = value;
+  }
+  toJson(): FilterType {
+    return this.expression?.toJson(this.#name);
+  }
+}
+class OrExpression {
+  add(expression: AndExpression) {
+    this.filters.push(expression);
+  }
+  filters: any[] = [];
+  toJson(name?: string) {
+    if (this.filters.length === 1) {
+      return this.filters[0].toJson(name);
+    } else if (this.filters.length > 1) {
+      return {
+        name,
+        op: "or",
+        filters: this.filters.map((f) => f.toJson()),
+      };
+    }
+  }
+}
+class AndExpression {
+  add(expression: FilterClause) {
+    this.filters.push(expression);
+  }
+  filters: FilterClause[] = [];
+  toJson(name?: string) {
+    if (this.filters.length === 1) {
+      return this.filters[0].toJson(name);
+    } else if (this.filters.length > 1) {
+      return {
+        name,
+        op: "and",
+        filters: this.filters.map((f) => f.toJson()),
+      };
+    }
+  }
+}
+class ColumnValueExpression {
+  column?: Column;
+  op?: string;
+  value?: string | number;
+  toJson(name?: string) {
+    return {
+      column: this.column?.name,
+      name,
+      op: this.op,
+      value: this.value,
+    };
+  }
+}
+class ColumnSetExpression {
+  column?: Column;
+  op?: "in";
+  values: (string | number)[] = [];
+  toJson(name?: string) {
+    return {
+      column: this.column?.name,
+      name,
+      op: "in",
+      values: this.values,
+    };
+  }
+}
+
+type FilterClause = ColumnValueExpression | ColumnSetExpression;
+
+class Column {
+  constructor(public name: string, private from: number, private to: number) {}
+}
+
+const peek = <T>(arr: unknown[]) => arr[arr.length - 1] as T;
+
+export const walkTree = (tree: Tree, source: string) => {
+  const queue: unknown[] = [];
+  const cursor = tree.cursor();
+  next: do {
+    const { name, from, to } = cursor;
+    // console.log(
+    //   `Node ${name} [${from}:${to}] '${source.substring(
+    //     cursor.from,
+    //     cursor.to
+    //   )}'`
+    // );
+
+    switch (name) {
+      case "Filter":
+        queue.push(new Filter());
+        break;
+      case "OrExpression":
+        peek<Filter>(queue).expression = new OrExpression();
+        break;
+      case "AndExpression":
+        peek<Filter>(queue).expression?.add(new AndExpression());
+        break;
+      case "And":
+      case "In":
+      case "LBrack":
+      case "RBrack":
+      case "Quote":
+      case "Comma":
+      case "Value":
+      case "Values":
+      case "FilterClause":
+        // nothing to do
+        break;
+      case "ColumnValueExpression":
+        {
+          const lastExpression = peek<Filter>(queue).lastExpression;
+          if (lastExpression) {
+            lastExpression.add(new ColumnValueExpression());
+          } else {
+            throw Error("boo");
+          }
+        }
+        break;
+
+      case "ColumnSetExpression":
+        {
+          const lastExpression = peek<Filter>(queue).lastExpression;
+          if (lastExpression) {
+            lastExpression.add(new ColumnSetExpression());
+          } else {
+            throw Error("hoo");
+          }
+        }
+        break;
+
+      case "Column":
+        {
+          const lastFilterClause = peek<Filter>(queue).lastFilterClause;
+          if (lastFilterClause) {
+            const value = source.substring(from, to);
+            lastFilterClause.column = new Column(value, from, to);
+            cursor.next();
+          } else {
+            throw Error("wah");
+          }
+        }
+        break;
+
+      case "Operator":
+        {
+          const lastFilterClause = peek<Filter>(queue).lastFilterClause;
+          if (lastFilterClause) {
+            const value = source.substring(from, to);
+            lastFilterClause.op = value;
+            cursor.next();
+          } else {
+            throw Error("wah");
+          }
+        }
+        break;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      case "String":
+        // skip the open and close quote
+        cursor.next();
+        cursor.next();
+        cursor.next();
+      // fall thru, intentional
+
+      // eslint-disable-next-line no-fallthrough
+      case "Int":
+        {
+          const lastFilterClause = peek<Filter>(queue).lastFilterClause;
+          if (lastFilterClause) {
+            const value = source.substring(from, to);
+            const typedValue = name === "Int" ? parseInt(value, 10) : value;
+            if (lastFilterClause instanceof ColumnSetExpression) {
+              lastFilterClause.values.push(typedValue);
+            } else {
+              lastFilterClause.value = typedValue;
+            }
+          } else {
+            throw Error("wah");
+          }
+        }
+        break;
+
+      case "Or":
+        {
+          // lets p0retend for now that Or clauses only occur at te top
+          peek<Filter>(queue).expression?.add(new AndExpression());
+        }
+        break;
+
+      case "AsClause":
+        {
+          cursor.next();
+          const { name: nm1 } = cursor;
+          if (nm1 === "As") {
+            cursor.next();
+            const { name: nm2, from: f2, to: t2 } = cursor;
+            if (nm2 === "Identifier") {
+              peek<Filter>(queue)?.setName(source.substring(f2, t2));
+            }
+          } else {
+            continue next;
+          }
+        }
+        break;
+
+      default:
+      // console.log(`%cwhat do we do with a ${name}`, "color:red");
+    }
+  } while (cursor.next());
+
+  return queue[0] as Filter;
+};

package/src/filter-input/highlighting.ts

@@ -0,0 +1,9 @@
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+
+const myHighlightStyle = HighlightStyle.define([
+  { tag: tags.variableName, color: "var(--vuuFilterEditor-variableColor)" },
+  { tag: tags.comment, color: "green", fontStyle: "italic" },
+]);
+
+export const vuuHighlighting = syntaxHighlighting(myHighlightStyle);

package/src/filter-input/index.ts

@@ -0,0 +1,2 @@
+export * from "./FilterInput";
+export * from "./useCodeMirrorEditor";

package/src/filter-input/theme.ts

@@ -0,0 +1,50 @@
+import { EditorView } from "@codemirror/view";
+
+export const vuuTheme = EditorView.theme(
+  {
+    "&": {
+      color: "var(--vuuFilterEditor-color)",
+      backgroundColor: "var(--vuuFilterEditor-background)",
+      fontSize: "var(--vuuFilterEditor-fontSize)",
+    },
+    ".cm-content": {
+      caretColor: "var(--vuuFilterEditor-cursorColor)",
+      padding: 0,
+    },
+    ".cm-line": {
+      lineHeight: "var(--vuuFilterEditor-lineHeight)",
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--vuuFilterEditor-cursorColor)",
+    },
+    "&.cm-focused .cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)",
+    },
+    ".cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)",
+    },
+    ".cm-scroller": {
+      fontFamily: "var(--vuuFilterEditor-fontFamily)",
+    },
+    ".cm-tooltip": {
+      background: "var(--vuuFilterEditor-tooltipBackground)",
+      border: "var(--vuuFilterEditor-tooltipBorder)",
+      boxShadow: "var(--vuuFilterEditor-tooltipElevation)",
+      "&.cm-tooltip-autocomplete > ul": {
+        fontFamily: "var(--vuuFilterEditor-fontFamily)",
+        fontSize: "var(--vuuFilterEditor-fontSize)",
+        maxHeight: "240px",
+      },
+      "&.cm-tooltip-autocomplete > ul > li": {
+        height: "var(--vuuFilterEditor-suggestion-height)",
+        padding: "0 3px",
+        lineHeight: "var(--vuuFilterEditor-suggestion-height)",
+      },
+      "&.cm-tooltip-autocomplete li[aria-selected]": {
+        background: "var(--vuuFilterEditor-suggestion-selectedBackground)",
+        color: "var(--vuuFilterEditor-suggestion-selectedColor)",
+      },
+    },
+  },
+  { dark: false }
+);