@alfakit/vue 0.1.1 → 0.1.2

package/src/components/table/TextInputCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TextInputColumnSchema } from '@alfakit/core'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { colorClass, textColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -10,9 +10,13 @@ import { useCellUpdate, type CellProps } from './cell-update'
 const props = defineProps<CellProps>()
 const schema = computed(() => props.column as TextInputColumnSchema)
 const { update, saving, error } = useCellUpdate(props)
-const initial =
-  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state)
-const value = ref(initial)
+const errorId = useId()
+// The saved value: follows the cell after the table reloads, so changing the input back to
+// an earlier value is saved too.
+const initial = computed(() =>
+  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),
+)
+const value = ref(initial.value)
 // `prefix()` / `suffix()`: text affixes around the input, like the TextInput field.
 const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
 </script>
@@ -57,7 +61,9 @@ const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
           :step="schema.step"
           :inputmode="schema.inputMode"
           :disabled="Boolean(props.cell.disabled) || saving"
+          :aria-label="props.column.label || props.column.name"
           :aria-invalid="error ? true : undefined"
+          :aria-describedby="error ? errorId : undefined"
           :class="
             cn(
               'h-8 min-w-32',
@@ -92,6 +98,6 @@ const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
         >{{ props.cell.suffix }}</span
       >
     </span>
-    <span v-if="error" class="text-destructive block text-xs">{{ error }}</span>
+    <span v-if="error" :id="errorId" class="text-destructive block text-xs">{{ error }}</span>
   </span>
 </template>

package/src/standalone/AlfakitToaster.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { resolveToastPosition, type ToastPosition } from '@alfakit/core'
+import { resolveToastPosition, STARTER_KIT_TOASTER_ID, type ToastPosition } from '@alfakit/core'
 import { onMounted, onUnmounted } from 'vue'
+import { setToasterId } from '../components/notifications/flash-toasts'
 import Toaster from '../components/ui/Toaster.vue'
 import { useOptionalAlfakit } from '../context'
 import { claimToaster, createStandaloneContext, ensureFlashToasts } from './runtime'
@@ -38,15 +39,24 @@ let release: (() => void) | null = null
 onMounted(() => {
   if (!props.claimed) release = claimToaster()
 
+  // Our own toaster gets an id, so a `<Toaster />` the app's layout already mounts (the
+  // starter kits have one) doesn't show every Alfakit toast a second time.
+  if (props.toaster) setToasterId(STARTER_KIT_TOASTER_ID)
+
   ensureFlashToasts(context.registry)
 })
 
-onUnmounted(() => release?.())
+onUnmounted(() => {
+  release?.()
+
+  if (props.toaster) setToasterId(undefined)
+})
 </script>
 
 <template>
   <Toaster
     v-if="props.toaster"
+    :id="STARTER_KIT_TOASTER_ID"
     :position="resolveToastPosition(props.position, props.dir)"
     :dir="props.dir"
     rich-colors

package/src/starter-kit/widgets/SearchTrigger.vue

@@ -50,6 +50,7 @@ function request() {
     <span class="sr-only sm:not-sr-only sm:flex-1 sm:text-start">{{ placeholder }}</span>
     <kbd
       v-if="hydrated && binding"
+      dir="ltr"
       class="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline"
       >{{ formatKeyBinding(binding) }}</kbd
     >

package/src/starter-kit/widgets/TenantChooser.vue

@@ -63,7 +63,7 @@ const visible = computed(
         <DropdownMenuSeparator v-if="tenancy.tenants.length > 0" />
         <DropdownMenuItem @select="router.visit(tenancy.registrationUrl!)">
           <Icon name="alfakit::panels.tenant-menu.registration-button" :fallback="PlusIcon" />
-          {{ t('tenancy.register', {}, 'New') }}
+          {{ tenancy.registrationLabel ?? t('tenancy.register', {}, 'New') }}
         </DropdownMenuItem>
       </template>
     </DropdownMenuContent>