lesli 5.0.12 → 5.0.13

data/lib/scss/layouts/{application-navbar.scss → application-navigation.scss}

@@ -32,7 +32,7 @@ Building a better future, one line of code at a time.
 
 nav.lesli-application-navigation {
     background-color: var(--lesli-navbar-color);
-    border-bottom: 1px solid rgba(172,179,194,.2);
+    border-bottom: 1px solid rgba(172,179,194,.5);
     width: 100%;
 
     ul {
@@ -40,18 +40,24 @@ nav.lesli-application-navigation {
         justify-content: center;
 
         li a {
+            gap: 6px;
             display: flex;
             padding: 1rem 1.1rem;
             align-items: center;
+            border-bottom: 2px solid transparent;
             color: lesli-css-color(black, 700);
 
+            // highlight active link
+            &.navigation-link-active {
+                border-bottom-color: lesli-css-color(lesli, primary);
+            }
+            
             // link label
             span.text {
-                margin-left: 6px;
-                font-size: 1rem;
-                display: inline-block;
                 flex-grow: 1;
+                font-size: 1rem;
                 text-align: left;
+                display: inline-block;
             }
 
             [class^="ri-"] {
@@ -60,3 +66,14 @@ nav.lesli-application-navigation {
         }
     }
 }
+
+
+@include lesli-css-breakpoint-small {
+
+    nav.lesli-application-navigation {    
+        ul {
+            display: block;
+            justify-content: center;
+        }
+    }
+}

data/lib/scss/layouts/application-search.scss

@@ -44,7 +44,7 @@ Building a better future, one line of code at a time.
     padding: 0 28px;
     max-width: calc(100% - var(--lesli-sidebar-width));
     margin-left: var(--lesli-sidebar-width);
-    background-color: lesli-css-color(solid, white);
+    background-color: white;
 
     .content {
         padding: 0;

data/lib/scss/settings/variables.scss

@@ -44,7 +44,7 @@ $lesli-navbar-color: white !default;
 $lesli-footer-color: white !default;
 $lesli-sidebar-color: white !default;
 $lesli-sidebar-hover: white !default;
-$lesli-color-background: #f6f8fb !default;
+$lesli-color-background: #f8f4f4 !default;
 
 
 

data/lib/scss/templates/application.scss

@@ -33,36 +33,31 @@ Building a better future, one line of code at a time.
 
 // · 
 @import "lesli-css";
+@import "lesli-css/bulma";
 @import "lesli-vue/elements.css";
 @import "lesli-vue/components.css";
 
+
 // · Configuration & variables
 @import "Lesli/scss/settings/variables";
 
 
-// · Include Bulma 
-@import "lesli-css/bulma";
-
-
 // · Font families and icons
 @import "Lesli/scss/fonts/mdicons";
 @import "Lesli/scss/fonts/families";
 @import "Lesli/scss/fonts/remixicons";
 
 
-// · Some home made helpers
-@import "Lesli/scss/helpers/display";
-@import "Lesli/scss/helpers/tooltip";
-
-
 // · Lesli application layout 
 @import "Lesli/scss/layouts/application-announcements";
+@import "Lesli/scss/layouts/application-navigation";
 @import "Lesli/scss/layouts/application-component";
 @import "Lesli/scss/layouts/application-container";
+@import "Lesli/scss/layouts/application-content";
 @import "Lesli/scss/layouts/application-engines";
 @import "Lesli/scss/layouts/application-sidebar";
 @import "Lesli/scss/layouts/application-header";
-@import "Lesli/scss/layouts/application-navbar";
+
 @import "Lesli/scss/layouts/application-footer";
 @import "Lesli/scss/layouts/application-search";
 
@@ -93,26 +88,9 @@ Building a better future, one line of code at a time.
 @import "Lesli/scss/overrides/notification";
 
 
-// · Lesli vue components
-// @import "lesli/elements/autocomplete";
-// @import "Lesli/scss/elements/avatar";
-// @import "lesli/elements/empty";
-// @import "lesli/elements/file-uploader";
-// @import "lesli/elements/gallery";
-//@import "Lesli/scss/elements/header";
-// @import "lesli/elements/input-tag";
-// @import "lesli/elements/loading";
-// @import "lesli/elements/map";
-// @import "lesli/elements/msg";
-// @import "lesli/elements/navbar";
-// @import "lesli/elements/panel";
-//@import "Lesli/scss/elements/form";
-//@import "Lesli/scss/elements/tab";
-// @import "lesli/elements/table";
-// @import "lesli/elements/toggle";
-// @import "lesli/elements/toolbar";
-// @import "lesli/elements/calendar";
-// @import "lesli/elements/card";
+// · Some home made helpers
+@import "Lesli/scss/helpers/display";
+@import "Lesli/scss/helpers/tooltip";
 
 
 html,
@@ -128,13 +106,6 @@ body {
 }
 
 
-// · 
-#lesli-application {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-
 // · titles
 h1, h2, h3, h4, h5, h6 {
     font-family: "Domine", $family-primary;

data/lib/scss/templates/public.scss

@@ -36,16 +36,18 @@ Building a better future, one line of code at a time.
 
 
 // · Configuration & variables
-@import "LesliStyle/settings/variables";
+@import "Lesli/scss/settings/variables";
 
 
 // · Include Bulma 
-@import "LesliStyle/bulma/loader";
+@import "lesli-css/bulma";
 
 
 // · Font families and icons
-@import "LesliStyle/fonts/remixicons";
-@import "LesliStyle/fonts/families";
+@import "Lesli/scss/fonts/mdicons";
+@import "Lesli/scss/fonts/families";
+@import "Lesli/scss/fonts/remixicons";
+
 
 
 // · 

data/lib/tasks/lesli_tasks.rake

@@ -41,9 +41,9 @@ namespace :lesli do
             Rake::Task['lesli_babel:scan'].invoke
         end 
 
-        desc "Scan and register labels"
-        task :load => :environment do |task, args|
-            Rake::Task['lesli_babel:load'].invoke
+        desc "Import local translations into LesliBabel"
+        task :import => :environment do |task, args|
+            Rake::Task['lesli_babel:import'].invoke
         end 
 
         desc "Export translations to json files"

data/lib/vue/application.js

@@ -18,7 +18,7 @@ along with this program. If not, see http://www.gnu.org/licenses/.
 
 Lesli · Ruby on Rails SaaS Development Framework.
 
-Made with ♥ by https://www.lesli.tech
+Made with ♥ by LesliTech
 Building a better future, one line of code at a time.
 
 @contact  hello@lesli.tech
@@ -77,6 +77,7 @@ import {
     LesliColumn,
     LesliColumns,
     LesliControl, 
+    LesliInput, 
     // lesliElementDropdown, 
     LesliEmpty, 
     LesliForm, 
@@ -87,7 +88,7 @@ import {
     LesliLink, 
     LesliLoading, 
     // lesliElementMap, 
-    // lesliElementNavbar, 
+    LesliNavbar, 
     // lesliElementFileUploader,
     // lesliElementNavigationList, 
     LesliPagination, 
@@ -152,7 +153,7 @@ export default (engine, routes=[]) => {
 
     // · Loading pinia handmade plugins
     pinia.use(() => ({ msg: useLesliMsg() }))
-    pinia.use(() => ({ url: useLesliUrl() }))
+    pinia.use(() => ({ url: useLesliUrl(Lesli) }))
     pinia.use(() => ({ http: useLesliHttp() }))
     pinia.use(() => ({ date: useLesliDate() }))
     pinia.use(() => ({ utils: useLesliUtils() }))
@@ -237,6 +238,7 @@ export default (engine, routes=[]) => {
     application.component("lesli-columns", LesliColumns)
     application.component("lesli-card", LesliCard)
     application.component("lesli-control", LesliControl)
+    application.component("lesli-input", LesliInput)
     application.component("lesli-tabs", LesliTabs)
     application.component("lesli-tab-item", LesliTabItem)
     application.component("lesli-panel", LesliPanel)
@@ -246,7 +248,7 @@ export default (engine, routes=[]) => {
     // application.component("lesli-input-tag", lesliElementInputTag)
     // application.component("lesli-file-uploader", lesliElementFileUploader)
     // application.component("lesli-navigation-list", lesliElementNavigationList)
-    
+    application.component("lesli-navbar", LesliNavbar)
     application.component("lesli-toggle", LesliToggle)
     // application.component("lesli-dropdown", lesliElementDropdown)
     // application.component("lesli-map", lesliElementMap)

data/lib/vue/layouts/application-component.vue

@@ -32,7 +32,7 @@ Building a better future, one line of code at a time.
 */
 </script>
 <template>
-    <div class="lesli-application-component">
+    <article class="box">
         <slot></slot>
-    </div>
+    </article>
 </template>

data/lib/vue/layouts/application-header.vue

@@ -53,9 +53,14 @@ const url = inject("url")
 
 // · defining props
 const props = defineProps({
+    showProfile: {
+        type: Boolean,
+        default: false,
+        required: false
+    },
     showEngines: {
         type: Boolean,
-        default: true,
+        default: false,
         required: false
     },
     showBell: {
@@ -68,7 +73,7 @@ const props = defineProps({
         default: false,
         required: false
     },
-    showSupportTickets: {
+    showSupport: {
         type: Boolean,
         default: false,
         required: false
@@ -89,7 +94,8 @@ const props = defineProps({
 // · translations
 const translations = {
     lesli: {
-        application: i18n.t("lesli.application"),
+        shared: {},
+        application: {},
     }
 }
 
@@ -122,12 +128,105 @@ function safeEngineUrl() {
 </script>
 <template>
     <header ref="lesliApplicationHeader" class="lesli-application-header">
-        <div class="lesli-application-header-container container">
-            <a :href="safeEngineUrl()">
-                <figure class="image lesli-brand">
+        <lesli-navbar>
+            <template v-slot:brand>
+                <a :href="safeEngineUrl()">
                     <slot name="brand"></slot>
-                </figure>
-            </a>
+                </a>
+            </template>
+            <template v-slot:end>
+
+                <slot name="end"></slot>
+
+                <!-- tickets -->
+                <div class="navbar-item" v-if="props.showSupport">
+                    <a  class="header-indicator"
+                        @click="() => { storeLayout.showSupport = true }">
+                        <span class="count" v-if="storeLayout.header.support > 0"></span>
+                        <span class="ri-ticket-2-line"></span>
+                    </a>
+                </div>
+
+                <!-- tasks -->
+                <div class="navbar-item" v-if="props.showFocus">
+                    <a  class="header-indicator"
+                        @click="() => { storeLayout.showSuppor = true }">
+                        <span class="ri-list-check-3">
+                        </span>
+                        <span class="count" v-if="storeLayout.header.support > 0">
+                        </span>
+                    </a>
+                </div>
+
+                <!-- notifications -->
+                <div class="navbar-item" v-if="props.showBell">
+                    <a class="header-indicator">
+                        <span :class="['ri-notification-3-line', { 'is-active' : storeLayout.header.notifications > 0 }]">
+                        </span>
+                        <span class="count">
+                        </span>
+                    </a>
+                </div>
+
+                <!-- engines selector  -->
+                <div class="navbar-item" v-if="props.showEngines">
+                    <a @click="toggleEngines()">
+                        <span class="ri-apps-2-line"></span>
+                    </a>
+                </div>
+
+                <!-- profile options -->
+                <div class="navbar-item" v-if="props.showProfile">
+                    <div class="dropdown is-hoverable">
+                        <div class="dropdown-trigger">
+                            <a @click="storeLayout.showProfile = true">
+                                <span class="ri-user-smile-line">
+                                </span>
+                            </a>
+                        </div>
+                        <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                            <div class="dropdown-content">
+                                <a :href="url.admin('profile')" class="dropdown-item py-3">
+                                    <span class="icon-text">
+                                        <span class="icon has-text-grey-dark">
+                                            <span class="ri-questionnaire-line"></span>
+                                        </span>
+                                        <span>Help</span>
+                                    </span>
+                                </a>
+                                <a :href="url.admin('profile')" class="dropdown-item py-3">
+                                    <span class="icon-text">
+                                        <span class="icon has-text-grey-dark">
+                                            <span class="ri-equalizer-line"></span>
+                                        </span>
+                                        <span>Settings</span>
+                                    </span>
+                                </a>
+                                <a :href="url.admin('profile')" class="dropdown-item py-3">
+                                    <span class="icon-text">
+                                        <span class="icon has-text-grey-dark">
+                                            <span class="ri-user-line"></span>
+                                        </span>
+                                        <span>Profile</span>
+                                    </span>
+                                </a>
+                                <hr class="dropdown-divider" />
+                                <a href="/logout" class="dropdown-item py-3">
+                                    <span class="icon-text">
+                                        <span class="icon has-text-grey-dark">
+                                            <span class="ri-logout-box-r-line"></span>
+                                        </span>
+                                        <span>Logout</span>
+                                    </span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </lesli-navbar>
+        <!--
+        <div class="lesli-application-header-container container">
             <div class="lesli-application-header-left">
                 <div class="control is-medium has-icons-left has-text-grey">
                     <span class="icon is-left has-text-grey-dark">
@@ -147,85 +246,7 @@ function safeEngineUrl() {
                     />
                 </div>
             </div>
-            <div class="lesli-application-header-right">
-
-                <!-- -->
-                <slot></slot>
-
-
-                <!-- engines selector -->
-                <a  v-if="props.showEngines"
-                    class="header-indicator" 
-                    @click="toggleEngines()">
-                    <span class="ri-apps-2-line"></span>
-                </a>
-
-                <!-- Tickets -->
-                <a 
-                    v-if="props.showSupportTickets"
-                    class="header-indicator" 
-                    @click="() => { storeLayout.showSupportTickets = true }">
-                    <span :class="['ri-ticket-2-line', { 'is-active' : storeLayout.header.tickets > 0 }]">
-                    </span>
-                    <span class="count" v-if="storeLayout.header.tickets > 0">
-                        {{ storeLayout.header.tickets }}
-                    </span>
-                </a>
-
-                <!-- Tasks -->
-                <a  v-if="props.showFocus"
-                    class="header-indicator" 
-                    @click="() => { if (storeLayout.header.tasks > 0 ) { storeLayout.showTasks = true }}">
-                    <span :class="['ri-list-check-3', { 'is-active' : storeLayout.header.tasks > 0 }]">
-                    </span>
-                    <span class="count" v-if="storeLayout.header.tasks > 0">
-                        {{ storeLayout.header.tasks }}
-                    </span>
-                </a>
-
-                <!-- Notifications -->
-                <a 
-                    v-if="props.showBell"
-                    class="header-indicator" 
-                    @click="() => { if (!storeLayout.header.notifications ) { storeLayout.showNotifications = true; }}">
-                    <span :class="['ri-notification-3-line', { 'is-active' : storeLayout.header.notifications > 0 }]">
-                    </span>
-                    <span class="count" v-if="storeLayout.header.notifications > 0">
-                        {{ storeLayout.header.notifications }}
-                    </span>
-                </a>
-
-                <!-- Profile options -->
-                <div class="dropdown is-right is-hoverable header-user-options">
-                    <div class="dropdown-trigger">
-                        <span class="icon has-text-link">
-                            <span class="ri-user-smile-line" @click="storeLayout.showProfile = true">
-                            </span>
-                        </span>
-                    </div>
-                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
-                        <div class="dropdown-content">
-                            <a :href="url.admin('profile')" class="dropdown-item py-3">
-                                <span class="icon-text">
-                                    <span class="icon has-text-grey-dark">
-                                        <span class="ri-user-line"></span>
-                                    </span>
-                                    <span>{{ translations.lesli.application.navigation_my_profile }}</span>
-                                </span>
-                            </a>
-                            <hr class="dropdown-divider">
-                            <a href="/logout" class="dropdown-item py-3">
-                                <span class="icon-text">
-                                    <span class="icon has-text-grey-dark">
-                                        <span class="ri-logout-box-r-line"></span>
-                                    </span>
-                                    <span>{{ translations.lesli.application.navigation_logout }}</span>
-                                </span>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
+        -->
     </header>
 </template>

data/lib/vue/panels/panel-support-tickets.vue

@@ -61,8 +61,10 @@ const storeTicketsPanel = useTickets()
 
 // · defining translations
 const translations = {
-    tickets: i18n.t("lesli_support.tickets"),
-    lesli: i18n.t("lesli")
+    tickets: {},
+    lesli: {
+        shared:{}
+    }
 }
 
 

data/lib/vue/shared/dashboards/apps/edit.vue

@@ -66,7 +66,7 @@ const props = defineProps({
 
 // · translations
 const translations = {
-    dashboards: i18n.t("lesli.dashboards"),
+    dashboards: {}, //i 18n.t("lesli.dashboards"),
     main: I18n.t(`${props.engine}.dashboards`),
     core: I18n.t('core.shared')
 }

data/lib/vue/shared/dashboards/components/form.vue

@@ -67,8 +67,8 @@ const props = defineProps({
 
 // · translations
 const translations = {
-    shared: i18n.t("lesli.shared"),
-    dashboards: i18n.t("lesli.dashboards"),
+    shared: {}, //i 18n.t("lesli.shared"),
+    dashboards: {}, //i 18n.t("lesli.dashboards"),
 
     components: I18n.t('core.dashboard/components'),
     core: I18n.t('core.shared'),

data/lib/vue/stores/translations.json

@@ -20,6 +20,8 @@
         "button_save": "Save",
         "button_settings": "Settings",
         "button_show": "Show",
+        "message_operation_error": "Operation failed. Please try again.",
+        "message_operation_success": "Operation completed successfully",
         "toolbar_search": "Search...",
         "view_discussions": "Discussions",
         "view_files": "Files",
@@ -53,6 +55,8 @@
         "button_save": "Guardar",
         "button_settings": "Configuración",
         "button_show": "Ver",
+        "message_operation_error": "Operación fallida. Por favor, inténtelo de nuevo.",
+        "message_operation_success": "Operacion realizada satisfactoriamente",
         "toolbar_search": "Buscar...",
         "view_discussions": "Discusiones",
         "view_files": "Archivos",
@@ -86,6 +90,8 @@
         "button_save": ":lesli.shared.button_save:",
         "button_settings": ":lesli.shared.button_settings:",
         "button_show": ":lesli.shared.button_show:",
+        "message_operation_error": ":lesli.shared.message_operation_error:",
+        "message_operation_success": ":lesli.shared.message_operation_success:",
         "toolbar_search": ":lesli.shared.toolbar_search:",
         "view_discussions": ":lesli.shared.view_discussions:",
         "view_files": ":lesli.shared.view_files:",
@@ -119,6 +125,8 @@
         "button_save": ":lesli.shared.button_save:",
         "button_settings": ":lesli.shared.button_settings:",
         "button_show": ":lesli.shared.button_show:",
+        "message_operation_error": ":lesli.shared.message_operation_error:",
+        "message_operation_success": ":lesli.shared.message_operation_success:",
         "toolbar_search": ":lesli.shared.toolbar_search:",
         "view_discussions": ":lesli.shared.view_discussions:",
         "view_files": ":lesli.shared.view_files:",
@@ -152,6 +160,8 @@
         "button_save": ":lesli.shared.button_save:",
         "button_settings": ":lesli.shared.button_settings:",
         "button_show": ":lesli.shared.button_show:",
+        "message_operation_error": ":lesli.shared.message_operation_error:",
+        "message_operation_success": ":lesli.shared.message_operation_success:",
         "toolbar_search": ":lesli.shared.toolbar_search:",
         "view_discussions": ":lesli.shared.view_discussions:",
         "view_files": ":lesli.shared.view_files:",

data/lib/webpack/base.js

@@ -107,11 +107,12 @@ module.exports = env => ({
 
             vue: "vue/dist/vue.esm-bundler.js",
 
-            // Set aliases as shortcuts to import modules
+            // Set aliases as shortcuts to import core modules
             Lesli: path.resolve("lib"), 
             LesliVue: path.resolve("lib", "vue"), 
             LesliStyle: path.resolve("lib", "scss"), 
 
+            // Set aliases as shortcuts to import engine modules
             LesliBell: path.resolve("../", "LesliBell", "lib"),
             LesliAdmin: path.resolve("../", "LesliAdmin", "lib"),
             LesliAudit: path.resolve("../", "LesliAudit", "lib"),
@@ -123,7 +124,8 @@ module.exports = env => ({
             LesliCalendar: path.resolve("../", "LesliCalendar", "lib"),
             LesliDashboard: path.resolve("../", "LesliDashboard", "lib"),
 
-            LesliBuilder: path.resolve("engines", "lesli_builder", "lib", "vue")
+            // Set aliases as shortcuts to import root modules
+            Root: path.resolve("../", "../", "lib")
         }
     },
     module: {
@@ -134,7 +136,9 @@ module.exports = env => ({
                 options: {
                     compilerOptions: {
                         // ignore custom html components & elements
-                        isCustomElement: tag => tag.startsWith('trix-')
+                        isCustomElement: tag => {
+                            return tag.startsWith('trix-')
+                        }
                     }
                 }
             }
@@ -153,7 +157,7 @@ module.exports = env => ({
                     presets: [["@babel/preset-env", { "targets": "defaults" }]]
                 }
             }
-        },{
+        }, {
             test: /\.(scss)$/,
             use: [
                 MiniCssExtractPlugin.loader, 
@@ -161,7 +165,7 @@ module.exports = env => ({
                     loader:'css-loader',
                     options: { url: false } 
                 }, 
-                'sass-loader'
+                'sass-loader' // required to compile sass files with webpack
             ]
         }]
     },
@@ -180,7 +184,8 @@ module.exports = env => ({
             lesli_application_development: JSON.stringify(!env.production),
             lesli_application_version: JSON.stringify(dayjs().format("YYMMDD.HHmm")),
             __VUE_OPTIONS_API__: true,
-            __VUE_PROD_DEVTOOLS__: false
+            __VUE_PROD_DEVTOOLS__: false,
+            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
         })
     ]
 })