@enso-ui/ui 7.1.2 → 7.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/ui",
-  "version": "7.1.2",
+  "version": "7.1.5",
   "description": "Laravel Enso UI",
   "main": "bulma/index.js",
   "scripts": {

package/src/bulma/components/AppFooter.vue

@@ -1,7 +1,7 @@
 <template>
     <footer class="footer">
         <div class="content has-text-centered">
-            <div class="level">
+            <div class="level mb-2">
                 <base-app-footer>
                     <template #default="{ meta }">
                         <div class="level-item">
@@ -9,55 +9,58 @@
                                 {{ meta.appName }} v{{ meta.version }}
                             </strong>
                             {{ i18n('built with') }}
-                            <span class="icon has-text-danger">
+                            <span class="icon has-text-danger ml-2">
                                 <fa :icon="faHeart"/>
                             </span>
-                            <span class="ml-1">
+                            <span class="ml-2">
                                 +
                             </span>
                             <a href="https://vuejs.org"
+                                class="footer-badge ml-1"
                                 target="_blank">
-                                <img src="/images/vue-badge.png"
-                                    :alt="i18n('Made with Vue')"
-                                    width="28"
-                                    height="28">
+                                <span class="icon has-text-success">
+                                    <fa :icon="faVuejs"/>
+                                </span>
                             </a>
-                            +
+                            <span class="mx-1">
+                                +
+                            </span>
                             <a href="https://laravel.com"
-                                class="ml-1"
+                                class="footer-badge"
                                 target="_blank">
-                                <img src="/images/laravel-badge.png"
-                                    :alt="i18n('Made with Laravel')"
-                                    width="28"
-                                    height="28">
+                                <span class="icon has-text-danger">
+                                    <fa :icon="faLaravel"/>
+                                </span>
                             </a>
-                            <span class="ml-1">
+                            <span class="mx-1">
                                 +
                             </span>
                             <a href="https://bulma.io"
+                                class="footer-badge"
                                 target="_blank">
                                 <img src="/images/bulma.svg"
-                                    :alt="i18n('Made with Bulma')"
-                                    width="28"
+                                    alt="Bulma"
                                     height="28">
                             </a>
                         </div>
                     </template>
                 </base-app-footer>
             </div>
-            <div class="level">
+            <div class="level mb-2">
                 <div class="level-item">
                     <strong>{{ i18n('Backed by') }}:</strong>
                     <a href="https://earthlink.ro"
+                        class="footer-badge footer-badge-earthlink"
                         target="_blank">
-                        <figure class="image earthlink">
-                          <img src="/images/earthlink.svg">
-                        </figure>
+                        <img src="/images/earthlink.svg"
+                            alt="Earthlink"
+                            height="28">
                     </a>
                 </div>
             </div>
             <div>
-                <a href="https://github.com/laravel-enso/enso"
+                <a class="has-text-primary"
+                    href="https://github.com/laravel-enso/enso"
                     target="_blank">
                     <span class="icon">
                         <fa :icon="faGithub"/>
@@ -71,7 +74,7 @@
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { faHeart } from '@fortawesome/free-solid-svg-icons';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { faGithub, faLaravel, faVuejs } from '@fortawesome/free-brands-svg-icons';
 import BaseAppFooter from '../../core/components/AppFooter.vue';
 
 export default {
@@ -84,6 +87,8 @@ export default {
     data: () => ({
         faGithub,
         faHeart,
+        faLaravel,
+        faVuejs,
     }),
 };
 </script>
@@ -109,13 +114,40 @@ export default {
             }
         }
 
-        figure.image.earthlink {
-            width: 112px;
-            margin-left: 1em;
-            margin-right: 1em;
+        .footer-badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            height: 24px;
+            min-height: 24px;
+            padding: 0 0.6rem;
+            text-decoration: none;
+            color: inherit;
+
+            .icon {
+                width: 24px;
+                height: 24px;
+                font-size: 1.2rem;
+            }
+
+            img {
+                display: block;
+                height: 24px;
+                width: auto;
+            }
+        }
+
+        .footer-badge-earthlink img {
+            height: 15px;
         }
     }
 
