@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.61
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 +16 -19
- package/dist/button/Button.svelte.d.ts +8 -36
- package/dist/button/index.d.ts +1 -1
- package/dist/button/index.js +1 -1
- package/dist/checkbox/Checkbox.svelte +31 -27
- package/dist/checkbox/Checkbox.svelte.d.ts +17 -38
- package/dist/checkbox/index.d.ts +1 -1
- package/dist/checkbox/index.js +1 -1
- package/dist/close-button/CloseButton.svelte +4 -7
- package/dist/close-button/CloseButton.svelte.d.ts +3 -46
- package/dist/close-button/index.d.ts +1 -0
- package/dist/close-button/index.js +1 -0
- package/dist/data-interactive/DataInteractive.svelte +6 -22
- package/dist/data-interactive/DataInteractive.svelte.d.ts +9 -34
- package/dist/data-interactive/index.d.ts +1 -1
- package/dist/data-interactive/index.js +1 -1
- package/dist/description/Description.svelte +29 -24
- package/dist/description/Description.svelte.d.ts +9 -30
- package/dist/description/context.svelte.js +14 -16
- package/dist/description/index.d.ts +1 -1
- package/dist/dialog/Dialog.svelte +25 -30
- package/dist/dialog/Dialog.svelte.d.ts +7 -45
- package/dist/dialog/DialogBackdrop.svelte +11 -14
- package/dist/dialog/DialogBackdrop.svelte.d.ts +8 -33
- package/dist/dialog/DialogPanel.svelte +30 -19
- package/dist/dialog/DialogPanel.svelte.d.ts +8 -34
- package/dist/dialog/DialogTitle.svelte +17 -8
- package/dist/dialog/DialogTitle.svelte.d.ts +9 -30
- package/dist/dialog/InternalDialog.svelte +38 -34
- package/dist/dialog/InternalDialog.svelte.d.ts +3 -41
- package/dist/dialog/context.svelte.js +2 -2
- package/dist/dialog/index.d.ts +4 -4
- package/dist/dialog/index.js +4 -4
- package/dist/disclosure/Disclosure.svelte +61 -0
- package/dist/disclosure/Disclosure.svelte.d.ts +14 -0
- package/dist/disclosure/DisclosureButton.svelte +191 -0
- package/dist/disclosure/DisclosureButton.svelte.d.ts +19 -0
- package/dist/disclosure/DisclosurePanel.svelte +99 -0
- package/dist/disclosure/DisclosurePanel.svelte.d.ts +16 -0
- package/dist/disclosure/context.svelte.d.ts +32 -0
- package/dist/disclosure/context.svelte.js +94 -0
- package/dist/disclosure/index.d.ts +3 -0
- package/dist/disclosure/index.js +3 -0
- package/dist/field/Field.svelte +27 -26
- package/dist/field/Field.svelte.d.ts +7 -34
- package/dist/field/index.d.ts +1 -1
- package/dist/fieldset/Fieldset.svelte +21 -20
- package/dist/fieldset/Fieldset.svelte.d.ts +8 -35
- package/dist/fieldset/index.d.ts +1 -1
- package/dist/focus-trap/FocusTrap.svelte +29 -36
- package/dist/focus-trap/FocusTrap.svelte.d.ts +8 -38
- package/dist/hooks/use-controllable.svelte.js +3 -2
- package/dist/hooks/use-did-element-move.svelte.js +5 -10
- package/dist/hooks/use-disabled.d.ts +6 -1
- package/dist/hooks/use-disabled.js +10 -5
- package/dist/hooks/use-element-size.svelte.js +1 -1
- package/dist/hooks/use-event-listener.svelte.d.ts +1 -1
- package/dist/hooks/use-event-listener.svelte.js +3 -1
- package/dist/hooks/use-focus-ring.svelte.js +1 -1
- package/dist/hooks/use-inert-others.svelte.js +10 -10
- package/dist/hooks/use-is-top-layer.svelte.js +2 -2
- package/dist/hooks/use-resolve-button-type.svelte.js +0 -1
- package/dist/hooks/use-root-containers.svelte.d.ts +2 -2
- package/dist/hooks/use-root-containers.svelte.js +7 -6
- package/dist/hooks/use-tab-direction.svelte.js +1 -1
- package/dist/hooks/use-transition.svelte.d.ts +1 -0
- package/dist/hooks/use-transition.svelte.js +32 -7
- package/dist/index.d.ts +11 -2
- package/dist/index.js +11 -2
- package/dist/input/Input.svelte +28 -21
- package/dist/input/Input.svelte.d.ts +16 -33
- package/dist/input/index.d.ts +1 -1
- package/dist/input/index.js +1 -1
- package/dist/internal/FloatingProvider.svelte +17 -0
- package/dist/internal/FloatingProvider.svelte.d.ts +8 -0
- package/dist/internal/FocusSentinel.svelte +33 -32
- package/dist/internal/FocusSentinel.svelte.d.ts +4 -18
- package/dist/internal/ForcePortalRoot.svelte.d.ts +4 -18
- package/dist/internal/FormFields.svelte +18 -13
- package/dist/internal/FormFields.svelte.d.ts +4 -18
- package/dist/internal/FormFieldsProvider.svelte +17 -0
- package/dist/internal/FormFieldsProvider.svelte.d.ts +7 -0
- package/dist/internal/FormResolver.svelte +6 -2
- package/dist/internal/FormResolver.svelte.d.ts +4 -18
- package/dist/internal/Hidden.svelte +10 -10
- package/dist/internal/Hidden.svelte.d.ts +6 -33
- package/dist/internal/MainTreeProvider.svelte +2 -2
- package/dist/internal/MainTreeProvider.svelte.d.ts +4 -18
- package/dist/internal/Portal.svelte.d.ts +4 -18
- package/dist/internal/floating-provider.svelte.d.ts +3 -0
- package/dist/internal/floating-provider.svelte.js +206 -0
- package/dist/internal/floating.svelte.d.ts +47 -23
- package/dist/internal/floating.svelte.js +90 -272
- package/dist/internal/form-fields.svelte.d.ts +10 -0
- package/dist/internal/form-fields.svelte.js +23 -0
- package/dist/internal/frozen.svelte.js +1 -1
- package/dist/label/Label.svelte +15 -11
- package/dist/label/Label.svelte.d.ts +8 -33
- package/dist/label/context.svelte.js +1 -1
- package/dist/label/index.d.ts +1 -1
- package/dist/legend/Legend.svelte +22 -15
- package/dist/legend/Legend.svelte.d.ts +10 -34
- package/dist/listbox/Listbox.svelte +79 -151
- package/dist/listbox/Listbox.svelte.d.ts +16 -91
- package/dist/listbox/ListboxButton.svelte +31 -29
- package/dist/listbox/ListboxButton.svelte.d.ts +8 -38
- package/dist/listbox/ListboxOption.svelte +40 -27
- package/dist/listbox/ListboxOption.svelte.d.ts +16 -32
- package/dist/listbox/ListboxOptions.svelte +126 -72
- package/dist/listbox/ListboxOptions.svelte.d.ts +8 -43
- package/dist/listbox/ListboxSelectedOption.svelte +24 -26
- package/dist/listbox/ListboxSelectedOption.svelte.d.ts +14 -39
- package/dist/listbox/context.svelte.d.ts +76 -0
- package/dist/listbox/context.svelte.js +36 -0
- package/dist/listbox/index.d.ts +5 -5
- package/dist/listbox/index.js +4 -4
- package/dist/menu/Menu.svelte +22 -266
- package/dist/menu/Menu.svelte.d.ts +7 -37
- package/dist/menu/MenuButton.svelte +29 -24
- package/dist/menu/MenuButton.svelte.d.ts +8 -39
- package/dist/menu/MenuHeading.svelte +12 -16
- package/dist/menu/MenuHeading.svelte.d.ts +7 -36
- package/dist/menu/MenuItem.svelte +18 -23
- package/dist/menu/MenuItem.svelte.d.ts +9 -39
- package/dist/menu/MenuItems.svelte +33 -34
- package/dist/menu/MenuItems.svelte.d.ts +8 -43
- package/dist/menu/MenuSection.svelte +9 -12
- package/dist/menu/MenuSection.svelte.d.ts +7 -33
- package/dist/menu/MenuSeparator.svelte +9 -12
- package/dist/menu/MenuSeparator.svelte.d.ts +7 -33
- package/dist/menu/context.svelte.d.ts +2 -1
- package/dist/menu/context.svelte.js +212 -2
- package/dist/menu/index.d.ts +7 -7
- package/dist/menu/index.js +3 -3
- package/dist/popover/Popover.svelte +231 -0
- package/dist/popover/Popover.svelte.d.ts +15 -0
- package/dist/popover/PopoverBackdrop.svelte +83 -0
- package/dist/popover/PopoverBackdrop.svelte.d.ts +17 -0
- package/dist/popover/PopoverButton.svelte +324 -0
- package/dist/popover/PopoverButton.svelte.d.ts +21 -0
- package/dist/popover/PopoverGroup.svelte +66 -0
- package/dist/popover/PopoverGroup.svelte.d.ts +9 -0
- package/dist/popover/PopoverPanel.svelte +359 -0
- package/dist/popover/PopoverPanel.svelte.d.ts +22 -0
- package/dist/popover/context.svelte.d.ts +51 -0
- package/dist/popover/context.svelte.js +108 -0
- package/dist/popover/index.d.ts +5 -0
- package/dist/popover/index.js +5 -0
- package/dist/portal/InternalPortal.svelte +18 -19
- package/dist/portal/InternalPortal.svelte.d.ts +7 -34
- package/dist/portal/Portal.svelte +7 -6
- package/dist/portal/Portal.svelte.d.ts +3 -22
- package/dist/portal/PortalGroup.svelte +6 -14
- package/dist/portal/PortalGroup.svelte.d.ts +5 -34
- package/dist/portal/PortalWrapper.svelte +10 -0
- package/dist/portal/PortalWrapper.svelte.d.ts +9 -0
- package/dist/radio-group/Radio.svelte +142 -0
- package/dist/radio-group/Radio.svelte.d.ts +35 -0
- package/dist/radio-group/RadioGroup.svelte +222 -0
- package/dist/radio-group/RadioGroup.svelte.d.ts +34 -0
- package/dist/radio-group/RadioOption.svelte +145 -0
- package/dist/radio-group/RadioOption.svelte.d.ts +37 -0
- package/dist/radio-group/contest.svelte.d.ts +30 -0
- package/dist/radio-group/contest.svelte.js +40 -0
- package/dist/radio-group/index.d.ts +3 -0
- package/dist/radio-group/index.js +3 -0
- package/dist/select/Select.svelte +112 -0
- package/dist/select/Select.svelte.d.ts +21 -0
- package/dist/select/index.d.ts +1 -0
- package/dist/select/index.js +1 -0
- package/dist/switch/Switch.svelte +27 -28
- package/dist/switch/Switch.svelte.d.ts +9 -42
- package/dist/switch/SwitchGroup.svelte +5 -5
- package/dist/switch/SwitchGroup.svelte.d.ts +8 -30
- package/dist/switch/index.d.ts +1 -1
- package/dist/switch/index.js +1 -1
- package/dist/tabs/Tab.svelte +28 -31
- package/dist/tabs/Tab.svelte.d.ts +8 -36
- package/dist/tabs/TabGroup.svelte +42 -264
- package/dist/tabs/TabGroup.svelte.d.ts +7 -57
- package/dist/tabs/TabList.svelte +13 -16
- package/dist/tabs/TabList.svelte.d.ts +8 -31
- package/dist/tabs/TabPanel.svelte +20 -20
- package/dist/tabs/TabPanel.svelte.d.ts +8 -38
- package/dist/tabs/TabPanels.svelte +11 -9
- package/dist/tabs/TabPanels.svelte.d.ts +8 -30
- package/dist/tabs/context.svelte.d.ts +31 -0
- package/dist/tabs/context.svelte.js +134 -0
- package/dist/tabs/index.d.ts +5 -5
- package/dist/tabs/index.js +4 -4
- package/dist/textarea/Textarea.svelte +24 -20
- package/dist/textarea/Textarea.svelte.d.ts +17 -29
- package/dist/textarea/index.d.ts +1 -1
- package/dist/textarea/index.js +1 -1
- package/dist/transition/InternalTransitionChild.svelte +36 -22
- package/dist/transition/InternalTransitionChild.svelte.d.ts +6 -37
- package/dist/transition/Transition.svelte +16 -17
- package/dist/transition/Transition.svelte.d.ts +8 -38
- package/dist/transition/TransitionChild.svelte +13 -12
- package/dist/transition/TransitionChild.svelte.d.ts +11 -38
- package/dist/transition/context.svelte.js +11 -11
- package/dist/transition/index.d.ts +2 -2
- package/dist/transition/index.js +2 -2
- package/dist/utils/DisabledProvider.svelte +10 -0
- package/dist/utils/DisabledProvider.svelte.d.ts +8 -0
- package/dist/utils/ElementOrComponent.svelte +58 -17
- package/dist/utils/ElementOrComponent.svelte.d.ts +19 -30
- package/dist/utils/StableCollection.svelte.d.ts +4 -18
- package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +32 -0
- package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte.d.ts +8 -0
- package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +94 -0
- package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts +26 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.d.ts +6 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.js +158 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.d.ts +11 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.js +53 -0
- package/dist/utils/floating-ui/svelte/hooks/useId.svelte.d.ts +9 -0
- package/dist/utils/floating-ui/svelte/hooks/useId.svelte.js +28 -0
- package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.d.ts +23 -0
- package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.js +72 -0
- package/dist/utils/floating-ui/svelte/index.d.ts +5 -0
- package/dist/utils/floating-ui/svelte/index.js +5 -0
- package/dist/utils/floating-ui/svelte/inner.svelte.d.ts +83 -0
- package/dist/utils/floating-ui/svelte/inner.svelte.js +178 -0
- package/dist/utils/floating-ui/svelte/types.d.ts +114 -0
- package/dist/utils/floating-ui/svelte/utils/createPubSub.d.ts +5 -0
- package/dist/utils/floating-ui/svelte/utils/createPubSub.js +14 -0
- package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.d.ts +2 -0
- package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.js +13 -0
- package/dist/utils/floating-ui/svelte/utils/log.d.ts +2 -0
- package/dist/utils/floating-ui/svelte/utils/log.js +19 -0
- package/dist/utils/floating-ui/svelte/utils.d.ts +19 -0
- package/dist/utils/floating-ui/svelte/utils.js +136 -0
- package/dist/utils/floating-ui/svelte-dom/arrow.d.ts +22 -0
- package/dist/utils/floating-ui/svelte-dom/arrow.js +29 -0
- package/dist/utils/floating-ui/svelte-dom/index.d.ts +2 -0
- package/dist/utils/floating-ui/svelte-dom/index.js +2 -0
- package/dist/utils/floating-ui/svelte-dom/types.d.ts +80 -0
- package/dist/utils/floating-ui/svelte-dom/types.js +3 -0
- package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.d.ts +6 -0
- package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js +183 -0
- package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.d.ts +1 -0
- package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.js +50 -0
- package/dist/utils/floating-ui/svelte-dom/utils/getDPR.d.ts +1 -0
- package/dist/utils/floating-ui/svelte-dom/utils/getDPR.js +7 -0
- package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.d.ts +1 -0
- package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.js +5 -0
- package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.d.ts +4 -0
- package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.js +7 -0
- package/dist/utils/id.d.ts +1 -1
- package/dist/utils/id.js +1 -1
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/index.js +3 -0
- package/dist/utils/state.js +4 -4
- package/dist/utils/style.d.ts +2 -0
- package/dist/utils/style.js +6 -0
- package/dist/utils/types.d.ts +13 -19
- package/package.json +55 -54
- package/dist/combobox/Combobox.svelte +0 -53
- package/dist/combobox/Combobox.svelte.d.ts +0 -50
- package/dist/internal/HoistFormFields.svelte +0 -14
- package/dist/internal/HoistFormFields.svelte.d.ts +0 -21
- package/dist/internal/id.d.ts +0 -8
- package/dist/internal/id.js +0 -11
- package/dist/listbox/ListboxStates.d.ts +0 -12
- package/dist/listbox/ListboxStates.js +0 -15
- package/dist/utils/Generic.svelte +0 -56
- package/dist/utils/Generic.svelte.d.ts +0 -35
- package/dist/utils/alternative-types.d.ts +0 -21
- /package/dist/utils/{alternative-types.js → floating-ui/svelte/types.js} +0 -0
|
@@ -1,47 +1,53 @@
|
|
|
1
|
-
|
|
2
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
|
-
/* eslint-disable prefer-const */
|
|
1
|
+
import { useInteractions } from "../utils/floating-ui/svelte/index.js";
|
|
4
2
|
import { useDisposables } from "../utils/disposables.js";
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
import { getContext, setContext, untrack } from "svelte";
|
|
18
|
-
export function useResolvedAnchor(anchor) {
|
|
19
|
-
if (!anchor)
|
|
20
|
-
return null; // Disable entirely
|
|
21
|
-
if (typeof anchor === "string")
|
|
22
|
-
return { to: anchor }; // Simple string based value,
|
|
23
|
-
return anchor; // User-provided value
|
|
3
|
+
import { getContext, untrack } from "svelte";
|
|
4
|
+
export function useResolvedAnchor(options) {
|
|
5
|
+
const { anchor } = $derived(options);
|
|
6
|
+
return {
|
|
7
|
+
get anchor() {
|
|
8
|
+
if (!anchor)
|
|
9
|
+
return null; // Disable entirely
|
|
10
|
+
if (typeof anchor === "string")
|
|
11
|
+
return { to: anchor }; // Simple string based value,
|
|
12
|
+
return anchor; // User-provided value
|
|
13
|
+
},
|
|
14
|
+
};
|
|
24
15
|
}
|
|
25
|
-
export function
|
|
26
|
-
|
|
16
|
+
export function useFloatingReference() {
|
|
17
|
+
const context = getContext("FloatingContext");
|
|
18
|
+
return {
|
|
19
|
+
get setReference() {
|
|
20
|
+
return context.setReference;
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export function useFloatingReferenceProps() {
|
|
25
|
+
const context = getContext("FloatingContext");
|
|
26
|
+
return {
|
|
27
|
+
get getReferenceProps() {
|
|
28
|
+
return context.getReferenceProps;
|
|
29
|
+
},
|
|
30
|
+
};
|
|
27
31
|
}
|
|
28
32
|
export function useFloatingPanelProps() {
|
|
29
|
-
const
|
|
33
|
+
const context = getContext("FloatingContext");
|
|
34
|
+
const { getFloatingProps, slot } = $derived(context);
|
|
30
35
|
return (...args) => {
|
|
31
36
|
return Object.assign({}, getFloatingProps(...args), {
|
|
32
37
|
"data-anchor": slot.anchor,
|
|
33
38
|
});
|
|
34
39
|
};
|
|
35
40
|
}
|
|
36
|
-
export function useFloatingPanel(options) {
|
|
37
|
-
const placement = $derived.
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
const
|
|
41
|
+
export function useFloatingPanel(options = { placement: null }) {
|
|
42
|
+
const placement = $derived(options.placement === false
|
|
43
|
+
? null
|
|
44
|
+
: typeof options.placement === "string"
|
|
45
|
+
? { to: options.placement }
|
|
46
|
+
: options.placement);
|
|
47
|
+
//if (placement === false) placement = null // Disable entirely
|
|
48
|
+
//if (typeof placement === "string") placement = { to: placement } // Simple string based value
|
|
49
|
+
const placementContext = getContext("PlacementContext");
|
|
50
|
+
const { updatePlacementConfig } = $derived(placementContext);
|
|
45
51
|
const trigger = $derived(JSON.stringify(placement, typeof HTMLElement !== "undefined"
|
|
46
52
|
? (_, v) => {
|
|
47
53
|
if (v instanceof HTMLElement) {
|
|
@@ -51,6 +57,7 @@ export function useFloatingPanel(options) {
|
|
|
51
57
|
}
|
|
52
58
|
: undefined));
|
|
53
59
|
const stablePlacement = $derived.by(() => {
|
|
60
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
54
61
|
trigger;
|
|
55
62
|
return untrack(() => placement);
|
|
56
63
|
});
|
|
@@ -62,233 +69,41 @@ export function useFloatingPanel(options) {
|
|
|
62
69
|
get setFloating() {
|
|
63
70
|
return context.setFloating;
|
|
64
71
|
},
|
|
65
|
-
get
|
|
72
|
+
get styles() {
|
|
66
73
|
return placement ? context.styles : undefined;
|
|
67
74
|
},
|
|
68
75
|
};
|
|
69
76
|
}
|
|
70
|
-
|
|
71
|
-
//let MINIMUM_ITEMS_VISIBLE = 4
|
|
72
|
-
export const createFloatingContext = ({ enabled = true } = {}) => {
|
|
73
|
-
let config = $state(null);
|
|
74
|
-
//let innerOffset = $state(0)
|
|
75
|
-
//let overflowRef = $state<HTMLElement | null>(null)
|
|
76
|
-
let referenceEl = $state(null);
|
|
77
|
-
let floatingEl = $state(null);
|
|
78
|
-
$effect(() => useFixScrollingPixel(floatingEl));
|
|
79
|
-
const isEnabled = $derived(enabled && config !== null && floatingEl !== null);
|
|
80
|
-
const { to: placement = "bottom", gap = 0, offset = 0, padding = 0, inner, } = $derived(useResolvedConfig({
|
|
81
|
-
get config() {
|
|
82
|
-
return config;
|
|
83
|
-
},
|
|
84
|
-
get element() {
|
|
85
|
-
return floatingEl;
|
|
86
|
-
},
|
|
87
|
-
}));
|
|
88
|
-
const [to, align = "center"] = $derived(placement.split(" "));
|
|
89
|
-
// Reset
|
|
90
|
-
$effect(() => {
|
|
91
|
-
if (!isEnabled)
|
|
92
|
-
return;
|
|
93
|
-
//innerOffset = 0
|
|
94
|
-
});
|
|
95
|
-
let floatingStyles = $state();
|
|
96
|
-
let context = $state();
|
|
97
|
-
let currentComputeId = $state(0);
|
|
77
|
+
export function useFixScrollingPixel(options) {
|
|
98
78
|
$effect(() => {
|
|
99
|
-
|
|
79
|
+
const element = options.element;
|
|
80
|
+
if (!element)
|
|
100
81
|
return;
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
offsetMiddleware({
|
|
122
|
-
mainAxis: to === "selection" ? 0 : gap,
|
|
123
|
-
crossAxis: offset,
|
|
124
|
-
}),
|
|
125
|
-
// When the panel overflows the viewport, we will try to nudge the panel to the other side to
|
|
126
|
-
// ensure it's not clipped. We use the `padding` to define the minimum space between the
|
|
127
|
-
// panel and the viewport.
|
|
128
|
-
shiftMiddleware({ padding }),
|
|
129
|
-
// The `flip` middleware will swap the `placement` of the panel if there is not enough room.
|
|
130
|
-
// This is not compatible with the `inner` middleware (which is only enabled when `to` is set
|
|
131
|
-
// to "selection").
|
|
132
|
-
to !== "selection" && flipMiddleware({ padding }),
|
|
133
|
-
// The `inner` middleware will ensure the panel is always fully visible on screen and
|
|
134
|
-
// positioned on top of the reference and moved to the currently selected item.
|
|
135
|
-
to === "selection" && inner
|
|
136
|
-
? null /* TODO: use inner when available: innerMiddleware({
|
|
137
|
-
...inner,
|
|
138
|
-
padding, // For overflow detection
|
|
139
|
-
overflowRef,
|
|
140
|
-
offset: innerOffset,
|
|
141
|
-
minItemsVisible: MINIMUM_ITEMS_VISIBLE,
|
|
142
|
-
referenceOverflowThreshold: padding,
|
|
143
|
-
onFallbackChange(fallback) {
|
|
144
|
-
if (!fallback) return
|
|
145
|
-
let parent = context.elements.floating
|
|
146
|
-
if (!parent) return
|
|
147
|
-
let scrollPaddingBottom =
|
|
148
|
-
parseFloat(getComputedStyle(parent!).scrollPaddingBottom) || 0
|
|
149
|
-
|
|
150
|
-
// We want at least X visible items, but if there are less than X items in the list,
|
|
151
|
-
// we want to show as many as possible.
|
|
152
|
-
let missing = Math.min(MINIMUM_ITEMS_VISIBLE, parent.childElementCount)
|
|
153
|
-
|
|
154
|
-
let elementHeight = 0
|
|
155
|
-
let elementAmountVisible = 0
|
|
156
|
-
|
|
157
|
-
for (let child of context.elements.floating?.childNodes ?? []) {
|
|
158
|
-
if (child instanceof HTMLElement) {
|
|
159
|
-
let childTop = child.offsetTop
|
|
160
|
-
// It can be that the child is fully visible, but we also want to keep the scroll
|
|
161
|
-
// padding into account to ensure the UI looks good. Therefore we fake that the
|
|
162
|
-
// bottom of the child is actually `scrollPaddingBottom` amount of pixels lower.
|
|
163
|
-
let childBottom = childTop + child.clientHeight + scrollPaddingBottom
|
|
164
|
-
|
|
165
|
-
let parentTop = parent.scrollTop
|
|
166
|
-
let parentBottom = parentTop + parent.clientHeight
|
|
167
|
-
|
|
168
|
-
// Figure out if the child is fully visible in the scroll parent.
|
|
169
|
-
if (childTop >= parentTop && childBottom <= parentBottom) {
|
|
170
|
-
missing--
|
|
171
|
-
} else {
|
|
172
|
-
// Not fully visible, so we will use this child to calculate the height of
|
|
173
|
-
// each item. We will also use this to calculate how much of the item is
|
|
174
|
-
// already visible.
|
|
175
|
-
elementAmountVisible = Math.max(
|
|
176
|
-
0,
|
|
177
|
-
Math.min(childBottom, parentBottom) - Math.max(childTop, parentTop)
|
|
178
|
-
)
|
|
179
|
-
elementHeight = child.clientHeight
|
|
180
|
-
break
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
// There are fewer visible items than we want, so we will try to nudge the offset
|
|
186
|
-
// to show more items.
|
|
187
|
-
if (missing >= 1) {
|
|
188
|
-
setInnerOffset((existingOffset) => {
|
|
189
|
-
let newInnerOffset =
|
|
190
|
-
elementHeight * missing - // `missing` amount of `elementHeight`
|
|
191
|
-
elementAmountVisible + // The amount of the last item that is visible
|
|
192
|
-
scrollPaddingBottom // The scroll padding to ensure the UI looks good
|
|
193
|
-
|
|
194
|
-
// Nudged enough already, no need to continue
|
|
195
|
-
if (existingOffset >= newInnerOffset) {
|
|
196
|
-
return existingOffset
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
return newInnerOffset
|
|
200
|
-
})
|
|
201
|
-
}
|
|
202
|
-
},
|
|
203
|
-
})*/
|
|
204
|
-
: null,
|
|
205
|
-
// The `size` middleware will ensure the panel is never bigger than the viewport minus the
|
|
206
|
-
// provided `padding` that we want.
|
|
207
|
-
sizeMiddleware({
|
|
208
|
-
padding,
|
|
209
|
-
apply({ availableWidth, availableHeight, elements }) {
|
|
210
|
-
Object.assign(elements.floating.style, {
|
|
211
|
-
overflow: "auto",
|
|
212
|
-
maxWidth: `${availableWidth}px`,
|
|
213
|
-
maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight}px)`,
|
|
214
|
-
});
|
|
215
|
-
},
|
|
216
|
-
}),
|
|
217
|
-
].filter(Boolean),
|
|
218
|
-
}).then((res) => {
|
|
219
|
-
if (currentComputeId === computeId) {
|
|
220
|
-
// Ensure only the last compute updates the context if multiple are running in parallel
|
|
221
|
-
context = res;
|
|
222
|
-
const { x, y } = res;
|
|
223
|
-
floatingStyles = `position: absolute; left: ${x}px; top: ${y}px;`;
|
|
224
|
-
}
|
|
82
|
+
untrack(() => {
|
|
83
|
+
const observer = new MutationObserver(() => {
|
|
84
|
+
const maxHeight = window.getComputedStyle(element).maxHeight;
|
|
85
|
+
const maxHeightFloat = parseFloat(maxHeight);
|
|
86
|
+
if (isNaN(maxHeightFloat))
|
|
87
|
+
return;
|
|
88
|
+
const maxHeightInt = parseInt(maxHeight);
|
|
89
|
+
if (isNaN(maxHeightInt))
|
|
90
|
+
return;
|
|
91
|
+
if (maxHeightFloat !== maxHeightInt) {
|
|
92
|
+
element.style.maxHeight = `${Math.ceil(maxHeightFloat)}px`;
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
observer.observe(element, {
|
|
96
|
+
attributes: true,
|
|
97
|
+
attributeFilter: ["style"],
|
|
98
|
+
});
|
|
99
|
+
return () => {
|
|
100
|
+
observer.disconnect();
|
|
101
|
+
};
|
|
225
102
|
});
|
|
226
103
|
});
|
|
227
|
-
// Calculate placement information to expose as data attributes
|
|
228
|
-
let [exposedTo = to, exposedAlign = align] = context?.placement.split("-") ?? [];
|
|
229
|
-
// If user-land code is using custom styles specifically for `bottom`, but
|
|
230
|
-
// they chose `selection`, then we want to make sure to map it to selection
|
|
231
|
-
// again otherwise styles could be wrong.
|
|
232
|
-
if (to === "selection")
|
|
233
|
-
exposedTo = "selection";
|
|
234
|
-
const data = $derived({
|
|
235
|
-
anchor: [exposedTo, exposedAlign].filter(Boolean).join(" "),
|
|
236
|
-
});
|
|
237
|
-
/*let innerOffsetConfig = useInnerOffset(context, {
|
|
238
|
-
overflowRef,
|
|
239
|
-
onChange: setInnerOffset,
|
|
240
|
-
})*/
|
|
241
|
-
const getReferenceProps = () => ({});
|
|
242
|
-
const getFloatingProps = () => ({});
|
|
243
|
-
/*let { getReferenceProps, getFloatingProps } = useInteractions([
|
|
244
|
-
innerOffsetConfig
|
|
245
|
-
])*/
|
|
246
|
-
const floatingContext = {
|
|
247
|
-
setFloating: (floating) => {
|
|
248
|
-
floatingEl = floating || null;
|
|
249
|
-
},
|
|
250
|
-
setReference: (reference) => {
|
|
251
|
-
referenceEl = reference || null;
|
|
252
|
-
},
|
|
253
|
-
get styles() {
|
|
254
|
-
return floatingStyles;
|
|
255
|
-
},
|
|
256
|
-
getReferenceProps,
|
|
257
|
-
getFloatingProps,
|
|
258
|
-
get slot() {
|
|
259
|
-
return data;
|
|
260
|
-
},
|
|
261
|
-
};
|
|
262
|
-
setContext("FloatingContext", floatingContext);
|
|
263
|
-
setContext("PlacementContext", (value) => {
|
|
264
|
-
config = value;
|
|
265
|
-
});
|
|
266
|
-
return floatingContext;
|
|
267
|
-
};
|
|
268
|
-
function useFixScrollingPixel(element) {
|
|
269
|
-
if (!element)
|
|
270
|
-
return;
|
|
271
|
-
let observer = new MutationObserver(() => {
|
|
272
|
-
let maxHeight = window.getComputedStyle(element).maxHeight;
|
|
273
|
-
let maxHeightFloat = parseFloat(maxHeight);
|
|
274
|
-
if (isNaN(maxHeightFloat))
|
|
275
|
-
return;
|
|
276
|
-
let maxHeightInt = parseInt(maxHeight);
|
|
277
|
-
if (isNaN(maxHeightInt))
|
|
278
|
-
return;
|
|
279
|
-
if (maxHeightFloat !== maxHeightInt) {
|
|
280
|
-
element.style.maxHeight = `${Math.ceil(maxHeightFloat)}px`;
|
|
281
|
-
}
|
|
282
|
-
});
|
|
283
|
-
observer.observe(element, {
|
|
284
|
-
attributes: true,
|
|
285
|
-
attributeFilter: ["style"],
|
|
286
|
-
});
|
|
287
|
-
return () => {
|
|
288
|
-
observer.disconnect();
|
|
289
|
-
};
|
|
290
104
|
}
|
|
291
|
-
function useResolvedConfig(
|
|
105
|
+
export function useResolvedConfig(options) {
|
|
106
|
+
const { config, element } = $derived(options);
|
|
292
107
|
const gap = useResolvePxValue({
|
|
293
108
|
get input() {
|
|
294
109
|
return config?.gap ?? "var(--anchor-gap, 0)";
|
|
@@ -299,7 +114,7 @@ function useResolvedConfig({ config, element, }) {
|
|
|
299
114
|
});
|
|
300
115
|
const offset = useResolvePxValue({
|
|
301
116
|
get input() {
|
|
302
|
-
return config?.
|
|
117
|
+
return config?.offset ?? "var(--anchor-offset, 0)";
|
|
303
118
|
},
|
|
304
119
|
get element() {
|
|
305
120
|
return element;
|
|
@@ -307,7 +122,7 @@ function useResolvedConfig({ config, element, }) {
|
|
|
307
122
|
});
|
|
308
123
|
const padding = useResolvePxValue({
|
|
309
124
|
get input() {
|
|
310
|
-
return config?.
|
|
125
|
+
return config?.padding ?? "var(--anchor-padding, 0)";
|
|
311
126
|
},
|
|
312
127
|
get element() {
|
|
313
128
|
return element;
|
|
@@ -331,8 +146,9 @@ function useResolvedConfig({ config, element, }) {
|
|
|
331
146
|
},
|
|
332
147
|
};
|
|
333
148
|
}
|
|
334
|
-
function useResolvePxValue(
|
|
335
|
-
|
|
149
|
+
function useResolvePxValue(options) {
|
|
150
|
+
const { input, element, defaultValue } = $derived(options);
|
|
151
|
+
const d = useDisposables();
|
|
336
152
|
const computeValue = (value, element) => {
|
|
337
153
|
// Nullish
|
|
338
154
|
if (value == null)
|
|
@@ -348,7 +164,7 @@ function useResolvePxValue({ input, element, defaultValue, }) {
|
|
|
348
164
|
return [
|
|
349
165
|
result,
|
|
350
166
|
(setValue) => {
|
|
351
|
-
|
|
167
|
+
const variables = resolveVariables(value);
|
|
352
168
|
// TODO: Improve this part and make it work
|
|
353
169
|
//
|
|
354
170
|
// Observe variables themselves. Currently the browser doesn't support this, but the
|
|
@@ -380,7 +196,7 @@ function useResolvePxValue({ input, element, defaultValue, }) {
|
|
|
380
196
|
// }
|
|
381
197
|
// Works as a fallback, but not very performant because we are polling the value.
|
|
382
198
|
{
|
|
383
|
-
|
|
199
|
+
const history = variables.map((variable) => window.getComputedStyle(element).getPropertyValue(variable));
|
|
384
200
|
d.requestAnimationFrame(function check() {
|
|
385
201
|
d.nextFrame(check);
|
|
386
202
|
// Fast path, detect if the value of the CSS Variable has changed before completely
|
|
@@ -389,8 +205,8 @@ function useResolvePxValue({ input, element, defaultValue, }) {
|
|
|
389
205
|
//
|
|
390
206
|
// This is a lot of work, so we want to avoid it if possible.
|
|
391
207
|
let changed = false;
|
|
392
|
-
for (
|
|
393
|
-
|
|
208
|
+
for (const [idx, variable] of variables.entries()) {
|
|
209
|
+
const value = window.getComputedStyle(element).getPropertyValue(variable);
|
|
394
210
|
if (history[idx] !== value) {
|
|
395
211
|
history[idx] = value;
|
|
396
212
|
changed = true;
|
|
@@ -400,7 +216,7 @@ function useResolvePxValue({ input, element, defaultValue, }) {
|
|
|
400
216
|
// Nothing changed, no need to perform the expensive computation.
|
|
401
217
|
if (!changed)
|
|
402
218
|
return;
|
|
403
|
-
|
|
219
|
+
const newResult = resolveCSSVariablePxValue(value, element);
|
|
404
220
|
if (result !== newResult) {
|
|
405
221
|
setValue(newResult);
|
|
406
222
|
result = newResult;
|
|
@@ -415,14 +231,16 @@ function useResolvePxValue({ input, element, defaultValue, }) {
|
|
|
415
231
|
};
|
|
416
232
|
// Calculate the value immediately when the input or element changes. Later we can setup a watcher
|
|
417
233
|
// to track the value changes over time.
|
|
418
|
-
const immediateValue = computeValue(input, element)[0];
|
|
419
|
-
let
|
|
234
|
+
const immediateValue = $derived(computeValue(input, element)[0]);
|
|
235
|
+
let explicitValue = $state();
|
|
236
|
+
const setValue = (value) => (explicitValue = value);
|
|
237
|
+
const value = $derived(explicitValue ?? immediateValue);
|
|
420
238
|
$effect(() => {
|
|
421
|
-
|
|
422
|
-
value
|
|
239
|
+
const [value, watcher] = computeValue(input, element);
|
|
240
|
+
setValue(value);
|
|
423
241
|
if (!watcher)
|
|
424
242
|
return;
|
|
425
|
-
return watcher(
|
|
243
|
+
return watcher(setValue);
|
|
426
244
|
});
|
|
427
245
|
return {
|
|
428
246
|
get value() {
|
|
@@ -431,14 +249,14 @@ function useResolvePxValue({ input, element, defaultValue, }) {
|
|
|
431
249
|
};
|
|
432
250
|
}
|
|
433
251
|
function resolveVariables(value) {
|
|
434
|
-
|
|
252
|
+
const matches = /var\((.*)\)/.exec(value);
|
|
435
253
|
if (matches) {
|
|
436
|
-
|
|
254
|
+
const idx = matches[1].indexOf(",");
|
|
437
255
|
if (idx === -1) {
|
|
438
256
|
return [matches[1]];
|
|
439
257
|
}
|
|
440
|
-
|
|
441
|
-
|
|
258
|
+
const variable = matches[1].slice(0, idx).trim();
|
|
259
|
+
const fallback = matches[1].slice(idx + 1).trim();
|
|
442
260
|
if (fallback) {
|
|
443
261
|
return [variable, ...resolveVariables(fallback)];
|
|
444
262
|
}
|
|
@@ -472,7 +290,7 @@ function resolveCSSVariablePxValue(input, element) {
|
|
|
472
290
|
// ```
|
|
473
291
|
//
|
|
474
292
|
// Then this will result to resolved value of `2rem`, instead of `1rem`
|
|
475
|
-
|
|
293
|
+
const tmpEl = document.createElement("div");
|
|
476
294
|
element.appendChild(tmpEl);
|
|
477
295
|
// Set the value to `0px` otherwise if an invalid value is provided later the browser will read
|
|
478
296
|
// out the default value.
|
|
@@ -482,7 +300,7 @@ function resolveCSSVariablePxValue(input, element) {
|
|
|
482
300
|
// Set the new value, if this is invalid the previous value will be used.
|
|
483
301
|
tmpEl.style.setProperty("margin-top", input, "important");
|
|
484
302
|
// Reading the `margin-top` will already be in pixels (e.g.: 123px).
|
|
485
|
-
|
|
303
|
+
const pxValue = parseFloat(window.getComputedStyle(tmpEl).marginTop) || 0;
|
|
486
304
|
element.removeChild(tmpEl);
|
|
487
305
|
return pxValue;
|
|
488
306
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type Snippet } from "svelte";
|
|
2
|
+
import { SvelteSet } from "svelte/reactivity";
|
|
3
|
+
export type FormFieldsContext = {
|
|
4
|
+
registerField: (field: Snippet) => () => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const createFormFieldsContext: () => {
|
|
7
|
+
registerField: (field: Snippet) => () => boolean;
|
|
8
|
+
readonly fields: SvelteSet<Snippet<[]>>;
|
|
9
|
+
};
|
|
10
|
+
export declare const hoistFormFields: (fields: Snippet) => boolean;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { getContext, setContext } from "svelte";
|
|
2
|
+
import { SvelteSet } from "svelte/reactivity";
|
|
3
|
+
export const createFormFieldsContext = () => {
|
|
4
|
+
const fields = new SvelteSet();
|
|
5
|
+
const context = {
|
|
6
|
+
registerField: (field) => {
|
|
7
|
+
fields.add(field);
|
|
8
|
+
return () => fields.delete(field);
|
|
9
|
+
},
|
|
10
|
+
get fields() {
|
|
11
|
+
return fields;
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
setContext("FormFieldsContext", context);
|
|
15
|
+
return context;
|
|
16
|
+
};
|
|
17
|
+
export const hoistFormFields = (fields) => {
|
|
18
|
+
const context = getContext("FormFieldsContext");
|
|
19
|
+
if (!context)
|
|
20
|
+
return false;
|
|
21
|
+
$effect(() => context.registerField(fields));
|
|
22
|
+
return true;
|
|
23
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { untrack } from "svelte";
|
|
2
2
|
export function useFrozenData(options) {
|
|
3
3
|
const { freeze, data } = $derived(options);
|
|
4
|
-
let frozenValue = $state(data);
|
|
4
|
+
let frozenValue = $state((() => data)());
|
|
5
5
|
$effect(() => {
|
|
6
6
|
// We should keep updating the frozen value, as long as we shouldn't freeze
|
|
7
7
|
// the value yet. The moment we should freeze the value we stop updating it
|
package/dist/label/Label.svelte
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import type {
|
|
2
|
+
import type { Props } from "../utils/types.js"
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const DEFAULT_LABEL_TAG = "label" as const
|
|
5
5
|
|
|
6
|
-
export type
|
|
6
|
+
export type LabelOwnProps = {
|
|
7
|
+
element?: HTMLElement
|
|
8
|
+
id?: string
|
|
7
9
|
passive?: boolean
|
|
8
10
|
htmlFor?: string
|
|
9
11
|
}
|
|
12
|
+
|
|
13
|
+
export type LabelProps = Props<typeof DEFAULT_LABEL_TAG, {}, LabelOwnProps>
|
|
10
14
|
</script>
|
|
11
15
|
|
|
12
|
-
<script lang="ts"
|
|
16
|
+
<script lang="ts">
|
|
13
17
|
import { onMount } from "svelte"
|
|
14
|
-
import {
|
|
18
|
+
import { useProvidedId, htmlid } from "../utils/id.js"
|
|
15
19
|
import { useDisabled } from "../hooks/use-disabled.js"
|
|
16
20
|
import { stateFromSlot } from "../utils/state.js"
|
|
17
21
|
import ElementOrComponent from "../utils/ElementOrComponent.svelte"
|
|
@@ -19,16 +23,16 @@
|
|
|
19
23
|
|
|
20
24
|
const internalId = htmlid()
|
|
21
25
|
const context = useLabelContext()
|
|
22
|
-
const providedHtmlFor =
|
|
26
|
+
const providedHtmlFor = useProvidedId()
|
|
23
27
|
const providedDisabled = useDisabled()
|
|
24
28
|
|
|
25
29
|
let {
|
|
26
|
-
|
|
27
|
-
id = `headlessui-label-${internalId}
|
|
30
|
+
element = $bindable(),
|
|
31
|
+
id = `headlessui-label-${internalId}`,
|
|
28
32
|
htmlFor = providedHtmlFor,
|
|
29
33
|
passive = false,
|
|
30
34
|
...theirOriginalProps
|
|
31
|
-
}:
|
|
35
|
+
}: LabelProps = $props()
|
|
32
36
|
|
|
33
37
|
onMount(() => {
|
|
34
38
|
context.register(id)
|
|
@@ -77,7 +81,7 @@
|
|
|
77
81
|
}
|
|
78
82
|
}
|
|
79
83
|
|
|
80
|
-
const disabled = $derived(providedDisabled.
|
|
84
|
+
const disabled = $derived(providedDisabled.current ?? false)
|
|
81
85
|
const slot = $derived({ disabled })
|
|
82
86
|
const ourProps = $derived({
|
|
83
87
|
id,
|
|
@@ -101,5 +105,5 @@
|
|
|
101
105
|
{theirProps}
|
|
102
106
|
defaultTag={htmlFor ? DEFAULT_LABEL_TAG : "div"}
|
|
103
107
|
name={context.name || "Label"}
|
|
104
|
-
bind:
|
|
108
|
+
bind:element
|
|
105
109
|
/>
|
|
@@ -1,37 +1,12 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare
|
|
3
|
-
export type
|
|
1
|
+
import type { Props } from "../utils/types.js";
|
|
2
|
+
declare const DEFAULT_LABEL_TAG: "label";
|
|
3
|
+
export type LabelOwnProps = {
|
|
4
|
+
element?: HTMLElement;
|
|
5
|
+
id?: string;
|
|
4
6
|
passive?: boolean;
|
|
5
7
|
htmlFor?: string;
|
|
6
8
|
};
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
} & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
|
|
11
|
-
children?: import("../utils/types.js").Children<{}> | undefined;
|
|
12
|
-
ref?: HTMLElement;
|
|
13
|
-
} & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
|
|
14
|
-
class?: PropsOf<TTag>["class"] | ((bag: {}) => string) | undefined;
|
|
15
|
-
} : {}) & {
|
|
16
|
-
passive?: boolean;
|
|
17
|
-
htmlFor?: string;
|
|
18
|
-
};
|
|
19
|
-
events(): {} & {
|
|
20
|
-
[evt: string]: CustomEvent<any>;
|
|
21
|
-
};
|
|
22
|
-
slots(): {};
|
|
23
|
-
bindings(): "ref";
|
|
24
|
-
exports(): {};
|
|
25
|
-
}
|
|
26
|
-
interface $$IsomorphicComponent {
|
|
27
|
-
new <TTag extends ElementType = typeof DEFAULT_LABEL_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']>> & {
|
|
28
|
-
$$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
|
|
29
|
-
} & ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
30
|
-
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
|
|
31
|
-
$$events?: ReturnType<__sveltets_Render<TTag>['events']>;
|
|
32
|
-
}): ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
33
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
34
|
-
}
|
|
35
|
-
declare const Label: $$IsomorphicComponent;
|
|
36
|
-
type Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = InstanceType<typeof Label<TTag>>;
|
|
9
|
+
export type LabelProps = Props<typeof DEFAULT_LABEL_TAG, {}, LabelOwnProps>;
|
|
10
|
+
declare const Label: import("svelte").Component<LabelProps, {}, "element">;
|
|
11
|
+
type Label = ReturnType<typeof Label>;
|
|
37
12
|
export default Label;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getContext, setContext } from "svelte";
|
|
2
2
|
export function useLabelContext() {
|
|
3
3
|
let context = getContext("LabelContext");
|
|
4
|
-
if (context
|
|
4
|
+
if (!context) {
|
|
5
5
|
let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
|
|
6
6
|
if (Error.captureStackTrace)
|
|
7
7
|
Error.captureStackTrace(err, useLabelContext);
|
package/dist/label/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as Label, type LabelProps } from "./Label.svelte";
|
|
1
|
+
export { default as Label, type LabelProps, type LabelOwnProps } from "./Label.svelte";
|