├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── babel.config.js ├── docs-styleguidist ├── dialog.md ├── dropdown.md ├── examples │ ├── dialog.md │ ├── dropdown.md │ ├── dropdownOption.md │ ├── icon.md │ ├── modal.md │ ├── tabItem.md │ ├── tabs.md │ └── tooltip.md ├── heading.md ├── icon.md ├── installation.md ├── static │ ├── buefy.css │ └── buefy.css.map └── styles.js ├── docs ├── App.vue ├── assets │ ├── buefy-light.png │ ├── buefy.png │ ├── data_test.json │ └── main.scss ├── components │ └── ModalForm.vue ├── main.js ├── pages │ ├── Home.vue │ └── documentation │ │ ├── Documentation.vue │ │ ├── data │ │ ├── Autocomplete.vue │ │ ├── Pagination.vue │ │ ├── Table.vue │ │ └── _Data.vue │ │ ├── form │ │ ├── Checkbox.vue │ │ ├── Field.vue │ │ ├── Input.vue │ │ ├── Radio.vue │ │ ├── Select.vue │ │ ├── Switch.vue │ │ └── _Form.vue │ │ ├── general │ │ ├── Dropdown.vue │ │ ├── Icon.vue │ │ ├── Modal.vue │ │ ├── Tabs.vue │ │ ├── Tooltip.vue │ │ ├── UIElements.vue │ │ └── _General.vue │ │ ├── installation │ │ ├── ConstructorOptions.vue │ │ ├── Customization.vue │ │ ├── QuickStart.vue │ │ └── _Installation.vue │ │ └── notices │ │ ├── Dialog.vue │ │ ├── Message.vue │ │ ├── Notification.vue │ │ ├── Snackbar.vue │ │ ├── Toast.vue │ │ └── _Notices.vue ├── router │ └── index.js └── template │ ├── Footer.vue │ └── Header.vue ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── components │ ├── autocomplete │ │ ├── Autocomplete.vue │ │ └── index.js │ ├── checkbox │ │ ├── Checkbox.vue │ │ ├── CheckboxGroup.vue │ │ └── index.js │ ├── dialog │ │ ├── Dialog.vue │ │ └── index.js │ ├── dropdown │ │ ├── Dropdown.vue │ │ ├── DropdownOption.vue │ │ └── index.js │ ├── field │ │ ├── Field.vue │ │ └── index.js │ ├── icon │ │ ├── Icon.vue │ │ └── index.js │ ├── input │ │ ├── Input.vue │ │ └── index.js │ ├── message │ │ ├── Message.vue │ │ └── index.js │ ├── modal │ │ ├── Modal.vue │ │ └── index.js │ ├── notification │ │ ├── Notification.vue │ │ └── index.js │ ├── pagination │ │ ├── Pagination.vue │ │ └── index.js │ ├── radio │ │ ├── Radio.vue │ │ ├── RadioButton.vue │ │ ├── RadioGroup.vue │ │ └── index.js │ ├── select │ │ ├── Select.vue │ │ └── index.js │ ├── snackbar │ │ ├── Snackbar.vue │ │ └── index.js │ ├── switch │ │ ├── Switch.vue │ │ └── index.js │ ├── table │ │ ├── Table.vue │ │ ├── TableColumn.vue │ │ └── index.js │ ├── tabs │ │ ├── TabItem.vue │ │ ├── Tabs.vue │ │ └── index.js │ ├── toast │ │ ├── Toast.vue │ │ └── index.js │ └── tooltip │ │ ├── Tooltip.vue │ │ └── index.js ├── index.js ├── index.styleguide.js ├── scss │ ├── buefy-build.scss │ ├── buefy.scss │ ├── components │ │ ├── _autocomplete.scss │ │ ├── _checkbox.scss │ │ ├── _dialog.scss │ │ ├── _dropdown.scss │ │ ├── _form.scss │ │ ├── _icon.scss │ │ ├── _messages.scss │ │ ├── _modal.scss │ │ ├── _notices.scss │ │ ├── _pagination.scss │ │ ├── _radio.scss │ │ ├── _select.scss │ │ ├── _switch.scss │ │ ├── _table.scss │ │ ├── _tabs.scss │ │ └── _tooltip.scss │ └── utils │ │ ├── _animations.scss │ │ ├── _functions.scss │ │ ├── _theme-variables.scss │ │ └── _variables.scss └── utils │ ├── MessageMixin.js │ ├── NoticeMixin.js │ ├── config.js │ └── helpers.js ├── static ├── .gitkeep ├── apple-touch-icon-114x114.png ├── apple-touch-icon-120x120.png ├── apple-touch-icon-144x144.png ├── apple-touch-icon-152x152.png ├── apple-touch-icon-57x57.png ├── apple-touch-icon-60x60.png ├── apple-touch-icon-72x72.png ├── apple-touch-icon-76x76.png ├── buefy-banner.png ├── favicon-128.png ├── favicon-16x16.png ├── favicon-196x196.png ├── favicon-32x32.png ├── favicon-96x96.png ├── favicon.ico └── placeholder-1280x960.png └── styleguide.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | node_modules/ 4 | dist/ 5 | lib/ 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | debug.log* 10 | styleguide/ 11 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Vue Styleguidist 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 | # Buefy style guide example 2 | 3 | See [deployed version](http://rafaelescala.com/buefy-example/). 4 | 5 | ![](https://lh3.googleusercontent.com/MAIt9xtccsJ7Ri_2M_cCuC_gp_jiqDHBstBeOKMQcO49hUC4_IXey5SaGZgzFzHCbrWGwLeNG68uXhFtV_oiwxGg_WPTQuAu74xeQRr8YO8522hTUhB7qqKOOUzDb6lrjQUfKX91jXJu8lMoHy5hcNz7GuJqJO3Zwk0TmKjOeAq2WIH3UFegNBTxkYFYz3-SRkP9JkgkAQ813FhNJlBG7u_mSACojgyI-ZdYeCAUGjnPp9CgY_rH9JN9GtNDpsRxRnYFMxXEIl8S4PFBiDIiqsCZBxzOtgG0PFTqpVG2quvvYNu590ivKAD0yw6ns2kfSNw1CLEFYVZflnAvko0_OC24JFC_TGEcBBrWFzSWBDiSw5ruuxRtstOHkwyu9zZotBdR_-ESKP6XMr36DbqwL3ZN_lfdnTl8m81SFAoIofmHOc2Uek6U64ZjViVfFz3TnjFcIA0cA1BYX9i8UMVb3JBWQIdrDCatWABvu7NCxqSbzOU8R3Bl1jQBmEiA__PjAM3KKMOJjf4pZPhP9XSTKbAoLWLzDLgMtQvUk9D4175cco5_m0wRR0ZNr8nymhqLD99MvfpI=w1600-h794) 6 | 7 | How to start locally: 8 | 9 | ``` 10 | git clone https://github.com/vue-styleguidist/buefy-styleguide-example.git 11 | cd buefy-styleguide-example 12 | npm install 13 | npm run styleguide 14 | ``` 15 | 16 | Then open [http://localhost:6060](http://localhost:6060) in your browser. 17 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs-styleguidist/dialog.md: -------------------------------------------------------------------------------- 1 | Dialogs inform users about a specific task and may contain critical information or require decisions 2 | ___ 3 | -------------------------------------------------------------------------------- /docs-styleguidist/dropdown.md: -------------------------------------------------------------------------------- 1 | Dropdowns are very versatile, you can use as a quick menu or even like a select. It's toggled by clicking, and looks like a modal when you're on tablet or smartphone 2 | -------------------------------------------------------------------------------- /docs-styleguidist/examples/dialog.md: -------------------------------------------------------------------------------- 1 | ## Alert 2 | ``` 3 | new Vue({ 4 | methods: { 5 | alert() { 6 | this.$dialog.alert('Everything looks fine!') 7 | }, 8 | alertCustom() { 9 | this.$dialog.alert({ 10 | title: 'Title Alert', 11 | message: 'I have a title, a custom button and HTML!', 12 | confirmText: 'Cool!' 13 | }) 14 | } 15 | }, 16 | template: ` 17 |
18 | 19 | 20 |
21 | ` 22 | }) 23 | ``` 24 | ## Confirm 25 | 26 | ``` 27 | new Vue({ 28 | methods: { 29 | confirm() { 30 | this.$dialog.confirm({ 31 | message: 'Continue on this task?', 32 | onConfirm: () => { 33 | this.$toast.open('User confirmed') 34 | } 35 | }) 36 | }, 37 | confirmCustom() { 38 | this.$dialog.confirm({ 39 | title: 'Privacy Politics', 40 | message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]', 41 | cancelText: 'Disagree', 42 | confirmText: 'Agree', 43 | type: 'is-success', 44 | onConfirm: () => { 45 | this.$toast.open('User agreed') 46 | } 47 | }) 48 | }, 49 | confirmCustomDelete() { 50 | this.$dialog.confirm({ 51 | title: 'Deleting account', 52 | message: 'Are you sure you want to delete your account? This action cannot be undone.', 53 | confirmText: 'Delete Account', 54 | type: 'is-danger', 55 | hasIcon: true, 56 | onConfirm: () => { 57 | this.$toast.open('Account deleted!') 58 | } 59 | }) 60 | } 61 | }, 62 | template: ` 63 |
64 | 67 | 68 | 71 | 72 | 75 |
76 | ` 77 | }) 78 | ``` 79 | ## Prompt 80 | 81 | ``` 82 | new Vue({ 83 | methods: { 84 | prompt() { 85 | this.$dialog.prompt({ 86 | message: `What's your name?`, 87 | maxlength: 20, 88 | placeholder: 'e.g. John Doe', 89 | onConfirm: (value) => { 90 | this.$toast.open('Your name is: ' + value) 91 | } 92 | }) 93 | } 94 | }, 95 | template: ` 96 | 99 | ` 100 | }) 101 | ``` 102 | -------------------------------------------------------------------------------- /docs-styleguidist/examples/dropdownOption.md: -------------------------------------------------------------------------------- 1 | ```html 2 | Action 3 | ``` 4 | -------------------------------------------------------------------------------- /docs-styleguidist/examples/icon.md: -------------------------------------------------------------------------------- 1 | ``` 2 |
3 |
4 | 5 | 6 | 7 |
8 | 9 |
10 | 13 | 14 | 17 | 18 | 21 | 22 |
23 | 24 |
25 | 29 | 30 | 34 | 35 | 39 | 40 |
41 | 42 | 46 | 47 | 51 |
52 | ``` 53 | 54 | ``` 55 |
56 |
57 | 60 | 61 | 64 | 65 | 68 | 69 |
70 | 71 |
72 | 76 | 77 | 81 | 82 | 86 | 87 |
88 | 89 |
90 | 95 | 96 | 101 | 102 | 107 | 108 |
109 | 110 | 114 | 115 | 119 |
120 | ``` 121 | -------------------------------------------------------------------------------- /docs-styleguidist/examples/modal.md: -------------------------------------------------------------------------------- 1 | Classic modal overlay to include any content you may need 2 | ``` 3 | let isImageModalActive = false; 4 | let isCardModalActive = false; 5 | 6 |
7 | 8 | 9 | 10 | 11 |

