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", "@prgm/sveltekit-progress-bar": "^2.0.0",
"@types/he": "^1.2.3", "@types/he": "^1.2.3",
"apexcharts": "^3.44.0", "apexcharts": "^3.44.0",
"bits-ui": "^0.21.4", "bits-ui": "^0.21.12",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"cmdk-sv": "^0.0.13", "cmdk-sv": "^0.0.13",
"drizzle-orm": "latest", "drizzle-orm": "latest",
"formsnap": "^1.0.0", "formsnap": "^1.0.0",
"he": "^1.2.0", "he": "^1.2.0",
"lucide-svelte": "^0.356.0", "lucide-svelte": "^0.412.0",
"magic-regexp": "^0.8.0", "magic-regexp": "^0.8.0",
"mode-watcher": "^0.1.2", "mode-watcher": "^0.1.2",
"nanoid": "^5.0.3", "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 Label from './select-label.svelte' import Item from "./select-item.svelte";
import Item from './select-item.svelte' import Content from "./select-content.svelte";
import Content from './select-content.svelte' import Trigger from "./select-trigger.svelte";
import Trigger from './select-trigger.svelte' import Separator from "./select-separator.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 { export {
Root, Root,
Group, Group,
@ -30,4 +31,4 @@ export {
Content as SelectContent, Content as SelectContent,
Trigger as SelectTrigger, Trigger as SelectTrigger,
Separator as SelectSeparator, Separator as SelectSeparator,
} };

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

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

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

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

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

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

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

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

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

@ -1,33 +1,27 @@
<script lang="ts"> <script lang="ts">
import { Select as SelectPrimitive } from 'bits-ui' import { Select as SelectPrimitive } from "bits-ui";
import { ChevronDown } from 'lucide-svelte' import ChevronDown from "lucide-svelte/icons/chevron-down";
import { cn } from '$lib/utils' import { cn } from "$lib/utils.js";
type $$Props = SelectPrimitive.TriggerProps type $$Props = SelectPrimitive.TriggerProps;
type $$Events = SelectPrimitive.TriggerEvents type $$Events = SelectPrimitive.TriggerEvents;
let className: $$Props['class'] = undefined let className: $$Props["class"] = undefined;
export let customIcon: any export { className as class };
export { className as class }
</script> </script>
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
class={cn( 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', "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, className
)} )}
{...$$restProps} {...$$restProps}
let:builder let:builder
on:click on:click
on:keydown> on:keydown
>
<slot {builder} /> <slot {builder} />
<div> <div>
{#if customIcon}
<svelte:component
this={customIcon}
class="h-4 w-4 opacity-50" />
{:else}
<ChevronDown class="h-4 w-4 opacity-50" /> <ChevronDown class="h-4 w-4 opacity-50" />
{/if}
</div> </div>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>

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

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

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

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

Write Preview
Loading…
Cancel
Save