├── .browserslistrc ├── cypress.json ├── src ├── assets │ ├── scss │ │ ├── style.scss │ │ ├── base │ │ │ ├── _core.scss │ │ │ ├── _keyframes.scss │ │ │ ├── _variables.scss │ │ │ ├── _utilities.scss │ │ │ └── _mixins.scss │ │ └── components │ │ │ ├── _badge.scss │ │ │ ├── _popover.scss │ │ │ ├── _core.scss │ │ │ ├── _breadcrumb.scss │ │ │ ├── _card.scss │ │ │ ├── _form.scss │ │ │ ├── _switch.scss │ │ │ ├── _tooltip.scss │ │ │ ├── _tabs.scss │ │ │ ├── _tree.scss │ │ │ ├── _radio.scss │ │ │ ├── _msg.scss │ │ │ ├── _input.scss │ │ │ ├── _dialog.scss │ │ │ ├── _pagination.scss │ │ │ ├── _checkbox.scss │ │ │ ├── _accordion.scss │ │ │ ├── _button.scss │ │ │ ├── _dropdown.scss │ │ │ └── _select.scss │ └── logo.png ├── v-click-outside.d.ts ├── locale │ ├── lang │ │ ├── index.ts │ │ ├── zh-Hant-TW.ts │ │ └── en.ts │ ├── types.ts │ └── index.ts ├── utils │ ├── zIndexCtrl.ts │ ├── generateId.ts │ ├── PopupService.ts │ └── trapFocus.ts ├── components │ ├── BpaTree │ │ └── index.ts │ ├── BpaAccordion.vue │ ├── BpaBreadcrumbItem.vue │ ├── BpaBreadcrumb.vue │ ├── BpaTabPanel.vue │ ├── BpaCard.vue │ ├── BpaButton.vue │ ├── BpaAccordionItem.vue │ ├── BpaRadio.vue │ ├── BpaSwitch.vue │ ├── BpaForm.vue │ ├── BpaCheckbox.vue │ ├── BpaMsg.vue │ ├── index.ts │ ├── BpaMsg.ts │ ├── BpaTooltip.vue │ ├── BpaTabs.vue │ ├── BpaDialog.vue │ ├── BpaPopover.vue │ └── BpaFormItem.vue ├── main.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts ├── views │ ├── Home.vue │ ├── Breadcrumb.vue │ ├── Switch.vue │ ├── Radio.vue │ ├── Accordion.vue │ ├── Checkbox.vue │ ├── Popover.vue │ ├── Tabs.vue │ ├── Tooltip.vue │ ├── Dialog.vue │ ├── Input.vue │ ├── Button.vue │ ├── Card.vue │ ├── Pagination.vue │ ├── Msg.vue │ └── Tree.vue └── router │ └── index.ts ├── public ├── favicon.ico ├── index.html └── logo-white.svg ├── types ├── index.d.ts ├── card.d.ts ├── tabs.d.ts ├── tree.d.ts ├── dialog.d.ts ├── switch.d.ts ├── dropdown.d.ts ├── popover.d.ts ├── tab-panel.d.ts ├── breadcrumb.d.ts ├── collapse.d.ts ├── pagination.d.ts ├── tooltip.d.ts ├── breadcrumb-item.d.ts ├── i18n.d.ts ├── collapse-item.d.ts ├── component.d.ts ├── radio.d.ts ├── checkbox.d.ts ├── button.d.ts ├── select.d.ts ├── input.d.ts ├── form.d.ts ├── form-item.d.ts ├── msg.d.ts └── bpa.d.ts ├── babel.config.js ├── jest.config.js ├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md └── ISSUE_TEMPLATE │ └── bug_report.md ├── vue.config.js ├── tests ├── e2e │ ├── .eslintrc.js │ ├── support │ │ ├── index.js │ │ └── commands.js │ ├── plugins │ │ └── index.js │ └── specs │ │ └── tree.js └── unit │ ├── trapFocus.spec.js │ ├── radio.spec.js │ ├── popover.spec.js │ ├── dropdown.spec.js │ ├── checkbox.spec.js │ ├── dialog.spec.js │ ├── i18n.spec.js │ ├── tree-node.spec.js │ ├── select.spec.js │ └── tree.spec.js ├── .gitignore ├── .eslintrc.js ├── tsconfig.json ├── README.md └── package.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "base/core"; 2 | @import "components/core"; -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ya-sai/piman/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ya-sai/piman/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/v-click-outside.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'v-click-outside' { 2 | export const directive: any 3 | } -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './bpa' 2 | 3 | import * as BPA from './bpa' 4 | export default BPA 5 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel' 3 | } 4 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | Please follow https://www.contributor-covenant.org/version/2/1/code_of_conduct/ 3 | -------------------------------------------------------------------------------- /src/assets/scss/base/_core.scss: -------------------------------------------------------------------------------- 1 | @import "reset"; 2 | @import "variables"; 3 | @import "mixins"; 4 | @import "utilities"; 5 | @import "keyframes"; -------------------------------------------------------------------------------- /src/locale/lang/index.ts: -------------------------------------------------------------------------------- 1 | import en from "./en"; 2 | import zhHantTW from "./zh-Hant-TW"; 3 | 4 | export default { 5 | en, 6 | 'zh-Hant-TW': zhHantTW, 7 | } -------------------------------------------------------------------------------- /types/card.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Card Component */ 4 | export declare class BpaCard extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/tabs.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Tabs Component */ 4 | export declare class BpaTabs extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/tree.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Tree Component */ 4 | export declare class BpaTree extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /src/locale/types.ts: -------------------------------------------------------------------------------- 1 | export interface Translation { 2 | [key: string]: Translation|string|number 3 | } 4 | 5 | export type Locale = 'en' | 'zh-Hant-TW' | Translation -------------------------------------------------------------------------------- /types/dialog.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Dialog Component */ 4 | export declare class BpaDialog extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/switch.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Switch Component */ 4 | export declare class BpaSwitch extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /src/utils/zIndexCtrl.ts: -------------------------------------------------------------------------------- 1 | let zIndex = 100; 2 | 3 | const zIndexCtrl = { 4 | nextZIndex: () => { 5 | return zIndex ++ 6 | } 7 | } 8 | 9 | export default zIndexCtrl; -------------------------------------------------------------------------------- /types/dropdown.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Dropdown Component */ 4 | export declare class BpaDropdown extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/popover.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Popover Component */ 4 | export declare class BpaPopover extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/tab-panel.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** TabPanel Component */ 4 | export declare class BpaTabPanel extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/breadcrumb.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Breadcrumb Component */ 4 | export declare class BpaBreadcrumb extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/collapse.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Accordion Component */ 4 | export declare class BpaAccordion extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/pagination.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Pagination Component */ 4 | export declare class BpaPagination extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /types/tooltip.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Tooltip Component */ 4 | export declare class BpaTooltip extends BpaComponent { 5 | text: string 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/scss/base/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes btn-loading-animation { 2 | 0% { 3 | transform: rotate(0deg); 4 | } 5 | 100% { 6 | transform: rotate(360deg); 7 | } 8 | } -------------------------------------------------------------------------------- /types/breadcrumb-item.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** BreadcrumbItem Component */ 4 | export declare class BpaBreadcrumbItem extends BpaComponent { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: { 3 | loaderOptions: { 4 | sass: { 5 | additionalData: `@import "@/assets/scss/base/_variables.scss";` 6 | } 7 | } 8 | } 9 | }; -------------------------------------------------------------------------------- /tests/e2e/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | 'cypress' 4 | ], 5 | env: { 6 | mocha: true, 7 | 'cypress/globals': true 8 | }, 9 | rules: { 10 | strict: 'off' 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /types/i18n.d.ts: -------------------------------------------------------------------------------- 1 | export interface Translation { 2 | [key: string]: Translation|string|number 3 | } 4 | 5 | export type Locale = 'en' | 'zh-Hant-TW' | Translation 6 | 7 | export interface BpaI18n { 8 | use(l: Locale) 9 | } -------------------------------------------------------------------------------- /types/collapse-item.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Accordion Item Component */ 4 | export declare class BpaAccordionItem extends BpaComponent { 5 | 6 | /** Header title */ 7 | title: string 8 | } 9 | -------------------------------------------------------------------------------- /types/component.d.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | /** BPA component common definition */ 4 | export declare class BpaComponent extends Vue { 5 | /** Install component into Vue */ 6 | static install (vue: typeof Vue): void 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/scss/components/_badge.scss: -------------------------------------------------------------------------------- 1 | .#{$prefix}-badge { 2 | background-color: $color-primary; 3 | color: $color-white; 4 | padding: 0.125rem 0.25rem; 5 | border-radius: 1rem; 6 | font-size: 0.75rem; 7 | line-height: 1.125; 8 | } -------------------------------------------------------------------------------- /src/components/BpaTree/index.ts: -------------------------------------------------------------------------------- 1 | import BpaTree from './src/BpaTree.vue'; 2 | 3 | // /* istanbul ignore next */ 4 | // ElCheckbox.install = function(Vue) { 5 | // Vue.component(ElCheckbox.name, ElCheckbox); 6 | // }; 7 | 8 | export default BpaTree; 9 | -------------------------------------------------------------------------------- /src/components/BpaAccordion.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/utils/generateId.ts: -------------------------------------------------------------------------------- 1 | export const generateId = function(): number { 2 | const byteArray = new Uint16Array(1); 3 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 4 | // @ts-ignore 5 | const crypto = window.crypto || window.msCrypto; 6 | crypto.getRandomValues(byteArray); 7 | return byteArray[0] 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | import '@/assets/scss/style.scss'; 6 | import bpa from "@/components/index"; 7 | 8 | Vue.config.productionTip = false 9 | 10 | 11 | Vue.use(bpa) 12 | 13 | 14 | new Vue({ 15 | router, 16 | render: h => h(App) 17 | }).$mount('#app') 18 | -------------------------------------------------------------------------------- /src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/scss/components/_popover.scss: -------------------------------------------------------------------------------- 1 | .#{$prefix}-popover { 2 | position: relative; 3 | } 4 | .#{$prefix}-popover-container { 5 | position: absolute; 6 | border: 1px solid $border-color; 7 | border-radius: 0.25rem; 8 | padding: 1rem; 9 | background-color: $color-white; 10 | box-shadow: $box-shadow; 11 | word-break: break-all; 12 | word-break: break-word; 13 | max-width: nth($breakpoint, 3); 14 | overflow: hidden; 15 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_core.scss: -------------------------------------------------------------------------------- 1 | @import "breadcrumb"; 2 | @import "button"; 3 | @import "card"; 4 | @import "checkbox"; 5 | @import "accordion"; 6 | @import "dialog"; 7 | @import "form"; 8 | @import "input"; 9 | @import "pagination"; 10 | @import "popover"; 11 | @import "radio"; 12 | @import "select"; 13 | @import "dropdown"; 14 | @import "switch"; 15 | @import "msg"; 16 | @import "tabs"; 17 | @import "badge"; 18 | @import "tree"; 19 | @import "tooltip"; 20 | -------------------------------------------------------------------------------- /src/assets/scss/components/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .#{$prefix}-breadcrumb { 2 | ol { 3 | display: flex; 4 | flex-direction: row; 5 | } 6 | } 7 | 8 | .#{$prefix}-breadcrumb__item { 9 | &:after { 10 | content: '/'; 11 | margin: 0 0.5rem; 12 | color: $border-color; 13 | } 14 | &[aria-current] { 15 | font-weight: normal; 16 | a { 17 | color: $color-black; 18 | } 19 | &:after { 20 | display: none; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/utils/PopupService.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import { ComponentOptions } from "vue/types/umd"; 3 | 4 | export default class PopupService { 5 | 6 | public addChild( child: Vue, toggleTarget: Element ){ 7 | console.log('add'); 8 | 9 | } 10 | } 11 | 12 | export interface PopComponentOptionsVue extends ComponentOptions { 13 | vcoIntercept: boolean 14 | } 15 | 16 | const PopParent: PopComponentOptionsVue = { 17 | vcoIntercept: true, 18 | 19 | } -------------------------------------------------------------------------------- /types/radio.d.ts: -------------------------------------------------------------------------------- 1 | import { BpaComponent } from './component' 2 | 3 | /** Radio Component */ 4 | export declare class BpaRadio extends BpaComponent { 5 | 6 | /** Disable the button */ 7 | disabled: boolean 8 | 9 | /** `id` and `for` attribute in and