@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/shared/actions/ActionErrorContent.vue

@@ -1,103 +1,103 @@
-<template>
-    <div>
-        <div class="error-details-header">
-            <i class="fas fa-triangle-exclamation"></i>
-            <div>
-                <div class="error-details-title title">O que deu errado?</div>
-                <!--  <div class="error-details-sub">ID: {{ id }}</div> -->
-            </div>
-        </div>
-
-        <ScrollBar :minHeight="190" :maxHeight="190">
-            <ul class="error-list">
-                <li v-for="(msg, i) in safeMessages" :key="i" class="error-item">
-                    <i class="fas fa-info-circle"></i>
-                    <span>{{ msg }}</span>
-                </li>
-
-                <li v-if="safeMessages.length === 0" class="error-item muted">
-                    <i class="fas fa-info-circle"></i>
-                    <span>Algo deu errado, mas não recebemos detalhes do servidor.</span>
-                </li>
-            </ul>
-        </ScrollBar>
-
-        <div class="text-center">
-            <Button key="closeErrors" title="Fechar" classIcon="fa-solid fa-circle-xmark" color="white"
-                backGroundColor="#6D757B" size="small" :clicked="() => $emit('close')" />
-        </div>
-    </div>
-</template>
-
-<script>
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-
-export default {
-    name: "ActionErrorContent",
-    components: { ScrollBar, Button },
-    props: {
-        id: { type: [String, Number], required: true },
-        index: { type: Number, default: -1 },
-        messages: { type: Array, default: () => [] },
-    },
-    computed: {
-        safeMessages() {
-            return (this.messages || []).filter(Boolean);
-        },
-    },
-};
-</script>
-
-<style scoped>
-.error-details-header {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    margin-bottom: 12px;
-    color: #dc2626;
-}
-
-.error-details-header i {
-    font-size: 18px;
-}
-
-.error-details-title {
-    font-weight: 500;
-    color: #6b7280;
-}
-
-.error-details-sub {
-    font-size: 12px;
-    color: #6b7280;
-}
-
-.error-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.error-item {
-    display: flex;
-    gap: 8px;
-    align-items: flex-start;
-    padding: 8px 10px;
-    background: #fff7f7;
-    border: 1px solid #fde2e2;
-    border-radius: 8px;
-    margin-bottom: 8px;
-    font-size: 13px;
-    color: #dc2626;
-}
-
-.error-item i {
-    margin-top: 2px;
-}
-
-.error-item.muted {
-    background: #f9fafb;
-    border-color: #e5e7eb;
-    color: #6b7280;
-}
-</style>
+<template>
+    <div>
+        <div class="error-details-header">
+            <i class="fas fa-triangle-exclamation"></i>
+            <div>
+                <div class="error-details-title title">O que deu errado?</div>
+                <!--  <div class="error-details-sub">ID: {{ id }}</div> -->
+            </div>
+        </div>
+
+        <ScrollBar :minHeight="190" :maxHeight="190">
+            <ul class="error-list">
+                <li v-for="(msg, i) in safeMessages" :key="i" class="error-item">
+                    <i class="fas fa-info-circle"></i>
+                    <span>{{ msg }}</span>
+                </li>
+
+                <li v-if="safeMessages.length === 0" class="error-item muted">
+                    <i class="fas fa-info-circle"></i>
+                    <span>Algo deu errado, mas não recebemos detalhes do servidor.</span>
+                </li>
+            </ul>
+        </ScrollBar>
+
+        <div class="text-center">
+            <Button key="closeErrors" title="Fechar" classIcon="fa-solid fa-circle-xmark" color="white"
+                backGroundColor="#6D757B" size="small" :clicked="() => $emit('close')" />
+        </div>
+    </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+export default {
+    name: "ActionErrorContent",
+    components: { ScrollBar, Button },
+    props: {
+        id: { type: [String, Number], required: true },
+        index: { type: Number, default: -1 },
+        messages: { type: Array, default: () => [] },
+    },
+    computed: {
+        safeMessages() {
+            return (this.messages || []).filter(Boolean);
+        },
+    },
+};
+</script>
+
+<style scoped>
+.error-details-header {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 12px;
+    color: #dc2626;
+}
+
+.error-details-header i {
+    font-size: 18px;
+}
+
+.error-details-title {
+    font-weight: 500;
+    color: #6b7280;
+}
+
+.error-details-sub {
+    font-size: 12px;
+    color: #6b7280;
+}
+
+.error-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.error-item {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    padding: 8px 10px;
+    background: #fff7f7;
+    border: 1px solid #fde2e2;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    font-size: 13px;
+    color: #dc2626;
+}
+
+.error-item i {
+    margin-top: 2px;
+}
+
+.error-item.muted {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #6b7280;
+}
+</style>

