@nuxtseo/design-system 0.0.0-stage → 0.1.1

package/app/components/data/UiTableFrame.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+const {
+  name = 'UiTableFrame',
+  bordered = false,
+  rowHover = false,
+  scrolled = false,
+  // No default on purpose. `role="region"` is a LANDMARK: several unlabelled
+  // tables on one page would each announce the same generic name, which is the
+  // exact failure landmark navigation exists to avoid. Unnamed frames fall back
+  // to `role="group"`, which stays keyboard-scrollable without polluting the
+  // landmark rotor.
+  scrollLabel,
+} = defineProps<{
+  name?: string
+  bordered?: boolean
+  rowHover?: boolean
+  scrolled?: boolean
+  scrollLabel?: string
+}>()
+</script>
+
+<template>
+  <div
+    :data-ui="name"
+    :data-bordered="bordered || undefined"
+    :data-row-hover="rowHover || undefined"
+    :data-scrolled="scrolled || undefined"
+    :aria-label="scrollLabel"
+    :role="scrollLabel ? 'region' : 'group'"
+    tabindex="0"
+    class="w-full overflow-x-auto overscroll-x-contain"
+    :class="bordered ? 'rounded-xl border border-default bg-default' : ''"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+:deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+:deep(thead) {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 10;
+  background: var(--ui-bg);
+}
+
+:deep(thead th) {
+  border-block-end: 1px solid var(--ui-border);
+  background: var(--ui-bg);
+}
+
+:deep(tbody > tr.spacer) {
+  block-size: 0.25rem;
+}
+
+:deep(tbody > tr.spacer + tr > :is(th, td)) {
+  border-block-start: 4px solid transparent;
+  background-clip: padding-box;
+}
+
+:deep(tbody > tr:not(.spacer):not(:last-child) > :is(th, td)) {
+  border-block-end: 1px solid var(--ui-border);
+}
+
+[data-row-hover] :deep(tbody > tr:not(.spacer):not(.expanded-row) > :is(th, td)) {
+  transition: background-color 140ms ease-out;
+}
+
+[data-row-hover] :deep(tbody > tr:not(.spacer):not(.expanded-row):not([data-state='selected']):hover > :is(th, td)),
+[data-row-hover] :deep(tbody > tr:not(.spacer):not(.expanded-row):not([data-state='selected']):focus-visible > :is(th, td)) {
+  background: var(--ui-bg-muted);
+}
+
+[data-row-hover] :deep(tbody > tr:not(.spacer):not(.expanded-row):not([data-state='selected']):hover > :is(th, td):first-child),
+[data-row-hover] :deep(tbody > tr:not(.spacer):not(.expanded-row):not([data-state='selected']):focus-visible > :is(th, td):first-child) {
+  border-start-start-radius: 0.5rem;
+  border-end-start-radius: 0.5rem;
+}
+
+[data-row-hover] :deep(tbody > tr:not(.spacer):not(.expanded-row):not([data-state='selected']):hover > :is(th, td):last-child),
+[data-row-hover] :deep(tbody > tr:not(.spacer):not(.expanded-row):not([data-state='selected']):focus-visible > :is(th, td):last-child) {
+  border-start-end-radius: 0.5rem;
+  border-end-end-radius: 0.5rem;
+}
+
+[data-row-hover] :deep(tbody > tr.spacer + tr:hover > :is(th, td)),
+[data-row-hover] :deep(tbody > tr.spacer + tr:focus-visible > :is(th, td)) {
+  background-clip: border-box;
+}
+
+/*
+ * One continuous selection band: the fill runs the whole row and only its two
+ * end cells round, so the row reads as a single shape rather than a strip of
+ * separately rounded cells. Same geometry as the hover treatment above, which
+ * is what makes hovering a selected row a no-op instead of a shape change.
+ */
+:deep(tbody > tr[data-state='selected'] > :is(th, td)) {
+  background: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-bg));
+  border-radius: 0;
+}
+
+:deep(tbody > tr[data-state='selected'] > :is(th, td):first-child) {
+  border-start-start-radius: 0.5rem;
+  border-end-start-radius: 0.5rem;
+}
+
+:deep(tbody > tr[data-state='selected'] > :is(th, td):last-child) {
+  border-start-end-radius: 0.5rem;
+  border-end-end-radius: 0.5rem;
+}
+
+:deep(table[data-size='xs'] tbody > tr:not(.spacer):not(.expanded-row) > :is(th, td)) {
+  block-size: 2.75rem;
+  padding-block: 0.25rem;
+}
+
+:deep(table[data-size='sm'] tbody > tr:not(.spacer):not(.expanded-row) > :is(th, td)),
+:deep(table[data-size='md'] tbody > tr:not(.spacer):not(.expanded-row) > :is(th, td)) {
+  block-size: 2.75rem;
+}
+
+[data-scrolled] :deep(thead) {
+  box-shadow: var(--elevation-overlay);
+}
+
+:deep(thead) {
+  transition: box-shadow 200ms ease-out;
+}
+
+/*
+ * Rows shrink on a PRECISE pointer, not on a wide screen. A tablet is both wide
+ * and touched, and in a click-through table the row is the primary target — a
+ * 40px row on a touch device is under the 44px floor.
+ */
+@media (min-width: 40rem) and (pointer: fine) {
+  :deep(table[data-size='xs'] tbody > tr:not(.spacer):not(.expanded-row) > :is(th, td)) {
+    block-size: 2rem;
+  }
+
+  :deep(table[data-size='sm'] tbody > tr:not(.spacer):not(.expanded-row) > :is(th, td)),
+  :deep(table[data-size='md'] tbody > tr:not(.spacer):not(.expanded-row) > :is(th, td)) {
+    block-size: 2.5rem;
+  }
+}
+</style>

