@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiTextarea/UiTextarea.stories.ts

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiTextarea from './UiTextarea.vue';
+import { ref } from 'vue';
+
+const meta: Meta<typeof UiTextarea> = {
+  title: 'Components/UiTextarea',
+  component: UiTextarea,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Set component as disabled',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Set placeholder text',
+    },
+  },
+  args: {
+    name: 'textarea',
+    disabled: false,
+    placeholder: 'Type your message here.',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiTextarea>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTextarea } from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <div class="grid w-full gap-1.5">
+    <label for="message" class="text-sm font-medium">Your message</label>
+    <UiTextarea id="message" v-model="value" name="message" placeholder="Type your message here." />
+  </div>
+</template>`;
+
+/**
+ * Default textarea with a label.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiTextarea },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: `
+      <div class="grid w-full gap-1.5">
+        <label for="message" class="text-sm font-medium">Your message</label>
+        <UiTextarea id="message" v-model="value" name="message" :placeholder="args.placeholder" :disabled="args.disabled" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiTextarea } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="grid w-full gap-1.5">
+    <label for="message" class="text-sm font-medium">Your message</label>
+    <UiTextarea id="message" name="message" placeholder="Type your message here." disabled />
+  </div>
+</template>`;
+
+/**
+ * Textarea in disabled state.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { UiTextarea },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="grid w-full gap-1.5">
+        <label for="message" class="text-sm font-medium">Your message</label>
+        <UiTextarea id="message" name="message" :placeholder="args.placeholder" :disabled="args.disabled" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: disabledTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiTextarea/UiTextarea.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { Textarea as ShadcnTextarea } from '@/components/core/textarea';
+  import type { UiTextareaProps } from './types';
+
+  defineOptions({
+    name: 'UiTextarea',
+  });
+
+  const props = withDefaults(defineProps<UiTextareaProps>(), {
+    placeholder: undefined,
+    disabled: false,
+  });
+
+  const model = defineModel<string>();
+</script>
+
+<template>
+  <ShadcnTextarea v-model="model" v-bind="props" />
+</template>

package/src/components/UiTextarea/types.ts

@@ -0,0 +1,29 @@
+/**
+ * A multi-line text input for longer content. Use for comments,
+ * descriptions, messages, or any text that may span multiple lines.
+ * @category Form Inputs
+ * @useCases comment box, message input, description field, notes, bio
+ * @keywords textarea, multiline, text, comment, message, description, form
+ * @related UiInput
+ */
+export interface UiTextareaProps {
+  /**
+   * Prop to name the element
+   */
+  name: string;
+  /**
+   * Prop to define the Textarea as disabled, therefore blocking all user interaction with it.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Prop to define the Textarea as placeholder.
+   * @default undefined
+   */
+  placeholder?: string;
+  /**
+   * Define the element as required on a Form.
+   * @default false
+   */
+  required?: boolean;
+}

package/src/components/UiToggle/UiToggle.stories.ts

@@ -0,0 +1,370 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiToggle from './UiToggle.vue';
+import { UiIcon } from '../UiIcon';
+
+const meta: Meta<typeof UiToggle> = {
+  title: 'Components/UiToggle',
+  component: UiToggle,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+      description: 'The visual style variant',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+      description: 'The size of the toggle',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the toggle is disabled',
+    },
+  },
+  args: {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiToggle>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle aria-label="Toggle bold">
+    <UiIcon name="bold" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Default toggle button with icon.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiToggle, UiIcon },
+    setup() {
+      return { args };
+    },
+    template: `<UiToggle :variant="args.variant" :size="args.size" :disabled="args.disabled" aria-label="Toggle bold">
+      <UiIcon name="bold" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const outlineTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle variant="outline" aria-label="Toggle bold">
+    <UiIcon name="bold" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Outline variant toggle.
+ */
+export const Outline: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle variant="outline" aria-label="Toggle bold">
+      <UiIcon name="bold" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: outlineTemplateSource,
+      },
+    },
+  },
+};
+
+const withTextTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle aria-label="Toggle italic">
+    <UiIcon name="italic" />
+    Italic
+  </UiToggle>
+</template>`;
+
+/**
+ * Toggle with text label.
+ */
+export const WithText: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle aria-label="Toggle italic">
+      <UiIcon name="italic" />
+      Italic
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withTextTemplateSource,
+      },
+    },
+  },
+};
+
+const smallTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle size="sm" aria-label="Toggle italic">
+    <UiIcon name="italic" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Small size toggle.
+ */
+export const Small: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle size="sm" aria-label="Toggle italic">
+      <UiIcon name="italic" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: smallTemplateSource,
+      },
+    },
+  },
+};
+
+const largeTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle size="lg" aria-label="Toggle italic">
+    <UiIcon name="italic" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Large size toggle.
+ */
+export const Large: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle size="lg" aria-label="Toggle italic">
+      <UiIcon name="italic" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: largeTemplateSource,
+      },
+    },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle disabled aria-label="Toggle underline">
+    <UiIcon name="underline" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Disabled toggle.
+ */
+export const Disabled: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle disabled aria-label="Toggle underline">
+      <UiIcon name="underline" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: disabledTemplateSource,
+      },
+    },
+  },
+};
+
+const allStatesTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <!-- Variants -->
+    <div>
+      <p class="text-sm font-medium mb-2">Variants</p>
+      <div class="flex items-center gap-2">
+        <UiToggle aria-label="Toggle bold">
+          <UiIcon name="bold" />
+        </UiToggle>
+        <UiToggle default-value aria-label="Toggle bold (pressed)">
+          <UiIcon name="bold" />
+        </UiToggle>
+        <UiToggle variant="outline" aria-label="Toggle italic">
+          <UiIcon name="italic" />
+        </UiToggle>
+        <UiToggle variant="outline" default-value aria-label="Toggle italic (pressed)">
+          <UiIcon name="italic" />
+        </UiToggle>
+      </div>
+    </div>
+
+    <!-- Sizes -->
+    <div>
+      <p class="text-sm font-medium mb-2">Sizes</p>
+      <div class="flex items-end gap-2">
+        <UiToggle size="sm" aria-label="Toggle bold">
+          <UiIcon name="bold" />
+        </UiToggle>
+        <UiToggle aria-label="Toggle bold">
+          <UiIcon name="bold" />
+        </UiToggle>
+        <UiToggle size="lg" aria-label="Toggle bold">
+          <UiIcon name="bold" />
+        </UiToggle>
+      </div>
+    </div>
+
+    <!-- With Text -->
+    <div>
+      <p class="text-sm font-medium mb-2">With Text</p>
+      <div class="flex items-center gap-2">
+        <UiToggle aria-label="Toggle italic">
+          <UiIcon name="italic" />
+          Italic
+        </UiToggle>
+      </div>
+    </div>
+
+    <!-- Disabled -->
+    <div>
+      <p class="text-sm font-medium mb-2">Disabled</p>
+      <div class="flex items-center gap-2">
+        <UiToggle disabled aria-label="Toggle underline">
+          <UiIcon name="underline" />
+        </UiToggle>
+        <UiToggle disabled default-value aria-label="Toggle underline (pressed)">
+          <UiIcon name="underline" />
+        </UiToggle>
+        <UiToggle disabled variant="outline" aria-label="Toggle underline">
+          <UiIcon name="underline" />
+        </UiToggle>
+        <UiToggle disabled variant="outline" default-value aria-label="Toggle underline (pressed)">
+          <UiIcon name="underline" />
+        </UiToggle>
+      </div>
+    </div>
+  </div>
+</template>`;
+
+/**
+ * All toggle states displayed together: variants, sizes, with text, and disabled states.
+ */
+export const AllStates: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `
+      <div class="flex flex-col gap-6">
+        <!-- Variants -->
+        <div>
+          <p class="text-sm font-medium mb-2">Variants</p>
+          <div class="flex items-center gap-2">
+            <UiToggle aria-label="Toggle bold">
+              <UiIcon name="bold" />
+            </UiToggle>
+            <UiToggle default-value aria-label="Toggle bold (pressed)">
+              <UiIcon name="bold" />
+            </UiToggle>
+            <UiToggle variant="outline" aria-label="Toggle italic">
+              <UiIcon name="italic" />
+            </UiToggle>
+            <UiToggle variant="outline" default-value aria-label="Toggle italic (pressed)">
+              <UiIcon name="italic" />
+            </UiToggle>
+          </div>
+        </div>
+
+        <!-- Sizes -->
+        <div>
+          <p class="text-sm font-medium mb-2">Sizes</p>
+          <div class="flex items-end gap-2">
+            <UiToggle size="sm" aria-label="Toggle bold">
+              <UiIcon name="bold" />
+            </UiToggle>
+            <UiToggle aria-label="Toggle bold">
+              <UiIcon name="bold" />
+            </UiToggle>
+            <UiToggle size="lg" aria-label="Toggle bold">
+              <UiIcon name="bold" />
+            </UiToggle>
+          </div>
+        </div>
+
+        <!-- With Text -->
+        <div>
+          <p class="text-sm font-medium mb-2">With Text</p>
+          <div class="flex items-center gap-2">
+            <UiToggle aria-label="Toggle italic">
+              <UiIcon name="italic" />
+              Italic
+            </UiToggle>
+          </div>
+        </div>
+
+        <!-- Disabled -->
+        <div>
+          <p class="text-sm font-medium mb-2">Disabled</p>
+          <div class="flex items-center gap-2">
+            <UiToggle disabled aria-label="Toggle underline">
+              <UiIcon name="underline" />
+            </UiToggle>
+            <UiToggle disabled default-value aria-label="Toggle underline (pressed)">
+              <UiIcon name="underline" />
+            </UiToggle>
+            <UiToggle disabled variant="outline" aria-label="Toggle underline">
+              <UiIcon name="underline" />
+            </UiToggle>
+            <UiToggle disabled variant="outline" default-value aria-label="Toggle underline (pressed)">
+              <UiIcon name="underline" />
+            </UiToggle>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: allStatesTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiToggle/UiToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { Toggle as ShadcnToggle } from '@/components/core/toggle';
+  import type { UiToggleProps } from './types';
+
+  defineOptions({
+    name: 'UiToggle',
+  });
+
+  const props = withDefaults(defineProps<UiToggleProps>(), {
+    disabled: false,
+    variant: 'default',
+    size: 'default',
+  });
+
+  const modelValue = defineModel<boolean>();
+</script>
+
+<template>
+  <ShadcnToggle
+    v-model="modelValue"
+    :default-value="props.defaultValue"
+    :disabled="props.disabled"
+    :variant="props.variant"
+    :size="props.size"
+  >
+    <slot />
+  </ShadcnToggle>
+</template>

package/src/components/UiToggle/types.ts

@@ -0,0 +1,34 @@
+/**
+ * A two-state button that can be toggled on or off.
+ * Use for enabling/disabling features or switching between states.
+ * @category Form Inputs
+ * @useCases toolbar button, formatting toggle, view toggle, filter toggle
+ * @keywords toggle, button, pressed, on, off, state
+ * @related UiSwitch, UiButton, UiCheckbox
+ */
+export interface UiToggleProps {
+  /**
+   * The controlled pressed state of the toggle. Use with v-model.
+   */
+  modelValue?: boolean;
+  /**
+   * The pressed state when initially rendered (uncontrolled mode).
+   * Use when you do not need to control its state.
+   */
+  defaultValue?: boolean;
+  /**
+   * Whether the toggle is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The visual style variant.
+   * @default 'default'
+   */
+  variant?: 'default' | 'outline';
+  /**
+   * The size of the toggle.
+   * @default 'default'
+   */
+  size?: 'default' | 'sm' | 'lg';
+}