@enso-ui/ui 6.2.7 → 7.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 laravel-enso
+Copyright (c) 2026 laravel-enso
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/bulma/index.js

@@ -1,3 +1,3 @@
-import App from '../src/bulma/App.vue';
+import Root from '../src/bulma/Root.vue';
 
-export default App;
+export default Root;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@enso-ui/ui",
-  "version": "6.2.7",
+  "version": "7.0.1",
   "description": "Laravel Enso UI",
-  "main": "index.js",
+  "main": "bulma/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -17,7 +17,7 @@
     "template"
   ],
   "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/enso-ui/ui/issues"
   },
@@ -57,44 +57,47 @@
     "@enso-ui/switch": "^2.0",
     "@enso-ui/tables": "^3.0",
     "@enso-ui/tabs": "^2.0",
-    "@enso-ui/themes": "^3.0",
     "@enso-ui/toastr": "^3.0",
     "@enso-ui/transitions": "^2.0",
     "@enso-ui/typeahead": "^3.0",
     "@enso-ui/uploader": "^2.0",
     "@enso-ui/user-groups": "^3.0",
     "@enso-ui/users": "^3.0",
-    "@fortawesome/fontawesome-free": "^5.2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-brands-svg-icons": "^5.11.2",
-    "@fortawesome/free-regular-svg-icons": "^5.2.0",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "tiny-emitter": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "3.1.3",
+    "@sentry/browser": "^6.16.1",
     "@sentry/tracing": "^6.16.1",
     "@sentry/vue": "^6.16.1",
-    "animate.css": "^4.0.0",
-    "axios": "^0.27.0",
-    "bulma": "^0.9.0",
-    "flag-icon-css": "^3.0.0",
-    "laravel-echo": "^1.5.3",
-    "lodash": "^4.17.11",
-    "pusher-js": "^7.0.0",
-    "tiny-emitter": "^2.1.0",
+    "axios": "^1.0.0",
+    "bulma": "^1.0.0",
+    "date-fns": "^2.0.0 || ^4.0.0",
+    "laravel-echo": "^1.0.0 || ^2.0.0",
+    "pinia": "^3.0.3",
+    "pusher-js": "^7.0.0 || ^8.0.0",
     "v-tooltip": "^4.0.0-beta.2",
     "vue": "^3.0",
-    "vue-router": "^4.0.0",
-    "vuedraggable": "^4.1.0",
-    "vuex": "^4.0.0"
+    "vue-router": "^4.0.0"
   },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "autoprefixer": "^9.6.1",
-    "babel-eslint": "^10.0.1",
-    "cross-env": "^6.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-vue": "^8.0.3"
+  "peerDependenciesMeta": {
+    "@sentry/browser": {
+      "optional": true
+    },
+    "@sentry/tracing": {
+      "optional": true
+    },
+    "@sentry/vue": {
+      "optional": true
+    },
+    "laravel-echo": {
+      "optional": true
+    },
+    "pusher-js": {
+      "optional": true
+    }
   }
 }

package/renderless/components/settings/index.js

@@ -1,13 +1,6 @@
-import BookmarksState from '../../../src/core/components/settings/BookmarksState.vue';
-import KeyCollector from '../../../src/core/components/settings/KeyCollector.vue';
-import LanguageSelector from '../../../src/core/components/settings/LanguageSelector.vue';
 import SidebarState from '../../../src/core/components/settings/SidebarState.vue';
 import Settings from '../../../src/core/components/settings/Settings.vue';
-import ThemeSelector from '../../../src/core/components/settings/ThemeSelector.vue';
-import ToastrPosition from '../../../src/core/components/settings/ToastrPosition.vue';
-import Tutorial from '../../../src/core/components/settings/Tutorial.vue';
 
 export {
-    BookmarksState, KeyCollector, LanguageSelector, SidebarState, Settings, ThemeSelector,
-    ToastrPosition, Tutorial,
+    SidebarState, Settings,
 };

package/renderless/index.js

@@ -1,3 +1,3 @@
-import App from '../src/core/App.vue';
+import Root from '../src/core/Root.vue';
 
-export default App;
+export default Root;

package/src/bulma/components/AppFooter.vue

@@ -10,7 +10,7 @@
                             </strong>
                             {{ i18n('built with') }}
                             <span class="icon has-text-danger">
-                                <fa icon="heart"/>
+                                <fa :icon="faHeart"/>
                             </span>
                             <span class="ml-1">
                                 +
@@ -60,7 +60,7 @@
                 <a href="https://github.com/laravel-enso/enso"
                     target="_blank">
                     <span class="icon">
-                        <fa :icon="['fab', 'github']"/>
+                        <fa :icon="faGithub"/>
                     </span>
                 </a>
             </div>
