From ced66c5807575cd29f6aa5632e8ad02b38c8448a Mon Sep 17 00:00:00 2001
From: ivar <i@oiee.no>
Date: Sun, 28 Apr 2024 22:37:30 +0200
Subject: WIP new frontend

---
 .../dropdown-menu-checkbox-item.svelte             | 35 ++++++++++++++++
 .../ui/dropdown-menu/dropdown-menu-content.svelte  | 26 ++++++++++++
 .../ui/dropdown-menu/dropdown-menu-item.svelte     | 31 ++++++++++++++
 .../ui/dropdown-menu/dropdown-menu-label.svelte    | 19 +++++++++
 .../dropdown-menu/dropdown-menu-radio-group.svelte | 11 +++++
 .../dropdown-menu/dropdown-menu-radio-item.svelte  | 35 ++++++++++++++++
 .../dropdown-menu/dropdown-menu-separator.svelte   | 11 +++++
 .../ui/dropdown-menu/dropdown-menu-shortcut.svelte | 13 ++++++
 .../dropdown-menu/dropdown-menu-sub-content.svelte | 29 +++++++++++++
 .../dropdown-menu/dropdown-menu-sub-trigger.svelte | 32 +++++++++++++++
 .../src/components/ui/dropdown-menu/index.ts       | 48 ++++++++++++++++++++++
 11 files changed, 290 insertions(+)
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 code/frontend/src/components/ui/dropdown-menu/index.ts

(limited to 'code/frontend/src/components/ui/dropdown-menu')

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>
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-content.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..a2b8da7
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+	import { cn, flyAndScale } from '$utils/ui'
+
+	type $$Props = DropdownMenuPrimitive.ContentProps
+
+	let className: $$Props['class'] = undefined
+	export let sideOffset: $$Props['sideOffset'] = 4
+	export let transition: $$Props['transition'] = flyAndScale
+	export let transitionConfig: $$Props['transitionConfig'] = undefined
+	export { className as class }
+</script>
+
+<DropdownMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</DropdownMenuPrimitive.Content>
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-item.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..ed45da7
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+	import { cn } from '$utils/ui'
+
+	type $$Props = DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean
+	}
+	type $$Events = DropdownMenuPrimitive.ItemEvents
+
+	let className: $$Props['class'] = undefined
+	export let inset: $$Props['inset'] = undefined
+	export { className as class }
+</script>
+
+<DropdownMenuPrimitive.Item
+	class={cn(
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		inset && 'pl-8',
+		className
+	)}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Item>
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-label.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..69fddd1
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+	import { cn } from '$utils/ui'
+
+	type $$Props = DropdownMenuPrimitive.LabelProps & {
+		inset?: boolean
+	}
+
+	let className: $$Props['class'] = undefined
+	export let inset: $$Props['inset'] = undefined
+	export { className as class }
+</script>
+
+<DropdownMenuPrimitive.Label
+	class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Label>
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..c07bd1a
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+
+	type $$Props = DropdownMenuPrimitive.RadioGroupProps
+
+	export let value: $$Props['value'] = undefined
+</script>
+
+<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</DropdownMenuPrimitive.RadioGroup>
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..c754953
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+	import DotFilled from 'svelte-radix/DotFilled.svelte'
+	import { cn } from '$utils/ui'
+
+	type $$Props = DropdownMenuPrimitive.RadioItemProps
+	type $$Events = DropdownMenuPrimitive.RadioItemEvents
+
+	let className: $$Props['class'] = undefined
+	export let value: DropdownMenuPrimitive.RadioItemProps['value']
+	export { className as class }
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	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
+	)}
+	{value}
+	{...$$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.RadioIndicator>
+			<DotFilled class="h-4 w-4 fill-current" />
+		</DropdownMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.RadioItem>
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..b6c5798
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+	import { cn } from '$utils/ui'
+
+	type $$Props = DropdownMenuPrimitive.SeparatorProps
+
+	let className: $$Props['class'] = undefined
+	export { className as class }
+</script>
+
+<DropdownMenuPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..f9e5953
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements'
+	import { cn } from '$utils/ui'
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>
+
+	let className: $$Props['class'] = undefined
+	export { className as class }
+</script>
+
+<span class={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...$$restProps}>
+	<slot />
+</span>
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..7c00a1b
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+	import { cn, flyAndScale } from '$utils/ui'
+
+	type $$Props = DropdownMenuPrimitive.SubContentProps
+
+	let className: $$Props['class'] = undefined
+	export let transition: $$Props['transition'] = flyAndScale
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		x: -10,
+		y: 0
+	}
+	export { className as class }
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</DropdownMenuPrimitive.SubContent>
diff --git a/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..4967d2b
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+	import ChevronRight from 'svelte-radix/ChevronRight.svelte'
+	import { cn } from '$utils/ui'
+
+	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean
+	}
+	type $$Events = DropdownMenuPrimitive.SubTriggerEvents
+
+	let className: $$Props['class'] = undefined
+	export let inset: $$Props['inset'] = undefined
+	export { className as class }
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	class={cn(
+		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
+		inset && 'pl-8',
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/code/frontend/src/components/ui/dropdown-menu/index.ts b/code/frontend/src/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..df959fa
--- /dev/null
+++ b/code/frontend/src/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,48 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+import Item from './dropdown-menu-item.svelte'
+import Label from './dropdown-menu-label.svelte'
+import Content from './dropdown-menu-content.svelte'
+import Shortcut from './dropdown-menu-shortcut.svelte'
+import RadioItem from './dropdown-menu-radio-item.svelte'
+import Separator from './dropdown-menu-separator.svelte'
+import RadioGroup from './dropdown-menu-radio-group.svelte'
+import SubContent from './dropdown-menu-sub-content.svelte'
+import SubTrigger from './dropdown-menu-sub-trigger.svelte'
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte'
+
+const Sub = DropdownMenuPrimitive.Sub
+const Root = DropdownMenuPrimitive.Root
+const Trigger = DropdownMenuPrimitive.Trigger
+const Group = DropdownMenuPrimitive.Group
+
+export {
+	Sub,
+	Root,
+	Item,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as DropdownMenu,
+	Sub as DropdownMenuSub,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	Group as DropdownMenuGroup,
+	Content as DropdownMenuContent,
+	Trigger as DropdownMenuTrigger,
+	Shortcut as DropdownMenuShortcut,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	RadioGroup as DropdownMenuRadioGroup,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	CheckboxItem as DropdownMenuCheckboxItem
+}
-- 
cgit v1.3