@zap-wunschlachen/wl-shared-components 1.0.37 → 1.0.38

package/src/stories/Laboratory/SelectionColumnBar.stories.ts

@@ -1,234 +1,234 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import SelectionColumnBar from '@components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the SelectionColumnBar component
-const meta: Meta<typeof SelectionColumnBar> = {
-  title: 'WL/Laboratory/SelectionColumnBar',
-  component: SelectionColumnBar,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'The title displayed in the center button.',
-    },
-    disableLast: {
-      control: 'boolean',
-      description: 'Disables the "Vorheriges Board" button if true.',
-    },
-    disableNext: {
-      control: 'boolean',
-      description: 'Disables the "Nächstes Board" button if true.',
-    },
-    'click:last': {
-      action: 'click:last',
-      description: 'Triggered when the "Vorheriges Board" button is clicked.',
-    },
-    'click:next': {
-      action: 'click:next',
-      description: 'Triggered when the "Nächstes Board" button is clicked.',
-    },
-  },
-  args: {
-    title: 'Draft Board', // Default title
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`SelectionColumnBar\` component provides navigation with options for "Vorheriges Board" (Previous Board) and "Nächstes Board" (Next Board) buttons, along with a dynamic title. You can disable either navigation button with the \`disableLast\` and \`disableNext\` props, and track clicks on these buttons with event actions.
-
-### Props
-- **\`title\`**: Sets the title text in the center button.
-- **\`disableLast\`**: Disables the "Vorheriges Board" button if set to true.
-- **\`disableNext\`**: Disables the "Nächstes Board" button if set to true.
-
-### Events
-- **\`click:last\`**: Emitted when the "Vorheriges Board" button is clicked.
-- **\`click:next\`**: Emitted when the "Nächstes Board" button is clicked.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Common template
-const Template: Story = {
-  render: (args) => ({
-    components: { SelectionColumnBar },
-    setup() {
-      return { args };
-    },
-    template: `
-      <SelectionColumnBar 
-        v-bind="args" 
-        @click:last="args['click:last']" 
-        @click:next="args['click:next']" 
-      />
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <SelectionColumnBar 
-    :title="title"
-    :disableLast="disableLast"
-    :disableNext="disableNext"
-    @click:last="clickLast"
-    @click:next="clickNext"
-  />
-</template>
-
-<script setup>
-import SelectionColumnBar from '@components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
-
-const clickLast = () => console.log('Previous button clicked');
-const clickNext = () => console.log('Next button clicked');
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Default story
-export const Default: Story = { ...Template };
-
-// Custom title story
-export const CustomTitle: Story = {
-  ...Template,
-  args: {
-    title: 'Custom Draft Title',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <SelectionColumnBar 
-    title="Custom Draft Title" 
-    @click:last="clickLast" 
-    @click:next="clickNext" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// With disabled previous button
-export const DisabledPrevious: Story = {
-  ...Template,
-  args: {
-    title: 'Board with Disabled Previous',
-    disableLast: true,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <SelectionColumnBar 
-    title="Board with Disabled Previous" 
-    :disableLast="true" 
-    @click:last="clickLast" 
-    @click:next="clickNext" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// With disabled next button
-export const DisabledNext: Story = {
-  ...Template,
-  args: {
-    title: 'Board with Disabled Next',
-    disableNext: true,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <SelectionColumnBar 
-    title="Board with Disabled Next" 
-    :disableNext="true" 
-    @click:last="clickLast" 
-    @click:next="clickNext" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// With both buttons disabled
-export const BothDisabled: Story = {
-  ...Template,
-  args: {
-    title: 'Board with Both Buttons Disabled',
-    disableLast: true,
-    disableNext: true,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <SelectionColumnBar 
-    title="Board with Both Buttons Disabled" 
-    :disableLast="true" 
-    :disableNext="true" 
-    @click:last="clickLast" 
-    @click:next="clickNext" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Story with event actions for debugging
-export const WithEventActions: Story = {
-  ...Template,
-  args: {
-    title: 'Event Handling Board',
-  },
-  argTypes: {
-    'click:last': { action: 'click:last' },
-    'click:next': { action: 'click:next' },
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <SelectionColumnBar 
-    title="Event Handling Board" 
-    @click:last="clickLast" 
-    @click:next="clickNext" 
-  />
-</template>
-
-<script setup>
-import { action } from '@storybook/addon-actions';
-
-const clickLast = action('click:last');
-const clickNext = action('click:next');
-</script>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import SelectionColumnBar from '@components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the SelectionColumnBar component
+const meta: Meta<typeof SelectionColumnBar> = {
+  title: 'WL/Laboratory/SelectionColumnBar',
+  component: SelectionColumnBar,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title displayed in the center button.',
+    },
+    disableLast: {
+      control: 'boolean',
+      description: 'Disables the "Vorheriges Board" button if true.',
+    },
+    disableNext: {
+      control: 'boolean',
+      description: 'Disables the "Nächstes Board" button if true.',
+    },
+    'click:last': {
+      action: 'click:last',
+      description: 'Triggered when the "Vorheriges Board" button is clicked.',
+    },
+    'click:next': {
+      action: 'click:next',
+      description: 'Triggered when the "Nächstes Board" button is clicked.',
+    },
+  },
+  args: {
+    title: 'Draft Board', // Default title
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`SelectionColumnBar\` component provides navigation with options for "Vorheriges Board" (Previous Board) and "Nächstes Board" (Next Board) buttons, along with a dynamic title. You can disable either navigation button with the \`disableLast\` and \`disableNext\` props, and track clicks on these buttons with event actions.
+
+### Props
+- **\`title\`**: Sets the title text in the center button.
+- **\`disableLast\`**: Disables the "Vorheriges Board" button if set to true.
+- **\`disableNext\`**: Disables the "Nächstes Board" button if set to true.
+
+### Events
+- **\`click:last\`**: Emitted when the "Vorheriges Board" button is clicked.
+- **\`click:next\`**: Emitted when the "Nächstes Board" button is clicked.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Common template
+const Template: Story = {
+  render: (args) => ({
+    components: { SelectionColumnBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SelectionColumnBar 
+        v-bind="args" 
+        @click:last="args['click:last']" 
+        @click:next="args['click:next']" 
+      />
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    :title="title"
+    :disableLast="disableLast"
+    :disableNext="disableNext"
+    @click:last="clickLast"
+    @click:next="clickNext"
+  />
+</template>
+
+<script setup>
+import SelectionColumnBar from '@components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
+
+const clickLast = () => console.log('Previous button clicked');
+const clickNext = () => console.log('Next button clicked');
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Default story
+export const Default: Story = { ...Template };
+
+// Custom title story
+export const CustomTitle: Story = {
+  ...Template,
+  args: {
+    title: 'Custom Draft Title',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Custom Draft Title" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// With disabled previous button
+export const DisabledPrevious: Story = {
+  ...Template,
+  args: {
+    title: 'Board with Disabled Previous',
+    disableLast: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Board with Disabled Previous" 
+    :disableLast="true" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// With disabled next button
+export const DisabledNext: Story = {
+  ...Template,
+  args: {
+    title: 'Board with Disabled Next',
+    disableNext: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Board with Disabled Next" 
+    :disableNext="true" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// With both buttons disabled
+export const BothDisabled: Story = {
+  ...Template,
+  args: {
+    title: 'Board with Both Buttons Disabled',
+    disableLast: true,
+    disableNext: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Board with Both Buttons Disabled" 
+    :disableLast="true" 
+    :disableNext="true" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with event actions for debugging
+export const WithEventActions: Story = {
+  ...Template,
+  args: {
+    title: 'Event Handling Board',
+  },
+  argTypes: {
+    'click:last': { action: 'click:last' },
+    'click:next': { action: 'click:next' },
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Event Handling Board" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+
+<script setup>
+import { action } from '@storybook/addon-actions';
+
+const clickLast = action('click:last');
+const clickNext = action('click:next');
+</script>
+        `,
+      },
+    },
+  },
+};