open-index/open-npm huggingface dataset:
npm package: @mesg-components/button
Description: ## Install
Latest version: 1.2.0

# @MESG-COMPONENTS/BUTTON

## Install

`npm install @mesg-components/button` or `yarn add @mesg-components/button`

## Properties

- **href**: `String`.**Optional** -> _external link path_
- **to**: `[ Object, String ]`.**Optional** -> _internal link path_
- **submit**: `Boolean`.**Optional** -> _determine it's a submit button_
- **primary**: `Boolean`.**Optional** -> _determine it's a primary button_
- **small**: `Boolean`.**Optional** -> _Button size_
- **secondary**: `Boolean`.**Optional** -> _determine it's a secondary button_
- **white**: `Boolean`.**Optional** -> _determine it's a white button_
- **outline**: `Boolean`.**Optional** -> _determine it's a outline button_
- **icon**: `String`.**Optional** -> _icon class name_

## Slot

- `default`

## Example

**Default Button:**

```html
<template>
  <button>Default Button</button>
</template>
```

**Primary and submit Button:**

```html
<template>
  <button primary submit>Primary Button</button>
</template>
```

**Secondary Button with small:**

```html
<template>
  <button secondary small>Secondary Button</button>
</template>
```

**White Button:**

```html
<template>
  <button white>White Button</button>
</template>
```

**Outline Button:**

```html
<template>
  <button outline>Outline Button</button>
</template>
```

**External link Button:**

```html
<template>
  <button :href="www.google.com" target="_blank">External Button</button>
</template>
```

**Internal link Button:**

```html
<template>
  <button :href="/">Internal Button</button>
  <!--  using nuxt-link -->
  <button :to="/">Internal Button</button>
</template>
```

**Button with icon:**

```html
<template>
  <button primary :icon="fal fa-table">With icon Button</button>
</template>
```
npm package: @mesg-components/card
Description: ## Install
Latest version: 2.1.0

# @MESG-COMPONENTS/CARD

## Install

`npm install @mesg-components/card` or `yarn add @mesg-components/card`

## Properties

- **bordered**: `Boolean`, **Optional**, The default is `false` -> _Display border color of card_.
- **thin**: `Boolean`, **Optional**, The default is `false` -> _Display border color of card as thin size_.
- **noShadow**: `Boolean`, **Optional**, The default is `false` -> _Not display card shadow_.
- **borderBottomColor**: `String`, **Optional**, _The default is `undefined` -> Custom border-bottom color of card_.
- **background**: `String`, **Optional**. The default is `white` -> _Custom background color of card_.

## Slot

- `default`

## Example

**Default card:**

```html
<template>
  <Card>Default Card</Card>
</template>
```

**Bordered card:**

```html
<template>
  <Card bordered> Card with bordered</Card>
</template>
```

**Thin card:**

```html
<template>
  <Card thin>Thin card</Card>
</template>
```

**Card without shadow:**

```html
<template>
  <Card no-shadow>Card without shadow</Card>
</template>
```

**Border bottom color card:**

```html
<template>
  <Card border-bottom-color="red">Border bottom color custom card</Card>
</template>
```

**Background card:**

```html
<template background="red">
  <Card>Card background custom </Card>
</template>
```
npm package: @mesg-components/chart
Description: ## Install
Latest version: 1.1.5

# @MESG-COMPONENTS/CHART

## Install

`npm install @mesg-components/chart` or `yarn add @mesg-components/chart`

## Properties

### Chart default properties

- **items**: `[Array | Object]`, **Required**, -> _Data to draw at chart_
- **noTooltip**: `Boolean`, _the default is `false`_, **Optional**, -> _Don't display tooltip_
- **credit**: `Boolean`, _the default is `false`_, **Optional**, -> _Display credit_
- **noLegend**: `Boolean`, _the default is `false`_, **Optional**, -> _Don't display legend_
- **title**: `String`, **Optional**, -> _Text title_
- **titleColor**: `String`, **Optional**, -> _Color of title_
- **titleSize**: `Number` _the default is `36`_, **Optional**, -> _Font-size ot title_
- **optionsTitle**: `Object`, **Optional**, -> _Custom title option_
- **subTitle**: `String`, **Optional**, -> _Text sub-title_
- **subColor**: `String`, **Optional**, -> _Color of sub-title_
- **subSize**: `Number`, **Optional**, -> _Font-size ot sub-title_
- **optionsSub**: `Object`, **Optional**, -> _Custom sub-title option_

## Example

- [Area](Area/README.md)

- [HighStock](HighStock/README.md)

- [Pie](Pie/README.md)
npm package: @mesg-components/choice
Description: ## Install
Latest version: 1.0.3

# @MESG-COMPONENTS/CHOICE

## Install

`npm install @mesg-components/choice` or `yarn add @mesg-components/choice`

## Properties

- **v-model**: `[ String, Number, Array of String ]`, **Optional** -> _default selected value_, **Type `Array of String` use on choice as type `checkbox`**
- **options**: `Array of object`, **Required** -> _Display value_
- **type**: `String`.**Required**, _Value of types `button-group | checkbox | radio | select`_ -> _Display choice component by type_.

## Example

**Type button-group:**

```js
const selected = 'Table'
const options = [
  { key: 1, value: 'Table', preIcon: 'fal fa-table' },
  { key: 2, value: 'Graph', preIcon: 'far fa-chart-area' },
  { key: 3, value: 'Button' },
  { key: 5, value: 'Pie', postIcon: 'far fa-chart-area' },
  { key: 6, value: 'Radio', postIcon: 'fal fa-table' }
]
```

```html
<template>
  <choice type="button-group" v-model="selectValue" />
</template>
```

**Type checkbox:**

```js
const selectValue = [ "30", "100" ]
const options = [
  { key: "10", value: 10 },
  { key: "20", value: 20 },
  { key: "30", value: 30 },
  ...
]
```

```html
<template>
  <choice type="checkbox" :options="options" />
</template>
```

**Type radio:**

```js
const selectValue = 30
const options = [
  { key: "10", value: 10 },
  { key: "20", value: 20 },
  { key: "30", value: 30 },
  ...
]
```

```html
<template>
  <choice type="radio" :options="options" />
</template>
```

**Type select:**

```js
const selectValue = 30
const options = [
  { key: "10", value: 10 },
  { key: "20", value: 20 },
  { key: "30", value: 30 },
  ...
]
```

```html
<template>
  <choice type="select" :options="options" />
</template>
```
npm package: @mesg-components/embed-card
Description: ## Install
Latest version: 1.0.1

# @MESG-COMPONENTS/EMBEDCARD

## Install

`npm install @mesg-components/embed-card` or `yarn add @mesg-components/embed-card`

## Properties

- **url**: `String`, **Required**

## Example

```html
<template>
  <EmbedCard url="www.youtube.com" />
</template>
```
npm package: @mesg-components/footer
Description: ## Install
Latest version: 1.1.0

# @MESG-COMPONENTS/FOOTER

## Install

`npm install @mesg-components/footer` or `yarn add @mesg-components/footer`

## Properties

- **banner**: `String`, **Required**, -> _banner to display on the footer_
- **categories**: `Array of string`, **Required**. _**Example** `["xxx","xxx","xxx",...]`_, -> _Display items on each category values_
- **items**: `Array of object`, **Required**, -> _items to display on the footer_
- **copyright**: `String`, **Optional**, -> _copyright to display on the footer_
- **policy**: `Object`, **Optional**, -> _policy to display on the footer_
- **icons**: `Array of object`, **Optional**, -> _icon class and link path_

## Slot

- define each slot name using _`items_key`_ exists on `categories`

## Example

```js
const image = '../image.svg'
const categories = ['1', '2', '3', '4']
const copyright = '© 2019 My Copyright'
const policy = { text: 'Privacy & Cookie Policy', link: 'https://.../...' }
const icons = [
  { to: 'https://medium.com/...', classIcon: 'fab fa-medium' },
  { to: 'https://github.com/...', classIcon: 'fab fa-github' },
  ...
]
const items = [
  {
    key: '1',
    text: 'Title 1',
    child: [{ id: '1', text: 'xxx', to: '/..' },{ id: '2', text: 'xxx', to: '/path' },]
  },
  { key: '2', text: 'Title 2', to: 'http://.../xxx' },
  {
    key: '3',
    text: 'Title 3',
    child: [{ id: '3', text: 'xxx', to: '/12' },{ id: '4', text: 'xxx', to: 'https://medium.com/...' }]
  }
]
```

**Default:**

```html
<template>
  <footer :banner="banner" :copyright="copyRightText" :items="items" :policy="policyText" :categories="categories" :icons="icons">

    <template v-slot:1="{ item }">
      <h1 style="margin: 0">{{item.text}}</h1>
      <ul>
        <li v-for="(child, i) in item.child" :key="i">
          <a :href="child.to">{{child.title}}</a>
        </li>
      </ul>
    </template>

    <template v-slot:2="{ item }">
      <a :href="item.to">
        <h1 style="margin: 0">{{item.text}}</h1>
      </a>

    <template v-slot:3="{ item }">
      <h1 style="margin: 0">{{item.text}}</h1>
      <ul>
        <li v-for="(child, i) in item.child" :key="i">
          <a :href="child.to">{{child.text}}</a>
        </li>
      </ul>
    </template>
  </footer>
</template>
```
npm package: @mesg-components/header
Description: ## Install
Latest version: 2.0.1

