Document Extends

If you import extends, for it to be documented you need to add in the header the mixin tag @mixin, for example

// src/extends/Base.vue

<template>
  <div>
    <h4>{{ color }}</h4>
    <!--the appropriate input should go here-->
  </div>
</template>
<script>
/**
 * @mixin
 */
export default {
  props: {
    /**
    * The color for the button example
    */
    colorExtends: {
      type: String,
      default: '#333'
    },
  },
}
</script>

<template>
<!-- -->
</template>
<script>
// src/components/Button/Button.vue

import Base from '../../extends/Base';
export default {
  name: 'buttonComponent',
  extends: Base,
  props: {
    /**
    * The size of the button
    * `small, normal, large`
    */
    size: {
      default: 'normal'
    },
    /**
    * Add custom click actions.
    **/
    onCustomClick: {
      default: () => () => null,
    },
  },
  /* ... */
}
</script>

Assets 2

01 Dec 22:41

rafaesc

2.2.0

824ab59

Updated slots documentation

Fixed: Fix array prop
Feat: Added parseSource #14
Updated: Slots documentation #12

Breaking changes

In this version, for documentation slot, you need to add @slots in the template.

AFTER

<template>
  <div>
    <!-- Use slot header -->
    <slot name="header"></slot>

    <!-- Use slot footer -->
    <slot name="footer"></slot>
  </div>
</template>

BEFORE

<template>
  <div>
    <!-- @slot Use slot header -->
    <slot name="header"></slot>

    <!-- @slot Use slot footer -->
    <slot name="footer"></slot>
  </div>
</template>

Assets 2

28 Oct 09:27

rafaesc

v2.1.3

f3fa5c4

Added documentation of slots

Slot

input in component

<template>
  <div>
    <!-- Use slot header -->
    <slot name="header"></slot>

    <!-- Use slot footer -->
    <slot name="footer"></slot>
  </div>
</template>

output in JSON

"slots": {
    "header": {
      "description": "Use this slot header"
    },
    "footer": {
      "description": "Use this slot footer"
    }
}

Assets 2

01 Oct 06:58

rafaesc

v2.1.1

b37cb9b

Added event support

Fixed: some bugs
Added: Model in props
Added: Events documentation

Model in prop

input in component

export default {
  props: {
    /**
     * Model example
     * @model
     */
    value: {
      type: String,
      required: true
    }
  }
  /* ... */
}

output in JSON

"v-model": {
  "required": "true",
  "type": {
    "name": "string"
  },
  "description": "Model example"
}

Events

input in component

/**
 * Success event.
 *
 * @event success
 * @type {object}
 */
this.$emit('success', {
  demo: 'example',
})

output in JSON

"events": {
  "success": {
    "description": "Success event.",
    "type": {
      "names": [
        "object"
      ]
    },
    "comment": "/**\n     * Success event.\n     *\n     * @event success\n     * @type {object}\n     */"
  }
}

Assets 2