Change schema to support chip mode

Author: Chenlei Hu

src/components/graph/widgets/MultiSelectWidget.vue

@@ -6,14 +6,14 @@
       filter
       :placeholder="placeholder"
       :maxSelectedLabels="3"
+      :display="display"
       class="w-full"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import MultiSelect from 'primevue/multiselect'
-import { computed, defineModel } from 'vue'
 
 import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComponentWidget } from '@/scripts/domWidget'
@@ -22,10 +22,9 @@ const selectedItems = defineModel<string[]>({ required: true })
 const { widget } = defineProps<{
   widget: ComponentWidget<string[]>
 }>()
-const options = computed(
-  () => (widget.inputSpec as ComboInputSpec).options ?? []
-)
-const placeholder = computed(
-  () => (widget.inputSpec as ComboInputSpec).placeholder ?? 'Select items'
-)
+
+const inputSpec = widget.inputSpec as ComboInputSpec
+const options = inputSpec.options ?? []
+const placeholder = inputSpec.multi_select?.placeholder ?? 'Select items'
+const display = inputSpec.multi_select?.chip ? 'chip' : 'comma'
 </script>

src/schemas/nodeDefSchema.ts

@@ -12,6 +12,10 @@ const zRemoteWidgetConfig = z.object({
   timeout: z.number().gte(0).optional(),
   max_retries: z.number().gte(0).optional()
 })
+const zMultiSelectOption = z.object({
+  placeholder: z.string().optional(),
+  chip: z.boolean().optional()
+})
 
 export const zBaseInputOptions = z
   .object({
@@ -74,9 +78,7 @@ export const zComboInputOptions = zBaseInputOptions.extend({
   options: z.array(zComboOption).optional(),
   remote: zRemoteWidgetConfig.optional(),
   /** Whether the widget is a multi-select widget. */
-  multi_select: z.boolean().optional(),
-  /** Placeholder when no item is selected in multi-select widget. */
-  placeholder: z.string().optional()
+  multi_select: zMultiSelectOption.optional()
 })
 
 const zIntInputSpec = z.tuple([z.literal('INT'), zIntInputOptions.optional()])