mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Fix CheckBoxList SVG icons + Move docs source

Browse Source
This commit is contained in:
venashial
2022-05-25 17:22:54 -07:00
parent 8da6572074
commit 4ffc90f963
21 changed files with 284 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/package/components/CheckboxList.svelte
View File

@@ -1,32 +1,30 @@
<script lang="ts">
import Checkbox from './Checkbox.svelte'
import type { SvelteComponent } from 'svelte'
import Checkbox from './Checkbox.svelte';
import type { Option } from './types';
interface Option {
label: string;
/** The element that will be in the `value` array while the option is checked */
value: string | number;
icon: SvelteComponent;
}
export let value = [];
export let options: Option[] = [];
export let value = []
export let options: Option[] = []
/** Wrap the options horizontally */
export let wrap = false;
const handleChange = (e, key) => {
if (e.target.checked) {
if (!value) value = []
value = [key, ...value]
if (!value) value = [];
value = [key, ...value];
} else {
value = value.filter((it) => key !== it)
value = value.filter((it) => key !== it);
}
}
};
</script>
<div class="checkbox-list">
<div class="checkbox-list" class:wrap>
{#each options as option}
<Checkbox on:change={(e) => handleChange(e, option.value)}>
{#if option.icon}
<svelte:component this={option.icon}/>
{#if option.icon && typeof option.icon === 'string'}
{@html option.icon}
{:else if option.icon}
<svelte:component this={option.icon} />
{/if}
{option.label}
</Checkbox>
@@ -45,4 +43,4 @@
grid-gap: 2rem;
}
}
</style>
</style>