@michaelthielemann/kestrel 4.1.2 → 5.0.0

package/layers/ui/app/components/ui/DatePicker.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import UiIcon from './Icon.vue'
-import {
-  DatePickerRoot, DatePickerField, DatePickerInput, DatePickerTrigger,
-  DatePickerContent, DatePickerArrow, DatePickerCalendar,
-  DatePickerHeader, DatePickerPrev, DatePickerHeading, DatePickerNext,
-  DatePickerGrid, DatePickerGridHead, DatePickerGridBody, DatePickerGridRow,
-  DatePickerHeadCell, DatePickerCell, DatePickerCellTrigger,
-} from 'reka-ui'
-import type { DateValue } from '@internationalized/date'
-import { isoToDate, dateToIso, type IsoPrecision } from '../../utils/iso-date'
-
-const { t } = useT()
-
-const props = withDefaults(
-  defineProps<{
-    precision?: IsoPrecision
-    disabled?: boolean
-    locale?: string
-    // a11y: the segmented control has no single labelable <input>, so the field name is carried as an
-    // aria-label on the role=group field, with the error/hint + invalid/required state wired alongside.
-    ariaLabel?: string
-    describedby?: string
-    invalid?: boolean
-    required?: boolean
-  }>(),
-  { precision: 'datetime', disabled: false },
-)
-const model = defineModel<string | null>()
-
-// Match the native inputs, which format to the browser locale. Overridable for a future admin-locale setting.
-const displayLocale = computed(() => props.locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en'))
-const granularity = computed(() => (props.precision === 'date' ? 'day' : 'minute'))
-const value = computed<DateValue | undefined>({
-  get: () => isoToDate(model.value, props.precision),
-  set: (v) => { model.value = dateToIso(v) },
-})
-</script>
-
-<template>
-  <DatePickerRoot v-model="value" :granularity="granularity" :disabled="disabled" :locale="displayLocale">
-    <DatePickerField
-      v-slot="{ segments }"
-      class="ui-datepicker__field"
-      role="group"
-      :aria-label="ariaLabel"
-      :aria-describedby="describedby"
-      :aria-invalid="invalid || undefined"
-      :aria-required="required || undefined"
-    >
-      <DatePickerInput
-        v-for="item in segments"
-        :key="item.part"
-        :part="item.part"
-        class="ui-datepicker__segment"
-      >{{ item.value }}</DatePickerInput>
-      <DatePickerTrigger class="ui-datepicker__trigger" :aria-label="t('datePicker.openCalendar')"><UiIcon name="calendar" :size="16" /></DatePickerTrigger>
-    </DatePickerField>
-
-    <DatePickerContent class="ui-datepicker__content" :side-offset="6">
-      <DatePickerArrow class="ui-datepicker__arrow" />
-      <DatePickerCalendar v-slot="{ weekDays, grid }" class="ui-datepicker__calendar">
-        <DatePickerHeader class="ui-datepicker__header">
-          <DatePickerPrev class="ui-datepicker__nav" :aria-label="t('datePicker.previousMonth')">‹</DatePickerPrev>
-          <DatePickerHeading class="ui-datepicker__heading" />
-          <DatePickerNext class="ui-datepicker__nav" :aria-label="t('datePicker.nextMonth')">›</DatePickerNext>
-        </DatePickerHeader>
-        <DatePickerGrid v-for="month in grid" :key="month.value.toString()" class="ui-datepicker__grid">
-          <DatePickerGridHead>
-            <DatePickerGridRow class="ui-datepicker__row">
-              <DatePickerHeadCell v-for="day in weekDays" :key="day" class="ui-datepicker__weekday">{{ day }}</DatePickerHeadCell>
-            </DatePickerGridRow>
-          </DatePickerGridHead>
-          <DatePickerGridBody>
-            <DatePickerGridRow v-for="(weekDates, i) in month.rows" :key="`w${i}`" class="ui-datepicker__row">
-              <DatePickerCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
-                <DatePickerCellTrigger :day="weekDate" :month="month.value" class="ui-datepicker__cell" />
-              </DatePickerCell>
-            </DatePickerGridRow>
-          </DatePickerGridBody>
-        </DatePickerGrid>
-      </DatePickerCalendar>
-    </DatePickerContent>
-  </DatePickerRoot>
-</template>
-
-<style lang="scss">
-// Shared, global (non-scoped) datepicker chrome — the calendar is teleported to <body>.
-@use '../../assets/scss/datepicker';
-@include datepicker.ui-datepicker;
-</style>

package/layers/ui/app/components/ui/DateRangePicker.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import UiIcon from './Icon.vue'
-import {
-  DateRangePickerRoot, DateRangePickerField, DateRangePickerInput, DateRangePickerTrigger,
-  DateRangePickerContent, DateRangePickerArrow, DateRangePickerCalendar,
-  DateRangePickerHeader, DateRangePickerPrev, DateRangePickerHeading, DateRangePickerNext,
-  DateRangePickerGrid, DateRangePickerGridHead, DateRangePickerGridBody, DateRangePickerGridRow,
-  DateRangePickerHeadCell, DateRangePickerCell, DateRangePickerCellTrigger,
-} from 'reka-ui'
-import type { DateValue } from '@internationalized/date'
-import { isoToDate, dateToIso, type IsoPrecision } from '../../utils/iso-date'
-
-const { t } = useT()
-const props = withDefaults(
-  defineProps<{
-    precision?: IsoPrecision
-    disabled?: boolean
-    locale?: string
-    // a11y: see DatePicker — the field name rides as an aria-label on the role=group field.
-    ariaLabel?: string
-    describedby?: string
-    invalid?: boolean
-    required?: boolean
-  }>(),
-  { precision: 'datetime', disabled: false },
-)
-const model = defineModel<{ start: string; end: string } | null>()
-
-const displayLocale = computed(() => props.locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en'))
-const granularity = computed(() => (props.precision === 'date' ? 'day' : 'minute'))
-const value = computed<{ start: DateValue | undefined; end: DateValue | undefined }>({
-  get: () => ({
-    start: isoToDate(model.value?.start, props.precision),
-    end: isoToDate(model.value?.end, props.precision),
-  }),
-  set: (v) => {
-    const start = dateToIso(v.start)
-    const end = dateToIso(v.end)
-    // Preserve a partial selection (Reka commits start before end) as empty strings.
-    model.value = start || end ? { start: start ?? '', end: end ?? '' } : null
-  },
-})
-</script>
-
-<template>
-  <DateRangePickerRoot v-model="value" :granularity="granularity" :disabled="disabled" :locale="displayLocale">
-    <DateRangePickerField
-      v-slot="{ segments }"
-      class="ui-datepicker__field"
-      role="group"
-      :aria-label="ariaLabel"
-      :aria-describedby="describedby"
-      :aria-invalid="invalid || undefined"
-      :aria-required="required || undefined"
-    >
-      <template v-for="item in segments.start" :key="`s-${item.part}`">
-        <DateRangePickerInput :part="item.part" type="start" class="ui-datepicker__segment">{{ item.value }}</DateRangePickerInput>
-      </template>
-      <span class="ui-datepicker__sep" aria-hidden="true">–</span>
-      <template v-for="item in segments.end" :key="`e-${item.part}`">
-        <DateRangePickerInput :part="item.part" type="end" class="ui-datepicker__segment">{{ item.value }}</DateRangePickerInput>
-      </template>
-      <DateRangePickerTrigger class="ui-datepicker__trigger" :aria-label="t('dateRange.openCalendar')"><UiIcon name="calendar" :size="16" /></DateRangePickerTrigger>
-    </DateRangePickerField>
-
-    <DateRangePickerContent class="ui-datepicker__content" :side-offset="6">
-      <DateRangePickerArrow class="ui-datepicker__arrow" />
-      <DateRangePickerCalendar v-slot="{ weekDays, grid }" class="ui-datepicker__calendar">
-        <DateRangePickerHeader class="ui-datepicker__header">
-          <DateRangePickerPrev class="ui-datepicker__nav" :aria-label="t('dateRange.previousMonth')">‹</DateRangePickerPrev>
-          <DateRangePickerHeading class="ui-datepicker__heading" />
-          <DateRangePickerNext class="ui-datepicker__nav" :aria-label="t('dateRange.nextMonth')">›</DateRangePickerNext>
-        </DateRangePickerHeader>
-        <DateRangePickerGrid v-for="month in grid" :key="month.value.toString()" class="ui-datepicker__grid">
-          <DateRangePickerGridHead>
-            <DateRangePickerGridRow class="ui-datepicker__row">
-              <DateRangePickerHeadCell v-for="day in weekDays" :key="day" class="ui-datepicker__weekday">{{ day }}</DateRangePickerHeadCell>
-            </DateRangePickerGridRow>
-          </DateRangePickerGridHead>
-          <DateRangePickerGridBody>
-            <DateRangePickerGridRow v-for="(weekDates, i) in month.rows" :key="`w${i}`" class="ui-datepicker__row">
-              <DateRangePickerCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
-                <DateRangePickerCellTrigger :day="weekDate" :month="month.value" class="ui-datepicker__cell" />
-              </DateRangePickerCell>
-            </DateRangePickerGridRow>
-          </DateRangePickerGridBody>
-        </DateRangePickerGrid>
-      </DateRangePickerCalendar>
-    </DateRangePickerContent>
-  </DateRangePickerRoot>
-</template>
-
-<style lang="scss">
-// Shares the global (non-scoped) datepicker chrome — the calendar is teleported to <body>, so a
-// `scoped` block would silently drop these styles. Included explicitly rather than borrowing them
-// from DatePicker being present on the page.
-@use '../../assets/scss/datepicker';
-@include datepicker.ui-datepicker;
-</style>

package/layers/ui/app/components/ui/Dialog.vue

@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { DialogRoot, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from 'reka-ui'
-import UiIcon from './Icon.vue'
-
-const props = defineProps<{ open: boolean; title: string; description?: string; size?: 'md' | 'lg' | 'xl' }>()
-const emit = defineEmits<{ 'update:open': [boolean] }>()
-const { t } = useT()
-
-// Rendering in place means dialog inputs are form-associated with any ancestor form (the record
-// editor): Enter in a text-entry input would implicitly submit it — saving the half-edited record
-// from inside a picker. Swallow that default here; Enter on buttons (and click-like inputs) keeps
-// its activation behavior, and a dialog can still opt into Enter via its own @keydown.enter handler.
-const CLICK_INPUT_TYPES = new Set(['button', 'submit', 'reset', 'checkbox', 'radio', 'file'])
-function onKeydown(e: KeyboardEvent) {
-  if (e.key !== 'Enter' || e.isComposing) return
-  const el = e.target
-  if (el instanceof HTMLInputElement && !CLICK_INPUT_TYPES.has(el.type)) e.preventDefault()
-}
-</script>
-
-<template>
-  <!-- Reka Dialog, rendered IN PLACE (no DialogPortal). Reka provides the focus trap, scroll lock,
-       Escape/outside-click dismissal, ARIA wiring and focus restore; rendering in place (rather than
-       teleporting) keeps the dialog synchronously DOM-testable and needs no force-mount hack. The
-       admin's flat layouts don't need a portal to escape clipping — add DialogPortal here if that
-       ever changes. -->
-  <DialogRoot :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogOverlay class="ui-dialog__overlay" />
-    <DialogContent
-      class="ui-dialog__content"
-      :class="`ui-dialog__content--${size ?? 'md'}`"
-      v-bind="description ? {} : { 'aria-describedby': undefined }"
-      @keydown="onKeydown"
-    >
-      <header class="ui-dialog__header">
-        <DialogTitle class="ui-dialog__title">{{ title }}</DialogTitle>
-        <DialogClose data-test="dialog-close" class="ui-dialog__close" :aria-label="t('common.close')"><UiIcon name="x" :size="16" /></DialogClose>
-      </header>
-      <DialogDescription v-if="description" class="ui-dialog__desc">{{ description }}</DialogDescription>
-      <div class="ui-dialog__body"><slot /></div>
-      <footer v-if="$slots.footer" class="ui-dialog__footer"><slot name="footer" /></footer>
-    </DialogContent>
-  </DialogRoot>
-</template>
-
-<style lang="scss" scoped>
-.ui-dialog__overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-dialog);
-  background: var(--color-scrim);
-}
-.ui-dialog__content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: var(--z-dialog);
-  max-height: calc(100svh - var(--space-6));
-  overflow: auto;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  padding: var(--space-4);
-
-  &:focus,
-  &:focus-visible { outline: none; }
-}
-.ui-dialog__content--md { width: min(32rem, calc(100vw - 2rem)); }
-.ui-dialog__content--lg { width: min(64rem, calc(100vw - 2rem)); }
-.ui-dialog__content--xl { width: min(80rem, calc(100vw - 2rem)); }
-.ui-dialog__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  margin-bottom: var(--space-3);
-}
-.ui-dialog__title {
-  font-size: var(--text-lg);
-  font-weight: var(--weight-bold);
-  margin: 0;
-}
-.ui-dialog__desc {
-  margin: 0 0 var(--space-3);
-  color: var(--color-text-muted);
-}
-.ui-dialog__close {
-  background: none;
-  border: 0;
-  font-size: var(--text-xl);
-  line-height: 1;
-  cursor: pointer;
-  color: var(--color-text-muted);
-  border-radius: var(--radius-sm);
-
-  &:hover { background: var(--color-hover); color: var(--color-text); }
-  &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
-}
-.ui-dialog__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-2);
-  margin-top: var(--space-4);
-}
-</style>

