@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:

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' }
]

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

Type checkbox:

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

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

Type radio:

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

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

Type select:

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

<template>
  <choice type="select" :options="options" />
</template>