@erplora/outfitkit 0.1.28 → 0.1.30

package/README.md

@@ -439,7 +439,7 @@ npm run build        # vite (dist/*.js, outfitkit.js, theme.example.css) + tsc (
 npm run typecheck    # comprobación de tipos sin emitir
 npm run verify:csp   # rechaza eval / new Function en dist (CSP estricta)
 npm run dev          # vite build --watch (showcase en local)
-npm run release      # release-it: corta una versión (ver docs/RELEASING.md)
+npm run release      # release-it a mano (NO hace falta: la CI publica al mergear, ver docs/RELEASING.md)
 ```
 
 Publicación a npm: [`docs/RELEASING.md`](docs/RELEASING.md) (Trusted Publishing / OIDC).

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-file-manager/ok-file-manager.d.ts

@@ -52,6 +52,22 @@ export interface OkFmQuota {
 /** Modo de visualización del área de archivos. */
 export type OkFmView = 'grid' | 'list';
 /** Textos i18n del componente (defaults en español). */
+/**
+ * Qué se puede hacer en la carpeta actual. La decide el HOST (en ERPlora, el módulo dueño de la
+ * carpeta — ADR-0172) y el componente solo la obedece al pintar: **no es una barrera de
+ * seguridad**, el servidor revalida siempre. Ver y descargar no están aquí porque son siempre
+ * posibles: "solo lectura" no significa "no puedes mirar".
+ *
+ * Ausente ⇒ todo disponible (los consumidores que no la pasan no cambian de comportamiento).
+ */
+export interface OkFmPolicy {
+    /** Subir ficheros y crear subcarpetas. */
+    upload: boolean;
+    /** Renombrar ficheros y la propia carpeta. */
+    rename: boolean;
+    /** Borrar ficheros y la propia carpeta. */
+    delete: boolean;
+}
 export interface OkFmLabels {
     /** Botón primario de subida. */
     upload: string;
@@ -73,6 +89,12 @@ export interface OkFmLabels {
     open: string;
     /** Botón de nueva carpeta. */
     newFolder: string;
+    /** Acción de renombrar (ficheros y carpetas). */
+    rename: string;
+    /** Renombrar la carpeta en la que se está. */
+    renameFolder: string;
+    /** Borrar la carpeta en la que se está (con su contenido). */
+    deleteFolder: string;
     /** Caption del medidor cuando no hay cuota dura. */
     noLimit: string;
 }
@@ -96,6 +118,9 @@ export declare class OkFileManager extends LitElement {
     searchable: boolean;
     /** Muestra el botón primario de subida y habilita drag&drop. */
     uploadable: boolean;
+    /** Acciones permitidas en la carpeta actual (ver `OkFmPolicy`). Ausente ⇒ todo permitido. */
+    policy?: OkFmPolicy;
+    private can;
     /** Muestra esqueletos de carga en lugar del contenido. */
     loading: boolean;
     /** Textos i18n (merge sobre los defaults en español). */
@@ -112,6 +137,12 @@ export declare class OkFileManager extends LitElement {
     private open;
     private download;
     private deleteFile;
+    /** Renombrar un fichero. Se manda el nombre actual para que el host lo proponga en su diálogo. */
+    private renameFile;
+    /** Etiqueta de la carpeta actual (para proponerla como nombre al renombrar). */
+    private get currentFolderLabel();
+    private renameCurrentFolder;
+    private deleteCurrentFolder;
     private createFolder;
     private changeView;
     private onSearch;
@@ -131,6 +162,7 @@ export declare class OkFileManager extends LitElement {
     private renderToolbar;
     private get iconOpen();
     private get iconDownload();
+    private get iconRename();
     private get iconDelete();
     private fileActions;
     private renderContent;

package/dist/components/ok-file-manager/ok-file-manager.test.d.ts

@@ -0,0 +1 @@
+import './ok-file-manager';

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-file-manager.js

@@ -22,6 +22,9 @@ const DEFAULT_LABELS = {
   delete: "Eliminar",
   open: "Abrir",
   newFolder: "Nueva carpeta",
+  rename: "Renombrar",
+  renameFolder: "Renombrar carpeta",
+  deleteFolder: "Eliminar carpeta",
   noLimit: "Sin límite"
 };
 class OkFileManager extends LitElement {
@@ -545,6 +548,11 @@ class OkFileManager extends LitElement {
     .action.danger:hover {
       color: var(--danger);
     }
+    /* Borrar la carpeta actual: se tiñe al pasar por encima, igual que el borrado de un fichero. */
+    .tbtn.danger:hover {
+      color: var(--danger);
+      border-color: var(--danger);
+    }
     .action svg {
       width: 15px;
       height: 15px;
@@ -644,6 +652,9 @@ class OkFileManager extends LitElement {
     }
   `;
   }
