import { fn } from '@storybook/test' import type { Meta, StoryObj } from '@storybook/vue3' import ContextualMenu from './ContextualMenu.vue' import { ref, watch } from 'vue' const meta = { title: 'Composants/Navigation/ContextualMenu', component: ContextualMenu, decorators: [ () => ({ template: '
', }), ], parameters: { layout: 'fullscreen', }, argTypes: { 'items': { control: 'object', description: 'Les éléments du menu', table: { type: { summary: 'Array<{ text: string, hash: string, level?: 1 | 2 | 3 | 4 | 5 | 6 }>', }, }, }, 'modelValue': { description: 'Le hash de l’élément actif', control: 'text', table: { type: { summary: 'string', }, category: 'props', }, }, 'onUpdate:modelValue': { description: 'Événement émis lorsqu’un élément est cliqué', table: { type: { summary: 'string', }, category: 'events', }, }, 'ariaLabel': { description: 'Label pour l’accessibilité du menu', }, }, } satisfies Meta export default meta type Story = StoryObj export const Default: Story = { args: { 'ariaLabel': 'Menu contextuel', 'items': [ { text: 'Titre 1', hash: '#example-1', }, { text: 'Titre 2', hash: '#example-2', }, { text: 'Titre 3', hash: '#example-3', }, ], 'modelValue': '#example-1', 'onUpdate:modelValue': fn(), }, render: (args) => { return { components: { ContextualMenu }, setup() { const hash = ref() watch(() => args.modelValue, (value) => { hash.value = value }, { immediate: true }) return { args, hash } }, template: ` `, } }, parameters: { sourceCode: [ { name: 'Template', code: ` `, }, { name: 'Script', code: ` `, }, ], }, } export const WithAnchors: Story = { args: { 'ariaLabel': 'Menu contextuel', 'items': [{ text: 'section 1', hash: '#section-1', }, { text: 'section 2', hash: '#section-2', }, { text: 'section 3', hash: '#section-3', }, { text: 'section 4', hash: '#section-4', }, { text: 'section 5', hash: '#section-5', }], 'modelValue': '#section-1', 'onUpdate:modelValue': fn(), }, render: (args) => { return { components: { ContextualMenu }, setup() { const hash = ref() watch(() => args.modelValue, (value) => { hash.value = value }, { immediate: true }) return { args, hash } }, template: `

section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor. Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.

section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor. Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.

section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor. Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.

section 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor. Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.

section 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor. Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.

`, } }, parameters: { sourceCode: [ { name: 'Template', code: ` `, }, { name: 'Script', code: ` `, }, { name: 'Style', code: ` `, }, ], }, } export const levels: Story = { args: { 'ariaLabel': 'Menu contextuel', 'items': [ { text: 'Level 1', hash: '#example-1', }, { text: 'Level 2', hash: '#example-2', level: 2, }, { text: 'Level 3', hash: '#example-3', level: 3, }, { text: 'Level 4', hash: '#example-4', level: 4, }, { text: 'Level 5', hash: '#example-5', level: 5, }, { text: 'Level 6', hash: '#example-6', level: 6, }, ], 'modelValue': '#example-1', 'onUpdate:modelValue': fn(), }, render: (args) => { return { components: { ContextualMenu }, setup() { const hash = ref() watch(() => args.modelValue, (value) => { hash.value = value }, { immediate: true }) return { args, hash } }, template: ` `, } }, parameters: { sourceCode: [ { name: 'Template', code: ` `, }, { name: 'Script', code: ` `, }, ], }, }