@tellaro/tql 0.1.0

package/dist/vue/TqlAutocomplete.vue2.js

@@ -0,0 +1,136 @@
+import { defineComponent as C, ref as y, watch as $, nextTick as D, computed as L, onMounted as T, onUnmounted as S, openBlock as l, createBlock as B, Teleport as z, createElementBlock as s, normalizeStyle as A, createElementVNode as d, Fragment as H, renderList as I, normalizeClass as k, toDisplayString as p, createCommentVNode as u } from "vue";
+const K = { class: "tql-completion-list" }, M = ["aria-selected", "onClick", "onMouseenter"], U = { class: "tql-completion-content" }, V = { class: "tql-completion-label" }, N = {
+  key: 0,
+  class: "tql-completion-detail"
+}, O = {
+  key: 0,
+  class: "tql-completion-kind-badge"
+}, R = {
+  key: 0,
+  class: "tql-completion-docs"
+}, Q = /* @__PURE__ */ C({
+  __name: "TqlAutocomplete",
+  props: {
+    items: {},
+    visible: { type: Boolean },
+    position: {},
+    maxHeight: {}
+  },
+  emits: ["select", "close"],
+  setup(i, { expose: w, emit: b }) {
+    const t = i, a = b, e = y(0), c = y(null);
+    $(
+      () => t.items,
+      () => {
+        e.value = 0, r();
+      }
+    );
+    function r() {
+      D(() => {
+        if (!c.value) return;
+        const o = c.value.querySelector(".tql-completion-item.selected");
+        o && o.scrollIntoView({ block: "nearest" });
+      });
+    }
+    function f(o) {
+      if (!(!t.visible || t.items.length === 0))
+        switch (o.key) {
+          case "ArrowDown":
+            o.preventDefault(), e.value = (e.value + 1) % t.items.length, r();
+            break;
+          case "ArrowUp":
+            o.preventDefault(), e.value = (e.value - 1 + t.items.length) % t.items.length, r();
+            break;
+          case "Enter":
+          case "Tab":
+            o.preventDefault(), t.items[e.value] && a("select", t.items[e.value]);
+            break;
+          case "Escape":
+            o.preventDefault(), a("close");
+            break;
+        }
+    }
+    function q(o) {
+      return {
+        field: "pi pi-tag",
+        operator: "pi pi-code",
+        value: "pi pi-hashtag",
+        keyword: "pi pi-key",
+        snippet: "pi pi-file-edit",
+        mutator: "pi pi-wrench",
+        aggregation: "pi pi-chart-bar",
+        logicalOp: "pi pi-sitemap",
+        typeHint: "pi pi-info-circle",
+        visualization: "pi pi-chart-line"
+      }[o] || "pi pi-circle";
+    }
+    function _(o) {
+      return `tql-completion-kind-${o}`;
+    }
+    const x = L(() => ({
+      "--dropdown-top": `${t.position.top}px`,
+      "--dropdown-left": `${t.position.left}px`,
+      "--dropdown-max-height": `${t.maxHeight || 300}px`
+    }));
+    function h(o) {
+      const m = o.target;
+      c.value && !c.value.contains(m) && a("close");
+    }
+    return T(() => {
+      document.addEventListener("keydown", f), document.addEventListener("mousedown", h);
+    }), S(() => {
+      document.removeEventListener("keydown", f), document.removeEventListener("mousedown", h);
+    }), w({
+      selectCurrent: () => {
+        t.items[e.value] && a("select", t.items[e.value]);
+      },
+      moveUp: () => {
+        e.value = (e.value - 1 + t.items.length) % t.items.length, r();
+      },
+      moveDown: () => {
+        e.value = (e.value + 1) % t.items.length, r();
+      }
+    }), (o, m) => {
+      var g;
+      return l(), B(z, { to: "body" }, [
+        i.visible && i.items.length > 0 ? (l(), s("div", {
+          key: 0,
+          ref_key: "listRef",
+          ref: c,
+          class: "tql-autocomplete-dropdown",
+          style: A(x.value),
+          role: "listbox",
+          "aria-label": "TQL completions"
+        }, [
+          d("div", K, [
+            (l(!0), s(H, null, I(i.items, (n, v) => (l(), s("div", {
+              key: `${n.kind}-${n.label}`,
+              class: k(["tql-completion-item", { selected: v === e.value }]),
+              role: "option",
+              "aria-selected": v === e.value,
+              onClick: (E) => a("select", n),
+              onMouseenter: (E) => e.value = v
+            }, [
+              d("span", {
+                class: k(["tql-completion-icon", _(n.kind)])
+              }, [
+                d("i", {
+                  class: k(q(n.kind))
+                }, null, 2)
+              ], 2),
+              d("span", U, [
+                d("span", V, p(n.label), 1),
+                n.detail ? (l(), s("span", N, p(n.detail), 1)) : u("", !0)
+              ]),
+              n.kind ? (l(), s("span", O, p(n.kind), 1)) : u("", !0)
+            ], 42, M))), 128))
+          ]),
+          (g = i.items[e.value]) != null && g.documentation ? (l(), s("div", R, p(i.items[e.value].documentation), 1)) : u("", !0)
+        ], 4)) : u("", !0)
+      ]);
+    };
+  }
+});
+export {
+  Q as default
+};

