@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/switch/Switch.vue

@@ -0,0 +1,52 @@
+<!--
+  A switch: a native checkbox with role="switch", drawn as a pill track with a round thumb, inside
+  a `label.rkui-check`. The slot is the label text. `class` and `style` go on the label; other
+  attributes (name, disabled, ...) go on the input. In a `.vue` file, `v-model` is whether it is
+  on. With `v-model`, the parent's value is the starting value; `checked` applies only without
+  one.
+
+  @example
+  <Switch name="wifi" checked>Wi-Fi</Switch>
+  <Switch v-model="wifi">Wi-Fi</Switch>
+-->
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { vLiveChecked } from '../../shared/live-value'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** Starts on; off when left out. */
+  checked?: boolean
+}
+
+const { checked } = defineProps<Props>()
+
+/**
+ * Whether it is on (`v-model`); `checked` when left out.
+ */
+// The undefined default stops Vue reading a missing model as false.
+const model = defineModel<boolean | undefined>({ default: undefined })
+if (model.value === undefined) model.value = checked
+const attrs = useAttrs()
+
+/** The page's attributes: `class` and `style` for the label (`outer`), the rest for the input. */
+function pageAttrs() {
+  return splitAttrs(attrs)
+}
+</script>
+
+<template>
+  <label class="rkui-check" v-bind="pageAttrs().outer">
+    <input
+      v-live-checked
+      v-model="model"
+      class="rkui-switch"
+      type="checkbox"
+      role="switch"
+      v-bind="pageAttrs().inner"
+    />
+    <slot />
+  </label>
+</template>

package/src/components/switch/switch.css

@@ -0,0 +1,73 @@
+/* Switch: a native checkbox with role="switch", drawn as a pill track with a round thumb.
+   On, the track fills with --rkui-selected; in error (aria-invalid="true") it fills with
+   --rkui-coral-solid, on or off, and the thumb is --rkui-on-coral, as checkboxes and radios do.
+   Wrap it in a label.rkui-check. */
+
+.rkui-switch {
+  --rkui-switch-width: 2.75rem;
+  --rkui-thumb-size: 1rem;
+  --rkui-thumb-gap: 0.1875rem;
+  --rkui-thumb-travel: calc(
+    var(--rkui-switch-width) - 2 * var(--rkui-outline-width) - var(--rkui-thumb-size) - 2 *
+      var(--rkui-thumb-gap)
+  );
+
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  inline-size: var(--rkui-switch-width);
+  block-size: calc(
+    var(--rkui-thumb-size) + 2 * var(--rkui-thumb-gap) + 2 * var(--rkui-outline-width)
+  );
+  margin: 0;
+  padding-inline: var(--rkui-thumb-gap);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-raised);
+  cursor: pointer;
+}
+
+.rkui-switch::before {
+  content: '';
+  inline-size: var(--rkui-thumb-size);
+  block-size: var(--rkui-thumb-size);
+  border-radius: 50%;
+  background: var(--rkui-fg);
+  transition: translate var(--rkui-duration-spring) ease;
+}
+
+.rkui-switch:checked {
+  border-color: var(--rkui-line);
+  background: var(--rkui-selected);
+}
+
+.rkui-switch:checked::before {
+  background: var(--rkui-on-selected);
+  translate: var(--rkui-thumb-travel) 0;
+}
+
+.rkui-switch[aria-invalid='true'] {
+  border-color: var(--rkui-coral-deep);
+  background: var(--rkui-coral-solid);
+}
+
+.rkui-switch[aria-invalid='true']::before {
+  background: var(--rkui-on-coral);
+}
+
+/* Forced colours drop the fills, so the thumb and the on track use system colours. */
+@media (forced-colors: active) {
+  .rkui-switch::before {
+    background: CanvasText;
+  }
+
+  .rkui-switch:checked {
+    border-color: Highlight;
+    background: Highlight;
+  }
+
+  .rkui-switch:checked::before {
+    background: HighlightText;
+  }
+}

package/src/components/table/Table.vue

