Hello team! We're trying to update our Vue project based on SchedulerPro 5.0.5 to 5.1.1 version. I see you have improved the type definitions. For example, here is build/schedulerpro.d.ts
file and "mode" field described for "SchedulerProConfig" type:
// 5.0.5
mode: string
// 5.1.1
mode: 'horizontal'|'vertical'
The problem appears in Vue, where you auto-generate components and props.
Go to schedulerpro-5.1.1/examples/frameworks/vue/vue-renderer
demo and get it running. In src/AppConfig.js
set mode to "vertical". See the error:
[Vue warn]: Invalid prop type: "horizontal" is not a constructor
found in
---> <BryntumSchedulerPro> at node_modules/@bryntum/schedulerpro-vue/src/BryntumSchedulerPro.vue
<App> at src/App.vue
<Root>
[Vue warn]: Invalid prop type: "vertical" is not a constructor
found in
---> <BryntumSchedulerPro> at node_modules/@bryntum/schedulerpro-vue/src/BryntumSchedulerPro.vue
<App> at src/App.vue
<Root>
If you look at node_modules/@bryntum/schedulerpro-vue/src/BryntumSchedulerPro.vue
file, you'll find how "mode" prop is defined
mode : { type : ['horizontal', 'vertical'], default : undefined },
According to Vue2 docs and Vue3 docs, type can be one of the following native constructors:
String
Number
Boolean
Array
Object
Date
Function
Symbol
or a custom constructor function. When you define multiple types, you set an array of types, meaning an array of available type values. For example:
propB: [String, Number],
But you cannot use
propB: ['foo', 'bar'],
since 'foo' and 'bar' are not constructors.
Therefore if you want to define a set of available strings, the only way I see is to use validator
function. For example:
propF: {
validator(value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].includes(value)
}
},
I have tried this code with the demo. Try to update BryntumSchedulerPro.vue file to see how it works:
mode : { type : String, default : undefined, validator(value) {
// The value must match one of these strings
return ['horizontal', 'vertical'].includes(value)
}},
If you intentionally define wrong value and reload the page, you'll see the following error:
mode : { type : String, default : undefined, validator(value) {
// The value must match one of these strings
return ['horizontal', 'vertical_wrong'].includes(value)
}},
[Vue warn]: Invalid prop: custom validator check failed for prop "mode".
found in
---> <BryntumSchedulerPro> at node_modules/@bryntum/schedulerpro-vue/src/BryntumSchedulerPro.vue
<App> at src/App.vue
<Root>
That proves validation works.
Please update Vue components in the next version, so we can update to the latest release.
Best regards,
Pavel
P.S. Please consider adding a vertical demo per framework. Should help to reveal such issues in the future.