jouw-stem__design-system 0.1.0

package/src/components/DataTable/DataTable.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="data-table" :class="additionalClasses">
+    <div v-if="$slots.header" class="data-table__header">
+      <slot name="header" />
+    </div>
+
+    <!-- WCAG 2.1.1 (axe: scrollable-region-focusable): the wrapper
+         enables horizontal scroll on overflowing tables, so it needs
+         a tabindex + role + accessible name so keyboard users can
+         reach + scroll it. -->
+    <div
+      class="data-table__wrapper"
+      tabindex="0"
+      role="region"
+      :aria-label="ariaLabel || 'Data table'"
+    >
+      <table class="data-table__table">
+        <thead class="data-table__thead">
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.field"
+              class="data-table__th"
+              :class="{ 'data-table__th--sortable': col.sortable }"
+              :style="col.width ? { width: col.width } : {}"
+              @click="col.sortable ? onSort(col.field) : null"
+            >
+              <span class="data-table__th-content">
+                {{ col.header }}
+                <span v-if="col.sortable" class="data-table__sort-icon">
+                  <svg
+                    v-if="sortField === col.field"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    :class="{ 'data-table__sort-icon--desc': sortOrder === -1 }"
+                  >
+                    <polyline points="18 15 12 9 6 15" />
+                  </svg>
+                  <svg
+                    v-else
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    class="data-table__sort-icon--neutral"
+                  >
+                    <polyline points="7 10 12 5 17 10" />
+                    <polyline points="7 14 12 19 17 14" />
+                  </svg>
+                </span>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="data-table__tbody">
+          <tr
+            v-for="(row, rowIndex) in paginatedData"
+            :key="rowIndex"
+            class="data-table__row"
+            :class="{ 'data-table__row--shape-striped': striped && rowIndex % 2 === 1 }"
+          >
+            <td
+              v-for="col in columns"
+              :key="col.field"
+              class="data-table__td"
+            >
+              <slot :name="`column-${col.field}`" :data="row" :field="col.field">
+                {{ getFieldValue(row, col.field) }}
+              </slot>
+            </td>
+          </tr>
+          <tr v-if="paginatedData.length === 0" class="data-table__empty-row">
+            <td :colspan="columns.length" class="data-table__empty">
+              <slot name="empty">
+                No records found
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="paginator && totalPages > 1" class="data-table__pagination">
+      <button
+        class="data-table__page-btn"
+        aria-label="First page"
+        :disabled="currentPage === 1"
+        @click="goToPage(1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <polyline points="11 17 6 12 11 7" />
+          <polyline points="18 17 13 12 18 7" />
+        </svg>
+      </button>
+      <button
+        class="data-table__page-btn"
+        aria-label="Previous page"
+        :disabled="currentPage === 1"
+        @click="goToPage(currentPage - 1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+      <span class="data-table__page-info">
+        Page {{ currentPage }} of {{ totalPages }}
+      </span>
+      <button
+        class="data-table__page-btn"
+        aria-label="Next page"
+        :disabled="currentPage === totalPages"
+        @click="goToPage(currentPage + 1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+      <button
+        class="data-table__page-btn"
+        aria-label="Last page"
+        :disabled="currentPage === totalPages"
+        @click="goToPage(totalPages)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="13 17 18 12 13 7" />
+          <polyline points="6 17 11 12 6 7" />
+        </svg>
+      </button>
+    </div>
+
+    <div v-if="$slots.footer" class="data-table__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style src="./DataTable.scss"></style>
+
+<script setup lang="ts" generic="TRow extends Record<string, unknown>">
+import { ref, computed, watch } from "vue";
+import {
+  getFieldValue,
+  sortRows,
+  totalPages as computeTotalPages,
+  paginate,
+  nextSortState,
+  clampPage,
+  type SortOrder,
+} from "./tableLogic";
+
+export interface DataTableColumn {
+  field: string;
+  header: string;
+  sortable?: boolean;
+  width?: string;
+}
+
+export type { SortOrder };
+
+interface Props {
+  value?: TRow[];
+  columns?: DataTableColumn[];
+  striped?: boolean;
+  hoverable?: boolean;
+  paginator?: boolean;
+  rows?: number;
+  sortField?: string | null;
+  sortOrder?: SortOrder;
+  /** Accessible name for the scrollable wrapper region. WCAG 2.1.1 +
+   *  axe `scrollable-region-focusable` require the wrapper to be
+   *  keyboard-focusable; ariaLabel gives the focus target a name. */
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: () => [] as TRow[],
+  columns: () => [],
+  striped: false,
+  hoverable: true,
+  paginator: false,
+  rows: 10,
+  sortField: null,
+  sortOrder: 1,
+  ariaLabel: undefined,
+});
+
+const emit = defineEmits<{
+  (e: "sort", payload: { sortField: string | null; sortOrder: SortOrder }): void;
+  (e: "page", payload: { page: number }): void;
+}>();
+
+defineOptions({ name: "DataTable" });
+
+const currentPage = ref(1);
+const internalSortField = ref<string | null>(props.sortField);
+const internalSortOrder = ref<SortOrder>(props.sortOrder);
+
+watch(
+  () => props.sortField,
+  (val) => {
+    internalSortField.value = val;
+  }
+);
+
+watch(
+  () => props.sortOrder,
+  (val) => {
+    internalSortOrder.value = val;
+  }
+);
+
+const sortField = computed(() => internalSortField.value);
+const sortOrder = computed(() => internalSortOrder.value);
+
+const sortedData = computed(() =>
+  sortRows(props.value, internalSortField.value, internalSortOrder.value)
+);
+
+const totalPages = computed(() =>
+  computeTotalPages(sortedData.value.length, props.rows, props.paginator)
+);
+
+const paginatedData = computed(() =>
+  paginate(sortedData.value, currentPage.value, props.rows, props.paginator)
+);
+
+const additionalClasses = computed(() =>
+  [props.hoverable && "data-table--mode-hoverable"].filter(Boolean).join(" ")
+);
+
+function onSort(field: string) {
+  const next = nextSortState(
+    { sortField: internalSortField.value, sortOrder: internalSortOrder.value },
+    field
+  );
+  internalSortField.value = next.sortField;
+  internalSortOrder.value = next.sortOrder;
+  emit("sort", { sortField: next.sortField, sortOrder: next.sortOrder });
+}
+
+function goToPage(page: number) {
+  const valid = clampPage(page, totalPages.value);
+  if (valid == null) return;
+  currentPage.value = valid;
+  emit("page", { page: currentPage.value });
+}
+</script>

