85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { defineComponent } from 'vue'
|
|
import { withPinia } from '@/stories/v2/_helpers'
|
|
import RightDrawer from '@/components-v2/layout/RightDrawer.vue'
|
|
import { registerDrawerComponent } from '@/composables/drawerRegistry'
|
|
import { useShellUiStore } from '@/stores/useShellUiStore'
|
|
|
|
/**
|
|
* RightDrawer is fully store-driven via useShellUiStore().drawer +
|
|
* the drawerRegistry singleton. Each seed registers a demo body under
|
|
* "SbDemo" (idempotent overwrite — registry is a module singleton) and
|
|
* optionally seeds openDrawer() so the teleported PrimeVue Drawer is
|
|
* visible. Chrome keys title/flush are passed in the props object.
|
|
*/
|
|
const SbDemoBody = defineComponent({
|
|
name: 'SbDemoBody',
|
|
template: '<div class="p-2 text-sm">Demo drawer body</div>',
|
|
})
|
|
|
|
const meta: Meta<typeof RightDrawer> = {
|
|
title: 'v2 Shell/RightDrawer',
|
|
component: RightDrawer,
|
|
tags: ['autodocs'],
|
|
}
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof RightDrawer>
|
|
|
|
export const Closed: Story = {
|
|
decorators: [
|
|
withPinia(() => {
|
|
registerDrawerComponent('SbDemo', SbDemoBody)
|
|
}),
|
|
],
|
|
render: () => ({
|
|
components: { RightDrawer },
|
|
template: `
|
|
<div class="min-h-[200px]">
|
|
<p class="text-sm text-[var(--p-text-muted-color)]">Drawer is closed (store seeded but openDrawer not called).</p>
|
|
<RightDrawer />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const OpenWithBody: Story = {
|
|
decorators: [
|
|
withPinia(() => {
|
|
registerDrawerComponent('SbDemo', SbDemoBody)
|
|
|
|
const shellUi = useShellUiStore()
|
|
|
|
shellUi.openDrawer('SbDemo', { title: 'Details' })
|
|
}),
|
|
],
|
|
render: () => ({
|
|
components: { RightDrawer },
|
|
template: `
|
|
<div class="min-h-[200px]">
|
|
<RightDrawer />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const Flush: Story = {
|
|
decorators: [
|
|
withPinia(() => {
|
|
registerDrawerComponent('SbDemo', SbDemoBody)
|
|
|
|
const shellUi = useShellUiStore()
|
|
|
|
shellUi.openDrawer('SbDemo', { title: 'Flush', flush: true })
|
|
}),
|
|
],
|
|
render: () => ({
|
|
components: { RightDrawer },
|
|
template: `
|
|
<div class="min-h-[200px]">
|
|
<RightDrawer />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|