@nixweb/nixloc-ui 1.19.0 → 1.20.0

package/src/component/shared/ListNotifications.vue

@@ -1,70 +1,70 @@
-<template>
-  <div>
-    <ScrollBar :minHeight="400" :maxHeight="400">
-      <div>
-        <br />
-        <table class="table table-responsive-xs">
-          <thead>
-            <tr>
-              <th class="title-header">Mensagem</th>
-            </tr>
-          </thead>
-          <tbody v-for="error in listError">
-            <tr>
-              <td>
-                <span class="message"> {{ error }}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </ScrollBar>
-  </div>
-</template>
-
-<script>
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-
-export default {
-  name: "ListNotifications",
-  props: {
-    listError: Array,
-  },
-  components: {
-    ScrollBar,
-  },
-};
-</script><style scoped>
-.table th,
-.table td {
-  height: 10px !important;
-  padding-left: 5px !important;
-  padding-top: 7px !important;
-  padding-bottom: 5px !important;
-  padding-right: 5px !important;
-  padding-left: 10px !important;
-  border-bottom: 0px !important;
-}
-
-.title-header {
-  font-size: 14px;
-  color: #757d8c;
-  font-weight: 400;
-}
-
-.tabela-principal {
-  font-size: 14px;
-  max-width: 200px;
-}
-
-.tabela-descricao {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-}
-
-.message {
-  color: red;
-}
-</style>
+<template>
+  <div>
+    <ScrollBar :minHeight="400" :maxHeight="400">
+      <div>
+        <br />
+        <table class="table table-responsive-xs">
+          <thead>
+            <tr>
+              <th class="title-header">Mensagem</th>
+            </tr>
+          </thead>
+          <tbody v-for="error in listError">
+            <tr>
+              <td>
+                <span class="message"> {{ error }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+export default {
+  name: "ListNotifications",
+  props: {
+    listError: Array,
+  },
+  components: {
+    ScrollBar,
+  },
+};
+</script><style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  padding-left: 10px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+}
+
+.tabela-principal {
+  font-size: 14px;
+  max-width: 200px;
+}
+
+.tabela-descricao {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.message {
+  color: red;
+}
+</style>

package/src/component/shared/Loading.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
-    <div
-      v-if="type == 'bubbles'"
-      :class="{ loading: center }"
-    >
+    <div v-if="type == 'bubbles'" :class="{ loading: center }">
       <vue-loading
         type="bubbles"
         :color="color"

package/src/component/shared/LoadingCard.vue

@@ -1,65 +1,65 @@
-<template>
-    <div class="loading-skeleton" :style="'height:' + height + 'px'">
-        <div v-for="index in totalLine" :key="index" class="line"
-            :style="{ height: getRandomHeight() + 'px', width: '100%' }"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "LoadingCard",
-    props: {
-        totalLine: {
-            type: Number,
-            default: 3,
-            validator(value) {
-                return value >= 1 && value <= 10;
-            }
-        },
-        height: {
-            type: Number,
-            default: 200,
-            validator(value) {
-                return value > 0;
-            }
-        }
-    },
-    methods: {
-        getRandomHeight() {
-            const minHeight = 10; 
-            const maxHeight = 30;
-            return Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
-        }
-    }
-};
-</script>
-
-<style scoped>
-.loading-skeleton {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    max-width: 400px;
-    margin: 0 auto;
-    overflow: hidden;
-}
-
-.line {
-    width: 100%;
-    background: linear-gradient(90deg, #f0f0f0 25%, #d8d8d8 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: shimmer 1.5s infinite linear;
-    border-radius: 4px;
-    opacity: 0.4;
-}
-
-@keyframes shimmer {
-    0% {
-        background-position: -200% 0;
-    }
-
-    100% {
-        background-position: 200% 0;
-    }
-}
+<template>
+    <div class="loading-skeleton" :style="'height:' + height + 'px'">
+        <div v-for="index in totalLine" :key="index" class="line"
+            :style="{ height: getRandomHeight() + 'px', width: '100%' }"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "LoadingCard",
+    props: {
+        totalLine: {
+            type: Number,
+            default: 3,
+            validator(value) {
+                return value >= 1 && value <= 10;
+            }
+        },
+        height: {
+            type: Number,
+            default: 200,
+            validator(value) {
+                return value > 0;
+            }
+        }
+    },
+    methods: {
+        getRandomHeight() {
+            const minHeight = 10; 
+            const maxHeight = 30;
+            return Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
+        }
+    }
+};
+</script>
+
+<style scoped>
+.loading-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 400px;
+    margin: 0 auto;
+    overflow: hidden;
+}
+
+.line {
+    width: 100%;
+    background: linear-gradient(90deg, #f0f0f0 25%, #d8d8d8 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite linear;
+    border-radius: 4px;
+    opacity: 0.4;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+
+    100% {
+        background-position: 200% 0;
+    }
+}
 </style>

package/src/component/shared/ParameterLegend.vue

@@ -1,169 +1,169 @@
-<template>
-  <div>
-    <Search />
-    <br />
-    <ScrollBar :minHeight="400" :maxHeight="400">
-      <table class="table table-responsive-xs">
-        <thead>
-          <tr>
-            <th><span class="title-header">Descrição</span></th>
-            <th><span class="title-header">Exemplo</span></th>
-            <th><span class="title-header">Parâmetro</span></th>
-          </tr>
-        </thead>
-        <tbody v-for="(legendLocal, groupName) in grouped">
-          <td class="group text-center" colspan="8">
-            <div>{{ groupName }}</div>
-          </td>
-          <tr v-for="item in legendLocal">
-            <td class="description">
-              <span> {{ item.description }}</span>
-            </td>
-            <td>
-              <span class="exemplo"> {{ item.example }}</span>
-            </td>
-            <td class="parametro">
-              <span @click="copy(item.parameter)" v-clipboard="item.parameter">
-                {{ item.parameter }}
-                <span v-if="item.parameter">
-                  <span class="copy" v-if="copied != item.parameter">
-                    <span>Copiar</span>
-                  </span>
-                  <span class="copied" v-else>
-                    <span>Copiado</span>
-                  </span>
-                </span>
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </ScrollBar>
-  </div>
-</template>
-<script>
-import Search from "@nixweb/nixloc-ui/src/component/shared/Search.vue";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-
-import { mapGetters, mapState, mapMutations } from "vuex";
-
-export default {
-  name: "ParameterLegend",
-  components: {
-    ScrollBar,
-    Search,
-  },
-  props: {
-    legend: [],
-    module: String,
-  },
-  data() {
-    return {
-      legendLocal: [],
-      copied: "",
-    };
-  },
-  mounted() {
-    this.legendLocal = this.legend;
-  },
-  methods: {
-    ...mapMutations("generic", ["removeLoading"]),
-    copy(parameter) {
-      this.copied = parameter;
-    },
-  },
-  computed: {
-    ...mapGetters("generic", ["groupBy"]),
-    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
-    grouped() {
-      let legend = [];
-    /*  this.legendLocal.forEach((item) => {
-        if (item.showModule.includes(this.module) || item.showModule == "all")
-          legend.push(item);
-      });*/
-
-      var list = this.groupBy({ array: this.legendLocal, key: "groupName" });
-      return list;
-    },
-  },
-  watch: {
-    executedSearch: function () {
-      let legend = [];
-      let self = this;
-      setTimeout(function () {
-        if (self.search.content) {
-          self.legend.forEach(function (item) {
-            if (self.search.filter.content == "equal") {
-              if (item.description == self.search.content) legend.push(item);
-            }
-            if (self.search.filter.content == "contains") {
-              if (item.description.includes(self.search.content))
-                legend.push(item);
-            }
-          });
-          self.legendLocal = legend;
-        }
-        self.removeLoading(["btnSearch", "btnClean"]);
-      }, 300);
-    },
-    clearedSearch: function () {
-      let self = this;
-      setTimeout(function () {
-        self.legendLocal = self.legend;
-        self.removeLoading(["btnSearch", "btnClean"]);
-      }, 300);
-    },
-  },
-};
-</script>
-<style scoped>
-.table th,
-.table td {
-  height: 10px !important;
-  padding-left: 5px !important;
-  padding-top: 7px !important;
-  padding-bottom: 5px !important;
-  padding-right: 5px !important;
-  border-bottom: 0px !important;
-}
-
-.title-header {
-  font-size: 14px;
-  color: #757d8c;
-  font-weight: 400;
-  text-transform: uppercase;
-}
-
-.group {
-  background-color: #fafafc;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.description {
-  width: 350px;
-}
-
-.div-warning {
-  margin-bottom: 20px;
-}
-
-.parametro {
-  font: 12px;
-  width: 340px;
-  cursor: pointer;
-}
-
-.exemplo {
-  font-size: 14px;
-  color: rgb(31, 31, 82);
-}
-
-.copy {
-  color: rgb(31, 31, 82);
-}
-
-.copied {
-  color: red;
-}
-</style>
+<template>
+  <div>
+    <Search />
+    <br />
+    <ScrollBar :minHeight="400" :maxHeight="400">
+      <table class="table table-responsive-xs">
+        <thead>
+          <tr>
+            <th><span class="title-header">Descrição</span></th>
+            <th><span class="title-header">Exemplo</span></th>
+            <th><span class="title-header">Parâmetro</span></th>
+          </tr>
+        </thead>
+        <tbody v-for="(legendLocal, groupName) in grouped">
+          <td class="group text-center" colspan="8">
+            <div>{{ groupName }}</div>
+          </td>
+          <tr v-for="item in legendLocal">
+            <td class="description">
+              <span> {{ item.description }}</span>
+            </td>
+            <td>
+              <span class="exemplo"> {{ item.example }}</span>
+            </td>
+            <td class="parametro">
+              <span @click="copy(item.parameter)" v-clipboard="item.parameter">
+                {{ item.parameter }}
+                <span v-if="item.parameter">
+                  <span class="copy" v-if="copied != item.parameter">
+                    <span>Copiar</span>
+                  </span>
+                  <span class="copied" v-else>
+                    <span>Copiado</span>
+                  </span>
+                </span>
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </ScrollBar>
+  </div>
+</template>
+<script>
+import Search from "@nixweb/nixloc-ui/src/component/shared/Search.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+import { mapGetters, mapState, mapMutations } from "vuex";
+
+export default {
+  name: "ParameterLegend",
+  components: {
+    ScrollBar,
+    Search,
+  },
+  props: {
+    legend: [],
+    module: String,
+  },
+  data() {
+    return {
+      legendLocal: [],
+      copied: "",
+    };
+  },
+  mounted() {
+    this.legendLocal = this.legend;
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    copy(parameter) {
+      this.copied = parameter;
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["groupBy"]),
+    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
+    grouped() {
+      let legend = [];
+    /*  this.legendLocal.forEach((item) => {
+        if (item.showModule.includes(this.module) || item.showModule == "all")
+          legend.push(item);
+      });*/
+
+      var list = this.groupBy({ array: this.legendLocal, key: "groupName" });
+      return list;
+    },
+  },
+  watch: {
+    executedSearch: function () {
+      let legend = [];
+      let self = this;
+      setTimeout(function () {
+        if (self.search.content) {
+          self.legend.forEach(function (item) {
+            if (self.search.filter.content == "equal") {
+              if (item.description == self.search.content) legend.push(item);
+            }
+            if (self.search.filter.content == "contains") {
+              if (item.description.includes(self.search.content))
+                legend.push(item);
+            }
+          });
+          self.legendLocal = legend;
+        }
+        self.removeLoading(["btnSearch", "btnClean"]);
+      }, 300);
+    },
+    clearedSearch: function () {
+      let self = this;
+      setTimeout(function () {
+        self.legendLocal = self.legend;
+        self.removeLoading(["btnSearch", "btnClean"]);
+      }, 300);
+    },
+  },
+};
+</script>
+<style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.group {
+  background-color: #fafafc;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.description {
+  width: 350px;
+}
+
+.div-warning {
+  margin-bottom: 20px;
+}
+
+.parametro {
+  font: 12px;
+  width: 340px;
+  cursor: pointer;
+}
+
+.exemplo {
+  font-size: 14px;
+  color: rgb(31, 31, 82);
+}
+
+.copy {
+  color: rgb(31, 31, 82);
+}
+
+.copied {
+  color: red;
+}
+</style>