@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpConfirmDialog.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts">
 // Confirmation dialog built on LpModal. Resolves an action via confirm/cancel.
-import { computed } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpModal from "./LpModal.vue"
 
+export type ConfirmLabels = {
+  confirm: string
+  cancel: string
+  loading: string
+  failed: string
+}
+
 const props = withDefaults(
   defineProps<{
     open?: boolean
@@ -33,13 +41,22 @@ const props = withDefaults(
      * The confirm action is in flight: the button disables and swaps to
      * `loadingLabel`, and confirming no longer closes the dialog — the owner
      * closes it once the work settles, so a failure can stay on screen.
+     * Setting it from the `confirm` handler is enough; the dialog waits a tick
+     * for it before deciding to close.
      */
     loading?: boolean
     loadingLabel?: string
+    /**
+     * The work behind the confirm button. When given, the dialog runs it,
+     * shows the loading state itself, closes once it resolves and stays open
+     * with the error's message when it rejects.
+     */
+    action?: () => unknown
     /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
+    labels?: Partial<ConfirmLabels>
   }>(),
-  { confirmLabel: "Confirm", cancelLabel: "Cancel", loadingLabel: "Working…", glass: undefined },
+  { glass: undefined },
 )
 
 const emit = defineEmits<{
@@ -48,29 +65,61 @@ const emit = defineEmits<{
   (e: "cancel"): void
 }>()
 
+const text = useLabels<ConfirmLabels>(
+  "confirm",
+  { confirm: "Confirm", cancel: "Cancel", loading: "Working…", failed: "Something went wrong." },
+  () => props.labels,
+)
+
 /*
  * Only a destructive prompt is marked by default. A routine confirmation
  * ("Save these changes?") with a warning badge cries wolf, and the badge stops
  * meaning anything on the dialog where it matters.
- *
- * "Not given" cannot be tested with `undefined` here. A prop whose type union
- * includes Boolean is boolean-cast by Vue, so an absent `icon` arrives as
- * `false` — the same value the caller passes to suppress the marker — and the
- * default silently never applied. A string is an override, and everything else
- * (absent, or an explicit false) falls through to the danger default.
  */
 const marker = computed<string>(() => {
   if (props.icon !== undefined) return props.icon
   return props.danger ? "lucide:triangle-alert" : ""
 })
 
-function confirm() {
+const running = ref(false)
+const error = ref("")
+const busy = computed(() => props.loading || running.value)
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) error.value = ""
+  },
+)
+
+async function confirm() {
+  if (busy.value) return
+  error.value = ""
   emit("confirm")
-  // An async confirm owns its own dismissal; closing here would tear the
-  // dialog down before the caller knows whether the action succeeded.
+  if (props.action) {
+    running.value = true
+    try {
+      await props.action()
+    } catch (e) {
+      error.value = e instanceof Error && e.message ? e.message : text.value.failed
+      return
+    } finally {
+      running.value = false
+    }
+    emit("update:open", false)
+    return
+  }
+  // A handler that sets `loading` does so through the parent, whose new props
+  // reach this component only on the next render.
+  await nextTick()
   if (!props.loading) emit("update:open", false)
 }
