Migrate to 3.0
Please follow the migration guides from
matestack-ui-core and matestack-ui-vuejs first!You can go through the dummy app to review the result of the miration here The dummy app was updated to Matestack 3 and Rails 7
JavaScript setup changed
Below you see the new version of mounting the Vue.js v3 driven
matestack-ui-vuejs package with notes on how to add matestack-ui-bootstrap on top:app/javascript/packs/application.js1
import "./stylesheets/application.scss"; // add this
2
​
3
import { createApp } from 'vue'
4
import MatestackUiVueJs from 'matestack-ui-vuejs'
5
​
6
import MatestackUiBootstrap from 'matestack-ui-bootstrap' // add this
7
​
8
const appInstance = createApp({})
9
​
10
MatestackUiBootstrap.registerComponents(appInstance) // add this
11
​
12
document.addEventListener('DOMContentLoaded', () => {
13
MatestackUiVueJs.mount(appInstance)
14
})
Copied!
ChartJs component (and any custom component) $refs definition and usage:
Defining Vue.js refs has changed:
app/matestack/components/chart_js.rb1
class Components::ChartJs < Matestack::Ui::VueJsComponent
2
vue_name "chart-js-component"
3
​
4
# ...
5
​
6
def response
7
div class: "chart-container #{context.bs_class}", style: "width: 100%; height: 100%;" do
8
# documented before:
9
# plain "<canvas ref='chart'></canvas>".html_safe
10
# instead do:
11
plain "<canvas matestack-ui-vuejs-ref=#{matestack_ui_vuejs_ref('chart')}></canvas>".html_safe
12
end
13
end
14
​
15
end
Copied!
app/matestack/components/chart_js.js1
const chartElement = this.$refs.chart // before
2
//...
3
const chartElement = this.getRefs().chart // after (search above and replace)
4
//...
Copied!
More migration steps for ChartJs component required, see below!
Flatpickr component (and any custom component) $el usage
app/matestack/components/form/flatpickr.js1
//...
2
// flatpickr(this.$el.querySelector('.flatpickr'), { // old
3
flatpickr(this.getElement().querySelector('.flatpickr'), {
4
defaultDate: this.props["init_value"],
5
enableTime: (this.props["enable_time"] == true)
6
});
7
//...
Copied!
More migration steps for Flatpickr component required, see below!
Custom component (including ChartJs/Flatpickr) integration
The custom component defintion and integration has changed. Below you see on the example of the ChartJs component, what needs to be changed:
app/matestack/components/chart_js.js1
import Chart from 'chart.js';
2
import MatestackUiVueJs from 'matestack-ui-vuejs' // new package name!
3
// no Vue import here anymore
4
​
5
// no more Vue.component(...), define plain object here:
6
const chartJsComponent = {
7
mixins: [MatestackUiVueJs.componentMixin], // new package name!
8
template: MatestackUiVueJs.componentHelpers.inlineTemplate, // add this
9
// ...
10
}
11
​
12
export default chartJsComponent // add export
Copied!
and then in your application.js file:
1
import chartJsComponent from '../../matestack/components/chart_js.js'// import component definition from source
2
​
3
const appInstance = createApp({})
4
​
5
appInstance.component('chart-js-component', chartJsComponent) // register at appInstance
6
​
7
MatestackUiBootstrap.registerComponents(appInstance)
8
​
9
document.addEventListener('DOMContentLoaded', () => {
10
MatestackUiVueJs.mount(appInstance)
11
})
Copied!
Admin template class
Matestack::Ui::Bootstrap::Apps::AdminTemplateis nowMatestack::Ui::Bootstrap::Layouts::AdminTemplate
--> Search & Replace
Manually including the registry is not longer required
include Matestack::Ui::Bootstrap::Registrycan now be removed as it the component will be automatically available when installingmatestack-ui-bootstrap
Last modified 3mo ago
Copy link