package/layers/ui/app/components/ui/EmptyState.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import type { IconName } from '../../utils/icons'
-
-defineProps<{ icon?: IconName; title: string; description?: string }>()
-</script>
-
-<template>
-  <div class="ui-empty">
-    <KestrelUiIcon v-if="icon" :name="icon" size="1.5rem" class="ui-empty__icon" />
-    <p class="ui-empty__title">{{ title }}</p>
-    <p v-if="description" class="ui-empty__desc">{{ description }}</p>
-    <div v-if="$slots.action" class="ui-empty__action"><slot name="action" /></div>
-  </div>
-</template>
-
-<style lang="scss">
-.ui-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  padding: var(--space-6) var(--space-4);
-  text-align: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface);
-
-  &__icon {
-    margin-bottom: var(--space-1);
-    color: var(--color-text-subtle);
-  }
-  &__title {
-    font-weight: var(--weight-medium);
-    color: var(--color-text);
-  }
-  &__desc {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-    max-width: 40ch;
-  }
-  &__action {
-    margin-top: var(--space-2);
-  }
-}
-</style>

package/layers/ui/app/components/ui/Field.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useFieldA11y } from '../../utils/useFieldA11y'
-
-const props = defineProps<{
-  label?: string
-  hint?: string
-  error?: string | null
-  required?: boolean
-  id?: string
-}>()
-
-const { fieldId, hintId, errId, describedby, ariaInvalid } = useFieldA11y(props)
-
-const slotProps = computed(() => ({
-  id: fieldId.value,
-  'aria-invalid': ariaInvalid.value,
-  'aria-describedby': describedby.value,
-  required: props.required,
-}))
-</script>
-
-<template>
-  <div class="ui-field" :data-invalid="error ? 'true' : undefined">
-    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -- the matching control is the default slot's content, invisible to static analysis across the slot boundary -->
-    <label v-if="label" :for="fieldId" class="ui-field__label">
-      {{ label }}<span v-if="required" class="ui-field__required" aria-hidden="true">*</span>
-    </label>
-    <slot v-bind="slotProps" />
-    <p v-if="hint" :id="hintId" class="ui-field__hint">{{ hint }}</p>
-    <p v-if="error" :id="errId" class="ui-field__error" role="alert">{{ error }}</p>
-  </div>
-</template>
-
-<style lang="scss">
-.ui-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-
-  &__label {
-    font-size: var(--text-sm);
-    font-weight: var(--weight-medium);
-  }
-  &__required {
-    color: var(--color-danger);
-    margin-inline-start: var(--space-1);
-  }
-  &__hint {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-  }
-  &__error {
-    font-size: var(--text-sm);
-    color: var(--color-danger);
-  }
-}
-</style>