+    .footer .footer-badge-earthlink img {
+        filter:
+            drop-shadow(0 0 0.45px rgba(15, 23, 42, 0.82))
+            drop-shadow(0 0 1.25px rgba(15, 23, 42, 0.16));
+    }
+
     @media screen and (max-width: 1023px) {
         .footer {
             [dir='ltr'] & {

package/src/bulma/components/VueAside.vue

@@ -20,7 +20,5 @@ export default {
         width: var(--enso-sidebar-width);
         max-height: 100vh;
         z-index: 4;
-        background: var(--enso-shell-surface);
-        border-right: 1px solid var(--bulma-border);
     }
 </style>

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

@@ -97,8 +97,10 @@ export default {
 .navbar {
     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);
+    background-color: var(--enso-shell-surface);
+    border-bottom: 1px solid var(--bulma-border);
+    box-shadow: none;
+    color: var(--bulma-navbar-item-color);
 
     .navbar-item.logo .image img {
         max-width: 100%;
@@ -108,6 +110,15 @@ export default {
         margin: auto;
     }
 
+    .navbar-item.logo {
+        gap: 0.15rem;
+    }
+
+    .navbar-brand-title {
+        color: inherit;
+        font-weight: 600;
+    }
+
     .fa-bars {
         transition: transform .300s;
 

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

@@ -42,7 +42,7 @@ export default {
 
     props: {
         icon: {
-            type: [Array, String],
+            type: [Array, Object, String],
             required: true,
         },
         loading: {
@@ -93,8 +93,8 @@ export default {
 <style lang="scss">
 .navbar-item {
     sup, sub {
-        font-size: 0.75em;
-        font-weight: bold;
+        font-size: 0.625rem;
+        font-weight: 600;
         right: 8px;
         position: absolute;
     }
@@ -106,5 +106,35 @@ export default {
     sub {
         bottom: 8px;
     }
+
+    .navbar-link,
+    > .navbar-item {
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+
+    .navbar-dropdown {
+        background-color: var(--bulma-navbar-dropdown-background-color);
+        border: 1px solid var(--bulma-border);
+        box-shadow: none;
+        overflow: hidden;
+    }
+
+    .navbar-dropdown .navbar-item,
+    .navbar-dropdown .level.navbar-item {
+        background-color: transparent;
+    }
+
+    .navbar-dropdown .navbar-item:hover,
+    .navbar-dropdown .navbar-item:focus,
+    .navbar-dropdown .navbar-item.is-active,
+    .navbar-dropdown .level.navbar-item:hover,
+    .navbar-dropdown .level.navbar-item:focus {
+        background-color: var(--bulma-scheme-main-ter);
+        color: var(--bulma-text-strong);
+    }
+
+    .navbar-divider {
+        background-color: var(--bulma-border);
+    }
 }
 </style>

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

@@ -124,12 +124,49 @@ export default {
             justify-content: center;
         }
 
+        .field.has-addons {
+            margin-bottom: 0;
+        }
+
+        .field.has-addons > .control.is-expanded {
+            box-shadow: none;
+        }
+
+        .field.has-addons > .control.is-expanded .input,
+        .field.has-addons > .control.is-expanded .input.is-fullwidth {
+            border-radius: 9999px !important;
+            box-shadow: none;
+            background-color: var(--bulma-input-background-color);
+            border-color: var(--bulma-input-border-color);
+            color: var(--bulma-input-color);
+        }
+
+        .field.has-addons > .control.is-expanded .input:hover,
+        .field.has-addons > .control.is-expanded .input:focus,
+        .field.has-addons > .control.is-expanded .input:active,
+        .field.has-addons > .control.is-expanded .input.is-focused,
+        .field.has-addons > .control.is-expanded .input:focus-visible {
+            border-color: var(--bulma-input-hover-border-color);
+            box-shadow: none;
+        }
+
+        .field.has-addons > .control.is-expanded .input::placeholder {
+            color: var(--bulma-text-light);
+        }
+
+        .dropdown.typeahead,
+        .dropdown.typeahead .dropdown-trigger,
+        .dropdown.typeahead .dropdown-trigger > .field,
+        .dropdown.typeahead .dropdown-trigger > .field > .control.is-expanded {
+            border-radius: 9999px;
+            box-shadow: none;
+        }
+
         .tag {
             padding: 0.5em;
             height: 1.6em;
             opacity: .7;
-            -webkit-box-shadow: 0 1px 1px rgba(10, 10, 10, 0.2);
-            box-shadow: 0 1px 1px rgba(10, 10, 10, 0.2);
+            box-shadow: none;
         }
         .route-controls {
             position: absolute;

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

@@ -66,7 +66,7 @@ export default {
 
         .settings-item {
             &:not(:empty) {
-                padding: 6px 12px;
+                padding: 6px;
             }
 
             .level-item {

package/src/bulma/styles/components/bookmarks.scss

@@ -0,0 +1,4 @@
+.bookmarks {
+    background-color: var(--enso-shell-surface);
+    border-bottom: 1px solid var(--bulma-border);
+}

package/src/bulma/styles/components/form.scss

@@ -144,7 +144,6 @@
 
     .box.is-shadowless {
         background-color: var(--bulma-card-header-background-color) !important;
-        border: 1px solid var(--enso-surface-border);
         box-shadow: none;
         color: var(--bulma-text);
     }

package/src/bulma/styles/components/settings.scss

@@ -0,0 +1,101 @@
+.aside.settings {
+    background-color: var(--enso-shell-surface);
+    border-left: 1px solid var(--bulma-border);
+    border-right: 1px solid var(--bulma-border);
+    color: var(--bulma-navbar-item-color);
+    font-size: 1rem;
+}
+
+.settings-control-select {
+    display: inline-flex;
+    align-items: center;
+
+    .dropdown.vue-dropdown {
+        display: inline-flex;
+        align-items: center;
+
+        .dropdown-trigger {
+            display: flex;
+            align-items: center;
+
+            .button.input {
+                min-width: calc(var(--bulma-control-height) + 0.85rem);
+                min-height: var(--bulma-control-height);
+                height: var(--bulma-control-height);
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+                border: 1px solid var(--enso-surface-border);
+                background: var(--enso-surface);
+                box-shadow: none;
+                gap: 0.5rem;
+                padding-block: 0;
+                padding-inline-start: 0.65rem;
+                padding-inline-end: 1.55rem;
+
+                .icon:first-child,
+                .image:first-child {
+                    margin: 0;
+                    width: 1.25rem;
+                    height: 1.25rem;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    align-self: center;
+                    line-height: 1;
+                }
+
+                .image img {
+                    display: block;
+                    margin: 0 auto;
+                }
+
+                .dropdown-indicator {
+                    [dir='ltr'] & {
+                        right: 0.64rem;
+                    }
+
+                    [dir='rtl'] & {
+                        left: 0.64rem;
+                    }
+                }
+            }
+        }
+
+        .dropdown-menu {
+            min-width: calc(var(--bulma-control-height) + 0.85rem);
+            width: 100%;
+        }
+
+        .dropdown-content {
+            min-width: calc(var(--bulma-control-height) + 0.85rem);
+            width: 100%;
+            background: var(--enso-surface);
+            border: 1px solid var(--enso-surface-border);
+            overflow: hidden;
+
+            .items {
+                width: 100%;
+            }
+
+            .dropdown-item {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                box-sizing: border-box;
+                padding: 0.5rem;
+                text-align: center;
+                color: var(--bulma-dropdown-item-color);
+                background-color: transparent;
+            }
+
+            .dropdown-item.is-current,
+            .dropdown-item.is-active {
+                background-color: var(--bulma-scheme-main-ter) !important;
+                color: var(--bulma-text-strong) !important;
+            }
+        }
+    }
+}

package/src/bulma/styles/components/sidebar.scss

@@ -0,0 +1,6 @@
+.aside.sidebar {
+    background-color: var(--enso-shell-surface);
+    border-right: 1px solid var(--bulma-border) !important;
+    color: var(--bulma-navbar-item-color);
+    font-size: 1rem;
+}

package/src/bulma/styles/components/v-tooltip.scss

@@ -0,0 +1,37 @@
+.v-popper--theme-dropdown,
+.v-popper--theme-tooltip {
+    --enso-tooltip-shadow: 0 10px 30px color-mix(in srgb, var(--enso-tooltip-border-color) 22%, transparent);
+
+    .v-popper__wrapper {
+        .v-popper__inner {
+            background: var(--enso-tooltip-background);
+            color: var(--enso-tooltip-color);
+            border-radius: var(--bulma-radius);
+            box-shadow: var(--enso-tooltip-shadow);
+            padding: 5px 10px 4px;
+        }
+    }
+
+    &.popover {
+        .popover-inner {
+            background: var(--enso-tooltip-background);
+            color: var(--enso-tooltip-color);
+            border-radius: var(--bulma-radius);
+            box-shadow: var(--enso-tooltip-shadow);
+        }
+
+        .popover-arrow {
+            border-color: var(--enso-tooltip-background);
+            filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--enso-tooltip-border-color) 24%, transparent));
+        }
+    }
+
+    .v-popper__arrow-outer,
+    .v-popper__arrow-inner {
+        border-color: var(--enso-tooltip-background);
+    }
+
+    .v-popper__arrow-container {
+        filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--enso-tooltip-border-color) 24%, transparent));
+    }
+}

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

@@ -1,6 +1,5 @@
 :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);

package/src/bulma/styles/components.sass

@@ -1,3 +1,7 @@
+@use "./components/bookmarks"
 @use "./components/form"
+@use "./components/settings"
+@use "./components/sidebar"
 @use "./components/tables"
+@use "./components/v-tooltip"
 @use "./components/vue-filter"

package/src/bulma/styles/enso.scss

@@ -0,0 +1,309 @@
+[v-cloak] {
+    display: none;
+}
+
+*:focus {
+    outline: 0;
+}
+
+@media screen and (max-width: 769px) {
+    .columns.is-reverse-mobile {
+        flex-direction: column-reverse;
+        display: flex;
+    }
+
+    .level.is-mobile {
+        .level-left,
+        .level-right {
+            flex-direction: row;
+        }
+    }
+
+    .button > .is-hidden-mobile + .icon:last-child {
+        margin-inline-start: calc(-0.5 * var(--bulma-button-padding-horizontal));
+        margin-inline-end: calc(-0.5 * var(--bulma-button-padding-horizontal));
+    }
+}
+
+.mx-a {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.min-w-0 {
+    min-width: 0;
+}
+
+.is-bold {
+    font-weight: bold;
+}
+
+.is-clickable {
+    cursor: pointer;
+}
+
+.has-text-muted {
+    color: var(--bulma-text-light);
+}
+
+@media screen and (max-width: 1023px) {
+    .app-navbar {
+        display: flex;
+        align-items: stretch;
+
+        .navbar-brand,
+        .navbar-menu,
+        .navbar-end {
+            align-items: stretch;
+            display: flex;
+        }
+
+        .navbar-menu {
+            background-color: transparent;
+            box-shadow: none;
+            flex-grow: 1;
+            flex-shrink: 0;
+            padding: 0;
+        }
+
+        .navbar-end {
+            justify-content: flex-end;
+            margin-inline-start: auto;
+        }
+
+        .navbar-brand .navbar-item,
+        .navbar-end .navbar-item,
+        .navbar-end .navbar-link {
+            align-items: center;
+            display: flex;
+        }
+    }
+}
+
+.is-naked {
+    color: inherit;
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    opacity: 0.7;
+    transition: opacity ease 0.2s, color ease 0.2s;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.is-focused,
+    &.is-active {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        opacity: 1;
+    }
+}
+
+.is-scrollable {
+    overflow: scroll;
+}
+
+.no-scrollbars {
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.input,
+.textarea,
+.select select,
+.button.input,
+.button,
+.flatpickr-input.input {
+    font-weight: 400;
+    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
+}
+
+.input,
+.textarea,
+.select select,
+.button,
+.button.input,
+.flatpickr-input.input,
+.file-cta,
+.file-name,
+.pagination-ellipsis,
+.pagination-link,
+.pagination-next,
+.pagination-previous {
+    min-height: var(--bulma-control-height);
+    height: var(--bulma-control-height);
+}
+
+.input.is-small,
+.textarea.is-small,
+.select.is-small select,
+.button.is-small,
+.button.input.is-small,
+.flatpickr-input.input.is-small,
+.file.is-small .file-cta,
+.file.is-small .file-name,
+.pagination.is-small .pagination-ellipsis,
+.pagination.is-small .pagination-link,
+.pagination.is-small .pagination-next,
+.pagination.is-small .pagination-previous {
+    min-height: 1.85rem;
+    height: 1.85rem;
+}
+
+.input.is-medium,
+.textarea.is-medium,
+.select.is-medium select,
+.button.is-medium,
+.button.input.is-medium,
+.flatpickr-input.input.is-medium,
+.file.is-medium .file-cta,
+.file.is-medium .file-name,
+.pagination.is-medium .pagination-ellipsis,
+.pagination.is-medium .pagination-link,
+.pagination.is-medium .pagination-next,
+.pagination.is-medium .pagination-previous {
+    min-height: 2.5rem;
+    height: 2.5rem;
+}
+
+.input.is-large,
+.textarea.is-large,
+.select.is-large select,
+.button.is-large,
+.button.input.is-large,
+.flatpickr-input.input.is-large,
+.file.is-large .file-cta,
+.file.is-large .file-name,
+.pagination.is-large .pagination-ellipsis,
+.pagination.is-large .pagination-link,
+.pagination.is-large .pagination-next,
+.pagination.is-large .pagination-previous {
+    min-height: 3rem;
+    height: 3rem;
+}
+
+.button,
+.button.input {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.button.is-outlined:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-black):not(.is-dark):not(.is-light):not(.is-white) {
+    background-color: transparent;
+    border-color: var(--enso-surface-border);
+    color: var(--bulma-text);
+    box-shadow: none;
+
+    &:hover,
+    &.is-hovered,
+    &:active,
+    &.is-active {
+        background-color: var(--bulma-card-header-background-color);
+        border-color: var(--bulma-border-active);
+        color: var(--bulma-text-strong);
+        box-shadow: none;
+    }
+
+    &[disabled],
+    fieldset[disabled] & {
+        background-color: transparent;
+        border-color: var(--enso-surface-border);
+        color: var(--bulma-text-light);
+        box-shadow: none;
+        opacity: 0.65;
+    }
+}
+
+.input:not(.is-naked):hover,
+.textarea:not(.is-naked):hover,
+.select select:not(.is-naked):hover {
+    border-color: var(--bulma-border-hover);
+}
+
+.input:not(.is-naked):focus,
+.input:not(.is-naked):focus-visible,
+.input:not(.is-naked).is-focused,
+.input:not(.is-naked).is-active,
+.textarea:not(.is-naked):focus,
+.textarea:not(.is-naked):focus-visible,
+.textarea:not(.is-naked).is-focused,
+.textarea:not(.is-naked).is-active,
+.select select:not(.is-naked):focus,
+.select select:not(.is-naked):focus-visible,
+.select select:not(.is-naked).is-focused,
+.select select:not(.is-naked).is-active {
+    border-color: var(--bulma-border-active);
+    box-shadow: none;
+}
+
+html,
+body,
+button,
+input,
+select,
+textarea {
+    font-family: "Ubuntu", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
+}
+
+.tag {
+    border-radius: var(--bulma-tag-radius);
+    height: var(--enso-tag-height);
+    padding-left: var(--enso-tag-padding-x);
+    padding-right: var(--enso-tag-padding-x);
+}
+
+.dropdown-item {
+    font-size: var(--bulma-size-normal);
+}
+
+.title,
+.subtitle,
+.navbar-brand-title,
+.menu-label {
+    font-family: "Ubuntu", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
+}
+
+.label {
+    font-size: var(--bulma-size-normal);
+    opacity: 0.8;
+    font-weight: 400;
+}
+
+@mixin dark-theme-overrides {
+    .delete,
+    .modal-close {
+        background-color: var(--bulma-scheme-main-ter);
+
+        &:hover {
+            background-color: var(--bulma-scheme-main-bis);
+        }
+    }
+
+    .label {
+        color: var(--bulma-text-strong);
+    }
+
+    .tag:not(body):not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-black):not(.is-dark):not(.is-light):not(.is-white) {
+        background-color: var(--bulma-scheme-main-ter);
+    }
+
+    .tag.is-dark {
+        color: var(--bulma-text-strong);
+    }
+}
+
+[data-theme='dark'],
+.theme-dark {
+    @include dark-theme-overrides;
+}
+
+@media (prefers-color-scheme: dark) {
+    html:not([data-theme]) {
+        @include dark-theme-overrides;
+    }
+}

package/src/bulma/styles/variables.sass

@@ -0,0 +1,4 @@
+$navbar-height: 3.25rem
+$sidebar-width: 12rem
+$sidebar-collapsed-width: 56px
+$navbar-breakpoint: 0

package/src/core/layouts/Default.vue

@@ -46,7 +46,11 @@ export default {
         async bootstrap() {
             this.appState = false;
 
-            await loadAppState();
+            const loaded = await loadAppState();
+
+            if (!loaded) {
+                return;
+            }
 
             this.toastr.setup(usePreferences().global.toastrPosition);
 

package/src/pinia/loadState.js

@@ -2,6 +2,7 @@ import axios from 'axios';
 import App from '../core/app';
 import eventBus from '../core/services/eventBus';
 import { useStore } from '../core/services/pinia';
+import { auth } from '@enso-ui/auth/src/pinia/auth';
 import { app as useApp } from './app';
 import { layout } from './layout';
 import { preferences } from './preferences';
@@ -46,10 +47,13 @@ export const loadAppState = async (state = useApp()) => {
         if (state.meta.env === 'local') {
             window.http = axios;
         }
+
+        return true;
     } catch (error) {
         if (error.response && error.response.status === 401) {
-            useStore('auth')?.logout();
-            App.router?.push({ name: 'login' });
+            auth().logoutState();
+            App.router.push({ name: 'login' });
+            return false;
         } else {
             throw error;
         }