feat: added particle and reformatting

This commit is contained in:
Bart van der Braak 2024-02-02 01:08:13 +01:00
parent 5158767019
commit 32b6bf7582
147 changed files with 1186 additions and 922 deletions

View file

@ -1,10 +1,10 @@
import { Select as SelectPrimitive } from "bits-ui";
import { Select as SelectPrimitive } from 'bits-ui';
import Label from "./select-label.svelte";
import Item from "./select-item.svelte";
import Content from "./select-content.svelte";
import Trigger from "./select-trigger.svelte";
import Separator from "./select-separator.svelte";
import Label from './select-label.svelte';
import Item from './select-item.svelte';
import Content from './select-content.svelte';
import Trigger from './select-trigger.svelte';
import Separator from './select-separator.svelte';
const Root = SelectPrimitive.Root;
const Group = SelectPrimitive.Group;

View file

@ -1,16 +1,16 @@
<script lang="ts">
import { Select as SelectPrimitive } from "bits-ui";
import { cn, flyAndScale } from "$lib/utils";
import { scale } from "svelte/transition";
import { Select as SelectPrimitive } from 'bits-ui';
import { cn, flyAndScale } from '$lib/utils';
import { scale } from 'svelte/transition';
type $$Props = SelectPrimitive.ContentProps;
let className: $$Props["class"] = undefined;
export let sideOffset: $$Props["sideOffset"] = 4;
export let inTransition: $$Props["inTransition"] = flyAndScale;
export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
export let outTransition: $$Props["outTransition"] = scale;
export let outTransitionConfig: $$Props["outTransitionConfig"] = {
let className: $$Props['class'] = undefined;
export let sideOffset: $$Props['sideOffset'] = 4;
export let inTransition: $$Props['inTransition'] = flyAndScale;
export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
export let outTransition: $$Props['outTransition'] = scale;
export let outTransitionConfig: $$Props['outTransitionConfig'] = {
start: 0.95,
opacity: 0,
duration: 50
@ -25,7 +25,7 @@
{outTransitionConfig}
{sideOffset}
class={cn(
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none",
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none',
className
)}
{...$$restProps}

View file

@ -1,15 +1,15 @@
<script lang="ts">
import { cn } from "$lib/utils";
import { Select as SelectPrimitive } from "bits-ui";
import { Check } from "radix-icons-svelte";
import { cn } from '$lib/utils';
import { Select as SelectPrimitive } from 'bits-ui';
import { Check } from 'radix-icons-svelte';
type $$Props = SelectPrimitive.ItemProps;
type $$Events = Required<SelectPrimitive.ItemEvents>;
let className: $$Props["class"] = undefined;
export let value: $$Props["value"];
export let label: $$Props["label"] = undefined;
export let disabled: $$Props["disabled"] = undefined;
let className: $$Props['class'] = undefined;
export let value: $$Props['value'];
export let label: $$Props['label'] = undefined;
export let disabled: $$Props['disabled'] = undefined;
export { className as class };
</script>
@ -18,7 +18,7 @@
{disabled}
{label}
class={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
className
)}
{...$$restProps}

View file

@ -1,13 +1,13 @@
<script lang="ts">
import { Select as SelectPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Select as SelectPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = SelectPrimitive.LabelProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<SelectPrimitive.Label class={cn("px-2 py-1.5 text-sm font-semibold", className)} {...$$restProps}>
<SelectPrimitive.Label class={cn('px-2 py-1.5 text-sm font-semibold', className)} {...$$restProps}>
<slot />
</SelectPrimitive.Label>

View file

@ -1,11 +1,11 @@
<script lang="ts">
import { Select as SelectPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Select as SelectPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = SelectPrimitive.SeparatorProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />

View file

@ -12,7 +12,7 @@
<SelectPrimitive.Trigger
class={cn(
'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring line-clamp-1 flex h-9 w-full items-center justify-between truncate rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
'line-clamp-1 flex h-9 w-full items-center justify-between truncate rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
className
)}
{...$$restProps}