package/layers/ui/app/components/ui/Fieldset.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useFieldA11y } from '../../utils/useFieldA11y'
-
-const props = defineProps<{
-  label?: string
-  hint?: string
-  error?: string | null
-  required?: boolean
-  id?: string
-}>()
-
-// No `fieldId`: a group has no single control to point a label `for` at (see below).
-const { hintId, errId, describedby, ariaInvalid, ariaRequired } = useFieldA11y(props)
-
-// No `id` — a group has no single control to point a label `for` at; the
-// <legend> labels the group natively. Consumers spread these onto the group root.
-const slotProps = computed(() => ({
-  'aria-invalid': ariaInvalid.value,
-  'aria-describedby': describedby.value,
-  'aria-required': ariaRequired.value,
-  required: props.required,
-}))
-</script>
-
-<template>
-  <fieldset class="ui-fieldset" :data-invalid="error ? 'true' : undefined">
-    <legend v-if="label" class="ui-fieldset__legend">
-      {{ label }}<span v-if="required" class="ui-fieldset__required" aria-hidden="true">*</span>
-    </legend>
-    <slot v-bind="slotProps" />
-    <p v-if="hint" :id="hintId" class="ui-fieldset__hint">{{ hint }}</p>
-    <p v-if="error" :id="errId" class="ui-fieldset__error" role="alert">{{ error }}</p>
-  </fieldset>
-</template>
-
-<style lang="scss">
-.ui-fieldset {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  min-inline-size: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-
-  &__legend {
-    padding: 0;
-    font-size: var(--text-sm);
-    font-weight: var(--weight-medium);
-  }
-  &__required {
-    color: var(--color-danger);
-    margin-inline-start: var(--space-1);
-  }
-  &__hint {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-  }
-  &__error {
-    font-size: var(--text-sm);
-    color: var(--color-danger);
-  }
-}
-</style>