@@ -0,0 +1,142 @@
+<!--
+  A data table on a toon sheet, with a caption above it. The slot holds the page's own `<thead>`,
+  `<tbody>`, rows and cells, so a cell can hold anything. The table scrolls sideways inside the
+  sheet when it is too wide, with the Scroll region's edge dots, or with `bar` a scrollbar that
+  stays in view. Needs no JavaScript. `class` and `style` go on the outer `<div>`, the sheet; other
+  attributes go on the `<table>`.
+
+  The header row and the first column stay in view while the table scrolls inside the sheet: the
+  first column whenever the table is wider than the sheet, and the header row once the sheet has a
+  height, e.g. `style="max-block-size: 24rem"`. Give each header cell `scope="col"` or
+  `scope="row"`. A `Badge` in a cell sits on it like a sticker.
+
+  The first time the sheet is seen, it plays a short entrance: the band fills, the rules draw
+  across, the values are written in and the stickers stamp down. How much of it a page gets
+  depends on what it loads:
+  - full entrance: `head-scripts/table-init.js` inlined in `<head>` beside `theme-init.js`, plus
+    `table-enhance.js` (in `rkui.js`). A table in view on load plays it too.
+  - scroll-in only: `table-enhance.js` alone. A table scrolled to plays it; one already in view
+    on load only draws its rules, since it may have shown its values already.
+  - no motion: neither script, or `still` on a table. Under reduced motion there is none either,
+    and a printed page shows every table in full.
+  A table added after the page loads plays it when it is scrolled to; one in view when it is
+  added only draws its rules, unless table-init.js's mark is still on, as in a Vue app's first
+  render.
+
+  A plain HTML page writes the HTML tab's markup. `<table class="rkui-table">` alone is the same
+  sheet without the scrolling.
+
+  @example
+  <Table caption="Runs" hue="teal">
+    <thead><tr><th scope="col">Run</th><th scope="col">σ</th></tr></thead>
+    <tbody><tr><th scope="row">a</th><td>10</td></tr></tbody>
+  </Table>
+-->
+<script setup lang="ts">
+import { computed, useAttrs, useSlots } from 'vue'
+import Scroll from '../overflow/Scroll.vue'
+import { useComponentId } from '../../shared/component-id'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+import { unwrappedSlot } from '../../shared/slot-html'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The table's caption, which also names its scroll region. */
+  caption: string
+  /**
+   * The header band's fill in the sheet, a hue or a hex code. When left out, the page's section
+   * hue (`--rkui-section`); with none, ink in light mode, and the sheet's colour with a line under
+   * it in dark mode.
+   */
+  hue?: HueOrHex
+  /**
+   * The look: 'ledger', a ruled notebook page; 'sheet' when left out, a raised panel with a header
+   * band. Open, see DECISIONS ("Table").
+   */
+  variant?: 'sheet' | 'ledger'
+  /** The compact density; the normal one when left out. */
+  small?: boolean
+  /**
+   * Tilts the stickers (badges in cells) slightly, every other one the other way; straight when
+   * left out.
+   */
+  messy?: boolean
+  /** No entrance: the table just shows, with or without JavaScript; it plays one when left out. */
+  still?: boolean
+  /** A row pops up out of the sheet while hovered; rows stay flat when left out. */
+  lift?: boolean
+  /**
+   * Keeps the scrollbar of a table too wide for the sheet visible, with no dots, as Scroll's `bar`
+   * does; dots and a hover scrollbar when left out.
+   */
+  bar?: boolean
+  /**
+   * The look of the dots at the edges of a table too wide for the sheet, written as
+   * `data-rkui-dots` on the outer `<div>`: 'plain', or 'pill' for dots in a raised pill; the page's
+   * setting when left out.
+   */
+  dots?: 'plain' | 'pill'
+}
+
+const {
+  caption,
+  hue,
+  variant = 'sheet',
+  small,
+  messy,
+  still,
+  lift,
+  bar,
+  dots,
+} = defineProps<Props>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+/** The caption's id, which names the scroll region. */
+const captionId = `${useComponentId('table')}-caption`
+
+/** The header band's colours. The band carries small text, so coral takes `--rkui-coral-solid`. */
+const vars = computed(() =>
+  hueVars(hue, { fill: '--rkui-table-hue', text: '--rkui-table-on-hue', solid: true }),
+)
+
+/**
+ * The page's attributes: `class` and `style` for the outer div (`outer`), the rest for the
+ * `<table>`.
+ */
+function pageAttrs() {
+  return splitAttrs(attrs)
+}
+
+/** The page's rows and cells, written straight into the `<table>`, which allows no wrapper. */
+const Rows = () => unwrappedSlot(slots.default?.() ?? [])
+</script>
+
+<template>
+  <div
+    :class="[
+      'rkui-table',
+      {
+        'rkui-table--ledger': variant === 'ledger',
+        'rkui-table--small': small,
+        'rkui-table--messy': messy,
+        'rkui-table--still': still,
+        'rkui-table--lift': lift,
+      },
+    ]"
+    :style="vars"
+    :data-rkui-dots="dots"
+    v-bind="pageAttrs().outer"
+  >
+    <Scroll :labelledby="captionId" :bar="bar">
+      <table v-bind="pageAttrs().inner">
+        <caption :id="captionId">
+          <span>{{ caption }}</span>
+        </caption>
+        <Rows />
+      </table>
+    </Scroll>
+  </div>
+</template>

