@erplora/outfitkit 0.1.1

package/dist/ok-timeline.js

@@ -0,0 +1,251 @@
+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 OkTimeline extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.align = "left";
+  }
+  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-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --done-color: var(--ok-success, var(--ion-color-success, #2dd36f));
+      --pending-color: var(--ok-medium, var(--ion-color-medium, #92949c));
+      --line-color: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.14));
+      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
+      --current-bg: var(
+        --ok-current-bg,
+        rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.1)
+      );
+      --border-radius: var(--ok-radius, 8px);
+      --dot-size: var(--ok-timeline-dot, 28px);
+      --gutter: var(--ok-timeline-gutter, 14px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Por defecto ocupa el ancho del contenedor y es responsive. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      font-family: var(--font);
+      font-size: 0.95rem;
+    }
+
+    .timeline {
+      position: relative;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    /* Item: rejilla [punto | contenido]. La línea vertical se dibuja en la columna del punto. */
+    .item {
+      position: relative;
+      display: grid;
+      grid-template-columns: var(--dot-size) 1fr;
+      column-gap: var(--gutter);
+      padding: 0.15rem 0 0.9rem;
+    }
+    .item:last-child {
+      padding-bottom: 0;
+    }
+
+    /* Columna del punto: contiene el dot y el segmento de línea que baja al siguiente. */
+    .marker {
+      position: relative;
+      display: flex;
+      justify-content: center;
+    }
+    /* Segmento de línea: arranca bajo el dot y llega al final del item. */
+    .marker::before {
+      content: '';
+      position: absolute;
+      top: var(--dot-size);
+      bottom: calc(-0.9rem);
+      left: 50%;
+      width: 2px;
+      transform: translateX(-50%);
+      background: var(--line-color);
+    }
+    .item:last-child .marker::before {
+      display: none;
+    }
+
+    .dot {
+      position: relative;
+      z-index: 1;
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--dot-size);
+      height: var(--dot-size);
+      border-radius: 50%;
+      background: var(--dot-color, var(--pending-color));
+      color: var(--dot-contrast, #ffffff);
+      box-shadow: 0 0 0 3px var(--ok-surface, var(--ion-background-color, #ffffff));
+    }
+    .dot ion-icon {
+      font-size: calc(var(--dot-size) * 0.5);
+    }
+
+    /* Contenido del hito; es un botón accesible para emitir el click. */
+    .content {
+      min-width: 0;
+      text-align: left;
+      width: 100%;
+      margin: 0;
+      padding: 0.35rem 0.55rem;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+      border-radius: var(--border-radius);
+      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) {
+      .content:hover {
+        background: var(--hover-bg);
+      }
+    }
+    .content:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .content:active {
+        transform: none;
+      }
+    }
+    .item.current .content {
+      background: var(--current-bg);
+    }
+
+    .head {
+      display: flex;
+      align-items: baseline;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+    .title {
+      font-weight: 600;
+      min-width: 0;
+    }
+    .item.current .title {
+      color: var(--primary-color);
+    }
+    .time {
+      font-size: 0.8rem;
+      color: var(--color-muted);
+      white-space: nowrap;
+    }
+    .desc {
+      margin-top: 0.2rem;
+      color: var(--color-muted);
+      font-size: 0.88rem;
+      line-height: 1.35;
+    }
+
+    /* Modo alternado (solo en pantallas anchas): los items pares van a la derecha. */
+    @media (min-width: 640px) {
+      .timeline.alternate .item {
+        grid-template-columns: 1fr var(--dot-size) 1fr;
+      }
+      .timeline.alternate .marker {
+        grid-column: 2;
+        order: 0;
+      }
+      .timeline.alternate .item .content {
+        grid-column: 3;
+      }
+      .timeline.alternate .item.alt .content {
+        grid-column: 1;
+        text-align: right;
+      }
+      .timeline.alternate .item.alt .head {
+        justify-content: flex-end;
+      }
+    }
+  `;
+  }
+  // Resuelve el color del punto: explícito en el item, o derivado del status.
+  dotColor(item) {
+    if (item.color) {
+      return /^[a-z-]+$/.test(item.color) ? `var(--ion-color-${item.color}, ${item.color})` : item.color;
+    }
+    switch (item.status) {
+      case "done":
+        return "var(--done-color)";
+      case "current":
+        return "var(--primary-color)";
+      default:
+        return "var(--pending-color)";
+    }
+  }
+  // Emite `ok-item-click` con el item pulsado.
+  emitClick(item) {
+    this.dispatchEvent(
+      new CustomEvent("ok-item-click", {
+        detail: { id: item.id, item },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  renderItem(item, index) {
+    const isCurrent = item.status === "current";
+    const isAlt = this.align === "alternate" && index % 2 === 1;
+    const classes = ["item", isCurrent ? "current" : "", isAlt ? "alt" : ""].filter(Boolean).join(" ");
+    const dotStyle = `--dot-color: ${this.dotColor(item)}`;
+    return html`<li class=${classes}>
+      <span class="marker">
+        <span class="dot" style=${dotStyle}>
+          ${item.icon ? html`<ion-icon .name=${item.icon}></ion-icon>` : ""}
+        </span>
+      </span>
+      <button
+        type="button"
+        class="content"
+        @click=${() => this.emitClick(item)}
+      >
+        <span class="head">
+          <span class="title">${item.title}</span>
+          ${item.time ? html`<span class="time">${item.time}</span>` : ""}
+        </span>
+        ${item.description ? html`<div class="desc">${item.description}</div>` : ""}
+      </button>
+    </li>`;
+  }
+  render() {
+    const listClass = `timeline ${this.align === "alternate" ? "alternate" : ""}`.trim();
+    return html`<ul class=${listClass}>
+      ${this.items.map((item, i) => this.renderItem(item, i))}
+    </ul>`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkTimeline.prototype, "items");
+__decorateClass([
+  property()
+], OkTimeline.prototype, "align");
+define("ok-timeline", OkTimeline);
+export {
+  OkTimeline
+};

package/dist/ok-tree.js

@@ -0,0 +1,266 @@
+import { LitElement, css, html } from "lit";
+import { property, state } 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 = {
+  expand: "Expand",
+  collapse: "Collapse"
+};
+class OkTree extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.nodes = [];
+    this.selectable = false;
+    this.activeId = "";
+    this.labels = {};
+    this.expandedIds = /* @__PURE__ */ new Set();
+    this.seeded = false;
+  }
+  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-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
+      --guide-color: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.12));
+      --border-radius: var(--ok-radius, 8px);
+      --indent: var(--ok-tree-indent, 18px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Por defecto ocupa el ancho del contenedor y es responsive. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      font-family: var(--font);
+      font-size: 0.95rem;
+    }
+    [role='tree'],
+    [role='group'] {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    /* Cada subnivel se indenta y dibuja una línea guía sutil a la izquierda. */
+    [role='group'] {
+      margin-left: calc(var(--indent) / 2 + 8px);
+      padding-left: calc(var(--indent) / 2);
+      border-left: 1px solid var(--guide-color);
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0.38rem 0.5rem;
+      border-radius: var(--border-radius);
+      cursor: default;
+      user-select: none;
+      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;
+    }
+    .row.selectable {
+      cursor: pointer;
+    }
+    @media (hover: hover) {
+      .row.selectable:hover {
+        background: var(--hover-bg);
+      }
+    }
+    .row.selectable:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    .row.active {
+      background: var(--primary-color);
+      color: var(--primary-contrast);
+    }
+    .row.disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    /* Botón del chevron: expande/colapsa. Reserva hueco aunque el nodo sea hoja. */
+    .chevron {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      margin: 0;
+      border: 0;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      border-radius: 4px;
+      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) {
+      .chevron:not(.leaf):hover {
+        background: var(--hover-bg);
+      }
+    }
+    .chevron:not(.leaf):active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    .chevron.leaf {
+      visibility: hidden;
+      cursor: default;
+    }
+    .chevron ion-icon {
+      font-size: 1rem;
+      transition: transform 0.18s ease;
+    }
+    .chevron.open ion-icon {
+      transform: rotate(90deg);
+    }
+    .icon {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      font-size: 1.05rem;
+      color: var(--color-muted);
+    }
+    .row.active .icon {
+      color: inherit;
+    }
+    .label {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .row.selectable:hover,
+      .row.selectable:active,
+      .chevron:not(.leaf):hover,
+      .chevron:not(.leaf):active {
+        transform: none;
+      }
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Siembra el estado de expansión a partir del campo `expanded` de cada nodo (una sola vez).
+  seedExpanded(nodes) {
+    for (const n of nodes) {
+      if (n.expanded) this.expandedIds.add(n.id);
+      if (n.children?.length) this.seedExpanded(n.children);
+    }
+  }
+  isExpanded(node) {
+    return this.expandedIds.has(node.id);
+  }
+  // Expande/colapsa un nodo y emite `ok-toggle`.
+  toggle(node) {
+    if (node.disabled) return;
+    const next = new Set(this.expandedIds);
+    const open = !next.has(node.id);
+    if (open) next.add(node.id);
+    else next.delete(node.id);
+    this.expandedIds = next;
+    this.dispatchEvent(
+      new CustomEvent("ok-toggle", {
+        detail: { id: node.id, expanded: open },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Selecciona un nodo (si `selectable`) y emite `ok-select`.
+  select(node) {
+    if (node.disabled || !this.selectable) return;
+    this.dispatchEvent(
+      new CustomEvent("ok-select", {
+        detail: { id: node.id, node },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Render recursivo de un nodo (li[treeitem] + grupo de hijos si está expandido).
+  renderNode(node) {
+    const hasChildren = !!node.children?.length;
+    const expanded = hasChildren && this.isExpanded(node);
+    const active = this.selectable && node.id === this.activeId;
+    const rowClasses = [
+      "row",
+      this.selectable ? "selectable" : "",
+      active ? "active" : "",
+      node.disabled ? "disabled" : ""
+    ].filter(Boolean).join(" ");
+    return html`<li
+      role="treeitem"
+      aria-expanded=${hasChildren ? String(expanded) : ""}
+      aria-disabled=${node.disabled ? "true" : "false"}
+    >
+      <div class=${rowClasses}>
+        <button
+          type="button"
+          class=${`chevron ${hasChildren ? "" : "leaf"} ${expanded ? "open" : ""}`.trim()}
+          aria-hidden=${hasChildren ? "false" : "true"}
+          tabindex=${hasChildren ? "0" : "-1"}
+          aria-label=${expanded ? this.t.collapse : this.t.expand}
+          @click=${(e) => {
+      e.stopPropagation();
+      this.toggle(node);
+    }}
+        >
+          <ion-icon name="chevron-forward-outline"></ion-icon>
+        </button>
+        ${node.icon ? html`<span class="icon"><ion-icon .name=${node.icon}></ion-icon></span>` : ""}
+        <span class="label" @click=${() => this.select(node)}>${node.label}</span>
+      </div>
+      ${expanded ? html`<ul role="group">
+            ${node.children.map((child) => this.renderNode(child))}
+          </ul>` : ""}
+    </li>`;
+  }
+  render() {
+    if (!this.seeded && this.nodes.length) {
+      this.seedExpanded(this.nodes);
+      this.seeded = true;
+    }
+    return html`<ul role="tree">
+      ${this.nodes.map((node) => this.renderNode(node))}
+    </ul>`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkTree.prototype, "nodes");
+__decorateClass([
+  property({ type: Boolean })
+], OkTree.prototype, "selectable");
+__decorateClass([
+  property({ attribute: "active-id" })
+], OkTree.prototype, "activeId");
+__decorateClass([
+  property({ attribute: false })
+], OkTree.prototype, "labels");
+__decorateClass([
+  state()
+], OkTree.prototype, "expandedIds");
+define("ok-tree", OkTree);
+export {
+  OkTree
+};