package/src/components/DataTable/tableLogic.ts

@@ -0,0 +1,110 @@
+/**
+ * Pure logic for DataTable.
+ *
+ * Extracted so each branch can be unit-tested directly without mounting
+ * Vue. Keep the component template thin and let these helpers carry the
+ * decisions: dotted-path field reads, sort comparators, pagination math,
+ * sort-state transitions.
+ */
+
+export type SortOrder = 1 | -1
+
+export interface SortState {
+  sortField: string | null
+  sortOrder: SortOrder
+}
+
+/**
+ * Read a (possibly nested) field off a row using dotted-path notation.
+ * Returns `undefined` for any segment that traverses through a non-object.
+ */
+export function getFieldValue(
+  row: Record<string, unknown> | null | undefined,
+  field: string
+): unknown {
+  if (!row) return undefined
+  return field
+    .split('.')
+    .reduce<unknown>(
+      (acc, key) =>
+        acc && typeof acc === 'object' ? (acc as Record<string, unknown>)[key] : undefined,
+      row
+    )
+}
+
+/**
+ * Stable-ish sort by a single field × direction. Uses lt/gt comparison so
+ * it works for both numeric and string fields. Returns a new array — does
+ * not mutate the input.
+ */
+export function sortRows<TRow extends Record<string, unknown>>(
+  rows: readonly TRow[],
+  sortField: string | null,
+  sortOrder: SortOrder
+): TRow[] {
+  if (!sortField) return [...rows]
+  return [...rows].sort((a, b) => {
+    const aVal = getFieldValue(a, sortField) as number | string | null | undefined
+    const bVal = getFieldValue(b, sortField) as number | string | null | undefined
+    if (aVal == null && bVal == null) return 0
+    if (aVal == null) return 1 * sortOrder
+    if (bVal == null) return -1 * sortOrder
+    if (aVal < bVal) return -1 * sortOrder
+    if (aVal > bVal) return 1 * sortOrder
+    return 0
+  })
+}
+
+/**
+ * Number of pages required to render `total` rows at `rowsPerPage`. Always
+ * returns 1 when paginator is disabled or rowsPerPage is non-positive
+ * (avoids divide-by-zero / NaN downstream).
+ */
+export function totalPages(
+  totalRows: number,
+  rowsPerPage: number,
+  paginatorEnabled: boolean
+): number {
+  if (!paginatorEnabled || rowsPerPage <= 0) return 1
+  return Math.max(1, Math.ceil(totalRows / rowsPerPage))
+}
+
+/**
+ * Slice the page-sized window out of `rows`. When the paginator is off,
+ * the full array passes through unchanged.
+ */
+export function paginate<TRow>(
+  rows: readonly TRow[],
+  page: number,
+  rowsPerPage: number,
+  paginatorEnabled: boolean
+): TRow[] {
+  if (!paginatorEnabled) return [...rows]
+  const start = (page - 1) * rowsPerPage
+  return rows.slice(start, start + rowsPerPage)
+}
+
+/**
+ * Compute the next sort state when a user clicks a sortable header.
+ *
+ * - First click on a new field: sort ASC.
+ * - Click on the currently sorted field: flip direction (ASC ↔ DESC).
+ *
+ * The "third click clears" behaviour is *not* part of the contract; this
+ * mirrors what the component currently does and is the regression target.
+ */
+export function nextSortState(current: SortState, clickedField: string): SortState {
+  if (current.sortField === clickedField) {
+    return { sortField: clickedField, sortOrder: (current.sortOrder * -1) as SortOrder }
+  }
+  return { sortField: clickedField, sortOrder: 1 }
+}
+
+/**
+ * Clamp a requested page to `[1, totalPages]`. Returns `null` when the
+ * page is out of range — callers use that signal to short-circuit.
+ */
+export function clampPage(requested: number, total: number): number | null {
+  if (requested < 1 || requested > total) return null
+  return requested
+}

package/src/components/DataView/DataView.matrix.ts

@@ -0,0 +1,19 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.data-view',
+  // DataView uses item-template slots. Without children the matrix
+  // shows the surrounding chrome (layout buttons, paginator, empty list).
+  baseQuery: {
+    value: '[{"name":"Alpha"},{"name":"Beta"},{"name":"Gamma"}]'
+  },
+  variants: [
+    {
+      name: 'Layout',
+      subvariants: [
+        { name: 'list', query: { layout: 'list' } },
+        { name: 'grid', query: { layout: 'grid' } }
+      ]
+    }
+  ]
+}

package/src/components/DataView/DataView.scss

@@ -0,0 +1,152 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: data-view;
+
+.#{$c} {
+  background-color: var(--dataView-background, $dataView-background);
+  border: var(--dataView-border-width, $dataView-border-width) solid var(--dataView-border-color, $dataView-border-color);
+  border-radius: var(--dataView-radius, $dataView-radius);
+  overflow: hidden;
+}
+
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--inset-m, $inset-m);
+  padding: var(--dataView-header-padding, $dataView-header-padding);
+  background-color: var(--dataView-header-background, $dataView-header-background);
+  border-bottom: var(--dataView-border-width, $dataView-border-width) solid var(--dataView-header-borderColor, $dataView-header-borderColor);
+}
+
+.#{$c}__header-content {
+  flex: 1;
+}
+
+.#{$c}__layout-switcher {
+  display: flex;
+  gap: var(--dataView-layoutSwitcher-gap, $dataView-layoutSwitcher-gap);
+}
+
+.#{$c}__layout-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dataView-layoutSwitcher-button-size, $dataView-layoutSwitcher-button-size);
+  height: var(--dataView-layoutSwitcher-button-size, $dataView-layoutSwitcher-button-size);
+  padding: 0;
+  border: none;
+  background-color: var(--dataView-layoutSwitcher-button-background-default, $dataView-layoutSwitcher-button-background-default);
+  border-radius: var(--dataView-layoutSwitcher-button-radius, $dataView-layoutSwitcher-button-radius);
+  cursor: pointer;
+  transition: background-color var(--dataView-transition-duration, $dataView-transition-duration) ease,
+              color var(--dataView-transition-duration, $dataView-transition-duration) ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: var(--dataView-layoutSwitcher-button-color-default, $dataView-layoutSwitcher-button-color-default);
+  }
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--dataView-layoutSwitcher-button-background-hover, $dataView-layoutSwitcher-button-background-hover);
+  }
+
+  &--state-active {
+    background-color: var(--dataView-layoutSwitcher-button-background-active, $dataView-layoutSwitcher-button-background-active);
+
+    svg {
+      color: var(--dataView-layoutSwitcher-button-color-active, $dataView-layoutSwitcher-button-color-active);
+    }
+  }
+}
+
+.#{$c}__content {
+  padding: var(--dataView-content-padding, $dataView-content-padding);
+}
+
+.#{$c}__content--list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dataView-list-gap, $dataView-list-gap);
+}
+
+.#{$c}__content--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: var(--dataView-grid-gap, $dataView-grid-gap);
+}
+
+.#{$c}--layout-list .#{$c}__item {
+  padding: var(--dataView-list-item-padding, $dataView-list-item-padding);
+  background-color: var(--dataView-list-item-background-default, $dataView-list-item-background-default);
+  border: 1px solid var(--dataView-list-item-borderColor, $dataView-list-item-borderColor);
+  border-radius: var(--dataView-list-item-radius, $dataView-list-item-radius);
+  transition: background-color var(--dataView-transition-duration, $dataView-transition-duration) ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--dataView-list-item-background-hover, $dataView-list-item-background-hover);
+  }
+}
+
+.#{$c}--layout-grid .#{$c}__item {
+  // Grid items are typically styled by the slot content
+}
+
+.#{$c}__empty {
+  padding: var(--dataView-empty-padding, $dataView-empty-padding);
+  text-align: center;
+  color: var(--dataView-empty-color, $dataView-empty-color);
+}
+
+.#{$c}__pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--inset-xs, $inset-xs);
+  padding: var(--dataView-pagination-padding, $dataView-pagination-padding);
+  border-top: var(--dataView-border-width, $dataView-border-width) solid var(--dataView-pagination-borderColor, $dataView-pagination-borderColor);
+}
+
+.#{$c}__page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--dataView-layoutSwitcher-button-radius, $dataView-layoutSwitcher-button-radius);
+  transition: background-color var(--dataView-transition-duration, $dataView-transition-duration) ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: var(--text-default, $text-default);
+  }
+
+  &:hover:not(:disabled),
+  &[data-state~="hover"]:not(:disabled) {
+    background-color: var(--dataView-list-item-background-hover, $dataView-list-item-background-hover);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.#{$c}__page-info {
+  font-size: 14px;
+  color: var(--text-default, $text-default);
+}
+
+.#{$c}__footer {
+  padding: var(--dataView-header-padding, $dataView-header-padding);
+  background-color: var(--dataView-header-background, $dataView-header-background);
+  border-top: var(--dataView-border-width, $dataView-border-width) solid var(--dataView-header-borderColor, $dataView-header-borderColor);
+}

