Maintenance: Update Formkit packages to v1 (major)

app/frontend/apps/mobile/components/Form/fields/FieldAutoComplete/__tests__/FieldAutoComplete.spec.ts

@@ -779,7 +779,7 @@ describe('Form - Field - AutoComplete - Features', () => {
       wrapper.queryByText(`This field doesn't start with "#".`),
     ).not.toBeInTheDocument()
 
-    const selectOptions = wrapper.getAllByRole('option')
+    const selectOptions = await wrapper.findAllByRole('option')
 
     expect(selectOptions).toHaveLength(1)
     expect(selectOptions[0]).toHaveTextContent('#foo')

app/frontend/apps/mobile/components/Form/fields/FieldRecipient/__tests__/FieldRecipient.spec.ts

@@ -136,7 +136,7 @@ describe('Form - Field - Recipient - Features', () => {
 
     await wrapper.events.type(filterElement, 'foo@bar.tld')
 
-    let selectOptions = wrapper.getAllByRole('option')
+    let selectOptions = await wrapper.findAllByRole('option')
 
     expect(selectOptions).toHaveLength(1)
     expect(selectOptions[0]).toHaveTextContent('foo@bar.tld')
@@ -187,7 +187,7 @@ describe('Form - Field - Recipient - Features', () => {
       wrapper.queryByText('Please enter a valid email address.'),
     ).not.toBeInTheDocument()
 
-    const selectOptions = wrapper.getAllByRole('option')
+    const selectOptions = await wrapper.findAllByRole('option')
 
     expect(selectOptions).toHaveLength(1)
     expect(selectOptions[0]).toHaveTextContent('foo@bar.tld')
@@ -226,7 +226,7 @@ describe('Form - Field - Recipient - Features', () => {
       wrapper.queryByText("This field doesn't contain an allowed value."),
     ).not.toBeInTheDocument()
 
-    const selectOptions = wrapper.getAllByRole('option')
+    const selectOptions = await wrapper.findAllByRole('option')
 
     expect(selectOptions).toHaveLength(1)
     expect(selectOptions[0]).toHaveTextContent('+499876543210')

app/frontend/apps/mobile/components/Form/fields/FieldSelect/FieldSelect.story.vue

@@ -244,7 +244,7 @@ const options = [
     label: 'Option Icon',
     name: 'select_icon',
   },
-]
+] as any
 </script>
 
 <template>

app/frontend/apps/mobile/components/Form/fields/FieldTags/__tests__/FieldTags.spec.ts

@@ -13,6 +13,7 @@ import type { MockGraphQLInstance } from '#tests/support/mock-graphql-api.ts'
 import { waitUntil } from '#tests/support/utils.ts'
 import { mockGraphQLApi } from '#tests/support/mock-graphql-api.ts'
 import type { FieldTagsProps } from '#shared/components/Form/fields/FieldTags/types.ts'
+import type { FormFieldContext } from '#shared/components/Form/types/field.ts'
 
 const defaultTags = [
   { label: 'test', value: 'test' },
@@ -22,7 +23,11 @@ const defaultTags = [
 
 let mockApi: MockGraphQLInstance
 
-const renderFieldTags = (props: Partial<FieldTagsProps> = {}) => {
+const renderFieldTags = (
+  props: Partial<
+    FieldTagsProps & { options: FormFieldContext['options'] }
+  > = {},
+) => {
   mockApi = mockGraphQLApi(AutocompleteSearchTagDocument).willResolve({
     autocompleteSearchTag: defaultTags,
   })

app/frontend/apps/mobile/components/Form/fields/FieldTags/index.ts

@@ -1,10 +1,24 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
+import type { FieldTagsProps } from '#shared/components/Form/fields/FieldTags/types.ts'
 import createInput from '#shared/form/core/createInput.ts'
 import addLink from '#shared/form/features/addLink.ts'
 import formUpdaterTrigger from '#shared/form/features/formUpdaterTrigger.ts'
 import FieldTagsInput from './FieldTagsInput.vue'
 
+declare module '@formkit/inputs' {
+  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+    tags: FieldTagsProps & {
+      type: 'tags'
+      value?: string[]
+    }
+  }
+
+  interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+    tags: FormKitBaseSlots<Props>
+  }
+}
+
 const fieldDefinition = createInput(
   FieldTagsInput,
   ['noOptionsLabelTranslation', 'options', 'sorting', 'canCreate'],

app/frontend/apps/mobile/components/Form/fields/FieldTreeSelect/FieldTreeSelect.story.vue

@@ -359,7 +359,7 @@ const options = [
     label: 'Option Icon',
     name: 'treeselect_icon',
   },
-]
+] as any
 </script>
 
 <template>

app/frontend/apps/mobile/components/Form/fields/FieldTreeSelect/index.ts

@@ -1,11 +1,26 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
+import type { SelectValue } from '#shared/components/CommonSelect/types.ts'
+import type { TreeSelectProps } from '#shared/components/Form/fields/FieldTreeSelect/types.ts'
 import createInput from '#shared/form/core/createInput.ts'
 import addLink from '#shared/form/features/addLink.ts'
 import formUpdaterTrigger from '#shared/form/features/formUpdaterTrigger.ts'
 import removeValuesForNonExistingOrDisabledOptions from '#shared/form/features/removeValuesForNonExistingOrDisabledOptions.ts'
 import FieldTreeSelectInput from './FieldTreeSelectInput.vue'
 
+declare module '@formkit/inputs' {
+  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+    treeselect: TreeSelectProps & {
+      type: 'treeselect'
+      value?: SelectValue | null
+    }
+  }
+
+  interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+    treeselect: FormKitBaseSlots<Props>
+  }
+}
+
 const fieldDefinition = createInput(
   FieldTreeSelectInput,
   [

app/frontend/shared/components/Form/fields/FieldTags/types.ts

@@ -3,10 +3,13 @@
 import type { FormFieldContext } from '#shared/components/Form/types/field.ts'
 
 export interface FieldTagsProps {
-  options: FormFieldContext['options']
   disabled?: boolean
   canCreate?: boolean
   sorting?: 'label' | 'value'
 }
 
-export type FieldTagsContext = FormFieldContext<FieldTagsProps>
+export type FieldTagsContext = FormFieldContext<
+  FieldTagsProps & {
+    options: FormFieldContext['options']
+  }
+>

app/frontend/shared/components/Form/fields/FieldToggle/index.ts

@@ -5,6 +5,23 @@ import addLink from '#shared/form/features/addLink.ts'
 import formUpdaterTrigger from '#shared/form/features/formUpdaterTrigger.ts'
 import FieldToggleInput from './FieldToggleInput.vue'
 
+declare module '@formkit/inputs' {
+  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+    toggle: {
+      type: 'toggle'
+      value?: boolean
+      variants?: {
+        true?: string
+        false?: string
+      }
+    }
+  }
+
+  interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+    toggle: FormKitBaseSlots<Props>
+  }
+}
+
 const fieldDefinition = createInput(FieldToggleInput, ['variants'], {
   features: [addLink, formUpdaterTrigger()],
 })

app/frontend/shared/components/Form/fields/FieldTreeSelect/types.ts

@@ -13,14 +13,16 @@ export type FlatSelectOption = SelectOption & {
   parents: (string | number | boolean)[]
 }
 
-export type TreeSelectContext = FormFieldContext<{
+export interface TreeSelectProps {
   clearable?: boolean
   disabled?: boolean
-  historicalOptions: Record<string, string>
+  historicalOptions?: Record<string, string>
   multiple?: boolean
+  options: TreeSelectOption[]
   noFiltering?: boolean
   noOptionsLabelTranslation?: boolean
-  options: TreeSelectOption[]
   rejectNonExistentValues?: boolean
   sorting?: SelectOptionSorting
-}>
+}
+
+export type TreeSelectContext = FormFieldContext<TreeSelectProps>