package/app/components/data/UiTablePagination.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { UPagination } from '#components'
+
+const { total, pageSize } = defineProps<{
+  total: number
+  pageSize: number
+}>()
+
+const page = defineModel<number>('page', { required: true })
+
+// `justify-center` keeps the icon or number centred once the target outgrows its content.
+const TARGET = 'min-h-11 min-w-11 justify-center sm:min-h-8 sm:min-w-8'
+const paginationUi = {
+  first: TARGET,
+  prev: TARGET,
+  item: TARGET,
+  next: TARGET,
+  last: TARGET,
+} as const
+</script>
+
+<template>
+  <div class="flex flex-col items-stretch gap-3 pt-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+    <p class="text-center text-sm text-muted sm:text-left">
+      <slot />
+    </p>
+    <UPagination
+      v-model:page="page"
+      class="self-center sm:self-auto"
+      size="sm"
+      :items-per-page="pageSize"
+      :total="total"
+      :sibling-count="1"
+      :ui="paginationUi"
+    />
+  </div>
+</template>

package/app/components/data/UiTableShell.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { UiTableSize } from '../../shared/table'
+import { UiTableFrame } from '#components'
+
+const {
+  size = 'md',
+  rowHover = false,
+  bordered = false,
+  label,
+  loading = false,
+  tableClass,
+} = defineProps<{
+  size?: UiTableSize
+  /** Enable hover gradient on body rows. */
+  rowHover?: boolean
+  /** Wrap the table in a bordered/rounded container (use false when caller owns the chrome). */
+  bordered?: boolean
+  /** Accessible name for the table. Rendered as a visually-hidden <caption>. */
+  label: string
+  loading?: boolean
+  tableClass?: string
+}>()
+</script>
+
+<template>
+  <UiTableFrame
+    name="UiTableShell"
+    :bordered="bordered"
+    :row-hover="rowHover"
+    :scroll-label="`${label} table scroll area`"
+  >
+    <table class="w-full" :class="tableClass" :data-size="size" :aria-busy="loading || undefined">
+      <caption v-if="label" class="sr-only">
+        {{ label }}
+      </caption>
+      <thead v-if="$slots.head">
+        <tr class="h-10">
+          <slot name="head" />
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="spacer" aria-hidden="true" />
+        <slot />
+      </tbody>
+      <slot name="tfoot" />
+    </table>
+  </UiTableFrame>
+</template>

