├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── db.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── BaseButton.vue │ ├── BaseCheckbox.vue │ ├── BaseErrorMessage.vue │ ├── BaseInput.vue │ ├── BaseRadio.vue │ ├── BaseRadioGroup.vue │ └── BaseSelect.vue ├── features │ ├── SetupFormComponent.js │ └── UniqueID.js ├── main.js └── views │ ├── ComponentsForm.vue │ └── SimpleForm.vue └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | 'plugin:vue/vue3-essential', 8 | '@vue/standard' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 Forms 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /db.json: -------------------------------------------------------------------------------- 1 | { 2 | "events": [ 3 | { 4 | "id": 1, 5 | "category": "animal welfare", 6 | "title": "Frenz of bunz", 7 | "description": "🐰 an frenz", 8 | "location": "Zoom - stay safe", 9 | "pets": 1, 10 | "extras": { 11 | "catering": true, 12 | "music": true 13 | } 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "advanced-forms", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.4", 12 | "vue": "^3.0.0-rc.1" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-service": "^5.0.8", 16 | "@vue/compiler-sfc": "^3.0.0", 17 | "@vue/eslint-config-standard": "^5.1.0", 18 | "babel-eslint": "^10.0.3", 19 | "eslint": "^6.7.2", 20 | "eslint-plugin-import": "^2.20.1", 21 | "eslint-plugin-node": "^11.0.0", 22 | "eslint-plugin-promise": "^4.2.1", 23 | "eslint-plugin-standard": "^4.0.0", 24 | "eslint-plugin-vue": "next", 25 | "lodash": "^4.17.15", 26 | "sass": "^1.25.0", 27 | "sass-loader": "^12.0.0", 28 | "vue-cli-plugin-vue-next": "^0.1.2" 29 | }, 30 | "resolutions": { 31 | "postcss": "^8.4.31" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Pop/Vue-3-Forms/643cea668ee6843415f276a25990feb4cf0b0c5f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | 20 | 328 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Pop/Vue-3-Forms/643cea668ee6843415f276a25990feb4cf0b0c5f/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/BaseButton.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/BaseCheckbox.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 52 | -------------------------------------------------------------------------------- /src/components/BaseErrorMessage.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | -------------------------------------------------------------------------------- /src/components/BaseInput.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 59 | -------------------------------------------------------------------------------- /src/components/BaseRadio.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 54 | -------------------------------------------------------------------------------- /src/components/BaseRadioGroup.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 42 | -------------------------------------------------------------------------------- /src/components/BaseSelect.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 70 | -------------------------------------------------------------------------------- /src/features/SetupFormComponent.js: -------------------------------------------------------------------------------- 1 | export default function SetupFormComponent (props, { emit }) { 2 | const updateValue = (event) => { 3 | let val = event.target.value 4 | 5 | if (event.target.type === 'checkbox') val = event.target.checked 6 | if (event.target.type === 'radio') val = props.value 7 | 8 | emit('update:modelValue', val) 9 | } 10 | 11 | return { updateValue } 12 | } 13 | -------------------------------------------------------------------------------- /src/features/UniqueID.js: -------------------------------------------------------------------------------- 1 | let UUID = 1 2 | 3 | export default function UniqueID () { 4 | const getID = () => { 5 | UUID++ 6 | return UUID 7 | } 8 | 9 | return { 10 | getID 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import upperFirst from 'lodash/upperFirst' 4 | import camelCase from 'lodash/camelCase' 5 | 6 | const requireComponent = require.context( 7 | './components', 8 | false, 9 | /Base[A-Z]\w+\.(vue|js)$/ 10 | ) 11 | 12 | const app = createApp(App) 13 | 14 | requireComponent.keys().forEach(fileName => { 15 | const componentConfig = requireComponent(fileName) 16 | 17 | const componentName = upperFirst( 18 | camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, '$1')) 19 | ) 20 | 21 | app.component(componentName, componentConfig.default || componentConfig) 22 | }) 23 | 24 | app.mount('#app') 25 | -------------------------------------------------------------------------------- /src/views/ComponentsForm.vue: -------------------------------------------------------------------------------- 1 | 84 | 85 | 118 | -------------------------------------------------------------------------------- /src/views/SimpleForm.vue: -------------------------------------------------------------------------------- 1 | 90 | 91 | 119 | --------------------------------------------------------------------------------