🛠️ Dialog Items

- Added WIP MultiSelect
- Disabled invalid error in colorPicker

Author: SnaveSutit

src/components/dialogItems/colorPicker.svelte

@@ -10,6 +10,7 @@
 
 	let colorPicker = new ColorPicker(`${PACKAGE.name}:${label}-color_picker`, {
 		onChange() {
+			// @ts-ignore
 			const color = colorPicker.get() as tinycolor.Instance
 			value.set(color.toHexString())
 		},

src/components/dialogItems/multiSelect.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Valuable } from '../../util/stores'
+	import BaseDialogItem from './baseDialogItem.svelte'
+
+	export let label: string
+	export let tooltip: string = ''
+	export let options: Record<string, string>
+	export let defaultSelection: string[]
+	export let selection: Valuable<boolean[]>
+
+	function toggleOption(option: number) {
+		selection.get()[option] = !selection.get()[option]
+		selection.set(selection.get())
+	}
+</script>
+
+<BaseDialogItem {label} {tooltip}>
+	<div class="dialog_bar form_bar checkbox_bar">
+		<label class="name_space_left" for="export">{label}</label>
+		<div class="spacer" />
+		<div>
+			{#each $selection as value, i}
+				<input type="checkbox" class="focusable_input" id="export" bind:checked={value} />
+			{/each}
+		</div>
+	</div>
+</BaseDialogItem>
+
+<style>
+	.checkbox_bar {
+		flex-direction: row;
+		align-items: center;
+	}
+	.spacer {
+		flex-grow: 1;
+		border-bottom: 2px dashed var(--color-button);
+		height: 0px;
+		margin: 8px;
+		margin-left: 16px;
+	}
+	label {
+		width: auto;
+	}
+</style>