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

//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-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-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-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"/>

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

<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-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-dropdown v-model="value" :options="options" theme="primary" @click="onClick"/>

<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);
}

<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-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-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-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-checkbox value="1" v-model="demoModel">Checkbox</bpa-checkbox>

<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-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-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-tooltip text="text here">
  <bpa-button>align left</bpa-button>
</bpa-tooltip>
 
<bpa-tooltip text="text here">
  <bpa-button>align center(default)</bpa-button>
</bpa-tooltip>
 
<bpa-tooltip text="text here">
  <bpa-button>align right</bpa-button>
</bpa-tooltip>

//main.js
import Vue from 'vue'

import piman from "@yasai/piman";
import '@yasai/piman/dist/piman.css';
Vue.use(piman) //Default is “zh-Hant-TW”
//Vue.use(piman,{ locale: 'en' })

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

<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",
  }
]

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

// plugins/bp-a11y.js
import Vue from 'vue'
import piman from "@yasai/piman";
Vue.use(piman) //Default is “zh-Hant-TW”
//Vue.use(piman,{ locale: 'en' })

import piman from "@yasai/piman"

piman.i18n.use({
  "pagination":{
    "page":"ページ"
  },
})

import BpaI18n from '../locale'

export default Vue.extend({
  mixins: [ BpaI18n ],
  //...
})

<!-- text -->
<span>{{ t('pagination.per') }}</span>

<!-- v-bind -->
<nav
  :aria-label="t('pagination.aria')"
  class="bpa-pagination"
/>

//template
{{ add() }}

//script
methods: {
  add(){
    let text = this.t('pagination.aria')
    text = text + 'Add'
    return text
  },
}

import piman from "@yasai/piman"

piman.i18n.use('en')

// All options
{
  "pagination":{
    "total":"共",
    "page":"頁",
    "per":"每頁",
    "result":"項",
    "goto":"前往",
    "exceed":"噢！此頁碼不適用。",
    "aria":"分頁選擇",
    "input_goto":"請輸入想前往的頁面",
    "first_page_text":"第一頁",
    "prev_page_text":"上一頁",
    "next_page_text":"下一頁",
    "last_page_text":"最後一頁",
  },
  "form":{
    "required": "必填"
  },
  "breadcrumb":{
    "current_page":"現在頁面位置"
  },
  "button":{
    "loading": "載入中"
  },
  "dialog":{
    "close":"關閉燈箱"
  },
  "dropdown":{
    "goto":"前往",
    "new_tab":"另開視窗前往"
  },
  "input":{
    "show":"點擊顯示密碼",
    "hide":"點擊隱藏密碼",
    "clear":"清空輸入",
    "placeholder":"請輸入"
  },
  "msg":{
    "area":"訊息區域",
    "close":"關閉訊息框",
  },
  "select":{
    "placeholder": "請選擇",
    "clear":"清空下拉式選單",
    "search":"搜尋",
    "area_search":"請輸入關鍵字搜尋與過濾下拉式選單選項"
  },
  "collapse":{
    "title": "標題",
  },
  "switch":{
    "off": "關閉",
    "on": "開啟"
  }
}

npm run build
npm login (or npm adduser and then login)
npm publish

// src/components/index.ts

import BpaButton from "./BpaButton.vue";

const Components: {[key: string]: any} = {
  BpaButton,
  //...
}

// types/bpa.d.ts

// import
import { BpaNewComponent } from './new-component'

// export
/** NewComponent Component */
export class NewComponent extends BpaNewComponent {}

scss/
├── base/
├───├── _core.scss
├───├── _keyframes.scss
├───├── _mixins.scss
├───├── _reset.scss
├───├── _utilities.scss
├───├── _variables.scss
├── components/
├───├── _core.scss
├── layout/
├───├── pages/
├───├── _layout.scss
├───├── _core.scss
├── plugins/
├── style.scss