@tellaro/tql 0.1.0 → 0.1.2

package/dist/vue/TqlInput.vue2.js

@@ -1,23 +1,47 @@
-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 = {
+import { defineComponent as Ge, ref as y, toRef as j, computed as E, watch as ye, onMounted as Je, nextTick as V, onUnmounted as Xe, openBlock as i, createElementBlock as a, normalizeStyle as _, normalizeClass as w, unref as u, Fragment as T, renderList as z, toDisplayString as m, createCommentVNode as v, withDirectives as ee, vModelText as te, createElementVNode as r, withModifiers as D, withKeys as me, createVNode as ge, createBlock as Ye, Teleport as Ze } from "vue";
+import _e from "./TqlAutocomplete.vue.js";
+import et from "./components/TqlPreview.vue.js";
+import { useTqlInput as tt } from "./useTqlInput.js";
+import { useQueryHistory as lt } from "./composables/useQueryHistory.js";
+import { analyzeComplexity as ot } from "../src/complexityAnalyzer.js";
+const it = {
   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 = {
+}, at = ["placeholder", "disabled", "readonly", "rows", "aria-expanded", "aria-invalid", "aria-describedby"], nt = ["placeholder", "disabled", "readonly", "aria-expanded", "aria-invalid", "aria-describedby"], st = { class: "tql-toolbar" }, ut = ["title"], rt = { class: "tql-complexity-label" }, dt = {
   key: 0,
-  class: "pi pi-check-circle tql-icon-valid"
-}, De = {
-  key: 5,
-  class: "tql-validation-messages"
-}, Pe = {
+  class: "tql-complexity-count"
+}, ct = {
+  key: 4,
+  class: "tql-validation-status"
+}, vt = {
+  key: 0,
+  class: "pi pi-check-circle tql-icon-valid",
+  "aria-label": "Query is valid"
+}, ft = ["aria-label", "aria-expanded"], pt = { class: "tql-history-header" }, ht = { class: "tql-history-list" }, yt = ["onClick"], mt = ["title", "onClick"], gt = { class: "tql-history-content" }, wt = {
+  key: 0,
+  class: "tql-history-label"
+}, bt = { class: "tql-history-query" }, qt = { class: "tql-history-time" }, kt = {
+  key: 0,
+  class: "tql-history-empty"
+}, xt = {
   key: 0,
   class: "tql-error-suggestion"
-}, Ke = /* @__PURE__ */ he({
+}, Ct = {
+  key: 4,
+  class: "tql-complexity-warnings"
+}, St = {
+  key: 0,
+  class: "tql-complexity-suggestions"
+}, Vt = {
+  key: 5,
+  class: "tql-preview-panel"
+}, Pt = { class: "tql-preview-header" }, Ht = {
+  class: "sr-only",
+  role: "status",
+  "aria-live": "polite",
+  "aria-atomic": "true"
+}, $t = { key: 0 }, Et = { key: 1 }, zt = /* @__PURE__ */ Ge({
   __name: "TqlInput",
   props: {
     modelValue: {},
@@ -30,297 +54,535 @@ const Se = {
     validateOnInput: { type: Boolean, default: !0 },
     debounceMs: { default: 300 },
     fieldSchema: {},
+    fieldValues: {},
     modelName: {},
     snippets: {},
     showSnippetButton: { type: Boolean, default: !1 },
     autocomplete: { type: Boolean, default: !0 },
-    syntaxHighlighting: { type: Boolean, default: !0 }
+    syntaxHighlighting: { type: Boolean, default: !0 },
+    alwaysShowErrors: { type: Boolean, default: !0 },
+    resizable: { type: Boolean, default: !1 },
+    minHeight: { default: void 0 },
+    showComplexity: { type: Boolean, default: !1 },
+    showHistory: { type: Boolean, default: !1 },
+    showPreview: { type: Boolean, default: !1 },
+    complexityThresholds: {},
+    historyOptions: {},
+    historyStorageKey: {}
   },
   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,
+  setup(o, { expose: we, emit: be }) {
+    const c = o, b = be, d = y(null), L = y(null), I = y(null), s = y(c.modelValue), q = y(!1), p = y(!1), x = y(!1), C = y(!1), R = y(""), W = `tql-input-${Math.random().toString(36).substring(2, 9)}`, le = `${W}-input`, G = `${W}-autocomplete`, J = `${W}-errors`, M = y([]), B = y(-1), qe = j(c, "modelValue"), ke = j(c, "fieldSchema"), xe = j(c, "fieldValues"), Ce = j(c, "snippets"), {
+      tokens: Se,
+      cursorPosition: X,
+      completionItems: Q,
+      showAutocomplete: k,
+      isValid: Y,
+      errors: P,
+      hasErrors: H,
+      validate: Ve,
+      handleInput: oe,
+      handleCursorChange: $,
+      insertCompletion: Pe,
+      insertSnippet: He,
+      triggerAutocomplete: ie,
+      hideAutocomplete: K,
+      getTokenAtCursor: $e
+    } = tt({
+      modelValue: qe,
+      fieldSchema: ke,
+      fieldValues: xe,
+      snippets: Ce,
+      validateOnInput: c.validateOnInput,
+      debounceMs: c.debounceMs,
+      autocomplete: c.autocomplete,
+      onValidation: (e) => b("validation", e),
+      onParse: (e) => b("parse", e)
+    }), S = c.showHistory ? lt({
+      storageKey: c.historyStorageKey || "tql-history",
+      ...c.historyOptions
+    }) : null, h = E(() => !c.showComplexity || !s.value.trim() ? null : ot(s.value, c.complexityThresholds)), Ee = E(() => h.value ? `tql-complexity-${h.value.score}` : ""), ae = E(() => h.value && {
+      low: "Low",
+      medium: "Medium",
+      high: "High"
+    }[h.value.score] || ""), ne = E(() => S ? R.value.trim() ? S.searchHistory(R.value).slice(0, 10) : S.getRecentQueries(10) : []);
+    function Re(e) {
+      s.value = e.query, b("update:modelValue", e.query), oe(e.query), x.value = !1, R.value = "", V(() => {
+        var t;
+        return (t = d.value) == null ? void 0 : t.focus();
+      });
+    }
+    function Be(e, t) {
+      t.stopPropagation(), S == null || S.toggleFavorite(e.id);
+    }
+    function se() {
+      S && s.value.trim() && S.addQuery(s.value);
+    }
+    function Te() {
+      x.value = !x.value, x.value && (C.value = !1);
+    }
+    function De() {
+      C.value = !C.value, C.value && (x.value = !1);
+    }
+    ye(
+      () => c.modelValue,
       (e) => {
-        e !== i.value && (i.value = e);
+        e !== s.value && (s.value = e);
       }
     );
-    const oe = ye(() => {
-      if (!n.value || !V.value)
-        return { top: 0, left: 0 };
-      const e = V.value.getBoundingClientRect();
-      return {
+    const Ie = E(() => c.alwaysShowErrors === !0 || c.alwaysShowErrors === void 0 || p.value), A = y({ top: 0, left: 0 }), Me = E(() => A.value.top > 0 || A.value.left > 0), ue = y({ top: 0, left: 0, width: 0 }), ze = E(() => {
+      const e = ue.value;
+      return e.top === 0 && e.left === 0 && e.width === 0 ? { display: "none" } : {
+        position: "fixed",
+        top: `${e.top}px`,
+        left: `${e.left}px`,
+        width: `${e.width}px`,
+        zIndex: 9998
+      };
+    });
+    function F() {
+      if (!L.value)
+        return;
+      const e = L.value.getBoundingClientRect();
+      A.value = {
         top: e.bottom + 4,
         left: e.left
+      }, ue.value = {
+        top: e.bottom + 4,
+        left: e.left,
+        width: e.width
       };
-    });
-    function ie(e) {
+    }
+    function Le(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;
+      return P.value.some((n) => e.start >= n.start && e.end <= n.end) ? `${t} tql-token-error-range` : t;
     }
-    function M(e) {
+    function re(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);
+      s.value = t.value, b("update:modelValue", t.value), oe(t.value), V(() => {
+        d.value && $(d.value.selectionStart || 0);
       });
     }
-    function T() {
-      if (n.value) {
-        const e = n.value.selectionStart || 0;
-        e !== S.value && h(e);
+    function O() {
+      if (d.value) {
+        const e = d.value.selectionStart || 0;
+        e !== X.value && $(e);
       }
     }
-    function N(e) {
-      var t, l, o, c;
+    function de(e) {
+      var t, l, n, f, g;
       if (e.key === "Tab" && !e.shiftKey) {
-        if (k.value.length > 0 && m.value >= 0) {
-          e.preventDefault(), ue();
+        if (M.value.length > 0 && B.value >= 0) {
+          e.preventDefault(), Qe();
           return;
         }
-        if (se()) {
-          e.preventDefault(), re();
+        if (Ke()) {
+          e.preventDefault(), Ae();
           return;
         }
       }
-      if (R.value && I.value.length > 0)
+      if (k.value && Q.value.length > 0)
         switch (e.key) {
           case "ArrowDown":
-            e.preventDefault(), (t = g.value) == null || t.moveDown();
+            e.preventDefault(), (t = I.value) == null || t.moveDown();
             return;
           case "ArrowUp":
-            e.preventDefault(), (l = g.value) == null || l.moveUp();
+            e.preventDefault(), (l = I.value) == null || l.moveUp();
             return;
           case "Tab":
+            e.preventDefault(), $(((n = d.value) == null ? void 0 : n.selectionStart) || 0), Q.value.length > 0 && ((f = I.value) == null || f.selectCurrent());
+            return;
           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;
+            if (!c.multiline)
+              break;
+            e.preventDefault(), (g = I.value) == null || g.selectCurrent();
+            return;
           case "Escape":
-            e.preventDefault(), x(), B();
+            e.preventDefault(), K(), Z();
             return;
         }
       if (e.key === " " && e.ctrlKey) {
-        e.preventDefault(), ne();
+        e.preventDefault(), ie();
         return;
       }
-      e.key === "Enter" && (r.multiline && e.ctrlKey || !r.multiline && !R.value) && (e.preventDefault(), d("submit", i.value));
+      e.key === "Enter" && (c.multiline && e.ctrlKey || !c.multiline && !k.value) && (e.preventDefault(), se(), b("submit", s.value));
     }
-    function ue() {
-      if (m.value++, m.value >= k.value.length) {
-        B();
+    function Qe() {
+      if (B.value++, B.value >= M.value.length) {
+        Z();
         return;
       }
-      const e = k.value[m.value];
-      n.value && (n.value.setSelectionRange(e.start, e.end), n.value.focus(), h(e.start));
+      const e = M.value[B.value];
+      d.value && (d.value.setSelectionRange(e.start, e.end), d.value.focus(), $(e.start));
     }
-    function B() {
-      k.value = [], m.value = -1;
+    function Z() {
+      M.value = [], B.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));
+    function Ke() {
+      const e = X.value, t = s.value;
+      let l = !1, n = null;
+      for (let f = 0; f < e; f++) {
+        const g = t[f], U = f > 0 ? t[f - 1] : "";
+        (g === '"' || g === "'") && U !== "\\" && (l ? g === n && (l = !1, n = null) : (l = !0, n = g));
       }
       return l;
     }
-    function re() {
-      const e = S.value, t = i.value;
+    function Ae() {
+      const e = X.value, t = s.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));
+          const n = l + 1;
+          d.value && (d.value.setSelectionRange(n, n), $(n));
           return;
         }
     }
-    function O() {
-      y.value = !0;
+    function ce() {
+      q.value = !0, V(() => {
+        F(), ie();
+      });
     }
-    function H() {
-      y.value = !1, setTimeout(() => {
-        y.value || (x(), v.value = !1);
+    function ve(e) {
+      const l = e.relatedTarget;
+      if (l != null && l.closest(".tql-autocomplete-dropdown")) {
+        setTimeout(() => {
+          q.value || (K(), p.value = !1);
+        }, 300);
+        return;
+      }
+      q.value = !1, setTimeout(() => {
+        q.value || (K(), p.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 Fe(e) {
+      const t = Pe(e);
+      s.value = t.query, b("update:modelValue", t.query), t.placeholders.length > 0 ? (M.value = t.placeholders, B.value = 0) : Z(), V(() => {
+        d.value && (d.value.focus(), d.value.setSelectionRange(t.newCursorPosition, t.newCursorPosition), $(t.newCursorPosition));
       });
     }
-    function de(e) {
-      const t = le(e);
-      i.value = t, d("update:modelValue", t), C(() => {
-        n.value && n.value.focus();
+    function Oe(e) {
+      const t = He(e);
+      s.value = t, b("update:modelValue", t), V(() => {
+        d.value && d.value.focus();
       });
     }
-    function fe() {
+    function Ne() {
       var e;
-      (e = n.value) == null || e.focus();
+      (e = d.value) == null || e.focus();
     }
-    function pe() {
+    function Ue() {
       var e;
-      (e = n.value) == null || e.blur();
+      (e = d.value) == null || e.blur();
     }
-    function U() {
+    function fe() {
       var e;
-      return ((e = n.value) == null ? void 0 : e.selectionStart) || 0;
+      return ((e = d.value) == null ? void 0 : e.selectionStart) || 0;
     }
-    function $(e) {
-      n.value && (n.value.setSelectionRange(e, e), h(e));
+    function pe(e) {
+      d.value && (d.value.setSelectionRange(e, e), $(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);
+    function je(e) {
+      const t = fe(), l = s.value.substring(0, t), n = s.value.substring(t), f = l + e + n;
+      s.value = f, b("update:modelValue", f), V(() => {
+        pe(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", {
+    function We(e) {
+      const l = Date.now() - e, n = Math.floor(l / 1e3), f = Math.floor(n / 60), g = Math.floor(f / 60), U = Math.floor(g / 24);
+      return U > 0 ? `${U}d ago` : g > 0 ? `${g}h ago` : f > 0 ? `${f}m ago` : "just now";
+    }
+    function he(e) {
+      var l;
+      const t = e.target;
+      (l = L.value) != null && l.contains(t) || (x.value = !1, C.value = !1);
+    }
+    we({
+      focus: Ne,
+      blur: Ue,
+      validate: Ve,
+      insertText: je,
+      insertSnippet: Oe,
+      getTokenAtPosition: $e,
+      getCursorPosition: fe,
+      setCursorPosition: pe
+    });
+    function N() {
+      (k.value || H.value) && q.value && F();
+    }
+    return Je(() => {
+      document.addEventListener("selectionchange", O), document.addEventListener("click", he), window.addEventListener("scroll", N, !0), window.addEventListener("resize", N), V(() => {
+        F();
+      });
+    }), ye(
+      () => H.value,
+      (e) => {
+        e && V(() => {
+          F();
+        });
+      },
+      { immediate: !0 }
+    ), Xe(() => {
+      document.removeEventListener("selectionchange", O), document.removeEventListener("click", he), window.removeEventListener("scroll", N, !0), window.removeEventListener("resize", N);
+    }), (e, t) => (i(), a("div", {
       ref_key: "wrapperRef",
-      ref: V,
-      class: q([
+      ref: L,
+      class: w([
         "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
+          "tql-input-focused": q.value,
+          "tql-input-invalid": u(H) && o.showValidation,
+          "tql-input-disabled": o.disabled,
+          "tql-input-multiline": o.multiline,
+          "tql-input-autocomplete-active": u(k),
+          "tql-input-resizable": o.resizable && o.multiline
         }
-      ])
+      ]),
+      style: _(o.minHeight ? { minHeight: o.minHeight } : void 0)
     }, [
-      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", {
+      o.syntaxHighlighting ? (i(), a("div", it, [
+        (i(!0), a(T, null, z(u(Se), (l, n) => (i(), a("span", {
+          key: n,
+          class: w(Le(l))
+        }, m(l.raw || l.value), 3))), 128))
+      ])) : v("", !0),
+      o.multiline ? ee((i(), a("textarea", {
         key: 1,
+        id: le,
         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,
+        ref: d,
+        "onUpdate:modelValue": t[0] || (t[0] = (l) => s.value = l),
+        class: w(["tql-input", { "tql-input-highlighted": o.syntaxHighlighting, "tql-input-resizable-textarea": o.resizable }]),
+        placeholder: o.placeholder,
+        disabled: o.disabled,
+        readonly: o.readonly,
+        rows: o.rows,
+        style: _(o.minHeight ? { minHeight: o.minHeight } : void 0),
+        role: "combobox",
+        "aria-expanded": u(k) && q.value,
+        "aria-controls": G,
+        "aria-invalid": u(H) && o.showValidation,
+        "aria-describedby": u(H) && p.value ? J : void 0,
+        "aria-autocomplete": "list",
+        "aria-haspopup": "listbox",
         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", {
+        onInput: re,
+        onKeydown: de,
+        onFocus: ce,
+        onBlur: ve,
+        onClick: O
+      }, null, 46, at)), [
+        [te, s.value]
+      ]) : ee((i(), a("input", {
         key: 2,
+        id: le,
         ref_key: "inputRef",
-        ref: n,
-        "onUpdate:modelValue": t[1] || (t[1] = (l) => i.value = l),
+        ref: d,
+        "onUpdate:modelValue": t[1] || (t[1] = (l) => s.value = l),
         type: "text",
-        class: q(["tql-input", { "tql-input-highlighted": a.syntaxHighlighting }]),
-        placeholder: a.placeholder,
-        disabled: a.disabled,
-        readonly: a.readonly,
+        class: w(["tql-input", { "tql-input-highlighted": o.syntaxHighlighting }]),
+        placeholder: o.placeholder,
+        disabled: o.disabled,
+        readonly: o.readonly,
+        role: "combobox",
+        "aria-expanded": u(k) && q.value,
+        "aria-controls": G,
+        "aria-invalid": u(H) && o.showValidation,
+        "aria-describedby": u(H) && p.value ? J : void 0,
+        "aria-autocomplete": "list",
+        "aria-haspopup": "listbox",
         spellcheck: "false",
         autocomplete: "off",
         autocapitalize: "off",
-        onInput: M,
-        onKeydown: N,
-        onFocus: O,
-        onBlur: H,
-        onClick: T
-      }, null, 42, xe)), [
-        [j, i.value]
+        onInput: re,
+        onKeydown: de,
+        onFocus: ce,
+        onBlur: ve,
+        onClick: O
+      }, null, 42, nt)), [
+        [te, s.value]
       ]),
-      a.showValidation && i.value ? (u(), s("div", Te, [
-        p(Z) ? (u(), s("i", Be)) : (u(), s("i", {
+      r("div", st, [
+        o.showComplexity && h.value && s.value.trim() ? (i(), a("div", {
+          key: 0,
+          class: w(["tql-complexity-badge", Ee.value]),
+          title: `${ae.value} complexity - ${h.value.warnings.length} warning(s)`
+        }, [
+          r("span", rt, m(ae.value), 1),
+          h.value.warnings.length > 0 ? (i(), a("span", dt, m(h.value.warnings.length), 1)) : v("", !0)
+        ], 10, ut)) : v("", !0),
+        o.showHistory ? (i(), a("button", {
           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(() => {
+          type: "button",
+          class: w(["tql-toolbar-button", { "tql-toolbar-button--active": x.value }]),
+          title: "Query history",
+          onClick: D(Te, ["stop"])
+        }, [...t[10] || (t[10] = [
+          r("i", { class: "pi pi-history" }, null, -1)
+        ])], 2)) : v("", !0),
+        o.showPreview ? (i(), a("button", {
+          key: 2,
+          type: "button",
+          class: w(["tql-toolbar-button", { "tql-toolbar-button--active": C.value }]),
+          title: "Preview query structure",
+          onClick: D(De, ["stop"])
+        }, [...t[11] || (t[11] = [
+          r("i", { class: "pi pi-sitemap" }, null, -1)
+        ])], 2)) : v("", !0),
+        o.showSnippetButton && o.snippets && o.snippets.length > 0 ? (i(), a("button", {
+          key: 3,
+          type: "button",
+          class: "tql-toolbar-button tql-snippet-button",
+          title: "Insert snippet",
+          onClick: t[2] || (t[2] = D(() => {
+          }, ["stop"]))
+        }, [...t[12] || (t[12] = [
+          r("i", { class: "pi pi-code" }, null, -1)
+        ])])) : v("", !0),
+        o.showValidation && s.value ? (i(), a("div", ct, [
+          u(Y) ? (i(), a("i", vt)) : (i(), a("i", {
+            key: 1,
+            class: "pi pi-exclamation-circle tql-icon-invalid tql-icon-clickable",
+            role: "button",
+            tabindex: "0",
+            title: "Click to show/hide errors",
+            "aria-label": `Query has ${u(P).length} error${u(P).length === 1 ? "" : "s"}. Click to ${p.value ? "hide" : "show"} details.`,
+            "aria-expanded": p.value,
+            onClick: t[3] || (t[3] = (l) => p.value = !p.value),
+            onKeydown: [
+              t[4] || (t[4] = me((l) => p.value = !p.value, ["enter"])),
+              t[5] || (t[5] = me(D((l) => p.value = !p.value, ["prevent"]), ["space"]))
+            ]
+          }, null, 40, ft))
+        ])) : v("", !0)
+      ]),
+      o.showHistory && x.value ? (i(), a("div", {
+        key: 3,
+        class: "tql-history-dropdown",
+        onClick: t[8] || (t[8] = D(() => {
         }, ["stop"]))
-      }, [...t[5] || (t[5] = [
-        E("i", { class: "pi pi-code" }, null, -1)
-      ])])) : b("", !0),
-      qe(Ce, {
+      }, [
+        r("div", pt, [
+          ee(r("input", {
+            "onUpdate:modelValue": t[6] || (t[6] = (l) => R.value = l),
+            type: "text",
+            class: "tql-history-search",
+            placeholder: "Search history...",
+            onKeydown: t[7] || (t[7] = D(() => {
+            }, ["stop"]))
+          }, null, 544), [
+            [te, R.value]
+          ])
+        ]),
+        r("div", ht, [
+          (i(!0), a(T, null, z(ne.value, (l) => (i(), a("div", {
+            key: l.id,
+            class: w(["tql-history-item", { "tql-history-item--favorite": l.isFavorite }]),
+            onClick: (n) => Re(l)
+          }, [
+            r("button", {
+              type: "button",
+              class: "tql-history-favorite",
+              title: l.isFavorite ? "Remove from favorites" : "Add to favorites",
+              onClick: (n) => Be(l, n)
+            }, [
+              r("i", {
+                class: w(l.isFavorite ? "pi pi-star-fill" : "pi pi-star")
+              }, null, 2)
+            ], 8, mt),
+            r("div", gt, [
+              l.label ? (i(), a("div", wt, m(l.label), 1)) : v("", !0),
+              r("div", bt, m(l.query), 1)
+            ]),
+            r("div", qt, m(We(l.timestamp)), 1)
+          ], 10, yt))), 128)),
+          ne.value.length === 0 ? (i(), a("div", kt, m(R.value ? "No matching queries" : "No query history"), 1)) : v("", !0)
+        ])
+      ])) : v("", !0),
+      ge(_e, {
+        id: G,
         ref_key: "autocompleteRef",
-        ref: g,
-        items: p(I),
-        visible: p(R) && y.value,
-        position: oe.value,
-        onSelect: ce,
-        onClose: p(x)
+        ref: I,
+        items: u(Q),
+        visible: u(k) && q.value && Me.value,
+        position: A.value,
+        onSelect: Fe,
+        onClose: u(K)
       }, 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"
+      (i(), Ye(Ze, { to: "body" }, [
+        o.showValidation && !u(Y) && Ie.value && s.value && u(P).length > 0 && !(u(k) && u(Q).length > 0) ? (i(), a("div", {
+          key: 0,
+          id: J,
+          class: "tql-validation-messages-portal",
+          style: _(ze.value),
+          role: "alert",
+          "aria-live": "polite"
         }, [
-          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));
+          (i(!0), a(T, null, z(u(P).slice(0, 3), (l, n) => (i(), a("div", {
+            key: n,
+            class: "tql-error-message"
+          }, [
+            t[13] || (t[13] = r("i", {
+              class: "pi pi-exclamation-triangle",
+              "aria-hidden": "true"
+            }, null, -1)),
+            r("span", null, m(l.message), 1),
+            l.suggestion ? (i(), a("span", xt, m(l.suggestion), 1)) : v("", !0)
+          ]))), 128))
+        ], 4)) : v("", !0)
+      ])),
+      o.showComplexity && h.value && h.value.warnings.length > 0 && !u(k) ? (i(), a("div", Ct, [
+        (i(!0), a(T, null, z(h.value.warnings.slice(0, 3), (l, n) => (i(), a("div", {
+          key: n,
+          class: w(["tql-complexity-warning", `tql-complexity-warning--${l.severity}`])
+        }, [
+          t[14] || (t[14] = r("i", {
+            class: "pi pi-info-circle",
+            "aria-hidden": "true"
+          }, null, -1)),
+          r("span", null, m(l.message), 1)
+        ], 2))), 128)),
+        h.value.suggestions.length > 0 ? (i(), a("div", St, [
+          (i(!0), a(T, null, z(h.value.suggestions.slice(0, 2), (l, n) => (i(), a("div", {
+            key: n,
+            class: "tql-complexity-suggestion"
+          }, [
+            t[15] || (t[15] = r("i", {
+              class: "pi pi-lightbulb",
+              "aria-hidden": "true"
+            }, null, -1)),
+            r("span", null, m(l), 1)
+          ]))), 128))
+        ])) : v("", !0)
+      ])) : v("", !0),
+      o.showPreview && C.value && s.value.trim() ? (i(), a("div", Vt, [
+        r("div", Pt, [
+          t[17] || (t[17] = r("span", null, "Query Structure", -1)),
+          r("button", {
+            type: "button",
+            class: "tql-preview-close",
+            title: "Close preview",
+            onClick: t[9] || (t[9] = (l) => C.value = !1)
+          }, [...t[16] || (t[16] = [
+            r("i", { class: "pi pi-times" }, null, -1)
+          ])])
+        ]),
+        ge(et, {
+          query: s.value,
+          "show-complexity": !1,
+          "show-field-usage": !0,
+          "show-logic-tree": !0,
+          compact: ""
+        }, null, 8, ["query"])
+      ])) : v("", !0),
+      r("div", Ht, [
+        o.showValidation && s.value ? (i(), a(T, { key: 0 }, [
+          u(Y) ? (i(), a("span", $t, "Query syntax is valid")) : (i(), a("span", Et, "Query has " + m(u(P).length) + " validation error" + m(u(P).length === 1 ? "" : "s"), 1))
+        ], 64)) : v("", !0)
+      ])
+    ], 6));
   }
 });
 export {
-  Ke as default
+  zt as default
 };