@nixweb/nixloc-ui 1.9.0 → 1.11.0

package/@nixweb/nixloc-ui/src/component/layout/Panel.vue

@@ -1,185 +1,185 @@
-<template>
-  <div :class="['panel', { collapsed: menuCollapsed }]">
-    <Toast />
-    <Loading v-show="isLoading('panel')" />
-    <div v-show="!isLoading('panel')">
-      <div v-show="showVerticalFilter">
-        <VerticalFilter>
-          <slot name="content-filter"></slot>
-        </VerticalFilter>
-      </div>
-      <div class="local-container" :class="{ 'layout-small': layout == 'small' }">
-        <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">
-              <span class="module">
-                <span class="icon-panel"><i class="fas fa-compass"></i></span>
-                {{ module }} <span v-if="title">|</span></span>
-              <span class="title"> {{ title }}</span>
-            </div>
-          </div>
-          <div class="col-2" v-if="currentRoute != 'dashboard'">
-            <div class="div-back text-right" @click="back()">
-              <i class="fa-solid fa-circle-arrow-left"></i>
-              <span> Voltar</span>
-            </div>
-          </div>
-        </div>
-        <br v-show="showButtons" />
-        <div class="row" v-show="showButtons">
-          <div class="col-12" v-show="showButtons">
-            <slot name="content-buttons"></slot>
-          </div>
-        </div>
-        <br v-show="showButtons || showSearch" />
-        <div v-show="showButtons || showSearch">
-          <div>
-            <div v-show="showSearch">
-              <Search />
-            </div>
-          </div>
-        </div>
-        <br v-show="showSearch" />
-        <div>
-          <slot name="content-main"></slot>
-        </div>
-      </div>
-    </div>
-    <br /><br /><br />
-  </div>
-</template>
-
-<script>
-import Toast from "../shared/Toast.vue";
-import Messages from "../shared/Messages.vue";
-import Search from "../shared/Search.vue";
-import Loading from "../shared/Loading.vue";
-import VerticalFilter from "../shared/VerticalFilter";
-import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
-
-import { mapState, mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "Panel",
-  components: {
-    Loading,
-    VerticalFilter,
-    Search,
-    Messages,
-    Toast,
-    Molded,
-  },
-  props: {
-    module: String,
-    title: String,
-    showVerticalFilter: Boolean,
-    showSearch: Boolean,
-    showButtons: Boolean,
-    layout: {
-      type: String,
-      default: "small"
-    }
-  },
-  data() {
-    return {
-      currentRoute: this.$route.name,
-    };
-  },
-  created() {
-    this.addLoading("panel");
-  },
-  updated() {
-    this.currentRoute = this.$route.name;
-  },
-  computed: {
-    ...mapGetters("generic", ["isLoading", "event"]),
-    ...mapState("generic", ["modal", "vodal", "menuCollapsed"]),
-  },
-  methods: {
-    ...mapMutations("generic", ["addLoading"]),
-    back() {
-      window.history.back();
-    },
-  },
-};
-</script>
-<style scoped>
-.local-container {
-  margin: auto;
-  padding-left: 100px;
-}
-
-.div-title {
-  margin-top: 15px;
-}
-
-.module {
-  font-size: 17px;
-  font-weight: 400;
-  color: #aaaebb;
-}
-
-.title {
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.icon-panel {
-  opacity: 0.8;
-  font-size: 20px;
-}
-
-.c-back {
-  margin-top: 20px;
-  margin-right: 12px;
-  font-size: 16px;
-  cursor: pointer;
-  color: #8ca1b7;
-}
-
-.c-back:hover {
-  color: #8ca1b7;
-}
-
-.panel {
-  padding-right: 30px;
-  margin-left: 130px;
-}
-
-.panel.collapsed {
-  margin-left: 10px;
-  transition: all 0.3s ease;
-}
-
-.div-back {
-  margin-top: 18px;
-  font-size: 16px;
-  cursor: pointer;
-  padding-top: 3px;
-  padding-left: 10px;
-  padding-right: 30px;
-  font-weight: 400;
-  color: #242424;
-}
-
-.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>
+<template>
+  <div :class="['panel', { collapsed: menuCollapsed }]">
+    <Toast />
+    <Loading v-show="isLoading('panel')" />
+    <div v-show="!isLoading('panel')">
+      <div v-show="showVerticalFilter">
+        <VerticalFilter>
+          <slot name="content-filter"></slot>
+        </VerticalFilter>
+      </div>
+      <div class="local-container" :class="{ 'layout-small': layout == 'small' }">
+        <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">
+              <span class="module">
+                <span class="icon-panel"><i class="fas fa-compass"></i></span>
+                {{ module }} <span v-if="title">|</span></span>
+              <span class="title"> {{ title }}</span>
+            </div>
+          </div>
+          <div class="col-2" v-if="currentRoute != 'dashboard'">
+            <div class="div-back text-right" @click="back()">
+              <i class="fa-solid fa-circle-arrow-left"></i>
+              <span> Voltar</span>
+            </div>
+          </div>
+        </div>
+        <br v-show="showButtons" />
+        <div class="row" v-show="showButtons">
+          <div class="col-12" v-show="showButtons">
+            <slot name="content-buttons"></slot>
+          </div>
+        </div>
+        <br v-show="showButtons || showSearch" />
+        <div v-show="showButtons || showSearch">
+          <div>
+            <div v-show="showSearch">
+              <Search />
+            </div>
+          </div>
+        </div>
+        <br v-show="showSearch" />
+        <div>
+          <slot name="content-main"></slot>
+        </div>
+      </div>
+    </div>
+    <br /><br /><br />
+  </div>
+</template>
+
+<script>
+import Toast from "../shared/Toast.vue";
+import Messages from "../shared/Messages.vue";
+import Search from "../shared/Search.vue";
+import Loading from "../shared/Loading.vue";
+import VerticalFilter from "../shared/VerticalFilter";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Panel",
+  components: {
+    Loading,
+    VerticalFilter,
+    Search,
+    Messages,
+    Toast,
+    Molded,
+  },
+  props: {
+    module: String,
+    title: String,
+    showVerticalFilter: Boolean,
+    showSearch: Boolean,
+    showButtons: Boolean,
+    layout: {
+      type: String,
+      default: "small"
+    }
+  },
+  data() {
+    return {
+      currentRoute: this.$route.name,
+    };
+  },
+  created() {
+    this.addLoading("panel");
+  },
+  updated() {
+    this.currentRoute = this.$route.name;
+  },
+  computed: {
+    ...mapGetters("generic", ["isLoading", "event"]),
+    ...mapState("generic", ["modal", "vodal", "menuCollapsed"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addLoading"]),
+    back() {
+      window.history.back();
+    },
+  },
+};
+</script>
+<style scoped>
+.local-container {
+  margin: auto;
+  padding-left: 100px;
+}
+
+.div-title {
+  margin-top: 15px;
+}
+
+.module {
+  font-size: 17px;
+  font-weight: 400;
+  color: #aaaebb;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.icon-panel {
+  opacity: 0.8;
+  font-size: 20px;
+}
+
+.c-back {
+  margin-top: 20px;
+  margin-right: 12px;
+  font-size: 16px;
+  cursor: pointer;
+  color: #8ca1b7;
+}
+
+.c-back:hover {
+  color: #8ca1b7;
+}
+
+.panel {
+  padding-right: 30px;
+  margin-left: 130px;
+}
+
+.panel.collapsed {
+  margin-left: 10px;
+  transition: all 0.3s ease;
+}
+
+.div-back {
+  margin-top: 18px;
+  font-size: 16px;
+  cursor: pointer;
+  padding-top: 3px;
+  padding-left: 10px;
+  padding-right: 30px;
+  font-weight: 400;
+  color: #242424;
+}
+
+.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/@nixweb/nixloc-ui/src/component/layout/Popover.vue

@@ -1,126 +1,126 @@
-<template>
-  <div>
-    <div class="center">
-      <span class="qs">? <span class="popover above">Hey bro, cool popover!</span></span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Popover",
-  props: {
-    nome: String,
-    width: Number,
-  },
-};
-</script>
-<style lang="scss" scoped>
-.center {
-  margin: 100px auto;
-  width: 30px;
-}
-
-/* The element to hover over */
-.qs {
-  background-color: #02bdda;
-  border-radius: 16px;
-  color: #e3fbff;
-  cursor: default;
-  display: inline-block;
-  font-family: "Helvetica", sans-serif;
-  font-size: 18px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-  position: relative;
-  text-align: center;
-  width: 30px;
-
-  .popover {
-    background-color: rgba(0, 0, 0, 0.85);
-    border-radius: 5px;
-    bottom: 42px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-    color: #fff;
-    display: none;
-    font-size: 12px;
-    font-family: "Helvetica", sans-serif;
-    left: -95px;
-    padding: 7px 10px;
-    position: absolute;
-    width: 200px;
-    z-index: 4;
-
-    &:before {
-      border-top: 7px solid rgba(0, 0, 0, 0.85);
-      border-right: 7px solid transparent;
-      border-left: 7px solid transparent;
-      bottom: -7px;
-      content: "";
-      display: block;
-      left: 50%;
-      margin-left: -7px;
-      position: absolute;
-    }
-  }
-
-  &:hover {
-    .popover {
-      display: block;
-      -webkit-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
-      -moz-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
-      -ms-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
-    }
-  }
-}
-
-@-webkit-keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-moz-keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-ms-keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes move-up {
-  from {
-    bottom: 30px;
-  }
-  to {
-    bottom: 42px;
-  }
-}
-@-moz-keyframes move-up {
-  from {
-    bottom: 30px;
-  }
-  to {
-    bottom: 42px;
-  }
-}
-@-ms-keyframes move-up {
-  from {
-    bottom: 30px;
-  }
-  to {
-    bottom: 42px;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="center">
+      <span class="qs">? <span class="popover above">Hey bro, cool popover!</span></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Popover",
+  props: {
+    nome: String,
+    width: Number,
+  },
+};
+</script>
+<style lang="scss" scoped>
+.center {
+  margin: 100px auto;
+  width: 30px;
+}
+
+/* The element to hover over */
+.qs {
+  background-color: #02bdda;
+  border-radius: 16px;
+  color: #e3fbff;
+  cursor: default;
+  display: inline-block;
+  font-family: "Helvetica", sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+  position: relative;
+  text-align: center;
+  width: 30px;
+
+  .popover {
+    background-color: rgba(0, 0, 0, 0.85);
+    border-radius: 5px;
+    bottom: 42px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+    color: #fff;
+    display: none;
+    font-size: 12px;
+    font-family: "Helvetica", sans-serif;
+    left: -95px;
+    padding: 7px 10px;
+    position: absolute;
+    width: 200px;
+    z-index: 4;
+
+    &:before {
+      border-top: 7px solid rgba(0, 0, 0, 0.85);
+      border-right: 7px solid transparent;
+      border-left: 7px solid transparent;
+      bottom: -7px;
+      content: "";
+      display: block;
+      left: 50%;
+      margin-left: -7px;
+      position: absolute;
+    }
+  }
+
+  &:hover {
+    .popover {
+      display: block;
+      -webkit-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
+      -moz-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
+      -ms-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
+    }
+  }
+}
+
+@-webkit-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-ms-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes move-up {
+  from {
+    bottom: 30px;
+  }
+  to {
+    bottom: 42px;
+  }
+}
+@-moz-keyframes move-up {
+  from {
+    bottom: 30px;
+  }
+  to {
+    bottom: 42px;
+  }
+}
+@-ms-keyframes move-up {
+  from {
+    bottom: 30px;
+  }
+  to {
+    bottom: 42px;
+  }
+}
+</style>