@nixweb/nixloc-ui 0.0.307 → 0.0.308

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.307",
+  "version": "0.0.308",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/layout/Zoom.vue

@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <div class="zoom-controls">
+            <transition name="fade">
+                <span v-if="showZoomLabel">{{ (zoom * 100).toFixed(0) }}%</span>
+            </transition>
+        </div>
+        <div class="zoom-area" :style="zoomStyle">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from "vuex";
+
+export default {
+    name: 'Zoom',
+    data() {
+        return {
+            zoom: 1,
+            zoomStep: 0.1,
+            zoomMin: 0.5,
+            zoomMax: 2.0,
+            showZoomLabel: false,
+            zoomTimeout: null
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+        zoomStyle() {
+            return {
+                transform: `scale(${this.zoom})`,
+                transformOrigin: 'top left',
+                display: 'inline-block',
+
+            }
+        }
+    },
+    methods: {
+        zoomIn() {
+            if (this.zoom < this.zoomMax) {
+                this.zoom += this.zoomStep
+                this.showZoomTemporarily()
+            }
+        },
+        zoomOut() {
+            if (this.zoom > this.zoomMin) {
+                this.zoom -= this.zoomStep
+                this.showZoomTemporarily()
+            }
+        },
+        showZoomTemporarily() {
+            this.showZoomLabel = true
+            clearTimeout(this.zoomTimeout)
+            this.zoomTimeout = setTimeout(() => {
+                this.showZoomLabel = false
+            }, 3000)
+        }
+    },
+    beforeDestroy() {
+        clearTimeout(this.zoomTimeout)
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "zoomIn") this.zoomIn();
+                if (event.name == "zoomOut") this.zoomOut();
+            },
+            deep: true,
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.zoom-controls {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.zoom-controls button {
+    padding: 5px 10px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.zoom-controls span {
+    font-size: 13px;
+}
+
+.zoom-area {
+    background: #fff;
+
+}
+</style>

package/src/component/report/Report.vue

@@ -47,9 +47,15 @@
                 </div>
                 <div v-if="show" class="preview">
                     <div class="toolbar">
+                        <div v-if="loadingFile" class="icon-toolbar">
+                            <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
+                        </div>
                         <div class="icon-toolbar" v-print="'#printMe'">
                             <i class="fas fa-print"></i>
                         </div>
+                        <div @click="generatePDF" class="icon-toolbar">
+                            <i class="fa-solid fa-file-pdf"></i>
+                        </div>
                         <div class="icon-toolbar icon-excel">
                             <ExportExcel :nameFile="name" :header="dataConditional" :data="data" />
                         </div>
@@ -90,6 +96,8 @@ import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
 import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
 
 import print from "vue-print-nb";
+import jsPDF from 'jspdf'
+import html2canvas from 'html2canvas'
 
 import { mapMutations, mapActions, mapGetters } from "vuex";
 
@@ -113,6 +121,7 @@ export default {
             totalPerPage: 50,
             pagination: [],
             cancel: false,
+            loadingFile: false,
         }
     },
     mounted() {
@@ -205,6 +214,26 @@ export default {
                 });
             }
         },
+        async generatePDF() {
+            this.loadingFile = true;
+            const tabela = document.getElementById('printMe')
+            const canvas = await html2canvas(tabela, {
+                scale: 4
+            })
+            const imgData = canvas.toDataURL('image/png')
+
+            const pdf = new jsPDF('l', 'mm', 'a4')
+            const pageWidth = pdf.internal.pageSize.getWidth()
+            const pageHeight = pdf.internal.pageSize.getHeight()
+
+            const imgProps = pdf.getImageProperties(imgData)
+            const pdfWidth = pageWidth
+            const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
+
+            pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
+            pdf.save(this.name + '.pdf')
+            this.loadingFile = false;
+        },
         verifyIfPagination() {
             if (this.pagination.length > 0) {
                 this.currentPage++;
@@ -262,6 +291,18 @@ export default {
     height: 100%;
 }
 
+.loading-icon {
+    color: orange;
+    font-size: 19px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .toolbar {
     height: 40px;
     border-bottom: 1px hsl(0, 0%, 82.7%) solid;

package/src/component/shared/Report.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="preview">
     <div class="toolbar">
+      <div v-if="loadingFile" class="icon-toolbar">
+        <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
+      </div>
       <div class="icon-toolbar" v-print="'#printMeSub'">
         <i class="fas fa-print"></i>
       </div>
+      <div @click="generatePDF" class="icon-toolbar">
+        <i class="fa-solid fa-file-pdf"></i>
+      </div>
       <div class="icon-toolbar icon-excel">
         <ExportExcel :nameFile="name" :header="header" :data="data" />
       </div>
@@ -67,6 +73,9 @@ import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 import HeaderReport from "../shared/HeaderReport.vue";
 import TotalizationReport from "../shared/TotalizationReport.vue";
 import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
+
+import jsPDF from 'jspdf'
+import html2canvas from 'html2canvas'
 import print from "vue-print-nb";
 
 import { mapMutations } from "vuex";
@@ -77,6 +86,11 @@ export default {
   },
   props: ["name", "titleHeader", "header", "data", "totalization", "totalizationCustom", "minHeight"],
   components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
+  data() {
+    return {
+      loadingFile: false,
+    }
+  },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
     convertClass(fieldComparison, classCssBody) {
@@ -96,6 +110,26 @@ export default {
     sendEvent(eventName, data) {
       if (eventName) this.addEvent({ name: eventName, data: data });
     },
+    async generatePDF() {
+      this.loadingFile = true;
+      const tabela = document.getElementById('printMeSub')
+      const canvas = await html2canvas(tabela, {
+        scale: 4
+      })
+      const imgData = canvas.toDataURL('image/png')
+
+      const pdf = new jsPDF('l', 'mm', 'a4')
+      const pageWidth = pdf.internal.pageSize.getWidth()
+      const pageHeight = pdf.internal.pageSize.getHeight()
+
+      const imgProps = pdf.getImageProperties(imgData)
+      const pdfWidth = pageWidth
+      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
+
+      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
+      pdf.save(this.name + '.pdf')
+      this.loadingFile = false;
+    },
   },
 };
 </script>
@@ -150,6 +184,18 @@ table tbody tr td {
   border: 1px solid #e4e6ec;
 }
 
+.loading-icon {
+  color: orange;
+  font-size: 19px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .toolbar {
   height: 40px;
   border-bottom: 1px hsl(0, 0%, 82.7%) solid;