{"id":33008009,"url":"https://github.com/sebastianwachter/vue-scratchable","last_synced_at":"2026-01-15T00:49:20.753Z","repository":{"id":39039849,"uuid":"283247930","full_name":"sebastianwachter/vue-scratchable","owner":"sebastianwachter","description":"A Vue.js wrapper component that turns everything into fun scratch cards.","archived":true,"fork":false,"pushed_at":"2023-12-08T16:05:47.000Z","size":3438,"stargazers_count":54,"open_issues_count":21,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-08T21:37:39.383Z","etag":null,"topics":["canvas","card","scratch","scratchcard","vue","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://sebastianwachter.github.io/vue-scratchable/","language":"Vue","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/sebastianwachter.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2020-07-28T15:09:21.000Z","updated_at":"2025-02-14T13:08:39.000Z","dependencies_parsed_at":"2024-01-02T23:34:50.574Z","dependency_job_id":"0ded7aff-ac62-4d21-b743-3b7612b06dfe","html_url":"https://github.com/sebastianwachter/vue-scratchable","commit_stats":{"total_commits":39,"total_committers":2,"mean_commits":19.5,"dds":"0.20512820512820518","last_synced_commit":"87256709c2bad3bb9d92a6a74d477c53a8976182"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/sebastianwachter/vue-scratchable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianwachter%2Fvue-scratchable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianwachter%2Fvue-scratchable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianwachter%2Fvue-scratchable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianwachter%2Fvue-scratchable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebastianwachter","download_url":"https://codeload.github.com/sebastianwachter/vue-scratchable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianwachter%2Fvue-scratchable/sbom","scorecard":{"id":808659,"data":{"date":"2025-08-11","repo":{"name":"github.com/sebastianwachter/vue-scratchable","commit":"63d4ab687614831bbee1962996b5e16c1cdcb941"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.8,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/default-and-npm.yml:1","Warn: no topLevel permission defined: .github/workflows/gh-pages-deploy.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":5,"reason":"dependency not pinned by hash detected -- score normalized to 5","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/default-and-npm.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/default-and-npm.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/default-and-npm.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/default-and-npm.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/default-and-npm.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/default-and-npm.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/default-and-npm.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/default-and-npm.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/default-and-npm.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/default-and-npm.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/default-and-npm.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/default-and-npm.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/gh-pages-deploy.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/gh-pages-deploy.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/gh-pages-deploy.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/gh-pages-deploy.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/gh-pages-deploy.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/sebastianwachter/vue-scratchable/gh-pages-deploy.yml/master?enable=pin","Info:   0 out of   7 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned","Info:   3 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"90 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T12:30:15.605Z","repository_id":39039849,"created_at":"2025-08-23T12:30:15.605Z","updated_at":"2025-08-23T12:30:15.605Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28440496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-15T00:34:46.850Z","status":"ssl_error","status_checked_at":"2026-01-15T00:34:46.551Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["canvas","card","scratch","scratchcard","vue","vue-components","vuejs"],"created_at":"2025-11-13T15:00:44.268Z","updated_at":"2026-01-15T00:49:20.748Z","avatar_url":"https://github.com/sebastianwachter.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# 🦄 vue-scratchable 🏳️‍🌈🧽\n\n## DEPRECATED: Use the native web component instead: https://github.com/sebastianwachter/wc-scratch\n\nPublishing status: ![Publishing status](https://github.com/sebastianwachter/vue-scratchable/workflows/Lint%2C%20Publish%2C%20%26%20Release/badge.svg)\n\nA Vue.js wrapper component that turns everything into fun scratch cards. Includes touch support without additional dependencies.\n\nIt can also calculate percentage value of the scratchables's cleared area.\n\n## 🎉 Installation\n\nInstall it with npm:\n\n```\nnpm i vue-scratchable\n```\n\nOr directly in the browser:\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-scratchable@latest/dist/vue-scratchable.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n## ✨ Usage\n\nRegister the component globally:\n\n```js\nimport VueScratchable from 'vue-scratchable';\n\nVue.component('vue-scratchable', VueScratchable);\n```\n\nOr use it locally in your Single File Components:\n\n```js\nimport VueScratchable from 'vue-scratchable';\n\nexport default {\n  /* ... */\n  components: {\n    VueScratchable,\n  },\n  /* ... */\n};\n```\n\nIn both cases you are now able to use it in the `\u003ctemplate\u003e` of a component:\n\n```html\n\u003cvue-scratchable\u003e\n  \u003ch1\u003eHello Scratchable World\u003c/h1\u003e\n\u003c/vue-scratchable\u003e\n```\n\n## 🤔 Complete example as a Single File Component\n\nThis code is taken from this project's `App.vue` file to showcase the component's easy way of use.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003ch1\u003eA beautiful parrot got trapped behind some paper.\u003c/h1\u003e\n    \u003ch2\u003eScratch them free!\u003c/h2\u003e\n    \u003cvue-scratchable\n      v-slot=\"{ init }\"\n      :brushOptions=\"brush\"\n      :hideOptions=\"hide\"\n      getPercentageCleared\n      @percentageUpdate=\"updatePoints\"\n    \u003e\n      \u003cdiv class=\"wrapper\"\u003e\n        \u003cimg\n          :src=\"require('./assets/mehmet-turgut-kirkgoz-vnayhPykN5Q-unsplash.jpg')\"\n          @load=\"init()\"\n        \u003e\n        \u003ch3\u003e{{ subline }}\u003c/h3\u003e\n      \u003c/div\u003e\n    \u003c/vue-scratchable\u003e\n    \u003cp\u003eYou scratched {{ percentage }}% free.\u003c/p\u003e\n    \u003cpre\u003ePhoto by \u003ca href=\"https://unsplash.com/@tkirkgoz?utm_source=unsplash\u0026amp;utm_medium=referral\u0026amp;utm_content=creditCopyText\"\u003eMehmet Turgut Kirkgoz\u003c/a\u003e on \u003ca href=\"https://unsplash.com/t/animals?utm_source=unsplash\u0026amp;utm_medium=referral\u0026amp;utm_content=creditCopyText\"\u003eUnsplash\u003c/a\u003e\u003c/pre\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueScratchable from 'vue-scratchable';\nimport paperPattern from './assets/natural-paper-texture.jpg';\n\nexport default {\n  name: 'App',\n  components: {\n    VueScratchable,\n  },\n  computed: {\n    subline() {\n      return this.percentage \u003c 100\n        ? `🎉 There is still ${100 - this.percentage}% left for me to be free... 🎉`\n        : '💚 Thank you for scratching me free! 💚';\n    },\n  },\n  data() {\n    return {\n      percentage: 0,\n      hide: {\n        type: 'pattern',\n        src: paperPattern,\n        repeat: 'repeat',\n      },\n      brush: {\n        size: 60,\n        shape: 'round',\n      },\n    };\n  },\n  methods: {\n    updatePoints(percentage) {\n      this.percentage = percentage;\n    },\n  },\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\nbody {\n  background-color: #333;\n  margin: 0;\n}\n\n#app {\n  font-family: 'Open Sans', sans-serif;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 1200px;\n  margin: 0 auto;\n  margin-top: 50px;\n}\n\n.vue-scratchable-wrapper {\n  background-color: white;\n}\n\nh3 {\n  color: #2c3e50;\n  text-align: center;\n}\n\na {\n  color: #2196f3;\n}\n\u003c/style\u003e\n```\n\n## ⚙️ Configuration\n\n### 🎰 Slot\n\n| Slot name | Description |\n|-----------|-------------|\n| default | The content to be scratched free. |\n\n### 💡 Props\n\n| Property | Type | Description |\n|----------|------|-------------|\n| brushOptions | Object | Configuration object of the \"scratcher\". See below for possible options. |\n| hideOptions | Object | Configuration object of the scratchable layer. See below for possible options. |\n| getPercentageCleared | Boolean | Flag to enable the `percentageUpdate` event which emits the amount of cleared paint as percentage. |\n| percentageStride | Number | A stride used while calculating the cleared percentage to reduce calculation time. |\n\n#### 🖊️ Brush options\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| size | Number | 20 | Defines the [`lineWidth` attribute.](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth) |\n| shape | String | round | Defines the [`lineJoin` attribute.](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) |\n\n#### 🙈 Hide options\n\nThere are two different types of fill that can be applied to the scratchable area: a solid colour or a [canvas pattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern). These are differentiated by the `type` property:\n\n##### 🟩 Solid colour\n\n| Property | Type | Description |\n|----------|------|-------------|\n| type | String | Can be 'color' or 'pattern'. If you want it to be a solid colour you should set it to 'color'. |\n| value | String | The colour you want for the fill. Can be any type of colour: hex or rgba. |\n\nExample:\n\n```js\nconst hide = {\n  type: 'color',\n  value: '#333',\n};\n```\n\n##### 🏳️‍🌈 Pattern\n\n| Property | Type | Description |\n|----------|------|-------------|\n| type | String | Can be 'color' or 'pattern'. If you want it to be a pattern you should set it to 'pattern'. |\n| src | String | A link to an image (best case is a repeatable texture). Can be an external Link as well as an imported local asset. |\n| repeat | String | Defines whether and in which direction the image should be repeated. Possible values are \"repeat\", \"no-repeat\", \"repeat-x\" and \"repeat-y\". |\n\nExample:\n\n```js\nconst hide = {\n  type: 'pattern',\n  src: 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png',\n  repeat: 'repeat',\n};\n```\n\n### 🎈 Events\n\n| Event name | Parameter type | Description |\n|------------|----------------|-------------|\n| percentage-update | Number | If the `getPercentageCleared` flag is set the component will emit this event and pass a number calculated from the percentage amount of the cleared area. |\n\n## ✔️ Caveats\n\n1. Img tags with local assets\n\nWhen using img tags with local imported assets you have to call the `init` method of the component corresponding to the img tag's `@load` event. The `init` method can be accessed through the component's scoped slot.\n\nExample:\n\n```html\n\u003cvue-scratchable v-slot=\"{ init }\"\u003e\n  \u003cimg\n    :src=\"require('./img.jpg')\"\n    @load=\"init()\"\n  \u003e\n\u003c/vue-scratchable\u003e\n```\n\n2. Using external images with patterns won't calculate percentage values.\n\nPatterns from external sources can't be used together with the percentage calculation. If done anyways it will resolve in the following CORS error:\n\n```\nError in v-on handler: \"SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.\"\n```\n\n3. Percentage calculation is very taxing on performance\n\nThe cleared area percentage calculation has to take every pixel of the canvas into consideration and analyzes whether they are cleared or not. Since this calculation gets called on every draw step this needs a lot of processing power. Because of that this feature is disabled by default and needs to be explicitly activated.\n\nThat's also why the `percentageStride` property should be set wisely and adjusted to your needs. It defines how many pixels should be skipped while calculating. This obviously also decreases the percentage's value accuracy.\n\n## 🛠️ Contribution\n\nIf you find a bug or want to contribute to the code or documentation, you can help by submitting an [issue](https://github.com/sebastianwachter/vue-scratchable/issues) or a [pull request](https://github.com/sebastianwachter/vue-scratchable/pulls).\n\n## 🧾 License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastianwachter%2Fvue-scratchable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebastianwachter%2Fvue-scratchable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastianwachter%2Fvue-scratchable/lists"}