@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.2
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 +6 -10
- package/dist/button/Button.svelte.d.ts +34 -26
- package/dist/checkbox/Checkbox.svelte +40 -22
- package/dist/checkbox/Checkbox.svelte.d.ts +44 -28
- package/dist/close-button/CloseButton.svelte +5 -4
- package/dist/close-button/CloseButton.svelte.d.ts +36 -13
- package/dist/combobox/Combobox.svelte +2 -2
- package/dist/combobox/Combobox.svelte.d.ts +9 -9
- package/dist/data-interactive/DataInteractive.svelte +41 -0
- package/dist/data-interactive/DataInteractive.svelte.d.ts +39 -0
- package/dist/data-interactive/index.d.ts +1 -0
- package/dist/data-interactive/index.js +1 -0
- package/dist/description/Description.svelte +10 -53
- package/dist/description/Description.svelte.d.ts +15 -32
- package/dist/description/context.svelte.d.ts +17 -0
- package/dist/description/context.svelte.js +51 -0
- package/dist/dialog/Dialog.svelte +51 -0
- package/dist/dialog/Dialog.svelte.d.ts +60 -0
- package/dist/dialog/DialogBackdrop.svelte +39 -0
- package/dist/dialog/DialogBackdrop.svelte.d.ts +38 -0
- package/dist/dialog/DialogPanel.svelte +46 -0
- package/dist/dialog/DialogPanel.svelte.d.ts +40 -0
- package/dist/dialog/DialogTitle.svelte +29 -0
- package/dist/dialog/DialogTitle.svelte.d.ts +34 -0
- package/dist/dialog/InternalDialog.svelte +233 -0
- package/dist/dialog/InternalDialog.svelte.d.ts +42 -0
- package/dist/dialog/context.svelte.d.ts +15 -0
- package/dist/dialog/context.svelte.js +16 -0
- package/dist/dialog/index.d.ts +4 -0
- package/dist/dialog/index.js +4 -0
- package/dist/field/Field.svelte +8 -10
- package/dist/field/Field.svelte.d.ts +21 -17
- package/dist/fieldset/Fieldset.svelte +11 -9
- package/dist/fieldset/Fieldset.svelte.d.ts +21 -17
- package/dist/focus-trap/FocusTrap.svelte +332 -0
- package/dist/focus-trap/FocusTrap.svelte.d.ts +58 -0
- package/dist/hooks/use-controllable.svelte.d.ts +1 -1
- package/dist/hooks/use-controllable.svelte.js +3 -3
- package/dist/hooks/use-escape.svelte.d.ts +5 -0
- package/dist/hooks/use-escape.svelte.js +26 -0
- package/dist/hooks/use-event-listener.svelte.d.ts +6 -0
- package/dist/hooks/use-event-listener.svelte.js +12 -0
- package/dist/hooks/use-inert-others.svelte.d.ts +2 -2
- package/dist/hooks/use-inert-others.svelte.js +3 -3
- package/dist/hooks/use-is-mounted.svelte.d.ts +3 -0
- package/dist/hooks/use-is-mounted.svelte.js +14 -0
- package/dist/hooks/use-is-touch-device.svelte.d.ts +3 -0
- package/dist/hooks/use-is-touch-device.svelte.js +20 -0
- package/dist/hooks/use-root-containers.svelte.d.ts +9 -0
- package/dist/hooks/use-root-containers.svelte.js +50 -0
- package/dist/hooks/use-tab-direction.svelte.d.ts +7 -0
- package/dist/hooks/use-tab-direction.svelte.js +25 -0
- package/dist/hooks/use-transition.svelte.js +14 -13
- package/dist/hooks/use-tree-walker.svelte.d.ts +8 -0
- package/dist/hooks/use-tree-walker.svelte.js +19 -0
- package/dist/hooks/use-watch.svelte.d.ts +4 -0
- package/dist/hooks/use-watch.svelte.js +16 -0
- package/dist/hooks/use-window-event.svelte.d.ts +6 -0
- package/dist/hooks/use-window-event.svelte.js +12 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +9 -0
- package/dist/input/Input.svelte +59 -0
- package/dist/input/Input.svelte.d.ts +52 -0
- package/dist/input/index.d.ts +1 -0
- package/dist/input/index.js +1 -0
- package/dist/internal/FocusSentinel.svelte.d.ts +4 -1
- package/dist/internal/ForcePortalRoot.svelte +6 -0
- package/dist/internal/ForcePortalRoot.svelte.d.ts +22 -0
- package/dist/internal/FormFields.svelte.d.ts +4 -1
- package/dist/internal/FormResolver.svelte.d.ts +4 -1
- package/dist/internal/Hidden.svelte +5 -9
- package/dist/internal/Hidden.svelte.d.ts +17 -10
- package/dist/internal/HoistFormFields.svelte.d.ts +4 -1
- package/dist/internal/MainTreeProvider.svelte +45 -0
- package/dist/internal/MainTreeProvider.svelte.d.ts +31 -0
- package/dist/internal/Portal.svelte.d.ts +4 -1
- package/dist/internal/close-provider.d.ts +7 -0
- package/dist/internal/close-provider.js +7 -0
- package/dist/internal/floating.svelte.d.ts +13 -8
- package/dist/internal/floating.svelte.js +197 -186
- package/dist/internal/id.d.ts +1 -1
- package/dist/internal/open-closed.d.ts +1 -1
- package/dist/internal/open-closed.js +1 -1
- package/dist/label/Label.svelte +12 -61
- package/dist/label/Label.svelte.d.ts +19 -32
- package/dist/label/context.svelte.d.ts +17 -0
- package/dist/label/context.svelte.js +56 -0
- package/dist/legend/Legend.svelte +4 -3
- package/dist/legend/Legend.svelte.d.ts +33 -15
- package/dist/listbox/Listbox.svelte +6 -9
- package/dist/listbox/Listbox.svelte.d.ts +29 -10
- package/dist/listbox/ListboxButton.svelte +6 -8
- package/dist/listbox/ListboxButton.svelte.d.ts +18 -7
- package/dist/listbox/ListboxOption.svelte +4 -6
- package/dist/listbox/ListboxOption.svelte.d.ts +22 -11
- package/dist/listbox/ListboxOptions.svelte +21 -19
- package/dist/listbox/ListboxOptions.svelte.d.ts +23 -7
- package/dist/listbox/ListboxSelectedOption.svelte +17 -7
- package/dist/listbox/ListboxSelectedOption.svelte.d.ts +23 -13
- package/dist/menu/Menu.svelte +235 -0
- package/dist/menu/Menu.svelte.d.ts +42 -0
- package/dist/menu/MenuButton.svelte +127 -0
- package/dist/menu/MenuButton.svelte.d.ts +52 -0
- package/dist/menu/MenuHeading.svelte +19 -0
- package/dist/menu/MenuHeading.svelte.d.ts +39 -0
- package/dist/menu/MenuItem.svelte +114 -0
- package/dist/menu/MenuItem.svelte.d.ts +49 -0
- package/dist/menu/MenuItems.svelte +244 -0
- package/dist/menu/MenuItems.svelte.d.ts +55 -0
- package/dist/menu/MenuSection.svelte +14 -0
- package/dist/menu/MenuSection.svelte.d.ts +35 -0
- package/dist/menu/MenuSeparator.svelte +9 -0
- package/dist/menu/MenuSeparator.svelte.d.ts +35 -0
- package/dist/menu/context.svelte.d.ts +47 -0
- package/dist/menu/context.svelte.js +21 -0
- package/dist/menu/index.d.ts +7 -0
- package/dist/menu/index.js +7 -0
- package/dist/portal/InternalPortal.svelte +22 -33
- package/dist/portal/InternalPortal.svelte.d.ts +16 -7
- package/dist/portal/Portal.svelte +4 -8
- package/dist/portal/Portal.svelte.d.ts +6 -6
- package/dist/portal/PortalGroup.svelte +5 -6
- package/dist/portal/PortalGroup.svelte.d.ts +16 -7
- package/dist/switch/Switch.svelte +11 -17
- package/dist/switch/Switch.svelte.d.ts +23 -6
- package/dist/switch/SwitchGroup.svelte +7 -8
- package/dist/switch/SwitchGroup.svelte.d.ts +14 -7
- package/dist/tabs/Tab.svelte +9 -14
- package/dist/tabs/Tab.svelte.d.ts +18 -6
- package/dist/tabs/TabGroup.svelte +20 -23
- package/dist/tabs/TabGroup.svelte.d.ts +19 -6
- package/dist/tabs/TabList.svelte +5 -7
- package/dist/tabs/TabList.svelte.d.ts +13 -6
- package/dist/tabs/TabPanel.svelte +30 -32
- package/dist/tabs/TabPanel.svelte.d.ts +19 -6
- package/dist/tabs/TabPanels.svelte +5 -6
- package/dist/tabs/TabPanels.svelte.d.ts +13 -6
- package/dist/transition/InternalTransitionChild.svelte +178 -0
- package/dist/transition/InternalTransitionChild.svelte.d.ts +55 -0
- package/dist/transition/Transition.svelte +89 -0
- package/dist/transition/Transition.svelte.d.ts +42 -0
- package/dist/transition/TransitionChild.svelte +16 -0
- package/dist/transition/TransitionChild.svelte.d.ts +44 -0
- package/dist/transition/context.svelte.d.ts +64 -0
- package/dist/transition/context.svelte.js +120 -0
- package/dist/transition/index.d.ts +2 -0
- package/dist/transition/index.js +2 -0
- package/dist/utils/ElementOrComponent.svelte +26 -0
- package/dist/utils/ElementOrComponent.svelte.d.ts +56 -0
- package/dist/utils/Generic.svelte +44 -0
- package/dist/utils/Generic.svelte.d.ts +35 -0
- package/dist/utils/StableCollection.svelte +1 -1
- package/dist/utils/StableCollection.svelte.d.ts +4 -1
- package/dist/utils/active-element-history.d.ts +1 -0
- package/dist/utils/active-element-history.js +35 -0
- package/dist/utils/alternative-types.d.ts +21 -0
- package/dist/utils/alternative-types.js +1 -0
- package/dist/utils/class-names.d.ts +1 -0
- package/dist/utils/class-names.js +10 -0
- package/dist/utils/focus-management.d.ts +2 -1
- package/dist/utils/focus-management.js +13 -13
- package/dist/utils/on-document-ready.d.ts +1 -0
- package/dist/utils/on-document-ready.js +12 -0
- package/dist/utils/render.d.ts +3 -0
- package/dist/utils/render.js +63 -0
- package/dist/utils/state.d.ts +7 -1
- package/dist/utils/state.js +10 -6
- package/dist/utils/types.d.ts +14 -17
- package/dist/utils/types.js +0 -5
- package/package.json +26 -25
- package/dist/tabs/Button.svelte +0 -65
- package/dist/tabs/Button.svelte.d.ts +0 -39
- package/dist/utils/close.d.ts +0 -2
- package/dist/utils/close.js +0 -3
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">import { useId } from "../hooks/use-id.js";
|
|
2
|
+
import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js";
|
|
3
|
+
import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js";
|
|
4
|
+
import { useNestedPortals } from "../portal/InternalPortal.svelte";
|
|
5
|
+
import { getOwnerDocument } from "../utils/owner.js";
|
|
6
|
+
import { DEFAULT_DIALOG_TAG, DialogRenderFeatures } from "./Dialog.svelte";
|
|
7
|
+
import { useInertOthers } from "../hooks/use-inert-others.svelte.js";
|
|
8
|
+
import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
|
|
9
|
+
import { useEscape } from "../hooks/use-escape.svelte.js";
|
|
10
|
+
import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
|
|
11
|
+
import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
|
|
12
|
+
import { setContext } from "svelte";
|
|
13
|
+
import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js";
|
|
14
|
+
import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte";
|
|
15
|
+
import Portal from "../portal/Portal.svelte";
|
|
16
|
+
import PortalGroup from "../portal/PortalGroup.svelte";
|
|
17
|
+
import ForcePortalRoot from "../internal/ForcePortalRoot.svelte";
|
|
18
|
+
import { createCloseContext } from "../internal/close-provider.js";
|
|
19
|
+
import ElementOrComponent from "../utils/ElementOrComponent.svelte";
|
|
20
|
+
import { DialogStates } from "./context.svelte.js";
|
|
21
|
+
import { useDescriptions } from "../description/context.svelte.js";
|
|
22
|
+
const internalId = useId();
|
|
23
|
+
let {
|
|
24
|
+
ref = $bindable(),
|
|
25
|
+
id = `headlessui-dialog-${internalId}`,
|
|
26
|
+
open: theirOpen,
|
|
27
|
+
onclose,
|
|
28
|
+
initialFocus,
|
|
29
|
+
role: theirRole = "dialog",
|
|
30
|
+
autofocus = true,
|
|
31
|
+
__demoMode = false,
|
|
32
|
+
unmount = false,
|
|
33
|
+
...theirProps
|
|
34
|
+
} = $props();
|
|
35
|
+
let didWarnOnRole = $state(false);
|
|
36
|
+
const role = $derived.by(() => {
|
|
37
|
+
if (theirRole === "dialog" || theirRole === "alertdialog") {
|
|
38
|
+
return theirRole;
|
|
39
|
+
}
|
|
40
|
+
if (!didWarnOnRole) {
|
|
41
|
+
didWarnOnRole = true;
|
|
42
|
+
console.warn(
|
|
43
|
+
`Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
return "dialog";
|
|
47
|
+
});
|
|
48
|
+
const usesOpenClosedState = useOpenClosed();
|
|
49
|
+
const open = $derived(
|
|
50
|
+
theirOpen === void 0 && usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : theirOpen
|
|
51
|
+
);
|
|
52
|
+
const ownerDocument = $derived(getOwnerDocument(ref));
|
|
53
|
+
const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed);
|
|
54
|
+
let _state = $state({
|
|
55
|
+
titleId: null,
|
|
56
|
+
panelRef: null
|
|
57
|
+
});
|
|
58
|
+
const close = $derived(() => onclose(false));
|
|
59
|
+
const setTitleId = (id2) => _state.titleId = id2;
|
|
60
|
+
const enabled = $derived(dialogState === DialogStates.Open);
|
|
61
|
+
const nestedPortals = useNestedPortals();
|
|
62
|
+
const { portals } = $derived(nestedPortals);
|
|
63
|
+
const defaultContainer = {
|
|
64
|
+
get current() {
|
|
65
|
+
return _state.panelRef ?? ref;
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
const mainTreeNode = useMainTreeNode();
|
|
69
|
+
let { resolvedContainers: resolvedRootContainers } = $derived(
|
|
70
|
+
useRootContainers({
|
|
71
|
+
get mainTreeNode() {
|
|
72
|
+
return mainTreeNode.node;
|
|
73
|
+
},
|
|
74
|
+
get portals() {
|
|
75
|
+
return portals;
|
|
76
|
+
},
|
|
77
|
+
get defaultContainers() {
|
|
78
|
+
return defaultContainer.current ? [defaultContainer.current] : [];
|
|
79
|
+
}
|
|
80
|
+
})
|
|
81
|
+
);
|
|
82
|
+
const isClosing = $derived(
|
|
83
|
+
usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
|
|
84
|
+
);
|
|
85
|
+
const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
|
|
86
|
+
useInertOthers({
|
|
87
|
+
get enabled() {
|
|
88
|
+
return inertOthersEnabled;
|
|
89
|
+
},
|
|
90
|
+
elements: {
|
|
91
|
+
get allowed() {
|
|
92
|
+
return [
|
|
93
|
+
// Allow the headlessui-portal of the Dialog to be interactive. This
|
|
94
|
+
// contains the current dialog and the necessary focus guard elements.
|
|
95
|
+
ref?.closest("[data-headlessui-portal]") ?? null
|
|
96
|
+
];
|
|
97
|
+
},
|
|
98
|
+
get disallowed() {
|
|
99
|
+
return [
|
|
100
|
+
// Disallow the "main" tree root node
|
|
101
|
+
mainTreeNode.node?.closest("body > *:not(#headlessui-portal-root)") ?? null
|
|
102
|
+
];
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
useOutsideClick({
|
|
107
|
+
get enabled() {
|
|
108
|
+
return enabled;
|
|
109
|
+
},
|
|
110
|
+
get containers() {
|
|
111
|
+
return resolvedRootContainers;
|
|
112
|
+
},
|
|
113
|
+
cb(event) {
|
|
114
|
+
event.preventDefault();
|
|
115
|
+
close();
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
useEscape({
|
|
119
|
+
get enabled() {
|
|
120
|
+
return enabled;
|
|
121
|
+
},
|
|
122
|
+
get view() {
|
|
123
|
+
return ownerDocument?.defaultView ?? null;
|
|
124
|
+
},
|
|
125
|
+
cb(event) {
|
|
126
|
+
event.preventDefault();
|
|
127
|
+
event.stopPropagation();
|
|
128
|
+
if (document.activeElement && "blur" in document.activeElement && typeof document.activeElement.blur === "function") {
|
|
129
|
+
document.activeElement.blur();
|
|
130
|
+
}
|
|
131
|
+
close();
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
|
|
135
|
+
useScrollLock({
|
|
136
|
+
get enabled() {
|
|
137
|
+
return scrollLockEnabled;
|
|
138
|
+
},
|
|
139
|
+
get ownerDocument() {
|
|
140
|
+
return ownerDocument;
|
|
141
|
+
},
|
|
142
|
+
resolveAllowedContainers() {
|
|
143
|
+
return resolvedRootContainers;
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
useOnDisappear({
|
|
147
|
+
get enabled() {
|
|
148
|
+
return enabled;
|
|
149
|
+
},
|
|
150
|
+
get ref() {
|
|
151
|
+
return ref;
|
|
152
|
+
},
|
|
153
|
+
get ondisappear() {
|
|
154
|
+
return close;
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
const describedby = useDescriptions();
|
|
158
|
+
setContext("DialogContext", {
|
|
159
|
+
get titleId() {
|
|
160
|
+
return _state.titleId;
|
|
161
|
+
},
|
|
162
|
+
get panelRef() {
|
|
163
|
+
return _state.panelRef;
|
|
164
|
+
},
|
|
165
|
+
get dialogState() {
|
|
166
|
+
return dialogState;
|
|
167
|
+
},
|
|
168
|
+
get close() {
|
|
169
|
+
return close;
|
|
170
|
+
},
|
|
171
|
+
get unmount() {
|
|
172
|
+
return unmount;
|
|
173
|
+
},
|
|
174
|
+
setTitleId
|
|
175
|
+
});
|
|
176
|
+
const slot = $derived({ open: dialogState === DialogStates.Open });
|
|
177
|
+
const ourProps = $derived({
|
|
178
|
+
id,
|
|
179
|
+
role,
|
|
180
|
+
tabIndex: -1,
|
|
181
|
+
"aria-modal": __demoMode ? void 0 : dialogState === DialogStates.Open ? true : void 0,
|
|
182
|
+
"aria-labelledby": _state.titleId,
|
|
183
|
+
"aria-describedby": describedby.value,
|
|
184
|
+
unmount
|
|
185
|
+
});
|
|
186
|
+
const shouldMoveFocusInside = !useIsTouchDevice().value;
|
|
187
|
+
const focusTrapFeatures = $derived.by(() => {
|
|
188
|
+
let focusTrapFeatures2 = FocusTrapFeatures.None;
|
|
189
|
+
if (enabled && !__demoMode) {
|
|
190
|
+
focusTrapFeatures2 |= FocusTrapFeatures.RestoreFocus;
|
|
191
|
+
focusTrapFeatures2 |= FocusTrapFeatures.TabLock;
|
|
192
|
+
if (autofocus) {
|
|
193
|
+
focusTrapFeatures2 |= FocusTrapFeatures.AutoFocus;
|
|
194
|
+
}
|
|
195
|
+
if (shouldMoveFocusInside) {
|
|
196
|
+
focusTrapFeatures2 |= FocusTrapFeatures.InitialFocus;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
return focusTrapFeatures2;
|
|
200
|
+
});
|
|
201
|
+
clearOpenClosedContext();
|
|
202
|
+
createCloseContext({
|
|
203
|
+
get close() {
|
|
204
|
+
return close;
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
</script>
|
|
208
|
+
|
|
209
|
+
<ForcePortalRoot force={true}>
|
|
210
|
+
<Portal>
|
|
211
|
+
<PortalGroup target={ref ?? null}>
|
|
212
|
+
<ForcePortalRoot force={false}>
|
|
213
|
+
<FocusTrap
|
|
214
|
+
{initialFocus}
|
|
215
|
+
initialFocusFallback={ref}
|
|
216
|
+
containers={resolvedRootContainers}
|
|
217
|
+
features={focusTrapFeatures}
|
|
218
|
+
>
|
|
219
|
+
<ElementOrComponent
|
|
220
|
+
{ourProps}
|
|
221
|
+
{theirProps}
|
|
222
|
+
slots={slot}
|
|
223
|
+
defaultTag={DEFAULT_DIALOG_TAG}
|
|
224
|
+
features={DialogRenderFeatures}
|
|
225
|
+
visible={dialogState === DialogStates.Open}
|
|
226
|
+
name="Dialog"
|
|
227
|
+
bind:ref
|
|
228
|
+
/>
|
|
229
|
+
</FocusTrap>
|
|
230
|
+
</ForcePortalRoot>
|
|
231
|
+
</PortalGroup>
|
|
232
|
+
</Portal>
|
|
233
|
+
</ForcePortalRoot>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { DEFAULT_DIALOG_TAG, type DialogRenderPropArg } from "./Dialog.svelte";
|
|
2
|
+
import type { ElementType } from "../utils/types.js";
|
|
3
|
+
declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> {
|
|
4
|
+
props(): {
|
|
5
|
+
as?: TTag | undefined;
|
|
6
|
+
} & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "unmount" | "static" | "id" | "role" | "onclose" | "initialFocus" | ("aria-describedby" | "aria-labelledby" | "aria-modal") | "open" | "transition" | "__demoMode"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
|
|
7
|
+
children?: import("../utils/types.js").Children<DialogRenderPropArg> | undefined;
|
|
8
|
+
ref?: HTMLElement;
|
|
9
|
+
} & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").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) ? {
|
|
10
|
+
class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: DialogRenderPropArg) => string) | undefined;
|
|
11
|
+
} : {}) & {
|
|
12
|
+
static?: boolean | undefined;
|
|
13
|
+
unmount?: boolean | undefined;
|
|
14
|
+
} & {
|
|
15
|
+
id?: string;
|
|
16
|
+
open?: boolean;
|
|
17
|
+
onclose(value: boolean): void;
|
|
18
|
+
initialFocus?: HTMLElement;
|
|
19
|
+
role?: "dialog" | "alertdialog";
|
|
20
|
+
autofocus?: boolean;
|
|
21
|
+
transition?: boolean;
|
|
22
|
+
__demoMode?: boolean;
|
|
23
|
+
};
|
|
24
|
+
events(): {} & {
|
|
25
|
+
[evt: string]: CustomEvent<any>;
|
|
26
|
+
};
|
|
27
|
+
slots(): {};
|
|
28
|
+
bindings(): "ref";
|
|
29
|
+
exports(): {};
|
|
30
|
+
}
|
|
31
|
+
interface $$IsomorphicComponent {
|
|
32
|
+
new <TTag extends ElementType = typeof DEFAULT_DIALOG_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']>> & {
|
|
33
|
+
$$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
|
|
34
|
+
} & ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
35
|
+
<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
|
|
36
|
+
$$events?: ReturnType<__sveltets_Render<TTag>['events']>;
|
|
37
|
+
}): ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
38
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
39
|
+
}
|
|
40
|
+
declare const InternalDialog: $$IsomorphicComponent;
|
|
41
|
+
type InternalDialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = InstanceType<typeof InternalDialog<TTag>>;
|
|
42
|
+
export default InternalDialog;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare enum DialogStates {
|
|
2
|
+
Open = 0,
|
|
3
|
+
Closed = 1
|
|
4
|
+
}
|
|
5
|
+
export interface StateDefinition {
|
|
6
|
+
titleId: string | null;
|
|
7
|
+
panelRef: HTMLElement | null;
|
|
8
|
+
}
|
|
9
|
+
export type DialogContext = StateDefinition & {
|
|
10
|
+
dialogState: DialogStates;
|
|
11
|
+
unmount: boolean;
|
|
12
|
+
close(): void;
|
|
13
|
+
setTitleId(id: string | null): void;
|
|
14
|
+
};
|
|
15
|
+
export declare function useDialogContext(component: string): DialogContext;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { getContext } from "svelte";
|
|
2
|
+
export var DialogStates;
|
|
3
|
+
(function (DialogStates) {
|
|
4
|
+
DialogStates[DialogStates["Open"] = 0] = "Open";
|
|
5
|
+
DialogStates[DialogStates["Closed"] = 1] = "Closed";
|
|
6
|
+
})(DialogStates || (DialogStates = {}));
|
|
7
|
+
export function useDialogContext(component) {
|
|
8
|
+
const context = getContext("DialogContext");
|
|
9
|
+
if (context === null) {
|
|
10
|
+
let err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
|
|
11
|
+
if (Error.captureStackTrace)
|
|
12
|
+
Error.captureStackTrace(err, useDialogContext);
|
|
13
|
+
throw err;
|
|
14
|
+
}
|
|
15
|
+
return context;
|
|
16
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { default as Dialog, type DialogProps } from "./Dialog.svelte";
|
|
2
|
+
export { default as DialogBackdrop, type DialogBackdropProps } from "./DialogBackdrop.svelte";
|
|
3
|
+
export { default as DialogPanel, type DialogPanelProps } from "./DialogPanel.svelte";
|
|
4
|
+
export { default as DialogTitle, type DialogTitleProps } from "./DialogTitle.svelte";
|
package/dist/field/Field.svelte
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
<script lang="ts"
|
|
1
|
+
<script lang="ts" module>let DEFAULT_FIELD_TAG = "div";
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
|
-
<script lang="ts" generics="TTag extends
|
|
4
|
+
<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { useDisabled } from "../hooks/use-disabled.js";
|
|
5
5
|
import { createIdContext } from "../utils/id.js";
|
|
6
6
|
import { stateFromSlot } from "../utils/state.js";
|
|
7
7
|
import { nanoid } from "nanoid";
|
|
8
8
|
import { setContext } from "svelte";
|
|
9
|
-
import { useLabels } from "../label/
|
|
10
|
-
import { useDescriptions } from "../description/
|
|
11
|
-
|
|
9
|
+
import { useLabels } from "../label/context.svelte.js";
|
|
10
|
+
import { useDescriptions } from "../description/context.svelte.js";
|
|
11
|
+
import ElementOrComponent from "../utils/ElementOrComponent.svelte";
|
|
12
|
+
let { ref = $bindable(), disabled: ownDisabled = false, ...theirProps } = $props();
|
|
12
13
|
const inputId = `headlessui-control-${nanoid(8)}`;
|
|
13
14
|
createIdContext(inputId);
|
|
14
15
|
useLabels();
|
|
@@ -23,11 +24,8 @@ setContext("DisabledContext", {
|
|
|
23
24
|
const slot = $derived({ disabled });
|
|
24
25
|
const ourProps = $derived({
|
|
25
26
|
disabled: disabled || void 0,
|
|
26
|
-
"aria-disabled": disabled || void 0
|
|
27
|
-
...stateFromSlot(slot)
|
|
27
|
+
"aria-disabled": disabled || void 0
|
|
28
28
|
});
|
|
29
29
|
</script>
|
|
30
30
|
|
|
31
|
-
<
|
|
32
|
-
{#if children}{@render children(slot)}{/if}
|
|
33
|
-
</svelte:element>
|
|
31
|
+
<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELD_TAG} name="Field" bind:ref />
|
|
@@ -1,33 +1,37 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type { ElementType, Props } from "../utils/types.js";
|
|
2
|
+
declare let DEFAULT_FIELD_TAG: "div";
|
|
3
|
+
type FieldRenderPropArg = {};
|
|
4
|
+
type FieldPropsWeControl = never;
|
|
5
|
+
export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<TTag, FieldRenderPropArg, FieldPropsWeControl, {
|
|
4
6
|
disabled?: boolean;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
]
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
import
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
}>;
|
|
8
|
+
declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> {
|
|
9
|
+
props(): {
|
|
10
|
+
as?: TTag | undefined;
|
|
11
|
+
} & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
|
|
12
|
+
children?: import("../utils/types.js").Children<FieldRenderPropArg> | undefined;
|
|
13
|
+
ref?: HTMLElement;
|
|
14
|
+
} & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").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) ? {
|
|
15
|
+
class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: FieldRenderPropArg) => string) | undefined;
|
|
16
|
+
} : {}) & {
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
};
|
|
15
19
|
events(): {} & {
|
|
16
20
|
[evt: string]: CustomEvent<any>;
|
|
17
21
|
};
|
|
18
22
|
slots(): {};
|
|
19
|
-
bindings(): "";
|
|
23
|
+
bindings(): "ref";
|
|
20
24
|
exports(): {};
|
|
21
25
|
}
|
|
22
26
|
interface $$IsomorphicComponent {
|
|
23
|
-
new <TTag extends
|
|
27
|
+
new <TTag extends ElementType = typeof DEFAULT_FIELD_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']>> & {
|
|
24
28
|
$$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
|
|
25
29
|
} & ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
26
|
-
<TTag extends
|
|
30
|
+
<TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
|
|
27
31
|
$$events?: ReturnType<__sveltets_Render<TTag>['events']>;
|
|
28
32
|
}): ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
29
33
|
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
30
34
|
}
|
|
31
35
|
declare const Field: $$IsomorphicComponent;
|
|
32
|
-
type Field<TTag extends
|
|
36
|
+
type Field<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = InstanceType<typeof Field<TTag>>;
|
|
33
37
|
export default Field;
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
<script lang="ts"
|
|
1
|
+
<script lang="ts" module>let DEFAULT_FIELDSET_TAG = "fieldset";
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
|
-
<script lang="ts" generics="TTag extends
|
|
4
|
+
<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">import { setContext } from "svelte";
|
|
5
5
|
import { useDisabled } from "../hooks/use-disabled.js";
|
|
6
|
-
import { useLabels } from "../label/
|
|
7
|
-
|
|
6
|
+
import { useLabels } from "../label/context.svelte.js";
|
|
7
|
+
import ElementOrComponent from "../utils/ElementOrComponent.svelte";
|
|
8
|
+
let {
|
|
9
|
+
ref = $bindable(),
|
|
10
|
+
disabled: ownDisabled = false,
|
|
11
|
+
...theirProps
|
|
12
|
+
} = $props();
|
|
8
13
|
const providedDisabled = useDisabled();
|
|
9
14
|
const disabled = $derived(providedDisabled.value || ownDisabled);
|
|
10
15
|
setContext("DisabledContext", {
|
|
@@ -12,11 +17,10 @@ setContext("DisabledContext", {
|
|
|
12
17
|
return disabled;
|
|
13
18
|
}
|
|
14
19
|
});
|
|
15
|
-
const tag = $state(as ?? DEFAULT_FIELDSET_TAG);
|
|
16
20
|
const labelledBy = useLabels();
|
|
17
21
|
const slot = $derived({ disabled });
|
|
18
22
|
const ourProps = $derived(
|
|
19
|
-
|
|
23
|
+
(theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset" ? {
|
|
20
24
|
"aria-labelledby": labelledBy.value,
|
|
21
25
|
disabled: disabled || void 0
|
|
22
26
|
} : {
|
|
@@ -27,6 +31,4 @@ const ourProps = $derived(
|
|
|
27
31
|
);
|
|
28
32
|
</script>
|
|
29
33
|
|
|
30
|
-
<
|
|
31
|
-
{#if children}{@render children(slot)}{/if}
|
|
32
|
-
</svelte:element>
|
|
34
|
+
<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELDSET_TAG} name="Fieldset" bind:ref />
|
|
@@ -1,33 +1,37 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type { ElementType, Props } from "../utils/types.js";
|
|
2
|
+
declare let DEFAULT_FIELDSET_TAG: "fieldset";
|
|
3
|
+
type FieldsetRenderPropArg = {};
|
|
4
|
+
type FieldsetPropsWeControl = "aria-labelledby" | "aria-disabled" | "role";
|
|
5
|
+
export type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = Props<TTag, FieldsetRenderPropArg, FieldsetPropsWeControl, {
|
|
4
6
|
disabled?: boolean;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
]
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
import
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
}>;
|
|
8
|
+
declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> {
|
|
9
|
+
props(): {
|
|
10
|
+
as?: TTag | undefined;
|
|
11
|
+
} & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled" | FieldsetPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
|
|
12
|
+
children?: import("../utils/types.js").Children<FieldsetRenderPropArg> | undefined;
|
|
13
|
+
ref?: HTMLElement;
|
|
14
|
+
} & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").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) ? {
|
|
15
|
+
class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: FieldsetRenderPropArg) => string) | undefined;
|
|
16
|
+
} : {}) & {
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
};
|
|
15
19
|
events(): {} & {
|
|
16
20
|
[evt: string]: CustomEvent<any>;
|
|
17
21
|
};
|
|
18
22
|
slots(): {};
|
|
19
|
-
bindings(): "";
|
|
23
|
+
bindings(): "ref";
|
|
20
24
|
exports(): {};
|
|
21
25
|
}
|
|
22
26
|
interface $$IsomorphicComponent {
|
|
23
|
-
new <TTag extends
|
|
27
|
+
new <TTag extends ElementType = typeof DEFAULT_FIELDSET_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']>> & {
|
|
24
28
|
$$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
|
|
25
29
|
} & ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
26
|
-
<TTag extends
|
|
30
|
+
<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
|
|
27
31
|
$$events?: ReturnType<__sveltets_Render<TTag>['events']>;
|
|
28
32
|
}): ReturnType<__sveltets_Render<TTag>['exports']>;
|
|
29
33
|
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
30
34
|
}
|
|
31
35
|
declare const Fieldset: $$IsomorphicComponent;
|
|
32
|
-
type Fieldset<TTag extends
|
|
36
|
+
type Fieldset<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = InstanceType<typeof Fieldset<TTag>>;
|
|
33
37
|
export default Fieldset;
|