package/layers/ui/app/components/ui/Icon.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { computed, useAttrs } from 'vue'
-import { isIconName, resolveIconBody, type IconSpec } from '../../utils/icons'
-
-const props = withDefaults(defineProps<{ name: IconSpec; size?: string | number; label?: string }>(), { size: '1em' })
-const attrs = useAttrs()
-
-const dim = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size))
-const body = computed(() => resolveIconBody(props.name))
-// `data-icon` exposes the resolved registry key (or `custom` for raw SVG) for styling/tests.
-const dataIcon = computed(() => (isIconName(props.name) ? props.name : 'custom'))
-// A caller can give the icon an accessible name via fallthrough attrs (role/aria-label) instead of the
-// `label` prop — either way it must not stay `aria-hidden`, or the name is invisible to AT.
-const hasA11yName = computed(() => props.label != null || attrs.role != null || attrs['aria-label'] != null || attrs['aria-labelledby'] != null)
-</script>
-
-<template>
-  <!-- v-html body is either a static registry icon or developer-supplied SVG allowlist-sanitised by
-       resolveIconBody → sanitizeIconSvg (no script-capable elements/attributes survive). -->
-  <!-- eslint-disable-next-line vue/no-v-html -- sanitized via resolveIconBody -> sanitizeIconSvg (allowlist-only tags/attrs) -->
-  <svg v-html="body"
-    class="ui-icon"
-    :data-icon="dataIcon"
-    :width="dim"
-    :height="dim"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    :role="label ? 'img' : undefined"
-    :aria-label="label || undefined"
-    :aria-hidden="hasA11yName ? undefined : 'true'"
-  />
-</template>
-
-<style lang="scss">
-.ui-icon {
-  display: inline-block;
-  vertical-align: middle;
-  flex-shrink: 0;
-}
-</style>

