deprecated

Author: francyfox

README.md

@@ -1,7 +1,7 @@
-# FN-Scheme TS
+# FN-Scheme TS Deprecated
 #### Form schema component for Naive UI framework. Generate form from json like formkit schema component
 
-P.S. alternative @chronicstone/vue-sweetforms
+**P.S. alternative @form-create/naive-ui**
 
 - Package type: `ts files`
 

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     FnSchema: typeof import('./src/lib/components/fn-schema.vue')['default']
     FnUploadDnd: typeof import('./src/lib/components/naive-ui/fn-upload-dnd.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NIcon: typeof import('naive-ui')['NIcon']
     NP: typeof import('naive-ui')['NP']

package.json

@@ -3,7 +3,7 @@
   "description": "Naive UI component. Generate form from json like formkit schema component",
   "author": "hellisart <7info7web@gmail.com>",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "repository": {
     "type": "git",

src/App.vue

@@ -1,26 +1,41 @@
 <script setup lang="ts">
 import FnSchema   from './lib/components/fn-schema.vue';
-import TestSchema from './test/TestSchema.ts';
-import { ref }    from 'vue';
+import TestSchema        from './test/TestSchema.ts';
+import { ref } from 'vue';
 
 const formData = ref({
   user: {
     name: 'francyfox',
     email: 'test@mail.ru',
     age: 16,
-    agree: true,
+    agree: false,
     gender: ['song4'],
     live: 'live',
     test: false
   },
 });
 
+const validateForm = async (validate) => {
+  try {
+    await validate()
+  } catch (e: [any]) {
+    console.log(e)
+  }
+}
+
 </script>
 
 <template>
   <n-config-provider>
-    <fn-schema v-model:data="formData" :schema="TestSchema"/>
+    <fn-schema ref="formRef"
+               v-model:data="formData"
+               :schema="TestSchema"
+               @validate="validateForm"
+    >
+      <template #submit>test</template>
+    </fn-schema>
   </n-config-provider>
+
   <pre>{{ JSON.stringify(formData.user, null, 4) }}</pre>
 </template>
 

src/lib/components/fn-schema.vue

@@ -1,28 +1,42 @@
 <script setup lang="ts">
 import naiveUISchemaRender, { NaiveUISchema } from '../module/schema/schema.parser.ts';
+import { ref, useSlots }                      from 'vue';
+import { FormInst }                           from 'naive-ui';
 
+const formRef = ref<FormInst | null>(null);
 const props = withDefaults(defineProps<{
   data: any,
-  schema: NaiveUISchema
+  schema: NaiveUISchema,
+  hasSubmit: boolean
 }>(), {
   data: {},
+  hasSubmit: true
 });
-defineEmits(['update:data']);
+const emit = defineEmits(['update:data', 'validate']);
+const NFormNode = naiveUISchemaRender(props.schema, props.data)
 
-const NFormNode = naiveUISchemaRender(props.schema, props.data);
+async function validateForm() {
+  const validate = await formRef.value?.validate
+  emit('validate', validate)
+}
 
 </script>
 
 <template>
   <div class="schema">
     <KeepAlive>
       <Suspense>
-        <n-form-node/>
+        <n-form-node ref="formRef"/>
         <template #fallback>
           Loading...
         </template>
       </Suspense>
     </KeepAlive>
+    <n-button v-if="props.hasSubmit" @click.prevent="validateForm">
+      <slot name="submit">
+        Next
+      </slot>
+    </n-button>
   </div>
 </template>
 

src/lib/components/n-form-node.ts

@@ -1,7 +1,7 @@
-import { nestedObjectByPath, resolve }    from '../../helper/helper.path.ts';
-import { Ref }                            from 'vue';
-import { deepmerge }                      from 'deepmerge-ts';
-import { renderElement }                  from '../../module/schema/schema.render.ts';
+import { nestedObjectByPath, resolve } from '../../helper/helper.path.ts';
+import { Ref, RendererElement, VNode }                  from 'vue';
+import { deepmerge, deepmergeCustom, DeepMergeLeafURI } from 'deepmerge-ts';
+import { renderElement }                                from '../../module/schema/schema.render.ts';
 import { fnValueArguments, NaiveUITypes } from '../../module/schema/schema.model.ts';
 
 export type NaiveUISchema = NaiveUISchemaEl[]
@@ -16,22 +16,29 @@ export const resolveRefVarByPath = (value: string, data: Ref<object>) => {
     const path = value.replace('$data.', '');
     return resolve(path, data, '.');
 };
-export default function naiveUISchemaRender(json: NaiveUISchema, data: Ref<object>): {} {
+export default function naiveUISchemaRender(json: NaiveUISchema, data: Ref<object>): VNode<any, RendererElement, {[p: string]: any}>{
     const [first] = json;
 
     return renderElement(first, data);
 }
 
+export type updateValueConfig = {
+    checked?: boolean,
+}
 
-export function updateValueHandler(argument: fnValueArguments, checked: boolean = false) {
+export function updateValueHandler(argument: fnValueArguments, config?: updateValueConfig) {
     const { $props, v, path, formData } = argument;
     const inputDeep = nestedObjectByPath(path, v);
-    const merged = deepmerge(formData, inputDeep, {
-        arrayMerge: (_: any, sourceArray: any) => sourceArray, // TODO: need add overwrite by path (+ multipath)
+    const customMerge = deepmergeCustom<{
+        DeepMergeArraysURI: DeepMergeLeafURI;
+    }>({
+        mergeArrays: false,
     });
+
+    const merged = customMerge(formData, inputDeep)
     Object.assign(formData, merged);
 
-    return (!checked)
+    return (!config?.checked)
         ? $props.value.value = v
         : $props.checked.value = v;
 }

src/lib/module/schema/schema.parser.ts

@@ -47,13 +47,13 @@ export function renderElement(_el: NaiveUISchemaEl, formData: Ref<object>): VNod
         if (hasValueAction(_el.$type)) {
             $props = {
                 ...$props,
-                onUpdateValue: (v: any) => updateValueHandler({ $props, v, path, formData }),
+                'onUpdate:value': (v: any) => updateValueHandler({ $props, v, path, formData }),
             };
         } else if (hasCheckedAction(_el.$type)) {
             $props.checked = ref(resolveRefVarByPath(path, formData));
             $props = {
                 ...$props,
-                onUpdateChecked: (v: any) => updateValueHandler({ $props, v, path, formData }, true),
+                'onUpdate:checked': (v: any) => updateValueHandler({ $props, v, path, formData }, { checked: true }),
             };
         }
 
@@ -62,7 +62,6 @@ export function renderElement(_el: NaiveUISchemaEl, formData: Ref<object>): VNod
         }
     }
 
-    console.log($props)
     // @ts-ignore
     return h(component, $props, renderChildren($children, formData));
 }

src/lib/module/schema/schema.render.ts

@@ -6,9 +6,12 @@ export default [
         $props: {
             rules: {
                 user: {
-                    name: {
-                        required: true
-                    }
+                    name: [
+                        {
+                            required: true,
+                            trigger: 'input'
+                        }
+                    ]
                 }
             }
         },