@zap-wunschlachen/wl-shared-components 1.0.12 → 1.0.14

package/src/stories/DateInput.stories.ts

@@ -1,54 +1,54 @@
-import DateInput from '@components/DateInput/DateInput.vue';
-import { Meta, StoryObj } from '@storybook/vue3';
-
-const meta: Meta<typeof DateInput> = {
-  title: 'WL/DateInput',
-  component: DateInput,
-  tags: ['autodocs'],
-  argTypes: {
-    isoDate: { control: 'text', description: 'The ISO date string' },
-    layout: { control: 'select', options: ['default', 'edit-field'], description: 'The layout of the input' },
-    minDate: { control: 'date', description: 'The minimum selectable date' },
-    minDateErrorMessage: { control: 'text', description: 'Error message for min date' },
-    maxDate: { control: 'date', description: 'The maximum selectable date' },
-    maxDateErrorMessage: { control: 'text', description: 'Error message for max date' },
-    variant: { control: 'text', description: 'The variant of the input' },
-    placeholder: { control: 'text', description: 'The placeholder text' },
-    invalidDateErrorMessage: { control: 'text', description: 'Error message for invalid date' },
-  },
-  args: {
-    isoDate: new Date().toISOString(),
-    minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-    maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
-    variant: 'outlined',
-    
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: ''
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: Story = {
-  render: (args) => ({
-    components: { DateInput },
-    setup() {
-      return {
-        args,
-      };
-    },
-    template: `<div style="padding: 16px;">
-        <DateInput
-          v-bind="args"
-        />
-      </div>`,
-  }),
-};
-
+import DateInput from '@components/DateInput/DateInput.vue';
+import { Meta, StoryObj } from '@storybook/vue3';
+
+const meta: Meta<typeof DateInput> = {
+  title: 'WL/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+  argTypes: {
+    isoDate: { control: 'text', description: 'The ISO date string' },
+    layout: { control: 'select', options: ['default', 'edit-field'], description: 'The layout of the input' },
+    minDate: { control: 'date', description: 'The minimum selectable date' },
+    minDateErrorMessage: { control: 'text', description: 'Error message for min date' },
+    maxDate: { control: 'date', description: 'The maximum selectable date' },
+    maxDateErrorMessage: { control: 'text', description: 'Error message for max date' },
+    variant: { control: 'text', description: 'The variant of the input' },
+    placeholder: { control: 'text', description: 'The placeholder text' },
+    invalidDateErrorMessage: { control: 'text', description: 'Error message for invalid date' },
+  },
+  args: {
+    isoDate: new Date().toISOString(),
+    minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+    maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
+    variant: 'outlined',
+    
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: ''
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { DateInput },
+    setup() {
+      return {
+        args,
+      };
+    },
+    template: `<div style="padding: 16px;">
+        <DateInput
+          v-bind="args"
+        />
+      </div>`,
+  }),
+};
+
 export const Default: Story = { ...Template, args: {} };

package/src/stories/Dialog.stories.ts

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

@@ -1,79 +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',
+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',
 };