@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/layout/NewAccount.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="icon-logout" @click="execute">
+      <i class="fa-duotone fa-solid fa-right-from-bracket"></i>
+    </div>
+    <div class="profile-container" v-if="hideShow">
+      <div class="item-header text-center">
+        <span>Conta</span>
+      </div>
+      <div class="profile-content" v-for="item in items" :key="item.title">
+        <div class="item-content" @click="navegateTo(item.routeName)">
+          <div class="title-container">
+            <span>
+              <i :class="item.classIcon"></i>
+              <span class="title-profile title-input">{{ item.title }}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="profile-content" @click="execute">
+        <div class="item-content">
+          <div class="title-container">
+            <span>
+              <i class="fas fa-sign-in"></i>
+              <span class="title-profile title-input">Sair</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Account",
+  props: {
+    items: [],
+    exited: Function,
+  },
+  data() {
+    return {
+      hideShow: false,
+    };
+  },
+  methods: {
+    navegateTo(routeName) {
+      this.$router.push({ name: routeName });
+      this.hideShow = false;
+    },
+    execute() {
+      if (this.exited) this.exited();
+    },
+  },
+};
+</script>
+<style scoped>
+.icon-logout {
+  padding-left: 12px;
+  padding-top: 2px;
+  margin-top: -43px;
+  margin-right: 28px;
+  cursor: pointer;
+  position: fixed;
+  float: right;
+  left: auto;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  color: #F0134D;
+  font-size: 22px;
+}
+
+img {
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+}
+
+.profile-container {
+  position: fixed;
+  float: right;
+  left: auto;
+  right: 0;
+  margin-right: 20px;
+  height: 100%;
+  z-index: 1000;
+  width: 190px;
+  margin-top: 26px;
+  background-color: white;
+  height: auto;
+  border-bottom: 1px solid #e9ebec;
+}
+
+.profile-content {
+  right: 0;
+  height: 100%;
+  z-index: 101;
+  width: 190px;
+  height: auto;
+}
+
+.item-header {
+  padding: 8px 20px;
+  background: #f8f8f8;
+  border-left: 1px solid #e9ebec;
+  border-right: 1px solid #e9ebec;
+  border-top: 1px solid #e9ebec;
+}
+
+.item-content {
+  padding-left: 15px;
+  height: 45px;
+  background: white;
+  border: 1px solid #e9ebec;
+  border-bottom: 0px solid #e9ebec;
+  cursor: pointer;
+}
+
+.item-content:hover {
+  background: #f8f8f8;
+}
+
+.title-container {
+  padding-top: 10px;
+}
+
+.title-container:hover {
+  padding-top: 10px;
+  color: #37597c;
+}
+
+.title-profile {
+  padding-left: 10px;
+}
+</style>

package/src/component/layout/NewHeader.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <div :class="['top', { collapsed: menuCollapsed, notCollapsed: !menuCollapsed }]">
+            <div class="side-by-side top-space">
+                <slot></slot>
+            </div>
+            <div class="side-by-side div-theme">
+                <ToggleTheme />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import ToggleTheme from "@nixweb/nixloc-ui/src/component/shared/ToggleTheme.vue";
+
+import { mapState } from "vuex";
+
+export default {
+    name: "Top",
+    components: {
+        ToggleTheme
+    },
+    props: {
+        backgroundColor: {
+            type: String,
+            default: "#4680A5",
+        },
+    },
+    computed: {
+        ...mapState("generic", ["menuCollapsed"]),
+    },
+};
+</script>
+
+<style scoped>
+.top {
+    position: fixed;
+    padding-left: 30px;
+    padding-top: 5px;
+    right: 0px;
+    height: 58px;
+    transition: all 0.3s ease;
+    background-color: #FAFAFC; 
+    z-index: 1000;
+}
+
+.top.notCollapsed {
+    left: 180px;
+}
+
+.top.collapsed {
+    left: 60px;
+}
+
+.div-theme {
+    margin-left: 15px;
+}
+</style>

