{"_id":"@boite-beet/ui-kit","_rev":"9-f4e72060c857e265ef9aa5a5627621d1","name":"@boite-beet/ui-kit","dist-tags":{"latest":"1.2.4"},"versions":{"1.0.1":{"name":"@boite-beet/ui-kit","version":"1.0.1","description":"Beet's UI development kit","main":"dist/beet-ui-kit.js","author":{"name":"Nicolas Udy","email":"nudy@boitebeet.com"},"license":"MIT","scripts":{"build":"rollup -c","start":"rollup -cw","prepack":"rollup -c","deploy":"yarn version && npm publish --access public"},"dependencies":{"sanitize-html":"^2.5.2","vue":"^2.6.14"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.0","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-node-resolve":"^13.0.6","@vue/compiler-sfc":"^3.2.20","eslint":"^8.0.1","eslint-config-udyux":"^2.2.4","eslint-plugin-vue":"^7.19.1","node-sass":"^6.0.1","postcss":"^8.3.9","postcss-custom-media":"^8.0.0","prettier":"^2.4.1","rollup":"^2.58.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^5.1.9","sass":"^1.43.2","vue-template-compiler":"^2.6.14"},"gitHead":"8a5128330b54f4d942b0ecbc6bf692d0ad523cc8","_id":"@boite-beet/ui-kit@1.0.1","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-C6M3CVXsPpzvm/Lfvap2H9nDeLUKQEWXx+Q+LzcP5d4Z/mHa8Xs3nkqtZGi2jRSBM1Wpb47n31U+BuOj3pa5OA==","shasum":"7abd155a241aad08bbbec5baf221fb4d829c9712","tarball":"https://registry.npmjs.org/@boite-beet/ui-kit/-/ui-kit-1.0.1.tgz","fileCount":24,"unpackedSize":23267,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfjzeARmKnnDlK70u+AabnESTGMHkmUBoQlLEJl2gKUwIgTndVVGx53qJ+/gcIPakH14+c5lr/+TvSxG/aAtLpqMM="}]},"_npmUser":{"name":"udyux","email":"dev@udy.io"},"directories":{},"maintainers":[{"name":"udyux","email":"dev@udy.io"},{"name":"boitebeet","email":"developer@boitebeet.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-kit_1.0.1_1634746869742_0.9078802482582786"},"_hasShrinkwrap":false},"1.1.0":{"name":"@boite-beet/ui-kit","version":"1.1.0","description":"Beet's UI development kit","main":"dist/beet-ui-kit.js","author":{"name":"Nicolas Udy","email":"nudy@boitebeet.com"},"license":"MIT","scripts":{"build":"rollup -c","start":"rollup -cw","prepack":"rollup -c","deploy":"yarn version && npm publish --access public"},"dependencies":{"sanitize-html":"^2.5.2","vue":"^2.6.14"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.0","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-node-resolve":"^13.0.6","@vue/compiler-sfc":"^3.2.20","eslint":"^8.0.1","eslint-config-udyux":"^2.2.4","eslint-plugin-vue":"^7.19.1","node-sass":"^6.0.1","postcss":"^8.3.9","postcss-custom-media":"^8.0.0","prettier":"^2.4.1","rollup":"^2.58.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^5.1.9","sass":"^1.43.2","vue-template-compiler":"^2.6.14"},"_id":"@boite-beet/ui-kit@1.1.0","dist":{"shasum":"f82de3b5175c9f3eca8d58affb3c62f55c02fb01","integrity":"sha512-0pdpj8VVn41CyQuuq9uGtasMoR//6ViYfUAbkCV3UhqfcqM+HQf7/TcwRQ1wbquSgvXSEp4W6jwtbLqPQjYXqA==","tarball":"https://registry.npmjs.org/@boite-beet/ui-kit/-/ui-kit-1.1.0.tgz","fileCount":32,"unpackedSize":23267,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2t9MpJayKeK4tM7q0zYbZNIgZwfcC02KYYsbBWgRnPAiAkIDxz0xCXbkzXo2j5bv9MXmiLjEApwsJsN/TGQ9mevg=="}]},"_npmUser":{"name":"udyux","email":"dev@udy.io"},"directories":{},"maintainers":[{"name":"udyux","email":"dev@udy.io"},{"name":"boitebeet","email":"developer@boitebeet.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-kit_1.1.0_1634762962042_0.5737288856097424"},"_hasShrinkwrap":false},"1.1.1":{"name":"@boite-beet/ui-kit","version":"1.1.1","description":"Beet's UI development kit","main":"dist/beet-ui-kit.js","author":{"name":"Nicolas Udy","email":"nudy@boitebeet.com"},"license":"MIT","scripts":{"build":"rollup -c","start":"rollup -cw","prepack":"rollup -c","deploy":"yarn version && npm publish --access public"},"dependencies":{"sanitize-html":"^2.5.2","vue":"^2.6.14"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.0","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-node-resolve":"^13.0.6","@vue/compiler-sfc":"^3.2.20","eslint":"^8.0.1","eslint-config-udyux":"^2.2.4","eslint-plugin-vue":"^7.19.1","node-sass":"^6.0.1","postcss":"^8.3.9","postcss-custom-media":"^8.0.0","prettier":"^2.4.1","rollup":"^2.58.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^5.1.9","sass":"^1.43.2","vue-template-compiler":"^2.6.14"},"_id":"@boite-beet/ui-kit@1.1.1","dist":{"shasum":"a78bce0ab0e0673156e1766bea2c9f49b68fea6b","integrity":"sha512-HOsfstBsyTV5ALaTRf2Tb1kXSobBm1yQNW9EmX+wwa+28zlRIAUVc2rKmI93tJdAcXhJuc1mlxtrGKNjTxoUFA==","tarball":"https://registry.npmjs.org/@boite-beet/ui-kit/-/ui-kit-1.1.1.tgz","fileCount":40,"unpackedSize":31382,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbDF0MnfXHXseHaprFd9bflxdgJKQFrHi7aF34UnwjNAiAHDcfNsB9VsP6/6f53mtHZFW70Xmoo9ehXX+ySlNozMw=="}]},"_npmUser":{"name":"udyux","email":"dev@udy.io"},"directories":{},"maintainers":[{"name":"udyux","email":"dev@udy.io"},{"name":"boitebeet","email":"developer@boitebeet.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-kit_1.1.1_1634763241919_0.007039130079363742"},"_hasShrinkwrap":false},"1.2.1":{"name":"@boite-beet/ui-kit","version":"1.2.1","description":"Beet's UI development kit","main":"dist/beet-ui-kit.js","author":{"name":"Nicolas Udy","email":"nudy@boitebeet.com"},"license":"MIT","scripts":{"build":"rollup -c","start":"rollup -cw","prepack":"rollup -c","deploy":"yarn version && npm publish --access public"},"dependencies":{"sanitize-html":"^2.5.2","vue":"^2.6.14"},"peerDependencies":{"postcss":"^8.3.11","postcss-custom-media":"^8.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.0","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-node-resolve":"^13.0.6","@vue/compiler-sfc":"^3.2.20","eslint":"^8.0.1","eslint-config-udyux":"^2.2.4","eslint-plugin-vue":"^7.19.1","node-sass":"^6.0.1","prettier":"^2.4.1","rollup":"^2.58.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^5.1.9","sass":"^1.43.2","vue-template-compiler":"^2.6.14"},"gitHead":"0988e6df5d7d5230cd8e762d6e3b3049b1d89cc2","_id":"@boite-beet/ui-kit@1.2.1","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-M+wJRwNOWCdP14TaFccA9OIoPi4o0Kmra0x9HBxTIfk1IOqJvkJSvDfxkE6fCZEkAzdM8RJVZSWVpk0TmNhu/A==","shasum":"15fc521762209e009f7c646d8a550239c2397b4e","tarball":"https://registry.npmjs.org/@boite-beet/ui-kit/-/ui-kit-1.2.1.tgz","fileCount":43,"unpackedSize":45231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZYHEKczx5+XgqMykOssAt41PmFztnR5hDzw7A0y5I/QIgJWaZIe8ChlOUQ/UL/khRbG9i6so4gJKw2IXNhRiHTkQ="}]},"_npmUser":{"name":"udyux","email":"dev@udy.io"},"directories":{},"maintainers":[{"name":"udyux","email":"dev@udy.io"},{"name":"boitebeet","email":"developer@boitebeet.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-kit_1.2.1_1636130180889_0.6334921759667358"},"_hasShrinkwrap":false},"1.2.2":{"name":"@boite-beet/ui-kit","version":"1.2.2","description":"Beet's UI development kit","main":"dist/beet-ui-kit.js","author":{"name":"Nicolas Udy","email":"nudy@boitebeet.com"},"license":"MIT","repository":{"type":"git","url":"git+https://bitbucket.org/boitebeet/beet-ui-kit.git"},"scripts":{"build":"rollup -c","start":"rollup -cw","prepack":"rollup -c","deploy":"yarn version && npm publish --access public"},"dependencies":{"lodash.pick":"^4.4.0","sanitize-html":"^2.5.2","vue":"^2.6.14"},"peerDependencies":{"postcss":"^8.3.11","postcss-custom-media":"^8.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.0","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-node-resolve":"^13.0.6","@vue/compiler-sfc":"^3.2.20","eslint":"^8.0.1","eslint-config-udyux":"^2.2.4","eslint-plugin-vue":"^7.19.1","node-sass":"^6.0.1","prettier":"^2.4.1","rollup":"^2.58.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^5.1.9","sass":"^1.43.2","stylelint":"^13","stylelint-config-udyux":"^4.1.1","vue-template-compiler":"^2.6.14"},"gitHead":"63721374898221fc58039edea9813f399f2d561a","bugs":{"url":"https://bitbucket.org/boitebeet/beet-ui-kit/issues"},"homepage":"https://bitbucket.org/boitebeet/beet-ui-kit#readme","_id":"@boite-beet/ui-kit@1.2.2","_nodeVersion":"14.18.1","_npmVersion":"8.1.3","dist":{"integrity":"sha512-kcUiLGNURvIdjGNPCHGGCOQJ8ICWqkLbDF2Q5ZBc0zDTOLTalPv/jXJ00h0UKwKRfVfKyQ6cqx+b5ZF7gsalug==","shasum":"0543cabbcb63a0681a95bd65fba2e179284ed02e","tarball":"https://registry.npmjs.org/@boite-beet/ui-kit/-/ui-kit-1.2.2.tgz","fileCount":46,"unpackedSize":65925,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqFytoow+z0eOL9koNoIhxBiaJ5lo0JdvUpJsinirmtAiBsPLKY+Oz1JhPqDXcFheQkHk1mVxNARhljpSfhI7rvXw=="}]},"_npmUser":{"name":"udyux","email":"dev@udy.io"},"directories":{},"maintainers":[{"name":"potvinme","email":"potvin.me@gmail.com"},{"name":"udyux","email":"dev@udy.io"},{"name":"boitebeet","email":"developer@boitebeet.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-kit_1.2.2_1636960126305_0.3035682402765152"},"_hasShrinkwrap":false},"1.2.3":{"name":"@boite-beet/ui-kit","version":"1.2.3","description":"Beet's UI development kit","main":"dist/beet-ui-kit.js","author":{"name":"Nicolas Udy","email":"nudy@boitebeet.com"},"license":"MIT","repository":{"type":"git","url":"git+https://bitbucket.org/boitebeet/beet-ui-kit.git"},"scripts":{"build":"rollup -c","start":"rollup -cw","prepack":"rollup -c","deploy":"yarn version && npm publish --access public"},"dependencies":{"lodash.pick":"^4.4.0","sanitize-html":"^2.5.2","vue":"^2.6.14"},"peerDependencies":{"postcss":"^8.3.11","postcss-custom-media":"^8.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.0","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-node-resolve":"^13.0.6","@vue/compiler-sfc":"^3.2.20","eslint":"^8.0.1","eslint-config-udyux":"^2.2.4","eslint-plugin-vue":"^7.19.1","prettier":"^2.4.1","rollup":"^2.58.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^5.1.9","sass":"^1.26.5","stylelint":"^13","stylelint-config-udyux":"^4.1.1","vue-template-compiler":"^2.6.14"},"gitHead":"2d0205d7e4e5674b40067d2e343a52f7751f8288","bugs":{"url":"https://bitbucket.org/boitebeet/beet-ui-kit/issues"},"homepage":"https://bitbucket.org/boitebeet/beet-ui-kit#readme","_id":"@boite-beet/ui-kit@1.2.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-GYFyU1M6BbSI1wXp1QTSjrQ/12xMHtl5b1LDvw9gHU17/rSe6TjzSsSN74bF+2tYVqnHFEy0+4zHQdze1vmcsg==","shasum":"409b2672981ee522ad2cc4ac1035295a25f1e2c8","tarball":"https://registry.npmjs.org/@boite-beet/ui-kit/-/ui-kit-1.2.3.tgz","fileCount":46,"unpackedSize":67195,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFFwPDcvj5cXgK6UZe9yg/7YoBKHjcl4hZBus9Yg6SO2AiBK8y9+hwoCBa/dd1U+AmjIli6eA2REheMqbjNz3CCfLA=="}]},"_npmUser":{"name":"udyux","email":"dev@udy.io"},"directories":{},"maintainers":[{"name":"potvinme","email":"potvin.me@gmail.com"},{"name":"udyux","email":"dev@udy.io"},{"name":"boitebeet","email":"developer@boitebeet.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-kit_1.2.3_1636999429328_0.7090182193651946"},"_hasShrinkwrap":false},"1.2.4":{"name":"@boite-beet/ui-kit","version":"1.2.4","description":"Beet's UI development kit","main":"dist/beet-ui-kit.js","author":{"name":"Nicolas Udy","email":"nudy@boitebeet.com"},"license":"MIT","repository":{"type":"git","url":"git+https://bitbucket.org/boitebeet/beet-ui-kit.git"},"scripts":{"build":"rollup -c","start":"rollup -cw","prepack":"rollup -c","deploy":"yarn version && npm publish --access public"},"dependencies":{"lodash.pick":"^4.4.0","sanitize-html":"^2.5.2","vue":"^2.6.14"},"peerDependencies":{"postcss":"^7.0.0","postcss-custom-media":"^7.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.0","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-node-resolve":"^13.0.6","@vue/compiler-sfc":"^3.2.20","eslint":"^8.0.1","eslint-config-udyux":"^2.2.4","eslint-plugin-vue":"^7.19.1","prettier":"^2.4.1","rollup":"^2.58.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^5.1.9","sass":"^1.26.5","stylelint":"^13","stylelint-config-udyux":"^4.1.1","vue-template-compiler":"^2.6.14"},"gitHead":"0d6cbf538198355f5ca50c64ac1265a9faf47b3b","bugs":{"url":"https://bitbucket.org/boitebeet/beet-ui-kit/issues"},"homepage":"https://bitbucket.org/boitebeet/beet-ui-kit#readme","_id":"@boite-beet/ui-kit@1.2.4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-WN/SrpWm6nva5ZStr7hkWxOyF7kI+sBU0kvOi7E5yBtcsTQXGqbKSeaDqmmjeyes2MHksBkodayQiTsHQuOpBw==","shasum":"e25548688dbd21a401a432b8fe7077223d81934c","tarball":"https://registry.npmjs.org/@boite-beet/ui-kit/-/ui-kit-1.2.4.tgz","fileCount":46,"unpackedSize":67194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhkqGFCRA9TVsSAnZWagAA+VoP/2Jav7dL823bVMKTgfFL\ngCGzS7KQOA+ZXidnYv9CUE0+I9Lm/RQ2o2H8q7GATWfVhhcVQ3Y+oAjKdlh+\nf5kVBCqmnKz/a9W3Ge6YXg1OH3efA0YwhH4Eq0ydTpu4sdaWfMBVJ5vEHD+Q\nrKlBWEiZOnWP4WYNatW97pTD8x9ErTdJXi87SyHFKoXGHMV+SiU0RUuUU5pO\nfuDxlpJqxn/e7BQ4eqPeb1cHggWFZQxtJ2giPs1dUINfD3A8WNmyu21x93wj\nzFgd3k7ea3Lrsy/k7m0OM8ddGVnfJunxT1Xo9z3cOsmKWfRAJmb1n9TjK92z\nnujD3EAo4RkrjQK0qNL6pe0fIcANgKz35L20939Hlk4JOeS2KyxnydDxvxec\njTgfIYXQujTLPmuM6brC+qs5piGoEm5qak8QkesbTVOu7RQEPvXnLQ9v87Eu\nkZlkT7Zlt544LAWsLt1LkiTvJHle/B4HbJpFqYmFw9lUj9UFRf4a7gtDV2GQ\neAjKCOl1S9moTx1S3Y7fol9Tc2End0ZdPcg0egJXMUo1tNghRiWgZToeSpdq\ncyuCm3BQTdslqian1H0sEZYwWT22bvs0K086IzrRWb9szZcuiWo9hNhvUWGo\nZQwRAfh9Z74X/N9f/PyfvvBZH02qoarl4oVmt7AVToaDlkVe3gOY12GHblaG\n02LS\r\n=h2zW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChS7FpgYMWn/8nmXuFNyKkzyZaXsTFYw3QQJGRNJpkvgIgaADCju1XtZwyAXf2aazbbvphw/IJsnwevfAPFya/Tio="}]},"_npmUser":{"name":"udyux","email":"dev@udy.io"},"directories":{},"maintainers":[{"name":"potvinme","email":"potvin.me@gmail.com"},{"name":"udyux","email":"dev@udy.io"},{"name":"boitebeet","email":"developer@boitebeet.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-kit_1.2.4_1636999557034_0.9122813842433211"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-20T16:21:09.705Z","1.0.1":"2021-10-20T16:21:09.871Z","modified":"2022-04-04T19:59:17.954Z","1.1.0":"2021-10-20T20:49:22.197Z","1.1.1":"2021-10-20T20:54:02.100Z","1.2.1":"2021-11-05T16:36:21.055Z","1.2.2":"2021-11-15T07:08:46.486Z","1.2.3":"2021-11-15T18:03:49.510Z","1.2.4":"2021-11-15T18:05:57.222Z"},"maintainers":[{"email":"potvin.me@gmail.com","name":"potvinme"},{"email":"developer@boitebeet.com","name":"boitebeet"}],"description":"Beet's UI development kit","author":{"name":"Nicolas Udy","email":"nudy@boitebeet.com"},"license":"MIT","readme":"# BEET UI Kit\n\n> Beet's Vue UI development kit and component library\n\n## Installation\n\nIn an existing project, open a command line at the root level and run:\n\n```shell\nyarn add @boite-beet/ui-kit\n```\n\nThen, in `src/main.js` initialize through Vue's plugin api:\n\n```javascript\n// src/main.js\nimport BeetUI from '@boite-beet/ui-kit'\n\nVue.use(BeetUI)\n```\n\nBy importing the library's styles before your own, you ensure that any overridden selectors will take precedence. In theory you can import styles from any script, but it should be noted that in our case this means they will be injected after your own styles and may override your selectors.\n\n## Basic Usage\n\nThere are two main resources you can import to your project: components and styles. All available components are exposed by the package's main export whereas all Sass stylesheets can be imported from the `styles` subfolder. For example:\n\n```javascript\n// NavBar.vue <script>\n\nimport { DropDown } from '@boite-beet/ui-kit'\n\nexport default {\n  name: 'NavBar',\n  components: { DropDown }\n  // ...\n}\n```\n\n```javascript\n// src/styles/index.js\n\nimport '@boite-beet/ui-kit/styles/globals.scss'\nimport '@boite-beet/ui-kit/styles/dropdown.scss'\nimport './app.scss'\n```\n\n## Components\n\nThe package's default export is the Vue install method which registers some components globally. These do not need to be imported individually, just use them as you would use the router's `<RouterLink>`.\n\n### Element [global]\n\nLike Vue's built-in `<component :is=\"DynamicComponent\"/>` but for HTML elements instead of Vue components. Useful for cases where you may need to dynamically change the HTML tag used to render a part of your content.\n\n#### Props\n\n| Prop | Type   | Default | Description                                                                                                                    |\n| ---- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| is   | String | `'div'` | The HTML tag to use.                                                                                                           |\n| tag  | String | `null`  | The same as `is` prop, needed for cases where `Element` is used with Vue's `<component :is=\"Element\">` to avoid prop conflict. |\n\n#### Usage\n\n```html\n<template>\n  <element :is=\"dynamicTag\">Sup</element>\n  <!-- or -->\n  <Component :is=\"Element\" :tag=\"dynamicTag\">Oh hey there!</Component>\n</template>\n\n<script>\nexport default {\n  computed: {\n    dynamicTag() {\n      return this.condition ? 'ul' : 'div'\n    }\n  }\n}\n</script>\n```\n\n### Icon [global]\n\nUsed to render icons that are included in the `icons.svg` spritesheet that is generated at build time from the `SVG` files found in your project's `src/assets/icons` folder.\n\n#### Props\n\n| Prop | Type   | Default    | Description                                                                                 |\n| ---- | ------ | ---------- | ------------------------------------------------------------------------------------------- |\n| id   | String | _required_ | The id of the icon to render. The id is based on the icon's filename in `src/assets/icons`. |\n\n#### Usage\n\n```html\n<template>\n  <button>\n    <Icon id=\"trash\" />\n    Delete\n  </button>\n</template>\n```\n\n### RawHtml [global]\n\nUsed to safely inject a sanitized HTML string with additional formatting controls.\n\n#### Props\n\n| Prop              | Type           | Default | Description                                                                                                         |\n| ----------------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |\n| tag               | String         | `'div'` | The tag with which the content should be wrapped.                                                                   |\n| html              | String, Object | `{}`    | An HTML string or an object with at least one of the keys `{ before, after }`. See details below for usage pattern. |\n| targetBlankLinks  | Boolean        | `false` | Automatically add `target=\"_blank\" rel=\"noopener\"` to anchor tags if `true`.                                        |\n| preventImages     | Boolean        | `false` | Disallow `img` tags in content if `true`.                                                                           |\n| replace           | Array          | `[]`    | An array of replacements to apply. See details below for usage pattern.                                             |\n| allowedTags       | Array          | `[]`    | An array of strings representing tags to allow. See sanitize-html details below.                                    |\n| allowedAttributes | Object         | `{}`    | An object defining allowed HTML attributes per tag. See sanitize-html details below.                                |\n\n#### Details\n\n##### `html` prop\n\nIf an object is passed, it should contain one or both accepted keys `before` and `after`. These determine where the content will be injected much in the same manner as CSS' `::before, ::after`. This way, you can also pass your own content to the default slot and decide if the HTML should be placed before or after your content. This can be useful for titles (placing content `after`) and buttons/links (placing content `before`).\n\nIf both are passed, both will be rendered in order.\n\nIf a string is passed instead of an object, it will default to the `after` position.\n\n##### `replace` prop\n\nAllows manipulation of the HTML string before it is converted to HTML and rendered. Accepts an array of values that follow these patterns:\n\n- A string (`:replace=\"['dude']\"`) which will **remove** all instances of the value. Note that the string is converted to a regular expression, so all regex expressions should be escaped, such as parentheses for capture groups: `'my \\(favorite\\) dude'`.\n- A regular expression (`:replace=\"[/wut wut/g]\"`) which will **remove** the match. Note that only the first match will be removed if the `g` flag is not set.\n- A tuple (array of two values) where the first value is a string or regular expression (as above) and the second is one of the following, used for replacement. See the [String replace MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) for more detail (the values will be passed in order to `String.replace`).\n  - A string (`:replace=\"[[/(<br\\s?\\/?>){2,}/g, '<br>']]\"`). The example here would replace two or more consecutive `<br> or <br/> or <br />` tags by a single `<br>`.\n  - A function (`` :replace=\"[/\\s(i)\\s/g, ($m, $1) => ` ${$1.toUpperCase()} `]\" ``). The example here would replace `'how i feel when it rains'` with `'how I feel when it rains'`.\n\n##### `allowedTags`/`allowedAttributes` props\n\nThese will be merged into the sanitize-html configuration object. For details on how to configure, see the [sanitize-html docs](https://github.com/apostrophecms/sanitize-html#default-options) for more information.\n\n#### Usage\n\n```html\n<template>\n  <RawHtml\n    tag=\"section\"\n    :html=\"{ before: htmlContent }\"\n    :replace=\"[['what', 'wut wut in the butt']]\"\n    target-blank-links\n    prevent-images\n  >\n    <RouterLink :to=\"{ name: 'home' }\">Go Home</RouterLink>\n  </RawHtml>\n</template>\n```\n\n### WrapHtml [global]\n\nThis is an alternative to `RawHtml` that allows you to pass the HTML string as content instead of a prop. It simply takes the slot content and passes it to `RawHtml` as a prop for you.\n\n#### Props\n\nThe same as `RawHtml` except for the `html` prop which is replaced by the default slot's content.\n\n#### Usage\n\n```html\n<template>\n  <WrapHtml tag=\"section\" :replace=\"[['what', 'wut wut in the butt']]\" target-blank-links prevent-images>\n    {{ htmlContent }}\n  </WrapHtml>\n</template>\n```\n\n### DropDown\n\nAllows you to transition between a height of `0` and `auto`. Useful for dropdown menus or accordion content.\n\n#### Props\n\n| Prop          | Type                          | Default    | Description                                                                                                                     |\n| ------------- | ----------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| isOpen        | Boolean                       | _required_ | Determines the content's visibility. Collapsed when `false`.                                                                    |\n| tag           | String                        | `'div'`    | The HTML tag to be used when rendering the outer element.                                                                       |\n| contentTag    | String                        | `'div'`    | The HTML tag to be used when rendering the content wrapper element.                                                             |\n| contentClass  | String, Array, Object         | `[]`       | Additional classnames to be applied to the content wrapper element.                                                             |\n| transitionKey | String, Number, Array, Object | `null`     | Similar to Vue's usage of the `key` prop, can be used to indicate when the height will change and transition to the new height. |\n\n#### Events\n\n| Name           | Payload     | Description                                       |\n| -------------- | ----------- | ------------------------------------------------- |\n| transition-end | `undefined` | Is emitted when an open or close transition ends. |\n\n#### Usage\n\n```javascript\n// src/styles/index.js\n\nimport '@boite-beet/ui-kit/styles/globals.scss'\nimport '@boite-beet/ui-kit/styles/dropdown.scss' // import before your styles\nimport './app.scss'\n```\n\n```html\n<template>\n  <nav class=\"nav\">\n    <ul class=\"nav__menu\">\n      <li class=\"nav__meta\">\n        <span @click=\"isAccountOpen = !isAccountOpen\">Account</span>\n\n        <DropDown :is-open=\"isAccountOpen\" content-class=\"nav__tray\">\n          <RouterLink :to=\"{ name: 'user-home', params: { userId } }\">My Account</RouterLink>\n          <RouterLink :to=\"{ name: 'user-settings', params: { userId } }\">Settings</RouterLink>\n          <RouterLink :to=\"{ name: 'logout' }\">Log out</RouterLink>\n        </DropDown>\n      </li>\n    </ul>\n  </nav>\n</template>\n\n<script>\nimport { DropDown } from '@boite-beet/ui-kit'\n\nexport default {\n  name: 'NavBar',\n  components: { DropDown },\n  data() {\n    return {\n      userId: 'udy123',\n      isAccountOpen: false\n    }\n  }\n}\n</script>\n```\n\n### Content Components\n\nBase content components (ContentText, ContentSplit, etc.) can be imported individually or grouped as a named export `{ ContentComponents }` for ease of use:\n\n```html\n<script>\nimport { ContentComponents } from '@boite-beet/ui-kit'\n\nexport default {\n  components: { ...ContentComponents }\n}\n</script>\n```\n\n#### Shared props\n\nAll content components share the following props:\n\n| Prop       | Type   | Default | Description                                                                            |\n| ---------- | ------ | ------- | -------------------------------------------------------------------------------------- |\n| classNames | Object | `{}`    | A map of class names you may wish to add to a component's children. See details below. |\n\n#### Details\n\n##### Conditional rendering\n\nAll content components will check to see if they have any content. If none is received, it will not render.\n\n##### `classNames` prop\n\nEach component has a specific mapping of its BEM elements which you can extend with additional class names. The root element's class can already be extended by simply passing a `class` attribute, as with any component. Each key in the object should correspond to a BEM element's name, so if you wish to add a modifier to `content__legend` for example:\n\n```html\n<template>\n  <ContentText legend=\"Sweet potaters\" class-names=\"{ legend: '-dark' }\" />\n</template>\n```\n\nEach component's BEM element map is detailed below.\n\nAccepted values are:\n\n- a string\n- an object\n- an array of strings, objects and/or arrays\n\nRepeating elements (such as columns) may also accept a function to which the `index` is passed. The function should return one of the above values.\n\nThese elements are indicated in the BEM element maps below with parentheses `()`.\n\nThe following example adds `-dark` to all columns and applies `-shift` to columns whose `index` are odd numbers.\n\n```html\n<template>\n  <ContentText class-names=\"{ column: shiftOddColumns }\" />\n</template>\n\n<script>\nexport default {\n  methods: {\n    shiftOddColumns(index) {\n      return ['-dark', { '-shift': index % 2 }]\n    }\n  }\n}\n</script>\n```\n\n### ContentText\n\nDisplay text content in a simple layout with optional columns.\n\n#### Props\n\n| Prop    | Type    | Default | Description                                                                               |\n| ------- | ------- | ------- | ----------------------------------------------------------------------------------------- |\n| center  | Boolean | `false` | If the entire content should be centered.                                                 |\n| title   | String  | `null`  | The content's main title.                                                                 |\n| legend  | String  | `null`  | The content's legend, usually smaller all-caps text that indicates the section's purpose. |\n| content | Array   | `[]`    | An array of strings representing columns of content. HTML is accepted.                    |\n\n#### Slots\n\n##### default\n\nThe default slot is in the footer, below the content columns. Ideal for adding a link.\n\n#### Details\n\n##### `classNames` map\n\n`{ legend, title, row, column(), footer }`\n\n`column` receives the `index` of the column.\n\n##### Render structure\n\n```\nsection.content.-text[.-center]\n  h2.content__legend\n  h3.content__title\n\n  div.content__row\n    v-for(index => RawHtml.content__column(index))\n\n  footer.content__footer\n    slot#default\n```\n\n#### Usage\n\n```html\n<template>\n  <ContentText v-bind=\"$page.section\" class=\"section\" class-names=\"{ column: shiftOddColumns }\" centered>\n    <RouterLink :to=\"{ name: 'home' }\">Go Home</RouterLink>\n  </ContentText>\n</template>\n\n<script>\nimport { ContentText } from '@boite-beet/ui-kit'\n\nexport default {\n  components: { ContentText },\n  data() {\n    return {\n      $page: {\n        section: { title: '#', legend: '//', content: ['<p>lorem</p>', 'ipsum'] }\n      }\n    }\n  },\n  methods: {\n    shiftOddColumns(index) {\n      return ['-dark', { '-shift': index % 2 }]\n    }\n  }\n}\n</script>\n```\n\n### ContentSplit\n\nDisplay text content along side any other type of content, an image by default.\n\n#### Props\n\n| Prop    | Type    | Default | Description                                                                             |\n| ------- | ------- | ------- | --------------------------------------------------------------------------------------- |\n| reverse | Boolean | `false` | If the split content row should be reversed, placing the media on the right side.       |\n| title   | String  | `null`  | The content's main title.                                                               |\n| legend  | String  | `null`  | The content's legend, often smaller all-caps text that indicates the section's purpose. |\n| content | String  | `null`  | A string of content. HTML is accepted.                                                  |\n| image   | String  | `null`  | The URL of the image if no `media` slot is provided.                                    |\n\n#### Slots\n\n##### default\n\nThe default slot is below the text content. Ideal for adding a link.\n\n##### media\n\nThe media slot is on the left side unless `reverse` is also passed. If no `media` slot is provided, falls back to an image.\n\n#### Details\n\n##### `classNames` map\n\n`{ legend, title, row, column(), footer }`\n\n`column` receives `0` if it is the media and `1` if it is the content.\n\n##### Render structure\n\n```\nsection.content.-split[.-reverse]\n  div.content__column(0)\n    slot#media || figure.content__image\n\n  div.content__column(1)\n    h2.content__legend\n    h3.content__title\n    RawHtml\n    slot#default\n```\n\n#### Usage\n\n```html\n<template>\n  <!-- basic image -->\n  <ContentSplit\n    v-bind=\"$page.section\"\n    image=\"/images/happy-udy.png\"\n    class=\"home__about\"\n    class-names=\"{ legend: '-dark' }\"\n  />\n\n  <!-- custom media -->\n  <ContentSplit\n    v-bind=\"$page.section\"\n    class=\"home__slider\"\n    class-names=\"{ column: isText => ({ '-pad-top': isText }) }\"\n    reverse>\n    <template v-slot:media>\n      <Slider />\n    </template>\n\n    <RouterLink :to=\"{ name: 'home' }\">Go Home</RouterLink>\n</template>\n\n<script>\nimport { ContentSplit } from '@boite-beet/ui-kit'\nimport { Slider } from '@/components'\n\nexport default {\n  components: { ContentSplit, Slider },\n  data() {\n    return {\n      $page: {\n        section: { title: '#', legend: '//', content: '<p>lorem ipsum</p>' }\n      }\n    }\n  }\n}\n</script>\n```\n\n## Helpers\n\n### camelKebab\n\nConvert kebab-case to camel-case and vice-versa. Has two usage patterns: methods or getters.\n\n#### Usage\n\n```javascript\nimport { camelKebab } from '@boite-beet/ui-kit'\n\n// methods\ncamelKebab.toCamel('holy-moly') // holyMoly\ncamelKebab.toKebab('sweetBabyJesus') // sweet-baby-jesus\n\n// getters\nconst eatMe = camelKebab('eat-me')\neatMe.camel // 'eatMe'\neatMe.kebab // 'eat-me'\n```\n\n### formatInline\n\nFormat wrapping characters in text as tags, sort of like custom markdown... sort of. You can create your own formatters using the `create` method or use one of the predefined methods.\n\n_Note:_ Only supports single character matching, meaning you cannot replace `**sup**` with a tag for example.\n\n#### Usage\n\nTo create your own formatter:\n\n```javascript\nimport { formatInline } from '@boite-beet/ui-kit'\n\n// pass the character to replace as the first argument and the tag to use as second\nconst formatHash = formatInline.create('#', 'strong')\nformatHash('I miss you #so much#') // 'I miss you <strong>so much</strong>'\n\n// you can also override the tag if need be\nformatHash('Always thinking of #you#', 'em') // 'Always thinking of <em>you</em>'\n```\n\nThe predefined methods are:\n\n- `bold`, `star`, `strong` — Renders `*` as `<strong>`\n\n- `italic`, `em`, `lodash`, `underscore` — Renders `_` as `<em>`\n\n- `strike`, `strikethrough` — Renders `~` as `<s>`\n\nThe predefined methods work in the same way as your own. If you want to match the same character but render a different tag, pass the tag as the second argument, like so:\n\n```javascript\nimport { formatInline } from '@boite-beet/ui-kit'\n\nformatInline.lodash('Trouble in _paradise_', 'u') // 'Trouble in <u>paradise</u>'\n```\n\n### keywordPropValidator\n\nCreate a Vue prop validator for `String` type props that checks the value against a list of strings you provide.\n\n#### Usage\n\n```javascript\nimport { keywordPropValidator } from '@boite-beet/ui-kit'\n\nexport default {\n  props: {\n    position: {\n      type: String,\n      default: null,\n      validator: keywordPropValidator('top', 'right', 'bottom', 'left')\n    }\n  }\n}\n```\n\n### check (type validation)\n\nAvailable checks are:\n\n- `isString`\n- `isNumber` (`NaN` will return `false`)\n- `isBoolean`\n\n- `isFunction`\n- `isArray`\n- `isObject`\n- `isNullOrUndefined`\n- `isRegExp`\n- `isEmpty` (An empty string, array or object as well as `null` and `undefined` return `true`)\n\n#### Usage\n\nAll checks can be used as methods or getters, for example:\n\n```javascript\nimport { check } from '@boite-beet/ui-kit'\n\n// methods\nconst someFunc = () => null\ncheck.isFunction(someFunc) // true\nchecks.isEmpty({}) // true\nchecks.isEmpty('') // true\nchecks.isEmpty(0) // false\n\n// getters\nconst checkVal = check([])\ncheckVal.isString // false\ncheckVal.isArray // true\ncheckVal.isEmpty // true\n```\n\n## Development\n\nCompilation/build is done using [Rollup.js](https://rollupjs.org/).\n\n### Installation\n\nClone the package and install the dependencies.\n\n```bash\ngit clone git@bitbucket.org:boitebeet/beet-ui-kit.git\ncd beet-ui-kit\nyarn\n```\n\n### Scripts\n\n- `build` - compiles the package into the `dist/` directory.\n- `start` - compiles the package every time the source changes.\n\n### Using local package in a project\n\nYarn has built in functionality that allows you to link a local package to a project. The \"package\" is the library that will be installed via npm and the \"project\" is the app/website in which you want to test it.\n\n#### In the package's directory\n\n```bash\nyarn link\n```\n\nThis only needs to be done once, the link remains available until you run `yarn unlink`. There is no danger or issue created by leaving the link permanently.\n\n#### In your project's directory\n\n```bash\nyarn link @boite-beet/ui-kit\n```\n\nNow, if you run `yarn start` in the package and `yarn start` in your project, your project's development server will detect when the package has changed (compile on save) and reload.\n\n#### Unlinking from your project\n\nOnce you are done working on the package and have published, it is recommended to unlink it from your project and reinstall the dependancy to verify that everything has deployed correctly.\n\nTo do this, run these commands in your project:\n\n```bash\nyarn unlink @boite-beet/ui-kit\nyarn add @boite-beet/ui-kit@latest\n```\n\n### Publishing\n\nThis requires you to be a member of the **boite-beet** org on npm and for you to be logged in to your npm account (using the `npm login` command).\n\n#### Publish from `master`\n\nMake sure you are in the `master` branch and that all your changes have been merged.\n\n```bash\ngit checkout master\ngit merge develop\n```\n\n#### Update the version\n\nRun the `yarn version` command and enter the new version as prompted. This will also create a version tag in git. Versions should follow the semver pattern of `major.minor.patch`\n\n- **Patch**: bugfixes and inconsequential changes\n- **Minor**: new features\n- **Major**: breaking changes\n\n#### Push changes including version tags\n\n```bash\ngit push --follow-tags\n```\n\n#### Publish to npm\n\n```bash\nnpm publish\n```\n\n#### Merge the new package version into `develop`\n\n```bash\ngit checkout develop\ngit merge master\n```\n","readmeFilename":"README.md","homepage":"https://bitbucket.org/boitebeet/beet-ui-kit#readme","repository":{"type":"git","url":"git+https://bitbucket.org/boitebeet/beet-ui-kit.git"},"bugs":{"url":"https://bitbucket.org/boitebeet/beet-ui-kit/issues"}}