@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.5

package/src/stories/Accordion.stories.ts

@@ -1,650 +1,650 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
-import AccordionItem from '@components/Accordion/AccordionItem.vue';
-import AppointmentCard from '@components/Laboratory/AppointmentCard/AppointmentCard.vue';
-import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
-import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
-import { ref } from 'vue';
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the Accordion components
-const meta: Meta<typeof AccordionGroup> = {
-  title: 'WL/Accordion',
-  component: AccordionGroup,
-  tags: ['autodocs'],
-  argTypes: {
-    multiple: {
-      control: 'boolean',
-      description: 'Allows multiple panels to be open simultaneously.',
-    },
-    variant: {
-      control: 'select',
-      options: ['plain', 'outlined'],
-      description:
-        'Determines the visual style of the accordion items. Options are "plain" or "outlined".',
-    },
-    variantGroup: {
-      control: 'select',
-      options: ['inset', 'popout'],
-      description:
-        'Determines the style of the accordion group, allowing for "inset" or "popout".',
-    },
-    bgColor: {
-      control: 'color',
-      description: 'Sets the background color of each AccordionItem.',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`AccordionGroup\` component wraps multiple \`AccordionItem\` components, allowing for a collapsible panel layout. The \`AccordionGroup\` manages the state of which panels are open, and allows for single or multiple panels to be open at a time.
-
-### AccordionGroup Props
-- **\`multiple\`**: Boolean to allow multiple panels to be open simultaneously.
-- **\`variantGroup\`**: Specifies the overall styling, either "inset" for embedded or "popout" for standout styling.
-
-### AccordionItem Props
-- **\`title\`**: Specifies the header text. Default is "Default Title".
-- **\`text\`**: Specifies the content text within the panel. Default is "Default text".
-- **\`variant\`**: Sets the accordion item style (plain or outlined).
-- **\`value\`**: Unique identifier for the accordion item. Required when used inside an \`AccordionGroup\`.
-- **\`bgColor\`**: Sets the background color of the accordion item.
-
-### Slots
-- **\`title\`**: A slot for custom title content in the header.
-- **\`content\`**: A slot for custom content within the accordion panel.
-
-### Example Usage
-The following examples demonstrate how to use \`AccordionGroup\` and \`AccordionItem\` components, including custom content in the \`content\` slot and applying custom background colors.
-`,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define the common template
-const Template: Story = {
-  render: (args) => ({
-    components: {
-      AccordionGroup,
-      AccordionItem,
-      AppointmentCard,
-      DocumentCard,
-      DocumentCardItem,
-    },
-    setup() {
-      const panel = ref([]);
-      const downloadAction = action('download:all');
-
-      function handleDownload() {
-        downloadAction('Document downloaded');
-      }
-
-      return {
-        args,
-        panel,
-        downloadAction,
-        handleDownload,
-      };
-    },
-    template: `
-      <div :class="[args.variantGroup === 'inset' ? 'inset-style' : 'popout-style']">
-        <AccordionGroup v-bind="args" v-model="panel">
-          <!-- Content will be defined in individual stories -->
-        </AccordionGroup>
-      </div>
-    `,
-  }),
-};
-
-// Story: Outlined variant with inset style
-export const OutlinedInset: Story = {
-  ...Template,
-  args: {
-    variant: 'outlined',
-    variantGroup: 'inset',
-    multiple: false,
-    bgColor: '#f5f5f7', // Default background color
-  },
-  render: (args) => ({
-    components: { AccordionGroup, AccordionItem },
-    setup() {
-      const panel = ref([]);
-
-      return { args, panel };
-    },
-    template: `
-      <div style="margin: 16px; padding: 16px; border-radius: 8px;">
-        <AccordionGroup :multiple="args.multiple" :variant-group="args.variantGroup" v-model="panel">
-          <AccordionItem
-            title="What is the cost of a complete denture?"
-            text="Sample text goes here..."
-            value="panel1"
-            :variant="args.variant"
-            :bg-color="args.bgColor"
-          />
-        </AccordionGroup>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div style="margin: 16px; padding: 16px; border-radius: 8px;">
-    <AccordionGroup :multiple="false" variant-group="inset" v-model="panel">
-      <AccordionItem
-        title="What is the cost of a complete denture?"
-        text="Sample text goes here..."
-        value="panel1"
-        variant="outlined"
-        :bg-color="args.bgColor"
-      />
-    </AccordionGroup>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
-import AccordionItem from '@components/Accordion/AccordionItem.vue';
-
-const panel = ref([]);
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Story: Popout style with multiple accordions
-export const PopoutWithMultipleAccordions: Story = {
-  ...Template,
-  args: {
-    variant: 'outlined',
-    variantGroup: 'accordion',
-    multiple: true,
-    bgColor: '#f5f5f7', // Default background color
-  },
-  render: (args) => ({
-    components: { AccordionGroup, AccordionItem },
-    setup() {
-      const panel = ref([]);
-
-      function selectAll() {
-        panel.value = ['panel1', 'panel2', 'panel3'];
-      }
-
-      function selectNone() {
-        panel.value = [];
-      }
-
-      return { args, panel, selectAll, selectNone };
-    },
-    template: `
-      <div>
-        <div class="text-center d-flex pb-4">
-          <v-btn class="ma-2" @click="selectAll">All</v-btn>
-          <v-btn class="ma-2" @click="selectNone">None</v-btn>
-        </div>
-
-        <div class="pb-4">v-model: {{ panel }}</div>
-
-        <AccordionGroup :multiple="args.multiple" :variant-group="args.variantGroup" v-model="panel">
-          <AccordionItem
-            title="Accordion Item 1"
-            text="Content for Accordion Item 1."
-            value="panel1"
-            :variant="args.variant"
-            :bg-color="args.bgColor"
-          />
-          <AccordionItem
-            title="Accordion Item 2"
-            text="Content for Accordion Item 2."
-            value="panel2"
-            :variant="args.variant"
-            :bg-color="args.bgColor"
-          />
-          <AccordionItem
-            title="Accordion Item 3"
-            text="Content for Accordion Item 3."
-            value="panel3"
-            :variant="args.variant"
-            :bg-color="args.bgColor"
-          />
-        </AccordionGroup>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div>
-    <div class="text-center d-flex pb-4">
-      <v-btn class="ma-2" @click="selectAll">All</v-btn>
-      <v-btn class="ma-2" @click="selectNone">None</v-btn>
-    </div>
-
-    <div class="pb-4">v-model: {{ panel }}</div>
-
-    <AccordionGroup :multiple="true" variant-group="popout" v-model="panel">
-      <AccordionItem
-        title="Accordion Item 1"
-        text="Content for Accordion Item 1."
-        value="panel1"
-        variant="outlined"
-        :bg-color="args.bgColor"
-      />
-      <AccordionItem
-        title="Accordion Item 2"
-        text="Content for Accordion Item 2."
-        value="panel2"
-        variant="outlined"
-        :bg-color="args.bgColor"
-      />
-      <AccordionItem
-        title="Accordion Item 3"
-        text="Content for Accordion Item 3."
-        value="panel3"
-        variant="outlined"
-        :bg-color="args.bgColor"
-      />
-    </AccordionGroup>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
-import AccordionItem from '@components/Accordion/AccordionItem.vue';
-
-const panel = ref([]);
-
-function selectAll() {
-  panel.value = ['panel1', 'panel2', 'panel3'];
-}
-
-function selectNone() {
-  panel.value = [];
-}
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Story: Pre-Opened Accordion with Inset Style
-export const AccordionWithPreOpenedPanels: Story = {
-  ...Template,
-  args: {
-    variant: 'outlined',
-    variantGroup: 'accordion',
-    multiple: true,
-    bgColor: '#f5f5f7', // Default background color
-  },
-  render: (args) => ({
-    components: { AccordionGroup, AccordionItem },
-    setup() {
-      const panel = ref(['panel1', 'panel3']); // Pre-open panels 1 and 3
-
-      function selectAll() {
-        panel.value = ['panel1', 'panel2', 'panel3'];
-      }
-
-      function selectNone() {
-        panel.value = [];
-      }
-
-      return { args, panel, selectAll, selectNone };
-    },
-    template: `
-      <div>
-        <div class="text-center d-flex pb-4">
-          <v-btn class="ma-2" @click="selectAll">All</v-btn>
-          <v-btn class="ma-2" @click="selectNone">None</v-btn>
-        </div>
-
-        <div class="pb-4">v-model: {{ panel }}</div>
-
-        <AccordionGroup :multiple="args.multiple" :variant-group="args.variantGroup" v-model="panel">
-          <AccordionItem
-            title="Accordion Item 1 (Pre-Opened)"
-            text="Content for Accordion Item 1."
-            value="panel1"
-            :variant="args.variant"
-            :bg-color="args.bgColor"
-          />
-          <AccordionItem
-            title="Accordion Item 2"
-            text="Content for Accordion Item 2."
-            value="panel2"
-            :variant="args.variant"
-            :bg-color="args.bgColor"
-          />
-          <AccordionItem
-            title="Accordion Item 3 (Pre-Opened)"
-            text="Content for Accordion Item 3."
-            value="panel3"
-            :variant="args.variant"
-            :bg-color="args.bgColor"
-          />
-        </AccordionGroup>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div>
-    <div class="text-center d-flex pb-4">
-      <v-btn class="ma-2" @click="selectAll">All</v-btn>
-      <v-btn class="ma-2" @click="selectNone">None</v-btn>
-    </div>
-
-    <div class="pb-4">v-model: {{ panel }}</div>
-
-    <AccordionGroup :multiple="true" variant-group="inset" v-model="panel">
-      <AccordionItem
-        title="Accordion Item 1 (Pre-Opened)"
-        text="Content for Accordion Item 1."
-        value="panel1"
-        variant="outlined"
-        :bg-color="args.bgColor"
-      />
-      <AccordionItem
-        title="Accordion Item 2"
-        text="Content for Accordion Item 2."
-        value="panel2"
-        variant="outlined"
-        :bg-color="args.bgColor"
-      />
-      <AccordionItem
-        title="Accordion Item 3 (Pre-Opened)"
-        text="Content for Accordion Item 3."
-        value="panel3"
-        variant="outlined"
-        :bg-color="args.bgColor"
-      />
-    </AccordionGroup>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
-import AccordionItem from '@components/Accordion/AccordionItem.vue';
-
-const panel = ref(['panel1', 'panel3']);
-
-function selectAll() {
-  panel.value = ['panel1', 'panel2', 'panel3'];
-}
-
-function selectNone() {
-  panel.value = [];
-}
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Story: Accordion with Document Card
-export const AccordionWithDocumentCard: Story = {
-  ...Template,
-  args: {
-    variant: 'plain',
-    multiple: false,
-    bgColor: '#f5f5f7', // Default background color
-  },
-  render: (args) => ({
-    components: {
-      AccordionGroup,
-      AccordionItem,
-      DocumentCard,
-      DocumentCardItem,
-    },
-    setup() {
-      const panel = ref([]);
-      const downloadAction = action('download:all');
-
-      function handleDownload() {
-        downloadAction('Document downloaded');
-      }
-
-      return { args, panel, downloadAction, handleDownload };
-    },
-    template: `
-      <div style="margin: 16px; padding: 16px; border-radius: 8px;">
-        <AccordionGroup :multiple="args.multiple" v-model="panel">
-          <AccordionItem value="panel1" :variant="args.variant" :bg-color="args.bgColor">
-            <template #title>
-              <h3>Document Card</h3>
-            </template>
-            <template #content>
-              <DocumentCard title="Attachments" @download:all="downloadAction">
-                <DocumentCardItem
-                  header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
-                  subheader="Uploaded 06.09.24 09:43"
-                  icon="mdi-download"
-                  @click:icon="handleDownload"
-                />
-                <DocumentCardItem
-                  header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
-                  subheader="Uploaded 07.09.24 10:15"
-                  icon="mdi-file"
-                  @click:icon="handleDownload"
-                />
-                <DocumentCardItem
-                  header="08.09.2024 John Doe, Lzp. 33 Mandibular"
-                  subheader="Uploaded 08.09.24 11:30"
-                  icon="mdi-file-document"
-                  @click:icon="handleDownload"
-                />
-              </DocumentCard>
-            </template>
-          </AccordionItem>
-        </AccordionGroup>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div style="margin: 16px; padding: 16px; border-radius: 8px;">
-    <AccordionGroup :multiple="false" v-model="panel">
-      <AccordionItem value="panel1" variant="plain" :bg-color="args.bgColor">
-        <template #title>
-          <h3>Document Card</h3>
-        </template>
-        <template #content>
-          <DocumentCard title="Attachments" @download:all="downloadAction">
-            <DocumentCardItem
-              header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
-              subheader="Uploaded 06.09.24 09:43"
-              icon="mdi-download"
-              @click:icon="handleDownload"
-            />
-            <DocumentCardItem
-              header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
-              subheader="Uploaded 07.09.24 10:15"
-              icon="mdi-file"
-              @click:icon="handleDownload"
-            />
-            <DocumentCardItem
-              header="08.09.2024 John Doe, Lzp. 33 Mandibular"
-              subheader="Uploaded 08.09.24 11:30"
-              icon="mdi-file-document"
-              @click:icon="handleDownload"
-            />
-          </DocumentCard>
-        </template>
-      </AccordionItem>
-    </AccordionGroup>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
-import AccordionItem from '@components/Accordion/AccordionItem.vue';
-import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
-import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
-
-const panel = ref([]);
-
-function handleDownload() {
-  // Download action logic
-}
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Story: Accordion with Slots
-export const AccordionWithSlots: Story = {
-  ...Template,
-  args: {
-    variant: 'plain',
-    multiple: false,
-    bgColor: '#f5f5f7', // Default background color
-  },
-  render: (args) => ({
-    components: { AccordionGroup, AccordionItem, AppointmentCard },
-    setup() {
-      const panel = ref([]);
-
-      return { args, panel };
-    },
-    template: `
-      <div style="margin: 16px; padding: 16px; border-radius: 8px;">
-        <AccordionGroup :multiple="args.multiple" v-model="panel">
-          <AccordionItem value="panel1" :variant="args.variant" :bg-color="args.bgColor">
-            <template #title>
-              <h3>Custom Title via Slot</h3>
-            </template>
-            <template #content>
-              <AppointmentCard
-                date="18.05.2024"
-                status="Done"
-                treatment-name="Checkup"
-                dentist-name="Dr. Jane Smith"
-              />
-            </template>
-          </AccordionItem>
-        </AccordionGroup>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div style="margin: 16px; padding: 16px; border-radius: 8px;">
-    <AccordionGroup :multiple="false" v-model="panel">
-      <AccordionItem value="panel1" variant="plain" :bg-color="args.bgColor">
-        <template #title>
-          <h3>Custom Title via Slot</h3>
-        </template>
-        <template #content>
-          <AppointmentCard
-            date="18.05.2024"
-            status="Done"
-            treatment-name="Checkup"
-            dentist-name="Dr. Jane Smith"
-          />
-        </template>
-      </AccordionItem>
-    </AccordionGroup>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
-import AccordionItem from '@components/Accordion/AccordionItem.vue';
-import AppointmentCard from '@components/Laboratory/AppointmentCard/AppointmentCard.vue';
-
-const panel = ref([]);
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Story: Accordion with Custom Colors (Optional - Additional Story)
-export const AccordionWithCustomColors: Story = {
-  args: {
-    variant: 'outlined',
-    variantGroup: 'accordion',
-    multiple: false,
-    bgColor: 'blue', // Default background color
-  },
-  render: (args) => ({
-    components: { AccordionGroup, AccordionItem },
-    setup() {
-      const panel = ref([]);
-
-      return { args, panel };
-    },
-    template: `
-      <div :style="{ padding: '16px', borderRadius: '8px' }">
-        <AccordionGroup :multiple="args.multiple" :variant-group="args.variantGroup" v-model="panel">
-          <AccordionItem
-            title="Custom Colored Accordion"
-            text="This accordion item has a customizable background color."
-            value="panel1"
-            :variant="args.variant"
-            :bg-color="args.bgColor"
-          />
-        </AccordionGroup>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div :style="{ padding: '16px', borderRadius: '8px' }">
-    <AccordionGroup :multiple="false" variant-group="inset" v-model="panel">
-      <AccordionItem
-        title="Custom Colored Accordion"
-        text="This accordion item has a customizable background color."
-        value="panel1"
-        variant="outlined"
-        :bg-color="args.bgColor"
-      />
-    </AccordionGroup>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
-import AccordionItem from '@components/Accordion/AccordionItem.vue';
-
-const panel = ref([]);
-</script>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+import AppointmentCard from '@components/Laboratory/AppointmentCard/AppointmentCard.vue';
+import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+import { ref } from 'vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the Accordion components
+const meta: Meta<typeof AccordionGroup> = {
+  title: 'WL/Accordion',
+  component: AccordionGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    multiple: {
+      control: 'boolean',
+      description: 'Allows multiple panels to be open simultaneously.',
+    },
+    variant: {
+      control: 'select',
+      options: ['plain', 'outlined'],
+      description:
+        'Determines the visual style of the accordion items. Options are "plain" or "outlined".',
+    },
+    variantGroup: {
+      control: 'select',
+      options: ['inset', 'popout'],
+      description:
+        'Determines the style of the accordion group, allowing for "inset" or "popout".',
+    },
+    bgColor: {
+      control: 'color',
+      description: 'Sets the background color of each AccordionItem.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`AccordionGroup\` component wraps multiple \`AccordionItem\` components, allowing for a collapsible panel layout. The \`AccordionGroup\` manages the state of which panels are open, and allows for single or multiple panels to be open at a time.
+
+### AccordionGroup Props
+- **\`multiple\`**: Boolean to allow multiple panels to be open simultaneously.
+- **\`variantGroup\`**: Specifies the overall styling, either "inset" for embedded or "popout" for standout styling.
+
+### AccordionItem Props
+- **\`title\`**: Specifies the header text. Default is "Default Title".
+- **\`text\`**: Specifies the content text within the panel. Default is "Default text".
+- **\`variant\`**: Sets the accordion item style (plain or outlined).
+- **\`value\`**: Unique identifier for the accordion item. Required when used inside an \`AccordionGroup\`.
+- **\`bgColor\`**: Sets the background color of the accordion item.
+
+### Slots
+- **\`title\`**: A slot for custom title content in the header.
+- **\`content\`**: A slot for custom content within the accordion panel.
+
+### Example Usage
+The following examples demonstrate how to use \`AccordionGroup\` and \`AccordionItem\` components, including custom content in the \`content\` slot and applying custom background colors.
+`,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define the common template
+const Template: Story = {
+  render: (args) => ({
+    components: {
+      AccordionGroup,
+      AccordionItem,
+      AppointmentCard,
+      DocumentCard,
+      DocumentCardItem,
+    },
+    setup() {
+      const panel = ref([]);
+      const downloadAction = action('download:all');
+
+      function handleDownload() {
+        downloadAction('Document downloaded');
+      }
+
+      return {
+        args,
+        panel,
+        downloadAction,
+        handleDownload,
+      };
+    },
+    template: `
+      <div :class="[args.variantGroup === 'inset' ? 'inset-style' : 'popout-style']">
+        <AccordionGroup v-bind="args" v-model="panel">
+          <!-- Content will be defined in individual stories -->
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+};
+
+// Story: Outlined variant with inset style
+export const OutlinedInset: Story = {
+  ...Template,
+  args: {
+    variant: 'outlined',
+    variantGroup: 'inset',
+    multiple: false,
+    bgColor: '#f5f5f7', // Default background color
+  },
+  render: (args) => ({
+    components: { AccordionGroup, AccordionItem },
+    setup() {
+      const panel = ref([]);
+
+      return { args, panel };
+    },
+    template: `
+      <div style="margin: 16px; padding: 16px; border-radius: 8px;">
+        <AccordionGroup :multiple="args.multiple" :variant-group="args.variantGroup" v-model="panel">
+          <AccordionItem
+            title="What is the cost of a complete denture?"
+            text="Sample text goes here..."
+            value="panel1"
+            :variant="args.variant"
+            :bg-color="args.bgColor"
+          />
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="margin: 16px; padding: 16px; border-radius: 8px;">
+    <AccordionGroup :multiple="false" variant-group="inset" v-model="panel">
+      <AccordionItem
+        title="What is the cost of a complete denture?"
+        text="Sample text goes here..."
+        value="panel1"
+        variant="outlined"
+        :bg-color="args.bgColor"
+      />
+    </AccordionGroup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+
+const panel = ref([]);
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story: Popout style with multiple accordions
+export const PopoutWithMultipleAccordions: Story = {
+  ...Template,
+  args: {
+    variant: 'outlined',
+    variantGroup: 'accordion',
+    multiple: true,
+    bgColor: '#f5f5f7', // Default background color
+  },
+  render: (args) => ({
+    components: { AccordionGroup, AccordionItem },
+    setup() {
+      const panel = ref([]);
+
+      function selectAll() {
+        panel.value = ['panel1', 'panel2', 'panel3'];
+      }
+
+      function selectNone() {
+        panel.value = [];
+      }
+
+      return { args, panel, selectAll, selectNone };
+    },
+    template: `
+      <div>
+        <div class="text-center d-flex pb-4">
+          <v-btn class="ma-2" @click="selectAll">All</v-btn>
+          <v-btn class="ma-2" @click="selectNone">None</v-btn>
+        </div>
+
+        <div class="pb-4">v-model: {{ panel }}</div>
+
+        <AccordionGroup :multiple="args.multiple" :variant-group="args.variantGroup" v-model="panel">
+          <AccordionItem
+            title="Accordion Item 1"
+            text="Content for Accordion Item 1."
+            value="panel1"
+            :variant="args.variant"
+            :bg-color="args.bgColor"
+          />
+          <AccordionItem
+            title="Accordion Item 2"
+            text="Content for Accordion Item 2."
+            value="panel2"
+            :variant="args.variant"
+            :bg-color="args.bgColor"
+          />
+          <AccordionItem
+            title="Accordion Item 3"
+            text="Content for Accordion Item 3."
+            value="panel3"
+            :variant="args.variant"
+            :bg-color="args.bgColor"
+          />
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div>
+    <div class="text-center d-flex pb-4">
+      <v-btn class="ma-2" @click="selectAll">All</v-btn>
+      <v-btn class="ma-2" @click="selectNone">None</v-btn>
+    </div>
+
+    <div class="pb-4">v-model: {{ panel }}</div>
+
+    <AccordionGroup :multiple="true" variant-group="popout" v-model="panel">
+      <AccordionItem
+        title="Accordion Item 1"
+        text="Content for Accordion Item 1."
+        value="panel1"
+        variant="outlined"
+        :bg-color="args.bgColor"
+      />
+      <AccordionItem
+        title="Accordion Item 2"
+        text="Content for Accordion Item 2."
+        value="panel2"
+        variant="outlined"
+        :bg-color="args.bgColor"
+      />
+      <AccordionItem
+        title="Accordion Item 3"
+        text="Content for Accordion Item 3."
+        value="panel3"
+        variant="outlined"
+        :bg-color="args.bgColor"
+      />
+    </AccordionGroup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+
+const panel = ref([]);
+
+function selectAll() {
+  panel.value = ['panel1', 'panel2', 'panel3'];
+}
+
+function selectNone() {
+  panel.value = [];
+}
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story: Pre-Opened Accordion with Inset Style
+export const AccordionWithPreOpenedPanels: Story = {
+  ...Template,
+  args: {
+    variant: 'outlined',
+    variantGroup: 'accordion',
+    multiple: true,
+    bgColor: '#f5f5f7', // Default background color
+  },
+  render: (args) => ({
+    components: { AccordionGroup, AccordionItem },
+    setup() {
+      const panel = ref(['panel1', 'panel3']); // Pre-open panels 1 and 3
+
+      function selectAll() {
+        panel.value = ['panel1', 'panel2', 'panel3'];
+      }
+
+      function selectNone() {
+        panel.value = [];
+      }
+
+      return { args, panel, selectAll, selectNone };
+    },
+    template: `
+      <div>
+        <div class="text-center d-flex pb-4">
+          <v-btn class="ma-2" @click="selectAll">All</v-btn>
+          <v-btn class="ma-2" @click="selectNone">None</v-btn>
+        </div>
+
+        <div class="pb-4">v-model: {{ panel }}</div>
+
+        <AccordionGroup :multiple="args.multiple" :variant-group="args.variantGroup" v-model="panel">
+          <AccordionItem
+            title="Accordion Item 1 (Pre-Opened)"
+            text="Content for Accordion Item 1."
+            value="panel1"
+            :variant="args.variant"
+            :bg-color="args.bgColor"
+          />
+          <AccordionItem
+            title="Accordion Item 2"
+            text="Content for Accordion Item 2."
+            value="panel2"
+            :variant="args.variant"
+            :bg-color="args.bgColor"
+          />
+          <AccordionItem
+            title="Accordion Item 3 (Pre-Opened)"
+            text="Content for Accordion Item 3."
+            value="panel3"
+            :variant="args.variant"
+            :bg-color="args.bgColor"
+          />
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div>
+    <div class="text-center d-flex pb-4">
+      <v-btn class="ma-2" @click="selectAll">All</v-btn>
+      <v-btn class="ma-2" @click="selectNone">None</v-btn>
+    </div>
+
+    <div class="pb-4">v-model: {{ panel }}</div>
+
+    <AccordionGroup :multiple="true" variant-group="inset" v-model="panel">
+      <AccordionItem
+        title="Accordion Item 1 (Pre-Opened)"
+        text="Content for Accordion Item 1."
+        value="panel1"
+        variant="outlined"
+        :bg-color="args.bgColor"
+      />
+      <AccordionItem
+        title="Accordion Item 2"
+        text="Content for Accordion Item 2."
+        value="panel2"
+        variant="outlined"
+        :bg-color="args.bgColor"
+      />
+      <AccordionItem
+        title="Accordion Item 3 (Pre-Opened)"
+        text="Content for Accordion Item 3."
+        value="panel3"
+        variant="outlined"
+        :bg-color="args.bgColor"
+      />
+    </AccordionGroup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+
+const panel = ref(['panel1', 'panel3']);
+
+function selectAll() {
+  panel.value = ['panel1', 'panel2', 'panel3'];
+}
+
+function selectNone() {
+  panel.value = [];
+}
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story: Accordion with Document Card
+export const AccordionWithDocumentCard: Story = {
+  ...Template,
+  args: {
+    variant: 'plain',
+    multiple: false,
+    bgColor: '#f5f5f7', // Default background color
+  },
+  render: (args) => ({
+    components: {
+      AccordionGroup,
+      AccordionItem,
+      DocumentCard,
+      DocumentCardItem,
+    },
+    setup() {
+      const panel = ref([]);
+      const downloadAction = action('download:all');
+
+      function handleDownload() {
+        downloadAction('Document downloaded');
+      }
+
+      return { args, panel, downloadAction, handleDownload };
+    },
+    template: `
+      <div style="margin: 16px; padding: 16px; border-radius: 8px;">
+        <AccordionGroup :multiple="args.multiple" v-model="panel">
+          <AccordionItem value="panel1" :variant="args.variant" :bg-color="args.bgColor">
+            <template #title>
+              <h3>Document Card</h3>
+            </template>
+            <template #content>
+              <DocumentCard title="Attachments" @download:all="downloadAction">
+                <DocumentCardItem
+                  header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
+                  subheader="Uploaded 06.09.24 09:43"
+                  icon="mdi-download"
+                  @click:icon="handleDownload"
+                />
+                <DocumentCardItem
+                  header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+                  subheader="Uploaded 07.09.24 10:15"
+                  icon="mdi-file"
+                  @click:icon="handleDownload"
+                />
+                <DocumentCardItem
+                  header="08.09.2024 John Doe, Lzp. 33 Mandibular"
+                  subheader="Uploaded 08.09.24 11:30"
+                  icon="mdi-file-document"
+                  @click:icon="handleDownload"
+                />
+              </DocumentCard>
+            </template>
+          </AccordionItem>
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="margin: 16px; padding: 16px; border-radius: 8px;">
+    <AccordionGroup :multiple="false" v-model="panel">
+      <AccordionItem value="panel1" variant="plain" :bg-color="args.bgColor">
+        <template #title>
+          <h3>Document Card</h3>
+        </template>
+        <template #content>
+          <DocumentCard title="Attachments" @download:all="downloadAction">
+            <DocumentCardItem
+              header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
+              subheader="Uploaded 06.09.24 09:43"
+              icon="mdi-download"
+              @click:icon="handleDownload"
+            />
+            <DocumentCardItem
+              header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+              subheader="Uploaded 07.09.24 10:15"
+              icon="mdi-file"
+              @click:icon="handleDownload"
+            />
+            <DocumentCardItem
+              header="08.09.2024 John Doe, Lzp. 33 Mandibular"
+              subheader="Uploaded 08.09.24 11:30"
+              icon="mdi-file-document"
+              @click:icon="handleDownload"
+            />
+          </DocumentCard>
+        </template>
+      </AccordionItem>
+    </AccordionGroup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+
+const panel = ref([]);
+
+function handleDownload() {
+  // Download action logic
+}
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story: Accordion with Slots
+export const AccordionWithSlots: Story = {
+  ...Template,
+  args: {
+    variant: 'plain',
+    multiple: false,
+    bgColor: '#f5f5f7', // Default background color
+  },
+  render: (args) => ({
+    components: { AccordionGroup, AccordionItem, AppointmentCard },
+    setup() {
+      const panel = ref([]);
+
+      return { args, panel };
+    },
+    template: `
+      <div style="margin: 16px; padding: 16px; border-radius: 8px;">
+        <AccordionGroup :multiple="args.multiple" v-model="panel">
+          <AccordionItem value="panel1" :variant="args.variant" :bg-color="args.bgColor">
+            <template #title>
+              <h3>Custom Title via Slot</h3>
+            </template>
+            <template #content>
+              <AppointmentCard
+                date="18.05.2024"
+                status="Done"
+                treatment-name="Checkup"
+                dentist-name="Dr. Jane Smith"
+              />
+            </template>
+          </AccordionItem>
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="margin: 16px; padding: 16px; border-radius: 8px;">
+    <AccordionGroup :multiple="false" v-model="panel">
+      <AccordionItem value="panel1" variant="plain" :bg-color="args.bgColor">
+        <template #title>
+          <h3>Custom Title via Slot</h3>
+        </template>
+        <template #content>
+          <AppointmentCard
+            date="18.05.2024"
+            status="Done"
+            treatment-name="Checkup"
+            dentist-name="Dr. Jane Smith"
+          />
+        </template>
+      </AccordionItem>
+    </AccordionGroup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+import AppointmentCard from '@components/Laboratory/AppointmentCard/AppointmentCard.vue';
+
+const panel = ref([]);
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story: Accordion with Custom Colors (Optional - Additional Story)
+export const AccordionWithCustomColors: Story = {
+  args: {
+    variant: 'outlined',
+    variantGroup: 'accordion',
+    multiple: false,
+    bgColor: 'blue', // Default background color
+  },
+  render: (args) => ({
+    components: { AccordionGroup, AccordionItem },
+    setup() {
+      const panel = ref([]);
+
+      return { args, panel };
+    },
+    template: `
+      <div :style="{ padding: '16px', borderRadius: '8px' }">
+        <AccordionGroup :multiple="args.multiple" :variant-group="args.variantGroup" v-model="panel">
+          <AccordionItem
+            title="Custom Colored Accordion"
+            text="This accordion item has a customizable background color."
+            value="panel1"
+            :variant="args.variant"
+            :bg-color="args.bgColor"
+          />
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div :style="{ padding: '16px', borderRadius: '8px' }">
+    <AccordionGroup :multiple="false" variant-group="inset" v-model="panel">
+      <AccordionItem
+        title="Custom Colored Accordion"
+        text="This accordion item has a customizable background color."
+        value="panel1"
+        variant="outlined"
+        :bg-color="args.bgColor"
+      />
+    </AccordionGroup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+
+const panel = ref([]);
+</script>
+        `,
+      },
+    },
+  },
+};