@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.20

package/src/components/internal/DatePickerDateInternal.vue

@@ -42,7 +42,6 @@ const {
   weekDays,
   monthYear,
   calendarDays,
-  isDateDisabled,
   formatDateValue,
   setCurrentMonthFromDate,
   prevMonth,
@@ -58,14 +57,7 @@ const selectedDate = computed(() => {
   return isNaN(date.getTime()) ? null : date
 })
 
-const displayValue = computed(() => {
-  if (!selectedDate.value) return ''
-  return selectedDate.value.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
-})
+const displayValue = computed(() => (selectedDate.value ? formatDateValue(selectedDate.value) : ''))
 
 function selectDate(day: CalendarGridDay) {
   if (day.isDisabled || props.disabled) return
@@ -73,15 +65,6 @@ function selectDate(day: CalendarGridDay) {
   close()
 }
 
-function goToToday() {
-  const today = new Date()
-  setCurrentMonthFromDate(today)
-  if (!isDateDisabled(today)) {
-    emit('update:modelValue', formatDateValue(today))
-    close()
-  }
-}
-
 function clear() {
   emit('update:modelValue', undefined)
   close()
@@ -167,6 +150,11 @@ onBeforeUnmount(stopPositioning)
 <template>
   <div ref="container" class="mint-date-picker">
     <div class="mint-date-picker__input-wrapper">
+      <div class="mint-date-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+        </svg>
+      </div>
       <input
         ref="triggerRef"
         type="text"
@@ -185,11 +173,17 @@ onBeforeUnmount(stopPositioning)
         @click="toggleCalendar"
         @keydown="handleTriggerKeydown"
       />
-      <div class="mint-date-picker__icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+      <button
+        v-if="clearable && modelValue && !disabled"
+        type="button"
+        class="mint-date-picker__clear-btn"
+        aria-label="Clear date"
+        @click.stop="clear"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
-      </div>
+      </button>
     </div>
 
     <Teleport to="body">
@@ -218,24 +212,6 @@ onBeforeUnmount(stopPositioning)
             @next-month="nextMonth"
             @select="selectDate"
           />
-
-          <div class="mint-date-picker__footer">
-            <button
-              type="button"
-              class="mint-date-picker__footer-btn mint-date-picker__today-btn"
-              @click="goToToday"
-            >
-              Today
-            </button>
-            <button
-              v-if="clearable && modelValue"
-              type="button"
-              class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
-              @click="clear"
-            >
-              Clear
-            </button>
-          </div>
         </div>
       </Transition>
     </Teleport>

package/src/components/internal/DatePickerDateTimeInternal.vue

@@ -76,17 +76,12 @@ const selectedTimeStr = computed(() => {
 
 const displayValue = computed(() => {
   if (!selectedDate.value) return ''
-  const dateStr = selectedDate.value.toLocaleDateString(props.locale, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
   const timeStr = formatTime(
     selectedDate.value.getHours(),
     selectedDate.value.getMinutes(),
     props.timeFormat,
   )
-  return `${dateStr} ${timeStr}`
+  return `${formatDateValue(selectedDate.value)} ${timeStr}`
 })
 
 // Time slots
@@ -198,8 +193,8 @@ watch(isOpen, async (opened) => {
   <div ref="root" class="mint-datetime-picker">
     <div class="mint-datetime-picker__input-wrapper">
       <div class="mint-datetime-picker__icon-calendar">
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
         </svg>
       </div>
       <input
@@ -221,11 +216,6 @@ watch(isOpen, async (opened) => {
         @click="toggleDropdown"
         @keydown="handleTriggerKeydown"
       />
-      <div class="mint-datetime-picker__icon-clock">
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
     </div>
 
     <Transition

package/src/components/internal/DatePickerTimeInternal.vue

@@ -210,6 +210,11 @@ watch(isOpen, (open) => {
 <template>
   <div ref="root" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
+      <div class="mint-time-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
+        </svg>
+      </div>
       <input
         ref="trigger"
         type="text"
@@ -241,11 +246,6 @@ watch(isOpen, (open) => {
           <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
       </button>
-      <div class="mint-time-picker__icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
-        </svg>
-      </div>
     </div>
 
     <Transition
@@ -284,9 +284,6 @@ watch(isOpen, (open) => {
           >
             <span class="mint-time-picker__slot-time">{{ formatTimeSlot(slot, format) }}</span>
             <span v-if="slotReason(slot)" class="mint-time-picker__slot-reason">{{ slotReason(slot) }}</span>
-            <svg class="mint-menu-item__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M3.5 8.5l3 3 6-7" />
-            </svg>
           </li>
         </ul>
       </div>

package/src/components/internal/OnboardingLayerInternal.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+/**
+ * The tour layer: a scrim with a hole over the anchor, the step card, and the
+ * what's-new dots. AppTopBar renders it when the app provides onboarding.
+ */
+import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { X } from 'lucide-vue-next'
+import BaseButton from '../BaseButton.vue'
+import { useEventListener } from '../../composables/useEventListener'
+import type { OnboardingState } from '../../composables/useOnboarding'
+
+const props = defineProps<{ state: OnboardingState }>()
+
+// Space between the anchor and the edge of the hole.
+const HOLE_PAD = 4
+
+const active = computed(() => props.state.active.value)
+const card = ref<HTMLElement | null>(null)
+const hole = ref<DOMRect | null>(null)
+const cardPosition = ref({ x: 0, y: 0 })
+const titleId = useId()
+let stopAutoUpdate: (() => void) | undefined
+
+async function position() {
+  const current = active.value
+  if (!current || !card.value) return
+  hole.value = current.element.getBoundingClientRect()
+  const { x, y } = await computePosition(current.element, card.value, {
+    strategy: 'fixed',
+    placement: current.step.placement ?? 'bottom',
+    middleware: [offset(12), flip(), shift({ padding: 12 })],
+  })
+  // The step may have changed while the position was computed.
+  if (active.value === current) cardPosition.value = { x, y }
+}
+
+// Focus goes back where it was when the run ends.
+let returnFocus: HTMLElement | null = null
+watch(active, async (current, previous) => {
+  stopAutoUpdate?.()
+  stopAutoUpdate = undefined
+  hole.value = null
+  if (current && !previous) returnFocus = document.activeElement as HTMLElement | null
+  if (!current) {
+    if (returnFocus?.isConnected) returnFocus.focus()
+    returnFocus = null
+    return
+  }
+  await nextTick()
+  if (!card.value || active.value !== current) return
+  current.element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  stopAutoUpdate = autoUpdate(current.element, card.value, () => void position())
+  // A click step: the keyboard user presses the control itself.
+  if (current.step.advanceOn === 'click') current.element.focus()
+  // Otherwise the card itself: no focus ring on load, and Tab reaches Back and Next.
+  else card.value.focus()
+}, { immediate: true })
+onBeforeUnmount(() => stopAutoUpdate?.())
+
+// The layer is its own focus trap: Tab cycles over the card's buttons (and the
+// anchor on a click step), never the page behind; from the card itself Tab goes
+// to the first stop and Shift+Tab to the last.
+useEventListener(document, 'keydown', (event) => {
+  const current = active.value
+  if (!current || !card.value) return
+  // Keys belong to the tour only while focus is on its card, its anchor, or nowhere.
+  const focused = document.activeElement
+  if (focused && focused !== document.body && !card.value.contains(focused) && focused !== current.element) return
+  const onCard = focused === card.value
+  if (event.key === 'Escape') {
+    event.stopPropagation()
+    props.state.dismiss()
+  } else if (event.key === 'Tab') {
+    const buttons = [...card.value.querySelectorAll<HTMLElement>('button')]
+    const stops = current.step.advanceOn === 'click' ? [current.element, ...buttons] : buttons
+    const at = stops.indexOf(document.activeElement as HTMLElement)
+    const target = at === -1 ? (event.shiftKey ? stops.length - 1 : 0) : (at + (event.shiftKey ? -1 : 1) + stops.length) % stops.length
+    event.preventDefault()
+    stops[target].focus()
+  } else if (event.key === 'Enter' && onCard && current.step.advanceOn !== 'click') {
+    event.preventDefault()
+    props.state.next()
+  }
+}, { capture: true })
+
+const holeStyle = computed(() => hole.value && {
+  left: `${hole.value.left - HOLE_PAD}px`,
+  top: `${hole.value.top - HOLE_PAD}px`,
+  width: `${hole.value.width + 2 * HOLE_PAD}px`,
+  height: `${hole.value.height + 2 * HOLE_PAD}px`,
+})
+// advanceOn 'click': cut the hole out of the click blocker, so the anchor takes the click.
+const blockerStyle = computed(() => {
+  const rect = hole.value
+  if (!rect || active.value?.step.advanceOn !== 'click') return undefined
+  const [x, y, w, h] = [rect.left - HOLE_PAD, rect.top - HOLE_PAD, rect.width + 2 * HOLE_PAD, rect.height + 2 * HOLE_PAD]
+  return { clipPath: `path(evenodd, 'M0 0H${window.innerWidth}V${window.innerHeight}H0Z M${x} ${y}h${w}v${h}h${-w}Z')` }
+})
+const isLast = computed(() => !!active.value && active.value.index === active.value.count - 1)
+const nextLabel = computed(() => active.value?.news ? 'Got it' : isLast.value ? 'Done' : 'Next')
+
+// What's-new dots: one on each element with unseen news, hidden while a card shows.
+const dots = ref<Array<{ id: string; title: string; x: number; y: number }>>([])
+let frame = 0
+function placeDots() {
+  cancelAnimationFrame(frame)
+  frame = requestAnimationFrame(() => {
+    dots.value = active.value ? [] : props.state.news.value.flatMap((item) => {
+      if (!item.unseen) return []
+      const element = document.querySelector(`[data-onboarding="${CSS.escape(item.anchor)}"]`)
+      if (!element) return []
+      const rect = element.getBoundingClientRect()
+      return rect.width ? [{ id: item.id, title: item.title, x: rect.right, y: rect.top }] : []
+    })
+  })
+}
+const observer = new MutationObserver(placeDots)
+watch(() => props.state.unseenNews.value > 0, (watching) => {
+  observer.disconnect()
+  if (watching) observer.observe(document.body, { childList: true, subtree: true })
+  placeDots()
+}, { immediate: true })
+watch(active, placeDots)
+useEventListener(window, 'resize', placeDots)
+useEventListener(window, 'scroll', placeDots, { capture: true, passive: true })
+onBeforeUnmount(() => {
+  observer.disconnect()
+  cancelAnimationFrame(frame)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <button
+      v-for="dot in dots"
+      :key="dot.id"
+      type="button"
+      class="mint-onboarding__dot"
+      :style="{ left: `${dot.x}px`, top: `${dot.y}px` }"
+      :aria-label="`New: ${dot.title}`"
+      @click="state.showNews(dot.id)"
+    />
+    <div v-if="active" class="mint-onboarding">
+      <div class="mint-onboarding__blocker" :style="blockerStyle" />
+      <div v-if="holeStyle" class="mint-onboarding__hole" :style="holeStyle" />
+      <div
+        ref="card"
+        class="mint-onboarding__card"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="titleId"
+        tabindex="-1"
+        :style="{ left: `${cardPosition.x}px`, top: `${cardPosition.y}px` }"
+      >
+        <button type="button" class="mint-onboarding__close" :aria-label="active.news ? 'Close' : 'Close tour'" @click="state.dismiss()">
+          <X :size="14" aria-hidden="true" />
+        </button>
+        <span v-if="active.count > 1" class="mint-onboarding__count">
+          <span aria-hidden="true">{{ active.index + 1 }} / {{ active.count }}</span>
+          <span class="mint-onboarding__sr">Step {{ active.index + 1 }} of {{ active.count }}</span>
+        </span>
+        <p :id="titleId" class="mint-onboarding__title">{{ active.step.title }}</p>
+        <p class="mint-onboarding__body">{{ active.step.body }}</p>
+        <div class="mint-onboarding__footer">
+          <span v-if="active.step.advanceOn === 'click'" class="mint-onboarding__hint">Click the highlighted control.</span>
+          <BaseButton v-if="active.index > 0" variant="ghost" size="sm" @click="state.back()">Back</BaseButton>
+          <BaseButton v-if="active.step.advanceOn !== 'click'" size="sm" @click="state.next()">{{ nextLabel }}</BaseButton>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/components/internal/ResourcePickerListInternal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T">
 /**
- * Searchable, optionally grouped single-select list shared by the experiment and
+ * Searchable single-select list shared by the experiment and
  * artifact selector modals: two-line rows (title, then code + meta) with status and date
  * in a right-hand column, a filled selected row, skeleton,
  * error and empty states, and the combobox keyboard model (↑ ↓ Enter).
  */
-import { computed, nextTick, reactive, ref, useId, watch } from 'vue'
+import { computed, nextTick, ref, useId, watch } from 'vue'
 import BaseInput from '../BaseInput.vue'
 import Skeleton from '../Skeleton.vue'
 import EmptyState from '../EmptyState.vue'
@@ -26,8 +26,6 @@ export interface ResourcePickerRow {
 const props = withDefaults(
   defineProps<{
     items: T[]
-    /** When set, rows render under collapsible group headers in this order. */
-    groups?: { label: string; items: T[] }[] | null
     itemKey: (item: T) => string | number
     describe: (item: T) => ResourcePickerRow
     selectedKey?: string | number | null
@@ -39,9 +37,10 @@ const props = withDefaults(
     error?: string | null
     emptyTitle?: string
     emptyDescription?: string
+    /** Focus the search field when the list mounts (the modal's focus trap honours `autofocus`). */
+    autofocusSearch?: boolean
   }>(),
   {
-    groups: null,
     selectedKey: null,
     placeholder: 'Search…',
     loading: false,
@@ -57,50 +56,33 @@ const emit = defineEmits<{
 defineSlots<{
   /** Extra filters on the search row. */
   filters?: () => unknown
-  /** A second filter row under the search. */
-  advanced?: () => unknown
   /** Row controls before the check; keys pressed inside them never select the row. */
   actions?: (props: { item: T }) => unknown
 }>()
 
 const listId = `mint-resource-picker-${useId().replace(/:/g, '')}`
-const collapsed = reactive(new Set<string>())
 const activeIndex = ref(-1)
 const listRef = ref<HTMLElement | null>(null)
 
-const visibleGroups = computed(() =>
-  props.groups?.map((group) => ({
-    ...group,
-    rows: collapsed.has(group.label) ? [] : group.items,
-  })),
-)
-/** Keyboard order: the rows on screen, top to bottom. */
-const flat = computed(() =>
-  visibleGroups.value ? visibleGroups.value.flatMap((group) => group.rows) : props.items,
-)
-const indexByKey = computed(() => new Map(flat.value.map((item, i) => [props.itemKey(item), i])))
+const indexByKey = computed(() => new Map(props.items.map((item, i) => [props.itemKey(item), i])))
 const showList = computed(() => !props.loading && !props.error && props.items.length > 0)
 
 function optionId(item: T): string {
   return `${listId}-${props.itemKey(item)}`
 }
 const activeDescendant = computed(() => {
-  const item = flat.value[activeIndex.value]
+  const item = props.items[activeIndex.value]
   return item === undefined ? undefined : optionId(item)
 })
 
 function indexOf(item: T): number {
   return indexByKey.value.get(props.itemKey(item)) ?? -1
 }
-function toggleGroup(label: string) {
-  if (collapsed.has(label)) collapsed.delete(label)
-  else collapsed.add(label)
-}
 function keydown(event: KeyboardEvent) {
-  // Keys belong to the search combobox; a focused header, filter or row action keeps its own Enter.
+  // Keys belong to the search combobox; a focused filter or row action keeps its own Enter.
   const target = event.target as HTMLElement | null
   if (target !== event.currentTarget && !target?.closest('.mint-resource-picker__search')) return
-  const rows = flat.value
+  const rows = props.items
   if (!rows.length) return
   if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
     event.preventDefault()
@@ -120,7 +102,7 @@ function keydown(event: KeyboardEvent) {
 }
 
 watch(
-  () => [props.items, props.groups],
+  () => props.items,
   () => {
     activeIndex.value = -1
   },
@@ -136,6 +118,7 @@ watch(
         :placeholder="placeholder"
         size="sm"
         type="search"
+        :autofocus="autofocusSearch"
         role="combobox"
         :aria-label="`Search ${label.toLowerCase()}`"
         :aria-expanded="showList"
@@ -151,7 +134,6 @@ watch(
       </BaseInput>
       <slot name="filters" />
     </div>
-    <slot name="advanced" />
 
     <div v-if="loading" class="mint-resource-picker__frame" aria-busy="true">
       <div v-for="n in 4" :key="n" class="mint-resource-picker__skeleton-row">
@@ -174,64 +156,42 @@ watch(
       role="listbox"
       :aria-label="label"
     >
-      <template v-for="group in visibleGroups ?? [{ label: '', items, rows: items }]" :key="group.label">
-        <button
-          v-if="visibleGroups"
-          type="button"
-          class="mint-resource-picker__group"
-          :aria-expanded="!collapsed.has(group.label)"
-          @click="toggleGroup(group.label)"
-        >
-          <svg
-            class="mint-resource-picker__chevron"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            aria-hidden="true"
+      <div
+        v-for="item in items"
+        :id="optionId(item)"
+        :key="itemKey(item)"
+        role="option"
+        :aria-selected="itemKey(item) === selectedKey"
+        class="mint-resource-picker__row"
+        :class="{
+          'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
+          'mint-resource-picker__row--active': indexOf(item) === activeIndex,
+        }"
+        @click="emit('select', item)"
+        @mouseenter="activeIndex = indexOf(item)"
+      >
+        <span class="mint-resource-picker__text">
+          <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
+          <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
+            ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
+              describe(item).code
+            }}</span
+            ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
           >
-            <path d="M4 6l4 4 4-4" />
-          </svg>
-          <span class="mint-resource-picker__group-label">{{ group.label }}</span>
-          <span class="mint-resource-picker__group-count">{{ group.items.length }}</span>
-        </button>
-        <div
-          v-for="item in group.rows"
-          :id="optionId(item)"
-          :key="itemKey(item)"
-          role="option"
-          :aria-selected="itemKey(item) === selectedKey"
-          class="mint-resource-picker__row"
-          :class="{
-            'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
-            'mint-resource-picker__row--active': indexOf(item) === activeIndex,
-          }"
-          @click="emit('select', item)"
-          @mouseenter="activeIndex = indexOf(item)"
-        >
-          <span class="mint-resource-picker__text">
-            <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
-            <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
-              ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
-                describe(item).code
-              }}</span
-              ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
-            >
-          </span>
-          <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
-            <span
-              v-if="describe(item).status"
-              class="mint-resource-picker__status"
-              :class="`mint-resource-picker__status--${describe(item).status!.tone}`"
-              >{{ describe(item).status!.label }}</span
-            >
-            <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
-          </span>
-          <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
-            <slot name="actions" :item="item" />
-          </span>
-        </div>
-      </template>
+        </span>
+        <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
+          <span
+            v-if="describe(item).status"
+            class="mint-resource-picker__status"
+            :class="`mint-resource-picker__status--${describe(item).status!.tone}`"
+            >{{ describe(item).status!.label }}</span
+          >
+          <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
+        </span>
+        <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
+          <slot name="actions" :item="item" />
+        </span>
+      </div>
     </div>
   </div>
 </template>