Premium support for our pure JavaScript UI components


Post by pmiklashevich »

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>
Screen Shot 2022-08-07 at 15.09.18.png
Screen Shot 2022-08-07 at 15.09.18.png (556.9 KiB) Viewed 148 times

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.

Pavlo Miklashevych
Sr. Frontend Developer


Post by alex.l »

Thanks for the report and clear description, Pavel.
Here is a ticket https://github.com/bryntum/support/issues/5018

All the best,
Alex


Post Reply