@nixweb/nixloc-ui 1.1.0 → 1.2.0

package/src/component/shared/TableItem.vue

@@ -18,10 +18,11 @@
         {{ row[obj.field] }}
       </div>
     </div>
-    <div v-if="obj.type === 'html'" :style="obj.styleBody"
+    <div v-if="obj.type === 'html' && row[obj.field]" :style="obj.styleBody"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
       <div v-if="row[obj.field]" v-html="row[obj.field]"></div>
       <div v-else v-html="obj.html"></div>
+      <div v-html="row[obj.fieldSecond]"></div>
     </div>
     <div v-if="obj.type === 'select'" :style="obj.styleBody"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">

package/src/component/shared/TableTotalPerPage.vue

@@ -1,78 +1,114 @@
 <template>
-    <div class="filter-horizontal">
-        <div class="side-by-side div-title">
-            <span class="title-page"> Mostrar</span>
-        </div>
-        <div class="side-by-side div-select">
-            <SelectStatic fieldTarget="totalPerPage" :initialValue="initialValue" :data="[
-                { content: '10', id: 10 },
-                { content: '20', id: 20 },
-                { content: '50', id: 50 },
-                { content: '100', id: 100 },
-            ]" v-model="totalPerPage" />
-        </div>
-
+    <div v-if="showTotalPerPage && totalRecords > 0" class="pagination-wrapper">
+        <ul class="pagination-list">
+            <li v-for="opt in filteredOptions" :key="opt">
+                <button class="pagination-pill" :class="{ 'is-selected': value === opt }" type="button"
+                    @click="select(opt)">
+                    {{ opt }}
+                </button>
+            </li>
+        </ul>
     </div>
 </template>
 
 <script>
-import SelectStatic from "../forms/SelectStatic.vue";
-
-import { mapMutations, mapState } from "vuex";
+import { mapState, mapMutations } from "vuex";
 
 export default {
-    name: "TableTotalPerPage",
-    components: { SelectStatic },
+    name: "PaginationPerPage",
     props: {
-        showTotalPerPage: {
-            type: Boolean,
-            default: true,
-        },
+        totalRecords: { type: Number, default: 0 },
+        showTotalPerPage: { type: Boolean, default: true },
     },
     data() {
         return {
-            initialValue: {}
-        }
-    },
-    created() {
-        this.initialValue = { content: this.paginations.totalPerPage, id: this.paginations.totalPerPage }
+            value: 10,
+            options: [10, 20, 50, 100],
+        };
     },
     computed: {
         ...mapState("generic", ["paginations"]),
-        totalPerPage: {
-            get() {
-                return this.$store.state.generic.paginations.totalPerPage;
-            },
-            set(value) {
-                this.updateTotalPerPage(value);
-            },
+        filteredOptions() {
+            const total = this.totalRecords;
+
+            if (total <= 10) return [10];
+            if (total <= 20) return [10, 20];
+            if (total <= 50) return [10, 20, 50];
+            if (total <= 100) return [10, 20, 50, 100];
+            return this.options;
         },
     },
+    created() {
+        const fromStore = Number(this.paginations?.totalPerPage);
+        if (Number.isFinite(fromStore)) {
+            this.value = fromStore;
+        }
+        this.updateTotalPerPage({ content: String(this.value), id: this.value });
+    },
     methods: {
-        ...mapMutations("generic", [
-            "updateTotalPerPage",
-        ]),
-    }
+        ...mapMutations("generic", ["executedSearch", "updateTotalPerPage"]),
+        select(opt) {
+            if (this.value === opt) return;
+            this.value = opt;
+            this.updateTotalPerPage({ content: String(opt), id: opt });
+            this.executedSearch();
+        },
+    },
+    watch: {
+        totalRecords() {
+            if (this.totalRecords <= 0) return;
+            if (!this.filteredOptions.includes(this.value)) {
+                const next = this.filteredOptions[this.filteredOptions.length - 1];
+                this.value = next;
+                this.updateTotalPerPage({ content: String(next), id: next });
+            }
+        },
+    },
 };
 </script>
 
 <style scoped>
-.filter-horizontal {
+.pagination-wrapper {
     display: flex;
+    align-items: center;
     justify-content: flex-end;
-    margin-bottom: -30px;
+    gap: 8px;
+    width: 100%;
+    font-family: inherit;
+}
+
+.pagination-list {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
-.div-title {
-    margin-right: 20px;
-    margin-top: 35px;
+.pagination-pill {
+    width: 31px;
+    height: 31px;
+    border-radius: 50%;
+    background: #f5f5f5;
+    border: none;
+    color: #444;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s, transform 0.1s;
 }
 
-.div-select {
-    width: 100px;
+.pagination-pill:hover {
+    background: #e0e0e0;
 }
 
-.title-page {
-    font-size: 13px;
+.pagination-pill.is-selected {
+    background: #D98621;
+    color: #fff;
+}
+
+.pagination-pill:active {
+    transform: scale(0.95);
 }
-</style>
+</style>

package/src/component/shared/TableTotalization.vue

@@ -1,12 +1,9 @@
 <template>
   <div>
-    <div
-      class="badge-side-by-side text-center"
-      v-for="item in totalization"
-      :key="item.title"
-    >
+    <div class="badge-side-by-side text-center" v-for="item in totalization" :key="item.title">
       <div class="badge-totalization" :class="item.classCss">
-        <span>{{ item.title }} </span>
+        <i :class="item.classIcon"></i>
+        <span class="title-totalization"> {{ item.title }} </span>
         <span>{{ item.value | currency }}</span>
       </div>
     </div>
@@ -25,16 +22,19 @@ export default {
 <style scoped>
 .badge-side-by-side {
   display: inline-block;
-  margin-right: 3px;
+  margin-right: 8px;
   margin-bottom: 10px;
 }
 
 .badge-totalization {
-  border: 1px solid #dbdee0;
-  padding-left: 5px;
-  padding-right: 5px;
+  border: 1px solid #e6e7eb;
+  padding: 3px 8px 3px 8px;
   border-radius: 30px;
-  font-size: 14px;
+  font-size: 13px;
+}
+
+.title-totalization{
+  margin-left: 1px;
 }
 
 .revenue {

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

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <div class="side-by-side" v-for="item in actions" :key="item.type">
+
+            <Button v-if="item.type === 'delete'" key="remove" classIcon="fa-solid fa-trash" :title="item.title"
+                type="danger" size="small" :params="item" :clicked="() => $emit('confirm', item)" />
+
+            <Button v-if="item.type === 'options'" key="options" :title="item.title" :classIcon="item.classIcon"
+                type="primary" size="small" :params="item" :clicked="() => $emit('confirm', item)" />
+
+        </div>
+    </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+export default {
+    name: "ActionButtons",
+    components: { Button },
+    props: {
+        actions: { type: Array, default: () => [] },
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

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>