{"_id":"@acato/vue-form-elements","_rev":"12-418d3d1ef4f228615f118a232085990d","name":"@acato/vue-form-elements","dist-tags":{"latest":"0.9.2"},"versions":{"0.7.1":{"name":"@acato/vue-form-elements","version":"0.7.1","author":{"name":"Acato B.V."},"license":"Creative Commons Attribution-NonCommercial 4.0 International License","_id":"@acato/vue-form-elements@0.7.1","maintainers":[{"name":"marienvanoverbeek","email":"marien@riverfields.nl"},{"name":"beheeracato","email":"beheer@acato.nl"},{"name":"supremo","email":"npm@remodiego.com"},{"name":"supr3mo","email":"remo@acato.nl"}],"homepage":"https://www.acato.nl/","dist":{"shasum":"9e9f17f344efade126b74904e218d5cf5f0a7ce2","tarball":"https://registry.npmjs.org/@acato/vue-form-elements/-/vue-form-elements-0.7.1.tgz","fileCount":117,"integrity":"sha512-6wjETBQ0XsrIy9RYmaWBmG+cU/pnd5p2o13VpOIap/waIptV4XiaXrn0anDLxr0506WQYiCmQCwUPhidiaPLZw==","signatures":[{"sig":"MEQCIELrYVhBTDLghRZKwAn4Hglg2jhDoEhrPE+7ASae60STAiBlIpBU5+HH2S2n61TpBf+n6vB3RYLUjADN5j85JuTTPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":92165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3rQ9CRA9TVsSAnZWagAACEoP/RO/+NwI/pDRvI/fktqz\n0yNacxdac4nkS5GH8tDnxfqc0LsIsztGry1e5xHh5H12tShMNRoZdiZgaTO8\nAlZRbf7I6NSzofIlULhXQisqR3FhpjlVFzvceM3STN71V+4dENfTCoZtXuwm\nJ7PH5HwgMPTffmHYRaD8E1ALWkhkHevKKm51E4h3bUDKGs0SVTcs0OHDoq4V\nUfqwd8aXwornqhHnU9Alkz/44gp7RowzoPfrpAPlBQMPR90sZmThSS3MA6cG\nZ2PtaqiY9HxDl987aj9ewjKBfUvy8UxEYfXpBdOeCJFrCLspfL7jBO8XTMZ9\nG6HCE3xWYqFIRxTl3utiaqC2ShcF9Pk9/FCDsJdkycSusMSQ8m4nZggWUODH\nHV/SWLCTrNcKqJJbERcvcrxHEk4P10l4iw7zmeWC9NIF9l4rbnTKp1Vui+ZR\n1PK4FMzE6cfro95/f3h0oMY8A+S6yxzcP32tmCyIzfmXtyrk0DZ2PSAzuNsk\ne8z4jm6EFy2G1cJAFgNbHXjH2g/nY8o+OcHc/7s2gFM8Vf1+0vJrQsW7rDqa\nGNsLQeNfa8MznJPspFuQWvvk8WJHrZHoEk+rZubKvoaYshYHdntUCljIN7ha\nuo29ggW6r0UUSM5NRM4vbPKjkbO0Nnk6ZC9nMfEUXYtagBc6KfM+QyWah4kH\nGj/Q\r\n=EWHZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","sass":"scss/vue-form-elements.scss","gitHead":"72db69697db431f674096d8d4352246d83e0d307","scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 9001 -c .storybook"},"_npmUser":{"name":"beheeracato","email":"beheer@acato.nl"},"_npmVersion":"6.9.0","description":"A library of form elements made for Vue.js","directories":{},"_nodeVersion":"8.11.3","dependencies":{"vue":"^2.6.9","imask":"^4.1.5","lodash":"^4.17.11","moment":"^2.24.0","v-click-outside":"^2.0.2","vuejs-datepicker":"^1.5.4"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^4.20.2","prettier":"^1.16.4","css-loader":"^1.0.0","vue-loader":"^15.4.2","@babel/core":"^7.3.4","babel-loader":"^8.0.5","babel-runtime":"^6.26.0","@storybook/vue":"^5.0.1","babel-preset-vue":"^2.0.2","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.17","@storybook/addon-knobs":"^5.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vue-form-elements_0.7.1_1558099004706_0.5441118286685629","host":"s3://npm-registry-packages"}},"0.8.0":{"name":"@acato/vue-form-elements","version":"0.8.0","author":{"name":"Acato B.V."},"license":"Creative Commons Attribution-NonCommercial 4.0 International License","_id":"@acato/vue-form-elements@0.8.0","maintainers":[{"name":"beheeracato","email":"beheer@acato.nl"},{"name":"marienvanoverbeek","email":"marien@riverfields.nl"},{"name":"supr3mo","email":"remo@acato.nl"},{"name":"supremo","email":"npm@remodiego.com"}],"homepage":"https://www.acato.nl/","dist":{"shasum":"156c99c2b82d9635b2df9bd156fe4bb898b94ed0","tarball":"https://registry.npmjs.org/@acato/vue-form-elements/-/vue-form-elements-0.8.0.tgz","fileCount":117,"integrity":"sha512-X67/xmB3xYnHLpcl/uDiKhUaJKjgCGgCF/1y3c1O+kZPBdWS1PUno8hb1URhhXPS27py3V3ubWqsYWmmZlnCaw==","signatures":[{"sig":"MEQCIHsmSlzJdPlSzwzUyQVZH/RTiJDUO3iByO6y9IKP6YAkAiBCCtx1LsSYnnQTHamVbb27tUk0FykxdFxrbmk4zRk9Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":92884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4oyxCRA9TVsSAnZWagAACPQP/A8qKlhizLzi7JzBCebh\nhuSGYzOorFs3gm63rdgXRxcI3JsDloNqw81vf7baRQjKizcbT2Bh15pTKc/4\nt9kf+MZCPBheCp2BhZj2AtUkAHGznAyZ/+83tabN5c1EqpegXvy/o9R+iex1\nTY0/ONlxRw08sZwT8HvLJK5D1MittoPISkO9j9AH+shic/5Y7OPhbBBx465K\nxptuMiZ99bOtgsJpec9EbXWw6XOciKXNuy5wSFHdN0KtV57QXGD9zPa0xR26\n5U4Mnp2Cem5BcOTCxhm3H6ZCA/xKDqWneJhBtN8DHsay86t5er7y5ohKiwGr\nNLWXBQe6IrOF0zfJ/ZxcHi9Al9SzgWo+L6GhKTrTiFi5GF5W0jBaG6tKStje\n3xD6j6iu0+Y53kB1nuZHC1Xcsluk9y+Cks4c7/i1KfcnUIDZMHHLE3G+vrlR\nFDfAMflsVX58R4heyRb3ZJL14HBGm/MAQY9AifQrEW3AIvN7aLvpuCf62v6+\nU59ntIuSJsPX5wxi1jWpgPPvGAQTTu/r6uX7JUCOuOyasjiDG49Kxhv6MgUy\nWcnI4a5FG+7NFHWQO8D85vcCAa4WR/URO9NVHAKAsbCPSt0Dr3jPleokC1fR\nC99/xHmI30MCVyy4J70hrOQu1rNnRE/29O1LhaaJ1vGSLsTBRhO1CXYfgH8n\nMgtX\r\n=epp8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","sass":"scss/vue-form-elements.scss","email":"info@acato.nl","gitHead":"00b038276384f62df45296935a047f8b5f323ec5","scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 9001 -c .storybook"},"_npmUser":{"name":"beheeracato","email":"beheer@acato.nl"},"_npmVersion":"6.9.0","description":"A library of form elements made for Vue.js","directories":{},"_nodeVersion":"8.11.3","dependencies":{"vue":"^2.6.9","imask":"^4.1.5","lodash":"^4.17.11","moment":"^2.24.0","v-click-outside":"^2.0.2","vuejs-datepicker":"^1.5.4"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^4.20.2","prettier":"^1.16.4","css-loader":"^1.0.0","vue-loader":"^15.4.2","@babel/core":"^7.3.4","babel-loader":"^8.0.5","babel-runtime":"^6.26.0","@storybook/vue":"^5.0.1","babel-preset-vue":"^2.0.2","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.17","@storybook/addon-knobs":"^5.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vue-form-elements_0.8.0_1558351024246_0.8032630065585957","host":"s3://npm-registry-packages"}},"0.9.0":{"name":"@acato/vue-form-elements","version":"0.9.0","author":{"name":"Acato B.V."},"license":"Creative Commons Attribution-NonCommercial 4.0 International License","_id":"@acato/vue-form-elements@0.9.0","maintainers":[{"name":"beheeracato","email":"beheer@acato.nl"},{"name":"marienvanoverbeek","email":"marien@riverfields.nl"},{"name":"supr3mo","email":"remo@acato.nl"},{"name":"supremo","email":"npm@remodiego.com"}],"homepage":"https://www.acato.nl/","dist":{"shasum":"5b45a8c262c362ea828411664fd2a1ba327051e4","tarball":"https://registry.npmjs.org/@acato/vue-form-elements/-/vue-form-elements-0.9.0.tgz","fileCount":117,"integrity":"sha512-MierYrPMNvsq0MKXvAIU7VfoaBY0rtTNl8Hs77//HSeE9aOowA5zmIMMumgwxM8AzqZPmuAUITTWC8O9XHY75w==","signatures":[{"sig":"MEUCIQDDTijMW/Xt6hZoa9qvyXzx3++WVBohfMEQuGQF2pbxWgIgU710dsUUFm6z45ptkUHO8f2wOWN2LsdU5NxnLbIjwS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVXo3CRA9TVsSAnZWagAAOr0QAJSv1HVm/h31t+T40DvR\nCGCDR6SYvzsCDvCJzMOhDZIhw74SDPGYN7UwoMLTGPin4LxyI0JRSRX5/He+\nc2sIzdzsjdyXjF0zvLTbUSO0qBs5ESUbcqcdeuVQSn1hPlIGE4bJBH69cRRm\n+A9EfpaVGiSVlBjuMhV/HvloMTs03JSX8I1dw7149CnLr5rdiC18NMCwHc/W\n6v5t/zJTC+zvOPnbGT8OhSIOqZ2T5QXoExHF3wzd7Uv0zCigqwDh5AVIuy4D\n4TozF1+8lISk8d8P+PPOrIwFqRK6n17lvtW5+zNHw1yu7B/eZQbyqoiVwVtT\n9gEmPd0z/AhzKafbSOA6KPq4ZnUkPtWQZUTDkUqmJ+5F8tX8OkCwznMxL5k/\nQY3NwdKIa6e1qrYv5z0dWnfcJSqChWsBMD9RK5HDO7nBTCq3kvcTUcSAYz2F\nyJQgSF8VH8qCiA8nCTaM9vrDy5G7UXTGVNc0RI9PojZYQhtmvG/2sPF+6RJ3\naliZZPZxofjNZc/LYWw7HvuffCNMyOe2Rqx0MaHjVP23sU0tsv2tUZ6wQiRz\nbAFw2XJqzDKTCQVGoFNZ1WoaZRFBRrc3ysQcs6sbyNmdJRbmJzzwbUSdmCba\nD0tfcA86a7aOY40w1Pj7LjzR1/RYwEhGIpn8S94aDiMS5R/YiJWclvIoa6BM\n0jR/\r\n=zxOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","sass":"scss/vue-form-elements.scss","email":"info@acato.nl","gitHead":"c7ceb9017b3c823c92fc0c3e63d9d2958ebf98dc","scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 9001 -c .storybook"},"_npmUser":{"name":"beheeracato","email":"beheer@acato.nl"},"_npmVersion":"6.10.0","description":"A library of form elements made for Vue.js","directories":{},"_nodeVersion":"12.7.0","dependencies":{"vue":"^2.6.9","imask":"^5.2.0","lodash":"^4.17.11","moment":"^2.24.0","v-click-outside":"^2.0.2","vuejs-datepicker":"^1.5.4"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^4.20.2","prettier":"^1.16.4","css-loader":"^1.0.0","vue-loader":"^15.4.2","@babel/core":"^7.3.4","babel-loader":"^8.0.5","babel-runtime":"^6.26.0","@storybook/vue":"^5.0.1","babel-preset-vue":"^2.0.2","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.17","@storybook/addon-knobs":"^5.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vue-form-elements_0.9.0_1565882934333_0.6780687550225817","host":"s3://npm-registry-packages"}},"0.9.1":{"name":"@acato/vue-form-elements","version":"0.9.1","author":{"name":"Acato B.V."},"license":"Creative Commons Attribution-NonCommercial 4.0 International License","_id":"@acato/vue-form-elements@0.9.1","maintainers":[{"name":"beheeracato","email":"beheer@acato.nl"},{"name":"marienvanoverbeek","email":"marien@riverfields.nl"},{"name":"supr3mo","email":"remo@acato.nl"},{"name":"supremo","email":"npm@remodiego.com"}],"homepage":"https://www.acato.nl/","dist":{"shasum":"df606e08bbc9fd5816d77b53aa9fe1ce17d7ae76","tarball":"https://registry.npmjs.org/@acato/vue-form-elements/-/vue-form-elements-0.9.1.tgz","fileCount":117,"integrity":"sha512-XoLbwYSkl5Vx3/PH0lWRoFjO5Yd9M8Zn+hq+UENIoEKz31in1Rl4Ra8vn3MVCWiawcSUs9kAVrmI7VwTTbhp5g==","signatures":[{"sig":"MEYCIQDSMLstBr/S/Ni4kg2cO8WQiyfVWS4HXGqph0ZP/lRadgIhAMJxQTNFdsXH/tk7MQsA4jE7oTabCeVvONzLpTbRMQo/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduqkaCRA9TVsSAnZWagAA7IsQAJqnc14ABweY8TWz/+11\ntg9DycMe1fTe8pTkSFSnYKoztcmQJfwvdvAMV46EiYGJjMH/jX4bD6HH21p7\n0BSOY+hY+CLdcLsBxN+5nMRhg3ntWxg1oduaYop15jDuMEjE53+LddT2qpWY\noAb/PF20QRUrtClVWp1BpXeU6lifZLqo7WYlj7apDkZfqlsZpw4uIzsno6cr\n+50YoqfieSjWMzDpJ5SEdx0c94MkIVFsHaYakfpvKzgvRht+FR1foC6HptIp\neHhYEiDMz8oKJHSUO/EGy8TOcSyXRxFPN7znxG7Wmidida2bma4WNqXksflK\nGaibzNEn8UA6e01IcX2laRadleGM8Ikto73q6ZzHa3w3431kbPHTHzakhMmv\n22q1ZJT7l5mff9nq+EQCGt6ikcDdW0ACo3eXA2gxmLEqbYyVurP8vuf5QbzO\n7ze0WCg0NxxXgKHu+jbVr+9XTGznzopnejNqmmP8E6tHwvXTCbhulEzNHZUJ\nTrWjMi5eOtelbcwA5hMyH7v52eeMy1GVH5t8QaodXQL2yWgCiN3MSWzYFHdO\n+sEKVY+9m2/Bfl++y9FYh1E4OXicP9WtFt88ZES2oVQAyN3FOOdo/hEOxk62\nfUknx8tV4e9qT0S+DI0VwlZiitYSh0QP77exJAJtZsNhcH671Yey7fTQjsEj\nlsP3\r\n=KIkg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","sass":"scss/vue-form-elements.scss","email":"info@acato.nl","gitHead":"c74de49f5f9c859c0f0e86ff6f36f1eb2f41c5fa","scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 9001 -c .storybook"},"_npmUser":{"name":"beheeracato","email":"beheer@acato.nl"},"_npmVersion":"6.10.0","description":"A library of form elements made for Vue.js","directories":{},"_nodeVersion":"12.7.0","dependencies":{"vue":"^2.6.9","imask":"^5.2.0","lodash":"^4.17.11","moment":"^2.24.0","v-click-outside":"^2.0.2","vuejs-datepicker":"^1.5.4"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^4.20.2","prettier":"^1.16.4","css-loader":"^1.0.0","vue-loader":"^15.4.2","@babel/core":"^7.3.4","babel-loader":"^8.0.5","babel-runtime":"^6.26.0","@storybook/vue":"^5.0.1","babel-preset-vue":"^2.0.2","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.17","@storybook/addon-knobs":"^5.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vue-form-elements_0.9.1_1572514074045_0.04910176562359858","host":"s3://npm-registry-packages"}},"0.9.2":{"name":"@acato/vue-form-elements","version":"0.9.2","author":{"name":"Acato B.V."},"license":"Creative Commons Attribution-NonCommercial 4.0 International License","_id":"@acato/vue-form-elements@0.9.2","maintainers":[{"name":"beheeracato","email":"beheer@acato.nl"},{"name":"marienvanoverbeek","email":"marien@riverfields.nl"},{"name":"supr3mo","email":"remo@acato.nl"},{"name":"supremo","email":"npm@remodiego.com"}],"homepage":"https://www.acato.nl/","dist":{"shasum":"a2df48dc77a8f14383d2c5f6617509c2aa8c98da","tarball":"https://registry.npmjs.org/@acato/vue-form-elements/-/vue-form-elements-0.9.2.tgz","fileCount":117,"integrity":"sha512-CgQQ7GCDzQpUGQqnSiE+Y2hJFcipfdDNICWWwGj+L1qv3EBHYocaX67RZTsbmJ1nbsCuNpAPs2ad9Rvs3/fjtg==","signatures":[{"sig":"MEQCIFPWMr/jwKogmeCR8qdV/FKsSgrWqhZK43agHkbl5EgvAiBt+1bpbNd6K6v5UxdINv7H6SWZhkl6xPjQmc9aZoFnhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJYSOCRA9TVsSAnZWagAAilcP/iDR0rmobEDtbe90Tk9x\npS53vsndIDxXZr9tio6IePArO2RNAl+pBIOb7lh6KUnLfbX9DsKBx9ikBZPg\ndLJwfTzKuXulWhFLQsITTQAD7uv6nWKH/LleNSfsCUs8dcOC0iISUn/TnAgg\nA7mjyJxqsYJYmMcMzHv84j7GH0MWh5e4GDE2zBA1qQOndJuhO3ddEwbQI4cD\nCh5o6j8Vg/P+/GTYUcYALsAOBlxkrKdym7zoyCmJR25BPllmrOwLdU83ZlLX\nq1g1f1yo0hZEu7pak6EB8Vk1vskXkVtmlwKCg1roU2fzOEb7Oo2el/7dHU1C\nTMcTMg2YGGrgUmcvVEYze5e4TiWz0NmCaYZWaqzGXwwUMw37UaEcXjUtCcjI\nkx7/RFNfnPT1GdC8nuZrzcBsRTOLiqRRFbzOw4YsA4o2HMqhN0LCB3lgAPHc\n8UD5ONz5i3izqkrpVJug9wgT7kYSm1U8S9Nb9QblLTaCiRjRa0cQ6yWBhsIe\neaMjtgy3dKIHN9P77SwG9rKhAiVQQqPEMTe05dH2Uob6mKRLmsz47bTnNw1z\nPBAa1YIKT1NvUJTavJMlytdl80z3GOfcZzSuSRwHoZSXbbPkmDbGfZ2HQ9Ea\nMH4A+Jx/Bdf3hDfwv/TTuO9ESUu8B2aV+mmJz1wd4ppK4ZAOOa73lANUKHkp\nuzoi\r\n=YJbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","sass":"scss/vue-form-elements.scss","email":"info@acato.nl","gitHead":"2e43ff084049ca4a57469b797f01341f0ce910fa","scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 9001 -c .storybook"},"_npmUser":{"name":"beheeracato","email":"beheer@acato.nl"},"_npmVersion":"6.13.4","description":"A library of form elements made for Vue.js","directories":{},"_nodeVersion":"12.7.0","dependencies":{"vue":"^2.6.9","imask":"^5.2.0","lodash":"^4.17.11","moment":"^2.24.0","v-click-outside":"^2.0.2","vuejs-datepicker":"^1.5.4"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^4.20.2","prettier":"^1.16.4","css-loader":"^1.0.0","vue-loader":"^15.4.2","@babel/core":"^7.3.4","babel-loader":"^8.0.5","babel-runtime":"^6.26.0","@storybook/vue":"^5.0.1","babel-preset-vue":"^2.0.2","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.17","@storybook/addon-knobs":"^5.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vue-form-elements_0.9.2_1579517070090_0.7290539503524305","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-05-17T13:16:44.655Z","modified":"2025-05-26T12:15:37.615Z","0.7.0":"2019-05-17T13:16:29.340Z","0.7.1":"2019-05-17T13:16:44.926Z","0.8.0":"2019-05-20T11:17:04.399Z","0.9.0":"2019-08-15T15:28:54.501Z","0.9.1":"2019-10-31T09:27:54.206Z","0.9.2":"2020-01-20T10:44:30.247Z"},"author":{"name":"Acato B.V."},"license":"Creative Commons Attribution-NonCommercial 4.0 International License","homepage":"https://www.acato.nl/","description":"A library of form elements made for Vue.js","maintainers":[{"email":"beheer@acato.nl","name":"beheeracato"},{"email":"paul@acato.nl","name":"paulacato"}],"readme":"# Introduction\n\nVue form elements is a set of form elements you can use in your Vue.js project. For example, you can create checkbox\ngroups, radio button groups and sliders. All these elements support Vue's form input bindings\n(https://vuejs.org/v2/guide/forms.html) so you can use v-model on them. The package comes with minimal styling.\n\n# Installation\n\n### Package installation\n\nAdd the package to your project:\n\n```\nyarn add @acato/vue-form-elements\n# or NPM:\n# npm install --save @acato/vue-form-elements\n```\n\n### Registering it to Vue.js\n\nIn your code, add the following line:\n\n```javascript\nimport Vue from 'vue';\nimport VueFormElements from '@acato/vue-form-elements';\n\nVue.use(VueFormElements, {\n    requiredLabel: '*',\n    optionalLabel: '(optional)',\n});\n```\n\nThis will add all elements from the package to your project.\nAlternatively you can add only the components you'll need:\n\n```javascript\nimport Vue from 'vue';\nimport VFESlider from '@acato/vue-form-elements/vue/elements/vfe-slider';\n\n// globally\nVue.component('vfe-slider', VFESlider);\n\n// within a component\n...\n    {\n        props: {...},\n        methods: {...},\n        ...\n        components: {\n            'vfe-slider': VFESlider,\n            ...\n        }\n    }\n...\n```\n\n### Add minimal styling\n\nSome form elements such as the (non-native) select box and autocompelete, need a minimal styling to in order to be\nusable. Import this styling in you sass:\n\n```sass\n@import '@acato/vue-form-elements/scss/vue-form-elements';\n```\n\nIf you don't want all the default styling, only include the styling for the elements you would like to include. There\nare some sass-variables available for you to easily color the elements. Please check out these variabales at\n`@acato/vue-form-elements/scss/_variables.scss`.\n\n# Basic usage\n\nFor convenience you can use the `vfe-form-input`-component (see below) to create a label and specific input in one. This\nhas some advantages as it saves time and for example the label will automatically point to the correct input using the\nlabel's for-attribute. However, it's also possible to create individual inputs and labels:\n\n### vfe-label\n\nCreates a label.\n\n##### Properties:\n\n- label `String`\n- forInput? `String`\n- required? `Boolean`\n\n##### Usage:\n\n```html\n<vfe-label label=\"Email\" for-input=\"user_email\"></vfe-label>\n```\n\n### vfe-instructions\n\nCreates an instructions text.\n\n##### Properties:\n\n- instructions `String | HTML`\n\n##### Usage:\n\n```html\n<vfe-instructions instructions=\"You can find your username in the e-mail you've received.\"></vfe-instructions>\n```\n\n### vfe-input\n\nCreates a text, number, email or password input.\n\n##### Properties:\n\n- type `\"text\" | \"number\" | \"email\" | \"password\"`,\n- name `String`\n- id? `string` (defaults to input name)\n- value? `String | Number`\n- settings? `VFEInputSettings` (default: `new VFEInputSettings()`)\n- placeholder? `String | Number`\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n- required? `Boolean`\n\n##### Usage:\n\n```html\n<vfe-input type=\"email\" name=\"user_email\" placeholder=\"example@domain.com\" v-model=\"user.email\"></vfe-input>\n```\n\n### vfe-textarea\n\nCreates a textarea.\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- value? `String`\n- placeholder? `String`\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n- required? `Boolean`\n\n##### Usage:\n\n```html\n<vfe-textarea name=\"description\" placeholder=\"Typ your text here...\" v-model=\"description\"></vfe-textarea>\n```\n\n### vfe-checkbox\n\nCreates a single checkbox.\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- value? `any` (default: `true`)\n- checked? `Boolean` (default: `false`)\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\n```html\n<vfe-checkbox name=\"newsletter\" v-model=\"user.subscribeToNewsletter\"></vfe-input>\n```\n\nor:\n\n```html\n<vfe-checkbox name=\"terms_and_conditions\" :value=\"{Object}\" v-model=\"user.acceptsTermsAndConditions\"></vfe-input>\n```\n\n### vfe-radio-button\n\nCreates a single radio button.\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- value? `any` (default: `true`)\n- checked? `Boolean` (default: `false`)\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\n```html\n<vfe-radio-button name=\"selected_option\" :value=\"{Object}\" v-model=\"user.selectedOption\"></vfe-radio-button>\n```\n\n### vfe-native-select\n\nCreates a native select (`<select/>`).\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- options `Array<any>`\n- value? `any`\n- settings? `VFESelectSettings` (default: `new VFESelectSettings()`)\n- placeholder? `String`\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\n```html\n<vfe-native-select name=\"favorite_color\" :options=\"colors\" :settings=\"settings\" v-model=\"user.favoriteColor\"></vfe-native-select>\n```\n\n```javascript\n// using an array of plain strings, resulting value will be the color name\nconst colors = ['red', 'blue', ...];\n\n// using an array of objects, resulting value will be the color id\nimport VFESelectSettings from '@acato/vue-form-elements/vue/settings/vfe-select-settings';\n\nconst colors = [{ id: 1, name: 'red'}, { id: 2, name: 'blue'}, ... ];\nconst settings = new VFESelectSettings({\n    label: 'name',\n    value: 'id',\n});\n```\n\n### vfe-select\n\nCreates a select that can easily be styled.\n\n##### Properties:\n\nSame as `fve-native-select`.\n\n##### Usage:\n\nSame as `fve-native-select` but instead use `fve-select`-tag.\n\n### vfe-checkbox-group\n\nCreates a checkbox group.\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- options `Array<any>`\n- value? `Array<any>`\n- settings? `VFECheckboxGroupSettings` (default: `new VFECheckboxGroupSettings()`)\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\n```html\n<vfe-checkbox-group name=\"cities_ive_been\" :options=\"cities\" :settings=\"settings\" v-model=\"user.citiesBeen\"></vfe-checkbox-group>\n```\n\n```javascript\n// using an array of plain strings, resulting value will be the color name\nconst cities = ['London', 'Paris', 'Berlin', ...];\n\n// using an array of objects, resulting value will be the color id\nimport VFECheckboxGroupSettings from '@acato/vue-form-elements/vue/settings/vfe-checkbox-group-settings';\n\nconst cities = [{ id: 1, name: 'London'}, { id: 2, name: 'Paris'}, { id: 2, name: 'Berlin'}, ... ];\nconst settings = new VFECheckboxGroupSettings({\n    label: 'name',\n    value: 'id',\n});\n```\n\n### vfe-radio-button-group\n\nCreates a radio button group.\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- options `Array<any>`\n- value? `any`\n- settings? `VFERadioButtonGroupSettings` (default: `new VFERadioButtonGroupSettings()`)\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\n```html\n<vfe-radio-button-group name=\"favorite_city\" :options=\"cities\" :settings=\"settings\" v-model=\"user.favoriteCity\"></vfe-radio-button-group>\n```\n\n```javascript\n// using an array of plain strings, resulting value will be the color name\nconst cities = ['London', 'Paris', 'Berlin', ...];\n\n// using an array of objects, resulting value will be the color id\nimport VFERadioButtonGroupSettings from '@acato/vue-form-elements/vue/settings/vfe-radio-button-group-settings';\n\nconst cities = [{ id: 1, name: 'London'}, { id: 2, name: 'Paris'}, { id: 2, name: 'Berlin'}, ... ];\nconst settings = new VFERadioButtonGroupSettings({\n    label: 'name',\n    value: 'id',\n});\n```\n\n### vfe-slider\n\nCreates a slider or range slider.\n\n##### Properties:\n\n- type `\"default\" | \"range\"` (default: `default`)\n- name `String`\n- id? `string` (defaults to input name)\n- value? `default slider: Number | range slider: Object{min: Number, max: Number}`\n- settings? `VFESliderSettings` (default: `new VFESliderSettings()`)\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\nDefault slider:\n\n```html\n<vfe-slider name=\"age\" :settings=\"settings\" v-model=\"user.age\"></vfe-slider>\n```\n\n```javascript\nimport VFESliderSettings from '@acato/vue-form-elements/vue/settings/vfe-slider-settings';\n\nconst settings = new VFESliderSettings({\n  min: 0,\n  max: 130,\n  step: 1,\n});\n```\n\nRange slider:\n\n```html\n<vfe-slider type=\"range\" name=\"budget\" :settings=\"settings\" v-model=\"budget\"></vfe-slider>\n```\n\n```javascript\nimport VFESliderSettings from '@acato/vue-form-elements/vue/settings/vfe-slider-settings';\n\nconst settings = new VFESliderSettings({\n  min: 0,\n  max: 10,\n  precision: 2,\n  minRange: 0.5,\n});\n```\n\n### vfe-options-slider\n\nCreates a options slider or options range slider.\n\n##### Properties:\n\n- type `\"default\" | \"range\"` (default: `default`)\n- name `String`\n- id? `string` (defaults to input name)\n- options `Array<any>`\n- value? `default slider: any | range slider: Object{min: any, max: any}`\n- settings? `VFEOptionsSliderSettings` (default: `new VFEOptionsSliderSettings()`)\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\nDefault options slider:\n\n```html\n<vfe-options-slider name=\"review\" :options=\"scores\" :settings=\"settings\" v-model=\"user.review\"></vfe-options-slider>\n```\n\n```javascript\nimport VFEOptionsSliderSettings from '@acato/vue-form-elements/vue/settings/vfe-options-slider-settings';\n\nconst scores = [\n  { score: 0, label: 'Slecht' },\n  { id: 5, label: 'Gemiddeld' },\n  { id: 10, label: 'Goed' },\n];\nconst settings = new VFEOptionsSliderSettings({\n  value: 'score',\n  orderBy: 'score',\n});\n```\n\nRange options slider:\n\n```html\n<vfe-options-slider type=\"range\" name=\"price_range\" :options=\"prices\" :settings=\"settings\" v-model=\"search.priceRange\"></vfe-options-slider>\n```\n\n```javascript\nimport VFEOptionsSliderSettings from '@acato/vue-form-elements/vue/settings/vfe-options-slider-settings';\n\nconst scores = [\n  { maxPercentage: 25, label: '$' },\n  { maxPercentage: 50, label: '$$' },\n  { maxPercentage: 75, label: '$$$' },\n  { maxPercentage: 100, label: '$$$$' },\n];\nconst settings = new VFEOptionsSliderSettings({\n  orderBy: 'maxPercentage',\n});\n```\n\n### vfe-autocomplete\n\nCreates an autocomplete form input.\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- source `VFEAutocompleteSource`\n- value? `any`\n- settings? `VFEAutocompleteSettings` (default: `new VFEAutocompleteSettings()`)\n- placeholder? `String`\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\n```html\n<vfe-autcomplete name=\"hometown\" :source=\"source\" :settings=\"settings\" v-model=\"user.hometown\"></vfe-autcomplete>\n```\n\n```javascript\nimport VFEAutocompleteSettings from '@acato/vue-form-elements/vue/settings/vfe-autocomplete-settings';\nimport VFEAutocompleteSource from '@acato/vue-form-elements/vue/helpets/vfe-autocomplete-source';\n\nconst citySearchRequest = (query) => { ... };\nconst source = new VFEAutocompleteSource(citySearchRequest, results => results.hits);\nconst settings = new VFEAutocompleteSettings({\n    label: 'name',\n    value: 'id',\n    debounce: '500',\n    limit: '10',\n    noResultsText: 'Can\\'t find city or town with that name',\n});\n```\n\n### vfe-swapbox\n\nCreates a swapbox form input consisting of two lists of options.\nThe first list being the currently selected options, and the second list the\navailable options. User can swap options from one list to the other, thus\nselecting and deselecting options.\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- options `Array<any>`\n- value? `Array<any>`\n- settings? `VFESwapboxSettings` (default: `new VFESwapboxSettings()`)\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n##### Usage:\n\n```html\n<vfe-swapbox name=\"selected_options\" :options=\"options\" :settings=\"settings\" v-model=\"selectedOptions\"></vfe-swapbox>\n```\n\n### vfe-date-picker\n\nCreates a date picker form input based on https://github.com/charliekassel/vuejs-datepicker.\nBut works with Moment.js-objects (https://momentjs.com/) instead of vanilla Date-objects.\n\n##### Properties:\n\n- name `String`\n- id? `string` (defaults to input name)\n- value? `Moment`\n- settings? `VFEDatePickerSettings` (default: `new VFEDatePickerSettings()`) *\n- hasValidationError? `Boolean` (default: `false`)\n- disabled? `Boolean` (default: `false`)\n\n* Check out https://github.com/charliekassel/vuejs-datepicker for all possible settings.\n\n##### Usage:\n\n```html\n<vfe-date-picker name=\"start_date\" :settings=\"settings\" v-model=\"startDate\"></vfe-date-picker>\n```\n\n### vfe-validation-error\n\nCreates a paragraph to show validation errors.\n\n##### Properties:\n\n- message `String`\n\n##### Usage:\n\n```html\n<vfe-validation-error message=\"Email is required\"></vfe-validation-error>\n```\n\n### vfe-form-input\n\nCreates a label + form input of the specified type.\n\n##### Properties:\n\n- type `\"text\" | \"number\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"date\" | \"time\" | \"datetime-local\" | \"month\" | \"week\" | \"textarea\" | \"checkbox\" | \"radio-button\" | \"native-select\" | \"select\" | \"checkbox-group\" | \"radio-button-group\" | \"slider\" | \"range-slider\" | \"options-slider\" | \"range-options-slider\" | \"autocomplete\" | \"swapbox\" | \"date-picker\"`,\n- label `String`\n- instructions? `String | HTML`\n- name? `String` (by default derived from label (snake case): \"My form input\" becomes 'my_form_input')\n- id? `String` (defaults to input name)\n- validationError? `String`\n- value? `any`\n- placeholder? `String | Number`\n- disabled? `Boolean` (default: `false`)\n- required? `Boolean`\n- checked? `Boolean`\n- options? `Array<any>`\n- source? `VFEAutocompleteSource`\n- settings? `VFEInputSettings | VFESelectSettings | VFERadioButtonGroupSettings | VFECheckboxGroupSettings | VFESliderSettings | VFEOptionsSliderSettings | VFEAutocompleteSettings | VFESwapboxSettings | VFEDatePickerSettings`\n\n##### Usage:\n\n```html\n<vfe-form-input type=\"email\" label=\"Email\" placeholder=\"example@domain.com\" label=\"Email is required\"></vfe-form-input>\n```\n\n```html\n<vfe-form-input type=\"select\" label=\"Favorite color\" placeholder=\"-- select your favorite color --\" :options=\"colors\" :settings=\"settings\"></vfe-form-input>\n```\n\n```html\n<vfe-form-input type=\"autocomplete\" label=\"Hometown\" :source=\"source\" :settings=\"settings\"></vfe-form-input>\n```\n","readmeFilename":"readme.md"}