<bpa-accordion>
  <bpa-accordion-item>
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

<bpa-accordion>
  <bpa-accordion-item open>
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item open>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

<bpa-accordion>
  <bpa-accordion-item title="Custom title text">
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item>
    <template v-slot:title>
      <mark>Custom title Html</mark>
    </template>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

//main.js
import Vue from 'vue'

import piman from "@yasai/piman";
import '@yasai/piman/dist/piman.css';
Vue.use(piman)

// nuxt.config.js
export default {
  plugins: [
    '@/plugins/piman.js',
  ],
}

// create a file bp-a11y.js in /plugins
import Vue from 'vue'
import piman from "@yasai/piman";
Vue.use(piman)

<bpa-button theme="primary">Button</bpa-button>

<bpa-button size="small">Button</bpa-button>

<bpa-button disabled>Button</bpa-button>

<bpa-button :loading="true">Button</bpa-button>

<bpa-card>
  Cotnent
</bpa-card>

<bpa-card nopadding>
  Cotnent
</bpa-card>

<bpa-card 
  header="card header text"
  footer="card footer text"
>
  Cotnent
</bpa-card>

<bpa-card>
  <template v-slot:header>
    <mark>Card Header</mark>
  </template>
  Content
  <template v-slot:footer>
    <bpa-button>Card Footer Button</bpa-button>
  </template>
</bpa-card>

<bpa-card shadow>
  Cotnent
</bpa-card>

<bpa-checkbox value="1" v-model="demoModel">Checkbox</bpa-checkbox>

<bpa-dropdown v-model="value" :options="options" theme="primary" @click="onClick"/>

<bpa-checkbox value="1" v-model="demoModel" disabled>Checkbox</bpa-checkbox>

<bpa-checkbox value="1" v-model="demoModel" name="demo">Checkbox</bpa-checkbox>
<bpa-checkbox value="2" v-model="demoModel" name="demo">Checkbox</bpa-checkbox>

demoModel: ["1", "2"]

<bpa-dropdown v-model="value" :options="options" size="small" @click="onClick"/>

<bpa-dropdown v-model="value" :options="options" placeholder="自訂文字" @click="onClick"/>

<bpa-dropdown v-model="value" :options="options" theme="primary" disabled @click="onClick"/>

<bpa-dropdown v-model="value" :options="options" @click="onClick">
  <template v-slot:prefix>Prefix</template>
  <template v-slot:affix>Affix</template>
</bpa-dropdown>

<bpa-dropdown v-model="value" :options="options" fixed @click="onClick"/>

<bpa-form-item labelFor="bpa-dropdown-{id}-btn">
	<bpa-dropdown v-model="value" :options="options" :id="{id}" @click="onClick"/>
</bpa-form-item>

<bpa-dropdown v-model="value" :options="options" optionWidth="100px" @click="onClick"/>

//data
options: [
  { 
    type: 'link',
    url: '/',
    label: 'Internal Link',
  },
  { 
    type: 'external-link',
    url: 'https://google.com',
    label: 'External Link',
  },
  { 
    label: 'Text',
  }
]

//methods
onClick(item: any){
  console.log(item);
}

<template>
  <div>
    <section>
      <h2>訊息提示</h2>
      <article>
        <section>
          <h3>基本</h3>
          <bpa-button @click="openMsg1">提示</bpa-button>
        </section>
        <section>
          <h3>前綴</h3>
          <bpa-button @click="openMsg2">純文字</bpa-button>
          <bpa-button @click="openMsg3">客製化前綴（具有危險性）</bpa-button>
        </section>
        <section>
          <h3>展示時間</h3>
          <bpa-button @click="openMsg4">顯示5秒鐘</bpa-button>
          <bpa-button @click="openMsg9">永不關閉（主動關閉）</bpa-button>
        </section>
        <section>
          <h3>主題色</h3>
          <bpa-button @click="openMsg5">Normal</bpa-button>
          <bpa-button @click="openMsg6">Success</bpa-button>
          <bpa-button @click="openMsg7">Warning</bpa-button>
          <bpa-button @click="openMsg8">Danger</bpa-button>
        </section>
        <section>
          <h3>另一種寫法</h3>
          <bpa-button @click="openMsg10">另一種寫法</bpa-button>
        </section>
        <section>
          <h3>關閉觸發</h3>
          <bpa-button @click="openMsg11">關閉訊息觸發</bpa-button>
        </section>
      </article>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Bpa from "@/components";
