multi select

api/collections/fields/pagebuilder.yml

@@ -695,6 +695,56 @@ subFields:
                                       - id: sunday
                                         name: Sonntag
 
+                      - name: showMultiSelect
+                        type: boolean
+                        meta:
+                            label: Mehrfachauswahl anzeigen
+
+                      - name: multiSelectEmailTitle
+                        type: string
+                        meta:
+                            label: Mehrfachauswahl Email Titel
+                            dependsOn:
+                                eval: $parent.showMultiSelect
+
+                      - name: multiSelectNotRequired
+                        type: boolean
+                        meta:
+                            label: nicht Notwendig
+                            dependsOn:
+                                eval: $parent.showMultiSelect
+
+                      - name: multiSelectPlaceholder
+                        type: string
+                        meta:
+                            label: Mehrfachauswahl Platzhalter
+                            dependsOn:
+                                eval: $parent.showMultiSelect
+
+                      - name: multiSelectOptions
+                        type: object[]
+                        meta:
+                            label: Mehrfachauswahl Optionen
+                            dependsOn:
+                                eval: $parent.showMultiSelect
+                        subFields:
+                            - name: name
+                              type: string
+                              meta:
+                                  label: Name
+
+                      - name: multiSelectProps
+                        type: object
+                        meta:
+                            label: Mehrfachauswahl Eigenschaften
+                            dependsOn:
+                                eval: $parent.showMultiSelect
+                        subFields:
+                            - name: additionalAddableValues
+                              type: boolean
+                              meta:
+                                  label: Zusätzliche hinzufügbare Werte
+
                       - name: text
                         type: object[]
                         meta:

frontend/src/lib/assets/css/svelte-select.less

@@ -0,0 +1,65 @@
+.svelte-select {
+    height: 55px !important;
+    margin-bottom: 20px;
+
+    margin: 5px 0px !important;
+    box-shadow: 0 0 25px 10px var(--opposite-bg-color-5) !important;
+    padding: 10px 20px !important;
+    border: 0px solid var(--opposite-bg-color) !important;
+    border-bottom: 3px solid var(--heading-font-color) !important;
+    outline: 0px solid var(--opposite-bg-color) !important;
+    color: var(--opposite-bg-color) !important;
+    background-color: var(--background-color) !important;
+    resize: none !important;
+    .value-container {
+        input {
+            padding-top: 20px;
+        }
+        .selected-item {
+            padding-top: 19px;
+        }
+    }
+
+    .multi-item {
+        background-color: rgba(0, 0, 0, 0.1) !important;
+        border-radius: 3px !important;
+    }
+
+    .selected-item {
+        margin-left: 3px;
+        height: auto;
+        line-height: initial;
+    }
+    &.focused {
+        border-color: var(--hover-color) !important;
+    }
+
+    input {
+        height: 100%;
+        font-size: 1rem !important;
+    }
+
+    .list-item {
+        .item {
+            &.active {
+                background-color: transparent !important;
+                color: var(--normal-font-color) !important;
+            }
+        }
+    }
+
+    .indicators {
+        color: #ccc;
+
+        & > * {
+            border-left: 1px solid #ccc !important;
+            height: 40px !important;
+            cursor: pointer !important;
+        }
+
+        .clear-select {
+            color: var(--hover-color) !important;
+            font-weight: 700 !important;
+        }
+    }
+}

frontend/src/lib/components/pagebuilder/form/datepicker.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
     import { CalendarView } from "fluent-svelte"
+    import type { Writable } from "svelte/store"
+
 
     export let groupTitle: string
     export let datePickerProps: DatePickerProps
-    export let formValues: any
+    export let formValues: Writable<FormValues>
     export let rowNr: number
     export let formCol: FormColumn
 

frontend/src/lib/components/pagebuilder/form/form.svelte

@@ -3,6 +3,7 @@
     import Datepicker from "./datepicker.svelte"
     import FormLabelNumberBlock from "./formLabelNumberBlock.svelte"
     import type { Writable } from "svelte/store"
+    import Select from "./select.svelte"
 
     export let formRow: FormRow
     export let index: number
@@ -135,9 +136,19 @@
                         formValues="{formValues}"
                         rowNr="{index}"
                         formCol="{column}"
-                        
                     />
                 {/if}
