@erplora/outfitkit 0.1.1

package/dist/ok-dropzone.js

@@ -0,0 +1,376 @@
+import { LitElement, css, html } from "lit";
+import { property, state, query } 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;
+};
+const DEFAULT_LABELS = {
+  title: "Drag & drop files here or {browse}",
+  browse: "browse",
+  errorType: "“{name}” is not an accepted file type.",
+  errorSize: "“{name}” exceeds the maximum size ({size}).",
+  removeLabel: "Remove {name}"
+};
+class OkDropzone extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.accept = "";
+    this.multiple = false;
+    this.labels = {};
+    this.files = [];
+    this.dragging = false;
+    this.error = "";
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.55));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --primary-tint: var(--ok-primary-tint, var(--ion-color-primary-tint, #4c8dff));
+      --danger-color: var(--ok-danger, var(--ion-color-danger, #c5000f));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.22));
+      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.04));
+      --primary-bg: var(--ok-primary-soft, rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08));
+      --surface: var(--ok-surface, var(--ion-card-background, #ffffff));
+      --border-radius: var(--ok-radius, 10px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Responsive: ocupa el ancho del contenedor con un tope legible. */
+      display: block;
+      width: 100%;
+      max-width: var(--ok-dropzone-max-width, 480px);
+      color: var(--color);
+      font-family: var(--font);
+      font-size: 0.95rem;
+    }
+    .zone {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0.4rem;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 1.5rem 1rem;
+      text-align: center;
+      border: 2px dashed var(--border-color);
+      border-radius: var(--border-radius);
+      background: var(--surface);
+      cursor: pointer;
+      transition: background-color var(--ok-transition, 150ms ease),
+        color var(--ok-transition, 150ms ease),
+        border-color var(--ok-transition, 150ms ease),
+        box-shadow var(--ok-transition, 150ms ease), transform 120ms ease;
+    }
+    @media (hover: hover) {
+      .zone:hover {
+        background: var(--hover-bg);
+      }
+    }
+    .zone:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    /* Estado mientras se arrastra un fichero por encima. */
+    .zone.dragging {
+      border-color: var(--primary-color);
+      background: var(--primary-bg);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .zone:active,
+      .file .remove:active {
+        transform: none;
+      }
+    }
+    .zone .big-icon {
+      font-size: 2rem;
+      color: var(--primary-color);
+    }
+    .zone .title {
+      font-weight: 600;
+    }
+    .zone .title .link {
+      color: var(--primary-color);
+      text-decoration: underline;
+    }
+    .zone .hint {
+      font-size: 0.82rem;
+      color: var(--color-muted);
+    }
+    /* Lista de archivos elegidos. */
+    .files {
+      list-style: none;
+      margin: 0.7rem 0 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+    }
+    .file {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      box-sizing: border-box;
+      padding: 0.4rem 0.6rem;
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      background: var(--surface);
+    }
+    .file .file-icon {
+      flex: 0 0 auto;
+      font-size: 1.15rem;
+      color: var(--color-muted);
+    }
+    .file .meta {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    .file .name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .file .size {
+      font-size: 0.78rem;
+      color: var(--color-muted);
+    }
+    .file .remove {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: var(--color-muted);
+      cursor: pointer;
+      border-radius: 50%;
+      transition: background-color var(--ok-transition, 150ms ease),
+        color var(--ok-transition, 150ms ease),
+        border-color var(--ok-transition, 150ms ease),
+        box-shadow var(--ok-transition, 150ms ease), transform 120ms ease;
+    }
+    @media (hover: hover) {
+      .file .remove:hover {
+        background: var(--hover-bg);
+        color: var(--danger-color);
+      }
+    }
+    .file .remove:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    /* Error inline (tipo/tamaño no admitido). */
+    .error {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      margin-top: 0.5rem;
+      color: var(--danger-color);
+      font-size: 0.82rem;
+    }
+    input[type='file'] {
+      display: none;
+    }
+  `;
+  }
+  // Textos efectivos: defaults inglés sobreescritos por los pasados desde fuera.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Formatea bytes a una etiqueta legible (B, KB, MB…).
+  formatSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    const units = ["KB", "MB", "GB", "TB"];
+    let value = bytes / 1024;
+    let i = 0;
+    while (value >= 1024 && i < units.length - 1) {
+      value /= 1024;
+      i += 1;
+    }
+    return `${value.toFixed(value >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
+  }
+  // Comprueba si un archivo casa con `accept` (extensiones, mime exacto o `tipo/*`).
+  matchesAccept(file) {
+    if (!this.accept.trim()) return true;
+    const tokens = this.accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+    const name = file.name.toLowerCase();
+    const mime = file.type.toLowerCase();
+    return tokens.some((token) => {
+      if (token.startsWith(".")) return name.endsWith(token);
+      if (token.endsWith("/*")) return mime.startsWith(token.slice(0, -1));
+      return mime === token;
+    });
+  }
+  // Emite `ok-error` con el mensaje dado y lo guarda para mostrarlo inline.
+  reportError(message) {
+    this.error = message;
+    this.dispatchEvent(
+      new CustomEvent("ok-error", {
+        detail: { message },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Emite `ok-change` con la lista actual de archivos válidos.
+  emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { files: this.files },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Procesa un FileList (de input o de drop), valida y añade los aceptados.
+  ingest(list) {
+    if (!list || !list.length) return;
+    this.error = "";
+    const incoming = Array.from(list);
+    const next = this.multiple ? [...this.files] : [];
+    for (const file of incoming) {
+      if (!this.matchesAccept(file)) {
+        this.reportError(this.t.errorType.replace("{name}", file.name));
+        continue;
+      }
+      if (this.maxSize != null && file.size > this.maxSize) {
+        this.reportError(
+          this.t.errorSize.replace("{name}", file.name).replace("{size}", this.formatSize(this.maxSize))
+        );
+        continue;
+      }
+      const dup = next.some((f) => f.name === file.name && f.size === file.size);
+      if (!dup) next.push(file);
+      if (!this.multiple) break;
+    }
+    this.files = next;
+    this.emitChange();
+  }
+  // Quita un archivo de la lista por índice y re-emite el cambio.
+  removeAt(index) {
+    this.files = this.files.filter((_, i) => i !== index);
+    this.error = "";
+    this.emitChange();
+  }
+  openPicker() {
+    this.input?.click();
+  }
+  onInputChange(e) {
+    const target = e.target;
+    this.ingest(target.files);
+    target.value = "";
+  }
+  onDragOver(e) {
+    e.preventDefault();
+    this.dragging = true;
+  }
+  onDragLeave(e) {
+    e.preventDefault();
+    this.dragging = false;
+  }
+  onDrop(e) {
+    e.preventDefault();
+    this.dragging = false;
+    this.ingest(e.dataTransfer?.files ?? null);
+  }
+  render() {
+    const [titleBefore, titleAfter = ""] = this.t.title.split("{browse}");
+    return html`
+      <div
+        class=${`zone ${this.dragging ? "dragging" : ""}`.trim()}
+        role="button"
+        tabindex="0"
+        @click=${this.openPicker}
+        @keydown=${(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.openPicker();
+      }
+    }}
+        @dragover=${this.onDragOver}
+        @dragleave=${this.onDragLeave}
+        @drop=${this.onDrop}
+      >
+        <ion-icon class="big-icon" name="cloud-upload-outline"></ion-icon>
+        <span class="title">
+          ${titleBefore}<span class="link">${this.t.browse}</span>${titleAfter}
+        </span>
+        ${this.hint ? html`<span class="hint">${this.hint}</span>` : ""}
+      </div>
+
+      <input
+        type="file"
+        ?multiple=${this.multiple}
+        accept=${this.accept || ""}
+        @change=${this.onInputChange}
+      />
+
+      ${this.error ? html`<div class="error"><ion-icon name="alert-circle-outline"></ion-icon>${this.error}</div>` : ""}
+
+      ${this.files.length ? html`<ul class="files">
+            ${this.files.map(
+      (file, i) => html`<li class="file">
+                <ion-icon class="file-icon" name="document-outline"></ion-icon>
+                <span class="meta">
+                  <span class="name">${file.name}</span>
+                  <span class="size">${this.formatSize(file.size)}</span>
+                </span>
+                <button
+                  type="button"
+                  class="remove"
+                  aria-label=${this.t.removeLabel.replace("{name}", file.name)}
+                  @click=${(e) => {
+        e.stopPropagation();
+        this.removeAt(i);
+      }}
+                >
+                  <ion-icon name="close-outline"></ion-icon>
+                </button>
+              </li>`
+    )}
+          </ul>` : ""}
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkDropzone.prototype, "accept");
+__decorateClass([
+  property({ type: Boolean })
+], OkDropzone.prototype, "multiple");
+__decorateClass([
+  property({ type: Number, attribute: "max-size" })
+], OkDropzone.prototype, "maxSize");
+__decorateClass([
+  property()
+], OkDropzone.prototype, "hint");
+__decorateClass([
+  property({ attribute: false })
+], OkDropzone.prototype, "labels");
+__decorateClass([
+  state()
+], OkDropzone.prototype, "files");
+__decorateClass([
+  state()
+], OkDropzone.prototype, "dragging");
+__decorateClass([
+  state()
+], OkDropzone.prototype, "error");
+__decorateClass([
+  query('input[type="file"]')
+], OkDropzone.prototype, "input");
+define("ok-dropzone", OkDropzone);
+export {
+  OkDropzone
+};

package/dist/ok-empty-state.js

@@ -0,0 +1,104 @@
+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 OkEmptyState extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "file-tray-outline";
+  }
+  static {
+    this.styles = css`
+    /* Ancho máximo del contenedor; bloque a 100%. */
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --icon-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --heading-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --message-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --icon-size: 64px;
+      --padding: 2.5rem 1.25rem;
+    }
+
+    /* Centrado vertical y horizontal del contenido. */
+    .wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: 0.5rem;
+      padding: var(--padding);
+      box-sizing: border-box;
+      width: 100%;
+    }
+
+    ion-icon {
+      font-size: var(--icon-size);
+      color: var(--icon-color);
+      opacity: 0.5; /* atenuado */
+      margin-bottom: 0.25rem;
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: var(--heading-color);
+    }
+
+    .message {
+      margin: 0;
+      font-size: 0.9375rem;
+      color: var(--message-color);
+      max-width: 38ch;
+    }
+
+    /* Acción debajo del texto. */
+    .action {
+      margin-top: 1rem;
+    }
+
+    /* Oculta los wrappers si no hay contenido. */
+    .heading:empty,
+    .message:empty {
+      display: none;
+    }
+  `;
+  }
+  render() {
+    return html`
+      <div class="wrap">
+        <ion-icon name=${this.icon} aria-hidden="true"></ion-icon>
+        ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : null}
+        ${this.message ? html`<p class="message">${this.message}</p>` : null}
+        <slot></slot>
+        <div class="action">
+          <slot name="action"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkEmptyState.prototype, "icon");
+__decorateClass([
+  property()
+], OkEmptyState.prototype, "heading");
+__decorateClass([
+  property()
+], OkEmptyState.prototype, "message");
+define("ok-empty-state", OkEmptyState);
+export {
+  OkEmptyState
+};