const { Msg } = Bpa
export default Vue.extend({
  methods: {
    openMsg1() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg2() {
      (this as any).$msg({
        prefix: '⚠',
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg3() {
      (this as any).$msg({
        prefix: '<img src="favicon.ico" alt=""/>',
        dangerHTML: true,
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg4() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 5000
      })
    },
    openMsg5() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg6() {
      (this as any).$msg.success({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg7() {
      (this as any).$msg.warning({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg8() {
      (this as any).$msg.danger({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg9() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 0
      })
    },
    openMsg10() {
      Msg({
        prefix: '<img src="favicon.ico" alt=""/>',
        dangerHTML: true,
        msg: '很短',
        duration: 0,
        theme: 'primary',
      })
    },
    openMsg11() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 0,
        onClose: function(){
          alert('關閉了')
        }
      })
    },
  },
})
</script>

<bpa-input v-model="value" size="small"/>

<bpa-input v-model="value" placeholder="Please enter here!"/>

<bpa-input v-model="value" disabled/>

<bpa-input v-model="value" required/>

<bpa-input v-model="value" readonly/>

<bpa-input v-model="value" error/>

<bpa-input v-model="value" accesskey="K"/>

<bpa-input v-model="value" disabledClear/>

<!-- password -->
<bpa-input v-model="value" type="password"/>

<!-- multiple lines -->
<bpa-input v-model="value" type="textarea"/>

<bpa-form
  :model="exampleForm"
  ref="refExampleForm"
  :rules="exampleRules"
>
  <bpa-form-item
    label="姓名"
    prop="name"
    required
    labelFor="thisIDIsMustTheSame"
    @validate="onValidate"
  >
    <bpa-input
      v-model="exampleForm.name"
      id="thisIDIsMustTheSame"
    />
  </bpa-form-item>
</bpa-form>

data() {
  return {
    exampleRules: {
      name: [
        { required: true, message: 'name is required' },
        { min: 3, max: 5, message: 'at least 3 to 5 words', trigger: 'change' }
      ]
    }
  }
}

// required
const rules = {
  input:[{ required: true, message: '此欄位必填', trigger: 'blur' }]
}

// multiple
const rules = {
  check:[{ required: true, type:'array', message: 'please check', trigger: 'change' }]
}

// multiple
const rules = {
  check:[{ required: true, type:'array', message: 'please check', trigger: 'change' }]
}

// max and min
const rules = {
  check:[{ min:0, max: 3, type:'array', message: 'please check(max 3)', trigger: 'change' }]
}

// password
const form = {
   password:'',
   confirm:''
 }
 const validatePsw = (rule: Array<any>, value: string, callback: (par?: any)=>{}) => {
   if (value !== form.password) {
     let msg = 'Not Match!'
     callback(new Error(msg));
   } else {
     callback();
   }
 }
 const rules = {
   confirm:[
     { required: true, validator: validatePsw, trigger:'blur'}
   ],
 }

// regular express
const rules = {
   password:[
     { 
       pattern: /(?=.{12,})((?=.*\d)(?=.*[a-z])(?=.*[A-Z])|(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_])|(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_])).*/,  
       trigger: 'blur' 
     }
   ],
 }ja

<fieldset class="bpa-fieldset">
  <legend>Experience</legend>
  <div class="bpa-fieldset-container">
    <bpa-form-item
      label="Company"
      prop="company"
      labelFor="testModelId2"
     >
      <bpa-input
         v-model="exampleForm.company"
         id="testModelId2"
      />
    </bpa-form-item>
  </div>
</fieldset>

<bpa-pagination
  :total="totalPages"
  :current-page.sync="currentPage"
  :pager-count="pagerCount"
  :pageSize="pageSize"
  :pageSizeOptions="pageSizeOptions"
  :layout=['total_item', 'total_page', 'page_size', 'first', 'last', 'jump']
  @change:page="onChangePage"
  @change:pageSize="onChangeSize"
/>

<bpa-popover>content</bpa-popover>

<bpa-popover size="small">small</bpa-popover>

<bpa-popover theme="primary">primary</bpa-popover>

<bpa-popover nopadding>content</bpa-popover>

<bpa-popover title="title">content</bpa-popover>

<bpa-popover>
  <template v-slot:title>
    <mark>title</mark>
  </template>
  content
</bpa-popover>

<bpa-radio name="example-name" value="1" v-model="example-data">Radio</bpa-radio>

<bpa-radio name="example-name" value="1" v-model="example-data" disabled>Radio</bpa-radio>

<bpa-button @click="isBpaDialogVisible = true">
  Open Dialog
</bpa-button>

<bpa-dialog :visible.sync="isBpaDialogVisible">
  Content
</bpa-dialog>

<bpa-dialog
  :visible.sync="isBpaDialogVisible"
  header="custom header text"
  footer="custom footer text"
>
  Content
</bpa-dialog>

<bpa-dialog
  :visible.sync="isBpaDialogVisible"
>
  <template v-slot:header>
    <mark>custom header Html</mark>
  </template>
  Content
  <template v-slot:footer>
    <mark>custom footer Html</mark>
  </template>
</bpa-dialog>

<bpa-dialog :clickoutside="false">
  Cotnent
</bpa-dialog>

<bpa-select v-model="value" :options="options" theme="primary" />

<bpa-select v-model="value" :options="options" size="small" />

<bpa-select v-model="value" :options="options" placeholder="placeholder"/>

<bpa-select v-model="value" :options="options" disabled/>

<bpa-select v-model="value" :options="options" disabledClear/>

<bpa-select v-model="value" :options="options">
  <template v-slot:prefix>prefix</template>
  <template v-slot:affix>affix</template>
</bpa-select>

<bpa-select v-model="value" :options="options" fixed @click="onClick"/>

<bpa-form-item labelFor="bpa-select-{id}-btn">
    <bpa-select v-model="value" :options="options" :id="{id}" @click="onClick"/>
</bpa-form-item>

<bpa-select v-model="value" :options="options" optionWidth="100px" @click="onClick"/>

<!-- show all options -->
<bpa-select v-model="value" :options="options" multiple /> 

<!-- show first option, others using "n+" -->
<bpa-select v-model="value" :options="options" multiple="accordion" /> 

{
  label: '第一群',
  type: 'group',
    options: [
      { label: 'label10', value: '10' },
      { label: 'label20', value: '20' },
      { label: 'label30', value: '30' }
    ]
  }
}

<bpa-select v-model="value" :options="options" multiple :toolbar="['search']"/>

<bpa-switch labelText="text" v-model="isOpen"/>

<bpa-switch labelText="text" v-model="isOpen">
  <template v-slot:close-text><img src="favicon.ico" alt=""/>Off</template>
  <template v-slot:open-text>On👍🏽</template>
</bpa-switch>

<bpa-tabs v-model="demoTabs">
  <bpa-tab-panel name="first-tab" label="First tab">
    This is the content of the first tab
  </bpa-tab-panel>
  <bpa-tab-panel name="second-tab" label="Second tab">
    This is the content of the second tab
  </bpa-tab-panel>
</bpa-tabs>

<bpa-tree
  :data="treeData"
/>

treeData: [
  {
    id: 1,
    label: "A",
    children: [
      {
        id: 4,
        label: "D"
      },
      {
        id: 5,
        label: "E"
      }
    ]
  },
  {
    id: 2,
    label: "B",
    children: [
      {
        id: 6,
        label: "F"
      },
      {
        id: 7,
        label: "G",
        children: [
          {
            id: 8,
            label: "H"
          },
          {
            id: 9,
            label: "I"
          }
        ]
      }
    ]
  },
  {
    id: 3,
    label: "C",
  }
]

<bpa-tabs v-model="demoTabs">
  <bpa-tab-panel name="first-tab" label="First tab" badge="95">
    This is the content of the first tab
  </bpa-tab-panel>
  <bpa-tab-panel name="second-tab" label="Second tab" badge="27">
    This is the content of the second tab
  </bpa-tab-panel>
</bpa-tabs>

<bpa-tabs v-model="demoTabs">
  <bpa-tab-panel name="first-tab" label="First tab" prefix-icon="fas fa-search">
    This is the content of the first tab
  </bpa-tab-panel>
  <bpa-tab-panel name="second-tab" label="Second tab" affix-icon="fas fa-search">
    This is the content of the second tab
  </bpa-tab-panel>
</bpa-tabs>

<bpa-tree
  :data="treeData"
  show-checkbox
/>

<bpa-tree
  :data="treeData"
  default-expand-all
/>