@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/primitives/UiDropdownMenu/UiDropdownMenu.stories.ts

@@ -1,760 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref, watch } from 'vue';
-import {
-  UiDropdownMenu,
-  UiDropdownMenuTrigger,
-  UiDropdownMenuContent,
-  UiDropdownMenuItem,
-  UiDropdownMenuSeparator,
-  UiDropdownMenuLabel,
-  UiDropdownMenuGroup,
-  UiDropdownMenuShortcut,
-  UiDropdownMenuCheckboxItem,
-  UiDropdownMenuRadioGroup,
-  UiDropdownMenuRadioItem,
-  UiDropdownMenuSub,
-  UiDropdownMenuSubTrigger,
-  UiDropdownMenuSubContent,
-} from './index';
-import UiButton from '../UiButton/UiButton.vue';
-import UiIconButton from '../UiIconButton/UiIconButton.vue';
-import { UiIcon } from '../UiIcon';
-
-const meta: Meta<typeof UiDropdownMenu> = {
-  title: 'Primitives/UiDropdownMenu',
-  component: UiDropdownMenu,
-  tags: ['autodocs'],
-  argTypes: {
-    open: {
-      control: 'boolean',
-      description: 'Controlled open state (use with v-model:open)',
-    },
-    modal: {
-      control: 'boolean',
-      description: 'Whether the menu is modal (blocks interaction with outside elements)',
-    },
-  },
-  args: {
-    open: false,
-    modal: true,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UiDropdownMenu>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiDropdownMenu,
-  UiDropdownMenuTrigger,
-  UiDropdownMenuContent,
-  UiDropdownMenuItem,
-  UiDropdownMenuSeparator,
-  UiButton,
-} from '@aleph-alpha/ui-library'
-
-const open = ref(false)
-</script>
-
-<template>
-  <UiDropdownMenu v-model:open="open">
-    <UiDropdownMenuTrigger as-child>
-      <UiButton variant="outline">Open Menu</UiButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent>
-      <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
-      <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuItem>Team</UiDropdownMenuItem>
-      <UiDropdownMenuItem>Billing</UiDropdownMenuItem>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>`;
-
-/**
- * Basic dropdown menu with simple text items.
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: {
-      UiDropdownMenu,
-      UiDropdownMenuTrigger,
-      UiDropdownMenuContent,
-      UiDropdownMenuItem,
-      UiDropdownMenuSeparator,
-      UiButton,
-    },
-    setup() {
-      const open = ref(args.open);
-      const modal = ref(args.modal);
-      watch(
-        () => args.open,
-        (v) => {
-          open.value = v;
-        },
-      );
-      watch(
-        () => args.modal,
-        (v) => {
-          modal.value = v;
-        },
-      );
-      return { open, modal };
-    },
-    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
-      <UiDropdownMenuTrigger as-child>
-        <UiButton variant="outline">Open Menu</UiButton>
-      </UiDropdownMenuTrigger>
-      <UiDropdownMenuContent>
-        <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
-        <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuItem>Team</UiDropdownMenuItem>
-        <UiDropdownMenuItem>Billing</UiDropdownMenuItem>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
-      </UiDropdownMenuContent>
-    </UiDropdownMenu>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: defaultTemplateSource,
-      },
-    },
-  },
-};
-
-const withLabelsTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiDropdownMenu,
-  UiDropdownMenuTrigger,
-  UiDropdownMenuContent,
-  UiDropdownMenuItem,
-  UiDropdownMenuSeparator,
-  UiDropdownMenuLabel,
-  UiDropdownMenuGroup,
-  UiDropdownMenuShortcut,
-  UiDropdownMenuSub,
-  UiDropdownMenuSubTrigger,
-  UiDropdownMenuSubContent,
-  UiButton,
-} from '@aleph-alpha/ui-library'
-
-const open = ref(false)
-</script>
-
-<template>
-  <UiDropdownMenu v-model:open="open">
-    <UiDropdownMenuTrigger as-child>
-      <UiButton variant="outline">Open</UiButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent class="w-56" align="start">
-      <UiDropdownMenuLabel>My Account</UiDropdownMenuLabel>
-      <UiDropdownMenuGroup>
-        <UiDropdownMenuItem>
-          Profile
-          <UiDropdownMenuShortcut>⇧⌘P</UiDropdownMenuShortcut>
-        </UiDropdownMenuItem>
-        <UiDropdownMenuItem>
-          Billing
-          <UiDropdownMenuShortcut>⌘B</UiDropdownMenuShortcut>
-        </UiDropdownMenuItem>
-        <UiDropdownMenuItem>
-          Settings
-          <UiDropdownMenuShortcut>⌘S</UiDropdownMenuShortcut>
-        </UiDropdownMenuItem>
-        <UiDropdownMenuItem>
-          Keyboard shortcuts
-          <UiDropdownMenuShortcut>⌘K</UiDropdownMenuShortcut>
-        </UiDropdownMenuItem>
-      </UiDropdownMenuGroup>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuGroup>
-        <UiDropdownMenuItem>Team</UiDropdownMenuItem>
-        <UiDropdownMenuSub>
-          <UiDropdownMenuSubTrigger>Invite users</UiDropdownMenuSubTrigger>
-          <UiDropdownMenuSubContent>
-            <UiDropdownMenuItem>Email</UiDropdownMenuItem>
-            <UiDropdownMenuItem>Message</UiDropdownMenuItem>
-            <UiDropdownMenuSeparator />
-            <UiDropdownMenuItem>More...</UiDropdownMenuItem>
-          </UiDropdownMenuSubContent>
-        </UiDropdownMenuSub>
-        <UiDropdownMenuItem>
-          New Team
-          <UiDropdownMenuShortcut>⌘+T</UiDropdownMenuShortcut>
-        </UiDropdownMenuItem>
-      </UiDropdownMenuGroup>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuItem>GitHub</UiDropdownMenuItem>
-      <UiDropdownMenuItem>Support</UiDropdownMenuItem>
-      <UiDropdownMenuItem disabled>API</UiDropdownMenuItem>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuItem>
-        Log out
-        <UiDropdownMenuShortcut>⇧⌘Q</UiDropdownMenuShortcut>
-      </UiDropdownMenuItem>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>`;
-
-/**
- * Full dropdown menu example from shadcn-vue docs with labels, groups, shortcuts, and submenus.
- */
-export const WithLabelsAndGroups: Story = {
-  render: (args) => ({
-    components: {
-      UiDropdownMenu,
-      UiDropdownMenuTrigger,
-      UiDropdownMenuContent,
-      UiDropdownMenuItem,
-      UiDropdownMenuSeparator,
-      UiDropdownMenuLabel,
-      UiDropdownMenuGroup,
-      UiDropdownMenuShortcut,
-      UiDropdownMenuSub,
-      UiDropdownMenuSubTrigger,
-      UiDropdownMenuSubContent,
-      UiButton,
-    },
-    setup() {
-      const open = ref(args.open);
-      const modal = ref(args.modal);
-      watch(
-        () => args.open,
-        (v) => {
-          open.value = v;
-        },
-      );
-      watch(
-        () => args.modal,
-        (v) => {
-          modal.value = v;
-        },
-      );
-      return { open, modal };
-    },
-    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
-      <UiDropdownMenuTrigger as-child>
-        <UiButton variant="outline">Open</UiButton>
-      </UiDropdownMenuTrigger>
-      <UiDropdownMenuContent class="w-56" align="start">
-        <UiDropdownMenuLabel>My Account</UiDropdownMenuLabel>
-        <UiDropdownMenuGroup>
-          <UiDropdownMenuItem>
-            Profile
-            <UiDropdownMenuShortcut>⇧⌘P</UiDropdownMenuShortcut>
-          </UiDropdownMenuItem>
-          <UiDropdownMenuItem>
-            Billing
-            <UiDropdownMenuShortcut>⌘B</UiDropdownMenuShortcut>
-          </UiDropdownMenuItem>
-          <UiDropdownMenuItem>
-            Settings
-            <UiDropdownMenuShortcut>⌘S</UiDropdownMenuShortcut>
-          </UiDropdownMenuItem>
-          <UiDropdownMenuItem>
-            Keyboard shortcuts
-            <UiDropdownMenuShortcut>⌘K</UiDropdownMenuShortcut>
-          </UiDropdownMenuItem>
-        </UiDropdownMenuGroup>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuGroup>
-          <UiDropdownMenuItem>Team</UiDropdownMenuItem>
-          <UiDropdownMenuSub>
-            <UiDropdownMenuSubTrigger>Invite users</UiDropdownMenuSubTrigger>
-            <UiDropdownMenuSubContent>
-              <UiDropdownMenuItem>Email</UiDropdownMenuItem>
-              <UiDropdownMenuItem>Message</UiDropdownMenuItem>
-              <UiDropdownMenuSeparator />
-              <UiDropdownMenuItem>More...</UiDropdownMenuItem>
-            </UiDropdownMenuSubContent>
-          </UiDropdownMenuSub>
-          <UiDropdownMenuItem>
-            New Team
-            <UiDropdownMenuShortcut>⌘+T</UiDropdownMenuShortcut>
-          </UiDropdownMenuItem>
-        </UiDropdownMenuGroup>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuItem>GitHub</UiDropdownMenuItem>
-        <UiDropdownMenuItem>Support</UiDropdownMenuItem>
-        <UiDropdownMenuItem disabled>API</UiDropdownMenuItem>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuItem>
-          Log out
-          <UiDropdownMenuShortcut>⇧⌘Q</UiDropdownMenuShortcut>
-        </UiDropdownMenuItem>
-      </UiDropdownMenuContent>
-    </UiDropdownMenu>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: withLabelsTemplateSource,
-      },
-    },
-  },
-};
-
-const checkboxTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiDropdownMenu,
-  UiDropdownMenuTrigger,
-  UiDropdownMenuContent,
-  UiDropdownMenuLabel,
-  UiDropdownMenuSeparator,
-  UiDropdownMenuCheckboxItem,
-  UiButton,
-} from '@aleph-alpha/ui-library'
-
-const open = ref(false)
-const showStatusBar = ref(true)
-const showActivityBar = ref(false)
-const showPanel = ref(true)
-</script>
-
-<template>
-  <UiDropdownMenu v-model:open="open">
-    <UiDropdownMenuTrigger as-child>
-      <UiButton variant="outline">View Options</UiButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent>
-      <UiDropdownMenuLabel>Appearance</UiDropdownMenuLabel>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuCheckboxItem v-model:checked="showStatusBar">
-        Status Bar
-      </UiDropdownMenuCheckboxItem>
-      <UiDropdownMenuCheckboxItem v-model:checked="showActivityBar">
-        Activity Bar
-      </UiDropdownMenuCheckboxItem>
-      <UiDropdownMenuCheckboxItem v-model:checked="showPanel">
-        Panel
-      </UiDropdownMenuCheckboxItem>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>`;
-
-/**
- * Dropdown menu with toggleable checkbox items.
- */
-export const WithCheckboxItems: Story = {
-  render: (args) => ({
-    components: {
-      UiDropdownMenu,
-      UiDropdownMenuTrigger,
-      UiDropdownMenuContent,
-      UiDropdownMenuLabel,
-      UiDropdownMenuSeparator,
-      UiDropdownMenuCheckboxItem,
-      UiButton,
-    },
-    setup() {
-      const open = ref(args.open);
-      const modal = ref(args.modal);
-      const showStatusBar = ref(true);
-      const showActivityBar = ref(false);
-      const showPanel = ref(true);
-      watch(
-        () => args.open,
-        (v) => {
-          open.value = v;
-        },
-      );
-      watch(
-        () => args.modal,
-        (v) => {
-          modal.value = v;
-        },
-      );
-      return { open, modal, showStatusBar, showActivityBar, showPanel };
-    },
-    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
-      <UiDropdownMenuTrigger as-child>
-        <UiButton variant="outline">View Options</UiButton>
-      </UiDropdownMenuTrigger>
-      <UiDropdownMenuContent>
-        <UiDropdownMenuLabel>Appearance</UiDropdownMenuLabel>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuCheckboxItem v-model:checked="showStatusBar">
-          Status Bar
-        </UiDropdownMenuCheckboxItem>
-        <UiDropdownMenuCheckboxItem v-model:checked="showActivityBar">
-          Activity Bar
-        </UiDropdownMenuCheckboxItem>
-        <UiDropdownMenuCheckboxItem v-model:checked="showPanel">
-          Panel
-        </UiDropdownMenuCheckboxItem>
-      </UiDropdownMenuContent>
-    </UiDropdownMenu>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: checkboxTemplateSource,
-      },
-    },
-  },
-};
-
-const radioTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiDropdownMenu,
-  UiDropdownMenuTrigger,
-  UiDropdownMenuContent,
-  UiDropdownMenuLabel,
-  UiDropdownMenuSeparator,
-  UiDropdownMenuRadioGroup,
-  UiDropdownMenuRadioItem,
-  UiButton,
-} from '@aleph-alpha/ui-library'
-
-const open = ref(false)
-const position = ref('bottom')
-</script>
-
-<template>
-  <UiDropdownMenu v-model:open="open">
-    <UiDropdownMenuTrigger as-child>
-      <UiButton variant="outline">Select Position</UiButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent>
-      <UiDropdownMenuLabel>Panel Position</UiDropdownMenuLabel>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuRadioGroup v-model="position">
-        <UiDropdownMenuRadioItem value="top">Top</UiDropdownMenuRadioItem>
-        <UiDropdownMenuRadioItem value="bottom">Bottom</UiDropdownMenuRadioItem>
-        <UiDropdownMenuRadioItem value="right">Right</UiDropdownMenuRadioItem>
-      </UiDropdownMenuRadioGroup>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>`;
-
-/**
- * Dropdown menu with radio items for exclusive selection.
- */
-export const WithRadioItems: Story = {
-  render: (args) => ({
-    components: {
-      UiDropdownMenu,
-      UiDropdownMenuTrigger,
-      UiDropdownMenuContent,
-      UiDropdownMenuLabel,
-      UiDropdownMenuSeparator,
-      UiDropdownMenuRadioGroup,
-      UiDropdownMenuRadioItem,
-      UiButton,
-    },
-    setup() {
-      const open = ref(args.open);
-      const modal = ref(args.modal);
-      const position = ref('bottom');
-      watch(
-        () => args.open,
-        (v) => {
-          open.value = v;
-        },
-      );
-      watch(
-        () => args.modal,
-        (v) => {
-          modal.value = v;
-        },
-      );
-      return { open, modal, position };
-    },
-    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
-      <UiDropdownMenuTrigger as-child>
-        <UiButton variant="outline">Select Position</UiButton>
-      </UiDropdownMenuTrigger>
-      <UiDropdownMenuContent>
-        <UiDropdownMenuLabel>Panel Position</UiDropdownMenuLabel>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuRadioGroup v-model="position">
-          <UiDropdownMenuRadioItem value="top">Top</UiDropdownMenuRadioItem>
-          <UiDropdownMenuRadioItem value="bottom">Bottom</UiDropdownMenuRadioItem>
-          <UiDropdownMenuRadioItem value="right">Right</UiDropdownMenuRadioItem>
-        </UiDropdownMenuRadioGroup>
-      </UiDropdownMenuContent>
-    </UiDropdownMenu>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: radioTemplateSource,
-      },
-    },
-  },
-};
-
-const destructiveTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiDropdownMenu,
-  UiDropdownMenuTrigger,
-  UiDropdownMenuContent,
-  UiDropdownMenuItem,
-  UiDropdownMenuSeparator,
-  UiButton,
-} from '@aleph-alpha/ui-library'
-
-const open = ref(false)
-</script>
-
-<template>
-  <UiDropdownMenu v-model:open="open">
-    <UiDropdownMenuTrigger as-child>
-      <UiButton variant="outline">Actions</UiButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent>
-      <UiDropdownMenuItem>Edit</UiDropdownMenuItem>
-      <UiDropdownMenuItem>Duplicate</UiDropdownMenuItem>
-      <UiDropdownMenuItem>Archive</UiDropdownMenuItem>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuItem variant="destructive">Delete</UiDropdownMenuItem>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>`;
-
-/**
- * Dropdown menu with destructive action (delete, remove, etc.).
- */
-export const WithDestructiveAction: Story = {
-  render: (args) => ({
-    components: {
-      UiDropdownMenu,
-      UiDropdownMenuTrigger,
-      UiDropdownMenuContent,
-      UiDropdownMenuItem,
-      UiDropdownMenuSeparator,
-      UiButton,
-    },
-    setup() {
-      const open = ref(args.open);
-      const modal = ref(args.modal);
-      watch(
-        () => args.open,
-        (v) => {
-          open.value = v;
-        },
-      );
-      watch(
-        () => args.modal,
-        (v) => {
-          modal.value = v;
-        },
-      );
-      return { open, modal };
-    },
-    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
-      <UiDropdownMenuTrigger as-child>
-        <UiButton variant="outline">Actions</UiButton>
-      </UiDropdownMenuTrigger>
-      <UiDropdownMenuContent>
-        <UiDropdownMenuItem>Edit</UiDropdownMenuItem>
-        <UiDropdownMenuItem>Duplicate</UiDropdownMenuItem>
-        <UiDropdownMenuItem>Archive</UiDropdownMenuItem>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuItem variant="destructive">Delete</UiDropdownMenuItem>
-      </UiDropdownMenuContent>
-    </UiDropdownMenu>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: destructiveTemplateSource,
-      },
-    },
-  },
-};
-
-const submenuTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiDropdownMenu,
-  UiDropdownMenuTrigger,
-  UiDropdownMenuContent,
-  UiDropdownMenuItem,
-  UiDropdownMenuSeparator,
-  UiDropdownMenuSub,
-  UiDropdownMenuSubTrigger,
-  UiDropdownMenuSubContent,
-  UiButton,
-} from '@aleph-alpha/ui-library'
-
-const open = ref(false)
-</script>
-
-<template>
-  <UiDropdownMenu v-model:open="open">
-    <UiDropdownMenuTrigger as-child>
-      <UiButton variant="outline">Options</UiButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent>
-      <UiDropdownMenuItem>New File</UiDropdownMenuItem>
-      <UiDropdownMenuItem>New Window</UiDropdownMenuItem>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuSub>
-        <UiDropdownMenuSubTrigger>Share</UiDropdownMenuSubTrigger>
-        <UiDropdownMenuSubContent>
-          <UiDropdownMenuItem>Email</UiDropdownMenuItem>
-          <UiDropdownMenuItem>Messages</UiDropdownMenuItem>
-          <UiDropdownMenuItem>Notes</UiDropdownMenuItem>
-        </UiDropdownMenuSubContent>
-      </UiDropdownMenuSub>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuItem>Print</UiDropdownMenuItem>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>`;
-
-/**
- * Dropdown menu with nested submenu.
- */
-export const WithSubmenu: Story = {
-  render: (args) => ({
-    components: {
-      UiDropdownMenu,
-      UiDropdownMenuTrigger,
-      UiDropdownMenuContent,
-      UiDropdownMenuItem,
-      UiDropdownMenuSeparator,
-      UiDropdownMenuSub,
-      UiDropdownMenuSubTrigger,
-      UiDropdownMenuSubContent,
-      UiButton,
-    },
-    setup() {
-      const open = ref(args.open);
-      const modal = ref(args.modal);
-      watch(
-        () => args.open,
-        (v) => {
-          open.value = v;
-        },
-      );
-      watch(
-        () => args.modal,
-        (v) => {
-          modal.value = v;
-        },
-      );
-      return { open, modal };
-    },
-    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
-      <UiDropdownMenuTrigger as-child>
-        <UiButton variant="outline">Options</UiButton>
-      </UiDropdownMenuTrigger>
-      <UiDropdownMenuContent>
-        <UiDropdownMenuItem>New File</UiDropdownMenuItem>
-        <UiDropdownMenuItem>New Window</UiDropdownMenuItem>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuSub>
-          <UiDropdownMenuSubTrigger>Share</UiDropdownMenuSubTrigger>
-          <UiDropdownMenuSubContent>
-            <UiDropdownMenuItem>Email</UiDropdownMenuItem>
-            <UiDropdownMenuItem>Messages</UiDropdownMenuItem>
-            <UiDropdownMenuItem>Notes</UiDropdownMenuItem>
-          </UiDropdownMenuSubContent>
-        </UiDropdownMenuSub>
-        <UiDropdownMenuSeparator />
-        <UiDropdownMenuItem>Print</UiDropdownMenuItem>
-      </UiDropdownMenuContent>
-    </UiDropdownMenu>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: submenuTemplateSource,
-      },
-    },
-  },
-};
-
-const iconButtonTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiDropdownMenu,
-  UiDropdownMenuTrigger,
-  UiDropdownMenuContent,
-  UiDropdownMenuItem,
-  UiIconButton,
-  UiIcon,
-} from '@aleph-alpha/ui-library'
-
-const open = ref(false)
-</script>
-
-<template>
-  <UiDropdownMenu v-model:open="open">
-    <UiDropdownMenuTrigger as-child>
-      <UiIconButton aria-label="Open menu" variant="ghost">
-        <UiIcon name="more-vertical" :size="20" />
-      </UiIconButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent>
-      <UiDropdownMenuItem>View Details</UiDropdownMenuItem>
-      <UiDropdownMenuItem>Share</UiDropdownMenuItem>
-      <UiDropdownMenuItem>Download</UiDropdownMenuItem>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>`;
-
-/**
- * Dropdown menu with icon button trigger.
- */
-export const WithIconButton: Story = {
-  render: (args) => ({
-    components: {
-      UiDropdownMenu,
-      UiDropdownMenuTrigger,
-      UiDropdownMenuContent,
-      UiDropdownMenuItem,
-      UiIconButton,
-      UiIcon,
-    },
-    setup() {
-      const open = ref(args.open);
-      const modal = ref(args.modal);
-      watch(
-        () => args.open,
-        (v) => {
-          open.value = v;
-        },
-      );
-      watch(
-        () => args.modal,
-        (v) => {
-          modal.value = v;
-        },
-      );
-      return { open, modal };
-    },
-    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
-      <UiDropdownMenuTrigger as-child>
-        <UiIconButton aria-label="Open menu" variant="ghost">
-          <UiIcon name="more-vertical" :size="20" />
-        </UiIconButton>
-      </UiDropdownMenuTrigger>
-      <UiDropdownMenuContent>
-        <UiDropdownMenuItem>View Details</UiDropdownMenuItem>
-        <UiDropdownMenuItem>Share</UiDropdownMenuItem>
-        <UiDropdownMenuItem>Download</UiDropdownMenuItem>
-      </UiDropdownMenuContent>
-    </UiDropdownMenu>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: iconButtonTemplateSource,
-      },
-    },
-  },
-};