package/app/components/data/UiTableTd.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { UiTableCellProps, UiTableSize } from '../../shared/table'
+import { computed } from 'vue'
+import { uiTableCellSizeClass, uiTableVisibleFromClass } from '../../shared/table'
+
+const {
+  align = 'left',
+  size = 'md',
+  noPadding = false,
+  numeric = false,
+  rowHeader = false,
+  visibleFrom,
+} = defineProps<UiTableCellProps & {
+  size?: UiTableSize
+  noPadding?: boolean
+  rowHeader?: boolean
+}>()
+
+const resolvedAlign = computed(() => numeric ? 'right' : align)
+const textAlign = computed(() => resolvedAlign.value === 'right' ? 'text-right' : resolvedAlign.value === 'center' ? 'text-center' : 'text-left')
+const padClass = computed(() => noPadding ? '' : 'px-3')
+</script>
+
+<template>
+  <component
+    :is="rowHeader ? 'th' : 'td'"
+    :scope="rowHeader ? 'row' : undefined"
+    class="text-xs font-normal text-default relative"
+    :class="[
+      uiTableCellSizeClass[size],
+      padClass,
+      textAlign,
+      numeric ? 'tabular-nums' : '',
+      visibleFrom ? uiTableVisibleFromClass[visibleFrom] : '',
+    ]"
+  >
+    <slot />
+  </component>
+</template>

package/app/components/data/UiTableTh.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { UiTableCellProps } from '../../shared/table'
+import { computed } from 'vue'
+import { UiIcon } from '#components'
+import { uiTableVisibleFromClass } from '../../shared/table'
+
+const {
+  align = 'left',
+  sortable = false,
+  noPadding = false,
+  numeric = false,
+  sortDirection = false,
+  ariaLabel,
+  visibleFrom,
+} = defineProps<UiTableCellProps & {
+  sortable?: boolean
+  noPadding?: boolean
+  sortDirection?: 'asc' | 'desc' | false
+  ariaLabel?: string
+}>()
+
+const emit = defineEmits<{ sort: [event: MouseEvent] }>()
+
+const resolvedAlign = computed(() => numeric ? 'right' : align)
+const justify = computed(() => resolvedAlign.value === 'right' ? 'justify-end' : resolvedAlign.value === 'center' ? 'justify-center' : 'justify-start')
+// Vertical padding lives here, not on the consumer's <tr>. UiTable sets `h-10`
+// on its own header row, but this primitive exists for hand-rolled tables where
+// there is no such row — without `py-*` a 10px label's line box is the entire
+// header height and the text sits jammed against the bottom border.
+//
+// A sortable header moves its padding onto the inner button so the whole cell
+// is the click target. The button carries the same `px-3` as UiTableTd, or a
+// sortable numeric header sits 4px inboard of its own column's digits.
+const padClass = computed(() => noPadding || sortable ? '' : 'px-3 py-2.5')
+const sortIcon = computed(() => sortDirection ? 'collapse' : 'sort')
+const sortIconClass = computed(() => sortDirection === 'desc' ? 'rotate-180' : '')
+</script>
+
+<template>
+  <th
+    scope="col"
+    class="text-label text-left whitespace-nowrap border-b border-default bg-default"
+    :class="[padClass, numeric ? 'text-right tabular-nums' : '', visibleFrom ? uiTableVisibleFromClass[visibleFrom] : '']"
+    :aria-sort="sortable ? sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none' : undefined"
+  >
+    <button
+      v-if="sortable"
+      type="button"
+      class="flex min-h-11 w-full items-center gap-1 rounded px-3 py-2.5 text-label text-muted transition-colors hover:text-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sm:min-h-0"
+      :class="justify"
+      :aria-label="ariaLabel"
+      @click="emit('sort', $event)"
+    >
+      <slot />
+      <UiIcon :name="sortIcon" class="size-3 text-dimmed transition-transform duration-150" :class="sortIconClass" aria-hidden="true" />
+    </button>
+    <div v-else class="flex items-center gap-1" :class="justify">
+      <slot />
+    </div>
+  </th>
+</template>