Fix/form docs

package.json

@@ -41,10 +41,10 @@
     "pre-commit": "lerna run --concurrency 1 --stream precommit --since HEAD"
   },
   "resolutions": {
-    "nuxt": "3.4.0",
-    "semver": "^7.0.0",
+    "nuxt": "3.1.1",
     "vue": "3.2.37",
+    "vite": "^4",
     "vue-router": "4.1.6",
-    "@nuxt/schema": "3.4.0"
+    "@nuxt/schema": "3.0.0"
   }
 }

packages/docs/nuxt.config.ts

@@ -153,7 +153,7 @@ export default defineNuxtConfig({
 
     vueI18n: {
       fallbackLocale: 'en',
-    }
+    },
   },
 
   postcss: {
@@ -169,6 +169,10 @@ export default defineNuxtConfig({
   ],
 
   vite: {
+    define: {
+      __VUE_I18N_FULL_INSTALL__: true,
+    },
+    optimizeDeps: { exclude: ["fsevents"] },
     resolve: {
       alias: [
         { find: '~@ag-grid-community', replacement: ('@ag-grid-community') }

packages/docs/package.json

@@ -26,7 +26,7 @@
     "autoprefixer": "^10.4.13",
     "escodegen": "^2.0.0",
     "eslint": "7",
-    "nuxt": "latest",
+    "nuxt": "^3.1.1",
     "postcss": "^7",
     "postcss-custom-properties": "^13.1.1",
     "stylelint": "^13.13.1",

packages/docs/pages/[page-config-category]/[page].vue

@@ -50,7 +50,7 @@ const compileTranslations = (translations: Record<string, any>): any => {
 
   Object.keys(translations).forEach((key) => {
     if (typeof translations[key] === 'string') {
-      compiledTranslations[key] = translations[key].replaceAll(/\{['|"|`](.*)['|"|`]\}/g, '$1')
+      compiledTranslations[key] = translations[key]
     } else {
       compiledTranslations[key] = compileTranslations(translations[key])
     }

packages/sandbox/package.json

@@ -34,7 +34,7 @@
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/test-utils": "^2.0.2",
     "lodash": "^4.17.21",
-    "nuxt": "latest",
+    "nuxt": "3.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "sass": "^1.54.4",
     "serve": "^12.0.0",

packages/ui/src/composables/useForm/types.ts

@@ -1,11 +1,11 @@
-import { ComputedRef } from 'vue'
+import { ComputedRef, Ref } from 'vue'
 
 export type FormFiled<Name extends string = string> = {
-  name?: Name;
-  value: unknown;
-  isValid: boolean;
-  isLoading: boolean;
-  errorMessages: string[];
+  name: Ref<Name | undefined>;
+  value?: Ref<unknown>;
+  isValid: Ref<boolean>;
+  isLoading: Ref<boolean>;
+  errorMessages: Ref<string[]>;
   validate: () => boolean;
   validateAsync: () => Promise<boolean>;
   reset: () => void;

packages/ui/src/composables/useForm/useFormChild.ts

@@ -3,7 +3,7 @@ import { useComponentUuid } from '../useComponentUuid'
 import { FormServiceKey } from './consts'
 import { type FormFiled } from './types'
 
-export const useFormChild = (createContext: () => FormFiled) => {
+export const useFormChild = (context: FormFiled) => {
   const formContext = inject(FormServiceKey, null)
 
   if (!formContext) {
@@ -14,7 +14,6 @@ export const useFormChild = (createContext: () => FormFiled) => {
     }
   }
 
-  const context = computed(createContext)
   const uid = useComponentUuid()
 
   onMounted(() => {

packages/ui/src/composables/useForm/useFormParent.ts

@@ -1,4 +1,4 @@
-import { computed, provide, ref, type Ref } from 'vue'
+import { computed, provide, ref, shallowRef, type Ref, unref } from 'vue'
 import { FormServiceKey } from './consts'
 import { Form, FormFiled } from './types'
 import { useFormChild } from './useFormChild'
@@ -10,19 +10,19 @@ type FormParentOptions = {
 }
 
 export const createFormContext = <Names extends string>(options: FormParentOptions) => {
-  const fields: Ref<Record<number, Ref<FormFiled>>> = ref({})
+  const fields = ref(new Map<number, FormFiled<Names>>())
 
   return {
     // Vue unwrap ref automatically, but types are not for some reason
-    fields: computed(() => Object.values(fields.value) as any as FormFiled<Names>[]),
+    fields: computed(() => [...fields.value.values()]),
     doShowError: computed(() => !options.hideErrors),
     doShowErrorMessages: computed(() => !options.hideErrorMessages),
     doShowLoading: computed(() => !options.hideLoading),
-    registerField: (uid: number, field: Ref<FormFiled>) => {
-      fields.value[uid] = field
+    registerField: (uid: number, field: FormFiled) => {
+      fields.value.set(uid, field as FormFiled<Names>)
     },
     unregisterField: (uid: number) => {
-      delete fields.value[uid]
+      fields.value.delete(uid)
     },
   }
 }
@@ -34,16 +34,16 @@ export const useFormParent = <Names extends string = string>(options: FormParent
 
   const { fields } = formContext
 
-  const fieldNames = computed(() => fields.value.map((field) => field.name).filter(Boolean) as Names[])
+  const fieldNames = computed(() => fields.value.map((field) => unref(field.name)).filter(Boolean) as Names[])
   const formData = computed(() => fields.value.reduce((acc, field) => {
-    if (field.name) { acc[field.name] = field.value }
+    if (unref(field.name)) { acc[unref(field.name) as Names] = field }
     return acc
-  }, {} as Record<Names, any>))
-  const isValid = computed(() => fields.value.every((field) => field.isValid))
-  const isLoading = computed(() => fields.value.some((field) => field.isLoading))
-  const errorMessages = computed(() => fields.value.map((field) => field.errorMessages).flat())
+  }, {} as Record<Names, FormFiled>))
+  const isValid = computed(() => fields.value.every((field) => unref(field.isValid)))
+  const isLoading = computed(() => fields.value.some((field) => unref(field.isLoading)))
+  const errorMessages = computed(() => fields.value.map((field) => unref(field.errorMessages)).flat())
   const errorMessagesNamed = computed(() => fields.value.reduce((acc, field) => {
-    if (field.name) { acc[field.name] = field.errorMessages }
+    if (unref(field.name)) { acc[unref(field.name) as Names] = unref(field.errorMessages) }
     return acc
   }, {} as Record<Names, any>))
 
@@ -78,18 +78,17 @@ export const useFormParent = <Names extends string = string>(options: FormParent
     invalidField?.focus()
   }
 
-  useFormChild(() => ({
-    name: '',
-    value: undefined,
-    isValid: isValid.value,
-    isLoading: isLoading.value,
+  useFormChild({
+    name: ref(undefined),
+    isValid: isValid,
+    isLoading: isLoading,
     validate,
     validateAsync,
     reset,
     resetValidation,
     focus,
-    errorMessages: errorMessages.value,
-  }))
+    errorMessages: errorMessages,
+  })
 
   return {
     formData,

packages/ui/src/composables/useValidation.ts

@@ -6,6 +6,7 @@ import {
   nextTick,
   type WritableComputedRef,
   ref,
+  toRef,
 } from 'vue'
 import flatten from 'lodash/flatten.js'
 import isFunction from 'lodash/isFunction.js'
@@ -162,18 +163,18 @@ export const useValidation = <V, P extends ExtractPropTypes<typeof useValidation
     doShowErrorMessages,
     doShowError,
     doShowLoading,
-  } = useFormChild(() => ({
-    isValid: !computedError.value,
-    isLoading: isLoading.value,
-    errorMessages: computedErrorMessages.value,
+  } = useFormChild({
+    isValid: computed(() => !computedError.value),
+    isLoading: isLoading,
+    errorMessages: computedErrorMessages,
     validate,
     validateAsync,
     resetValidation,
     focus,
     reset,
-    value: options.value || props.modelValue,
-    name: props.name,
-  }))
+    value: computed(() => options.value || props.modelValue),
+    name: toRef(props, 'name'),
+  })
 
   return {
     computedError: computed(() => doShowError.value ? computedError.value : false),