@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/Dialog.stories.ts

@@ -0,0 +1,147 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import Dialog from '@components/Dialog/Dialog.vue';
+import Input from '@components/Input/Input.vue';
+import Button from '@components/Button/Button.vue';
+import { VBtn, VSheet } from 'vuetify/components';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Wl/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  argTypes: {
+    themeName: {
+      control: 'text',
+      description: 'Vuetify theme to apply to the dialog.',
+    },
+    activator: {
+      description:
+        'Slot used for the dialog activator. It provides the `openDialog` function as a slot prop to open the dialog.',
+      table: {
+        type: { summary: 'slot' },
+      },
+    },
+    content: {
+      description:
+        'Slot for the dialog content. Provides the `closeDialog` function as a slot prop to close the dialog from within the content.',
+      table: {
+        type: { summary: 'slot' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Dialog\` component has two main slots:
+- **\`activator\`**: Use this slot to define the button or element that triggers the dialog. The slot receives \`openDialog\` as a prop, which opens the dialog when called.
+- **\`content\`**: The \`content\` slot is used for the dialog's body. It receives \`closeDialog\` as a prop, allowing elements inside the slot to close the dialog, such as an action button.
+
+### Example Usage
+The example shows a button in the \`activator\` slot that opens the dialog, and two buttons inside the \`content\` slot that close the dialog when clicked.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { Dialog, Input, Button, VBtn, VSheet },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="d-flex flex-column w-full ma-6 ga-2">
+        <Dialog v-bind="args">
+          <!-- Activator button to open dialog -->
+          <template #activator="{ openDialog }">
+            <Button
+              variant="outlined"
+              appendIcon="heroicons:plus"
+              label="Neuen Entwurf erstellen"
+              @click="openDialog"
+              size="x-large"
+            ></Button>
+          </template>
+
+          <!-- Content inside the dialog with action buttons and input field -->
+          <template #content="{ closeDialog }">
+            <v-sheet
+              class="pa-4 d-flex flex-column ga-6"
+              :elevation="1"
+              max-width="500"
+            >
+              <h2>Basiert dieser Laborfall auf einem bereits vorhandenen Fall?</h2>
+
+              <Input />
+
+              <div class="d-flex flex-row w-100 align-center ga-2">
+                <Button
+                  class="w-50"
+                  @click="closeDialog"
+                  variant="outlined"
+                  label="Nein"
+                />
+                <Button class="w-50" @click="closeDialog" label="Weiter" />
+              </div>
+            </v-sheet>
+          </template>
+        </Dialog>
+      </div>
+    `,
+  }),
+};
+
+export const DefaultDialog: Story = {
+  ...Template,
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="d-flex flex-column w-full ma-6 ga-2">
+    <Dialog>
+      <!-- Activator button to open dialog -->
+      <template #activator="{ openDialog }">
+        <Button
+          variant="outlined"
+          appendIcon="heroicons:plus"
+          label="Neuen Entwurf erstellen"
+          @click="openDialog"
+          size="x-large"
+        ></Button>
+      </template>
+
+      <!-- Content inside the dialog with action buttons and input field -->
+      <template #content="{ closeDialog }">
+        <v-sheet
+          class="pa-4 d-flex flex-column ga-6"
+          :elevation="1"
+          max-width="500"
+        >
+          <h2>Basiert dieser Laborfall auf einem bereits vorhandenen Fall?</h2>
+
+          <Input />
+
+          <div class="d-flex flex-row w-100 align-center ga-2">
+            <Button
+              class="w-50"
+              @click="closeDialog"
+              variant="outlined"
+              label="Nein"
+            />
+            <Button class="w-50" @click="closeDialog" label="Weiter" />
+          </div>
+        </v-sheet>
+      </template>
+    </Dialog>
+  </div>
+</template>
+        `,
+      },
+    },
+  },
+};

package/src/stories/EditField.stories.ts

@@ -0,0 +1,79 @@
+import EditField from '@/components/EditField/EditField.vue';
+import { Meta, StoryObj } from '@storybook/vue3';
+
+const meta: Meta<typeof EditField> = {
+  title: 'WL/EditField',
+  component: EditField,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'The title of the edit field' },
+    value: { control: 'text', description: 'The value of the edit field' },
+    icon: { control: 'text', description: 'The icon to display in the edit field' },
+    type: { control: 'select', options: ['select', 'date', 'phone', 'text'], description: 'The type of the edit field' },
+    items: { control: 'array', description: 'The list of items for the edit field' },
+    selectOnFocus: { control: 'boolean', description: 'Whether to select the text on focus' },
+    appendIcon: { control: 'text', description: 'The icon to display at the end of the edit field' },
+    inputProps: { control: 'object', description: 'The props to pass to the input element' }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: ''
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// reusable template that just renders a single <EditField />
+const Template: Story = {
+  render: (args) => ({
+    components: { EditField },
+    setup() { return { args }; },
+    template: `<EditField v-bind="args" />`,
+  }),
+};
+
+// ───────────────────────────────────────────────────────────────────────────────
+// 1) Text Input story
+export const TextField: Story = { ...Template };
+TextField.args = {
+  title: 'Input',
+  icon: 'heroicons:user',
+  type: 'text',
+  selectOnFocus: true,
+  value: 'Text',
+};
+
+// ───────────────────────────────────────────────────────────────────────────────
+// 2) Select Input story
+export const SelectField: Story = { ...Template };
+SelectField.args = {
+  title: 'Select',
+  icon: 'heroicons:user',
+  type: 'select',
+  items: [
+    { title: 'Option 1', value: 'value_1' },
+    { title: 'Option 2', value: 'value_2' },
+    { title: 'Option 3', value: 'value_3' },
+  ],
+};
+
+// ───────────────────────────────────────────────────────────────────────────────
+// 3) Date Input story
+export const DateField: Story = { ...Template };
+DateField.args = {
+  title: 'Date',
+  icon: 'heroicons:user',
+  type: 'date',
+  appendIcon: '',
+};
+
+export const PhoneField: Story = { ...Template };
+PhoneField.args = {
+  title: 'Phone',
+  icon: 'heroicons:user',
+  type: 'phone',
+};

package/src/stories/IconBullet/IconBullet.stories.ts

@@ -0,0 +1,201 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import IconBullet from '@components/IconBullet/IconBullet.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the IconBullet component
+const meta: Meta<typeof IconBullet> = {
+  title: 'WL/IconBullet/IconBullet',
+  component: IconBullet,
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+      description:
+        'HTML content to display in the main content area. Overrides `header` and `subHeader` if provided.',
+    },
+    header: {
+      control: 'text',
+      description:
+        'Header text displayed above the subheader. Only displayed if `content` is not provided.',
+    },
+    subHeader: {
+      control: 'text',
+      description:
+        'Subheader text displayed below the header. Only displayed if `content` is not provided.',
+    },
+    icon: {
+      control: 'text',
+      description:
+        'Icon to display next to the text. If an icon slot is provided, this prop will be ignored.',
+    },
+    iconSize: {
+      control: 'text',
+      description:
+        'Size of the icon displayed next to the text. Accepts SVG-compatible size values as a string, such as "23", "28", etc. Ignored if an icon slot is provided.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`IconBullet\` component displays an icon alongside text content. It supports customization through props and slots.
+
+### Props
+- **\`content\`**: HTML content to display in the main content area. Overrides \`header\` and \`subHeader\` if provided.
+- **\`header\`**: Header text displayed above the subheader. Only displayed if \`content\` is not provided.
+- **\`subHeader\`**: Subheader text displayed below the header. Only displayed if \`content\` is not provided.
+- **\`icon\`**: Icon to display next to the text. If an icon slot is provided, this prop will be ignored.
+- **\`iconSize\`**: Size of the icon displayed next to the text. Accepts SVG-compatible size values as a string, such as "23", "28", etc. Ignored if an icon slot is provided.
+
+### Slots
+- **\`icon\`**: Slot for providing a custom icon. Takes precedence over the \`icon\` prop.
+
+### Example Usage
+The following examples demonstrate different ways to use the \`IconBullet\` component.
+`,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Story using the `content` prop to display custom HTML content.
+ */
+export const WithContent: Story = {
+  args: {
+    content:
+      '<p>This is custom <strong>HTML</strong> content provided via the content prop.</p>',
+    icon: 'heroicons:heart',
+    iconSize: '38',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBullet
+    content="<p>This is custom <strong>HTML</strong> content provided via the content prop.</p>"
+    icon="heroicons:heart"
+    iconSize="38"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story using `header` and `subHeader` props.
+ */
+export const WithHeaderAndSubHeader: Story = {
+  args: {
+    header: 'Main Header',
+    subHeader: 'This is the subheader text.',
+    icon: 'heroicons:heart',
+    iconSize: '38',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBullet
+    header="Main Header"
+    subHeader="This is the subheader text."
+    icon="heroicons:heart"
+    iconSize="38"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story using the `icon` slot to provide a custom icon.
+ */
+export const WithIconSlot: Story = {
+  args: {
+    header: 'Custom Icon Slot',
+    subHeader: 'Using a custom icon via slot.',
+  },
+  render: (args) => ({
+    components: { IconBullet },
+    setup() {
+      return { args };
+    },
+    template: `
+<IconBullet v-bind="args">
+  <template #icon>
+    <!-- Custom icon content -->
+    <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
+  </template>
+</IconBullet>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBullet header="Custom Icon Slot" subHeader="Using a custom icon via slot.">
+    <template #icon>
+      <!-- Custom icon content -->
+      <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
+    </template>
+  </IconBullet>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story demonstrating all props and the icon slot.
+ */
+export const FullExample: Story = {
+  args: {
+    header: 'Full Example',
+    subHeader: 'This example uses header, subHeader, and a custom icon slot.',
+    iconSize: '38',
+  },
+  render: (args) => ({
+    components: { IconBullet },
+    setup() {
+      return { args };
+    },
+    template: `
+<IconBullet v-bind="args">
+  <template #icon>
+    <!-- Custom icon content -->
+    <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
+  </template>
+</IconBullet>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBullet
+    header="Full Example"
+    subHeader="This example uses header, subHeader, and a custom icon slot."
+  >
+    <template #icon>
+      <!-- Custom icon content -->
+      <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
+    </template>
+  </IconBullet>
+</template>
+        `,
+      },
+    },
+  },
+};

package/src/stories/IconBullet/IconBulletList.stories.ts

@@ -0,0 +1,275 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import IconBulletList from '@components/IconBullet/IconBulletList.vue';
+import IconBullet from '@components/IconBullet/IconBullet.vue';
+
+// Meta configuration for the IconBulletList component
+const meta: Meta<typeof IconBulletList> = {
+  title: 'Wl/IconBullet/IconBulletList',
+  tags: ['autodocs'],
+  component: IconBulletList,
+  argTypes: {
+    header: {
+      control: 'text',
+      description: 'Header text displayed if the header slot is not provided.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`IconBulletList\` component displays a list of \`IconBullet\` components with an optional header. The header can be provided via a prop or a slot.
+
+### Props
+- **\`header\`**: Header text displayed if the \`header\` slot is not provided.
+
+### Slots
+- **\`header\`**: Slot for custom header content. Overrides the \`header\` prop.
+- **Default Slot**: Used to pass in \`IconBullet\` components.
+
+### Example Usage
+Below are examples demonstrating how to use the \`IconBulletList\` component.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Story using the `header` prop and including child `IconBullet` components.
+ */
+export const WithHeaderAndBullets: Story = {
+  args: {
+    header:
+      'Welche Vorteile haben festsitzende Zähne an einem Tag gegenüber Prothesen?',
+  },
+  render: (args) => ({
+    components: { IconBulletList, IconBullet },
+    setup() {
+      return { args };
+    },
+    template: `
+      <IconBulletList v-bind="args">
+        <IconBullet
+          header="Bequemer Zugang"
+          subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
+        >
+          <template #icon>
+            <v-icon size="38" icon="heroicons:calendar" color="#172774" />
+          </template>
+        </IconBullet>
+        <IconBullet
+          header="Einfühlsame Behandlung"
+          subHeader="Speziell geschult für ältere und pflegebedürftige Patienten"
+          icon="heroicons:calendar"
+          iconSize="38"
+        />
+        <IconBullet
+          header="Regelmäßige Kontrollen"
+          subHeader="Untersuchungen für Ihre Zahngesundheit bei regelmäßigen Besuchen"
+          icon="heroicons:calendar"
+          iconSize="38"
+        />
+        <IconBullet
+          header="Bequemer Zugang"
+          subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
+          icon="heroicons:calendar"
+          iconSize="38"
+        />
+      </IconBulletList>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBulletList
+    header="Welche Vorteile haben festsitzende Zähne an einem Tag gegenüber Prothesen?"
+  >
+    <IconBullet
+      header="Bequemer Zugang"
+      subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
+    >
+      <template #icon>
+        <v-icon size="38" icon="heroicons:calendar" color="#172774" />
+      </template>
+    </IconBullet>
+    <IconBullet
+      header="Einfühlsame Behandlung"
+      subHeader="Speziell geschult für ältere und pflegebedürftige Patienten"
+      icon="heroicons:calendar"
+      iconSize="38"
+    />
+    <IconBullet
+      header="Regelmäßige Kontrollen"
+      subHeader="Untersuchungen für Ihre Zahngesundheit bei regelmäßigen Besuchen"
+      icon="heroicons:calendar"
+      iconSize="38"
+    />
+    <IconBullet
+      header="Bequemer Zugang"
+      subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
+      icon="heroicons:calendar"
+      iconSize="38"
+    />
+  </IconBulletList>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story overriding the header using the `header` slot.
+ */
+export const WithHeaderSlot: Story = {
+  render: () => ({
+    components: { IconBulletList, IconBullet },
+    template: `
+      <IconBulletList>
+        <template #header>
+          <h2>Custom Header Content via Slot</h2>
+        </template>
+        <IconBullet
+          header="Custom Bullet"
+          subHeader="This bullet uses a custom icon via slot."
+        >
+          <template #icon>
+            <v-icon size="38" icon="heroicons:star" color="#172774" />
+          </template>
+        </IconBullet>
+      </IconBulletList>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBulletList>
+    <template #header>
+      <h2>Custom Header Content via Slot</h2>
+    </template>
+    <IconBullet
+      header="Custom Bullet"
+      subHeader="This bullet uses a custom icon via slot."
+    >
+      <template #icon>
+        <v-icon size="38" icon="heroicons:star" color="#172774" />
+      </template>
+    </IconBullet>
+  </IconBulletList>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story demonstrating multiple `IconBullet` components without additional content.
+ */
+export const MultipleBullets: Story = {
+  args: {
+    header: 'IconBulletList with Multiple Bullets',
+  },
+  render: (args) => ({
+    components: { IconBulletList, IconBullet },
+    setup() {
+      return { args };
+    },
+    template: `
+      <IconBulletList v-bind="args">
+        <IconBullet
+          header="Erster Punkt"
+          subHeader="Details zum ersten Punkt."
+          icon="heroicons:check-circle"
+          iconSize="38"
+        />
+        <IconBullet
+          header="Zweiter Punkt"
+          subHeader="Details zum zweiten Punkt."
+          icon="heroicons:check-circle"
+          iconSize="38"
+        />
+        <IconBullet
+          header="Dritter Punkt"
+          subHeader="Details zum dritten Punkt."
+          icon="heroicons:check-circle"
+          iconSize="38"
+        />
+      </IconBulletList>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBulletList header="IconBulletList with Multiple Bullets">
+    <IconBullet
+      header="Erster Punkt"
+      subHeader="Details zum ersten Punkt."
+      icon="heroicons:check-circle"
+      iconSize="38"
+    />
+    <IconBullet
+      header="Zweiter Punkt"
+      subHeader="Details zum zweiten Punkt."
+      icon="heroicons:check-circle"
+      iconSize="38"
+    />
+    <IconBullet
+      header="Dritter Punkt"
+      subHeader="Details zum dritten Punkt."
+      icon="heroicons:check-circle"
+      iconSize="38"
+    />
+  </IconBulletList>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story demonstrating the component without a header (neither prop nor slot).
+ */
+export const WithoutHeader: Story = {
+  render: () => ({
+    components: { IconBulletList, IconBullet },
+    template: `
+      <IconBulletList>
+        <IconBullet
+          header="Bullet Without List Header"
+          subHeader="This list has no header."
+          icon="heroicons:information-circle"
+          iconSize="38"
+        />
+      </IconBulletList>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBulletList>
+    <IconBullet
+      header="Bullet Without List Header"
+      subHeader="This list has no header."
+      icon="heroicons:information-circle"
+      iconSize="38"
+    />
+  </IconBulletList>
+</template>
+        `,
+      },
+    },
+  },
+};