@nixweb/nixloc-ui 0.0.292 → 0.0.294

package/src/component/shared/DocumentEditor.vue

@@ -5,12 +5,7 @@
         <div class="document-editor__toolbar"></div>
         <div class="document-editor__editable-container">
           <div id="template-dev">
-            <ckeditor
-              :editor="editor"
-              v-model="documentHtml"
-              @ready="onReady"
-              @focus="changed"
-            ></ckeditor>
+            <ckeditor :editor="editor" v-model="computedDocumentHtml" @ready="onReady" @focus="changed"></ckeditor>
           </div>
         </div>
       </div>
@@ -21,11 +16,11 @@
 
 <script>
 import CKEditor from "ckeditor5-custom-build/build/ckeditor";
-
 import { mapState, mapMutations } from "vuex";
 
 export default {
   name: "DocumentEditor",
+  props: ["editMode"],
   components: {
     CKEditor,
   },
@@ -35,22 +30,29 @@ export default {
     };
   },
   computed: {
-    ...mapState("generic", ["documentHtml"]),
-    documentHtml: {
+    ...mapState("generic", ["documentHtml", "documentHtmlFinal"]),
+    computedDocumentHtml: {
       get() {
-        return this.$store.state.generic.documentHtml;
+        if (this.editMode) {
+          return this.documentHtmlFinal
+        } else {
+          return this.documentHtml;
+        }
       },
-      set(value) {
-        this.updateDocumentHtml(value);
+      set(newValue) {
+        console.log(newValue);
+        if (this.editMode) {
+          this.updateDocumentHtmlFinal(newValue);
+        } else {
+          this.updateDocumentHtml(newValue);
+        }
       },
     },
   },
   methods: {
-    ...mapMutations("generic", ["updateDocumentHtml", "addEvent"]),
+    ...mapMutations("generic", ["updateDocumentHtmlFinal", "updateDocumentHtml", "addEvent"]),
     onReady(editor) {
-      const toolbarContainer = document.querySelector(
-        ".document-editor__toolbar"
-      );
+      const toolbarContainer = document.querySelector(".document-editor__toolbar");
       toolbarContainer.appendChild(editor.ui.view.toolbar.element);
     },
     changed() {
@@ -61,6 +63,7 @@ export default {
 </script>
 
 <style scoped>
+/* Estilos do seu componente */
 .document-editor {
   border-radius: var(--ck-border-radius);
   max-height: 700px;
@@ -74,10 +77,6 @@ export default {
   min-width: 1100px;
 }
 
-.document-editor__toolbar .ck-toolbar {
-  border-radius: 0;
-}
-
 .document-editor__editable-container {
   padding: 10px;
   border: 1px solid #e4e6ec;
@@ -95,56 +94,7 @@ export default {
   margin: 0 auto;
 }
 
-.document-editor .ck-content,
-.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
+.document-editor .ck-content {
   font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-
-.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
-  line-height: calc(
-    1.7 * var(--ck-line-height-base) * var(--ck-font-size-base)
-  );
-  min-width: 6em;
-}
-
-.document-editor
-  .ck-heading-dropdown
-  .ck-list
-  .ck-button:not(.ck-heading_paragraph)
-  .ck-button__label {
-  transform: scale(0.8);
-  transform-origin: left;
-}
-
-.document-editor .ck-content h2,
-.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
-  font-size: 2.18em;
-  font-weight: normal;
-}
-
-.document-editor .ck-content h2 {
-  line-height: 1.37em;
-  padding-top: 0.342em;
-  margin-bottom: 0.142em;
-}
-
-.document-editor .ck-content h3,
-.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
-  font-size: 1.75em;
-  font-weight: normal;
-  color: hsl(203, 100%, 50%);
-}
-
-.document-editor
-  .ck-heading-dropdown
-  .ck-heading_heading2.ck-on
-  .ck-button__label {
-  color: var(--ck-color-list-button-on-text);
-}
-
-.document-editor .ck-content h3 {
-  line-height: 1.86em;
-  padding-top: 0.171em;
-  margin-bottom: 0.357em;
-}
 </style>

package/src/component/shared/DocumentPreview.vue

@@ -1,11 +1,15 @@
 <template>
-  <v-runtime-template :template="`<div>${template}</div>`" />
+  <div>
+    <div ref='preview'>
+      <v-runtime-template :template="`<div>${template}</div>`" />
+    </div>
+  </div>
 </template>
 
 <script>
 import VRuntimeTemplate from "v-runtime-template";
 
-import { mapGetters } from "vuex";
+import { mapGetters, mapMutations } from "vuex";
 
 export default {
   name: "DocumentPreview",
@@ -17,6 +21,7 @@ export default {
     d: Object,
   },
   methods: {
+    ...mapMutations("generic", ["updateDocumentHtmlFinal"]),
     periodo(grupo, campo) {
       var item = this.d.itensLocacao.find(item => item.grupo == grupo);
       const campoMap = {
@@ -48,14 +53,29 @@ export default {
     convertToNumber(value) {
       return parseFloat(value.replace("R$", "").replace(",", "."));
     },
+    getPreviewContent() {
+      const previewDiv = this.$refs.preview;
+      this.updateDocumentHtmlFinal(previewDiv.innerHTML);
+    }
   },
   computed: {
-    ...mapGetters("generic", ["groupBy"]),
+    ...mapGetters("generic", ["groupBy", "event"]),
     produtoAgrupado() {
       var group = this.groupBy({ array: this.d.itensLocacao, key: "grupo" });
       return group;
     },
-
   },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "updateDocumentHtml") {
+          this.getPreviewContent();
+        }
+      },
+      deep: true,
+    },
+  },
+
+
 };
 </script>

package/src/component/shared/LoadingCard.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="loading-skeleton" :style="'height:' + height + 'px'">
+        <div v-for="index in totalLine" :key="index" class="line"
+            :style="{ height: getRandomHeight() + 'px', width: '100%' }"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "LoadingCard",
+    props: {
+        totalLine: {
+            type: Number,
+            default: 3,
+            validator(value) {
+                return value >= 1 && value <= 10;
+            }
+        },
+        height: {
+            type: Number,
+            default: 200,
+            validator(value) {
+                return value > 0;
+            }
+        }
+    },
+    methods: {
+        getRandomHeight() {
+            const minHeight = 10; 
+            const maxHeight = 30;
+            return Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
+        }
+    }
+};
+</script>
+
+<style scoped>
+.loading-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 400px;
+    margin: 0 auto;
+    overflow: hidden;
+}
+
+.line {
+    width: 100%;
+    background: linear-gradient(90deg, #f0f0f0 25%, #d8d8d8 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite linear;
+    border-radius: 4px;
+    opacity: 0.4;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+
+    100% {
+        background-position: 200% 0;
+    }
+}
+</style>

package/src/component/shared/ProgressBar.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <progress-bar :size="size" :text="text" :val="value" :max="max"></progress-bar>
+    <progress-bar :bg-color="bColor" :bar-color="bgColor" :size="size" :text="text" :val="value" :max="max"
+      bar-border-radius="10"></progress-bar>
   </div>
 </template>
 <script>
@@ -13,6 +14,8 @@ export default {
     ProgressBar,
   },
   props: {
+    bgColor: String,
+    bColor: String,
     text: String,
     value: Number,
     max: Number,

package/src/component/shared/Table.vue

@@ -1,10 +1,13 @@
 <template>
   <div>
-    <table class="table table-responsive-xs">
+    <div class="icon-print" v-print="'#printMe'">
+      <i title="Imprimir" class="fas fa-print"></i>
+    </div>
+    <table id="printMe" class="table table-responsive-xs">
       <thead>
         <tr>
           <th class="td-checkbox" v-if="showChecks">
-            <div>
+            <div class="hide-print">
               <b-form-checkbox v-model="selectAll" @change="select" />
             </div>
           </th>
@@ -19,7 +22,7 @@
       <draggable v-model="data" tag="tbody" @change="checkMove" :options="{ disabled: !dragAndDrop }">
         <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
           <td class="td-checkbox" v-if="showChecks">
-            <div :class="{ 'center-vertical': row.photo != null }">
+            <div class="hide-print" :class="{ 'center-vertical': row.photo != null }">
               <b-form-checkbox v-model="selected" :value="row.id" />
             </div>
           </td>
@@ -41,6 +44,7 @@
 
 <script>
 import TableItem from "@nixweb/nixloc-ui/src/component/shared/TableItem.vue";
+import print from "vue-print-nb";
 
 import draggable from "vuedraggable";
 
@@ -48,6 +52,9 @@ import { mapState, mapMutations, mapActions } from "vuex";
 
 export default {
   components: { draggable, TableItem },
+  directives: {
+    print,
+  },
   props: {
     header: Array,
     data: Array,
@@ -152,4 +159,16 @@ tr:hover {
 .drag-and-drop {
   cursor: move;
 }
+
+.icon-print {
+  font-size: 16px;
+  cursor: pointer;
+  margin-bottom: 5px;
+  width: 100px;
+}
+
+.title-table-print {
+  font-size: 13.8px;
+  margin-left: 6px;
+}
 </style>

package/src/component/shared/TableItem.vue

@@ -39,7 +39,7 @@
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
       {{ row[obj.field] | currency }}
     </div>
-    <div v-if="obj.type === 'button'" :style="obj.styleBody"
+    <div class="hide-print" v-if="obj.type === 'button'" :style="obj.styleBody"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
       <TableButton v-if="obj.ifFieldEqual == row[obj.field]" :obj="obj" :row="row" />
     </div>
@@ -171,4 +171,6 @@ export default {
 .period-rent {
   cursor: pointer;
 }
+
+
 </style>

package/src/component/shared/ToggleTheme.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="toggle-container">
+        <label class="switch">
+            <input type="checkbox" v-model="isDarkMode" @change="toggleTheme">
+            <span class="slider round">
+                <div class="icon-theme-light" v-if="themeLabel == 'Dark'">
+                    <i class="fa-solid fa-sun"></i>
+                </div>
+                <div class="icon-theme-dark" v-if="themeLabel == 'Light'">
+                    <i class="fa-solid fa-moon"></i>
+                </div>
+            </span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            isDarkMode: false,
+        };
+    },
+    computed: {
+        themeLabel() {
+            return this.isDarkMode ? 'Dark' : 'Light';
+        }
+    },
+    methods: {
+        toggleTheme() {
+            if (this.isDarkMode) {
+                document.body.classList.add('dark-theme');
+                document.body.classList.remove('light-theme');
+            } else {
+                document.body.classList.add('light-theme');
+                document.body.classList.remove('dark-theme');
+            }
+        },
+    },
+    mounted() {
+        if (localStorage.getItem('theme') === 'dark') {
+            this.isDarkMode = true;
+            document.body.classList.add('dark-theme');
+            document.body.classList.remove('light-theme');
+        } else {
+            this.isDarkMode = false;
+            document.body.classList.add('light-theme');
+            document.body.classList.remove('dark-theme');
+        }
+    },
+    watch: {
+        isDarkMode(newVal) {
+            localStorage.setItem('theme', newVal ? 'dark' : 'light');
+        }
+    }
+};
+</script>
+
+<style scoped>
+.icon-theme-dark {
+    margin-left: 26px;
+    margin-top: -2px;
+}
+
+.icon-theme-light {
+    margin-left: 6px;
+    margin-top: -3px;
+    color: white;
+}
+
+
+.toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 45px;
+    height: 22px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+}
+
+input:checked+.slider {
+    background-color: #ccc;
+}
+
+input:checked+.slider:before {
+    transform: translateX(20px);
+}
+
+.theme-indicator {
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+}
+</style>

package/src/store/modules/generic.js

@@ -17,6 +17,7 @@ export default {
             name: undefined,
             open: false
         },
+        menuCollapsed: true,
         notifications: [],
         pagination: [],
         paginations: { currentPage: 1, totalPerPage: 10 },
@@ -35,6 +36,7 @@ export default {
         ids: undefined,
         search: { content: "", filter: { content: "Contém", id: "contains" } },
         documentHtml: "",
+        documentHtmlFinal: "",
         selectStatic: { dateTime: undefined, tag: undefined, fieldTarget: undefined, value: undefined },
         tags: [],
         executedSearch: false,
@@ -258,6 +260,9 @@ export default {
             state.modal.name = name;
             state.modal.open = true;
         },
+        toggleMenu: (state, data) => {
+            state.menuCollapsed = data;
+        },
         hideModal: (state) => {
             state.modal.open = false;
         },
@@ -292,6 +297,9 @@ export default {
         updateTotalPerPage: (state, value) => {
             state.paginations.totalPerPage = value.id;
         },
+        updateDocumentHtmlFinal: (state, html) => {
+            state.documentHtmlFinal = html;
+        },
         addSelected: (state, selected) => {
             state.selected = selected;
         },