jouw-stem__design-system 0.1.0

package/src/components/Paginator/Paginator.vue

@@ -0,0 +1,219 @@
+<template>
+  <nav class="paginator" :class="additionalClasses" aria-label="Pagination">
+    <div v-if="showInfo" class="paginator__info">
+      {{ infoText }}
+    </div>
+
+    <div class="paginator__controls">
+      <!-- First page button -->
+      <button
+        v-if="showFirstLast"
+        class="paginator__nav paginator__nav--first"
+        :disabled="isFirstPage"
+        :aria-disabled="isFirstPage"
+        aria-label="Go to first page"
+        @click="goToFirst"
+      >
+        <svg class="paginator__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="11 17 6 12 11 7" />
+          <polyline points="18 17 13 12 18 7" />
+        </svg>
+      </button>
+
+      <!-- Previous button -->
+      <button
+        class="paginator__nav paginator__nav--prev"
+        :disabled="isFirstPage"
+        :aria-disabled="isFirstPage"
+        aria-label="Go to previous page"
+        @click="goToPrev"
+      >
+        <svg class="paginator__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+
+      <!-- Page numbers -->
+      <div class="paginator__pages">
+        <button
+          v-for="page in visiblePages"
+          :key="page.value"
+          class="paginator__page"
+          :class="{ 'paginator__page--state-active': page.value === currentPage, 'paginator__page--state-ellipsis': page.isEllipsis }"
+          :disabled="page.isEllipsis"
+          :aria-current="page.value === currentPage ? 'page' : undefined"
+          :aria-label="page.isEllipsis ? undefined : `Go to page ${page.value}`"
+          @click="!page.isEllipsis && goToPage(page.value)"
+        >
+          {{ page.isEllipsis ? '...' : page.value }}
+        </button>
+      </div>
+
+      <!-- Next button -->
+      <button
+        class="paginator__nav paginator__nav--next"
+        :disabled="isLastPage"
+        :aria-disabled="isLastPage"
+        aria-label="Go to next page"
+        @click="goToNext"
+      >
+        <svg class="paginator__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+
+      <!-- Last page button -->
+      <button
+        v-if="showFirstLast"
+        class="paginator__nav paginator__nav--last"
+        :disabled="isLastPage"
+        :aria-disabled="isLastPage"
+        aria-label="Go to last page"
+        @click="goToLast"
+      >
+        <svg class="paginator__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="13 17 18 12 13 7" />
+          <polyline points="6 17 11 12 6 7" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Rows per page dropdown -->
+    <div v-if="rowsPerPageOptions && rowsPerPageOptions.length > 0" class="paginator__rows-per-page">
+      <label class="paginator__rows-label" :for="rowsSelectId">Rows per page:</label>
+      <select
+        :id="rowsSelectId"
+        class="paginator__rows-select"
+        :value="rows"
+        @change="handleRowsChange"
+      >
+        <option v-for="option in rowsPerPageOptions" :key="option" :value="option">
+          {{ option }}
+        </option>
+      </select>
+    </div>
+  </nav>
+</template>
+
+<style src="./Paginator.scss"></style>
+
+<script setup lang="ts">
+import { computed, useId } from "vue";
+
+const rowsSelectId = useId();
+
+interface Props {
+  totalRecords: number;
+  rows?: number;
+  first?: number;
+  rowsPerPageOptions?: unknown[];
+  pageLinkSize?: number;
+  showFirstLast?: boolean;
+  showInfo?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rows: 10,
+  first: 0,
+  rowsPerPageOptions: () => [],
+  pageLinkSize: 5,
+  showFirstLast: true,
+  showInfo: false,
+});
+const emit = defineEmits<{
+  (e: "update:first", ...args: unknown[]): void;
+  (e: "update:rows", ...args: unknown[]): void;
+  (e: "page", ...args: unknown[]): void;
+}>();
+const totalPages = computed(() => Math.ceil(props.totalRecords / props.rows));
+
+const currentPage = computed(() => Math.floor(props.first / props.rows) + 1);
+
+const isFirstPage = computed(() => currentPage.value === 1);
+
+const isLastPage = computed(() => currentPage.value === totalPages.value || totalPages.value === 0);
+
+const infoText = computed(() => {
+  const start = props.first + 1;
+  const end = Math.min(props.first + props.rows, props.totalRecords);
+  return `${start}-${end} of ${props.totalRecords}`;
+});
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const total = totalPages.value;
+  const current = currentPage.value;
+  const linkSize = props.pageLinkSize;
+
+  if (total <= linkSize) {
+    for (let i = 1; i <= total; i++) {
+      pages.push({ value: i, isEllipsis: false });
+    }
+  } else {
+    const half = Math.floor(linkSize / 2);
+    let start = Math.max(1, current - half);
+    let end = Math.min(total, start + linkSize - 1);
+
+    if (end - start < linkSize - 1) {
+      start = Math.max(1, end - linkSize + 1);
+    }
+
+    if (start > 1) {
+      pages.push({ value: 1, isEllipsis: false });
+      if (start > 2) {
+        pages.push({ value: "ellipsis-start", isEllipsis: true });
+      }
+    }
+
+    for (let i = start; i <= end; i++) {
+      if (i !== 1 && i !== total) {
+        pages.push({ value: i, isEllipsis: false });
+      }
+    }
+
+    if (end < total) {
+      if (end < total - 1) {
+        pages.push({ value: "ellipsis-end", isEllipsis: true });
+      }
+      pages.push({ value: total, isEllipsis: false });
+    }
+  }
+
+  return pages;
+});
+
+function goToPage(page) {
+  const newFirst = (page - 1) * props.rows;
+  emit("update:first", newFirst);
+  emit("page", { page, first: newFirst, rows: props.rows, pageCount: totalPages.value });
+}
+
+function goToFirst() {
+  goToPage(1);
+}
+
+function goToLast() {
+  goToPage(totalPages.value);
+}
+
+function goToPrev() {
+  if (currentPage.value > 1) {
+    goToPage(currentPage.value - 1);
+  }
+}
+
+function goToNext() {
+  if (currentPage.value < totalPages.value) {
+    goToPage(currentPage.value + 1);
+  }
+}
+
+function handleRowsChange(event) {
+  const newRows = parseInt(event.target.value, 10);
+  emit("update:rows", newRows);
+  emit("update:first", 0);
+  emit("page", { page: 1, first: 0, rows: newRows, pageCount: Math.ceil(props.totalRecords / newRows) });
+}
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+</script>

package/src/components/Paginator/pageMath.ts

@@ -0,0 +1,126 @@
+/**
+ * Pure pagination math extracted from Paginator.
+ *
+ * Putting page-window arithmetic here keeps the boundaries
+ * (single-page, page-link size larger than the total, current near the
+ * start vs near the end) testable without mounting the component.
+ *
+ * No Vue, no DOM, no refs.
+ */
+
+export interface PageEntry {
+  /** The 1-based page number, or a stable id like 'ellipsis-start'. */
+  value: number | string
+  /** True when this entry should render as a "..." gap. */
+  isEllipsis: boolean
+}
+
+/**
+ * Total number of pages, given a record count and rows-per-page.
+ *
+ * - `totalRecords <= 0` → 0 pages.
+ * - `rows <= 0` → degenerate; we return 0 to avoid division-by-zero
+ *   blowing up the consumer.
+ */
+export function totalPages(totalRecords: number, rows: number): number {
+  if (totalRecords <= 0 || rows <= 0) return 0
+  return Math.ceil(totalRecords / rows)
+}
+
+/**
+ * The currently active page (1-based) given the `first` row offset.
+ *
+ * - Defensive for `rows <= 0` — returns 1 to mirror "we always have a
+ *   first page" rather than NaN.
+ */
+export function currentPage(first: number, rows: number): number {
+  if (rows <= 0) return 1
+  return Math.floor(first / rows) + 1
+}
+
+/**
+ * Compute the row offset for a 1-based page number.
+ */
+export function firstForPage(page: number, rows: number): number {
+  return (page - 1) * rows
+}
+
+/**
+ * Render the "1-10 of 100" info string. Intentionally English-only —
+ * matches Paginator's current implementation; localization is a
+ * separate concern and would change the function signature.
+ */
+export function infoText(first: number, rows: number, totalRecords: number): string {
+  const start = first + 1
+  const end = Math.min(first + rows, totalRecords)
+  return `${start}-${end} of ${totalRecords}`
+}
+
+/**
+ * Build the array of page-button entries for a paginator with
+ * `total` pages, where `current` is the active 1-based page and
+ * `linkSize` is the maximum number of *page-number* buttons to show
+ * between the prev/next chevrons.
+ *
+ * Decisions encoded here:
+ *
+ *   1. When `total <= linkSize` we render every page; no ellipsis ever
+ *      appears.
+ *   2. Otherwise we always pin page 1 and page `total`; an ellipsis
+ *      replaces a *gap* of more than one page on either side.
+ *   3. The window of "middle" pages is centred on `current` but pushed
+ *      back to `[2, total-1]` so it never repeats the pinned ends.
+ *
+ * Returns a list of `{ value, isEllipsis }` entries. Ellipses use
+ * stable string ids (`ellipsis-start`, `ellipsis-end`) so they survive
+ * Vue's `:key` requirement in the template.
+ */
+export function buildPageEntries(
+  current: number,
+  total: number,
+  linkSize: number
+): PageEntry[] {
+  if (total <= 0) return []
+
+  if (total <= linkSize) {
+    const out: PageEntry[] = []
+    for (let i = 1; i <= total; i++) out.push({ value: i, isEllipsis: false })
+    return out
+  }
+
+  const half = Math.floor(linkSize / 2)
+  let start = Math.max(1, current - half)
+  let end = Math.min(total, start + linkSize - 1)
+  if (end - start < linkSize - 1) {
+    start = Math.max(1, end - linkSize + 1)
+  }
+
+  const pages: PageEntry[] = []
+  if (start > 1) {
+    pages.push({ value: 1, isEllipsis: false })
+    if (start > 2) pages.push({ value: 'ellipsis-start', isEllipsis: true })
+  }
+  for (let i = start; i <= end; i++) {
+    if (i !== 1 && i !== total) pages.push({ value: i, isEllipsis: false })
+  }
+  if (end < total) {
+    if (end < total - 1) pages.push({ value: 'ellipsis-end', isEllipsis: true })
+    pages.push({ value: total, isEllipsis: false })
+  }
+  return pages
+}
+
+/**
+ * Clamp a requested page number to the valid range. Defensive for
+ * jump-to-page handlers — converts NaN / out-of-range / non-integer
+ * inputs to the nearest legal page so a UI control can pass through
+ * raw user input without checking first.
+ */
+export function clampPage(requested: number, total: number): number {
+  if (total <= 0) return 1
+  if (!Number.isFinite(requested)) return 1
+  const rounded = Math.floor(requested)
+  if (rounded < 1) return 1
+  if (rounded > total) return total
+  return rounded
+}

