diff options
Diffstat (limited to 'code/frontend/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte')
| -rw-r--r-- | code/frontend/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte new file mode 100644 index 0000000..ea02af0 --- /dev/null +++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte @@ -0,0 +1,35 @@ +<script lang="ts"> + import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui' + import Check from 'svelte-radix/Check.svelte' + import { cn } from '$utils/ui' + + type $$Props = DropdownMenuPrimitive.CheckboxItemProps + type $$Events = DropdownMenuPrimitive.CheckboxItemEvents + + let className: $$Props['class'] = undefined + export let checked: $$Props['checked'] = undefined + export { className as class } +</script> + +<DropdownMenuPrimitive.CheckboxItem + bind:checked + class={cn( + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50', + className + )} + {...$$restProps} + on:click + on:keydown + on:focusin + on:focusout + on:pointerdown + on:pointerleave + on:pointermove +> + <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <DropdownMenuPrimitive.CheckboxIndicator> + <Check class="h-4 w-4" /> + </DropdownMenuPrimitive.CheckboxIndicator> + </span> + <slot /> +</DropdownMenuPrimitive.CheckboxItem> |