@leavepulse/ui 0.70.0 → 0.70.1

package/src/components/LpRepeater.vue

@@ -4,8 +4,10 @@ import { useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useRepeater, type RepeaterItemKey } from "../composables/useRepeater"
+import { usePrefersReducedMotion } from "../composables/useReducedMotion"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
+import LpShift from "./LpShift.vue"
 
 defineOptions({ inheritAttrs: false })
 const props = defineProps<{
@@ -33,11 +35,31 @@ const list = useRepeater({
   disabled: () => field.value.disabled,
 })
 const { rows } = list
-const root = ref<HTMLElement | null>(null)
+const rowsHost = ref<HTMLElement | null>(null)
+const reducedMotion = usePrefersReducedMotion()
 const addButton = ref<InstanceType<typeof LpButton> | null>(null)
 const focusable = 'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex="0"], [contenteditable="true"]'
 function focusRow(index: number) {
-  root.value?.querySelectorAll<HTMLElement>("[data-lp-repeater-row]")[index]?.querySelector<HTMLElement>(focusable)?.focus()
+  rowAt(index)?.querySelector<HTMLElement>(focusable)?.focus({ preventScroll: true })
+}
+function rowAt(index: number): HTMLElement | undefined {
+  return Array.from(rowsHost.value?.children ?? []).filter((node): node is HTMLElement =>
+    node.hasAttribute("data-lp-repeater-row") && !node.hasAttribute("inert"),
+  )[index]
+}
+function beforeLeave(el: Element) {
+  const row = el as HTMLElement
+  row.style.width = `${row.offsetWidth}px`
+  row.style.top = `${row.offsetTop}px`
+  row.setAttribute("inert", "")
+  row.setAttribute("aria-hidden", "true")
+}
+function beforeEnter(el: Element) {
+  const row = el as HTMLElement
+  row.removeAttribute("inert")
+  row.removeAttribute("aria-hidden")
+  row.style.removeProperty("top")
+  row.style.removeProperty("width")
 }
 async function add() {
   if (field.value.disabled) return
@@ -47,34 +69,63 @@ async function add() {
 }
 async function remove(index: number) {
   if (field.value.disabled) return
-  const row = root.value?.querySelectorAll<HTMLElement>("[data-lp-repeater-row]")[index]
+  const row = rowAt(index)
   const restore = row?.contains(row.ownerDocument.activeElement)
   list.remove(index)
   if (!restore) return
   await nextTick()
   if (model.value.length) focusRow(Math.min(index, model.value.length - 1))
-  else (addButton.value?.$el as HTMLElement | undefined)?.focus()
+  else (addButton.value?.$el as HTMLElement | undefined)?.focus({ preventScroll: true })
 }
 defineExpose({ add, remove, update: list.update })
 const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col gap-2")
 </script>
 
 <template>
-  <div ref="root" v-bind="rest" :class="rootClass">
+  <div v-bind="rest" :class="rootClass">
     <div class="flex items-center justify-between gap-2">
       <span v-if="label" class="text-sm font-medium text-ink">{{ label }}</span>
       <LpButton ref="addButton" size="xs" variant="ghost" :disabled="field.disabled" @click="add">
         <LpIcon name="lucide:plus" :size="14" />{{ text.add }}
       </LpButton>
     </div>
-    <div v-for="({ item, key }, index) in rows" :key="key" data-lp-repeater-row class="flex min-w-0 items-start gap-2">
-      <div class="min-w-0 flex-1">
-        <slot :item="item" :index="index" :disabled="field.disabled" :update="(next: T) => list.update(index, next)" :remove="() => remove(index)" />
+    <LpShift axis="height">
+      <div ref="rowsHost" class="relative flex min-w-0 flex-col gap-2">
+        <TransitionGroup name="lp-repeater" :css="!reducedMotion" @before-enter="beforeEnter" @before-leave="beforeLeave">
+          <div v-for="({ item, key }, index) in rows" :key="key" data-lp-repeater-row class="flex min-w-0 items-start gap-2">
+            <div class="min-w-0 flex-1">
+              <slot :item="item" :index="index" :disabled="field.disabled" :update="(next: T) => list.update(index, next)" :remove="() => remove(index)" />
+            </div>
+            <LpButton variant="ghost" size="sm" square :disabled="field.disabled" :aria-label="text.remove.replace('{index}', String(index + 1))" @click="remove(index)">
+              <LpIcon name="lucide:x" :size="14" />
+            </LpButton>
+          </div>
+          <div v-if="!rows.length" key="empty" class="text-xs text-muted"><slot name="empty">{{ text.empty }}</slot></div>
+        </TransitionGroup>
       </div>
-      <LpButton variant="ghost" size="sm" square :disabled="field.disabled" :aria-label="text.remove.replace('{index}', String(index + 1))" @click="remove(index)">
-        <LpIcon name="lucide:x" :size="14" />
-      </LpButton>
-    </div>
-    <div v-if="!rows.length" class="text-xs text-muted"><slot name="empty">{{ text.empty }}</slot></div>
+    </LpShift>
   </div>
 </template>
+
+<style>
+.lp-repeater-move,
+.lp-repeater-enter-active,
+.lp-repeater-leave-active {
+  transition: transform var(--duration-fast) var(--ease-emphasized), opacity var(--duration-fast) var(--ease-emphasized);
+}
+.lp-repeater-leave-active {
+  position: absolute;
+}
+.lp-repeater-enter-from,
+.lp-repeater-leave-to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-repeater-move,
+  .lp-repeater-enter-active,
+  .lp-repeater-leave-active {
+    transition: none;
+  }
+}
+</style>

package/src/components/LpRollingText.vue

@@ -35,6 +35,8 @@ const props = withDefaults(
      * width — a value that grows shouldn't shove its neighbours.
      */
     align?: "start" | "center" | "end"
+    /** Wrap to the available width instead of keeping a single line. */
+    wrap?: boolean
   }>(),
   { mode: "slide", direction: "up", duration: 320, align: "center" },
 )
