@leavepulse/ui 0.69.0 → 0.70.0

package/src/components/LpDatePicker.vue

@@ -32,26 +32,15 @@ export interface DatePickerLabels extends Record<string, string> {
  * week") and, unlike the range picker's, are opt-in, so forms that already use
  * the picker keep the plain calendar they were laid out around.
  */
-import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
 import { computed, ref, useAttrs } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useLocale } from "../composables/useLocale"
 import { useLabels } from "../composables/useLpConfig"
-import { mergeClass } from "../composables/useMergedClass"
-import {
-  type CalendarLabels,
-  PICKER_CLEAR,
-  PICKER_PRESET,
-  PICKER_PRESETS,
-  PICKER_SIZE,
-  PICKER_TRIGGER,
-  pickerTone,
-} from "./calendar"
+import type { CalendarLabels } from "./calendar"
 import { type DatePreset, dayAllowed, defaultDatePresets } from "./dateRange"
-import { POPOVER_PANEL } from "./dropdown"
 import LpCalendar from "./LpCalendar.vue"
 import LpIcon from "./LpIcon.vue"
-import LpRollingText from "./LpRollingText.vue"
+import PickerField from "./PickerField.vue"
 import LpTimeField from "./LpTimeField.vue"
 
 const props = withDefaults(
@@ -184,102 +173,62 @@ function pickPreset(preset: DatePreset) {
 }
 
 const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled)
+
+const presetOptions = computed(() => presetList.value.map((preset) => ({
+  label: preset.label,
+  disabled: !presetFits(preset),
+  selected: !!day.value && day.value === preset.date(),
+  select: () => pickPreset(preset),
+})))
 </script>
 
 <template>
-  <!-- The clear control sits beside the trigger, not inside it: a button
-       nested in a button is invalid, and the nested one was unreachable by
-       keyboard. -->
-  <div :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
-    <PopoverRoot v-model:open="open">
-      <PopoverTrigger as-child>
+  <PickerField
+    v-bind="attrs"
+    v-model:open="open"
+    :field="field"
+    :display="display"
+    :placeholder="placeholder ?? text.placeholder"
+    icon="lucide:calendar"
+    :size="size"
+    :clearable="showClear"
+    :clear-label="text.clear"
+    :presets-label="text.presets"
+    :presets="presetOptions"
+    presets-class="sm:w-36"
+    @clear="clear"
+  >
+    <div class="flex flex-col">
+      <LpCalendar
+        :model-value="day"
+        :min="min"
+        :max="max"
+        :is-disabled="isDisabled"
+        :is-date-unavailable="isDateUnavailable"
+        :locale="locale"
+        :labels="labels"
+        class="border-0 bg-transparent"
+        @update:model-value="onPick"
+      />
+      <div v-if="time" class="flex items-center gap-2 border-t border-line px-3 py-2">
+        <LpIcon name="lucide:clock" :size="15" class="shrink-0 text-muted" />
+        <LpTimeField
+          :model-value="minute || undefined"
+          :disabled="!day"
+          :icon="false"
+          :locale="locale"
+          size="sm"
+          class="flex-1"
+          @update:model-value="(at) => onTime(at || '')"
+        />
         <button
-          v-bind="{ ...attrs, class: undefined, style: undefined }"
-          :id="field.id"
           type="button"
-          :disabled="field.disabled"
-          :aria-invalid="field.invalid || undefined"
-          :aria-describedby="field.describedBy"
-          :class="[PICKER_TRIGGER, PICKER_SIZE[size], pickerTone(field.invalid)]"
+          class="shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink"
+          @click="open = false"
         >
-          <LpIcon name="lucide:calendar" :size="16" class="shrink-0 text-muted" />
-          <LpRollingText
-            :value="display || (placeholder ?? text.placeholder)"
-            align="start"
-            class="min-w-0 flex-1"
-            :class="display ? '' : 'text-muted'"
-          />
-          <span v-if="showClear" class="w-[15px] shrink-0" aria-hidden="true" />
-          <LpIcon
-            name="lucide:chevron-down"
-            :size="15"
-            class="shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180"
-          />
+          {{ doneLabel ?? text.done }}
         </button>
