@nixweb/nixloc-ui 0.0.294 → 0.0.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.294",
+  "version": "0.0.296",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/layout/NewHeader.vue

@@ -47,11 +47,11 @@ export default {
 }
 
 .top.notCollapsed {
-    left: 270px;
+    left: 180px;
 }
 
 .top.collapsed {
-    left: 65px;
+    left: 60px;
 }
 
 .div-theme {

package/src/component/layout/NewMenu.vue

@@ -5,78 +5,68 @@
                 <span class="header-logo" @click="editProfile">
                     <img class="photo" :src="urlPhoto" />
                 </span>
-                <Button class="sidebar-toggler" @click="toggleSidebar">
-                    <span>
-                        <i v-if="menuCollapsed" class="fa-solid fa-angle-right icon-menu-arrow"></i>
-                        <i v-else class="fa-solid fa-angle-left icon-menu-arrow"></i>
-                    </span>
-                </Button>
-            </div>
-            <div v-if="menuCollapsed">
-                <br><br>
+                <div :style="'margin-left:' + (menuCollapsed ? 55 : 170) + 'px'" class="div-menu-toggle"
+                    @click="toggleSidebar">
+                    <div class="icon-menu-arrow">
+                        <i v-if="menuCollapsed" class="fa-solid fa-angle-right "></i>
+                        <i v-else class="fa-solid fa-angle-left"></i>
+                    </div>
+                </div>
             </div>
+
             <ScrollBar :minHeight="pageSize" :maxHeight="pageSize">
                 <div :class="{ 'sub': menuCollapsed }">
                     <div v-for="(item, index) in menuFilter(true)">
-                        <div>
+                        <div @mouseover="handleMouseOver(item.title, item.module)">
                             <div :ref="item.title" v-if="menuCollapsed" class="molded-icon text-center" :class="{
                                 'menu-active': moduleActive === item.module,
                                 'module-selected': module === item.module
-                            }" @mouseover="handleMouseOver(item.title, item.module)">
-                                <i :class="item.icon"></i>
+                            }">
+                                <i :style="'font-size:18px'" :class="item.icon"></i>
+                                <div v-if="false" :style="'margin-top:-16px'">
+                                    <span class="title-menu-collapsed">{{ item.abbreviatedTitle }}</span>
+                                </div>
                             </div>
                             <div class="molded-icon-open" :class="{
                                 'menu-active': moduleActive === item.module
-                            }" v-else @click="toggleSubMenu(item.title, item.module)">
+                            }" v-else @mouseover="handleMouseOver(item.title, item.module)">
                                 <b-row>
-                                    <b-col sm="1">
-                                        <i :class="item.icon"></i>
-                                    </b-col>
-                                    <b-col sm="8">
-                                        <span class="title-menu">{{ item.title }} </span>
-                                    </b-col>
-                                    <b-col sm="1">
-                                        <div>
-                                            <i v-if="titleSubMenu == item.title" class="fa-sharp fa-solid fa-angle-down"
-                                                :class="{ 'rotate': titleSubMenu == item.title }"></i>
-
-                                            <i v-else class="fa-sharp fa-solid fa-angle-down"
-                                                :class="{ 'rotate-down': titleSubMenu != item.title }"></i>
-                                        </div>
+                                    <b-col sm="12">
+                                        <b-row>
+                                            <b-col sm="2">
+                                                <i :class="item.icon"></i>
+                                            </b-col>
+                                            <b-col sm="10">
+                                                <span class="title-menu">{{ item.title }} </span>
+                                            </b-col>
+                                        </b-row>
                                     </b-col>
                                 </b-row>
                             </div>
                         </div>
 
-                        <transition name="slide-fade">
-                            <div class="sub-menu" v-if="!menuCollapsed && titleSubMenu == item.title">
-                                <div v-for="(item, index) in subMenuFilter(false)" :key="index">
-                                    <div v-if="item.title" class="sub-menu-title"
-                                        @click.prevent="navegateTo(item, item.module)">
-                                        <b-row>
-                                            <b-col sm="3"> <i :class="item.icon"></i></b-col>
-                                            <span> {{ item.title }}</span>
-                                        </b-row>
-                                    </div>
-                                </div>
-                            </div>
-                        </transition>
-
                         <transition name="slide-fade">
                             <div :ref="item.title + 'sub'" class="sub-menu-collapsed sub-menu"
-                                v-if="menuCollapsed && titleSubMenuCollapsed == item.title">
+                                :style="'margin-left:' + (menuCollapsed ? 85 : 200) + 'px'"
+                                v-if="titleSubMenuCollapsed == item.title">
                                 <div v-for="(item, index) in subMenuFilter(false)" :key="index">
                                     <div :class="{ 'sub-menu-title-collapsed': item.title }"
                                         @click.prevent="navegateTo(item, item.module)">
                                         <b-row>
                                             <b-col sm="2" v-if="item.title">
                                                 <i :class="item.icon"></i>
+
                                             </b-col>
                                             <b-col sm="9">
                                                 <div v-if="item.groupName" class="div-group">
                                                     {{ item.groupName }}
                                                 </div>