package/src/component/layout/NewIconMolded.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div v-for="icon in icons" class="molded-icon side-by-side" @click="executeEvent(icon.eventName)" v-b-tooltip.hover
+      :title="icon.tooltip">
+      <div :class="{
+        'icon-active-header': moduleActive === icon.module,
+      }" class="icon-molded-icon">
+        <i :class="icon.icon"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "IconMolded",
+  props: {
+    icons: Array,
+  },
+  data() {
+    return { moduleActive: "" };
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    executeEvent(eventName) {
+      this.addEvent({
+        name: eventName,
+      });
+      this.addEvent({
+        name: "cleanMenuSelected",
+      });
+    },
+  },
+  watch: {
+    $route: {
+      handler: function (router) {
+        this.moduleActive = router.matched[0].props.default.module;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.molded-icon {
+  height: 38px;
+  width: 38px;
+  margin-left: 10px;
+  margin-top: 4px;
+  cursor: pointer;
+}
+
+.icon-molded-icon {
+  font-size: 20px;
+  margin-left: 10px;
+  color: #2C3453;
+}
+
+.module-active {
+  border-radius: 50px;
+  background-color: #2C3453;
+}
+
+.icon-active-header {
+  color: #D98621;
+  font-size: 22px;
+}
+</style>

package/src/component/layout/NewMenu.vue

@@ -0,0 +1,456 @@
+<template>
+    <div>
+        <div :class="['sidebar', { collapsed: menuCollapsed }]">
+            <div class="sidebar-header">
+                <span class="header-logo" @click="editProfile">
+                    <img class="photo" :src="urlPhoto" />
+                </span>
+                <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 @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
+                            }">
+                                <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 @mouseover="handleMouseOver(item.title, item.module)">
+                                <b-row>
+                                    <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 :ref="item.title + 'sub'" class="sub-menu-collapsed sub-menu"
+                                :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>
+                                                    <span> {{ item.title }}</span>
+                                                    <span class="div-support" v-if="item.isVisible == 'support'">
+                                                        Suporte
+                                                    </span>
+                                                </span>
+                                            </b-col>
+                                        </b-row>
+                                    </div>
+                                </div>
+                            </div>
+                        </transition>
+                    </div>
+                    <br>
+                    <br>
+                    <br>
+                </div>
+            </ScrollBar>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+    props: {
+        urlPhoto: String,
+    },
+    components: {
+        ScrollBar
+    },
+    data() {
+        return {
+            module: "",
+            moduleActive: "",
+            isSidebarCollapsed: true,
+            openDropdowns: {},
+            titleSubMenu: "",
+            titleSubMenuCollapsed: "",
+            pageSize: 0,
+            distanceFromBottom: 0,
+        };
+    },
+    mounted() {
+        this.updatePageSize();
+        window.addEventListener('resize', this.updatePageSize);
+
+        if (!localStorage.getItem('menuCollapsed')) {
+            localStorage.setItem('menuCollapsed', this.isSidebarCollapsed ? "closed" : "open");
+        }
+
+        if (localStorage.getItem('menuCollapsed') === 'open') {
+            this.toggleMenu(false);
+        } else {
+            this.toggleMenu(true);
+        }
+
+        if (this.$route.matched[0])
+            this.moduleActive = this.$route.matched[0].props.default.module;
+
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.updatePageSize);
+    },
+    computed: {
+        ...mapState("user", ["menu", "userLogged"]),
+        ...mapState("generic", ["menuCollapsed"]),
+        ...mapGetters("generic", ["event"]),
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "toggleMenu"]),
+        updatePageSize() {
+            const windowHeight = window.innerHeight;
+            this.pageSize = windowHeight;
+        },
+        toggleSidebar() {
+            this.isSidebarCollapsed = !this.isSidebarCollapsed;
+            this.toggleMenu(this.isSidebarCollapsed);
+            localStorage.setItem('menuCollapsed', this.isSidebarCollapsed ? "closed" : "open");
+            this.titleSubMenu = "";
+            this.titleSubMenuCollapsed = "";
+        },
+        toggleSubMenu(title, module) {
+            this.module = module;
+            if (this.titleSubMenu === title) {
+                this.titleSubMenu = "";
+            } else {
+                this.titleSubMenu = title;
+            }
+        },
+        handleMouseOver(title, module) {
+            this.module = module;
+            this.titleSubMenuCollapsed = title;
+
+            var divSub = this.$refs[title + 'sub'];
+
+            if (divSub) {
+                let self = this;
+                setTimeout(function () {
+                    const heightSubMenu = divSub[0].getBoundingClientRect();
+
+                    if (heightSubMenu.top < 0 || heightSubMenu.left < 0 || heightSubMenu.bottom > window.innerHeight || heightSubMenu.right > window.innerWidth) {
+                        divSub[0].style.bottom = '0px';
+                    }
+
+                }, 100);
+            }
+        },
+        handleMouseLeave() {
+            this.titleSubMenuCollapsed = "";
+            if (this.menuCollapsed)
+                this.module = "";
+        },
+        menuFilter(isModule) {
+            let filter = [];
+            this.menu.items.forEach(function (obj) {
+                if (obj.isModule == isModule) filter.push(obj);
+            });
+            return filter.sort((a, b) => a.order - b.order);
+        },
+        subMenuFilter(isModule) {
+            let filter = [];
+            let self = this;
+            let userLogged = this.userLogged.user.userName;
+            this.menu.items.forEach(function (obj) {
+                if (obj.isModule == isModule && obj.module === self.module) {
+                    if (obj.isVisible == "all") filter.push(obj);
+
+                    if (obj.isVisible == "support" && userLogged == "UserTemp")
+                        filter.push(obj);
+                }
+            });
+            return filter;
+        },
+        navegateTo(item, module) {
+            this.$router.push({
+                name: item.routeName,
+            });
+
+            this.moduleActive = module;
+            this.titleSubMenuCollapsed = "";
+        },
+        editProfile() {
+            this.addEvent({ name: "clickedProfile" });
+        },
+    },
+    watch: {
+        event: {
+            handler: function (event) {
+                if (event.name == "handleMouseOver") {
+                    this.handleMouseLeave();
+                }
+            },
+            deep: true,
+        },
+        $route: {
+            handler: function (router) {
+                this.moduleActive = router.matched[0].props.default.module;
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style scoped>
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 200px;
+    height: 100vh;
+    border-radius: 0px 20px 0px 0px;
+    background-color: #577696;
+    transition: all 0.4s ease;
+    z-index: 1000;
+}
+
+.sidebar.collapsed {
+    width: 85px;
+}
+
+.sidebar .sidebar-header {
+    display: flex;
+    position: relative;
+    padding: 10px 20px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.sidebar-header .header-logo img {
+    width: 46px;
+    height: 46px;
+    display: block;
+    object-fit: contain;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+.sidebar-header .sidebar-toggler,
+.sidebar-menu-button {
+    position: absolute;
+    left: 70px;
+    height: 30px;
+    width: 30px;
+    color: #151A2D;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    background: #EEF2FF;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+    transition: 0.4s ease;
+}
+
+.sidebar.collapsed .sidebar-header .sidebar-toggler {
+    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;
+    margin-top: 10px;
+    color: white;
+    font-size: 17px;
+    margin: 15px;
+    border-radius: 10px;
+    transition: all 0.3s ease;
+}
+
+.molded-icon-open:hover {
+    color: #2C3453;
+    background-color: white;
+}
+
+.menu-active {
+    background-color: #D98621;
+}
+
+.module-selected {
+    color: #2C3453 !important;
+    background-color: white !important;
+}
+
+.icon-menu-arrow {
+    font-size: 14px;
+    margin-top: -4px;
+    margin-left: 6px;
+    color: white;
+}
+
+.molded-icon {
+    cursor: pointer;
+    color: white;
+    font-size: 18px;
+    margin: 13px;
+    border-radius: 10px;
+    transition: all 0.3s ease;
+}
+
+.molded-icon:hover {
+    background-color: white;
+    color: #2C3453;
+    border-radius: 10px;
+    transition: all 0.8s ease;
+}
+
+.sub {
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.sub-menu {
+    margin: 15px;
+    padding: 10px;
+    border-radius: 15px;
+    color: white;
+    font-size: 14px;
+    background-color: #2C3453;
+    transition: all 0.5s ease;
+}
+
+.sub-menu-title {
+    cursor: pointer;
+    border-radius: 8px;
+    padding: 5px;
+    transition: all 1s ease;
+}
+
+.sub-menu-title:hover {
+    padding: 5px;
+    color: #2C3453;
+    background-color: white;
+    font-weight: bold;
+    transition: all 0.8s ease;
+}
+
+.sub-menu-collapsed {
+    width: 260px;
+    margin-top: -100px;
+    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 {
+    background-color: white;
+    color: #2C3453;
+    transition: all 0.8s ease;
+}
+
+.rotate {
+    transform: rotate(180deg);
+    transition: transform 0.5s ease;
+}
+
+.rotate-down {
+    transform: rotate(360deg);
+    transition: transform 0.5s ease;
+}
+
+.title-menu {
+    font-size: 13px;
+}
+
+.title-menu-collapsed {
+    font-size: 11.5px;
+}
+
+.div-arrow {
+    margin-left: 50px;
+}
+
+.div-menu-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 10px;
+}
+
+.div-icon-bottom {
+    cursor: pointer;
+    font-size: 17px;
+    color: white;
+    border-radius: 10px;
+    background-color: #2C3453;
+}
+
+.title-logout {
+    font-size: 16px;
+    margin-left: 10px;
+}
+
+.div-group {
+    margin-left: 10px;
+    padding: 5px;
+}
+
+.div-support {
+    background-color: #0A36DB;
+    font-size: 11px;
+    border-radius: 20px;
+    padding: 1px 2px 2px 2px;
+    margin-left: 5px;
+    color: white !important;
+}
+</style>