package/src/components/DataView/DataView.tokens.theme-dark.json

@@ -0,0 +1,172 @@
+{
+  "dataView": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "DataView container background"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Container border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Container border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "header": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Header background color"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Header padding"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header border color"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Content area padding"
+      }
+    },
+    "grid": {
+      "gap": {
+        "value": "{stack.m}",
+        "type": "dimension",
+        "description": "Gap between grid items"
+      }
+    },
+    "list": {
+      "gap": {
+        "value": "{stack.s}",
+        "type": "dimension",
+        "description": "Gap between list items"
+      },
+      "item": {
+        "padding": {
+          "value": "{inset.m}",
+          "type": "dimension",
+          "description": "List item padding"
+        },
+        "background": {
+          "default": {
+            "value": "transparent",
+            "type": "color",
+            "description": "List item background"
+          },
+          "hover": {
+            "value": "{surface.muted}",
+            "type": "color",
+            "description": "List item hover background"
+          }
+        },
+        "borderColor": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "List item border color"
+        },
+        "radius": {
+          "value": "{radius.subtle}",
+          "type": "dimension",
+          "description": "List item border radius"
+        }
+      }
+    },
+    "layoutSwitcher": {
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between layout buttons"
+      },
+      "button": {
+        "size": {
+          "value": "32px",
+          "type": "dimension",
+          "description": "Layout button size"
+        },
+        "background": {
+          "default": {
+            "value": "transparent",
+            "type": "color",
+            "description": "Button default background"
+          },
+          "active": {
+            "value": "{surface.muted}",
+            "type": "color",
+            "description": "Button active background"
+          },
+          "hover": {
+            "value": "{neutral.100}",
+            "type": "color",
+            "description": "Button hover background"
+          }
+        },
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color",
+            "description": "Button icon default color"
+          },
+          "active": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Button icon active color"
+          }
+        },
+        "radius": {
+          "value": "{radius.subtle}",
+          "type": "dimension",
+          "description": "Button border radius"
+        }
+      }
+    },
+    "pagination": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Pagination padding"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Pagination border color"
+      }
+    },
+    "empty": {
+      "padding": {
+        "value": "{inset.xl}",
+        "type": "dimension",
+        "description": "Empty state padding"
+      },
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Empty state text color"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}