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

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

@@ -1,43 +1,43 @@
<script lang="ts">
// TODO: Add fade out styling on top and bottom
import Checkbox from './Checkbox.svelte'
import type { SvelteComponent } from 'svelte'
import VirtualList from 'svelte-tiny-virtual-list'
interface Option {
label: string;
/** The element that will be in the `value` array while the option is checked */
value: string | number;
icon: SvelteComponent;
}
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
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]
if (!value) value = [];
value = [key, ...value];
} else {
value = value.filter((it) => key !== it)
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' : ''}>
<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.includes(option.value)} on:change={(e) => handleChange(e, option.value)}>
{#if option.icon}
<svelte:component this={option.icon}/>
<Checkbox
checked={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>