@alfakit/vue 0.1.8 → 0.1.10

package/src/components/ui/SidebarMenuButton.vue

@@ -8,6 +8,10 @@ import TooltipContent from './TooltipContent.vue'
 import TooltipTrigger from './TooltipTrigger.vue'
 import { useSidebar } from './use-sidebar'
 
+// Attributes from an `as-child` parent (CollapsibleTrigger's click handler and ARIA state,
+// a nav item's extra attributes) go on the button, not on the renderless Tooltip root.
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<
     PrimitiveProps & {
@@ -27,6 +31,7 @@ const { isMobile, state } = useSidebar()
   <Tooltip v-if="props.tooltip">
     <TooltipTrigger as-child>
       <Primitive
+        v-bind="$attrs"
         data-slot="sidebar-menu-button"
         data-sidebar="menu-button"
         :data-size="props.size"
@@ -46,6 +51,7 @@ const { isMobile, state } = useSidebar()
   </Tooltip>
   <Primitive
     v-else
+    v-bind="$attrs"
     data-slot="sidebar-menu-button"
     data-sidebar="menu-button"
     :data-size="props.size"

package/src/components/ui/TooltipTrigger.vue

@@ -5,7 +5,10 @@ const props = defineProps<TooltipTriggerProps>()
 </script>
 
 <template>
-  <TooltipTrigger v-bind="props" data-slot="tooltip-trigger">
+  <!-- With as-child the child keeps its own data-slot (an action's `button`). -->
+  <TooltipTrigger
+    v-bind="{ ...(props.asChild ? {} : { 'data-slot': 'tooltip-trigger' }), ...props }"
+  >
     <slot />
   </TooltipTrigger>
 </template>

package/src/components/widgets/StatCard.vue

@@ -39,7 +39,9 @@ const props = defineProps<{ stat: StatSchema }>()
     >
       <div class="flex items-start justify-between gap-3">
         <div class="flex flex-col gap-1">
-          <span class="text-muted-foreground text-sm font-medium">{{ props.stat.label }}</span>
+          <span class="text-muted-foreground text-sm font-medium"
+            ><bdi>{{ props.stat.label }}</bdi></span
+          >
           <span
             v-if="(props.stat.value === null || props.stat.value === '') && props.stat.placeholder"
             class="text-muted-foreground text-2xl font-semibold tracking-tight"
@@ -54,7 +56,7 @@ const props = defineProps<{ stat: StatSchema }>()
                 props.stat.color && textColorClasses[props.stat.color],
               )
             "
-            >{{ props.stat.value }}</span
+            ><bdi>{{ props.stat.value }}</bdi></span
           >
           <span
             v-if="props.stat.description"
@@ -72,7 +74,8 @@ const props = defineProps<{ stat: StatSchema }>()
               :name="props.stat.descriptionIcon"
               class="size-3.5"
             />
-            {{ props.stat.description }}
+            <!-- Mixed-direction text (a Latin "-3% this month" in Arabic) keeps its order. -->
+            <bdi>{{ props.stat.description }}</bdi>
             <Icon
               v-if="props.stat.descriptionIcon && props.stat.descriptionIconPosition === 'after'"
               :name="props.stat.descriptionIcon"

package/src/layouts/TopNavLayout.vue

@@ -97,7 +97,7 @@ const linkClass =
                 </p>
                 <Link
                   v-for="item in group.items.flatMap((entry) => [entry, ...(entry.children ?? [])])"
-                  :key="item.label"
+                  :key="item.url ?? item.label"
                   :href="item.url ?? '#'"
                   :data-active="item.active ? 'true' : undefined"
                   class="hover:bg-accent data-[active=true]:bg-accent flex items-center gap-2 rounded-md px-2 py-2 font-medium [&_svg]:size-4"
@@ -133,7 +133,7 @@ const linkClass =
               :items="group.items"
               :active="group.items.some(isActive)"
             />
-            <template v-for="item in group.items" v-else :key="item.label">
+            <template v-for="item in group.items" v-else :key="item.url ?? item.label">
               <TopNavMenu
                 v-if="item.children && item.children.length > 0"
                 :label="item.label"

package/src/layouts/TopNavMenu.vue

@@ -36,7 +36,7 @@ const props = defineProps<{
       <ChevronDownIcon class="opacity-60" />
     </DropdownMenuTrigger>
     <DropdownMenuContent align="start" class="min-w-48">
-      <DropdownMenuItem v-for="item in props.items" :key="item.label" as-child>
+      <DropdownMenuItem v-for="item in props.items" :key="item.url ?? item.label" as-child>
         <Link
           v-bind="item.extraAttributes ?? {}"
           :href="item.url ?? '#'"

package/src/pages/AlfakitPage.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { openDefaultAction, resolveLazyComponents, type DefaultActionOpener } from '@alfakit/core'
+import {
+  customPageProps,
+  openDefaultAction,
+  resolveLazyComponents,
+  type DefaultActionOpener,
+} from '@alfakit/core'
 import { Head } from '@inertiajs/vue3'
 import { computed, onMounted, watch } from 'vue'
 import { providePageActionContext } from '../components/actions/action-context'
@@ -28,6 +33,11 @@ const title = computed(() =>
     : panel.value.brandName,
 )
 const custom = computed(() => (page.value?.view ? pages[page.value.view.component] : undefined))
+// A custom component brings its own `PageShell` (as in panel mode, where it is the Inertia
+// page itself) and takes the live props, so `reloadProps()` reaches it.
+const customProps = computed(() =>
+  customPageProps(page.value?.view?.props, props.value as Record<string, unknown>),
+)
 
 // The page's default action (`$defaultAction`, `?tableAction=`) opens once the page has
 // hydrated, and once per page: re-renders after the action ran don't open it again.
@@ -61,9 +71,9 @@ providePageActionContext({
         )
       }}
     </div>
+    <component :is="custom" v-else-if="page.view && custom" v-bind="customProps" :page="page" />
     <PageShell v-else :page="page">
-      <component :is="custom" v-if="page.view && custom" v-bind="page.view.props" :page="page" />
-      <PageContent v-else :page="page" />
+      <PageContent :page="page" />
     </PageShell>
   </template>
 </template>

package/src/standalone/AlfakitComponent.vue

@@ -69,9 +69,16 @@ const poll = (target: string, interval: string | number | null | undefined) =>
   state.poll(target, interval)
 const refresh = (targets: string[]) => state.refresh(targets)
 
+// Inside a panel page: the panel's registry and translator, but this component's own action
+// runner, so its actions post to its own endpoints with its own token (not the panel's: 403).
 const context: AlfakitContextValue = parent
   ? {
       ...parent,
+      actions: createStandaloneContext(
+        { action: props.component.endpoints.action, modal: props.component.endpoints.modal },
+        props.components,
+        poll,
+      ).actions,
       registry: createStandaloneRegistry(props.components, parent.registry),
       poll,
       refresh,
@@ -123,15 +130,19 @@ watch(
 // on the page renders one (checked after every component mounted).
 const ownsToaster = ref(false)
 
-onMounted(() => {
-  ensureStandaloneRuntime()
-
-  // Partial reloads (sorting, paging, inline edits) request this component's own prop.
+// Partial reloads (sorting, paging, inline edits) request this component's own prop.
+// Registered in setup (browser only), before the children's `onMounted`: a `deferLoading()`
+// table's first reload must already ask for this prop, not the panel `page` prop.
+if (typeof window !== 'undefined') {
   watch(
     () => findStandalonePropName(inertiaPage.props as Record<string, unknown>, props.component),
     (name, _old, onCleanup) => onCleanup(registerStandaloneProp(name ?? null)),
     { immediate: true },
   )
+}
+
+onMounted(() => {
+  ensureStandaloneRuntime()
 
   // The watcher runs before the new payload renders: hand it over, or the response would
   // count as stale and lazy widgets (a calendar after its action) keep their old schema.
@@ -201,7 +212,7 @@ onMounted(() => {
         <slot name="footer" />
       </div>
       <ActionModals />
-      <AlfakitToaster v-if="ownsToaster" claimed />
+      <AlfakitToaster v-if="ownsToaster" claimed :dir="direction" />
     </TooltipProvider>
   </component>
 </template>

package/src/standalone/runtime.ts

@@ -3,6 +3,7 @@ import {
   ComponentRegistry,
   FlashNotificationTracker,
   Translator,
+  installPrefetchInvalidation,
   reloadOnExpiredPage,
   resolveRequestErrorNotification,
   type NotificationSchema,
@@ -27,6 +28,8 @@ export function ensureStandaloneRuntime(): void {
 
   browserReady = true
   reloadOnExpiredPage()
+  // Pages restored by Back after a change are reloaded; shared with a surrounding panel.
+  installPrefetchInvalidation()
 }
 
 /**

package/src/starter-kit/AlfakitStarterKitRoot.vue

@@ -8,6 +8,7 @@ import {
 import { usePage } from '@inertiajs/vue3'
 import { onMounted, onUnmounted, watch } from 'vue'
 import AlfakitRoot from '../AlfakitRoot.vue'
+import DebugPanelSlot from '../components/panel/DebugPanelSlot.vue'
 import { setToasterId, showToast } from '../components/notifications/flash-toasts'
 import { provideAlfakit } from '../context'
 import { starterKitContext, type StarterKitPageOptions } from './runtime'
@@ -66,6 +67,12 @@ onUnmounted(() => {
   >
     <AlfakitRoot :toaster-id="STARTER_KIT_TOASTER_ID">
       <slot />
+      <!-- The debug panel's button lives in AlfaKit's top bar, which a starter kit doesn't
+           render: float it in the corner (nothing without `alfakitDebug`). The corner is the
+           document's right: the kit's sidebar stays on the left in a right-to-left panel language. -->
+      <div data-slot="starter-kit-debug-panel" class="fixed right-16 bottom-16 z-40">
+        <DebugPanelSlot />
+      </div>
     </AlfakitRoot>
   </div>
 </template>

package/src/starter-kit/navigation.ts

@@ -1,8 +1,10 @@
 import {
   starterKitNavigation,
   toStarterKitNavGroups,
+  toStarterKitUserMenuItems,
   type StarterKitNavGroup,
   type StarterKitNavigationSchema,
+  type StarterKitUserMenuItem,
 } from '@alfakit/core'
 import { usePage } from '@inertiajs/vue3'
 import { computed, type ComputedRef } from 'vue'
@@ -15,6 +17,11 @@ export interface AlfakitNavigation {
   navigation: StarterKitNavigationSchema | null
   /** Its groups as plain items (`title`, `href`, `icon`, `isActive`, `badge`, `children`). */
   groups: StarterKitNavGroup[]
+  /**
+   * The panel's user menu links (`userMenuItems()`, Billing's entry…) for the kit's user
+   * menu: `<AlfakitUserMenuItems />` renders them with the app's dropdown items.
+   */
+  userMenuItems: StarterKitUserMenuItem[]
 }
 
 /**
@@ -33,6 +40,10 @@ export function useAlfakitNavigation(panelId?: string): ComputedRef<AlfakitNavig
   return computed(() => {
     const navigation = starterKitNavigation(page.props, panelId)
 
-    return { navigation, groups: toStarterKitNavGroups(navigation?.groups) }
+    return {
+      navigation,
+      groups: toStarterKitNavGroups(navigation?.groups),
+      userMenuItems: toStarterKitUserMenuItems(navigation?.userMenu),
+    }
   })
 }

package/src/styles.css

@@ -289,7 +289,8 @@
 }
 /* Rich editor mentions, merge tags and custom blocks (RichEditor extensions) */
 .alfakit-prose :where(.alfakit-mention):not(:where(.alfakit-not-prose *)) {
-  @apply bg-primary/10 text-primary rounded px-1 font-medium;
+  /* Full-contrast text on the tint (WCAG AA); the ring marks it as a mention. */
+  @apply bg-primary/10 text-foreground ring-primary/30 rounded px-1 font-medium ring-1;
 }
 .alfakit-prose :where(.alfakit-merge-tag):not(:where(.alfakit-not-prose *)) {
   @apply bg-muted text-muted-foreground rounded px-1 font-mono text-xs;