package/src/component/shared/actions/ActionFooter.vue

@@ -1,99 +1,93 @@
-<template>
-  <div>
-    <div
-      v-if="!isFinished"
-      class="actions"
-    >
-      <div class="side-by-side">
-        <Button
-          key="cancel"
-          title="Cancelar"
-          type="danger"
-          size="small"
-          :disabled="processing || selected.length === 0"
-          :clicked="hideModal"
-        />
-        <Button
-          key="ok"
-          title="Processar"
-          color="white"
-          classIcon="fa-solid fa-play"
-          backGroundColor="#007BFF"
-          size="large"
-          :disabled="processing || selected.length === 0"
-          :clicked="ok"
-        />
-      </div>
-    </div>
-
-    <div
-      v-else
-      class="text-center"
-    >
-      <div class="action-footer-timer">
-        <Timer
-          v-if="errorCount === 0"
-          :title="'Fechando em'"
-          :initialTimer="2"
-          :endTime="autoFinished"
-        />
-      </div>
-      <Button
-        key="finish"
-        title="Fechar"
-        classIcon="fa-solid fa-circle-xmark"
-        color="white"
-        backGroundColor="#6D757B"
-        size="medium"
-        :clicked="finished"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import Timer from "@nixweb/nixloc-ui/src/component/shared/Timer";
-
-export default {
-  name: "ActionFooter",
-  components: { Button, Timer },
-  props: {
-    isFinished: { type: Boolean, default: false },
-    processing: { type: Boolean, default: false },
-    selected: { type: Array, default: () => [] },
-    errorCount: { type: Number, default: 0 },
-  },
-  emits: ["ok", "cancel", "finish"],
-  methods: {
-    ok() {
-      this.$emit("ok");
-    },
-    hideModal() {
-      this.$emit("cancel");
-    },
-    autoFinished() {
-      this.finished();
-    },
-    finished() {
-      this.$emit("finish");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.actions {
-  text-align: center;
-}
-
-.action-footer-timer {
-  margin-bottom: 16px;
-}
-
-.side-by-side {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-</style>
+<template>
+  <div>
+    <div
+      v-if="!isFinished"
+      class="actions"
+    >
+      <div class="side-by-side">
+        <Button
+          key="cancel"
+          title="Cancelar"
+          type="danger"
+          size="small"
+          :disabled="processing || selected.length === 0"
+          :clicked="hideModal"
+        />
+        <Button
+          key="ok"
+          title="Processar"
+          color="white"
+          classIcon="fa-solid fa-play"
+          backGroundColor="#007BFF"
+          size="large"
+          :disabled="processing || selected.length === 0"
+          :clicked="ok"
+        />
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="text-center"
+    >
+      <Timer
+        v-if="errorCount === 0"
+        :title="'Fechando em'"
+        :initialTimer="2"
+        :endTime="autoFinished"
+      />
+      <Button
+        key="finish"
+        title="Fechar"
+        classIcon="fa-solid fa-circle-xmark"
+        color="white"
+        backGroundColor="#6D757B"
+        size="medium"
+        :clicked="finished"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Timer from "@nixweb/nixloc-ui/src/component/shared/Timer";
+
+export default {
+  name: "ActionFooter",
+  components: { Button, Timer },
+  props: {
+    isFinished: { type: Boolean, default: false },
+    processing: { type: Boolean, default: false },
+    selected: { type: Array, default: () => [] },
+    errorCount: { type: Number, default: 0 },
+  },
+  emits: ["ok", "cancel", "finish"],
+  methods: {
+    ok() {
+      this.$emit("ok");
+    },
+    hideModal() {
+      this.$emit("cancel");
+    },
+    autoFinished() {
+      this.finished();
+    },
+    finished() {
+      this.$emit("finish");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.actions {
+  text-align: center;
+}
+
+.side-by-side {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>

package/src/component/shared/actions/ActionHeader.vue

@@ -1,110 +1,110 @@
-<template>
-    <div>
-        <div class="action-banner">
-            <span class="action-accent"></span>
-            <span class="action-label">Ação</span>
-            <strong class="action-value title">{{ description }}</strong>
-        </div>
-
-        <div class="status-header">
-            <div class="status-chip">
-                <i class="fas fa-list"></i>
-                <span>Total {{ total }}</span>
-            </div>
-            <div class="status-chip success">
-                <i class="fas fa-check-circle"></i>
-                <span>Concluídos {{ done }}</span>
-            </div>
-            <div class="status-chip error-chip">
-                <i class="fas fa-times-circle"></i>
-                <span>Falhas {{ errors }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "ActionModalHeader",
-    props: {
-        description: { type: String, default: "" },
-        total: { type: Number, default: 0 },
-        done: { type: Number, default: 0 },
-        errors: { type: Number, default: 0 },
-    },
-};
-</script>
-
-<style scoped>
-.status-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    padding: 8px 0;
-}
-
-.status-chip {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    background: #f3f4f6;
-    border: 1px solid #e5e7eb;
-    border-radius: 20px;
-    padding: 6px 10px;
-    font-size: 13px;
-    color: #374151;
-}
-
-.status-chip.success {
-    background: #ecfdf5;
-    border-color: #a7f3d0;
-    color: #065f46;
-}
-
-.status-chip.success i {
-    color: #16a34a;
-}
-
-.status-chip.error-chip {
-    background: #fef2f2;
-    border-color: #fecaca;
-    color: #b91c1c;
-}
-
-.status-chip.error-chip i {
-    color: #dc2626;
-}
-
-.action-banner {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    margin-bottom: 12px;
-    background: #f8fafc;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
-}
-
-.action-accent {
-    width: 4px;
-    align-self: stretch;
-    background: #3b82f6;
-    border-radius: 8px;
-}
-
-.action-label {
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: #64748b;
-}
-
-.action-value {
-    font-size: 14px;
-    color: #0f172a;
-    font-weight: 700;
-}
-</style>
+<template>
+    <div>
+        <div class="action-banner">
+            <span class="action-accent"></span>
+            <span class="action-label">Ação</span>
+            <strong class="action-value title">{{ description }}</strong>
+        </div>
+
+        <div class="status-header">
+            <div class="status-chip">
+                <i class="fas fa-list"></i>
+                <span>Total {{ total }}</span>
+            </div>
+            <div class="status-chip success">
+                <i class="fas fa-check-circle"></i>
+                <span>Concluídos {{ done }}</span>
+            </div>
+            <div class="status-chip error-chip">
+                <i class="fas fa-times-circle"></i>
+                <span>Falhas {{ errors }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ActionModalHeader",
+    props: {
+        description: { type: String, default: "" },
+        total: { type: Number, default: 0 },
+        done: { type: Number, default: 0 },
+        errors: { type: Number, default: 0 },
+    },
+};
+</script>
+
+<style scoped>
+.status-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+    padding: 8px 0;
+}
+
+.status-chip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: #f3f4f6;
+    border: 1px solid #e5e7eb;
+    border-radius: 20px;
+    padding: 6px 10px;
+    font-size: 13px;
+    color: #374151;
+}
+
+.status-chip.success {
+    background: #ecfdf5;
+    border-color: #a7f3d0;
+    color: #065f46;
+}
+
+.status-chip.success i {
+    color: #16a34a;
+}
+
+.status-chip.error-chip {
+    background: #fef2f2;
+    border-color: #fecaca;
+    color: #b91c1c;
+}
+
+.status-chip.error-chip i {
+    color: #dc2626;
+}
+
+.action-banner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    margin-bottom: 12px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+}
+
+.action-accent {
+    width: 4px;
+    align-self: stretch;
+    background: #3b82f6;
+    border-radius: 8px;
+}
+
+.action-label {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: #64748b;
+}
+
+.action-value {
+    font-size: 14px;
+    color: #0f172a;
+    font-weight: 700;
+}
+</style>