TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update select component + remove custom icon for select component

Browse Source
main
TZGyn 1 year ago
parent e35b9c2e25
commit 9363f9bd7e
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
10 changed files with 81 additions and 82 deletions
Show Stats Download Patch File Download Diff File

BIN
frontend/bun.lockb
View File

Binary file not shown.

4
frontend/package.json
Unescape Escape View File

@ -44,13 +44,13 @@
"@prgm/sveltekit-progress-bar": "^2.0.0",
"@types/he": "^1.2.3",
"apexcharts": "^3.44.0",
"bits-ui": "^0.21.4",
"bits-ui": "^0.21.12",
"clsx": "^2.0.0",
"cmdk-sv": "^0.0.13",
"drizzle-orm": "latest",
"formsnap": "^1.0.0",
"he": "^1.2.0",
"lucide-svelte": "^0.356.0",
"lucide-svelte": "^0.412.0",
"magic-regexp": "^0.8.0",
"mode-watcher": "^0.1.2",
"nanoid": "^5.0.3",

23
frontend/src/lib/components/ui/select/index.ts
Unescape Escape View File

@ -1,15 +1,16 @@
import { Select as SelectPrimitive } from 'bits-ui'
import { Select as SelectPrimitive } from "bits-ui";
import Root from './select.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'
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;
const Input = SelectPrimitive.Input;
const Value = SelectPrimitive.Value;
const Group = SelectPrimitive.Group
const Input = SelectPrimitive.Input
const Value = SelectPrimitive.Value
export {
Root,
Group,
@ -30,4 +31,4 @@ export {
Content as SelectContent,
Trigger as SelectTrigger,
Separator as SelectSeparator,
}
};

35
frontend/src/lib/components/ui/select/select-content.svelte
Unescape Escape View File

@ -1,22 +1,23 @@
<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 { scale } from "svelte/transition";
import { cn, flyAndScale } from "$lib/utils.js";
type $$Props = SelectPrimitive.ContentProps
type $$Events = SelectPrimitive.ContentEvents
export let inTransition: $$Props['inTransition'] = flyAndScale
export let inTransitionConfig: $$Props['inTransitionConfig'] =
undefined
export let outTransition: $$Props['outTransition'] = scale
export let outTransitionConfig: $$Props['outTransitionConfig'] = {
type $$Props = SelectPrimitive.ContentProps;
type $$Events = SelectPrimitive.ContentEvents;
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,
}
};
let className: $$Props['class'] = undefined
export { className as class }
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<SelectPrimitive.Content
@ -24,12 +25,14 @@
{inTransitionConfig}
{outTransition}
{outTransitionConfig}
{sideOffset}
class={cn(
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
className,
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
className
)}
{...$$restProps}
on:keydown>
on:keydown
>
<div class="w-full p-1">
<slot />
</div>

34
frontend/src/lib/components/ui/select/select-item.svelte
Unescape Escape View File

@ -1,16 +1,16 @@
<script lang="ts">
import { cn } from '$lib/utils'
import { Select as SelectPrimitive } from 'bits-ui'
import { Check } from 'lucide-svelte'
import Check from "lucide-svelte/icons/check";
import { Select as SelectPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SelectPrimitive.ItemProps
type $$Events = SelectPrimitive.ItemEvents
type $$Props = SelectPrimitive.ItemProps;
type $$Events = SelectPrimitive.ItemEvents;
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 }
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>
<SelectPrimitive.Item
@ -18,8 +18,8 @@
{disabled}
{label}
class={cn(
'relative flex w-full 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,
"relative flex w-full 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
@ -27,12 +27,14 @@
on:focusin
on:focusout
on:pointerleave
on:pointermove>
<span
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check class="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<slot />
<slot>
{label || value}
</slot>
</SelectPrimitive.Item>

15
frontend/src/lib/components/ui/select/select-label.svelte
Unescape Escape View File

@ -1,15 +1,16 @@
<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.js";
type $$Props = SelectPrimitive.LabelProps
type $$Props = SelectPrimitive.LabelProps;
let className: $$Props['class'] = undefined
export { className as class }
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<SelectPrimitive.Label
class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
{...$$restProps}>
class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...$$restProps}
>
<slot />
</SelectPrimitive.Label>

14
frontend/src/lib/components/ui/select/select-separator.svelte
Unescape Escape View File

@ -1,13 +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.js";
type $$Props = SelectPrimitive.SeparatorProps
type $$Props = SelectPrimitive.SeparatorProps;
let className: $$Props['class'] = undefined
export { className as class }
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} />

30
frontend/src/lib/components/ui/select/select-trigger.svelte
Unescape Escape View File

@ -1,33 +1,27 @@
<script lang="ts">
import { Select as SelectPrimitive } from 'bits-ui'
import { ChevronDown } from 'lucide-svelte'
import { cn } from '$lib/utils'
import { Select as SelectPrimitive } from "bits-ui";
import ChevronDown from "lucide-svelte/icons/chevron-down";
import { cn } from "$lib/utils.js";
type $$Props = SelectPrimitive.TriggerProps
type $$Events = SelectPrimitive.TriggerEvents
type $$Props = SelectPrimitive.TriggerProps;
type $$Events = SelectPrimitive.TriggerEvents;
let className: $$Props['class'] = undefined
export let customIcon: any
export { className as class }
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<SelectPrimitive.Trigger
class={cn(
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground",
className
)}
{...$$restProps}
let:builder
on:click
on:keydown>
on:keydown
>
<slot {builder} />
<div>
{#if customIcon}
<svelte:component
this={customIcon}
class="h-4 w-4 opacity-50" />
{:else}
<ChevronDown class="h-4 w-4 opacity-50" />
{/if}
<ChevronDown class="h-4 w-4 opacity-50" />
</div>
</SelectPrimitive.Trigger>

4
frontend/src/routes/(app)/links/+page.svelte
Unescape Escape View File

@ -93,7 +93,7 @@
<Drawer.Footer class="gap-6">
<Select.Root
selected={{ label: data.sortBy, value: data.sortBy }}>
<Select.Trigger customIcon={SortDescIcon}>
<Select.Trigger>
<Select.Value placeholder="Sort By" />
</Select.Trigger>
<Select.Content>
@ -283,7 +283,7 @@
</Popover.Root>
<Select.Root
selected={{ label: data.sortBy, value: data.sortBy }}>
<Select.Trigger class="w-[180px]" customIcon={SortDescIcon}>
<Select.Trigger class="w-[180px]">
<Select.Value placeholder="Sort By" />
</Select.Trigger>
<Select.Content>

4
frontend/src/routes/(app)/projects/[id]/+page.svelte
Unescape Escape View File

@ -77,7 +77,7 @@
<Drawer.Footer class="gap-6">
<Select.Root
selected={{ label: data.sortBy, value: data.sortBy }}>
<Select.Trigger customIcon={SortDescIcon}>
<Select.Trigger>
<Select.Value placeholder="Sort By" />
</Select.Trigger>
<Select.Content>
@ -124,7 +124,7 @@
<div class="hidden items-center gap-4 md:flex">
<Select.Root
selected={{ label: data.sortBy, value: data.sortBy }}>
<Select.Trigger class="w-[180px]" customIcon={SortDescIcon}>
<Select.Trigger class="w-[180px]">
<Select.Value placeholder="Sort By" />
</Select.Trigger>
<Select.Content>

Write Preview
Loading…
Cancel
Save