katalyst-tables 3.3.1 → 3.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1431a1666522842053ab70ae3da4f2610bf6fd819be4fe289d992f17c78e0d87
-  data.tar.gz: be2d0612b1620a052c58e6115b46e388ce3b54bd732d86ba45681bc679e19d68
+  metadata.gz: d65cbfb413fd7b0af947d48bad9dc622e1c83f7a659ba4cda14ed993c9aecb7d
+  data.tar.gz: 280f74a21d9e14bc418b83274f338b5dc568117df255043336c18cfccea3e4d1
 SHA512:
-  metadata.gz: 9d04228e59216901da2268c3aac3dc6076f623fca6c61121a896b215d278265ae2a2fc5f06df97652be02a53a409eefe08fa7d21892a8d28c5d5457efe90a138
-  data.tar.gz: 25adbd55a147762f4a28aea24f194032eef8e1c27167bfca66a40bd48055b7a018235c94bbe95d6b1a7fe4d49d62d9f5c402034936a0755b394f923cab3668dc
+  metadata.gz: 2c3500672cee22ac792eeb2f93eb3107fc94ce7f20320ced58f70a99de7f7e5a66543847615ac379a5004740ade01c553c60ef810ca8c7f854998beedb22219c
+  data.tar.gz: f73225573194edcab9e26a2517d6752dfdb7852c0e3284a82cd2c6fd5f47f47aeb185bece9a5f46b3c1191a0b3dfd203165b3eb68a9738e506b836afb342d280

data/README.md

@@ -227,7 +227,7 @@ query expressions such as `first_name:Aaron` or `created_at:>2024-01-01` and the
 will be automatically parsed and applied to the collection attribute, and the collection
 will automatically generate and apply ActiveRecord conditions to filter the given scope.
 
-There's also a frontend utility, `filter_with(collection:)` that will generate the form
+There's also a frontend utility, `table_query_with(collection:)` that will generate the form
 and show a modal that helps users to interact with the query interface. More details available
 in the [query](docs/query.md) documentation.
 

data/app/assets/builds/katalyst/tables.esm.js

@@ -533,15 +533,337 @@ class SelectionItemController extends Controller {
   }
 }
 
