@vmz/ui 0.0.3 → 0.1.0

package/src/components/Table.vmz

@@ -0,0 +1,134 @@
+<template>
+  <div class="vmz-ui-table-wrap" data-vmz-ui="table" data-sort-key={sortKey} data-sort-dir={sortDir}>
+    <table class="vmz-ui-table">
+      <thead onClick={onHeadClick}>
+        <tr>
+          <th each={columns} as="col" key={col.id} scope="col" data-vmz-col={col.id}>
+            <button type="button" class="vmz-ui-table__sort" data-vmz-sort={col.id}>
+              {col.title}
+            </button>
+          </th>
+          <th if={hasRowAction} scope="col">{actionTitle}</th>
+        </tr>
+      </thead>
+      <tbody onClick={onBodyClick}>
+        <tr each={rows} as="row" key={row.id} data-vmz-row={row.id}>
+          <td each={row.cells} as="cell">{cell}</td>
+          <td if={hasRowAction}>
+            <button
+              type="button"
+              class="vmz-ui-table__row-action"
+              data-vmz-row-action={row.id}
+              disabled={rowActionDisabled}
+            >
+              {actionLabel}
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style>
+.vmz-ui-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+}
+
+.vmz-ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font: inherit;
+}
+
+.vmz-ui-table th,
+.vmz-ui-table td {
+  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+  text-align: left;
+  border-bottom: 1px solid var(--vmz-action-primary-background);
+  vertical-align: middle;
+}
+
+.vmz-ui-table th {
+  font-weight: 700;
+  color: var(--vmz-action-primary-active);
+  background: transparent;
+}
+
+.vmz-ui-table__sort {
+  font: inherit;
+  font-weight: 700;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.vmz-ui-table__sort:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-table__row-action {
+  font: inherit;
+  font-weight: 600;
+  padding: 0.3rem 0.55rem;
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+  background: transparent;
+  color: var(--vmz-action-primary-active);
+  cursor: pointer;
+  outline: none;
+}
+
+.vmz-ui-table__row-action:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-table__row-action:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Table (UI5 Console Surface).
+ * Column header click → onSort; row action → onRowAction; permission via rowActionDisabled.
+ */
+export default class Table {
+  /** @type {{ id: string, title: string }[]} */
+  public columns: { id: string; title: string }[] = [];
+  /** @type {{ id: string, cells: string[] }[]} */
+  public rows: { id: string; cells: string[] }[] = [];
+  public hasRowAction: boolean = false;
+  public rowActionDisabled: boolean = false;
+  public actionTitle: string = 'Action';
+  public actionLabel: string = 'Open';
+  public sortKey: string = '';
+  public sortDir: string = 'asc';
+  public onRowAction: ((rowId: string) => void) | null = null;
+  public onSort: ((columnId: string) => void) | null = null;
+
+  onBodyClick(ev) {
+    const t = ev && ev.target;
+    const el =
+      t && typeof t.closest === 'function' ? t.closest('[data-vmz-row-action]') : null;
+    if (!el || el.disabled) return;
+    const id = el.getAttribute('data-vmz-row-action');
+    if (id && typeof this.onRowAction === 'function') this.onRowAction(id);
+  }
+
+  onHeadClick(ev) {
+    const t = ev && ev.target;
+    const el =
+      t && typeof t.closest === 'function' ? t.closest('[data-vmz-sort]') : null;
+    if (!el) return;
+    const id = el.getAttribute('data-vmz-sort');
+    if (id && typeof this.onSort === 'function') this.onSort(id);
+  }
+}
+</script>

package/src/components/Tabs.vmz

@@ -0,0 +1,132 @@
+<template>
+  <div class="vmz-ui-tabs" data-vmz-ui="tabs">
+    <div
+      class="vmz-ui-tabs__list"
+      role="tablist"
+      aria-label={label}
+      onKeyDown={onListKeyDown}
+      onClick={onListClick}
+    >
+      <button
+        each={items}
+        as="item"
+        key={item.id}
+        type="button"
+        class="vmz-ui-tabs__tab"
+        role="tab"
+        id={item.id}
+        data-vmz-tab={item.id}
+        aria-selected={selected === item.id ? 'true' : 'false'}
+        aria-controls={item.controls}
+        tabindex={selected === item.id ? 0 : -1}
+      >
+        {item.title}
+      </button>
+    </div>
+    <div
+      class="vmz-ui-tabs__panel"
+      role="tabpanel"
+      id={panelId}
+      data-vmz-tab-panel={selected}
+      aria-labelledby={selected}
+      tabindex="0"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  max-width: 36rem;
+}
+
+.vmz-ui-tabs__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--vmz-action-primary-background);
+}
+
+.vmz-ui-tabs__tab {
+  font: inherit;
+  font-weight: 600;
+  padding: 0.45rem 0.75rem;
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: 2px 2px 0 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.vmz-ui-tabs__tab[aria-selected='true'] {
+  background: var(--vmz-action-primary-background);
+  color: var(--vmz-action-primary-foreground);
+}
+
+.vmz-ui-tabs__tab:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-tabs__panel {
+  min-height: 2.5rem;
+  outline: none;
+}
+
+.vmz-ui-tabs__panel:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Tabs (UI2).
+ * Parent owns `selected` id; keyboard Left/Right/Home/End on the tablist.
+ * Panel content is the default slot (page chooses which body to show).
+ */
+export default class Tabs {
+  public label: string = 'Tabs';
+  public selected: string = '';
+  public panelId: string = '';
+  /** @type {{ id: string, title: string, controls?: string }[]} */
+  public items: { id: string; title: string; controls?: string }[] = [];
+  public onSelect: ((id: string) => void) | null = null;
+
+  select(id) {
+    if (typeof this.onSelect === 'function') this.onSelect(id);
+  }
+
+  onListClick(ev) {
+    const t = ev && ev.target;
+    const el =
+      t && typeof t.closest === 'function' ? t.closest('[data-vmz-tab]') : null;
+    const id = el && typeof el.getAttribute === 'function' ? el.getAttribute('data-vmz-tab') : null;
+    if (id) this.select(id);
+  }
+
+  onListKeyDown(ev) {
+    if (!ev || !this.items?.length) return;
+    const ids = this.items.map((it) => it.id);
+    const idx = Math.max(0, ids.indexOf(this.selected));
+    let next = idx;
+    if (ev.key === 'ArrowRight') next = (idx + 1) % ids.length;
+    else if (ev.key === 'ArrowLeft') next = (idx - 1 + ids.length) % ids.length;
+    else if (ev.key === 'Home') next = 0;
+    else if (ev.key === 'End') next = ids.length - 1;
+    else return;
+    ev.preventDefault();
+    this.select(ids[next]);
+    const root = this.__vmzDomRoot;
+    const btn =
+      root && typeof root.querySelector === 'function'
+        ? root.querySelector(`[data-vmz-tab="${ids[next]}"]`)
+        : null;
+    if (btn && typeof btn.focus === 'function') btn.focus();
+  }
+}
+</script>

package/src/components/TextArea.vmz

@@ -0,0 +1,91 @@
+<template>
+  <div class="vmz-ui-textarea" data-vmz-ui="textarea" data-invalid={invalidAttr}>
+    <label if={label} class="vmz-ui-textarea__label" for={controlId}>{label}</label>
+    <textarea
+      id={controlId}
+      class="vmz-ui-textarea__control"
+      rows={rows}
+      value={value}
+      disabled={disabled}
+      readonly={readonly}
+      aria-invalid={error ? 'true' : 'false'}
+      aria-describedby={describedBy}
+      onInput={onInput}
+    ></textarea>
+    <p if={description} id={descriptionId} class="vmz-ui-textarea__description">{description}</p>
+    <p if={error} id={errorId} class="vmz-ui-textarea__error" role="alert">{error}</p>
+  </div>
+</template>
+
+<style>
+.vmz-ui-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 28rem;
+}
+
+.vmz-ui-textarea__label {
+  font: inherit;
+  font-weight: 600;
+}
+
+.vmz-ui-textarea__control {
+  font: inherit;
+  min-height: 6rem;
+  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+  background: transparent;
+  color: inherit;
+  outline: none;
+  resize: vertical;
+}
+
+.vmz-ui-textarea[data-invalid='true'] .vmz-ui-textarea__control {
+  border-color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-textarea__control:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-textarea__control:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.vmz-ui-textarea__description {
+  margin: 0;
+  opacity: 0.75;
+  font-size: 0.9em;
+}
+
+.vmz-ui-textarea__error {
+  margin: 0;
+  color: var(--vmz-status-danger-foreground);
+  font-size: 0.9em;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — TextArea.
+ * Same label/description/error ownership contract as Field; parent owns value.
+ */
+export default class TextArea {
+  public label: string = '';
+  public description: string = '';
+  public error: string = '';
+  public value: string = '';
+  public rows: number = 4;
+  public disabled: boolean = false;
+  public readonly: boolean = false;
+  public invalidAttr: string = 'false';
+  public controlId: string = 'vmz-textarea';
+  public descriptionId: string = 'vmz-textarea-desc';
+  public errorId: string = 'vmz-textarea-err';
+  public describedBy: string = '';
+  public onInput: ((e: Event) => void) | null = null;
+}
+</script>

package/src/components/Timeline.vmz

@@ -0,0 +1,67 @@
+<template>
+  <ol class="vmz-ui-timeline" data-vmz-ui="timeline" aria-label={label}>
+    <li each={items} as="item" key={item.id} class="vmz-ui-timeline__item" data-vmz-audit={item.id}>
+      <p class="vmz-ui-timeline__time">{item.time}</p>
+      <p class="vmz-ui-timeline__title">{item.title}</p>
+      <p if={item.detail} class="vmz-ui-timeline__detail">{item.detail}</p>
+    </li>
+  </ol>
+</template>
+
+<style>
+.vmz-ui-timeline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vmz-density-compact-gap);
+  border-left: 2px solid var(--vmz-action-primary-background);
+}
+
+.vmz-ui-timeline__item {
+  position: relative;
+  padding: 0.15rem 0 0.15rem 0.85rem;
+}
+
+.vmz-ui-timeline__item::before {
+  content: '';
+  position: absolute;
+  left: -0.35rem;
+  top: 0.45rem;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 999px;
+  background: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-timeline__time {
+  margin: 0;
+  font-size: 0.85em;
+  opacity: 0.75;
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-timeline__title {
+  margin: 0.15rem 0 0;
+  font-weight: 700;
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-timeline__detail {
+  margin: 0.2rem 0 0;
+  opacity: 0.9;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Timeline (UI5 Console audit trail).
+ * Parent owns audit items; stable ids for list identity.
+ */
+export default class Timeline {
+  public label: string = 'Audit';
+  /** @type {{ id: string, time: string, title: string, detail?: string }[]} */
+  public items: { id: string; time: string; title: string; detail?: string }[] = [];
+}
+</script>

package/src/components/Toc.vmz

@@ -0,0 +1,77 @@
+<template>
+  <aside class="vmz-ui-toc" data-vmz-ui="toc" aria-label={label}>
+    <p class="vmz-ui-toc__title">{label}</p>
+    <nav class="vmz-ui-toc__nav">
+      <a
+        each={items}
+        as="item"
+        key={item.id}
+        class="vmz-ui-toc__link"
+        href={item.href}
+        data-vmz-toc={item.id}
+      >
+        {item.title}
+      </a>
+    </nav>
+  </aside>
+</template>
+
+<style>
+.vmz-ui-toc {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  min-width: 11rem;
+  padding: 0.85rem 0.75rem;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  background: var(--vmz-surface-mist);
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-toc__title {
+  margin: 0;
+  font-family: var(--vmz-font-display);
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--vmz-text-steel);
+}
+
+.vmz-ui-toc__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.vmz-ui-toc__link {
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.92rem;
+  text-decoration: none;
+  color: var(--vmz-action-primary-active);
+  outline: none;
+}
+
+.vmz-ui-toc__link:hover {
+  color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-toc__link:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  border-radius: 2px;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Toc (Document/Product composition).
+ * In-page outline; parent supplies items. Readable without JS.
+ */
+export default class Toc {
+  public label: string = 'On this page';
+  /** @type {{ id: string, title: string, href: string }[]} */
+  public items: { id: string; title: string; href: string }[] = [];
+}
+</script>

package/src/components/Tooltip.vmz

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="vmz-ui-tooltip"
+    data-vmz-ui="tooltip"
+    data-open={openAttr}
+  >
+    <div class="vmz-ui-tooltip__trigger" data-vmz-tooltip="trigger">
+      <slot />
+    </div>
+    <div
+      if={open}
+      class="vmz-ui-tooltip__bubble"
+      role="tooltip"
+      id={tooltipId}
+      data-vmz-tooltip="bubble"
+    >
+      {content}
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-tooltip {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.35rem;
+  max-width: 28rem;
+}
+
+.vmz-ui-tooltip__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.vmz-ui-tooltip__bubble {
+  box-sizing: border-box;
+  max-width: 18rem;
+  padding: 0.4rem 0.65rem;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  background: var(--vmz-surface-paper);
+  color: var(--vmz-text-ink);
+  font-size: 0.88rem;
+  line-height: 1.4;
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--vmz-line-default) 70%, transparent);
+}
+
+.vmz-ui-tooltip[data-open='true'] .vmz-ui-tooltip__trigger :where(button, a, [tabindex]):focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Tooltip.
+ * Parent owns live `open` + content string. Not a second overlay runtime;
+ * Escape/outside policies stay with richer Popover/Dialog when needed.
+ */
+export default class Tooltip {
+  public open: boolean = false;
+  public openAttr: string = 'false';
+  public content: string = '';
+  public tooltipId: string = 'vmz-tooltip';
+}
+</script>