@enso-ui/ui 6.2.7 → 7.0.0

package/src/bulma/styles/components/vue-filter.scss

@@ -0,0 +1,173 @@
+:is(.vue-filter, .input-filter, .interval-filter, .date-filter) {
+    background-color: var(--enso-filter-surface);
+    border: 1px solid var(--enso-surface-border);
+
+    :is(.header, .filter-header, .tabs-wrapper, .input-wrapper, .filter-wrapper, .select-wrapper, .filter-surface) {
+        background-color: var(--enso-filter-surface);
+        color: var(--bulma-text-strong);
+    }
+
+    :is(.header, .filter-header) {
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+        border-bottom: 1px solid color-mix(in srgb, var(--enso-surface-border) 70%, transparent);
+        padding-top: 0.5rem;
+    }
+
+    :is(.tabs-wrapper, .input-wrapper, .filter-wrapper, .select-wrapper) {
+        border-radius: inherit;
+        padding: 0.25em;
+    }
+
+    :is(.tabs, .filter-tags) {
+        background-color: var(--enso-filter-control-surface);
+        border: 1px solid var(--enso-surface-border);
+        box-shadow: none;
+    }
+
+    :is(.input, .textarea, .flatpickr-input.input),
+    .select select {
+        background-color: var(--enso-filter-control-surface);
+    }
+
+    .control.has-icons-right .icon.clear-button {
+        pointer-events: all;
+    }
+
+    .select-wrapper {
+        --enso-select-trigger-radius: var(--bulma-radius);
+        --enso-select-dropdown-radius: var(--bulma-radius);
+    }
+
+    .vue-select {
+        --enso-select-trigger-surface: var(--enso-filter-control-surface);
+        --enso-select-trigger-border: var(--enso-surface-border);
+        --enso-select-trigger-color: var(--bulma-text-strong);
+    }
+}
+
+.vue-filter,
+.toggle-filter {
+    .tabs-wrapper .tabs {
+        --enso-filter-accent: var(--bulma-warning);
+        min-height: var(--bulma-control-height);
+        height: var(--bulma-control-height);
+        border-radius: var(--bulma-radius);
+        -ms-overflow-style: none;
+        overflow: -moz-scrollbars-none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        li {
+            a {
+                min-height: var(--bulma-control-height);
+                height: var(--bulma-control-height);
+                padding: 0 0.25rem;
+            }
+
+            a:hover {
+                border-color: color-mix(in srgb, var(--enso-surface-border) 78%, transparent);
+                color: var(--bulma-text-strong);
+            }
+
+            &.is-active a {
+                background-color: var(--enso-filter-active-surface);
+                border-color: var(--enso-filter-active-border);
+                color: var(--enso-filter-active-color);
+            }
+        }
+
+        ul,
+        li:first-child a {
+            border-top-left-radius: var(--bulma-radius);
+            border-bottom-left-radius: var(--bulma-radius);
+        }
+
+        li:last-child a {
+            border-top-right-radius: var(--bulma-radius);
+            border-bottom-right-radius: var(--bulma-radius);
+        }
+    }
+}
+
+.vue-filter {
+    &.is-primary { --enso-filter-accent: var(--bulma-primary); }
+    &.is-link { --enso-filter-accent: var(--bulma-link); }
+    &.is-info { --enso-filter-accent: var(--bulma-info); }
+    &.is-success { --enso-filter-accent: var(--bulma-success); }
+    &.is-warning { --enso-filter-accent: var(--bulma-warning); }
+    &.is-danger { --enso-filter-accent: var(--bulma-danger); }
+
+    .tabs.is-toggle li a {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--bulma-text);
+        box-shadow: none;
+    }
+}
+
+.input-filter,
+.interval-filter {
+    .input-wrapper .input.control {
+        border-radius: var(--bulma-radius);
+    }
+}
+
+.date-filter {
+    .tag {
+        cursor: pointer;
+        margin: 2px;
+    }
+
+    .tags-wrapper .filter-tags {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.125rem;
+        min-height: var(--bulma-control-height);
+        height: var(--bulma-control-height);
+        padding: 0 0.2rem;
+        border-radius: var(--bulma-radius);
+
+        .direction-wrapper {
+            display: inline-flex;
+            align-items: center;
+            min-height: var(--bulma-control-height);
+            height: var(--bulma-control-height);
+        }
+
+        .direction {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .filter-wrapper {
+        .flatpickr-input,
+        .input,
+        .control .input {
+            border-radius: var(--bulma-radius);
+        }
+    }
+
+    .filter-tags .tag {
+        background-color: transparent;
+        border: 1px solid transparent;
+        color: var(--bulma-text);
+        box-shadow: none;
+    }
+
+    .filter-tags .tag:hover {
+        border-color: color-mix(in srgb, var(--enso-surface-border) 78%, transparent);
+        color: var(--bulma-text-strong);
+    }
+
+    .filter-tags .tag.is-warning {
+        background-color: var(--enso-filter-active-surface);
+        border-color: var(--enso-filter-active-border);
+        color: var(--enso-filter-active-color);
+    }
+}

package/src/bulma/styles/components.sass

@@ -0,0 +1,3 @@
+@use "./components/form"
+@use "./components/tables"
+@use "./components/vue-filter"

package/src/core/Root.vue

@@ -1,11 +1,13 @@
 <script>
-import { mapState, mapActions, mapGetters } from 'vuex';
 import { isNavigationFailure } from 'vue-router';
 import RouteMapper from '@enso-ui/route-mapper';
 import toastr from '@enso-ui/toastr';
 import http from 'axios';
 import i18n from '../modules/plugins/i18n';
 import ErrorHandler from './services/errorHandler';
+import { useStore } from './services/pinia';
+import { app } from '../pinia/app';
+import { layout } from '../pinia/layout';
 
 http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -33,11 +35,26 @@ export default {
     }),
 
     computed: {
-        ...mapState(['meta', 'routes']),
-        ...mapState('auth', ['isAuth']),
-        ...mapState('layout', ['home']),
-        ...mapGetters({ routeCollection: 'routes' }),
-        ...mapGetters('localisation', ['rtl']),
+        meta() {
+            return app().meta;
+        },
+        routes() {
+            return app().routes;
+        },
+        isAuth() {
+            return useStore('auth')?.isAuth ?? false;
+        },
+        home() {
+            return layout().home;
+        },
+        routeCollection() {
+            return Object.keys(this.routes);
+        },
+        rtl() {
+            const localisation = useStore('localisation');
+
+            return localisation?.rtl ?? false;
+        },
         direction() {
             return this.rtl ? 'rtl' : 'ltr';
         },
@@ -62,7 +79,9 @@ export default {
     },
 
     methods: {
-        ...mapActions('layout', ['loadTheme']),
+        loadTheme() {
+            return layout().loadTheme();
+        },
         canAccess(route) {
             return this.routeCollection.includes(route);
         },

package/src/core/app.js

@@ -13,7 +13,7 @@ class App {
         this.instance = app;
         this.store = store;
         this.router = router;
-        Resources.boot();
+        Resources.boot(this);
     }
 
     registerNavbarItem(key, component, order, permission = null) {

package/src/core/components/AppFooter.vue

@@ -1,16 +1,12 @@
 <script>
-import { mapState } from 'vuex';
+import { app } from '../../pinia/app';
 
 export default {
     name: 'AppFooter',
 
-    computed: {
-        ...mapState(['meta']),
-    },
-
     render() {
         return this.$slots.default({
-            meta: this.meta,
+            meta: app().meta,
         });
     },
 };

package/src/core/components/DocumentTitle.vue

@@ -1,5 +1,6 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { app } from '../../pinia/app';
+import { preferences } from '../../pinia/preferences';
 
 export default {
     name: 'DocumentTitle',
@@ -7,8 +8,12 @@ export default {
     inject: ['i18n'],
 
     computed: {
-        ...mapState(['meta']),
-        ...mapGetters('preferences', ['lang']),
+        meta() {
+            return app().meta;
+        },
+        lang() {
+            return preferences().global.lang;
+        },
         documentTitle() {
             if (this.$route.name === 'notFound') {
                 return '';

package/src/core/components/PageHeader.vue

@@ -1,11 +1,13 @@
 <script>
-import { mapState, mapMutations } from 'vuex';
+import { app } from '../../pinia/app';
 
 export default {
     name: 'PageHeader',
 
     computed: {
-        ...mapState(['meta']),
+        meta() {
+            return app().meta;
+        },
     },
 
     created() {
@@ -15,7 +17,9 @@ export default {
     },
 
     methods: {
-        ...mapMutations(['setPageTitle']),
+        setPageTitle(title) {
+            app().setPageTitle(title);
+        },
     },
 
     render() {

package/src/core/components/menu/Sidebar.vue

@@ -1,16 +1,12 @@
 <script>
-import { mapState } from 'vuex';
+import { useStore } from '../../services/pinia';
 
 export default {
     name: 'Sidebar',
 
-    computed: {
-        ...mapState('menu', ['menus']),
-    },
-
     render() {
         return this.$slots.default({
-            menus: this.menus,
+            menus: useStore('menu')?.menus ?? [],
         });
     },
 };

package/src/core/components/navbar/Navbar.vue

@@ -1,7 +1,8 @@
 <script>
-import { mapState, mapGetters, mapMutations } from 'vuex';
 import App from '../../app';
 import eventBus from '../../services/eventBus';
+import { app as useApp } from '../../pinia/app';
+import { layout as useLayout } from '../../pinia/layout';
 
 export default {
     name: 'Navbar',
@@ -10,33 +11,30 @@ export default {
 
     emits: ['stop-impersonating'],
 
-    computed: {
-        ...mapState(['meta', 'impersonating']),
-        ...mapState('layout', ['isMobile', 'isTouch', 'sidebar']),
-        ...mapGetters(['routes']),
-        items() {
-            return App.navbarItems.sort((a, b) => a.order - b.order)
-                .filter(({ permission }) => !permission
-                    || this.routes.includes(permission));
-        },
-    },
-
     methods: {
-        ...mapMutations('layout/sidebar', { toggleSidebar: 'toggle' }),
+        toggleSidebar() {
+            useLayout().toggleSidebar();
+        },
         stopImpersonating() {
             eventBus.$emit('stop-impersonating');
         },
     },
 
     render() {
+        const app = useApp();
+        const layout = useLayout();
+        const routes = Object.keys(app.routes);
+        const items = App.navbarItems.sort((a, b) => a.order - b.order)
+            .filter(({ permission }) => !permission || routes.includes(permission));
+
         return this.$slots.default({
-            meta: this.meta,
-            impersonating: this.impersonating,
+            meta: app.meta,
+            impersonating: app.impersonating,
             stopImpersonating: this.stopImpersonating,
-            isMobile: this.isMobile,
-            isTouch: this.isTouch,
-            sidebar: this.sidebar,
-            items: this.items,
+            isMobile: layout.isMobile,
+            isTouch: layout.isTouch,
+            sidebar: layout.sidebar,
+            items,
             toggleSidebar: this.toggleSidebar,
         });
     },

package/src/core/components/navbar/Search.vue

@@ -1,5 +1,5 @@
 <script>
-import { mapState, mapMutations } from 'vuex';
+import { layout } from '../../pinia/layout';
 
 export default {
     name: 'Search',
@@ -22,7 +22,9 @@ export default {
     }),
 
     computed: {
-        ...mapState('layout/navbar', ['isVisible']),
+        isVisible() {
+            return layout().navbar.isVisible;
+        },
     },
 
     mounted() {
@@ -34,7 +36,12 @@ export default {
     },
 
     methods: {
-        ...mapMutations('layout/navbar', ['show', 'hide']),
+        show() {
+            layout().showNavbar();
+        },
+        hide() {
+            layout().hideNavbar();
+        },
         redirect(item, to = null) {
             if (!to && !item.routes.length) {
                 return;

package/src/core/components/navbar/SettingsControl.vue

@@ -1,11 +1,13 @@
 <script>
-import { mapMutations } from 'vuex';
+import { layout } from '../../pinia/layout';
 
 export default {
     name: 'SettingsControl',
 
     methods: {
-        ...mapMutations('layout/settings', ['toggle']),
+        toggle() {
+            layout().toggleSettings();
+        },
     },
 
     render() {

package/src/core/components/settings/Settings.vue

@@ -1,31 +1,17 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
 import App from '../../app';
+import { app } from '../../pinia/app';
 
 export default {
     name: 'Settings',
 
-    computed: {
-        ...mapState(['user']),
-        ...mapState(['meta']),
-        ...mapState('layout', ['themes']),
-        ...mapState('localisation', ['languages']),
-        ...mapGetters(['routes']),
-        multiTheme() {
-            return Object.keys(this.themes).length > 1;
-        },
-        items() {
-            return App.settingsItems.sort((a, b) => a.order - b.order)
-                .filter(({ permission }) => !permission
-                    || this.routes.includes(permission));;
-        },
-    },
-
     render() {
+        const routes = Object.keys(app().routes);
+        const items = [...App.settingsItems].sort((a, b) => a.order - b.order)
+            .filter(({ permission }) => !permission || routes.includes(permission));
+
         return this.$slots.default({
-            multiTheme: this.multiTheme,
-            meta: this.meta,
-            items: this.items,
+            items,
         });
     },
 };

package/src/core/components/settings/SidebarState.vue

@@ -1,21 +1,19 @@
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { preferences } from '../../pinia/preferences';
 
 export default {
     name: 'SidebarState',
 
-    computed: {
-        ...mapGetters('preferences', ['expandedSidebar']),
-    },
-
     methods: {
-        ...mapActions('preferences', ['setSidebarState']),
+        setSidebarState(state) {
+            return preferences().setSidebarState(state);
+        },
     },
 
     render() {
         return this.$slots.default({
             bindings: {
-                modelValue: this.expandedSidebar,
+                modelValue: preferences().global.expandedSidebar,
             },
             events: {
                 'update:modelValue': state => (this.setSidebarState(state)),