@nixweb/nixloc-ui 1.16.0 → 1.17.0

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

@@ -0,0 +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"
+    >
+      <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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +1,209 @@
+<template>
+  <div class="actions-options">
+    <div class="ao-body">
+      <ScrollBar
+        :minHeight="minHeight"
+        :maxHeight="maxHeight"
+        class="ao-scroll"
+      >
+        <span class="ao-description title">
+          {{ actionSelected.description }}
+        </span>
+
+        <div v-if="actionSelected.type == 'component'">
+          <component
+            :is="actionSelected.component"
+            v-model="optionSelected"
+          ></component>
+        </div>
+
+        <div
+          v-if="actionSelected.type == 'options'"
+          class="ao-radios"
+          role="group"
+          :aria-labelledby="'ao-title'"
+        >
+          <RadioGroup
+            :field="fieldName"
+            :options="filteredOptions"
+            v-model="optionSelected"
+          />
+        </div>
+
+        <div
+          v-else
+          class="ao-empty"
+          aria-live="polite"
+        >
+          <i class="fas fa-inbox"></i>
+          <span>Nenhuma opção encontrada.</span>
+        </div>
+      </ScrollBar>
+    </div>
+
+    <footer class="ao-footer">
+      <div class="ao-footer-left">
+        <span
+          v-if="optionSelected"
+          class="ao-helper title"
+        >
+          Selecionado: <strong>{{ labelSelected }}</strong>
+        </span>
+      </div>
+      <div class="ao-footer-right">
+        <Button
+          key="select"
+          :disabled="!isValid"
+          :title="btnNextLabel"
+          type="primary"
+          size="medium"
+          :clicked="next"
+        />
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ActionsOptions",
+  components: { Button, RadioGroup, ScrollBar },
+  props: {
+    actionSelected: { type: Object, required: true },
+    minHeight: { type: Number, default: 120 },
+    maxHeight: { type: Number, default: 260 },
+    btnNextLabel: { type: String, default: "Avançar" },
+    fieldName: { type: String, default: "group" },
+    searchThreshold: { type: Number, default: 10 },
+    value: String,
+  },
+  data() {
+    return {
+      optionSelected: null,
+      query: "",
+    };
+  },
+  computed: {
+    optionsRaw() {
+      const list =
+        this.actionSelected && Array.isArray(this.actionSelected.options)
+          ? this.actionSelected.options
+          : [];
+      return list.map((o) => ({ text: o.text, value: o.value }));
+    },
+    filteredOptions() {
+      const q = (this.query || "").toLowerCase();
+      if (!q) return this.optionsRaw;
+      return this.optionsRaw.filter(
+        (opt) =>
+          String(opt.text).toLowerCase().includes(q) ||
+          String(opt.value).toLowerCase().includes(q)
+      );
+    },
+    isValid() {
+      return (
+        this.optionSelected !== null &&
+        this.optionSelected !== undefined &&
+        this.optionSelected !== ""
+      );
+    },
+    labelSelected() {
+      const found = this.optionsRaw.find(
+        (o) => o.value === this.optionSelected
+      );
+      return found ? found.text : "";
+    },
+  },
+  watch: {
+    optionSelected: {
+      handler(value) {
+        this.$emit("input", value);
+      },
+      deep: true,
+    },
+    optionsRaw: {
+      immediate: true,
+      handler(list) {
+        if (Array.isArray(list) && list.length === 1) {
+          this.optionSelected = list[0].value;
+        }
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["openModal", "hideModal"]),
+    next() {
+      if (!this.isValid) return;
+      this.openModal("confirm");
+    },
+    enterToNext() {
+      if (this.isValid) this.next();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.actions-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 640px;
+}
+
+.ao-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ao-scroll {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 8px;
+  background: #fff;
+}
+
+.ao-radios {
+  display: grid;
+  gap: 10px;
+}
+
+.ao-empty {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #6b7280;
+  padding: 8px;
+}
+
+.ao-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 8px;
+  position: sticky;
+  bottom: 0;
+}
+
+.ao-description {
+  color: #475569;
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.ao-footer-right {
+  display: flex;
+  gap: 8px;
+}
+
+.ao-helper {
+  color: #374151;
+}
+</style>