-                                                <span> {{ item.title }}</span>
+                                                <span>
+                                                    <span> {{ item.title }}</span>
+                                                    <span class="div-support" v-if="item.isVisible == 'support'">
+                                                        Suporte
+                                                    </span>
+                                                </span>
                                             </b-col>
                                         </b-row>
                                     </div>
@@ -89,7 +79,6 @@
                     <br>
                 </div>
             </ScrollBar>
-
         </div>
     </div>
 </template>
@@ -246,7 +235,7 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
-    width: 275px;
+    width: 200px;
     height: 100vh;
     border-radius: 0px 20px 0px 0px;
     background-color: #577696;
@@ -278,7 +267,7 @@ export default {
 .sidebar-header .sidebar-toggler,
 .sidebar-menu-button {
     position: absolute;
-    right: 23px;
+    left: 70px;
     height: 30px;
     width: 30px;
     color: #151A2D;
@@ -296,6 +285,19 @@ export default {
     transform: translate(-4px, 65px);
 }
 
+.div-menu-toggle {
+    position: fixed;
+    font-size: 18px;
+    top: 25px;
+    width: 20px;
+    height: 20px;
+    background-color: #D98621;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 2000;
+    transition: all 0.4s ease;
+}
+
 .molded-icon-open {
     padding-left: 10px;
     cursor: pointer;
@@ -322,16 +324,17 @@ export default {
 }
 
 .icon-menu-arrow {
-    font-size: 17px;
-    margin-top: 7px;
+    font-size: 14px;
+    margin-top: -4px;
+    margin-left: 6px;
+    color: white;
 }
 
 .molded-icon {
     cursor: pointer;
-    padding: 1px;
     color: white;
     font-size: 18px;
-    margin: 10px;
+    margin: 13px;
     border-radius: 10px;
     transition: all 0.3s ease;
 }
@@ -339,7 +342,6 @@ export default {
 .molded-icon:hover {
     background-color: white;
     color: #2C3453;
-    margin: 10px;
     border-radius: 10px;
     transition: all 0.8s ease;
 }
@@ -377,15 +379,16 @@ export default {
 .sub-menu-collapsed {
     width: 260px;
     margin-top: -100px;
-    margin-left: 85px;
     position: absolute;
     border-radius: 0px 15px 15px 0px;
     background-color: #2C3453;
+    cursor: pointer;
 }
 
 .sub-menu-title-collapsed {
     padding: 10px;
     border-radius: 8px;
+    font-size: 13px;
 }
 
 .sub-menu-title-collapsed:hover {
@@ -405,8 +408,11 @@ export default {
 }
 
 .title-menu {
-    font-size: 14px;
-    padding: 20px;
+    font-size: 13px;
+}
+
+.title-menu-collapsed {
+    font-size: 11.5px;
 }
 
 .div-arrow {
@@ -438,4 +444,12 @@ export default {
     margin-left: 10px;
     padding: 5px;
 }
+
+.div-support {
+    background-color: #0A36DB;
+    font-size: 11px;
+    border-radius: 20px;
+    padding: 2px;
+    color: white !important;
+}
 </style>

package/src/component/layout/Panel.vue

@@ -9,7 +9,11 @@
         </VerticalFilter>
       </div>
       <div class="local-container" :class="{ 'layout-small': layout == 'small' }">
-        <Messages v-if="!modal.open" />
+        <div v-if="!modal.open && !vodal.open" class="div-message-panel">
+          <Messages />
+        </div>
+        <br>
+        <br>
         <div class="row">
           <div class="col-10">
             <div class="div-title">
@@ -94,7 +98,7 @@ export default {
   },
   computed: {
     ...mapGetters("generic", ["isLoading", "event"]),
-    ...mapState("generic", ["modal", "menuCollapsed"]),
+    ...mapState("generic", ["modal", "vodal", "menuCollapsed"]),
   },
   methods: {
     ...mapMutations("generic", ["addLoading"]),
@@ -144,7 +148,7 @@ export default {
 
 .panel {
   padding-right: 30px;
-  margin-left: 190px;
+  margin-left: 130px;
 }
 
 .panel.collapsed {
@@ -166,4 +170,16 @@ export default {
 .div-back:hover {
   color: #505050;
 }
+
+.div-message-panel {
+  width: calc(100% - 60px);
+  position: fixed;
+  top: -55px;
+  left: 30px;
+  right: 30px;
+  margin: 0;
+  z-index: 2000 !important;
+  transition: top 0.5s ease; 
+}
+
 </style>

package/src/component/shared/DocumentEditor.vue

@@ -40,7 +40,6 @@ export default {
         }
       },
       set(newValue) {
-        console.log(newValue);
         if (this.editMode) {
           this.updateDocumentHtmlFinal(newValue);
         } else {

package/src/component/shared/Messages.vue

@@ -1,18 +1,16 @@
 <template>
   <div>
     <div :class="{ 'div-message': !modal.open }" v-if="storageNotification.length > 0">
-      <div>
-        <Alert type="danger">
-          <div class="side-by-side" v-for="notification in storageNotification">
-            <div class="side-by-side text">
-              {{ notification.message }}
-            </div>
+      <Alert type="danger">
+        <div class="side-by-side" v-for="(notification, index) in storageNotification" :key="index">
+          <div class="side-by-side text">
+            {{ notification.message }}
           </div>
-        </Alert>
-      </div>
-      <b-alert v-show="false" :show="countdown" dismissible variant="danger" @dismissed="countdown = 0"
-        @dismiss-count-down="countdownChanged">
-      </b-alert>
+        </div>
+        <div class="progress-bar-container">
+          <div class="progress-bar" :style="{ width: progressWidth + '%' }"></div>
+        </div>
+      </Alert>
     </div>
   </div>
 </template>
@@ -26,9 +24,10 @@ export default {
   name: "Messages",
   data() {
     return {
-      maxSeconds: 20,
-      countdown: 20,
+      maxSeconds: 10,
+      countdown: 10,
       storageNotification: [],
+      progressWidth: 100,
     };
   },
   computed: {
@@ -38,11 +37,13 @@ export default {
     notifications() {
       if (this.notifications.length > 0) {
         this.storageNotification = this.notifications;
-        this.countdown = 5;
+        this.countdown = this.maxSeconds;
+        this.progressWidth = 100;
+        this.startCountdown();
       }
     },
-    countdown() {
-      if (this.countdown === 0) {
+    countdown(newCountdown) {
+      if (newCountdown === 0) {
         this.storageNotification = [];
         this.removeNotificarions();
       }
@@ -50,34 +51,59 @@ export default {
   },
   methods: {
     ...mapMutations("generic", ["removeNotificarions"]),
-    countdownChanged(countdown) {
-      this.countdown = countdown;
+
+    startCountdown() {
+      this.countdownInterval = setInterval(() => {
+        if (this.countdown > 0) {
+          this.countdown--;
+          this.updateProgressBar();
+        } else {
+          clearInterval(this.countdownInterval);
+        }
+      }, 1000);
     },
-    messages(notifications) {
-      var message = "";
-      notifications.forEach(function (notification) {
-        message += notification.message + " ";
-      });
 
-      return message;
+    updateProgressBar() {
+      // Atualiza a largura da barra de progresso
+      this.progressWidth = (this.countdown / this.maxSeconds) * 100;
     },
   },
 };
 </script>
+
 <style scoped>
 .div-message {
   margin-top: 50px;
+  transition: all 0.5s ease !important;
+  z-index: 2000;
 }
 
-.div-message-modal {
-  margin-bottom: 5px;
-}
-
-.invalid {
-  color: #f0134d;
+.side-by-side {
+  display: flex;
+  justify-content: space-between;
 }
 
 .text {
   margin-right: 10px;
 }
+
+.progress-bar-container {
+  width: 100%;
+  height: 3px;
+  background-color: #e0e0e0;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #FF0201;
+  border-radius: 50px;
+  transition: width 1s ease-out;
+}
+
+.div-countdown {
+  margin-top: 10px;
+  font-size: 16px;
+}
 </style>

package/src/component/shared/SaveCancel.vue

@@ -2,7 +2,8 @@
   <div>
     <FixedBar :position="positionFixedBar" backgroundColor="#FAFAFC"
       v-show="formDirty && !modal.open && on || showFixed">
-      <div class="margin" :style="'margin-bottom:' + marginBottom + 'px'">
+      <div :class="{ collapsed: menuCollapsed, notCollapsed: !menuCollapsed }"
+        :style="'margin-bottom:' + marginBottom + 'px'">
         <Button _key="cancelSaveCancel" eventName="cancelSaveCancel" title="Cancelar" type="danger" size="small"
           :clicked="cancel" />
         <Button _key="saveSaveCancel" :eventName="eventName" classIcon="fa-solid fa-floppy-disk" title="Salvar"
@@ -67,7 +68,7 @@ export default {
     ...mapState("generic", ["loading"]),
     ...mapGetters("generic", ["event"]),
     ...mapGetters("validation", ["isFormValid"]),
-    ...mapState("generic", ["modal"]),
+    ...mapState("generic", ["modal", "menuCollapsed"]),
   },
   methods: {
     ...mapMutations("validation", ["updateFormDirty", "resetValidation"]),
@@ -86,7 +87,13 @@ export default {
 };
 </script>
 <style scoped>
-.margin {
+.collapsed {
   margin-left: 0px;
+  transition: all 0.4s ease;
+}
+
+.notCollapsed {
+  margin-left: 130px;
+  transition: all 0.4s ease;
 }
 </style>

package/src/component/shared/Table.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="icon-print" v-print="'#printMe'">
+    <div class="icon-print" v-print="'#printTable'">
       <i title="Imprimir" class="fas fa-print"></i>
     </div>
-    <table id="printMe" class="table table-responsive-xs">
+    <table id="printTable" class="table table-responsive-xs">
       <thead>
         <tr>
           <th class="td-checkbox" v-if="showChecks">