package/src/components/table/table-enhance.js

@@ -0,0 +1,58 @@
+// Plays each table's entrance once, the first time the table is seen (table.css): a table out of
+// view is marked "waiting", and when it comes into view "arrived". A table already in view when
+// the page loads is "arrived" too if the page carries table-init.js's mark, which kept its values
+// hidden; without the mark it may have shown them already, so it is "on-load" and only draws its
+// rules. The mark comes off once the first tables have their state, or after table-init.js's
+// timeout. Tables added later are handled the same way, so a Vue app's tables, drawn while the
+// mark is still on, play in full. It also gives each header cell its share of the band, which the
+// band's fill needs. Under reduced motion it does nothing, and everything just shows. A still
+// table (.rkui-table--still) is left alone. It comes in rkui.js.
+import { eachElement } from '../../shared/each-element.js'
+
+/**
+ * Sets each header cell's start and end, as fractions of the band's width.
+ * @param {Element} table
+ */
+function measureBand(table) {
+  /** @type {HTMLElement[]} */
+  const cells = [...table.querySelectorAll('thead tr:first-child > th')]
+  if (cells.length === 0) return
+  const start = cells[0].offsetLeft
+  const width = cells.at(-1).offsetLeft + cells.at(-1).offsetWidth - start
+  for (const cell of cells) {
+    cell.style.setProperty('--rkui-table-band-start', String((cell.offsetLeft - start) / width))
+    cell.style.setProperty(
+      '--rkui-table-band-end',
+      String((cell.offsetLeft + cell.offsetWidth - start) / width),
+    )
+  }
+}
+
+if (matchMedia('(prefers-reduced-motion: no-preference)').matches) {
+  const root = document.documentElement
+  // A table counts as seen once it is a tenth of the window's height above the bottom edge, so
+  // one barely in view doesn't play its entrance mostly out of sight.
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const { target, isIntersecting } of entries) {
+        const table = /** @type {HTMLElement} */ (target)
+        if (!isIntersecting) {
+          table.dataset.rkuiEntrance = 'waiting'
+          continue
+        }
+        if (table.dataset.rkuiEntrance === 'waiting' || root.dataset.rkuiTables === 'pending') {
+          measureBand(table)
+          table.dataset.rkuiEntrance = 'arrived'
+        } else {
+          table.dataset.rkuiEntrance = 'on-load'
+        }
+        observer.unobserve(table)
+      }
+      delete root.dataset.rkuiTables
+    },
+    { rootMargin: '0px 0px -10% 0px' },
+  )
+  eachElement('.rkui-table:not(.rkui-table--still)', 'data-rkui-table-watched', (table) =>
+    observer.observe(table),
+  )
+}