squid/blog
squid/blog
1
2
Fork 0
Code Issues 7 Pull Requests Actions Projects 1 Releases 7 Wiki Activity

style: pnpm format
All checks were successful
Frontend CI / build (push) Successful in 1m39s
Details

Browse Source
This commit is contained in:
SquidSpirit 2025-10-14 00:01:25 +08:00
parent 731b8e5d8b
commit 2fcb502527
14 changed files with 52 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/common/framework/components/ui/dialog/dialog-close.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props(); let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
</script> </script>

14
frontend/src/lib/common/framework/components/ui/dialog/dialog-content.svelte
View File

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
import XIcon from "@lucide/svelte/icons/x"; import XIcon from '@lucide/svelte/icons/x';
import type { Snippet } from "svelte"; import type { Snippet } from 'svelte';
import * as Dialog from "./index.js"; import * as Dialog from './index.js';
import { cn, type WithoutChildrenOrChild } from "$lib/common/framework/components/utils.js"; import { cn, type WithoutChildrenOrChild } from '$lib/common/framework/components/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -25,7 +25,7 @@
bind:ref bind:ref
data-slot="dialog-content" data-slot="dialog-content"
class={cn( class={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", 'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
className className
)} )}
{...restProps} {...restProps}
@ -33,7 +33,7 @@
{@render children?.()} {@render children?.()}
{#if showCloseButton} {#if showCloseButton}
<DialogPrimitive.Close <DialogPrimitive.Close
class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0" class="absolute end-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
> >
<XIcon /> <XIcon />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>

6
frontend/src/lib/common/framework/components/ui/dialog/dialog-description.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
import { cn } from "$lib/common/framework/components/utils.js"; import { cn } from '$lib/common/framework/components/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,6 +12,6 @@
<DialogPrimitive.Description <DialogPrimitive.Description
bind:ref bind:ref
data-slot="dialog-description" data-slot="dialog-description"
class={cn("text-muted-foreground text-sm", className)} class={cn('text-sm text-muted-foreground', className)}
{...restProps} {...restProps}
/> />

6
frontend/src/lib/common/framework/components/ui/dialog/dialog-footer.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { cn, type WithElementRef } from "$lib/common/framework/components/utils.js"; import { cn, type WithElementRef } from '$lib/common/framework/components/utils.js';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="dialog-footer" data-slot="dialog-footer"
class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

6
frontend/src/lib/common/framework/components/ui/dialog/dialog-header.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/common/framework/components/utils.js"; import { cn, type WithElementRef } from '$lib/common/framework/components/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="dialog-header" data-slot="dialog-header"
class={cn("flex flex-col gap-2 text-center sm:text-left", className)} class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

6
frontend/src/lib/common/framework/components/ui/dialog/dialog-overlay.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
import { cn } from "$lib/common/framework/components/utils.js"; import { cn } from '$lib/common/framework/components/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="dialog-overlay" data-slot="dialog-overlay"
class={cn( class={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", 'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
className className
)} )}
{...restProps} {...restProps}

6
frontend/src/lib/common/framework/components/ui/dialog/dialog-title.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
import { cn } from "$lib/common/framework/components/utils.js"; import { cn } from '$lib/common/framework/components/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,6 +12,6 @@
<DialogPrimitive.Title <DialogPrimitive.Title
bind:ref bind:ref
data-slot="dialog-title" data-slot="dialog-title"
class={cn("text-lg font-semibold leading-none", className)} class={cn('text-lg leading-none font-semibold', className)}
{...restProps} {...restProps}
/> />

2
frontend/src/lib/common/framework/components/ui/dialog/dialog-trigger.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props(); let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
</script> </script>

18
frontend/src/lib/common/framework/components/ui/dialog/index.ts
View File

@ -1,13 +1,13 @@
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
import Title from "./dialog-title.svelte"; import Title from './dialog-title.svelte';
import Footer from "./dialog-footer.svelte"; import Footer from './dialog-footer.svelte';
import Header from "./dialog-header.svelte"; import Header from './dialog-header.svelte';
import Overlay from "./dialog-overlay.svelte"; import Overlay from './dialog-overlay.svelte';
import Content from "./dialog-content.svelte"; import Content from './dialog-content.svelte';
import Description from "./dialog-description.svelte"; import Description from './dialog-description.svelte';
import Trigger from "./dialog-trigger.svelte"; import Trigger from './dialog-trigger.svelte';
import Close from "./dialog-close.svelte"; import Close from './dialog-close.svelte';
const Root = DialogPrimitive.Root; const Root = DialogPrimitive.Root;
const Portal = DialogPrimitive.Portal; const Portal = DialogPrimitive.Portal;

2
frontend/src/lib/common/framework/components/ui/input/index.ts
View File

@ -1,4 +1,4 @@
import Root from "./input.svelte"; import Root from './input.svelte';
export { export {
Root, Root,

26
frontend/src/lib/common/framework/components/ui/input/input.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements"; import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/common/framework/components/utils.js"; import { cn, type WithElementRef } from '$lib/common/framework/components/utils.js';
type InputType = Exclude<HTMLInputTypeAttribute, "file">; type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
type Props = WithElementRef< type Props = WithElementRef<
Omit<HTMLInputAttributes, "type"> & Omit<HTMLInputAttributes, 'type'> &
({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined }) ({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
>; >;
let { let {
@ -15,19 +15,19 @@
type, type,
files = $bindable(), files = $bindable(),
class: className, class: className,
"data-slot": dataSlot = "input", 'data-slot': dataSlot = 'input',
...restProps ...restProps
}: Props = $props(); }: Props = $props();
</script> </script>
{#if type === "file"} {#if type === 'file'}
<input <input
bind:this={ref} bind:this={ref}
data-slot={dataSlot} data-slot={dataSlot}
class={cn( class={cn(
"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50", 'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", 'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", 'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
className className
)} )}
type="file" type="file"
@ -40,9 +40,9 @@
bind:this={ref} bind:this={ref}
data-slot={dataSlot} data-slot={dataSlot}
class={cn( class={cn(
"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", 'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", 'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", 'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
className className
)} )}
{type} {type}

2
frontend/src/lib/common/framework/components/ui/label/index.ts
View File

@ -1,4 +1,4 @@
import Root from "./label.svelte"; import Root from './label.svelte';
export { export {
Root, Root,

6
frontend/src/lib/common/framework/components/ui/label/label.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Label as LabelPrimitive } from "bits-ui"; import { Label as LabelPrimitive } from 'bits-ui';
import { cn } from "$lib/common/framework/components/utils.js"; import { cn } from '$lib/common/framework/components/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="label" data-slot="label"
class={cn( class={cn(
"flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", 'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
className className
)} )}
{...restProps} {...restProps}

2
frontend/src/lib/dashboard/framework/ui/DashboardNavbar.svelte
View File

@ -5,7 +5,7 @@
const { links }: { links: DashboardLink[] } = $props(); const { links }: { links: DashboardLink[] } = $props();
</script> </script>
<div class="border-true-gray-300 w-3xs border-e p-8"> <div class="w-3xs border-e border-true-gray-300 p-8">
<div class="mb-3 font-bold">Dashboard</div> <div class="mb-3 font-bold">Dashboard</div>
<div class="flex flex-col"> <div class="flex flex-col">
{#each links as link (link.href)} {#each links as link (link.href)}