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

Run prettier

Browse Source
This commit is contained in:
venashial
2022-06-04 00:46:23 -07:00
parent 597c071c3d
commit c9ec9f14de
49 changed files with 1515 additions and 1469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,46 +1,46 @@
<script lang="ts">
import Checkbox from './Checkbox.svelte';
import type { Option } from './types';
import Checkbox from './Checkbox.svelte'
import type { Option } from './types'
export let value = [];
export let options: Option[] = [];
export let value = []
export let options: Option[] = []
/** Wrap the options horizontally */
export let wrap = false;
/** Wrap the options horizontally */
export let wrap = false
const handleChange = (e, key) => {
if (e.target.checked) {
if (!value) value = [];
value = [key, ...value];
} else {
value = value.filter((it) => key !== it);
}
};
const handleChange = (e, key) => {
if (e.target.checked) {
if (!value) value = []
value = [key, ...value]
} else {
value = value.filter((it) => key !== it)
}
}
</script>
<div class="checkbox-list" class:wrap>
{#each options as option}
<Checkbox on:change={(e) => handleChange(e, option.value)}>
{#if option.icon && typeof option.icon === 'string'}
{@html option.icon}
{:else if option.icon}
<svelte:component this={option.icon} />
{/if}
{option.label}
</Checkbox>
{/each}
{#each options as option}
<Checkbox on:change={(e) => handleChange(e, option.value)}>
{#if option.icon && typeof option.icon === 'string'}
{@html option.icon}
{:else if option.icon}
<svelte:component this={option.icon} />
{/if}
{option.label}
</Checkbox>
{/each}
</div>
<style lang="postcss">
.checkbox-list {
display: flex;
flex-direction: column;
gap: 2px;
.checkbox-list {
display: flex;
flex-direction: column;
gap: 2px;
&.wrap {
flex-direction: row;
flex-wrap: wrap;
grid-gap: 2rem;
}
}
&.wrap {
flex-direction: row;
flex-wrap: wrap;
grid-gap: 2rem;
}
}
</style>