@@ -63,7 +65,7 @@ const style = computed(() => ({
 <template>
   <span
     class="lp-roll relative inline-flex overflow-hidden align-bottom"
-    :class="justify"
+    :class="[justify, wrap && 'lp-roll--wrap']"
     :style="style"
   >
     <Transition :name="name">
@@ -93,6 +95,15 @@ const style = computed(() => ({
   backface-visibility: hidden;
 }
 
+.lp-roll--wrap {
+  max-width: 100%;
+}
+
+.lp-roll--wrap .lp-roll__item {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
 /* The outgoing copy leaves the flow so the incoming one keeps the baseline. */
 .lp-roll-up-leave-active,
 .lp-roll-down-leave-active,

package/src/components/LpSecretField.vue

@@ -37,6 +37,7 @@ import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { useScramble } from "../composables/useScramble"
 import { useLabels } from "../composables/useLpConfig"
+import { useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
 import LpButton from "./LpButton.vue"
@@ -91,7 +92,11 @@ const emit = defineEmits<{
 }>()
 
 /** Shown or hidden; bind it to drive the reveal from outside. */
-const revealed = defineModel<boolean>("revealed", { default: false })
+const revealedModel = defineModel<boolean>("revealed", { default: false })
+const revealed = computed({
+  get: () => props.revealable && revealedModel.value,
+  set: (value: boolean) => { revealedModel.value = value },
+})
 
 const text = useLabels<SecretFieldLabels>(
   "secretField",
@@ -107,6 +112,7 @@ const text = useLabels<SecretFieldLabels>(
 )
 
 const secret = computed(() => (props.input ? props.modelValue : props.value) ?? "")
+const control = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
 
 // Revealing decrypts the value into place, and a new value (a regenerated key)
 // decrypts over the old one: the change is seen happening, not just swapped.
@@ -167,7 +173,7 @@ const shell = computed(() =>
   mergeClass(
     "relative flex w-full items-center gap-1 overflow-hidden rounded-control border bg-surface-soft text-ink transition-colors duration-(--duration-fast)",
     props.error ? "border-danger" : "border-line",
-    props.disabled ? "opacity-55" : "",
+    control.value.disabled ? "opacity-55" : "",
     props.wrap ? "py-1.5" : "",
     { sm: "min-h-(--size-control-sm) pl-2.5 pr-1 text-xs", md: "min-h-(--size-control-md) pl-3 pr-1.5 text-sm", lg: "min-h-(--size-control-lg) pl-3.5 pr-1.5 text-sm" }[props.size],
   ),
@@ -184,7 +190,8 @@ const shell = computed(() =>
     class="[&_input]:font-mono"
     :model-value="modelValue"
     :placeholder="placeholder"
-    :disabled="disabled"
+    :disabled="control.disabled"
+    :revealable="revealable"
     :label="label"
     :hint="hint"
     :error="error"
@@ -199,7 +206,7 @@ const shell = computed(() =>
         :value="secret"
         size="xs"
         class="size-7"
-        :disabled="disabled"
+        :disabled="control.disabled"
         @copied="(t: string) => emit('copied', t)"
       />
       <slot name="actions" />
@@ -212,7 +219,7 @@ const shell = computed(() =>
         :aria-label="text.regenerate"
         :title="text.regenerate"
         :action="regenerate"
-        :disabled="disabled"
+        :disabled="control.disabled"
       >
         <LpIcon name="lucide:refresh-cw" :size="iconSize" />
       </LpButton>
@@ -264,7 +271,7 @@ const shell = computed(() =>
           :icon-size="iconSize"
           :show-label="text.show"
           :hide-label="text.hide"
-          :disabled="disabled"
+          :disabled="control.disabled"
           :controls="id"
           class="size-7"
         />
@@ -273,7 +280,7 @@ const shell = computed(() =>
           :value="secret"
           :size="copySize"
           class="size-7 text-muted hover:text-ink"
-          :disabled="disabled"
+          :disabled="control.disabled"
           @copied="(t: string) => emit('copied', t)"
         />
         <slot name="actions" />
@@ -284,7 +291,7 @@ const shell = computed(() =>
             square
             class="size-7 text-muted hover:text-ink"
             :action="regenerate"
-            :disabled="disabled"
+            :disabled="control.disabled"
           >
             <LpIcon name="lucide:refresh-cw" :size="iconSize" />
           </LpButton>

package/src/components/LpSelect.vue

@@ -36,7 +36,7 @@ import {
   ComboboxViewport,
 } from "reka-ui"
 import { computed, nextTick, reactive, ref, useAttrs, useId, watch } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { useFieldBlur, useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
@@ -178,12 +178,7 @@ function onOpenChange(open: boolean) {
 // are marked with one id, because the list is portalled away from the trigger
 // and a check on the trigger alone either missed the search box or took a
 // step into it for leaving.
-const partOf = `lp-select-${useId()}`
-function onFocusOut(event: FocusEvent) {
-  const next = event.relatedTarget as Element | null
-  const inside = !!next && typeof next.closest === "function" && !!next.closest(`[data-lp-select-part="${partOf}"]`)
-  if (!inside) emit("blur", event)
-}
+const { partId, onFocusOut } = useFieldBlur((event) => emit("blur", event))
 
 /*
  * The trigger's name. reka hard-codes aria-label="Show popup" on it, which hid
@@ -396,7 +391,7 @@ const guardOutside = useOutsideGuard()
     @update:open="onOpenChange"
   >
     <ComboboxAnchor
-      :data-lp-select-part="partOf"
+      :data-lp-field-part="partId"
       @focusout="onFocusOut"
       :class="[
         anchorHeight,
@@ -528,7 +523,7 @@ const guardOutside = useOutsideGuard()
 
     <ComboboxPortal :to="portalTo">
       <ComboboxContent
-        :data-lp-select-part="partOf"
+        :data-lp-field-part="partId"
         @focusout="onFocusOut"
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"

package/src/components/PickerField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAttrs } from "vue"
-import type { useFieldControl } from "../composables/useField"
+import { useFieldBlur, type useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import { PICKER_CLEAR, PICKER_PRESET, PICKER_PRESETS, PICKER_SIZE, PICKER_TRIGGER, pickerTone } from "./calendar"
 import LpIcon from "./LpIcon.vue"
@@ -21,13 +21,14 @@ withDefaults(defineProps<{
   presetsClass: string
 }>(), { size: "md" })
 const open = defineModel<boolean>("open")
-defineEmits<{ clear: [] }>()
+const emit = defineEmits<{ clear: []; blur: [event: FocusEvent] }>()
+const { partId, onFocusOut } = useFieldBlur((event) => emit("blur", event))
 const attrs = useAttrs()
 </script>
 
 <template>
-  <div :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
-    <LpPopover v-model:open="open" align="start" panel-class="flex w-auto max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 sm:flex-row">
+  <div :data-lp-field-part="partId" @focusout="onFocusOut" :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
+    <LpPopover v-model:open="open" :data-lp-field-part="partId" @focusout="onFocusOut" align="start" panel-class="flex w-auto max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 sm:flex-row">
       <template #trigger>
         <button
           v-bind="{ ...attrs, class: undefined, style: undefined }"

package/src/composables/useField.ts

@@ -1,4 +1,4 @@
-import { computed, inject, provide, useId, type ComputedRef, type InjectionKey } from "vue"
+import { computed, inject, onScopeDispose, provide, useId, type ComputedRef, type InjectionKey } from "vue"
 import type { FieldNoticeOptions } from "./useFieldNotice"
 
 /*
@@ -93,3 +93,28 @@ export function focusLeft(event: FocusEvent): boolean {
   const next = event.relatedTarget
   return !(next instanceof Node && (event.currentTarget as Node | null)?.contains(next))
 }
+
+/** Trigger and portalled content share a boundary for the control's public blur. */
+export function useFieldBlur(blur: (event: FocusEvent) => void) {
+  const partId = `lp-field-${useId()}`
+  let cancelPending: (() => void) | undefined
+  const inside = (target: EventTarget | null) =>
+    !!(target as Element | null)?.closest?.(`[data-lp-field-part="${partId}"]`)
+
+  function onFocusOut(event: FocusEvent) {
+    cancelPending?.()
+    if (inside(event.relatedTarget)) return
+    if (event.relatedTarget) return blur(event)
+    // A removed calendar cell can lose focus before its trigger gets it back.
+    const doc = (event.target as Node).ownerDocument!
+    const view = doc.defaultView!
+    const frame = view.requestAnimationFrame(() => {
+      cancelPending = undefined
+      if (!inside(doc.activeElement)) blur(event)
+    })
+    cancelPending = () => view.cancelAnimationFrame(frame)
+  }
+
+  onScopeDispose(() => cancelPending?.())
+  return { partId, onFocusOut }
+}

package/src/composables/useForm.ts

@@ -119,7 +119,8 @@ export function useForm<T extends object>(options: UseFormOptions<T>): UseForm<T
   const validating = ref(false)
   const submitting = ref(false)
   const submitCount = ref(0)
-  const runs = new Map<keyof T | "form", number>()
+  const runs = new Map<keyof T | "form", symbol>()
+  let validationEpoch = 0
   // What the form-level check set last, so its next run can take back what no
   // longer holds without touching an error a field rule set on the same key.
   const fromForm = new Map<keyof T | "form", string>()
@@ -148,7 +149,7 @@ export function useForm<T extends object>(options: UseFormOptions<T>): UseForm<T
   }
 
   async function runField(name: keyof T): Promise<boolean> {
-    const run = (runs.get(name) ?? 0) + 1
+    const run = Symbol()
     runs.set(name, run)
     const found = await checkField(name)
     if (runs.get(name) !== run) return !errors[name]
@@ -159,7 +160,7 @@ export function useForm<T extends object>(options: UseFormOptions<T>): UseForm<T
 
   async function runForm(): Promise<boolean> {
     if (!options.validate) return true
-    const run = (runs.get("form") ?? 0) + 1
+    const run = Symbol()
     runs.set("form", run)
     const found = (await options.validate(plain())) ?? {}
     if (runs.get("form") !== run) return true
@@ -177,12 +178,17 @@ export function useForm<T extends object>(options: UseFormOptions<T>): UseForm<T
   }
 
   async function validate(name?: keyof T): Promise<boolean> {
+    const epoch = validationEpoch
     validating.value = true
     try {
-      if (name !== undefined) return await runField(name)
+      if (name !== undefined) {
+        const valid = await runField(name)
+        return epoch === validationEpoch && valid
+      }
       const fields = await Promise.all(keys().map(runField))
+      if (epoch !== validationEpoch) return false
       const form = await runForm()
-      return fields.every(Boolean) && form && !Object.values(external).some(Boolean)
+      return epoch === validationEpoch && fields.every(Boolean) && form && !Object.values(external).some(Boolean)
     } finally {
       validating.value = false
     }
@@ -202,6 +208,7 @@ export function useForm<T extends object>(options: UseFormOptions<T>): UseForm<T
   }
 
   function clearState(): void {
+    validationEpoch++
     for (const k of Object.keys(errors)) delete errors[k as keyof T]
     for (const k of Object.keys(external)) delete external[k as keyof T]
     for (const k of Object.keys(touched)) delete touched[k as keyof T]
@@ -242,7 +249,9 @@ export function useForm<T extends object>(options: UseFormOptions<T>): UseForm<T
   // and runs the form-level check again once it has run: a cross-field error
   // ("passwords differ") must clear when either field is fixed.
   async function recheck(names: (keyof T)[]): Promise<void> {
+    const epoch = validationEpoch
     await Promise.all(names.map((name) => validate(name)))
+    if (epoch !== validationEpoch) return
     if (fromForm.size || submitCount.value) await runForm()
   }
 

package/src/composables/useView.ts

@@ -64,6 +64,9 @@ export function forwardViewEvents(from: Document, to: Document): () => void {
     const Copy = event.constructor as new (type: string, init: Event) => Event
     const copy = new Copy(event.type, event) as Marked
     copy[ORIGIN] = from
+    const path = event.composedPath()
+    Object.defineProperty(copy, "target", { value: event.target })
+    copy.composedPath = () => path
     to.dispatchEvent(copy)
   }
   for (const type of FORWARDED) from.addEventListener(type, forward)

package/dist/chunks/LpRepeater-D0VjmD6y.js

@@ -1,140 +0,0 @@
-import { defineComponent, useModel, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, createCommentVNode, createVNode, withCtx, createTextVNode, Fragment, renderList, renderSlot, mergeModels, nextTick } from "vue";
-import { useFieldControl } from "../composables/useField.js";
-import { useLabels } from "../composables/useLpConfig.js";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { useRepeater } from "../composables/useRepeater.js";
-import { _ as _sfc_main$1 } from "./LpButton-CVxBfGjd.js";
-import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
-const _hoisted_1 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_2 = {
-  key: 0,
-  class: "text-sm font-medium text-ink"
-};
-const _hoisted_3 = { class: "min-w-0 flex-1" };
-const _hoisted_4 = {
-  key: 0,
-  class: "text-xs text-muted"
-};
-const focusable = 'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex="0"], [contenteditable="true"]';
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ inheritAttrs: false },
-  __name: "LpRepeater",
-  props: /* @__PURE__ */ mergeModels({
-    createItem: { type: Function },
-    itemKey: { type: Function },
-    label: {},
-    disabled: { type: Boolean },
-    labels: {}
-  }, {
-    "modelValue": { default: () => [] },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const model = useModel(__props, "modelValue");
-    const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
-    const text = useLabels("repeater", { add: "Add item", remove: "Remove item {index}", empty: "No items" }, () => props.labels);
-    const list = useRepeater({
-      value: () => model.value,
-      set: (items) => {
-        model.value = items;
-      },
-      createItem: () => props.createItem(),
-      itemKey: () => props.itemKey,
-      disabled: () => field.value.disabled
-    });
-    const { rows } = list;
-    const root = ref(null);
-    const addButton = ref(null);
-    function focusRow(index) {
-      root.value?.querySelectorAll("[data-lp-repeater-row]")[index]?.querySelector(focusable)?.focus();
-    }
-    async function add() {
-      if (field.value.disabled) return;
-      list.add();
-      await nextTick();
-      focusRow(model.value.length - 1);
-    }
-    async function remove(index) {
-      if (field.value.disabled) return;
-      const row = root.value?.querySelectorAll("[data-lp-repeater-row]")[index];
-      const restore = row?.contains(row.ownerDocument.activeElement);
-      list.remove(index);
-      if (!restore) return;
-      await nextTick();
-      if (model.value.length) focusRow(Math.min(index, model.value.length - 1));
-      else addButton.value?.$el?.focus();
-    }
-    __expose({ add, remove, update: list.update });
-    const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col gap-2");
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({
-        ref_key: "root",
-        ref: root
-      }, unref(rest), { class: unref(rootClass) }), [
-        createElementVNode("div", _hoisted_1, [
-          __props.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
-          createVNode(_sfc_main$1, {
-            ref_key: "addButton",
-            ref: addButton,
-            size: "xs",
-            variant: "ghost",
-            disabled: unref(field).disabled,
-            onClick: add
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$2, {
-                name: "lucide:plus",
-                size: 14
-              }),
-              createTextVNode(toDisplayString(unref(text).add), 1)
-            ]),
-            _: 1
-          }, 8, ["disabled"])
-        ]),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), ({ item, key }, index) => {
-          return openBlock(), createElementBlock("div", {
-            key,
-            "data-lp-repeater-row": "",
-            class: "flex min-w-0 items-start gap-2"
-          }, [
-            createElementVNode("div", _hoisted_3, [
-              renderSlot(_ctx.$slots, "default", {
-                item,
-                index,
-                disabled: unref(field).disabled,
-                update: (next) => unref(list).update(index, next),
-                remove: () => remove(index)
-              })
-            ]),
-            createVNode(_sfc_main$1, {
-              variant: "ghost",
-              size: "sm",
-              square: "",
-              disabled: unref(field).disabled,
-              "aria-label": unref(text).remove.replace("{index}", String(index + 1)),
-              onClick: ($event) => remove(index)
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$2, {
-                  name: "lucide:x",
-                  size: 14
-                })
-              ]),
-              _: 1
-            }, 8, ["disabled", "aria-label", "onClick"])
-          ]);
-        }), 128)),
-        !unref(rows).length ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "empty", {}, () => [
-            createTextVNode(toDisplayString(unref(text).empty), 1)
-          ])
-        ])) : createCommentVNode("", true)
-      ], 16);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};