+  can(action) {
+    return this.policy ? this.policy[action] : true;
+  }
   // Textos efectivos.
   get t() {
     return { ...DEFAULT_LABELS, ...this.labels };
@@ -671,7 +682,21 @@ class OkFileManager extends LitElement {
     this.emit("ok-download", { id: file.id, url: file.url });
   }
   deleteFile(id) {
-    this.emit("ok-delete", { id });
+    this.emit("ok-delete", { id, kind: "file" });
+  }
+  /** Renombrar un fichero. Se manda el nombre actual para que el host lo proponga en su diálogo. */
+  renameFile(file) {
+    this.emit("ok-rename", { id: file.id, name: file.name, kind: "file" });
+  }
+  /** Etiqueta de la carpeta actual (para proponerla como nombre al renombrar). */
+  get currentFolderLabel() {
+    return this.path[this.path.length - 1]?.label ?? this.selected.split("/").pop() ?? "";
+  }
+  renameCurrentFolder() {
+    this.emit("ok-rename", { id: this.selected, name: this.currentFolderLabel, kind: "folder" });
+  }
+  deleteCurrentFolder() {
+    this.emit("ok-delete", { id: this.selected, kind: "folder" });
   }
   createFolder() {
     this.emit("ok-create-folder", { parent: this.selected });
@@ -877,23 +902,47 @@ class OkFileManager extends LitElement {
         </button>
       </div>
 
-      <button
-        type="button"
-        class="tbtn icon"
-        aria-label=${this.t.newFolder}
-        title=${this.t.newFolder}
-        @click=${() => this.createFolder()}
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-          stroke-linecap="round" stroke-linejoin="round">
-          <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-          <path d="M12 11v6M9 14h6" />
-        </svg>
-      </button>
+      ${this.selected && this.can("rename") ? html`<button
+            type="button"
+            class="tbtn icon"
+            data-act="rename-folder"
+            aria-label=${this.t.renameFolder}
+            title=${this.t.renameFolder}
+            @click=${() => this.renameCurrentFolder()}
+          >
+            ${this.iconRename}
+          </button>` : ""}
+
+      ${this.selected && this.can("delete") ? html`<button
+            type="button"
+            class="tbtn icon danger"
+            data-act="delete-folder"
+            aria-label=${this.t.deleteFolder}
+            title=${this.t.deleteFolder}
+            @click=${() => this.deleteCurrentFolder()}
+          >
+            ${this.iconDelete}
+          </button>` : ""}
+
+      ${this.can("upload") ? html`<button
+            type="button"
+            class="tbtn icon"
+            data-act="new-folder"
+            aria-label=${this.t.newFolder}
+            title=${this.t.newFolder}
+            @click=${() => this.createFolder()}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <path d="M12 11v6M9 14h6" />
+            </svg>
+          </button>` : ""}
 
-      ${this.uploadable ? html`<button
+      ${this.uploadable && this.can("upload") ? html`<button
             type="button"
             class="tbtn primary icon"
+            data-act="upload"
             aria-label=${this.t.upload}
             title=${this.t.upload}
             @click=${() => this.openPicker()}
@@ -920,17 +969,25 @@ class OkFileManager extends LitElement {
       <polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
     </svg>`;
   }
+  get iconRename() {
+    return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+      stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
+    </svg>`;
+  }
   get iconDelete() {
     return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
       <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
     </svg>`;
   }
-  // Acciones de un archivo (abrir/descargar/eliminar), reutilizadas en grid y lista.
+  // Acciones de un archivo, reutilizadas en grid y lista. Abrir y descargar SIEMPRE se ofrecen;
+  // renombrar y borrar solo si la política de la carpeta los concede.
   fileActions(file) {
     return html`<button
         type="button"
         class="action"
+        data-act="open"
         aria-label=${this.t.open}
         title=${this.t.open}
         @click=${(e) => {
@@ -943,6 +1000,7 @@ class OkFileManager extends LitElement {
       <button
         type="button"
         class="action"
+        data-act="download"
         aria-label=${this.t.download}
         title=${this.t.download}
         @click=${(e) => {
@@ -952,18 +1010,32 @@ class OkFileManager extends LitElement {
       >
         ${this.iconDownload}
       </button>
-      <button
-        type="button"
-        class="action danger"
-        aria-label=${this.t.delete}
-        title=${this.t.delete}
-        @click=${(e) => {
+      ${this.can("rename") ? html`<button
+            type="button"
+            class="action"
+            data-act="rename-file"
+            aria-label=${this.t.rename}
+            title=${this.t.rename}
+            @click=${(e) => {
+      e.stopPropagation();
+      this.renameFile(file);
+    }}
+          >
+            ${this.iconRename}
+          </button>` : ""}
+      ${this.can("delete") ? html`<button
+            type="button"
+            class="action danger"
+            data-act="delete-file"
+            aria-label=${this.t.delete}
+            title=${this.t.delete}
+            @click=${(e) => {
       e.stopPropagation();
       this.deleteFile(file.id);
     }}
-      >
-        ${this.iconDelete}
-      </button>`;
+          >
+            ${this.iconDelete}
+          </button>` : ""}`;
   }
   // ---- Render del contenido (grid/lista/vacío/loading) ----
   renderContent() {
@@ -1096,6 +1168,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], OkFileManager.prototype, "uploadable");
+__decorateClass([
+  property({ attribute: false })
+], OkFileManager.prototype, "policy");
 __decorateClass([
   property({ type: Boolean })
 ], OkFileManager.prototype, "loading");