buefy / buefy

Lightweight UI components for Vue.js based on Bulma

Home Page:https://buefy.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Buefy Roadmap

rafaberaldo opened this issue · comments

Roadmap

Hello everyone, would like to share with you my thoughts on what I have in mind for Buefy in the future.

First of all, thanks a lot for contributing and spreading the package! Special thanks to @jtommy for the BIG help since the beginning!

A bit of background before anything else

I started Buefy to use on a project I'm working on. At the time I wanted to use Bulma as the CSS framework, but the vue/js options for it wasn't good enough. So I started creating these components on a folder in this project, when things started to get big I decided to open source it so more people could also make use. Glad to see a lot of you liked it!

Fun fact: I had everything I needed by version 0.4, every since is all about the community :)

Today and future

Today I still feel the same about this project — it should just be a lightweight UI layer:

  • I don't want to bloat it with tons of components that are just HTML (like card, bradcrumb) writing some HTML isn't that hard, is it? Bulma classes are so intuitive and easy to use.
  • I don't want to add anything too specific to components (dragging, manage localStorage, touch swipe, etc), if you need something like that you should extend the component to your needs.

Also, I will wait for Bulma v1 before releasing Buefy v1.

Overall things

  • Update contributing style guide (some of what I wrote is not the case anymore)
  • Create a vue-cli plugin
  • Improve docs
    • More reusable code
    • Add meta object on routes
    • More fiddle examples
    • Layout examples
    • Add a more complete tutorial page on how to work with SSR/Nuxt and a nuxt module
  • Add page to show projects made with Buefy
  • Discord server for the community

Code/component related

  • Add eslint-plugin-vue
  • Update tooltip to stay on an overlay layer (to avoid getting cropped by some layouts)
  • Create a <b-app> component to be the root of the page/spa, it will manage every "global level" overlay component (toast/snackbar/dialog/modal/loading/tooltip)
  • Break bTable into separated internal components (for maintainability, it's getting huge!)
  • Improve autocomplete to have scrollbar on dropdown
  • New range input component
  • New navbar component
  • New menu component
  • Unit tests
  • Export individual components

My questions

  1. Is Buefy working good on SSR? I haven't touch it yet.
  2. What you find about my thoughts? Disagree with anything?
  3. What you think it's missing mostly?

Thanks a lot for that post!

Also, I will wait for Bulma v1 before releasing Buefy v1.

i like that

Create a vue-cli template (boilerplate)

i'd prefer nuxt module

Discord server for the community

yay!

Is Buefy working good on SSR? I haven't touch it yet.

yes it is, kudos for that

Here's the things I would change/add:
Datepicker: You really need to allow selection of dates from other months. Especially when you show them to the user.
I used jQuery a lot and one thing they got right, was good developer experience. It would be nice for allowing us to define what format we want to get back so we won't have to modify it on the backend/frontend. Just like the jQuery datepicker allows. All you need to do is do the same as them.

Toastr and others - Give an option not to queue. That's the natural behavior, it should be the default in my opinion.

You should add a popover component that uses popper.js. It can be done in a few hours.

In general you have a very nice library. You just need to tweak some small things.

Thanks @rafaelpimpa & all contribs for making this happen.

Buefy works perfect in Nuxt with #306 for customization, I think customization for SSR can be added to official docs as I believe there are number of Nuxt users around. Customization will have some suppressible PostCSS warning, I think is from upstream.

What is the your requirement of vue-cli template?

As for suggestion, maybe side drawer, drag slider, maybe not carousel etc. Bulma inherits bit of Material Design right?

@gustojs thanks! btw taginput is done in dev branch (release 0.6.2)

@itzikbenh I'll take a closer look at datepicker (I'm not 100% aware of this component tbh), non queue snack/toast is done in dev branch (release 0.6.2), although the default still queue (animations aren't perfect and to prevent break changes) you will be able to set a default one in constructor options.

@bin4ryio I'll add an item to roadmap to write a better Nuxt installation/customization, maybe you could help with that? About vue-cli I'm not sure yet, I thought maybe get the PWA official and add buefy/sass to start, and later add a SSR one

For me a greatest feature is a properly loading for single component usage. Actually, all file is loaded because we used the es5 file :

Normally this works fine :

import Vue from 'vue';
import Field from 'buefy/src/components/field';
import Icon from 'buefy/src/components/icon';
import Input from 'buefy/src/components/input';

Vue.component(Field.name, Field);
Vue.component(Icon.name, Icon);
Vue.component(Input.name, Input);
// webpack.config.js
const webpack = require('webpack')
const path = require('path')

module.exports = {
    entry: './app.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [ // use `include` vs `exclude` to white-list vs black-list
                    path.resolve(__dirname, "src"), // white-list your app source files
                    require.resolve("buefy"), // white-list bootstrap-vue
                ],
                loader: "babel-loader"
            }
        ]
    }
}

I like the clean and simple approach of Buefy. One small component I often use on projects is a quantity incrementor. You'll find it on many e-commerce sites. Here's an example Vue component. It's typically built as a series of input fields with some props for min/max and a debounce.

Big fan of the project so far, thanks so much to yourself and all other contributors who have helped out!

@itzikbenh @rafaelpimpa re: datepicker - I also have had a few issues. Just to table a suggestion, what about pulling in flatpickr? Or more specifically, the vue component. I've hacked my own implementation for my own use, because I'm a big fan of flatpickr and have used it before. Date/Time pickers have been done so many times over, I think it might make sense to pull in a more mature component. Just my two cents!

If this is a direction you want to explore, I'd be happy to pursue making a PR at some point over the coming weeks. Cheers!

