@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

package/src/stories/TickBox.stories.ts

@@ -1,294 +1,294 @@
-import { ref } from 'vue';
-import type { Meta, StoryObj } from '@storybook/vue3';
-import TickBox from '@components/TickBox/TickBox.vue';
-
-// Meta configuration for Storybook
-const meta: Meta<typeof TickBox> = {
-  title: 'Wl/TickBox',
-  component: TickBox,
-  tags: ['autodocs'],
-  argTypes: {
-    label: { control: 'text', description: 'Label displayed with the TickBox' },
-    success: {
-      control: 'boolean',
-      description: 'Applies success styling to the TickBox',
-    },
-    error: {
-      control: 'boolean',
-      description: 'Applies error styling to the TickBox',
-    },
-    disabled: { control: 'boolean', description: 'Disables the TickBox' },
-    value: {
-      control: 'text',
-      description:
-        'Value associated with the TickBox for array-based model binding',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`TickBox\` component provides a checkbox input with customizable states, including success, error, and disabled styling. It supports both boolean and array-based model values.
-
-### Props
-- **\`label\`**: Text label displayed with the TickBox.
-- **\`success\`**: Applies success styling.
-- **\`error\`**: Applies error styling.
-- **\`disabled\`**: Disables the checkbox input.
-- **\`value\`**: Used when binding the TickBox to an array, where the value represents the item added to the array.
-
-### Example Usage
-The examples below demonstrate various configurations of the \`TickBox\` component, from simple state-based styling to using an array for managing multiple selections.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Default TickBox Story
- */
-export const Default: Story = {
-  args: {
-    label: 'Default TickBox',
-  },
-  render(args) {
-    const modelValue = ref(false);
-    return {
-      components: { TickBox },
-      setup() {
-        return { args, modelValue };
-      },
-      template: `
-        <TickBox v-bind="args" v-model="modelValue" />
-        <p>Model Value: {{ modelValue }}</p>
-      `,
-    };
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<TickBox label="Default TickBox" />`,
-      },
-    },
-  },
-};
-
-/**
- * Success State TickBox Story
- */
-export const SuccessState: Story = {
-  args: {
-    label: 'Success TickBox',
-    success: true,
-  },
-  render(args) {
-    const modelValue = ref(false);
-    return {
-      components: { TickBox },
-      setup() {
-        return { args, modelValue };
-      },
-      template: `
-        <TickBox v-bind="args" v-model="modelValue" />
-        <p>Model Value: {{ modelValue }}</p>
-      `,
-    };
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<TickBox label="Success TickBox" success />`,
-      },
-    },
-  },
-};
-
-/**
- * Error State TickBox Story
- */
-export const ErrorState: Story = {
-  args: {
-    label: 'Error TickBox',
-    error: true,
-  },
-  render(args) {
-    const modelValue = ref(false);
-    return {
-      components: { TickBox },
-      setup() {
-        return { args, modelValue };
-      },
-      template: `
-        <TickBox v-bind="args" v-model="modelValue" />
-        <p>Model Value: {{ modelValue }}</p>
-      `,
-    };
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<TickBox label="Error TickBox" error />`,
-      },
-    },
-  },
-};
-
-/**
- * Disabled State TickBox Story
- */
-export const DisabledState: Story = {
-  args: {
-    label: 'Disabled TickBox',
-    disabled: true,
-  },
-  render(args) {
-    const modelValue = ref(false);
-    return {
-      components: { TickBox },
-      setup() {
-        return { args, modelValue };
-      },
-      template: `
-        <TickBox v-bind="args" v-model="modelValue" />
-        <p>Model Value: {{ modelValue }}</p>
-      `,
-    };
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<TickBox label="Disabled TickBox" disabled />`,
-      },
-    },
-  },
-};
-
-/**
- * TickBox with Boolean Model Value
- */
-export const BooleanModel: Story = {
-  args: {
-    label: 'Boolean Model TickBox',
-  },
-  render(args) {
-    const modelValue = ref(false);
-    return {
-      components: { TickBox },
-      setup() {
-        return { args, modelValue };
-      },
-      template: `
-        <TickBox v-bind="args" v-model="modelValue" />
-        <p>Boolean Model Value: {{ modelValue }}</p>
-      `,
-    };
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TickBox label="Boolean Model TickBox" v-model="modelValue" />
-  <p>Boolean Model Value: {{ modelValue }}</p>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const modelValue = ref(false);
-</script>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * TickBox with Array Model Value
- */
-export const ArrayModel: Story = {
-  args: {
-    label: 'Array Model TickBox',
-    value: 'option1',
-  },
-  render(args) {
-    const modelValue = ref([]);
-    return {
-      components: { TickBox },
-      setup() {
-        return { args, modelValue };
-      },
-      template: `
-        <TickBox v-bind="args" v-model="modelValue" />
-        <p>Array Model Value: {{ modelValue }}</p>
-      `,
-    };
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TickBox label="Array Model TickBox" value="option1" v-model="modelValue" />
-  <p>Array Model Value: {{ modelValue }}</p>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const modelValue = ref([]);
-</script>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Multiple TickBoxes with Array Model Value
- */
-export const MultipleTickBoxes: Story = {
-  render() {
-    const selectedOptions = ref([]);
-    return {
-      components: { TickBox },
-      setup() {
-        return { selectedOptions };
-      },
-      template: `
-        <div>
-          <TickBox label="Option 1" value="option1" v-model="selectedOptions" success />
-          <TickBox label="Option 2" value="option2" v-model="selectedOptions" error />
-          <TickBox label="Option 3" value="option3" v-model="selectedOptions" />
-          <p>Selected Options: {{ selectedOptions }}</p>
-        </div>
-      `,
-    };
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div>
-    <TickBox label="Option 1" value="option1" success v-model="selectedOptions" />
-    <TickBox label="Option 2" value="option2" error v-model="selectedOptions" />
-    <TickBox label="Option 3" value="option3" v-model="selectedOptions" />
-    <p>Selected Options: {{ selectedOptions }}</p>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const selectedOptions = ref([]);
-</script>
-        `,
-      },
-    },
-  },
-};
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import TickBox from '@components/TickBox/TickBox.vue';
+
+// Meta configuration for Storybook
+const meta: Meta<typeof TickBox> = {
+  title: 'Wl/TickBox',
+  component: TickBox,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text', description: 'Label displayed with the TickBox' },
+    success: {
+      control: 'boolean',
+      description: 'Applies success styling to the TickBox',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Applies error styling to the TickBox',
+    },
+    disabled: { control: 'boolean', description: 'Disables the TickBox' },
+    value: {
+      control: 'text',
+      description:
+        'Value associated with the TickBox for array-based model binding',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TickBox\` component provides a checkbox input with customizable states, including success, error, and disabled styling. It supports both boolean and array-based model values.
+
+### Props
+- **\`label\`**: Text label displayed with the TickBox.
+- **\`success\`**: Applies success styling.
+- **\`error\`**: Applies error styling.
+- **\`disabled\`**: Disables the checkbox input.
+- **\`value\`**: Used when binding the TickBox to an array, where the value represents the item added to the array.
+
+### Example Usage
+The examples below demonstrate various configurations of the \`TickBox\` component, from simple state-based styling to using an array for managing multiple selections.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default TickBox Story
+ */
+export const Default: Story = {
+  args: {
+    label: 'Default TickBox',
+  },
+  render(args) {
+    const modelValue = ref(false);
+    return {
+      components: { TickBox },
+      setup() {
+        return { args, modelValue };
+      },
+      template: `
+        <TickBox v-bind="args" v-model="modelValue" />
+        <p>Model Value: {{ modelValue }}</p>
+      `,
+    };
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<TickBox label="Default TickBox" />`,
+      },
+    },
+  },
+};
+
+/**
+ * Success State TickBox Story
+ */
+export const SuccessState: Story = {
+  args: {
+    label: 'Success TickBox',
+    success: true,
+  },
+  render(args) {
+    const modelValue = ref(false);
+    return {
+      components: { TickBox },
+      setup() {
+        return { args, modelValue };
+      },
+      template: `
+        <TickBox v-bind="args" v-model="modelValue" />
+        <p>Model Value: {{ modelValue }}</p>
+      `,
+    };
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<TickBox label="Success TickBox" success />`,
+      },
+    },
+  },
+};
+
+/**
+ * Error State TickBox Story
+ */
+export const ErrorState: Story = {
+  args: {
+    label: 'Error TickBox',
+    error: true,
+  },
+  render(args) {
+    const modelValue = ref(false);
+    return {
+      components: { TickBox },
+      setup() {
+        return { args, modelValue };
+      },
+      template: `
+        <TickBox v-bind="args" v-model="modelValue" />
+        <p>Model Value: {{ modelValue }}</p>
+      `,
+    };
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<TickBox label="Error TickBox" error />`,
+      },
+    },
+  },
+};
+
+/**
+ * Disabled State TickBox Story
+ */
+export const DisabledState: Story = {
+  args: {
+    label: 'Disabled TickBox',
+    disabled: true,
+  },
+  render(args) {
+    const modelValue = ref(false);
+    return {
+      components: { TickBox },
+      setup() {
+        return { args, modelValue };
+      },
+      template: `
+        <TickBox v-bind="args" v-model="modelValue" />
+        <p>Model Value: {{ modelValue }}</p>
+      `,
+    };
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<TickBox label="Disabled TickBox" disabled />`,
+      },
+    },
+  },
+};
+
+/**
+ * TickBox with Boolean Model Value
+ */
+export const BooleanModel: Story = {
+  args: {
+    label: 'Boolean Model TickBox',
+  },
+  render(args) {
+    const modelValue = ref(false);
+    return {
+      components: { TickBox },
+      setup() {
+        return { args, modelValue };
+      },
+      template: `
+        <TickBox v-bind="args" v-model="modelValue" />
+        <p>Boolean Model Value: {{ modelValue }}</p>
+      `,
+    };
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TickBox label="Boolean Model TickBox" v-model="modelValue" />
+  <p>Boolean Model Value: {{ modelValue }}</p>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const modelValue = ref(false);
+</script>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * TickBox with Array Model Value
+ */
+export const ArrayModel: Story = {
+  args: {
+    label: 'Array Model TickBox',
+    value: 'option1',
+  },
+  render(args) {
+    const modelValue = ref([]);
+    return {
+      components: { TickBox },
+      setup() {
+        return { args, modelValue };
+      },
+      template: `
+        <TickBox v-bind="args" v-model="modelValue" />
+        <p>Array Model Value: {{ modelValue }}</p>
+      `,
+    };
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TickBox label="Array Model TickBox" value="option1" v-model="modelValue" />
+  <p>Array Model Value: {{ modelValue }}</p>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const modelValue = ref([]);
+</script>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Multiple TickBoxes with Array Model Value
+ */
+export const MultipleTickBoxes: Story = {
+  render() {
+    const selectedOptions = ref([]);
+    return {
+      components: { TickBox },
+      setup() {
+        return { selectedOptions };
+      },
+      template: `
+        <div>
+          <TickBox label="Option 1" value="option1" v-model="selectedOptions" success />
+          <TickBox label="Option 2" value="option2" v-model="selectedOptions" error />
+          <TickBox label="Option 3" value="option3" v-model="selectedOptions" />
+          <p>Selected Options: {{ selectedOptions }}</p>
+        </div>
+      `,
+    };
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div>
+    <TickBox label="Option 1" value="option1" success v-model="selectedOptions" />
+    <TickBox label="Option 2" value="option2" error v-model="selectedOptions" />
+    <TickBox label="Option 3" value="option3" v-model="selectedOptions" />
+    <p>Selected Options: {{ selectedOptions }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const selectedOptions = ref([]);
+</script>
+        `,
+      },
+    },
+  },
+};