Initial commit with files
Still need to fix the imports
This commit is contained in:
35
src/lib/components/switch/SwitchGroup.svelte
Normal file
35
src/lib/components/switch/SwitchGroup.svelte
Normal file
@@ -0,0 +1,35 @@
|
||||
<script lang="ts" context="module">
|
||||
export interface StateDefinition {
|
||||
switchStore: Writable<HTMLButtonElement | null>;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import LabelProvider from "./LabelProvider.svelte";
|
||||
import { setContext } from "svelte";
|
||||
import { Writable, writable } from "svelte/store";
|
||||
|
||||
let switchStore: Writable<HTMLButtonElement | null> = writable(null);
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext("SwitchApi", api);
|
||||
|
||||
function onClick() {
|
||||
if (!$switchStore) return;
|
||||
$switchStore.click();
|
||||
$switchStore.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
$: api.set({
|
||||
switchStore,
|
||||
});
|
||||
</script>
|
||||
|
||||
<div {...$$restProps}>
|
||||
<DescriptionProvider name="Switch.Description">
|
||||
<LabelProvider name="Switch.Label" {onClick}>
|
||||
<slot />
|
||||
</LabelProvider>
|
||||
</DescriptionProvider>
|
||||
</div>
|
||||
Reference in New Issue
Block a user