@bquery/bquery 1.6.0 → 1.8.1

package/dist/component-L3-JfOFz.js

@@ -0,0 +1,684 @@
+import { f as L, l as N, n as I, t as j, u as D } from "./sanitize-B1V4JswB.js";
+import { n as Q, r as q } from "./core-DdtZHzsS.js";
+import { n as U } from "./config-DhT9auRm.js";
+import { r as W, t as w } from "./untrack-D0fnO5k2.js";
+import { t as J } from "./env-CTdvLaH2.js";
+var F = (r, e) => {
+  const { type: o } = e;
+  if (o === String) return r;
+  if (o === Number) return Number(r);
+  if (o === Boolean) {
+    const t = r.trim().toLowerCase();
+    return t === "" || t === "true" || t === "1" ? !0 : t === "false" || t === "0" ? !1 : !!r;
+  }
+  if (o === Object || o === Array) try {
+    return JSON.parse(r);
+  } catch {
+    return r;
+  }
+  if (typeof o == "function") {
+    const t = o, s = o;
+    if (e.construct === !0) return Reflect.construct(s, [r]);
+    if (e.construct === !1) return t(r);
+    const l = o.prototype !== void 0 && o.prototype !== null, g = (l ? Object.getOwnPropertyNames(o.prototype) : []).length > 1, S = l && o.prototype.constructor !== o, E = /^class\s/.test(Function.prototype.toString.call(o));
+    if (g || S || E) try {
+      return Reflect.construct(s, [r]);
+    } catch {
+      return t(r);
+    }
+    try {
+      const f = t(r);
+      if (f === void 0 && l) try {
+        return Reflect.construct(s, [r]);
+      } catch {
+        return f;
+      }
+      return f;
+    } catch (f) {
+      if (f instanceof TypeError && /cannot be invoked without 'new'|is not a function/i.test(f.message)) return Reflect.construct(s, [r]);
+      throw f;
+    }
+  }
+  return r;
+}, y;
+function h(r) {
+  const e = y;
+  return y = r, e;
+}
+function R() {
+  const r = [];
+  return {
+    addDisposer(e) {
+      r.push(e);
+    },
+    dispose() {
+      for (const e of r) try {
+        e();
+      } catch (o) {
+        J() && typeof console < "u" && typeof console.error == "function" && console.error("bQuery component: Error disposing scoped resource", o);
+      }
+      r.length = 0;
+    }
+  };
+}
+function ne(r) {
+  const e = y;
+  if (!e) throw new Error("bQuery component: useSignal() must be called inside a component lifecycle hook. Avoid calling it directly from render()");
+  const o = Q(r);
+  return e.addDisposer(() => o.dispose()), o;
+}
+function le(r) {
+  const e = y;
+  if (!e) throw new Error("bQuery component: useComputed() must be called inside a component lifecycle hook. Avoid calling it directly from render()");
+  const o = W(r);
+  return e.addDisposer(() => o.dispose()), o;
+}
+function ie(r) {
+  const e = y;
+  if (!e) throw new Error("bQuery component: useEffect() must be called inside a component lifecycle hook. Avoid calling it directly from render()");
+  const o = q(r);
+  return e.addDisposer(o), o;
+}
+var G = ["slot"], K = [
+  "part",
+  "disabled",
+  "checked",
+  "placeholder",
+  "value",
+  "rows",
+  "cols",
+  "readonly",
+  "required",
+  "maxlength",
+  "minlength",
+  "max",
+  "min",
+  "step",
+  "pattern",
+  "autocomplete",
+  "autofocus",
+  "for",
+  "multiple",
+  "selected",
+  "wrap"
+], M = (r, e) => {
+  const o = [...G, ...e.sanitize?.allowTags ?? []], t = [...K, ...e.sanitize?.allowAttributes ?? []], s = Object.values(e.signals ?? {}), g = ((f) => f === !1 ? !1 : f === "closed" ? "closed" : "open")(e.shadow), S = Array.from(/* @__PURE__ */ new Set([...Object.keys(e.props ?? {}), ...e.observeAttributes ?? []]));
+  class E extends HTMLElement {
+    constructor() {
+      super(), this.state = { ...e.state ?? {} }, this.props = {}, this.missingRequiredProps = /* @__PURE__ */ new Set(), this.hasMounted = !1, g !== !1 ? this.renderRootNode = this.attachShadow({ mode: g }) : this.renderRootNode = this, this.syncProps();
+    }
+    static get observedAttributes() {
+      return S;
+    }
+    connectedCallback() {
+      try {
+        if (!this.hasMounted && this.missingRequiredProps.size > 0) return;
+        if (this.hasMounted) {
+          this.scope = R();
+          const a = h(this.scope);
+          try {
+            e.connected?.call(this);
+          } catch (n) {
+            this.handleError(n);
+          } finally {
+            h(a);
+          }
+          this.setupSignalSubscriptions(!0);
+          return;
+        }
+        this.mount();
+      } catch (a) {
+        this.handleError(a);
+      }
+    }
+    mount() {
+      if (this.hasMounted) return;
+      const a = h(this.ensureScope());
+      let n = !1;
+      try {
+        e.beforeMount?.call(this), e.connected?.call(this);
+      } catch (i) {
+        n = !0, this.handleError(i);
+      } finally {
+        h(a);
+      }
+      if (n) {
+        this.scope?.dispose(), this.scope = void 0;
+        return;
+      }
+      this.render(), this.setupSignalSubscriptions(), this.hasMounted = !0;
+    }
+    disconnectedCallback() {
+      try {
+        this.signalEffectCleanup?.(), this.signalEffectCleanup = void 0, this.scope?.dispose(), this.scope = void 0, e.disconnected?.call(this);
+      } catch (a) {
+        this.handleError(a);
+      }
+    }
+    attributeChangedCallback(a, n, i) {
+      try {
+        const d = this.cloneProps();
+        if (this.syncProps(), e.onAttributeChanged) {
+          const u = h(this.ensureScope());
+          try {
+            e.onAttributeChanged.call(this, a, n, i);
+          } finally {
+            h(u);
+          }
+        }
+        this.hasMounted ? this.render(!0, d, {
+          name: a,
+          oldValue: n,
+          newValue: i
+        }) : this.isConnected && this.missingRequiredProps.size === 0 && this.mount();
+      } catch (d) {
+        this.handleError(d);
+      }
+    }
+    adoptedCallback() {
+      if (!e.onAdopted) return;
+      const a = h(this.ensureScope());
+      try {
+        e.onAdopted.call(this);
+      } catch (n) {
+        this.handleError(n);
+      } finally {
+        h(a);
+      }
+    }
+    handleError(a) {
+      e.onError ? e.onError.call(this, a) : console.error(`bQuery component error in <${r}>:`, a);
+    }
+    ensureScope() {
+      return this.scope ?? (this.scope = R());
+    }
+    setState(a, n) {
+      this.state[a] = n, this.render(!0, this.cloneProps(), void 0, !1);
+    }
+    getState(a) {
+      return this.state[a];
+    }
+    setupSignalSubscriptions(a = !1) {
+      if (this.signalEffectCleanup || s.length === 0) return;
+      let n = !0;
+      this.signalEffectCleanup = q(() => {
+        try {
+          for (const d of s) d.value;
+          if (n) {
+            if (n = !1, a && this.hasMounted && this.isConnected) {
+              const d = this.cloneProps();
+              w(() => {
+                this.render(!0, d, void 0, !1);
+              });
+            }
+            return;
+          }
+          if (!this.hasMounted || !this.isConnected) return;
+          const i = this.cloneProps();
+          w(() => {
+            this.render(!0, i, void 0, !1);
+          });
+        } catch (i) {
+          this.handleError(i);
+        }
+      });
+    }
+    syncProps() {
+      const a = e.props ?? {};
+      for (const [n, i] of Object.entries(a)) {
+        const d = this.getAttribute(n);
+        let u;
+        if (d == null ? i.required && i.default === void 0 ? (this.missingRequiredProps.add(n), u = void 0) : u = i.default ?? void 0 : (this.missingRequiredProps.has(n) && this.missingRequiredProps.delete(n), u = F(d, i)), i.validator && u !== void 0 && !i.validator(u))
+          throw new Error(`bQuery component: validation failed for prop "${n}" with value ${JSON.stringify(u)}`);
+        this.props[n] = u;
+      }
+    }
+    cloneProps() {
+      return { ...this.props };
+    }
+    render(a = !1, n, i, d = !0) {
+      try {
+        if (a && d && e.beforeUpdate) {
+          if (!n) throw new Error("bQuery component: previous props are required for update renders");
+          if (e.beforeUpdate.call(this, this.props, n) === !1) return;
+        }
+        const u = (p, H) => {
+          this.dispatchEvent(new CustomEvent(p, {
+            detail: H,
+            bubbles: !0,
+            composed: !0
+          }));
+        }, x = this.renderRootNode, B = I(e.render({
+          props: this.props,
+          state: this.state,
+          signals: e.signals ?? {},
+          emit: u
+        }), {
+          allowTags: o,
+          allowAttributes: t
+        });
+        let $ = null;
+        if (e.styles && ($ = x.querySelector("style[data-bquery-component-style]")), x.innerHTML = B, e.styles) {
+          const p = $ ?? document.createElement("style");
+          $ || p.setAttribute("data-bquery-component-style", ""), p.textContent = e.styles, x.prepend(p);
+        }
+        a && e.updated?.call(this, i);
+      } catch (u) {
+        this.handleError(u);
+      }
+    }
+  }
+  return E;
+};
+function ce(r, e) {
+  return M(r, e);
+}
+function b(r, e) {
+  const o = M(r, e);
+  customElements.get(r) || customElements.define(r, o);
+}
+var z = /* @__PURE__ */ Symbol("bquery.booleanAttribute"), Y = /^[^\0-\x20"'/>=]+$/, _ = (r) => {
+  if (typeof r != "object" || r === null) return !1;
+  const e = r;
+  return e[z] === !0 && typeof e.enabled == "boolean" && typeof e.name == "string";
+}, O = (r) => _(r) ? r.enabled ? r.name : "" : String(r ?? ""), X = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#x27;",
+  "`": "&#x60;"
+}, Z = (r) => _(r) ? r.enabled ? r.name : "" : O(r).replace(/[&<>"'`]/g, (e) => X[e]), ue = (r, e) => {
+  if (!Y.test(r)) throw new TypeError(`Invalid boolean attribute name: ${r}`);
+  return Object.freeze({
+    [z]: !0,
+    enabled: !!e,
+    name: r
+  });
+}, m = (r, ...e) => r.reduce((o, t, s) => `${o}${t}${O(e[s])}`, ""), de = (r, ...e) => {
+  const o = (t) => N(t) ? L(t) : Z(t);
+  return D(r.reduce((t, s, l) => `${t}${s}${l < e.length ? o(e[l]) : ""}`, ""));
+}, v = `
+  :host {
+    color: inherit;
+    font: inherit;
+  }
+`, T = `
+  ${v}
+  .field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: 100%;
+  }
+  .label {
+    color: #334155;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  .control {
+    border: 1px solid #cbd5e1;
+    border-radius: 0.75rem;
+    box-sizing: border-box;
+    font: inherit;
+    min-height: 2.75rem;
+    outline: none;
+    padding: 0.75rem 0.875rem;
+    width: 100%;
+    background: #fff;
+    color: #0f172a;
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+  }
+  .control:focus {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+  }
+  .control:disabled {
+    background: #f8fafc;
+    color: #94a3b8;
+    cursor: not-allowed;
+  }
+`, c = (r) => j(r), A = /* @__PURE__ */ new WeakMap(), C = (r, e) => A.get(r)?.[e], k = (r, e, o) => {
+  const t = A.get(r) ?? {};
+  t[e] = o, A.set(r, t);
+}, P = (r, e, o) => {
+  if (o.label !== e.label || o.type !== e.type || o.placeholder !== e.placeholder || o.name !== e.name || o.disabled !== e.disabled) return !1;
+  const t = r.shadowRoot;
+  if (!t || (t.querySelector(".label")?.textContent ?? "") !== e.label) return !1;
+  const s = t.querySelector("input.control");
+  return !s || s.type !== e.type || s.placeholder !== e.placeholder || s.name !== e.name || s.disabled !== e.disabled ? !1 : (s.value !== e.value && (s.value = e.value), !0);
+}, V = (r, e, o) => {
+  if (o.label !== e.label || o.placeholder !== e.placeholder || o.name !== e.name || o.rows !== e.rows || o.disabled !== e.disabled) return !1;
+  const t = r.shadowRoot;
+  if (!t || (t.querySelector(".label")?.textContent ?? "") !== e.label) return !1;
+  const s = t.querySelector("textarea.control");
+  return !s || s.placeholder !== e.placeholder || s.name !== e.name || Number(s.rows) !== e.rows || s.disabled !== e.disabled ? !1 : (s.value !== e.value && (s.value = e.value), !0);
+}, ee = (r) => [
+  "<textarea",
+  ' part="control"',
+  ' class="control"',
+  ` placeholder="${c(r.placeholder)}"`,
+  ` name="${c(r.name)}"`,
+  ` rows="${r.rows}"`,
+  r.disabled ? " disabled" : "",
+  `>${c(r.value)}</textarea>`
+].join(""), fe = (r = {}) => {
+  const e = r.prefix ?? U().components?.prefix ?? "bq", o = {
+    button: `${e}-button`,
+    card: `${e}-card`,
+    input: `${e}-input`,
+    textarea: `${e}-textarea`,
+    checkbox: `${e}-checkbox`
+  };
+  return b(o.button, {
+    props: {
+      label: {
+        type: String,
+        default: ""
+      },
+      variant: {
+        type: String,
+        default: "primary"
+      },
+      size: {
+        type: String,
+        default: "md"
+      },
+      type: {
+        type: String,
+        default: "button"
+      },
+      disabled: {
+        type: Boolean,
+        default: !1
+      }
+    },
+    styles: `
+      ${v}
+      button {
+        appearance: none;
+        border: 0;
+        border-radius: 999px;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font: inherit;
+        font-weight: 600;
+        gap: 0.5rem;
+        min-height: 2.5rem;
+        padding: 0.65rem 1rem;
+        transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
+        background: #2563eb;
+        color: #fff;
+      }
+      button[data-variant='secondary'] {
+        background: #e2e8f0;
+        color: #0f172a;
+      }
+      button[data-size='sm'] {
+        min-height: 2.125rem;
+        padding: 0.5rem 0.875rem;
+      }
+      button[data-size='lg'] {
+        min-height: 3rem;
+        padding: 0.875rem 1.25rem;
+      }
+      button:hover:not(:disabled) {
+        transform: translateY(-1px);
+      }
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `,
+    render: ({ props: t }) => m`
+      <button
+        part="button"
+        type="${c(t.type)}"
+        data-variant="${c(t.variant)}"
+        data-size="${c(t.size)}"
+        ${t.disabled ? "disabled" : ""}
+      >
+        <slot>${c(t.label)}</slot>
+      </button>
+    `
+  }), b(o.card, {
+    props: {
+      title: {
+        type: String,
+        default: ""
+      },
+      footer: {
+        type: String,
+        default: ""
+      },
+      elevated: {
+        type: Boolean,
+        default: !0
+      }
+    },
+    styles: `
+      ${v}
+      article {
+        background: #fff;
+        border: 1px solid #e2e8f0;
+        border-radius: 1rem;
+        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
+        color: #0f172a;
+        display: block;
+        padding: 1rem;
+      }
+      article[data-elevated='false'] {
+        box-shadow: none;
+      }
+      header, footer {
+        color: #475569;
+        font-size: 0.95rem;
+        font-weight: 600;
+      }
+      header {
+        margin-bottom: 0.75rem;
+      }
+      footer {
+        margin-top: 0.75rem;
+      }
+    `,
+    render: ({ props: t }) => m`
+      <article part="card" data-elevated="${String(t.elevated)}">
+        ${t.title ? `<header part="header">${c(t.title)}</header>` : ""}
+        <section part="body"><slot></slot></section>
+        ${t.footer ? `<footer part="footer">${c(t.footer)}</footer>` : ""}
+      </article>
+    `
+  }), b(o.input, {
+    props: {
+      label: {
+        type: String,
+        default: ""
+      },
+      type: {
+        type: String,
+        default: "text"
+      },
+      value: {
+        type: String,
+        default: ""
+      },
+      placeholder: {
+        type: String,
+        default: ""
+      },
+      name: {
+        type: String,
+        default: ""
+      },
+      disabled: {
+        type: Boolean,
+        default: !1
+      }
+    },
+    styles: T,
+    beforeUpdate(t, s) {
+      return !P(this, t, s);
+    },
+    connected() {
+      const t = (s) => {
+        const l = s.target;
+        l?.matches("input") && (s.stopPropagation(), this.setAttribute("value", l.value), this.dispatchEvent(new CustomEvent("input", {
+          detail: { value: l.value },
+          bubbles: !0,
+          composed: !0
+        })));
+      };
+      k(this, "__bqueryInputHandler", t), this.shadowRoot?.addEventListener("input", t);
+    },
+    disconnected() {
+      const t = C(this, "__bqueryInputHandler");
+      t && this.shadowRoot?.removeEventListener("input", t);
+    },
+    render: ({ props: t }) => m`
+      <label part="field" class="field">
+        ${t.label ? `<span part="label" class="label">${c(t.label)}</span>` : ""}
+        <input
+          part="control"
+          class="control"
+          type="${c(t.type)}"
+          value="${c(t.value)}"
+          placeholder="${c(t.placeholder)}"
+          name="${c(t.name)}"
+          ${t.disabled ? "disabled" : ""}
+        />
+      </label>
+    `
+  }), b(o.textarea, {
+    props: {
+      label: {
+        type: String,
+        default: ""
+      },
+      value: {
+        type: String,
+        default: ""
+      },
+      placeholder: {
+        type: String,
+        default: ""
+      },
+      name: {
+        type: String,
+        default: ""
+      },
+      rows: {
+        type: Number,
+        default: 4
+      },
+      disabled: {
+        type: Boolean,
+        default: !1
+      }
+    },
+    styles: `${T}
+      textarea.control {
+        min-height: 6rem;
+        resize: vertical;
+      }
+    `,
+    beforeUpdate(t, s) {
+      return !V(this, t, s);
+    },
+    connected() {
+      const t = (s) => {
+        const l = s.target;
+        l?.matches("textarea") && (s.stopPropagation(), this.setAttribute("value", l.value), this.dispatchEvent(new CustomEvent("input", {
+          detail: { value: l.value },
+          bubbles: !0,
+          composed: !0
+        })));
+      };
+      k(this, "__bqueryTextareaHandler", t), this.shadowRoot?.addEventListener("input", t);
+    },
+    disconnected() {
+      const t = C(this, "__bqueryTextareaHandler");
+      t && this.shadowRoot?.removeEventListener("input", t);
+    },
+    render: ({ props: t }) => m`
+      <label part="field" class="field">
+        ${t.label ? `<span part="label" class="label">${c(t.label)}</span>` : ""}
+        ${ee(t)}
+      </label>
+    `
+  }), b(o.checkbox, {
+    props: {
+      label: {
+        type: String,
+        default: ""
+      },
+      checked: {
+        type: Boolean,
+        default: !1
+      },
+      disabled: {
+        type: Boolean,
+        default: !1
+      }
+    },
+    styles: `
+      ${v}
+      label {
+        align-items: center;
+        color: #0f172a;
+        cursor: pointer;
+        display: inline-flex;
+        gap: 0.625rem;
+      }
+      input {
+        accent-color: #2563eb;
+        block-size: 1rem;
+        inline-size: 1rem;
+      }
+      input:disabled {
+        cursor: not-allowed;
+      }
+    `,
+    connected() {
+      const t = (s) => {
+        const l = s.target;
+        l?.matches('input[type="checkbox"]') && (s.stopPropagation(), l.checked ? this.setAttribute("checked", "true") : this.removeAttribute("checked"), this.dispatchEvent(new CustomEvent("change", {
+          detail: { checked: l.checked },
+          bubbles: !0,
+          composed: !0
+        })));
+      };
+      k(this, "__bqueryCheckboxHandler", t), this.shadowRoot?.addEventListener("change", t);
+    },
+    disconnected() {
+      const t = C(this, "__bqueryCheckboxHandler");
+      t && this.shadowRoot?.removeEventListener("change", t);
+    },
+    render: ({ props: t }) => m`
+      <label part="label">
+        <input
+          part="control"
+          type="checkbox"
+          ${t.checked ? "checked" : ""}
+          ${t.disabled ? "disabled" : ""}
+        />
+        <span part="text"><slot>${c(t.label)}</slot></span>
+      </label>
+    `
+  }), o;
+};
+export {
+  b as a,
+  ie as c,
+  de as i,
+  ne as l,
+  ue as n,
+  ce as o,
+  m as r,
+  le as s,
+  fe as t
+};
+
+//# sourceMappingURL=component-L3-JfOFz.js.map