As well as @neovive's awesome suggestion, I'd like to see a step component added.

Keep up the good work!

I would like to see e2e tests integrated into this project. As this fantastic project grows larger and larger, the number of regressions along with each release will also increase, and automated test is the only way to prevent that happening.

Really cool work done here, just waiting the range input and buefy will cover all my needs :) And if the slider can be custom with a specific image it would be perfect!

Thanks for all!

sweet work. Can't wait for 0.6.4. When shall we expect it?

Hi all. I want to create bulma-menu component. Can you assign it to me ?

@rapidexact Contributions are always welcome!

Hi all, Who can explain how to use buefy by downloading it.. its not working for me please

commented

What do you think about a Level component? Level Bulma I was thinking about if it's a good idea or if there are far too many variatons so that creating a dedicated component for each use case is easier.

@agcty Maybe expanding on the Level with a grid-based component similar to the example towards the bottom of this article.

I really like this project and the simplicity of it. It gives good UX out of the box and looks good by default. I will use it for a major projects and looking forward to it.

My suggestion is to set a side time to address all the open issues. Advice here is not to be afraid to close stuff that is not relevant, belong on a forum etc. I find it is critical to keep issues section clean and tidy - this way serious problems do get posted and addressed.

Second is prioritizing "production ready" - addressing even the tiniest bugs will pay in a long run. I think it also goes well with your idea of skipping creating components just to bump the number of them as some other projects do...

Best of luck!

Hi @rafaelpimpa ,
Been going through the roadmap and few comments... and since am actually playing around with Buefy ... I could have help you guys with Hero and Drawer compontent for Buefy.. any thoughts? Maybe we could chat about it

Mac

commented

Are there any projects made with buefy? I'd like to see it in production.

@jtommy, since it seems you're currently the most active here, would any of this roadmap stuff include Accessibility as discussed in #576, #608, #647, etc? I've seen that the pull request in #913 is a small step, but it wouldn't be translatable... I myself did a pull request #647, but it's outdated, I would probably redo it by now.

I'm asking because my usage of Buefy on a large project is really getting complicated due to that. I'm really determined to help with some basic stuff as aria-labels and roles for dropdowns and modals. I just need a bit of orientation in terms of whether this is a project goal. For example, if we do add aria-labels as props to some components as pagination, how would it be named? If we need to use IDs to be referenced by aria-control, how should we handle it? Is there any place we can discuss this?

I'm aware you guys have plenty of things to worry with, but I truly believe this should be a priority concern in order to make the library suitable for real-life projects. Some things might be complicated to implement, but a great amount could be achieved with small work.

@mateuswetah I'm the main maintainer at the moment and I would like to improve that part. If you want contribute and discuss about we have a discord channel.

@mateuswetah I'm the main maintainer at the moment and I would like to improve that part. If you want contribute and discuss about we have a discord channel.

Great, I'll join discord to see if I can help. Thanks!

It would be great if there is a pretty range slider. I think, it's still not implemented right?

@mateuswetah I'm the main maintainer at the moment and I would like to improve that part. If you want contribute and discuss about we have a discord channel.

discord link?

@mateuswetah I'm the main maintainer at the moment and I would like to improve that part. If you want contribute and discuss about we have a discord channel.

discord link?

https://discordapp.com/invite/ZkdFJMr

Hi,

Thanks for this roadmap.
I use buefy in my work project and it fit very well my needs.

One feature I would love to have is to see buefy components added on bitsrc.io or something simillar.
I must admit, I did not try this servive yet but it seems very promissing for teams code sharing and testing.

What do you think about it ?

Add page to show projects made with Buefy

This is done with "Expo", isn'it ?

@Heziode updated!
@M0dM I don't know it but at first sight I didn't seen any ui libraries.

Hi @jtommy,

It seems there is a lot of ui components (4,363 components found) :
https://bit.dev/components?labels=ui%20components

@M0dM you're right but at the moment each component needs Bulma too

The range slider directly within Buefy could be something worth adding, what do you think about this? #1464

Hi I am using buefy in my admin panel. But feel lack of select2 component in buefy as we can say multiple select.
It should be as select2 .
Thanks for making a such beautiful library.

@vikrampariharcodereadr what do you need ? You might use dropdown (multiple) or taginput with autocomplete (in the last release there is infinite scroll support too)

In tag input we don't have dropdown option. if i dont know tag name in that case how can i select a tag.
So there should be a drop down option in taginut https://buefy.org/documentation/taginput

@jtommy regarding Bulma version 0.8.0: you mentioned in #2076 that it's coming in the Buefy version 0.9.0 - is there any time-frame regarding the scheduling of the mentioned release?

@jtommy Oh..Thank you . I am sorry . I did not read documentation properly.

Hi guys
is there a plan for right-to-left support in the roadmap?
I didn't find any but wonder if there are any plans or guidelines for sites that need to support right to left locales

Looking forward to b-app so the trigger-button and a modal can be provided in the same Vue Component. (this is possible now, but only if you don't absolutely position the button or the modal will be affected too)

Is support for an autoplay feature in the carousel list planned?

@tstrohmeier there is already autopsy feature, what do you mean?

Can i follow the state of the next release anywhere? I'm interested it when the release will happen

@jtommy only for the Carousel not for the Carousel List

Probably this roadmap is quite outdated so I'm going to publish a new soon, stay tuned !! 🎉

@jtommy Can you please publish the new ticket number here, so that I receive a notification?

Sure, I'll do it

I added a roadmap on Buefy project https://github.com/buefy/buefy/projects/6.
I have to decide if make a 0.9.x version (with breaking changes) or directly the v1.
It might depend on Bulma too