feat(field-multiselect): setup syntax [khcp-11341]

packages/core/forms/sandbox/App.vue

@@ -67,6 +67,31 @@ const fieldSchema = {
         { name: 'Female', value: 'female' },
       ],
     },
+    // FieldSelect
+    {
+      type: 'select',
+      model: 'https_redirect_status_code',
+      label: 'HTTPS Redirect Status Code',
+      values: [426, 301, 302, 307, 308],
+    },
+    // FieldMultiselect
+    {
+      type: 'multiselect',
+      model: 'protocols',
+      label:'Protocols',
+      values: [
+        { label: 'GRPC', value: 'grpc' },
+        { label: 'GRPCS', value: 'grpcs' },
+        { label: 'HTTP', value: 'http' },
+        { label: 'HTTPS', value: 'https' },
+        { label: 'TCP', value: 'tcp' },
+        { label: 'TLS', value: 'tls' },
+        { label: 'TLS_PASSTHROUGH', value: 'tls_passthrough' },
+        { label: 'UDP', value: 'udp' },
+        { label: 'WS', value: 'ws' },
+        { label: 'WSS', value: 'wss' },
+      ],
+    },
     // FieldSwitch
     {
       type: 'switch',
@@ -92,6 +117,8 @@ const fieldModelDefault = ref({
   is_friendly: true,
   is_cute: true,
   gender: 'male',
+  https_redirect_status_code: '',
+  protocols: ['http', 'https'],
 })
 
 const fieldModelModified = ref({
@@ -100,6 +127,8 @@ const fieldModelModified = ref({
   is_cute: false,
   gender: null,
   personality: 'A little bit of a brat',
+  https_redirect_status_code: 307,
+  protocols: ['https', 'wss'],
 })
 </script>
 

packages/core/forms/src/components/fields/FieldMultiselect.vue

@@ -1,41 +1,89 @@
 <template>
   <KMultiselect
+    :id="getFieldID(schema)"
+    v-model="inputValue"
     :aria-labelledby="getLabelId(schema)"
+    :class="schema.fieldClasses"
     data-testid="field-multiselect"
+    :disabled="disabled || undefined"
     :items="items"
+    :kpop-attributes="{ 'data-testid': `${getFieldID(schema)}-items` }"
     :label-attributes="{ info: schema.help }"
-    :model-value="value"
+    :name="schema.inputName"
     :placeholder="schema.placeholder"
     :required="schema.required || undefined"
     width="100%"
-    @update:model-value="onUpdate"
   />
 </template>
 
-<script>
-import abstractField from './abstractField'
+<script lang="ts" setup>
+import { computed, toRef, type PropType } from 'vue'
+import type { MultiselectItem } from '@kong/kongponents'
+import composables from '../../composables'
 
-export default {
-  mixins: [abstractField],
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  formOptions: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => undefined,
+  },
+  model: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => undefined,
+  },
+  schema: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  vfg: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * TODO: stronger type
+   * TODO: pass this down to KInput error and errorMessage
+   */
+  errors: {
+    type: Array,
+    default: () => [],
+  },
+  hint: {
+    type: String,
+    default: '',
+  },
+})
 
-  emits: ['model-updated'],
+const emit = defineEmits<{
+  (event: 'modelUpdated', value: any, model: Record<string, any>): void
+}>()
 
-  computed: {
-    items() {
-      if (this.schema.values) {
-        return this.schema.values
-      }
-      if (this.schema.elements?.one_of?.length) {
-        return this.schema.elements.one_of.map(value => ({ label: value, value }))
-      }
-      return []
-    },
-  },
+const modelRef = toRef(props, 'model')
 
-  methods: {
-    onUpdate(value) {
-      this.$emit('model-updated', value, this.schema.model)
-    },
+const { getLabelId, getFieldID, clearValidationErrors, value: inputValue } = composables.useAbstractFields({
+  model: modelRef,
+  schema: props.schema,
+  formOptions: props.formOptions,
+  emitModelUpdated: (data: { value: any, model: Record<string, any> }): void => {
+    emit('modelUpdated', data.value, data.model)
   },
-}
+})
+
+defineExpose({
+  clearValidationErrors,
+})
+
+const items = computed((): MultiselectItem[] => {
+  if (props.schema.values) {
+    return props.schema.values
+  }
+
+  if (props.schema.elements?.one_of?.length) {
+    return props.schema.elements.one_of.map((value: string | number | boolean) => ({ label: String(value), value: String(value) } satisfies MultiselectItem))
+  }
+
+  return []
+})
 </script>

packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts

@@ -13,6 +13,7 @@ describe('<FieldTester /> - FieldCheckbox', () => {
       label: fieldLabel,
       help: 'Check if the cat is cool.',
       required: true,
+      styleClasses: 'cool-cats',
     }],
   }
 
@@ -43,6 +44,11 @@ describe('<FieldTester /> - FieldCheckbox', () => {
       cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('not.exist')
     }
 
+    // check style classes
+    if (schema.fields[0].styleClasses) {
+      cy.get('.form-group.field-checkbox').should('have.class', schema.fields[0].styleClasses)
+    }
+
     // check help text
     if (schema.fields[0].help) {
       cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')

packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts

@@ -12,6 +12,7 @@ describe('<FieldTester /> - FieldInput', () => {
       id: fieldKey,
       inputType: 'text',
       label: fieldLabel,
+      styleClasses: 'awesome-cats',
       help: 'The name of the cat.',
       required: true,
     }],
@@ -60,6 +61,11 @@ describe('<FieldTester /> - FieldInput', () => {
       cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')
       cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[0].help)
     }
+
+    // check style classes
+    if (schema.fields[0].styleClasses) {
+      cy.get('.form-group.field-input').should('have.class', schema.fields[0].styleClasses)
+    }
   })
 
   it('renders default state correctly - with model', () => {