12 | 13 |

14 | 15 | 16 | 17 |
18 |
19 |
20 | Image 21 |
22 |
23 |
24 |
25 |
26 |
27 | Image 28 |
29 |
30 |
31 |

John Smith

32 |

@johnsmith

33 |
34 |
35 | 36 |
37 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 38 | Phasellus nec iaculis mauris. @bulmaio. 39 | #css #responsive 40 |
41 | 11:09 PM - 1 Jan 2016 42 |
43 |
44 |
45 | 46 |
47 | ``` 48 | -------------------------------------------------------------------------------- /docs-styleguidist/examples/tabItem.md: -------------------------------------------------------------------------------- 1 | ```html 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /docs-styleguidist/examples/tabs.md: -------------------------------------------------------------------------------- 1 | Responsive horizontal navigation tabs, switch between contents with ease 2 | ``` 3 | let activeTab = 0; 4 | 5 |
6 | 7 | 8 | 9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 10 | Pellentesque vestibulum dui vel molestie egestas. 11 | Nulla vulputate elementum diam quis consectetur. 12 | 13 | 14 | 15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 16 | Pellentesque vestibulum dui vel molestie egestas. 17 | Nulla vulputate elementum diam quis consectetur. 18 | Integer pulvinar laoreet nibh non faucibus. 19 | Suspendisse ut cursus lectus. Donec consectetur turpis at leo ultricies rhoncus. 20 | Cras consequat aliquet eros nec porta. 21 | Nullam sit amet mollis turpis. 22 | Aenean vitae tortor et velit sodales faucibus. 23 | 24 | 25 | 26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 27 | Pellentesque vestibulum dui vel molestie egestas. 28 | Nulla vulputate elementum diam quis consectetur. 29 | Integer pulvinar laoreet nibh non faucibus. 30 | 31 | 32 |
33 | ``` 34 | ### Position 35 | ``` 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | ``` 50 | ### Icons 51 | ``` 52 |
53 | 54 | 55 | 56 | 57 | 58 |
59 | ``` 60 | ### Sizes 61 | ``` 62 |
63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
81 | ``` 82 | ### Types 83 | If you want a more classic style with borders 84 | ``` 85 |
86 | 87 | 88 | 89 | 90 | 91 |
92 | ``` 93 | Or like Radio Buttons 94 | ``` 95 |
96 | 97 | 98 | 99 | 100 | 101 |
102 | ``` 103 | ### Expanded 104 | ``` 105 |
106 | 107 | 108 | 109 | 110 | 111 |
112 | ``` 113 | -------------------------------------------------------------------------------- /docs-styleguidist/examples/tooltip.md: -------------------------------------------------------------------------------- 1 | Display a brief helper text to your user 2 | ``` 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | ``` 21 | 22 | ### Styles 23 | ``` 24 |
25 | 26 | Simple text 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | ``` 50 | 51 | ### Multilined 52 | ``` 53 |
54 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 67 | 72 | 73 | 74 |
75 | ``` 76 | 77 | -------------------------------------------------------------------------------- /docs-styleguidist/heading.md: -------------------------------------------------------------------------------- 1 | [![npm](https://img.shields.io/npm/v/buefy.svg)]() 2 | [![npm](https://img.shields.io/npm/dt/buefy.svg)]() 3 | [![npm](https://img.shields.io/npm/l/buefy.svg)]() 4 | 5 | Buefy is a lightweight library of responsive UI components for [Vue.js](https://vuejs.org/) based on [Bulma](http://bulma.io/) framework and design. 6 | 7 | [![Buefy](https://raw.githubusercontent.com/rafaelpimpa/buefy/master/static/buefy-banner.png)](https://buefy.github.io) 8 | 9 | ## Features 10 | 11 | * Keep your current Bulma theme / variables easily 12 | 13 | * Supports both [Material Design Icons](https://material.io/icons/) and [FontAwesome](http://fontawesome.io/) 14 | 15 | * Very lightweight with none internal dependencies aside from Vue & Bulma 16 | 17 | * Semantic code output 18 | 19 | * Follows Bulma design and some of the [Material Design UX](https://material.io/) 20 | 21 | * Focus on usability and performance without *over-animations* 22 | -------------------------------------------------------------------------------- /docs-styleguidist/icon.md: -------------------------------------------------------------------------------- 1 | Icons take an important role of any application. 2 | 3 | --- 4 | 5 | Buefy is compatible with both [Material Design Icons](https://material.io/icons/) and [FontAwesome](http://fontawesome.io/). They adapt to most elements background automatically — but you can also override their colors. 6 | -------------------------------------------------------------------------------- /docs-styleguidist/installation.md: -------------------------------------------------------------------------------- 1 | 2 | ### Install via npm 3 | 4 | ```bash 5 | npm install buefy 6 | ``` 7 | 8 | ### Import and use Buefy. You can also enable individual components 9 | 10 | ```javascript 11 | import Vue from 'vue'; 12 | import Buefy from 'buefy'; 13 | import 'buefy/lib/buefy.css'; 14 | 15 | Vue.use(Buefy); 16 | 17 | // OR 18 | 19 | Vue.component(Buefy.Checkbox.name, Buefy.Checkbox); 20 | Vue.component(Buefy.Table.name, Buefy.Table); 21 | ... 22 | ``` 23 | 24 | ### Include Material Design Icons 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | **Note:** If you want to customize the icons or the theme, access the [customization section on the online documentation](https://buefy.github.io/#/documentation/customization). 31 | -------------------------------------------------------------------------------- /docs-styleguidist/styles.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | maxWidth: '100%', 4 | sidebarWidth: 250, 5 | color: { 6 | link: '#5856d6', 7 | linkHover: 'rgb(70, 69, 171)', 8 | sidebarBackground: '#7957d5', 9 | errorBackground: '#e22d44' 10 | } 11 | }, 12 | styles: { 13 | StyleGuide: { 14 | root: { 15 | 'text-rendering': 'optimizeLegibility', 16 | '-moz-osx-font-smoothing': 'grayscale', 17 | '-webkit-font-smoothing': 'antialiased' 18 | }, 19 | sidebar: {}, 20 | content: {}, 21 | logo: { 22 | border: 'none', 23 | paddingBottom: 0 24 | } 25 | }, 26 | Logo: { 27 | logo: { 28 | color: '#fff', 29 | fontSize: 20 30 | } 31 | }, 32 | ComponentsList: { 33 | list: { 34 | '& ul': { 35 | paddingLeft: 0 36 | } 37 | }, 38 | item: { 39 | '& a': { 40 | 'color': 'rgba(255, 255, 255, 0.9) !important', 41 | 'fontWeight': 500, 42 | '&:hover': { 43 | textDecoration: 'underline', 44 | color: '#fff !important' 45 | } 46 | } 47 | }, 48 | heading: { 49 | fontSize: '18px !important', 50 | fontWeight: '600 !important', 51 | color: '#fff !important' 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /docs/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 27 | 28 | 117 | -------------------------------------------------------------------------------- /docs/assets/buefy-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/docs/assets/buefy-light.png -------------------------------------------------------------------------------- /docs/assets/buefy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/docs/assets/buefy.png -------------------------------------------------------------------------------- /docs/assets/data_test.json: -------------------------------------------------------------------------------- 1 | [{"id":1,"user":{"first_name":"Jesse","last_name":"Simmons"},"date":"2016-10-15 13:43:27","gender":"Male"}, 2 | {"id":2,"user":{"first_name":"John","last_name":"Jacobs"},"date":"2016-12-15 06:00:53","gender":"Male"}, 3 | {"id":3,"user":{"first_name":"Tina","last_name":"Gilbert"},"date":"2016-04-26 06:26:28","gender":"Female"}, 4 | {"id":4,"user":{"first_name":"Clarence","last_name":"Flores"},"date":"2016-04-10 10:28:46","gender":"Male"}, 5 | {"id":5,"user":{"first_name":"Anne","last_name":"Lee"},"date":"2016-12-06 14:38:38","gender":"Female"}, 6 | {"id":6,"user":{"first_name":"Sara","last_name":"Armstrong"},"date":"2016-09-23 18:50:04","gender":"Female"}, 7 | {"id":7,"user":{"first_name":"Anthony","last_name":"Webb"},"date":"2016-08-30 23:49:38","gender":"Male"}, 8 | {"id":8,"user":{"first_name":"Andrew","last_name":"Greene"},"date":"2016-11-20 14:57:47","gender":"Male"}, 9 | {"id":9,"user":{"first_name":"Russell","last_name":"White"},"date":"2016-07-13 09:29:49","gender":"Male"}, 10 | {"id":10,"user":{"first_name":"Lori","last_name":"Hunter"},"date":"2016-12-09 01:44:05","gender":"Female"}, 11 | {"id":11,"user":{"first_name":"Ronald","last_name":"Wood"},"date":"2016-12-04 02:23:48","gender":"Male"}, 12 | {"id":12,"user":{"first_name":"Michael","last_name":"Harper"},"date":"2016-07-27 13:28:15","gender":"Male"}, 13 | {"id":13,"user":{"first_name":"George","last_name":"Dunn"},"date":"2017-03-07 12:26:52","gender":"Male"}, 14 | {"id":14,"user":{"first_name":"Eric","last_name":"Rogers"},"date":"2016-06-07 05:41:52","gender":"Male"}, 15 | {"id":15,"user":{"first_name":"Juan","last_name":"Meyer"},"date":"2017-02-01 04:56:34","gender":"Male"}, 16 | {"id":16,"user":{"first_name":"Lori","last_name":"Shaw"},"date":"2017-01-26 11:50:04","gender":"Female"}, 17 | {"id":17,"user":{"first_name":"Lori","last_name":"Cunningham"},"date":"2016-05-01 10:00:56","gender":"Female"}, 18 | {"id":18,"user":{"first_name":"Charles","last_name":"Graham"},"date":"2016-05-31 06:43:30","gender":"Male"}, 19 | {"id":19,"user":{"first_name":"Henry","last_name":"Morrison"},"date":"2016-09-27 16:15:44","gender":"Male"}, 20 | {"id":20,"user":{"first_name":"Albert","last_name":"Mendoza"},"date":"2016-08-08 05:29:24","gender":"Male"}, 21 | {"id":21,"user":{"first_name":"Ruby","last_name":"Snyder"},"date":"2017-04-01 12:04:39","gender":"Female"}, 22 | {"id":22,"user":{"first_name":"Jesse","last_name":"Warren"},"date":"2016-08-20 01:36:38","gender":"Male"}, 23 | {"id":23,"user":{"first_name":"Carlos","last_name":"Ferguson"},"date":"2016-05-31 10:40:29","gender":"Male"}, 24 | {"id":24,"user":{"first_name":"Melissa","last_name":"Peters"},"date":"2016-07-23 00:41:54","gender":"Female"}, 25 | {"id":25,"user":{"first_name":"Arthur","last_name":"Garza"},"date":"2017-03-11 14:11:37","gender":"Male"}, 26 | {"id":26,"user":{"first_name":"Joe","last_name":"Berry"},"date":"2016-07-09 15:16:56","gender":"Male"}, 27 | {"id":27,"user":{"first_name":"Joseph","last_name":"Bishop"},"date":"2016-10-04 19:44:54","gender":"Male"}, 28 | {"id":28,"user":{"first_name":"Sarah","last_name":"Harper"},"date":"2016-09-23 05:09:11","gender":"Female"}, 29 | {"id":29,"user":{"first_name":"Christopher","last_name":"Fuller"},"date":"2016-04-12 00:05:35","gender":"Male"}, 30 | {"id":30,"user":{"first_name":"Alan","last_name":"Mendoza"},"date":"2016-04-22 10:48:02","gender":"Male"}, 31 | {"id":31,"user":{"first_name":"James","last_name":"Davis"},"date":"2017-01-16 15:17:03","gender":"Male"}, 32 | {"id":32,"user":{"first_name":"Scott","last_name":"Welch"},"date":"2016-10-04 23:31:51","gender":"Male"}, 33 | {"id":33,"user":{"first_name":"Mildred","last_name":"Myers"},"date":"2016-11-23 13:46:18","gender":"Female"}, 34 | {"id":34,"user":{"first_name":"Victor","last_name":"Martinez"},"date":"2016-04-06 17:05:07","gender":"Male"}, 35 | {"id":35,"user":{"first_name":"Susan","last_name":"Medina"},"date":"2016-12-09 10:33:37","gender":"Female"}, 36 | {"id":36,"user":{"first_name":"Judy","last_name":"Long"},"date":"2016-07-26 16:19:04","gender":"Female"}, 37 | {"id":37,"user":{"first_name":"Joan","last_name":"Myers"},"date":"2016-09-22 04:55:54","gender":"Female"}, 38 | {"id":38,"user":{"first_name":"Rachel","last_name":"Gonzales"},"date":"2016-07-15 13:56:38","gender":"Female"}, 39 | {"id":39,"user":{"first_name":"Roger","last_name":"Hunt"},"date":"2016-08-14 10:43:11","gender":"Male"}, 40 | {"id":40,"user":{"first_name":"Dorothy","last_name":"Howard"},"date":"2016-06-19 05:34:49","gender":"Female"}, 41 | {"id":41,"user":{"first_name":"Eugene","last_name":"Lynch"},"date":"2016-12-24 08:19:24","gender":"Male"}, 42 | {"id":42,"user":{"first_name":"Kathy","last_name":"Webb"},"date":"2017-04-01 21:09:05","gender":"Female"}, 43 | {"id":43,"user":{"first_name":"Antonio","last_name":"White"},"date":"2017-02-10 06:51:20","gender":"Male"}, 44 | {"id":44,"user":{"first_name":"Louis","last_name":"Spencer"},"date":"2016-10-08 02:20:22","gender":"Male"}, 45 | {"id":45,"user":{"first_name":"Andrea","last_name":"Marshall"},"date":"2016-09-04 10:59:57","gender":"Female"}, 46 | {"id":46,"user":{"first_name":"Eugene","last_name":"Sims"},"date":"2017-03-15 06:39:48","gender":"Male"}, 47 | {"id":47,"user":{"first_name":"Mildred","last_name":"Gibson"},"date":"2016-04-18 06:43:54","gender":"Female"}, 48 | {"id":48,"user":{"first_name":"Joan","last_name":"Arnold"},"date":"2016-12-16 04:52:23","gender":"Female"}, 49 | {"id":49,"user":{"first_name":"Jesse","last_name":"Schmidt"},"date":"2016-06-11 02:44:33","gender":"Male"}, 50 | {"id":50,"user":{"first_name":"David","last_name":"Frazier"},"date":"2017-02-15 21:46:30","gender":"Male"}, 51 | {"id":51,"user":{"first_name":"Nicholas","last_name":"Howell"},"date":"2016-11-01 15:08:31","gender":"Male"}, 52 | {"id":52,"user":{"first_name":"Douglas","last_name":"Chapman"},"date":"2017-02-08 03:33:24","gender":"Male"}, 53 | {"id":53,"user":{"first_name":"Bruce","last_name":"Simmons"},"date":"2016-07-14 12:11:17","gender":"Male"}, 54 | {"id":54,"user":{"first_name":"Antonio","last_name":"George"},"date":"2016-11-07 19:12:55","gender":"Male"}, 55 | {"id":55,"user":{"first_name":"Chris","last_name":"Marshall"},"date":"2016-07-03 12:11:45","gender":"Male"}, 56 | {"id":56,"user":{"first_name":"Ashley","last_name":"Hudson"},"date":"2016-10-14 21:08:05","gender":"Female"}, 57 | {"id":57,"user":{"first_name":"Alan","last_name":"Edwards"},"date":"2017-03-22 21:10:25","gender":"Male"}, 58 | {"id":58,"user":{"first_name":"George","last_name":"Clark"},"date":"2016-04-28 03:15:05","gender":"Male"}, 59 | {"id":59,"user":{"first_name":"Frank","last_name":"Porter"},"date":"2016-09-08 00:48:14","gender":"Male"}, 60 | {"id":60,"user":{"first_name":"Christopher","last_name":"Palmer"},"date":"2016-05-24 08:58:12","gender":"Male"}] 61 | -------------------------------------------------------------------------------- /docs/assets/main.scss: -------------------------------------------------------------------------------- 1 | @import "~bulma/sass/utilities/_all"; 2 | // @import "~bulma/sass/utilities/initial-variables"; 3 | // @import "~bulma/sass/utilities/derived-variables"; 4 | @import "../../src/scss/utils/_theme-variables"; 5 | 6 | // Colors 7 | $twitter: #4099FF; 8 | $twitter-invert: findColorInvert($twitter); 9 | $facebook: #4267B2; 10 | $facebook-invert: findColorInvert($facebook); 11 | $googleplus: #DB4437; 12 | $googleplus-invert: findColorInvert($googleplus); 13 | $primary-invert: findColorInvert($primary); 14 | 15 | $colors: ( 16 | "white": ($white, $black), 17 | "black": ($black, $white), 18 | "light": ($light, $light-invert), 19 | "dark": ($dark, $dark-invert), 20 | "primary": ($primary, $primary-invert), 21 | "info": ($info, $info-invert), 22 | "success": ($success, $success-invert), 23 | "warning": ($warning, $warning-invert), 24 | "danger": ($danger, $danger-invert), 25 | "twitter": ($twitter, $twitter-invert), 26 | "facebook": ($facebook, $facebook-invert), 27 | "googleplus": ($googleplus, $googleplus-invert) 28 | ); 29 | 30 | $link: $primary; 31 | $link-invert: $primary-invert; 32 | $link-visited: $grey; 33 | $link-focus-border: $primary; 34 | 35 | 36 | @import "~bulma"; 37 | @import "../../src/scss/buefy"; 38 | 39 | @import "~highlight.js/styles/atelier-cave-light.css"; 40 | -------------------------------------------------------------------------------- /docs/components/ModalForm.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 42 | 43 | 44 | 50 | 51 | -------------------------------------------------------------------------------- /docs/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import Resource from 'vue-resource' 4 | import router from './router' 5 | 6 | import Buefy from '../src' 7 | import VueProgressBar from 'vue-progressbar' 8 | import Bluebird from 'bluebird' 9 | import hljs from 'highlight.js' 10 | 11 | Vue.config.productionTip = false 12 | 13 | global.Promise = Bluebird 14 | 15 | Vue.use(Resource) 16 | Vue.use(Buefy) 17 | Vue.use(VueProgressBar, { 18 | color: '#7957d5', 19 | failedColor: '#ff3860', 20 | transition: { 21 | speed: '0.2s', 22 | opacity: '0.1s' 23 | } 24 | }) 25 | 26 | Vue.directive('highlight', { 27 | deep: true, 28 | bind(el, binding) { 29 | // on first bind, highlight all targets 30 | const targets = el.querySelectorAll('code') 31 | for (const target of Array.from(targets)) { 32 | // if a value is directly assigned to the directive, use this 33 | // instead of the element content. 34 | if (binding.value) { 35 | target.innerHTML = binding.value 36 | } 37 | hljs.highlightBlock(target) 38 | } 39 | }, 40 | componentUpdated(el, binding) { 41 | // after an update, re-fill the content and then highlight 42 | const targets = el.querySelectorAll('code') 43 | for (const target of Array.from(targets)) { 44 | if (binding.value) { 45 | target.innerHTML = binding.value 46 | hljs.highlightBlock(target) 47 | } 48 | } 49 | } 50 | }) 51 | 52 | Vue.filter('pre', (text) => { 53 | if (!text) return 54 | 55 | // Remove first blank line 56 | text = text.replace(/^\s*[\r\n]/g, '') 57 | 58 | // Find how many whitespaces before the first character of the first line 59 | const whitespaces = /^[ \t]*./.exec(text).toString().slice(0, -1) 60 | 61 | // Replace first occurrance of whitespace on each line 62 | let newText = [] 63 | text.split(/\r\n|\r|\n/).forEach((line) => { 64 | newText.push(line.replace(whitespaces, '')) 65 | }) 66 | newText = newText.join('\r\n') 67 | 68 | return newText 69 | }) 70 | 71 | new Vue({ 72 | el: '#app', 73 | router, 74 | template: '', 75 | components: { App } 76 | }) 77 | -------------------------------------------------------------------------------- /docs/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 82 | 83 | 110 | -------------------------------------------------------------------------------- /docs/pages/documentation/Documentation.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 93 | -------------------------------------------------------------------------------- /docs/pages/documentation/data/Pagination.vue: -------------------------------------------------------------------------------- 1 | 105 | 106 | 193 | -------------------------------------------------------------------------------- /docs/pages/documentation/data/_Data.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/pages/documentation/form/_Form.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/pages/documentation/general/UIElements.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /docs/pages/documentation/general/_General.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/pages/documentation/installation/ConstructorOptions.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 95 | -------------------------------------------------------------------------------- /docs/pages/documentation/installation/Customization.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 90 | -------------------------------------------------------------------------------- /docs/pages/documentation/installation/QuickStart.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 50 | -------------------------------------------------------------------------------- /docs/pages/documentation/installation/_Installation.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/pages/documentation/notices/Snackbar.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 172 | -------------------------------------------------------------------------------- /docs/pages/documentation/notices/Toast.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 140 | -------------------------------------------------------------------------------- /docs/pages/documentation/notices/_Notices.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/template/Footer.vue: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /docs/template/Header.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 63 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | Buefy: lightweight UI components for Vue.js based on Bulma 40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "src/**/*" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "buefy2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build --lib", 8 | "lint": "vue-cli-service lint", 9 | "styleguide": "vue-cli-service styleguidist", 10 | "styleguide:build": "vue-cli-service styleguidist:build" 11 | }, 12 | "dependencies": { 13 | "bulma": "^0.7.4", 14 | "vue": "^2.6.6" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.5.1", 18 | "@vue/cli-plugin-eslint": "^3.5.1", 19 | "@vue/cli-service": "^3.5.1", 20 | "babel-eslint": "^10.0.1", 21 | "eslint": "^5.8.0", 22 | "eslint-plugin-vue": "^5.0.0", 23 | "vue-cli-plugin-styleguidist": "^3.10.0", 24 | "vue-template-compiler": "^2.5.21", 25 | "webpack": "^4.29.6" 26 | }, 27 | "eslintConfig": { 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/essential", 34 | "eslint:recommended" 35 | ], 36 | "rules": { 37 | "vue/no-reserved-keys": "off", 38 | "vue/return-in-computed-property": "off", 39 | "vue/require-v-for-key": "off" 40 | }, 41 | "parserOptions": { 42 | "parser": "babel-eslint" 43 | } 44 | }, 45 | "postcss": { 46 | "plugins": { 47 | "autoprefixer": {} 48 | } 49 | }, 50 | "browserslist": [ 51 | "> 1%", 52 | "last 2 versions", 53 | "not ie <= 8" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | buefy2 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/autocomplete/index.js: -------------------------------------------------------------------------------- 1 | import Autocomplete from './Autocomplete' 2 | 3 | export default Autocomplete 4 | -------------------------------------------------------------------------------- /src/components/checkbox/Checkbox.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 59 | -------------------------------------------------------------------------------- /src/components/checkbox/CheckboxGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 60 | -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './Checkbox' 2 | import CheckboxGroup from './CheckboxGroup' 3 | 4 | export { 5 | Checkbox, 6 | CheckboxGroup 7 | } 8 | -------------------------------------------------------------------------------- /src/components/dialog/Dialog.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 230 | -------------------------------------------------------------------------------- /src/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Dialog from './Dialog' 3 | 4 | function open(propsData) { 5 | const DialogComponent = Vue.extend(Dialog) 6 | return new DialogComponent({ 7 | el: document.createElement('div'), 8 | propsData 9 | }) 10 | } 11 | 12 | export default { 13 | alert(params) { 14 | let message 15 | if (typeof params === 'string') message = params 16 | const defaultParam = { 17 | canCancel: false, 18 | message 19 | } 20 | const propsData = Object.assign(defaultParam, params) 21 | return open(propsData) 22 | }, 23 | confirm(params) { 24 | const defaultParam = {} 25 | const propsData = Object.assign(defaultParam, params) 26 | return open(propsData) 27 | }, 28 | prompt(params) { 29 | const defaultParam = { 30 | hasInput: true, 31 | confirmText: 'Done' 32 | } 33 | const propsData = Object.assign(defaultParam, params) 34 | return open(propsData) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/dropdown/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 152 | -------------------------------------------------------------------------------- /src/components/dropdown/DropdownOption.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 76 | -------------------------------------------------------------------------------- /src/components/dropdown/index.js: -------------------------------------------------------------------------------- 1 | import Dropdown from './Dropdown' 2 | import DropdownOption from './DropdownOption' 3 | 4 | export { 5 | Dropdown, 6 | DropdownOption 7 | } 8 | -------------------------------------------------------------------------------- /src/components/field/Field.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 74 | -------------------------------------------------------------------------------- /src/components/field/index.js: -------------------------------------------------------------------------------- 1 | import Field from './Field' 2 | 3 | export default Field 4 | -------------------------------------------------------------------------------- /src/components/icon/Icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 101 | -------------------------------------------------------------------------------- /src/components/icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './Icon' 2 | 3 | export default Icon 4 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './Input' 2 | 3 | export default Input 4 | -------------------------------------------------------------------------------- /src/components/message/Message.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 30 | -------------------------------------------------------------------------------- /src/components/message/index.js: -------------------------------------------------------------------------------- 1 | import Message from './Message' 2 | 3 | export default Message 4 | -------------------------------------------------------------------------------- /src/components/modal/Modal.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 142 | -------------------------------------------------------------------------------- /src/components/modal/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Modal from './Modal' 3 | 4 | 5 | export { Modal } 6 | export default { 7 | open(params) { 8 | let content 9 | if (typeof params === 'string') content = params 10 | 11 | const defaultParam = { 12 | programmatic: true, 13 | content 14 | } 15 | const propsData = Object.assign(defaultParam, params) 16 | 17 | const ModalComponent = Vue.extend(Modal) 18 | return new ModalComponent({ 19 | el: document.createElement('div'), 20 | propsData 21 | }) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/notification/Notification.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 26 | -------------------------------------------------------------------------------- /src/components/notification/index.js: -------------------------------------------------------------------------------- 1 | import Notification from './Notification' 2 | 3 | export default Notification 4 | -------------------------------------------------------------------------------- /src/components/pagination/Pagination.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 179 | -------------------------------------------------------------------------------- /src/components/pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './Pagination' 2 | 3 | export default Pagination 4 | -------------------------------------------------------------------------------- /src/components/radio/Radio.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 50 | -------------------------------------------------------------------------------- /src/components/radio/RadioButton.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 56 | -------------------------------------------------------------------------------- /src/components/radio/RadioGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 55 | -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './Radio' 2 | import RadioGroup from './RadioGroup' 3 | import RadioButton from './RadioButton' 4 | 5 | export { 6 | Radio, 7 | RadioGroup, 8 | RadioButton 9 | } 10 | -------------------------------------------------------------------------------- /src/components/select/Select.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 146 | -------------------------------------------------------------------------------- /src/components/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './Select' 2 | 3 | export default Select 4 | -------------------------------------------------------------------------------- /src/components/snackbar/Snackbar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 53 | -------------------------------------------------------------------------------- /src/components/snackbar/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Snackbar from './Snackbar' 3 | 4 | export default { 5 | open(params) { 6 | let message 7 | if (typeof params === 'string') message = params 8 | 9 | const defaultParam = { 10 | type: 'is-success', 11 | position: 'is-bottom-right', 12 | duration: 3500, 13 | message 14 | } 15 | const propsData = Object.assign(defaultParam, params) 16 | 17 | const SnackbarComponent = Vue.extend(Snackbar) 18 | return new SnackbarComponent({ 19 | el: document.createElement('div'), 20 | propsData 21 | }) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/switch/Switch.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 61 | -------------------------------------------------------------------------------- /src/components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './Switch' 2 | 3 | export default Switch 4 | -------------------------------------------------------------------------------- /src/components/table/TableColumn.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 42 | -------------------------------------------------------------------------------- /src/components/table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './Table' 2 | import TableColumn from './TableColumn' 3 | 4 | export { 5 | Table, 6 | TableColumn 7 | } 8 | -------------------------------------------------------------------------------- /src/components/tabs/TabItem.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 66 | -------------------------------------------------------------------------------- /src/components/tabs/Tabs.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 123 | -------------------------------------------------------------------------------- /src/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | import Tabs from './Tabs' 2 | import TabItem from './TabItem' 3 | 4 | export { 5 | Tabs, 6 | TabItem 7 | } 8 | -------------------------------------------------------------------------------- /src/components/toast/Toast.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 31 | -------------------------------------------------------------------------------- /src/components/toast/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Toast from './Toast' 3 | 4 | export default { 5 | open(params) { 6 | let message 7 | if (typeof params === 'string') message = params 8 | 9 | const defaultParam = { message } 10 | const propsData = Object.assign(defaultParam, params) 11 | 12 | const ToastComponent = Vue.extend(Toast) 13 | return new ToastComponent({ 14 | el: document.createElement('div'), 15 | propsData 16 | }) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/tooltip/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 102 | -------------------------------------------------------------------------------- /src/components/tooltip/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './Tooltip' 2 | 3 | export default Tooltip 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { Checkbox, CheckboxGroup } from "./components/checkbox"; 2 | import { Dropdown, DropdownOption } from "./components/dropdown"; 3 | import { Radio, RadioGroup, RadioButton } from "./components/radio"; 4 | import { Table, TableColumn } from "./components/table"; 5 | import { Tabs, TabItem } from "./components/tabs"; 6 | import Autocomplete from "./components/autocomplete"; 7 | import Field from "./components/field"; 8 | import Icon from "./components/icon"; 9 | import Input from "./components/input"; 10 | import Message from "./components/message"; 11 | import Notification from "./components/notification"; 12 | import Pagination from "./components/pagination"; 13 | import Select from "./components/select"; 14 | import Switch from "./components/switch"; 15 | import Tooltip from "./components/tooltip"; 16 | 17 | import Dialog from "./components/dialog"; 18 | import ModalProgrammatic, { Modal } from "./components/modal"; 19 | import Snackbar from "./components/snackbar"; 20 | import Toast from "./components/toast"; 21 | 22 | import config from "./utils/config"; 23 | 24 | const components = { 25 | Autocomplete, 26 | Checkbox, 27 | CheckboxGroup, 28 | Dropdown, 29 | DropdownOption, 30 | Field, 31 | Icon, 32 | Input, 33 | Message, 34 | Modal, 35 | Notification, 36 | Pagination, 37 | Radio, 38 | RadioButton, 39 | RadioGroup, 40 | Select, 41 | Switch, 42 | Table, 43 | TableColumn, 44 | Tabs, 45 | TabItem, 46 | Tooltip 47 | }; 48 | 49 | components.install = (Vue, options = {}) => { 50 | // Options 51 | Object.keys(options).forEach(o => { 52 | config[o] = options[o]; 53 | }); 54 | 55 | for (const componentName in components) { 56 | const component = components[componentName]; 57 | 58 | if (component && componentName !== "install") { 59 | Vue.component(component.name, component); 60 | } 61 | } 62 | 63 | Vue.prototype.$snackbar = Snackbar; 64 | Vue.prototype.$modal = ModalProgrammatic; 65 | Vue.prototype.$toast = Toast; 66 | Vue.prototype.$dialog = Dialog; 67 | }; 68 | 69 | export default components; 70 | -------------------------------------------------------------------------------- /src/index.styleguide.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import buefy from './index' 3 | 4 | Vue.use(buefy) 5 | -------------------------------------------------------------------------------- /src/scss/buefy-build.scss: -------------------------------------------------------------------------------- 1 | @import "bulma/sass/utilities/initial-variables"; 2 | @import "utils/_theme-variables"; 3 | @import "bulma/bulma"; 4 | @import "buefy"; 5 | -------------------------------------------------------------------------------- /src/scss/buefy.scss: -------------------------------------------------------------------------------- 1 | @import "utils/_functions"; 2 | @import "utils/_variables"; 3 | @import "utils/_animations"; 4 | 5 | @import "components/_autocomplete"; 6 | @import "components/_checkbox"; 7 | @import "components/_dialog"; 8 | @import "components/_dropdown"; 9 | @import "components/_form"; 10 | @import "components/_icon"; 11 | @import "components/_messages"; 12 | @import "components/_modal"; 13 | @import "components/_notices"; 14 | @import "components/_pagination"; 15 | @import "components/_radio"; 16 | @import "components/_select"; 17 | @import "components/_switch"; 18 | @import "components/_table"; 19 | @import "components/_tabs"; 20 | @import "components/_tooltip"; 21 | -------------------------------------------------------------------------------- /src/scss/components/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | .autocomplete { 2 | .box { 3 | position: absolute; 4 | top: 2.5em; 5 | padding: 0.5em 0; 6 | z-index: 10; 7 | white-space: nowrap; 8 | width: 100%; 9 | transition: opacity $speed $easing; 10 | .option { 11 | @include unselectable; 12 | padding: 0.25rem 0.75rem; 13 | cursor: pointer; 14 | &:not(.is-disabled):hover, 15 | &.is-hovered { 16 | background: $background; 17 | } 18 | &.is-disabled { 19 | opacity: 0.5; 20 | cursor: not-allowed; 21 | } 22 | } 23 | &.is-opened-top { 24 | top: auto; 25 | bottom: 2.5em; 26 | } 27 | } 28 | &.is-small { 29 | @include control-small; 30 | } 31 | &.is-medium{ 32 | @include control-medium; 33 | } 34 | &.is-large { 35 | @include control-large; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/scss/components/_checkbox.scss: -------------------------------------------------------------------------------- 1 | .checkbox { 2 | outline: none; 3 | display: inline-flex; 4 | align-items: center; 5 | & + .checkbox { 6 | margin-left: 0.5em; 7 | } 8 | input[type=checkbox] { 9 | display: none; 10 | + .check { 11 | position: relative; 12 | width: 1.25em; 13 | height: 1.25em; 14 | border-radius: $radius; 15 | border: 2px solid $grey; 16 | background: none; 17 | transition: all $speed-slower $easing; 18 | } 19 | &:checked + .check { 20 | background: $primary url(checkmark($white)) no-repeat center center; 21 | border-color: $primary; 22 | } 23 | } 24 | .control-label { 25 | padding-left: 0.5em; 26 | } 27 | &[disabled] { 28 | opacity: 0.5; 29 | } 30 | &:hover { 31 | input[type=checkbox] + .check { 32 | border-color: $primary; 33 | } 34 | } 35 | &:focus { 36 | input[type=checkbox] + .check { 37 | box-shadow: 0 0 0.5em rgba($grey, 0.8); 38 | } 39 | input[type=checkbox]:checked + .check { 40 | box-shadow: 0 0 0.5em rgba($primary, 0.8); 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/scss/components/_dialog.scss: -------------------------------------------------------------------------------- 1 | .dialog { 2 | transition: all $speed-slow $easing; 3 | .modal-card-body { 4 | align-items: center; 5 | .custom-icon { 6 | margin-left: -8px; 7 | margin-right: 16px; 8 | } 9 | .control { 10 | margin-top: 16px; 11 | } 12 | &.is-titleless { 13 | border-top-left-radius: $radius-large; 14 | border-top-right-radius: $radius-large; 15 | } 16 | } 17 | .modal-card { 18 | min-width: 320px; 19 | max-width: 460px; 20 | width: auto; 21 | transition: all $speed-slow $easing; 22 | } 23 | .modal-card-title { 24 | font-size: $size-5; 25 | font-weight: $weight-semibold; 26 | } 27 | .modal-card-foot { 28 | display: flex; 29 | justify-content: flex-end; 30 | .button { 31 | min-width: 80px; 32 | font-weight: $weight-semibold; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/scss/components/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown { 2 | display: inline-flex; 3 | align-items: center; 4 | & + .dropdown { 5 | margin-left: 0.5em; 6 | } 7 | .trigger { 8 | display: inline-block; 9 | } 10 | .background { 11 | @include overlay; 12 | position: fixed; 13 | background-color: rgba($black, 0.86); 14 | z-index: 10; 15 | transition: opacity $speed $easing; 16 | cursor: pointer; 17 | } 18 | .box { 19 | position: absolute; 20 | padding: 0.5em 0; 21 | z-index: 10; 22 | white-space: nowrap; 23 | transition: opacity $speed $easing; 24 | .option { 25 | @include unselectable; 26 | padding: 0.5rem 1rem; 27 | cursor: pointer; 28 | &:not(.is-subheader, .is-disabled):hover { 29 | background: $background; 30 | } 31 | &.is-selected { 32 | background: $primary !important; 33 | color: $primary-invert; 34 | } 35 | &.is-separator { 36 | border-bottom: 1px solid $background; 37 | margin: 0.5rem 0; 38 | padding: 0 !important; 39 | cursor: inherit; 40 | } 41 | &.is-disabled { 42 | opacity: 0.5; 43 | cursor: not-allowed; 44 | } 45 | &.is-subheader { 46 | cursor: inherit; 47 | // Remove unselectable 48 | -webkit-touch-callout: inherit; 49 | -webkit-user-select: inherit; 50 | -moz-user-select: inherit; 51 | -ms-user-select: inherit; 52 | user-select: inherit; 53 | } 54 | &.has-link { 55 | padding: 0; 56 | a { 57 | padding: 0.5rem 1rem; 58 | display: block; 59 | color: inherit; 60 | } 61 | } 62 | } 63 | &.is-top-right{ 64 | top: auto; 65 | bottom: 100%; 66 | left: 0; 67 | } 68 | &.is-top-left{ 69 | top: auto; 70 | bottom: 100%; 71 | right: 0; 72 | } 73 | &.is-bottom-right{ 74 | top: 100%; 75 | left: 0; 76 | } 77 | &.is-bottom-left{ 78 | top: 100%; 79 | right: 0; 80 | } 81 | &.is-narrow { 82 | .option { 83 | padding: 0.25rem 0.75rem; 84 | } 85 | } 86 | } 87 | &.is-disabled { 88 | opacity: 0.5; 89 | cursor: not-allowed; 90 | .trigger { 91 | pointer-events: none; 92 | } 93 | } 94 | @include touch { 95 | .box { 96 | position: fixed; 97 | width: calc(100vw - 60px); 98 | max-width: 600px; 99 | max-height: calc(100vh - 120px); 100 | top: 50% !important; 101 | left: 50% !important; 102 | transform: translate3d(-50%, -50%, 0); 103 | white-space: normal; 104 | &.is-narrow { 105 | .option { 106 | padding: 0.75rem 1rem; 107 | } 108 | } 109 | .option { 110 | padding: 1rem 1.5rem; 111 | &.has-subheader { 112 | padding: 1rem 2rem; 113 | } 114 | } 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/scss/components/_form.scss: -------------------------------------------------------------------------------- 1 | .label { 2 | font-weight: $weight-semibold 3 | } 4 | 5 | .field { 6 | &.is-grouped { 7 | .field { 8 | flex-shrink: 0; 9 | & + .field { 10 | margin-left: 0.75rem; 11 | } 12 | &.is-expanded { 13 | flex-grow: 1; 14 | flex-shrink: 1; 15 | } 16 | } 17 | } 18 | } 19 | 20 | .control { 21 | .help.counter { 22 | float: right; 23 | margin-left: 0.5em; 24 | } 25 | &.has-icon { 26 | .icon { 27 | &.is-right { 28 | right: 0; 29 | left: auto; 30 | } 31 | &.is-clickable { 32 | pointer-events: auto; 33 | cursor: pointer; 34 | } 35 | } 36 | .icon:not(.is-clickable), 37 | .input:focus + .icon { 38 | @each $name, $pair in $colors { 39 | $color: nth($pair, 1); 40 | $color-invert: nth($pair, 2); 41 | &.is-#{$name} { 42 | color: $color; 43 | } 44 | } 45 | } 46 | &.has-both-icon .input { 47 | padding-right: 2.25em; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/scss/components/_icon.scss: -------------------------------------------------------------------------------- 1 | .icon { 2 | @include unselectable; 3 | cursor: inherit; 4 | vertical-align: middle; 5 | .mdi { 6 | @extend .fa; 7 | font-family: "Material Icons"; 8 | font-weight: normal; 9 | font-style: normal; 10 | font-size: 24px; 11 | display: inline-block; 12 | // Suport for IE/Edge 13 | font-feature-settings: 'liga'; 14 | } 15 | svg { 16 | background-color: transparent; 17 | fill: currentColor; 18 | stroke-width: 0; 19 | stroke: currentColor; 20 | pointer-events: none; 21 | width: 1.5rem; 22 | height: 1.5rem; 23 | } 24 | // Sizes 25 | &.is-small { 26 | height: 1rem; 27 | width: 1rem; 28 | .mdi { 29 | font-size: 16px; 30 | } 31 | } 32 | &.is-medium { 33 | height: 2rem; 34 | width: 2rem; 35 | .mdi { 36 | font-size: 32px; 37 | } 38 | } 39 | &.is-large { 40 | height: 3rem; 41 | width: 3rem; 42 | .mdi { 43 | font-size: 48px; 44 | } 45 | } 46 | // Colors overrides 47 | @each $name, $pair in $colors { 48 | $color: nth($pair, 1); 49 | $color-invert: nth($pair, 2); 50 | &.is-#{$name} { 51 | color: $color; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/scss/components/_messages.scss: -------------------------------------------------------------------------------- 1 | .message, 2 | .notification { 3 | transition: opacity $speed-slow $easing; 4 | } 5 | 6 | .message.b-message .message-body, 7 | .notification.b-notification { 8 | display: flex; 9 | align-items: center; 10 | .icon { 11 | margin-right: 0.5em; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/components/_modal.scss: -------------------------------------------------------------------------------- 1 | .modal, 2 | .modal-content { 3 | transition: all $speed-slow $easing; 4 | } 5 | 6 | .modal-content { 7 | width: 960px; 8 | } 9 | 10 | .modal-enter, 11 | .modal-leave-active { 12 | opacity: 0; 13 | } 14 | .modal-enter .modal-content{ 15 | transform: scale(1.05); 16 | } 17 | .modal-leave-active .modal-content { 18 | transform: scale(1.05); 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/components/_notices.scss: -------------------------------------------------------------------------------- 1 | .notices { 2 | position: fixed; 3 | display: flex; 4 | top: 0; 5 | left: 0; 6 | right: 0; 7 | z-index: 1000; 8 | pointer-events: none; 9 | .toast { 10 | display: inline-flex; 11 | animation-duration: $speed-slow; 12 | margin: 1.5em 0.5em; 13 | text-align: center; 14 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); 15 | border-radius: 2em; 16 | padding: 0.75em 1.5em; 17 | pointer-events: auto; 18 | @each $name, $pair in $colors { 19 | $color: nth($pair, 1); 20 | $color-invert: nth($pair, 2); 21 | &.is-#{$name} { 22 | color: $color-invert; 23 | background: $color; 24 | } 25 | } 26 | } 27 | .snackbar { 28 | display: flex; 29 | align-items: center; 30 | justify-content: space-around; 31 | animation-duration: $speed-slow; 32 | margin: 0.5em; 33 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); 34 | border-radius: $radius-small; 35 | pointer-events: auto; 36 | background: $dark; 37 | color: $dark-invert; 38 | min-height: 3em; 39 | .text { 40 | padding: 0.5em 1em; 41 | } 42 | .action { 43 | margin-left: auto; 44 | padding: 0.5em; 45 | padding-left: 0; 46 | .button { 47 | font-weight: $weight-semibold; 48 | text-transform: uppercase; 49 | } 50 | @each $name, $pair in $colors { 51 | $color: nth($pair, 1); 52 | &.is-#{$name} { 53 | .button { 54 | color: $color; 55 | } 56 | } 57 | } 58 | } 59 | @include mobile { 60 | width: 100%; 61 | margin: 0; 62 | border-radius: 0; 63 | } 64 | @include tablet { 65 | min-width: 350px; 66 | max-width: 600px; 67 | overflow: hidden; 68 | } 69 | } 70 | // Modifers 71 | &.is-top { 72 | justify-content: center; 73 | } 74 | &.is-top-right { 75 | justify-content: flex-end; 76 | } 77 | &.is-bottom { 78 | top: auto; 79 | bottom: 0; 80 | justify-content: center; 81 | } 82 | &.is-bottom-left { 83 | top: auto; 84 | bottom: 0; 85 | } 86 | &.is-bottom-right { 87 | top: auto; 88 | bottom: 0; 89 | justify-content: flex-end; 90 | } 91 | &.is-toast { 92 | opacity: 0.92; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/scss/components/_pagination.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | .pagination-next, 3 | .pagination-previous { 4 | padding-left: 0.25em; 5 | padding-right: 0.25em; 6 | &.is-disabled { 7 | pointer-events: none; 8 | cursor: not-allowed; 9 | opacity: 0.5; 10 | } 11 | } 12 | &.is-simple { 13 | justify-content: normal; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/components/_radio.scss: -------------------------------------------------------------------------------- 1 | .radio { 2 | outline: none; 3 | display: inline-flex; 4 | align-items: center; 5 | & + .radio { 6 | margin-left: 0.5em; 7 | } 8 | input[type=radio] { 9 | display: none; 10 | + .check { 11 | position: relative; 12 | width: 1.25em; 13 | height: 1.25em; 14 | border: 2px solid $grey; 15 | background: none; 16 | transition: all $speed $easing; 17 | border-radius: 50%; 18 | &:before { 19 | content: ""; 20 | position: absolute; 21 | border-radius: 50%; 22 | left: -2px; // Border gap 23 | top: -2px; // Border gap 24 | width: inherit; 25 | height: inherit; 26 | background: $primary; 27 | transform: scale(0); 28 | transition: transform $speed $easing; 29 | } 30 | } 31 | &:checked + .check { 32 | border-color: $primary; 33 | &:before { 34 | transform: scale(0.5); 35 | } 36 | } 37 | } 38 | .control-label { 39 | padding-left: 0.5em; 40 | } 41 | &[disabled] { 42 | opacity: 0.5; 43 | } 44 | &:hover { 45 | input[type=radio] + .check { 46 | border-color: $primary; 47 | } 48 | } 49 | &:focus { 50 | input[type=radio] + .check { 51 | box-shadow: 0 0 0.5em rgba($grey, 0.8); 52 | } 53 | input[type=radio]:checked + .check { 54 | box-shadow: 0 0 0.5em rgba($primary, 0.8); 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/components/_select.scss: -------------------------------------------------------------------------------- 1 | .select { 2 | select { 3 | padding-right: 2.5em; 4 | option { 5 | color: $grey-dark; 6 | padding: 0.25em 0.5em; 7 | } 8 | option:disabled { 9 | cursor: not-allowed; 10 | opacity: 0.5; 11 | } 12 | optgroup { 13 | color: $grey-light; 14 | font-weight: $weight-normal; 15 | font-style: normal; 16 | padding: 0.25em 0; 17 | } 18 | } 19 | &.is-empty select { 20 | color: rgba($grey, 0.7); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /src/scss/components/_switch.scss: -------------------------------------------------------------------------------- 1 | .switch { 2 | cursor: pointer; 3 | display: inline-flex; 4 | align-items: center; 5 | & + .switch { 6 | margin-left: 0.5em; 7 | } 8 | input[type=checkbox] { 9 | display: none; 10 | + .check { 11 | position: relative; 12 | width: 2.75em; 13 | height: 1.5em; 14 | background: $grey-light; 15 | border-radius: 1em; 16 | transition: all $speed $easing; 17 | &:before { 18 | content: ""; 19 | position: absolute; 20 | border-radius: 50%; 21 | width: 1.5em; 22 | height: inherit; 23 | background: $background; 24 | transform: scale(0.74); 25 | box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); 26 | animation-name: switchOff; 27 | animation-timing-function: linear; 28 | } 29 | &.is-animated:before { 30 | animation-duration: $speed-slower; 31 | } 32 | } 33 | &:checked + .check { 34 | background: $primary; 35 | &:before { 36 | animation-name: switchOn; 37 | animation-fill-mode: forwards; 38 | } 39 | } 40 | } 41 | .control-label { 42 | padding-left: 0.5em; 43 | } 44 | &:hover { 45 | input[type=checkbox] + .check { 46 | background: rgba($grey-light, 0.9); 47 | } 48 | input[type=checkbox]:checked + .check { 49 | background: rgba($primary, 0.9); 50 | } 51 | } 52 | &:focus { 53 | outline: none; 54 | input[type=checkbox] + .check { 55 | box-shadow: 0 0 0.5em rgba($grey, 0.6); 56 | } 57 | input[type=checkbox]:checked + .check { 58 | box-shadow: 0 0 0.5em rgba($primary, 0.8); 59 | } 60 | } 61 | &.is-small { 62 | @include control-small; 63 | } 64 | &.is-medium{ 65 | @include control-medium; 66 | } 67 | &.is-large { 68 | @include control-large; 69 | } 70 | &[disabled] { 71 | opacity: 0.5; 72 | cursor: not-allowed; 73 | color: $grey; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/scss/components/_table.scss: -------------------------------------------------------------------------------- 1 | // Outside of .b-table so it can be used in normal html tables 2 | .table-wrapper { 3 | margin-bottom: 1.5rem; 4 | .table { 5 | margin-bottom: 0; 6 | } 7 | @include touch { 8 | overflow-x: auto; 9 | } 10 | } 11 | 12 | .b-table { 13 | .b-table-content { 14 | transition: opacity $speed $easing; 15 | .icon { 16 | transition: transform $speed-slow $easing; 17 | &.is-desc { 18 | transform: rotate(180deg); 19 | } 20 | } 21 | .table { 22 | th { 23 | font-weight: $weight-semibold; 24 | .th-wrap { 25 | display: flex; 26 | align-items: center; 27 | .icon { 28 | margin-left: 8px; 29 | margin-right: 0; 30 | font-size: 16px; 31 | transition: transform $speed-slow $easing, opacity $speed $easing; 32 | opacity: 0; 33 | &.is-visible { 34 | opacity: 1; 35 | } 36 | } 37 | &.is-numeric { 38 | flex-direction: row-reverse; 39 | .icon { 40 | margin-left: 0; 41 | margin-right: 8px; 42 | } 43 | } 44 | } 45 | &.is-current-sort { 46 | border-color: $grey; 47 | font-weight: $weight-bold; 48 | } 49 | &.is-sortable:hover { 50 | border-color: $grey; 51 | } 52 | &.is-sortable, 53 | &.is-sortable .th-wrap { 54 | cursor: pointer; 55 | } 56 | } 57 | tr { 58 | &.is-selected { 59 | .checkbox input { 60 | &:checked + .check { 61 | background: $primary-invert url(checkmark($primary)) no-repeat center center; 62 | } 63 | + .check { 64 | border-color: $primary-invert; 65 | } 66 | } 67 | } 68 | &.is-checked:not(.is-selected) { 69 | background: rgba($primary, 0.14) !important; 70 | td, 71 | th { 72 | border-color: $primary-invert; 73 | } 74 | } 75 | } 76 | .checkbox-cell { 77 | width: 40px; 78 | .checkbox { 79 | vertical-align: middle; 80 | } 81 | } 82 | // Modifiers 83 | &.is-bordered { 84 | th.is-current-sort, 85 | th.is-sortable:hover { 86 | border-color: $grey-lighter; 87 | background: $background; 88 | } 89 | } 90 | &.has-mobile-cards { 91 | @include mobile { 92 | thead { 93 | display: none; 94 | } 95 | tr { 96 | // Card style — Cannot extend inside media query 97 | box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1); 98 | max-width: 100%; 99 | position: relative; 100 | // --------------------------- 101 | display: block; 102 | margin: 0.25em; 103 | td { 104 | display: flex; 105 | border: 0; // Disables is-bordered 106 | width: auto; 107 | justify-content: flex-end; 108 | text-align: right; 109 | border-bottom: 1px solid $background; 110 | &:before { 111 | content: attr(data-label); 112 | font-weight: $weight-semibold; 113 | margin-right: auto; 114 | padding-right: 0.5em; 115 | text-align: left; 116 | } 117 | &:last-child { 118 | border-bottom: 0; 119 | } 120 | &.checkbox-cell { 121 | display: inherit; 122 | } 123 | } 124 | &:not(:last-child) { 125 | margin-bottom: 16px; 126 | } 127 | // Disables is-striped 128 | &:nth-child(even):not(.is-selected) { 129 | background: inherit; 130 | &:hover { 131 | background-color: inherit; 132 | } 133 | } 134 | } 135 | } 136 | } 137 | } 138 | 139 | .level { 140 | padding-bottom: 16px; 141 | .pagination { 142 | .info { 143 | padding-right: 8px; 144 | } 145 | } 146 | @include tablet { 147 | .level-left { 148 | padding-left: 16px; 149 | } 150 | .level-right { 151 | padding-right: 16px; 152 | } 153 | } 154 | } 155 | } 156 | 157 | &.is-loading { 158 | position: relative; 159 | .b-table-content { 160 | pointer-events: none; 161 | opacity: 0.5; 162 | } 163 | &:after { 164 | @include loader; 165 | position: absolute; 166 | top: 4em; 167 | left: calc(50% - 2.5em); 168 | width: 5em; 169 | height: 5em; 170 | border-width: 4px; 171 | } 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /src/scss/components/_tabs.scss: -------------------------------------------------------------------------------- 1 | .b-tabs { 2 | .tab-content { 3 | position: relative; 4 | overflow: hidden; 5 | display: flex; 6 | flex-direction: column; 7 | .tab-item { 8 | flex-shrink: 0; 9 | flex-basis: 100%; 10 | &.is-animated { 11 | transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.150, 0.860); 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/components/_tooltip.scss: -------------------------------------------------------------------------------- 1 | $arrow-size: 6px; 2 | $arrow-margin: 2px; 3 | 4 | $multiline-sizes: ( 5 | small: 180px, 6 | medium: 240px, 7 | large: 300px 8 | ); 9 | 10 | @mixin tooltip-arrow($direction, $color) { 11 | @if ($direction == "is-top") { 12 | border-top: $arrow-size solid $color; 13 | border-right: $arrow-size solid transparent; 14 | border-left: $arrow-size solid transparent; 15 | bottom: calc(100% + #{$arrow-margin}); 16 | } @else if ($direction == "is-bottom") { 17 | border-right: $arrow-size solid transparent; 18 | border-bottom: $arrow-size solid $color; 19 | border-left: $arrow-size solid transparent; 20 | top: calc(100% + #{$arrow-margin}); 21 | } @else if ($direction == "is-right") { 22 | border-top: $arrow-size solid transparent; 23 | border-right: $arrow-size solid $color; 24 | border-bottom: $arrow-size solid transparent; 25 | left: calc(100% + #{$arrow-margin}); 26 | } @else if ($direction == "is-left") { 27 | border-top: $arrow-size solid transparent; 28 | border-bottom: $arrow-size solid transparent; 29 | border-left: $arrow-size solid $color; 30 | right: calc(100% + #{$arrow-margin}); 31 | } 32 | } 33 | 34 | @mixin tooltip($direction) { 35 | &.#{$direction} { 36 | &:before, 37 | &:after { 38 | @if ($direction == "is-top") { 39 | top: auto; 40 | right: auto; 41 | bottom: calc(100% + #{$arrow-size} + #{$arrow-margin}); 42 | left: 50%; 43 | transform: translateX(-50%); 44 | } @else if ($direction == "is-bottom") { 45 | top: calc(100% + #{$arrow-size} + #{$arrow-margin}); 46 | right: auto; 47 | bottom: auto; 48 | left: 50%; 49 | transform: translateX(-50%); 50 | } @else if ($direction == "is-right") { 51 | top: 50%; 52 | right: auto; 53 | bottom: auto; 54 | left: calc(100% + #{$arrow-size} + #{$arrow-margin}); 55 | transform: translateY(-50%); 56 | } @else if ($direction == "is-left") { 57 | top: 50%; 58 | right: calc(100% + #{$arrow-size} + #{$arrow-margin}); 59 | bottom: auto; 60 | left: auto; 61 | transform: translateY(-50%); 62 | } 63 | } 64 | @each $name, $pair in $colors { 65 | $color: nth($pair, 1); 66 | &.is-#{$name}:before { 67 | @include tooltip-arrow($direction, $color) 68 | } 69 | } 70 | &.is-multiline { 71 | @each $name, $size in $multiline-sizes { 72 | &.is-#{$name}:after { 73 | width: $size; 74 | } 75 | } 76 | } 77 | } 78 | } 79 | 80 | // Base 81 | .tooltip { 82 | @include tooltip("is-top"); 83 | @include tooltip("is-right"); 84 | @include tooltip("is-bottom"); 85 | @include tooltip("is-left"); 86 | position: relative; 87 | display: inline-flex; 88 | &:before, 89 | &:after { 90 | position: absolute; 91 | content: ""; 92 | opacity: 0; 93 | visibility: hidden; 94 | pointer-events: none; 95 | } 96 | &:before { 97 | z-index: 889; 98 | } 99 | &:after { 100 | content: attr(data-label); 101 | width: auto; 102 | padding: 4px 8px; 103 | background: $primary; 104 | border-radius: $radius-small; 105 | font-size: 12px; 106 | font-weight: $weight-normal; 107 | color: $primary-invert; 108 | box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2); 109 | z-index: 888; 110 | white-space: nowrap; 111 | } 112 | &:not([data-label=""]):hover:before, 113 | &:not([data-label=""]):hover:after { 114 | opacity: 1; 115 | visibility: visible; 116 | } 117 | // Modifiers 118 | @each $name, $pair in $colors { 119 | $color: nth($pair, 1); 120 | $color-invert: nth($pair, 2); 121 | &.is-#{$name}:after { 122 | background: $color; 123 | color: $color-invert; 124 | } 125 | } 126 | &:not([data-label=""]).is-always { 127 | &:before, 128 | &:after { 129 | opacity: 1; 130 | visibility: visible; 131 | } 132 | } 133 | &.is-multiline { 134 | &:after { 135 | display: flex-block; 136 | text-align: center; 137 | white-space: normal; 138 | } 139 | } 140 | &.is-dashed { 141 | border-bottom: 1px dashed $grey-light; 142 | cursor: default; 143 | } 144 | &.is-square { 145 | &:after { 146 | border-radius: 0; 147 | } 148 | } 149 | &.is-animated { 150 | &:before, 151 | &:after { 152 | transition: opacity $speed $easing, visibility $speed $easing; 153 | } 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /src/scss/utils/_animations.scss: -------------------------------------------------------------------------------- 1 | // Some of the animations are from animate.css (https://daneden.github.io/animate.css) 2 | 3 | // Fade out 4 | @keyframes fadeOut { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | } 11 | } 12 | .fadeOut { 13 | animation-name: fadeOut; 14 | } 15 | 16 | @keyframes fadeOutDown { 17 | from { 18 | opacity: 1; 19 | } 20 | to { 21 | opacity: 0; 22 | transform: translate3d(0, 100%, 0); 23 | } 24 | } 25 | .fadeOutDown { 26 | animation-name: fadeOutDown; 27 | } 28 | 29 | @keyframes fadeOutUp { 30 | from { 31 | opacity: 1; 32 | } 33 | to { 34 | opacity: 0; 35 | transform: translate3d(0, -100%, 0); 36 | } 37 | } 38 | .fadeOutUp { 39 | animation-name: fadeOutUp; 40 | } 41 | 42 | // Fade In 43 | @keyframes fadeIn { 44 | from { 45 | opacity: 0; 46 | } 47 | to { 48 | opacity: 1; 49 | } 50 | } 51 | .fadeIn { 52 | animation-name: fadeIn; 53 | } 54 | 55 | @keyframes fadeInDown { 56 | from { 57 | opacity: 0; 58 | transform: translate3d(0, -100%, 0); 59 | } 60 | to { 61 | opacity: 1; 62 | transform: none; 63 | } 64 | } 65 | .fadeInDown { 66 | animation-name: fadeInDown; 67 | } 68 | 69 | @keyframes fadeInUp { 70 | from { 71 | opacity: 0; 72 | transform: translate3d(0, 100%, 0); 73 | } 74 | to { 75 | opacity: 1; 76 | transform: none; 77 | } 78 | } 79 | .fadeInUp { 80 | animation-name: fadeInUp; 81 | } 82 | 83 | // Switch animation 84 | 85 | @keyframes switchOn { 86 | 10%, 50% { 87 | width: 2em; 88 | border-radius: 8em; 89 | } 90 | 100% { 91 | transform: translate3d(80%, 0, 0) scale(0.74); 92 | } 93 | } 94 | 95 | @keyframes switchOff { 96 | 0% { 97 | transform: translate3d(80%, 0, 0) scale(0.74); 98 | } 99 | 50%, 90% { 100 | width: 2em; 101 | border-radius: 8em; 102 | } 103 | } 104 | 105 | /** 106 | * Vue Transitions 107 | */ 108 | 109 | // Fade 110 | .fade-enter, 111 | .fade-leave-active { 112 | opacity: 0; 113 | } 114 | 115 | // Zoom In 116 | .zoom-in-enter, 117 | .zoom-in-leave-active { 118 | opacity: 0; 119 | } 120 | .zoom-in-enter .animation-content { 121 | transform: scale(0.95); 122 | } 123 | .zoom-in-leave-active .animation-content { 124 | transform: scale(0.95); 125 | } 126 | 127 | // Zoom Out 128 | .zoom-out-enter, 129 | .zoom-out-leave-active { 130 | opacity: 0; 131 | } 132 | .zoom-out-enter .animation-content { 133 | transform: scale(1.05); 134 | } 135 | .zoom-out-leave-active .animation-content { 136 | transform: scale(1.05); 137 | } 138 | 139 | // Slide 140 | .slide-prev-leave-to, .slide-next-enter { 141 | transform: translate3d(-100%, 0, 0); 142 | position: absolute; 143 | width: 100%; 144 | } 145 | .slide-prev-enter, .slide-next-leave-to { 146 | transform: translate3d(100%, 0, 0); 147 | position: absolute; 148 | width: 100%; 149 | } 150 | -------------------------------------------------------------------------------- /src/scss/utils/_functions.scss: -------------------------------------------------------------------------------- 1 | // Helper function to replace characters in a string 2 | @function str-replace($string, $search, $replace: '') { 3 | $index: str-index($string, $search); 4 | @return if($index, 5 | str-slice($string, 1, $index - 1) + $replace + 6 | str-replace(str-slice($string, $index + 7 | str-length($search)), $search, $replace), 8 | $string); 9 | } 10 | 11 | // Encode svg function by http://codepen.io/jakob-e/pen/doMoML 12 | @function svg-encode($svg){ 13 | // Chunk up string in order to avoid "stack level too deep" error 14 | $encoded:''; 15 | $slice: 2000; 16 | $index: 0; 17 | $loops: ceil(str-length($svg)/$slice); 18 | @for $i from 1 through $loops { 19 | $chunk: str-slice($svg, $index, $index + $slice - 1); 20 | // Encode 21 | $chunk: str-replace($chunk, '"', '\''); 22 | $chunk: str-replace($chunk, '%', '%25'); 23 | $chunk: str-replace($chunk, '#', '%23'); 24 | $chunk: str-replace($chunk, '{', '%7B'); 25 | $chunk: str-replace($chunk, '}', '%7D'); 26 | $chunk: str-replace($chunk, '<', '%3C'); 27 | $chunk: str-replace($chunk, '>', '%3E'); 28 | 29 | $encoded: #{$encoded}#{$chunk}; 30 | $index: $index + $slice; 31 | } 32 | @return "data:image/svg+xml,#{$encoded}"; 33 | } 34 | 35 | @function checkmark($color) { 36 | $start: ''; 37 | $content: ''; 38 | $end: ''; 39 | 40 | @return svg-encode("#{$start}#{$content}#{$end}"); 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/utils/_theme-variables.scss: -------------------------------------------------------------------------------- 1 | // Color 2 | $primary: #7957d5; 3 | 4 | // Font 5 | $weight-semibold: 600; 6 | $weight-bold: 700; 7 | -------------------------------------------------------------------------------- /src/scss/utils/_variables.scss: -------------------------------------------------------------------------------- 1 | $speed-slow: 150ms !default; 2 | $speed-slower: 250ms !default; 3 | -------------------------------------------------------------------------------- /src/utils/MessageMixin.js: -------------------------------------------------------------------------------- 1 | import Icon from '../components/icon' 2 | /** 3 | * @mixin 4 | */ 5 | export default { 6 | components: { 7 | [Icon.name]: Icon 8 | }, 9 | props: { 10 | active: { 11 | type: Boolean, 12 | default: true 13 | }, 14 | title: String, 15 | closable: { 16 | type: Boolean, 17 | default: true 18 | }, 19 | type: String, 20 | hasIcon: Boolean 21 | }, 22 | data() { 23 | return { 24 | isActive: this.active 25 | } 26 | }, 27 | watch: { 28 | active(value) { 29 | this.isActive = value 30 | } 31 | }, 32 | computed: { 33 | /** 34 | * Icon name (MDI) based on type. 35 | */ 36 | icon() { 37 | switch (this.type) { 38 | case 'is-info': 39 | return 'info' 40 | case 'is-success': 41 | return 'check_circle' 42 | case 'is-warning': 43 | return 'warning' 44 | case 'is-danger': 45 | return 'error' 46 | default: 47 | return null 48 | } 49 | } 50 | }, 51 | methods: { 52 | /** 53 | * Close the Message and emit events. 54 | */ 55 | close() { 56 | this.isActive = false 57 | this.$emit('close') 58 | this.$emit('update:active', false) 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/utils/NoticeMixin.js: -------------------------------------------------------------------------------- 1 | import config from './config' 2 | /** 3 | * @mixin 4 | */ 5 | export default { 6 | props: { 7 | type: { 8 | type: String, 9 | default: 'is-dark' 10 | }, 11 | message: String, 12 | duration: { 13 | type: Number, 14 | default: 2000 15 | }, 16 | position: { 17 | type: String, 18 | default: 'is-top', 19 | validator(value) { 20 | return [ 21 | 'is-top-right', 22 | 'is-top', 23 | 'is-top-left', 24 | 'is-bottom-right', 25 | 'is-bottom', 26 | 'is-bottom-left' 27 | ].indexOf(value) > -1 28 | } 29 | }, 30 | container: String 31 | }, 32 | data() { 33 | return { 34 | isActive: false, 35 | parent: null, 36 | newContainer: this.container || config.defaultContentElement 37 | } 38 | }, 39 | computed: { 40 | transition() { 41 | switch (this.position) { 42 | case 'is-top-right': 43 | case 'is-top': 44 | case 'is-top-left': 45 | return { 46 | enter: 'fadeInDown', 47 | leave: 'fadeOutUp' 48 | } 49 | case 'is-bottom-right': 50 | case 'is-bottom': 51 | case 'is-bottom-left': 52 | return { 53 | enter: 'fadeInUp', 54 | leave: 'fadeOutDown' 55 | } 56 | } 57 | } 58 | }, 59 | methods: { 60 | /** 61 | * Check if has any element inside the container. 62 | */ 63 | hasChild(parent) { 64 | return parent !== null && parent.childElementCount > 0 65 | }, 66 | 67 | /** 68 | * Close the notice. 69 | * 1. Clear timer. 70 | * 2. Close notice. 71 | * 3. Remove element. 72 | */ 73 | close() { 74 | clearTimeout(this.timer) 75 | this.isActive = false 76 | 77 | // Timeout for the animation complete before destroying 78 | setTimeout(() => { 79 | this.$destroy() 80 | this.$el.remove() 81 | }, 150) 82 | }, 83 | 84 | /** 85 | * Show notice. 86 | * 1. Check if already has a notice playing, if has, add a timeout to try again. 87 | * 2. Insert element. 88 | * 3. Show notice. 89 | * 4. Add timer based on the duration prop. 90 | */ 91 | show() { 92 | if (this.hasChild(this.parent)) { 93 | // Add to "queue" (recursive) if already has a notice 94 | setTimeout(() => this.show(), 250) 95 | return 96 | } 97 | // This is from Toast or Snackbar 98 | this.insertEl() 99 | this.isActive = true 100 | this.timer = setTimeout(() => this.close(), this.duration) 101 | }, 102 | 103 | /** 104 | * Create container based on the prop or constructor option. 105 | */ 106 | init() { 107 | let parent 108 | parent = document.querySelector('.notices') 109 | 110 | const container = document.querySelector(this.newContainer) !== null 111 | ? document.querySelector(this.newContainer) 112 | : document.body 113 | 114 | if (!parent) parent = document.createElement('div') 115 | 116 | this.parent = parent 117 | if (this.newContainer) parent.style.position = 'absolute' 118 | 119 | container.appendChild(parent) 120 | } 121 | }, 122 | beforeMount() { 123 | this.init() 124 | }, 125 | mounted() { 126 | this.show() 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/utils/config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | defaultContentElement: null, 3 | defaultIconPack: "mdi", 4 | defaultTooltipType: "is-primary", 5 | defaultTooltipAnimated: false, 6 | defaultInputAutocomplete: "on" 7 | }; 8 | 9 | export default config; 10 | -------------------------------------------------------------------------------- /src/utils/helpers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Get value of an object property/path even if it's nested 3 | */ 4 | export function getValueByPath(obj, path) { 5 | const value = path.split('.').reduce((o, i) => o[i], obj) 6 | return value 7 | } 8 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/.gitkeep -------------------------------------------------------------------------------- /static/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /static/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /static/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /static/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /static/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /static/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /static/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /static/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /static/buefy-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/buefy-banner.png -------------------------------------------------------------------------------- /static/favicon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/favicon-128.png -------------------------------------------------------------------------------- /static/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon-196x196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/favicon-196x196.png -------------------------------------------------------------------------------- /static/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/favicon-32x32.png -------------------------------------------------------------------------------- /static/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/favicon-96x96.png -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/favicon.ico -------------------------------------------------------------------------------- /static/placeholder-1280x960.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-styleguidist/buefy-styleguide-example/6591042f7d7a6168d1a6770b4737e6a103e3b326/static/placeholder-1280x960.png -------------------------------------------------------------------------------- /styleguide.config.js: -------------------------------------------------------------------------------- 1 | const vueDocs = require("vue-docgen-api"); 2 | const camelToKebab = function(str) { 3 | return str.replace(/([A-Z])/g, function($1) { 4 | return "-" + $1.toLowerCase(); 5 | }); 6 | }; 7 | const { theme, styles } = require("./docs-styleguidist/styles"); 8 | 9 | module.exports = { 10 | sections: [ 11 | { 12 | name: "Buefy", 13 | content: "./docs-styleguidist/heading.md" 14 | }, 15 | { 16 | name: "Installation", 17 | content: "./docs-styleguidist/installation.md" 18 | }, 19 | { 20 | name: "Icon", 21 | content: "./docs-styleguidist/icon.md", 22 | components: "./src/components/icon/Icon.vue" 23 | }, 24 | { 25 | name: "Dropdown", 26 | content: "./docs-styleguidist/dropdown.md", 27 | components: function() { 28 | return [ 29 | "./src/components/dropdown/Dropdown.vue", 30 | "./src/components/dropdown/DropdownOption.vue" 31 | ]; 32 | } 33 | }, 34 | { 35 | name: "Tooltip", 36 | components: "./src/components/tooltip/Tooltip.vue" 37 | }, 38 | { 39 | name: "Modal", 40 | components: "./src/components/modal/Modal.vue" 41 | }, 42 | { 43 | name: "Tabs", 44 | components: function() { 45 | return [ 46 | "./src/components/tabs/Tabs.vue", 47 | "./src/components/tabs/TabItem.vue" 48 | ]; 49 | } 50 | }, 51 | { 52 | name: "Dialog", 53 | content: "./docs-styleguidist/dialog.md", 54 | components: "./src/components/dialog/Dialog.vue" 55 | } 56 | ], 57 | editorConfig: { 58 | theme: "dracula" 59 | }, 60 | require: [ 61 | "./docs-styleguidist/static/buefy.css", 62 | "./src/index.styleguide.js" 63 | ], 64 | template: { 65 | head: { 66 | links: [ 67 | { 68 | rel: "stylesheet", 69 | href: 70 | "//cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css" 71 | }, 72 | { 73 | rel: "stylesheet", 74 | href: 75 | "https://use.fontawesome.com/releases/v5.2.0/css/all.css" 76 | } 77 | ] 78 | } 79 | }, 80 | propsParser(file) { 81 | const doc = vueDocs.parse(file); 82 | doc.displayName = camelToKebab(doc.displayName); 83 | return doc; 84 | }, 85 | theme, 86 | styles, 87 | defaultExample: false 88 | }; 89 | --------------------------------------------------------------------------------