92 lines
2.0 KiB
TypeScript
92 lines
2.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { onUnmounted } from 'vue'
|
|
import { orgA, userFixture, withPinia } from './_helpers'
|
|
import AppTopbar from '@/components-v2/layout/AppTopbar.vue'
|
|
import { useAuthStore } from '@/stores/useAuthStore'
|
|
import { useShellUiStore } from '@/stores/useShellUiStore'
|
|
|
|
/**
|
|
* AppTopbar reads useShellUiStore (theme / density), useAuthStore (user +
|
|
* currentOrganisation) and useBreadcrumb (route-driven — router is global
|
|
* in preview.ts). Each story seeds both stores on a fresh Pinia.
|
|
*/
|
|
const meta: Meta<typeof AppTopbar> = {
|
|
title: 'v2 Shell/AppTopbar',
|
|
component: AppTopbar,
|
|
tags: ['autodocs'],
|
|
}
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof AppTopbar>
|
|
|
|
export const Default: Story = {
|
|
decorators: [
|
|
withPinia(() => {
|
|
const auth = useAuthStore()
|
|
|
|
auth.user = userFixture
|
|
auth.organisations = [orgA]
|
|
}),
|
|
],
|
|
render: () => ({
|
|
components: { AppTopbar },
|
|
template: `
|
|
<div class="min-h-[200px]">
|
|
<AppTopbar />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const DarkTheme: Story = {
|
|
decorators: [
|
|
withPinia(() => {
|
|
const auth = useAuthStore()
|
|
|
|
auth.user = userFixture
|
|
auth.organisations = [orgA]
|
|
|
|
const shellUi = useShellUiStore()
|
|
|
|
shellUi.setTheme('dark')
|
|
}),
|
|
],
|
|
render: () => ({
|
|
components: { AppTopbar },
|
|
setup() {
|
|
document.documentElement.classList.add('dark')
|
|
onUnmounted(() => {
|
|
document.documentElement.classList.remove('dark')
|
|
})
|
|
},
|
|
template: `
|
|
<div class="min-h-[200px]">
|
|
<AppTopbar />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const CompactDensity: Story = {
|
|
decorators: [
|
|
withPinia(() => {
|
|
const auth = useAuthStore()
|
|
|
|
auth.user = userFixture
|
|
auth.organisations = [orgA]
|
|
|
|
const shellUi = useShellUiStore()
|
|
|
|
shellUi.setDensity('compact')
|
|
}),
|
|
],
|
|
render: () => ({
|
|
components: { AppTopbar },
|
|
template: `
|
|
<div class="min-h-[200px]">
|
|
<AppTopbar />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|