blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-07-06 22:15:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: identity menu

Browse source
This commit is contained in:
Shibo Lyu 2024-09-03 01:58:04 +08:00
parent 3a76e2f9f8
commit 09b7d24b95
10 changed files with 83 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/DropdownMenu.ts
View file

@ -3,7 +3,9 @@ import { DropdownMenu } from 'bits-ui';
import Content from './DropdownMenu/Content.svelte';
import Trigger from './DropdownMenu/Trigger.svelte';
import Item from './DropdownMenu/Item.svelte';
import RadioItem from './DropdownMenu/RadioItem.svelte';
import Separator from './DropdownMenu/Separator.svelte';
const { Root, RadioGroup, RadioItem, Separator } = DropdownMenu;
const { Root, RadioGroup } = DropdownMenu;
export { Root, Trigger, Content, Item, RadioGroup, RadioItem, Separator };

12
src/lib/components/DropdownMenu/Content.svelte
View file

@ -1,12 +1,22 @@
<script lang="ts">
import { tw } from '$lib/tw';
import { DropdownMenu, type DropdownMenuContentProps } from 'bits-ui';
import { expoOut } from 'svelte/easing';
import { scale } from 'svelte/transition';
interface $$Props extends DropdownMenuContentProps {}
let className: $$Props['class'] = '';
export { className as class };
</script>
<DropdownMenu.Content
class="bg-sb-overlay min-w-32 rounded-lg border border-ss-secondary p-1 shadow-xl"
class={tw(
'bg-sb-overlay group min-w-32 origin-top rounded-lg border border-ss-secondary p-1 shadow-xl',
className
)}
sideOffset={4}
transition={scale}
transitionConfig={{ start: 0.96, duration: 300, easing: expoOut }}
{...$$restProps}
>
<slot />

2
src/lib/components/DropdownMenu/Item.svelte
View file

@ -5,7 +5,7 @@
</script>
<DropdownMenu.Item
class="cursor-default rounded px-1.5 py-0.5 text-sf-primary transition-colors duration-200 hover:bg-accent-50 dark:hover:bg-white/5"
class="cursor-default rounded px-1.5 py-0.5 text-sf-primary transition-colors duration-200 hover:bg-accent-50 group-has-[[data-melt-dropdown-menu-radio-group]]:ps-6 dark:hover:bg-white/5"
on:click
{...$$restProps}
>

19
src/lib/components/DropdownMenu/RadioItem.svelte Normal file
View file

@ -0,0 +1,19 @@
<script lang="ts">
import type { DropdownMenuRadioItemProps } from 'bits-ui';
import { DropdownMenu } from 'bits-ui';
import { Check, Icon } from 'svelte-hero-icons';
type $$Props = DropdownMenuRadioItemProps;
export let value: string;
</script>
<DropdownMenu.RadioItem
class="flex cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sf-primary transition-colors duration-200 hover:bg-accent-50 dark:hover:bg-white/5"
{value}
{...$$props}
>
<DropdownMenu.RadioIndicator class="relative size-4">
<Icon src={Check} class="size-full" micro />
</DropdownMenu.RadioIndicator>
<slot />
</DropdownMenu.RadioItem>

5
src/lib/components/DropdownMenu/Separator.svelte Normal file
View file

@ -0,0 +1,5 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
</script>
<DropdownMenu.Separator class="my-1 border-t border-ss-secondary" />