{"_rev":"4-f0fbe75a804b783ef1832b9c31453c56","time":{"created":"2023-01-12T14:19:37.924Z","1.0.1":"2023-01-10T12:09:25.901Z","modified":"2023-01-12T14:19:38.219Z","1.0.2":"2023-01-10T12:16:29.198Z","1.0.3":"2023-01-10T13:57:11.694Z","1.0.4":"2023-01-12T14:19:38.080Z"},"_id":"vue3-word-cloud","name":"vue3-word-cloud","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"vue3-word-cloud","version":"1.0.4","description":"Generates a cloud out of the words.","keywords":["cloud","component","draw","key","tag","vue","vue3","d3","word"],"license":"MIT","author":{"name":"Samir Atras","email":"atras.samir@gmail.com"},"main":"index.js","repository":{"type":"git","url":"git+https://github.com/atrassamir/vue3-word-cloud.git"},"scripts":{"build":"rollup -c","prepublishOnly":"npm run build","serve":"rollup -c -w"},"devDependencies":{"@rollup/plugin-buble":"^1.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.1.0","eslint":"^8.28.0","eslint-config-seregpie":"^1.2.1","rollup":"^3.5.0","rollup-plugin-serve":"^2.0.2"},"dependencies":{},"peerDependencies":{"vue":"^3.x"},"gitHead":"62f25f150eab70ce5fb2e4bf37d5a4815701f847","bugs":{"url":"https://github.com/atrassamir/vue3-word-cloud/issues"},"homepage":"https://github.com/atrassamir/vue3-word-cloud#readme","_id":"vue3-word-cloud@1.0.4","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-wGHVW6qu7Nt2+vT1McQkufKOCa+MqWPNQFuFEUVFuoai5CVCZclEozv8bKuhwOVJbCLCaVkNocWJ9Hi/HfTCVQ==","shasum":"deccedf206652d34c31ee2c8ee33f9b623f35a24","tarball":"https://registry.npmjs.org/vue3-word-cloud/-/vue3-word-cloud-1.0.4.tgz","fileCount":4,"unpackedSize":19805,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkRL68OI0sUNN+a/rs6q9+BawiQmxF48yl6R4PuZE9SwIhAO4GiNvXBjsrToXgQA8d+lrKD6Yyy+G/YHBESPJYH+BM"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBb6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrz6RAAnPeeAkuArVYPerONEfI0KIiyk8k/k694XIN4TcAZVX7PoA1N\r\nWyrKGVo2VKbrVYUPsxJbE7wKSe88CRoHI/8uzJD3Jmg8E+9vv+z0W1v1Pz90\r\nc1mpTgRMrxxAWP1tLDE1nczQnmKcqtOMYDWu6karodol4rSVTC7APfxd6k7j\r\nKh2yhbRoxGRpR5aiQ5ulK5LNRTszAR49dIR3qQnjSfR2t8jHl/LYD4XU2hyT\r\n/Q1PY5zKLgrd4K5MVERfsOLf1o4a16g1iBys0cl/EUFM/ixk7YEi1ypzXzH8\r\nB7zipxB0OX622VoxlK+Wz2fMrb91mxFBXn8HCoozSxt+mVmCs1BfkYmrBllN\r\nOyl9SZfrEmP3m0uGAEjic6rvkxsLgZeb7v20cHaMwxxbSKV0v3szVEglq/FC\r\nv4qRQLpDg/bMQalkDGni21KvT+jac2xN/RTwY5Vn8pTJsHKa4NuqNpCeiIym\r\nhfWLWe2O9Fi3VsLsxgtdilIp3/nFsSWmpzR48K5gG/WD/5eVuQM1IUbi/LhZ\r\nY7o29Pongze9gmGfy5lLtJaSiKaEwXVHfCARA6G6mTad6ahruMMTWKqJ6uY6\r\n+yNTkhr2kneCiXJBB+Vt8EkQ8VcCFSljUehxOKt5EKvgcnhnqkfoJnWtp7Dp\r\ngxVJfXGLnbhPE/ihPHplOcRUnWUiX3LRnG0=\r\n=eg6N\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"atrassamir","email":"atras.samir@gmail.com"},"directories":{},"maintainers":[{"name":"atrassamir","email":"atras.samir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-word-cloud_1.0.4_1673533177925_0.10360617079053691"},"_hasShrinkwrap":false}},"maintainers":[{"name":"atrassamir","email":"atras.samir@gmail.com"}],"description":"Generates a cloud out of the words.","homepage":"https://github.com/atrassamir/vue3-word-cloud#readme","keywords":["cloud","component","draw","key","tag","vue","vue3","d3","word"],"repository":{"type":"git","url":"git+https://github.com/atrassamir/vue3-word-cloud.git"},"author":{"name":"Samir Atras","email":"atras.samir@gmail.com"},"bugs":{"url":"https://github.com/atrassamir/vue3-word-cloud/issues"},"license":"MIT","readme":"# Vue3 Word Cloud\n\nGenerates a cloud out of the words.\n\nSupport Vue 3\n\n## demo\n\n[Try it out!](https://seregpie.github.io/VueWordCloud/)\n\n## setup\n\n### npm\n\n```shell\nnpm i vue3-word-cloud\n```\n\n### ES module\n\nRegister the component globally.\n\n```javascript\nimport Vue from 'vue';\nimport Vue3WordCloud from 'vue3-word-cloud';\n\nVue.component(Vue3WordCloud.name, VueWordCloud);\n```\n\n*or*\n\nRegister the component in the scope of another component.\n\n```javascript\nimport Vue3WordCloud from 'vue3-word-cloud';\n\nexport default {\n  components: {\n    [Vue3WordCloud.name]: Vue3WordCloud,\n  },\n};\n```\n\n## usage\n\n```html\n<vue3-word-cloud\n  style=\"\n    height: 480px;\n    width: 640px;\n  \"\n  :words=\"[['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]]\"\n  :color=\"([, weight]) => weight > 10 ? 'DeepPink' : weight > 5 ? 'RoyalBlue' : 'Indigo'\"\n  font-family=\"Roboto\"\n/>\n```\n\n---\n\nPass custom renderer for the words.\n\n```html\n<vue3-word-cloud :words=\"words\">\n  <template slot-scope=\"{text, weight, word}\">\n    <div :title=\"weight\" style=\"cursor: pointer;\" @click=\"onWordClick(word)\">\n      {{ text }}\n    </div>\n  </template>\n</vue3-word-cloud>\n```\n\n## properties\n\n| property | type | default | description |\n| ---: | :--- | :--- | :--- |\n| `animation-duration` | `Number` | `1000` | The duration of the animation. |\n| `animation-easing` | `String` | `'ease'` | The easing of the animation. |\n| `animation-overlap` | `Number` | `1` | The overlap of the animation. Set the value to `1` to animate words all at once. Set the value to `0` to animate words one by one. The value `5` has the same effect as the value `1/5`. |\n| `color` | `[String, Function]` | `'Black'` | The default color for each word. |\n| `create-canvas` | `Function` | * | Creates a new `Canvas` instance. |\n| `create-worker` | `Function` | * | Creates a new `Worker` instance. |\n| `enter-animation` | `[Object, String]` | * | The enter animation. |\n| `font-family` | `[String, Function]` | `'serif'` | The default font family for each word. |\n| `font-size-ratio` | `Number` | `0` | The font size ratio between the words. For example, if the value is `5`, then the largest word will be 5 times larger than the smallest one. The value `5` has the same effect as the value `1/5`. |\n| `font-style` | `[String, Function]` | `'normal'` | The default font style for each word. |\n| `font-variant` | `[String, Function]` | `'normal'` | The default font variant for each word. |\n| `font-weight` | `[String, Function]` | `'normal'` | The default font weight for each word. |\n| `leave-animation` | `[Object, String]` | * | The leave animation. |\n| `load-font` | `Function` | * | Loads the font. |\n| `rotation-unit` | `[String, Function]` | `'turn'` | The default rotation unit for each word. Possible values are `'turn'`, `'deg'` and `'rad'`. |\n| `rotation` | `[Number, Function]` | `0` | The default rotation for each word. |\n| `spacing` | `Number` | `0` | The spacing between the words. The value is relative to the font size. |\n| `text` | `[String, Function]` | `''` | The default text for each word. |\n| `weight` | `[Number, Function]` | `1` | The default weight for each word. |\n| `words` | `Array` | `[]` | The words to place into the cloud. A value of the array could be either an object, an array or a string.<br/>If the value is an object, it will be resolved to `{text, weight, rotation, rotationUnit, fontFamily, fontStyle, fontVariant, fontWeight, color}`.<br/>If the value is an array, it will be resolved to `[text, weight]`.<br/>If the value is a string, it will be resolved to `text`. |\n\n---\n\n```javascript\nlet enterAnimation = {opacity: 0};\nlet leaveAnimation = {opacity: 0};\n```\n\n---\n\nMake more complex animations.\n\n```javascript\nlet enterAnimation = {\n  opacity: 0,\n  transform: 'scale3d(0.3,0.3,0.3)'\n};\n```\n\n---\n\nUse classes for CSS animations.\n\n```javascript\nlet enterAnimation = 'animated bounceIn';\nlet leaveAnimation = 'animated hinge';\n```\n\n---\n\n```javascript\nlet createCanvas = function() {\n  return document.createElement('canvas');\n};\n```\n\n---\n\n```javascript\nlet loadFont = function(fontFamily, fontStyle, fontWeight, text) {\n  return document.fonts.load([fontStyle, fontWeight, '1px', fontFamily].join(' '), text);\n};\n```\n\n---\n\nProvide custom `loadFont` function to support older browsers.\n\n```javascript\nimport FontFaceObserver from 'fontfaceobserver';\n\nlet loadFont = function(family, style, weight, text) {\n  return (new FontFaceObserver(family, {style, weight})).load(text);\n};\n```\n\n---\n\n```javascript\nlet createWorker = function(code) {\n  return new Worker(URL.createObjectURL(new Blob([code])));\n};\n```\n\n## events\n\n| event | description |\n| ---: | :--- |\n| `update:progress` | The current progress of the cloud words computation. |\n","readmeFilename":"README.md"}