-      </PopoverTrigger>
-      <PopoverPortal>
-        <PopoverContent
-          :collision-padding="8"
-          :side-offset="6"
-          align="start"
-          :class="[POPOVER_PANEL, 'z-(--z-popover) flex max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 outline-none sm:flex-row']"
-        >
-          <div v-if="presetList.length" role="group" :aria-label="text.presets" :class="[PICKER_PRESETS, 'sm:w-36']">
-            <button
-              v-for="(preset, i) in presetList"
-              :key="`${i}:${preset.label}`"
-              type="button"
-              :disabled="!presetFits(preset)"
-              :aria-pressed="!!day && day === preset.date()"
-              :class="PICKER_PRESET"
-              @click="pickPreset(preset)"
-            >
-              {{ preset.label }}
-            </button>
-          </div>
-          <div class="flex flex-col">
-            <LpCalendar
-              :model-value="day"
-              :min="min"
-              :max="max"
-              :is-disabled="isDisabled"
-              :is-date-unavailable="isDateUnavailable"
-              :locale="locale"
-              :labels="labels"
-              class="border-0 bg-transparent"
-              @update:model-value="onPick"
-            />
-            <div v-if="time" class="flex items-center gap-2 border-t border-line px-3 py-2">
-              <LpIcon name="lucide:clock" :size="15" class="shrink-0 text-muted" />
-              <LpTimeField
-                :model-value="minute || undefined"
-                :disabled="!day"
-                :icon="false"
-                :locale="locale"
-                size="sm"
-                class="flex-1"
-                @update:model-value="(at) => onTime(at || '')"
-              />
-              <button
-                type="button"
-                class="shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink"
-                @click="open = false"
-              >
-                {{ doneLabel ?? text.done }}
-              </button>
-            </div>
-          </div>
-        </PopoverContent>
-      </PopoverPortal>
-    </PopoverRoot>
-    <button
-      v-if="showClear"
-      type="button"
-      :aria-label="text.clear"
-      :class="PICKER_CLEAR"
-      @click="clear"
-    >
-      <LpIcon name="lucide:x" :size="15" />
-    </button>
-  </div>
+      </div>
+    </div>
+  </PickerField>
 </template>

package/src/components/LpDateRangePicker.vue

@@ -9,15 +9,13 @@ export default { inheritAttrs: false }
  * Picking the second end or a preset fills the field and closes the popover.
  * Two months sit side by side where there is room, one on a phone.
  */
-import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
 import { computed, ref, useAttrs } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useLocale } from "../composables/useLocale"
 import { useLabels } from "../composables/useLpConfig"
