katalyst-tables 3.3.1 → 3.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1431a1666522842053ab70ae3da4f2610bf6fd819be4fe289d992f17c78e0d87
-  data.tar.gz: be2d0612b1620a052c58e6115b46e388ce3b54bd732d86ba45681bc679e19d68
+  metadata.gz: 15f5912b36b82347b774b75d9339a7f41cff2c6d9973c51e8f5142fd829b7814
+  data.tar.gz: da4fadb4364f0c2bf2d19a75a992ef7d00d912ca5c27d2d851fb96c32eaa7fbc
 SHA512:
-  metadata.gz: 9d04228e59216901da2268c3aac3dc6076f623fca6c61121a896b215d278265ae2a2fc5f06df97652be02a53a409eefe08fa7d21892a8d28c5d5457efe90a138
-  data.tar.gz: 25adbd55a147762f4a28aea24f194032eef8e1c27167bfca66a40bd48055b7a018235c94bbe95d6b1a7fe4d49d62d9f5c402034936a0755b394f923cab3668dc
+  metadata.gz: 74661bd722d18e4fdac80a0979a2516b500b6ad4402d03a396ce53b3b6cee2edb5c2ad9aa70086969033189a3a4622cb4ddd907269670228fc1e2838d5973189
+  data.tar.gz: 0262fadd6c9840db3a91575bb0ebfed71891abb00ecfcc6a73e0a87a8c666f7da85a5e60f26dc424f2e9388097812546b5900245d3f63377c524489b19272c5a

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,
   },
 ];