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

package/src/stories/Input.stories.ts

@@ -1,351 +1,351 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import Input from '@components/Input/Input.vue';
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the Input component
-const meta: Meta<typeof Input> = {
-  title: 'WL/Input',
-  component: Input,
-  tags: ['autodocs'],
-  argTypes: {
-    success: { control: 'boolean' },
-    error: { control: 'boolean' },
-    warning: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    density: {
-      control: 'select',
-      options: ['compact', 'comfortable', 'default'],
-    },
-    prependIcon: { control: 'text' },
-    appendIcon: { control: 'text' },
-    prependInnerIcon: { control: 'text' },
-    appendInnerIcon: { control: 'text' },
-    hideDetails: { control: 'boolean' },
-    hint: { control: 'text' },
-    'click:prepend': { action: 'click:prepend' },
-    'click:append': { action: 'click:append' },
-    'click:prepend-inner': { action: 'click:prepend-inner' },
-    'click:append-inner': { action: 'click:append-inner' },
-  },
-  args: {
-    disabled: false,
-    density: 'compact',
-    success: false,
-    error: false,
-    warning: false,
-    prependIcon: '',
-    appendIcon: '',
-    prependInnerIcon: '',
-    appendInnerIcon: '',
-    hideDetails: true,
-    hint: '',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Input\` component supports various styles, validation states, and icons for flexible customization.
-
-### Props
-- **\`success\`**: Displays success style if true.
-- **\`error\`**: Displays error style if true.
-- **\`warning\`**: Displays warning style if true.
-- **\`disabled\`**: Disables the input.
-- **\`density\`**: Adjusts spacing (compact, comfortable, or default).
-- **\`prependIcon\`**: Adds an icon before the input.
-- **\`appendIcon\`**: Adds an icon after the input.
-- **\`prependInnerIcon\`**: Adds an inner icon before input text.
-- **\`appendInnerIcon\`**: Adds an inner icon after input text.
-- **\`hideDetails\`**: Hides helper text and validation messages.
-- **\`hint\`**: Displays a hint below the input.
-
-### Example Usage
-Each example below showcases a unique configuration of the \`Input\` component.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { Input },
-    setup() {
-      const prependClick = action('click:prepend');
-      const appendClick = action('click:append');
-      const prependInnerClick = action('click:prepend-inner');
-      const appendInnerClick = action('click:append-inner');
-
-      return {
-        args,
-        prependClick,
-        appendClick,
-        prependInnerClick,
-        appendInnerClick,
-      };
-    },
-    template: `<div style="padding: 16px;">
-        <Input
-          v-bind="args"
-          @click:prepend="prependClick"
-          @click:append="appendClick"
-          @click:prepend-inner="prependInnerClick"
-          @click:append-inner="appendInnerClick"
-        />
-      </div>`,
-  }),
-};
-
-export const Default: Story = { ...Template, args: {} };
-
-export const Success: Story = {
-  ...Template,
-  args: { success: true },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input success />`,
-      },
-    },
-  },
-};
-
-export const Error: Story = {
-  ...Template,
-  args: { error: true },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input error />`,
-      },
-    },
-  },
-};
-
-export const Warning: Story = {
-  ...Template,
-  args: { warning: true },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input warning />`,
-      },
-    },
-  },
-};
-
-export const Disabled: Story = {
-  ...Template,
-  args: { disabled: true },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input disabled />`,
-      },
-    },
-  },
-};
-
-// Story for Input with heroicons icons
-export const WithIcons: Story = {
-  ...Template,
-  args: {
-    prependIcon: 'heroicons:calendar',
-    appendIcon: 'heroicons:calendar',
-    prependInnerIcon: 'heroicons:calendar',
-    appendInnerIcon: 'heroicons:calendar',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
-      },
-    },
-  },
-};
-
-export const SuccessWithIcon: Story = {
-  ...Template,
-  args: {
-    success: true,
-    prependIcon: 'heroicons:check-circle',
-    appendIcon: 'heroicons:check-circle',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input success prependIcon="heroicons:check-circle" appendIcon="heroicons:check-circle" />`,
-      },
-    },
-  },
-};
-
-export const ErrorWithIcon: Story = {
-  ...Template,
-  args: {
-    error: true,
-    prependIcon: 'heroicons:exclamation-circle',
-    appendIcon: 'heroicons:exclamation-circle',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input error prependIcon="heroicons:exclamation-circle" appendIcon="heroicons:exclamation-circle" />`,
-      },
-    },
-  },
-};
-
-export const WarningWithIcon: Story = {
-  ...Template,
-  args: {
-    warning: true,
-    prependIcon: 'heroicons:exclamation-triangle',
-    appendIcon: 'heroicons:exclamation-triangle',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input warning prependIcon="heroicons:exclamation-triangle" appendIcon="heroicons:exclamation-triangle" />`,
-      },
-    },
-  },
-};
-
-export const CustomPrependAppendIcons: Story = {
-  ...Template,
-  args: {
-    prependIcon: 'heroicons:sparkles',
-    appendIcon: 'heroicons:pencil',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input prependIcon="heroicons:sparkles" appendIcon="heroicons:pencil" />`,
-      },
-    },
-  },
-};
-
-export const DisabledWithIcon: Story = {
-  ...Template,
-  args: {
-    disabled: true,
-    prependIcon: 'heroicons:lock-closed',
-    appendIcon: 'heroicons:lock-closed',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input disabled prependIcon="heroicons:lock-closed" appendIcon="heroicons:lock-closed" />`,
-      },
-    },
-  },
-};
-
-export const SearchInput: Story = {
-  ...Template,
-  args: {
-    appendInnerIcon: 'heroicons:magnifying-glass',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input appendInnerIcon="heroicons:magnifying-glass" />`,
-      },
-    },
-  },
-};
-
-export const DefaultWithHint: Story = {
-  ...Template,
-  args: {
-    hint: 'This is a hint',
-    hideDetails: false,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input hint="This is a hint" hideDetails="false" />`,
-      },
-    },
-  },
-};
-
-// Story with validation rules and hint
-export const WithValidationRules: Story = {
-  ...Template,
-  args: {
-    prependIcon: 'heroicons:check',
-    appendIcon: 'heroicons:x-circle',
-    hideDetails: false,
-    hint: 'This is a detail',
-    persistentHint: true,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input prependIcon="heroicons:check" appendIcon="heroicons:x-circle" hint="This is a detail" hideDetails="false" />`,
-      },
-    },
-  },
-};
-
-export const ErrorWithErrorHint: Story = {
-  ...Template,
-  args: {
-    prependIcon: 'heroicons:check',
-    appendIcon: 'heroicons:x-circle',
-    hideDetails: false,
-    hint: 'This is a detail',
-    persistentHint: true,
-    error: true,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input error prependIcon="heroicons:check" appendIcon="heroicons:x-circle" hint="This is a detail" hideDetails="false" />`,
-      },
-    },
-  },
-};
-
-export const WarningWithIconAndHint: Story = {
-  ...Template,
-  args: {
-    warning: true,
-    prependIcon: 'heroicons:exclamation-triangle',
-    appendIcon: 'heroicons:exclamation-triangle',
-    hideDetails: false,
-    hint: 'This is a detail',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input warning prependIcon="heroicons:exclamation-triangle" appendIcon="heroicons:exclamation-triangle" hint="This is a detail" hideDetails="false" />`,
-      },
-    },
-  },
-};
-
-export const SuccessWithIconAndHint: Story = {
-  ...Template,
-  args: {
-    success: true,
-    prependIcon: 'heroicons:check-circle',
-    appendIcon: 'heroicons:check-circle',
-    hideDetails: false,
-    hint: 'This is a detail',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Input success prependIcon="heroicons:check-circle" appendIcon="heroicons:check-circle" hint="This is a detail" hideDetails="false" />`,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import Input from '@components/Input/Input.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the Input component
+const meta: Meta<typeof Input> = {
+  title: 'WL/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    success: { control: 'boolean' },
+    error: { control: 'boolean' },
+    warning: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    density: {
+      control: 'select',
+      options: ['compact', 'comfortable', 'default'],
+    },
+    prependIcon: { control: 'text' },
+    appendIcon: { control: 'text' },
+    prependInnerIcon: { control: 'text' },
+    appendInnerIcon: { control: 'text' },
+    hideDetails: { control: 'boolean' },
+    hint: { control: 'text' },
+    'click:prepend': { action: 'click:prepend' },
+    'click:append': { action: 'click:append' },
+    'click:prepend-inner': { action: 'click:prepend-inner' },
+    'click:append-inner': { action: 'click:append-inner' },
+  },
+  args: {
+    disabled: false,
+    density: 'compact',
+    success: false,
+    error: false,
+    warning: false,
+    prependIcon: '',
+    appendIcon: '',
+    prependInnerIcon: '',
+    appendInnerIcon: '',
+    hideDetails: true,
+    hint: '',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Input\` component supports various styles, validation states, and icons for flexible customization.
+
+### Props
+- **\`success\`**: Displays success style if true.
+- **\`error\`**: Displays error style if true.
+- **\`warning\`**: Displays warning style if true.
+- **\`disabled\`**: Disables the input.
+- **\`density\`**: Adjusts spacing (compact, comfortable, or default).
+- **\`prependIcon\`**: Adds an icon before the input.
+- **\`appendIcon\`**: Adds an icon after the input.
+- **\`prependInnerIcon\`**: Adds an inner icon before input text.
+- **\`appendInnerIcon\`**: Adds an inner icon after input text.
+- **\`hideDetails\`**: Hides helper text and validation messages.
+- **\`hint\`**: Displays a hint below the input.
+
+### Example Usage
+Each example below showcases a unique configuration of the \`Input\` component.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { Input },
+    setup() {
+      const prependClick = action('click:prepend');
+      const appendClick = action('click:append');
+      const prependInnerClick = action('click:prepend-inner');
+      const appendInnerClick = action('click:append-inner');
+
+      return {
+        args,
+        prependClick,
+        appendClick,
+        prependInnerClick,
+        appendInnerClick,
+      };
+    },
+    template: `<div style="padding: 16px;">
+        <Input
+          v-bind="args"
+          @click:prepend="prependClick"
+          @click:append="appendClick"
+          @click:prepend-inner="prependInnerClick"
+          @click:append-inner="appendInnerClick"
+        />
+      </div>`,
+  }),
+};
+
+export const Default: Story = { ...Template, args: {} };
+
+export const Success: Story = {
+  ...Template,
+  args: { success: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input success />`,
+      },
+    },
+  },
+};
+
+export const Error: Story = {
+  ...Template,
+  args: { error: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input error />`,
+      },
+    },
+  },
+};
+
+export const Warning: Story = {
+  ...Template,
+  args: { warning: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input warning />`,
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  ...Template,
+  args: { disabled: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input disabled />`,
+      },
+    },
+  },
+};
+
+// Story for Input with heroicons icons
+export const WithIcons: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:calendar',
+    appendIcon: 'heroicons:calendar',
+    prependInnerIcon: 'heroicons:calendar',
+    appendInnerIcon: 'heroicons:calendar',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
+      },
+    },
+  },
+};
+
+export const SuccessWithIcon: Story = {
+  ...Template,
+  args: {
+    success: true,
+    prependIcon: 'heroicons:check-circle',
+    appendIcon: 'heroicons:check-circle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input success prependIcon="heroicons:check-circle" appendIcon="heroicons:check-circle" />`,
+      },
+    },
+  },
+};
+
+export const ErrorWithIcon: Story = {
+  ...Template,
+  args: {
+    error: true,
+    prependIcon: 'heroicons:exclamation-circle',
+    appendIcon: 'heroicons:exclamation-circle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input error prependIcon="heroicons:exclamation-circle" appendIcon="heroicons:exclamation-circle" />`,
+      },
+    },
+  },
+};
+
+export const WarningWithIcon: Story = {
+  ...Template,
+  args: {
+    warning: true,
+    prependIcon: 'heroicons:exclamation-triangle',
+    appendIcon: 'heroicons:exclamation-triangle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input warning prependIcon="heroicons:exclamation-triangle" appendIcon="heroicons:exclamation-triangle" />`,
+      },
+    },
+  },
+};
+
+export const CustomPrependAppendIcons: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:sparkles',
+    appendIcon: 'heroicons:pencil',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input prependIcon="heroicons:sparkles" appendIcon="heroicons:pencil" />`,
+      },
+    },
+  },
+};
+
+export const DisabledWithIcon: Story = {
+  ...Template,
+  args: {
+    disabled: true,
+    prependIcon: 'heroicons:lock-closed',
+    appendIcon: 'heroicons:lock-closed',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input disabled prependIcon="heroicons:lock-closed" appendIcon="heroicons:lock-closed" />`,
+      },
+    },
+  },
+};
+
+export const SearchInput: Story = {
+  ...Template,
+  args: {
+    appendInnerIcon: 'heroicons:magnifying-glass',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input appendInnerIcon="heroicons:magnifying-glass" />`,
+      },
+    },
+  },
+};
+
+export const DefaultWithHint: Story = {
+  ...Template,
+  args: {
+    hint: 'This is a hint',
+    hideDetails: false,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input hint="This is a hint" hideDetails="false" />`,
+      },
+    },
+  },
+};
+
+// Story with validation rules and hint
+export const WithValidationRules: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:check',
+    appendIcon: 'heroicons:x-circle',
+    hideDetails: false,
+    hint: 'This is a detail',
+    persistentHint: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input prependIcon="heroicons:check" appendIcon="heroicons:x-circle" hint="This is a detail" hideDetails="false" />`,
+      },
+    },
+  },
+};
+
+export const ErrorWithErrorHint: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:check',
+    appendIcon: 'heroicons:x-circle',
+    hideDetails: false,
+    hint: 'This is a detail',
+    persistentHint: true,
+    error: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input error prependIcon="heroicons:check" appendIcon="heroicons:x-circle" hint="This is a detail" hideDetails="false" />`,
+      },
+    },
+  },
+};
+
+export const WarningWithIconAndHint: Story = {
+  ...Template,
+  args: {
+    warning: true,
+    prependIcon: 'heroicons:exclamation-triangle',
+    appendIcon: 'heroicons:exclamation-triangle',
+    hideDetails: false,
+    hint: 'This is a detail',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input warning prependIcon="heroicons:exclamation-triangle" appendIcon="heroicons:exclamation-triangle" hint="This is a detail" hideDetails="false" />`,
+      },
+    },
+  },
+};
+
+export const SuccessWithIconAndHint: Story = {
+  ...Template,
+  args: {
+    success: true,
+    prependIcon: 'heroicons:check-circle',
+    appendIcon: 'heroicons:check-circle',
+    hideDetails: false,
+    hint: 'This is a detail',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input success prependIcon="heroicons:check-circle" appendIcon="heroicons:check-circle" hint="This is a detail" hideDetails="false" />`,
+      },
+    },
+  },
+};