@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/Accordion.stories.ts

@@ -0,0 +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>
+        `,
+      },
+    },
+  },
+};

package/src/stories/Audio.stories.ts

@@ -0,0 +1,29 @@
+import Audio from '@components/Audio/Audio.vue';
+
+export default {
+    title: 'WL/Audio',
+    component: Audio,
+    tags: ['autodocs'],
+    argTypes: {
+        id: { control: 'number' },
+        src: { control: 'text' },
+        cloudStatus: { control: 'boolean' },
+        viewType: { control: 'select', options: ['OVERVIEW', 'RECORDER'], }        
+    }
+};
+
+const Template = (args) => ({
+    components: { Audio },
+    setup() {
+        return { args };
+    },
+    template: `<Audio v-bind="args" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    id: 1,
+    src: '/audio/dummy_pink_noise.wav',
+    cloudStatus: true,
+    viewType: 'OVERVIEW'
+};