John Smith
32 |Lorem ipsum dolor sit amet
33 |├── .editorconfig ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .np-config.js ├── .npmignore ├── LICENSE-MIT.txt ├── README.md ├── babel.config.js ├── biome.json ├── bun.lock ├── commitlint.config.js ├── helper ├── README.md ├── analyzer-utils.ts ├── analyzer.ts ├── classes.json ├── config.ts ├── data.ts ├── get-dynamic-classes.ts ├── index.ts ├── mappings.json └── utils.ts ├── inject.sh ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── rollup.config.js ├── src ├── App.vue ├── assets │ ├── logo.png │ └── vue.svg ├── components │ ├── README.md │ ├── compounds │ │ ├── Accordion │ │ │ ├── Accordion.vue │ │ │ └── AccordionMenu.vue │ │ ├── Breadcrumb │ │ │ ├── Breadcrumb.vue │ │ │ ├── BreadcrumbItem.vue │ │ │ └── __tests__ │ │ │ │ └── Breadcrumb.spec.ts │ │ ├── Card │ │ │ ├── Card.vue │ │ │ ├── CardContent.vue │ │ │ ├── CardFooter.vue │ │ │ ├── CardFooterItem.vue │ │ │ ├── CardHeader.vue │ │ │ ├── CardImage.vue │ │ │ └── __tests__ │ │ │ │ └── Card.spec.ts │ │ ├── Columns │ │ │ ├── Column.vue │ │ │ ├── Columns.vue │ │ │ └── __tests__ │ │ │ │ └── Columns.spec.ts │ │ ├── Dropdown │ │ │ ├── Dropdown.vue │ │ │ ├── DropdownItem.vue │ │ │ └── dropdown-symbol.ts │ │ ├── Menu │ │ │ ├── Menu.vue │ │ │ ├── MenuItem.vue │ │ │ ├── MenuList.vue │ │ │ └── __tests__ │ │ │ │ └── Menu.spec.ts │ │ ├── Navbar │ │ │ ├── Navbar.vue │ │ │ ├── NavbarBurger.vue │ │ │ ├── NavbarDropdown.vue │ │ │ └── NavbarItem.vue │ │ ├── Pagination │ │ │ ├── Pagination.vue │ │ │ ├── PaginationItem.vue │ │ │ └── __tests__ │ │ │ │ └── Pagination.spec.ts │ │ ├── Steps │ │ │ ├── StepItem.vue │ │ │ └── Steps.vue │ │ ├── Table │ │ │ ├── DataGrid.ts │ │ │ └── Table.vue │ │ ├── Tabs │ │ │ ├── Tab.vue │ │ │ └── Tabs.vue │ │ └── Toast │ │ │ ├── Toaster.ts │ │ │ ├── Toaster.vue │ │ │ ├── defaults │ │ │ └── position.ts │ │ │ ├── helpers │ │ │ ├── event-bus.ts │ │ │ ├── mount-component.ts │ │ │ ├── remove-element.ts │ │ │ └── timer.ts │ │ │ └── toast-api.ts │ ├── global-settings.js │ ├── index.js │ └── primitives │ │ ├── Autocomplete │ │ └── Autocomplete.vue │ │ ├── Avatar │ │ ├── Avatar.vue │ │ └── __tests__ │ │ │ └── Avatar.spec.ts │ │ ├── Button │ │ ├── Button.spec.ts │ │ └── Button.vue │ │ ├── Calendar │ │ ├── Calendar.vue │ │ └── bulma-calendar.d.ts │ │ ├── Chart │ │ └── Chart.vue │ │ ├── Checkbox │ │ └── Checkbox.vue │ │ ├── Container │ │ ├── Container.vue │ │ └── __tests__ │ │ │ └── Container.spec.ts │ │ ├── DepthChart │ │ ├── DepthChart.vue │ │ └── DepthChartBaseData.ts │ │ ├── Field │ │ ├── Field.vue │ │ └── __tests__ │ │ │ └── Field.spec.ts │ │ ├── FileInput │ │ ├── FileInput.vue │ │ └── __tests__ │ │ │ └── FileInput.spec.ts │ │ ├── Icon │ │ ├── Icon.vue │ │ └── __tests__ │ │ │ └── Icon.spec.ts │ │ ├── Image │ │ ├── Image.vue │ │ └── __tests__ │ │ │ └── Image.spec.ts │ │ ├── Input │ │ ├── EyeIcon.vue │ │ ├── Input.vue │ │ └── __tests__ │ │ │ └── Input.spec.ts │ │ ├── Media │ │ ├── Media.vue │ │ └── __tests__ │ │ │ └── Media.spec.ts │ │ ├── Modal │ │ ├── Modal.vue │ │ └── __tests__ │ │ │ └── Modal.spec.ts │ │ ├── Progress │ │ ├── Progress.vue │ │ └── __tests__ │ │ │ └── Progress.spec.ts │ │ ├── Select │ │ ├── Select.vue │ │ └── __tests__ │ │ │ └── Select.spec.ts │ │ ├── Sidebar │ │ └── Sidebar.vue │ │ ├── Slider │ │ ├── Slider.vue │ │ └── __tests__ │ │ │ └── Slider.spec.ts │ │ ├── Switch │ │ ├── Switch.vue │ │ └── __tests__ │ │ │ └── Switch.spec.ts │ │ ├── Tag │ │ ├── Tag.vue │ │ └── __tests__ │ │ │ └── Tag.spec.ts │ │ ├── Textarea │ │ ├── Textarea.vue │ │ └── __tests__ │ │ │ └── Textarea.spec.ts │ │ ├── Timeline │ │ ├── Timeline.vue │ │ └── __tests__ │ │ │ └── Timeline.spec.ts │ │ ├── Tooltip │ │ ├── Tooltip.vue │ │ └── __tests__ │ │ │ └── Tooltip.spec.ts │ │ └── Upload │ │ ├── Upload.vue │ │ └── __tests__ │ │ └── Upload.spec.ts ├── index.css ├── main.js ├── shims-vue.d.ts ├── state.js ├── types │ ├── component-types.ts │ └── globals.d.ts ├── utils │ ├── functions.spec.ts │ ├── functions.ts │ ├── onClickOutside.ts │ ├── tabs-store.ts │ └── unrefElement.ts └── views │ └── App.vue ├── tsconfig.json └── vitest.config.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | tab_width = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | types: [ opened, synchronize, reopened ] 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - uses: actions/checkout@v4 16 | 17 | - name: Setup Bun 18 | uses: oven-sh/setup-bun@v1 19 | with: 20 | bun-version: latest 21 | 22 | - name: Install dependencies 23 | run: bun install 24 | 25 | - name: Run linting 26 | run: bun run lint 27 | 28 | - name: Run tests 29 | run: bun run test 30 | 31 | - name: Build 32 | run: bun run build -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *.ps1 4 | .idea 5 | coverage 6 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | bun commitlint --edit ${1} -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | bun lint-staged -------------------------------------------------------------------------------- /.np-config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Avoids `np` trying to set 2FA again and again 3 | // after publishing to NPM 4 | exists: true, 5 | }; 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | .* 3 | *config.* 4 | -------------------------------------------------------------------------------- /LICENSE-MIT.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 PathScale 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue3-ui 2 | 3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Vue3 ready components library built with love and care designed to integrate beautifully with Bulma CSS
15 |
18 | {{ title }} 19 |
20 |75 | {{ t.title }} 76 |
77 |78 | {{ t.subtitle }} 79 |
80 |41 | {{ message }} 42 |
43 |John Smith
32 |Lorem ipsum dolor sit amet
33 |Main content
Article Title
97 |Article Subtitle
98 |
27 |
75 |
{{ stage.desc }}
45 | `, 46 | }, 47 | }); 48 | 49 | const items = wrapper.findAll("li"); 50 | expect(items).length(4); 51 | 52 | // check first stage 53 | expect(items[0].classes()).toEqual( 54 | expect.arrayContaining(["has-text-grey"]), 55 | ); 56 | expect(items[0].find("h1").text()).toBe("Create Account"); 57 | expect(items[0].find("p").text()).toBe( 58 | "Start by creating your personal account to access all features.", 59 | ); 60 | 61 | // check second stage 62 | expect(items[1].classes()).toEqual( 63 | expect.arrayContaining(["has-text-grey", "has-text-danger"]), 64 | ); 65 | expect(items[1].find("h1").text()).toBe("Complete profile"); 66 | expect(items[1].find("p").text()).toBe( 67 | "Fill out your profile with relevant information to attract employers.", 68 | ); 69 | 70 | // check third stage 71 | expect(items[2].classes()).toEqual( 72 | expect.arrayContaining(["has-text-success", "is-active"]), 73 | ); 74 | expect(items[2].find("h1").text()).toBe("Apply to jobs"); 75 | expect(items[2].find("p").text()).toBe( 76 | "Browse listings and submit applications to jobs that match your skills.", 77 | ); 78 | 79 | // check fourth stage 80 | expect(items[3].classes()).toEqual( 81 | expect.arrayContaining(["has-text-grey"]), 82 | ); 83 | expect(items[3].classes()).contains("has-text-grey"); 84 | expect(items[3].find("h1").text()).toBe("Go on a drinking binge"); 85 | expect(items[3].find("p").text()).toBe( 86 | "Take a break — you’ve earned it. (Not recommended before interviews.)", 87 | ); 88 | }); 89 | }); 90 | -------------------------------------------------------------------------------- /src/components/primitives/Tooltip/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 46 | 62 |