package/dist/vue/TqlInput.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/vue/TqlInput.vue.js

@@ -0,0 +1,7 @@
+import o from "./TqlInput.vue2.js";
+/* empty css              */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c0e226bb"]]);
+export {
+  _ as default
+};

package/dist/vue/TqlInput.vue2.js

@@ -0,0 +1,326 @@
+import { defineComponent as he, ref as f, toRef as D, watch as ge, computed as ye, onMounted as ke, openBlock as u, createElementBlock as s, normalizeClass as q, unref as p, Fragment as z, renderList as F, toDisplayString as P, createCommentVNode as b, withDirectives as L, vModelText as j, withKeys as be, withModifiers as we, createElementVNode as E, createVNode as qe, nextTick as C } from "vue";
+import Ce from "./TqlAutocomplete.vue.js";
+import { useTqlInput as Ve } from "./useTqlInput.js";
+const Se = {
+  key: 0,
+  class: "tql-highlight-layer",
+  "aria-hidden": "true"
+}, Re = ["placeholder", "disabled", "readonly", "rows"], xe = ["placeholder", "disabled", "readonly"], Te = {
+  key: 3,
+  class: "tql-validation-icon"
+}, Be = {
+  key: 0,
+  class: "pi pi-check-circle tql-icon-valid"
+}, De = {
+  key: 5,
+  class: "tql-validation-messages"
+}, Pe = {
+  key: 0,
+  class: "tql-error-suggestion"
+}, Ke = /* @__PURE__ */ he({
+  __name: "TqlInput",
+  props: {
+    modelValue: {},
+    placeholder: { default: "Enter TQL query..." },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    rows: { default: 3 },
+    multiline: { type: Boolean, default: !1 },
+    showValidation: { type: Boolean, default: !0 },
+    validateOnInput: { type: Boolean, default: !0 },
+    debounceMs: { default: 300 },
+    fieldSchema: {},
+    modelName: {},
+    snippets: {},
+    showSnippetButton: { type: Boolean, default: !1 },
+    autocomplete: { type: Boolean, default: !0 },
+    syntaxHighlighting: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "validation", "parse", "submit"],
+  setup(a, { expose: Q, emit: G }) {
+    const r = a, d = G, n = f(null), V = f(null), g = f(null), i = f(r.modelValue), y = f(!1), v = f(!1), k = f([]), m = f(-1), J = D(r, "modelValue"), W = D(r, "fieldSchema"), X = D(r, "snippets"), {
+      tokens: Y,
+      cursorPosition: S,
+      completionItems: I,
+      showAutocomplete: R,
+      isValid: Z,
+      errors: A,
+      hasErrors: K,
+      validate: _,
+      handleInput: ee,
+      handleCursorChange: h,
+      insertCompletion: te,
+      insertSnippet: le,
+      triggerAutocomplete: ne,
+      hideAutocomplete: x,
+      getTokenAtCursor: ae
+    } = Ve({
+      modelValue: J,
+      fieldSchema: W,
+      snippets: X,
+      validateOnInput: r.validateOnInput,
+      debounceMs: r.debounceMs,
+      autocomplete: r.autocomplete,
+      onValidation: (e) => d("validation", e),
+      onParse: (e) => d("parse", e)
+    });
+    ge(
+      () => r.modelValue,
+      (e) => {
+        e !== i.value && (i.value = e);
+      }
+    );
+    const oe = ye(() => {
+      if (!n.value || !V.value)
+        return { top: 0, left: 0 };
+      const e = V.value.getBoundingClientRect();
+      return {
+        top: e.bottom + 4,
+        left: e.left
+      };
+    });
+    function ie(e) {
+      const t = `tql-token tql-token-${e.type}`;
+      return A.value.some((o) => e.start >= o.start && e.end <= o.end) ? `${t} tql-token-error-range` : t;
+    }
+    function M(e) {
+      const t = e.target;
+      i.value = t.value, d("update:modelValue", t.value), ee(t.value), C(() => {
+        n.value && h(n.value.selectionStart || 0);
+      });
+    }
+    function T() {
+      if (n.value) {
+        const e = n.value.selectionStart || 0;
+        e !== S.value && h(e);
+      }
+    }
+    function N(e) {
+      var t, l, o, c;
+      if (e.key === "Tab" && !e.shiftKey) {
+        if (k.value.length > 0 && m.value >= 0) {
+          e.preventDefault(), ue();
+          return;
+        }
+        if (se()) {
+          e.preventDefault(), re();
+          return;
+        }
+      }
+      if (R.value && I.value.length > 0)
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), (t = g.value) == null || t.moveDown();
+            return;
+          case "ArrowUp":
+            e.preventDefault(), (l = g.value) == null || l.moveUp();
+            return;
+          case "Tab":
+          case "Enter":
+            if (e.key === "Enter" && !r.multiline) {
+              if (e.key === "Tab") {
+                e.preventDefault(), (o = g.value) == null || o.selectCurrent();
+                return;
+              }
+            } else {
+              e.preventDefault(), (c = g.value) == null || c.selectCurrent();
+              return;
+            }
+            break;
+          case "Escape":
+            e.preventDefault(), x(), B();
+            return;
+        }
+      if (e.key === " " && e.ctrlKey) {
+        e.preventDefault(), ne();
+        return;
+      }
+      e.key === "Enter" && (r.multiline && e.ctrlKey || !r.multiline && !R.value) && (e.preventDefault(), d("submit", i.value));
+    }
+    function ue() {
+      if (m.value++, m.value >= k.value.length) {
+        B();
+        return;
+      }
+      const e = k.value[m.value];
+      n.value && (n.value.setSelectionRange(e.start, e.end), n.value.focus(), h(e.start));
+    }
+    function B() {
+      k.value = [], m.value = -1;
+    }
+    function se() {
+      const e = S.value, t = i.value;
+      let l = !1, o = null;
+      for (let c = 0; c < e; c++) {
+        const w = t[c], me = c > 0 ? t[c - 1] : "";
+        (w === '"' || w === "'") && me !== "\\" && (l ? w === o && (l = !1, o = null) : (l = !0, o = w));
+      }
+      return l;
+    }
+    function re() {
+      const e = S.value, t = i.value;
+      for (let l = e; l < t.length; l++)
+        if (t[l] === '"' || t[l] === "'") {
+          const o = l + 1;
+          n.value && (n.value.setSelectionRange(o, o), h(o));
+          return;
+        }
+    }
+    function O() {
+      y.value = !0;
+    }
+    function H() {
+      y.value = !1, setTimeout(() => {
+        y.value || (x(), v.value = !1);
+      }, 200);
+    }
+    function ce(e) {
+      const t = te(e);
+      i.value = t.query, d("update:modelValue", t.query), t.placeholders.length > 0 ? (k.value = t.placeholders, m.value = 0) : B(), C(() => {
+        n.value && (n.value.focus(), n.value.setSelectionRange(t.newCursorPosition, t.newCursorPosition), h(t.newCursorPosition));
+      });
+    }
+    function de(e) {
+      const t = le(e);
+      i.value = t, d("update:modelValue", t), C(() => {
+        n.value && n.value.focus();
+      });
+    }
+    function fe() {
+      var e;
+      (e = n.value) == null || e.focus();
+    }
+    function pe() {
+      var e;
+      (e = n.value) == null || e.blur();
+    }
+    function U() {
+      var e;
+      return ((e = n.value) == null ? void 0 : e.selectionStart) || 0;
+    }
+    function $(e) {
+      n.value && (n.value.setSelectionRange(e, e), h(e));
+    }
+    function ve(e) {
+      const t = U(), l = i.value.substring(0, t), o = i.value.substring(t), c = l + e + o;
+      i.value = c, d("update:modelValue", c), C(() => {
+        $(t + e.length);
+      });
+    }
+    return Q({
+      focus: fe,
+      blur: pe,
+      validate: _,
+      insertText: ve,
+      insertSnippet: de,
+      getTokenAtPosition: ae,
+      getCursorPosition: U,
+      setCursorPosition: $
+    }), ke(() => {
+      document.addEventListener("selectionchange", T);
+    }), (e, t) => (u(), s("div", {
+      ref_key: "wrapperRef",
+      ref: V,
+      class: q([
+        "tql-input-wrapper",
+        {
+          "tql-input-focused": y.value,
+          "tql-input-invalid": p(K) && a.showValidation,
+          "tql-input-disabled": a.disabled,
+          "tql-input-multiline": a.multiline
+        }
+      ])
+    }, [
+      a.syntaxHighlighting ? (u(), s("div", Se, [
+        (u(!0), s(z, null, F(p(Y), (l, o) => (u(), s("span", {
+          key: o,
+          class: q(ie(l))
+        }, P(l.raw || l.value), 3))), 128))
+      ])) : b("", !0),
+      a.multiline ? L((u(), s("textarea", {
+        key: 1,
+        ref_key: "inputRef",
+        ref: n,
+        "onUpdate:modelValue": t[0] || (t[0] = (l) => i.value = l),
+        class: q(["tql-input", { "tql-input-highlighted": a.syntaxHighlighting }]),
+        placeholder: a.placeholder,
+        disabled: a.disabled,
+        readonly: a.readonly,
+        rows: a.rows,
+        spellcheck: "false",
+        autocomplete: "off",
+        autocapitalize: "off",
+        onInput: M,
+        onKeydown: N,
+        onFocus: O,
+        onBlur: H,
+        onClick: T
+      }, null, 42, Re)), [
+        [j, i.value]
+      ]) : L((u(), s("input", {
+        key: 2,
+        ref_key: "inputRef",
+        ref: n,
+        "onUpdate:modelValue": t[1] || (t[1] = (l) => i.value = l),
+        type: "text",
+        class: q(["tql-input", { "tql-input-highlighted": a.syntaxHighlighting }]),
+        placeholder: a.placeholder,
+        disabled: a.disabled,
+        readonly: a.readonly,
+        spellcheck: "false",
+        autocomplete: "off",
+        autocapitalize: "off",
+        onInput: M,
+        onKeydown: N,
+        onFocus: O,
+        onBlur: H,
+        onClick: T
+      }, null, 42, xe)), [
+        [j, i.value]
+      ]),
+      a.showValidation && i.value ? (u(), s("div", Te, [
+        p(Z) ? (u(), s("i", Be)) : (u(), s("i", {
+          key: 1,
+          class: "pi pi-exclamation-circle tql-icon-invalid tql-icon-clickable",
+          role: "button",
+          tabindex: "0",
+          title: "Click to show/hide errors",
+          onClick: t[2] || (t[2] = (l) => v.value = !v.value),
+          onKeydown: t[3] || (t[3] = be((l) => v.value = !v.value, ["enter"]))
+        }, null, 32))
+      ])) : b("", !0),
+      a.showSnippetButton && a.snippets && a.snippets.length > 0 ? (u(), s("button", {
+        key: 4,
+        type: "button",
+        class: "tql-snippet-button",
+        title: "Insert snippet",
+        onClick: t[4] || (t[4] = we(() => {
+        }, ["stop"]))
+      }, [...t[5] || (t[5] = [
+        E("i", { class: "pi pi-code" }, null, -1)
+      ])])) : b("", !0),
+      qe(Ce, {
+        ref_key: "autocompleteRef",
+        ref: g,
+        items: p(I),
+        visible: p(R) && y.value,
+        position: oe.value,
+        onSelect: ce,
+        onClose: p(x)
+      }, null, 8, ["items", "visible", "position", "onClose"]),
+      a.showValidation && p(K) && v.value && i.value ? (u(), s("div", De, [
+        (u(!0), s(z, null, F(p(A).slice(0, 3), (l, o) => (u(), s("div", {
+          key: o,
+          class: "tql-error-message"
+        }, [
+          t[6] || (t[6] = E("i", { class: "pi pi-exclamation-triangle" }, null, -1)),
+          E("span", null, P(l.message), 1),
+          l.suggestion ? (u(), s("span", Pe, P(l.suggestion), 1)) : b("", !0)
+        ]))), 128))
+      ])) : b("", !0)
+    ], 2));
+  }
+});
+export {
+  Ke as default
+};

