@code0-tech/pictor 0.0.0-mvp.40 → 0.0.0-mvp.42

package/dist/components/data-table/DataTableFilterInput.js

@@ -0,0 +1,210 @@
+import { jsx as u } from "react/jsx-runtime";
+import { c as Q } from "../../_virtual/compiler-runtime.js";
+import { Editor as z } from "../editor/Editor.js";
+import { StreamLanguage as U, syntaxTree as J } from "@codemirror/language";
+import { EditorState as K } from "@uiw/react-codemirror";
+import { Badge as b } from "../badge/Badge.js";
+import { hashToColor as X } from "../d-flow/DFlow.util.js";
+import { DataTableFilterSuggestionMenu as j } from "./DataTableFilterSuggestionMenu.js";
+import { MenuItem as G } from "../menu/Menu.js";
+const $ = {
+  "=": "isOneOf",
+  "!=": "isNotOneOf"
+}, H = {
+  isOneOf: "is one of",
+  isNotOneOf: "is not one of"
+}, Y = {
+  isOneOf: "=",
+  isNotOneOf: "!="
+}, y = (r) => r.replace(/^\\|\\$/g, ""), Z = (r) => U.define({
+  startState: () => ({
+    tokens: []
+  }),
+  token(e, n) {
+    if (e.eatSpace()) return null;
+    if (e.match("!=") || e.match("=") && e.peek() !== "=")
+      return n.tokens.push("operator"), "operator";
+    if (e.peek() === "\\") {
+      e.next();
+      const k = [];
+      for (; !e.eol() && e.peek() !== "\\"; ) k.push(e.next());
+      if (e.peek() === "\\") {
+        e.next();
+        const S = k.join("");
+        if (r.includes(S) && n.tokens[n.tokens.length - 1] !== "propertyName")
+          return n.tokens.push("propertyName"), "propertyName";
+        if (n.tokens[n.tokens.length - 1] !== "literal")
+          return n.tokens.push("literal"), "literal";
+      }
+      return null;
+    }
+    return e.next(), null;
+  }
+}), he = (r) => {
+  const e = Q.c(17), {
+    filterTokens: n,
+    onChange: k
+  } = r;
+  let S;
+  e[0] !== n ? (S = Z(n?.map(q) || []), e[0] = n, e[1] = S) : S = e[1];
+  const A = S;
+  let v;
+  e[2] !== n ? (v = (o) => {
+    if (!o.trim())
+      return {};
+    const d = {}, l = o.split(/\\/).filter(Boolean);
+    for (let i = 0; i + 2 < l.length; i = i + 3, i) {
+      const p = l[i], a = l[i + 1], _ = l[i + 2];
+      if (!p || !a || !_)
+        continue;
+      const L = n?.find((t) => t.token === p);
+      if (!L)
+        continue;
+      const h = $[a];
+      if (!h)
+        continue;
+      const O = _.split(",").map(x).filter(Boolean);
+      O.length > 0 && (d[L.key] = {
+        operator: h,
+        value: O
+      });
+    }
+    return d;
+  }, e[2] = n, e[3] = v) : v = e[3];
+  const B = v;
+  let w;
+  e[4] !== k || e[5] !== B ? (w = (o) => {
+    const d = B(o);
+    k?.(d);
+  }, e[4] = k, e[5] = B, e[6] = w) : w = e[6];
+  const F = w;
+  let C;
+  e[7] !== n ? (C = (o) => {
+    const d = J(o.state), l = d.resolveInner(o.pos, -1), i = d.resolveInner(o.pos, 1), {
+      propertyNode: p,
+      operatorNode: a
+    } = (() => {
+      const t = {
+        propertyNode: null,
+        operatorNode: null
+      };
+      for (let s = l; s; s = s.prevSibling)
+        s.name === "propertyName" && !t.propertyNode && (t.propertyNode = s), s.name === "operator" && !t.operatorNode && (t.operatorNode = s);
+      return t;
+    })(), _ = p ? o.pos < p.to ? "propertyName" : o.pos === p.to ? "operator" : a ? o.pos < a.to ? "operator" : o.pos === a.to ? "literal" : l.name === "literal" ? "propertyName" : l.name === "invalid" && o.state.sliceDoc(l.from, l.to).startsWith("\\") ? "literal" : (() => {
+      const t = o.state.sliceDoc(a.to, o.pos);
+      return t.trim() ? t.includes(" ") ? "propertyName" : "literal" : t.length > 0 ? "propertyName" : "literal";
+    })() : (i.name === "operator", "operator") : "propertyName", L = p ? y(o.state.sliceDoc(p.from, p.to)) : "", h = n?.find((t) => t.token === L), O = (t, s, c, g) => {
+      g ? o.view?.dispatch({
+        changes: {
+          from: t,
+          to: s,
+          insert: c
+        },
+        selection: {
+          anchor: o.pos
+        },
+        scrollIntoView: !1
+      }) : (o.view?.dispatch({
+        changes: {
+          from: t,
+          to: s,
+          insert: c
+        },
+        selection: {
+          anchor: t + c.length
+        },
+        scrollIntoView: !0
+      }), o.view?.focus());
+    };
+    if (_ === "propertyName") {
+      const t = /* @__PURE__ */ new Set(), s = o.matchBefore(/\\?[\w-]*/), c = s ? s.from : o.pos, g = p && o.pos <= p.to, N = i.name === "propertyName" ? i.to : g ? p.to : o.pos, m = g && p.from < c ? p.from : c, W = y(o.state.sliceDoc(m, o.pos)), R = n?.filter((f) => f.token.startsWith(W) && !t.has(f.token)) || [];
+      if (d.iterate({
+        enter: (f) => {
+          f.name === "propertyName" && t.add(y(o.state.sliceDoc(f.from, f.to)));
+        }
+      }), R.length)
+        return /* @__PURE__ */ u(j, { context: o, children: R.map((f) => /* @__PURE__ */ u(G, { onSelect: () => {
+          let M = `\\${f.token}\\`;
+          l.name === "literal" && o.state.sliceDoc(N, N + 1) !== "\\" && (M = "\\" + M), O(m, N, M);
+        }, children: f.token }, f.token)) });
+    }
+    if (_ === "operator" && h) {
+      const t = o.matchBefore(/[!=]+/), s = t ? t.from : o.pos, c = a && o.pos <= a.to, g = i.name === "operator" ? i.to : c ? a.to : o.pos, N = c && a.from < s ? a.from : s;
+      return /* @__PURE__ */ u(j, { context: o, children: h.operators.map((m) => /* @__PURE__ */ u(G, { onSelect: () => O(N, g, Y[m]), children: H[m] }, m)) });
+    }
+    if (_ === "literal" && h?.suggestion) {
+      const t = a ? o.state.sliceDoc(a.from, a.to) : "", s = $[t];
+      if (s && h.operators.includes(s)) {
+        const c = i.name === "literal" ? o.state.sliceDoc(i.from, i.to) : "";
+        return h.suggestion(o, s, y(c), (g, N) => {
+          const m = l.name === "literal" || l.name === "invalid" && o.state.sliceDoc(l.from, l.to).startsWith("\\"), W = m ? l.from : o.pos, R = m ? l.to : i.name === "literal" ? i.to : o.pos;
+          O(W, R, `\\${g}\\`, N);
+        });
+      }
+    }
+    return null;
+  }, e[7] = n, e[8] = C) : C = e[8];
+  const V = C;
+  let D, I;
+  e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (D = {
+    backgroundColor: "rgba(255,255,255,.1)",
+    padding: "0.35rem",
+    boxSizing: "border-box",
+    borderRadius: "1rem",
+    boxShadow: "inset 0 1px 1px 0 rgba(255,255,255,.2)"
+  }, I = {
+    literal: oe,
+    operator: te,
+    propertyName: re
+  }, e[9] = D, e[10] = I) : (D = e[9], I = e[10]);
+  let T, E;
+  e[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (T = [K.transactionFilter.of(ne)], E = {
+    lineNumbers: !1,
+    foldGutter: !1,
+    highlightActiveLine: !1,
+    highlightActiveLineGutter: !1,
+    dropCursor: !1,
+    indentOnInput: !1
+  }, e[11] = T, e[12] = E) : (T = e[11], E = e[12]);
+  let P;
+  return e[13] !== V || e[14] !== F || e[15] !== A ? (P = /* @__PURE__ */ u(z, { w: "100%", initialValue: "", onChange: F, style: D, tokenHighlights: I, showTooltips: !1, showValidation: !1, customSuggestionComponent: !0, suggestions: V, extensions: T, basicSetup: E, language: A }), e[13] = V, e[14] = F, e[15] = A, e[16] = P) : P = e[16], P;
+};
+function q(r) {
+  return r.token;
+}
+function x(r) {
+  return r.trim();
+}
+function ee(r) {
+  return /* @__PURE__ */ u(b, { style: {
+    boxShadow: "none"
+  }, color: "secondary", children: r }, r);
+}
+function oe(r) {
+  const {
+    content: e
+  } = r, n = y(e).split(",");
+  return n.length > 1 ? /* @__PURE__ */ u(b, { p: 0.175, mx: 0.175, children: n.map(ee) }) : /* @__PURE__ */ u(b, { mx: 0.175, children: y(e) });
+}
+function te(r) {
+  const {
+    content: e
+  } = r;
+  return /* @__PURE__ */ u(b, { color: "tertiary", style: {
+    boxShadow: "none"
+  }, children: H[$[e]] || e });
+}
+function re(r) {
+  const {
+    content: e
+  } = r;
+  return /* @__PURE__ */ u(b, { mx: 0.175, color: X(y(e)), children: y(e) });
+}
+function ne(r) {
+  return r.docChanged && r.newDoc.lines > 1 ? [] : r;
+}
+export {
+  he as DataTableFilterInput,
+  Z as createFilterQueryLanguage
+};

package/dist/components/data-table/DataTableFilterSuggestionMenu.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { CompletionContext } from '@codemirror/autocomplete';
+export interface DataTableFilterSuggestionMenuProps {
+    children?: React.ReactNode;
+    context?: CompletionContext;
+}
+export declare const DataTableFilterSuggestionMenu: React.FC<DataTableFilterSuggestionMenuProps>;

package/dist/components/data-table/DataTableFilterSuggestionMenu.js

@@ -0,0 +1,53 @@
+import { jsx as f, jsxs as d } from "react/jsx-runtime";
+import { c as v } from "../../_virtual/compiler-runtime.js";
+import w from "react";
+import { MenuTrigger as y, MenuContent as _, Menu as g } from "../menu/Menu.js";
+const T = (t) => {
+  const e = v.c(11), {
+    children: l,
+    context: u
+  } = t, [m, p] = w.useState(!0), h = _;
+  let r;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (r = (a) => p(a), e[0] = r) : r = e[0];
+  let i;
+  e[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ f(y, { asChild: !0, children: /* @__PURE__ */ f("div", { style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  } }) }), e[1] = i) : i = e[1];
+  let n;
+  e[2] !== u?.view ? (n = (a) => {
+    ["Escape", "ArrowUp", "ArrowDown"].includes(a.key) || u?.view?.focus();
+  }, e[2] = u?.view, e[3] = n) : n = e[3];
+  let s;
+  e[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (s = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    pointerEvents: "auto"
+  }, e[4] = s) : s = e[4];
+  let o;
+  e[5] !== l || e[6] !== n ? (o = /* @__PURE__ */ f(h, { w: "200px", onInteractOutside: b, onOpenAutoFocus: D, onKeyDown: n, style: s, children: l }), e[5] = l, e[6] = n, e[7] = o) : o = e[7];
+  let c;
+  return e[8] !== m || e[9] !== o ? (c = /* @__PURE__ */ d(g, { open: m, onOpenChange: r, modal: !1, children: [
+    i,
+    o
+  ] }), e[8] = m, e[9] = o, e[10] = c) : c = e[10], c;
+};
+function x(t) {
+  return t;
+}
+function S(t) {
+  return t.startsWith("cm-");
+}
+function b(t) {
+  Array.from(t.currentTarget.classList).map(x).some(S) && t.preventDefault();
+}
+function D(t) {
+  t.preventDefault(), t.currentTarget.querySelector('[role="menuitem"]')?.focus();
+}
+export {
+  T as DataTableFilterSuggestionMenu
+};

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DataTable';
+export * from './DataTableColumn';
+export * from './DataTableFilterInput';
+export * from './DataTableFilterSuggestionMenu';

