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

70
src/package/components/CheckboxVirtualList.svelte
View File

@@ -1,45 +1,43 @@
<script lang="ts">
// TODO: Add fade out styling on top and bottom
// TODO: Add fade out styling on top and bottom
import Checkbox from './Checkbox.svelte';
import VirtualList from 'svelte-tiny-virtual-list';
import type { Option } from './types';
import Checkbox from './Checkbox.svelte'
import VirtualList from 'svelte-tiny-virtual-list'
import type { Option } from './types'
/** Height in pixels of list */
export let height = 200;
/** Height in pixels of list */
export let height = 200
export let value = [];
export let options: Option[] = [];
export let value = []
export let options: Option[] = []
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>
<VirtualList width="100%" {height} itemCount={options.length} itemSize={26}>
<div
slot="item"
let:index
let:style
{style}
style:padding-bottom={options.length - 1 === index ? '2.5rem' : ''}
>
{@const option = options[index]}
<Checkbox
checked={value && value.includes(option.value)}
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>
</div>
<div
slot="item"
let:index
let:style
{style}
style:padding-bottom={options.length - 1 === index ? '2.5rem' : ''}>
{@const option = options[index]}
<Checkbox
checked={value && value.includes(option.value)}
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>
</div>
</VirtualList>