feat: RoughNotationGroup component

Author: Leecason

README.md

@@ -15,9 +15,8 @@ A Vue wrapper for [RoughNotation](https://github.com/pshihn/rough-notation), a s
 - [Installation](#installation)
 - [Usage](#usage)
 - [Global options](#global-options)
-- [Props](#props)
-- [Events](#events)
-- [TODO](#todo)
+- [RoughNotation Component](#roughnotation-component)
+- [RoughNotationGroup Component](#roughnotationgroup-component)
 - [License](#license)
 
 ## Demo
@@ -48,17 +47,6 @@ import VueRoughNotation from 'vue-rough-notation';
 Vue.use(VueRoughNotation);
 ```
 
-template:
-
-```html
-<RoughNotation
-  :is-show="isShow"
-  type="underline"
->
-  <span>Rough Notation is awesome</span>
-</RoughNotation>
-```
-
 ## Global options
 
 The default global options are:
@@ -88,9 +76,22 @@ import VueRoughNotation from 'vue-rough-notation';
 Vue.use(VueRoughNotation, options);
 ```
 
-## Props
+## RoughNotation Component
+
+### Usage
+
+```html
+<RoughNotation
+  :is-show="isShow"
+  type="underline"
+>
+  <span>Rough Notation is awesome</span>
+</RoughNotation>
+```
+
+### Props
 
-### type
+#### type
 
 **Type**: `string`
 
@@ -105,7 +106,7 @@ This is a mandatory field. It sets the annotation style. Following are the list
 - **strike-through**: This style draws a box around the element.
 - **crossed-off**: This style draws a box around the element.
 
-### isShow
+#### isShow
 
 **Type**: `boolean`
 
@@ -115,7 +116,7 @@ This is a mandatory field. It sets the annotation style. Following are the list
 
 Whether draws the annotation.
 
-### animate
+#### animate
 
 **Type**: `boolean`
 
@@ -125,7 +126,7 @@ Whether draws the annotation.
 
 Turn on/off animation when annotating.
 
-### animationDuration
+#### animationDuration
 
 **Type**: `number`
 
@@ -135,7 +136,7 @@ Turn on/off animation when annotating.
 
 Duration of the animation in milliseconds.
 
-### animationDelay
+#### animationDelay
 
 **Type**: `number`
 
@@ -145,7 +146,7 @@ Duration of the animation in milliseconds.
 
 Delay in animation in milliseconds.
 
-### color
+#### color
 
 **Type**: `string`
 
@@ -155,7 +156,7 @@ Delay in animation in milliseconds.
 
 Representing the color of the annotation sketch.
 
-### strokeWidth
+#### strokeWidth
 
 **Type**: `number`
 
@@ -165,7 +166,7 @@ Representing the color of the annotation sketch.
 
 Width of the annotation strokes.
 
-### padding
+#### padding
 
 **Type**: `number`
 
@@ -175,27 +176,57 @@ Width of the annotation strokes.
 
 Padding between the element and roughly where the annotation is drawn.
 
-### tag
+#### tag
 
 **Type**: `string`
 
 **Required**: `false`
 
-**Default**: `undefined'`
+**Default**: `'span'`
 
 String 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
 
-## Events
+### Events
 
-### init
+#### init
 
 **Parameters**: [`Annotation Object`](https://github.com/pshihn/rough-notation#annotation-object)
 
 Called when the component is initialized.
 
-## TODO
+## RoughNotationGroup Component
 
-- [ ] Annotation Group
+### Usage
+
+```html
+<RoughNotationGroup :is-show="isShow">
+  <RoughNotation type="underline">Rough Notation</RoughNotation>
+  <RoughNotation type="box">is</RoughNotation>
+  <RoughNotation type="highlight">awesome</RoughNotation>
+</RoughNotation>
+```
+
+### Props
+
+#### isShow
+
+**Type**: `boolean`
+
+**Required**: `false`
+
+**Default**: `false`
+
+Show/Hides the annotations
+
+#### tag
+
+**Type**: `string`
+
+**Required**: `false`
+
+**Default**: `'div'`
+
+String 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
 
 ## License
 

src/component.js renamed to src/components/RoughNotation.js

@@ -23,7 +23,7 @@ export default (options) => ({
 
     tag: {
       type: String,
-      default: undefined,
+      default: 'span',
     },
 
     isShow: {
@@ -74,6 +74,7 @@ export default (options) => ({
     });
 
     this.$emit('init', this.annotation);
+    this.$_dispatchGroup('annotation:add');
 
     this.$watch('isShow', (value) => {
       if (value) {
@@ -85,6 +86,7 @@ export default (options) => ({
   },
 
   beforeDestroy () {
+    this.$_dispatchGroup('annotation:remove');
     this.annotation && this.annotation.remove();
   },
 
@@ -100,6 +102,23 @@ export default (options) => ({
     isShowing () {
       return !!(this.annotation && this.annotation.isShowing());
     },
+
+    $_dispatchGroup (event) {
+      let parent = this.$parent || this.$root;
+      let name = parent.$options.name;
+
+      while (parent && (!name || name !== 'RoughNotationGroup')) {
+        parent = parent.$parent;
+
+        if (parent) {
+          name = parent.$options.name;
+        }
+      }
+
+      if (parent) {
+        parent.$emit.call(parent, event, this.annotation);
+      }
+    },
   },
 
   render (h) {

src/components/RoughNotationGroup.js

@@ -0,0 +1,82 @@
+import { annotationGroup } from 'rough-notation';
+
+export default {
+  name: 'RoughNotationGroup',
+
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  data: () => ({
+    annotations: [],
+  }),
+
+  watch: {
+    isShow (value) {
+      if (value) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    },
+
+    annotations(annotations) {
+      this.group = annotationGroup(annotations);
+    },
+  },
+
+  created () {
+    this.$on('annotation:add', (annotation) => {
+      this.$_add(annotation);
+    });
+
+    this.$on('annotation:remove', (annotation) => {
+      this.$_remove(annotation);
+    });
+  },
+
+  mounted () {
+    if (this.isShow) {
+      this.show();
+    }
+  },
+
+  methods: {
+    show () {
+      this.group && this.group.show();
+    },
+
+    hide () {
+      this.group && this.group.hide();
+    },
+
+    $_add (annotation) {
+      this.annotations.push(annotation);
+    },
+
+    $_remove (annotation) {
+      const index = this.annotations.indexOf(annotation);
+      if (index > -1) {
+        this.annotations.splice(index, 1);
+      }
+    },
+  },
+
+  render(h) {
+    const slot = this.$slots.default;
+
+    if (this.tag) {
+      return h(this.tag, null, slot);
+    }
+
+    return slot && slot[0];
+  },
+};

src/index.js

@@ -1,10 +1,12 @@
 import { defaultOptions } from './options';
-import RoughNotation from './component';
+import RoughNotation from './components/RoughNotation';
+import RoughNotationGroup from './components/RoughNotationGroup';
 
 const VueRoughNotationPlugin = {
   /**
    * install function
-   * @param  {Vue} Vue
+   * @param {Vue} Vue
+   * @param {Object} options RoughNotation options
    */
   install (Vue, options = {}) {
     const finalOptions = {
@@ -16,6 +18,9 @@ const VueRoughNotationPlugin = {
 
     Vue.component('rough-notation', RoughNotationComponent);
     Vue.component('RoughNotation', RoughNotationComponent);
+
+    Vue.component('rough-notation-group', RoughNotationGroup);
+    Vue.component('RoughNotationGroup', RoughNotationGroup);
   },
 };
 

test/index.spec.js

@@ -7,15 +7,18 @@ describe('Vue Rough Notation Test Suite', () => {
 
     expect(localVue.options.components.RoughNotation).toBeUndefined();
     expect(localVue.options.components['rough-notation']).toBeUndefined();
+    expect(localVue.options.components.RoughNotationGroup).toBeUndefined();
+    expect(localVue.options.components['rough-notation-group']).toBeUndefined();
 
     localVue.use(VueRoughNotation);
 
     expect(localVue.options.components.RoughNotation).toBeDefined();
     expect(localVue.options.components['rough-notation']).toBeDefined();
+    expect(localVue.options.components.RoughNotationGroup).toBeDefined();
+    expect(localVue.options.components['rough-notation-group']).toBeDefined();
   });
 
-  describe('component', () => {
-    // install plugin
+  describe('RoughNotation component', () => {
     const localVue = createLocalVue();
     localVue.use(VueRoughNotation);
     const RoughNotationComp = localVue.options.components.RoughNotation;
@@ -46,8 +49,8 @@ describe('Vue Rough Notation Test Suite', () => {
       expect(annotation.isShowing()).toBe(false);
     });
 
-    test('is a renderless component by default', () => {
-      expect(wrapper.html()).toEqual(domStr);
+    test('wrapped by `span` by default', () => {
+      expect(wrapper.html()).toEqual(`<span>${domStr}</span>`);
     });
   });
 });