@zap-wunschlachen/wl-shared-components 1.0.15 → 1.0.17

package/src/stories/CheckBox.stories.ts

@@ -1,348 +1,348 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import Checkbox from '../components/CheckBox/Checkbox.vue';
-import { ref } from 'vue';
-import { action } from '@storybook/addon-actions';
-
-const meta: Meta<typeof Checkbox> = {
-  title: 'Wl/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  argTypes: {
-    success: { control: 'boolean' },
-    error: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    density: {
-      control: 'select',
-      options: ['comfortable', 'default', 'compact'],
-    },
-    value: { control: 'text' },
-    modelValue: { control: 'boolean' },
-    label: { control: 'text' },
-    'update:modelValue': { action: 'update:modelValue' },
-    'input-error': { action: 'input-error' },
-  },
-  args: {
-    density: 'default',
-    success: false,
-    error: false,
-    disabled: false,
-    value: 'checkbox',
-    modelValue: false,
-    label: 'Checkbox Label',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Checkbox\` component offers customizable checkbox styles with options for success, error, and disabled states. It supports both boolean and array-based models for single and multiple checkbox selections.
-
-### Props
-- **\`success\`**: Applies a success styling to the checkbox.
-- **\`error\`**: Applies an error styling to the checkbox.
-- **\`disabled\`**: Disables the checkbox input.
-- **\`density\`**: Adjusts the padding around the checkbox (comfortable, default, compact).
-- **\`value\`**: Used for array binding; represents a unique item in an array.
-- **\`modelValue\`**: Boolean value that binds the checkbox state.
-- **\`label\`**: The label text for the checkbox.
-
-### Example Usage
-Examples below demonstrate various configurations of the \`Checkbox\` component, including single and multiple checkbox options with boolean and array model binding.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: Story = {
-  render: (args) => ({
-    components: { Checkbox },
-    setup() {
-      const modelValue = ref(args.modelValue);
-      const updateModelValue = action('update:modelValue');
-      const inputError = action('input-error');
-
-      return {
-        args,
-        modelValue,
-        updateModelValue,
-        inputError,
-      };
-    },
-    template: `
-        <div style="padding: 16px;">
-          <Checkbox
-            v-bind="args"
-            v-model="modelValue"
-            @update:modelValue="updateModelValue"
-            @input-error="inputError"
-          />
-        </div>
-      `,
-  }),
-};
-
-export const Default: Story = {
-  ...Template,
-  args: {
-    label: 'Default Checkbox',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Checkbox label="Default Checkbox" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const SuccessState: Story = {
-  ...Template,
-  args: {
-    success: true,
-    label: 'Success Checkbox',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Checkbox success label="Success Checkbox" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ErrorState: Story = {
-  ...Template,
-  args: {
-    error: true,
-    label: 'Error Checkbox',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Checkbox error label="Error Checkbox" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Disabled: Story = {
-  ...Template,
-  args: {
-    disabled: true,
-    label: 'Disabled Checkbox',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Checkbox disabled label="Disabled Checkbox" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DensityComfortable: Story = {
-  ...Template,
-  args: {
-    density: 'comfortable',
-    label: 'Comfortable Density',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Checkbox density="comfortable" label="Comfortable Density" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DensityCompact: Story = {
-  ...Template,
-  args: {
-    density: 'compact',
-    label: 'Compact Density',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Checkbox density="compact" label="Compact Density" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const MultipleCheckboxes: Story = {
-  render: (args) => ({
-    components: { Checkbox },
-    setup() {
-      const selected = ref(['John']);
-      const updateModelValue = action('update:modelValue');
-      const inputError = action('input-error');
-
-      return {
-        args,
-        selected,
-        updateModelValue,
-        inputError,
-      };
-    },
-    template: `
-        <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
-          <Checkbox
-            v-bind="args"
-            v-model="selected"
-            value="John"
-            @update:modelValue="updateModelValue"
-            @input-error="inputError"
-            label="John"
-          />
-          <Checkbox
-            v-bind="args"
-            v-model="selected"
-            value="Emma"
-            @update:modelValue="updateModelValue"
-            @input-error="inputError"
-            label="Emma"
-          />
-          <Checkbox
-            v-bind="args"
-            v-model="selected"
-            value="Steve"
-            @update:modelValue="updateModelValue"
-            @input-error="inputError"
-            label="Steve"
-          />
-          <p>Selected: {{ selected }}</p>
-        </div>
-      `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div style="display: flex; flex-direction: column; gap: 8px;">
-    <Checkbox v-model="selected" value="John" label="John" />
-    <Checkbox v-model="selected" value="Emma" label="Emma" />
-    <Checkbox v-model="selected" value="Steve" label="Steve" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selected: ['John'],
-    };
-  },
-};
-</script>
-        `,
-      },
-    },
-  },
-};
-
-export const BooleanCheckboxes: Story = {
-  render: (args) => ({
-    components: { Checkbox },
-    setup() {
-      const johnChecked = ref(false);
-      const emmaChecked = ref(false);
-      const steveChecked = ref(false);
-
-      const updateModelValue = action('update:modelValue');
-      const inputError = action('input-error');
-
-      return {
-        args,
-        johnChecked,
-        emmaChecked,
-        steveChecked,
-        updateModelValue,
-        inputError,
-      };
-    },
-    template: `
-        <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
-          <Checkbox
-            v-bind="args"
-            v-model="johnChecked"
-            @update:modelValue="updateModelValue"
-            @input-error="inputError"
-            label="John"
-          />
-          <Checkbox
-            v-bind="args"
-            v-model="emmaChecked"
-            @update:modelValue="updateModelValue"
-            @input-error="inputError"
-            label="Emma"
-          />
-          <Checkbox
-            v-bind="args"
-            v-model="steveChecked"
-            @update:modelValue="updateModelValue"
-            @input-error="inputError"
-            label="Steve"
-          />
-          <p>John Checked: {{ johnChecked }}</p>
-          <p>Emma Checked: {{ emmaChecked }}</p>
-          <p>Steve Checked: {{ steveChecked }}</p>
-        </div>
-      `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div style="display: flex; flex-direction: column; gap: 8px;">
-    <Checkbox v-model="johnChecked" label="John" />
-    <Checkbox v-model="emmaChecked" label="Emma" />
-    <Checkbox v-model="steveChecked" label="Steve" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      johnChecked: false,
-      emmaChecked: false,
-      steveChecked: false,
-    };
-  },
-};
-</script>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import Checkbox from '../components/CheckBox/Checkbox.vue';
+import { ref } from 'vue';
+import { action } from '@storybook/addon-actions';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Wl/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    success: { control: 'boolean' },
+    error: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    density: {
+      control: 'select',
+      options: ['comfortable', 'default', 'compact'],
+    },
+    value: { control: 'text' },
+    modelValue: { control: 'boolean' },
+    label: { control: 'text' },
+    'update:modelValue': { action: 'update:modelValue' },
+    'input-error': { action: 'input-error' },
+  },
+  args: {
+    density: 'default',
+    success: false,
+    error: false,
+    disabled: false,
+    value: 'checkbox',
+    modelValue: false,
+    label: 'Checkbox Label',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Checkbox\` component offers customizable checkbox styles with options for success, error, and disabled states. It supports both boolean and array-based models for single and multiple checkbox selections.
+
+### Props
+- **\`success\`**: Applies a success styling to the checkbox.
+- **\`error\`**: Applies an error styling to the checkbox.
+- **\`disabled\`**: Disables the checkbox input.
+- **\`density\`**: Adjusts the padding around the checkbox (comfortable, default, compact).
+- **\`value\`**: Used for array binding; represents a unique item in an array.
+- **\`modelValue\`**: Boolean value that binds the checkbox state.
+- **\`label\`**: The label text for the checkbox.
+
+### Example Usage
+Examples below demonstrate various configurations of the \`Checkbox\` component, including single and multiple checkbox options with boolean and array model binding.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const updateModelValue = action('update:modelValue');
+      const inputError = action('input-error');
+
+      return {
+        args,
+        modelValue,
+        updateModelValue,
+        inputError,
+      };
+    },
+    template: `
+        <div style="padding: 16px;">
+          <Checkbox
+            v-bind="args"
+            v-model="modelValue"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+          />
+        </div>
+      `,
+  }),
+};
+
+export const Default: Story = {
+  ...Template,
+  args: {
+    label: 'Default Checkbox',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox label="Default Checkbox" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const SuccessState: Story = {
+  ...Template,
+  args: {
+    success: true,
+    label: 'Success Checkbox',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox success label="Success Checkbox" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ErrorState: Story = {
+  ...Template,
+  args: {
+    error: true,
+    label: 'Error Checkbox',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox error label="Error Checkbox" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  ...Template,
+  args: {
+    disabled: true,
+    label: 'Disabled Checkbox',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox disabled label="Disabled Checkbox" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DensityComfortable: Story = {
+  ...Template,
+  args: {
+    density: 'comfortable',
+    label: 'Comfortable Density',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox density="comfortable" label="Comfortable Density" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DensityCompact: Story = {
+  ...Template,
+  args: {
+    density: 'compact',
+    label: 'Compact Density',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox density="compact" label="Compact Density" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const MultipleCheckboxes: Story = {
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const selected = ref(['John']);
+      const updateModelValue = action('update:modelValue');
+      const inputError = action('input-error');
+
+      return {
+        args,
+        selected,
+        updateModelValue,
+        inputError,
+      };
+    },
+    template: `
+        <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
+          <Checkbox
+            v-bind="args"
+            v-model="selected"
+            value="John"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="John"
+          />
+          <Checkbox
+            v-bind="args"
+            v-model="selected"
+            value="Emma"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="Emma"
+          />
+          <Checkbox
+            v-bind="args"
+            v-model="selected"
+            value="Steve"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="Steve"
+          />
+          <p>Selected: {{ selected }}</p>
+        </div>
+      `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <Checkbox v-model="selected" value="John" label="John" />
+    <Checkbox v-model="selected" value="Emma" label="Emma" />
+    <Checkbox v-model="selected" value="Steve" label="Steve" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: ['John'],
+    };
+  },
+};
+</script>
+        `,
+      },
+    },
+  },
+};
+
+export const BooleanCheckboxes: Story = {
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const johnChecked = ref(false);
+      const emmaChecked = ref(false);
+      const steveChecked = ref(false);
+
+      const updateModelValue = action('update:modelValue');
+      const inputError = action('input-error');
+
+      return {
+        args,
+        johnChecked,
+        emmaChecked,
+        steveChecked,
+        updateModelValue,
+        inputError,
+      };
+    },
+    template: `
+        <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
+          <Checkbox
+            v-bind="args"
+            v-model="johnChecked"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="John"
+          />
+          <Checkbox
+            v-bind="args"
+            v-model="emmaChecked"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="Emma"
+          />
+          <Checkbox
+            v-bind="args"
+            v-model="steveChecked"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="Steve"
+          />
+          <p>John Checked: {{ johnChecked }}</p>
+          <p>Emma Checked: {{ emmaChecked }}</p>
+          <p>Steve Checked: {{ steveChecked }}</p>
+        </div>
+      `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <Checkbox v-model="johnChecked" label="John" />
+    <Checkbox v-model="emmaChecked" label="Emma" />
+    <Checkbox v-model="steveChecked" label="Steve" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      johnChecked: false,
+      emmaChecked: false,
+      steveChecked: false,
+    };
+  },
+};
+</script>
+        `,
+      },
+    },
+  },
+};