@wral/studio.ui.search-filter 0.1.0

package/dist/search-filter-B-aiJCKp.js

@@ -0,0 +1,453 @@
+import { LitElement as m, html as o, nothing as n, css as v } from "lit";
+import { repeat as c } from "lit/directives/repeat.js";
+import { createQueryModel as h, resolveLabels as g, validateSyntax as b } from "./model.mjs";
+const _ = ["fields", "operators", "booleans", "defaults"];
+class x extends m {
+  static get properties() {
+    return {
+      value: { type: String },
+      fields: { type: Object },
+      operators: { type: Object },
+      booleans: { type: Array },
+      defaults: { type: Object },
+      labels: { type: Object },
+      advanced: { type: Boolean, state: !0 },
+      rawError: { type: String, state: !0 },
+      configError: { type: String, state: !0 },
+      dragId: { type: String, state: !0 },
+      dropId: { type: String, state: !0 }
+    };
+  }
+  constructor() {
+    super(), this.value = "", this.fields = null, this.operators = null, this.booleans = null, this.defaults = null, this.labels = null, this.configError = "", this._model = h(), this._labels = g(), this.root = this._model.newGroup(void 0, []), this.advanced = !1, this.canVisual = !0, this.rawError = "", this.dragId = null, this.dropId = null, this._emitted = void 0;
+  }
+  willUpdate(t) {
+    const e = _.some((i) => t.has(i));
+    e && this._rebuildModel(), t.has("labels") && (this._labels = g(this.labels || {})), (e && !this.configError || t.has("value") && this.value !== this._emitted) && this._syncFromValue();
+  }
+  /**
+   * Rebuild the catalog-bound model from the JSON config. A bad config
+   * (unknown type/operator, missing path, …) keeps the previous model
+   * and surfaces the error instead of crashing the host app.
+   */
+  _rebuildModel() {
+    try {
+      this._model = h({
+        fields: this.fields ?? void 0,
+        operators: this.operators ?? void 0,
+        booleans: this.booleans ?? void 0,
+        defaults: this.defaults ?? void 0
+      }), this.configError = "";
+    } catch (t) {
+      this.configError = t.message;
+    }
+  }
+  _syncFromValue() {
+    const t = this.value || "";
+    if (this._model.roundTrips(t)) {
+      this.canVisual = !0;
+      try {
+        this.root = this._model.parseLucene(t);
+      } catch {
+        this.canVisual = !1, this.advanced = !0;
+      }
+    } else
+      this.canVisual = !1, this.advanced = !0;
+  }
+  _commit() {
+    this.root = { ...this.root }, this._emit(this._model.toLucene(this.root));
+  }
+  _emit(t) {
+    this._emitted = t, this.value = t, this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: t }
+    })), this.requestUpdate();
+  }
+  /* ---- tree helpers ---- */
+  _kids(t) {
+    return t.kind === "group" ? t.children : t.kind === "conditional" ? [t.cond, t.then, t.els].filter(Boolean) : [];
+  }
+  _find(t, e) {
+    if (t.id === e) return t;
+    for (const i of this._kids(t)) {
+      const s = this._find(i, e);
+      if (s) return s;
+    }
+    return null;
+  }
+  _parent(t, e, i = null) {
+    if (t.id === e) return i;
+    for (const s of this._kids(t)) {
+      const a = this._parent(s, e, t);
+      if (a !== void 0) return a;
+    }
+  }
+  /* ---- mutations ---- */
+  _addRule(t) {
+    this._find(this.root, t).children.push(this._model.newRule()), this._commit();
+  }
+  _addCond(t) {
+    this._find(this.root, t).children.push(this._model.newConditional()), this._commit();
+  }
+  _remove(t) {
+    const e = this._parent(this.root, t);
+    !e || e.kind !== "group" || (e.children = e.children.filter((i) => i.id !== t), this._commit());
+  }
+  _setOp(t, e) {
+    this._find(this.root, t).op = e, this._commit();
+  }
+  _toggleNeg(t) {
+    const e = this._find(this.root, t);
+    e.negate = !e.negate, this._commit();
+  }
+  _patch(t, e) {
+    const i = this._find(this.root, t);
+    Object.assign(i, e), e.field && (i.op = this._model.fields[e.field].ops[0].id, i.value = "", i.value2 = ""), this._commit();
+  }
+  _dropEls(t) {
+    this._find(this.root, t).els = null, this._commit();
+  }
+  _addEls(t) {
+    this._find(this.root, t).els = this._model.newElse(), this._commit();
+  }
+  /* ---- drag to reorder ---- */
+  _dragStart(t, e) {
+    this.dragId = e, t.dataTransfer.effectAllowed = "move";
+  }
+  /** A drag can only drop onto a sibling in the same group. */
+  _canDrop(t) {
+    const e = this.dragId;
+    if (!e || e === t) return !1;
+    const i = this._parent(this.root, e), s = this._parent(this.root, t);
+    return !!i && i === s && i.kind === "group";
+  }
+  _dragOver(t, e) {
+    t.preventDefault(), e !== this.dropId && this._canDrop(e) && (this.dropId = e);
+  }
+  _dragEnd() {
+    this.dragId = null, this.dropId = null;
+  }
+  _drop(t, e) {
+    t.preventDefault();
+    const i = this.dragId, s = this._canDrop(e);
+    if (this.dragId = null, this.dropId = null, !s) return;
+    const l = this._parent(this.root, i).children, u = l.findIndex((r) => r.id === i), d = l.findIndex((r) => r.id === e);
+    if (u < 0 || d < 0) return;
+    const [p] = l.splice(u, 1);
+    l.splice(d, 0, p), this._commit();
+  }
+  /* ---- raw (advanced) mode ---- */
+  _syncRaw(t) {
+    if (this.rawError = b(t), !this.rawError) {
+      if (this._model.roundTrips(t)) {
+        this.canVisual = !0;
+        try {
+          this.root = this._model.parseLucene(t);
+        } catch {
+          this.canVisual = !1;
+        }
+      } else
+        this.canVisual = !1;
+      this._emit(t);
+    }
+  }
+  _toggleAdvanced() {
+    this.advanced && !this.canVisual || (this.advanced = !this.advanced);
+  }
+  render() {
+    const t = this._labels;
+    return this.configError ? o`<p class="err">${this.configError}</p>` : o`
+		<div class="qbar">
+			${this.canVisual ? this.advanced ? n : o`<span class="intro">
+				${t.intro}</span>` : o`<span class="note">${t.rawUnsupported}
+			</span>`}
+			<studio-button size="small" style-type="outline"
+				state=${this.advanced && !this.canVisual ? "disabled" : "default"}
+				background-color=${this.advanced ? "var(--studio-primary, #001D68)" : ""}
+				text-color=${this.advanced ? "#FFFFFF" : ""}
+				@click=${this._toggleAdvanced}>
+				${this.advanced ? t.visualButton : t.rawButton}</studio-button>
+		</div>
+		${this.advanced ? o`<textarea class="raw" .value=${this.value || ""}
+				@input=${(e) => this._syncRaw(e.target.value)}></textarea>
+			${this.rawError ? o`<p class="err">${this.rawError}</p>` : this.canVisual ? o`<p class="ok">${t.rawSynced}</p>` : o`<p class="note-raw">${t.rawSaved}</p>`}` : this._group(this.root, !0)}`;
+  }
+  /**
+   * The library button keeps its :focus styling after a click (the
+   * group's focus suppression cannot cross the shadow boundary), so
+   * a just-clicked segment would look selected next to the truly
+   * selected one. Blur the inner button to keep the toggle state
+   * unambiguous.
+   */
+  _blurButton(t) {
+    t.currentTarget?.renderRoot?.querySelector("button")?.blur();
+  }
+  /**
+   * all/any segmented toggle (mutually exclusive). The selected colour is
+   * driven by CSS keyed on aria-pressed (see the `.tog` rules), NOT by
+   * studio-button's background-color attribute. Two traps force this:
+   * studio-button does not inherit the group's style-type (so each child
+   * sets style-type="outline" to get a transparent unselected base), and
+   * changing its background-color through re-renders lags a render behind,
+   * leaving a deselected button still filled. Setting --button-bg-color
+   * from our own stylesheet sidesteps the component's colour pipeline.
+   */
+  _segGroup(t, e) {
+    const i = (s, a) => o`
+			<studio-button class="tog primary" size="small" style-type="outline"
+				aria-pressed=${String(e === s)}
+				@click=${(l) => {
+      this._blurButton(l), this._setOp(t, s);
+    }}>${a}</studio-button>`;
+    return o`<studio-button-group size="small" style-type="outline"
+			role="group" aria-label="Match all or any">
+			${this._model.groupOps.map((s) => i(s.id, s.label))}
+		</studio-button-group>`;
+  }
+  _group(t, e = !1) {
+    const i = this._labels;
+    return o`
+		<div class="group ${e ? "top" : ""} ${t.negate ? "neg" : ""}">
+			<div class="gbar"><span class="ll">${i.matchPrefix}</span>
+				${this._segGroup(t.id, t.op)}
+				<span class="ll">${i.matchSuffix}</span>
+				${e ? n : o`<studio-button size="tiny" icon-only icon="circle-xmark"
+					style-type="clear" aria-label="Remove group"
+					@click=${() => this._remove(t.id)}></studio-button>`}
+			</div>
+			${t.children.length ? o`<div class="kids">${this._kidRows(t)}</div>` : o`<p class="empty">${i.empty}</p>`}
+			<div class="acts" role="group" aria-label="Add to this group">
+				<studio-tooltip position="top" size="small"
+					text=${i.addRuleTip}>
+					<studio-button size="small" style-type="outline" icon="filter"
+						@click=${() => this._addRule(t.id)}>${i.addRule}</studio-button>
+				</studio-tooltip>
+				${this._model.supportsConditionals ? o`
+				<studio-tooltip position="top" size="small"
+					text=${i.addConditionalTip}>
+					<studio-button size="small" style-type="outline"
+						icon="code-compare"
+						@click=${() => this._addCond(t.id)}>
+						${i.addConditional}</studio-button>
+				</studio-tooltip>` : n}
+			</div>
+			${e && this._model.supportsConditionals ? o`<p class="acts-help">
+				<strong>${i.addRule}</strong> ${i.actsHelpRule} ·
+				<strong>${i.addConditional}</strong>
+				${i.actsHelpConditional}</p>` : n}
+		</div>`;
+  }
+  /** Children of a group, numbering its rules "Rule 1", "Rule 2", … */
+  _kidRows(t) {
+    let e = 0;
+    const i = new Map(t.children.map((s) => [s.id, s.kind === "rule" ? ++e : 0]));
+    return c(
+      t.children,
+      (s) => s.id,
+      (s) => this._row(s, i.get(s.id))
+    );
+  }
+  _row(t, e = 0) {
+    const i = this.dragId === t.id, s = this.dropId === t.id && this.dragId && this.dragId !== t.id, a = t.kind === "group" ? this._group(t) : t.kind === "conditional" ? this._cond(t) : this._rule(t, e);
+    return o`<div class="rw ${i ? "drag" : ""} ${s ? "ov" : ""}"
+			@dragover=${(l) => this._dragOver(l, t.id)} @drop=${(l) => this._drop(l, t.id)}>
+			<span class="h" draggable="true"
+				@dragstart=${(l) => this._dragStart(l, t.id)}
+				@dragend=${() => this._dragEnd()}>
+				<studio-icon name="grip" size=".9rem"></studio-icon></span>
+			<div class="rb">${a}</div>
+		</div>`;
+  }
+  _cond(t) {
+    const e = this._labels;
+    return o`<div class="cond">
+			<div class="cb"><span class="ct">${e.conditionalTitle}</span>
+				<studio-button size="tiny" icon-only icon="circle-xmark"
+					style-type="clear" aria-label="Remove conditional"
+					@click=${() => this._remove(t.id)}></studio-button></div>
+			<div class="cs"><span class="sl">${e.conditionalIf}</span>
+				${this._sg(t.cond)}</div>
+			<div class="cs"><span class="sl">${e.conditionalThen}</span>
+				${this._sg(t.then)}</div>
+			${t.els ? o`<div class="cs"><span class="sl el">${e.conditionalElse}
+					<studio-button size="tiny" style-type="clear"
+						text-color="var(--wral-red, #D1232A)"
+						@click=${() => this._dropEls(t.id)}>
+						${e.removeElse}</studio-button>
+				</span>${this._sg(t.els)}</div>` : o`<studio-button size="tiny" style-type="clear" icon="plus"
+				@click=${() => this._addEls(t.id)}>${e.addElse}</studio-button>`}
+		</div>`;
+  }
+  _sg(t) {
+    const e = this._labels;
+    let i = 0;
+    const s = new Map(t.children.map((a) => [a.id, a.kind === "rule" ? ++i : 0]));
+    return o`<div class="sgp">
+			<div class="sgh">${this._segGroup(t.id, t.op)}</div>
+			${c(
+      t.children,
+      (a) => a.id,
+      (a) => a.kind === "rule" ? this._rule(a, s.get(a.id)) : this._row(a, s.get(a.id))
+    )}
+			<studio-tooltip position="top" size="small"
+				text=${e.addSubRuleTip}>
+				<studio-button class="add-rule" size="tiny" style-type="clear"
+					icon="plus"
+					@click=${() => this._addRule(t.id)}>${e.addSubRule}</studio-button>
+			</studio-tooltip>
+		</div>`;
+  }
+  _rule(t, e = 0) {
+    const i = this._labels, s = this._model.fields[t.field], a = s.ops, l = t.op !== "exists", u = t.op === "between", d = s.type === "date" ? "date" : s.type === "number" || s.type === "video" ? "number" : "text", p = l && (!(t.value || "").trim() || u && !(t.value2 || "").trim());
+    return o`<div class="rule ${t.negate ? "exc" : ""}">
+			${e ? o`<span class="rule-tag">${i.ruleTag} ${e}</span>` : n}
+			<studio-button-group size="small" style-type="outline"
+				role="group" aria-label="Include or exclude">
+				<studio-button class="tog incl" size="small" style-type="outline"
+					aria-pressed=${String(!t.negate)}
+					@click=${(r) => {
+      this._blurButton(r), this._patch(t.id, { negate: !1 });
+    }}>${i.include}</studio-button>
+				<studio-button class="tog excl" size="small" style-type="outline"
+					aria-pressed=${String(!!t.negate)}
+					@click=${(r) => {
+      this._blurButton(r), this._patch(t.id, { negate: !0 });
+    }}>${i.exclude}</studio-button>
+			</studio-button-group>
+			<studio-select class="f-sel" .singleSelect=${!0}
+				.preventNull=${!0} height="small" width="100%"
+				.options=${Object.entries(this._model.fields).map(([r, f]) => ({ value: r, label: f.label }))}
+				.selected=${[t.field]}
+				@change=${(r) => {
+      r.stopPropagation(), this._patch(t.id, { field: r.detail.selected[0] });
+    }}
+			></studio-select>
+			<studio-select class="op-sel" .singleSelect=${!0}
+				.preventNull=${!0} height="small" width="100%"
+				.options=${a.map((r) => ({ value: r.id, label: r.label }))}
+				.selected=${[t.op]}
+				@change=${(r) => {
+      r.stopPropagation(), this._patch(t.id, { op: r.detail.selected[0] });
+    }}
+			></studio-select>
+			<studio-button size="tiny" icon-only icon="circle-xmark"
+				style-type="clear" aria-label="Remove rule"
+				@click=${() => this._remove(t.id)}></studio-button>
+			${l ? o`<div class="val-row">
+				${d === "date" ? o`<input type="date" .value=${t.value}
+				@input=${(r) => this._patch(t.id, { value: r.target.value })}>` : o`<studio-input class="val" height="small" width="100%" type=${d}
+				placeholder=${s.hint || "value"} .value=${t.value}
+				@input=${(r) => this._patch(t.id, { value: r.target.value })}
+			></studio-input>`}
+				${u ? o`<span class="as">${i.between}</span>
+					${d === "date" ? o`<input type="date" .value=${t.value2}
+				@input=${(r) => this._patch(t.id, { value2: r.target.value })}>` : o`<studio-input class="val" height="small" width="100%" type=${d}
+				placeholder=${s.hint || "value"} .value=${t.value2}
+				@input=${(r) => this._patch(t.id, { value2: r.target.value })}
+			></studio-input>`}` : n}
+			</div>` : n}
+			${p ? o`<p class="pending">
+				<studio-icon name="circle-info" size=".7rem"></studio-icon>
+				${u ? i.pendingBoth : i.pendingOne}</p>` : n}
+		</div>`;
+  }
+  static styles = v`
+		:host{display:block;font-family:var(--wral-font-body,inherit);font-size:.85rem;}
+		*{box-sizing:border-box;}
+		/* Selected state for the segmented toggles (all/any, include/exclude).
+		   Keyed on aria-pressed and exposed as inheritable CSS vars so the
+		   studio-button picks up the fill without its colour attributes,
+		   which lag a render behind on toggle. Unselected buttons use the
+		   outline style-type's transparent default. */
+		.tog[aria-pressed="true"]{--button-text-color:#FFFFFF;}
+		.tog.primary[aria-pressed="true"]{
+			--button-bg-color:var(--studio-primary,#001D68);}
+		.tog.incl[aria-pressed="true"]{--button-bg-color:var(--wral-green,#72B509);}
+		.tog.excl[aria-pressed="true"]{--button-bg-color:var(--wral-red,#D1232A);}
+		/* native styling kept for the controls with no studio-ui
+		   counterpart: date inputs and the raw-query textarea */
+		input,textarea{font:inherit;font-size:.8rem;
+			border:1px solid var(--studio-border,#E1E2E4);border-radius:4px;
+			padding:5px 7px;background:var(--studio-surface,#fff);
+			color:var(--studio-fg,#1B1C1E);}
+		.qbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;
+			margin-bottom:10px;}
+		.note{flex:1;font-size:.7rem;color:var(--studio-muted,#6B6F78);
+			font-style:italic;}
+		.intro{flex:1;font-size:.78rem;color:var(--studio-muted,#6B6F78);}
+		.empty{margin:0;padding:14px 12px;border:1px dashed
+			var(--studio-line,#C3C5CA);border-radius:6px;font-size:.8rem;
+			color:var(--studio-muted,#6B6F78);text-align:center;}
+		.group{border-radius:5px;}
+		.group:not(.top){border-left:3px solid var(--studio-secondary,#2594E3);
+			padding:5px;margin:5px 0;
+			background:color-mix(in srgb,var(--studio-secondary,#2594E3) 5%,transparent);}
+		.group.neg:not(.top){border-left-color:var(--wral-red,#D1232A);}
+		.gbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
+			margin-bottom:10px;}
+		.gbar studio-button[icon-only]{margin-left:auto;}
+		.ll{font-size:.68rem;font-weight:700;letter-spacing:.05em;
+			text-transform:uppercase;color:var(--studio-subtle,#878B94);}
+		.kids{display:flex;flex-direction:column;gap:8px;}
+		.rw{display:flex;align-items:flex-start;gap:3px;}
+		.rw.ov{box-shadow:0 -2px 0 var(--studio-secondary,#2594E3);}
+		.rw.drag{opacity:.4;}
+		.h{cursor:grab;color:var(--studio-subtle,#A5A8AF);padding:6px 1px;
+			user-select:none;}
+		.rb{flex:1;min-width:0;}
+		/* full-width rule rows: label | segment | field | op | remove,
+		   with the value(s) on their own full-width line below */
+		.rule{display:grid;
+			grid-template-columns:auto auto minmax(0,1.2fr) minmax(0,1fr) auto;
+			gap:8px;align-items:center;
+			background:var(--studio-surface,#fff);
+			border:1px solid var(--studio-border,#E1E2E4);border-radius:6px;
+			padding:8px 10px;}
+		.rule-tag{font-family:var(--wral-font-ui,inherit);font-size:.64rem;
+			font-weight:700;letter-spacing:.05em;text-transform:uppercase;
+			color:var(--studio-muted,#6B6F78);white-space:nowrap;
+			background:var(--studio-bg,#F4F5F6);border-radius:4px;
+			padding:3px 7px;}
+		.pending{grid-column:1/-1;display:flex;align-items:center;gap:5px;
+			margin:0;font-size:.72rem;font-style:italic;
+			color:var(--studio-subtle,#878B94);}
+		.rule.exc{background:color-mix(in srgb,var(--wral-red,#D1232A) 6%,
+			var(--studio-surface,#fff));}
+		.rule .f-sel,.rule .op-sel{width:100%;min-width:0;}
+		.val-row{grid-column:1/-1;display:flex;align-items:center;gap:6px;}
+		.val-row .val{flex:1;min-width:0;}
+		.val-row input[type="date"]{flex:1;min-width:0;}
+		.as{font-size:.74rem;color:var(--studio-muted,#6B6F78);flex:0 0 auto;}
+		.acts{display:flex;gap:8px;padding-top:10px;flex-wrap:wrap;}
+		.acts-help{font-size:.74rem;color:var(--studio-muted,#6B6F78);
+			line-height:1.5;margin:8px 0 0;padding-top:8px;
+			border-top:1px solid var(--studio-border,#E1E2E4);}
+		.acts-help strong{color:var(--studio-fg,#1B1C1E);font-weight:600;}
+		.add-rule{align-self:flex-start;}
+		.cond{border:1px solid var(--wral-purple,#33109C);
+			border-left:3px solid var(--wral-purple,#33109C);border-radius:5px;
+			background:color-mix(in srgb,var(--wral-purple,#33109C) 5%,transparent);
+			padding:5px;}
+		.cb{display:flex;justify-content:space-between;align-items:center;}
+		.ct{font-family:var(--wral-font-mono,monospace);font-size:.66rem;
+			font-weight:700;color:var(--wral-purple,#33109C);}
+		.cs{margin:5px 0;}
+		.sl{display:block;font-size:.72rem;font-weight:600;
+			color:var(--studio-muted,#6B6F78);margin-bottom:3px;}
+		.sl.el{color:var(--wral-purple,#33109C);}
+		.sgp{background:var(--studio-surface,#fff);
+			border:1px solid var(--studio-border,#E1E2E4);border-radius:4px;padding:5px;
+			display:flex;flex-direction:column;gap:4px;}
+		.sgh{display:flex;justify-content:flex-end;}
+		.raw{width:100%;min-height:90px;
+			font-family:var(--wral-font-mono,monospace);font-size:.78rem;}
+		.err{color:var(--wral-red,#D1232A);font-size:.74rem;margin:4px 0 0;
+			font-weight:600;}
+		.ok{color:var(--wral-green-deep,#66A208);font-size:.74rem;margin:4px 0 0;}
+		.note-raw{color:var(--studio-muted,#6B6F78);font-size:.74rem;margin:4px 0 0;
+			font-style:italic;line-height:1.4;}
+	`;
+}
+globalThis?.customElements && !globalThis.customElements.get("studio-search-filter") && globalThis.customElements.define("studio-search-filter", x);
+export {
+  x as S
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "@wral/studio.ui.search-filter",
+	"version": "0.1.0",
+	"description": "Lit web component for building Lucene search queries visually (WRAL Studio Search Filter).",
+	"type": "module",
+	"author": "Dominick Jones <djones@wral.com>",
+	"license": "UNLICENSED",
+	"peerDependencies": {
+		"lit": "^3.0.0"
+	},
+	"scripts": {
+		"dev": "vite",
+		"lint": "eslint",
+		"test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest",
+		"prepublishOnly": "npm run build",
+		"build": "vite build && vite build --config vite.standalone.config.mjs"
+	},
+	"exports": {
+		".": "./dist/index.mjs",
+		"./define": "./dist/define.mjs",
+		"./model": "./dist/model.mjs",
+		"./package.json": "./package.json"
+	},
+	"main": "./dist/index.mjs",
+	"module": "./dist/index.mjs",
+	"files": [
+		"dist"
+	],
+	"engines": {
+		"node": ">=18"
+	},
+	"devDependencies": {
+		"eslint": "^9.36.0",
+		"jest": "^30.1.1",
+		"jest-environment-jsdom": "^30.4.1",
+		"jsdom": "^26.0.0",
+		"lit": "^3.3.1",
+		"vite": "^7.1.7"
+	}
+}