@erplora/outfitkit 0.1.29 → 0.1.31

package/dist/components/ok-data-table/mobile-card-switch.test.d.ts

@@ -0,0 +1 @@
+import './ok-data-table.js';

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

@@ -231,6 +231,9 @@ export declare class OkDataTable extends LitElement {
     private filterDraft;
     private panel;
     private viewMode;
+    private isMobile;
+    private mq?;
+    private static readonly MOBILE_BREAKPOINT;
     private hiddenKeys;
     private internalSelection;
     private menuOpen;

package/dist/components/ok-invoice/ok-invoice.print.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ok-data-table.js

@@ -95,7 +95,7 @@ const ES_LABELS = {
   recordSingular: "registro",
   recordPlural: "registros"
 };
-class OkDataTable extends LitElement {
+const _OkDataTable = class _OkDataTable2 extends LitElement {
   constructor() {
     super(...arguments);
     this.columns = [];
@@ -133,6 +133,7 @@ class OkDataTable extends LitElement {
     this.filterDraft = {};
     this.panel = "none";
     this.viewMode = "table";
+    this.isMobile = false;
     this.hiddenKeys = /* @__PURE__ */ new Set();
     this.internalSelection = /* @__PURE__ */ new Set();
     this.menuOpen = false;
@@ -379,16 +380,37 @@ class OkDataTable extends LitElement {
     ion-button { --box-shadow: none; }
   `;
   }
+  static {
+    this.MOBILE_BREAKPOINT = 640;
+  }
   connectedCallback() {
     super.connectedCallback();
     if (typeof window !== "undefined") {
       window.addEventListener("erplora:locale-changed", this.onLocaleChanged);
     }
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+      this.mq = window.matchMedia(`(max-width: ${_OkDataTable2.MOBILE_BREAKPOINT}px)`);
+      this.isMobile = this.mq.matches;
+      const handler = (e) => {
+        const matches = "matches" in e ? e.matches : this.mq?.matches ?? false;
+        if (this.isMobile === matches) return;
+        this.isMobile = matches;
+        if (matches && this.cardViewEnabled) this.viewMode = "cards";
+        else if (!matches && this.viewMode === "cards") this.viewMode = "table";
+      };
+      this.mq.addEventListener("change", handler);
+      this._mqHandler = handler;
+    }
   }
   disconnectedCallback() {
     if (typeof window !== "undefined") {
       window.removeEventListener("erplora:locale-changed", this.onLocaleChanged);
     }
+    if (this.mq) {
+      const handler = this._mqHandler;
+      if (handler) this.mq.removeEventListener("change", handler);
+      this.mq = void 0;
+    }
     super.disconnectedCallback();
   }
   // ── i18n: idioma del documento ← overrides explícitos de `.labels` ─────────────────────────
@@ -747,8 +769,13 @@ class OkDataTable extends LitElement {
   // forma robusta de arrancar en tarjetas sin depender de fijar `viewMode` por referencia (que
   // falla si la tabla monta detrás de un `v-if`/loading y el ref aún es null).
   firstUpdated() {
-    if (this.defaultView === "cards" && this.cardViewEnabled) this.viewMode = "cards";
-    else if (this.defaultView === "table") this.viewMode = "table";
+    if (this.isMobile && this.cardViewEnabled) {
+      this.viewMode = "cards";
+    } else if (this.defaultView === "cards" && this.cardViewEnabled) {
+      this.viewMode = "cards";
+    } else if (this.defaultView === "table") {
+      this.viewMode = "table";
+    }
   }
   setViewMode(mode) {
     if (this.viewMode === mode) return;
@@ -1229,154 +1256,158 @@ class OkDataTable extends LitElement {
       </div>
     `;
   }
-}
+};
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "columns");
+], _OkDataTable.prototype, "columns");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "rows");
+], _OkDataTable.prototype, "rows");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "searchKeys");
+], _OkDataTable.prototype, "searchKeys");
 __decorateClass([
   property({ attribute: "row-key-field" })
-], OkDataTable.prototype, "rowKeyField");
+], _OkDataTable.prototype, "rowKeyField");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "rowKey");
+], _OkDataTable.prototype, "rowKey");
 __decorateClass([
   property({ type: Number, attribute: "page-size" })
-], OkDataTable.prototype, "pageSize");
+], _OkDataTable.prototype, "pageSize");
 __decorateClass([
   property({ attribute: "empty-message" })
-], OkDataTable.prototype, "emptyMessage");
+], _OkDataTable.prototype, "emptyMessage");
 __decorateClass([
   property({ attribute: "search-placeholder" })
-], OkDataTable.prototype, "searchPlaceholder");
+], _OkDataTable.prototype, "searchPlaceholder");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "labels");
+], _OkDataTable.prototype, "labels");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "actions");
+], _OkDataTable.prototype, "actions");
 __decorateClass([
   property({ type: Boolean })
-], OkDataTable.prototype, "addable");
+], _OkDataTable.prototype, "addable");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "pageSizeOptions");
+], _OkDataTable.prototype, "pageSizeOptions");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], OkDataTable.prototype, "fill");
+], _OkDataTable.prototype, "fill");
 __decorateClass([
   property({ type: Boolean, attribute: "column-picker" })
-], OkDataTable.prototype, "columnPicker");
+], _OkDataTable.prototype, "columnPicker");
 __decorateClass([
   property({ type: Boolean })
-], OkDataTable.prototype, "csv");
+], _OkDataTable.prototype, "csv");
 __decorateClass([
   property({ attribute: "csv-name" })
-], OkDataTable.prototype, "csvName");
+], _OkDataTable.prototype, "csvName");
 __decorateClass([
   property({ type: Boolean, attribute: "server-side" })
-], OkDataTable.prototype, "serverSide");
+], _OkDataTable.prototype, "serverSide");
 __decorateClass([
   property({ type: Number })
-], OkDataTable.prototype, "total");
+], _OkDataTable.prototype, "total");
 __decorateClass([
   property({ type: Number })
-], OkDataTable.prototype, "page");
+], _OkDataTable.prototype, "page");
 __decorateClass([
   property({ type: Boolean })
-], OkDataTable.prototype, "searchable");
+], _OkDataTable.prototype, "searchable");
 __decorateClass([
   property({ type: String })
-], OkDataTable.prototype, "sort");
+], _OkDataTable.prototype, "sort");
 __decorateClass([
   property({ attribute: "sort-dir" })
-], OkDataTable.prototype, "sortDir");
+], _OkDataTable.prototype, "sortDir");
 __decorateClass([
   property()
-], OkDataTable.prototype, "title");
+], _OkDataTable.prototype, "title");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "views");
+], _OkDataTable.prototype, "views");
 __decorateClass([
   property({ attribute: "default-view" })
-], OkDataTable.prototype, "defaultView");
+], _OkDataTable.prototype, "defaultView");
 __decorateClass([
   property({ type: Boolean })
-], OkDataTable.prototype, "exportable");
+], _OkDataTable.prototype, "exportable");
 __decorateClass([
   property({ type: Boolean })
-], OkDataTable.prototype, "importable");
+], _OkDataTable.prototype, "importable");
 __decorateClass([
   property({ type: Boolean, attribute: "column-selector" })
-], OkDataTable.prototype, "columnSelector");
+], _OkDataTable.prototype, "columnSelector");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "pageSizes");
+], _OkDataTable.prototype, "pageSizes");
 __decorateClass([
   property({ type: Boolean })
-], OkDataTable.prototype, "selectable");
+], _OkDataTable.prototype, "selectable");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "selectedKeys");
+], _OkDataTable.prototype, "selectedKeys");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "primaryAction");
+], _OkDataTable.prototype, "primaryAction");
 __decorateClass([
   property({ type: Boolean })
-], OkDataTable.prototype, "inlineFilters");
+], _OkDataTable.prototype, "inlineFilters");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "menuActions");
+], _OkDataTable.prototype, "menuActions");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "cardTitle");
+], _OkDataTable.prototype, "cardTitle");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "cardIcon");
+], _OkDataTable.prototype, "cardIcon");
 __decorateClass([
   property({ attribute: false })
-], OkDataTable.prototype, "renderCard");
+], _OkDataTable.prototype, "renderCard");
+__decorateClass([
+  state()
+], _OkDataTable.prototype, "q");
 __decorateClass([
   state()
-], OkDataTable.prototype, "q");
+], _OkDataTable.prototype, "clientPage");
 __decorateClass([
   state()
-], OkDataTable.prototype, "clientPage");
+], _OkDataTable.prototype, "clientPageSize");
 __decorateClass([
   state()
-], OkDataTable.prototype, "clientPageSize");
+], _OkDataTable.prototype, "clientSort");
 __decorateClass([
   state()
-], OkDataTable.prototype, "clientSort");
+], _OkDataTable.prototype, "clientSortDir");
 __decorateClass([
   state()
-], OkDataTable.prototype, "clientSortDir");
+], _OkDataTable.prototype, "clientFilters");
 __decorateClass([
   state()
-], OkDataTable.prototype, "clientFilters");
+], _OkDataTable.prototype, "filterDraft");
 __decorateClass([
   state()
-], OkDataTable.prototype, "filterDraft");
+], _OkDataTable.prototype, "panel");
 __decorateClass([
   state()
-], OkDataTable.prototype, "panel");
+], _OkDataTable.prototype, "viewMode");
 __decorateClass([
   state()
-], OkDataTable.prototype, "viewMode");
+], _OkDataTable.prototype, "isMobile");
 __decorateClass([
   state()
-], OkDataTable.prototype, "hiddenKeys");
+], _OkDataTable.prototype, "hiddenKeys");
 __decorateClass([
   state()
-], OkDataTable.prototype, "internalSelection");
+], _OkDataTable.prototype, "internalSelection");
 __decorateClass([
   state()
-], OkDataTable.prototype, "menuOpen");
+], _OkDataTable.prototype, "menuOpen");
+let OkDataTable = _OkDataTable;
 define("ok-data-table", OkDataTable);
 export {
   OkDataTable

package/dist/ok-invoice.js

@@ -100,6 +100,37 @@ class OkInvoice extends LitElement {
     .qr-note { font-size: 8px; max-width: 36mm; text-align: center; color: var(--muted); word-break: break-word; }
     .legal { margin-top: 8mm; padding-top: 3mm; border-top: 1px solid var(--rule); font-size: 9px; color: var(--muted); white-space: pre-line; text-align: center; }
     .empty { padding: 12mm; text-align: center; color: #999; font-style: italic; }
+
+    /* ── Papel ──────────────────────────────────────────────────────────────────────────────
+       Una factura es un documento fiscal: acaba impresa, y en pantalla y en papel no se
+       comporta igual. Lo que hay aquí resuelve lo que rompe al imprimir.
+
+       NOTA: aquí NO va \`@page\` (tamaño y márgenes del folio). Es una at-rule de DOCUMENTO y
+       dentro de un shadow root se IGNORA en silencio; la pone quien monta el documento —en el
+       Hub, \`lib/print.ts\` al escribir el iframe aislado. */
+    @media print {
+      .sheet {
+        /* En papel el ancho lo manda \`@page\`; forzar 210mm aquí provoca una segunda página
+           en blanco cuando el navegador ya ha restado los márgenes. */
+        width: auto;
+        max-width: none;
+        padding: 0;
+      }
+      /* Fondos y sombras: en pantalla ayudan a leer, en papel gastan tóner y salen sucios en
+         láser monocroma. Se sustituye el relleno del bloque de receptor por un filete. */
+      .bill-to {
+        background: transparent;
+        border: 1px solid var(--rule);
+      }
+      /* Que las cabeceras de la tabla se repitan en cada folio: una factura larga sin esto deja
+         las columnas sin rotular a partir de la página 2. */
+      table.lines thead { display: table-header-group; }
+      table.lines tbody tr { break-inside: avoid; page-break-inside: avoid; }
+      /* Los bloques que se leen como una unidad no se parten a la mitad. */
+      .summary, .foot, .legal, .bill-to { break-inside: avoid; page-break-inside: avoid; }
+      /* El total y el QR son lo que se comprueba de un vistazo: no deben quedar huérfanos. */
+      .summary { break-before: avoid; page-break-before: avoid; }
+    }
   `;
   }
   get t() {