@nixweb/nixloc-ui 1.17.0 → 1.20.0

package/@nixweb/nixloc-ui/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/@nixweb/nixloc-ui/src/component/shared/Loading.vue

@@ -1,107 +1,107 @@
-<template>
-  <div>
-    <div v-if="type == 'bubbles'" :class="{ loading: center }">
-      <vue-loading
-        type="bubbles"
-        :color="color"
-        :size="{ width: width + 'px', height: height + 'px' }"
-      ></vue-loading>
-    </div>
-    <div v-if="type == 'line'">
-      <div class="loader">
-        <div class="loader__element"></div>
-      </div>
-    </div>
-    <div :class="{ 'loading-text': center }">
-      <div>
-        <div class="message">{{ message }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Loading",
-  props: {
-    height: {
-      type: Number,
-      default: 70,
-    },
-    width: {
-      type: Number,
-      default: 70,
-    },
-    center: {
-      type: Boolean,
-      default: true,
-    },
-    color: {
-      type: String,
-      default: "#D98621",
-    },
-    type: {
-      type: String,
-      default: "bubbles",
-    },
-    message: String,
-  },
-};
-</script>
-
-<style scoped>
-.loading {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-.loading-text {
-  position: absolute;
-  left: 50%;
-  top: 45%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-.message {
-  font-size: 15px;
-  margin-top: 5px;
-}
-
-.loader {
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: flex-start;
-  z-index: 100000;
-}
-
-.loader__element {
-  height: 3px;
-  width: 100%;
-  background: #fbf2e8;
-}
-
-.loader__element:before {
-  content: "";
-  display: block;
-  background-color: #fca944;
-  height: 3px;
-  width: 0;
-  animation: getWidth 1s ease-in infinite;
-}
-
-@keyframes getWidth {
-  100% {
-    width: 100%;
-  }
-}
-</style>
+<template>
+  <div>
+    <div v-if="type == 'bubbles'" :class="{ loading: center }">
+      <vue-loading
+        type="bubbles"
+        :color="color"
+        :size="{ width: width + 'px', height: height + 'px' }"
+      ></vue-loading>
+    </div>
+    <div v-if="type == 'line'">
+      <div class="loader">
+        <div class="loader__element"></div>
+      </div>
+    </div>
+    <div :class="{ 'loading-text': center }">
+      <div>
+        <div class="message">{{ message }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Loading",
+  props: {
+    height: {
+      type: Number,
+      default: 70,
+    },
+    width: {
+      type: Number,
+      default: 70,
+    },
+    center: {
+      type: Boolean,
+      default: true,
+    },
+    color: {
+      type: String,
+      default: "#D98621",
+    },
+    type: {
+      type: String,
+      default: "bubbles",
+    },
+    message: String,
+  },
+};
+</script>
+
+<style scoped>
+.loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.loading-text {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.message {
+  font-size: 15px;
+  margin-top: 5px;
+}
+
+.loader {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: flex-start;
+  z-index: 100000;
+}
+
+.loader__element {
+  height: 3px;
+  width: 100%;
+  background: #fbf2e8;
+}
+
+.loader__element:before {
+  content: "";
+  display: block;
+  background-color: #fca944;
+  height: 3px;
+  width: 0;
+  animation: getWidth 1s ease-in infinite;
+}
+
+@keyframes getWidth {
+  100% {
+    width: 100%;
+  }
+}
+</style>

package/@nixweb/nixloc-ui/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/@nixweb/nixloc-ui/src/component/shared/LoadingMoreButton.vue

@@ -1,23 +1,23 @@
-<template>
-  <div>
-    <Button
-      key="loadingMore"
-      eventName="loadingMore"
-      type="warning"
-      title="Carregar mais..."
-      classIcon="fas fa-redo"
-      size="medium"
-    />
-  </div>
-</template>
-<script>
-import Button from "../forms/Button.vue";
-export default {
-  name: "LoadingMoreButton",
-  components: { Button },
-  data() {
-    return {};
-  },
-  methods: {},
-};
-</script>
+<template>
+  <div>
+    <Button
+      key="loadingMore"
+      eventName="loadingMore"
+      type="warning"
+      title="Carregar mais..."
+      classIcon="fas fa-redo"
+      size="medium"
+    />
+  </div>
+</template>
+<script>
+import Button from "../forms/Button.vue";
+export default {
+  name: "LoadingMoreButton",
+  components: { Button },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>