{"id":17087353,"url":"https://github.com/leecason/vue-rough-notation","last_synced_at":"2025-09-12T22:38:39.898Z","repository":{"id":37804252,"uuid":"267499328","full_name":"Leecason/vue-rough-notation","owner":"Leecason","description":"✏️rough-notation component for @vuejs, support Vue2 \u0026 3.","archived":false,"fork":false,"pushed_at":"2023-08-03T20:44:47.000Z","size":1759,"stargazers_count":142,"open_issues_count":26,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T23:14:47.615Z","etag":null,"topics":["annotate","annotation","rough","sketchy","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://leecason.github.io/vue-rough-notation/","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/Leecason.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"publiccode":null,"codemeta":null}},"created_at":"2020-05-28T05:14:19.000Z","updated_at":"2025-03-31T13:40:43.000Z","dependencies_parsed_at":"2024-10-31T05:12:38.244Z","dependency_job_id":null,"html_url":"https://github.com/Leecason/vue-rough-notation","commit_stats":{"total_commits":85,"total_committers":4,"mean_commits":21.25,"dds":0.04705882352941182,"last_synced_commit":"1396f2292eefec148fcfaa62e1d1781c0820db4d"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leecason%2Fvue-rough-notation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leecason%2Fvue-rough-notation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leecason%2Fvue-rough-notation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leecason%2Fvue-rough-notation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Leecason","download_url":"https://codeload.github.com/Leecason/vue-rough-notation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125591,"owners_count":21051770,"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":["annotate","annotation","rough","sketchy","vue2","vue3"],"created_at":"2024-10-14T13:32:45.954Z","updated_at":"2025-04-09T23:14:52.757Z","avatar_url":"https://github.com/Leecason.png","language":"JavaScript","readme":"# Vue Rough Notation\n\n![npm](https://img.shields.io/npm/v/vue-rough-notation)\n![CircleCI](https://img.shields.io/circleci/build/github/Leecason/vue-rough-notation)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-rough-notation)\n![GitHub](https://img.shields.io/github/license/Leecason/vue-rough-notation)\n\n![Rough Notation logo](https://roughnotation.com/images/social.png)\n\nA Vue wrapper for [RoughNotation](https://github.com/pshihn/rough-notation), a small JavaScript library to create and animate annotations on a web page.\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Global options](#global-options)\n- [RoughNotation Component](#roughnotation-component)\n- [RoughNotationGroup Component](#roughnotationgroup-component)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Demo\n\n[Demo Page](https://leecason.github.io/vue-rough-notation/)\n\n[Code Sandbox](https://codesandbox.io/s/vue-rough-notation-q8cxq)\n\n## Installation\n\nNPM:\n\n```shell\nnpm install --save vue-rough-notation\n```\n\nTo make `vue-rough-notation` work for Vue 2, you need to have `@vue/composition-api` installed:\n\n```shell\nnpm install --save @vue/composition-api\n```\n\n## Usage\n\n### Vue3\n\n```js\nimport { createApp } from 'vue'\nimport VueRoughNotation from 'vue-rough-notation';\n\nconst app = createApp(...);\napp.use(VueRoughNotation);\n```\n\n### Vue2\n\n```js\nimport Vue from 'vue';\nimport VueCompositionAPI from '@vue/composition-api';\nimport VueRoughNotation from 'vue-rough-notation';\n\nVue.use(VueCompositionAPI);\nVue.use(VueRoughNotation);\n```\n\n## Global options\n\nThe default global options are:\n\n```js\n{\n  // Turn on/off animation when annotating.\n  animate: true,\n  // Duration of the animation in milliseconds.\n  animationDuration: 800,\n  // Representing the color of the annotation sketch.\n  color: 'currentColor',\n  // Width of the annotation strokes.\n  strokeWidth: 1,\n  // (in pixels) Padding between the element and roughly where the annotation is drawn.\n  padding: 5,\n  // To annotate multiline text (each line separately), set this property to true.\n  multiline: false,\n  // By default annotations are drawn in two iterations.\n  iterations: 2,\n  // When drawing a bracket, this configures which side(s) of the element to bracket.\n  brackets: `right`,\n}\n```\n\nYou can change the options when install:\n\n- Vue3\n\n```js\nimport VueRoughNotation from 'vue-rough-notation';\n\napp.use(VueRoughNotation, options);\n```\n\n- Vue2\n\n```js\nimport VueRoughNotation from 'vue-rough-notation';\n\nVue.use(VueRoughNotation, options);\n```\n\n## RoughNotation Component\n\n### Usage\n\n```html\n\u003cRoughNotation :is-show=\"isShow\" type=\"underline\"\u003e\n  \u003cspan\u003eRough Notation is awesome\u003c/span\u003e\n\u003c/RoughNotation\u003e\n```\n\n### Props\n\n#### type\n\n**Type**: `string`\n\n**required**: `true`\n\nThis is a mandatory field. It sets the annotation style. Following are the list of supported annotation types:\n\n- **underline**: This style creates a sketchy underline below an element.\n- **box**: This style draws a box around the element.\n- **circle**: This style draws a circle around the element.\n- **highlight**: This style creates a highlight effect as if marked by a highlighter.\n- **strike-through**: This style draws horizontal lines through the element.\n- **crossed-off**: This style draws an 'X' across the element.\n- **bracket**: This style draws a bracket around an element, usually a paragraph of text. By default on the right side, but can be configured to any or all of left, right, top, bottom.\n\n#### isShow\n\n**Type**: `boolean`\n\n**Required**: `false`\n\n**Default**: `false`\n\nWhether draws the annotation.\n\n#### animate\n\n**Type**: `boolean`\n\n**Required**: `false`\n\n**Default**: `true` - You can change it when install _(see above)_.\n\nTurn on/off animation when annotating.\n\n#### animationDuration\n\n**Type**: `number`\n\n**Required**: `false`\n\n**Default**: `800` - You can change it when install _(see above)_.\n\nDuration of the animation in milliseconds.\n\n#### color\n\n**Type**: `string`\n\n**Required**: `false`\n\n**Default**: `currentColor` - You can change it when install _(see above)_.\n\nRepresenting the color of the annotation sketch.\n\n#### strokeWidth\n\n**Type**: `number`\n\n**Required**: `false`\n\n**Default**: `1` - You can change it when install _(see above)_.\n\nWidth of the annotation strokes.\n\n#### padding\n\n**Type**: `number | number[]`\n\n**Required**: `false`\n\n**Default**: `5`(in pixels) - You can change it when install _(see above)_\n\nPadding between the element and roughly where the annotation is drawn. Default value is `5` (in pixels). If you wish to specify different `top`, `left`, `right`, `bottom` paddings, you can set the value to an array akin to CSS style padding `[top, right, bottom, left]` or just `[top \u0026 bottom, left \u0026 right]`.\n\n#### multiline\n\n**Type**: `boolean`\n\n**Required**: `false`\n\n**Default**: `false`\n\nThis property only applies to inline text. To annotate multiline text (each line separately), set this property to true.\n\n#### iterations\n\n**Type**: `number`\n\n**Required**: `false`\n\n**Default**: `2` - You can change it when install _(see above)_\n\nBy default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.\n\n#### brackets\n\n**Type**: `string | string[]`\n\n**Required**: `false`\n\n**Default**: `'right'`\n\nValue could be a string or an array of strings, each string being one of these values: **left**, **right**, **top**, **bottom**. When drawing a bracket, this configures which side(s) of the element to bracket. Default value is `right`.\n\n#### tag\n\n**Type**: `string`\n\n**Required**: `false`\n\n**Default**: `'span'`\n\nString HTML tag name; if falsy (for example `null` or `undefined`), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered\n\n#### order\n\n**Type**: `number` | `string`\n\n**Required**: `false`\n\n**Default**: `0`\n\nWorks with `RoughNotationGroup` component, **order** the animation of annotations. When show is called on the group, the annotations are animated in order. For example, an annotation with order `1` will animate before order `2`. Also you can pass `orderAnnotations` prop to `RoughNotationGroup` to customize the order function.\n\n### Events\n\n#### init\n\n**Parameters**: [`Annotation Object`](https://github.com/pshihn/rough-notation#annotation-object)\n\nCalled when the component is initialized.\n\n## RoughNotationGroup Component\n\n### Usage\n\n```html\n\u003cRoughNotationGroup :is-show=\"isShow\"\u003e\n  \u003cRoughNotation type=\"underline\"\u003eRough Notation\u003c/RoughNotation\u003e\n  \u003cRoughNotation type=\"box\"\u003eis\u003c/RoughNotation\u003e\n  \u003cRoughNotation type=\"highlight\"\u003eawesome\u003c/RoughNotation\u003e\n\u003c/RoughNotation\u003e\n```\n\n### Props\n\n#### isShow\n\n**Type**: `boolean`\n\n**Required**: `false`\n\n**Default**: `false`\n\nShow/Hides the annotations\n\n#### tag\n\n**Type**: `string`\n\n**Required**: `false`\n\n**Default**: `'div'`\n\nString HTML tag name; if falsy (for example `null` or `undefined`), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered\n\n#### orderAnnotations\n\n**Type**: `function`\n\n**Required**: `false`\n\n**Default**: `(a, b) =\u003e a - b`\n\nCustomize annotations order function. Order will be sorted in ascending order by default.\n\n## Contributing\n\n[CONTRIBUTING](CONTRIBUTING.md)\n\n## License\n\n[MIT](https://github.com/Leecason/vue-rough-notation/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleecason%2Fvue-rough-notation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleecason%2Fvue-rough-notation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleecason%2Fvue-rough-notation/lists"}