├── .eslintrc.cjs ├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── docs └── images │ ├── Form-Template.png │ ├── FormMixins-Methods.png │ ├── Full-Concept.png │ ├── Pinia.png │ └── Render-Function.png ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public └── favicon.ico ├── src ├── App.vue ├── assets │ ├── img │ │ ├── bg.svg │ │ └── vue-mascot.svg │ └── styles │ │ └── main.css ├── components │ ├── ComponentTypes.js │ ├── FormElements │ │ ├── FieldError.vue │ │ ├── FieldGroup.vue │ │ ├── FieldLabel.vue │ │ ├── Fields │ │ │ ├── CheckBox.vue │ │ │ ├── InfoBlock.vue │ │ │ ├── InputBox.vue │ │ │ ├── RadioButton.vue │ │ │ └── TextArea.vue │ │ ├── FormNav.vue │ │ ├── FormProgress.vue │ │ └── FormResult.vue │ ├── FormTemplate.vue │ ├── Transitions │ │ ├── DataDrivenTransition.js │ │ └── TypeBasedTransition.js │ └── VueForm.js ├── composables │ ├── useForm.js │ ├── useFormField.js │ ├── useKeyboardNav.js │ └── useValidation.js ├── config │ ├── config.js │ └── constants.js ├── main.js ├── stores │ └── LeadStore.js └── utilities │ └── index.js └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require("@rushstack/eslint-patch/modern-module-resolution"); 3 | 4 | module.exports = { 5 | root: true, 6 | extends: [ 7 | "plugin:vue/vue3-essential", 8 | "eslint:recommended", 9 | "@vue/eslint-config-prettier", 10 | ], 11 | env: { 12 | "vue/setup-compiler-macros": true, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Advanced Vue 3 Form 2 | This is a revised version of `distraction-free-form` example that was created back in July 2019. 3 | 4 | ## Demo: https://advanced-vue3-form.surge.sh/ 5 | 6 | #### This Typeform like form is built using: 7 | - Vue 3 with: 8 | - Render functions 9 | - Functional components 10 | - Single file components, 11 | - Composables, 12 | - Provide/Inject, 13 | - Transitions 14 | - Pinia, 15 | - Vuelidate and 16 | - Animate.css 17 | 18 | ## What's new 19 | 20 | The ideas described in **[Building an Interactive and Distraction-free Form with Vue](https://medium.com/vue-mastery/building-an-interactive-and-distraction-free-form-with-vue-bfe23907e981)** article still applies here in this Vue 3 example. 21 | 22 | However, there are some technical differences that follow Vue 3 conventions. Diagrams seen in the article above have been updated as well. 23 | 24 | ## Reference Links 25 | 26 | ### Vue 2: 27 | 28 | - **2019 Article: [Building an Interactive and Distraction-free Form with Vue](https://medium.com/vue-mastery/building-an-interactive-and-distraction-free-form-with-vue-bfe23907e981)** 29 | - **[Github Repo](https://github.com/Krutie/distraction-free-vue-form)** 30 | - **[Demo](http://distraction-free-vue-form.surge.sh/)** 31 | 32 | ### Vue 3: 33 | - **[Demo](https://advanced-vue3-form.surge.sh/)** 34 | 35 | **See below to read more.** 36 | 37 | ## Full concept 38 | 39 | ![Full Concept](/docs/images/Full-Concept.png) 40 | 41 | ## Render functions in Vue 3 42 | 43 | Function to create virtual node was available in `render()` function by default in Vue 2. This same function needs to be imported from vue 3 now. Here's the signature of the new render function in Vue 3. 44 | 45 | See how the render function is used in **[VueForm.js](src/components/VueForm.js)** to load dynamic form-field components as per defined in **[form configuration](/src/config/config.js)**. 46 | 47 | ![Render function syntax](/docs/images/Render-Function.png) 48 | 49 | ## Functional components in Vue 3 50 | 51 | Everything we knew about functional component in Vue 2 is true for Vue 3 as well. However, there are some differences in how we write functional component in Vue 3. 52 | 53 | - Functional component now has the same signature as `setup()` function 54 | - Functional component doesn't need to have `function:true` as we had to in options API. 55 | 56 | Functional components are applicable for both transitions. 57 | - **[Data-driven transition](/src/components/Transitions/DataDrivenTransition.js)** 58 | - **[Type-based transition](/src/components/Transitions/TypeBasedTransition.js)** 59 | 60 | ```js 61 | import { h, Transition } from "vue"; 62 | 63 | function MyComponent(props, { slots, emit, attrs }) { 64 | 65 | // return the render function 66 | return () => h(Transition, props, slots) 67 | } 68 | ``` 69 | 70 | Previously, we rendered `` component by adding it as a string, like: `return h("transition", data, context.children)`. 71 | In Vue 3, we need to import an actual `Transition` component from `vue` and then pass it into render function `h()`. 72 | 73 | ## From mixins to composables 74 | 75 | Back in Vue 2 example, we used mixins to share the formState and formData. That same mixin is now converted into `useForm` composable, that provides formState, formData and other helper methods to navigate individual fields within the form. 76 | 77 | See all four **[composables](/src/composables)** used in this example. 78 | 79 | ![useForm Composable](/docs/images/FormMixins-Methods.png) 80 | 81 | ## From Vuex to Pinia 82 | 83 | Back in Vue 2 example, we used Vuex store to create empty store based on form configuration. In this Vue 3 example, we use Pinia to create empty store. 84 | 85 | ```js 86 | // src/components/VueForm.js 87 | 88 | // Set empty store for form data 89 | const store = useLeadStore(); 90 | 91 | props.formConfig.forEach((field) => { 92 | switch (field.type) { 93 | case "checkbox": 94 | return (store.formData[field.name] = []); 95 | case "radio": 96 | return (store.formData[field.name] = ""); 97 | case "information": 98 | break; 99 | default: 100 | return (store.formData[field.name] = ""); 101 | } 102 | }); 103 | ``` 104 | 105 | As soon as we load the form, we have this 👆 empty store created for us to store user entered values. The **[pinia store](/src/stores/LeadStore.js)** looks a lot simpler now as well. 106 | 107 | ![Pinia](/docs/images/Pinia.png) 108 | 109 | 110 | ## Vuelidate and 3 composables 111 | 112 | Vuelidate is used for form validation. There are two custom composables, `useFormField` and `useValidation` along with `useVulidate` composable that's provided by Vuelidate - all three of these composables take care of individual field validation before we can move onto the next step in the form. 113 | 114 | ![Vuelidate and Composables](/docs/images/Form-Template.png) 115 | 116 | ## Provide Inject 117 | 118 | Reactive provide/inject is used to make sure `formState` is available in child components that are not in the direct hierarchy. 119 | 120 | ```js 121 | // src/components/FormTemplate.vue 122 | 123 | provide("vueform", { 124 | validateField, 125 | formState, 126 | }); 127 | ``` 128 | 129 | ## $attrs in Vue 3 130 | 131 | Back in Vue 2, `$attrs` were applied to component by simply binding them with dynamic component using 132 | `v-bind="{ ...field.options.attrs }"` 133 | 134 | ```html 135 | 136 | 141 | ``` 142 | 143 | In Vue 3, `$attrs` are passed the same way, `v-bind="{ ...field.options.attrs }"`, but then they are available using `$attrs` in template section of the Vue component. 144 | 145 | ```html 146 | 147 | ``` 148 | 149 | See working example in **[InputBox.vue](/src/components/FormElements/Fields/InputBox.vue)** 150 | 151 | ## Todos: further improvement 152 | 153 | - [ ] TypeScript 154 | - [ ] CSS Refactoring (Windicss) 155 | - [ ] XState 156 | -------------------------------------------------------------------------------- /docs/images/Form-Template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krutie/advanced-vue3-form/aca7ab20c9b9eaacd9d544a1ed8d1c11047bb8e2/docs/images/Form-Template.png -------------------------------------------------------------------------------- /docs/images/FormMixins-Methods.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krutie/advanced-vue3-form/aca7ab20c9b9eaacd9d544a1ed8d1c11047bb8e2/docs/images/FormMixins-Methods.png -------------------------------------------------------------------------------- /docs/images/Full-Concept.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krutie/advanced-vue3-form/aca7ab20c9b9eaacd9d544a1ed8d1c11047bb8e2/docs/images/Full-Concept.png -------------------------------------------------------------------------------- /docs/images/Pinia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krutie/advanced-vue3-form/aca7ab20c9b9eaacd9d544a1ed8d1c11047bb8e2/docs/images/Pinia.png -------------------------------------------------------------------------------- /docs/images/Render-Function.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krutie/advanced-vue3-form/aca7ab20c9b9eaacd9d544a1ed8d1c11047bb8e2/docs/images/Render-Function.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Advanced Vue 3 Form 8 | 9 | 10 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "advanced-vue3-form", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "vite preview --port 4173", 8 | "deploy": "rm -rf dist && vite build && cd dist && surge ./ --domain https://advanced-vue3-form.surge.sh/", 9 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" 10 | }, 11 | "dependencies": { 12 | "@iconify/vue": "^3.2.1", 13 | "@vuelidate/core": "2.0.0-alpha.41", 14 | "@vuelidate/validators": "2.0.0-alpha.29", 15 | "gsap": "^3.10.4", 16 | "pinia": "^2.0.14", 17 | "vue": "^3.2.36" 18 | }, 19 | "devDependencies": { 20 | "@rushstack/eslint-patch": "^1.1.0", 21 | "@vitejs/plugin-vue": "^2.3.3", 22 | "@vue/eslint-config-prettier": "^7.0.0", 23 | "eslint": "^8.5.0", 24 | "eslint-plugin-vue": "^8.2.0", 25 | "prettier": "^2.5.1", 26 | "vite": "^2.9.9" 27 | } 28 | } -------------------------------------------------------------------------------- /pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: 5.4 2 | 3 | specifiers: 4 | '@iconify/vue': ^3.2.1 5 | '@rushstack/eslint-patch': ^1.1.0 6 | '@vitejs/plugin-vue': ^2.3.3 7 | '@vue/eslint-config-prettier': ^7.0.0 8 | '@vuelidate/core': 2.0.0-alpha.41 9 | '@vuelidate/validators': 2.0.0-alpha.29 10 | eslint: ^8.5.0 11 | eslint-plugin-vue: ^8.2.0 12 | gsap: ^3.10.4 13 | pinia: ^2.0.14 14 | prettier: ^2.5.1 15 | vite: ^2.9.9 16 | vue: ^3.2.36 17 | 18 | dependencies: 19 | '@iconify/vue': 3.2.1_vue@3.2.37 20 | '@vuelidate/core': 2.0.0-alpha.41_vue@3.2.37 21 | '@vuelidate/validators': 2.0.0-alpha.29_vue@3.2.37 22 | gsap: 3.10.4 23 | pinia: 2.0.14_vue@3.2.37 24 | vue: 3.2.37 25 | 26 | devDependencies: 27 | '@rushstack/eslint-patch': 1.1.3 28 | '@vitejs/plugin-vue': 2.3.3_vite@2.9.10+vue@3.2.37 29 | '@vue/eslint-config-prettier': 7.0.0_ddjd75dz7x3czaucyvuaamiqdi 30 | eslint: 8.17.0 31 | eslint-plugin-vue: 8.7.1_eslint@8.17.0 32 | prettier: 2.6.2 33 | vite: 2.9.10 34 | 35 | packages: 36 | 37 | /@babel/helper-validator-identifier/7.16.7: 38 | resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==} 39 | engines: {node: '>=6.9.0'} 40 | dev: false 41 | 42 | /@babel/parser/7.18.4: 43 | resolution: {integrity: sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==} 44 | engines: {node: '>=6.0.0'} 45 | hasBin: true 46 | dependencies: 47 | '@babel/types': 7.18.4 48 | dev: false 49 | 50 | /@babel/types/7.18.4: 51 | resolution: {integrity: sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==} 52 | engines: {node: '>=6.9.0'} 53 | dependencies: 54 | '@babel/helper-validator-identifier': 7.16.7 55 | to-fast-properties: 2.0.0 56 | dev: false 57 | 58 | /@eslint/eslintrc/1.3.0: 59 | resolution: {integrity: sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==} 60 | engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} 61 | dependencies: 62 | ajv: 6.12.6 63 | debug: 4.3.4 64 | espree: 9.3.2 65 | globals: 13.15.0 66 | ignore: 5.2.0 67 | import-fresh: 3.3.0 68 | js-yaml: 4.1.0 69 | minimatch: 3.1.2 70 | strip-json-comments: 3.1.1 71 | transitivePeerDependencies: 72 | - supports-color 73 | dev: true 74 | 75 | /@humanwhocodes/config-array/0.9.5: 76 | resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==} 77 | engines: {node: '>=10.10.0'} 78 | dependencies: 79 | '@humanwhocodes/object-schema': 1.2.1 80 | debug: 4.3.4 81 | minimatch: 3.1.2 82 | transitivePeerDependencies: 83 | - supports-color 84 | dev: true 85 | 86 | /@humanwhocodes/object-schema/1.2.1: 87 | resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} 88 | dev: true 89 | 90 | /@iconify/vue/3.2.1_vue@3.2.37: 91 | resolution: {integrity: sha512-c4R6ZgFo1JrJ8aPMMgOPgfU7lBswihMGR+yWe/P4ZukC3kTkeT4+lkt9Pc/itVFMkwva/S/7u9YofmYv57fnNQ==} 92 | peerDependencies: 93 | vue: 3.x 94 | dependencies: 95 | vue: 3.2.37 96 | dev: false 97 | 98 | /@rushstack/eslint-patch/1.1.3: 99 | resolution: {integrity: sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==} 100 | dev: true 101 | 102 | /@vitejs/plugin-vue/2.3.3_vite@2.9.10+vue@3.2.37: 103 | resolution: {integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==} 104 | engines: {node: '>=12.0.0'} 105 | peerDependencies: 106 | vite: ^2.5.10 107 | vue: ^3.2.25 108 | dependencies: 109 | vite: 2.9.10 110 | vue: 3.2.37 111 | dev: true 112 | 113 | /@vue/compiler-core/3.2.37: 114 | resolution: {integrity: sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==} 115 | dependencies: 116 | '@babel/parser': 7.18.4 117 | '@vue/shared': 3.2.37 118 | estree-walker: 2.0.2 119 | source-map: 0.6.1 120 | dev: false 121 | 122 | /@vue/compiler-dom/3.2.37: 123 | resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==} 124 | dependencies: 125 | '@vue/compiler-core': 3.2.37 126 | '@vue/shared': 3.2.37 127 | dev: false 128 | 129 | /@vue/compiler-sfc/3.2.37: 130 | resolution: {integrity: sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==} 131 | dependencies: 132 | '@babel/parser': 7.18.4 133 | '@vue/compiler-core': 3.2.37 134 | '@vue/compiler-dom': 3.2.37 135 | '@vue/compiler-ssr': 3.2.37 136 | '@vue/reactivity-transform': 3.2.37 137 | '@vue/shared': 3.2.37 138 | estree-walker: 2.0.2 139 | magic-string: 0.25.9 140 | postcss: 8.4.14 141 | source-map: 0.6.1 142 | dev: false 143 | 144 | /@vue/compiler-ssr/3.2.37: 145 | resolution: {integrity: sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==} 146 | dependencies: 147 | '@vue/compiler-dom': 3.2.37 148 | '@vue/shared': 3.2.37 149 | dev: false 150 | 151 | /@vue/devtools-api/6.1.4: 152 | resolution: {integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==} 153 | dev: false 154 | 155 | /@vue/eslint-config-prettier/7.0.0_ddjd75dz7x3czaucyvuaamiqdi: 156 | resolution: {integrity: sha512-/CTc6ML3Wta1tCe1gUeO0EYnVXfo3nJXsIhZ8WJr3sov+cGASr6yuiibJTL6lmIBm7GobopToOuB3B6AWyV0Iw==} 157 | peerDependencies: 158 | eslint: '>= 7.28.0' 159 | prettier: '>= 2.0.0' 160 | dependencies: 161 | eslint: 8.17.0 162 | eslint-config-prettier: 8.5.0_eslint@8.17.0 163 | eslint-plugin-prettier: 4.0.0_ucegkljdju7q4zmvwxzqoprf3y 164 | prettier: 2.6.2 165 | dev: true 166 | 167 | /@vue/reactivity-transform/3.2.37: 168 | resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==} 169 | dependencies: 170 | '@babel/parser': 7.18.4 171 | '@vue/compiler-core': 3.2.37 172 | '@vue/shared': 3.2.37 173 | estree-walker: 2.0.2 174 | magic-string: 0.25.9 175 | dev: false 176 | 177 | /@vue/reactivity/3.2.37: 178 | resolution: {integrity: sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==} 179 | dependencies: 180 | '@vue/shared': 3.2.37 181 | dev: false 182 | 183 | /@vue/runtime-core/3.2.37: 184 | resolution: {integrity: sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==} 185 | dependencies: 186 | '@vue/reactivity': 3.2.37 187 | '@vue/shared': 3.2.37 188 | dev: false 189 | 190 | /@vue/runtime-dom/3.2.37: 191 | resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==} 192 | dependencies: 193 | '@vue/runtime-core': 3.2.37 194 | '@vue/shared': 3.2.37 195 | csstype: 2.6.20 196 | dev: false 197 | 198 | /@vue/server-renderer/3.2.37_vue@3.2.37: 199 | resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==} 200 | peerDependencies: 201 | vue: 3.2.37 202 | dependencies: 203 | '@vue/compiler-ssr': 3.2.37 204 | '@vue/shared': 3.2.37 205 | vue: 3.2.37 206 | dev: false 207 | 208 | /@vue/shared/3.2.37: 209 | resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==} 210 | dev: false 211 | 212 | /@vuelidate/core/2.0.0-alpha.41_vue@3.2.37: 213 | resolution: {integrity: sha512-fST7s5wiLW8ZNTexe8+7fDdBZYT7HjbuA43/XDtKTlHs1BMRDDaBoFLZbHSqmHisQvGXa7zLG9bvG8X5cHZaxg==} 214 | dependencies: 215 | vue-demi: 0.12.5_vue@3.2.37 216 | transitivePeerDependencies: 217 | - '@vue/composition-api' 218 | - vue 219 | dev: false 220 | 221 | /@vuelidate/validators/2.0.0-alpha.29_vue@3.2.37: 222 | resolution: {integrity: sha512-azVc2Fwx0umgJjVatzDwnVEdEGNhEdUISQKcLwTDJuNUFS9n1CUqMzfNW+CCTw1Wp8RwYiDS9/qKnEZs4ubF5w==} 223 | dependencies: 224 | vue-demi: 0.12.5_vue@3.2.37 225 | transitivePeerDependencies: 226 | - '@vue/composition-api' 227 | - vue 228 | dev: false 229 | 230 | /acorn-jsx/5.3.2_acorn@8.7.1: 231 | resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} 232 | peerDependencies: 233 | acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 234 | dependencies: 235 | acorn: 8.7.1 236 | dev: true 237 | 238 | /acorn/8.7.1: 239 | resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==} 240 | engines: {node: '>=0.4.0'} 241 | hasBin: true 242 | dev: true 243 | 244 | /ajv/6.12.6: 245 | resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} 246 | dependencies: 247 | fast-deep-equal: 3.1.3 248 | fast-json-stable-stringify: 2.1.0 249 | json-schema-traverse: 0.4.1 250 | uri-js: 4.4.1 251 | dev: true 252 | 253 | /ansi-regex/5.0.1: 254 | resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} 255 | engines: {node: '>=8'} 256 | dev: true 257 | 258 | /ansi-styles/4.3.0: 259 | resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} 260 | engines: {node: '>=8'} 261 | dependencies: 262 | color-convert: 2.0.1 263 | dev: true 264 | 265 | /argparse/2.0.1: 266 | resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} 267 | dev: true 268 | 269 | /balanced-match/1.0.2: 270 | resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} 271 | dev: true 272 | 273 | /boolbase/1.0.0: 274 | resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} 275 | dev: true 276 | 277 | /brace-expansion/1.1.11: 278 | resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} 279 | dependencies: 280 | balanced-match: 1.0.2 281 | concat-map: 0.0.1 282 | dev: true 283 | 284 | /callsites/3.1.0: 285 | resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} 286 | engines: {node: '>=6'} 287 | dev: true 288 | 289 | /chalk/4.1.2: 290 | resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} 291 | engines: {node: '>=10'} 292 | dependencies: 293 | ansi-styles: 4.3.0 294 | supports-color: 7.2.0 295 | dev: true 296 | 297 | /color-convert/2.0.1: 298 | resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} 299 | engines: {node: '>=7.0.0'} 300 | dependencies: 301 | color-name: 1.1.4 302 | dev: true 303 | 304 | /color-name/1.1.4: 305 | resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} 306 | dev: true 307 | 308 | /concat-map/0.0.1: 309 | resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=} 310 | dev: true 311 | 312 | /cross-spawn/7.0.3: 313 | resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} 314 | engines: {node: '>= 8'} 315 | dependencies: 316 | path-key: 3.1.1 317 | shebang-command: 2.0.0 318 | which: 2.0.2 319 | dev: true 320 | 321 | /cssesc/3.0.0: 322 | resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} 323 | engines: {node: '>=4'} 324 | hasBin: true 325 | dev: true 326 | 327 | /csstype/2.6.20: 328 | resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==} 329 | dev: false 330 | 331 | /debug/4.3.4: 332 | resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} 333 | engines: {node: '>=6.0'} 334 | peerDependencies: 335 | supports-color: '*' 336 | peerDependenciesMeta: 337 | supports-color: 338 | optional: true 339 | dependencies: 340 | ms: 2.1.2 341 | dev: true 342 | 343 | /deep-is/0.1.4: 344 | resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} 345 | dev: true 346 | 347 | /doctrine/3.0.0: 348 | resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} 349 | engines: {node: '>=6.0.0'} 350 | dependencies: 351 | esutils: 2.0.3 352 | dev: true 353 | 354 | /esbuild-android-64/0.14.43: 355 | resolution: {integrity: sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==} 356 | engines: {node: '>=12'} 357 | cpu: [x64] 358 | os: [android] 359 | requiresBuild: true 360 | dev: true 361 | optional: true 362 | 363 | /esbuild-android-arm64/0.14.43: 364 | resolution: {integrity: sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==} 365 | engines: {node: '>=12'} 366 | cpu: [arm64] 367 | os: [android] 368 | requiresBuild: true 369 | dev: true 370 | optional: true 371 | 372 | /esbuild-darwin-64/0.14.43: 373 | resolution: {integrity: sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==} 374 | engines: {node: '>=12'} 375 | cpu: [x64] 376 | os: [darwin] 377 | requiresBuild: true 378 | dev: true 379 | optional: true 380 | 381 | /esbuild-darwin-arm64/0.14.43: 382 | resolution: {integrity: sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==} 383 | engines: {node: '>=12'} 384 | cpu: [arm64] 385 | os: [darwin] 386 | requiresBuild: true 387 | dev: true 388 | optional: true 389 | 390 | /esbuild-freebsd-64/0.14.43: 391 | resolution: {integrity: sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==} 392 | engines: {node: '>=12'} 393 | cpu: [x64] 394 | os: [freebsd] 395 | requiresBuild: true 396 | dev: true 397 | optional: true 398 | 399 | /esbuild-freebsd-arm64/0.14.43: 400 | resolution: {integrity: sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==} 401 | engines: {node: '>=12'} 402 | cpu: [arm64] 403 | os: [freebsd] 404 | requiresBuild: true 405 | dev: true 406 | optional: true 407 | 408 | /esbuild-linux-32/0.14.43: 409 | resolution: {integrity: sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==} 410 | engines: {node: '>=12'} 411 | cpu: [ia32] 412 | os: [linux] 413 | requiresBuild: true 414 | dev: true 415 | optional: true 416 | 417 | /esbuild-linux-64/0.14.43: 418 | resolution: {integrity: sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==} 419 | engines: {node: '>=12'} 420 | cpu: [x64] 421 | os: [linux] 422 | requiresBuild: true 423 | dev: true 424 | optional: true 425 | 426 | /esbuild-linux-arm/0.14.43: 427 | resolution: {integrity: sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==} 428 | engines: {node: '>=12'} 429 | cpu: [arm] 430 | os: [linux] 431 | requiresBuild: true 432 | dev: true 433 | optional: true 434 | 435 | /esbuild-linux-arm64/0.14.43: 436 | resolution: {integrity: sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==} 437 | engines: {node: '>=12'} 438 | cpu: [arm64] 439 | os: [linux] 440 | requiresBuild: true 441 | dev: true 442 | optional: true 443 | 444 | /esbuild-linux-mips64le/0.14.43: 445 | resolution: {integrity: sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==} 446 | engines: {node: '>=12'} 447 | cpu: [mips64el] 448 | os: [linux] 449 | requiresBuild: true 450 | dev: true 451 | optional: true 452 | 453 | /esbuild-linux-ppc64le/0.14.43: 454 | resolution: {integrity: sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==} 455 | engines: {node: '>=12'} 456 | cpu: [ppc64] 457 | os: [linux] 458 | requiresBuild: true 459 | dev: true 460 | optional: true 461 | 462 | /esbuild-linux-riscv64/0.14.43: 463 | resolution: {integrity: sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==} 464 | engines: {node: '>=12'} 465 | cpu: [riscv64] 466 | os: [linux] 467 | requiresBuild: true 468 | dev: true 469 | optional: true 470 | 471 | /esbuild-linux-s390x/0.14.43: 472 | resolution: {integrity: sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==} 473 | engines: {node: '>=12'} 474 | cpu: [s390x] 475 | os: [linux] 476 | requiresBuild: true 477 | dev: true 478 | optional: true 479 | 480 | /esbuild-netbsd-64/0.14.43: 481 | resolution: {integrity: sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==} 482 | engines: {node: '>=12'} 483 | cpu: [x64] 484 | os: [netbsd] 485 | requiresBuild: true 486 | dev: true 487 | optional: true 488 | 489 | /esbuild-openbsd-64/0.14.43: 490 | resolution: {integrity: sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==} 491 | engines: {node: '>=12'} 492 | cpu: [x64] 493 | os: [openbsd] 494 | requiresBuild: true 495 | dev: true 496 | optional: true 497 | 498 | /esbuild-sunos-64/0.14.43: 499 | resolution: {integrity: sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==} 500 | engines: {node: '>=12'} 501 | cpu: [x64] 502 | os: [sunos] 503 | requiresBuild: true 504 | dev: true 505 | optional: true 506 | 507 | /esbuild-windows-32/0.14.43: 508 | resolution: {integrity: sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==} 509 | engines: {node: '>=12'} 510 | cpu: [ia32] 511 | os: [win32] 512 | requiresBuild: true 513 | dev: true 514 | optional: true 515 | 516 | /esbuild-windows-64/0.14.43: 517 | resolution: {integrity: sha512-8NsuNfI8xwFuJbrCuI+aBqNTYkrWErejFO5aYM+yHqyHuL8mmepLS9EPzAzk8rvfaJrhN0+RvKWAcymViHOKEw==} 518 | engines: {node: '>=12'} 519 | cpu: [x64] 520 | os: [win32] 521 | requiresBuild: true 522 | dev: true 523 | optional: true 524 | 525 | /esbuild-windows-arm64/0.14.43: 526 | resolution: {integrity: sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==} 527 | engines: {node: '>=12'} 528 | cpu: [arm64] 529 | os: [win32] 530 | requiresBuild: true 531 | dev: true 532 | optional: true 533 | 534 | /esbuild/0.14.43: 535 | resolution: {integrity: sha512-Uf94+kQmy/5jsFwKWiQB4hfo/RkM9Dh7b79p8yqd1tshULdr25G2szLz631NoH3s2ujnKEKVD16RmOxvCNKRFA==} 536 | engines: {node: '>=12'} 537 | hasBin: true 538 | requiresBuild: true 539 | optionalDependencies: 540 | esbuild-android-64: 0.14.43 541 | esbuild-android-arm64: 0.14.43 542 | esbuild-darwin-64: 0.14.43 543 | esbuild-darwin-arm64: 0.14.43 544 | esbuild-freebsd-64: 0.14.43 545 | esbuild-freebsd-arm64: 0.14.43 546 | esbuild-linux-32: 0.14.43 547 | esbuild-linux-64: 0.14.43 548 | esbuild-linux-arm: 0.14.43 549 | esbuild-linux-arm64: 0.14.43 550 | esbuild-linux-mips64le: 0.14.43 551 | esbuild-linux-ppc64le: 0.14.43 552 | esbuild-linux-riscv64: 0.14.43 553 | esbuild-linux-s390x: 0.14.43 554 | esbuild-netbsd-64: 0.14.43 555 | esbuild-openbsd-64: 0.14.43 556 | esbuild-sunos-64: 0.14.43 557 | esbuild-windows-32: 0.14.43 558 | esbuild-windows-64: 0.14.43 559 | esbuild-windows-arm64: 0.14.43 560 | dev: true 561 | 562 | /escape-string-regexp/4.0.0: 563 | resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} 564 | engines: {node: '>=10'} 565 | dev: true 566 | 567 | /eslint-config-prettier/8.5.0_eslint@8.17.0: 568 | resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==} 569 | hasBin: true 570 | peerDependencies: 571 | eslint: '>=7.0.0' 572 | dependencies: 573 | eslint: 8.17.0 574 | dev: true 575 | 576 | /eslint-plugin-prettier/4.0.0_ucegkljdju7q4zmvwxzqoprf3y: 577 | resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==} 578 | engines: {node: '>=6.0.0'} 579 | peerDependencies: 580 | eslint: '>=7.28.0' 581 | eslint-config-prettier: '*' 582 | prettier: '>=2.0.0' 583 | peerDependenciesMeta: 584 | eslint-config-prettier: 585 | optional: true 586 | dependencies: 587 | eslint: 8.17.0 588 | eslint-config-prettier: 8.5.0_eslint@8.17.0 589 | prettier: 2.6.2 590 | prettier-linter-helpers: 1.0.0 591 | dev: true 592 | 593 | /eslint-plugin-vue/8.7.1_eslint@8.17.0: 594 | resolution: {integrity: sha512-28sbtm4l4cOzoO1LtzQPxfxhQABararUb1JtqusQqObJpWX2e/gmVyeYVfepizPFne0Q5cILkYGiBoV36L12Wg==} 595 | engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} 596 | peerDependencies: 597 | eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 598 | dependencies: 599 | eslint: 8.17.0 600 | eslint-utils: 3.0.0_eslint@8.17.0 601 | natural-compare: 1.4.0 602 | nth-check: 2.1.1 603 | postcss-selector-parser: 6.0.10 604 | semver: 7.3.7 605 | vue-eslint-parser: 8.3.0_eslint@8.17.0 606 | transitivePeerDependencies: 607 | - supports-color 608 | dev: true 609 | 610 | /eslint-scope/7.1.1: 611 | resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==} 612 | engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} 613 | dependencies: 614 | esrecurse: 4.3.0 615 | estraverse: 5.3.0 616 | dev: true 617 | 618 | /eslint-utils/3.0.0_eslint@8.17.0: 619 | resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} 620 | engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} 621 | peerDependencies: 622 | eslint: '>=5' 623 | dependencies: 624 | eslint: 8.17.0 625 | eslint-visitor-keys: 2.1.0 626 | dev: true 627 | 628 | /eslint-visitor-keys/2.1.0: 629 | resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==} 630 | engines: {node: '>=10'} 631 | dev: true 632 | 633 | /eslint-visitor-keys/3.3.0: 634 | resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==} 635 | engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} 636 | dev: true 637 | 638 | /eslint/8.17.0: 639 | resolution: {integrity: sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==} 640 | engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} 641 | hasBin: true 642 | dependencies: 643 | '@eslint/eslintrc': 1.3.0 644 | '@humanwhocodes/config-array': 0.9.5 645 | ajv: 6.12.6 646 | chalk: 4.1.2 647 | cross-spawn: 7.0.3 648 | debug: 4.3.4 649 | doctrine: 3.0.0 650 | escape-string-regexp: 4.0.0 651 | eslint-scope: 7.1.1 652 | eslint-utils: 3.0.0_eslint@8.17.0 653 | eslint-visitor-keys: 3.3.0 654 | espree: 9.3.2 655 | esquery: 1.4.0 656 | esutils: 2.0.3 657 | fast-deep-equal: 3.1.3 658 | file-entry-cache: 6.0.1 659 | functional-red-black-tree: 1.0.1 660 | glob-parent: 6.0.2 661 | globals: 13.15.0 662 | ignore: 5.2.0 663 | import-fresh: 3.3.0 664 | imurmurhash: 0.1.4 665 | is-glob: 4.0.3 666 | js-yaml: 4.1.0 667 | json-stable-stringify-without-jsonify: 1.0.1 668 | levn: 0.4.1 669 | lodash.merge: 4.6.2 670 | minimatch: 3.1.2 671 | natural-compare: 1.4.0 672 | optionator: 0.9.1 673 | regexpp: 3.2.0 674 | strip-ansi: 6.0.1 675 | strip-json-comments: 3.1.1 676 | text-table: 0.2.0 677 | v8-compile-cache: 2.3.0 678 | transitivePeerDependencies: 679 | - supports-color 680 | dev: true 681 | 682 | /espree/9.3.2: 683 | resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==} 684 | engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} 685 | dependencies: 686 | acorn: 8.7.1 687 | acorn-jsx: 5.3.2_acorn@8.7.1 688 | eslint-visitor-keys: 3.3.0 689 | dev: true 690 | 691 | /esquery/1.4.0: 692 | resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==} 693 | engines: {node: '>=0.10'} 694 | dependencies: 695 | estraverse: 5.3.0 696 | dev: true 697 | 698 | /esrecurse/4.3.0: 699 | resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} 700 | engines: {node: '>=4.0'} 701 | dependencies: 702 | estraverse: 5.3.0 703 | dev: true 704 | 705 | /estraverse/5.3.0: 706 | resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} 707 | engines: {node: '>=4.0'} 708 | dev: true 709 | 710 | /estree-walker/2.0.2: 711 | resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} 712 | dev: false 713 | 714 | /esutils/2.0.3: 715 | resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} 716 | engines: {node: '>=0.10.0'} 717 | dev: true 718 | 719 | /fast-deep-equal/3.1.3: 720 | resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} 721 | dev: true 722 | 723 | /fast-diff/1.2.0: 724 | resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==} 725 | dev: true 726 | 727 | /fast-json-stable-stringify/2.1.0: 728 | resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} 729 | dev: true 730 | 731 | /fast-levenshtein/2.0.6: 732 | resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} 733 | dev: true 734 | 735 | /file-entry-cache/6.0.1: 736 | resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} 737 | engines: {node: ^10.12.0 || >=12.0.0} 738 | dependencies: 739 | flat-cache: 3.0.4 740 | dev: true 741 | 742 | /flat-cache/3.0.4: 743 | resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==} 744 | engines: {node: ^10.12.0 || >=12.0.0} 745 | dependencies: 746 | flatted: 3.2.5 747 | rimraf: 3.0.2 748 | dev: true 749 | 750 | /flatted/3.2.5: 751 | resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==} 752 | dev: true 753 | 754 | /fs.realpath/1.0.0: 755 | resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} 756 | dev: true 757 | 758 | /fsevents/2.3.2: 759 | resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} 760 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} 761 | os: [darwin] 762 | requiresBuild: true 763 | dev: true 764 | optional: true 765 | 766 | /function-bind/1.1.1: 767 | resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} 768 | dev: true 769 | 770 | /functional-red-black-tree/1.0.1: 771 | resolution: {integrity: sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==} 772 | dev: true 773 | 774 | /glob-parent/6.0.2: 775 | resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} 776 | engines: {node: '>=10.13.0'} 777 | dependencies: 778 | is-glob: 4.0.3 779 | dev: true 780 | 781 | /glob/7.2.3: 782 | resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} 783 | dependencies: 784 | fs.realpath: 1.0.0 785 | inflight: 1.0.6 786 | inherits: 2.0.4 787 | minimatch: 3.1.2 788 | once: 1.4.0 789 | path-is-absolute: 1.0.1 790 | dev: true 791 | 792 | /globals/13.15.0: 793 | resolution: {integrity: sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==} 794 | engines: {node: '>=8'} 795 | dependencies: 796 | type-fest: 0.20.2 797 | dev: true 798 | 799 | /gsap/3.10.4: 800 | resolution: {integrity: sha512-6QatdkKxXCMfvCW4rM++0RqyLQAzFX5nwl3yHS0XPgkZBkiSEY3VZVbMltrdtsbER/xZonLtyHt684wRp4erlQ==} 801 | dev: false 802 | 803 | /has-flag/4.0.0: 804 | resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} 805 | engines: {node: '>=8'} 806 | dev: true 807 | 808 | /has/1.0.3: 809 | resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==} 810 | engines: {node: '>= 0.4.0'} 811 | dependencies: 812 | function-bind: 1.1.1 813 | dev: true 814 | 815 | /ignore/5.2.0: 816 | resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==} 817 | engines: {node: '>= 4'} 818 | dev: true 819 | 820 | /import-fresh/3.3.0: 821 | resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} 822 | engines: {node: '>=6'} 823 | dependencies: 824 | parent-module: 1.0.1 825 | resolve-from: 4.0.0 826 | dev: true 827 | 828 | /imurmurhash/0.1.4: 829 | resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} 830 | engines: {node: '>=0.8.19'} 831 | dev: true 832 | 833 | /inflight/1.0.6: 834 | resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} 835 | dependencies: 836 | once: 1.4.0 837 | wrappy: 1.0.2 838 | dev: true 839 | 840 | /inherits/2.0.4: 841 | resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} 842 | dev: true 843 | 844 | /is-core-module/2.9.0: 845 | resolution: {integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==} 846 | dependencies: 847 | has: 1.0.3 848 | dev: true 849 | 850 | /is-extglob/2.1.1: 851 | resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} 852 | engines: {node: '>=0.10.0'} 853 | dev: true 854 | 855 | /is-glob/4.0.3: 856 | resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} 857 | engines: {node: '>=0.10.0'} 858 | dependencies: 859 | is-extglob: 2.1.1 860 | dev: true 861 | 862 | /isexe/2.0.0: 863 | resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} 864 | dev: true 865 | 866 | /js-yaml/4.1.0: 867 | resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} 868 | hasBin: true 869 | dependencies: 870 | argparse: 2.0.1 871 | dev: true 872 | 873 | /json-schema-traverse/0.4.1: 874 | resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} 875 | dev: true 876 | 877 | /json-stable-stringify-without-jsonify/1.0.1: 878 | resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} 879 | dev: true 880 | 881 | /levn/0.4.1: 882 | resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} 883 | engines: {node: '>= 0.8.0'} 884 | dependencies: 885 | prelude-ls: 1.2.1 886 | type-check: 0.4.0 887 | dev: true 888 | 889 | /lodash.merge/4.6.2: 890 | resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} 891 | dev: true 892 | 893 | /lodash/4.17.21: 894 | resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} 895 | dev: true 896 | 897 | /lru-cache/6.0.0: 898 | resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} 899 | engines: {node: '>=10'} 900 | dependencies: 901 | yallist: 4.0.0 902 | dev: true 903 | 904 | /magic-string/0.25.9: 905 | resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} 906 | dependencies: 907 | sourcemap-codec: 1.4.8 908 | dev: false 909 | 910 | /minimatch/3.1.2: 911 | resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} 912 | dependencies: 913 | brace-expansion: 1.1.11 914 | dev: true 915 | 916 | /ms/2.1.2: 917 | resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} 918 | dev: true 919 | 920 | /nanoid/3.3.4: 921 | resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==} 922 | engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} 923 | hasBin: true 924 | 925 | /natural-compare/1.4.0: 926 | resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} 927 | dev: true 928 | 929 | /nth-check/2.1.1: 930 | resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} 931 | dependencies: 932 | boolbase: 1.0.0 933 | dev: true 934 | 935 | /once/1.4.0: 936 | resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} 937 | dependencies: 938 | wrappy: 1.0.2 939 | dev: true 940 | 941 | /optionator/0.9.1: 942 | resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==} 943 | engines: {node: '>= 0.8.0'} 944 | dependencies: 945 | deep-is: 0.1.4 946 | fast-levenshtein: 2.0.6 947 | levn: 0.4.1 948 | prelude-ls: 1.2.1 949 | type-check: 0.4.0 950 | word-wrap: 1.2.3 951 | dev: true 952 | 953 | /parent-module/1.0.1: 954 | resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} 955 | engines: {node: '>=6'} 956 | dependencies: 957 | callsites: 3.1.0 958 | dev: true 959 | 960 | /path-is-absolute/1.0.1: 961 | resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} 962 | engines: {node: '>=0.10.0'} 963 | dev: true 964 | 965 | /path-key/3.1.1: 966 | resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} 967 | engines: {node: '>=8'} 968 | dev: true 969 | 970 | /path-parse/1.0.7: 971 | resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} 972 | dev: true 973 | 974 | /picocolors/1.0.0: 975 | resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} 976 | 977 | /pinia/2.0.14_vue@3.2.37: 978 | resolution: {integrity: sha512-0nPuZR4TetT/WcLN+feMSjWJku3SQU7dBbXC6uw+R6FLQJCsg+/0pzXyD82T1FmAYe0lsx+jnEDQ1BLgkRKlxA==} 979 | peerDependencies: 980 | '@vue/composition-api': ^1.4.0 981 | typescript: '>=4.4.4' 982 | vue: ^2.6.14 || ^3.2.0 983 | peerDependenciesMeta: 984 | '@vue/composition-api': 985 | optional: true 986 | typescript: 987 | optional: true 988 | dependencies: 989 | '@vue/devtools-api': 6.1.4 990 | vue: 3.2.37 991 | vue-demi: 0.13.1_vue@3.2.37 992 | dev: false 993 | 994 | /postcss-selector-parser/6.0.10: 995 | resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} 996 | engines: {node: '>=4'} 997 | dependencies: 998 | cssesc: 3.0.0 999 | util-deprecate: 1.0.2 1000 | dev: true 1001 | 1002 | /postcss/8.4.14: 1003 | resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==} 1004 | engines: {node: ^10 || ^12 || >=14} 1005 | dependencies: 1006 | nanoid: 3.3.4 1007 | picocolors: 1.0.0 1008 | source-map-js: 1.0.2 1009 | 1010 | /prelude-ls/1.2.1: 1011 | resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} 1012 | engines: {node: '>= 0.8.0'} 1013 | dev: true 1014 | 1015 | /prettier-linter-helpers/1.0.0: 1016 | resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==} 1017 | engines: {node: '>=6.0.0'} 1018 | dependencies: 1019 | fast-diff: 1.2.0 1020 | dev: true 1021 | 1022 | /prettier/2.6.2: 1023 | resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==} 1024 | engines: {node: '>=10.13.0'} 1025 | hasBin: true 1026 | dev: true 1027 | 1028 | /punycode/2.1.1: 1029 | resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==} 1030 | engines: {node: '>=6'} 1031 | dev: true 1032 | 1033 | /regexpp/3.2.0: 1034 | resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==} 1035 | engines: {node: '>=8'} 1036 | dev: true 1037 | 1038 | /resolve-from/4.0.0: 1039 | resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} 1040 | engines: {node: '>=4'} 1041 | dev: true 1042 | 1043 | /resolve/1.22.0: 1044 | resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==} 1045 | hasBin: true 1046 | dependencies: 1047 | is-core-module: 2.9.0 1048 | path-parse: 1.0.7 1049 | supports-preserve-symlinks-flag: 1.0.0 1050 | dev: true 1051 | 1052 | /rimraf/3.0.2: 1053 | resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} 1054 | hasBin: true 1055 | dependencies: 1056 | glob: 7.2.3 1057 | dev: true 1058 | 1059 | /rollup/2.75.6: 1060 | resolution: {integrity: sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==} 1061 | engines: {node: '>=10.0.0'} 1062 | hasBin: true 1063 | optionalDependencies: 1064 | fsevents: 2.3.2 1065 | dev: true 1066 | 1067 | /semver/7.3.7: 1068 | resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==} 1069 | engines: {node: '>=10'} 1070 | hasBin: true 1071 | dependencies: 1072 | lru-cache: 6.0.0 1073 | dev: true 1074 | 1075 | /shebang-command/2.0.0: 1076 | resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} 1077 | engines: {node: '>=8'} 1078 | dependencies: 1079 | shebang-regex: 3.0.0 1080 | dev: true 1081 | 1082 | /shebang-regex/3.0.0: 1083 | resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} 1084 | engines: {node: '>=8'} 1085 | dev: true 1086 | 1087 | /source-map-js/1.0.2: 1088 | resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} 1089 | engines: {node: '>=0.10.0'} 1090 | 1091 | /source-map/0.6.1: 1092 | resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} 1093 | engines: {node: '>=0.10.0'} 1094 | dev: false 1095 | 1096 | /sourcemap-codec/1.4.8: 1097 | resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} 1098 | dev: false 1099 | 1100 | /strip-ansi/6.0.1: 1101 | resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} 1102 | engines: {node: '>=8'} 1103 | dependencies: 1104 | ansi-regex: 5.0.1 1105 | dev: true 1106 | 1107 | /strip-json-comments/3.1.1: 1108 | resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} 1109 | engines: {node: '>=8'} 1110 | dev: true 1111 | 1112 | /supports-color/7.2.0: 1113 | resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} 1114 | engines: {node: '>=8'} 1115 | dependencies: 1116 | has-flag: 4.0.0 1117 | dev: true 1118 | 1119 | /supports-preserve-symlinks-flag/1.0.0: 1120 | resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} 1121 | engines: {node: '>= 0.4'} 1122 | dev: true 1123 | 1124 | /text-table/0.2.0: 1125 | resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=} 1126 | dev: true 1127 | 1128 | /to-fast-properties/2.0.0: 1129 | resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=} 1130 | engines: {node: '>=4'} 1131 | dev: false 1132 | 1133 | /type-check/0.4.0: 1134 | resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} 1135 | engines: {node: '>= 0.8.0'} 1136 | dependencies: 1137 | prelude-ls: 1.2.1 1138 | dev: true 1139 | 1140 | /type-fest/0.20.2: 1141 | resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==} 1142 | engines: {node: '>=10'} 1143 | dev: true 1144 | 1145 | /uri-js/4.4.1: 1146 | resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} 1147 | dependencies: 1148 | punycode: 2.1.1 1149 | dev: true 1150 | 1151 | /util-deprecate/1.0.2: 1152 | resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=} 1153 | dev: true 1154 | 1155 | /v8-compile-cache/2.3.0: 1156 | resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} 1157 | dev: true 1158 | 1159 | /vite/2.9.10: 1160 | resolution: {integrity: sha512-TwZRuSMYjpTurLqXspct+HZE7ONiW9d+wSWgvADGxhDPPyoIcNywY+RX4ng+QpK30DCa1l/oZgi2PLZDibhzbQ==} 1161 | engines: {node: '>=12.2.0'} 1162 | hasBin: true 1163 | peerDependencies: 1164 | less: '*' 1165 | sass: '*' 1166 | stylus: '*' 1167 | peerDependenciesMeta: 1168 | less: 1169 | optional: true 1170 | sass: 1171 | optional: true 1172 | stylus: 1173 | optional: true 1174 | dependencies: 1175 | esbuild: 0.14.43 1176 | postcss: 8.4.14 1177 | resolve: 1.22.0 1178 | rollup: 2.75.6 1179 | optionalDependencies: 1180 | fsevents: 2.3.2 1181 | dev: true 1182 | 1183 | /vue-demi/0.12.5_vue@3.2.37: 1184 | resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==} 1185 | engines: {node: '>=12'} 1186 | hasBin: true 1187 | requiresBuild: true 1188 | peerDependencies: 1189 | '@vue/composition-api': ^1.0.0-rc.1 1190 | vue: ^3.0.0-0 || ^2.6.0 1191 | peerDependenciesMeta: 1192 | '@vue/composition-api': 1193 | optional: true 1194 | dependencies: 1195 | vue: 3.2.37 1196 | dev: false 1197 | 1198 | /vue-demi/0.13.1_vue@3.2.37: 1199 | resolution: {integrity: sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==} 1200 | engines: {node: '>=12'} 1201 | hasBin: true 1202 | requiresBuild: true 1203 | peerDependencies: 1204 | '@vue/composition-api': ^1.0.0-rc.1 1205 | vue: ^3.0.0-0 || ^2.6.0 1206 | peerDependenciesMeta: 1207 | '@vue/composition-api': 1208 | optional: true 1209 | dependencies: 1210 | vue: 3.2.37 1211 | dev: false 1212 | 1213 | /vue-eslint-parser/8.3.0_eslint@8.17.0: 1214 | resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==} 1215 | engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} 1216 | peerDependencies: 1217 | eslint: '>=6.0.0' 1218 | dependencies: 1219 | debug: 4.3.4 1220 | eslint: 8.17.0 1221 | eslint-scope: 7.1.1 1222 | eslint-visitor-keys: 3.3.0 1223 | espree: 9.3.2 1224 | esquery: 1.4.0 1225 | lodash: 4.17.21 1226 | semver: 7.3.7 1227 | transitivePeerDependencies: 1228 | - supports-color 1229 | dev: true 1230 | 1231 | /vue/3.2.37: 1232 | resolution: {integrity: sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==} 1233 | dependencies: 1234 | '@vue/compiler-dom': 3.2.37 1235 | '@vue/compiler-sfc': 3.2.37 1236 | '@vue/runtime-dom': 3.2.37 1237 | '@vue/server-renderer': 3.2.37_vue@3.2.37 1238 | '@vue/shared': 3.2.37 1239 | dev: false 1240 | 1241 | /which/2.0.2: 1242 | resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} 1243 | engines: {node: '>= 8'} 1244 | hasBin: true 1245 | dependencies: 1246 | isexe: 2.0.0 1247 | dev: true 1248 | 1249 | /word-wrap/1.2.3: 1250 | resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==} 1251 | engines: {node: '>=0.10.0'} 1252 | dev: true 1253 | 1254 | /wrappy/1.0.2: 1255 | resolution: {integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=} 1256 | dev: true 1257 | 1258 | /yallist/4.0.0: 1259 | resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} 1260 | dev: true 1261 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krutie/advanced-vue3-form/aca7ab20c9b9eaacd9d544a1ed8d1c11047bb8e2/public/favicon.ico -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 14 | 18 | -------------------------------------------------------------------------------- /src/assets/img/bg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/vue-mascot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/styles/main.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap"); 2 | 3 | :root { 4 | accent-color: #4c9d8d; 5 | --primary: #55bea9; 6 | --secondary: #4c9d8d; 7 | --fonts: #2c3e50; 8 | --error: #ef6574; 9 | --light: #cef4e0; 10 | } 11 | 12 | body { 13 | margin: 0; 14 | } 15 | 16 | #app { 17 | font-family: "Rubik", sans-serif; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | color: var(--fonts); 21 | background-image: url("../img/bg.svg"); 22 | height: 100vh; 23 | background-repeat: no-repeat; 24 | background-color: var(--light); 25 | background-blend-mode: overlay; 26 | background-size: cover; 27 | } 28 | 29 | form { 30 | background-image: url("../img/vue-mascot.svg"); 31 | background-position: bottom right; 32 | background-size: 25%; 33 | height: 100vh; 34 | background-repeat: no-repeat; 35 | } 36 | 37 | @media screen and (max-width: 600px) { 38 | form { 39 | background-size: 65%; 40 | } 41 | } 42 | 43 | .form-template { 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | } 48 | 49 | /* Title - Advanced Vue.js Form */ 50 | .title h1 { 51 | padding-top: 5px; 52 | font-weight: 700; 53 | font-size: 1.7em; 54 | } 55 | 56 | h1 { 57 | color: var(--secondary); 58 | position: fixed; 59 | left: 0; 60 | right: 0; 61 | user-select: none; 62 | opacity: 0.85; 63 | } 64 | 65 | h1 span { 66 | color: var(--fonts) 67 | } 68 | 69 | /* HTML Tags */ 70 | h1 { 71 | margin: 15px; 72 | font-weight: 300; 73 | } 74 | 75 | h2 { 76 | font-size: 2em; 77 | margin-bottom: 0.75em; 78 | } 79 | 80 | h2:not(:first-child) { 81 | margin-top: 0.75em; 82 | } 83 | 84 | input[type="checkbox"], 85 | input[type="radio"] { 86 | height: 20px; 87 | width: 20px; 88 | margin-right: 10px; 89 | } 90 | 91 | input[type="text"], 92 | textarea { 93 | border-color: transparent; 94 | border: none; 95 | border-bottom: 2px solid var(--light) !important; 96 | height: 30px; 97 | width: 100%; 98 | font-size: 1.5em; 99 | border-radius: 2px; 100 | background-color: transparent; 101 | } 102 | 103 | input[type="text"]:focus, 104 | textarea:focus { 105 | outline: none; 106 | border-bottom: 2px solid var(--primary) !important; 107 | } 108 | 109 | input[type="text"]::placeholder, 110 | textarea::placeholder { 111 | color: var(--fonts); 112 | opacity: 0.25; 113 | } 114 | 115 | textarea { 116 | height: 120px; 117 | } 118 | 119 | /* Form */ 120 | .field-group { 121 | position: absolute; 122 | width: 55%; 123 | } 124 | 125 | @media screen and (max-width: 600px) { 126 | .field-group { 127 | width: 90%; 128 | } 129 | } 130 | 131 | .field-label { 132 | display: block; 133 | padding-bottom: 35px; 134 | display: flex; 135 | align-items: center; 136 | background-color: transparent; 137 | opacity: 0.7; 138 | } 139 | 140 | .field-label svg { 141 | color: var(--primary); 142 | font-size: 1.5em; 143 | } 144 | 145 | .input-errors { 146 | font-size: 1em; 147 | font-weight: 300; 148 | color: var(--error); 149 | font-weight: 400; 150 | background-color: rgba(255, 255, 255, 0.5); 151 | padding: 5px 7px; 152 | } 153 | 154 | .input-errors svg { 155 | font-size: 25px; 156 | margin-right: 5px; 157 | } 158 | 159 | .error-msg { 160 | display: flex; 161 | align-items: center; 162 | } 163 | 164 | .form-result { 165 | display: flex; 166 | align-items: center; 167 | width: 90%; 168 | } 169 | 170 | pre { 171 | white-space: pre-wrap 172 | } 173 | 174 | .form-complete p { 175 | padding-left: 100px; 176 | } 177 | 178 | /* Navigation and Progress Bar */ 179 | .nav { 180 | position: fixed; 181 | bottom: 10px; 182 | left: 10px; 183 | right: 0; 184 | background-color: inherit; 185 | padding: 5px; 186 | z-index: 10; 187 | display: flex; 188 | justify-content: left; 189 | transition: background-color 0.5s ease; 190 | } 191 | 192 | .form-button { 193 | display: flex; 194 | border: none; 195 | margin-left: 0; 196 | margin-right: 3px; 197 | border-radius: 3px; 198 | font-size: 1em; 199 | box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); 200 | cursor: pointer; 201 | font-weight: 500; 202 | padding: 5px 10px; 203 | background-color: var(--primary); 204 | color: white; 205 | } 206 | 207 | .form-button:hover { 208 | background-color: var(--secondary) 209 | } 210 | 211 | .form-button svg { 212 | font-size: 25px; 213 | } 214 | 215 | .disabled { 216 | pointer-events: none; 217 | background: lightgrey; 218 | } 219 | 220 | .form-error-message { 221 | margin-top: 50px; 222 | position: inherit; 223 | } 224 | 225 | .form-error-message .form-button { 226 | font-weight: 700; 227 | padding: 10px 15px; 228 | } 229 | 230 | .info-block { 231 | font-size: 1.5em; 232 | } 233 | 234 | .bar { 235 | height: 7px; 236 | width: 0px; 237 | background-color: var(--primary); 238 | border-radius: 2px; 239 | position: fixed; 240 | top: 66px; 241 | } 242 | 243 | ::-webkit-scrollbar { 244 | width: 0px; 245 | } 246 | 247 | /* Media query for portrait mode */ 248 | @media only screen and (orientation: portrait) { 249 | input[type="text"] { 250 | font-size: 1.4em; 251 | } 252 | 253 | textarea { 254 | font-size: 1.2em; 255 | } 256 | 257 | .form-complete { 258 | padding-top: 35%; 259 | padding-bottom: 35%; 260 | } 261 | 262 | .form-complete p { 263 | padding-left: 30px !important; 264 | } 265 | } 266 | 267 | .instructions { 268 | font-size: 0.7em; 269 | opacity: 0.7; 270 | } 271 | 272 | .instructions svg { 273 | position: relative; 274 | opacity: 0.85; 275 | top: 5px; 276 | font-size: 1.3em; 277 | } 278 | 279 | .instructions span { 280 | font-weight: bold; 281 | } -------------------------------------------------------------------------------- /src/components/ComponentTypes.js: -------------------------------------------------------------------------------- 1 | import FormTemplate from "./FormTemplate.vue"; 2 | import InputBox from "./FormElements/Fields/InputBox.vue"; 3 | import TextArea from "./FormElements/Fields/TextArea.vue"; 4 | import RadioButton from "./FormElements/Fields/RadioButton.vue"; 5 | import CheckBox from "./FormElements/Fields/CheckBox.vue"; 6 | import InfoBlock from "./FormElements/Fields/InfoBlock.vue"; 7 | 8 | const COMPONENT_MAP = { 9 | formTemplate: FormTemplate, 10 | text: InputBox, 11 | textarea: TextArea, 12 | radio: RadioButton, 13 | checkbox: CheckBox, 14 | information: InfoBlock, 15 | }; 16 | 17 | export function getComponent(type) { 18 | return COMPONENT_MAP[type]; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/FormElements/FieldError.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 52 | -------------------------------------------------------------------------------- /src/components/FormElements/FieldGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 39 | -------------------------------------------------------------------------------- /src/components/FormElements/FieldLabel.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /src/components/FormElements/Fields/CheckBox.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 50 | 51 | 63 | -------------------------------------------------------------------------------- /src/components/FormElements/Fields/InfoBlock.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | -------------------------------------------------------------------------------- /src/components/FormElements/Fields/InputBox.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 43 | -------------------------------------------------------------------------------- /src/components/FormElements/Fields/RadioButton.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 50 | -------------------------------------------------------------------------------- /src/components/FormElements/Fields/TextArea.vue: -------------------------------------------------------------------------------- 1 |