@vmz/ui 0.0.2 → 0.0.4

package/src/components/DataTable.vmz

@@ -0,0 +1,220 @@
+<template>
+  <div
+    class="vmz-ui-datatable-wrap"
+    data-vmz-ui="data-table"
+    data-sort-key={sortKey}
+    data-sort-dir={sortDir}
+    data-selected-count={selectedCount}
+  >
+    <table class="vmz-ui-datatable">
+      <thead onClick={onHeadClick}>
+        <tr>
+          <th scope="col" class="vmz-ui-datatable__check">
+            <input
+              type="checkbox"
+              class="vmz-ui-datatable__box"
+              data-vmz-select-all="true"
+              aria-label={selectAllLabel}
+              checked={allSelected}
+            />
+          </th>
+          <th each={columns} as="col" key={col.id} scope="col" data-vmz-col={col.id}>
+            <button type="button" class="vmz-ui-datatable__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}
+          data-selected={row.selectedAttr}
+        >
+          <td class="vmz-ui-datatable__check">
+            <input
+              type="checkbox"
+              class="vmz-ui-datatable__box"
+              data-vmz-select={row.id}
+              aria-label={row.selectLabel}
+              checked={row.selected}
+            />
+          </td>
+          <td each={row.cells} as="cell">{cell}</td>
+          <td if={hasRowAction}>
+            <button
+              type="button"
+              class="vmz-ui-datatable__row-action"
+              data-vmz-row-action={row.id}
+              disabled={rowActionDisabled}
+            >
+              {actionLabel}
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style>
+.vmz-ui-datatable-wrap {
+  max-height: 16rem;
+  overflow: auto;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  background: var(--vmz-surface-paper);
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-datatable {
+  width: 100%;
+  border-collapse: collapse;
+  font: inherit;
+}
+
+.vmz-ui-datatable th,
+.vmz-ui-datatable td {
+  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+  text-align: left;
+  border-bottom: 1px solid var(--vmz-line-default);
+  vertical-align: middle;
+}
+
+.vmz-ui-datatable thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  font-weight: 700;
+  color: var(--vmz-action-primary-active);
+  background: var(--vmz-surface-mist);
+  box-shadow: 0 1px 0 var(--vmz-line-default);
+}
+
+.vmz-ui-datatable__check {
+  width: 2.25rem;
+}
+
+.vmz-ui-datatable__box {
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--vmz-action-primary-background);
+  outline: none;
+}
+
+.vmz-ui-datatable__box:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-datatable tr[data-selected='true'] {
+  background: color-mix(in srgb, var(--vmz-action-primary-background) 12%, transparent);
+}
+
+.vmz-ui-datatable__sort {
+  font: inherit;
+  font-weight: 700;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.vmz-ui-datatable__sort:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-datatable__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-datatable__row-action:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-datatable__row-action:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — DataTable (ordinary Console table).
+ * Parent owns rows + selection + sort. Sticky header.
+ * Large-grid features live outside this package.
+ */
+export default class DataTable {
+  /** @type {{ id: string, title: string }[]} */
+  public columns: { id: string; title: string }[] = [];
+  /**
+   * @type {{
+   *   id: string,
+   *   cells: string[],
+   *   selected: boolean,
+   *   selectedAttr: string,
+   *   selectLabel: string
+   * }[]}
+   */
+  public rows: {
+    id: string;
+    cells: string[];
+    selected: boolean;
+    selectedAttr: string;
+    selectLabel: 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 selectedCount: string = '0';
+  public allSelected: boolean = false;
+  public selectAllLabel: string = 'Select all rows';
+  public onRowAction: ((rowId: string) => void) | null = null;
+  public onSort: ((columnId: string) => void) | null = null;
+  public onToggleRow: ((rowId: string) => void) | null = null;
+  public onToggleAll: (() => void) | null = null;
+
+  onBodyClick(ev) {
+    const t = ev && ev.target;
+    if (!t || typeof t.closest !== 'function') return;
+    const select = t.closest('[data-vmz-select]');
+    if (select) {
+      const id = select.getAttribute('data-vmz-select');
+      if (id && typeof this.onToggleRow === 'function') this.onToggleRow(id);
+      return;
+    }
+    const action = t.closest('[data-vmz-row-action]');
+    if (!action || action.disabled) return;
+    const id = action.getAttribute('data-vmz-row-action');
+    if (id && typeof this.onRowAction === 'function') this.onRowAction(id);
+  }
+
+  onHeadClick(ev) {
+    const t = ev && ev.target;
+    if (!t || typeof t.closest !== 'function') return;
+    if (t.closest('[data-vmz-select-all]')) {
+      if (typeof this.onToggleAll === 'function') this.onToggleAll();
+      return;
+    }
+    const sort = t.closest('[data-vmz-sort]');
+    if (!sort) return;
+    const id = sort.getAttribute('data-vmz-sort');
+    if (id && typeof this.onSort === 'function') this.onSort(id);
+  }
+}
+</script>

package/src/components/DatePicker.vmz

@@ -0,0 +1,93 @@
+<template>
+  <div class="vmz-ui-date-picker" data-vmz-ui="date-picker" data-invalid={invalidAttr}>
+    <label if={label} class="vmz-ui-date-picker__label" for={controlId}>{label}</label>
+    <input
+      id={controlId}
+      class="vmz-ui-date-picker__control"
+      type="date"
+      value={value}
+      min={min}
+      max={max}
+      disabled={disabled}
+      aria-invalid={error ? 'true' : 'false'}
+      aria-describedby={describedBy}
+      onInput={onInput}
+      onChange={onChange}
+    />
+    <p if={description} id={descriptionId} class="vmz-ui-date-picker__description">{description}</p>
+    <p if={error} id={errorId} class="vmz-ui-date-picker__error" role="alert">{error}</p>
+  </div>
+</template>
+
+<style>
+.vmz-ui-date-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 28rem;
+}
+
+.vmz-ui-date-picker__label {
+  font: inherit;
+  font-weight: 600;
+}
+
+.vmz-ui-date-picker__control {
+  font: inherit;
+  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;
+}
+
+.vmz-ui-date-picker[data-invalid='true'] .vmz-ui-date-picker__control {
+  border-color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-date-picker__control:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-date-picker__control:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.vmz-ui-date-picker__description {
+  margin: 0;
+  opacity: 0.75;
+  font-size: 0.9em;
+}
+
+.vmz-ui-date-picker__error {
+  margin: 0;
+  color: var(--vmz-status-danger-foreground);
+  font-size: 0.9em;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — DatePicker.
+ * WebSurface thin gate: native date input. Parent owns ISO value (YYYY-MM-DD).
+ * No calendar overlay runtime; richer picker stays out of @vmz/ui core until needed.
+ */
+export default class DatePicker {
+  public label: string = '';
+  public description: string = '';
+  public error: string = '';
+  public value: string = '';
+  public min: string = '';
+  public max: string = '';
+  public disabled: boolean = false;
+  public invalidAttr: string = 'false';
+  public controlId: string = 'vmz-date';
+  public descriptionId: string = 'vmz-date-desc';
+  public errorId: string = 'vmz-date-err';
+  public describedBy: string = '';
+  public onInput: ((e: Event) => void) | null = null;
+  public onChange: ((e: Event) => void) | null = null;
+}
+</script>