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

package/src/stories/TextArea.stories.ts

@@ -1,112 +1,112 @@
-// v-textarea.stories.ts
-import { Meta, StoryObj } from '@storybook/vue3';
-import TextArea from '../components/TextArea/TextArea.vue'; // Adjust the import path accordingly
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the TextArea component
-const meta: Meta<typeof TextArea> = {
-  title: 'WL/TextArea',
-  component: TextArea,
-  tags: ['autodocs'],
-  argTypes: {
-    label: { control: 'text' },
-    clearIcon: { control: 'text' },
-    prependIcon: { control: 'text' },
-    appendIcon: { control: 'text' },
-    prependInnerIcon: { control: 'text' },
-    appendInnerIcon: { control: 'text' },
-    modelValue: { control: 'text' },
-    'click:append': { action: 'click:append' },
-    'click:prepend': { action: 'click:prepend' },
-    'click:appendInner': { action: 'click:appendInner' },
-    'click:prependInner': { action: 'click:prependInner' },
-    'click:clear': { action: 'click:clear' },
-    'click:control': { action: 'click:control' },
-  },
-  args: {
-    label: 'Label',
-    clearIcon: 'heroicons:trash',
-    prependIcon: 'heroicons:chat-bubble',
-    appendIcon: 'heroicons:paper-airplane',
-    prependInnerIcon: 'heroicons:exclamation',
-    appendInnerIcon: 'heroicons:x-circle',
-    modelValue: '',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`TextArea\` component provides a multi-line input with various options for customization.
-
-### Props
-- **\`label\`**: Sets the label text for the TextArea.
-- **\`clearIcon\`**: Icon to clear the text input.
-- **\`prependIcon\`**: Icon displayed before the text area.
-- **\`appendIcon\`**: Icon displayed after the text area.
-- **\`prependInnerIcon\`**: Inner icon before the text.
-- **\`appendInnerIcon\`**: Inner icon after the text.
-- **\`modelValue\`**: Binding for the text area content.
-
-### Slots
-- **\`prependIcon\`**: Adds an icon before the input.
-- **\`appendIcon\`**: Adds an icon after the input.
-
-### Example Usage
-The following examples demonstrate various configurations of the \`TextArea\` component.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template for the TextArea
-const Template: Story = {
-  render: (args) => ({
-    components: { TextArea },
-    setup() {
-      // Define actions for events
-      const prependClick = action('click:prepend');
-      const appendClick = action('click:append');
-      const prependInnerClick = action('click:prepend-inner');
-      const appendInnerClick = action('click:append-inner');
-      const clearClick = action('click:clear');
-      const controlClick = action('click:control');
-
-      return {
-        args,
-        prependClick,
-        appendClick,
-        prependInnerClick,
-        appendInnerClick,
-        clearClick,
-        controlClick,
-      };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <TextArea
-          v-bind="args"
-          @click:prepend="prependClick"
-          @click:append="appendClick"
-          @click:prepend-inner="prependInnerClick"
-          @click:append-inner="appendInnerClick"
-          @click:clear="clearClick"
-          @click:control="controlClick"
-        />
-      </div>
-    `,
-  }),
-};
-
-// Stories with different states and configurations
-export const Default: Story = { ...Template, args: {} };
-export const WithIcons: Story = { ...Template };
-
-export const Disabled: Story = { ...Template, args: { disabled: true } };
-export const CustomIcons: Story = {
-  ...Template,
-  args: { prependIcon: 'heroicons:calendar', appendIcon: 'heroicons:pencil' },
-};
+// v-textarea.stories.ts
+import { Meta, StoryObj } from '@storybook/vue3';
+import TextArea from '../components/TextArea/TextArea.vue'; // Adjust the import path accordingly
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the TextArea component
+const meta: Meta<typeof TextArea> = {
+  title: 'WL/TextArea',
+  component: TextArea,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    clearIcon: { control: 'text' },
+    prependIcon: { control: 'text' },
+    appendIcon: { control: 'text' },
+    prependInnerIcon: { control: 'text' },
+    appendInnerIcon: { control: 'text' },
+    modelValue: { control: 'text' },
+    'click:append': { action: 'click:append' },
+    'click:prepend': { action: 'click:prepend' },
+    'click:appendInner': { action: 'click:appendInner' },
+    'click:prependInner': { action: 'click:prependInner' },
+    'click:clear': { action: 'click:clear' },
+    'click:control': { action: 'click:control' },
+  },
+  args: {
+    label: 'Label',
+    clearIcon: 'heroicons:trash',
+    prependIcon: 'heroicons:chat-bubble',
+    appendIcon: 'heroicons:paper-airplane',
+    prependInnerIcon: 'heroicons:exclamation',
+    appendInnerIcon: 'heroicons:x-circle',
+    modelValue: '',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TextArea\` component provides a multi-line input with various options for customization.
+
+### Props
+- **\`label\`**: Sets the label text for the TextArea.
+- **\`clearIcon\`**: Icon to clear the text input.
+- **\`prependIcon\`**: Icon displayed before the text area.
+- **\`appendIcon\`**: Icon displayed after the text area.
+- **\`prependInnerIcon\`**: Inner icon before the text.
+- **\`appendInnerIcon\`**: Inner icon after the text.
+- **\`modelValue\`**: Binding for the text area content.
+
+### Slots
+- **\`prependIcon\`**: Adds an icon before the input.
+- **\`appendIcon\`**: Adds an icon after the input.
+
+### Example Usage
+The following examples demonstrate various configurations of the \`TextArea\` component.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template for the TextArea
+const Template: Story = {
+  render: (args) => ({
+    components: { TextArea },
+    setup() {
+      // Define actions for events
+      const prependClick = action('click:prepend');
+      const appendClick = action('click:append');
+      const prependInnerClick = action('click:prepend-inner');
+      const appendInnerClick = action('click:append-inner');
+      const clearClick = action('click:clear');
+      const controlClick = action('click:control');
+
+      return {
+        args,
+        prependClick,
+        appendClick,
+        prependInnerClick,
+        appendInnerClick,
+        clearClick,
+        controlClick,
+      };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <TextArea
+          v-bind="args"
+          @click:prepend="prependClick"
+          @click:append="appendClick"
+          @click:prepend-inner="prependInnerClick"
+          @click:append-inner="appendInnerClick"
+          @click:clear="clearClick"
+          @click:control="controlClick"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Stories with different states and configurations
+export const Default: Story = { ...Template, args: {} };
+export const WithIcons: Story = { ...Template };
+
+export const Disabled: Story = { ...Template, args: { disabled: true } };
+export const CustomIcons: Story = {
+  ...Template,
+  args: { prependIcon: 'heroicons:calendar', appendIcon: 'heroicons:pencil' },
+};