# @MESG-COMPONENTS/HEADER

## Install

`npm install @mesg-components/header` or `yarn add @mesg-components/header`

## Properties

- **title**: `String`.**Required** -> _title to display on the header_
- **description**: `String`.**Optional** -> _description to display on the header_
- **image**: `String`.**Optional** -> _image to render on the right side of the header, **if not present, the title and description should take 100% of the width.**_

## Slot

- default to display the description content. **Only rendered if description property is not set.**

## Example

**Default:**

```html
<template>
  <header title="The title" description="the description" image="https://..." />
</template>
```

**Header with a slot to describe:**

```html
<template>
  <header title="The title" image="https://...">
    <p>My description</p>
    <button>xxx</button>
  </header>
</template>
```

**No picture, header in full width:**

```html
<template>
  <header title="The title">
    <p>My description</p>
    <button>xxx</button>
  </header>
</template>
```
npm package: @mesg-components/menu
Description: ## Install
Latest version: 1.0.9

# @MESG-COMPONENTS/MENU

## Install

`npm install @mesg-components/menu` or `yarn add @mesg-components/menu`

## Properties

- **logo**: `String`, **Required**, -> _banner to display on the footer_.
- **isNuxt**: `Boolean`, **Optional**, -> _isNuxt declare for nuxtjs framework to using nuxt-link_.
- **items**: `Array of object`, **Optional**, -> _items to display on the footer_.
  - **`Object` inside `items`:**
    - **text**: `String` , **Required**, _to display menu title_
    - **to**: `String`, **Required**, _link path_
    - **type**: `String`, **Optional**, _to display title at type button_
    - **subMenu**: `Array of object`, **Optional**, Example `[{ text: '',to: '' }, { text: '',to: '' },...]`, _to display dropdown sub-menu_

## Example

```js
import logo from '../assets/img/MESG-logo-horizontal-purple.svg'

const items = [
  {
    text: 'Technology',
    to: '#',
    subMenu: [
      { text: 'Orchestrator', to: '' },
      { text: 'SDK', to: '' },
      { text: 'Marketplace', to: '' },
      { text: 'Enterprise', to: '' }
    ]
  },
  {
    text: 'Developers',
    to: '#',
    subMenu: [
      { text: 'Orchestrator', to: '' },
      { text: 'SDK', to: '' },
      { text: 'Marketplace', to: '' },
      { text: 'Enterprise', to: '' }
    ]
  },
  { text: 'Showcase', to: '/' },
  { text: 'Contributions', to: '/' },
  { text: 'Token' },
  { text: 'Get Started', to: '/', type: 'button' }
]
```

**Default:**

```html
<template>
  <menu :banner="banner" :items="items" />
</template>
```

**Nuxt Framework:**

```html
<template>
  <menu :banner="banner" :items="items" is-nuxt />
</template>
```
npm package: @mesg-components/side-menu
Description: ## Install
Latest version: 1.1.0

# @MESG-COMPONENTS/SIDE-MENU

## Install

`npm install @mesg-components/side-menu` or `yarn add @mesg-components/side-menu`

## Properties

- **items**: `Array of Object`, **Required**. -> _values to display_

## Slot

- using `key` value from items to custom elements to display.

## Example

**Default:**

```javascript
const items = [
  { key: 'general', text: 'General', href: '#general' },
  { key: 'transaction', text: 'Transactions', href: '#transactions' },
  { key: 'compatibility', text: 'Compatibility', href: '#compatibility' },...]
```

```html
<template>
  <side-menu :items="items" />
</template>
```

**Custom:**

```javascript
const customItems = [
  { key: 'general', text: 'General', href: '#general' },
  { key: 'transaction', text: 'Transactions', href: '#transactions' },
  { key: 'compatibility',
    listItem: [
      {text: 'xxx',icon: 'xxx', href: '/xxx'},
      {text: 'xxx',icon: 'xxx', href: '/xxx'}
    ]
  },
  ...
]
```

