{"_id":"@ax-jstern/vue-form-json-schema","_rev":"1-cc1caa9b1616ad80c732fea83201a29d","name":"@ax-jstern/vue-form-json-schema","dist-tags":{"latest":"2.9.7"},"versions":{"2.9.6":{"name":"@ax-jstern/vue-form-json-schema","packageManager":"yarn@3.5.0","version":"2.9.6","description":"Vue package for using forms with JSON schema","main":"dist/vue-form-json-schema.umd.js","exports":{"import":"dist/esm/index.mjs","require":"dist/umd/index.cjs"},"type":"module","scripts":{"build:esm":"rollup -c rollup.esm.config.mjs","build:umd":"rollup -c rollup.umd.config.mjs","build":"npx npm-run-all \"build:* -- --environment NODE_ENV:production\"","dev":"npx npm-run-all \"build:* -- --environment NODE_ENV:development\"","watch":"npx npm-run-all --parallel \"build:* -- --environment NODE_ENV:development --watch\"","prepare":"npm run build","lint":"eslint src","prepublish":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Tobias Järvelöv","email":"tobias@jarvelov.se"},"license":"MIT","dependencies":{"ajv":"^6.12.6","lodash-es":"^4.17.21"},"devDependencies":{"@babel/cli":"^7.21.0","@babel/core":"^7.21.3","@babel/eslint-parser":"^7.21.3","@babel/plugin-transform-runtime":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/runtime":"^7.21.0","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-json":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@types/babel__core":"^7.20.0","babel-plugin-add-import-extension":"^1.6.0","babel-plugin-lodash":"^3.3.4","eslint":"^8.36.0","eslint-config-airbnb-base":"^15.0.0","eslint-plugin-import":"^2.27.5","npm-run-all2":"^6.0.4","rollup":"^3.20.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-node-externals":"^5.1.2","vue":"^2.6.14"},"peerDependencies":{"vue":"^2.x"},"gitHead":"b210ab95a06c27fb73e96853405e6fe9e0c008ca","_id":"@ax-jstern/vue-form-json-schema@2.9.6","_nodeVersion":"18.9.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-w02JtQuC1+GT7CypUPOdMUK4UJ33Drfr7h08ICRKy8aVr6apiCrKopO3EJQ6IFpFRUs3clhSpH9KDdo1coIv3A==","shasum":"e51e749ee3afaeda8cefff68064f1f9e38224254","tarball":"https://registry.npmjs.org/@ax-jstern/vue-form-json-schema/-/vue-form-json-schema-2.9.6.tgz","fileCount":181,"unpackedSize":3930160,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC96UJ21CY/edJGIide+gJX+z0i8xozsagmwp9FskvPYAiEA+tgSDebtd9uj8ox4Odb8R6aj3hp6mJanVK1biUT7xfQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGwEbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7jBAAhB8UGMPhG974BryD75PDkMsrgn9hxoptsZkSQaEikubjZKdL\r\n70HAQOanswrK41Eemd8QNKz5VQB19jjje+S0XRu3xw87PiNn3cNXnZk2xETz\r\n6oJ9tvhBYBMHD77b46caYcMluE9IYc5H4MAWtK4loNKHtCU5XKaf+IguEb4N\r\nncRkBbEtlcusllTW9mSKu96RIyctzgz7nSRij73HZ7s3S4Zt8b/vLxaELuDh\r\nnHQT5ptiSkLaSU6dORKusLA6p7JksRKJs7Tth4TnVPQsdYYUs8RJB7Zd5R61\r\ndPhQ8HSgGA4LCg4vJgHFHohow1ify9T8MLORAeCmZq13G5NOWLNt5cyRzxvG\r\nmFYym6NVo+23Bwy+o6njMQmflBR6AZoGsWTDNgKwE8a9ijkvmujkAD5+Y6aV\r\nTJs2BW/xtvDHH+cGHODOAf82uuLEXJlWm+kmwOh+7APPLcl17YXEU1GTqsjk\r\no8BAkxA8hooo1Y5s23Pa5zBn1UdyvzFobjHHtS9cnpZ8n8aDIWBAw5UpIy7v\r\nfc79u8J6gdJGlQM/3yz2MCjrjnT8f1gltz8q+Zs77jHYqj5qmO0rfRAZLsXj\r\na9G8MfmhO1zwbdwJKk3yqWK6It5k+j4qBmieCli2Fx7zlqdSh/e1UqAgI9Ay\r\nQEF2ujFD1I1KQXfxhZhodaLpeDG+NAJWu4M=\r\n=mJ5J\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ax-jstern","email":"jeffrey.stern@automox.com"},"directories":{},"maintainers":[{"name":"ax-jstern","email":"jeffrey.stern@automox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-form-json-schema_2.9.6_1679491355392_0.6485392767097216"},"_hasShrinkwrap":false},"2.9.7":{"name":"@ax-jstern/vue-form-json-schema","packageManager":"yarn@3.5.0","version":"2.9.7","description":"Vue package for using forms with JSON schema","main":"dist/vue-form-json-schema.umd.js","exports":{"import":"./dist/esm/index.mjs","require":"./dist/umd/index.cjs"},"type":"module","scripts":{"build:esm":"rollup -c rollup.esm.config.mjs","build:umd":"rollup -c rollup.umd.config.mjs","build":"npx npm-run-all \"build:* -- --environment NODE_ENV:production\"","dev":"npx npm-run-all \"build:* -- --environment NODE_ENV:development\"","watch":"npx npm-run-all --parallel \"build:* -- --environment NODE_ENV:development --watch\"","prepare":"npm run build","lint":"eslint src","prepublish":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Tobias Järvelöv","email":"tobias@jarvelov.se"},"license":"MIT","dependencies":{"ajv":"^6.12.6","lodash-es":"^4.17.21"},"devDependencies":{"@babel/cli":"^7.21.0","@babel/core":"^7.21.3","@babel/eslint-parser":"^7.21.3","@babel/plugin-transform-runtime":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/runtime":"^7.21.0","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-json":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@types/babel__core":"^7.20.0","babel-plugin-add-import-extension":"^1.6.0","babel-plugin-lodash":"^3.3.4","eslint":"^8.36.0","eslint-config-airbnb-base":"^15.0.0","eslint-plugin-import":"^2.27.5","npm-run-all2":"^6.0.4","rollup":"^3.20.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-node-externals":"^5.1.2","vue":"^2.6.14"},"peerDependencies":{"vue":"^2.x"},"gitHead":"1c8c3d8ac251e9df0114ddf7162c736ba03f993c","_id":"@ax-jstern/vue-form-json-schema@2.9.7","_nodeVersion":"18.9.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-YgkIL1cBTHincGjOv0Xl2H1gKeOyckPomCEU51MQx2LT5HbVOVj7NLCHSoL9jQD+1uNpU66fpxK2DNqqpq5TNw==","shasum":"11ee4853c8ad19020e2ccfa26186230551636ee9","tarball":"https://registry.npmjs.org/@ax-jstern/vue-form-json-schema/-/vue-form-json-schema-2.9.7.tgz","fileCount":181,"unpackedSize":3930164,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTCO22VUkBUi4gw/SNRAJ2IhOl2DNvKhxSXvDQITIGCAiEApmVCd501mdHPpxPPjRedZ6Fw2yznUuelzekTxevaNYY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGyNqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjmQ/8D9BDfyhQ3lLnbAL6oOYf7Ppk1hpSBRdKK4G5HvFGjzT82Q/B\r\n2d3YLI60hvVydks7Z5yPTXIC1Fh2qkuoW5FpXObjAnb0gwXTR+JWF00JWPqm\r\nnAbW7J3w8nCI0wO0s5Y5gHjVUyQB7Q5oBsi8w4tYQBlc4YG8Jv0ZnTUOU2Yj\r\nJhmeqC/KSYv7aJvafwXZHWTtrDihxWmn/1vaezqaG3RIznam1Ff1+cS8SF78\r\n/F9m8xyt8uLtfsfCvrpX1hOsSu24ukUUYKC+4Xx3wx/lqJBRF37hFL6tD0JL\r\n4CGt2FEqy1gIP9Q+c+ugx/I2Bq+e/8UPgpAhMGoi4gBMWNmKAK+KtSvG5ZUw\r\nT2V5rG8mly5R9ex1KAC5VbRL9twuciGfzHuv35hrC8tJMUm1yrdGrf/pquSA\r\nkxEynJr318C5U8H8TZ6EN7fGsaMki3Is1NSz3/U5pX0opKLn16ZvziQ/dBP1\r\norCF5l4SQQ6JWGpnP4yWN7pgOcIPz1AzG9WHYWLOs3+hQDeYRBugP4Oau4Ss\r\nd7doUL+kp8M+1aL0Y/ef0VDzTE3m+aE1478TCRa73JaQa8BMORzlJJ33bo7M\r\nBIw03Zgy1ZFUN91YEzPJrxgxGD+CZJ86cIIxSldxjtfvm08XB4DRQR6NbQuE\r\nxiDxVaxSqgxy6fPyaSZvUGVo9m7hZy0Fgp4=\r\n=7PvP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ax-jstern","email":"jeffrey.stern@automox.com"},"directories":{},"maintainers":[{"name":"ax-jstern","email":"jeffrey.stern@automox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-form-json-schema_2.9.7_1679500138547_0.04732647257900058"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-22T13:22:35.323Z","2.9.6":"2023-03-22T13:22:35.712Z","modified":"2023-03-22T15:48:58.955Z","2.9.7":"2023-03-22T15:48:58.759Z"},"maintainers":[{"name":"ax-jstern","email":"jeffrey.stern@automox.com"}],"description":"Vue package for using forms with JSON schema","author":{"name":"Tobias Järvelöv","email":"tobias@jarvelov.se"},"license":"MIT","readme":"# TODO: This readme is out of date and needs updated.\n\n# Vue Form JSON Schema\n\n> A [JSON schema](https://json-schema.org) based form generator, bring your components!\n\n##### Use any Vue component or HTML element!\n\nThere are *no prebuilt components* for you to puzzle your form together with. Instead you can use any component or element which emits an event, custom or native.\n\n> Note that essentially all Vue components that uses `v-model` emits an `input` (or similar) event. [See Vue's guide for more info](https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events)\n\n## Installation\n\n### Upgrading from v1? Check out the [v2 release notes](https://github.com/jarvelov/vue-form-json-schema/releases/tag/v2.0.0) to see if and how migration affects you.\n\nInstall from npm\n\n`npm install vue-form-json-schema`\n\nImport to your app\n\n```js\nimport Vue from 'vue';\nimport VueFormJsonSchema from 'vue-form-json-schema';\n\nVue.component('vue-form-json-schema', VueFormJsonSchema);\n```\n\n> Note if you're not using Webpack / Rollup and want to use the ESM version you need to import VueFormJsonSchema like this:\n\n```js\nimport VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js';\n```\n\nCheck out the demos or see a minimal example in the [usage instructions](#usage) to get started.\n\n### UMD\n\n> If you're using the UMD version you can find more examples in the `examples` folder of the [github repo](https://github.com/jarvelov/vue-form-json-schema/tree/master/examples) and the [UMD demo below](#umd-demos).\n\nIf you want to use `vue-form-json-schema` directly in a browser you can do so by using the UMD version. The UMD version autoinstalls the `vue-form-json-schema` component if Vue is found on the window. The entire module is also available on `window.VueFormJsonSchema` where the named exports such as for example `vfjsFieldMixin` can be accessed.\n\n#### Hosted by unkpg\n\n`<script src=\"https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js\"></script>`\n\nYou can substite `vue-form-json-schema@latest` to a fixed version, such as `vue-form-json-schema@2.3.0`\n\n#### Installed from npm\n\n`<script src=\"../node_modules/dist/vue-form-json-schema.umd.js\"></script>`\n\n## Demo\n\n> Note that all demos use Bootstrap styling, but no styling is included in this package and it is up to you what styles should be used.\n\n### [Minimal demo](https://py6611pr9m.codesandbox.io)\n\nThe least amount of configuration to render an `input` element.\n\n### [Nested UI demo](https://882w4v374l.codesandbox.io)\n\nUsing Bootstrap classes to show how layout can be different for devices with different screen sizes.\nIn this example two input fields will be wrapped inside a div with `col-12 col-sm-6` classes.\nTry resizing your browser window too see it in action.\n\n### [Conditional visibility and Animation demo](https://k0q8wk946o.codesandbox.io/)\n\nSometimes a field should only be shown if a condition is met. Uses `<transition>` to provide animation.\n\n### [Vue components demo](https://z549j1vxx.codesandbox.io)\n\nSee how to use your own or third party Vue components in `vue-form-json-schema`.\n\n### [Vue async loading of form](https://2p51q8q14y.codesandbox.io)\n\nLoading the form from a backend? Check out this example.\n\n### [Registration form with validation](https://4rykx7jj19.codesandbox.io)\n\nA more complete example with validation and error messages\n\n### [Registration form example with nested properties](https://nxn8y.codesandbox.io/)\n\nThe registration form above where the form model keys are nested under another key\n\n### UMD demos\n\nAll the examples above are replicated using the UMD version in the `examples` folder of this repo.\n\n[Online version of the first demo](https://jsfiddle.net/jarvelov/ewg6dfqL/)\n\n## Features\n\n* Supports any HTML element or Vue component\n* Small (`32K` uncompressed, `6.5K` gzipped)\n* Standardized [JSON schema](json-schema.org) for annotation and validation (by [Ajv](https://github.com/epoberezkin/ajv))\n* Layout is independent from data structure\n\n## Documentation\n\n[Gitbook](https://jarvelov.gitbook.io/vue-form-json-schema/)\n\n## Usage\n\n### Basic example with one field\n\n>For using the UMD version, check out the `examples` folder where all the demos above are replicated using the UMD version\n\n[See demo](https://codesandbox.io/s/py6611pr9m)\n\n```js\n<template>\n    <vue-form-json-schema\n      v-model=\"model\"\n      :schema=\"schema\"\n      :ui-schema=\"uiSchema\"\n    >\n  </vue-form-json-schema>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        // An object which holds the form values\n        model: {},\n        // A valid JSON Schema object\n        schema: {\n          type: 'object',\n          properties: {\n            firstName: {\n              type: 'string',\n            },\n          },\n        },\n        // Array of HTML elements or Vue components\n        uiSchema: [{\n          component: 'input',\n          model: 'firstName',\n          // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)\n          fieldOptions: {\n            class: ['form-control'],\n            on: ['input'],\n            attrs: {\n              placeholder: 'Please enter your first name',\n            },\n          },\n        }],\n      };\n    }\n  };\n</script>\n```\n\n### Dependencies\n\n#### Ajv\nFor form validation using [JSON Schema](http://json-schema.org/) and internal validation\n\n#### Lodash\n`get`, `set` and `merge` are used throughout the package.\nBundle size is very important though and is always considered and so we heavily strip down lodash to only include the absolute necessities\n\n#### Vue\n\nTested with v2.5.9 but will probably work on any version >= v2.4.0\n\n### TODO\n\n* Write tests\n* ~~Add i18n support~~\n  * Added in 1.15.2 with `options.ajv.locale` setting\n* ~~Write this README~~\n* Use Ajv internally to validate:\n  * `vfs-global` prop `ui-schema`\n  * `vfs-component` prop `ui-schema`\n* ~~Write docs~~\n* ~~Publish with Gitbook~~\n","readmeFilename":"README.md"}