@pzerelles/headlessui-svelte 2.1.2-next.31 → 2.1.2-next.33
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/button/Button.svelte +84 -55
- package/dist/button/Button.svelte.d.ts +4 -32
- package/dist/checkbox/Checkbox.svelte +177 -121
- package/dist/checkbox/Checkbox.svelte.d.ts +14 -32
- package/dist/close-button/CloseButton.svelte +10 -7
- package/dist/close-button/CloseButton.svelte.d.ts +2 -44
- package/dist/data-interactive/DataInteractive.svelte +49 -37
- package/dist/data-interactive/DataInteractive.svelte.d.ts +7 -30
- package/dist/description/Description.svelte +35 -22
- package/dist/description/Description.svelte.d.ts +7 -28
- package/dist/dialog/Dialog.svelte +326 -232
- package/dist/dialog/Dialog.svelte.d.ts +4 -42
- package/dist/dialog/DialogBackdrop.svelte +33 -16
- package/dist/dialog/DialogBackdrop.svelte.d.ts +4 -29
- package/dist/dialog/DialogPanel.svelte +60 -29
- package/dist/dialog/DialogPanel.svelte.d.ts +4 -30
- package/dist/dialog/DialogTitle.svelte +51 -24
- package/dist/dialog/DialogTitle.svelte.d.ts +6 -27
- package/dist/field/Field.svelte +44 -28
- package/dist/field/Field.svelte.d.ts +4 -30
- package/dist/fieldset/Fieldset.svelte +48 -30
- package/dist/fieldset/Fieldset.svelte.d.ts +5 -31
- package/dist/focus-trap/FocusTrap.svelte +430 -298
- package/dist/focus-trap/FocusTrap.svelte.d.ts +5 -34
- package/dist/hooks/use-inert-others.svelte.js +10 -10
- package/dist/hooks/use-resolve-button-type.svelte.js +0 -1
- package/dist/input/Input.svelte +95 -54
- package/dist/input/Input.svelte.d.ts +13 -27
- package/dist/internal/FloatingProvider.svelte +14 -9
- package/dist/internal/FocusSentinel.svelte +49 -40
- package/dist/internal/ForcePortalRoot.svelte +7 -3
- package/dist/internal/FormFields.svelte +47 -34
- package/dist/internal/FormFieldsProvider.svelte +9 -5
- package/dist/internal/FormResolver.svelte +25 -16
- package/dist/internal/Hidden.svelte +45 -38
- package/dist/internal/Hidden.svelte.d.ts +4 -30
- package/dist/internal/MainTreeProvider.svelte +90 -37
- package/dist/internal/Portal.svelte +18 -14
- package/dist/label/Label.svelte +100 -59
- package/dist/label/Label.svelte.d.ts +7 -32
- package/dist/legend/Legend.svelte +27 -4
- package/dist/legend/Legend.svelte.d.ts +4 -3
- package/dist/listbox/Listbox.svelte +518 -391
- package/dist/listbox/Listbox.svelte.d.ts +11 -35
- package/dist/listbox/ListboxButton.svelte +175 -128
- package/dist/listbox/ListboxButton.svelte.d.ts +5 -32
- package/dist/listbox/ListboxOption.svelte +171 -130
- package/dist/listbox/ListboxOption.svelte.d.ts +12 -26
- package/dist/listbox/ListboxOptions.svelte +403 -305
- package/dist/listbox/ListboxOptions.svelte.d.ts +4 -38
- package/dist/listbox/ListboxSelectedOption.svelte +40 -19
- package/dist/listbox/ListboxSelectedOption.svelte.d.ts +8 -33
- package/dist/menu/Menu.svelte +76 -52
- package/dist/menu/Menu.svelte.d.ts +3 -31
- package/dist/menu/MenuButton.svelte +158 -118
- package/dist/menu/MenuButton.svelte.d.ts +4 -34
- package/dist/menu/MenuHeading.svelte +34 -15
- package/dist/menu/MenuHeading.svelte.d.ts +4 -31
- package/dist/menu/MenuItem.svelte +143 -108
- package/dist/menu/MenuItem.svelte.d.ts +5 -32
- package/dist/menu/MenuItems.svelte +301 -230
- package/dist/menu/MenuItems.svelte.d.ts +4 -38
- package/dist/menu/MenuSection.svelte +26 -10
- package/dist/menu/MenuSection.svelte.d.ts +5 -29
- package/dist/menu/MenuSeparator.svelte +20 -5
- package/dist/menu/MenuSeparator.svelte.d.ts +5 -28
- package/dist/popover/Popover.svelte +217 -151
- package/dist/popover/Popover.svelte.d.ts +4 -30
- package/dist/popover/PopoverBackdrop.svelte +71 -42
- package/dist/popover/PopoverBackdrop.svelte.d.ts +6 -34
- package/dist/popover/PopoverButton.svelte +302 -222
- package/dist/popover/PopoverButton.svelte.d.ts +6 -29
- package/dist/popover/PopoverGroup.svelte +64 -36
- package/dist/popover/PopoverGroup.svelte.d.ts +5 -28
- package/dist/popover/PopoverPanel.svelte +335 -248
- package/dist/popover/PopoverPanel.svelte.d.ts +5 -36
- package/dist/popover/index.d.ts +1 -1
- package/dist/portal/InternalPortal.svelte +143 -86
- package/dist/portal/InternalPortal.svelte.d.ts +4 -30
- package/dist/portal/Portal.svelte +8 -4
- package/dist/portal/Portal.svelte.d.ts +2 -18
- package/dist/portal/PortalGroup.svelte +23 -10
- package/dist/portal/PortalGroup.svelte.d.ts +3 -31
- package/dist/select/Select.svelte +100 -69
- package/dist/select/Select.svelte.d.ts +5 -32
- package/dist/switch/Switch.svelte +181 -133
- package/dist/switch/Switch.svelte.d.ts +5 -38
- package/dist/switch/SwitchGroup.svelte +45 -32
- package/dist/switch/SwitchGroup.svelte.d.ts +7 -28
- package/dist/tabs/Tab.svelte +195 -143
- package/dist/tabs/Tab.svelte.d.ts +4 -32
- package/dist/tabs/TabGroup.svelte +87 -57
- package/dist/tabs/TabGroup.svelte.d.ts +4 -34
- package/dist/tabs/TabList.svelte +31 -12
- package/dist/tabs/TabList.svelte.d.ts +5 -28
- package/dist/tabs/TabPanel.svelte +69 -44
- package/dist/tabs/TabPanel.svelte.d.ts +4 -34
- package/dist/tabs/TabPanels.svelte +19 -8
- package/dist/tabs/TabPanels.svelte.d.ts +5 -27
- package/dist/textarea/Textarea.svelte +87 -54
- package/dist/textarea/Textarea.svelte.d.ts +13 -27
- package/dist/transition/InternalTransitionChild.svelte +267 -171
- package/dist/transition/InternalTransitionChild.svelte.d.ts +3 -33
- package/dist/transition/Transition.svelte +88 -67
- package/dist/transition/Transition.svelte.d.ts +3 -36
- package/dist/transition/TransitionChild.svelte +31 -12
- package/dist/transition/TransitionChild.svelte.d.ts +8 -35
- package/dist/transition/context.svelte.js +7 -7
- package/dist/utils/DisabledProvider.svelte +7 -3
- package/dist/utils/ElementOrComponent.svelte +88 -24
- package/dist/utils/ElementOrComponent.svelte.d.ts +32 -27
- package/dist/utils/StableCollection.svelte +54 -36
- package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +27 -12
- package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +88 -44
- package/dist/utils/state.js +4 -4
- package/dist/utils/types.d.ts +14 -12
- package/package.json +12 -12
- package/dist/combobox/Combobox.svelte +0 -6
- package/dist/combobox/Combobox.svelte.d.ts +0 -50
- package/dist/utils/Generic.svelte +0 -46
- package/dist/utils/Generic.svelte.d.ts +0 -32
- package/dist/utils/alternative-types.d.ts +0 -20
- package/dist/utils/alternative-types.js +0 -1
|
@@ -1,61 +1,90 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Props } from "../utils/types.js"
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
return disabled;
|
|
23
|
-
}
|
|
24
|
-
})
|
|
25
|
-
);
|
|
26
|
-
const { pressed: active, pressProps } = $derived(
|
|
27
|
-
useActivePress({
|
|
28
|
-
get disabled() {
|
|
29
|
-
return disabled;
|
|
30
|
-
}
|
|
31
|
-
})
|
|
32
|
-
);
|
|
33
|
-
const { isFocusVisible: focus, focusProps } = $derived(
|
|
34
|
-
useFocusRing({
|
|
35
|
-
get autofocus() {
|
|
36
|
-
return autofocus;
|
|
4
|
+
const DEFAULT_BUTTON_TAG = "button" as const
|
|
5
|
+
|
|
6
|
+
type ButtonRenderPropArg = {
|
|
7
|
+
disabled: boolean
|
|
8
|
+
hover: boolean
|
|
9
|
+
focus: boolean
|
|
10
|
+
active: boolean
|
|
11
|
+
autofocus: boolean
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export type ButtonProps = Props<
|
|
15
|
+
typeof DEFAULT_BUTTON_TAG,
|
|
16
|
+
ButtonRenderPropArg,
|
|
17
|
+
{
|
|
18
|
+
element?: HTMLElement
|
|
19
|
+
disabled?: boolean
|
|
20
|
+
autofocus?: boolean
|
|
21
|
+
type?: "button" | "submit" | "reset"
|
|
37
22
|
}
|
|
23
|
+
>
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<script lang="ts">
|
|
27
|
+
import { useActivePress } from "../hooks/use-active-press.svelte.js"
|
|
28
|
+
import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
|
|
29
|
+
import { useDisabled } from "../hooks/use-disabled.js"
|
|
30
|
+
import { useHover } from "../hooks/use-hover.svelte.js"
|
|
31
|
+
import { mergeProps } from "../utils/render.js"
|
|
32
|
+
import ElementOrComponent from "../utils/ElementOrComponent.svelte"
|
|
33
|
+
|
|
34
|
+
const providedDisabled = useDisabled()
|
|
35
|
+
|
|
36
|
+
let {
|
|
37
|
+
element = $bindable(),
|
|
38
|
+
disabled: ownDisabled = false,
|
|
39
|
+
autofocus = false,
|
|
40
|
+
type = "button",
|
|
41
|
+
...theirProps
|
|
42
|
+
}: ButtonProps = $props()
|
|
43
|
+
|
|
44
|
+
const disabled = $derived(providedDisabled.current || ownDisabled)
|
|
45
|
+
|
|
46
|
+
const { isHovered: hover, hoverProps } = $derived(
|
|
47
|
+
useHover({
|
|
48
|
+
get disabled() {
|
|
49
|
+
return disabled
|
|
50
|
+
},
|
|
51
|
+
})
|
|
52
|
+
)
|
|
53
|
+
const { pressed: active, pressProps } = $derived(
|
|
54
|
+
useActivePress({
|
|
55
|
+
get disabled() {
|
|
56
|
+
return disabled
|
|
57
|
+
},
|
|
58
|
+
})
|
|
59
|
+
)
|
|
60
|
+
const { isFocusVisible: focus, focusProps } = $derived(
|
|
61
|
+
useFocusRing({
|
|
62
|
+
get autofocus() {
|
|
63
|
+
return autofocus
|
|
64
|
+
},
|
|
65
|
+
})
|
|
66
|
+
)
|
|
67
|
+
|
|
68
|
+
const slot = $derived({
|
|
69
|
+
disabled,
|
|
70
|
+
hover,
|
|
71
|
+
focus,
|
|
72
|
+
active,
|
|
73
|
+
autofocus,
|
|
38
74
|
})
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
disabled: disabled || void 0,
|
|
52
|
-
autofocus
|
|
53
|
-
},
|
|
54
|
-
focusProps,
|
|
55
|
-
hoverProps,
|
|
56
|
-
pressProps
|
|
75
|
+
|
|
76
|
+
const ourProps = $derived(
|
|
77
|
+
mergeProps(
|
|
78
|
+
{
|
|
79
|
+
type,
|
|
80
|
+
disabled: disabled || undefined,
|
|
81
|
+
autofocus,
|
|
82
|
+
},
|
|
83
|
+
focusProps,
|
|
84
|
+
hoverProps,
|
|
85
|
+
pressProps
|
|
86
|
+
)
|
|
57
87
|
)
|
|
58
|
-
);
|
|
59
88
|
</script>
|
|
60
89
|
|
|
61
|
-
<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:
|
|
90
|
+
<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:element />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Props
|
|
1
|
+
import type { Props } from "../utils/types.js";
|
|
2
2
|
declare const DEFAULT_BUTTON_TAG: "button";
|
|
3
3
|
type ButtonRenderPropArg = {
|
|
4
4
|
disabled: boolean;
|
|
@@ -7,39 +7,11 @@ type ButtonRenderPropArg = {
|
|
|
7
7
|
active: boolean;
|
|
8
8
|
autofocus: boolean;
|
|
9
9
|
};
|
|
10
|
-
type
|
|
11
|
-
|
|
10
|
+
export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, {
|
|
11
|
+
element?: HTMLElement;
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
autofocus?: boolean;
|
|
14
14
|
type?: "button" | "submit" | "reset";
|
|
15
15
|
}>;
|
|
16
|
-
declare
|
|
17
|
-
props(): {
|
|
18
|
-
as?: TTag | undefined;
|
|
19
|
-
} & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "type"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
|
|
20
|
-
children?: import("svelte").Snippet<[{
|
|
21
|
-
slot: ButtonRenderPropArg;
|
|
22
|
-
props: Record<string, any>;
|
|
23
|
-
}]> | undefined;
|
|
24
|
-
class?: string | ((bag: ButtonRenderPropArg) => string) | null | undefined;
|
|
25
|
-
ref?: HTMLElement;
|
|
26
|
-
} & {
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
autofocus?: boolean;
|
|
29
|
-
type?: "button" | "submit" | "reset";
|
|
30
|
-
};
|
|
31
|
-
events(): {};
|
|
32
|
-
slots(): {};
|
|
33
|
-
bindings(): "ref";
|
|
34
|
-
exports(): {};
|
|
35
|
-
}
|
|
36
|
-
interface $$IsomorphicComponent {
|
|
37
|
-
new <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
|
|
38
|
-
$$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
|
|
39
|
-
} & ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
40
|
-
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
41
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
42
|
-
}
|
|
43
|
-
declare const Button: $$IsomorphicComponent;
|
|
44
|
-
type Button<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof Button<TTag>>;
|
|
16
|
+
declare const Button: import("svelte").Component<ButtonProps, {}, "element">;
|
|
45
17
|
export default Button;
|
|
@@ -1,129 +1,184 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Props } from "../utils/types.js"
|
|
3
|
+
|
|
4
|
+
const DEFAULT_CHECKBOX_TAG = "span" as const
|
|
5
|
+
|
|
6
|
+
type CheckboxRenderPropArg = {
|
|
7
|
+
checked: boolean
|
|
8
|
+
changing: boolean
|
|
9
|
+
focus: boolean
|
|
10
|
+
active: boolean
|
|
11
|
+
hover: boolean
|
|
12
|
+
autofocus: boolean
|
|
13
|
+
disabled: boolean
|
|
14
|
+
indeterminate: boolean
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
type CheckboxPropsWeControl =
|
|
18
|
+
| "aria-checked"
|
|
19
|
+
| "aria-describedby"
|
|
20
|
+
| "aria-disabled"
|
|
21
|
+
| "aria-labelledby"
|
|
22
|
+
| "role"
|
|
23
|
+
| "tabIndex"
|
|
24
|
+
|
|
25
|
+
export type CheckboxProps<TType = string> = Props<
|
|
26
|
+
typeof DEFAULT_CHECKBOX_TAG,
|
|
27
|
+
CheckboxRenderPropArg,
|
|
28
|
+
{
|
|
29
|
+
element?: HTMLElement
|
|
30
|
+
id?: string
|
|
31
|
+
value?: TType
|
|
32
|
+
disabled?: boolean
|
|
33
|
+
indeterminate?: boolean
|
|
34
|
+
checked?: boolean
|
|
35
|
+
defaultChecked?: boolean
|
|
36
|
+
autofocus?: boolean
|
|
37
|
+
form?: string
|
|
38
|
+
name?: string
|
|
39
|
+
onchange?: (checked: boolean) => void
|
|
40
|
+
}
|
|
41
|
+
>
|
|
2
42
|
</script>
|
|
3
43
|
|
|
4
|
-
<script lang="ts" generics="TType
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
44
|
+
<script lang="ts" generics="TType">
|
|
45
|
+
import { tick } from "svelte"
|
|
46
|
+
import { attemptSubmit } from "../utils/form.js"
|
|
47
|
+
import { useProvidedId, htmlid } from "../utils/id.js"
|
|
48
|
+
import { useActivePress } from "../hooks/use-active-press.svelte.js"
|
|
49
|
+
import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
|
|
50
|
+
import FormFields from "../internal/FormFields.svelte"
|
|
51
|
+
import { useDisabled } from "../hooks/use-disabled.js"
|
|
52
|
+
import { useLabelledBy } from "../label/context.svelte.js"
|
|
53
|
+
import { useDescribedBy } from "../description/context.svelte.js"
|
|
54
|
+
import { useHover } from "../hooks/use-hover.svelte.js"
|
|
55
|
+
import { mergeProps } from "../utils/render.js"
|
|
56
|
+
import ElementOrComponent from "../utils/ElementOrComponent.svelte"
|
|
57
|
+
import { useControllable } from "../hooks/use-controllable.svelte.js"
|
|
58
|
+
|
|
59
|
+
const internalId = htmlid()
|
|
60
|
+
const providedId = useProvidedId()
|
|
61
|
+
const providedDisabled = useDisabled()
|
|
62
|
+
|
|
63
|
+
let {
|
|
64
|
+
element = $bindable(),
|
|
65
|
+
id = providedId || `headlessui-checkbox-${internalId}`,
|
|
66
|
+
disabled: theirDisabled = false,
|
|
67
|
+
autofocus = false,
|
|
68
|
+
checked: controlledChecked = $bindable(),
|
|
69
|
+
defaultChecked: _defaultChecked,
|
|
70
|
+
onchange: controlledOnChange,
|
|
71
|
+
name,
|
|
72
|
+
value,
|
|
73
|
+
form,
|
|
74
|
+
indeterminate = false,
|
|
75
|
+
...theirProps
|
|
76
|
+
}: CheckboxProps<TType> = $props()
|
|
77
|
+
|
|
78
|
+
const defaultChecked = _defaultChecked
|
|
79
|
+
const controllable = useControllable(
|
|
80
|
+
{
|
|
81
|
+
get controlledValue() {
|
|
82
|
+
return controlledChecked
|
|
83
|
+
},
|
|
84
|
+
set controlledValue(checked) {
|
|
85
|
+
controlledChecked = checked
|
|
86
|
+
},
|
|
39
87
|
},
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
88
|
+
controlledOnChange,
|
|
89
|
+
defaultChecked ?? false
|
|
90
|
+
)
|
|
91
|
+
const { value: checked, onchange } = $derived(controllable)
|
|
92
|
+
|
|
93
|
+
const disabled = $derived(providedDisabled.current || theirDisabled)
|
|
94
|
+
|
|
95
|
+
const { isHovered: hover, hoverProps } = $derived(
|
|
96
|
+
useHover({
|
|
97
|
+
get disabled() {
|
|
98
|
+
return disabled
|
|
99
|
+
},
|
|
100
|
+
})
|
|
101
|
+
)
|
|
102
|
+
const { pressed: active, pressProps } = $derived(
|
|
103
|
+
useActivePress({
|
|
104
|
+
get disabled() {
|
|
105
|
+
return disabled
|
|
106
|
+
},
|
|
107
|
+
})
|
|
108
|
+
)
|
|
109
|
+
const { isFocusVisible: focus, focusProps } = $derived(
|
|
110
|
+
useFocusRing({
|
|
111
|
+
get autofocus() {
|
|
112
|
+
return autofocus
|
|
113
|
+
},
|
|
114
|
+
})
|
|
115
|
+
)
|
|
116
|
+
|
|
117
|
+
const labelledBy = useLabelledBy()
|
|
118
|
+
const describedBy = useDescribedBy()
|
|
119
|
+
|
|
120
|
+
let changing = $state(false)
|
|
121
|
+
|
|
122
|
+
const toggle = () => {
|
|
123
|
+
changing = true
|
|
124
|
+
onchange?.(!checked)
|
|
125
|
+
tick().then(() => {
|
|
126
|
+
changing = false
|
|
127
|
+
})
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
const handleClick = (event: MouseEvent) => {
|
|
131
|
+
if (disabled) return event.preventDefault()
|
|
132
|
+
event.preventDefault()
|
|
133
|
+
toggle()
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
const handleKeyUp = (event: KeyboardEvent) => {
|
|
137
|
+
if (event.key === " ") {
|
|
138
|
+
event.preventDefault()
|
|
139
|
+
toggle()
|
|
140
|
+
} else if (event.key === "Enter") {
|
|
141
|
+
if (event.currentTarget) attemptSubmit(event.currentTarget as HTMLElement)
|
|
67
142
|
}
|
|
68
|
-
})
|
|
69
|
-
);
|
|
70
|
-
const labelledBy = useLabelledBy();
|
|
71
|
-
const describedBy = useDescribedBy();
|
|
72
|
-
let changing = $state(false);
|
|
73
|
-
const toggle = () => {
|
|
74
|
-
changing = true;
|
|
75
|
-
onchange?.(!checked);
|
|
76
|
-
tick().then(() => {
|
|
77
|
-
changing = false;
|
|
78
|
-
});
|
|
79
|
-
};
|
|
80
|
-
const handleClick = (event) => {
|
|
81
|
-
if (disabled) return event.preventDefault();
|
|
82
|
-
event.preventDefault();
|
|
83
|
-
toggle();
|
|
84
|
-
};
|
|
85
|
-
const handleKeyUp = (event) => {
|
|
86
|
-
if (event.key === " ") {
|
|
87
|
-
event.preventDefault();
|
|
88
|
-
toggle();
|
|
89
|
-
} else if (event.key === "Enter") {
|
|
90
|
-
if (event.currentTarget) attemptSubmit(event.currentTarget);
|
|
91
143
|
}
|
|
92
|
-
|
|
93
|
-
const handleKeyPress = (event) => event.preventDefault()
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
144
|
+
|
|
145
|
+
const handleKeyPress = (event: KeyboardEvent) => event.preventDefault()
|
|
146
|
+
|
|
147
|
+
const slot = $derived({
|
|
148
|
+
checked,
|
|
149
|
+
changing,
|
|
150
|
+
focus,
|
|
151
|
+
active,
|
|
152
|
+
hover,
|
|
153
|
+
autofocus: autofocus ?? false,
|
|
154
|
+
disabled,
|
|
155
|
+
indeterminate,
|
|
156
|
+
})
|
|
157
|
+
|
|
158
|
+
const ourProps = $derived(
|
|
159
|
+
mergeProps(
|
|
160
|
+
{
|
|
161
|
+
id,
|
|
162
|
+
role: "checkbox",
|
|
163
|
+
"aria-checked": indeterminate ? ("mixed" as "mixed") : checked ? true : false,
|
|
164
|
+
"aria-labelledby": labelledBy.value,
|
|
165
|
+
"aria-describedby": describedBy.value,
|
|
166
|
+
"aria-disabled": disabled ? true : undefined,
|
|
167
|
+
tabindex: disabled ? undefined : 0,
|
|
168
|
+
onkeyup: disabled ? undefined : handleKeyUp,
|
|
169
|
+
onkeypress: disabled ? undefined : handleKeyPress,
|
|
170
|
+
onclick: disabled ? undefined : handleClick,
|
|
171
|
+
},
|
|
172
|
+
focusProps,
|
|
173
|
+
hoverProps,
|
|
174
|
+
pressProps
|
|
175
|
+
)
|
|
121
176
|
)
|
|
122
|
-
|
|
123
|
-
const reset = $derived(() => {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
})
|
|
177
|
+
|
|
178
|
+
const reset = $derived(() => {
|
|
179
|
+
if (defaultChecked === undefined) return
|
|
180
|
+
return onchange?.(defaultChecked)
|
|
181
|
+
})
|
|
127
182
|
</script>
|
|
128
183
|
|
|
129
184
|
{#if name}
|
|
@@ -135,12 +190,13 @@ const reset = $derived(() => {
|
|
|
135
190
|
onReset={reset}
|
|
136
191
|
/>
|
|
137
192
|
{/if}
|
|
193
|
+
|
|
138
194
|
<ElementOrComponent
|
|
139
195
|
{ourProps}
|
|
140
196
|
{theirProps}
|
|
141
197
|
{slot}
|
|
142
198
|
defaultTag={DEFAULT_CHECKBOX_TAG}
|
|
143
199
|
name="Checkbox"
|
|
144
|
-
bind:
|
|
200
|
+
bind:element
|
|
145
201
|
bind:value
|
|
146
202
|
/>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare
|
|
1
|
+
import type { Props } from "../utils/types.js";
|
|
2
|
+
declare const DEFAULT_CHECKBOX_TAG: "span";
|
|
3
3
|
type CheckboxRenderPropArg = {
|
|
4
4
|
checked: boolean;
|
|
5
5
|
changing: boolean;
|
|
@@ -10,8 +10,9 @@ type CheckboxRenderPropArg = {
|
|
|
10
10
|
disabled: boolean;
|
|
11
11
|
indeterminate: boolean;
|
|
12
12
|
};
|
|
13
|
-
type
|
|
14
|
-
|
|
13
|
+
export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, CheckboxRenderPropArg, {
|
|
14
|
+
element?: HTMLElement;
|
|
15
|
+
id?: string;
|
|
15
16
|
value?: TType;
|
|
16
17
|
disabled?: boolean;
|
|
17
18
|
indeterminate?: boolean;
|
|
@@ -22,39 +23,20 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
|
|
|
22
23
|
name?: string;
|
|
23
24
|
onchange?: (checked: boolean) => void;
|
|
24
25
|
}>;
|
|
25
|
-
declare class __sveltets_Render<TType
|
|
26
|
-
props():
|
|
27
|
-
as?: TTag | undefined;
|
|
28
|
-
} & (Exclude<keyof PropsOf<TTag>, "form" | ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
|
|
29
|
-
children?: import("svelte").Snippet<[{
|
|
30
|
-
slot: CheckboxRenderPropArg;
|
|
31
|
-
props: Record<string, any>;
|
|
32
|
-
}]> | undefined;
|
|
33
|
-
class?: string | ((bag: CheckboxRenderPropArg) => string) | null | undefined;
|
|
34
|
-
ref?: HTMLElement;
|
|
35
|
-
} & {
|
|
36
|
-
value?: TType | undefined;
|
|
37
|
-
disabled?: boolean;
|
|
38
|
-
indeterminate?: boolean;
|
|
39
|
-
checked?: boolean;
|
|
40
|
-
defaultChecked?: boolean;
|
|
41
|
-
autofocus?: boolean;
|
|
42
|
-
form?: string;
|
|
43
|
-
name?: string;
|
|
44
|
-
onchange?: (checked: boolean) => void;
|
|
45
|
-
};
|
|
26
|
+
declare class __sveltets_Render<TType> {
|
|
27
|
+
props(): CheckboxProps<TType>;
|
|
46
28
|
events(): {};
|
|
47
29
|
slots(): {};
|
|
48
|
-
bindings(): "
|
|
30
|
+
bindings(): "element" | "checked";
|
|
49
31
|
exports(): {};
|
|
50
32
|
}
|
|
51
33
|
interface $$IsomorphicComponent {
|
|
52
|
-
new <TType
|
|
53
|
-
$$bindings?: ReturnType<__sveltets_Render<TType
|
|
54
|
-
} & ReturnType<__sveltets_Render<TType
|
|
55
|
-
<TType
|
|
56
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any
|
|
34
|
+
new <TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
|
|
35
|
+
$$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
|
|
36
|
+
} & ReturnType<__sveltets_Render<TType>['exports']>;
|
|
37
|
+
<TType>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
|
|
38
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
57
39
|
}
|
|
58
40
|
declare const Checkbox: $$IsomorphicComponent;
|
|
59
|
-
type Checkbox<TType
|
|
41
|
+
type Checkbox<TType> = InstanceType<typeof Checkbox<TType>>;
|
|
60
42
|
export default Checkbox;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import Button, { type ButtonProps } from "../button/Button.svelte"
|
|
3
|
+
import { useClose } from "../internal/close-provider.js"
|
|
4
|
+
|
|
5
|
+
export type CloseButtonProps = ButtonProps
|
|
4
6
|
</script>
|
|
5
7
|
|
|
6
|
-
<script lang="ts"
|
|
7
|
-
const
|
|
8
|
-
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
const closeContext = useClose()
|
|
10
|
+
const close = $derived(closeContext?.close)
|
|
11
|
+
let { element = $bindable(), ...props }: CloseButtonProps = $props()
|
|
9
12
|
</script>
|
|
10
13
|
|
|
11
|
-
<Button onclick={close}
|
|
14
|
+
<Button {...props} onclick={close} bind:element />
|
|
@@ -1,46 +1,4 @@
|
|
|
1
1
|
import { type ButtonProps } from "../button/Button.svelte";
|
|
2
|
-
|
|
3
|
-
declare
|
|
4
|
-
export type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>;
|
|
5
|
-
declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
|
|
6
|
-
props(): {
|
|
7
|
-
as?: TTag | undefined;
|
|
8
|
-
} & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "type"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
|
|
9
|
-
children?: import("svelte").Snippet<[{
|
|
10
|
-
slot: {
|
|
11
|
-
disabled: boolean;
|
|
12
|
-
hover: boolean;
|
|
13
|
-
focus: boolean;
|
|
14
|
-
active: boolean;
|
|
15
|
-
autofocus: boolean;
|
|
16
|
-
};
|
|
17
|
-
props: Record<string, any>;
|
|
18
|
-
}]> | undefined;
|
|
19
|
-
class?: string | ((bag: {
|
|
20
|
-
disabled: boolean;
|
|
21
|
-
hover: boolean;
|
|
22
|
-
focus: boolean;
|
|
23
|
-
active: boolean;
|
|
24
|
-
autofocus: boolean;
|
|
25
|
-
}) => string) | null | undefined;
|
|
26
|
-
ref?: HTMLElement;
|
|
27
|
-
} & {
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
autofocus?: boolean;
|
|
30
|
-
type?: "button" | "submit" | "reset";
|
|
31
|
-
};
|
|
32
|
-
events(): {};
|
|
33
|
-
slots(): {};
|
|
34
|
-
bindings(): "";
|
|
35
|
-
exports(): {};
|
|
36
|
-
}
|
|
37
|
-
interface $$IsomorphicComponent {
|
|
38
|
-
new <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
|
|
39
|
-
$$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
|
|
40
|
-
} & ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
41
|
-
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
42
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
43
|
-
}
|
|
44
|
-
declare const CloseButton: $$IsomorphicComponent;
|
|
45
|
-
type CloseButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof CloseButton<TTag>>;
|
|
2
|
+
export type CloseButtonProps = ButtonProps;
|
|
3
|
+
declare const CloseButton: import("svelte").Component<ButtonProps, {}, "element">;
|
|
46
4
|
export default CloseButton;
|