{"id":22945095,"url":"https://github.com/seregpie/vuewordcloud","last_synced_at":"2025-05-16T16:07:12.033Z","repository":{"id":57396904,"uuid":"100404818","full_name":"SeregPie/VueWordCloud","owner":"SeregPie","description":"Generates a cloud out of the words.","archived":false,"fork":false,"pushed_at":"2023-07-13T01:28:32.000Z","size":710,"stargazers_count":393,"open_issues_count":12,"forks_count":60,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-03T14:11:07.315Z","etag":null,"topics":["cloud","component","draw","javascript","key","plugin","rotation","tag","vue","weight","word"],"latest_commit_sha":null,"homepage":"https://seregpie.github.io/VueWordCloud/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SeregPie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-08-15T18:01:43.000Z","updated_at":"2025-03-20T09:37:45.000Z","dependencies_parsed_at":"2024-04-19T02:00:44.554Z","dependency_job_id":null,"html_url":"https://github.com/SeregPie/VueWordCloud","commit_stats":{"total_commits":275,"total_committers":2,"mean_commits":137.5,"dds":"0.0036363636363636598","last_synced_commit":"919bbe64f2c10a1028f896b766ed96b35cf31449"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SeregPie%2FVueWordCloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SeregPie%2FVueWordCloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SeregPie%2FVueWordCloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SeregPie%2FVueWordCloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SeregPie","download_url":"https://codeload.github.com/SeregPie/VueWordCloud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586248,"owners_count":21128996,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloud","component","draw","javascript","key","plugin","rotation","tag","vue","weight","word"],"created_at":"2024-12-14T14:29:40.580Z","updated_at":"2025-04-12T14:56:37.365Z","avatar_url":"https://github.com/SeregPie.png","language":"JavaScript","readme":"# VueWordCloud\n\nGenerates a cloud out of the words.\n\n## Vue 3\n\nFor Vue 3 use the version \u003e18.\n\n## demo\n\n[Try it out!](https://seregpie.github.io/VueWordCloud/)\n\n## setup\n\n### npm\n\n```shell\nnpm i vuewordcloud\n```\n\n### ES module\n\nRegister the component globally.\n\n```javascript\nimport Vue from 'vue';\nimport VueWordCloud from 'vuewordcloud';\n\nVue.component(VueWordCloud.name, VueWordCloud);\n```\n\n*or*\n\nRegister the component in the scope of another component.\n\n```javascript\nimport VueWordCloud from 'vuewordcloud';\n\nexport default {\n  components: {\n    [VueWordCloud.name]: VueWordCloud,\n  },\n};\n```\n\n### browser\n\n```html\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vuewordcloud\"\u003e\u003c/script\u003e\n```\n\nThe component is globally available as `VueWordCloud`. If Vue is detected, the component will be registered automatically.\n\n## usage\n\n```html\n\u003cvue-word-cloud\n  style=\"\n    height: 480px;\n    width: 640px;\n  \"\n  :words=\"[['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]]\"\n  :color=\"([, weight]) =\u003e weight \u003e 10 ? 'DeepPink' : weight \u003e 5 ? 'RoyalBlue' : 'Indigo'\"\n  font-family=\"Roboto\"\n/\u003e\n```\n\n---\n\nPass custom renderer for the words.\n\n```html\n\u003cvue-word-cloud :words=\"words\"\u003e\n  \u003ctemplate slot-scope=\"{text, weight, word}\"\u003e\n    \u003cdiv :title=\"weight\" style=\"cursor: pointer;\" @click=\"onWordClick(word)\"\u003e\n      {{ text }}\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/vue-word-cloud\u003e\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.\u003cbr/\u003eIf the value is an object, it will be resolved to `{text, weight, rotation, rotationUnit, fontFamily, fontStyle, fontVariant, fontWeight, color}`.\u003cbr/\u003eIf the value is an array, it will be resolved to `[text, weight]`.\u003cbr/\u003eIf 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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseregpie%2Fvuewordcloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseregpie%2Fvuewordcloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseregpie%2Fvuewordcloud/lists"}