{"id":14990232,"url":"https://github.com/matsuuu/vanilla-rough-notation","last_synced_at":"2025-04-12T02:06:38.403Z","repository":{"id":40649749,"uuid":"268126947","full_name":"Matsuuu/vanilla-rough-notation","owner":"Matsuuu","description":"A Vanilla JS Web Component implementation of the Rough Notation library","archived":false,"fork":false,"pushed_at":"2023-01-06T07:27:35.000Z","size":789,"stargazers_count":17,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T02:06:27.734Z","etag":null,"topics":["javascript","webcomponent"],"latest_commit_sha":null,"homepage":"","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/Matsuuu.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}},"created_at":"2020-05-30T17:21:57.000Z","updated_at":"2024-09-11T15:52:07.000Z","dependencies_parsed_at":"2023-02-05T15:10:12.140Z","dependency_job_id":null,"html_url":"https://github.com/Matsuuu/vanilla-rough-notation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fvanilla-rough-notation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fvanilla-rough-notation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fvanilla-rough-notation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fvanilla-rough-notation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matsuuu","download_url":"https://codeload.github.com/Matsuuu/vanilla-rough-notation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"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":["javascript","webcomponent"],"created_at":"2024-09-24T14:19:45.027Z","updated_at":"2025-04-12T02:06:38.382Z","avatar_url":"https://github.com/Matsuuu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vanilla Rough Notation\n\n[![npm version](https://badge.fury.io/js/vanilla-rough-notation.svg)](https://badge.fury.io/js/vanilla-rough-notation)\n\nA Vanilla Web Component port of the popular [Rough Notation](https://github.com/pshihn/rough-notation) library.\n\n[CodeSandbox](https://codesandbox.io/embed/dark-tdd-nkvbl?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n[Demo page, if CodeSandbox is not working](https://matsuuu.github.io/vanilla-rough-notation/)\n\nFor more documentation about animation types and more, visit the [official repo](https://github.com/pshihn/rough-notation)\n\n### Usage\n\n```js\nimport 'vanilla-rough-notation';\n```\n\n```html\n\u003crough-notation showOnLoad type=\"highlight\" color=\"#FF6d00\"\u003e\n    \u003ch2\u003eWC Rough Notation\u003c/h2\u003e\n\u003c/rough-notation\u003e\n```\n\n##### Groups\n\n```html\n\u003crough-notation-group id=\"group-to-show\"\u003e\n    \u003crough-notation type=\"highlight\" color=\"lightyellow\" order=\"3\"\u003e\n        \u003ch2\u003eRough notation group\u003c/h2\u003e\n    \u003c/rough-notation\u003e\n\n    \u003crough-notation type=\"underline\" color=\"green\" order=\"1\"\u003e\n        \u003cp\u003eBy wrapping multiple rough notation elements into a group,\u003c/p\u003e\n    \u003c/rough-notation\u003e\n\n    \u003crough-notation order=\"2\"\u003e\n        \u003cp\u003eyou can show them in animating in order\u003c/p\u003e\n    \u003c/rough-notation\u003e\n\u003c/rough-notation-group\u003e\n```\n\n## rough-notation\n\n### Properties\n\n| Property            | Attribute           | Type                           | Default        |\n| ------------------- | ------------------- | ------------------------------ | -------------- |\n| `animationDuration` | `animationDuration` | `number`                       | 800            |\n| `annotation`        | `annotation`        | `RoughAnnotation \\| undefined` |                |\n| `color`             | `color`             | `string`                       | \"currentColor\" |\n| `noAnimation`       | `noAnimation`       | `boolean`                      | false          |\n| `order`             | `order`             | `number`                       | 0              |\n| `padding`           | `padding`           | `number`                       | 5              |\n| `showOnLoad`        | `showOnLoad`        | `boolean`                      | false          |\n| `strokeWidth`       | `strokeWidth`       | `number`                       | 1              |\n| `type`              | `type`              | `RoughAnnotationType`          | \"underline\"    |\n| `multiline`         | `multiline`         | `boolean`                      | true           |\n| `brackets`          | `brackets`          | `String | Array\u003cString\u003e`       | \"right\"        |\n| `iterations`        | `iterations`        | `number`                       | 2              |\n\n### Methods\n\n| Method      | Type          |\n| ----------- | ------------- |\n| `hide`      | `(): void`    |\n| `isShowing` | `(): boolean` |\n| `remove`    | `(): void`    |\n| `show`      | `(): void`    |\n\n## rough-notation-group\n\n### Properties\n\n| Property             | Attribute            | Type                | Default |\n| -------------------- | -------------------- | ------------------- | ------- |\n| `annotationElements` | `annotationElements` | `WcRoughNotation[]` | []      |\n| `showOnLoad`         | `showOnLoad`         | `boolean`           | false   |\n\n### Methods\n\n| Method | Type       |\n| ------ | ---------- |\n| `show` | `(): void` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatsuuu%2Fvanilla-rough-notation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatsuuu%2Fvanilla-rough-notation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatsuuu%2Fvanilla-rough-notation/lists"}