@@ -70,42 +70,42 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faHeart } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import BaseAppFooter from '../../core/components/AppFooter.vue';
 
-library.add(faHeart, faGithub);
-
 export default {
     name: 'AppFooter',
 
     components: { BaseAppFooter, Fa },
 
     inject: ['i18n'],
+
+    data: () => ({
+        faGithub,
+        faHeart,
+    }),
 };
 </script>
 
 <style lang="scss">
-    @import '@enso-ui/themes/bulma/variables';
-
     .footer {
         background: inherit;
         [dir='ltr'] & {
-            margin-left: $sidebar-width;
+            margin-left: var(--enso-sidebar-width);
             transition: margin-left .5s, width .5s;
         }
         [dir='rtl'] & {
-            margin-right: $sidebar-width;
+            margin-right: var(--enso-sidebar-width);
             transition: margin-right .5s, width .5s;
         }
 
         &.sidebar-collapsed {
             [dir='ltr'] & {
-                margin-left: $sidebar-collapsed-width;
+                margin-left: var(--enso-sidebar-collapsed-width);
             }
             [dir='rtl'] & {
-                margin-right: $sidebar-collapsed-width;
+                margin-right: var(--enso-sidebar-collapsed-width);
             }
         }
 

package/src/bulma/components/Breadcrumbs.vue

@@ -3,16 +3,18 @@
         <ul>
             <core-breadcrumbs>
                 <template #default="{ breadcrumbs, hasNavigation }">
-                    <li v-for="breadcrumb in breadcrumbs"
+                    <li v-for="(breadcrumb, index) in breadcrumbs"
                         :key="breadcrumb.name"
-                        :class="{'is-active': !hasNavigation(breadcrumb)}">
-                        <router-link v-if="breadcrumb.route"
+                        :class="{ 'is-active': index === breadcrumbs.length - 1 }">
+                        <router-link v-if="hasNavigation(breadcrumb)"
+                            class="breadcrumb-link"
                             :to="{ name: breadcrumb.route }">
                             {{ i18n(breadcrumb.name) }}
                         </router-link>
-                        <a v-else>
+                        <span class="breadcrumb-link breadcrumb-current"
+                            v-else>
                             {{ i18n(breadcrumb.name) }}
-                        </a>
+                        </span>
                     </li>
                 </template>
             </core-breadcrumbs>
@@ -31,3 +33,28 @@ export default {
     inject: ['i18n'],
 };
 </script>
+
+<style lang="scss">
+    .breadcrumb {
+        color: var(--bulma-text-light);
+
+        &.has-dot-separator li + li::before {
+            color: var(--bulma-grey-light);
+        }
+
+        .breadcrumb-link {
+            display: flex;
+            align-items: center;
+            color: inherit;
+            padding: var(--bulma-breadcrumb-item-padding-vertical) var(--bulma-breadcrumb-item-padding-horizontal);
+        }
+
+        li:first-child .breadcrumb-link {
+            padding-inline-start: 0;
+        }
+
+        li.is-active {
+            color: var(--bulma-text-strong);
+        }
+    }
+</style>

package/src/bulma/components/VueAside.vue

@@ -11,20 +11,16 @@ export default {
 </script>
 
 <style lang="scss">
-    @import '@enso-ui/themes/bulma/variables';
-
     .aside {
         position: fixed;
         bottom: 0;
-        top: $navbar-height;
-        padding-top: 20px;
-        padding-bottom: 20px;
-        width: $sidebar-width;
-        font-size: 0.95em;
-        font-family: $family-secondary;
+        top: var(--bulma-navbar-height);
+        padding-top: 1.25rem;
+        padding-bottom: 1.25rem;
+        width: var(--enso-sidebar-width);
         max-height: 100vh;
-        z-index: 2;
-        -webkit-box-shadow: 0 1px 1px hsla(0,0%,4%,.65);
-        box-shadow: 0 1px 1px hsla(0,0%,4%,.65);
+        z-index: 4;
+        background: var(--enso-shell-surface);
+        border-right: 1px solid var(--bulma-border);
     }
 </style>

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

@@ -4,12 +4,14 @@
         <p class="menu-label is-bold has-text-centered">
             {{ i18n("Menu") }}
         </p>
-        <core-sidebar>
-            <template #default="{ menus }">
-                <menus v-bind="$attrs"
-                    :menus="menus"/>
-            </template>
-        </core-sidebar>
+        <div class="sidebar-scroll no-scrollbars">
+            <core-sidebar>
+                <template #default="{ menus }">
+                    <menus v-bind="$attrs"
+                        :menus="menus"/>
+                </template>
+            </core-sidebar>
+        </div>
     </vue-aside>
 </template>
 
@@ -30,14 +32,28 @@ export default {
 </script>
 
 <style lang="scss">
-    @import '@enso-ui/themes/bulma/variables';
-
     .aside.sidebar {
-        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        overflow: visible;
         transition: width .5s;
 
+        .menu-label {
+            margin-bottom: 0.8rem;
+            flex: 0 0 auto;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+
+        .sidebar-scroll {
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow-y: auto;
+            overflow-x: visible;
+        }
+
         &.is-collapsed {
-            width: $sidebar-collapsed-width;
+            width: var(--enso-sidebar-collapsed-width);
         }
     }
 </style>

package/src/bulma/components/navbar/AppUpdate.vue

@@ -1,6 +1,6 @@
 <template>
     <navbar-item manual
-        icon="exclamation-triangle"
+        :icon="faTriangleExclamation"
         v-if="appUpdate"
         ref="navbarItem">
         <template #default>
@@ -16,15 +16,11 @@
 </template>
 
 <script>
-import {
-    mapState, mapActions, mapGetters, mapMutations,
-} from 'vuex';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { app } from '../../../pinia/app';
+import { websockets } from '../../../pinia/websockets';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import NavbarItem from './NavbarItem.vue';
 
-library.add(faExclamationTriangle);
-
 export default {
     name: 'AppUpdate',
 
@@ -33,22 +29,50 @@ export default {
     inject: ['i18n'],
 
     data: () => ({
+        faTriangleExclamation,
+        listenTimer: null,
+        listening: false,
         message: 'The application was updated, please refresh your page to load the latest application version',
     }),
 
     computed: {
-        ...mapState(['appUpdate']),
-        ...mapGetters('websockets', ['channels']),
+        appUpdate() {
+            return app().appUpdate;
+        },
+        channels() {
+            return websockets().channels;
+        },
     },
 
     created() {
-        this.connect()
-            .then(() => this.listen());
+        this.ensureListener();
+    },
+
+    beforeUnmount() {
+        clearTimeout(this.listenTimer);
     },
 
     methods: {
-        ...mapActions('websockets', ['connect']),
-        ...mapMutations(['newRelease']),
+        connect() {
+            return websockets().connect(app().meta.csrfToken);
+        },
+        newRelease() {
+            return app().newRelease();
+        },
+        ensureListener() {
+            if (this.listening) {
+                return;
+            }
+
+            if (!window.Echo || !this.channels?.appUpdates) {
+                this.listenTimer = setTimeout(() => this.ensureListener(), 250);
+                return;
+            }
+
+            this.listening = true;
+            this.connect()
+                .then(() => this.listen());
+        },
         listen() {
             window.Echo.private(this.channels.appUpdates)
                 .listen('.app-update', this.handle);

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

@@ -2,14 +2,14 @@
     <nav class="navbar app-navbar is-fixed-top">
         <core-navbar>
             <template #default="{
-                isMobile, isTouch, sidebar, meta, impersonating,
+                isMobile, sidebar, meta, impersonating,
                 stopImpersonating, toggleSidebar, items,
             }">
                 <div class="navbar-brand">
                     <a class="navbar-item"
-                        @click="toggleSidebar(isTouch)">
+                        @click="toggleSidebar()">
                         <span class="icon">
-                            <fa icon="bars"
+                            <fa :icon="faBars"
                                 :class="{ 'rotate': !sidebar.isExpanded || !sidebar.isVisible }"/>
                         </span>
                     </a>
@@ -18,17 +18,17 @@
                         <figure class="image is-32x32 is-flex">
                             <img src="/images/logo.svg">
                         </figure>
-                        <h4 class="title is-4 ml-1"
+                        <span class="navbar-brand-title ml-1"
                             v-if="!isMobile">
                             {{ meta.appName }}
-                        </h4>
+                        </span>
                     </a>
                     <div class="navbar-item"
                         v-if="meta.env !== 'production'">
                         <span class="tag is-warning is-clickable"
                             v-tooltip="meta.env">
                             <span class="icon is-small">
-                                <fa icon="code"/>
+                                <fa :icon="faCode"/>
                             </span>
                         </span>
                     </div>
@@ -38,10 +38,10 @@
                             class="button is-small is-warning"
                             @click="stopImpersonating">
                             <span class="icon is-small">
-                                <fa icon="user"/>
+                                <fa :icon="faUser"/>
                             </span>
                             <span class="icon is-small">
-                                <fa icon="times"/>
+                                <fa :icon="faXmark"/>
                             </span>
                         </a>
                     </div>
@@ -63,17 +63,14 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-    faBars, faCode, faUser, faTimes,
+    faBars, faCode, faUser, faXmark,
 } from '@fortawesome/free-solid-svg-icons';
 import CoreNavbar from '../../../core/components/navbar/Navbar.vue';
 import AppUpdate from './AppUpdate.vue';
 import SettingsControl from './SettingsControl.vue';
 import Search from './Search.vue';
 
-library.add(faBars, faCode, faUser, faTimes);
-
 export default {
     name: 'Navbar',
 
@@ -86,14 +83,19 @@ export default {
     },
 
     inject: ['i18n'],
+
+    data: () => ({
+        faBars,
+        faCode,
+        faXmark,
+        faUser,
+    }),
 };
 </script>
 
 <style lang="scss">
-@import '@enso-ui/themes/bulma/variables';
-
 .navbar {
-    height: $navbar-height;
+    height: var(--bulma-navbar-height);
     z-index: 3;
     -webkit-box-shadow: 0 1px 1px hsla(0, 0%, 4%, .35);
     box-shadow: 0 1px 1px hsla(0, 0%, 4%, .35);

package/src/bulma/components/navbar/NavbarItem.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { clickOutside } from '@enso-ui/directives';
 import Loader from '@enso-ui/loader/bulma';
+import { layout } from '../../../pinia/layout';
 
 export default {
     name: 'NavbarItem',
@@ -61,8 +61,6 @@ export default {
         dropdown: false,
     }),
 
-    computed: mapState('layout', ['isTouch']),
-
     methods: {
         attemptHide() {
             if (!this.manual) {
@@ -78,7 +76,7 @@ export default {
             this.dropdown = true;
         },
         toggle() {
-            if (this.isTouch) {
+            if (layout().isTouch) {
                 this.$emit('touch');
             } else if (!this.manual) {
                 if (this.dropdown) {

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

@@ -49,7 +49,7 @@
                 v-else>
                 <fade>
                     <span class="icon is-small">
-                        <fa icon="search"/>
+                        <fa :icon="faMagnifyingGlass"/>
                     </span>
                 </fade>
             </a>
@@ -60,14 +60,11 @@
 <script>
 import { Fade } from '@enso-ui/transitions';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEye, faPencilAlt, faListUl } from '@fortawesome/free-solid-svg-icons';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 import { EnsoTypeahead } from '@enso-ui/typeahead/bulma';
 import { clickOutside } from '@enso-ui/directives';
 import CoreSearch from '../../../core/components/navbar/Search.vue';
 
-library.add(faEye, faPencilAlt, faListUl);
-
 export default {
     name: 'Search',
 
@@ -79,6 +76,10 @@ export default {
 
     inject: ['i18n'],
 
+    data: () => ({
+        faMagnifyingGlass,
+    }),
+
     methods: {
         clear() {
             this.$refs.typeahead.clear();

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

@@ -4,7 +4,7 @@
             <a class="navbar-item settings"
                 @click="toggle">
                 <span class="icon">
-                    <fa icon="cogs"/>
+                    <fa :icon="faGears"/>
                 </span>
             </a>
         </template>
@@ -13,15 +13,16 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faCogs } from '@fortawesome/free-solid-svg-icons';
+import { faGears } from '@fortawesome/free-solid-svg-icons';
 import CoreSettingsControl from '../../../core/components/navbar/SettingsControl.vue';
 
-library.add(faCogs);
-
 export default {
     name: 'SettingsControl',
 
     components: { CoreSettingsControl, Fa },
+
+    data: () => ({
+        faGears,
+    }),
 };
 </script>

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

@@ -40,9 +40,23 @@ export default {
 </script>
 
 <style lang="scss">
-
-    .settings {
+    .aside.settings {
+        position: fixed;
+        top: var(--bulma-navbar-height);
+        bottom: 0;
+        height: calc(100dvh - var(--bulma-navbar-height));
+        max-height: calc(100dvh - var(--bulma-navbar-height));
+        z-index: 40;
         overflow-y: auto;
+        border-top: 1px solid var(--bulma-border);
+
+        .menu-label {
+            margin-bottom: 0.4rem;
+            flex: 0 0 auto;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+
         [dir='ltr'] & {
             right: 0;
         }
@@ -52,7 +66,7 @@ export default {
 
         .settings-item {
             &:not(:empty) {
-                padding: 6px;
+                padding: 6px 12px;
             }
 
             .level-item {

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

@@ -9,8 +9,7 @@
                 </div>
                 <div class="level-right">
                     <div class="level-item">
-                        <vue-switch class="is-medium"
-                            v-bind="bindings"
+                        <vue-switch v-bind="bindings"
                             v-on="events"/>
                     </div>
                 </div>