From 0862dc44ba9c06e895bc0732018197145cbde5ea Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Tue, 4 Mar 2025 22:53:19 -0500
Subject: [PATCH] support multiselect fields

---
 src/types/data.ts                |  1 +
 src/views/Editor/DataEditor.vue  | 35 ++++++++++++++++++++++++++++----
 src/views/Editor/FieldEditor.vue |  2 +-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/types/data.ts b/src/types/data.ts
index f4cc68f..49555c5 100644
--- a/src/types/data.ts
+++ b/src/types/data.ts
@@ -7,6 +7,7 @@ export const FieldTypes = [
   'image',
   'number',
   'dropdown',
+  'multiselect',
   'toggle',
 ] as const
 
diff --git a/src/views/Editor/DataEditor.vue b/src/views/Editor/DataEditor.vue
index e75cbc1..a27fb65 100644
--- a/src/views/Editor/DataEditor.vue
+++ b/src/views/Editor/DataEditor.vue
@@ -4,9 +4,11 @@ import { v7 as uuidv7 } from 'uuid'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import Column from 'primevue/column'
+import Chip from 'primevue/chip'
 import DataTable from 'primevue/datatable'
 import Image from 'primevue/image'
 import InputText  from 'primevue/inputtext'
+import MultiSelect from 'primevue/multiselect'
 import Select from 'primevue/select'
 
 import {
@@ -141,15 +143,28 @@ DataTable.data-editor(
           binary
           disabled
         )
+      div(
+        v-else-if='col.type === "multiselect"'
+      )
+        span.empty(
+          v-if='!slotProps.data[col.name] || (Array.isArray(slotProps.data[col.name]) && slotProps.data[col.name].length === 0)'
+        ) not set
+        .chips(
+          v-else
+        )
+          Chip(
+            v-for='chip in slotProps.data[col.name]'
+            :label='chip'
+          )
       div(
         v-else
       )
-        span(
-          v-if='slotProps.data[col.name]'
-        ) {{ slotProps.data[col.name] }}
         span.empty(
-          v-else
+          v-if='!slotProps.data[col.name]'
         ) not set
+        span(
+          v-else
+        ) {{ slotProps.data[col.name] }}
     template(
       #editor='slotProps'
     )
@@ -185,6 +200,18 @@ DataTable.data-editor(
           showClear
           fluid
         )
+      div(
+        v-else-if='col.type === "multiselect"'
+      )
+        MultiSelect(
+          v-model='slotProps.data[slotProps.field]'
+          :options='col.options'
+          placeholder='Select from Options'
+          filter
+          showClear
+          fluid
+          display='chip'
+        )
       div(
         v-else
       )
diff --git a/src/views/Editor/FieldEditor.vue b/src/views/Editor/FieldEditor.vue
index d7ebb4b..ddc82df 100644
--- a/src/views/Editor/FieldEditor.vue
+++ b/src/views/Editor/FieldEditor.vue
@@ -167,7 +167,7 @@ DataTable.field-editor(
     #expansion='slotProps'
   )
     div(
-      v-if='slotProps.data.type === "dropdown"'
+      v-if='slotProps.data.type === "dropdown" || slotProps.data.type === "multiselect"'
     )
       InputChips(
         v-model='slotProps.data.options'