-import { mergeClass } from "../composables/useMergedClass"
 import { useMediaQuery } from "../composables/useMediaQuery"
 import {
-  clampRange,
+  allowedRange,
   type DateRange,
   type DateRangePreset,
   defaultRangePresets,
@@ -25,18 +23,8 @@ import {
   normalizeRange,
   sameRange,
 } from "./dateRange"
-import {
-  type CalendarLabels,
-  PICKER_CLEAR,
-  PICKER_PRESET,
-  PICKER_PRESETS,
-  PICKER_SIZE,
-  PICKER_TRIGGER,
-  pickerTone,
-} from "./calendar"
-import { POPOVER_PANEL } from "./dropdown"
-import LpIcon from "./LpIcon.vue"
-import LpRollingText from "./LpRollingText.vue"
+import type { CalendarLabels } from "./calendar"
+import PickerField from "./PickerField.vue"
 import LpRangeCalendar, { type RangeChange } from "./LpRangeCalendar.vue"
 
 export interface DateRangePickerLabels extends Record<string, string> {
@@ -118,13 +106,21 @@ function pick(range: DateRange, change?: RangeChange) {
   if (!change) open.value = false
 }
 
+const rules = computed(() => ({
+  min: props.min,
+  max: props.max,
+  isDisabled: props.isDisabled,
+  isDateUnavailable: props.isDateUnavailable,
+  maximumDays: props.maximumDays,
+}))
+
 function pickPreset(preset: DateRangePreset) {
-  const range = clampRange(preset.range(), props.min, props.max)
+  const range = allowedRange(preset.range(), rules.value)
   if (range) pick(range)
 }
 
 function presetFits(preset: DateRangePreset): boolean {
-  return !!clampRange(preset.range(), props.min, props.max)
+  return !!allowedRange(preset.range(), rules.value)
 }
 
 const wide = useMediaQuery("(min-width: 640px)")
@@ -137,85 +133,43 @@ const field = useFieldControl(() => ({
   disabled: props.disabled,
 }))
 const showClear = computed(() => props.clearable && !!value.value && !field.value.disabled)
+
+const presetOptions = computed(() => presetList.value.map((preset) => ({
+  label: preset.label,
+  disabled: !presetFits(preset),
+  selected: sameRange(value.value, preset.range()),
+  select: () => pickPreset(preset),
+})))
 </script>
 
 <template>
-  <div :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
-    <PopoverRoot v-model:open="open">
-      <PopoverTrigger as-child>
-        <button
-          v-bind="{ ...attrs, class: undefined, style: undefined }"
-          :id="field.id"
-          type="button"
-          :disabled="field.disabled"
-          :aria-invalid="field.invalid || undefined"
-          :aria-describedby="field.describedBy"
-          :class="[PICKER_TRIGGER, PICKER_SIZE[size], pickerTone(field.invalid)]"
-        >
-          <LpIcon name="lucide:calendar-range" :size="16" class="shrink-0 text-muted" />
-          <LpRollingText
-            :value="display || placeholder || text.placeholder"
-            align="start"
-            class="min-w-0 flex-1"
-            :class="display ? '' : 'text-muted'"
-          />
-          <span v-if="showClear" class="w-[15px] shrink-0" aria-hidden="true" />
-          <LpIcon
-            name="lucide:chevron-down"
-            :size="15"
-            class="shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180 motion-reduce:transition-none"
-          />
-        </button>
-      </PopoverTrigger>
-      <PopoverPortal>
-        <PopoverContent
-          :side-offset="6"
-          align="start"
-          :collision-padding="8"
-          :class="[POPOVER_PANEL, 'z-(--z-popover) flex max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 outline-none sm:flex-row']"
-        >
-          <div
-            v-if="presetList.length"
-            role="group"
-            :aria-label="text.presets"
-:class="[PICKER_PRESETS, 'sm:w-40']"
-          >
-            <button
-              v-for="(preset, i) in presetList"
-              :key="`${i}:${preset.label}`"
-              type="button"
-              :disabled="!presetFits(preset)"
-              :aria-pressed="sameRange(value, preset.range())"
-:class="PICKER_PRESET"
-              @click="pickPreset(preset)"
-            >
-              {{ preset.label }}
-            </button>
-          </div>
-          <LpRangeCalendar
-            :model-value="value"
-            :min="min"
-            :max="max"
-            :is-disabled="isDisabled"
-            :is-date-unavailable="isDateUnavailable"
-            :maximum-days="maximumDays"
-            :months="wide ? 2 : 1"
-            :locale="locale"
-            :labels="labels"
-            class="border-0 bg-transparent"
-            @update:model-value="pick"
-          />
-        </PopoverContent>
-      </PopoverPortal>
-    </PopoverRoot>
-    <button
-      v-if="showClear"
-      type="button"
-      :aria-label="text.clear"
-      :class="PICKER_CLEAR"
-      @click="emit('update:modelValue', undefined)"
-    >
-      <LpIcon name="lucide:x" :size="15" />
-    </button>
-  </div>
+  <PickerField
+    v-bind="attrs"
+    v-model:open="open"
+    :field="field"
+    :display="display"
+    :placeholder="placeholder || text.placeholder"
+    icon="lucide:calendar-range"
+    :size="size"
+    :clearable="showClear"
+    :clear-label="text.clear"
+    :presets-label="text.presets"
+    :presets="presetOptions"
+    presets-class="sm:w-40"
+    @clear="emit('update:modelValue', undefined)"
+  >
+    <LpRangeCalendar
+      :model-value="value"
+      :min="min"
+      :max="max"
+      :is-disabled="isDisabled"
+      :is-date-unavailable="isDateUnavailable"
+      :maximum-days="maximumDays"
+      :months="wide ? 2 : 1"
+      :locale="locale"
+      :labels="labels"
+      class="border-0 bg-transparent"
+      @update:model-value="pick"
+    />
+  </PickerField>
 </template>

package/src/components/LpDisclosure.vue

@@ -8,15 +8,24 @@ export default { inheritAttrs: false }
 <script setup lang="ts">
 /*
  * Collapsible "show more" section built on reka Collapsible. The trigger is a
- * full-width row with a chevron that rotates open; the body animates its height
- * via the collapsible-down/up keyframes (driven by reka's content-height var).
+ * full-width row with a chevron that rotates open; the body folds open and shut
+ * through LpCollapse.
+ *
+ * reka still owns the state and the trigger (aria-expanded, keyboard, the
+ * controlled/uncontrolled split below), but not the body. Its content part
+ * played fixed keyframes towards a height it measured once, so toggling again
+ * mid-way snapped to the far end before turning back; LpCollapse folds from
+ * whatever size the box has at that moment. The body therefore is not reka's
+ * CollapsibleContent, which leaves the trigger's aria-controls empty: the
+ * trigger is handed the body's id directly.
  *
  * `scrollIntoView` opts the block into auto-revealing itself: when it opens, the
  * root is smoothly scrolled into the nearest scroll container so the freshly
  * shown content isn't left below the fold.
  */
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui"
-import { type ComponentPublicInstance, computed, getCurrentInstance, nextTick, ref } from "vue"
+import { CollapsibleRoot, CollapsibleTrigger } from "reka-ui"
+import { type ComponentPublicInstance, computed, getCurrentInstance, nextTick, ref, useId } from "vue"
+import LpCollapse from "./LpCollapse.vue"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -60,6 +69,17 @@ const rootOpen = computed(() => (controlled.value ? props.open : undefined))
 // instance, so reach through $el for the DOM node we scroll into view.
 const root = ref<ComponentPublicInstance | null>(null)
 
+const bodyId = useId()
+
+/*
+ * The body's drift-in is a mount animation of the panel, so it plays when the
+ * body is created by an open, and never again on that element: a reopen in the
+ * middle of a close lands on the same panel and carries on from where it is.
+ * A block that starts open should simply be there, as reka's content did, so
+ * the drift is armed only once the first body is gone.
+ */
+const drift = ref(!(controlled.value ? props.open : props.defaultOpen))
+
 function onToggle(value: boolean) {
   emit("update:open", value)
   if (value && props.scrollIntoView) {
@@ -104,39 +124,41 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     v-bind="rest"
     @update:open="onToggle"
   >
-    <CollapsibleTrigger
-      class="group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-    >
-      <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />
-      <span class="min-w-0 flex-1 text-left">
-        <slot name="trigger">{{ label }}</slot>
-      </span>
-      <LpIcon
-        name="lucide:chevron-down"
-        :size="16"
-        class="text-muted transition-transform duration-[var(--duration-fast)] group-data-[state=open]:rotate-180"
-      />
-    </CollapsibleTrigger>
+    <template #default="{ open: isOpen }">
+      <CollapsibleTrigger
+        :aria-controls="bodyId"
+        class="group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      >
+        <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />
+        <span class="min-w-0 flex-1 text-left">
+          <slot name="trigger">{{ label }}</slot>
+        </span>
+        <LpIcon
+          name="lucide:chevron-down"
+          :size="16"
+          class="text-muted transition-transform duration-[var(--duration-fast)] group-data-[state=open]:rotate-180"
+        />
+      </CollapsibleTrigger>
 
-    <CollapsibleContent
-      class="group/content overflow-hidden data-[state=open]:animate-[collapsible-down_260ms_var(--ease-emphasized)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-emphasized)]"
-    >
-      <!--
-        The height animation lives on the wrapper; the inner panel fades + drifts
-        up so the content eases in rather than snapping at full opacity. The slide
-        is short (4px) and runs slightly behind the expand for a settled feel.
+      <LpCollapse :id="bodyId" :open="isOpen" @closed="drift = true">
+        <!--
+          The fold (height + fade) lives on LpCollapse; the inner panel also
+          drifts up 4px so the content eases in rather than snapping into
+          place, slightly behind the expand for a settled feel.
 
-        The bottom padding matches the sides rather than exceeding them: a taller
-        gap under the content reads as the block having been cut off short, and
-        with a control in there (a field, a row of buttons) the extra space below
-        it looked like a mistake next to the 12px at either side. The top stays
-        smaller because the trigger's own padding already separates the two.
-      -->
-      <div
-        class="grid gap-2.5 px-3 pt-1 pb-3 group-data-[state=open]/content:animate-[disclosure-body-in_300ms_var(--ease-emphasized)] motion-reduce:animate-none"
-      >
-        <slot />
-      </div>
-    </CollapsibleContent>
+          The bottom padding matches the sides rather than exceeding them: a taller
+          gap under the content reads as the block having been cut off short, and
+          with a control in there (a field, a row of buttons) the extra space below
+          it looked like a mistake next to the 12px at either side. The top stays
+          smaller because the trigger's own padding already separates the two.
+        -->
+        <div
+          class="grid gap-2.5 px-3 pt-1 pb-3 motion-reduce:animate-none"
+          :class="drift ? 'animate-[rise-in_300ms_var(--ease-emphasized)] [--rise:-4px]' : ''"
+        >
+          <slot />
+        </div>
+      </LpCollapse>
+    </template>
   </CollapsibleRoot>
 </template>