Goodbye Buefy

[roiLeo]

Rewrite Buefy components in libs/ui using Oruga-ui

part of

• Towards Vue 3 / Nuxt 3 migration roadmap #2690

In Progress

• replace buefy snackbar & toast refactor: neo notification and remove buefy #6744

Done

• <b-progress /> => component or check Bulma ➖ remove b-progress component #5895
• <b-carousel /> => <NeoCarousel /> (Oruga Carousel) feat: NeoCarousel #5884
• <b-carousel-item /> => <NeoCarouselItem /> feat: NeoCarousel #5884
• <b-icon /> => <NeoIcon /> #5852 Buefy icon to neo icon #5858
• <b-modal /> => <NeoModal /> #5853 neo modal #5883
• <b-datepicker /> => <NeoDatepicker /> (Oruga Datepicker) refactor: add NeoDatepicker #5946
• <b-checkbox /> => <NeoCheckbox /> ➖ remove b-checkbox component #6000
• <b-steps /> => <NeoSteps /> (Oruga Steps) feat: add NeoSteps #5917
• <b-step-item /> => <NeoStepItem /> feat: add NeoSteps #5917
• <b-switch /> => <NeoSwitch /> (Oruga Switch) refactor: add NeoSwitch #5945
• <b-radio-button /> => <NeoRadioButton /> (Oruga Radio) refactor: add NeoRadio and NeoRadioButton #5976
• <b-autocomplete /> => <NeoAutocomplete /> (Oruga Autocomplete) #5853 neo autocomplete #6018
• <b-loading /> => <NeoLoading /> (Oruga Loading) #5852 move neo loader #5933
• <b-tooltip /> => ➖ remove b-tooltip component #5856
• <b-message /> => notification or Bulma message - 3 results ✨ NeoMessage component #6068
• <b-image /> => <img /> ➖ remove b-image component #5854
• <b-field /> => <NeoField /> #5852 Neo Input and Neo Field #5870
• <b-input /> => <NeoInput /> #5852 Neo Input and Neo Field #5870
• <b-tag /> => <NeoTag /> check Bulma Tag - 3 results #5852 remove buefy tag #6155
• <b-table /> => <NeoTable /> (Oruga Table) - 8 results (related with 🔧 asset page & NeoTable #6110, ➖ b-table component #6144)
• <b-table-columns /> => <NeoTableColumn /> - 87 results (related with 🔧 asset page & NeoTable #6110, ➖ b-table component #6144)
• <b-numberinput /> => <NeoInput /> type=number?? - 3 results #5852 b-numberinput to neoinput number #6195
• <b-taginput /> => <NeoInputitems /> - 1 result 🔧 NeoInputitems #6183
• <b-collapse /> => <NeoCollapse /> (Oruga Collapse) - 13 10 results refactor: neo collapse #6249
• <b-dropdown /> => <NeoDropdown /> - 3 results refactor: neo dropdown #6196
• <b-dropdown-item /> => <NeoDropdownItem /> - 26 results refactor: neo dropdown #6196
• <b-slider /> => <NeoSlider /> Oruga slider - 🔧 migrate b-slider to NeoSlider #6340
• <b-upload /> => <NeoUpload /> Oruga upload - 🔧 migrate b-upload to NeoUpload #6341
• <b-pagination /> => <NeoPagination /> Oruga Pagination 🔧 migrate b-pagination #6366
• <b-tabs /> => <NeoTabs /> (Oruga Tabs) - 9 results refactor: neo tabs #6231
• <b-tab-item /> => <NeoTabItem /> - 15 results refactor: neo tabs #6231
• <b-navbar /> => Bulma Navbar 🔧 migrate b-navbar #6382
• <b-navbar-item /> => custom html ??? 🔧 migrate b-navbar #6382
• <b-select /> => <NeoSelect /> - 15 results Feature NeoSelect #6200, Neo select component #6338
• <b-button /> => <NeoButton /> - 64 47 41 35 results (make it the last one) 🔧 migrate Buefy buttons #6437 🔧 migrate b-button part 2 #6449
• Programmatic Modal #6277

lmk if you want to work on a specific component.

[prachi00]

@roiLeo
I'll do

• <b-icon /> => <NeoIcon /> #5852 Buefy icon to neo icon #5858

[prachi00]

I'll do this now:

• <b-input /> => <NeoInput /> #5852 Neo Input and Neo Field #5870

[prachi00]

@roiLeo we also use <b-autocomplete which isnt mentioned in description

[0xemagic]

@roiLeo
I will handle the checkbox part.

[prachi00]

I'll also do <b-field to neofield as I need that in <neoinput

• <b-field /> => <NeoField />. #5852 Neo Input and Neo Field #5870

[prachi00]

Also doing this now:

• <b-modal /> => <NeoModal /> #5853 neo modal #5883
• <b-loading /> => <NeoLoading /> #5852 move neo loader #5933

[prachi00]

changing <b-button to <neobutton would change the ui of buttons everywhere, are we okay with that? @roiLeo

[roiLeo]

changing <b-button to <neobutton would change the ui of buttons everywhere, are we okay with that?

Nope, we sould keep UI how it is maybe try to create new variant?

[preschian]

will check on <b-carousel /> and <b-dropdown-item />

[preschian]

will check on <b-steps /> and <b-steps-item />

[preschian]

will check on b-switch, b-datepicker, and b-radio-button

edit: currently there is no equivalent of b-radio-button on oruga

[roiLeo]

Hey @brano-hozza just saw your oruga issue, I think this is stil doable with a workaround by adding icon prop to o-select component. And then you should be able to update class color.

[preschian]

will check on b-tabs and b-tab-item

[preschian]

will check b-collapse also

[roiLeo]

For Programmatic stuff (modal, toast, notification..), I think we need to do some important changes in libs/ui:

• use vue3 (or nuxt check out histoire examples)
• replace @histoire/plugin-vue2
• import @oruga-ui/oruga-next
• test components
• profit!

ref #5611

edit: #6610 (comment)

[yangwao]

Realistically we have it done all? Or are there some which might pop up?

[roiLeo]

Realistically we have it done all? Or are there some which might pop up?

Notification, Modal, Snackbar & Toast

see #6610 (comment) we'll need to make a big bang (Vue3 => Nuxt3 => Oruga-next) to close this one

[preschian]

Notification, Modal, Snackbar & Toast

see #6610 (comment) we'll need to make a big bang (Vue3 => Nuxt3 => Oruga-next) to close this one

I think we can make a separate issue for this

1. migrate Modal -> refactor: programmatic modal #6714
2. migrate Notification & Toast

and then, when we migrate to Nuxt3, we need to migrate to oruga-next also

3. migrate oruga-next -> 🔧 libs ui vue3 #6610

we need to remove buefy first before we go to no.3