@alfakit/vue 0.1.2 → 0.1.6

package/dist/styles.css

@@ -19,6 +19,13 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * Class lists that live in @alfakit/core (stacked-on-mobile tables, filter and column manager
+ * widths in `table.ts`, …): scan core's build too. Relative to this file in
+ * node_modules/@alfakit/<renderer>/dist, next to node_modules/@alfakit/core.
+ */
+@source '../../core/dist';
+
 /*
  * Grid classes are composed at runtime from schema breakpoints (`columns`, `columnSpan`),
  * so force Tailwind to generate every variant the renderers can produce.
@@ -122,10 +129,10 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.54 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: var(--alfakit-danger, oklch(0.55 0.245 27.325));
+  --destructive: var(--alfakit-danger, oklch(0.5 0.245 27.325));
   --destructive-foreground: var(--alfakit-danger-foreground, oklch(0.985 0 0));
   --border: oklch(0.922 0 0);
   --input: oklch(0.64 0 0);

package/dist/themes.css

@@ -287,7 +287,7 @@
   --secondary: oklch(0.967 0.003 264.542);
   --secondary-foreground: oklch(0.21 0.034 264.665);
   --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
+  --muted-foreground: oklch(0.535 0.027 264.364);
   --accent: oklch(0.967 0.003 264.542);
   --accent-foreground: oklch(0.21 0.034 264.665);
   --border: oklch(0.928 0.006 264.531);
@@ -678,6 +678,11 @@
     color: var(--primary);
   }
 
+  /* The schema inspector's round button (dev tools) sits above the bar, not on its last item. */
+  :root[data-mobile='bottom'] [data-slot='dev-tools-toggle'] {
+    bottom: calc(var(--alfakit-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 1rem);
+  }
+
   /* Room for the bar, sticky actions sit right above it. */
   :root[data-mobile='bottom'] [data-slot='content'] {
     padding-bottom: calc(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/vue",
-  "version": "0.1.2",
+  "version": "0.1.6",
   "description": "Vue 3 + shadcn-vue renderer for Alfakit, the Laravel admin panel builder by Alfa Six.",
   "license": "MIT",
   "author": "Alfa Six (https://alfasixbh.com)",
@@ -96,7 +96,7 @@
     "reka-ui": "^2.11.0",
     "tailwind-merge": "^3.7.0",
     "vue-sonner": "^2.0.9",
-    "@alfakit/core": "0.1.2"
+    "@alfakit/core": "0.1.6"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^3.0.0",

package/src/AlfakitRoot.vue

@@ -52,7 +52,15 @@ watch(
   { immediate: true, flush: 'sync' },
 )
 
-watch(localization, (value) => applyDocumentLocale(value), { immediate: true })
+// Starter kit mode: the host app owns `<html lang dir>` (its own pages and layout are not
+// mirrored); `AlfakitStarterKitRoot` puts the direction on Alfakit's own root element.
+watch(
+  localization,
+  (value) => {
+    if (panel.value?.starterKit !== true) applyDocumentLocale(value)
+  },
+  { immediate: true },
+)
 watch(panel, (value) => applyPanelTheme(value), { immediate: true })
 </script>
 

package/src/components/actions/ActionGroupMenu.vue

@@ -13,7 +13,7 @@ import {
   registerKeyBindings,
   resolveActionSize,
 } from '@alfakit/core'
-import { computed, watchEffect } from 'vue'
+import { computed, useTemplateRef, watchEffect } from 'vue'
 import { useActionRunner, useT } from '../../context'
 import { colorClass, ghostButtonColorClasses, outlineButtonColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
@@ -40,6 +40,16 @@ const props = withDefaults(
   { size: 'default' },
 )
 
+// With a tooltip, the menu's trigger sits inside the tooltip's popper, so reka-ui hands the
+// trigger to the tooltip as its anchor and the menu would open off screen (at its unpositioned
+// `translate(0, -200%)`): anchor the menu to the button explicitly.
+const tooltipTrigger = useTemplateRef<{ $el?: Element }>('tooltipTrigger')
+const tooltipTriggerElement = computed(() =>
+  props.group.tooltip && tooltipTrigger.value?.$el instanceof Element
+    ? tooltipTrigger.value.$el
+    : undefined,
+)
+
 /** `dropdownWidth()`: widths of the dropdown, spelled out for Tailwind. */
 const DROPDOWN_WIDTHS: Record<string, string> = {
   '3xs': 'w-3xs',
@@ -155,6 +165,7 @@ watchEffect((onCleanup) => {
       <TooltipTrigger as-child>
         <DropdownMenuTrigger as-child>
           <Button
+            ref="tooltipTrigger"
             type="button"
             :variant="props.group.variant === 'button' ? 'outline' : 'ghost'"
             :size="buttonSize"
@@ -189,6 +200,7 @@ watchEffect((onCleanup) => {
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent
+      :reference="tooltipTriggerElement"
       :side="placement.side"
       :align="placement.align"
       :side-offset="props.group.dropdownOffset ?? undefined"

package/src/components/actions/ActionModal.vue

@@ -198,6 +198,15 @@ const passwordError = computed(() => props.modal.errors[PASSWORD_CONFIRMATION_IN
 const footerContext = nestedActionContext(context, action)
 
 const run = (createAnother: boolean) => {
+  // A click that blurred a live field started a refresh: send the state it returns.
+  if (form) {
+    form.whenSettled(() => execute(createAnother))
+  } else {
+    execute(createAnother)
+  }
+}
+
+const execute = (createAnother: boolean) => {
   const values = form?.state.values ?? {}
   const options = {
     ...(schema.value.passwordConfirmation ? { password: password.value } : {}),

package/src/components/ai/AiCopilot.vue

@@ -11,7 +11,11 @@ import { CopilotPanel, preloadCopilotPanel } from './copilot-lazy'
  * a chat slide-over. Questions, tools and actions run on the server; proposed actions
  * run only when the user confirms them in the chat.
  */
-const props = defineProps<{ component: AiCopilotSchema }>()
+const props = defineProps<{
+  component: AiCopilotSchema
+  /** Open once mounted (starter kit header: clicked or `mod+j` before its code loaded). */
+  autoOpen?: boolean
+}>()
 const t = useT()
 // One controller per panel: Inertia visits pass new props objects.
 const controller = new CopilotController(props.component)
@@ -25,6 +29,8 @@ const unsubscribe = controller.subscribe((next) => {
   if (next.open) mounted.value = true
 })
 
+if (props.autoOpen && props.component.canUse !== false) controller.open()
+
 let unregister: (() => void) | undefined
 
 watch(

package/src/components/cms/LivePreview.vue

@@ -65,6 +65,12 @@ const status = computed(() =>
     ? props.component.changedStatus
     : props.component.status,
 )
+// "Publish changes" appears as soon as an autosave makes the draft differ.
+const actions = computed(() =>
+  snapshot.value.hasChanges && props.component.changedActions
+    ? props.component.changedActions
+    : props.component.actions,
+)
 /** Badge colours of the status (the server's `PageState` colours). */
 const STATUS_COLORS: Record<string, string> = {
   gray: 'border-border bg-muted text-foreground',
@@ -227,8 +233,8 @@ onBeforeUnmount(() => {
             : t('cms.live_preview', {}, 'Live preview')
         }}
       </Button>
-      <div v-if="props.component.actions?.length" @pointerdown.capture="autosave?.flush()">
-        <ActionList :actions="props.component.actions" :context="actionContext" size="sm" />
+      <div v-if="actions?.length" @pointerdown.capture="autosave?.flush()">
+        <ActionList :actions="actions" :context="actionContext" size="sm" />
       </div>
     </div>
     <section

package/src/components/fields/BuilderField.vue

@@ -56,7 +56,7 @@ const registry = useOptionalRegistry()
 const form = useOptionalFormStore()
 const context = useFieldActionContext(() => props.component)
 const runItemAction = useRunItemAction(context)
-const fallbacks = useItemActionFallbacks()
+const fallbacks = useItemActionFallbacks('builder')
 const serverItemOf = (index: number) => {
   const server = props.component.items[index]
 
@@ -195,6 +195,19 @@ const onDrop = (index: number) => {
 }
 const setAllCollapsed = (value: boolean) => {
   collapsed.value = Object.fromEntries(items.value.map((_, index) => [index, value]))
+  if (value) refreshSummaries(items.value.map((_, index) => index))
+}
+// Summaries are made on the server: collapsing items whose block has one brings them up
+// to date with the edits.
+const refreshSummaries = (indexes: number[]) => {
+  if (indexes.some((index) => blockOf(items.value[index]?.type ?? '')?.summary)) {
+    void form?.refresh(props.component.statePath)
+  }
+}
+const toggleCollapsed = (index: number) => {
+  const collapse = !isCollapsed(index)
+  collapsed.value = { ...collapsed.value, [index]: collapse }
+  if (collapse) refreshSummaries([index])
 }
 
 // Previews (`blockPreviews()`): server HTML or a registered `builder-preview:{name}`.
@@ -356,7 +369,7 @@ const previewIsButton = computed(() => !props.component.interactivePreviews && !
                 @move="moves.moveWithButton"
                 @clone="cloneItem(index)"
                 @delete="removeItem(index)"
-                @toggle="collapsed = { ...collapsed, [index]: !isCollapsed(index) }"
+                @toggle="toggleCollapsed(index)"
               >
                 <Button
                   v-if="hasPreview(index) && !locked"

package/src/components/fields/ImageEditorDialog.vue

@@ -11,7 +11,7 @@ import type {
   ImageEditorDragMode,
   ImageEditorState,
 } from '@alfakit/core'
-import { ImageEditor, loadEditorImage } from '@alfakit/core'
+import { ImageEditor, imageEditorOptionsKey, loadEditorImage } from '@alfakit/core'
 import {
   FlipHorizontal2Icon,
   FlipVertical2Icon,
@@ -81,11 +81,15 @@ const release = () => {
   state.value = null
 }
 
+// Restart only for another image or other settings: the schema object itself is new on
+// every render of a template item (a new builder block), which kept restarting the load.
 watch(
-  () => [props.request, props.options] as const,
-  ([request, options], _previous, onCleanup) => {
+  [() => props.request, () => imageEditorOptionsKey(props.options)],
+  ([request], _previous, onCleanup) => {
     if (!request) return
 
+    const options = props.options
+
     let cancelled = false
 
     loadEditorImage(request.file)

package/src/components/fields/KeyValueField.vue

@@ -5,6 +5,7 @@ import {
   reorderedItemKeys,
   resolveItemAction,
   type KeyValueSchema,
+  itemActionIcon,
 } from '@alfakit/core'
 import { ChevronDownIcon, ChevronUpIcon } from '@lucide/vue'
 import { computed, ref } from 'vue'
@@ -60,13 +61,13 @@ const addAction = computed(() =>
 const deleteAction = computed(() =>
   resolveItemAction('delete', props.component, undefined, {
     label: t('form.remove_row', {}, 'Remove row'),
-    icon: 'trash-2',
+    icon: itemActionIcon('key-value', 'delete', 'trash-2'),
   }),
 )
 const reorderAction = computed(() =>
   resolveItemAction('reorder', props.component, undefined, {
     label: t('form.reorder_item', {}, 'Reorder'),
-    icon: 'grip-vertical',
+    icon: itemActionIcon('key-value', 'reorder', 'grip-vertical'),
   }),
 )
 const deletable = computed(

package/src/components/fields/ModalTablePicker.vue

@@ -15,7 +15,7 @@ import {
   SearchIcon,
 } from '@lucide/vue'
 import { computed, onScopeDispose, ref, watch } from 'vue'
-import { useChoice, useT } from '../../context'
+import { useChoice, useFormatter, useT } from '../../context'
 import { cn } from '../../lib/utils'
 import { useFormStore } from '../form/form-context'
 import TableCellContent from '../table/TableCellContent.vue'
@@ -43,6 +43,7 @@ const emit = defineEmits<{
   confirm: [keys: string[], labels: Record<string, string>]
 }>()
 const t = useT()
+const format = useFormatter()
 const choice = useChoice()
 const form = useFormStore()
 const multiple = computed(() => Boolean(props.component.multiple))
@@ -314,7 +315,11 @@ const confirm = () =>
             paging.total !== undefined
               ? t(
                   'table.showing',
-                  { first: paging.from, last: paging.to, total: paging.total },
+                  {
+                    first: format.number(paging.from),
+                    last: format.number(paging.to),
+                    total: format.number(paging.total),
+                  },
                   'Showing :first–:last of :total',
                 )
               : `${paging.from}–${paging.to}`

package/src/components/fields/RepeaterField.vue

@@ -13,7 +13,7 @@ import {
   removeIndexedState,
   removeRepeaterItem,
   reorderedItemKeys,
-  replacePlaceholder,
+  templateForIndex,
   resolveItemAction,
   virtualizeOptions,
   type ItemActionName,
@@ -82,8 +82,7 @@ const virtual = useVirtualList(
 useScrollToErroredItem(virtual, () => props.component.statePath)
 
 const schemaFor = (index: number): SchemaComponent[] =>
-  props.component.items[index]?.schema ??
-  replacePlaceholder(props.component.template, '__INDEX__', String(index))
+  props.component.items[index]?.schema ?? templateForIndex(props.component.template, index)
 const isCollapsed = (index: number) => collapsed.value[index] ?? props.component.collapsed ?? false
 
 const canAdd = computed(

package/src/components/fields/RichEditorInput.vue

@@ -32,6 +32,7 @@ import {
   toolbarCommands,
   panelUploadOptions,
   uploadTemporaryFile,
+  documentNonce,
 } from '@alfakit/core'
 import { EraserIcon } from '@lucide/vue'
 import Image from '@tiptap/extension-image'
@@ -230,6 +231,8 @@ onBeforeUnmount(() => {
 })
 
 const editor = useEditor({
+  // TipTap injects its base CSS; with the page's CSP nonce a nonce-based policy allows it.
+  injectNonce: documentNonce(),
   extensions: [
     StarterKit.configure({ link: false }),
     Link.configure(linkExtensionOptions(props.component.linkProtocols)),

package/src/components/fields/item-actions.ts

@@ -4,23 +4,44 @@ import type {
   ItemActionName,
   ItemActionSchema,
 } from '@alfakit/core'
-import { ItemMoveTracker, itemActionContext } from '@alfakit/core'
+import { ItemMoveTracker, itemActionContext, itemActionIcon } from '@alfakit/core'
 import { nextTick, ref, toValue, watch, type MaybeRefOrGetter } from 'vue'
 import { useActionRunner, useT } from '../../context'
 
-/** Default looks of the built-in item actions, for payloads without `itemActions`. */
-export function useItemActionFallbacks(): Record<ItemActionName, ItemActionFallback> {
+/** Default looks of the built-in item actions, for payloads without `itemActions` (icons follow their `alfakit::` aliases). */
+export function useItemActionFallbacks(
+  kind: 'repeater' | 'builder' = 'repeater',
+): Record<ItemActionName, ItemActionFallback> {
   const t = useT()
 
   return {
     add: { label: '', icon: 'plus', variant: 'outline' },
-    delete: { label: t('form.remove_item', {}, 'Remove'), icon: 'trash-2', color: 'danger' },
-    clone: { label: t('form.clone', {}, 'Clone'), icon: 'copy' },
-    reorder: { label: t('form.reorder_item', {}, 'Reorder'), icon: 'grip-vertical' },
-    moveUp: { label: t('form.move_up', {}, 'Move up'), icon: 'chevron-up' },
-    moveDown: { label: t('form.move_down', {}, 'Move down'), icon: 'chevron-down' },
-    collapse: { label: t('form.collapse_item', {}, 'Collapse'), icon: 'chevron-up' },
-    expand: { label: t('form.expand_item', {}, 'Expand'), icon: 'chevron-down' },
+    delete: {
+      label: t('form.remove_item', {}, 'Remove'),
+      icon: itemActionIcon(kind, 'delete', 'trash-2'),
+      color: 'danger',
+    },
+    clone: { label: t('form.clone', {}, 'Clone'), icon: itemActionIcon(kind, 'clone', 'copy') },
+    reorder: {
+      label: t('form.reorder_item', {}, 'Reorder'),
+      icon: itemActionIcon(kind, 'reorder', 'grip-vertical'),
+    },
+    moveUp: {
+      label: t('form.move_up', {}, 'Move up'),
+      icon: itemActionIcon(kind, 'move-up', 'chevron-up'),
+    },
+    moveDown: {
+      label: t('form.move_down', {}, 'Move down'),
+      icon: itemActionIcon(kind, 'move-down', 'chevron-down'),
+    },
+    collapse: {
+      label: t('form.collapse_item', {}, 'Collapse'),
+      icon: itemActionIcon(kind, 'collapse', 'chevron-up'),
+    },
+    expand: {
+      label: t('form.expand_item', {}, 'Expand'),
+      icon: itemActionIcon(kind, 'expand', 'chevron-down'),
+    },
     collapseAll: {
       label: t('form.collapse_all', {}, 'Collapse all'),
       icon: 'chevrons-down-up',

package/src/components/form/FormBlock.vue

@@ -151,7 +151,8 @@ const trigger = async (action: ActionSchema, ctx: ActionContext) => {
   submitting = true
   submittedBlock = props.block
   store.setProcessing(true)
-  runner.execute(action, ctx, store.state.values)
+  // A click that blurred a live field started a refresh: send the state it returns.
+  store.whenSettled(() => runner.execute(action, ctx, store.state.values))
 }
 
 // Track this form's own submit visit so unrelated reloads finishing meanwhile (polling,

package/src/components/form/form-context.ts

@@ -1,5 +1,5 @@
 import type { BaseField, FieldAriaAttributes, FormState, FormStore } from '@alfakit/core'
-import { fieldAria, fieldDomId } from '@alfakit/core'
+import { fieldAria, fieldDomId, fieldError } from '@alfakit/core'
 import {
   computed,
   inject,
@@ -70,7 +70,7 @@ export function useField<T = unknown>(field: MaybeRefOrGetter<BaseField>): Field
     return current as T
   })
 
-  const error = computed(() => state.value.errors[path]?.[0])
+  const error = computed(() => fieldError(state.value.errors, path))
   // Fields stay enabled during a live refresh: the store keeps edits made while the request
   // is in flight, so locking inputs would only swallow keystrokes.
   const disabled = computed(() => Boolean(toValue(field).disabled))

package/src/components/kanban/KanbanBoard.vue

@@ -122,9 +122,21 @@ const template = computed(() =>
     .join(' '),
 )
 
-const setCard = (key: string) => (element: unknown) => {
-  if (element instanceof HTMLElement) cards.set(key, element)
-  else cards.delete(key)
+// A card moved to another column is mounted there before its old element is unmounted, so
+// an unmount only forgets the element it registered itself (else the moved card would lose
+// its entry and the keyboard focus).
+const setCard = (key: string) => {
+  let own: HTMLElement | null = null
+
+  return (element: unknown) => {
+    if (element instanceof HTMLElement) {
+      own = element
+      cards.set(key, element)
+    } else if (own !== null) {
+      if (cards.get(key) === own) cards.delete(key)
+      own = null
+    }
+  }
 }
 
 const focus = (key: string | undefined) => {

package/src/components/kanban/KanbanColumnHeader.vue

@@ -3,7 +3,7 @@ import type { KanbanColumnSchema } from '@alfakit/core'
 import { kanbanWipState } from '@alfakit/core'
 import { ChevronsLeftRightIcon, ChevronsRightLeftIcon, PlusIcon } from '@lucide/vue'
 import { computed } from 'vue'
-import { useT } from '../../context'
+import { useChoice, useT } from '../../context'
 import { cssColor } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -19,6 +19,7 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{ toggle: []; create: [] }>()
 const t = useT()
+const choice = useChoice()
 
 const wip = computed(() => kanbanWipState(props.column))
 const shown = computed(() =>
@@ -41,7 +42,7 @@ const countLabel = computed(() => {
         { shown: column.total, count: column.count },
         ':shown of :count cards',
       )
-    : t('kanban.count', { count: column.count }, ':count cards')
+    : choice('kanban.count', column.count, {}, '{1} :count card|[0,*] :count cards')
 })
 const style = computed(() =>
   props.column.color ? { borderTopColor: cssColor(props.column.color) } : undefined,
@@ -147,10 +148,11 @@ const addLabel = computed(() =>
     </p>
     <p v-if="wip === 'over'" class="text-destructive text-xs">
       {{
-        t(
+        choice(
           'kanban.wip_over',
+          props.column.wipLimit ?? 0,
           { limit: props.column.wipLimit ?? 0 },
-          'Over the limit of :limit cards',
+          '{1} Over the limit of :limit card|[0,*] Over the limit of :limit cards',
         )
       }}
     </p>

package/src/components/layout/SectionComponent.vue

@@ -87,11 +87,14 @@ const t = useT()
           <component
             :is="heading"
             v-if="props.component.heading"
-            class="text-base leading-6 font-semibold"
+            class="text-base leading-6 font-semibold break-words"
           >
             {{ props.component.heading }}
           </component>
-          <p v-if="props.component.description" class="text-muted-foreground mt-1 text-sm">
+          <p
+            v-if="props.component.description"
+            class="text-muted-foreground mt-1 text-sm break-words"
+          >
             {{ props.component.description }}
           </p>
         </div>
@@ -188,11 +191,14 @@ const t = useT()
           <component
             :is="heading"
             v-if="props.component.heading"
-            class="text-base leading-6 font-semibold"
+            class="text-base leading-6 font-semibold break-words"
           >
             {{ props.component.heading }}
           </component>
-          <p v-if="props.component.description" class="text-muted-foreground mt-1 text-sm">
+          <p
+            v-if="props.component.description"
+            class="text-muted-foreground mt-1 text-sm break-words"
+          >
             {{ props.component.description }}
           </p>
         </div>

package/src/components/panel/GlobalSearchPalette.vue

@@ -30,6 +30,7 @@ import CommandEmpty from '../ui/CommandEmpty.vue'
 import CommandGroup from '../ui/CommandGroup.vue'
 import CommandInput from '../ui/CommandInput.vue'
 import CommandItem from '../ui/CommandItem.vue'
+import CommandAutoHighlight from '../ui/CommandAutoHighlight.vue'
 import CommandList from '../ui/CommandList.vue'
 import Spinner from '../ui/Spinner.vue'
 import ShortcutKeys from './ShortcutKeys.vue'
@@ -276,6 +277,7 @@ const hasResults = computed(() => groups.value.length > 0 || local.value.length
       @update:model-value="query = $event"
     />
     <CommandList>
+      <CommandAutoHighlight :items="[groups, local, leading]" />
       <CommandEmpty v-if="!loading && !hasResults">{{
         query ? t('no_results', {}, 'No results.') : placeholder
       }}</CommandEmpty>

package/src/components/realtime/use-live-updates.ts

@@ -6,7 +6,7 @@ import {
   type RecordKey,
 } from '@alfakit/core'
 import { onMounted, onScopeDispose, shallowRef, watch, type ShallowRef } from 'vue'
-import { usePollComponent } from '../../context'
+import { usePollComponent, useRefreshComponents } from '../../context'
 
 /**
  * Follow `live()` updates of a table or widget: refresh it in place when its records
@@ -22,6 +22,7 @@ export function useLiveUpdates(
   },
 ): { controller: ShallowRef<LiveUpdates | null>; state: ShallowRef<LiveUpdatesState> } {
   const poll = usePollComponent()
+  const refresh = useRefreshComponents()
   const controller = shallowRef<LiveUpdates | null>(null)
   const state = shallowRef<LiveUpdatesState>({ pending: 0, connected: false })
   let stop: (() => void) | null = null
@@ -68,6 +69,7 @@ export function useLiveUpdates(
           target,
           polling,
           poll,
+          refresh,
         })
 
         controller.value = next

package/src/components/table/ColumnHeader.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ColumnSchema, TableSchema } from '@alfakit/core'
-import { ariaSort, columnVisibilityClasses, visitTable } from '@alfakit/core'
+import { ariaSort, columnVisibilityClasses, debounce, visitTable } from '@alfakit/core'
 import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/vue'
 import { createReusableTemplate } from '@vueuse/core'
-import { ref } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 import { useT } from '../../context'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -47,17 +47,26 @@ const sort = () => {
   })
 }
 
+// The column search applies after the same pause as the table search; Enter applies at once.
+const pushColumnSearch = debounce(
+  (value: string) =>
+    visitTable(
+      props.table.identifier,
+      { columnSearch: { ...(props.table.columnSearches ?? {}), [props.column.name]: value } },
+      ['page'],
+    ),
+  props.table.searchDebounce,
+)
+
+onBeforeUnmount(() => pushColumnSearch.cancel())
+
+const onColumnSearchInput = (value: string) => {
+  if (!props.table.searchOnBlur) pushColumnSearch(value)
+}
+
 const columnSearch = (event: Event) => {
-  visitTable(
-    props.table.identifier,
-    {
-      columnSearch: {
-        ...(props.table.columnSearches ?? {}),
-        [props.column.name]: (event.target as HTMLInputElement).value,
-      },
-    },
-    ['page'],
-  )
+  pushColumnSearch((event.target as HTMLInputElement).value)
+  pushColumnSearch.flush()
 }
 </script>
 
@@ -138,6 +147,8 @@ const columnSearch = (event: Event) => {
         :placeholder="t('search', {}, 'Search')"
         :aria-label="`${t('search', {}, 'Search')} ${props.column.label}`"
         class="h-7 text-xs font-normal"
+        @update:model-value="onColumnSearchInput"
+        @blur="props.table.searchOnBlur && columnSearch($event)"
         @keydown.enter="columnSearch"
       />
     </div>