79 lines
2.2 KiB
Svelte
79 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import Select from "svelte-select/Select.svelte"
|
|
import { onMount } from "svelte"
|
|
import type { Writable } from "svelte/store"
|
|
|
|
export let options: MultiSelectOptions[] = []
|
|
export let groupTitle: string
|
|
|
|
export let formValues: Writable<FormValues>
|
|
export let rowNr: number
|
|
export let formCol: FormColumn
|
|
|
|
let valueStorage: any[] = []
|
|
let value: string[] = []
|
|
let values = options.map((option) => ({ label: option.name, value: option.name }))
|
|
let lastCustomInput: string | null = null
|
|
|
|
function setFormValues() {
|
|
// @ts-ignore
|
|
$formValues[`selectMultiple_${groupTitle}_${rowNr}_${formCol.multiSelectEmailTitle}`] = {
|
|
value: value.toString(),
|
|
required: !formCol.multiSelectNotRequired,
|
|
}
|
|
}
|
|
|
|
function handleInputChange(e: Event) {
|
|
const newCustomInput = (e.target as HTMLInputElement).value
|
|
|
|
// Remove the last custom input if it exists
|
|
if (lastCustomInput) {
|
|
values = values.filter((item) => item.label !== lastCustomInput)
|
|
}
|
|
|
|
// Add the new custom input
|
|
if (newCustomInput && !values.some((item) => item.label === newCustomInput)) {
|
|
values = [...values, { label: newCustomInput, value: newCustomInput }]
|
|
}
|
|
|
|
// Update lastCustomInput
|
|
lastCustomInput = newCustomInput
|
|
}
|
|
|
|
$: {
|
|
if (value.length) {
|
|
setFormValues()
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
const inputEl = document.querySelector(".svelte-select input")
|
|
if (inputEl) {
|
|
inputEl.addEventListener("input", handleInputChange)
|
|
}
|
|
return () => {
|
|
if (inputEl) {
|
|
inputEl.removeEventListener("input", handleInputChange)
|
|
}
|
|
}
|
|
})
|
|
$: value = valueStorage.map((item) => item.value)
|
|
</script>
|
|
|
|
<Select
|
|
bind:items="{values}"
|
|
inputAttributes="{{ autocomplete: 'on' }}"
|
|
placeholder=""
|
|
showChevron="{true}"
|
|
clearable="{true}"
|
|
hideEmptyState="{true}"
|
|
searchable="{true}"
|
|
multiple="{true}"
|
|
bind:value="{valueStorage}"
|
|
/>
|
|
|
|
<style lang="less" global>
|
|
@import "../../../assets/css/variables.less";
|
|
@import "../../../assets/css/svelte-select.less";
|
|
</style>
|