@nixweb/nixloc-ui 1.0.0 → 1.2.0

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

@@ -0,0 +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" color="white" backGroundColor="#6B7280" 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: 600;
+    color: #111827;
+}
+
+.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

@@ -0,0 +1,55 @@
+<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">
+            <Button key="finish" title="Fechar" classIcon="fa-solid fa-xmark" color="white" backGroundColor="#6D757B" size="medium"
+                :clicked="finished" />
+        </div>
+    </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+export default {
+    name: "ActionFooter",
+    components: { Button },
+    props: {
+        isFinished: { type: Boolean, default: false },
+        processing: { type: Boolean, default: false },
+        selected: { type: Array, default: () => [] },
+    },
+    emits: ["ok", "cancel", "finish"],
+    methods: {
+        ok() {
+            this.$emit("ok");
+        },
+        hideModal() {
+            this.$emit("cancel");
+        },
+        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,121 @@
+<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,159 @@
+<template>
+    <div class="actions-options">
+        <div class="ao-body">
+            <ScrollBar :minHeight="minHeight" :maxHeight="maxHeight" class="ao-scroll">
+                <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-footer-right {
+    display: flex;
+    gap: 8px;
+}
+
+.ao-helper {
+    color: #374151;
+}
+</style>