-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/localstorage statekeeper (#11)
* init * added event dispatcher / change handler * added exemplary usage * Add slot support to checkbox component * Add stored-input component * Update checkbox component to use value instead of checked * Update +page.svelte to use StoredInput component for auto-tests checkbox * Refactor +page.svelte to use StoredInput component for auto-tests checkbox * added ignore * Refactor +page.svelte to use StoredCheckbox component for auto-tests checkbox * Refactor +page.svelte to use StoredCheckbox component for auto-tests checkbox * Refactor stored-checkbox.svelte to wrap Checkbox component in StoredInput * Refactor checkbox.svelte and stored-checkbox.svelte components * Refactor +page.svelte to remove duplicate h1 tag * Refactor +page.svelte to use StoredCheckbox component for auto-tests checkbox and add label slot * Refactor checkbox and stored-checkbox components, and update +page.svelte to use StoredCheckbox component for auto-tests checkbox * Refactor stored-checkbox.svelte to fix named slot issue * Remove deprecated checkbox component --------- Co-authored-by: Vincent G <> Co-authored-by: Willy Woitas <[email protected]>
- Loading branch information
Showing
5 changed files
with
173 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,4 +11,5 @@ vite.config.ts.timestamp-* | |
# intellij | ||
/.idea/ | ||
# env | ||
.ghsecrets | ||
.ghsecrets | ||
bak/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,21 +1,35 @@ | ||
<script type="ts"> | ||
export let test = "456"; | ||
<!-- checkbox.svelte --> | ||
<script lang="ts"> | ||
export let label: string = ""; | ||
export let value: boolean = false; | ||
import { createEventDispatcher } from "svelte"; | ||
const dispatch = createEventDispatcher(); | ||
function handleChange() { | ||
value = !value; | ||
dispatch("change", { checked: value }); | ||
} | ||
</script> | ||
|
||
<div class="checkbox"> | ||
<input type="checkbox" bind:checked={value} on:click={handleChange} /> | ||
{#if label} | ||
<label for="checkbox">{label}</label> | ||
{:else} | ||
<slot /> | ||
{/if} | ||
|
||
<div class="checkbox slot"> | ||
<slot name="named" /> | ||
</div> | ||
</div> | ||
|
||
<style> | ||
.checkbox { | ||
&.slot { | ||
background: red; | ||
} | ||
.checkbox { | ||
&.slot { | ||
background: red; | ||
} | ||
} | ||
</style> | ||
|
||
<label class="checkbox"> | ||
<input type="checkbox" /> | ||
{test} | ||
<div><slot /></div> | ||
|
||
<div class="checkbox slot"> | ||
<slot name="named" /> | ||
</div> | ||
</label> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<!-- stored-checkbox.svelte --> | ||
<script> | ||
import Checkbox from "./checkbox.svelte"; | ||
import StoredInput from "./stored-input.svelte"; | ||
export let key = ""; | ||
export let label = ""; | ||
</script> | ||
|
||
<div> | ||
<StoredInput {key} let:value let:handleChange> | ||
<Checkbox {value} on:change={handleChange} {label}> | ||
<slot></slot> | ||
<div slot="named"><slot name="named" /></div> | ||
</Checkbox> | ||
|
||
</StoredInput> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<!-- StoredInput.svelte --> | ||
<script lang="ts"> | ||
import { onMount } from 'svelte'; | ||
export let key: string; | ||
let value = false; | ||
onMount(() => { | ||
if (typeof window !== 'undefined') { | ||
value = localStorage.getItem(key) === 'true'; | ||
} | ||
}); | ||
function handleChange(event: CustomEvent) { | ||
value = event.detail.checked; | ||
if (typeof window !== 'undefined') { | ||
localStorage.setItem(key, value ? 'true' : 'false'); | ||
} | ||
} | ||
</script> | ||
|
||
<slot {value} {handleChange}></slot> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters