dbssman · dbssman · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/playground/main.ts"></script>
+</body>
+
+</html>
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,14 +1,16 @@
 import { BaseControlEmits } from "./types"
 
+export const DEFAULT_FIELD_VALUE = null;
+
 export const BaseInputProps = {
   name: { type: String, required: true },
-  isDirty: {type:Boolean, default:()=>false},
-  isTouched: {type:Boolean, default:()=>false},
-  errors: { type: Object, default:()=> {} },
+  isDirty: { type: Boolean, default: () => false },
+  isTouched: { type: Boolean, default: () => false },
+  errors: { type: Object, default: () => { } },
   onBlur: { type: Function, required: true },
-  onClear: { type: Function, default:()=> null },
-  modelValue: { type: [String, Object, Array, Number,Boolean, null], required:true},
+  onClear: { type: Function, default: () => null },
+  modelValue: { type: [String, Object, Array, Number, Boolean, null], required: true },
   'onUpdate:modelValue': { type: Function, required: true },
 }
 
-export const BaseInputEmits:BaseControlEmits = ['update:modelValue', 'blur', 'clear']
+export const BaseInputEmits: BaseControlEmits = ['update:modelValue', 'blur', 'clear']
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,5 @@
-import FormHandler from './FormHandler'
-import useFormHandler from './useFormHandler'
+export { default as FormHandler } from './FormHandler'
+export { default as useFormHandler } from './useFormHandler'
 
 export * from './constants'
-export * from './types'
-export { useFormHandler, FormHandler }
+export * from './types'
diff --git a/src/logic/getDefaultFieldValue.ts b/src/logic/getDefaultFieldValue.ts
@@ -0,0 +1,12 @@
+import { isCheckboxInput } from "../utils"
+import { DEFAULT_FIELD_VALUE } from "../constants"
+
+export default (el: any) => {
+    if (!el) {
+        return DEFAULT_FIELD_VALUE
+    }
+    if (isCheckboxInput(el)) {
+        return false
+    }
+    return DEFAULT_FIELD_VALUE
+}
diff --git a/src/logic/getNativeFieldValue.ts b/src/logic/getNativeFieldValue.ts
@@ -0,0 +1,22 @@
+import { DEFAULT_FIELD_VALUE } from './../constants';
+import { isCheckboxInput, isMultipleSelect, isRadioInput } from "../utils"
+
+export default (el: any) => {
+    if (!el) {
+        return DEFAULT_FIELD_VALUE
+    }
+    if (Array.isArray(el)) {
+        if (isRadioInput(el[0])) {
+            return el.find(({ checked, disabled }) => checked && !disabled)?.value || el[0].value
+        }
+        return el[0].value
+    }
+    if (isCheckboxInput(el)) {
+        return el.checked
+    }
+    if (isMultipleSelect(el)) {
+        const values = [...el.options]?.filter(({ selected }: any) => selected).map(({ value }: any) => value)
+        return !values.length ? DEFAULT_FIELD_VALUE : values
+    }
+    return el.value || DEFAULT_FIELD_VALUE
+}
diff --git a/src/logic/index.ts b/src/logic/index.ts
@@ -0,0 +1,2 @@
+export { default as getNativeFieldValue } from './getNativeFieldValue'
+export { default as getDefaultFieldValue } from './getNativeFieldValue'
diff --git a/src/playground/App.vue b/src/playground/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <h2> VSSTS </h2>
+    <input v-bind="register('hello')"><br>
+    <input type="number" v-bind="register('number')"><br>
+    <input type="radio" value="female" name="test"> Female<br>
+    <input type="radio" value="other" name="test"> Other<br>
+    <br>
+    <input type="radio" value="male" v-bind="register('gender')"> Male<br>
+    <input type="radio" value="female" v-bind="register('gender')"> Female<br>
+    <input type="radio" value="other" v-bind="register('gender')"> Other<br>
+    <br>
+    <input type="checkbox" v-bind="register('checkbox')"> Other <br>
+    <br>
+    <select v-bind="register('select1')" style="min-width:300px">
+        <option value="">--- Please select option ---</option>
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="hamster">Hamster</option>
+        <option value="parrot">Parrot</option>
+        <option value="spider">Spider</option>
+        <option value="goldfish">Goldfish</option>
+    </select><br>
+    <br>
+    <select v-bind="register('select')" style="min-width:300px" multiple>
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="hamster">Hamster</option>
+        <option value="parrot">Parrot</option>
+        <option value="spider">Spider</option>
+        <option value="goldfish">Goldfish</option>
+    </select><br>
+    <br>
+    <textarea v-bind="register('textArea')"></textarea>
+    <pre>{{ values }}</pre>
+    <pre>{{ formState }}</pre>
+    <pre>{{ modifiedValues() }}</pre>
+    <template v-if="!!dynamic">
+        <input v-bind="register('dynamic')"> <br>
+    </template> <br>
+
+
+    <button @click="setValue('gender', 'female')">Set radio to female</button>
+    <button @click="setValue('select', ['dog', 'cat'])">Set select to dog & cat</button>
+    <button @click="resetField('checkbox')">Reset checkbox</button>
+    <button @click="dynamic = true">Add dynamic field</button>
+</template>
+
+<script setup lang="ts">
+import useFormHandler from '../useFormHandler';
+import { ref } from 'vue'
+const dynamic = ref(false)
+
+const { register, values, formState, resetField, setValue, modifiedValues } = useFormHandler({
+    initialValues: {
+        gender: 'male'
+    }
+});
+
+</script>
+
+<style>
+
+</style>
diff --git a/src/playground/main.ts b/src/playground/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+app.mount('#app')
diff --git a/src/playground/vite-env.d.ts b/src/playground/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as getNativeFieldValue } from './getNativeFieldValue'
		export { default as getDefaultFieldValue } from './getNativeFieldValue'