bert.hausmans
4ba927623b
Adds composables/drawerRegistry.ts (boundary-safe register-by-call map: register/resolve, zero static component imports — composables zone may not import components, RFC-WS-GUI-REDESIGN AD-G5). Extends useRightDrawer with resolveDrawerComponent (thin facade, prior API/tests preserved). RightDrawer.vue: PrimeVue <Drawer position=right>, v-model:visible via a writable computed ↔ useRightDrawer isOpen/close; title/flush read from the open() props object (A4); dynamic <component :is> via resolveDrawerComponent with a graceful empty state on null; #actions header slot retained. 18 unit/component tests. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { storeToRefs } from 'pinia'
|
|
import type { Component, ComputedRef } from 'vue'
|
|
import { computed } from 'vue'
|
|
import { resolveDrawerComponent } from '@/composables/drawerRegistry'
|
|
import { useShellUiStore } from '@/stores/useShellUiStore'
|
|
|
|
// Thin facade over useShellUiStore.drawer (RFC-WS-GUI-REDESIGN AD-G4,
|
|
// issue 5). NOT a module-level ref singleton: state lives in the Pinia
|
|
// store so Playwright CT can drive the drawer via @pinia/testing
|
|
// without rendering the shell, and tests don't leak state across cases.
|
|
|
|
export interface UseRightDrawer {
|
|
isOpen: ComputedRef<boolean>
|
|
component: ComputedRef<string | null>
|
|
props: ComputedRef<Record<string, unknown>>
|
|
open: (component: string, props?: Record<string, unknown>) => void
|
|
close: () => void
|
|
resolveDrawerComponent: (name: string | null | undefined) => Component | null
|
|
}
|
|
|
|
export function useRightDrawer(): UseRightDrawer {
|
|
const store = useShellUiStore()
|
|
const { drawer } = storeToRefs(store)
|
|
|
|
return {
|
|
isOpen: computed(() => drawer.value.isOpen),
|
|
component: computed(() => drawer.value.component),
|
|
props: computed(() => drawer.value.props),
|
|
open: (component, props = {}) => store.openDrawer(component, props),
|
|
close: () => store.closeDrawer(),
|
|
resolveDrawerComponent,
|
|
}
|
|
}
|