package/layers/ui/app/components/ui/Menu.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal, ContextMenuContent, ContextMenuItem } from 'reka-ui'
-
-export interface MenuItem { label: string; value: string; danger?: boolean; disabled?: boolean }
-defineProps<{ items: MenuItem[] }>()
-const emit = defineEmits<{ select: [string] }>()
-</script>
-
-<template>
-  <ContextMenuRoot>
-    <ContextMenuTrigger as-child>
-      <slot />
-    </ContextMenuTrigger>
-    <ContextMenuPortal>
-      <ContextMenuContent class="ui-menu" :collision-padding="8">
-        <ContextMenuItem
-          v-for="it in items"
-          :key="it.value"
-          :disabled="it.disabled"
-          class="ui-menu__item"
-          :class="{ 'ui-menu__item--danger': it.danger }"
-          @select="emit('select', it.value)"
-        >{{ it.label }}</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenuPortal>
-  </ContextMenuRoot>
-</template>
-
-<style lang="scss">
-// Not scoped: Reka teleports the menu content to <body>, where a scoped data-v selector would no
-// longer match — so the surface background/border silently dropped out (Image: a backgroundless,
-// hard-to-read context menu). The other portaled overlays (Combobox/DatePicker/Select) are global too.
-.ui-menu {
-  min-width: 11rem;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-1);
-  z-index: var(--z-dropdown);
-}
-.ui-menu__item {
-  display: block;
-  width: 100%;
-  padding: var(--space-1) var(--space-3);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-sm);
-  cursor: pointer;
-  user-select: none;
-  &[data-highlighted] { background: var(--color-hover); outline: none; }
-  &[data-disabled] { color: var(--color-text-muted); cursor: default; }
-  &--danger { color: var(--color-danger); }
-}
-</style>