@erplora/outfitkit 0.1.1

package/dist/ok-receipt.js

@@ -0,0 +1,183 @@
+import { LitElement, css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+import "./ok-qr.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LABELS = {
+  empty: "No receipt data.",
+  phone: "Tel.",
+  receipt: "Receipt",
+  servedBy: "Served by",
+  customer: "Customer",
+  item: "Item",
+  amount: "Amount",
+  noLines: "— No lines —",
+  subtotal: "Subtotal",
+  total: "TOTAL",
+  change: "Change"
+};
+class OkReceipt extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.qrSize = 120;
+    this.labels = {};
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Ancho de papel térmico estándar (80mm). Overridable vía --receipt-width. */
+      --w: var(--receipt-width, 80mm);
+      display: block;
+      width: 100%;
+    }
+    .paper {
+      box-sizing: border-box;
+      width: var(--w);
+      max-width: 100%;
+      margin: 0 auto;
+      padding: 4mm 3mm;
+      background: #fff;
+      color: #000;
+      /* Monospace = look de tiquet; tabular para alinear importes. */
+      font-family: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+      font-size: 11px;
+      line-height: 1.45;
+      font-variant-numeric: tabular-nums;
+    }
+    .center { text-align: center; }
+    .biz-logo { max-width: 60%; max-height: 22mm; margin: 0 auto 2mm; display: block; }
+    .biz-name { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
+    .biz-meta { font-size: 10px; }
+    .sep { border: none; border-top: 1px dashed #000; margin: 2mm 0; }
+    .meta {
+      display: flex; justify-content: space-between; gap: .5rem;
+      font-size: 10px;
+    }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { padding: .3mm 0; vertical-align: top; }
+    thead th { font-size: 9px; text-transform: uppercase; text-align: left; border-bottom: 1px solid #000; }
+    th.num, td.num { text-align: right; white-space: nowrap; }
+    .line-name { word-break: break-word; }
+    .line-note { font-size: 9px; padding-left: 2mm; opacity: .8; }
+    .qty-price { font-size: 9px; opacity: .85; }
+    .totals { width: 100%; }
+    .totals td { padding: .2mm 0; }
+    .totals td.num { text-align: right; white-space: nowrap; }
+    .grand td { font-size: 14px; font-weight: 700; padding-top: 1mm; }
+    .pay td { font-size: 10px; }
+    .footer { font-size: 10px; white-space: pre-line; }
+    .qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 1mm; margin-top: 2mm; }
+    .qr-note { font-size: 8px; text-align: center; word-break: break-word; }
+    .empty { padding: 4mm; text-align: center; color: #888; font-style: italic; }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  cur() {
+    return this.receipt?.currency ?? "€";
+  }
+  money(n) {
+    return `${Number(n ?? 0).toFixed(2)} ${this.cur()}`;
+  }
+  render() {
+    const r = this.receipt;
+    if (!r) return html`<div class="paper empty">${this.t.empty}</div>`;
+    return html`<div class="paper" part="paper">
+      ${this.renderHeader(r)}
+      <hr class="sep" />
+      ${this.renderMeta(r)}
+      <hr class="sep" />
+      ${this.renderLines(r)}
+      <hr class="sep" />
+      ${this.renderTotals(r)}
+      ${r.footer ? html`<hr class="sep" /><div class="center footer">${r.footer}</div>` : nothing}
+      ${this.renderQr(r)}
+    </div>`;
+  }
+  renderHeader(r) {
+    const b = r.business ?? { name: "" };
+    return html`<div class="center">
+      ${b.logo_url ? html`<img class="biz-logo" src=${b.logo_url} alt=${b.name || "logo"} />` : html`<slot name="logo"></slot>`}
+      <div class="biz-name">${b.name}</div>
+      ${b.address ? html`<div class="biz-meta">${b.address}</div>` : nothing}
+      ${b.tax_id ? html`<div class="biz-meta">${b.tax_id}</div>` : nothing}
+      ${b.phone ? html`<div class="biz-meta">${this.t.phone} ${b.phone}</div>` : nothing}
+    </div>`;
+  }
+  renderMeta(r) {
+    return html`<div class="meta">
+        <span>${this.t.receipt}: <strong>${r.number}</strong></span>
+        ${r.datetime ? html`<span>${r.datetime}</span>` : nothing}
+      </div>
+      ${r.cashier || r.customer ? html`<div class="meta">
+            ${r.cashier ? html`<span>${this.t.servedBy}: ${r.cashier}</span>` : html`<span></span>`}
+            ${r.customer ? html`<span>${this.t.customer}: ${r.customer}</span>` : nothing}
+          </div>` : nothing}`;
+  }
+  renderLines(r) {
+    const lines = r.lines ?? [];
+    if (!lines.length) return html`<div class="center biz-meta">${this.t.noLines}</div>`;
+    return html`<table>
+      <thead>
+        <tr><th>${this.t.item}</th><th class="num">${this.t.amount}</th></tr>
+      </thead>
+      <tbody>
+        ${lines.map(
+      (l) => html`<tr>
+              <td class="line-name">
+                <div>${l.name}</div>
+                <div class="qty-price">${l.qty} × ${this.money(l.unit_price)}</div>
+                ${l.note ? html`<div class="line-note">${l.note}</div>` : nothing}
+              </td>
+              <td class="num">${this.money(l.total)}</td>
+            </tr>`
+    )}
+      </tbody>
+    </table>`;
+  }
+  renderTotals(r) {
+    const taxes = r.taxes ?? [];
+    return html`<table class="totals">
+      ${r.subtotal != null ? html`<tr><td>${this.t.subtotal}</td><td class="num">${this.money(r.subtotal)}</td></tr>` : nothing}
+      ${taxes.map(
+      (t) => html`<tr><td>${t.label}</td><td class="num">${this.money(t.amount)}</td></tr>`
+    )}
+      <tr class="grand"><td>${this.t.total}</td><td class="num">${this.money(r.total)}</td></tr>
+      ${r.payment ? html`<tr class="pay"><td>${r.payment.method}</td><td class="num">${this.money(
+      r.payment.paid ?? r.total
+    )}</td></tr>
+            ${r.payment.change != null ? html`<tr class="pay"><td>${this.t.change}</td><td class="num">${this.money(
+      r.payment.change
+    )}</td></tr>` : nothing}` : nothing}
+    </table>`;
+  }
+  renderQr(r) {
+    if (!r.qr) return nothing;
+    return html`<div class="qr-wrap">
+      <ok-qr .value=${r.qr} .size=${this.qrSize} ec="M" color="#000" background="#fff"></ok-qr>
+      ${r.qr_note ? html`<div class="qr-note">${r.qr_note}</div>` : nothing}
+    </div>`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkReceipt.prototype, "receipt");
+__decorateClass([
+  property({ type: Number, attribute: "qr-size" })
+], OkReceipt.prototype, "qrSize");
+__decorateClass([
+  property({ attribute: false })
+], OkReceipt.prototype, "labels");
+define("ok-receipt", OkReceipt);
+export {
+  OkReceipt
+};

package/dist/ok-reveal.js

@@ -0,0 +1,94 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class OkReveal extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "up";
+    this.delay = 0;
+    this.once = true;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .r {
+      height: 100%;
+      opacity: 0;
+      transform: translateY(18px);
+      transition:
+        opacity var(--ok-reveal-duration, 0.65s) cubic-bezier(0.22, 0.7, 0.2, 1) var(--ok-reveal-delay, 0ms),
+        transform var(--ok-reveal-duration, 0.65s) cubic-bezier(0.22, 0.7, 0.2, 1) var(--ok-reveal-delay, 0ms);
+      will-change: opacity, transform;
+    }
+    :host([variant='fade']) .r { transform: none; }
+    :host([variant='scale']) .r { transform: scale(0.95); }
+    :host([variant='left']) .r { transform: translateX(-28px); }
+    :host([variant='right']) .r { transform: translateX(28px); }
+    :host(.ok-in) .r {
+      opacity: 1;
+      transform: none;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .r {
+        opacity: 1 !important;
+        transform: none !important;
+        transition: none !important;
+      }
+    }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.setProperty("--ok-reveal-delay", `${this.delay}ms`);
+    if (typeof IntersectionObserver === "undefined") {
+      this.classList.add("ok-in");
+      return;
+    }
+    this._io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) {
+            this.classList.add("ok-in");
+            if (this.once) this._io?.disconnect();
+          } else if (!this.once) {
+            this.classList.remove("ok-in");
+          }
+        }
+      },
+      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
+    );
+    this._io.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._io?.disconnect();
+  }
+  render() {
+    return html`<div class="r"><slot></slot></div>`;
+  }
+}
+__decorateClass([
+  property({ reflect: true })
+], OkReveal.prototype, "variant");
+__decorateClass([
+  property({ type: Number })
+], OkReveal.prototype, "delay");
+__decorateClass([
+  property({ type: Boolean })
+], OkReveal.prototype, "once");
+define("ok-reveal", OkReveal);
+export {
+  OkReveal
+};