# vue-annotated-text

> ![Example output](https://github.com/cyclecycle/vue-annotated-text/blob/master/example_output.png)

Latest version **0.1.10** (published 2019-07-31) · 0 weekly downloads

## Install

```sh
npm install vue-annotated-text
pnpm add vue-annotated-text
yarn add vue-annotated-text
bun add vue-annotated-text
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.10 |
| Published | 2019-07-31 |
| First published | 2019-05-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 880 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | cyclecycle |

## Links

- npm: https://www.npmjs.com/package/vue-annotated-text
- npm.io page: https://npm.io/package/vue-annotated-text

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [thenby](https://npm.io/package/thenby.md) ^1.3.0
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [color-mixer](https://npm.io/package/color-mixer.md) github:kosamari/color-mixer
- [flatten-overlapping-ranges](https://npm.io/package/flatten-overlapping-ranges.md) ^1.0.0

## Recent versions

- 0.1.10 (latest) — 2019-07-31
- 0.1.9 — 2019-06-14
- 0.1.8 — 2019-06-14
- 0.1.7 — 2019-06-14
- 0.1.6 — 2019-06-02
- 0.1.5 — 2019-06-02
- 0.1.4 — 2019-06-02
- 0.1.3 — 2019-06-02
- 0.1.2 — 2019-05-29
- 0.1.1 — 2019-05-29
- 0.1.0 — 2019-05-29

## README

# vue-annotated-text

![Example output](https://github.com/cyclecycle/vue-annotated-text/blob/master/example_output.png)

## Features

- Renders the text as a set of spans representing the segments composing the sentence
- These spans can be associated with custom styles or events
- Overlapping annotations are represented by mixed colors

## Installation

With npm:

```bash
npm install vue-annotated-text
```

With yarn:

```bash
yarn add vue-annotated-text
```

## Example usage

```html
<template>
    <div>
        <AnnotatedText
            :text="text"  <!-- The text to be annotated -->
            :annotations="annotations"  <!-- The array of annotations -->
            :getAnnotationColor="getAnnotationColor"  <!-- Function called to get color value to signal the annotation -->
            :getSpanClasses="getSpanClasses"  <!-- function returning CSS classes to apply to the rendered <span> element -->
            :spanEvents="spanEvents"  <!-- Event listeners to apply to the <span> elements -->
            :spanAttributes="spanAttributes"  <!-- Any HTML attributes to apply to the <span> elements -->
        />
    </div>
</template>
```
```js
<script>
import AnnotatedText from 'vue-annotated-text'

export default {
  name: 'MyComponent',
  components: {
    AnnotatedText
  },
  data() {
    return {
      text: "Forging is performed by a smith using hammer and anvil.",
      annotations: [
        {  // All annotations must have a unique 'id', and values for 'start' and 'length'
          id: "forging",
          start: 0,
          length: 7,
          class: "process"
        },
        {
          id: "smith_using_hammer",
          start: 26,
          length: 18,
          class: "process"
        },
        {
          id: "hammer",
          start: 38,
          length: 6,
          class: "tool"
        },
        {
          id: "anvil",
          start: 49,
          length: 5,
          class: "tool"
        }
      ],
      spanEvents: {
        'click': function(e, annotations) {  // All event callbacks take arguments: (event, annotations)
          console.log(annotations)
        },
      },
    }
  },
  methods: {
    getAnnotationColor: function(annotation) {
      const classToColor = {
        'process': '#f44283',
        'tool': '#41acf4',
      }
      const color = classToColor[annotation.class]
      return color  // Must return hex value
    },
    getSpanClasses: function(span) {
      const classes = ['my-span-class']
      const annotationIds = span.annotationIds
      if (annotationIds.length > 0) {
        classes.push('annotated')
      }
      return classes
    }
  }
}
</script>
```
```css
<style>
.my-span-class:hover {
  outline: 1px solid black;
}
.annotated {
  font-weight: bold;  
}
</style>
```

## Acknowledgements

Uses:

- [flatten-overlapping-ranges](https://github.com/derhuerst/flatten-overlapping-ranges)
- [color-mixer](https://github.com/kosamari/color-mixer)

## TODO

- Add default info box on hover

---
_Source: https://npm.io/package/vue-annotated-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._