package/dist/components/data-table/index.js

@@ -0,0 +1,11 @@
+import { DataTable as t } from "./DataTable.js";
+import { DataTableColumn as o } from "./DataTableColumn.js";
+import { DataTableFilterInput as u, createFilterQueryLanguage as m } from "./DataTableFilterInput.js";
+import { DataTableFilterSuggestionMenu as p } from "./DataTableFilterSuggestionMenu.js";
+export {
+  t as DataTable,
+  o as DataTableColumn,
+  u as DataTableFilterInput,
+  p as DataTableFilterSuggestionMenu,
+  m as createFilterQueryLanguage
+};

package/dist/components/editor/Editor.d.ts

@@ -2,7 +2,9 @@ import { default as React } from 'react';
 import { Code0Component } from '../../utils';
 import { ValidationProps } from '../form';
 import { Extension } from '@uiw/react-codemirror';
+import { StreamLanguage } from '@codemirror/language';
 import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
 export type EditorTokenizer = (content: string) => string | null;
 export interface EditorRendererProps {
     content: string;
@@ -10,14 +12,18 @@ export interface EditorRendererProps {
 export interface EditorTokenHighlights {
     [tokenName: string]: (props: EditorRendererProps) => React.ReactNode;
 }
-export interface EditorInputProps extends Omit<Code0Component<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value'>, ValidationProps<object> {
-    language?: 'json';
+export interface EditorInputProps extends Omit<Code0Component<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value'>, ValidationProps<any> {
+    language?: 'json' | StreamLanguage<unknown>;
     tokenizer?: EditorTokenizer;
     tokenHighlights?: EditorTokenHighlights;
-    suggestions?: (context: CompletionContext) => CompletionResult | null;
+    suggestions?: (context: CompletionContext) => CompletionResult | React.ReactNode | null;
+    customSuggestionComponent?: boolean;
     onChange?: (value: any) => void;
     extensions?: Extension[];
     disabled?: boolean;
     readonly?: boolean;
+    showTooltips?: boolean;
+    showValidation?: boolean;
+    basicSetup?: BasicSetupOptions;
 }
 export declare const Editor: React.FC<EditorInputProps>;