@enso-ui/ui 6.2.6 → 7.0.0

package/src/core/layouts/Default.vue

@@ -1,86 +1,79 @@
 <script>
-import {
-    mapState, mapGetters, mapMutations, mapActions,
-} from 'vuex';
 import eventBus from '../services/eventBus';
+import { useStore } from '../services/pinia';
+import { layout as useLayout } from '../../pinia/layout';
+import { preferences as usePreferences } from '../../pinia/preferences';
+import { loadAppState } from '../../pinia/loadState';
 
 export default {
     name: 'Default',
 
     inject: ['errorHandler', 'http', 'route', 'toastr'],
 
+    data: () => ({
+        appState: false,
+    }),
+
     computed: {
-        ...mapState(['meta', 'appState']),
-        ...mapState('layout', [
-            'header', 'isTablet', 'isMobile', 'sidebar', 'settings', 'footer',
-        ]),
-        ...mapGetters('localisation', ['rtl']),
-        ...mapGetters('preferences', ['bookmarks', 'toastrPosition']),
-        slideIn() {
-            return this.rtl ? 'slideInLeft' : 'slideInRight';
-        },
-        slideOut() {
-            return this.rtl ? 'slideOutLeft' : 'slideOutRight';
+        isTablet() {
+            return useLayout().isTablet;
         },
     },
 
-    watch: {
-        appState: {
-            handler(appState) {
-                if (appState) {
-                    this.toastr.setup(this.toastrPosition);
-
-                    if (this.$route.path === '/') {
-                        this.$router.push({name: 'default'});
-                    }
-                }
-            },
-            immediate: true,
+    methods: {
+        rtl() {
+            const localisation = useStore('localisation');
+            const lang = usePreferences().global.lang;
+            const rtl = localisation?.rtlLanguages ?? [];
+
+            return rtl.includes(lang);
         },
-        isTablet: {
-            handler() {
-                return this.isTablet
-                    ? this.hideSidebar()
-                    : this.showSidebar();
-            },
+        setIsTablet(value) {
+            useLayout().setIsTablet(value);
         },
-    },
+        setIsMobile(value) {
+            useLayout().setIsMobile(value);
+        },
+        setIsTouch(value) {
+            useLayout().setIsTouch(value);
+        },
+        showSidebar() {
+            useLayout().showSidebar();
+        },
+        hideSidebar() {
+            useLayout().hideSidebar();
+        },
+        async bootstrap() {
+            this.appState = false;
 
-    async created() {
-        await this.connect();
-        eventBus.$on('start-impersonating', this.startImpersonating);
-        eventBus.$on('stop-impersonating', this.stopImpersonating);
-    },
+            await loadAppState();
 
-    beforeMount() {
-        this.addTouchBreakpointsListeners();
-        this.updateTouchMode();
-    },
+            this.toastr.setup(usePreferences().global.toastrPosition);
 
-    unmounted() {
-        this.removeTouchBreakpointsListeners();
-    },
+            if (this.$route.path === '/') {
+                this.$router.push({ name: 'default' });
+            }
 
-    methods: {
-        ...mapMutations('layout', ['setIsTablet', 'setIsMobile', 'setIsTouch']),
-        ...mapMutations('layout/sidebar', { showSidebar: 'show', hideSidebar: 'hide' }),
-        ...mapActions(['loadAppState']),
-        ...mapActions('websockets', ['connect']),
+            this.appState = true;
+        },
         addTouchBreakpointsListeners() {
             document.addEventListener('visibilitychange', this.updateTouchMode);
             window.addEventListener('DOMContentLoaded', this.updateTouchMode);
             window.addEventListener('resize', this.updateTouchMode);
+            window.visualViewport?.addEventListener('resize', this.updateTouchMode);
         },
         updateTouchMode() {
             const TabletMaxWidth = 1023;
             const MobileMaxWidth = 768;
 
             if (!document.hidden) {
-                const rect = document.body.getBoundingClientRect();
-                this.setIsTablet(rect.width <= TabletMaxWidth);
-                this.setIsMobile(rect.width <= MobileMaxWidth);
+                const width = window.visualViewport?.width
+                    || document.documentElement.clientWidth
+                    || window.innerWidth;
+                this.setIsTablet(width <= TabletMaxWidth);
+                this.setIsMobile(width <= MobileMaxWidth);
                 this.setIsTouch(
-                    rect.width <= TabletMaxWidth || rect.width <= MobileMaxWidth,
+                    width <= TabletMaxWidth || width <= MobileMaxWidth,
                 );
             }
         },
@@ -88,34 +81,72 @@ export default {
             document.removeEventListener('visibilitychange', this.updateTouchMode);
             window.removeEventListener('DOMContentLoaded', this.updateTouchMode);
             window.removeEventListener('resize', this.updateTouchMode);
+            window.visualViewport?.removeEventListener('resize', this.updateTouchMode);
         },
         startImpersonating(id) {
             this.http.get(this.route('core.impersonate.start', id))
                 .then(({ data }) => {
                     this.toastr.warning(data.message);
-                    this.loadAppState();
+                    this.bootstrap();
                 }).catch(this.errorHandler);
         },
         stopImpersonating() {
             this.http.get(this.route('core.impersonate.stop'))
                 .then(({ data }) => {
                     this.toastr.info(data.message);
-                    this.loadAppState();
+                    this.bootstrap();
                 }).catch(this.errorHandler);
         },
     },
 
+    watch: {
+        isTablet: {
+            handler() {
+                return this.isTablet
+                    ? this.hideSidebar()
+                    : this.showSidebar();
+            },
+        },
+    },
+
+    async created() {
+        eventBus.$on('start-impersonating', this.startImpersonating);
+        eventBus.$on('stop-impersonating', this.stopImpersonating);
+        await this.bootstrap();
+    },
+
+    beforeMount() {
+        this.addTouchBreakpointsListeners();
+        this.updateTouchMode();
+    },
+
+    unmounted() {
+        this.removeTouchBreakpointsListeners();
+    },
+
     render() {
+        if (!this.appState) {
+            return null;
+        }
+
+        const layout = useLayout();
+        const preferences = usePreferences();
+        const {
+            header, sidebar, settings, footer,
+        } = layout;
+        const { bookmarks } = preferences.global;
+        const rtl = this.rtl();
+
         return this.$slots.default({
-            appState: this.appState,
-            sidebar: this.sidebar,
-            rtl: this.rtl,
-            slideIn: this.slideIn,
-            slideOut: this.slideOut,
-            settings: this.settings,
-            bookmarks: this.bookmarks,
-            header: this.header,
-            footer: this.footer,
+            appState: true,
+            sidebar,
+            rtl,
+            slideIn: rtl ? 'slideInLeft' : 'slideInRight',
+            slideOut: rtl ? 'slideOutLeft' : 'slideOutRight',
+            settings,
+            bookmarks,
+            header,
+            footer,
         });
     },
 };

package/src/core/layouts/Home.vue

@@ -1,5 +1,8 @@
 <script>
-import { mapState, mapMutations, mapActions } from 'vuex';
+import { useStore } from '../services/pinia';
+import { app } from '../../pinia/app';
+import { layout } from '../../pinia/layout';
+import { loadAppState } from '../../pinia/loadState';
 
 export default {
     name: 'Home',
@@ -10,44 +13,40 @@ export default {
         loading: true,
     }),
 
-    computed: {
-        ...mapState(['meta']),
-        ...mapState('auth', ['intendedRoute', 'intendedPath']),
-        ...mapState(['appState', 'showQuote']),
-    },
-
-    watch: {
-        appState(appState) {
-            if (appState) {
-                this.enterApp();
-            }
-        },
-    },
-
-    created() {
-        this.loadAppState();
+    async created() {
+        await loadAppState();
+        this.enterApp();
     },
 
     methods: {
-        ...mapMutations('auth', ['setIntendedRoute', 'setIntendedPath']),
-        ...mapMutations('layout', ['home']),
-        ...mapActions(['loadAppState']),
+        setIntendedRoute(value) {
+            useStore('auth')?.setIntendedRoute(value);
+        },
+        setIntendedPath(value) {
+            useStore('auth')?.setIntendedPath(value);
+        },
         enterApp() {
+            const showQuote = app().showQuote;
+
             this.redirectIfNeeded();
             this.loading = false;
 
-            if (!this.showQuote) {
+            if (!showQuote) {
                 this.hide();
             }
         },
         redirectIfNeeded() {
-            if (this.intendedRoute) {
-                const { name, params, query } = this.intendedRoute;
+            const auth = useStore('auth');
+            const intendedRoute = auth?.intendedRoute;
+            const intendedPath = auth?.intendedPath;
+
+            if (intendedRoute) {
+                const { name, params, query } = intendedRoute;
                 this.$router.push({ name, params, query })
                     .catch(this.routerErrorHandler);
                 this.setIntendedRoute(null);
-            } else if (this.intendedPath) {
-                this.$router.push({ path: this.intendedPath })
+            } else if (intendedPath) {
+                this.$router.push({ path: intendedPath })
                     .catch(this.routerErrorHandler);
                 this.setIntendedPath(null);
             } else if (this.$route.meta.guestGuard) {
@@ -56,15 +55,15 @@ export default {
             }
         },
         hide() {
-            this.home(false);
+            layout().setHome(false);
         },
     },
 
     render() {
         return this.$slots.default({
             loading: this.loading,
-            showQuote: this.showQuote,
-            quote: this.meta.quote,
+            showQuote: app().showQuote,
+            quote: app().meta.quote,
             hide: this.hide,
         });
     },

package/src/core/services/contexts.js

@@ -1,15 +1,55 @@
-export default {
-    bulma: {
-        coreRoutes: require.context('../../bulma/routes', false, /.*\.js$/),
-        icons: require.context('../../../../..', true, /src\/icons\.js$/),
-        register: require.context('../../../../..', true, /src\/bulma\/register\.js$/),
-        routes: require.context('../../../..', true, /src\/bulma\/routes\/\w+\.js$/),
-    },
-    common: {
-        store: require.context('../../../..', true, /src\/store\/\w+\.js$/),
+const makeContext = (modules, { keyTransform } = {}) => {
+    const entries = Object.entries(modules).map(([key, value]) => [
+        keyTransform ? keyTransform(key) : key,
+        value,
+    ]);
+
+    const map = Object.fromEntries(entries);
+    const keys = Object.keys(map);
+
+    const context = (key) => {
+        if (!(key in map)) {
+            const error = new Error(`Cannot find module '${key}'`);
+            error.code = 'MODULE_NOT_FOUND';
+            throw error;
+        }
+
+        return map[key];
+    };
+
+    context.keys = () => keys;
+    context.resolve = key => key;
+    context.id = 'vite-require-context';
+
+    return context;
+};
+
+const localRoutes = () => makeContext(
+    import.meta.glob('/src/js/routes/*.js', { eager: true }),
+    {
+        keyTransform: key => key.replace('/src/js/routes/', './'),
     },
+);
+
+const coreRoutes = () => makeContext(
+    import.meta.glob('/node_modules/@enso-ui/ui/src/bulma/routes/*.js', { eager: true }),
+);
+
+const icons = () => makeContext(
+    import.meta.glob('/node_modules/@enso-ui/**/src/icons.js', { eager: true }),
+);
+
+const register = () => makeContext(
+    import.meta.glob('/node_modules/@enso-ui/**/src/bulma/register.js', { eager: true }),
+);
+
+const routes = () => makeContext(
+    import.meta.glob('/node_modules/@enso-ui/**/src/bulma/routes/*.js', { eager: true }),
+);
+
+export default {
+    bulma: { coreRoutes, icons, register, routes },
     local: {
-        store: require.context('@root/store', false, /.*\.js$/),
-        routes: require.context('@root/routes', false, /.*\.js$/),
+        routes: localRoutes,
     },
 };

package/src/core/services/errorHandler.js

@@ -1,5 +1,6 @@
 import { showReportDialog } from '@sentry/browser';
 import { isNavigationFailure } from 'vue-router';
+import { useStore } from './pinia';
 
 const routerErrorHandler = error => {
     if (!isNavigationFailure(error)) {
@@ -30,15 +31,14 @@ const getUserFeedback = vm => vm.http.get('api/sentry')
 
 const redirectToLogin = vm => {
     if (vm.$route.name !== 'login') {
-        vm.$store.commit('auth/setIntendedRoute', vm.$route);
+        useStore('auth')?.setIntendedRoute(vm.$route);
     }
-    vm.$store.commit('appState', false);
-    vm.$store.commit('auth/logout');
+    useStore('auth')?.logout();
     vm.$router.push({ name: 'login' })
         .catch(routerErrorHandler);
 };
 
-const report = vm => (vm.$store.state.meta.env === 'production'
+const report = vm => ((useStore('app')?.meta?.env) === 'production'
     ? getUserFeedback(vm)
     : toastError(vm));
 

package/src/core/services/pinia.js

@@ -0,0 +1,7 @@
+import App from '../app';
+
+export const pinia = () => App.store ?? null;
+
+export const useStore = id => pinia()?._s?.get(id) ?? null;
+
+export const currentRoute = () => App.router?.currentRoute?.value ?? null;

package/src/core/services/resources.js

@@ -2,48 +2,53 @@ import contexts from './contexts';
 
 class Resources {
     constructor() {
-        this.profile = process.env.VUE_APP_PROFILE;
+        this.profile = 'bulma';
         this.contexts = contexts;
     }
 
-    boot() {
-        this.requireContext(this.register())
+    boot(app) {
+        this.requireContext(this.register(), app)
             .requireContext(this.icons());
     }
 
     coreRoutes() {
-        return this.contexts[this.profile].coreRoutes;
+        return this.resolve(this.contexts[this.profile].coreRoutes);
     }
 
     icons() {
-        return this.contexts[this.profile].icons;
+        return this.resolve(this.contexts[this.profile].icons);
     }
 
     register() {
-        return this.contexts[this.profile].register;
+        return this.resolve(this.contexts[this.profile].register);
     }
 
     routes() {
-        return this.contexts[this.profile].routes;
+        return this.resolve(this.contexts[this.profile].routes);
     }
 
     localRoutes() {
-        return this.contexts.local.routes;
+        return this.resolve(this.contexts.local.routes);
     }
 
-    store() {
-        return this.contexts.common.store;
-    }
-
-    localStore() {
-        return this.contexts.local.store;
-    }
+    requireContext(requireContext, app = null) {
+        requireContext.keys().forEach(file => {
+            const module = requireContext(file);
+            const register = module?.default ?? module;
 
-    requireContext(requireContext) {
-        requireContext.keys().forEach(file => requireContext(file));
+            if (app && typeof register === 'function') {
+                register(app);
+            }
+        });
 
         return this;
     }
+
+    resolve(contextOrFactory) {
+        return typeof contextOrFactory === 'function'
+            ? contextOrFactory()
+            : contextOrFactory;
+    }
 };
 
 export default new Resources();

package/src/core/services/router.js

@@ -1,17 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import RouteBuilder from './routeBuilder';
-import store from './store';
 import before from '../../middleware/before';
 
 const router = createRouter({
-    history: createWebHistory(process.env.BASE_URL),
+    history: createWebHistory(import.meta.env.BASE_URL),
     routes: new RouteBuilder().handle(),
     scrollBehavior(to, from, savedPosition) {
         return savedPosition || { left: 0, top: 0 };
     },
 });
 
-router.beforeEach((to, from, next) => before(to, from, next, store));
+router.beforeEach((to, from, next) => before(to, from, next));
 
 router.onError(error => {
     const regExp = new RegExp('Loading chunk chunk-\\w* failed.');

package/src/icons.js

@@ -1,4 +1,10 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faCogs, faSlidersH } from '@fortawesome/free-solid-svg-icons';
+import {
+    faEye,
+    faGears,
+    faListUl,
+    faPen,
+    faSliders,
+} from '@fortawesome/free-solid-svg-icons';
 
-library.add(faCogs, faSlidersH);
+library.add(faEye, faGears, faListUl, faPen, faSliders);

package/src/middleware/before/auth.js

@@ -1,15 +1,19 @@
+import { useStore } from '../../core/services/pinia';
+
 const exceptions = ['notFound', 'unauthorized', 'maintenanceMode'];
 
-const authorized = (store, to) => !store.state.appState
-    || store.getters.routes.includes(to.name)
+const authorized = (app, to) => !app.meta?.appUrl
+    || Object.keys(app.routes ?? {}).includes(to.name)
     || exceptions.includes(to.name);
 
-export default (to, from, next, store) => {
+export default (to, from, next) => {
+    const app = useStore('app');
+
     if (to.meta.guestGuard) {
         next({ path: '/' });
-    } else if (store.state.appUpdate) {
+    } else if (app.appUpdate) {
         next(false);
-    } else if (!authorized(store, to)) {
+    } else if (!authorized(app, to)) {
         next({ name: 'unauthorized' });
     } else {
         next();

package/src/middleware/before/guest.js

@@ -1,9 +1,13 @@
-export default (to, from, next, store) => {
+import { useStore } from '../../core/services/pinia';
+
+export default (to, from, next) => {
+    const auth = useStore('auth');
+
     if (to.meta.guestGuard) {
         next();
     } else {
         if (!['login', '/'].includes(window.location.pathname)) {
-            store.commit('auth/setIntendedPath', window.location.pathname);
+            auth.setIntendedPath(window.location.pathname);
         }
 
         next({ name: 'login' });

package/src/middleware/before.js

@@ -1,10 +1,11 @@
 import guest from './before/guest';
 import auth from './before/auth';
+import { useStore } from '../core/services/pinia';
 
-export default (to, from, next, store) => {
-    if (store.state.auth.isAuth) {
-        auth(to, from, next, store);
+export default (to, from, next) => {
+    if (useStore('auth')?.isAuth) {
+        auth(to, from, next);
     } else {
-        guest(to, from, next, store);
+        guest(to, from, next);
     }
 };

package/src/modules/importers/routeImporter.js

@@ -4,4 +4,27 @@ const routeImporter = requireContext => requireContext.keys()
         ? [...routes, ...route.default]
         : [...routes, route.default]), []);
 
+const makeContext = modules => {
+    const map = Object.fromEntries(Object.entries(modules));
+    const keys = Object.keys(map);
+
+    const context = key => {
+        if (!(key in map)) {
+            const error = new Error(`Cannot find module '${key}'`);
+            error.code = 'MODULE_NOT_FOUND';
+            throw error;
+        }
+
+        return map[key];
+    };
+
+    context.keys = () => keys;
+    context.resolve = key => key;
+    context.id = 'vite-require-context';
+
+    return context;
+};
+
+routeImporter.fromGlob = modules => routeImporter(makeContext(modules));
+
 export default routeImporter;

package/src/modules/plugins/bootEnums.js

@@ -1,6 +1,15 @@
 import Enum from '@enso-ui/enums';
+import { useStore } from '../../core/services/pinia';
 
-const bootEnums = (enums, i18n) => {
+const translate = key => {
+    const localisation = useStore('localisation');
+
+    return localisation?.ready
+        ? localisation.translate(key)
+        : key;
+};
+
+const bootEnums = (enums, i18n = translate) => {
     const obj = {};
 
     Object.keys(enums)

package/src/modules/plugins/date-fns/format.js

@@ -1,8 +1,13 @@
 import format from '@enso-ui/date/src/format.js';
-import store from '../../../core/services/store';
+import { useStore } from '../../../core/services/pinia';
 
-export default (date, formatStr = null) => format(
-    date,
-    formatStr || store.state.meta.dateFormat,
-    store.state.preferences.global.lang,
-);
+export default (date, formatStr = null) => {
+    const state = useStore('app');
+    const preferences = useStore('preferences');
+
+    return format(
+        date,
+        formatStr || state.meta.dateFormat,
+        preferences.global.lang,
+    );
+};

package/src/modules/plugins/date-fns/formatDistance.js

@@ -1,4 +1,4 @@
-import store from '../../../core/services/store';
 import formatDistance from '@enso-ui/date/src/formatDistance.js';
+import { useStore } from '../../../core/services/pinia';
 
-export default date => formatDistance(date, store.state.preferences.global.lang);
+export default date => formatDistance(date, useStore('preferences').global.lang);