@hperchec/scorpion-ui-template-default/src/root-instance/root-mixin.js

Scorpion UI - Default template

import { Core } from '@hperchec/scorpion-ui'
// Tailwind resolveConfig
import resolveTailwindConfig from 'tailwindcss/resolveConfig'

export default {
  data () {
    return {
      shared: {
        /**
         * @alias options.data.shared.TAILWIND
         * @type {Object}
         * @description The tailwind data and utils to share (i.e. config)
         */
        TAILWIND: {
          config: function () {
            return resolveTailwindConfig(Core.config.TAILWIND.CONFIG)
          },
          getColors: function () {
            return this.config.theme.colors
          },
          getColor: function (name) {
            return this.config.theme.colors[name]
          }
        }
      },
      userSettings: {
        theme: undefined // Default (will be set in created hook)
      },
      /**
       * @alias options.data.currentBreakpoint
       * @type {?Object}
       * @description
       * The current breakPoint. Default to null (will be set in created hook)
       */
      currentBreakpoint: null,
      /**
       * @alias options.data.currentTheme
       * @type {?string}
       * @description
       * The current theme. Default to null (will be set in created hook)
       */
      currentTheme: null,
      /**
       * @alias options.data.defaultTheme
       * @type {?string}
       * @description
       * The default theme. Default to null (will be set in created hook)
       */
      defaultTheme: null,
      /**
       * @alias options.data.fallbackTheme
       * @type {?string}
       * @description
       * The fallback theme. Default to null (will be set in created hook)
       */
      fallbackTheme: null,
      /**
       * If data is ready
       */
      dataReady: false
    }
  },
  // Created hook
  async created () {
    // Set default and fallback theme
    this.defaultTheme = Core.config.system.defaultTheme
    this.fallbackTheme = Core.config.system.fallbackTheme
    // Then, set theme
    this._app.ui.setTheme(this.userSettings.theme || Core.config.system.defaultTheme)
    // Breakpoint & window resize observer
    this.currentBreakpoint = this._app.ui.getBreakpointForWidth(window.innerWidth)
    window.addEventListener('resize', () => {
      if (this.currentBreakpoint.name !== this._app.ui.getBreakpointForWidth(window.innerWidth).name) {
        this.currentBreakpoint = this._app.ui.getBreakpointForWidth(window.innerWidth)
        this.emit('BREAKPOINT_CHANGED', this.currentBreakpoint)
      }
    })
  }
}