```html
<template>
  <side-menu :items="customItems">
    <template v-slot:general="{ item }">
      <a :href="item.href" class="link-secondary">
        <i class="chevron right"></i>
        <span>{{item.text}}</span>
      </a>
    </template>

    <template v-slot:transaction="{ item }">
      <a :href="item.href" class="link-secondary">
        <i class="chevron right"></i>
        <span>{{item.text}}</span>
      </a>
    </template>

    <template v-slot:compatibility="{ item }">
      <ul>
        <li v-for="(value,i) in item" :key="i">
          <a :href="value.href">
            <i :class="value.icon"></i>
            {{value.name}}
          </a>
        </li>
      </ul>
    </template>
    ...
  </side-menu>
</template>
```
npm package: @mesg-components/snackbar
Description: ## Install
Latest version: 1.0.5

# @MESG-COMPONENTS/SNACKBAR

## Install

`npm install @mesg-components/snackbar` or `yarn add @mesg-components/snackbar`

## Properties

- **top**: `Boolean`, **Optional**. _The default is `false`_
- **bottom**: `Boolean`, **Optional**. _The default is `false`_
- **left**: `Boolean`, **Optional**. _The default is `false`_
- **right**: `Boolean`, **Optional**. _The default is `false`_
- **timeout**: `Number`, **Optional**. _The default is `6000`_
- **text**: `String`, **Optional**.
- **success**: `Boolean`, **Optional**. _The default is `false`_
- **info**: `Boolean`, **Optional**. _The default is `false`_
- **error**: `Boolean`, **Optional**. _The default is `false`_
- **v-model**: `Boolean`, **Required**.

## Slot

- `default`

## Example

```js
const openSnackbar = true
```

**Default:**

```html
<template>
  <snack-bar :text="items" v-model="openSnackbar">Outline Button</snack-bar>
</template>
```

**Custom position:**

```html
<template>
  <Snackbar left bottom text="Hello, I'm a snackbar" v-model="openSnackbar" />
</template>
```

**Custom timeout:**

```html
<template>
  <Snackbar timeout="2000" text="Hello, I'm a snackbar" v-model="openSnackbar" />
</template>
```

**Custom slot:**

```html
<template>
  <Snackbar v-model="openSnackbar">
    ... value or html elements ...
  </Snackbar>
</template>
```
npm package: @mesg-components/social-network
Description: ## Install
Latest version: 1.0.1

# @MESG-COMPONENTS/SOCIAL-NETWORK

## Install

`npm install '@mesg-components/social-network'` or `yarn add '@mesg-components/social-network'`

## Properties

- **text**: `String`, **Optional**.
- **recommandedAccount**: `String`, **Optional**. _The default is `mesgfoundation`_
- **counter**: `Boolean`, **Optional**. _The default is `false`_

## Slot

- none

## Example

**Default:**

```html
<template>
  <TweetButton url="https://mesg.com" text="Check out the latest rewarded contribution to the @MESGfoundation by [Name]. #MESGRewards" />
</template>
```
npm package: @mesg-components/tab
Description: ## Install
Latest version: 1.0.5

# @MESG-COMPONENTS/TAB

## Install

`npm install @mesg-components/tab` or `yarn add @mesg-components/tab`

## Properties

- **items**: `Array of object`, **Required**

## Slot

- define slot name using `tab-<ITEMS_KEY_VALUE>` for tab.
- define slot name using `section-<ITEMS_KEY_VALUE>` for section to attach at tab

## Example

**Default:**

```js
const items = [
  { key: 'github', text: 'Github' },
  { key: 'gitlab', text: 'Gitlab' },
  { key: 'bitbuckget', text: 'Bitbucket' },
  { key: 'mesg', text: 'MESG' }
]
```

```html
<template>
  <Tab :items="items" />
</template>
```

**Custom:**

```js
const customItems = [
  { key: 'github', text: 'Github' },
  { key: 'gitlab', text: 'Gitlab' },
  { key: 'bitbuckget', text: 'Bitbucket' },
  {
    key: 'mesg',
    text: 'MESG',
    description:
      'MESG SDK A suite of tools to connect together services with other devices and applications. Control the flow of data and level of security between your whole stack of technologies.'
  }
]
```

```html
<template>
  <Tab :items="customItems">
    <template v-slot:tab-github="{item}">
      <img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg"></img>
    </template>

    <template v-slot:section-github="{ item }">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </template>

    <template v-slot:tab-mesg="{item}">
      <img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg"></img>
    </template>

    <template v-slot:section-mesg="{ item }">
      <h3>{{item.text}}</h3>
      <p>{{item.description}}</p>
    </template>
    ...
    </Tab>`
</template>
```
npm package: @mesg-components/table
Description: ## Install
Latest version: 1.1.4

# @MESG-COMPONENTS/TABLE

## Install

`npm install @mesg-components/table` or `yarn add @mesg-components/table`

## Properties

- **headers**: `Array of object`, **Required**.
- **items**: `Array of object`, **Required**.
- **hideHeader**: `Boolean`, **Optional**, The default is `false`. _determine header is display_
- **expandable**: `Boolean`, **Optional**, The default is `false`. _determine it's a expandable table_
- **compact**: `Boolean`, **Optional**, The default is `false`. _set table width 100% without padding or margin_.

## Slot

- define slot name using `item_<HEADERS_VALUE>`

## Example

```js
const items = new Array(101).fill(null).map((x, i) => {
  const percentage = Math.random() * 10
  const volume = Math.random() * 5000000
  return {
    id: i + 1,
    date: new Date() - i * 24 * 60 * 60 * 1000,
    tradeVolume: volume,
    tokenRelease: volume * percentage,
    percentage: percentage,
    txhash: '0x'
  }
})

const headers = [
  { key: 'id', text: 'ID', align: 'left', value: 'id' },
  { key: 'date', text: 'Date', align: 'left', value: 'date' },
  { key: 'volume', text: 'Traded Volume', align: 'center', value: 'tradeVolume' },
  { key: 'token', text: 'Token Release', align: 'center', value: 'tokenRelease' },
  { key: 'percentage', text: 'Percentage', align: 'center', value: 'percentage' },
  { key: 'link', text: 'Link', align: 'center', value: 'link' }
]
```

**Default:**

```html
<template>
  <div>
    <table :items="items" :headers="headers">
      <template v-slot:item_id="{ item }"
        >{{ item.id }}</template
      >
      <template v-slot:item_date="{ item }"
        >{{ item.date }}</template
      >
      <template v-slot:item_tradeVolume="{ item }"
        >{{ item.tradeVolume }}</template
      >
      <template v-slot:item_tokenRelease="{ item }"
        >{{ item.tokenRelease }}</template
      >
    </table>
  </div>
</template>
```

**Expandable table:**

```html
<template>
  <div>
    <table :items="items" :headers="headers" expandable>
      <template v-slot:item_id="{ item }"
        >{{ item.id }}</template
      >
      <template v-slot:item_date="{ item }"
        >{{ item.date }}</template
      >
      <template v-slot:expand="{ item }">
        <ul>
          <li>
            <div>
              <label>Traded Volume: {{ item.tradeVolume }}</label>
            </div>
          </li>
        </ul>
      </template>
    </table>
  </div>
</template>
```

**Disable header table:**

```html
<template>
  <table :items="items" :headers="headers" hide-header>
    ...
  </table>
</template>
```

**Compact table:**

```html
<template>
  <Card>
    <table :items="items" :headers="headers" compact>
      ...
    </table>
  </Card>
</template>
```
npm package: @mesg-components/tag-label
Description: ## Install
Latest version: 2.0.2

# @MESG-COMPONENTS/TAGLABEL

## Install

`npm install @mesg-components/tag-label` or `yarn add @mesg-components/tag-label`

## Properties

- **type**: `String`, **Optional**, Values of types are `blue | orange | green | purple` and _default type is `blue`_
- **size**: `String`, **Optional**, The default value is `small`

## Example

```html
<template>
  <TagLabel type="purple">Purple tag</TagLabel>
</template>
```
npm package: @mesg-components/textfield
Description: ## Install
Latest version: 1.0.4

# @MESG-COMPONENTS/TEXTFIELD

## Install

`npm install @mesg-components/textfield` or `yarn add @mesg-components/textfield`

## Properties

- **type**: `String`, **Optional**, _The default type is `text`_
- **label**: `String`, **Required**.
- **placeholder**: `String`, **Required**.
- **v-model**: `String`, **Required**.

## Example

```html
<template>
  <div class="container">
    <TextField type="text" label="Link to your contribution" placeholder="Example ..." v-model="value" />
  </div>
</template>
```
npm package: @mesg-components/type-form-popup
Description: ## Install
Latest version: 1.0.2

# @MESG-COMPONENTS/TypeFormPopup

## Install

`npm install @mesg-components/type-form-popup` or `yarn add @mesg-components/type-form-popup`

## Properties

- **id**: `String`, **Required**, _id of the form_
- **url**: `String`, **Optional**, _The default is `https://mesgfoundation.typeform.com/to`_

## Slot

- `default`

## Example

**Default Button:**

```html
<template>
  <TypeFormPopup id="bOJ0qz">
    <a>click to open</a>
  </TypeFormPopup>
</template>
```

**Primary and submit Button:**

```html
<template>
  <TypeFormPopup id="bOJ0qz">
    <button primary>click to open</button>
  </TypeFormPopup>
</template>
```