fix: remove checking buf until I can figure out how to not use buf.lock
This commit is contained in:
parent
bfc1580218
commit
95ce559ff3
@ -1,99 +1,99 @@
|
||||
@import 'tailwindcss';
|
||||
@import "tw-animate-css";
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme inline {
|
||||
--spacing-body: calc(100vh - 180px);
|
||||
--spacing-body: calc(100vh - 180px);
|
||||
|
||||
--color-accent: var(--sky);
|
||||
--color-accent: var(--sky);
|
||||
|
||||
--color-rosewater: var(--rosewater);
|
||||
--color-flamingo: var(--flamingo);
|
||||
--color-pink: var(--pink);
|
||||
--color-mauve: var(--mauve);
|
||||
--color-red: var(--red);
|
||||
--color-maroon: var(--maroon);
|
||||
--color-peach: var(--peach);
|
||||
--color-yellow: var(--yellow);
|
||||
--color-green: var(--green);
|
||||
--color-teal: var(--teal);
|
||||
--color-sky: var(--sky);
|
||||
--color-sapphire: var(--sapphire);
|
||||
--color-blue: var(--blue);
|
||||
--color-lavender: var(--lavender);
|
||||
--color-text: var(--text);
|
||||
--color-subtext-1: var(--subtext-1);
|
||||
--color-subtext: var(--subtext);
|
||||
--color-overlay-2: var(--overlay-2);
|
||||
--color-overlay-1: var(--overlay-1);
|
||||
--color-overlay: var(--overlay);
|
||||
--color-surface-2: var(--surface-2);
|
||||
--color-surface-1: var(--surface-1);
|
||||
--color-surface: var(--surface);
|
||||
--color-based: var(--based);
|
||||
--color-mantle: var(--mantle);
|
||||
--color-crust: var(--crust);
|
||||
--color-rosewater: var(--rosewater);
|
||||
--color-flamingo: var(--flamingo);
|
||||
--color-pink: var(--pink);
|
||||
--color-mauve: var(--mauve);
|
||||
--color-red: var(--red);
|
||||
--color-maroon: var(--maroon);
|
||||
--color-peach: var(--peach);
|
||||
--color-yellow: var(--yellow);
|
||||
--color-green: var(--green);
|
||||
--color-teal: var(--teal);
|
||||
--color-sky: var(--sky);
|
||||
--color-sapphire: var(--sapphire);
|
||||
--color-blue: var(--blue);
|
||||
--color-lavender: var(--lavender);
|
||||
--color-text: var(--text);
|
||||
--color-subtext-1: var(--subtext-1);
|
||||
--color-subtext: var(--subtext);
|
||||
--color-overlay-2: var(--overlay-2);
|
||||
--color-overlay-1: var(--overlay-1);
|
||||
--color-overlay: var(--overlay);
|
||||
--color-surface-2: var(--surface-2);
|
||||
--color-surface-1: var(--surface-1);
|
||||
--color-surface: var(--surface);
|
||||
--color-based: var(--based);
|
||||
--color-mantle: var(--mantle);
|
||||
--color-crust: var(--crust);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--rosewater: hsl(11deg, 59%, 67%);
|
||||
--flamingo: hsl(0deg, 60%, 67%);
|
||||
--pink: hsl(316deg, 73%, 69%);
|
||||
--mauve: hsl(266deg, 85%, 58%);
|
||||
--red: hsl(347deg, 87%, 44%);
|
||||
--maroon: hsl(355deg, 76%, 59%);
|
||||
--peach: hsl(22deg, 99%, 52%);
|
||||
--yellow: hsl(35deg, 77%, 49%);
|
||||
--green: hsl(109deg, 58%, 40%);
|
||||
--teal: hsl(183deg, 74%, 35%);
|
||||
--sky: hsl(197deg, 97%, 46%);
|
||||
--sapphire: hsl(189deg, 70%, 42%);
|
||||
--blue: hsl(220deg, 91%, 54%);
|
||||
--lavender: hsl(231deg, 97%, 72%);
|
||||
--text: hsl(234deg, 16%, 35%);
|
||||
--subtext-1: hsl(233deg, 13%, 41%);
|
||||
--subtext: hsl(233deg, 10%, 47%);
|
||||
--overlay-2: hsl(232deg, 10%, 53%);
|
||||
--overlay-1: hsl(231deg, 10%, 59%);
|
||||
--overlay: hsl(228deg, 11%, 65%);
|
||||
--surface-2: hsl(227deg, 12%, 71%);
|
||||
--surface-1: hsl(225deg, 14%, 77%);
|
||||
--surface: hsl(223deg, 16%, 83%);
|
||||
--based: hsl(220deg, 23%, 95%);
|
||||
--mantle: hsl(220deg, 22%, 92%);
|
||||
--crust: hsl(220deg, 21%, 89%);
|
||||
}
|
||||
:root {
|
||||
--rosewater: hsl(11deg, 59%, 67%);
|
||||
--flamingo: hsl(0deg, 60%, 67%);
|
||||
--pink: hsl(316deg, 73%, 69%);
|
||||
--mauve: hsl(266deg, 85%, 58%);
|
||||
--red: hsl(347deg, 87%, 44%);
|
||||
--maroon: hsl(355deg, 76%, 59%);
|
||||
--peach: hsl(22deg, 99%, 52%);
|
||||
--yellow: hsl(35deg, 77%, 49%);
|
||||
--green: hsl(109deg, 58%, 40%);
|
||||
--teal: hsl(183deg, 74%, 35%);
|
||||
--sky: hsl(197deg, 97%, 46%);
|
||||
--sapphire: hsl(189deg, 70%, 42%);
|
||||
--blue: hsl(220deg, 91%, 54%);
|
||||
--lavender: hsl(231deg, 97%, 72%);
|
||||
--text: hsl(234deg, 16%, 35%);
|
||||
--subtext-1: hsl(233deg, 13%, 41%);
|
||||
--subtext: hsl(233deg, 10%, 47%);
|
||||
--overlay-2: hsl(232deg, 10%, 53%);
|
||||
--overlay-1: hsl(231deg, 10%, 59%);
|
||||
--overlay: hsl(228deg, 11%, 65%);
|
||||
--surface-2: hsl(227deg, 12%, 71%);
|
||||
--surface-1: hsl(225deg, 14%, 77%);
|
||||
--surface: hsl(223deg, 16%, 83%);
|
||||
--based: hsl(220deg, 23%, 95%);
|
||||
--mantle: hsl(220deg, 22%, 92%);
|
||||
--crust: hsl(220deg, 21%, 89%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--rosewater: hsl(10deg, 56%, 91%);
|
||||
--flamingo: hsl(0deg, 59%, 88%);
|
||||
--pink: hsl(316deg, 72%, 86%);
|
||||
--mauve: hsl(267deg, 84%, 81%);
|
||||
--red: hsl(343deg, 81%, 75%);
|
||||
--maroon: hsl(350deg, 65%, 77%);
|
||||
--peach: hsl(23deg, 92%, 75%);
|
||||
--yellow: hsl(41deg, 86%, 83%);
|
||||
--green: hsl(115deg, 54%, 76%);
|
||||
--teal: hsl(170deg, 57%, 73%);
|
||||
--sky: hsl(189deg, 71%, 73%);
|
||||
--sapphire: hsl(199deg, 76%, 69%);
|
||||
--blue: hsl(217deg, 92%, 76%);
|
||||
--lavender: hsl(232deg, 97%, 85%);
|
||||
--text: hsl(226deg, 64%, 88%);
|
||||
--subtext-1: hsl(227deg, 35%, 80%);
|
||||
--subtext: hsl(228deg, 24%, 72%);
|
||||
--overlay-2: hsl(228deg, 17%, 64%);
|
||||
--overlay-1: hsl(230deg, 13%, 55%);
|
||||
--overlay: hsl(231deg, 11%, 47%);
|
||||
--surface-2: hsl(233deg, 12%, 39%);
|
||||
--surface-1: hsl(234deg, 13%, 31%);
|
||||
--surface: hsl(237deg, 16%, 23%);
|
||||
--based: hsl(240deg, 21%, 15%);
|
||||
--mantle: hsl(240deg, 21%, 12%);
|
||||
--crust: hsl(240deg, 23%, 9%);
|
||||
}
|
||||
.dark {
|
||||
--rosewater: hsl(10deg, 56%, 91%);
|
||||
--flamingo: hsl(0deg, 59%, 88%);
|
||||
--pink: hsl(316deg, 72%, 86%);
|
||||
--mauve: hsl(267deg, 84%, 81%);
|
||||
--red: hsl(343deg, 81%, 75%);
|
||||
--maroon: hsl(350deg, 65%, 77%);
|
||||
--peach: hsl(23deg, 92%, 75%);
|
||||
--yellow: hsl(41deg, 86%, 83%);
|
||||
--green: hsl(115deg, 54%, 76%);
|
||||
--teal: hsl(170deg, 57%, 73%);
|
||||
--sky: hsl(189deg, 71%, 73%);
|
||||
--sapphire: hsl(199deg, 76%, 69%);
|
||||
--blue: hsl(217deg, 92%, 76%);
|
||||
--lavender: hsl(232deg, 97%, 85%);
|
||||
--text: hsl(226deg, 64%, 88%);
|
||||
--subtext-1: hsl(227deg, 35%, 80%);
|
||||
--subtext: hsl(228deg, 24%, 72%);
|
||||
--overlay-2: hsl(228deg, 17%, 64%);
|
||||
--overlay-1: hsl(230deg, 13%, 55%);
|
||||
--overlay: hsl(231deg, 11%, 47%);
|
||||
--surface-2: hsl(233deg, 12%, 39%);
|
||||
--surface-1: hsl(234deg, 13%, 31%);
|
||||
--surface: hsl(237deg, 16%, 23%);
|
||||
--based: hsl(240deg, 21%, 15%);
|
||||
--mantle: hsl(240deg, 21%, 12%);
|
||||
--crust: hsl(240deg, 23%, 9%);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@ -102,4 +102,4 @@
|
||||
Focus Outline: blue
|
||||
Border: surface-1
|
||||
Hover: bump color by 2 (eg crust -> based), if accent color drop opacity (eg blue -> blue/90)
|
||||
*/
|
||||
*/
|
||||
|
@ -1,7 +1,5 @@
|
||||
|
||||
|
||||
export function newState<T>(s: T) {
|
||||
const state = $state(s);
|
||||
const state = $state(s);
|
||||
|
||||
return state;
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
@ -1,175 +1,181 @@
|
||||
import { create, type DescMessage, type DescService, type MessageShape, type MessageInitShape } from "@bufbuild/protobuf";
|
||||
import { ValidationError, type Violation } from "@bufbuild/protovalidate";
|
||||
import { Validator } from "../transport";
|
||||
import { ConnectError, type Client } from "@connectrpc/connect";
|
||||
import type { Action } from "svelte/action";
|
||||
import {
|
||||
create,
|
||||
type DescMessage,
|
||||
type DescService,
|
||||
type MessageShape,
|
||||
type MessageInitShape
|
||||
} from '@bufbuild/protobuf';
|
||||
import { ValidationError, type Violation } from '@bufbuild/protovalidate';
|
||||
import { Validator } from '../transport';
|
||||
import { ConnectError, type Client } from '@connectrpc/connect';
|
||||
import type { Action } from 'svelte/action';
|
||||
|
||||
type Options<Input extends DescMessage, Output extends DescMessage> = {
|
||||
init?: MessageInitShape<Input>,
|
||||
start?: boolean,
|
||||
reset?: boolean,
|
||||
onSubmit?: (formData: FormData, input: MessageShape<Input>) => Promise<MessageShape<Input>>,
|
||||
onResult?: (result: MessageShape<Output>) => void,
|
||||
onError?: (err: Violation[] | ConnectError) => void
|
||||
}
|
||||
|
||||
type Violations<Field> = {
|
||||
[field in keyof Field]?: Violation[];
|
||||
init?: MessageInitShape<Input>;
|
||||
start?: boolean;
|
||||
reset?: boolean;
|
||||
onSubmit?: (formData: FormData, input: MessageShape<Input>) => Promise<MessageShape<Input>>;
|
||||
onResult?: (result: MessageShape<Output>) => void;
|
||||
onError?: (err: Violation[] | ConnectError) => void;
|
||||
};
|
||||
|
||||
export function coolForm<
|
||||
Service extends DescService,
|
||||
Method extends Service['methods'][number]
|
||||
>(
|
||||
client: Client<Service>,
|
||||
method: Method,
|
||||
options?: Options<Method['input'], Method['output']>
|
||||
type Violations<Field> = {
|
||||
[field in keyof Field]?: Violation[];
|
||||
};
|
||||
|
||||
export function coolForm<Service extends DescService, Method extends Service['methods'][number]>(
|
||||
client: Client<Service>,
|
||||
method: Method,
|
||||
options?: Options<Method['input'], Method['output']>
|
||||
) {
|
||||
const input = $state(create(method.input as Method['input'], options?.init));
|
||||
const output = $state(create(method.output as Method['output']));
|
||||
const errors: Violations<Method['input']['field']> & {
|
||||
form?: ConnectError
|
||||
} = $state({});
|
||||
let loading = $state(false);
|
||||
const input = $state(create(method.input as Method['input'], options?.init));
|
||||
const output = $state(create(method.output as Method['output']));
|
||||
const errors: Violations<Method['input']['field']> & {
|
||||
form?: ConnectError;
|
||||
} = $state({});
|
||||
let loading = $state(false);
|
||||
|
||||
const validate = () => {
|
||||
// Delete existing errors
|
||||
for (const key in errors) {
|
||||
delete errors[key];
|
||||
}
|
||||
const validate = () => {
|
||||
// Delete existing errors
|
||||
for (const key in errors) {
|
||||
delete errors[key];
|
||||
}
|
||||
|
||||
try {
|
||||
Validator.validate(method['input'], input);
|
||||
} catch (e) {
|
||||
if (!(e instanceof ValidationError)) {
|
||||
throw e;
|
||||
}
|
||||
try {
|
||||
Validator.validate(method['input'], input);
|
||||
} catch (e) {
|
||||
if (!(e instanceof ValidationError)) {
|
||||
throw e;
|
||||
}
|
||||
|
||||
// Map violation errors to errors rune
|
||||
for (const violation of e.violations) {
|
||||
for (const field of violation.field) {
|
||||
if (!("localName" in field)) {
|
||||
continue;
|
||||
}
|
||||
// Map violation errors to errors rune
|
||||
for (const violation of e.violations) {
|
||||
for (const field of violation.field) {
|
||||
if (!('localName' in field)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Create localName property if it doesn't exist
|
||||
if (!errors[field.localName]) {
|
||||
Object.assign(errors, {
|
||||
[field.localName]: [violation]
|
||||
})
|
||||
} else {
|
||||
errors[field.localName]?.push(violation);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Create localName property if it doesn't exist
|
||||
if (!errors[field.localName]) {
|
||||
Object.assign(errors, {
|
||||
[field.localName]: [violation]
|
||||
});
|
||||
} else {
|
||||
errors[field.localName]?.push(violation);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return e.violations;
|
||||
}
|
||||
return e.violations;
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
return [];
|
||||
};
|
||||
|
||||
// When a request is successful
|
||||
const success = (response: MessageShape<Method['output']>) => {
|
||||
loading = false;
|
||||
// When a request is successful
|
||||
const success = (response: MessageShape<Method['output']>) => {
|
||||
loading = false;
|
||||
|
||||
// Send the response up
|
||||
options?.onResult?.(response);
|
||||
// Send the response up
|
||||
options?.onResult?.(response);
|
||||
|
||||
// Set the response
|
||||
Object.assign(output, response);
|
||||
// Set the response
|
||||
Object.assign(output, response);
|
||||
|
||||
// If we want to reset the input
|
||||
if (options && (options.reset == undefined || options.reset)) {
|
||||
const cleared = create(method.input as Method['input'], options?.init)
|
||||
Object.assign(input, cleared);
|
||||
}
|
||||
}
|
||||
// If we want to reset the input
|
||||
if (options && (options.reset == undefined || options.reset)) {
|
||||
const cleared = create(method.input as Method['input'], options?.init);
|
||||
Object.assign(input, cleared);
|
||||
}
|
||||
};
|
||||
|
||||
// When a request fails
|
||||
const fail = (err: Violation[] | ConnectError | any) => {
|
||||
loading = false;
|
||||
// When a request fails
|
||||
const fail = (err: Violation[] | ConnectError | Error) => {
|
||||
loading = false;
|
||||
|
||||
// It's a Violation[]
|
||||
if (Array.isArray(err)) {
|
||||
// Send the error up
|
||||
options?.onError?.(err);
|
||||
return;
|
||||
}
|
||||
// It's a Violation[]
|
||||
if (Array.isArray(err)) {
|
||||
// Send the error up
|
||||
options?.onError?.(err);
|
||||
return;
|
||||
}
|
||||
|
||||
// It's a ConnectError
|
||||
if (err instanceof ConnectError) {
|
||||
// Assign it to the form
|
||||
errors.form = err;
|
||||
// It's a ConnectError
|
||||
if (err instanceof ConnectError) {
|
||||
// Assign it to the form
|
||||
errors.form = err;
|
||||
|
||||
// Send the error up
|
||||
options?.onError?.(err);
|
||||
return;
|
||||
}
|
||||
// Send the error up
|
||||
options?.onError?.(err);
|
||||
return;
|
||||
}
|
||||
|
||||
throw err;
|
||||
}
|
||||
throw err;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
loading = true;
|
||||
const submit = () => {
|
||||
loading = true;
|
||||
|
||||
// Validate
|
||||
const validationErrors = validate();
|
||||
if (validationErrors.length > 0) {
|
||||
fail(validationErrors);
|
||||
return;
|
||||
}
|
||||
// Validate
|
||||
const validationErrors = validate();
|
||||
if (validationErrors.length > 0) {
|
||||
fail(validationErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
// Send response
|
||||
if (method.methodKind == "unary") {
|
||||
// @ts-ignore I can't figure out how to make this typescript compliant
|
||||
const response = client[method.localName]($state.snapshot(input)) as Promise<MessageShape<Method['output']>>
|
||||
// Send response
|
||||
if (method.methodKind == 'unary') {
|
||||
// @ts-expect-error I can't figure out how to make this typescript compliant
|
||||
const response = client[method.localName]($state.snapshot(input)) as Promise<
|
||||
MessageShape<Method['output']>
|
||||
>;
|
||||
|
||||
response
|
||||
.then((resp) => {
|
||||
success(resp);
|
||||
}).catch(err => {
|
||||
fail(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
response
|
||||
.then((resp) => {
|
||||
success(resp);
|
||||
})
|
||||
.catch((err) => {
|
||||
fail(err);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// A nice action to give to forms to run submit() on submit
|
||||
const impair: Action<HTMLFormElement> = (form) => {
|
||||
$effect(() => {
|
||||
form.onsubmit = (event) => {
|
||||
event.preventDefault();
|
||||
// A nice action to give to forms to run submit() on submit
|
||||
const impair: Action<HTMLFormElement> = (form) => {
|
||||
$effect(() => {
|
||||
form.onsubmit = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (options?.onSubmit) {
|
||||
const formData = new FormData(form);
|
||||
options.onSubmit(formData, input).then((i) => {
|
||||
Object.assign(input, i);
|
||||
submit();
|
||||
});
|
||||
if (options?.onSubmit) {
|
||||
const formData = new FormData(form);
|
||||
options.onSubmit(formData, input).then((i) => {
|
||||
Object.assign(input, i);
|
||||
submit();
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
submit();
|
||||
}
|
||||
submit();
|
||||
};
|
||||
|
||||
return () => {
|
||||
form.onsubmit = () => { };
|
||||
};
|
||||
});
|
||||
};
|
||||
return () => {
|
||||
form.onsubmit = () => {};
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
if (options?.start) {
|
||||
submit();
|
||||
}
|
||||
if (options?.start) {
|
||||
submit();
|
||||
}
|
||||
|
||||
return {
|
||||
input,
|
||||
output,
|
||||
errors,
|
||||
loading: () => loading,
|
||||
submit,
|
||||
validate,
|
||||
impair
|
||||
}
|
||||
}
|
||||
return {
|
||||
input,
|
||||
output,
|
||||
errors,
|
||||
loading: () => loading,
|
||||
submit,
|
||||
validate,
|
||||
impair
|
||||
};
|
||||
}
|
||||
|
@ -1,7 +1,4 @@
|
||||
import { coolForm } from "./coolforms.svelte";
|
||||
import { newState } from "./conststate.svelte";
|
||||
import { coolForm } from './coolforms.svelte';
|
||||
import { newState } from './conststate.svelte';
|
||||
|
||||
export {
|
||||
coolForm,
|
||||
newState
|
||||
};
|
||||
export { coolForm, newState };
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { createConnectTransport } from '@connectrpc/connect-web';
|
||||
import { createValidator } from "@bufbuild/protovalidate";
|
||||
import { createValidator } from '@bufbuild/protovalidate';
|
||||
import { Code, ConnectError, createClient, type Interceptor } from '@connectrpc/connect';
|
||||
import { AuthService } from '$lib/connect/user/v1/auth_pb';
|
||||
import { UserService } from '$lib/connect/user/v1/user_pb';
|
||||
@ -15,7 +15,10 @@ const redirector: Interceptor = (next) => async (req) => {
|
||||
if (error.code === Code.Unauthenticated) {
|
||||
const redirectURL = new URL(page.url);
|
||||
redirectURL.pathname = '/auth';
|
||||
redirectURL.searchParams.append('redir', encodeURIComponent(page.url.pathname + page.url.search));
|
||||
redirectURL.searchParams.append(
|
||||
'redir',
|
||||
encodeURIComponent(page.url.pathname + page.url.search)
|
||||
);
|
||||
|
||||
await goto(redirectURL);
|
||||
}
|
||||
|
@ -13,7 +13,7 @@
|
||||
bind:ref
|
||||
data-slot="avatar-fallback"
|
||||
class={cn(
|
||||
'bg-surface outline-surface-2 flex size-full select-none items-center justify-center rounded-full text-sm transition-all',
|
||||
'bg-surface outline-surface-2 flex size-full items-center justify-center rounded-full text-sm transition-all select-none',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Avatar as AvatarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Avatar as AvatarPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,6 @@
|
||||
<AvatarPrimitive.Image
|
||||
bind:ref
|
||||
data-slot="avatar-image"
|
||||
class={cn("aspect-square size-full", className)}
|
||||
class={cn('aspect-square size-full', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Avatar as AvatarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Avatar as AvatarPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,9 @@
|
||||
<AvatarPrimitive.Root
|
||||
bind:ref
|
||||
data-slot="avatar"
|
||||
class={cn("relative outline outline-offset-2 outline-surface-1 flex size-9 shrink-0 overflow-hidden rounded-full", className)}
|
||||
class={cn(
|
||||
'outline-surface-1 relative flex size-9 shrink-0 overflow-hidden rounded-full outline outline-offset-2',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import Root from "./avatar.svelte";
|
||||
import Image from "./avatar-image.svelte";
|
||||
import Fallback from "./avatar-fallback.svelte";
|
||||
import Root from './avatar.svelte';
|
||||
import Image from './avatar-image.svelte';
|
||||
import Fallback from './avatar-fallback.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
@ -9,5 +9,5 @@ export {
|
||||
//
|
||||
Root as Avatar,
|
||||
Image as AvatarImage,
|
||||
Fallback as AvatarFallback,
|
||||
Fallback as AvatarFallback
|
||||
};
|
||||
|
@ -7,7 +7,7 @@
|
||||
|
||||
export const buttonVariants = tv({
|
||||
base: cn(
|
||||
'shadow-xs inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all',
|
||||
'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap shadow-xs transition-all',
|
||||
|
||||
// Focus
|
||||
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
@ -16,14 +16,14 @@
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
|
||||
// Images
|
||||
"[&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
|
||||
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
|
||||
),
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'text-crust bg-accent hover:bg-accent/90 shadow-xs',
|
||||
red: 'text-crust bg-red hover:bg-red/90 shadow-xs',
|
||||
outline: 'text-text border-surface-1 hover:bg-surface shadow-xs border bg-transparent',
|
||||
input: 'text-text border-surface-1 hover:border-overlay shadow-xs border bg-transparent',
|
||||
outline: 'text-text border-surface-1 hover:bg-surface border bg-transparent shadow-xs',
|
||||
input: 'text-text border-surface-1 hover:border-overlay border bg-transparent shadow-xs',
|
||||
ghost: 'text-text hover:bg-surface shadow-xs'
|
||||
},
|
||||
size: {
|
||||
@ -47,7 +47,6 @@
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
loading?: boolean;
|
||||
scan?: boolean;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -60,7 +59,6 @@
|
||||
href = undefined,
|
||||
type = 'button',
|
||||
loading,
|
||||
scan,
|
||||
children,
|
||||
...restProps
|
||||
}: ButtonProps = $props();
|
||||
|
@ -2,8 +2,8 @@ import Root, {
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant,
|
||||
buttonVariants,
|
||||
} from "./button.svelte";
|
||||
buttonVariants
|
||||
} from './button.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
@ -13,5 +13,5 @@ export {
|
||||
buttonVariants,
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant,
|
||||
};
|
||||
type ButtonVariant
|
||||
};
|
||||
|
@ -1,7 +1,7 @@
|
||||
import Root from "./card.svelte";
|
||||
import Root from './card.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Card,
|
||||
};
|
||||
Root as Card
|
||||
};
|
||||
|
@ -58,7 +58,7 @@
|
||||
Pick a date range
|
||||
{/if}
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="w-auto p-0 bg-based" align="start">
|
||||
<Popover.Content class="bg-based w-auto p-0" align="start">
|
||||
<RangeCalendar
|
||||
bind:value
|
||||
onStartValueChange={(v) => {
|
||||
|
@ -1,6 +1,3 @@
|
||||
import Root from "./daterangepicker.svelte";
|
||||
import Root from './daterangepicker.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
Root as DateRangePicker
|
||||
};
|
||||
export { Root, Root as DateRangePicker };
|
||||
|
@ -1,5 +1,5 @@
|
||||
<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();
|
||||
</script>
|
||||
|
@ -34,7 +34,7 @@
|
||||
{@render children?.()}
|
||||
<DialogPrimitive.Close
|
||||
class={cn(
|
||||
'text-text absolute top-4 right-4 cursor-pointer p-1 rounded hover:bg-crust transition-all disabled:pointer-events-none',
|
||||
'text-text hover:bg-crust absolute top-4 right-4 cursor-pointer rounded p-1 transition-all disabled:pointer-events-none',
|
||||
|
||||
// Focus
|
||||
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Dialog as DialogPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,6 @@
|
||||
<DialogPrimitive.Description
|
||||
bind:ref
|
||||
data-slot="dialog-description"
|
||||
class={cn("text-muted-foreground text-sm", className)}
|
||||
class={cn('text-muted-foreground text-sm', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<div
|
||||
bind:this={ref}
|
||||
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}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<div
|
||||
bind:this={ref}
|
||||
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}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Dialog as DialogPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -13,7 +13,7 @@
|
||||
bind:ref
|
||||
data-slot="dialog-overlay"
|
||||
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",
|
||||
'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',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Dialog as DialogPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,6 @@
|
||||
<DialogPrimitive.Title
|
||||
bind:ref
|
||||
data-slot="dialog-title"
|
||||
class={cn("text-lg font-semibold leading-none", className)}
|
||||
class={cn('text-lg leading-none font-semibold', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<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();
|
||||
</script>
|
||||
|
@ -1,14 +1,14 @@
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import { Dialog as DialogPrimitive } from 'bits-ui';
|
||||
|
||||
import Root from './dialog.svelte';
|
||||
import Title from "./dialog-title.svelte";
|
||||
import Footer from "./dialog-footer.svelte";
|
||||
import Header from "./dialog-header.svelte";
|
||||
import Overlay from "./dialog-overlay.svelte";
|
||||
import Content from "./dialog-content.svelte";
|
||||
import Description from "./dialog-description.svelte";
|
||||
import Trigger from "./dialog-trigger.svelte";
|
||||
import Close from "./dialog-close.svelte";
|
||||
import Title from './dialog-title.svelte';
|
||||
import Footer from './dialog-footer.svelte';
|
||||
import Header from './dialog-header.svelte';
|
||||
import Overlay from './dialog-overlay.svelte';
|
||||
import Content from './dialog-content.svelte';
|
||||
import Description from './dialog-description.svelte';
|
||||
import Trigger from './dialog-trigger.svelte';
|
||||
import Close from './dialog-close.svelte';
|
||||
|
||||
const Portal = DialogPrimitive.Portal;
|
||||
|
||||
@ -33,5 +33,5 @@ export {
|
||||
Overlay as DialogOverlay,
|
||||
Content as DialogContent,
|
||||
Description as DialogDescription,
|
||||
Close as DialogClose,
|
||||
Close as DialogClose
|
||||
};
|
||||
|
@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
|
||||
import Check from "@lucide/svelte/icons/check";
|
||||
import Minus from "@lucide/svelte/icons/minus";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { Snippet } from "svelte";
|
||||
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
|
||||
import Check from '@lucide/svelte/icons/check';
|
||||
import Minus from '@lucide/svelte/icons/minus';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -23,13 +23,13 @@
|
||||
bind:indeterminate
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
class={cn(
|
||||
"focus:bg-surface outline-hidden relative flex cursor-pointer select-none items-center gap-2 rounded-sm py-2 pl-8 pr-2 text-sm",
|
||||
'focus:bg-surface relative flex cursor-pointer items-center gap-2 rounded-sm py-2 pr-2 pl-8 text-sm outline-hidden select-none',
|
||||
|
||||
// Disabled
|
||||
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
|
||||
// Images
|
||||
"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
@ -39,7 +39,7 @@
|
||||
{#if indeterminate}
|
||||
<Minus class="size-4" />
|
||||
{:else}
|
||||
<Check class={cn("size-4", !checked && "text-transparent")} />
|
||||
<Check class={cn('size-4', !checked && 'text-transparent')} />
|
||||
{/if}
|
||||
</span>
|
||||
{@render childrenProp?.()}
|
||||
|
@ -12,6 +12,6 @@
|
||||
<DropdownMenuPrimitive.Group
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-group"
|
||||
class={cn('border-b border-surface first:pt-0 last:pb-0 last:border-none', className)}
|
||||
class={cn('border-surface border-b first:pt-0 last:border-none last:pb-0', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { type WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from '$lib/utils.js';
|
||||
import { type WithElementRef } from 'bits-ui';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -17,7 +17,7 @@
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="dropdown-menu-label"
|
||||
class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
|
||||
class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
|
@ -15,10 +15,10 @@
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
class={cn(
|
||||
"focus:bg-surface text-text relative flex cursor-pointer items-center gap-2 py-2 pr-2 pl-8 text-sm select-none",
|
||||
'focus:bg-surface text-text relative flex cursor-pointer items-center gap-2 py-2 pr-2 pl-8 text-sm select-none',
|
||||
|
||||
// Disabled
|
||||
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
|
||||
// Images
|
||||
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,6 @@
|
||||
<DropdownMenuPrimitive.Separator
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-separator"
|
||||
class={cn("bg-surface-1 -mx-1 my-1 h-px", className)}
|
||||
class={cn('bg-surface-1 -mx-1 my-1 h-px', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { type WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { type WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<span
|
||||
bind:this={ref}
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
class={cn("text-text ml-auto text-xs tracking-widest", className)}
|
||||
class={cn('text-text ml-auto text-xs tracking-widest', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -13,7 +13,7 @@
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
class={cn(
|
||||
'bg-based text-text origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
|
||||
'bg-based text-text z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
|
||||
|
||||
// Animations
|
||||
'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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import ChevronRight from "@lucide/svelte/icons/chevron-right";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -18,8 +18,8 @@
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
class={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm",
|
||||
inset && "pl-8",
|
||||
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none',
|
||||
inset && 'pl-8',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -14,7 +14,7 @@
|
||||
data-slot="dropdown-menu-trigger"
|
||||
class={cn(
|
||||
'flex cursor-pointer items-center gap-1 transition-all',
|
||||
|
||||
|
||||
// Focus
|
||||
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
className
|
||||
|
@ -1,17 +1,17 @@
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
|
||||
import Content from "./dropdown-menu-content.svelte";
|
||||
import Group from "./dropdown-menu-group.svelte";
|
||||
import Item from "./dropdown-menu-item.svelte";
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
||||
import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
|
||||
import Content from './dropdown-menu-content.svelte';
|
||||
import Group from './dropdown-menu-group.svelte';
|
||||
import Item from './dropdown-menu-item.svelte';
|
||||
import Link from './dropdown-menu-link.svelte';
|
||||
import Label from "./dropdown-menu-label.svelte";
|
||||
import RadioGroup from "./dropdown-menu-radio-group.svelte";
|
||||
import RadioItem from "./dropdown-menu-radio-item.svelte";
|
||||
import Separator from "./dropdown-menu-separator.svelte";
|
||||
import Shortcut from "./dropdown-menu-shortcut.svelte";
|
||||
import Trigger from "./dropdown-menu-trigger.svelte";
|
||||
import SubContent from "./dropdown-menu-sub-content.svelte";
|
||||
import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
|
||||
import Label from './dropdown-menu-label.svelte';
|
||||
import RadioGroup from './dropdown-menu-radio-group.svelte';
|
||||
import RadioItem from './dropdown-menu-radio-item.svelte';
|
||||
import Separator from './dropdown-menu-separator.svelte';
|
||||
import Shortcut from './dropdown-menu-shortcut.svelte';
|
||||
import Trigger from './dropdown-menu-trigger.svelte';
|
||||
import SubContent from './dropdown-menu-sub-content.svelte';
|
||||
import SubTrigger from './dropdown-menu-sub-trigger.svelte';
|
||||
|
||||
const Sub = DropdownMenuPrimitive.Sub;
|
||||
const Root = DropdownMenuPrimitive.Root;
|
||||
@ -46,5 +46,5 @@ export {
|
||||
Sub,
|
||||
SubContent,
|
||||
SubTrigger,
|
||||
Trigger,
|
||||
Trigger
|
||||
};
|
||||
|
@ -1,31 +1,31 @@
|
||||
import { getContext, hasContext, setContext } from 'svelte';
|
||||
|
||||
type Item = {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
const key = 'form';
|
||||
export function setFormContext(id: string, name: string) {
|
||||
const item = getFormContext();
|
||||
if (!item) {
|
||||
const item: Item = $state({
|
||||
id,
|
||||
name,
|
||||
});
|
||||
setContext(key, item);
|
||||
const item = getFormContext();
|
||||
if (!item) {
|
||||
const item: Item = $state({
|
||||
id,
|
||||
name
|
||||
});
|
||||
setContext(key, item);
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
item.id = id;
|
||||
item.name = name;
|
||||
item.id = id;
|
||||
item.name = name;
|
||||
}
|
||||
|
||||
export function getFormContext() {
|
||||
if (!hasContext(key)) {
|
||||
return null;
|
||||
}
|
||||
if (!hasContext(key)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return getContext(key) as Item;
|
||||
}
|
||||
return getContext(key) as Item;
|
||||
}
|
||||
|
@ -21,7 +21,7 @@
|
||||
|
||||
<div bind:this={ref} class={cn('text-red text-sm', className)} {...restProps}>
|
||||
{#if errors && Array.isArray(errors)}
|
||||
{#each errors as error}
|
||||
{#each errors as error (error)}
|
||||
<label for={item?.id}>{error.message}</label>
|
||||
{/each}
|
||||
{:else if errors}
|
||||
|
@ -16,6 +16,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={ref} class={cn('flex flex-col gap-1')} {...restProps}>
|
||||
<div bind:this={ref} class={cn('flex flex-col gap-1', className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
@ -2,8 +2,4 @@ import Field from './field.svelte';
|
||||
import Errors from './errors.svelte';
|
||||
import Label from './label.svelte';
|
||||
|
||||
export {
|
||||
Field,
|
||||
Errors,
|
||||
Label
|
||||
};
|
||||
export { Field, Errors, Label };
|
||||
|
@ -1,7 +1,7 @@
|
||||
import Root from "./input.svelte";
|
||||
import Root from './input.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Input,
|
||||
};
|
||||
Root as Input
|
||||
};
|
||||
|
@ -8,9 +8,7 @@
|
||||
|
||||
type Props = WithElementRef<
|
||||
Omit<HTMLInputAttributes, 'type'> &
|
||||
({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined }) & {
|
||||
scan?: boolean;
|
||||
}
|
||||
({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
|
||||
>;
|
||||
|
||||
let {
|
||||
@ -19,7 +17,6 @@
|
||||
type,
|
||||
files = $bindable(),
|
||||
class: className,
|
||||
scan,
|
||||
id,
|
||||
name,
|
||||
...restProps
|
||||
@ -40,7 +37,7 @@
|
||||
{name}
|
||||
bind:this={ref}
|
||||
class={cn(
|
||||
'border-surface-1 file:bg-surface hover:border-overlay placeholder:text-subtext text-text shadow-xs flex h-9 w-full min-w-0 cursor-pointer rounded-md border text-sm font-medium transition-all file:mr-2 file:px-3 file:py-2 md:text-sm',
|
||||
'border-surface-1 file:bg-surface hover:border-overlay placeholder:text-subtext text-text flex h-9 w-full min-w-0 cursor-pointer rounded-md border text-sm font-medium shadow-xs transition-all file:mr-2 file:px-3 file:py-2 md:text-sm',
|
||||
|
||||
// Focus
|
||||
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
@ -61,7 +58,7 @@
|
||||
{name}
|
||||
bind:this={ref}
|
||||
class={cn(
|
||||
'border-surface-1 hover:border-overlay placeholder:text-subtext text-text shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 transition-all md:text-sm',
|
||||
'border-surface-1 hover:border-overlay placeholder:text-subtext text-text flex h-9 w-full min-w-0 rounded-md border px-3 py-1 shadow-xs transition-all md:text-sm',
|
||||
|
||||
// Focus
|
||||
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
|
@ -1,7 +1,7 @@
|
||||
import Root from "./label.svelte";
|
||||
import Root from './label.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Label,
|
||||
Root as Label
|
||||
};
|
||||
|
@ -13,7 +13,7 @@
|
||||
bind:ref
|
||||
data-slot="label"
|
||||
class={cn(
|
||||
'flex items-center gap-2 text-sm text-text 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',
|
||||
'text-text 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
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,5 +1,3 @@
|
||||
import Pager from './pager.svelte'
|
||||
import Pager from './pager.svelte';
|
||||
|
||||
export {
|
||||
Pager
|
||||
}
|
||||
export { Pager };
|
||||
|
@ -1,10 +1,10 @@
|
||||
import Root from "./pagination.svelte";
|
||||
import Content from "./pagination-content.svelte";
|
||||
import Item from "./pagination-item.svelte";
|
||||
import Link from "./pagination-link.svelte";
|
||||
import PrevButton from "./pagination-prev-button.svelte";
|
||||
import NextButton from "./pagination-next-button.svelte";
|
||||
import Ellipsis from "./pagination-ellipsis.svelte";
|
||||
import Root from './pagination.svelte';
|
||||
import Content from './pagination-content.svelte';
|
||||
import Item from './pagination-item.svelte';
|
||||
import Link from './pagination-link.svelte';
|
||||
import PrevButton from './pagination-prev-button.svelte';
|
||||
import NextButton from './pagination-next-button.svelte';
|
||||
import Ellipsis from './pagination-ellipsis.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
@ -21,5 +21,5 @@ export {
|
||||
Link as PaginationLink,
|
||||
PrevButton as PaginationPrevButton,
|
||||
NextButton as PaginationNextButton,
|
||||
Ellipsis as PaginationEllipsis,
|
||||
Ellipsis as PaginationEllipsis
|
||||
};
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<ul
|
||||
bind:this={ref}
|
||||
data-slot="pagination-content"
|
||||
class={cn("flex flex-row items-center gap-1", className)}
|
||||
class={cn('flex flex-row items-center gap-1', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import Ellipsis from "@lucide/svelte/icons/ellipsis";
|
||||
import type { WithElementRef, WithoutChildren } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import Ellipsis from '@lucide/svelte/icons/ellipsis';
|
||||
import type { WithElementRef, WithoutChildren } from 'bits-ui';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -15,7 +15,7 @@
|
||||
bind:this={ref}
|
||||
aria-hidden="true"
|
||||
data-slot="pagination-ellipsis"
|
||||
class={cn("flex size-9 items-center justify-center text-text", className)}
|
||||
class={cn('text-text flex size-9 items-center justify-center', className)}
|
||||
{...restProps}
|
||||
>
|
||||
<Ellipsis class="size-4" />
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLLiAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLLiAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
|
@ -1,12 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { Pagination as PaginationPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { type Props, buttonVariants } from "$lib/ui/button";
|
||||
import { Pagination as PaginationPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import { type Props, buttonVariants } from '$lib/ui/button';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
size = "icon",
|
||||
size = 'icon',
|
||||
isActive = false,
|
||||
page,
|
||||
children,
|
||||
@ -24,13 +24,13 @@
|
||||
<PaginationPrimitive.Page
|
||||
bind:ref
|
||||
{page}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
data-slot="pagination-link"
|
||||
data-active={isActive}
|
||||
class={cn(
|
||||
buttonVariants({
|
||||
variant: "ghost",
|
||||
size,
|
||||
variant: 'ghost',
|
||||
size
|
||||
}),
|
||||
'text-text',
|
||||
isActive && 'bg-surface-1',
|
||||
|
@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { Pagination as PaginationPrimitive } from "bits-ui";
|
||||
import ChevronRight from "@lucide/svelte/icons/chevron-right";
|
||||
import { buttonVariants } from "$lib/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Pagination as PaginationPrimitive } from 'bits-ui';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import { buttonVariants } from '$lib/ui/button/index.js';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -23,9 +23,9 @@
|
||||
aria-label="Go to next page"
|
||||
class={cn(
|
||||
buttonVariants({
|
||||
size: "default",
|
||||
variant: "ghost",
|
||||
class: "gap-1 px-2.5 sm:pr-2.5",
|
||||
size: 'default',
|
||||
variant: 'ghost',
|
||||
class: 'gap-1 px-2.5 sm:pr-2.5'
|
||||
}),
|
||||
className
|
||||
)}
|
||||
|
@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { Pagination as PaginationPrimitive } from "bits-ui";
|
||||
import ChevronLeft from "@lucide/svelte/icons/chevron-left";
|
||||
import { buttonVariants } from "$lib/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Pagination as PaginationPrimitive } from 'bits-ui';
|
||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||
import { buttonVariants } from '$lib/ui/button/index.js';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -22,9 +22,9 @@
|
||||
aria-label="Go to previous page"
|
||||
class={cn(
|
||||
buttonVariants({
|
||||
size: "default",
|
||||
variant: "ghost",
|
||||
class: "gap-1 px-2.5 sm:pl-2.5",
|
||||
size: 'default',
|
||||
variant: 'ghost',
|
||||
class: 'gap-1 px-2.5 sm:pl-2.5'
|
||||
}),
|
||||
className
|
||||
)}
|
||||
|
@ -18,7 +18,7 @@
|
||||
|
||||
<svelte:window
|
||||
onpopstate={(state) => {
|
||||
const sks = state.state['sveltekit:states'] as {} | string;
|
||||
const sks = state.state['sveltekit:states'] as object | string;
|
||||
if (typeof sks === 'string' && sks.includes('#pagination-')) {
|
||||
page = Number(sks.split('#pagination-')[1]);
|
||||
onPageChange?.(page);
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { Popover as PopoverPrimitive } from "bits-ui";
|
||||
import Content from "./popover-content.svelte";
|
||||
import Trigger from "./popover-trigger.svelte";
|
||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
||||
import Content from './popover-content.svelte';
|
||||
import Trigger from './popover-trigger.svelte';
|
||||
const Root = PopoverPrimitive.Root;
|
||||
const Close = PopoverPrimitive.Close;
|
||||
|
||||
@ -13,5 +13,5 @@ export {
|
||||
Root as Popover,
|
||||
Content as PopoverContent,
|
||||
Trigger as PopoverTrigger,
|
||||
Close as PopoverClose,
|
||||
Close as PopoverClose
|
||||
};
|
||||
|
@ -1,12 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Popover as PopoverPrimitive } from "bits-ui";
|
||||
import { cn } from '$lib/utils.js';
|
||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
align = 'center',
|
||||
portalProps,
|
||||
...restProps
|
||||
}: PopoverPrimitive.ContentProps & {
|
||||
@ -21,10 +21,10 @@
|
||||
{sideOffset}
|
||||
{align}
|
||||
class={cn(
|
||||
"bg-based text-text outline-hidden z-50 w-72 rounded-md border border-surface-1 p-4 shadow-md",
|
||||
'bg-based text-text border-surface-1 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden',
|
||||
|
||||
// Animation
|
||||
"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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-popover-content-transform-origin)",
|
||||
'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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-popover-content-transform-origin)',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Popover as PopoverPrimitive } from "bits-ui";
|
||||
import { cn } from '$lib/utils.js';
|
||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,6 @@
|
||||
<PopoverPrimitive.Trigger
|
||||
bind:ref
|
||||
data-slot="popover-trigger"
|
||||
class={cn("", className)}
|
||||
class={cn('', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,15 +1,15 @@
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import Root from "./range-calendar.svelte";
|
||||
import Cell from "./range-calendar-cell.svelte";
|
||||
import Day from "./range-calendar-day.svelte";
|
||||
import Grid from "./range-calendar-grid.svelte";
|
||||
import Header from "./range-calendar-header.svelte";
|
||||
import Months from "./range-calendar-months.svelte";
|
||||
import GridRow from "./range-calendar-grid-row.svelte";
|
||||
import Heading from "./range-calendar-heading.svelte";
|
||||
import HeadCell from "./range-calendar-head-cell.svelte";
|
||||
import NextButton from "./range-calendar-next-button.svelte";
|
||||
import PrevButton from "./range-calendar-prev-button.svelte";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import Root from './range-calendar.svelte';
|
||||
import Cell from './range-calendar-cell.svelte';
|
||||
import Day from './range-calendar-day.svelte';
|
||||
import Grid from './range-calendar-grid.svelte';
|
||||
import Header from './range-calendar-header.svelte';
|
||||
import Months from './range-calendar-months.svelte';
|
||||
import GridRow from './range-calendar-grid-row.svelte';
|
||||
import Heading from './range-calendar-heading.svelte';
|
||||
import HeadCell from './range-calendar-head-cell.svelte';
|
||||
import NextButton from './range-calendar-next-button.svelte';
|
||||
import PrevButton from './range-calendar-prev-button.svelte';
|
||||
|
||||
const GridHead = RangeCalendarPrimitive.GridHead;
|
||||
const GridBody = RangeCalendarPrimitive.GridBody;
|
||||
@ -28,5 +28,5 @@ export {
|
||||
NextButton,
|
||||
PrevButton,
|
||||
//
|
||||
Root as RangeCalendar,
|
||||
Root as RangeCalendar
|
||||
};
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,7 +12,7 @@
|
||||
<RangeCalendarPrimitive.Cell
|
||||
bind:ref
|
||||
class={cn(
|
||||
"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
|
||||
'[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -9,4 +9,4 @@
|
||||
}: RangeCalendarPrimitive.GridRowProps = $props();
|
||||
</script>
|
||||
|
||||
<RangeCalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
|
||||
<RangeCalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -11,6 +11,6 @@
|
||||
|
||||
<RangeCalendarPrimitive.Grid
|
||||
bind:ref
|
||||
class={cn("w-full border-collapse space-y-1", className)}
|
||||
class={cn('w-full border-collapse space-y-1', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -11,6 +11,6 @@
|
||||
|
||||
<RangeCalendarPrimitive.HeadCell
|
||||
bind:ref
|
||||
class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
|
||||
class={cn('text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -11,6 +11,6 @@
|
||||
|
||||
<RangeCalendarPrimitive.Header
|
||||
bind:ref
|
||||
class={cn("relative flex w-full items-center justify-between pt-1", className)}
|
||||
class={cn('relative flex w-full items-center justify-between pt-1', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -11,6 +11,6 @@
|
||||
|
||||
<RangeCalendarPrimitive.Heading
|
||||
bind:ref
|
||||
class={cn("text-sm font-medium", className)}
|
||||
class={cn('text-sm font-medium', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
|
||||
class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import ChevronRight from "@lucide/svelte/icons/chevron-right";
|
||||
import { buttonVariants } from "$lib/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import { buttonVariants } from '$lib/ui/button/index.js';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -19,8 +19,8 @@
|
||||
<RangeCalendarPrimitive.NextButton
|
||||
bind:ref
|
||||
class={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
|
||||
buttonVariants({ variant: 'outline' }),
|
||||
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
|
||||
className
|
||||
)}
|
||||
children={children || Fallback}
|
||||
|
@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
|
||||
import ChevronLeft from "@lucide/svelte/icons/chevron-left";
|
||||
import { buttonVariants } from "$lib/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
|
||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||
import { buttonVariants } from '$lib/ui/button/index.js';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -19,8 +19,8 @@
|
||||
<RangeCalendarPrimitive.PrevButton
|
||||
bind:ref
|
||||
class={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
|
||||
buttonVariants({ variant: 'outline' }),
|
||||
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
|
||||
className
|
||||
)}
|
||||
children={children || Fallback}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
|
||||
import * as RangeCalendar from "./index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
|
||||
import * as RangeCalendar from './index.js';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
value = $bindable(),
|
||||
placeholder = $bindable(),
|
||||
weekdayFormat = "short",
|
||||
weekdayFormat = 'short',
|
||||
class: className,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props();
|
||||
@ -18,7 +18,7 @@
|
||||
bind:value
|
||||
bind:placeholder
|
||||
{weekdayFormat}
|
||||
class={cn("p-3", className)}
|
||||
class={cn('p-3', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{#snippet children({ months, weekdays })}
|
||||
|
@ -1,11 +1,11 @@
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { Select as SelectPrimitive } from 'bits-ui';
|
||||
|
||||
import Group from "./select-group.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 Group from './select-group.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;
|
||||
|
||||
@ -24,5 +24,5 @@ export {
|
||||
Item as SelectItem,
|
||||
Content as SelectContent,
|
||||
Trigger as SelectTrigger,
|
||||
Separator as SelectSeparator,
|
||||
Separator as SelectSeparator
|
||||
};
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { Select as SelectPrimitive } from 'bits-ui';
|
||||
|
||||
let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
|
||||
</script>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { type WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from '$lib/utils.js';
|
||||
import { type WithElementRef } from 'bits-ui';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="select-label"
|
||||
class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { Separator as SeparatorPrimitive } from "bits-ui";
|
||||
import { Separator } from "$lib/ui/separator/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { Separator as SeparatorPrimitive } from 'bits-ui';
|
||||
import { Separator } from '$lib/ui/separator/index.js';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -13,6 +13,6 @@
|
||||
<Separator
|
||||
bind:ref
|
||||
data-slot="select-separator"
|
||||
class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -19,7 +19,7 @@
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
class={cn(
|
||||
'border-surface-1 bg-based hover:border-overlay text-text flex flex-row-reverse w-full cursor-pointer items-center justify-between gap-2 rounded-md border px-3 py-2 md:text-sm whitespace-nowrap shadow-xs transition-all',
|
||||
'border-surface-1 bg-based hover:border-overlay text-text flex w-full cursor-pointer flex-row-reverse items-center justify-between gap-2 rounded-md border px-3 py-2 whitespace-nowrap shadow-xs transition-all md:text-sm',
|
||||
|
||||
// Focus
|
||||
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
|
@ -1,7 +1,7 @@
|
||||
import Root from "./separator.svelte";
|
||||
import Root from './separator.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Separator,
|
||||
Root as Separator
|
||||
};
|
||||
|
@ -1,11 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { Separator as SeparatorPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Separator as SeparatorPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
orientation = "horizontal",
|
||||
orientation = 'horizontal',
|
||||
decorative = true,
|
||||
...restProps
|
||||
}: SeparatorPrimitive.RootProps = $props();
|
||||
@ -17,7 +17,7 @@
|
||||
{decorative}
|
||||
{orientation}
|
||||
class={cn(
|
||||
"bg-surface shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
|
||||
'bg-surface shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,13 +1,13 @@
|
||||
import { Dialog as SheetPrimitive } from "bits-ui";
|
||||
import { Dialog as SheetPrimitive } from 'bits-ui';
|
||||
import Root from './sheet.svelte';
|
||||
import Trigger from "./sheet-trigger.svelte";
|
||||
import Close from "./sheet-close.svelte";
|
||||
import Overlay from "./sheet-overlay.svelte";
|
||||
import Content from "./sheet-content.svelte";
|
||||
import Header from "./sheet-header.svelte";
|
||||
import Footer from "./sheet-footer.svelte";
|
||||
import Title from "./sheet-title.svelte";
|
||||
import Description from "./sheet-description.svelte";
|
||||
import Trigger from './sheet-trigger.svelte';
|
||||
import Close from './sheet-close.svelte';
|
||||
import Overlay from './sheet-overlay.svelte';
|
||||
import Content from './sheet-content.svelte';
|
||||
import Header from './sheet-header.svelte';
|
||||
import Footer from './sheet-footer.svelte';
|
||||
import Title from './sheet-title.svelte';
|
||||
import Description from './sheet-description.svelte';
|
||||
|
||||
const Portal = SheetPrimitive.Portal;
|
||||
|
||||
@ -32,5 +32,5 @@ export {
|
||||
Header as SheetHeader,
|
||||
Footer as SheetFooter,
|
||||
Title as SheetTitle,
|
||||
Description as SheetDescription,
|
||||
Description as SheetDescription
|
||||
};
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Dialog as SheetPrimitive } from "bits-ui";
|
||||
import { Dialog as SheetPrimitive } from 'bits-ui';
|
||||
|
||||
let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
|
||||
</script>
|
||||
|
@ -9,7 +9,7 @@
|
||||
'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
|
||||
left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
|
||||
right:
|
||||
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right max-w-2xs inset-y-0 right-0 h-full w-3/4 border-l'
|
||||
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 max-w-2xs border-l'
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
@ -51,7 +51,7 @@
|
||||
>
|
||||
{@render children?.()}
|
||||
<SheetPrimitive.Close
|
||||
class="rounded-xs focus:outline-hidden absolute right-4 top-4 cursor-pointer opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none"
|
||||
class="absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none"
|
||||
>
|
||||
<X class="size-4" />
|
||||
<span class="sr-only">Close</span>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Dialog as SheetPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Dialog as SheetPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,6 @@
|
||||
<SheetPrimitive.Description
|
||||
bind:ref
|
||||
data-slot="sheet-description"
|
||||
class={cn("text-text text-sm", className)}
|
||||
class={cn('text-text text-sm', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="sheet-footer"
|
||||
class={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
class={cn('mt-auto flex flex-col gap-2 p-4', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="sheet-header"
|
||||
class={cn("flex flex-col gap-1.5 p-4", className)}
|
||||
class={cn('flex flex-col gap-1.5 p-4', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Dialog as SheetPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Dialog as SheetPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -15,7 +15,7 @@
|
||||
bind:ref
|
||||
data-slot="sheet-overlay"
|
||||
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",
|
||||
'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',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Dialog as SheetPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Dialog as SheetPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,6 @@
|
||||
<SheetPrimitive.Title
|
||||
bind:ref
|
||||
data-slot="sheet-title"
|
||||
class={cn("text-text font-semibold", className)}
|
||||
class={cn('text-text font-semibold', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Dialog as SheetPrimitive } from "bits-ui";
|
||||
import { Dialog as SheetPrimitive } from 'bits-ui';
|
||||
|
||||
let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
|
||||
</script>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import Root from "./skeleton.svelte";
|
||||
import Root from './skeleton.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Skeleton,
|
||||
Root as Skeleton
|
||||
};
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef, WithoutChildren } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { WithElementRef, WithoutChildren } from 'bits-ui';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -13,6 +13,6 @@
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="skeleton"
|
||||
class={cn("bg-surface animate-pulse rounded-md", className)}
|
||||
class={cn('bg-surface animate-pulse rounded-md', className)}
|
||||
{...restProps}
|
||||
></div>
|
||||
|
@ -1 +1 @@
|
||||
export { default as Sonner } from "./sonner.svelte";
|
||||
export { default as Sonner } from './sonner.svelte';
|
||||
|
@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
|
||||
import { mode } from 'mode-watcher';
|
||||
|
||||
let { ...restProps }: SonnerProps = $props();
|
||||
</script>
|
||||
|
@ -1,11 +1,11 @@
|
||||
import Root from "./table.svelte";
|
||||
import Body from "./table-body.svelte";
|
||||
import Caption from "./table-caption.svelte";
|
||||
import Cell from "./table-cell.svelte";
|
||||
import Footer from "./table-footer.svelte";
|
||||
import Head from "./table-head.svelte";
|
||||
import Header from "./table-header.svelte";
|
||||
import Row from "./table-row.svelte";
|
||||
import Root from './table.svelte';
|
||||
import Body from './table-body.svelte';
|
||||
import Caption from './table-caption.svelte';
|
||||
import Cell from './table-cell.svelte';
|
||||
import Footer from './table-footer.svelte';
|
||||
import Head from './table-head.svelte';
|
||||
import Header from './table-header.svelte';
|
||||
import Row from './table-row.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
@ -24,5 +24,5 @@ export {
|
||||
Footer as TableFooter,
|
||||
Head as TableHead,
|
||||
Header as TableHeader,
|
||||
Row as TableRow,
|
||||
Row as TableRow
|
||||
};
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<tbody
|
||||
bind:this={ref}
|
||||
data-slot="table-body"
|
||||
class={cn("[&_tr:last-child]:border-0", className)}
|
||||
class={cn('[&_tr:last-child]:border-0', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<caption
|
||||
bind:this={ref}
|
||||
data-slot="table-caption"
|
||||
class={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
class={cn('text-muted-foreground mt-4 text-sm', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLTdAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLTdAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -15,7 +15,7 @@
|
||||
bind:this={ref}
|
||||
data-slot="table-cell"
|
||||
class={cn(
|
||||
"whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<tfoot
|
||||
bind:this={ref}
|
||||
data-slot="table-footer"
|
||||
class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
|
||||
class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLThAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLThAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -15,7 +15,7 @@
|
||||
bind:this={ref}
|
||||
data-slot="table-head"
|
||||
class={cn(
|
||||
"text-text h-10 whitespace-nowrap px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
'text-text h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,7 +14,7 @@
|
||||
<thead
|
||||
bind:this={ref}
|
||||
data-slot="table-header"
|
||||
class={cn("[&_tr]:border-b bg-mantle border-surface-1", className)}
|
||||
class={cn('bg-mantle border-surface-1 [&_tr]:border-b', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -15,7 +15,7 @@
|
||||
bind:this={ref}
|
||||
data-slot="table-row"
|
||||
class={cn(
|
||||
"data-[state=selected]:bg-surface border-b border-surface text-text transition-colors",
|
||||
'data-[state=selected]:bg-surface border-surface text-text border-b transition-colors',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLTableAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { HTMLTableAttributes } from 'svelte/elements';
|
||||
import type { WithElementRef } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -11,11 +11,14 @@
|
||||
}: WithElementRef<HTMLTableAttributes> = $props();
|
||||
</script>
|
||||
|
||||
<div data-slot="table-container" class="relative w-full bg-based rounded border border-surface-1 overflow-x-auto">
|
||||
<div
|
||||
data-slot="table-container"
|
||||
class="bg-based border-surface-1 relative w-full overflow-x-auto rounded border"
|
||||
>
|
||||
<table
|
||||
bind:this={ref}
|
||||
data-slot="table"
|
||||
class={cn("w-full caption-bottom text-sm", className)}
|
||||
class={cn('w-full caption-bottom text-sm', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import Root from "./tabs.svelte";
|
||||
import Content from "./tabs-content.svelte";
|
||||
import List from "./tabs-list.svelte";
|
||||
import Trigger from "./tabs-trigger.svelte";
|
||||
import Root from './tabs.svelte';
|
||||
import Content from './tabs-content.svelte';
|
||||
import List from './tabs-list.svelte';
|
||||
import Trigger from './tabs-trigger.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
@ -12,5 +12,5 @@ export {
|
||||
Root as Tabs,
|
||||
Content as TabsContent,
|
||||
List as TabsList,
|
||||
Trigger as TabsTrigger,
|
||||
Trigger as TabsTrigger
|
||||
};
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Tabs as TabsPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Tabs as TabsPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -12,6 +12,6 @@
|
||||
<TabsPrimitive.Content
|
||||
bind:ref
|
||||
data-slot="tabs-content"
|
||||
class={cn("flex-1 outline-none", className)}
|
||||
class={cn('flex-1 outline-none', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -1,19 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { Tabs as TabsPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Tabs as TabsPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: TabsPrimitive.ListProps = $props();
|
||||
let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
|
||||
</script>
|
||||
|
||||
<TabsPrimitive.List
|
||||
bind:ref
|
||||
data-slot="tabs-list"
|
||||
class={cn(
|
||||
"bg-based gap-1 inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||
'bg-based inline-flex h-9 w-fit items-center justify-center gap-1 rounded-lg p-[3px]',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Tabs as TabsPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Tabs as TabsPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -13,7 +13,7 @@
|
||||
bind:ref
|
||||
data-slot="tabs-trigger"
|
||||
class={cn(
|
||||
"data-[state=active]:bg-surface hover:bg-surface cursor-pointer text-text inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
"data-[state=active]:bg-surface hover:bg-surface text-text inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Tabs as TabsPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Tabs as TabsPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
@ -14,6 +14,6 @@
|
||||
bind:ref
|
||||
bind:value
|
||||
data-slot="tabs"
|
||||
class={cn("flex flex-col gap-2", className)}
|
||||
class={cn('flex flex-col gap-2', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
@ -7,24 +7,23 @@ export function cn(...inputs: ClassValue[]) {
|
||||
|
||||
export async function attempt<T, E = Error>(
|
||||
func: (() => T) | Promise<T>,
|
||||
handler?: ((error: E) => void) | 'throw',
|
||||
): Promise<{ result: T | null, error: E | null }> {
|
||||
handler?: ((error: E) => void) | 'throw'
|
||||
): Promise<{ result: T | null; error: E | null }> {
|
||||
try {
|
||||
const result = await (func instanceof Promise ? func : Promise.resolve().then(func))
|
||||
return { result, error: null }
|
||||
}
|
||||
catch (error) {
|
||||
const result = await (func instanceof Promise ? func : Promise.resolve().then(func));
|
||||
return { result, error: null };
|
||||
} catch (error) {
|
||||
if (handler === 'throw') {
|
||||
throw error
|
||||
throw error;
|
||||
}
|
||||
if (handler) {
|
||||
handler(error as E)
|
||||
handler(error as E);
|
||||
}
|
||||
|
||||
return { result: null, error: error as E }
|
||||
return { result: null, error: error as E };
|
||||
}
|
||||
}
|
||||
|
||||
export function delay(ms: number) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user