@nixweb/nixloc-ui 1.19.0 → 1.20.0

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

@@ -1,143 +1,143 @@
-<template>
-  <ScrollBar
-    :minHeight="300"
-    :maxHeight="300"
-  >
-    <div
-      v-for="(id, index) in selected"
-      :key="id"
-      class="item-row"
-    >
-      <div class="item-left title">Item {{ index + 1 }}</div>
-      <div class="item-right">
-        <span
-          v-if="status[id] === 'waiting'"
-          class="waiting"
-        >
-          <i class="fas fa-hourglass-half"></i>
-        </span>
-
-        <span
-          v-else-if="status[id] === 'running'"
-          class="loading"
-        >
-          <span class="spinner"></span> Processando...
-        </span>
-
-        <span
-          v-else-if="status[id] === 'done'"
-          class="done"
-        >
-          <i class="fas fa-check-circle done-icon"></i> Sucesso!
-        </span>
-
-        <span
-          v-else-if="status[id] === 'error'"
-          class="error"
-        >
-          <i class="fas fa-times-circle"></i> Falhou!
-          <button
-            class="error-link"
-            @click="$emit('show-error', { id, index })"
-          ><span class="title">Ver
-              detalhes</span></button>
-        </span>
-      </div>
-    </div>
-  </ScrollBar>
-</template>
-
-<script>
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-
-export default {
-  name: "ActionItemList",
-  components: { ScrollBar },
-  props: { selected: Array, status: Object, errorsMap: Object },
-};
-</script>
-
-<style scoped>
-.item-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  background: #fafafa;
-  margin: 6px 0;
-}
-
-.item-left {
-  font-weight: 500;
-  color: #334155;
-}
-
-.item-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.waiting {
-  color: #6b7280;
-}
-
-.loading {
-  color: #007bff;
-}
-
-.done {
-  color: #16a34a;
-  font-weight: 500;
-}
-
-.done-icon {
-  color: #22c55e;
-  font-size: 14px;
-}
-
-.error {
-  color: #dc2626;
-  font-weight: 500;
-}
-
-.error-link {
-  margin-left: 10px;
-  background: transparent;
-  border: none;
-  padding: 0;
-  font-size: 13px;
-  text-decoration: underline;
-  cursor: pointer;
-  color: #1f2937;
-}
-
-.error-link:hover {
-  opacity: 0.9;
-}
-
-.spinner {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid #007bff;
-  border-top: 2px solid transparent;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  vertical-align: middle;
-  margin-right: 6px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
+<template>
+  <ScrollBar
+    :minHeight="300"
+    :maxHeight="300"
+  >
+    <div
+      v-for="(id, index) in selected"
+      :key="id"
+      class="item-row"
+    >
+      <div class="item-left title">Item {{ index + 1 }}</div>
+      <div class="item-right">
+        <span
+          v-if="status[id] === 'waiting'"
+          class="waiting"
+        >
+          <i class="fas fa-hourglass-half"></i>
+        </span>
+
+        <span
+          v-else-if="status[id] === 'running'"
+          class="loading"
+        >
+          <span class="spinner"></span> Processando...
+        </span>
+
+        <span
+          v-else-if="status[id] === 'done'"
+          class="done"
+        >
+          <i class="fas fa-check-circle done-icon"></i> Sucesso!
+        </span>
+
+        <span
+          v-else-if="status[id] === 'error'"
+          class="error"
+        >
+          <i class="fas fa-times-circle"></i> Falhou!
+          <button
+            class="error-link"
+            @click="$emit('show-error', { id, index })"
+          ><span class="title">Ver
+              detalhes</span></button>
+        </span>
+      </div>
+    </div>
+  </ScrollBar>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+export default {
+  name: "ActionItemList",
+  components: { ScrollBar },
+  props: { selected: Array, status: Object, errorsMap: Object },
+};
+</script>
+
+<style scoped>
+.item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background: #fafafa;
+  margin: 6px 0;
+}
+
+.item-left {
+  font-weight: 500;
+  color: #334155;
+}
+
+.item-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.waiting {
+  color: #6b7280;
+}
+
+.loading {
+  color: #007bff;
+}
+
+.done {
+  color: #16a34a;
+  font-weight: 500;
+}
+
+.done-icon {
+  color: #22c55e;
+  font-size: 14px;
+}
+
+.error {
+  color: #dc2626;
+  font-weight: 500;
+}
+
+.error-link {
+  margin-left: 10px;
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: 13px;
+  text-decoration: underline;
+  cursor: pointer;
+  color: #1f2937;
+}
+
+.error-link:hover {
+  opacity: 0.9;
+}
+
+.spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #007bff;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>