@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/src/primitives/UiDropdownMenu/UiDropdownMenu.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { DropdownMenu as ShadcnDropdownMenu } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuProps, UiDropdownMenuEmits } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenu',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuProps>(), {
+    open: undefined,
+    modal: true,
+  });
+
+  const emit = defineEmits<UiDropdownMenuEmits>();
+</script>
+
+<template>
+  <ShadcnDropdownMenu
+    :open="props.open"
+    :modal="props.modal"
+    @update:open="emit('update:open', $event)"
+  >
+    <slot />
+  </ShadcnDropdownMenu>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuCheckboxItem.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { DropdownMenuCheckboxItem as ShadcnDropdownMenuCheckboxItem } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuCheckboxItemProps } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuCheckboxItem',
+  });
+
+  const props = defineProps<UiDropdownMenuCheckboxItemProps>();
+
+  // Use 'checked' as our public API, map to 'modelValue' internally
+  const emit = defineEmits<{
+    'update:checked': [value: boolean];
+  }>();
+</script>
+
+<template>
+  <ShadcnDropdownMenuCheckboxItem
+    :model-value="props.checked"
+    :disabled="props.disabled"
+    :text-value="props.textValue"
+    @update:model-value="emit('update:checked', $event)"
+  >
+    <template v-if="$slots['indicator-icon']" #indicator-icon>
+      <slot name="indicator-icon" />
+    </template>
+    <slot />
+  </ShadcnDropdownMenuCheckboxItem>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { DropdownMenuContent as ShadcnDropdownMenuContent } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuContentProps, UiDropdownMenuContentEmits } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuContent',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuContentProps>(), {
+    side: 'bottom',
+    sideOffset: 4,
+    align: 'start',
+  });
+
+  const emit = defineEmits<UiDropdownMenuContentEmits>();
+</script>
+
+<template>
+  <ShadcnDropdownMenuContent
+    :side="props.side"
+    :side-offset="props.sideOffset"
+    :align="props.align"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+  >
+    <slot />
+  </ShadcnDropdownMenuContent>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuGroup.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { DropdownMenuGroup as ShadcnDropdownMenuGroup } from '@/primitives/shadcn/dropdown-menu';
+
+  defineOptions({
+    name: 'UiDropdownMenuGroup',
+  });
+</script>
+
+<template>
+  <ShadcnDropdownMenuGroup>
+    <slot />
+  </ShadcnDropdownMenuGroup>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import { DropdownMenuItem as ShadcnDropdownMenuItem } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuItemProps } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuItem',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuItemProps>(), {
+    variant: 'default',
+    disabled: false,
+    inset: false,
+    textValue: undefined,
+  });
+</script>
+
+<template>
+  <ShadcnDropdownMenuItem
+    :disabled="props.disabled"
+    :text-value="props.textValue"
+    :variant="props.variant"
+    :inset="props.inset"
+  >
+    <slot />
+  </ShadcnDropdownMenuItem>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuLabel.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { DropdownMenuLabel as ShadcnDropdownMenuLabel } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuLabelProps } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuLabel',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuLabelProps>(), {
+    inset: false,
+  });
+</script>
+
+<template>
+  <ShadcnDropdownMenuLabel :inset="props.inset">
+    <slot />
+  </ShadcnDropdownMenuLabel>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuRadioGroup.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { DropdownMenuRadioGroup as ShadcnDropdownMenuRadioGroup } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuRadioGroupProps, UiDropdownMenuRadioGroupEmits } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuRadioGroup',
+  });
+
+  const props = defineProps<UiDropdownMenuRadioGroupProps>();
+  const emit = defineEmits<UiDropdownMenuRadioGroupEmits>();
+</script>
+
+<template>
+  <ShadcnDropdownMenuRadioGroup
+    :model-value="props.modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <slot />
+  </ShadcnDropdownMenuRadioGroup>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuRadioItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import { DropdownMenuRadioItem as ShadcnDropdownMenuRadioItem } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuRadioItemProps } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuRadioItem',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuRadioItemProps>(), {
+    disabled: false,
+    textValue: undefined,
+  });
+</script>
+
+<template>
+  <ShadcnDropdownMenuRadioItem
+    :value="props.value"
+    :disabled="props.disabled"
+    :text-value="props.textValue"
+  >
+    <template v-if="$slots['indicator-icon']" #indicator-icon>
+      <slot name="indicator-icon" />
+    </template>
+    <slot />
+  </ShadcnDropdownMenuRadioItem>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuSeparator.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+  import { DropdownMenuSeparator as ShadcnDropdownMenuSeparator } from '@/primitives/shadcn/dropdown-menu';
+
+  defineOptions({
+    name: 'UiDropdownMenuSeparator',
+  });
+</script>
+
+<template>
+  <ShadcnDropdownMenuSeparator />
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuShortcut.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { DropdownMenuShortcut as ShadcnDropdownMenuShortcut } from '@/primitives/shadcn/dropdown-menu';
+
+  defineOptions({
+    name: 'UiDropdownMenuShortcut',
+  });
+</script>
+
+<template>
+  <ShadcnDropdownMenuShortcut>
+    <slot />
+  </ShadcnDropdownMenuShortcut>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuSub.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import { DropdownMenuSub as ShadcnDropdownMenuSub } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuSubProps, UiDropdownMenuSubEmits } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuSub',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuSubProps>(), {
+    open: undefined,
+    defaultOpen: false,
+  });
+
+  const emit = defineEmits<UiDropdownMenuSubEmits>();
+</script>
+
+<template>
+  <ShadcnDropdownMenuSub
+    #default="slotProps"
+    :open="props.open"
+    :default-open="props.defaultOpen"
+    @update:open="emit('update:open', $event)"
+  >
+    <slot v-bind="slotProps" />
+  </ShadcnDropdownMenuSub>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuSubContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { DropdownMenuSubContent as ShadcnDropdownMenuSubContent } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuSubContentProps, UiDropdownMenuSubContentEmits } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuSubContent',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuSubContentProps>(), {
+    sideOffset: 0,
+  });
+
+  const emit = defineEmits<UiDropdownMenuSubContentEmits>();
+</script>
+
+<template>
+  <ShadcnDropdownMenuSubContent
+    :side-offset="props.sideOffset"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+  >
+    <slot />
+  </ShadcnDropdownMenuSubContent>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuSubTrigger.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { DropdownMenuSubTrigger as ShadcnDropdownMenuSubTrigger } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuSubTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuSubTrigger',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuSubTriggerProps>(), {
+    disabled: false,
+    inset: false,
+    textValue: undefined,
+  });
+</script>
+
+<template>
+  <ShadcnDropdownMenuSubTrigger
+    :disabled="props.disabled"
+    :text-value="props.textValue"
+    :inset="props.inset"
+  >
+    <slot />
+  </ShadcnDropdownMenuSubTrigger>
+</template>

package/src/primitives/UiDropdownMenu/UiDropdownMenuTrigger.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { DropdownMenuTrigger as ShadcnDropdownMenuTrigger } from '@/primitives/shadcn/dropdown-menu';
+  import type { UiDropdownMenuTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiDropdownMenuTrigger',
+  });
+
+  const props = withDefaults(defineProps<UiDropdownMenuTriggerProps>(), {
+    ariaLabel: undefined,
+    disabled: false,
+    asChild: false,
+  });
+</script>
+
+<template>
+  <ShadcnDropdownMenuTrigger
+    :disabled="props.disabled"
+    :as-child="props.asChild"
+    :aria-label="props.ariaLabel"
+  >
+    <slot />
+  </ShadcnDropdownMenuTrigger>
+</template>