-function cancel() {
+
+// Every way out that is not the confirm button counts as a cancel: Escape, the
+// scrim, the close button. None of them may close it while work is in flight.
+function dismiss(open: boolean) {
+  if (open) return emit("update:open", true)
+  if (busy.value) return
   emit("cancel")
   emit("update:open", false)
 }
@@ -82,7 +131,8 @@ function cancel() {
     :open="open"
     :title="title"
     :description="description"
-    @update:open="(v) => $emit('update:open', v)"
+    role="alertdialog"
+    @update:open="dismiss"
   >
     <template v-if="marker" #title>
       <span class="inline-flex items-center gap-2.5">
@@ -100,16 +150,17 @@ function cancel() {
       </span>
     </template>
     <slot />
+    <p v-if="error" role="alert" class="mt-3 text-sm text-danger">{{ error }}</p>
     <template #footer>
-      <LpButton variant="ghost" :disabled="loading" @click="cancel">
-        {{ cancelLabel }}
+      <LpButton variant="ghost" :disabled="busy" @click="dismiss(false)">
+        {{ cancelLabel ?? text.cancel }}
       </LpButton>
       <LpButton
         :variant="danger ? 'danger' : 'solid'"
-        :disabled="loading"
+        :disabled="busy"
         @click="confirm"
       >
-        {{ loading ? loadingLabel : confirmLabel }}
+        {{ busy ? (loadingLabel ?? text.loading) : (confirmLabel ?? text.confirm) }}
       </LpButton>
     </template>
   </LpModal>

package/src/components/LpConfirmHost.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/*
+ * Renders the requests made through `confirm()` / `useConfirm()`. Mount one
+ * near the app root, next to LpToaster.
+ */
+import { computed, ref, watch } from "vue"
+import { confirmQueue, settleConfirm } from "./confirm"
+import LpConfirmDialog from "./LpConfirmDialog.vue"
+
+withDefaults(
+  defineProps<{
+    /** Frosted glass panel. Follows `provideGlass` when unset. */
+    glass?: boolean
+  }>(),
+  { glass: undefined },
+)
+
+const current = computed(() => confirmQueue[0])
+const open = ref(false)
+let confirmed = false
+const answer = (value: boolean) => (confirmed = value)
+
+watch(
+  () => current.value?.id,
+  (id) => {
+    confirmed = false
+    open.value = id !== undefined
+  },
+  { immediate: true },
+)
+
+// The dialog closes itself after a successful action, or straight away for a
+// plain confirmation; a failed action keeps it open and never gets here.
+function onOpen(value: boolean) {
+  open.value = value
+  const request = current.value
+  if (!value && request) settleConfirm(request.id, confirmed)
+}
+</script>
+
+<template>
+  <LpConfirmDialog
+    v-if="current"
+    :key="current.id"
+    :open="open"
+    :glass="glass"
+    :title="current.title"
+    :description="current.description"
+    :danger="current.danger"
+    :icon="current.icon"
+    :confirm-label="current.confirmLabel"
+    :cancel-label="current.cancelLabel"
+    :loading-label="current.loadingLabel"
+    :action="current.action"
+    @confirm="answer(true)"
+    @cancel="answer(false)"
+    @update:open="onOpen"
+  />
+</template>

package/src/components/LpContextMenu.vue

@@ -6,20 +6,10 @@
  * long-press on touch) opens the menu at the pointer. Shares the floating-panel
  * surface + option-row look with the rest of the kit via dropdown.ts.
  */
-import {
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuPortal,
-  ContextMenuRoot,
-  ContextMenuSeparator,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "reka-ui"
+import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from "reka-ui"
 import { computed } from "vue"
+import ContextMenuItems from "./ContextMenuItems.vue"
 import { POPOVER_PANEL } from "./dropdown"
-import LpIcon from "./LpIcon.vue"
 
 export interface ContextMenuItemDef {
   label: string
@@ -30,7 +20,7 @@ export interface ContextMenuItemDef {
   disabled?: boolean
   separatorBefore?: boolean
   onSelect?: () => void
-  /** Nested submenu. When present, onSelect is ignored. */
+  /** Nested submenu, to any depth. When present, onSelect is ignored. */
   children?: ContextMenuItemDef[]
   /**
    * Renders as a tick-box rather than a plain item, and the menu stays open on
@@ -52,17 +42,13 @@ const props = defineProps<{
   always?: boolean
 }>()
 
-// With no items, render just the trigger slot — no reka machinery — so the
-// element keeps the browser's native context menu. Lets callers wrap
-// unconditionally and pass [] to opt out per element. `always` overrides this so
-// a late-populated menu is ready on the very first click.
+// With no items the trigger is disabled, so the element keeps the browser's
+// native context menu. Lets callers wrap unconditionally and pass [] to opt out
+// per element. `always` overrides this so a late-populated menu is ready on the
+// very first click.
 const enabled = computed(() => props.always || props.items.length > 0)
 
 const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
-const ITEM =
-  "group/item flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
-const ICON =
-  "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[highlighted]/item:translate-x-0.5"
 
 // A menu opened over a text field takes focus, and on close reka hands it to the
 // trigger, so the caret and the selection the user right-clicked are gone — the
@@ -92,104 +78,17 @@ function returnFocus(event: Event) {
 </script>
 
 <template>
-  <slot v-if="!enabled" />
-
-  <ContextMenuRoot v-else>
-    <ContextMenuTrigger as-child @contextmenu.capture="rememberField">
+  <!-- One tree whether or not there are items: swapping between a bare slot and
+       the reka trigger remounted the wrapped content whenever items arrived
+       late, losing its state and focus. A disabled trigger leaves the browser's
+       own menu in place. -->
+  <ContextMenuRoot>
+    <ContextMenuTrigger as-child :disabled="!enabled" @contextmenu.capture="rememberField">
       <slot />
     </ContextMenuTrigger>
     <ContextMenuPortal v-if="items.length">
-      <ContextMenuContent :class="PANEL" @close-auto-focus="returnFocus">
-        <template v-for="(item, i) in items" :key="i">
-          <ContextMenuSeparator v-if="item.separatorBefore" class="my-1 h-px bg-line" />
-
-          <!-- Submenu branch -->
-          <ContextMenuSub v-if="item.children?.length">
-            <ContextMenuSubTrigger
-              :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand data-[state=open]:bg-brand-soft data-[state=open]:text-brand']"
-            >
-              <span class="flex items-center gap-2">
-                <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
-                {{ item.label }}
-              </span>
-              <LpIcon name="lucide:chevron-right" :size="14" class="text-muted" />
-            </ContextMenuSubTrigger>
-            <ContextMenuPortal>
-              <ContextMenuSubContent :class="PANEL" :side-offset="2" :align-offset="-4">
-                <template v-for="(sub, j) in item.children" :key="j">
-                  <ContextMenuSeparator v-if="sub.separatorBefore" class="my-1 h-px bg-line" />
-                  <!-- The tick-box case, as in the top-level menu: this is
-                       where most of them live, since a submenu is what a list
-                       of choices opens into. -->
-                  <ContextMenuItem
-                    v-if="sub.checked !== undefined"
-                    :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand']"
-                    :disabled="sub.disabled"
-                    @select.prevent="sub.onSelect?.()"
-                  >
-                    <span class="flex items-center gap-2">
-                      <LpIcon
-                        :name="sub.checked ? 'lucide:check' : 'lucide:minus'"
-                        :size="15"
-                        :class="[ICON, sub.checked ? '' : 'opacity-25']"
-                      />
-                      {{ sub.label }}
-                    </span>
-                    <kbd v-if="sub.shortcut" class="text-xs text-muted">{{ sub.shortcut }}</kbd>
-                  </ContextMenuItem>
-
-                  <ContextMenuItem
-                    v-else
-                    :class="[ITEM, 'justify-between', sub.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand']"
-                    :disabled="sub.disabled"
-                    @select="sub.onSelect?.()"
-                  >
-                    <span class="flex items-center gap-2">
-                      <LpIcon v-if="sub.icon" :name="sub.icon" :size="15" :class="ICON" />
-                      {{ sub.label }}
-                    </span>
-                    <kbd v-if="sub.shortcut" class="text-xs text-muted">{{ sub.shortcut }}</kbd>
-                  </ContextMenuItem>
-                </template>
-              </ContextMenuSubContent>
-            </ContextMenuPortal>
-          </ContextMenuSub>
-
-          <!-- Tick-box item. `@select.prevent` keeps the menu open: these come
-               in lists where several are set in one visit, and closing after
-               each tick would mean reopening for the next. The tick occupies a
-               fixed slot so unticked rows stay aligned with ticked ones. -->
-          <ContextMenuItem
-            v-else-if="item.checked !== undefined"
-            :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand']"
-            :disabled="item.disabled"
-            @select.prevent="item.onSelect?.()"
-          >
-            <span class="flex items-center gap-2">
-              <LpIcon
-                :name="item.checked ? 'lucide:check' : 'lucide:minus'"
-                :size="15"
-                :class="[ICON, item.checked ? '' : 'opacity-25']"
-              />
-              {{ item.label }}
-            </span>
-            <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
-          </ContextMenuItem>
-
-          <!-- Leaf item -->
-          <ContextMenuItem
-            v-else
-            :class="[ITEM, 'justify-between', item.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand']"
-            :disabled="item.disabled"
-            @select="item.onSelect?.()"
-          >
-            <span class="flex items-center gap-2">
-              <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
-              {{ item.label }}
-            </span>
-            <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
-          </ContextMenuItem>
-        </template>
+      <ContextMenuContent :collision-padding="8" :class="PANEL" @close-auto-focus="returnFocus">
+        <ContextMenuItems :items="items" :panel="PANEL" />
       </ContextMenuContent>
     </ContextMenuPortal>
   </ContextMenuRoot>

package/src/components/LpDatePicker.vue

@@ -1,3 +1,7 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Date field + calendar popover. The model is an ISO date string ("YYYY-MM-DD",
@@ -14,10 +18,14 @@
  * the common case.
  */
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
-import { computed, ref } from "vue"
+import { computed, ref, useAttrs } from "vue"
+import { useFieldControl } from "../composables/useField"
+import { useLabels } from "../composables/useLpConfig"
+import { mergeClass } from "../composables/useMergedClass"
 import { POPOVER_PANEL } from "./dropdown"
 import LpCalendar from "./LpCalendar.vue"
 import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
 import LpTimeField from "./LpTimeField.vue"
 
 const props = withDefaults(
@@ -80,7 +88,11 @@ const shellSize = {
   lg: "h-(--size-control-lg) text-sm",
 }
 
-function onPick(v: string | undefined) {
+function onPick(picked: string | undefined) {
+  // Clicking the selected day again is the calendar's "deselect". Here it is
+  // someone confirming the date they already have, so it keeps the value and
+  // closes like any other pick; clearing has its own button.
+  const v = picked ?? (day.value || undefined)
   if (!props.time) {
     emit("update:modelValue", v)
     open.value = false
@@ -101,75 +113,99 @@ function onTime(at: string) {
 function clear() {
   emit("update:modelValue", undefined)
 }
+
+const attrs = useAttrs()
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+const labels = useLabels("datePicker", { clear: "Clear" })
+const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled)
 </script>
 
 <template>
-  <PopoverRoot v-model:open="open">
-    <PopoverTrigger as-child>
-      <button
-        type="button"
-        :disabled="disabled"
-        class="group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
-        :class="[
-          shellSize[size],
-          invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
-        ]"
-      >
-        <LpIcon name="lucide:calendar" :size="16" class="shrink-0 text-muted" />
-        <span class="min-w-0 flex-1 truncate" :class="display ? '' : 'text-muted'">
-          {{ display || placeholder }}
-        </span>
-        <span
-          v-if="clearable && modelValue && !disabled"
-          role="button"
-          tabindex="-1"
-          aria-label="Clear"
-          class="shrink-0 text-muted transition-colors hover:text-ink"
-          @click.stop="clear"
-          @keydown.enter.stop="clear"
+  <!-- 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>
+        <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="group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+          :class="[
+            shellSize[size],
+            field.invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
+          ]"
+        >
+          <LpIcon name="lucide:calendar" :size="16" class="shrink-0 text-muted" />
+          <LpRollingText
+            :value="display || 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"
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent
+          :collision-padding="8"
+          :side-offset="6"
+          align="start"
+          :class="[POPOVER_PANEL, 'z-(--z-popover) rounded-card p-0 outline-none']"
         >
-          <LpIcon name="lucide:x" :size="15" />
-        </span>
-        <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"
-        />
-      </button>
-    </PopoverTrigger>
-    <PopoverPortal>
-      <PopoverContent
-        :side-offset="6"
-        align="start"
-        :class="[POPOVER_PANEL, 'z-(--z-popover) rounded-card p-0 outline-none']"
-      >
-        <LpCalendar
-          :model-value="day"
-          :min="min"
-          :max="max"
-          :is-disabled="isDisabled"
-          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"
-            size="sm"
-            class="flex-1"
-            @update:model-value="(at) => onTime(at || '')"
+          <LpCalendar
+            :model-value="day"
+            :min="min"
+            :max="max"
+            :is-disabled="isDisabled"
+            class="border-0 bg-transparent"
+            @update:model-value="onPick"
           />
-          <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 }}
-          </button>
-        </div>
-      </PopoverContent>
-    </PopoverPortal>
-  </PopoverRoot>
+          <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"
+              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 }}
+            </button>
+          </div>
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+    <!-- Positioned over the spacer the trigger leaves for it, just before the
+         chevron (gap-2 + 15px chevron + px-3 from the right edge). -->
+    <button
+      v-if="showClear"
+      type="button"
+      :aria-label="labels.clear"
+      class="absolute top-1/2 right-[calc(0.75rem+15px+0.5rem)] flex -translate-y-1/2 items-center rounded-sm text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+      @click="clear"
+    >
+      <LpIcon name="lucide:x" :size="15" />
+    </button>
+  </div>
 </template>