Initial commit with files
Still need to fix the imports
This commit is contained in:
17
src/lib/internal/ForcePortalRootContext.svelte
Normal file
17
src/lib/internal/ForcePortalRootContext.svelte
Normal file
@@ -0,0 +1,17 @@
|
||||
<script lang="ts" context="module">
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
const FORCE_PORTAL_ROOT_CONTEXT_NAME =
|
||||
"headlessui-force-portal-root-context";
|
||||
|
||||
export function usePortalRoot(): Writable<boolean> | undefined {
|
||||
return getContext(FORCE_PORTAL_ROOT_CONTEXT_NAME);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let force: boolean;
|
||||
setContext(FORCE_PORTAL_ROOT_CONTEXT_NAME, writable(force));
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
42
src/lib/internal/StackContextProvider.svelte
Normal file
42
src/lib/internal/StackContextProvider.svelte
Normal file
@@ -0,0 +1,42 @@
|
||||
<script lang="ts" context="module">
|
||||
export enum StackMessage {
|
||||
Add,
|
||||
Remove,
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
type OnUpdate = (
|
||||
message: StackMessage,
|
||||
element: HTMLElement | null
|
||||
) => void;
|
||||
|
||||
export let onUpdate: OnUpdate | undefined;
|
||||
export let element: HTMLElement | null;
|
||||
|
||||
let parentUpdateStore: Writable<OnUpdate> | undefined =
|
||||
getContext("StackContext");
|
||||
let notifyStore: Writable<OnUpdate> = writable(() => {});
|
||||
setContext("StackContext", notifyStore);
|
||||
|
||||
$: notifyStore.set((...args: Parameters<OnUpdate>) => {
|
||||
// Notify our layer
|
||||
onUpdate?.(...args);
|
||||
|
||||
// Notify the parent
|
||||
$parentUpdateStore?.(...args);
|
||||
});
|
||||
|
||||
$: _cleanup = (() => {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
}
|
||||
if (!element) return null;
|
||||
$notifyStore(StackMessage.Add, element);
|
||||
return () => $notifyStore(StackMessage.Remove, element);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
7
src/lib/internal/dom-containers.ts
Normal file
7
src/lib/internal/dom-containers.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export function contains(containers: Set<HTMLElement>, element: HTMLElement) {
|
||||
for (let container of containers) {
|
||||
if (container.contains(element)) return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
21
src/lib/internal/open-closed.ts
Normal file
21
src/lib/internal/open-closed.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { getContext, setContext } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
export enum State {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
|
||||
const OPEN_CLOSED_CONTEXT_NAME = "OpenClosed";
|
||||
export function hasOpenClosed() {
|
||||
return useOpenClosed() !== undefined
|
||||
}
|
||||
|
||||
export function useOpenClosed(): Writable<State> | undefined {
|
||||
return getContext(OPEN_CLOSED_CONTEXT_NAME);
|
||||
}
|
||||
|
||||
export function useOpenClosedProvider(value: Writable<State>) {
|
||||
setContext(OPEN_CLOSED_CONTEXT_NAME, value);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user