package/src/components/Panel/Panel.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.panel',
+  defaultSlot: 'Panel content body. Use Panel as a grouped surface for related content with an optional header.',
+  baseQuery: { header: 'Panel header' },
+  variants: [
+    {
+      name: 'Mode',
+      subvariants: [
+        { name: 'static',    query: { toggleable: 'false' } },
+        { name: 'expanded',  query: { toggleable: 'true', collapsed: 'false' } },
+        { name: 'collapsed', query: { toggleable: 'true', collapsed: 'true' } }
+      ]
+    }
+  ]
+}

package/src/components/Panel/Panel.scss

@@ -0,0 +1,114 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: panel;
+
+.#{$c} {
+  background-color: var(--panel-background, $panel-background);
+  border: var(--panel-border-width, $panel-border-width) solid var(--panel-border-color, $panel-border-color);
+  border-radius: var(--panel-radius, $panel-radius);
+  overflow: hidden;
+}
+
+// Header section
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  gap: var(--inset-s, $inset-s);
+  padding: var(--panel-header-padding, $panel-header-padding);
+  background-color: var(--panel-header-background-default, $panel-header-background-default);
+  border-bottom: var(--panel-border-width, $panel-border-width) solid var(--panel-header-borderColor, $panel-header-borderColor);
+}
+
+.#{$c}__header--mode-toggleable {
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--panel-transition-duration, $panel-transition-duration) ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--panel-header-background-hover, $panel-header-background-hover);
+
+    .#{$c}__toggle-icon {
+      color: var(--panel-icon-color-hover, $panel-icon-color-hover);
+    }
+  }
+}
+
+.#{$c}__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--panel-icon-size, $panel-icon-size);
+  height: var(--panel-icon-size, $panel-icon-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.#{$c}__toggle-icon {
+  width: var(--panel-icon-size, $panel-icon-size);
+  height: var(--panel-icon-size, $panel-icon-size);
+  color: var(--panel-icon-color-default, $panel-icon-color-default);
+  transition: transform var(--panel-transition-duration, $panel-transition-duration) ease,
+              color var(--panel-transition-duration, $panel-transition-duration) ease;
+  transform: rotate(var(--panel-icon-rotation-expanded, $panel-icon-rotation-expanded));
+}
+
+.#{$c}__title {
+  flex: 1;
+  font-size: var(--panel-header-fontSize, $panel-header-fontSize);
+  font-weight: var(--panel-header-fontWeight, $panel-header-fontWeight);
+  color: var(--panel-header-color, $panel-header-color);
+  line-height: 1.4;
+}
+
+.#{$c}__icons {
+  display: flex;
+  align-items: center;
+  gap: var(--inset-xs, $inset-xs);
+  margin-left: auto;
+}
+
+// Content section
+.#{$c}__content-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--panel-transition-duration, $panel-transition-duration) ease;
+}
+
+.#{$c}__content {
+  overflow: hidden;
+  padding: var(--panel-content-padding, $panel-content-padding);
+  background-color: var(--panel-content-background, $panel-content-background);
+  color: var(--panel-content-color, $panel-content-color);
+}
+
+// Footer section
+.#{$c}__footer {
+  padding: var(--panel-content-padding, $panel-content-padding);
+  border-top: var(--panel-border-width, $panel-border-width) solid var(--panel-header-borderColor, $panel-header-borderColor);
+  background-color: var(--panel-header-background-default, $panel-header-background-default);
+}
+
+// Collapsed state
+.#{$c}--state-collapsed {
+  .#{$c}__header {
+    border-bottom-color: transparent;
+  }
+
+  .#{$c}__toggle-icon {
+    transform: rotate(var(--panel-icon-rotation-collapsed, $panel-icon-rotation-collapsed));
+  }
+
+  .#{$c}__content-wrapper {
+    grid-template-rows: 0fr;
+  }
+
+  .#{$c}__content {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

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

@@ -0,0 +1,120 @@
+{
+  "panel": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Panel background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Panel border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Panel border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Panel border radius"
+    },
+    "header": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Header background"
+        },
+        "hover": {
+          "value": "{intent.secondary.hover}",
+          "type": "color",
+          "description": "Header hover background when toggleable"
+        }
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Header font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Header font weight"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Content background"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Content text color"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Toggle icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Icon color on hover"
+        }
+      },
+      "rotation": {
+        "collapsed": {
+          "value": "-90deg",
+          "type": "dimension",
+          "description": "Icon rotation when collapsed"
+        },
+        "expanded": {
+          "value": "0deg",
+          "type": "dimension",
+          "description": "Icon rotation when expanded"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}