@nixweb/nixloc-ui 1.19.0 → 1.20.0

package/src/component/layout/NewAccount.vue

@@ -1,136 +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>
+<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

@@ -1,60 +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;
-}
+<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

@@ -1,71 +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;
-}
+<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>