@zap-wunschlachen/wl-shared-components 1.0.35 → 1.0.37

package/src/stories/Audio.stories.ts

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

package/src/stories/Button.stories.ts

@@ -1,263 +1,263 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import Button from '@components/Button/Button.vue';
-
-export default {
-  title: 'Wl/Button',
-  component: Button,
-  tags: ['autodocs'],
-  argTypes: {
-    color: { control: 'color', description: 'Button color' },
-    prependIcon: { control: 'text', description: 'Prepend icon' },
-    appendIcon: { control: 'text', description: 'Append icon' },
-    loading: { control: 'boolean', description: 'Loading state of the button' },
-    density: {
-      control: 'select',
-      options: ['default', 'comfortable', 'compact'],
-      description: 'Density of the button',
-    },
-    variant: {
-      control: 'select',
-      options: ['flat', 'outlined', 'elevated', 'text', 'tonal'],
-      description: 'Button variant',
-    },
-    size: {
-      control: 'select',
-      options: ['x-small', 'small', 'default', 'large', 'x-large'],
-      description: 'Button size',
-    },
-    label: { control: 'text', description: 'Button label text' },
-    disabled: { control: 'boolean', description: 'Disables the button' },
-  },
-  args: {
-    color: '#172774',
-    prependIcon: 'heroicons:calendar',
-    appendIcon: 'heroicons:calendar',
-    loading: false,
-    density: 'default',
-    variant: 'flat',
-    size: 'x-large',
-    label: 'Button',
-    disabled: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Button\` component offers customizable button styles, sizes, icons, and loading states to enhance user interaction.
-
-### Props
-- **\`color\`**: Sets the background color of the button.
-- **\`prependIcon\`**: Icon displayed at the start of the button.
-- **\`appendIcon\`**: Icon displayed at the end of the button.
-- **\`loading\`**: When true, displays a loading spinner.
-- **\`density\`**: Adjusts padding and margins (options: \`default\`, \`comfortable\`, \`compact\`).
-- **\`variant\`**: Specifies the button style (options: \`flat\`, \`outlined\`, \`elevated\`, \`text\`, \`tonal\`).
-- **\`size\`**: Sets the button size (options: \`x-small\`, \`small\`, \`default\`, \`large\`, \`x-large\`).
-- **\`label\`**: Text displayed inside the button.
-- **\`disabled\`**: Disables button functionality.
-
-### Example Usage
-Examples below demonstrate various configurations of the \`Button\` component with options for icons, colors, sizes, and variants.
-        `,
-      },
-    },
-  },
-} as Meta<typeof Button>;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: { label: 'Button' },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button label="Button" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const WithPrependIcon: Story = {
-  args: {
-    prependIcon: '$vuetify',
-    label: 'With Icon',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button prependIcon="$vuetify" label="With Icon" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const LoadingState: Story = {
-  args: {
-    loading: true,
-    label: 'Loading...',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button loading label="Loading..." />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const CustomColor: Story = {
-  args: {
-    color: '#FF5733',
-    label: 'Custom Color',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button color="#FF5733" label="Custom Color" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const OutlinedVariant: Story = {
-  args: {
-    variant: 'outlined',
-    label: 'Outlined Button',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button variant="outlined" label="Outlined Button" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const TextVariant: Story = {
-  args: {
-    variant: 'text',
-    label: 'Text Button',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button variant="text" label="Text Button" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ElevatedVariant: Story = {
-  args: {
-    variant: 'elevated',
-    label: 'Elevated Button',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button variant="elevated" label="Elevated Button" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const TonalVariant: Story = {
-  args: {
-    variant: 'tonal',
-    label: 'Tonal Button',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button variant="tonal" label="Tonal Button" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DisabledState: Story = {
-  args: {
-    disabled: true,
-    label: 'Disabled Button',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button disabled label="Disabled Button" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DisabledOutlined: Story = {
-  args: {
-    disabled: true,
-    variant: 'outlined',
-    label: 'Disabled Outlined',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button disabled variant="outlined" label="Disabled Outlined" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const SmallButton: Story = {
-  args: {
-    size: 'small',
-    label: 'Small Button',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Button size="small" label="Small Button" />
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import Button from '@components/Button/Button.vue';
+
+export default {
+  title: 'Wl/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color', description: 'Button color' },
+    prependIcon: { control: 'text', description: 'Prepend icon' },
+    appendIcon: { control: 'text', description: 'Append icon' },
+    loading: { control: 'boolean', description: 'Loading state of the button' },
+    density: {
+      control: 'select',
+      options: ['default', 'comfortable', 'compact'],
+      description: 'Density of the button',
+    },
+    variant: {
+      control: 'select',
+      options: ['flat', 'outlined', 'elevated', 'text', 'tonal'],
+      description: 'Button variant',
+    },
+    size: {
+      control: 'select',
+      options: ['x-small', 'small', 'default', 'large', 'x-large'],
+      description: 'Button size',
+    },
+    label: { control: 'text', description: 'Button label text' },
+    disabled: { control: 'boolean', description: 'Disables the button' },
+  },
+  args: {
+    color: '#172774',
+    prependIcon: 'heroicons:calendar',
+    appendIcon: 'heroicons:calendar',
+    loading: false,
+    density: 'default',
+    variant: 'flat',
+    size: 'x-large',
+    label: 'Button',
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Button\` component offers customizable button styles, sizes, icons, and loading states to enhance user interaction.
+
+### Props
+- **\`color\`**: Sets the background color of the button.
+- **\`prependIcon\`**: Icon displayed at the start of the button.
+- **\`appendIcon\`**: Icon displayed at the end of the button.
+- **\`loading\`**: When true, displays a loading spinner.
+- **\`density\`**: Adjusts padding and margins (options: \`default\`, \`comfortable\`, \`compact\`).
+- **\`variant\`**: Specifies the button style (options: \`flat\`, \`outlined\`, \`elevated\`, \`text\`, \`tonal\`).
+- **\`size\`**: Sets the button size (options: \`x-small\`, \`small\`, \`default\`, \`large\`, \`x-large\`).
+- **\`label\`**: Text displayed inside the button.
+- **\`disabled\`**: Disables button functionality.
+
+### Example Usage
+Examples below demonstrate various configurations of the \`Button\` component with options for icons, colors, sizes, and variants.
+        `,
+      },
+    },
+  },
+} as Meta<typeof Button>;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: { label: 'Button' },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button label="Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const WithPrependIcon: Story = {
+  args: {
+    prependIcon: '$vuetify',
+    label: 'With Icon',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button prependIcon="$vuetify" label="With Icon" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+    label: 'Loading...',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button loading label="Loading..." />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    color: '#FF5733',
+    label: 'Custom Color',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button color="#FF5733" label="Custom Color" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const OutlinedVariant: Story = {
+  args: {
+    variant: 'outlined',
+    label: 'Outlined Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="outlined" label="Outlined Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const TextVariant: Story = {
+  args: {
+    variant: 'text',
+    label: 'Text Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="text" label="Text Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ElevatedVariant: Story = {
+  args: {
+    variant: 'elevated',
+    label: 'Elevated Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="elevated" label="Elevated Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const TonalVariant: Story = {
+  args: {
+    variant: 'tonal',
+    label: 'Tonal Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="tonal" label="Tonal Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DisabledState: Story = {
+  args: {
+    disabled: true,
+    label: 'Disabled Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button disabled label="Disabled Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DisabledOutlined: Story = {
+  args: {
+    disabled: true,
+    variant: 'outlined',
+    label: 'Disabled Outlined',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button disabled variant="outlined" label="Disabled Outlined" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const SmallButton: Story = {
+  args: {
+    size: 'small',
+    label: 'Small Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button size="small" label="Small Button" />
+</template>
+        `,
+      },
+    },
+  },
+};