@erplora/outfitkit 0.1.1

package/dist/ok-skeleton.js

@@ -0,0 +1,345 @@
+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 OkSkeleton extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "text";
+    this.lines = 1;
+    this.preset = "none";
+    this.rows = 5;
+    this.cols = 4;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --skel-from: var(--ok-skeleton-base, var(--ion-color-step-100, #e9edf2));
+      --skel-to: var(--ok-skeleton-highlight, var(--ion-color-step-200, #d3dae2));
+      --surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
+      --line: var(--ok-border-color, var(--ion-border-color, #e2e8f0));
+      --radius-sm: var(--ok-radius-sm, 4px);
+      --radius-md: var(--ok-radius-md, 8px);
+      --radius-lg: var(--ok-radius-lg, 12px);
+      --radius-xl: var(--ok-radius-xl, 16px);
+      --radius-pill: var(--ok-radius-pill, 999px);
+      --speed: var(--ok-skeleton-speed, 1.4s);
+    }
+
+    /* Bloque base con shimmer horizontal. */
+    .skel {
+      display: block;
+      background: linear-gradient(
+        90deg,
+        var(--skel-from) 0%,
+        var(--skel-to) 50%,
+        var(--skel-from) 100%
+      );
+      background-size: 200% 100%;
+      animation: skel-shimmer var(--speed) linear infinite;
+      border-radius: var(--radius-sm);
+    }
+
+    @keyframes skel-shimmer {
+      0% {
+        background-position: 200% 0;
+      }
+      100% {
+        background-position: -200% 0;
+      }
+    }
+
+    /* Variantes de forma. */
+    .v-text {
+      height: 12px;
+      width: 100%;
+      border-radius: 4px;
+    }
+    .v-title {
+      height: 18px;
+      width: 60%;
+      border-radius: 4px;
+    }
+    .v-circle {
+      border-radius: 50%;
+      aspect-ratio: 1;
+    }
+    .v-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+    }
+    .v-button {
+      height: 32px;
+      width: 96px;
+      border-radius: var(--radius-md);
+    }
+    .v-chip {
+      height: 22px;
+      width: 72px;
+      border-radius: var(--radius-pill);
+    }
+    .v-card {
+      height: 120px;
+      border-radius: var(--radius-lg);
+    }
+    .v-row {
+      height: 44px;
+      border-radius: var(--radius-md);
+    }
+
+    /* Stack de líneas de texto con anchos decrecientes (92/78/60%). */
+    .stack {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .stack .line:nth-child(2) {
+      width: 92%;
+    }
+    .stack .line:nth-child(3) {
+      width: 78%;
+    }
+    .stack .line:nth-child(n + 4) {
+      width: 60%;
+    }
+
+    /* Preset: card. */
+    .preset-card {
+      background: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: var(--radius-xl);
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      box-sizing: border-box;
+    }
+    .preset-card .head {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .preset-card .head .meta {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    /* Preset: table (replica la rejilla de ok-data-table). */
+    .preset-table {
+      background: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: var(--radius-xl);
+      padding: 6px 14px;
+      box-sizing: border-box;
+    }
+    .preset-table .trow {
+      display: grid;
+      gap: 16px;
+      padding: 14px 0;
+      border-bottom: 1px solid var(--line);
+      align-items: center;
+    }
+    .preset-table .trow:last-child {
+      border-bottom: none;
+    }
+    .preset-table .trow.head .skel {
+      opacity: 0.55;
+      height: 10px;
+    }
+
+    /* Preset: chart (barras con shimmer vertical). */
+    .preset-chart {
+      background: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: var(--radius-xl);
+      padding: 16px;
+      height: 180px;
+      display: flex;
+      align-items: flex-end;
+      gap: 6px;
+      box-sizing: border-box;
+    }
+    .preset-chart .bar {
+      flex: 1;
+      border-radius: var(--radius-sm);
+      background: linear-gradient(
+        180deg,
+        var(--skel-from) 0%,
+        var(--skel-to) 50%,
+        var(--skel-from) 100%
+      );
+      background-size: 100% 200%;
+      animation: skel-shimmer-v var(--speed) linear infinite;
+    }
+
+    @keyframes skel-shimmer-v {
+      0% {
+        background-position: 0 200%;
+      }
+      100% {
+        background-position: 0 -200%;
+      }
+    }
+
+    /* Accesibilidad: sin movimiento si el usuario lo pide. */
+    @media (prefers-reduced-motion: reduce) {
+      .skel,
+      .preset-chart .bar {
+        animation: none;
+      }
+    }
+  `;
+  }
+  /** Estilos inline (width/height/radius) aplicados al bloque. */
+  blockStyle() {
+    const parts = [];
+    if (this.width) parts.push(`width:${this.width}`);
+    if (this.height) parts.push(`height:${this.height}`);
+    if (this.radius) parts.push(`border-radius:${this.radius}`);
+    return parts.join(";");
+  }
+  /** Bloque base con la clase de variante. */
+  renderBlock(variant = this.variant) {
+    return html`
+      <div
+        class="skel v-${variant}"
+        style=${this.blockStyle()}
+        part="block"
+      ></div>
+    `;
+  }
+  /** Stack de líneas con anchos decrecientes (la 1ª al 100%). */
+  renderStack() {
+    const n = Math.max(1, this.lines);
+    const cls = this.variant === "title" ? "v-title" : "v-text";
+    return html`
+      <div class="stack">
+        ${Array.from(
+      { length: n },
+      () => html`<div class="skel line ${cls}" part="line"></div>`
+    )}
+      </div>
+    `;
+  }
+  /** Preset card: avatar + dos líneas de meta + bloque de cuerpo + acciones. */
+  renderPresetCard() {
+    return html`
+      <div class="preset-card" part="card">
+        <div class="head">
+          <div class="skel v-avatar"></div>
+          <div class="meta">
+            <div class="skel v-title" style="width:50%"></div>
+            <div class="skel v-text" style="width:80%"></div>
+          </div>
+        </div>
+        <div class="skel v-card" style="height:80px"></div>
+        <div class="head" style="justify-content:flex-end">
+          <div class="skel v-button"></div>
+          <div class="skel v-button" style="width:72px"></div>
+        </div>
+      </div>
+    `;
+  }
+  /** Preset table: replica la rejilla de ok-data-table (cabecera + filas). */
+  renderPresetTable() {
+    const cols = Math.max(1, this.cols);
+    const rows = Math.max(1, this.rows);
+    const template = Array.from({ length: cols }, (_, i) => {
+      if (i === 0) return "1.6fr";
+      if (i === cols - 1) return "0.6fr";
+      return "1fr";
+    }).join(" ");
+    const rowStyle = `grid-template-columns:${template}`;
+    const cell = () => html`<div class="skel v-text"></div>`;
+    return html`
+      <div class="preset-table" part="table">
+        <div class="trow head" style=${rowStyle}>
+          ${Array.from({ length: cols }, cell)}
+        </div>
+        ${Array.from(
+      { length: rows },
+      () => html`<div class="trow" style=${rowStyle}>
+            ${Array.from({ length: cols }, cell)}
+          </div>`
+    )}
+      </div>
+    `;
+  }
+  /** Preset chart: barras con alturas pseudo-variadas. */
+  renderPresetChart() {
+    const n = Math.max(1, this.cols);
+    const heights = [40, 70, 55, 90, 35, 65, 80, 50, 75, 45, 60, 85];
+    return html`
+      <div class="preset-chart" part="chart">
+        ${Array.from(
+      { length: n },
+      (_, i) => html`<div
+            class="bar"
+            style="height:${heights[i % heights.length]}%"
+          ></div>`
+    )}
+      </div>
+    `;
+  }
+  render() {
+    let content;
+    switch (this.preset) {
+      case "card":
+        content = this.renderPresetCard();
+        break;
+      case "table":
+        content = this.renderPresetTable();
+        break;
+      case "chart":
+        content = this.renderPresetChart();
+        break;
+      default:
+        content = this.lines > 1 ? this.renderStack() : this.renderBlock();
+    }
+    return html`
+      <div role="status" aria-busy="true" aria-live="polite">${content}</div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkSkeleton.prototype, "variant");
+__decorateClass([
+  property({ type: Number })
+], OkSkeleton.prototype, "lines");
+__decorateClass([
+  property()
+], OkSkeleton.prototype, "width");
+__decorateClass([
+  property()
+], OkSkeleton.prototype, "height");
+__decorateClass([
+  property()
+], OkSkeleton.prototype, "radius");
+__decorateClass([
+  property()
+], OkSkeleton.prototype, "preset");
+__decorateClass([
+  property({ type: Number })
+], OkSkeleton.prototype, "rows");
+__decorateClass([
+  property({ type: Number })
+], OkSkeleton.prototype, "cols");
+define("ok-skeleton", OkSkeleton);
+export {
+  OkSkeleton
+};

package/dist/ok-sparkline.js

@@ -0,0 +1,150 @@
+import { LitElement, css, svg, 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 OkSparkline extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.values = [];
+    this.type = "line";
+    this.color = "";
+    this.width = 120;
+    this.height = 32;
+    this.filled = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Color por defecto: cadena --ok-* → --ion-* → hex. */
+      --color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+
+      /* Sparkline = inline, fluye con el texto. */
+      display: inline-block;
+      line-height: 0;
+      vertical-align: middle;
+    }
+    svg {
+      display: block;
+      overflow: visible;
+    }
+  `;
+  }
+  // Padding interno para que el trazo no se recorte en los bordes.
+  get pad() {
+    return 2;
+  }
+  // Color efectivo: prop explícita o el token del componente (--color).
+  get stroke() {
+    return this.color || "var(--color)";
+  }
+  // Mapea cada valor a coordenadas {x, y} dentro del área útil del SVG.
+  points() {
+    const data = this.values ?? [];
+    const n = data.length;
+    if (!n) return [];
+    const pad = this.pad;
+    const w = this.width - pad * 2;
+    const h = this.height - pad * 2;
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const step = n > 1 ? w / (n - 1) : 0;
+    return data.map((value, i) => {
+      const x = n > 1 ? pad + i * step : pad + w / 2;
+      const y = pad + (1 - (value - min) / range) * h;
+      return { x, y };
+    });
+  }
+  // Render de la serie como línea (polyline) + área opcional.
+  renderLine() {
+    const pts = this.points();
+    if (pts.length < 2) {
+      return pts.length === 1 ? svg`<circle cx=${pts[0].x} cy=${pts[0].y} r="2" fill=${this.stroke} />` : svg``;
+    }
+    const line = pts.map((p) => `${p.x},${p.y}`).join(" ");
+    const baseY = this.height - this.pad;
+    const area = `${pts[0].x},${baseY} ${line} ${pts[pts.length - 1].x},${baseY}`;
+    return svg`
+      ${this.filled ? svg`<polygon points=${area} fill=${this.stroke} fill-opacity="0.15" stroke="none" />` : svg``}
+      <polyline
+        points=${line}
+        fill="none"
+        stroke=${this.stroke}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    `;
+  }
+  // Render de la serie como barras escaladas a min/max.
+  renderBars() {
+    const data = this.values ?? [];
+    const n = data.length;
+    if (!n) return svg``;
+    const pad = this.pad;
+    const w = this.width - pad * 2;
+    const h = this.height - pad * 2;
+    const min = Math.min(...data, 0);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const slot = w / n;
+    const gap = slot * 0.25;
+    const barW = Math.max(slot - gap, 1);
+    const baseY = this.height - pad;
+    return data.map((value, i) => {
+      const barH = (value - min) / range * h;
+      const x = pad + i * slot + gap / 2;
+      const y = baseY - barH;
+      return svg`<rect
+        x=${x}
+        y=${y}
+        width=${barW}
+        height=${Math.max(barH, 0.5)}
+        rx="1"
+        fill=${this.stroke}
+      />`;
+    });
+  }
+  render() {
+    return html`<svg
+      width=${this.width}
+      height=${this.height}
+      viewBox=${`0 0 ${this.width} ${this.height}`}
+      preserveAspectRatio="none"
+      role="img"
+      aria-hidden="true"
+    >
+      ${this.type === "bar" ? this.renderBars() : this.renderLine()}
+    </svg>`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkSparkline.prototype, "values");
+__decorateClass([
+  property()
+], OkSparkline.prototype, "type");
+__decorateClass([
+  property()
+], OkSparkline.prototype, "color");
+__decorateClass([
+  property({ type: Number })
+], OkSparkline.prototype, "width");
+__decorateClass([
+  property({ type: Number })
+], OkSparkline.prototype, "height");
+__decorateClass([
+  property({ type: Boolean })
+], OkSparkline.prototype, "filled");
+define("ok-sparkline", OkSparkline);
+export {
+  OkSparkline
+};