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

package/src/stories/Laboratory/Cards/DocumentCard/DocumentCard.stories.ts

@@ -1,176 +1,176 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
-import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the DocumentCard component
-const meta: Meta<typeof DocumentCard> = {
-  title: 'WL/Laboratory/Cards/DocumentCard/DocumentCard',
-  component: DocumentCard,
-  tags: ['autodocs'],
-  argTypes: {
-    title: { control: 'text', description: 'The title displayed on the card.' },
-    'download:all': {
-      action: 'download:all',
-      description:
-        'Action triggered when the "Download all" button is clicked.',
-    },
-  },
-  args: {
-    title: 'Attachments',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`DocumentCard\` component provides a list of downloadable documents, with each item representing a document entry.
-It includes a main title and individual items with headers and subheaders, each with an option to trigger a download.
-
-### Props
-- **\`title\`**: Sets the title displayed at the top of the card.
-
-### Events
-- **\`download:all\`**: Emitted when the "Download all" button is clicked, allowing for bulk download actions.
-- **\`click:icon\`** (in each \`DocumentCardItem\`): Emitted when the download icon on each document item is clicked, triggering an individual download.
-
-### Usage
-Use this component to list documents with options for individual and bulk downloads.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { DocumentCard, DocumentCardItem },
-    setup() {
-      function handleDownloadAll() {
-        console.log('All documents downloaded');
-      }
-
-      function handleDownload() {
-        console.log('Document downloaded');
-      }
-
-      return {
-        args,
-        handleDownloadAll,
-        handleDownload,
-      };
-    },
-    template: `
-      <DocumentCard v-bind="args" @download:all="handleDownloadAll">
-        <DocumentCardItem
-          header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
-          subheader="Uploaded 06.09.24 09:43"
-          @click:icon="handleDownload"
-        />
-        <DocumentCardItem
-          header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
-          subheader="Uploaded 07.09.24 10:15"
-          @click:icon="handleDownload"
-        />
-        <DocumentCardItem
-          header="08.09.2024 John Doe, Lzp. 33 Mandibular"
-          subheader="Uploaded 08.09.24 11:30"
-          @click:icon="handleDownload"
-        />
-      </DocumentCard>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <DocumentCard v-bind="args" @download:all="handleDownloadAll">
-    <DocumentCardItem
-      header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
-      subheader="Uploaded 06.09.24 09:43"
-      @click:icon="handleDownload"
-    />
-    <DocumentCardItem
-      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
-      subheader="Uploaded 07.09.24 10:15"
-      @click:icon="handleDownload"
-    />
-    <DocumentCardItem
-      header="08.09.2024 John Doe, Lzp. 33 Mandibular"
-      subheader="Uploaded 08.09.24 11:30"
-      @click:icon="handleDownload"
-    />
-  </DocumentCard>
-</template>
-
-<script setup>
-import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
-import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
-
-function handleDownloadAll() {
-  console.log('All documents downloaded');
-}
-
-function handleDownload() {
-  console.log('Document downloaded');
-}
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Define different stories using the common template
-export const Default: Story = { ...Template, args: {} };
-
-export const CustomTitle: Story = {
-  ...Template,
-  args: {
-    title: 'Custom Attachments',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <DocumentCard title="Custom Attachments" @download:all="handleDownloadAll">
-    <DocumentCardItem
-      header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
-      subheader="Uploaded 06.09.24 09:43"
-      @click:icon="handleDownload"
-    />
-    <DocumentCardItem
-      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
-      subheader="Uploaded 07.09.24 10:15"
-      @click:icon="handleDownload"
-    />
-    <DocumentCardItem
-      header="08.09.2024 John Doe, Lzp. 33 Mandibular"
-      subheader="Uploaded 08.09.24 11:30"
-      @click:icon="handleDownload"
-    />
-  </DocumentCard>
-</template>
-
-<script setup>
-import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
-import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
-
-function handleDownloadAll() {
-  console.log('All documents downloaded');
-}
-
-function handleDownload() {
-  console.log('Document downloaded');
-}
-</script>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the DocumentCard component
+const meta: Meta<typeof DocumentCard> = {
+  title: 'WL/Laboratory/Cards/DocumentCard/DocumentCard',
+  component: DocumentCard,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'The title displayed on the card.' },
+    'download:all': {
+      action: 'download:all',
+      description:
+        'Action triggered when the "Download all" button is clicked.',
+    },
+  },
+  args: {
+    title: 'Attachments',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`DocumentCard\` component provides a list of downloadable documents, with each item representing a document entry.
+It includes a main title and individual items with headers and subheaders, each with an option to trigger a download.
+
+### Props
+- **\`title\`**: Sets the title displayed at the top of the card.
+
+### Events
+- **\`download:all\`**: Emitted when the "Download all" button is clicked, allowing for bulk download actions.
+- **\`click:icon\`** (in each \`DocumentCardItem\`): Emitted when the download icon on each document item is clicked, triggering an individual download.
+
+### Usage
+Use this component to list documents with options for individual and bulk downloads.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { DocumentCard, DocumentCardItem },
+    setup() {
+      function handleDownloadAll() {
+        console.log('All documents downloaded');
+      }
+
+      function handleDownload() {
+        console.log('Document downloaded');
+      }
+
+      return {
+        args,
+        handleDownloadAll,
+        handleDownload,
+      };
+    },
+    template: `
+      <DocumentCard v-bind="args" @download:all="handleDownloadAll">
+        <DocumentCardItem
+          header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
+          subheader="Uploaded 06.09.24 09:43"
+          @click:icon="handleDownload"
+        />
+        <DocumentCardItem
+          header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+          subheader="Uploaded 07.09.24 10:15"
+          @click:icon="handleDownload"
+        />
+        <DocumentCardItem
+          header="08.09.2024 John Doe, Lzp. 33 Mandibular"
+          subheader="Uploaded 08.09.24 11:30"
+          @click:icon="handleDownload"
+        />
+      </DocumentCard>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <DocumentCard v-bind="args" @download:all="handleDownloadAll">
+    <DocumentCardItem
+      header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
+      subheader="Uploaded 06.09.24 09:43"
+      @click:icon="handleDownload"
+    />
+    <DocumentCardItem
+      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+      subheader="Uploaded 07.09.24 10:15"
+      @click:icon="handleDownload"
+    />
+    <DocumentCardItem
+      header="08.09.2024 John Doe, Lzp. 33 Mandibular"
+      subheader="Uploaded 08.09.24 11:30"
+      @click:icon="handleDownload"
+    />
+  </DocumentCard>
+</template>
+
+<script setup>
+import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+
+function handleDownloadAll() {
+  console.log('All documents downloaded');
+}
+
+function handleDownload() {
+  console.log('Document downloaded');
+}
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Define different stories using the common template
+export const Default: Story = { ...Template, args: {} };
+
+export const CustomTitle: Story = {
+  ...Template,
+  args: {
+    title: 'Custom Attachments',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <DocumentCard title="Custom Attachments" @download:all="handleDownloadAll">
+    <DocumentCardItem
+      header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
+      subheader="Uploaded 06.09.24 09:43"
+      @click:icon="handleDownload"
+    />
+    <DocumentCardItem
+      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+      subheader="Uploaded 07.09.24 10:15"
+      @click:icon="handleDownload"
+    />
+    <DocumentCardItem
+      header="08.09.2024 John Doe, Lzp. 33 Mandibular"
+      subheader="Uploaded 08.09.24 11:30"
+      @click:icon="handleDownload"
+    />
+  </DocumentCard>
+</template>
+
+<script setup>
+import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+
+function handleDownloadAll() {
+  console.log('All documents downloaded');
+}
+
+function handleDownload() {
+  console.log('Document downloaded');
+}
+</script>
+        `,
+      },
+    },
+  },
+};

package/src/stories/Laboratory/Cards/DocumentCard/DocumentCardItem.stories.ts

@@ -1,119 +1,119 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the DocumentCardItem component
-const meta: Meta<typeof DocumentCardItem> = {
-  title: 'WL/Laboratory/Cards/DocumentCard/DocumentCardItem',
-  component: DocumentCardItem,
-  tags: ['autodocs'],
-  argTypes: {
-    header: {
-      control: 'text',
-      description: 'The main header text displayed on the item.',
-    },
-    subheader: {
-      control: 'text',
-      description: 'Additional information displayed below the header.',
-    },
-    'click:icon': {
-      action: 'click:icon',
-      description: 'Triggered when the icon is clicked.',
-    },
-  },
-  args: {
-    header: '06.09.2024 Rainer Zufall, Lzp. 45 Mandibular',
-    subheader: 'Uploaded 06.09.24 09:43',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`DocumentCardItem\` component displays an individual document entry with a header and subheader.
-It includes a hardcoded download icon that triggers a click event when pressed.
-
-### Props
-- **\`header\`**: Main text for the document entry.
-- **\`subheader\`**: Additional text displayed beneath the header.
-
-### Events
-- **\`click:icon\`**: Emitted when the download icon is clicked, allowing for custom actions to be triggered.
-
-### Usage
-Use this component to represent a document item in a list with a customizable header, subheader, and download icon actions.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { DocumentCardItem },
-    setup() {
-      // Define the action for the click event
-      const iconClick = action('click:icon');
-
-      return {
-        args,
-        iconClick,
-      };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <DocumentCardItem
-          v-bind="args"
-          @click:icon="iconClick"
-        />
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div style="padding: 16px;">
-    <DocumentCardItem
-      v-bind="args"
-      @click:icon="iconClick"
-    />
-  </div>
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Define different stories using the common template
-export const Default: Story = { ...Template, args: {} };
-
-export const CustomHeaderAndSubheader: Story = {
-  ...Template,
-  args: {
-    header: '07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary',
-    subheader: 'Uploaded 07.09.24 10:15',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div style="padding: 16px;">
-    <DocumentCardItem
-      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
-      subheader="Uploaded 07.09.24 10:15"
-      @click:icon="iconClick"
-    />
-  </div>
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the DocumentCardItem component
+const meta: Meta<typeof DocumentCardItem> = {
+  title: 'WL/Laboratory/Cards/DocumentCard/DocumentCardItem',
+  component: DocumentCardItem,
+  tags: ['autodocs'],
+  argTypes: {
+    header: {
+      control: 'text',
+      description: 'The main header text displayed on the item.',
+    },
+    subheader: {
+      control: 'text',
+      description: 'Additional information displayed below the header.',
+    },
+    'click:icon': {
+      action: 'click:icon',
+      description: 'Triggered when the icon is clicked.',
+    },
+  },
+  args: {
+    header: '06.09.2024 Rainer Zufall, Lzp. 45 Mandibular',
+    subheader: 'Uploaded 06.09.24 09:43',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`DocumentCardItem\` component displays an individual document entry with a header and subheader.
+It includes a hardcoded download icon that triggers a click event when pressed.
+
+### Props
+- **\`header\`**: Main text for the document entry.
+- **\`subheader\`**: Additional text displayed beneath the header.
+
+### Events
+- **\`click:icon\`**: Emitted when the download icon is clicked, allowing for custom actions to be triggered.
+
+### Usage
+Use this component to represent a document item in a list with a customizable header, subheader, and download icon actions.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { DocumentCardItem },
+    setup() {
+      // Define the action for the click event
+      const iconClick = action('click:icon');
+
+      return {
+        args,
+        iconClick,
+      };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <DocumentCardItem
+          v-bind="args"
+          @click:icon="iconClick"
+        />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="padding: 16px;">
+    <DocumentCardItem
+      v-bind="args"
+      @click:icon="iconClick"
+    />
+  </div>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Define different stories using the common template
+export const Default: Story = { ...Template, args: {} };
+
+export const CustomHeaderAndSubheader: Story = {
+  ...Template,
+  args: {
+    header: '07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary',
+    subheader: 'Uploaded 07.09.24 10:15',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="padding: 16px;">
+    <DocumentCardItem
+      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+      subheader="Uploaded 07.09.24 10:15"
+      @click:icon="iconClick"
+    />
+  </div>
+</template>
+        `,
+      },
+    },
+  },
+};