@bquery/bquery 1.4.0 → 1.6.0

package/dist/component-BEQgt5hl.js

@@ -0,0 +1,600 @@
+import { f as A, l as q, n as z, t as _, u as M } from "./sanitize-Bs2dkMby.js";
+import { t as O } from "./effect-AFRW_Plg.js";
+import { n as B } from "./config-DRmZZno3.js";
+import { t as E } from "./untrack-B0rVscTc.js";
+var H = (r, t) => {
+  const { type: a } = t;
+  if (a === String) return r;
+  if (a === Number) return Number(r);
+  if (a === Boolean) {
+    const e = r.trim().toLowerCase();
+    return e === "" || e === "true" || e === "1" ? !0 : e === "false" || e === "0" ? !1 : !!r;
+  }
+  if (a === Object || a === Array) try {
+    return JSON.parse(r);
+  } catch {
+    return r;
+  }
+  if (typeof a == "function") {
+    const e = a, n = a;
+    if (t.construct === !0) return Reflect.construct(n, [r]);
+    if (t.construct === !1) return e(r);
+    const l = a.prototype !== void 0 && a.prototype !== null, x = (l ? Object.getOwnPropertyNames(a.prototype) : []).length > 1, s = l && a.prototype.constructor !== a, i = /^class\s/.test(Function.prototype.toString.call(a));
+    if (x || s || i) try {
+      return Reflect.construct(n, [r]);
+    } catch {
+      return e(r);
+    }
+    try {
+      const o = e(r);
+      if (o === void 0 && l) try {
+        return Reflect.construct(n, [r]);
+      } catch {
+        return o;
+      }
+      return o;
+    } catch (o) {
+      if (o instanceof TypeError && /cannot be invoked without 'new'|is not a function/i.test(o.message)) return Reflect.construct(n, [r]);
+      throw o;
+    }
+  }
+  return r;
+}, L = ["slot"], I = [
+  "part",
+  "disabled",
+  "checked",
+  "placeholder",
+  "value",
+  "rows",
+  "cols",
+  "readonly",
+  "required",
+  "maxlength",
+  "minlength",
+  "max",
+  "min",
+  "step",
+  "pattern",
+  "autocomplete",
+  "autofocus",
+  "for",
+  "multiple",
+  "selected",
+  "wrap"
+], S = (r, t) => {
+  const a = [...L, ...t.sanitize?.allowTags ?? []], e = [...I, ...t.sanitize?.allowAttributes ?? []], n = Object.values(t.signals ?? {});
+  class l extends HTMLElement {
+    constructor() {
+      super(), this.state = { ...t.state ?? {} }, this.props = {}, this.missingRequiredProps = /* @__PURE__ */ new Set(), this.hasMounted = !1, this.attachShadow({ mode: "open" }), this.syncProps();
+    }
+    static get observedAttributes() {
+      return Object.keys(t.props ?? {});
+    }
+    connectedCallback() {
+      try {
+        if (!this.hasMounted && this.missingRequiredProps.size > 0) return;
+        if (this.hasMounted) {
+          try {
+            t.connected?.call(this);
+          } catch (s) {
+            this.handleError(s);
+          }
+          this.setupSignalSubscriptions(!0);
+          return;
+        }
+        this.mount();
+      } catch (s) {
+        this.handleError(s);
+      }
+    }
+    mount() {
+      this.hasMounted || (t.beforeMount?.call(this), t.connected?.call(this), this.render(), this.setupSignalSubscriptions(), this.hasMounted = !0);
+    }
+    disconnectedCallback() {
+      try {
+        this.signalEffectCleanup?.(), this.signalEffectCleanup = void 0, t.disconnected?.call(this);
+      } catch (s) {
+        this.handleError(s);
+      }
+    }
+    attributeChangedCallback(s, i, o) {
+      try {
+        const u = this.cloneProps();
+        this.syncProps(), this.hasMounted ? this.render(!0, u, {
+          name: s,
+          oldValue: i,
+          newValue: o
+        }) : this.isConnected && this.missingRequiredProps.size === 0 && this.mount();
+      } catch (u) {
+        this.handleError(u);
+      }
+    }
+    handleError(s) {
+      t.onError ? t.onError.call(this, s) : console.error(`bQuery component error in <${r}>:`, s);
+    }
+    setState(s, i) {
+      this.state[s] = i, this.render(!0, this.cloneProps(), void 0, !1);
+    }
+    getState(s) {
+      return this.state[s];
+    }
+    setupSignalSubscriptions(s = !1) {
+      if (this.signalEffectCleanup || n.length === 0) return;
+      let i = !0;
+      this.signalEffectCleanup = O(() => {
+        try {
+          for (const u of n) u.value;
+          if (i) {
+            if (i = !1, s && this.hasMounted && this.isConnected) {
+              const u = this.cloneProps();
+              E(() => {
+                this.render(!0, u, void 0, !1);
+              });
+            }
+            return;
+          }
+          if (!this.hasMounted || !this.isConnected) return;
+          const o = this.cloneProps();
+          E(() => {
+            this.render(!0, o, void 0, !1);
+          });
+        } catch (o) {
+          this.handleError(o);
+        }
+      });
+    }
+    syncProps() {
+      const s = t.props ?? {};
+      for (const [i, o] of Object.entries(s)) {
+        const u = this.getAttribute(i);
+        let d;
+        if (u == null ? o.required && o.default === void 0 ? (this.missingRequiredProps.add(i), d = void 0) : d = o.default ?? void 0 : (this.missingRequiredProps.has(i) && this.missingRequiredProps.delete(i), d = H(u, o)), o.validator && d !== void 0 && !o.validator(d))
+          throw new Error(`bQuery component: validation failed for prop "${i}" with value ${JSON.stringify(d)}`);
+        this.props[i] = d;
+      }
+    }
+    cloneProps() {
+      return { ...this.props };
+    }
+    render(s = !1, i, o, u = !0) {
+      try {
+        if (s && u && t.beforeUpdate) {
+          if (!i) throw new Error("bQuery component: previous props are required for update renders");
+          if (t.beforeUpdate.call(this, this.props, i) === !1) return;
+        }
+        const d = (h, T) => {
+          this.dispatchEvent(new CustomEvent(h, {
+            detail: T,
+            bubbles: !0,
+            composed: !0
+          }));
+        };
+        if (!this.shadowRoot) return;
+        const R = z(t.render({
+          props: this.props,
+          state: this.state,
+          signals: t.signals ?? {},
+          emit: d
+        }), {
+          allowTags: a,
+          allowAttributes: e
+        });
+        let m = null;
+        if (t.styles && (m = this.shadowRoot.querySelector("style[data-bquery-component-style]")), this.shadowRoot.innerHTML = R, t.styles) {
+          const h = m ?? document.createElement("style");
+          m || h.setAttribute("data-bquery-component-style", ""), h.textContent = t.styles, this.shadowRoot.prepend(h);
+        }
+        s && t.updated?.call(this, o);
+      } catch (d) {
+        this.handleError(d);
+      }
+    }
+  }
+  return l;
+};
+function K(r, t) {
+  return S(r, t);
+}
+function f(r, t) {
+  const a = S(r, t);
+  customElements.get(r) || customElements.define(r, a);
+}
+var k = /* @__PURE__ */ Symbol("bquery.booleanAttribute"), N = /^[^\0-\x20"'/>=]+$/, C = (r) => {
+  if (typeof r != "object" || r === null) return !1;
+  const t = r;
+  return t[k] === !0 && typeof t.enabled == "boolean" && typeof t.name == "string";
+}, w = (r) => C(r) ? r.enabled ? r.name : "" : String(r ?? ""), j = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#x27;",
+  "`": "&#x60;"
+}, P = (r) => C(r) ? r.enabled ? r.name : "" : w(r).replace(/[&<>"'`]/g, (t) => j[t]), Y = (r, t) => {
+  if (!N.test(r)) throw new TypeError(`Invalid boolean attribute name: ${r}`);
+  const a = {
+    [k]: !0,
+    enabled: !!t,
+    name: r
+  };
+  return Object.freeze(a);
+}, p = (r, ...t) => r.reduce((a, e, n) => `${a}${e}${w(t[n])}`, ""), X = (r, ...t) => {
+  const a = (e) => q(e) ? A(e) : P(e);
+  return M(r.reduce((e, n, l) => `${e}${n}${l < t.length ? a(t[l]) : ""}`, ""));
+}, b = `
+  :host {
+    color: inherit;
+    font: inherit;
+  }
+`, $ = `
+  ${b}
+  .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) => _(r), v = /* @__PURE__ */ new WeakMap(), y = (r, t) => v.get(r)?.[t], g = (r, t, a) => {
+  const e = v.get(r) ?? {};
+  e[t] = a, v.set(r, e);
+}, U = (r, t, a) => {
+  if (a.label !== t.label || a.type !== t.type || a.placeholder !== t.placeholder || a.name !== t.name || a.disabled !== t.disabled) return !1;
+  const e = r.shadowRoot?.querySelector("input.control");
+  return e ? (e.value !== t.value && (e.value = t.value), !0) : !1;
+}, Q = (r, t, a) => {
+  if (a.label !== t.label || a.placeholder !== t.placeholder || a.name !== t.name || a.rows !== t.rows || a.disabled !== t.disabled) return !1;
+  const e = r.shadowRoot?.querySelector("textarea.control");
+  return e ? (e.value !== t.value && (e.value = t.value), !0) : !1;
+}, D = (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(""), Z = (r = {}) => {
+  const t = r.prefix ?? B().components?.prefix ?? "bq", a = {
+    button: `${t}-button`,
+    card: `${t}-card`,
+    input: `${t}-input`,
+    textarea: `${t}-textarea`,
+    checkbox: `${t}-checkbox`
+  };
+  return f(a.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: `
+      ${b}
+      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: e }) => p`
+      <button
+        part="button"
+        type="${c(e.type)}"
+        data-variant="${c(e.variant)}"
+        data-size="${c(e.size)}"
+        ${e.disabled ? "disabled" : ""}
+      >
+        <slot>${c(e.label)}</slot>
+      </button>
+    `
+  }), f(a.card, {
+    props: {
+      title: {
+        type: String,
+        default: ""
+      },
+      footer: {
+        type: String,
+        default: ""
+      },
+      elevated: {
+        type: Boolean,
+        default: !0
+      }
+    },
+    styles: `
+      ${b}
+      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: e }) => p`
+      <article part="card" data-elevated="${String(e.elevated)}">
+        ${e.title ? `<header part="header">${c(e.title)}</header>` : ""}
+        <section part="body"><slot></slot></section>
+        ${e.footer ? `<footer part="footer">${c(e.footer)}</footer>` : ""}
+      </article>
+    `
+  }), f(a.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: $,
+    beforeUpdate(e, n) {
+      return !U(this, e, n);
+    },
+    connected() {
+      const e = (n) => {
+        const l = n.target;
+        l?.matches("input") && (n.stopPropagation(), this.setAttribute("value", l.value), this.dispatchEvent(new CustomEvent("input", {
+          detail: { value: l.value },
+          bubbles: !0,
+          composed: !0
+        })));
+      };
+      g(this, "__bqueryInputHandler", e), this.shadowRoot?.addEventListener("input", e);
+    },
+    disconnected() {
+      const e = y(this, "__bqueryInputHandler");
+      e && this.shadowRoot?.removeEventListener("input", e);
+    },
+    render: ({ props: e }) => p`
+      <label part="field" class="field">
+        ${e.label ? `<span part="label" class="label">${c(e.label)}</span>` : ""}
+        <input
+          part="control"
+          class="control"
+          type="${c(e.type)}"
+          value="${c(e.value)}"
+          placeholder="${c(e.placeholder)}"
+          name="${c(e.name)}"
+          ${e.disabled ? "disabled" : ""}
+        />
+      </label>
+    `
+  }), f(a.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: `${$}
+      textarea.control {
+        min-height: 6rem;
+        resize: vertical;
+      }
+    `,
+    beforeUpdate(e, n) {
+      return !Q(this, e, n);
+    },
+    connected() {
+      const e = (n) => {
+        const l = n.target;
+        l?.matches("textarea") && (n.stopPropagation(), this.setAttribute("value", l.value), this.dispatchEvent(new CustomEvent("input", {
+          detail: { value: l.value },
+          bubbles: !0,
+          composed: !0
+        })));
+      };
+      g(this, "__bqueryTextareaHandler", e), this.shadowRoot?.addEventListener("input", e);
+    },
+    disconnected() {
+      const e = y(this, "__bqueryTextareaHandler");
+      e && this.shadowRoot?.removeEventListener("input", e);
+    },
+    render: ({ props: e }) => p`
+      <label part="field" class="field">
+        ${e.label ? `<span part="label" class="label">${c(e.label)}</span>` : ""}
+        ${D(e)}
+      </label>
+    `
+  }), f(a.checkbox, {
+    props: {
+      label: {
+        type: String,
+        default: ""
+      },
+      checked: {
+        type: Boolean,
+        default: !1
+      },
+      disabled: {
+        type: Boolean,
+        default: !1
+      }
+    },
+    styles: `
+      ${b}
+      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 e = (n) => {
+        const l = n.target;
+        l?.matches('input[type="checkbox"]') && (n.stopPropagation(), l.checked ? this.setAttribute("checked", "true") : this.removeAttribute("checked"), this.dispatchEvent(new CustomEvent("change", {
+          detail: { checked: l.checked },
+          bubbles: !0,
+          composed: !0
+        })));
+      };
+      g(this, "__bqueryCheckboxHandler", e), this.shadowRoot?.addEventListener("change", e);
+    },
+    disconnected() {
+      const e = y(this, "__bqueryCheckboxHandler");
+      e && this.shadowRoot?.removeEventListener("change", e);
+    },
+    render: ({ props: e }) => p`
+      <label part="label">
+        <input
+          part="control"
+          type="checkbox"
+          ${e.checked ? "checked" : ""}
+          ${e.disabled ? "disabled" : ""}
+        />
+        <span part="text"><slot>${c(e.label)}</slot></span>
+      </label>
+    `
+  }), a;
+};
+export {
+  f as a,
+  X as i,
+  Y as n,
+  K as o,
+  p as r,
+  Z as t
+};
+
+//# sourceMappingURL=component-BEQgt5hl.js.map