@webamoki/web-svelte 2.2.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/shadcn/components/ui/checkbox/checkbox.svelte +39 -0
- package/dist/shadcn/components/ui/checkbox/checkbox.svelte.d.ts +4 -0
- package/dist/shadcn/components/ui/checkbox/index.d.ts +2 -0
- package/dist/shadcn/components/ui/checkbox/index.js +4 -0
- package/dist/shared/components/form/fields/CheckboxField.svelte +55 -0
- package/dist/shared/components/form/fields/CheckboxField.svelte.d.ts +37 -0
- package/dist/shared/components/form/index.d.ts +2 -1
- package/dist/shared/components/form/index.js +2 -1
- package/dist/shared/utils/remote.d.ts +2 -2
- package/dist/shared/utils/remote.js +8 -13
- package/package.json +2 -2
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
|
|
3
|
+
import CheckIcon from '@lucide/svelte/icons/check';
|
|
4
|
+
import MinusIcon from '@lucide/svelte/icons/minus';
|
|
5
|
+
import { Checkbox as CheckboxPrimitive } from 'bits-ui';
|
|
6
|
+
|
|
7
|
+
let {
|
|
8
|
+
checked = $bindable(false),
|
|
9
|
+
class: className,
|
|
10
|
+
indeterminate = $bindable(false),
|
|
11
|
+
ref = $bindable(null),
|
|
12
|
+
...restProps
|
|
13
|
+
}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<CheckboxPrimitive.Root
|
|
17
|
+
class={cn(
|
|
18
|
+
'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-gray-300 transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-checked:bg-primary',
|
|
19
|
+
className
|
|
20
|
+
)}
|
|
21
|
+
data-slot="checkbox"
|
|
22
|
+
bind:ref
|
|
23
|
+
bind:checked
|
|
24
|
+
bind:indeterminate
|
|
25
|
+
{...restProps}
|
|
26
|
+
>
|
|
27
|
+
{#snippet children({ checked, indeterminate })}
|
|
28
|
+
<div
|
|
29
|
+
class="grid place-content-center text-current transition-none [&>svg]:size-3.5"
|
|
30
|
+
data-slot="checkbox-indicator"
|
|
31
|
+
>
|
|
32
|
+
{#if checked}
|
|
33
|
+
<CheckIcon />
|
|
34
|
+
{:else if indeterminate}
|
|
35
|
+
<MinusIcon />
|
|
36
|
+
{/if}
|
|
37
|
+
</div>
|
|
38
|
+
{/snippet}
|
|
39
|
+
</CheckboxPrimitive.Root>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { Checkbox as CheckboxPrimitive } from 'bits-ui';
|
|
2
|
+
declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
|
|
3
|
+
type Checkbox = ReturnType<typeof Checkbox>;
|
|
4
|
+
export default Checkbox;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<script generics="T extends Record<string, unknown>, U extends FormPath<T>, M" lang="ts">
|
|
2
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
3
|
+
|
|
4
|
+
import { Checkbox } from '../../../../shadcn/components/ui/checkbox/index.js';
|
|
5
|
+
import { cn } from '../../../../shadcn/utils.js';
|
|
6
|
+
import { Control, Description, Field, Label } from 'formsnap';
|
|
7
|
+
|
|
8
|
+
import type { FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
9
|
+
|
|
10
|
+
import Errors from '../Errors.svelte';
|
|
11
|
+
|
|
12
|
+
interface Props extends FieldWrapperProps<T, U, M> {
|
|
13
|
+
checked?: boolean;
|
|
14
|
+
class?: string;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
let {
|
|
19
|
+
checked = $bindable(false),
|
|
20
|
+
class: className,
|
|
21
|
+
description,
|
|
22
|
+
disabled,
|
|
23
|
+
form,
|
|
24
|
+
label,
|
|
25
|
+
name,
|
|
26
|
+
...restProps
|
|
27
|
+
}: Props = $props();
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<Field {name} {form}>
|
|
31
|
+
<div class={cn('space-y-1', className)}>
|
|
32
|
+
<Control>
|
|
33
|
+
{#snippet children({ props })}
|
|
34
|
+
<div class="flex items-center gap-2">
|
|
35
|
+
<Checkbox {disabled} bind:checked {...props} {...restProps} />
|
|
36
|
+
{#if label}
|
|
37
|
+
<Label
|
|
38
|
+
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
39
|
+
>
|
|
40
|
+
{label}
|
|
41
|
+
{#if props['aria-required'] === 'true'}
|
|
42
|
+
<span class="text-red-500">*</span>
|
|
43
|
+
{/if}
|
|
44
|
+
</Label>
|
|
45
|
+
{/if}
|
|
46
|
+
</div>
|
|
47
|
+
{#if description}
|
|
48
|
+
<Description class="ml-6 text-sm text-muted-foreground">{description}</Description>
|
|
49
|
+
{/if}
|
|
50
|
+
{/snippet}
|
|
51
|
+
</Control>
|
|
52
|
+
|
|
53
|
+
<Errors class="ml-6" />
|
|
54
|
+
</div>
|
|
55
|
+
</Field>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export default CheckboxField;
|
|
2
|
+
type CheckboxField<T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
|
|
3
|
+
$$bindings?: "checked" | undefined;
|
|
4
|
+
} & {};
|
|
5
|
+
declare const CheckboxField: $$IsomorphicComponent;
|
|
6
|
+
import { FormPath } from 'sveltekit-superforms';
|
|
7
|
+
type Props = FieldWrapperProps<T, U, M> & {
|
|
8
|
+
checked?: boolean | undefined;
|
|
9
|
+
class?: string | undefined;
|
|
10
|
+
disabled?: boolean | undefined;
|
|
11
|
+
};
|
|
12
|
+
interface $$IsomorphicComponent {
|
|
13
|
+
new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import("svelte").ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>["props"]>>): import("svelte").SvelteComponent<ReturnType<__sveltets_Render<T, U, M>["props"]>, ReturnType<__sveltets_Render<T, U, M>["events"]>, ReturnType<__sveltets_Render<T, U, M>["slots"]>> & {
|
|
14
|
+
$$bindings?: ReturnType<__sveltets_Render<T, U, M>["bindings"]>;
|
|
15
|
+
} & ReturnType<__sveltets_Render<T, U, M>["exports"]>;
|
|
16
|
+
<T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>["props"]> & {}): ReturnType<__sveltets_Render<T, U, M>["exports"]>;
|
|
17
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>["bindings"]>;
|
|
18
|
+
}
|
|
19
|
+
declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
|
|
20
|
+
props(): ReturnType<typeof $$render<T, U, M>>["props"];
|
|
21
|
+
events(): ReturnType<typeof $$render<T, U, M>>["events"];
|
|
22
|
+
slots(): ReturnType<typeof $$render<T, U, M>>["slots"];
|
|
23
|
+
bindings(): "checked";
|
|
24
|
+
exports(): {};
|
|
25
|
+
}
|
|
26
|
+
declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
|
|
27
|
+
props: FieldWrapperProps<T, U, M> & {
|
|
28
|
+
checked?: boolean;
|
|
29
|
+
class?: string;
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
};
|
|
32
|
+
exports: {};
|
|
33
|
+
bindings: "checked";
|
|
34
|
+
slots: {};
|
|
35
|
+
events: {};
|
|
36
|
+
};
|
|
37
|
+
import { FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import Button from './Button.svelte';
|
|
2
|
+
import CheckboxField from './fields/CheckboxField.svelte';
|
|
2
3
|
import ChoiceField from './fields/ChoiceField.svelte';
|
|
3
4
|
import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
|
|
4
5
|
import DateField from './fields/DateField.svelte';
|
|
@@ -15,4 +16,4 @@ import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
|
|
|
15
16
|
import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
|
|
16
17
|
import Form from './Form.svelte';
|
|
17
18
|
import IconInputWrapper from './IconInputWrapper.svelte';
|
|
18
|
-
export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
19
|
+
export { Button, CheckboxField, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import Button from './Button.svelte';
|
|
2
|
+
import CheckboxField from './fields/CheckboxField.svelte';
|
|
2
3
|
import ChoiceField from './fields/ChoiceField.svelte';
|
|
3
4
|
import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
|
|
4
5
|
import DateField from './fields/DateField.svelte';
|
|
@@ -15,4 +16,4 @@ import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
|
|
|
15
16
|
import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
|
|
16
17
|
import Form from './Form.svelte';
|
|
17
18
|
import IconInputWrapper from './IconInputWrapper.svelte';
|
|
18
|
-
export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
19
|
+
export { Button, CheckboxField, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
@@ -24,5 +24,5 @@ export declare function guardedCommand<Schema extends StandardSchemaV1, Output>(
|
|
|
24
24
|
export declare function guardedCommandVoid<Output>(check: CheckFunction, fn: () => Promise<ResponseResult<Output>>): RemoteCommand<void, Promise<ResponseResult<Output>>>;
|
|
25
25
|
export declare function guardedForm<Schema extends StandardSchemaV1<RemoteFormInput, Record<string, unknown>>, Output>(schema: Schema, check: CheckFunction, fn: (output: StandardSchemaV1.InferOutput<Schema>, issue: InvalidField<StandardSchemaV1.InferInput<Schema>>) => Promise<Output>): RemoteForm<StandardSchemaV1.InferInput<Schema>, Output>;
|
|
26
26
|
export declare function guardedFormVoid<Output>(check: CheckFunction, fn: () => Promise<Output>): RemoteForm<void, Output>;
|
|
27
|
-
export declare function guardedQuery<Schema extends StandardSchemaV1, Output>(check: CheckFunction, schema: Schema, fn: (output: StandardSchemaV1.InferOutput<Schema>) => Promise<
|
|
28
|
-
export declare function guardedQueryVoid<Output>(check: CheckFunction, fn: () => Promise<
|
|
27
|
+
export declare function guardedQuery<Schema extends StandardSchemaV1, Output>(check: CheckFunction, schema: Schema, fn: (output: StandardSchemaV1.InferOutput<Schema>) => Promise<Output>): RemoteQueryFunction<StandardSchemaV1.InferInput<Schema>, Output>;
|
|
28
|
+
export declare function guardedQueryVoid<Output>(check: CheckFunction, fn: () => Promise<Output>): RemoteQueryFunction<void, Output>;
|
|
@@ -38,37 +38,32 @@ export function guardedCommandVoid(check, fn) {
|
|
|
38
38
|
/* Guards form remote function with a check function. */
|
|
39
39
|
export function guardedForm(schema, check, fn) {
|
|
40
40
|
return form(schema, async (output, issue) => {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
if (!outcome.ok)
|
|
44
|
-
error(outcome.error.code, outcome.error.message);
|
|
41
|
+
// Enforce auth check or throw sveltekit error
|
|
42
|
+
ResponseResult.unwrap(await check());
|
|
45
43
|
return await fn(output, issue);
|
|
46
44
|
});
|
|
47
45
|
}
|
|
48
46
|
/* Guards input-less form remote function with a check function. */
|
|
49
47
|
export function guardedFormVoid(check, fn) {
|
|
50
48
|
return form(async () => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
error(outcome.error.code, outcome.error.message);
|
|
49
|
+
// Enforce auth check or throw sveltekit error
|
|
50
|
+
ResponseResult.unwrap(await check());
|
|
54
51
|
return await fn();
|
|
55
52
|
});
|
|
56
53
|
}
|
|
57
54
|
/* Guards query remote function with a check function. */
|
|
58
55
|
export function guardedQuery(check, schema, fn) {
|
|
59
56
|
return query(schema, async (output) => {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
return Result.err(outcome.error);
|
|
57
|
+
// Enforce auth check or throw sveltekit error
|
|
58
|
+
ResponseResult.unwrap(await check());
|
|
63
59
|
return await fn(output);
|
|
64
60
|
});
|
|
65
61
|
}
|
|
66
62
|
/* Guards input-less query remote function with a check function. */
|
|
67
63
|
export function guardedQueryVoid(check, fn) {
|
|
68
64
|
return query(async () => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
return Result.err(outcome.error);
|
|
65
|
+
// Enforce auth check or throw sveltekit error
|
|
66
|
+
ResponseResult.unwrap(await check());
|
|
72
67
|
return await fn();
|
|
73
68
|
});
|
|
74
69
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public",
|
|
5
5
|
"provenance": true
|
|
6
6
|
},
|
|
7
|
-
"version": "2.
|
|
7
|
+
"version": "2.3.0",
|
|
8
8
|
"license": "MIT",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
"@eslint/compat": "^2.0.3",
|
|
75
75
|
"@eslint/js": "^9.39.4",
|
|
76
76
|
"@internationalized/date": "^3.12.0",
|
|
77
|
+
"@lucide/svelte": "^1.7.0",
|
|
77
78
|
"@standard-schema/spec": "^1.1.0",
|
|
78
79
|
"@sveltejs/adapter-static": "^3.0.10",
|
|
79
80
|
"@sveltejs/kit": "^2.55.0",
|
|
@@ -116,7 +117,6 @@
|
|
|
116
117
|
"svelte"
|
|
117
118
|
],
|
|
118
119
|
"dependencies": {
|
|
119
|
-
"@lucide/svelte": "^1.6.0",
|
|
120
120
|
"aws4fetch": "^1.0.20",
|
|
121
121
|
"bits-ui": "^2.16.3",
|
|
122
122
|
"devalue": "^5.6.4",
|