package/dist/vue/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @tellaro/tql/vue
+ *
+ * Vue components and composables for TQL (Tellaro Query Language).
+ *
+ * @packageDocumentation
+ */
+export { default as TqlInput } from './TqlInput.vue';
+export { default as TqlAutocomplete } from './TqlAutocomplete.vue';
+export { useTqlInput, type UseTqlInputOptions } from './useTqlInput';

package/dist/vue/index.js

@@ -0,0 +1,8 @@
+import { default as o } from "./TqlInput.vue.js";
+import { default as p } from "./TqlAutocomplete.vue.js";
+import { useTqlInput as u } from "./useTqlInput.js";
+export {
+  p as TqlAutocomplete,
+  o as TqlInput,
+  u as useTqlInput
+};

package/dist/vue/useTqlInput.js

@@ -0,0 +1,166 @@
+import { useDebounceFn as te } from "@vueuse/core";
+import { ref as p, computed as h, watch as ne } from "vue";
+import { shouldTriggerCompletion as se, getCompletions as oe } from "../src/completionProvider.js";
+import { parseTql as re } from "../src/parser.js";
+import { findTokenAtPosition as R, tokenizeTql as ue } from "../src/tokenizer.js";
+import { validateTql as le } from "../src/validator.js";
+function me(V) {
+  const {
+    modelValue: i,
+    fieldSchema: u,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    snippets: ae,
+    // Reserved for future snippet support
+    fieldValues: y,
+    validateOnInput: j = !0,
+    debounceMs: D = 300,
+    autocomplete: C = !0,
+    onValidation: k,
+    onParse: q
+  } = V, v = p([]), w = p(null), d = p(null), c = p(0), m = p([]), T = p(!1), A = p(!1), Q = h(() => {
+    var e;
+    return ((e = d.value) == null ? void 0 : e.valid) ?? !0;
+  }), b = h(() => {
+    var e;
+    return ((e = d.value) == null ? void 0 : e.errors) ?? [];
+  }), P = h(() => {
+    var e;
+    return ((e = d.value) == null ? void 0 : e.warnings) ?? [];
+  }), _ = h(() => b.value.length > 0), $ = h(() => P.value.length > 0);
+  function E() {
+    return v.value = ue(i.value), v.value;
+  }
+  function B() {
+    const e = re(i.value);
+    return w.value = e, q == null || q(e), e;
+  }
+  function M() {
+    var s, r;
+    A.value = !0;
+    const e = (s = u == null ? void 0 : u.value) == null ? void 0 : s.map((l) => l.name), t = (r = u == null ? void 0 : u.value) == null ? void 0 : r.reduce(
+      (l, f) => (l[f.name] = f.type, l),
+      {}
+    ), n = le(i.value, {
+      availableFields: e,
+      fieldTypes: t,
+      strictMode: !1
+    });
+    return d.value = n, A.value = !1, k == null || k(n), n;
+  }
+  const G = te(M, D);
+  function I() {
+    if (!C) {
+      m.value = [];
+      return;
+    }
+    const e = oe(
+      {
+        query: i.value,
+        cursorPosition: c.value
+      },
+      {
+        fields: u == null ? void 0 : u.value,
+        fieldValues: y == null ? void 0 : y.value,
+        includeSnippets: !0,
+        maxItems: 15
+      }
+    );
+    m.value = e;
+  }
+  function H() {
+    I(), T.value = m.value.length > 0;
+  }
+  function W() {
+    T.value = !1;
+  }
+  function z(e) {
+    E(), j && G(), C && se(e, c.value) && (I(), T.value = m.value.length > 0);
+  }
+  function J(e) {
+    c.value = e, I();
+  }
+  function K(e) {
+    const t = i.value, n = c.value, s = R(v.value, n);
+    let r = n, l = n;
+    if (s && s.type !== "whitespace")
+      r = s.start, l = s.end;
+    else {
+      const a = v.value.filter((o) => o.end <= n && o.type !== "whitespace");
+      if (a.length > 0) {
+        const o = a[a.length - 1];
+        o.end === n && (r = o.start, l = o.end);
+      }
+    }
+    const f = t.substring(0, r), Y = t.substring(l), x = [];
+    let g = e.insertText;
+    const Z = [...e.insertText.matchAll(/\$(\d+)/g)].sort(
+      (a, o) => parseInt(a[1]) - parseInt(o[1])
+    );
+    let F = 0;
+    for (const a of Z) {
+      const o = g.indexOf(a[0]);
+      if (o !== -1) {
+        const O = r + o - F;
+        x.push({
+          start: O,
+          end: O
+          // Zero-width cursor position
+        }), g = g.replace(a[0], ""), F += a[0].length;
+      }
+    }
+    const S = f + g + Y, ee = x.length > 0 ? x[0].start : r + g.length;
+    return W(), { query: S, newCursorPosition: ee, placeholders: x };
+  }
+  function L(e) {
+    const t = i.value, n = c.value, s = t.substring(0, n), r = t.substring(n), f = s.length > 0 && !s.endsWith(" ") && !s.endsWith("(") ? " " : "";
+    return s + f + e.insertText + r;
+  }
+  function N() {
+    return R(v.value, c.value);
+  }
+  function U(e) {
+    return b.value.some((t) => e >= t.start && e < t.end);
+  }
+  function X(e) {
+    return b.value.filter((t) => e >= t.start && e < t.end);
+  }
+  return ne(
+    i,
+    (e) => {
+      e !== void 0 && z(e);
+    },
+    { immediate: !0 }
+  ), {
+    // State
+    tokens: v,
+    parseResult: w,
+    validationResult: d,
+    cursorPosition: c,
+    completionItems: m,
+    showAutocomplete: T,
+    isValidating: A,
+    // Computed
+    isValid: Q,
+    errors: b,
+    warnings: P,
+    hasErrors: _,
+    hasWarnings: $,
+    // Methods
+    tokenize: E,
+    parse: B,
+    validate: M,
+    updateCompletions: I,
+    triggerAutocomplete: H,
+    hideAutocomplete: W,
+    handleInput: z,
+    handleCursorChange: J,
+    insertCompletion: K,
+    insertSnippet: L,
+    getTokenAtCursor: N,
+    isPositionInError: U,
+    getErrorsAtPosition: X
+  };
+}
+export {
+  me as useTqlInput
+};