Skip to content
This repository was archived by the owner on Apr 9, 2025. It is now read-only.

Commit ccea41b

Browse files
dbssmandbssman
authored
Merge pull request #5 from dbssman/feature/4-improve-support-for-native-inputs
Improved support for native inputs
2 parents 64a3102 + fba29f5 commit ccea41b

19 files changed

+399
-204
lines changed

‎index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Vite + Vue + TS</title>
9+
</head>
10+
11+
<body>
12+
<div id="app"></div>
13+
<script type="module" src="/src/playground/main.ts"></script>
14+
</body>
15+
16+
</html>

‎src/constants.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { BaseControlEmits } from "./types"
22

3+
export const DEFAULT_FIELD_VALUE = null;
4+
35
export const BaseInputProps = {
46
name: { type: String, required: true },
5-
isDirty: {type:Boolean, default:()=>false},
6-
isTouched: {type:Boolean, default:()=>false},
7-
errors: { type: Object, default:()=> {} },
7+
isDirty: { type: Boolean, default: () => false },
8+
isTouched: { type: Boolean, default: () => false },
9+
errors: { type: Object, default: () => { } },
810
onBlur: { type: Function, required: true },
9-
onClear: { type: Function, default:()=> null },
10-
modelValue: { type: [String, Object, Array, Number,Boolean, null], required:true},
11+
onClear: { type: Function, default: () => null },
12+
modelValue: { type: [String, Object, Array, Number, Boolean, null], required: true },
1113
'onUpdate:modelValue': { type: Function, required: true },
1214
}
1315

14-
export const BaseInputEmits:BaseControlEmits = ['update:modelValue', 'blur', 'clear']
16+
export const BaseInputEmits: BaseControlEmits = ['update:modelValue', 'blur', 'clear']

‎src/index.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import FormHandler from './FormHandler'
2-
import useFormHandler from './useFormHandler'
1+
export { default as FormHandler } from './FormHandler'
2+
export { default as useFormHandler } from './useFormHandler'
33

44
export * from './constants'
5-
export * from './types'
6-
export { useFormHandler, FormHandler }
5+
export * from './types'

‎src/logic/getDefaultFieldValue.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { isCheckboxInput } from "../utils"
2+
import { DEFAULT_FIELD_VALUE } from "../constants"
3+
4+
export default (el: any) => {
5+
if (!el) {
6+
return DEFAULT_FIELD_VALUE
7+
}
8+
if (isCheckboxInput(el)) {
9+
return false
10+
}
11+
return DEFAULT_FIELD_VALUE
12+
}

‎src/logic/getNativeFieldValue.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { DEFAULT_FIELD_VALUE } from './../constants';
2+
import { isCheckboxInput, isMultipleSelect, isRadioInput } from "../utils"
3+
4+
export default (el: any) => {
5+
if (!el) {
6+
return DEFAULT_FIELD_VALUE
7+
}
8+
if (Array.isArray(el)) {
9+
if (isRadioInput(el[0])) {
10+
return el.find(({ checked, disabled }) => checked && !disabled)?.value || el[0].value
11+
}
12+
return el[0].value
13+
}
14+
if (isCheckboxInput(el)) {
15+
return el.checked
16+
}
17+
if (isMultipleSelect(el)) {
18+
const values = [...el.options]?.filter(({ selected }: any) => selected).map(({ value }: any) => value)
19+
return !values.length ? DEFAULT_FIELD_VALUE : values
20+
}
21+
return el.value || DEFAULT_FIELD_VALUE
22+
}

‎src/logic/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as getNativeFieldValue } from './getNativeFieldValue'
2+
export { default as getDefaultFieldValue } from './getNativeFieldValue'

‎src/playground/App.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<h2> VSSTS </h2>
3+
<input v-bind="register('hello')"><br>
4+
<input type="number" v-bind="register('number')"><br>
5+
<input type="radio" value="female" name="test"> Female<br>
6+
<input type="radio" value="other" name="test"> Other<br>
7+
<br>
8+
<input type="radio" value="male" v-bind="register('gender')"> Male<br>
9+
<input type="radio" value="female" v-bind="register('gender')"> Female<br>
10+
<input type="radio" value="other" v-bind="register('gender')"> Other<br>
11+
<br>
12+
<input type="checkbox" v-bind="register('checkbox')"> Other <br>
13+
<br>
14+
<select v-bind="register('select1')" style="min-width:300px">
15+
<option value="">--- Please select option ---</option>
16+
<option value="dog">Dog</option>
17+
<option value="cat">Cat</option>
18+
<option value="hamster">Hamster</option>
19+
<option value="parrot">Parrot</option>
20+
<option value="spider">Spider</option>
21+
<option value="goldfish">Goldfish</option>
22+
</select><br>
23+
<br>
24+
<select v-bind="register('select')" style="min-width:300px" multiple>
25+
<option value="dog">Dog</option>
26+
<option value="cat">Cat</option>
27+
<option value="hamster">Hamster</option>
28+
<option value="parrot">Parrot</option>
29+
<option value="spider">Spider</option>
30+
<option value="goldfish">Goldfish</option>
31+
</select><br>
32+
<br>
33+
<textarea v-bind="register('textArea')"></textarea>
34+
<pre>{{ values }}</pre>
35+
<pre>{{ formState }}</pre>
36+
<pre>{{ modifiedValues() }}</pre>
37+
<template v-if="!!dynamic">
38+
<input v-bind="register('dynamic')"> <br>
39+
</template> <br>
40+
41+
42+
<button @click="setValue('gender', 'female')">Set radio to female</button>
43+
<button @click="setValue('select', ['dog', 'cat'])">Set select to dog & cat</button>
44+
<button @click="resetField('checkbox')">Reset checkbox</button>
45+
<button @click="dynamic = true">Add dynamic field</button>
46+
</template>
47+
48+
<script setup lang="ts">
49+
import useFormHandler from '../useFormHandler';
50+
import { ref } from 'vue'
51+
const dynamic = ref(false)
52+
53+
const { register, values, formState, resetField, setValue, modifiedValues } = useFormHandler({
54+
initialValues: {
55+
gender: 'male'
56+
}
57+
});
58+
59+
</script>
60+
61+
<style>
62+
63+
</style>

‎src/playground/main.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
const app = createApp(App)
5+
app.mount('#app')

‎src/playground/vite-env.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.vue' {
4+
import type { DefineComponent } from 'vue'
5+
const component: DefineComponent<{}, {}, any>
6+
export default component
7+
}

0 commit comments

Comments
 (0)