@aleph-alpha/ui-library 1.16.1 → 1.18.0

package/src/components/UiDropdownMenu/UiDropdownMenu.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import {
   UiDropdownMenu,
   UiDropdownMenuTrigger,
@@ -18,6 +18,7 @@ import {
 } from './index';
 import UiButton from '../UiButton/UiButton.vue';
 import UiIconButton from '../UiIconButton/UiIconButton.vue';
+import UiToggle from '../UiToggle/UiToggle.vue';
 import { UiIcon } from '../UiIcon';
 
 const meta: Meta<typeof UiDropdownMenu> = {
@@ -758,3 +759,260 @@ export const WithIconButton: Story = {
     },
   },
 };
+
+const softToggleTriggerTemplateSource = `<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiDropdownMenuSeparator,
+  UiToggle,
+  UiIcon,
+} from '@aleph-alpha/ui-library'
+
+const open = ref(false)
+const activeFilter = ref('')
+const hasFilter = computed(() => !!activeFilter.value)
+const toggleVariant = computed(() => {
+  if (open.value) return 'soft'
+  if (hasFilter.value) return 'outline'
+  return 'default'
+})
+const toggleActive = computed({
+  get: () => open.value,
+  set: () => {},
+})
+</script>
+
+<template>
+  <UiDropdownMenu v-model:open="open">
+    <UiDropdownMenuTrigger as-child>
+      <UiToggle v-model="toggleActive" :variant="toggleVariant" aria-label="Filter options">
+        <UiIcon name="filter" />
+      </UiToggle>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent>
+      <UiDropdownMenuItem @select="activeFilter = 'name'">By Name</UiDropdownMenuItem>
+      <UiDropdownMenuItem @select="activeFilter = 'date'">By Date</UiDropdownMenuItem>
+      <UiDropdownMenuItem @select="activeFilter = 'size'">By Size</UiDropdownMenuItem>
+      <UiDropdownMenuSeparator />
+      <UiDropdownMenuItem @select="activeFilter = ''">Clear Filters</UiDropdownMenuItem>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+</template>`;
+
+/**
+ * Dropdown menu with a soft toggle trigger. Switches to outline variant
+ * when a filter is selected, and back to default when filters are cleared.
+ */
+export const WithSoftToggleTrigger: Story = {
+  render: (args) => ({
+    components: {
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuItem,
+      UiDropdownMenuSeparator,
+      UiToggle,
+      UiIcon,
+    },
+    setup() {
+      const open = ref(args.open);
+      const modal = ref(args.modal);
+      const activeFilter = ref('');
+      const hasFilter = computed(() => !!activeFilter.value);
+      const toggleVariant = computed(() => {
+        if (open.value) return 'soft';
+        if (hasFilter.value) return 'outline';
+        return 'default';
+      });
+      const toggleActive = computed({
+        get: () => open.value,
+        set: (value: boolean) => {
+          open.value = value;
+        },
+      });
+      watch(
+        () => args.open,
+        (v) => {
+          open.value = v;
+        },
+      );
+      watch(
+        () => args.modal,
+        (v) => {
+          modal.value = v;
+        },
+      );
+      return { open, modal, activeFilter, hasFilter, toggleVariant, toggleActive };
+    },
+    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
+      <UiDropdownMenuTrigger as-child>
+        <UiToggle v-model="toggleActive" :variant="toggleVariant" aria-label="Filter options">
+          <UiIcon name="filter" />
+        </UiToggle>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent>
+        <UiDropdownMenuItem @select="activeFilter = 'name'">By Name</UiDropdownMenuItem>
+        <UiDropdownMenuItem @select="activeFilter = 'date'">By Date</UiDropdownMenuItem>
+        <UiDropdownMenuItem @select="activeFilter = 'size'">By Size</UiDropdownMenuItem>
+        <UiDropdownMenuSeparator />
+        <UiDropdownMenuItem @select="activeFilter = ''">Clear Filters</UiDropdownMenuItem>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: softToggleTriggerTemplateSource,
+      },
+    },
+  },
+};
+
+const softToggleTriggerWithTextTemplateSource = `<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuLabel,
+  UiDropdownMenuSeparator,
+  UiDropdownMenuCheckboxItem,
+  UiToggle,
+  UiIcon,
+} from '@aleph-alpha/ui-library'
+
+const open = ref(false)
+const showPreview = ref(false)
+const showMetadata = ref(false)
+const showTimestamps = ref(false)
+const hasSelection = computed(() => showPreview.value || showMetadata.value || showTimestamps.value)
+const toggleVariant = computed(() => {
+  if (open.value) return 'soft'
+  if (hasSelection.value) return 'outline'
+  return 'default'
+})
+const toggleActive = computed({
+  get: () => open.value,
+  set: () => {},
+})
+</script>
+
+<template>
+  <UiDropdownMenu v-model:open="open">
+    <UiDropdownMenuTrigger as-child>
+      <UiToggle v-model="toggleActive" :variant="toggleVariant" aria-label="View settings">
+        <UiIcon name="settings" />
+        View
+        <UiIcon name="chevron-down" class="size-3" />
+      </UiToggle>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent class="w-48">
+      <UiDropdownMenuLabel>Display Options</UiDropdownMenuLabel>
+      <UiDropdownMenuSeparator />
+      <UiDropdownMenuCheckboxItem v-model:checked="showPreview">
+        Show Preview
+      </UiDropdownMenuCheckboxItem>
+      <UiDropdownMenuCheckboxItem v-model:checked="showMetadata">
+        Show Metadata
+      </UiDropdownMenuCheckboxItem>
+      <UiDropdownMenuCheckboxItem v-model:checked="showTimestamps">
+        Show Timestamps
+      </UiDropdownMenuCheckboxItem>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+</template>`;
+
+/**
+ * Dropdown menu with a toggle trigger that switches to outline variant
+ * when any checkbox option is selected. Unchecking all reverts to default.
+ */
+export const WithSoftToggleTriggerAndText: Story = {
+  render: (args) => ({
+    components: {
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuLabel,
+      UiDropdownMenuSeparator,
+      UiDropdownMenuCheckboxItem,
+      UiToggle,
+      UiIcon,
+    },
+    setup() {
+      const open = ref(args.open);
+      const modal = ref(args.modal);
+      const showPreview = ref(false);
+      const showMetadata = ref(false);
+      const showTimestamps = ref(false);
+      const hasSelection = computed(
+        () => showPreview.value || showMetadata.value || showTimestamps.value,
+      );
+      const toggleVariant = computed(() => {
+        if (open.value) return 'soft';
+        if (hasSelection.value) return 'outline';
+        return 'default';
+      });
+      const toggleActive = computed({
+        get: () => open.value,
+        set: (value: boolean) => {
+          open.value = value;
+        },
+      });
+      watch(
+        () => args.open,
+        (v) => {
+          open.value = v;
+        },
+      );
+      watch(
+        () => args.modal,
+        (v) => {
+          modal.value = v;
+        },
+      );
+      return {
+        open,
+        modal,
+        showPreview,
+        showMetadata,
+        showTimestamps,
+        hasSelection,
+        toggleVariant,
+        toggleActive,
+      };
+    },
+    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
+      <UiDropdownMenuTrigger as-child>
+        <UiToggle v-model="toggleActive" :variant="toggleVariant" aria-label="View settings">
+          <UiIcon name="settings" />
+          View
+          <UiIcon name="chevron-down" class="size-3" />
+        </UiToggle>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent class="w-48">
+        <UiDropdownMenuLabel>Display Options</UiDropdownMenuLabel>
+        <UiDropdownMenuSeparator />
+        <UiDropdownMenuCheckboxItem v-model:checked="showPreview">
+          Show Preview
+        </UiDropdownMenuCheckboxItem>
+        <UiDropdownMenuCheckboxItem v-model:checked="showMetadata">
+          Show Metadata
+        </UiDropdownMenuCheckboxItem>
+        <UiDropdownMenuCheckboxItem v-model:checked="showTimestamps">
+          Show Timestamps
+        </UiDropdownMenuCheckboxItem>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: softToggleTriggerWithTextTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiDropdownMenu/UiDropdownMenuRadioGroup.vue

@@ -13,7 +13,7 @@
 <template>
   <ShadcnDropdownMenuRadioGroup
     :model-value="props.modelValue"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:model-value="emit('update:modelValue', $event as string)"
   >
     <slot />
   </ShadcnDropdownMenuRadioGroup>