-class FilterModalController extends Controller {
+class QueryController extends Controller {
   static targets = ["modal"];
 
-  close(e) {
+  disconnect() {
+    delete this.pending;
+
+    document.removeEventListener("selectionchange", this.selection);
+  }
+
+  focus() {
+    if (document.activeElement === this.query) return;
+
+    this.query.addEventListener(
+      "focusin",
+      (e) => {
+        e.target.setSelectionRange(-1, -1);
+      },
+      { once: true },
+    );
+
+    this.query.focus();
+  }
+
+  closeModal() {
     delete this.modalTarget.dataset.open;
+
+    if (document.activeElement === this.query) document.activeElement.blur();
+
+    document.removeEventListener("selectionchange", this.selection);
+  }
+
+  openModal() {
+    this.modalTarget.dataset.open = true;
+
+    document.addEventListener("selectionchange", this.selection);
+  }
+
+  clear() {
+    if (this.query.value === "") {
+      // if the user presses escape once, browser clears  the input
+      // if the user presses escape again, get them out of here
+      this.closeModal();
+    }
+  }
+
+  submit() {
+    const hasFocus = this.isFocused;
+    const position = hasFocus && this.query.selectionStart;
+
+    if (this.pending) {
+      clearTimeout(this.pending);
+      delete this.pending;
+    }
+
+    // prevent an unnecessary `?q=` parameter from appearing in the URL
+    if (this.query.value === "") {
+      this.query.disabled = true;
+
+      // restore input and focus after form submission
+      setTimeout(() => {
+        this.query.disabled = false;
+        if (hasFocus) this.query.focus();
+      }, 0);
+    }
+
+    // add/remove current cursor position
+    if (hasFocus && position) {
+      this.position.value = position;
+      this.position.disabled = false;
+    } else {
+      this.position.value = "";
+      this.position.disabled = true;
+    }
+  }
+
+  update = () => {
+    if (this.pending) clearTimeout(this.pending);
+    this.pending = setTimeout(() => {
+      this.element.requestSubmit();
+    }, 300);
+  };
+
+  selection = () => {
+    if (this.isFocused) this.update();
+  };
+
+  beforeMorphAttribute(e) {
+    switch (e.detail.attributeName) {
+      case "data-open":
+        e.preventDefault();
+        break;
+    }
   }
 
-  open(e) {
-    this.modalTarget.dataset.open = "true";
+  get query() {
+    return this.element.querySelector("input[type=search]");
+  }
+
+  get position() {
+    return this.element.querySelector("input[name=p]");
+  }
+
+  get isFocused() {
+    return this.query === document.activeElement;
+  }
+}
+
+class QueryInputController extends Controller {
+  static targets = ["input", "highlight"];
+  static values = { query: String };
+
+  connect() {
+    this.queryValue = this.inputTarget.value;
+  }
+
+  update() {
+    this.queryValue = this.inputTarget.value;
+  }
+
+  queryValueChanged(query) {
+    this.highlightTarget.innerHTML = "";
+
+    new Parser().parse(query).tokens.forEach((token) => {
+      this.highlightTarget.appendChild(token.render());
+    });
+  }
+}
+
+class Parser {
+  constructor() {
+    this.tokens = [];
+    this.values = null;
+  }
+
+  parse(input) {
+    const query = new StringScanner(input);
+
+    while (!query.isEos()) {
+      this.push(this.skipWhitespace(query));
+
+      const value = this.takeTagged(query) || this.takeUntagged(query);
+
+      if (!this.push(value)) break;
+    }
+
+    return this;
+  }
+
+  push(token) {
+    if (token) {
+      this.values ? this.values.push(token) : this.tokens.push(token);
+    }
+
+    return !!token;
+  }
+
+  skipWhitespace(query) {
+    if (!query.scan(/\s+/)) return;
+
+    return new Token(query.matched());
+  }
+
+  takeUntagged(query) {
+    if (!query.scan(/\S+/)) return;
+
+    return new Untagged(query.matched());
+  }
+
+  takeTagged(query) {
+    if (!query.scan(/(\w+(?:\.\w+)?)(:\s*)/)) return;
+
+    const key = query.valueAt(1);
+    const separator = query.valueAt(2);
+
+    const value =
+      this.takeArrayValue(query) || this.takeSingleValue(query) || new Token();
+
+    return new Tagged(key, separator, value);
+  }
+
+  takeArrayValue(query) {
+    if (!query.scan(/\[\s*/)) return;
+
+    const start = new Token(query.matched());
+    const values = (this.values = []);
+
+    while (!query.isEos()) {
+      if (!this.push(this.takeSingleValue(query))) break;
+      if (!this.push(this.takeDelimiter(query))) break;
+    }
+
+    query.scan(/\s*]/);
+    const end = new Token(query.matched());
+
+    this.values = null;
+
+    return new Array$1(start, values, end);
+  }
+
+  takeDelimiter(query) {
+    if (!query.scan(/\s*,\s*/)) return;
+
+    return new Token(query.matched());
+  }
+
+  takeSingleValue(query) {
+    return this.takeQuotedValue(query) || this.takeUnquotedValue(query);
+  }
+
+  takeQuotedValue(query) {
+    if (!query.scan(/"([^"]*)"/)) return;
+
+    return new Value(query.matched());
+  }
+
+  takeUnquotedValue(query) {
+    if (!query.scan(/[^ \],]*/)) return;
+
+    return new Value(query.matched());
+  }
+}
+
+class Token {
+  constructor(value = "") {
+    this.value = value;
+  }
+
+  render() {
+    return document.createTextNode(this.value);
+  }
+}
+
+class Value extends Token {
+  render() {
+    const span = document.createElement("span");
+    span.className = "value";
+    span.innerText = this.value;
+
+    return span;
+  }
+}
+
+class Tagged extends Token {
+  constructor(key, separator, value) {
+    super();
+
+    this.key = key;
+    this.separator = separator;
+    this.value = value;
+  }
+
+  render() {
+    const span = document.createElement("span");
+    span.className = "tag";
+
+    const key = document.createElement("span");
+    key.className = "key";
+    key.innerText = this.key;
+
+    span.appendChild(key);
+    span.appendChild(document.createTextNode(this.separator));
+    span.appendChild(this.value.render());
+
+    return span;
+  }
+}
+
+class Untagged extends Token {
+  render() {
+    const span = document.createElement("span");
+    span.className = "untagged";
+    span.innerText = this.value;
+    return span;
+  }
+}
+
+let Array$1 = class Array extends Token {
+  constructor(start, values, end) {
+    super();
+
+    this.start = start;
+    this.values = values;
+    this.end = end;
+  }
+
+  render() {
+    const array = document.createElement("span");
+    array.className = "array-values";
+    array.appendChild(this.start.render());
+
+    this.values.forEach((value) => {
+      const span = document.createElement("span");
+      span.appendChild(value.render());
+      array.appendChild(span);
+    });
+
+    array.appendChild(this.end.render());
+
+    return array;
+  }
+};
+
+class StringScanner {
+  constructor(input) {
+    this.input = input;
+    this.position = 0;
+    this.last = null;
+  }
+
+  isEos() {
+    return this.position >= this.input.length;
+  }
+
+  scan(regex) {
+    const match = regex.exec(this.input.substring(this.position));
+    if (match?.index === 0) {
+      this.last = match;
+      this.position += match[0].length;
+      return true;
+    } else {
+      this.last = {};
+      return false;
+    }
+  }
+
+  matched() {
+    return this.last && this.last[0];
+  }
+
+  valueAt(index) {
+    return this.last && this.last[index];
   }
 }
 
@@ -567,8 +889,12 @@ const Definitions = [
     controllerConstructor: SelectionItemController,
   },
   {
-    identifier: "tables--filter--modal",
-    controllerConstructor: FilterModalController,
+    identifier: "tables--query",
+    controllerConstructor: QueryController,
+  },
+  {
+    identifier: "tables--query-input",
+    controllerConstructor: QueryInputController,
   },
 ];