@alfakit/vue 0.1.2 → 0.1.7

package/dist/components/panel/TenantMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TenantMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","DropdownMenu","_withCtx","_createVNode","DropdownMenuTrigger","_createElementBlock","Avatar","AvatarImage","_createCommentVNode","AvatarFallback","_createTextVNode","_toDisplayString","_unref","_createElementVNode","NavLabel","Icon","SidebarMenuButton","DropdownMenuContent","DropdownMenuLabel","_withDirectives","_withModifiers","_vModelText","_Fragment","_renderList","DropdownMenuItem","DropdownMenuSeparator","MenuItemEntry","MenuItemEntries","Icon_default","DropdownMenu_default","DropdownMenuContent_default","DropdownMenuItem_default","DropdownMenuSeparator_default","DropdownMenuTrigger_default","DropdownMenuLabel_default","SidebarMenuButton_default","NavLabel_default","Avatar_default","AvatarFallback_default","AvatarImage_default","MenuItemEntry_default","MenuItemEntries_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","TenantMenu_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","panel","usePanel","tenancy","computed","current","search","ref","hasSwitcher","tenants","filterTenants","openBlock","createBlock","withCtx","createVNode","createElementBlock","createCommentVNode","createTextVNode","toDisplayString","unref","initials","tenantNameText","createElementVNode","ChevronsUpDownIcon","SearchIcon","withDirectives","_cache","$event","withModifiers","vModelText","Fragment","renderList","tenant","router","CheckIcon","Link","SettingsIcon","PlusIcon"],"sources":["../../../src/components/panel/TenantMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { filterTenants, initials, tenantNameText } from '@alfakit/core'\nimport { Link, router } from '@inertiajs/vue3'\nimport { CheckIcon, ChevronsUpDownIcon, PlusIcon, SearchIcon, SettingsIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Avatar from '../ui/Avatar.vue'\nimport AvatarFallback from '../ui/AvatarFallback.vue'\nimport AvatarImage from '../ui/AvatarImage.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuLabel from '../ui/DropdownMenuLabel.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport SidebarMenuButton from '../ui/SidebarMenuButton.vue'\nimport MenuItemEntries from './MenuItemEntries.vue'\nimport MenuItemEntry from './MenuItemEntry.vue'\nimport NavLabel from './NavLabel.vue'\n\n/**\n * The tenant switcher: a sidebar header button, or a compact button in the top bar of the\n * `topbar` layout (`variant=\"topbar\"`), where the store name shows from `lg` up.\n */\nconst props = withDefaults(defineProps<{ variant?: 'sidebar' | 'topbar' }>(), {\n  variant: 'sidebar',\n})\n\nconst t = useT()\nconst panel = usePanel()\nconst tenancy = computed(() => panel.value.tenancy)\nconst current = computed(() => tenancy.value?.current)\nconst search = ref('')\n// `tenantSwitcher(false)` sends no tenants; `searchableTenantMenu()` adds a search field.\nconst hasSwitcher = computed(\n  () => tenancy.value?.switcher !== false && (tenancy.value?.tenants.length ?? 0) > 0,\n)\nconst tenants = computed(() =>\n  tenancy.value?.searchable\n    ? filterTenants(tenancy.value.tenants, search.value)\n    : (tenancy.value?.tenants ?? []),\n)\n</script>\n\n<template>\n  <DropdownMenu v-if=\"tenancy && current\">\n    <DropdownMenuTrigger as-child>\n      <button\n        v-if=\"props.variant === 'topbar'\"\n        type=\"button\"\n        data-slot=\"tenant-menu\"\n        class=\"hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n      >\n        <Avatar class=\"size-6 rounded-md\">\n          <AvatarImage v-if=\"current.avatar\" :src=\"current.avatar\" alt=\"\" />\n          <AvatarFallback class=\"rounded-md text-[10px]\">{{\n            initials(tenantNameText(current))\n          }}</AvatarFallback>\n        </Avatar>\n        <span\n          class=\"sr-only min-w-0 truncate lg:not-sr-only lg:grid lg:text-start lg:leading-tight\"\n        >\n          <span\n            v-if=\"current.label\"\n            data-slot=\"tenant-menu-label\"\n            class=\"text-muted-foreground text-[10px]\"\n            >{{ current.label }}\n          </span>\n          <NavLabel class=\"truncate\" :text=\"current.name\" :html=\"current.nameHtml\" />\n        </span>\n        <Icon\n          name=\"alfakit::panels.tenant-menu.toggle-button\"\n          :fallback=\"ChevronsUpDownIcon\"\n          class=\"text-muted-foreground size-4 shrink-0\"\n        />\n      </button>\n      <SidebarMenuButton v-else size=\"lg\" class=\"data-[state=open]:bg-sidebar-accent\">\n        <Avatar class=\"size-8 rounded-lg\">\n          <AvatarImage v-if=\"current.avatar\" :src=\"current.avatar\" :alt=\"tenantNameText(current)\" />\n          <AvatarFallback class=\"rounded-lg\">{{\n            initials(tenantNameText(current))\n          }}</AvatarFallback>\n        </Avatar>\n        <div class=\"grid flex-1 text-start text-sm leading-tight\">\n          <!-- `HasCurrentTenantLabel`: a caption above the name instead of the brand. -->\n          <span\n            v-if=\"current.label\"\n            data-slot=\"tenant-menu-label\"\n            class=\"text-muted-foreground truncate text-xs\"\n            >{{ current.label }}</span\n          >\n          <NavLabel class=\"truncate font-medium\" :text=\"current.name\" :html=\"current.nameHtml\" />\n          <span v-if=\"!current.label\" class=\"text-muted-foreground truncate text-xs\">{{\n            panel.brandName\n          }}</span>\n        </div>\n        <Icon\n          name=\"alfakit::panels.tenant-menu.toggle-button\"\n          :fallback=\"ChevronsUpDownIcon\"\n          class=\"ms-auto size-4\"\n        />\n      </SidebarMenuButton>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"min-w-56 rounded-lg\" side=\"bottom\" align=\"start\" :side-offset=\"4\">\n      <DropdownMenuLabel v-if=\"hasSwitcher\" class=\"text-muted-foreground text-xs\">{{\n        t('tenancy.switch', {}, 'Switch')\n      }}</DropdownMenuLabel>\n      <div\n        v-if=\"hasSwitcher && tenancy.searchable\"\n        data-slot=\"tenant-menu-search\"\n        class=\"relative px-1 pb-1\"\n      >\n        <SearchIcon\n          class=\"text-muted-foreground pointer-events-none absolute start-3 top-1/2 size-3.5 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n        <!-- Keep the menu's type-ahead from taking the keys. -->\n        <input\n          v-model=\"search\"\n          type=\"search\"\n          :placeholder=\"t('tenancy.search', {}, 'Search')\"\n          :aria-label=\"t('tenancy.search', {}, 'Search')\"\n          class=\"border-input focus-visible:ring-ring/50 h-8 w-full rounded-md border bg-transparent ps-7 pe-2 text-sm outline-none focus-visible:ring-[3px]\"\n          @keydown.stop\n        />\n      </div>\n      <p\n        v-if=\"hasSwitcher && tenancy.searchable && tenants.length === 0\"\n        class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n      >\n        {{ t('no_results', {}, 'No results.') }}\n      </p>\n      <DropdownMenuItem\n        v-for=\"tenant in tenants\"\n        :key=\"String(tenant.id)\"\n        @select=\"router.visit(tenant.url)\"\n      >\n        <Avatar class=\"size-6 rounded-sm\">\n          <AvatarImage v-if=\"tenant.avatar\" :src=\"tenant.avatar\" :alt=\"tenantNameText(tenant)\" />\n          <AvatarFallback class=\"rounded-sm text-[10px]\">{{\n            initials(tenantNameText(tenant))\n          }}</AvatarFallback>\n        </Avatar>\n        <NavLabel class=\"flex-1 truncate\" :text=\"tenant.name\" :html=\"tenant.nameHtml\" />\n        <CheckIcon v-if=\"String(tenant.id) === String(current.id)\" class=\"size-4\" />\n      </DropdownMenuItem>\n      <DropdownMenuSeparator\n        v-if=\"\n          hasSwitcher && (tenancy.registrationUrl || tenancy.profileUrl || tenancy.menu?.length)\n        \"\n      />\n      <MenuItemEntry v-if=\"tenancy.profile\" :item=\"tenancy.profile\" menu=\"tenantMenu\" />\n      <DropdownMenuItem v-else-if=\"tenancy.profileUrl\" as-child>\n        <Link :href=\"tenancy.profileUrl\" class=\"w-full\"\n          ><Icon name=\"alfakit::panels.tenant-menu.profile-button\" :fallback=\"SettingsIcon\" />\n          {{ tenancy.profileLabel ?? t('tenancy.profile', {}, 'Settings') }}</Link\n        >\n      </DropdownMenuItem>\n      <MenuItemEntries v-if=\"tenancy.menu\" :items=\"tenancy.menu\" menu=\"tenantMenu\" />\n      <MenuItemEntry v-if=\"tenancy.registration\" :item=\"tenancy.registration\" menu=\"tenantMenu\" />\n      <DropdownMenuItem v-else-if=\"tenancy.registrationUrl\" as-child>\n        <Link :href=\"tenancy.registrationUrl\" class=\"w-full\"\n          ><Icon name=\"alfakit::panels.tenant-menu.registration-button\" :fallback=\"PlusIcon\" />\n          {{ tenancy.registrationLabel ?? t('tenancy.register', {}, 'New') }}</Link\n        >\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TenantMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","DropdownMenu","_withCtx","_createVNode","DropdownMenuTrigger","_createElementBlock","Avatar","AvatarImage","_createCommentVNode","AvatarFallback","_createTextVNode","_toDisplayString","_unref","_createElementVNode","NavLabel","Icon","SidebarMenuButton","DropdownMenuContent","DropdownMenuLabel","_withDirectives","_withModifiers","_vModelText","_Fragment","_renderList","DropdownMenuItem","DropdownMenuSeparator","MenuItemEntry","MenuItemEntries","Icon_default","DropdownMenu_default","DropdownMenuContent_default","DropdownMenuItem_default","DropdownMenuSeparator_default","DropdownMenuTrigger_default","DropdownMenuLabel_default","NavLabel_default","Avatar_default","AvatarFallback_default","AvatarImage_default","SidebarMenuButton_default","MenuItemEntry_default","MenuItemEntries_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","TenantMenu_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","panel","usePanel","tenancy","computed","current","search","ref","hasSwitcher","tenants","filterTenants","openBlock","createBlock","withCtx","createVNode","createElementBlock","createCommentVNode","createTextVNode","toDisplayString","unref","initials","tenantNameText","createElementVNode","ChevronsUpDownIcon","SearchIcon","withDirectives","_cache","$event","withModifiers","vModelText","Fragment","renderList","tenant","router","CheckIcon","Link","SettingsIcon","PlusIcon"],"sources":["../../../src/components/panel/TenantMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { filterTenants, initials, tenantNameText } from '@alfakit/core'\nimport { Link, router } from '@inertiajs/vue3'\nimport { CheckIcon, ChevronsUpDownIcon, PlusIcon, SearchIcon, SettingsIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Avatar from '../ui/Avatar.vue'\nimport AvatarFallback from '../ui/AvatarFallback.vue'\nimport AvatarImage from '../ui/AvatarImage.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuLabel from '../ui/DropdownMenuLabel.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport SidebarMenuButton from '../ui/SidebarMenuButton.vue'\nimport MenuItemEntries from './MenuItemEntries.vue'\nimport MenuItemEntry from './MenuItemEntry.vue'\nimport NavLabel from './NavLabel.vue'\n\n/**\n * The tenant switcher: a sidebar header button, or a compact button in the top bar of the\n * `topbar` layout (`variant=\"topbar\"`), where the store name shows from `lg` up.\n */\nconst props = withDefaults(defineProps<{ variant?: 'sidebar' | 'topbar' }>(), {\n  variant: 'sidebar',\n})\n\nconst t = useT()\nconst panel = usePanel()\nconst tenancy = computed(() => panel.value.tenancy)\nconst current = computed(() => tenancy.value?.current)\nconst search = ref('')\n// `tenantSwitcher(false)` sends no tenants; `searchableTenantMenu()` adds a search field.\nconst hasSwitcher = computed(\n  () => tenancy.value?.switcher !== false && (tenancy.value?.tenants.length ?? 0) > 0,\n)\nconst tenants = computed(() =>\n  tenancy.value?.searchable\n    ? filterTenants(tenancy.value.tenants, search.value)\n    : (tenancy.value?.tenants ?? []),\n)\n</script>\n\n<template>\n  <DropdownMenu v-if=\"tenancy && current\">\n    <DropdownMenuTrigger as-child>\n      <button\n        v-if=\"props.variant === 'topbar'\"\n        type=\"button\"\n        data-slot=\"tenant-menu\"\n        class=\"hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n      >\n        <Avatar class=\"size-6 rounded-md\">\n          <AvatarImage v-if=\"current.avatar\" :src=\"current.avatar\" alt=\"\" />\n          <AvatarFallback class=\"rounded-md text-[10px]\">{{\n            initials(tenantNameText(current))\n          }}</AvatarFallback>\n        </Avatar>\n        <span\n          class=\"sr-only min-w-0 truncate lg:not-sr-only lg:grid lg:text-start lg:leading-tight\"\n        >\n          <span\n            v-if=\"current.label\"\n            data-slot=\"tenant-menu-label\"\n            class=\"text-muted-foreground text-[10px]\"\n            >{{ current.label }}\n          </span>\n          <NavLabel class=\"truncate\" :text=\"current.name\" :html=\"current.nameHtml\" />\n        </span>\n        <Icon\n          name=\"alfakit::panels.tenant-menu.toggle-button\"\n          :fallback=\"ChevronsUpDownIcon\"\n          class=\"text-muted-foreground size-4 shrink-0\"\n        />\n      </button>\n      <SidebarMenuButton v-else size=\"lg\" class=\"data-[state=open]:bg-sidebar-accent\">\n        <Avatar class=\"size-8 rounded-lg\">\n          <AvatarImage v-if=\"current.avatar\" :src=\"current.avatar\" :alt=\"tenantNameText(current)\" />\n          <AvatarFallback class=\"rounded-lg\">{{\n            initials(tenantNameText(current))\n          }}</AvatarFallback>\n        </Avatar>\n        <div class=\"grid flex-1 text-start text-sm leading-tight\">\n          <!-- `HasCurrentTenantLabel`: a caption above the name instead of the brand. -->\n          <span\n            v-if=\"current.label\"\n            data-slot=\"tenant-menu-label\"\n            class=\"text-muted-foreground truncate text-xs\"\n            >{{ current.label }}</span\n          >\n          <NavLabel class=\"truncate font-medium\" :text=\"current.name\" :html=\"current.nameHtml\" />\n          <span v-if=\"!current.label\" class=\"text-muted-foreground truncate text-xs\">{{\n            panel.brandName\n          }}</span>\n        </div>\n        <Icon\n          name=\"alfakit::panels.tenant-menu.toggle-button\"\n          :fallback=\"ChevronsUpDownIcon\"\n          class=\"ms-auto size-4\"\n        />\n      </SidebarMenuButton>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"min-w-56 rounded-lg\" side=\"bottom\" align=\"start\" :side-offset=\"4\">\n      <DropdownMenuLabel v-if=\"hasSwitcher\" class=\"text-muted-foreground text-xs\">{{\n        t('tenancy.switch', {}, 'Switch')\n      }}</DropdownMenuLabel>\n      <div\n        v-if=\"hasSwitcher && tenancy.searchable\"\n        data-slot=\"tenant-menu-search\"\n        class=\"relative px-1 pb-1\"\n      >\n        <SearchIcon\n          class=\"text-muted-foreground pointer-events-none absolute start-3 top-1/2 size-3.5 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n        <!-- Keep the menu's type-ahead from taking the keys. -->\n        <input\n          v-model=\"search\"\n          type=\"search\"\n          :placeholder=\"t('tenancy.search', {}, 'Search')\"\n          :aria-label=\"t('tenancy.search', {}, 'Search')\"\n          class=\"border-input focus-visible:ring-ring/50 h-8 w-full rounded-md border bg-transparent ps-7 pe-2 text-sm outline-none focus-visible:ring-[3px]\"\n          @keydown.stop\n        />\n      </div>\n      <p\n        v-if=\"hasSwitcher && tenancy.searchable && tenants.length === 0\"\n        class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n      >\n        {{ t('no_results', {}, 'No results.') }}\n      </p>\n      <DropdownMenuItem\n        v-for=\"tenant in tenants\"\n        :key=\"String(tenant.id)\"\n        @select=\"router.visit(tenant.url)\"\n      >\n        <Avatar class=\"size-6 rounded-sm\">\n          <AvatarImage v-if=\"tenant.avatar\" :src=\"tenant.avatar\" :alt=\"tenantNameText(tenant)\" />\n          <AvatarFallback class=\"rounded-sm text-[10px]\">{{\n            initials(tenantNameText(tenant))\n          }}</AvatarFallback>\n        </Avatar>\n        <NavLabel class=\"flex-1 truncate\" :text=\"tenant.name\" :html=\"tenant.nameHtml\" />\n        <CheckIcon v-if=\"String(tenant.id) === String(current.id)\" class=\"size-4\" />\n      </DropdownMenuItem>\n      <DropdownMenuSeparator\n        v-if=\"\n          hasSwitcher && (tenancy.registrationUrl || tenancy.profileUrl || tenancy.menu?.length)\n        \"\n      />\n      <MenuItemEntry v-if=\"tenancy.profile\" :item=\"tenancy.profile\" menu=\"tenantMenu\" />\n      <DropdownMenuItem v-else-if=\"tenancy.profileUrl\" as-child>\n        <Link :href=\"tenancy.profileUrl\" class=\"w-full\"\n          ><Icon name=\"alfakit::panels.tenant-menu.profile-button\" :fallback=\"SettingsIcon\" />\n          {{ tenancy.profileLabel ?? t('tenancy.profile', {}, 'Settings') }}</Link\n        >\n      </DropdownMenuItem>\n      <MenuItemEntries v-if=\"tenancy.menu\" :items=\"tenancy.menu\" menu=\"tenantMenu\" />\n      <MenuItemEntry v-if=\"tenancy.registration\" :item=\"tenancy.registration\" menu=\"tenantMenu\" />\n      <DropdownMenuItem v-else-if=\"tenancy.registrationUrl\" as-child>\n        <Link :href=\"tenancy.registrationUrl\" class=\"w-full\"\n          ><Icon name=\"alfakit::panels.tenant-menu.registration-button\" :fallback=\"PlusIcon\" />\n          {{ tenancy.registrationLabel ?? t('tenancy.register', {}, 'New') }}</Link\n        >\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":"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"}

package/dist/components/panel/Topbar.vue_vue_type_script_setup_true_lang.js

@@ -3,12 +3,12 @@ import t from "./Slot.js";
 import n from "../notifications/NotificationsMenu.js";
 import r from "./GlobalSearch.js";
 import i from "./UserMenu.js";
-import a from "../ui/SidebarTrigger.js";
-import o from "./TopbarLocaleSwitcher.js";
-import s from "../ui/Separator.js";
-import c from "./Breadcrumbs.js";
-import l from "./DebugPanelSlot.js";
-import u from "./ThemeToggle.js";
+import a from "./Breadcrumbs.js";
+import o from "./DebugPanelSlot.js";
+import s from "./ThemeToggle.js";
+import c from "../ui/Separator.js";
+import l from "../ui/SidebarTrigger.js";
+import u from "./TopbarLocaleSwitcher.js";
 import { createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, openBlock as _, unref as v } from "vue";
 //#region src/components/panel/Topbar.vue?vue&type=script&setup=true&lang.ts
 var y = {
@@ -20,12 +20,12 @@ var y = {
 	setup(g) {
 		let x = g, S = e();
 		return (e, g) => (_(), p("header", y, [
-			h(a, { class: "-ms-1" }),
-			h(s, {
+			h(l, { class: "-ms-1" }),
+			h(c, {
 				orientation: "vertical",
 				class: "me-2 h-4"
 			}),
-			v(S).breadcrumbs && x.breadcrumbs ? (_(), d(c, {
+			v(S).breadcrumbs && x.breadcrumbs ? (_(), d(a, {
 				key: 0,
 				items: x.breadcrumbs
 			}, null, 8, ["items"])) : f("", !0),
@@ -34,9 +34,9 @@ var y = {
 				h(t, { name: "topbar.end" }),
 				v(S).topNavigation || v(S).globalSearch?.position !== "sidebar" ? (_(), d(r, { key: 0 })) : f("", !0),
 				v(S).databaseNotifications?.position === "sidebar" ? f("", !0) : (_(), d(n, { key: 1 })),
-				h(o),
 				h(u),
-				h(l),
+				h(s),
+				h(o),
 				v(S).topNavigation || v(S).userMenu?.position === "topbar" ? (_(), d(i, {
 					key: 2,
 					variant: "topbar"

package/dist/components/panel/Topbar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Topbar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","SidebarTrigger","Separator","_unref","_createBlock","Breadcrumbs","_createCommentVNode","Slot","_createElementVNode","GlobalSearch","NotificationsMenu","TopbarLocaleSwitcher","ThemeToggle","DebugPanelSlot","UserMenu","Slot_default","NotificationsMenu_default","GlobalSearch_default","UserMenu_default","SidebarTrigger_default","TopbarLocaleSwitcher_default","Separator_default","Breadcrumbs_default","DebugPanelSlot_default","ThemeToggle_default","_hoisted_1","_hoisted_2","Topbar_vue_vue_type_script_setup_true_lang_default","props","__props","panel","usePanel","openBlock","createElementBlock","createVNode","unref","createBlock","createCommentVNode","createElementVNode"],"sources":["../../../src/components/panel/Topbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BreadcrumbSchema } from '@alfakit/core'\nimport { usePanel } from '../../context'\nimport NotificationsMenu from '../notifications/NotificationsMenu.vue'\nimport Separator from '../ui/Separator.vue'\nimport SidebarTrigger from '../ui/SidebarTrigger.vue'\nimport Breadcrumbs from './Breadcrumbs.vue'\nimport DebugPanelSlot from './DebugPanelSlot.vue'\nimport GlobalSearch from './GlobalSearch.vue'\nimport Slot from './Slot.vue'\nimport ThemeToggle from './ThemeToggle.vue'\nimport TopbarLocaleSwitcher from './TopbarLocaleSwitcher.vue'\nimport UserMenu from './UserMenu.vue'\n\nconst props = defineProps<{ breadcrumbs?: BreadcrumbSchema[] }>()\nconst panel = usePanel()\n</script>\n\n<template>\n  <header\n    data-slot=\"topbar\"\n    class=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-20 flex h-14 min-w-0 shrink-0 items-center gap-2 border-b px-4 backdrop-blur\"\n  >\n    <SidebarTrigger class=\"-ms-1\" />\n    <Separator orientation=\"vertical\" class=\"me-2 h-4\" />\n    <Breadcrumbs v-if=\"panel.breadcrumbs && props.breadcrumbs\" :items=\"props.breadcrumbs\" />\n    <Slot name=\"topbar.start\" />\n    <div class=\"ms-auto flex items-center gap-1\">\n      <Slot name=\"topbar.end\" />\n      <!-- `globalSearch(position: Sidebar)` moves the field to the sidebar header. -->\n      <GlobalSearch v-if=\"panel.topNavigation || panel.globalSearch?.position !== 'sidebar'\" />\n      <NotificationsMenu v-if=\"panel.databaseNotifications?.position !== 'sidebar'\" />\n      <TopbarLocaleSwitcher />\n      <ThemeToggle />\n      <DebugPanelSlot />\n      <!-- `userMenu(position: Topbar)` moves the menu out of the sidebar footer. -->\n      <UserMenu\n        v-if=\"panel.topNavigation || panel.userMenu?.position === 'topbar'\"\n        variant=\"topbar\"\n      />\n    </div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAcA,IAAM8B,IAAQC,GACRC,IAAQC,EAAS;oBAIrBjC,EAAA,GAAAC,EAsBS,UAtBT0B,GAsBS;GAlBPzB,EAAgCC,GAAA,EAAhB,OAAM,QAAO,CAAA;GAC7BD,EAAqDE,GAAA;IAA1C,aAAY;IAAW,OAAM;;GACrBC,EAAA2B,CAAA,CAAK,CAAC,eAAeF,EAAM,eAA9C9B,EAAA,GAAAM,EAAwFC,GAAA;;IAA5B,OAAOuB,EAAM;;GACzE5B,EAA4BO,GAAA,EAAtB,MAAK,eAAc,CAAA;GACzBC,EAaM,OAbNkB,GAaM;IAZJ1B,EAA0BO,GAAA,EAApB,MAAK,aAAY,CAAA;IAEHJ,EAAA2B,CAAA,CAAK,CAAC,iBAAiB3B,EAAA2B,CAAA,CAAK,CAAC,cAAc,aAAQ,aAAvEhC,EAAA,GAAAM,EAAyFK,GAAA,EAAA,KAAA,EAAA,CAAA,KAAA4B,EAAA,IAAA,EAAA;IAChElC,EAAA2B,CAAA,CAAK,CAAC,uBAAuB,aAAQ,YAAkBO,EAAA,IAAA,EAAA,KAAhFvC,EAAA,GAAAM,EAAgFM,GAAA,EAAA,KAAA,EAAA,CAAA;IAChFV,EAAwBW,CAAA;IACxBX,EAAeY,CAAA;IACfZ,EAAkBa,CAAA;IAGVV,EAAA2B,CAAA,CAAK,CAAC,iBAAiB3B,EAAA2B,CAAA,CAAK,CAAC,UAAU,aAAQ,YADvDhC,EAAA,GAAAM,EAGEU,GAAA;;KADA,SAAQ"}
+{"version":3,"file":"Topbar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","SidebarTrigger","Separator","_unref","_createBlock","Breadcrumbs","_createCommentVNode","Slot","_createElementVNode","GlobalSearch","NotificationsMenu","TopbarLocaleSwitcher","ThemeToggle","DebugPanelSlot","UserMenu","Slot_default","NotificationsMenu_default","GlobalSearch_default","UserMenu_default","Breadcrumbs_default","DebugPanelSlot_default","ThemeToggle_default","Separator_default","SidebarTrigger_default","TopbarLocaleSwitcher_default","_hoisted_1","_hoisted_2","Topbar_vue_vue_type_script_setup_true_lang_default","props","__props","panel","usePanel","openBlock","createElementBlock","createVNode","unref","createBlock","createCommentVNode","createElementVNode"],"sources":["../../../src/components/panel/Topbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BreadcrumbSchema } from '@alfakit/core'\nimport { usePanel } from '../../context'\nimport NotificationsMenu from '../notifications/NotificationsMenu.vue'\nimport Separator from '../ui/Separator.vue'\nimport SidebarTrigger from '../ui/SidebarTrigger.vue'\nimport Breadcrumbs from './Breadcrumbs.vue'\nimport DebugPanelSlot from './DebugPanelSlot.vue'\nimport GlobalSearch from './GlobalSearch.vue'\nimport Slot from './Slot.vue'\nimport ThemeToggle from './ThemeToggle.vue'\nimport TopbarLocaleSwitcher from './TopbarLocaleSwitcher.vue'\nimport UserMenu from './UserMenu.vue'\n\nconst props = defineProps<{ breadcrumbs?: BreadcrumbSchema[] }>()\nconst panel = usePanel()\n</script>\n\n<template>\n  <header\n    data-slot=\"topbar\"\n    class=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-20 flex h-14 min-w-0 shrink-0 items-center gap-2 border-b px-4 backdrop-blur\"\n  >\n    <SidebarTrigger class=\"-ms-1\" />\n    <Separator orientation=\"vertical\" class=\"me-2 h-4\" />\n    <Breadcrumbs v-if=\"panel.breadcrumbs && props.breadcrumbs\" :items=\"props.breadcrumbs\" />\n    <Slot name=\"topbar.start\" />\n    <div class=\"ms-auto flex items-center gap-1\">\n      <Slot name=\"topbar.end\" />\n      <!-- `globalSearch(position: Sidebar)` moves the field to the sidebar header. -->\n      <GlobalSearch v-if=\"panel.topNavigation || panel.globalSearch?.position !== 'sidebar'\" />\n      <NotificationsMenu v-if=\"panel.databaseNotifications?.position !== 'sidebar'\" />\n      <TopbarLocaleSwitcher />\n      <ThemeToggle />\n      <DebugPanelSlot />\n      <!-- `userMenu(position: Topbar)` moves the menu out of the sidebar footer. -->\n      <UserMenu\n        v-if=\"panel.topNavigation || panel.userMenu?.position === 'topbar'\"\n        variant=\"topbar\"\n      />\n    </div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAcA,IAAM8B,IAAQC,GACRC,IAAQC,EAAS;oBAIrBjC,EAAA,GAAAC,EAsBS,UAtBT0B,GAsBS;GAlBPzB,EAAgCC,GAAA,EAAhB,OAAM,QAAO,CAAA;GAC7BD,EAAqDE,GAAA;IAA1C,aAAY;IAAW,OAAM;;GACrBC,EAAA2B,CAAA,CAAK,CAAC,eAAeF,EAAM,eAA9C9B,EAAA,GAAAM,EAAwFC,GAAA;;IAA5B,OAAOuB,EAAM;;GACzE5B,EAA4BO,GAAA,EAAtB,MAAK,eAAc,CAAA;GACzBC,EAaM,OAbNkB,GAaM;IAZJ1B,EAA0BO,GAAA,EAApB,MAAK,aAAY,CAAA;IAEHJ,EAAA2B,CAAA,CAAK,CAAC,iBAAiB3B,EAAA2B,CAAA,CAAK,CAAC,cAAc,aAAQ,aAAvEhC,EAAA,GAAAM,EAAyFK,GAAA,EAAA,KAAA,EAAA,CAAA,KAAA4B,EAAA,IAAA,EAAA;IAChElC,EAAA2B,CAAA,CAAK,CAAC,uBAAuB,aAAQ,YAAkBO,EAAA,IAAA,EAAA,KAAhFvC,EAAA,GAAAM,EAAgFM,GAAA,EAAA,KAAA,EAAA,CAAA;IAChFV,EAAwBW,CAAA;IACxBX,EAAeY,CAAA;IACfZ,EAAkBa,CAAA;IAGVV,EAAA2B,CAAA,CAAK,CAAC,iBAAiB3B,EAAA2B,CAAA,CAAK,CAAC,UAAU,aAAQ,YADvDhC,EAAA,GAAAM,EAGEU,GAAA;;KADA,SAAQ"}

package/dist/components/realtime/use-live-updates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-live-updates.d.ts","sourceRoot":"","sources":["../../../src/components/realtime/use-live-updates.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EAEX,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,MAAM,eAAe,CAAA;AACtB,OAAO,EAAgD,KAAK,UAAU,EAAE,MAAM,KAAK,CAAA;AAGnF;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM;IACZ,IAAI,EAAE,iBAAiB,GAAG,SAAS,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,aAAa,CAAC;QAAE,GAAG,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;CACpD,GACA;IAAE,UAAU,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAA;CAAE,CA+DrF"}
+{"version":3,"file":"use-live-updates.d.ts","sourceRoot":"","sources":["../../../src/components/realtime/use-live-updates.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EAEX,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,MAAM,eAAe,CAAA;AACtB,OAAO,EAAgD,KAAK,UAAU,EAAE,MAAM,KAAK,CAAA;AAGnF;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM;IACZ,IAAI,EAAE,iBAAiB,GAAG,SAAS,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,aAAa,CAAC;QAAE,GAAG,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;CACpD,GACA;IAAE,UAAU,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAA;CAAE,CAiErF"}

package/dist/components/realtime/use-live-updates.js

@@ -1,20 +1,20 @@
-import { usePollComponent as e } from "../../context.js";
-import { LiveUpdates as t, shownRecordKeys as n } from "@alfakit/core";
-import { onMounted as r, onScopeDispose as i, shallowRef as a, watch as o } from "vue";
+import { usePollComponent as e, useRefreshComponents as t } from "../../context.js";
+import { LiveUpdates as n, shownRecordKeys as r } from "@alfakit/core";
+import { onMounted as i, onScopeDispose as a, shallowRef as o, watch as s } from "vue";
 //#region src/components/realtime/use-live-updates.ts
-function s(s) {
-	let c = e(), l = a(null), u = a({
+function c(c) {
+	let l = e(), u = t(), d = o(null), f = o({
 		pending: 0,
 		connected: !1
-	}), d = null, f = null, p = () => {
-		d?.(), f?.(), d = null, f = null;
+	}), p = null, m = null, h = () => {
+		p?.(), m?.(), p = null, m = null;
 	};
-	return r(() => {
-		o(() => {
-			let { records: e } = s();
+	return i(() => {
+		s(() => {
+			let { records: e } = c();
 			return e;
-		}, (e) => l.value?.setShownKeys(e === void 0 ? null : n(e)), { immediate: !0 }), o(() => {
-			let { live: e, target: t, polling: n, records: r } = s();
+		}, (e) => d.value?.setShownKeys(e === void 0 ? null : r(e)), { immediate: !0 }), s(() => {
+			let { live: e, target: t, polling: n, records: r } = c();
 			return JSON.stringify([
 				e ?? null,
 				t,
@@ -22,26 +22,27 @@ function s(s) {
 				r === void 0
 			]);
 		}, () => {
-			p();
-			let { live: e, target: r, polling: i, records: a } = s();
+			h();
+			let { live: e, target: t, polling: i, records: a } = c();
 			if (!e) {
-				l.value = null;
+				d.value = null;
 				return;
 			}
-			let o = new t({
+			let o = new n({
 				live: e,
-				target: r,
+				target: t,
 				polling: i,
-				poll: c
+				poll: l,
+				refresh: u
 			});
-			l.value = o, o.setShownKeys(a === void 0 ? null : n(a)), u.value = o.store.get(), f = o.store.subscribe((e) => u.value = e), d = o.start();
+			d.value = o, o.setShownKeys(a === void 0 ? null : r(a)), f.value = o.store.get(), m = o.store.subscribe((e) => f.value = e), p = o.start();
 		}, { immediate: !0 });
-	}), i(p), {
-		controller: l,
-		state: u
+	}), a(h), {
+		controller: d,
+		state: f
 	};
 }
 //#endregion
-export { s as useLiveUpdates };
+export { c as useLiveUpdates };
 
 //# sourceMappingURL=use-live-updates.js.map

package/dist/components/realtime/use-live-updates.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-live-updates.js","names":["useLiveUpdates","poll","usePollComponent","controller","shallowRef","state","stop","unsubscribe","dispose","onMounted","watch","source","records","shownRecordKeys","live","target","polling","next","LiveUpdates","value","onScopeDispose"],"sources":["../../../src/components/realtime/use-live-updates.ts"],"sourcesContent":["import {\n  LiveUpdates,\n  shownRecordKeys,\n  type LiveUpdatesSchema,\n  type LiveUpdatesState,\n  type RecordKey,\n} from '@alfakit/core'\nimport { onMounted, onScopeDispose, shallowRef, watch, type ShallowRef } from 'vue'\nimport { usePollComponent } from '../../context'\n\n/**\n * Follow `live()` updates of a table or widget: refresh it in place when its records\n * change, polling instead without Echo. Browser only. Returns the controller and its state\n * (`pending` counts created records for `<LiveRecordsPill>`).\n */\nexport function useLiveUpdates(\n  source: () => {\n    live: LiveUpdatesSchema | undefined\n    target: string\n    polling?: boolean\n    records?: ReadonlyArray<{ key?: RecordKey }> | null\n  },\n): { controller: ShallowRef<LiveUpdates | null>; state: ShallowRef<LiveUpdatesState> } {\n  const poll = usePollComponent()\n  const controller = shallowRef<LiveUpdates | null>(null)\n  const state = shallowRef<LiveUpdatesState>({ pending: 0, connected: false })\n  let stop: (() => void) | null = null\n  let unsubscribe: (() => void) | null = null\n\n  const dispose = () => {\n    stop?.()\n    unsubscribe?.()\n    stop = null\n    unsubscribe = null\n  }\n\n  onMounted(() => {\n    watch(\n      () => {\n        const { records } = source()\n\n        return records\n      },\n      (records) =>\n        controller.value?.setShownKeys(records === undefined ? null : shownRecordKeys(records)),\n      { immediate: true },\n    )\n\n    watch(\n      () => {\n        const { live, target, polling, records } = source()\n\n        return JSON.stringify([live ?? null, target, Boolean(polling), records === undefined])\n      },\n      () => {\n        dispose()\n\n        const { live, target, polling, records } = source()\n\n        if (!live) {\n          controller.value = null\n\n          return\n        }\n\n        const next = new LiveUpdates({\n          live,\n          target,\n          polling,\n          poll,\n        })\n\n        controller.value = next\n        next.setShownKeys(records === undefined ? null : shownRecordKeys(records))\n        state.value = next.store.get()\n        unsubscribe = next.store.subscribe((value) => (state.value = value))\n        stop = next.start()\n      },\n      { immediate: true },\n    )\n  })\n\n  onScopeDispose(dispose)\n\n  return { controller, state }\n}\n"],"mappings":";;;;AAeA,SAAgBA,EACd,GAMqF;CACrF,IAAMC,IAAOC,EAAiB,GACxBC,IAAaC,EAA+B,IAAI,GAChDC,IAAQD,EAA6B;EAAE,SAAS;EAAG,WAAW;CAAM,CAAC,GACvEE,IAA4B,MAC5BC,IAAmC,MAEjCC,UAAgB;EAIpB,AAHAF,IAAO,GACPC,IAAc,GACd,IAAO,MACP,IAAc;CAChB;CAkDA,OAhDAE,QAAgB;EAYd,AAXAC,QACQ;GACJ,IAAM,EAAE,eAAYC,EAAO;GAE3B,OAAOC;EACT,IACC,MACCT,EAAW,OAAO,aAAaS,MAAY,KAAA,IAAY,OAAOC,EAAgBD,CAAO,CAAC,GACxF,EAAE,WAAW,GAAK,CACpB,GAEAF,QACQ;GACJ,IAAM,EAAE,SAAM,WAAQ,YAAS,eAAYC,EAAO;GAElD,OAAO,KAAK,UAAU;IAACG,KAAQ;IAAMC;IAAQ,EAAQC;IAAUJ,MAAY,KAAA;GAAS,CAAC;EACvF,SACM;GACJ,EAAQ;GAER,IAAM,EAAE,SAAM,WAAQ,YAAS,eAAYD,EAAO;GAElD,IAAI,CAACG,GAAM;IACT,EAAW,QAAQ;IAEnB;GACF;GAEA,IAAMG,IAAO,IAAIC,EAAY;IAC3B;IACA;IACA;IACA;GACF,CAAC;GAMD,AAJA,EAAW,QAAQD,GACnBA,EAAK,aAAaL,MAAY,KAAA,IAAY,OAAOC,EAAgBD,CAAO,CAAC,GACzE,EAAM,QAAQK,EAAK,MAAM,IAAI,GAC7B,IAAcA,EAAK,MAAM,WAAW,MAAW,EAAM,QAAQE,CAAM,GACnE,IAAOF,EAAK,MAAM;EACpB,GACA,EAAE,WAAW,GAAK,CACpB;CACF,CAAC,GAEDG,EAAeZ,CAAO,GAEf;EAAE;EAAY;CAAM;AAC7B"}
+{"version":3,"file":"use-live-updates.js","names":["useLiveUpdates","poll","usePollComponent","refresh","useRefreshComponents","controller","shallowRef","state","stop","unsubscribe","dispose","onMounted","watch","source","records","shownRecordKeys","live","target","polling","next","LiveUpdates","value","onScopeDispose"],"sources":["../../../src/components/realtime/use-live-updates.ts"],"sourcesContent":["import {\n  LiveUpdates,\n  shownRecordKeys,\n  type LiveUpdatesSchema,\n  type LiveUpdatesState,\n  type RecordKey,\n} from '@alfakit/core'\nimport { onMounted, onScopeDispose, shallowRef, watch, type ShallowRef } from 'vue'\nimport { usePollComponent, useRefreshComponents } from '../../context'\n\n/**\n * Follow `live()` updates of a table or widget: refresh it in place when its records\n * change, polling instead without Echo. Browser only. Returns the controller and its state\n * (`pending` counts created records for `<LiveRecordsPill>`).\n */\nexport function useLiveUpdates(\n  source: () => {\n    live: LiveUpdatesSchema | undefined\n    target: string\n    polling?: boolean\n    records?: ReadonlyArray<{ key?: RecordKey }> | null\n  },\n): { controller: ShallowRef<LiveUpdates | null>; state: ShallowRef<LiveUpdatesState> } {\n  const poll = usePollComponent()\n  const refresh = useRefreshComponents()\n  const controller = shallowRef<LiveUpdates | null>(null)\n  const state = shallowRef<LiveUpdatesState>({ pending: 0, connected: false })\n  let stop: (() => void) | null = null\n  let unsubscribe: (() => void) | null = null\n\n  const dispose = () => {\n    stop?.()\n    unsubscribe?.()\n    stop = null\n    unsubscribe = null\n  }\n\n  onMounted(() => {\n    watch(\n      () => {\n        const { records } = source()\n\n        return records\n      },\n      (records) =>\n        controller.value?.setShownKeys(records === undefined ? null : shownRecordKeys(records)),\n      { immediate: true },\n    )\n\n    watch(\n      () => {\n        const { live, target, polling, records } = source()\n\n        return JSON.stringify([live ?? null, target, Boolean(polling), records === undefined])\n      },\n      () => {\n        dispose()\n\n        const { live, target, polling, records } = source()\n\n        if (!live) {\n          controller.value = null\n\n          return\n        }\n\n        const next = new LiveUpdates({\n          live,\n          target,\n          polling,\n          poll,\n          refresh,\n        })\n\n        controller.value = next\n        next.setShownKeys(records === undefined ? null : shownRecordKeys(records))\n        state.value = next.store.get()\n        unsubscribe = next.store.subscribe((value) => (state.value = value))\n        stop = next.start()\n      },\n      { immediate: true },\n    )\n  })\n\n  onScopeDispose(dispose)\n\n  return { controller, state }\n}\n"],"mappings":";;;;AAeA,SAAgBA,EACd,GAMqF;CACrF,IAAMC,IAAOC,EAAiB,GACxBC,IAAUC,EAAqB,GAC/BC,IAAaC,EAA+B,IAAI,GAChDC,IAAQD,EAA6B;EAAE,SAAS;EAAG,WAAW;CAAM,CAAC,GACvEE,IAA4B,MAC5BC,IAAmC,MAEjCC,UAAgB;EAIpB,AAHAF,IAAO,GACPC,IAAc,GACd,IAAO,MACP,IAAc;CAChB;CAmDA,OAjDAE,QAAgB;EAYd,AAXAC,QACQ;GACJ,IAAM,EAAE,eAAYC,EAAO;GAE3B,OAAOC;EACT,IACC,MACCT,EAAW,OAAO,aAAaS,MAAY,KAAA,IAAY,OAAOC,EAAgBD,CAAO,CAAC,GACxF,EAAE,WAAW,GAAK,CACpB,GAEAF,QACQ;GACJ,IAAM,EAAE,SAAM,WAAQ,YAAS,eAAYC,EAAO;GAElD,OAAO,KAAK,UAAU;IAACG,KAAQ;IAAMC;IAAQ,EAAQC;IAAUJ,MAAY,KAAA;GAAS,CAAC;EACvF,SACM;GACJ,EAAQ;GAER,IAAM,EAAE,SAAM,WAAQ,YAAS,eAAYD,EAAO;GAElD,IAAI,CAACG,GAAM;IACT,EAAW,QAAQ;IAEnB;GACF;GAEA,IAAMG,IAAO,IAAIC,EAAY;IAC3B;IACA;IACA;IACA;IACA;GACF,CAAC;GAMD,AAJA,EAAW,QAAQD,GACnBA,EAAK,aAAaL,MAAY,KAAA,IAAY,OAAOC,EAAgBD,CAAO,CAAC,GACzE,EAAM,QAAQK,EAAK,MAAM,IAAI,GAC7B,IAAcA,EAAK,MAAM,WAAW,MAAW,EAAM,QAAQE,CAAM,GACnE,IAAOF,EAAK,MAAM;EACpB,GACA,EAAE,WAAW,GAAK,CACpB;CACF,CAAC,GAEDG,EAAeZ,CAAO,GAEf;EAAE;EAAY;CAAM;AAC7B"}

package/dist/components/table/BooleanCell.vue_vue_type_script_setup_true_lang.js

@@ -13,7 +13,8 @@ var b = /*@__PURE__*/ m({
 		cell: {},
 		recordKey: {},
 		token: {},
-		component: {}
+		component: {},
+		fromRegistry: { type: Boolean }
 	},
 	setup(m) {
 		let b = m, { update: x, saving: S } = c(b), C = _(!!b.cell.state), w = l(() => !!b.cell.disabled || S.value), T = l(() => b.column), E = (e) => {

package/dist/components/table/BooleanCell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Checkbox","_withModifiers","_createElementBlock","_createVNode","Switch","_normalizeClass","_unref","Icon","_createCommentVNode","Icon_default","Checkbox_default","Switch_default","BooleanCell_vue_vue_type_script_setup_true_lang_default","props","__props","useCellUpdate","checked","ref","disabled","computed","saving","toggle","onChange","next","update","openBlock","createBlock","_cache","$event","withModifiers","createElementBlock","createVNode","normalizeClass","unref","cn","colorClass","switchOnColorClasses","switchOffColorClasses","textColorClasses","createCommentVNode"],"sources":["../../../src/components/table/BooleanCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToggleColumnSchema } from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport {\n  colorClass,\n  switchOffColorClasses,\n  switchOnColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Switch from '../ui/Switch.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst { update, saving } = useCellUpdate(props)\nconst checked = ref(Boolean(props.cell.state))\nconst disabled = computed(() => Boolean(props.cell.disabled) || saving.value)\nconst toggle = computed(() => props.column as ToggleColumnSchema)\n\nconst onChange = (next: boolean) => {\n  checked.value = next\n  void update(next)\n}\n</script>\n\n<template>\n  <Checkbox\n    v-if=\"props.column.type === 'CheckboxColumn'\"\n    :model-value=\"checked\"\n    :disabled=\"disabled\"\n    :aria-label=\"props.column.label || props.column.name\"\n    @update:model-value=\"onChange($event === true)\"\n    @click.stop\n  />\n  <span v-else class=\"inline-flex items-center gap-2\" @click.stop>\n    <Switch\n      :model-value=\"checked\"\n      :disabled=\"disabled\"\n      :aria-label=\"props.column.label || props.column.name\"\n      :class=\"\n        cn(\n          toggle.onColor && colorClass(switchOnColorClasses, toggle.onColor),\n          toggle.offColor && colorClass(switchOffColorClasses, toggle.offColor),\n        )\n      \"\n      @update:model-value=\"onChange\"\n    />\n    <Icon\n      v-if=\"checked ? toggle.onIcon : toggle.offIcon\"\n      :name=\"checked ? toggle.onIcon : toggle.offIcon\"\n      :class=\"colorClass(textColorClasses, checked ? toggle.onColor : toggle.offColor, 'gray')\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAeA,IAAMe,IAAQC,GACR,EAAE,WAAQ,cAAWC,EAAcF,CAAK,GACxCG,IAAUC,EAAI,EAAQJ,EAAM,KAAK,KAAM,GACvCK,IAAWC,QAAe,EAAQN,EAAM,KAAK,YAAaO,EAAO,KAAK,GACtEC,IAASF,QAAeN,EAAM,MAA4B,GAE1DS,KAAY,MAAkB;GAElC,AADA,EAAQ,QAAQC,GAChBC,EAAYD,CAAI;EAClB;mBAKUV,EAAM,OAAO,SAAI,oBADzBf,EAAA,GAAAC,EAOEC,GAAA;;GALC,eAAagB,EAAA;GACb,UAAUE,EAAA;GACV,cAAYL,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,uBAAkB,AAAAc,EAAA,QAAA,MAAEL,EAASM,MAAM,EAAA;GACnC,SAAK,AAAAD,EAAA,OAAA1B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;;;;EAEbH,CAAAA,MAAAA,EAAA,GAAAI,EAkBO,QAAA;;GAlBM,OAAM;GAAkC,SAAK,AAAAyB,EAAA,OAAA1B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;EAC7DE,GAAAA,CAAAA,EAWEC,GAAA;GAVC,eAAaY,EAAA;GACb,UAAUE,EAAA;GACV,cAAYL,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,OAAKR,EAAWC,EAAA4B,CAAA,CAAE,CAAYb,EAAA,MAAO,WAAWf,EAAA6B,CAAA,CAAU,CAAC7B,EAAA8B,CAAA,GAAsBf,EAAA,MAAO,OAAO,GAAaA,EAAA,MAAO,YAAYf,EAAA6B,CAAA,CAAU,CAAC7B,EAAA+B,CAAA,GAAuBhB,EAAA,MAAO,QAAQ,CAAA,CAAA;GAMhL,uBAAoBC;;;;;;EAGf,CAAA,IAAAN,EAAA,QAAUK,EAAA,MAAO,SAASA,EAAA,MAAO,YADzCvB,EAAA,GAAAC,EAIEO,EAAAC,CAAA,GAAA;;GAFC,MAAMS,EAAA,QAAUK,EAAA,MAAO,SAASA,EAAA,MAAO;GACvC,OAAKhB,EAAEC,EAAA6B,CAAA,CAAU,CAAC7B,EAAAgC,CAAA,GAAkBtB,EAAA,QAAUK,EAAA,MAAO,UAAUA,EAAA,MAAO,UAAQ,MAAA,CAAA"}
+{"version":3,"file":"BooleanCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Checkbox","_withModifiers","_createElementBlock","_createVNode","Switch","_normalizeClass","_unref","Icon","_createCommentVNode","Icon_default","Checkbox_default","Switch_default","BooleanCell_vue_vue_type_script_setup_true_lang_default","props","__props","useCellUpdate","checked","ref","disabled","computed","saving","toggle","onChange","next","update","openBlock","createBlock","_cache","$event","withModifiers","createElementBlock","createVNode","normalizeClass","unref","cn","colorClass","switchOnColorClasses","switchOffColorClasses","textColorClasses","createCommentVNode"],"sources":["../../../src/components/table/BooleanCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToggleColumnSchema } from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport {\n  colorClass,\n  switchOffColorClasses,\n  switchOnColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Switch from '../ui/Switch.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst { update, saving } = useCellUpdate(props)\nconst checked = ref(Boolean(props.cell.state))\nconst disabled = computed(() => Boolean(props.cell.disabled) || saving.value)\nconst toggle = computed(() => props.column as ToggleColumnSchema)\n\nconst onChange = (next: boolean) => {\n  checked.value = next\n  void update(next)\n}\n</script>\n\n<template>\n  <Checkbox\n    v-if=\"props.column.type === 'CheckboxColumn'\"\n    :model-value=\"checked\"\n    :disabled=\"disabled\"\n    :aria-label=\"props.column.label || props.column.name\"\n    @update:model-value=\"onChange($event === true)\"\n    @click.stop\n  />\n  <span v-else class=\"inline-flex items-center gap-2\" @click.stop>\n    <Switch\n      :model-value=\"checked\"\n      :disabled=\"disabled\"\n      :aria-label=\"props.column.label || props.column.name\"\n      :class=\"\n        cn(\n          toggle.onColor && colorClass(switchOnColorClasses, toggle.onColor),\n          toggle.offColor && colorClass(switchOffColorClasses, toggle.offColor),\n        )\n      \"\n      @update:model-value=\"onChange\"\n    />\n    <Icon\n      v-if=\"checked ? toggle.onIcon : toggle.offIcon\"\n      :name=\"checked ? toggle.onIcon : toggle.offIcon\"\n      :class=\"colorClass(textColorClasses, checked ? toggle.onColor : toggle.offColor, 'gray')\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAeA,IAAMe,IAAQC,GACR,EAAE,WAAQ,cAAWC,EAAcF,CAAK,GACxCG,IAAUC,EAAI,EAAQJ,EAAM,KAAK,KAAM,GACvCK,IAAWC,QAAe,EAAQN,EAAM,KAAK,YAAaO,EAAO,KAAK,GACtEC,IAASF,QAAeN,EAAM,MAA4B,GAE1DS,KAAY,MAAkB;GAElC,AADA,EAAQ,QAAQC,GAChBC,EAAYD,CAAI;EAClB;mBAKUV,EAAM,OAAO,SAAI,oBADzBf,EAAA,GAAAC,EAOEC,GAAA;;GALC,eAAagB,EAAA;GACb,UAAUE,EAAA;GACV,cAAYL,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,uBAAkB,AAAAc,EAAA,QAAA,MAAEL,EAASM,MAAM,EAAA;GACnC,SAAK,AAAAD,EAAA,OAAA1B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;;;;EAEbH,CAAAA,MAAAA,EAAA,GAAAI,EAkBO,QAAA;;GAlBM,OAAM;GAAkC,SAAK,AAAAyB,EAAA,OAAA1B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;EAC7DE,GAAAA,CAAAA,EAWEC,GAAA;GAVC,eAAaY,EAAA;GACb,UAAUE,EAAA;GACV,cAAYL,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,OAAKR,EAAWC,EAAA4B,CAAA,CAAE,CAAYb,EAAA,MAAO,WAAWf,EAAA6B,CAAA,CAAU,CAAC7B,EAAA8B,CAAA,GAAsBf,EAAA,MAAO,OAAO,GAAaA,EAAA,MAAO,YAAYf,EAAA6B,CAAA,CAAU,CAAC7B,EAAA+B,CAAA,GAAuBhB,EAAA,MAAO,QAAQ,CAAA,CAAA;GAMhL,uBAAoBC;;;;;;EAGf,CAAA,IAAAN,EAAA,QAAUK,EAAA,MAAO,SAASA,EAAA,MAAO,YADzCvB,EAAA,GAAAC,EAIEO,EAAAC,CAAA,GAAA;;GAFC,MAAMS,EAAA,QAAUK,EAAA,MAAO,SAASA,EAAA,MAAO;GACvC,OAAKhB,EAAEC,EAAA6B,CAAA,CAAU,CAAC7B,EAAAgC,CAAA,GAAkBtB,EAAA,QAAUK,EAAA,MAAO,UAAUA,EAAA,MAAO,UAAQ,MAAA,CAAA"}

package/dist/components/table/ColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.js","names":["_sfc_main","ColumnHeader_vue_vue_type_script_setup_true_lang_default","ColumnHeader_default"],"sources":["../../../src/components/table/ColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { ariaSort, columnVisibilityClasses, visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { ref } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Slot from '../panel/Slot.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport TableHead from '../ui/TableHead.vue'\n\nconst ALIGN: Record<string, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n  between: 'text-start',\n  justify: 'text-justify',\n}\n\n/** A column's header cell: label, sort button and individual search input. */\nconst props = defineProps<{\n  table: TableSchema\n  column: ColumnSchema\n  rowSpan?: number\n  /** The table's component key (`relationManager:<class>`, `widget:<id>`), for slots. */\n  component?: string | null\n}>()\nconst t = useT()\nconst [DefineLabel, ColumnHeaderLabel] = createReusableTemplate()\n\n// A spinner replaces the sort icon until the sorted records arrive.\nconst sorting = ref(false)\n\nconst sort = () => {\n  const direction =\n    props.table.sort?.column === props.column.name && props.table.sort.direction === 'asc'\n      ? 'desc'\n      : 'asc'\n  sorting.value = true\n  visitTable(props.table.identifier, { sort: props.column.name, direction }, ['page'], {\n    onFinish: () => {\n      sorting.value = false\n    },\n  })\n}\n\nconst columnSearch = (event: Event) => {\n  visitTable(\n    props.table.identifier,\n    {\n      columnSearch: {\n        ...(props.table.columnSearches ?? {}),\n        [props.column.name]: (event.target as HTMLInputElement).value,\n      },\n    },\n    ['page'],\n  )\n}\n</script>\n\n<template>\n  <DefineLabel>\n    <button\n      v-if=\"props.column.sortable\"\n      type=\"button\"\n      class=\"hover:text-foreground inline-flex items-center gap-1\"\n      :aria-busy=\"sorting || undefined\"\n      @click=\"sort\"\n    >\n      {{ props.column.label }}\n      <Spinner v-if=\"sorting\" data-slot=\"table-sort-spinner\" class=\"size-3.5\" />\n      <template v-else-if=\"props.table.sort?.column === props.column.name\">\n        <Icon\n          v-if=\"props.table.sort?.direction === 'asc'\"\n          name=\"alfakit::tables.header-cell.sort-asc-button\"\n          :fallback=\"ArrowUpIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n        <Icon\n          v-else\n          name=\"alfakit::tables.header-cell.sort-desc-button\"\n          :fallback=\"ArrowDownIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n      </template>\n      <Icon\n        v-else\n        name=\"alfakit::tables.header-cell.sort-button\"\n        :fallback=\"ArrowUpDownIcon\"\n        class=\"size-3.5 opacity-40\"\n        aria-hidden=\"true\"\n      />\n    </button>\n    <template v-else>{{ props.column.label }}</template>\n  </DefineLabel>\n  <TableHead\n    :rowspan=\"props.rowSpan\"\n    :class=\"\n      cn(\n        ALIGN[props.column.alignment ?? 'start'],\n        props.column.wrapHeader ? 'whitespace-normal' : undefined,\n        props.column.grow === false && 'w-0',\n        columnVisibilityClasses(props.column),\n      )\n    \"\n    :style=\"props.column.width ? { width: props.column.width } : undefined\"\n    :aria-sort=\"\n      props.column.sortable\n        ? ariaSort(props.column.name, props.table.sort?.column, props.table.sort?.direction)\n        : undefined\n    \"\n    v-bind=\"props.column.extraHeaderAttributes\"\n  >\n    <div class=\"flex flex-col gap-1\">\n      <span\n        v-if=\"props.column.headerTooltip\"\n        :title=\"props.column.headerTooltip\"\n        data-slot=\"header-tooltip\"\n      >\n        <ColumnHeaderLabel />\n        <span class=\"sr-only\"> ({{ props.column.headerTooltip }})</span>\n      </span>\n      <ColumnHeaderLabel v-else />\n      <Slot\n        name=\"table.header-cell\"\n        :scope=\"props.component\"\n        :data=\"{ column: props.column.name }\"\n      />\n      <Input\n        v-if=\"props.column.searchable\"\n        type=\"search\"\n        :model-value=\"props.table.columnSearches?.[props.column.name] ?? ''\"\n        :placeholder=\"t('search', {}, 'Search')\"\n        :aria-label=\"`${t('search', {}, 'Search')} ${props.column.label}`\"\n        class=\"h-7 text-xs font-normal\"\n        @keydown.enter=\"columnSearch\"\n      />\n    </div>\n  </TableHead>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColumnHeader.js","names":["_sfc_main","ColumnHeader_vue_vue_type_script_setup_true_lang_default","ColumnHeader_default"],"sources":["../../../src/components/table/ColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { ariaSort, columnVisibilityClasses, debounce, visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { onBeforeUnmount, ref } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Slot from '../panel/Slot.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport TableHead from '../ui/TableHead.vue'\n\nconst ALIGN: Record<string, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n  between: 'text-start',\n  justify: 'text-justify',\n}\n\n/** A column's header cell: label, sort button and individual search input. */\nconst props = defineProps<{\n  table: TableSchema\n  column: ColumnSchema\n  rowSpan?: number\n  /** The table's component key (`relationManager:<class>`, `widget:<id>`), for slots. */\n  component?: string | null\n}>()\nconst t = useT()\nconst [DefineLabel, ColumnHeaderLabel] = createReusableTemplate()\n\n// A spinner replaces the sort icon until the sorted records arrive.\nconst sorting = ref(false)\n\nconst sort = () => {\n  const direction =\n    props.table.sort?.column === props.column.name && props.table.sort.direction === 'asc'\n      ? 'desc'\n      : 'asc'\n  sorting.value = true\n  visitTable(props.table.identifier, { sort: props.column.name, direction }, ['page'], {\n    onFinish: () => {\n      sorting.value = false\n    },\n  })\n}\n\n// The column search applies after the same pause as the table search; Enter applies at once.\nconst pushColumnSearch = debounce(\n  (value: string) =>\n    visitTable(\n      props.table.identifier,\n      { columnSearch: { ...(props.table.columnSearches ?? {}), [props.column.name]: value } },\n      ['page'],\n    ),\n  props.table.searchDebounce,\n)\n\nonBeforeUnmount(() => pushColumnSearch.cancel())\n\nconst onColumnSearchInput = (value: string) => {\n  if (!props.table.searchOnBlur) pushColumnSearch(value)\n}\n\nconst columnSearch = (event: Event) => {\n  pushColumnSearch((event.target as HTMLInputElement).value)\n  pushColumnSearch.flush()\n}\n</script>\n\n<template>\n  <DefineLabel>\n    <button\n      v-if=\"props.column.sortable\"\n      type=\"button\"\n      class=\"hover:text-foreground inline-flex items-center gap-1\"\n      :aria-busy=\"sorting || undefined\"\n      @click=\"sort\"\n    >\n      {{ props.column.label }}\n      <Spinner v-if=\"sorting\" data-slot=\"table-sort-spinner\" class=\"size-3.5\" />\n      <template v-else-if=\"props.table.sort?.column === props.column.name\">\n        <Icon\n          v-if=\"props.table.sort?.direction === 'asc'\"\n          name=\"alfakit::tables.header-cell.sort-asc-button\"\n          :fallback=\"ArrowUpIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n        <Icon\n          v-else\n          name=\"alfakit::tables.header-cell.sort-desc-button\"\n          :fallback=\"ArrowDownIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n      </template>\n      <Icon\n        v-else\n        name=\"alfakit::tables.header-cell.sort-button\"\n        :fallback=\"ArrowUpDownIcon\"\n        class=\"size-3.5 opacity-40\"\n        aria-hidden=\"true\"\n      />\n    </button>\n    <template v-else>{{ props.column.label }}</template>\n  </DefineLabel>\n  <TableHead\n    :rowspan=\"props.rowSpan\"\n    :class=\"\n      cn(\n        ALIGN[props.column.alignment ?? 'start'],\n        props.column.wrapHeader ? 'whitespace-normal' : undefined,\n        props.column.grow === false && 'w-0',\n        columnVisibilityClasses(props.column),\n      )\n    \"\n    :style=\"props.column.width ? { width: props.column.width } : undefined\"\n    :aria-sort=\"\n      props.column.sortable\n        ? ariaSort(props.column.name, props.table.sort?.column, props.table.sort?.direction)\n        : undefined\n    \"\n    v-bind=\"props.column.extraHeaderAttributes\"\n  >\n    <div class=\"flex flex-col gap-1\">\n      <span\n        v-if=\"props.column.headerTooltip\"\n        :title=\"props.column.headerTooltip\"\n        data-slot=\"header-tooltip\"\n      >\n        <ColumnHeaderLabel />\n        <span class=\"sr-only\"> ({{ props.column.headerTooltip }})</span>\n      </span>\n      <ColumnHeaderLabel v-else />\n      <Slot\n        name=\"table.header-cell\"\n        :scope=\"props.component\"\n        :data=\"{ column: props.column.name }\"\n      />\n      <Input\n        v-if=\"props.column.searchable\"\n        type=\"search\"\n        :model-value=\"props.table.columnSearches?.[props.column.name] ?? ''\"\n        :placeholder=\"t('search', {}, 'Search')\"\n        :aria-label=\"`${t('search', {}, 'Search')} ${props.column.label}`\"\n        class=\"h-7 text-xs font-normal\"\n        @update:model-value=\"onColumnSearchInput\"\n        @blur=\"props.table.searchOnBlur && columnSearch($event)\"\n        @keydown.enter=\"columnSearch\"\n      />\n    </div>\n  </TableHead>\n</template>\n"],"mappings":""}

package/dist/components/table/ColumnHeader.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ColumnHeader.vue"],"names":[],"mappings":"AAmJA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAqB9D,8EAA8E;AAC9E,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B,CAAC;;AA+RF,wBAMG"}
+{"version":3,"file":"ColumnHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ColumnHeader.vue"],"names":[],"mappings":"AA8JA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAqB9D,8EAA8E;AAC9E,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B,CAAC;;AAoTF,wBAMG"}

package/dist/components/table/ColumnHeader.vue_vue_type_script_setup_true_lang.js

@@ -5,12 +5,12 @@ import r from "../ui/Spinner.js";
 import i from "../ui/Input.js";
 import a from "../ui/TableHead.js";
 import o from "../panel/Slot.js";
-import { ariaSort as s, columnVisibilityClasses as c, visitTable as l } from "@alfakit/core";
-import { Fragment as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as v, openBlock as y, ref as b, toDisplayString as x, unref as S, withCtx as C, withKeys as w } from "vue";
-import { ArrowDownIcon as T, ArrowUpDownIcon as E, ArrowUpIcon as D } from "@lucide/vue";
-import { createReusableTemplate as O } from "@vueuse/core";
+import { ariaSort as s, columnVisibilityClasses as c, debounce as l, visitTable as u } from "@alfakit/core";
+import { Fragment as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, mergeProps as y, onBeforeUnmount as b, openBlock as x, ref as S, toDisplayString as C, unref as w, withCtx as T, withKeys as E } from "vue";
+import { ArrowDownIcon as D, ArrowUpDownIcon as O, ArrowUpIcon as k } from "@lucide/vue";
+import { createReusableTemplate as A } from "@vueuse/core";
 //#region src/components/table/ColumnHeader.vue?vue&type=script&setup=true&lang.ts
-var k = ["aria-busy"], A = { class: "flex flex-col gap-1" }, j = ["title"], M = { class: "sr-only" }, N = /*@__PURE__*/ _({
+var j = ["aria-busy"], M = { class: "flex flex-col gap-1" }, N = ["title"], P = { class: "sr-only" }, F = /*@__PURE__*/ v({
 	__name: "ColumnHeader",
 	props: {
 		table: {},
@@ -18,88 +18,94 @@ var k = ["aria-busy"], A = { class: "flex flex-col gap-1" }, j = ["title"], M =
 		rowSpan: {},
 		component: {}
 	},
-	setup(_) {
-		let N = {
+	setup(v) {
+		let F = {
 			start: "text-start",
 			center: "text-center",
 			end: "text-end",
 			between: "text-start",
 			justify: "text-justify"
-		}, P = _, F = e(), [I, L] = O(), R = b(!1), z = () => {
-			let e = P.table.sort?.column === P.column.name && P.table.sort.direction === "asc" ? "desc" : "asc";
-			R.value = !0, l(P.table.identifier, {
-				sort: P.column.name,
+		}, I = v, L = e(), [R, z] = A(), B = S(!1), V = () => {
+			let e = I.table.sort?.column === I.column.name && I.table.sort.direction === "asc" ? "desc" : "asc";
+			B.value = !0, u(I.table.identifier, {
+				sort: I.column.name,
 				direction: e
 			}, ["page"], { onFinish: () => {
-				R.value = !1;
+				B.value = !1;
 			} });
-		}, B = (e) => {
-			l(P.table.identifier, { columnSearch: {
-				...P.table.columnSearches ?? {},
-				[P.column.name]: e.target.value
-			} }, ["page"]);
+		}, H = l((e) => u(I.table.identifier, { columnSearch: {
+			...I.table.columnSearches ?? {},
+			[I.column.name]: e
+		} }, ["page"]), I.table.searchDebounce);
+		b(() => H.cancel());
+		let U = (e) => {
+			I.table.searchOnBlur || H(e);
+		}, W = (e) => {
+			H(e.target.value), H.flush();
 		};
-		return (e, l) => (y(), p(u, null, [g(S(I), null, {
-			default: C(() => [P.column.sortable ? (y(), p("button", {
+		return (e, l) => (x(), m(d, null, [_(w(R), null, {
+			default: T(() => [I.column.sortable ? (x(), m("button", {
 				key: 0,
 				type: "button",
 				class: "hover:text-foreground inline-flex items-center gap-1",
-				"aria-busy": R.value || void 0,
-				onClick: z
-			}, [h(x(P.column.label) + " ", 1), R.value ? (y(), d(r, {
+				"aria-busy": B.value || void 0,
+				onClick: V
+			}, [g(C(I.column.label) + " ", 1), B.value ? (x(), f(r, {
 				key: 0,
 				"data-slot": "table-sort-spinner",
 				class: "size-3.5"
-			})) : P.table.sort?.column === P.column.name ? (y(), p(u, { key: 1 }, [P.table.sort?.direction === "asc" ? (y(), d(S(n), {
+			})) : I.table.sort?.column === I.column.name ? (x(), m(d, { key: 1 }, [I.table.sort?.direction === "asc" ? (x(), f(w(n), {
 				key: 0,
 				name: "alfakit::tables.header-cell.sort-asc-button",
-				fallback: S(D),
+				fallback: w(k),
 				class: "size-3.5",
 				"aria-hidden": "true"
-			}, null, 8, ["fallback"])) : (y(), d(S(n), {
+			}, null, 8, ["fallback"])) : (x(), f(w(n), {
 				key: 1,
 				name: "alfakit::tables.header-cell.sort-desc-button",
-				fallback: S(T),
+				fallback: w(D),
 				class: "size-3.5",
 				"aria-hidden": "true"
-			}, null, 8, ["fallback"]))], 64)) : (y(), d(S(n), {
+			}, null, 8, ["fallback"]))], 64)) : (x(), f(w(n), {
 				key: 2,
 				name: "alfakit::tables.header-cell.sort-button",
-				fallback: S(E),
+				fallback: w(O),
 				class: "size-3.5 opacity-40",
 				"aria-hidden": "true"
-			}, null, 8, ["fallback"]))], 8, k)) : (y(), p(u, { key: 1 }, [h(x(P.column.label), 1)], 64))]),
+			}, null, 8, ["fallback"]))], 8, j)) : (x(), m(d, { key: 1 }, [g(C(I.column.label), 1)], 64))]),
 			_: 1
-		}), g(a, v({
-			rowspan: P.rowSpan,
-			class: S(t)(N[P.column.alignment ?? "start"], P.column.wrapHeader ? "whitespace-normal" : void 0, P.column.grow === !1 && "w-0", S(c)(P.column)),
-			style: P.column.width ? { width: P.column.width } : void 0,
-			"aria-sort": P.column.sortable ? S(s)(P.column.name, P.table.sort?.column, P.table.sort?.direction) : void 0
-		}, P.column.extraHeaderAttributes), {
-			default: C(() => [m("div", A, [
-				P.column.headerTooltip ? (y(), p("span", {
+		}), _(a, y({
+			rowspan: I.rowSpan,
+			class: w(t)(F[I.column.alignment ?? "start"], I.column.wrapHeader ? "whitespace-normal" : void 0, I.column.grow === !1 && "w-0", w(c)(I.column)),
+			style: I.column.width ? { width: I.column.width } : void 0,
+			"aria-sort": I.column.sortable ? w(s)(I.column.name, I.table.sort?.column, I.table.sort?.direction) : void 0
+		}, I.column.extraHeaderAttributes), {
+			default: T(() => [h("div", M, [
+				I.column.headerTooltip ? (x(), m("span", {
 					key: 0,
-					title: P.column.headerTooltip,
+					title: I.column.headerTooltip,
 					"data-slot": "header-tooltip"
-				}, [g(S(L)), m("span", M, " (" + x(P.column.headerTooltip) + ")", 1)], 8, j)) : (y(), d(S(L), { key: 1 })),
-				g(o, {
+				}, [_(w(z)), h("span", P, " (" + C(I.column.headerTooltip) + ")", 1)], 8, N)) : (x(), f(w(z), { key: 1 })),
+				_(o, {
 					name: "table.header-cell",
-					scope: P.component,
-					data: { column: P.column.name }
+					scope: I.component,
+					data: { column: I.column.name }
 				}, null, 8, ["scope", "data"]),
-				P.column.searchable ? (y(), d(i, {
+				I.column.searchable ? (x(), f(i, {
 					key: 2,
 					type: "search",
-					"model-value": P.table.columnSearches?.[P.column.name] ?? "",
-					placeholder: S(F)("search", {}, "Search"),
-					"aria-label": `${S(F)("search", {}, "Search")} ${P.column.label}`,
+					"model-value": I.table.columnSearches?.[I.column.name] ?? "",
+					placeholder: w(L)("search", {}, "Search"),
+					"aria-label": `${w(L)("search", {}, "Search")} ${I.column.label}`,
 					class: "h-7 text-xs font-normal",
-					onKeydown: w(B, ["enter"])
+					"onUpdate:modelValue": U,
+					onBlur: l[0] ||= (e) => I.table.searchOnBlur && W(e),
+					onKeydown: E(W, ["enter"])
 				}, null, 8, [
 					"model-value",
 					"placeholder",
 					"aria-label"
-				])) : f("", !0)
+				])) : p("", !0)
 			])]),
 			_: 1
 		}, 16, [
@@ -111,6 +117,6 @@ var k = ["aria-busy"], A = { class: "flex flex-col gap-1" }, j = ["title"], M =
 	}
 });
 //#endregion
-export { N as default };
+export { F as default };
 
 //# sourceMappingURL=ColumnHeader.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/table/ColumnHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_withCtx","_createTextVNode","_toDisplayString","_createBlock","Spinner","Icon","TableHead","_mergeProps","_createElementVNode","Slot","Input","_withKeys","_createCommentVNode","Icon_default","Spinner_default","Input_default","TableHead_default","Slot_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ColumnHeader_vue_vue_type_script_setup_true_lang_default","ALIGN","props","__props","t","useT","DefineLabel","ColumnHeaderLabel","createReusableTemplate","sorting","ref","sort","direction","visitTable","columnSearch","event","openBlock","createElementBlock","Fragment","createVNode","unref","withCtx","createTextVNode","toDisplayString","createBlock","ArrowUpIcon","ArrowDownIcon","ArrowUpDownIcon","mergeProps","cn","columnVisibilityClasses","ariaSort","createElementVNode","withKeys","createCommentVNode"],"sources":["../../../src/components/table/ColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { ariaSort, columnVisibilityClasses, visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { ref } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Slot from '../panel/Slot.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport TableHead from '../ui/TableHead.vue'\n\nconst ALIGN: Record<string, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n  between: 'text-start',\n  justify: 'text-justify',\n}\n\n/** A column's header cell: label, sort button and individual search input. */\nconst props = defineProps<{\n  table: TableSchema\n  column: ColumnSchema\n  rowSpan?: number\n  /** The table's component key (`relationManager:<class>`, `widget:<id>`), for slots. */\n  component?: string | null\n}>()\nconst t = useT()\nconst [DefineLabel, ColumnHeaderLabel] = createReusableTemplate()\n\n// A spinner replaces the sort icon until the sorted records arrive.\nconst sorting = ref(false)\n\nconst sort = () => {\n  const direction =\n    props.table.sort?.column === props.column.name && props.table.sort.direction === 'asc'\n      ? 'desc'\n      : 'asc'\n  sorting.value = true\n  visitTable(props.table.identifier, { sort: props.column.name, direction }, ['page'], {\n    onFinish: () => {\n      sorting.value = false\n    },\n  })\n}\n\nconst columnSearch = (event: Event) => {\n  visitTable(\n    props.table.identifier,\n    {\n      columnSearch: {\n        ...(props.table.columnSearches ?? {}),\n        [props.column.name]: (event.target as HTMLInputElement).value,\n      },\n    },\n    ['page'],\n  )\n}\n</script>\n\n<template>\n  <DefineLabel>\n    <button\n      v-if=\"props.column.sortable\"\n      type=\"button\"\n      class=\"hover:text-foreground inline-flex items-center gap-1\"\n      :aria-busy=\"sorting || undefined\"\n      @click=\"sort\"\n    >\n      {{ props.column.label }}\n      <Spinner v-if=\"sorting\" data-slot=\"table-sort-spinner\" class=\"size-3.5\" />\n      <template v-else-if=\"props.table.sort?.column === props.column.name\">\n        <Icon\n          v-if=\"props.table.sort?.direction === 'asc'\"\n          name=\"alfakit::tables.header-cell.sort-asc-button\"\n          :fallback=\"ArrowUpIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n        <Icon\n          v-else\n          name=\"alfakit::tables.header-cell.sort-desc-button\"\n          :fallback=\"ArrowDownIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n      </template>\n      <Icon\n        v-else\n        name=\"alfakit::tables.header-cell.sort-button\"\n        :fallback=\"ArrowUpDownIcon\"\n        class=\"size-3.5 opacity-40\"\n        aria-hidden=\"true\"\n      />\n    </button>\n    <template v-else>{{ props.column.label }}</template>\n  </DefineLabel>\n  <TableHead\n    :rowspan=\"props.rowSpan\"\n    :class=\"\n      cn(\n        ALIGN[props.column.alignment ?? 'start'],\n        props.column.wrapHeader ? 'whitespace-normal' : undefined,\n        props.column.grow === false && 'w-0',\n        columnVisibilityClasses(props.column),\n      )\n    \"\n    :style=\"props.column.width ? { width: props.column.width } : undefined\"\n    :aria-sort=\"\n      props.column.sortable\n        ? ariaSort(props.column.name, props.table.sort?.column, props.table.sort?.direction)\n        : undefined\n    \"\n    v-bind=\"props.column.extraHeaderAttributes\"\n  >\n    <div class=\"flex flex-col gap-1\">\n      <span\n        v-if=\"props.column.headerTooltip\"\n        :title=\"props.column.headerTooltip\"\n        data-slot=\"header-tooltip\"\n      >\n        <ColumnHeaderLabel />\n        <span class=\"sr-only\"> ({{ props.column.headerTooltip }})</span>\n      </span>\n      <ColumnHeaderLabel v-else />\n      <Slot\n        name=\"table.header-cell\"\n        :scope=\"props.component\"\n        :data=\"{ column: props.column.name }\"\n      />\n      <Input\n        v-if=\"props.column.searchable\"\n        type=\"search\"\n        :model-value=\"props.table.columnSearches?.[props.column.name] ?? ''\"\n        :placeholder=\"t('search', {}, 'Search')\"\n        :aria-label=\"`${t('search', {}, 'Search')} ${props.column.label}`\"\n        class=\"h-7 text-xs font-normal\"\n        @keydown.enter=\"columnSearch\"\n      />\n    </div>\n  </TableHead>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"ColumnHeader.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_withCtx","_createTextVNode","_toDisplayString","_createBlock","Spinner","Icon","TableHead","_mergeProps","_createElementVNode","Slot","Input","_withKeys","_createCommentVNode","Icon_default","Spinner_default","Input_default","TableHead_default","Slot_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ColumnHeader_vue_vue_type_script_setup_true_lang_default","ALIGN","props","__props","t","useT","DefineLabel","ColumnHeaderLabel","createReusableTemplate","sorting","ref","sort","direction","visitTable","pushColumnSearch","debounce","value","onColumnSearchInput","columnSearch","event","openBlock","createElementBlock","Fragment","createVNode","unref","withCtx","createTextVNode","toDisplayString","createBlock","ArrowUpIcon","ArrowDownIcon","ArrowUpDownIcon","mergeProps","cn","columnVisibilityClasses","ariaSort","createElementVNode","_cache","$event","withKeys","createCommentVNode"],"sources":["../../../src/components/table/ColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { ariaSort, columnVisibilityClasses, debounce, visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { onBeforeUnmount, ref } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Slot from '../panel/Slot.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport TableHead from '../ui/TableHead.vue'\n\nconst ALIGN: Record<string, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n  between: 'text-start',\n  justify: 'text-justify',\n}\n\n/** A column's header cell: label, sort button and individual search input. */\nconst props = defineProps<{\n  table: TableSchema\n  column: ColumnSchema\n  rowSpan?: number\n  /** The table's component key (`relationManager:<class>`, `widget:<id>`), for slots. */\n  component?: string | null\n}>()\nconst t = useT()\nconst [DefineLabel, ColumnHeaderLabel] = createReusableTemplate()\n\n// A spinner replaces the sort icon until the sorted records arrive.\nconst sorting = ref(false)\n\nconst sort = () => {\n  const direction =\n    props.table.sort?.column === props.column.name && props.table.sort.direction === 'asc'\n      ? 'desc'\n      : 'asc'\n  sorting.value = true\n  visitTable(props.table.identifier, { sort: props.column.name, direction }, ['page'], {\n    onFinish: () => {\n      sorting.value = false\n    },\n  })\n}\n\n// The column search applies after the same pause as the table search; Enter applies at once.\nconst pushColumnSearch = debounce(\n  (value: string) =>\n    visitTable(\n      props.table.identifier,\n      { columnSearch: { ...(props.table.columnSearches ?? {}), [props.column.name]: value } },\n      ['page'],\n    ),\n  props.table.searchDebounce,\n)\n\nonBeforeUnmount(() => pushColumnSearch.cancel())\n\nconst onColumnSearchInput = (value: string) => {\n  if (!props.table.searchOnBlur) pushColumnSearch(value)\n}\n\nconst columnSearch = (event: Event) => {\n  pushColumnSearch((event.target as HTMLInputElement).value)\n  pushColumnSearch.flush()\n}\n</script>\n\n<template>\n  <DefineLabel>\n    <button\n      v-if=\"props.column.sortable\"\n      type=\"button\"\n      class=\"hover:text-foreground inline-flex items-center gap-1\"\n      :aria-busy=\"sorting || undefined\"\n      @click=\"sort\"\n    >\n      {{ props.column.label }}\n      <Spinner v-if=\"sorting\" data-slot=\"table-sort-spinner\" class=\"size-3.5\" />\n      <template v-else-if=\"props.table.sort?.column === props.column.name\">\n        <Icon\n          v-if=\"props.table.sort?.direction === 'asc'\"\n          name=\"alfakit::tables.header-cell.sort-asc-button\"\n          :fallback=\"ArrowUpIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n        <Icon\n          v-else\n          name=\"alfakit::tables.header-cell.sort-desc-button\"\n          :fallback=\"ArrowDownIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n      </template>\n      <Icon\n        v-else\n        name=\"alfakit::tables.header-cell.sort-button\"\n        :fallback=\"ArrowUpDownIcon\"\n        class=\"size-3.5 opacity-40\"\n        aria-hidden=\"true\"\n      />\n    </button>\n    <template v-else>{{ props.column.label }}</template>\n  </DefineLabel>\n  <TableHead\n    :rowspan=\"props.rowSpan\"\n    :class=\"\n      cn(\n        ALIGN[props.column.alignment ?? 'start'],\n        props.column.wrapHeader ? 'whitespace-normal' : undefined,\n        props.column.grow === false && 'w-0',\n        columnVisibilityClasses(props.column),\n      )\n    \"\n    :style=\"props.column.width ? { width: props.column.width } : undefined\"\n    :aria-sort=\"\n      props.column.sortable\n        ? ariaSort(props.column.name, props.table.sort?.column, props.table.sort?.direction)\n        : undefined\n    \"\n    v-bind=\"props.column.extraHeaderAttributes\"\n  >\n    <div class=\"flex flex-col gap-1\">\n      <span\n        v-if=\"props.column.headerTooltip\"\n        :title=\"props.column.headerTooltip\"\n        data-slot=\"header-tooltip\"\n      >\n        <ColumnHeaderLabel />\n        <span class=\"sr-only\"> ({{ props.column.headerTooltip }})</span>\n      </span>\n      <ColumnHeaderLabel v-else />\n      <Slot\n        name=\"table.header-cell\"\n        :scope=\"props.component\"\n        :data=\"{ column: props.column.name }\"\n      />\n      <Input\n        v-if=\"props.column.searchable\"\n        type=\"search\"\n        :model-value=\"props.table.columnSearches?.[props.column.name] ?? ''\"\n        :placeholder=\"t('search', {}, 'Search')\"\n        :aria-label=\"`${t('search', {}, 'Search')} ${props.column.label}`\"\n        class=\"h-7 text-xs font-normal\"\n        @update:model-value=\"onColumnSearchInput\"\n        @blur=\"props.table.searchOnBlur && columnSearch($event)\"\n        @keydown.enter=\"columnSearch\"\n      />\n    </div>\n  </TableHead>\n</template>\n"],"mappings":"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"}