+
+                {#if column.showMultiSelect}
+                    <Select
+                        groupTitle="{column.groupTitle}"
+                        formValues="{formValues}"
+                        rowNr="{index}"
+                        formCol="{column}"
+                        options="{column.multiSelectOptions}"
+                    />
+                {/if}
+
                 {#each column.text ?? [] as textField, textFieldIndex}
                     <div>
                         <h3 class="textTitle">{textField.textTitle || ""}</h3>

frontend/src/lib/components/pagebuilder/form/mobileForm.svelte

@@ -3,6 +3,7 @@
     import type { Writable } from "svelte/store"
     import CheckboxGroup from "./checkboxGroup.svelte"
     import Datepicker from "./datepicker.svelte"
+    import Select from "./select.svelte"
     export let formRow: FormRow
     export let formValues: Writable<FormValues>
     export let index: number
@@ -147,6 +148,16 @@
                     formCol="{column}"
                 />
             {/if}
+
+            {#if column.showMultiSelect}
+                <Select
+                    groupTitle="{column.groupTitle}"
+                    formValues="{formValues}"
+                    rowNr="{index}"
+                    formCol="{column}"
+                    options="{column.multiSelectOptions}"
+                />
+            {/if}
             {#each column.text ?? [] as textField, textFieldIndex}
                 <div class="column-{columnIndex} position-{getPosition(column, 5 + textFieldIndex, textFieldIndex)}">
                     <h3 class="textTitle">{textField.textTitle || ""}</h3>

frontend/src/lib/components/pagebuilder/form/select.svelte

@@ -0,0 +1,78 @@
+<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>

package.json

@@ -57,6 +57,7 @@
         "postcss-load-config": "^4.0.1",
         "postcss-nested": "^6.0.1",
         "postcss-preset-env": "^8.5.1",
+        "svelte-select": "^5.7.0",
         "swiper": "^9.2.0"
     }
 }

types/global.d.ts

@@ -216,6 +216,18 @@ interface FormColumn {
     datePickerNotRequired: boolean
     datePickerProps: DatePickerProps
     datePickerEmailTitle: string
+    showMultiSelect: boolean
+    multiSelectNotRequired: boolean
+    multiSelectPlaceholder: string
+    multiSelectEmailTitle: string
+    multiSelectOptions: MultiSelectOptions[]
+    multiSelectProps: {
+        additionalAddableValues: boolean
+    }
+}
+
+interface MultiSelectOptions {
+    name: string
 }
 
 interface CustomHTMLElement extends HTMLElement {

yarn.lock

@@ -1948,6 +1948,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.1.0, @floating-ui/core@npm:^1.4.2":
+  version: 1.5.0
+  resolution: "@floating-ui/core@npm:1.5.0"
+  dependencies:
+    "@floating-ui/utils": ^0.1.3
+  checksum: 54b4fe26b3c228746ac5589f97303abf158b80aa5f8b99027259decd68d1c2030c4c637648ebd33dfe78a4212699453bc2bd7537fd5a594d3bd3e63d362f666f
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.1.0, @floating-ui/dom@npm:^1.2.1":
+  version: 1.5.3
+  resolution: "@floating-ui/dom@npm:1.5.3"
+  dependencies:
+    "@floating-ui/core": ^1.4.2
+    "@floating-ui/utils": ^0.1.3
+  checksum: 00053742064aac70957f0bd5c1542caafb3bfe9716588bfe1d409fef72a67ed5e60450d08eb492a77f78c22ed1ce4f7955873cc72bf9f9caf2b0f43ae3561c21
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.1.3":
+  version: 0.1.4
+  resolution: "@floating-ui/utils@npm:0.1.4"
+  checksum: e6195ded5b3a6fd38411a833605184c31f24609b08feab2615e90ccc063bf4d3965383d817642fc7e8ca5ab6a54c29c71103e874f3afb0518595c8bd3390ba16
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -6410,6 +6436,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte-floating-ui@npm:1.2.8":
+  version: 1.2.8
+  resolution: "svelte-floating-ui@npm:1.2.8"
+  dependencies:
+    "@floating-ui/core": ^1.1.0
+    "@floating-ui/dom": ^1.1.0
+  checksum: 884b3c5f7f32e6b1937432e61e200800a215f63ec1e7b5a81ca43602727505824c53d95780574d9aed74f4486eac70628ab89b2f4c3f012175c1a3789a2a7d4a
+  languageName: node
+  linkType: hard
+
 "svelte-hmr@npm:^0.15.3":
   version: 0.15.3
   resolution: "svelte-hmr@npm:0.15.3"
@@ -6493,6 +6529,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte-select@npm:^5.7.0":
+  version: 5.7.0
+  resolution: "svelte-select@npm:5.7.0"
+  dependencies:
+    "@floating-ui/dom": ^1.2.1
+    svelte-floating-ui: 1.2.8
+  checksum: 85f5f57d592239874f88d7a48b9fa17d80efbf22ebed7a9848297dd693ac398e1dd9d12a8bd396c6c86597a895201cb333d0e83982a9d94ac0190e3cd387ee86
+  languageName: node
+  linkType: hard
+
 "svelte2tsx@npm:^0.1.157":
   version: 0.1.193
   resolution: "svelte2tsx@npm:0.1.193"
@@ -6613,6 +6659,7 @@ __metadata:
     svelte-preprocess: ^5.0.4
     svelte-preprocess-esbuild: ^3.0.1
     svelte-routing: ^1.6.0
+    svelte-select: ^5.7.0
     swiper: ^9.2.0
     tslib: ^2.6.2
     typescript: ^5.0.4