update mixins to allow composition API

[indirectlylit]

Product

All

Desired behavior

The Vue composition API makes it possible to explicitly add functionality from modules to components using standard import mechanisms. This is preferable to using mixins because it makes it explicit which elements are being added and where it's coming from.

Current behavior

KResponsiveWindowMixin for example currently provides the following reactive properties:

• windowIsSmall: boolean
• windowIsMedium: boolean
• windowIsLarge: boolean
• windowHeight: integer height in pixels
• windowWidth: integer width in pixels
• windowBreakpoint: integer breakpoint level

However the usual mechanism for adding the mixin doesn't provide any hint as to what's being added:

  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';

  export default {
    name: 'SomeComponent',
    mixins: [KResponsiveWindowMixin],

(Optional) The Value Add

Easier discoverability and documentation

(Optional) Possible Tradeoffs

Might be more verbose in some cases, and lots of refactoring effort with not much user-facing benefit

[MisRob]

Even though using Composition API has the potential to become the most commonly encouraged way of using KResponsiveWindowMixin (and possibly other mixins as well), we plan this to be backward compatible. Therefore, the composition API support would be rather an alternative way to mixins. That would allow us to use the KDS version with this update in products immediately without the need to suddenly refactor all places that are using mixins (there are many).

[MisRob]

Some suggestions from @bjester:

it would be good to keep the global level handling of the resize events when transitioning to a composable structure. Adding multiple resize event handlers would be detrimental to performance. It may also be worth considering refactoring it to use matchMedia instead https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia