quasar-factory-lib 0.0.37 → 0.0.39

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -70,6 +70,7 @@
       </template>
       <template #item="props">
         <TableSlotGrid
+          v-if="!showSkeleton"
           :table-props="props"
           :selection-type="selectionType"
           :popup-edit-number-options="popupEditNumberOptions"
@@ -223,6 +224,9 @@ export default defineComponent({
   watch: {
     rows (val) {
       this.rowsData = val
+    },
+    visibleColumns (val: string [] | []) {
+      this.visibleColumnsData = val
     }
   },
   mounted () {

package/src/components/Table/components/TableFilter.vue

@@ -9,7 +9,7 @@
     placeholder="Search"
     outlined
     @update:model-value="setFilterValue"
-  >{{localStore.filterValue  }}
+  >
     <template #append>
       <q-icon
         v-if="localStore.filterValue === ''"

package/src/components/Table/components/TableSlotBody.vue

@@ -1,10 +1,10 @@
 <template>
   <tr
-    :class="tableProps.row.rowBgColor || 'bg-main-color'"
+    :class="tablePropsData.row.rowBgColor || 'bg-main-color'"
   >
     <q-td
       v-if="selectionType != 'none'"
-      :id="tableProps.row.id"
+      :id="tablePropsData.row.id"
       auto-width
     >
       <q-checkbox
@@ -13,15 +13,15 @@
       />
     </q-td>
     <q-td
-      v-for="col in tableProps.cols"
+      v-for="col in tablePropsData.cols"
       :key="col.name"
-      :class="tableProps.row.rowBgColor || 'bg-main-color'"
-      :props="tableProps"
-      :style="tablePropsData.row.tdStyle"
+      :class="tablePropsData.row.rowBgColor || 'bg-main-color'"
+      :props="tablePropsData"
     >
       <span
+        :style="tablePropsData.row.tdStyle"
         v-if="getColumnValue(col)"
-        v-html="tableProps.row[col.name]"
+        v-html="tablePropsData.row[col.name]"
       />
       <!-- fa-solid fa-pen-to-square -->
       <q-icon
@@ -35,7 +35,7 @@
         v-if="col.editable"
         :model="tablePropsData.row[col.name] || ''"
         :label="col.label"
-        :data-cy="col.popupEditDataCy + '-' + tableProps.row.id"
+        :data-cy="col.popupEditDataCy + '-' + tablePropsData.row.id"
         :input-max-length="col.inputMaxLength || 20"
         :mask="col.popupEditMask || ''"
         :input-type="col.popupEditInputtype || 'text'"
@@ -50,7 +50,7 @@
       <BasicCheckBox
         v-if="col.showBasicCheckbox"
         :table-props="tablePropsData"
-        :data-cy="col.checkBoxDataCy + '-' + tableProps.row.id || ''"
+        :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
         :model="tablePropsData.row[col.name]"
         @check-box-emit="(val: object) => {
           tablePropsData.row[col.name] = val
@@ -60,7 +60,7 @@
       <CustomizedCheckBox
         v-if="col.showCustomizedCheckBox"
         :table-props="tablePropsData"
-        :data-cy="col.checkBoxDataCy + '-' + tableProps.row.id || ''"
+        :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
         :model="tablePropsData.row[col.name]"
         :check-box-color="tablePropsData.row[col.name] ? col.checkBoxColorCaseTrue : col.checkBoxColorCaseFalse"
         :check-box-icon-size="'md'"
@@ -81,11 +81,11 @@
 
       <CustomizedButton
         v-if="col.showCustomizedButton"
-        :data-cy="col.colButtonDataCy + '-' + tableProps.row.id"
+        :data-cy="col.colButtonDataCy + '-' + tablePropsData.row.id"
         :btn-color="col.btnColor || 'primary'"
         :btn-icon="col.btnIcon|| ''"
         @on-click-button="() => {
-          $emit('onClickButton', col.btnEmit, tableProps.row)
+          $emit('onClickButton', col.btnEmit, tablePropsData.row)
         }"
       />
     </q-td>
@@ -116,6 +116,11 @@ export default {
       default: 'none'
     }
   },
+  watch: {
+    tableProps (val) {
+      this.tablePropsData = val
+    }
+  },
   emits: ['onSaveValuePopupEdit', 'onUpdateBasicCheckboxValue', 'onClickButton', 'onUpdateCustomizedCheckboxValue'],
   data () {
     return {

package/src/components/Table/components/TableSlotGrid.vue

@@ -12,7 +12,7 @@
           ? $q.dark.isActive
             ? 'bg-grey-9'
             : 'bg-grey-2'
-          : tableProps.row.rowBgColor || 'bg-main-color'
+          : tablePropsData.row.rowBgColor || 'bg-main-color'
       "
     >
       <q-card-section>
@@ -39,19 +39,20 @@
             <q-item-label
               v-if="getColumnValue(col)"
               class="itemsFontSize text-almost-black"
+              :style="tablePropsData.row.tdStyle"
             >
               <q-icon
                 v-if="col.editable"
-                name="fa-solid fa-pen-to-square"
+                name="edit"
                 color="primary"
                 size="sm"
                 class="cursor-pointer"
               />
-              <span v-html="tableProps.row[col.name]" />
+              <span v-html="tablePropsData.row[col.name]" />
               <TablePopupEdit
                 :model="tablePropsData.row[col.name] || ''"
                 :label="col.label"
-                :data-cy="col.popupEditDataCy + '-' + tableProps.row.id"
+                :data-cy="col.popupEditDataCy + '-' + tablePropsData.row.id"
                 :input-max-length="col.inputMaxLength || 20"
                 :mask="col.popupEditMask || ''"
                 :input-type="col.popupEditInputtype || 'text'"
@@ -68,7 +69,7 @@
               <BasicCheckBox
                 v-if="col.showBasicCheckbox"
                 :table-props="tablePropsData"
-                :data-cy="col.checkBoxDataCy + '-' + tableProps.row.id || ''"
+                :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
                 :model="tablePropsData.row[col.name]"
                 @check-box-emit="(val: object) => {
                   tablePropsData.row[col.name] = val
@@ -78,7 +79,7 @@
               <CustomizedCheckBox
                 v-if="col.showCustomizedCheckBox"
                 :table-props="tablePropsData"
-                :data-cy="col.checkBoxDataCy + '-' + tableProps.row.id || ''"
+                :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
                 :model="tablePropsData.row[col.name]"
                 :check-box-color="tablePropsData.row[col.name] ? col.checkBoxColorCaseTrue : col.checkBoxColorCaseFalse"
                 :check-box-icon-size="'lg'"
@@ -105,11 +106,11 @@
             <q-item-section>
               <CustomizedButton
                 v-if="col.showCustomizedButton"
-                :data-cy="col.colButtonDataCy + '-' + tableProps.row.id"
+                :data-cy="col.colButtonDataCy + '-' + tablePropsData.row.id"
                 :btn-color="col.btnColor || 'primary'"
                 :btn-icon="col.btnIcon|| ''"
                 @on-click-button="() => {
-                  $emit('onClickButton', col.btnEmit, tableProps.row)
+                  $emit('onClickButton', col.btnEmit, tablePropsData.row)
                 }"
               />
             </q-item-section>
@@ -161,8 +162,8 @@ export default {
     }
   },
   watch: {
-    gridRowsSelected (val: boolean) {
-      this.selected = val
+    tableProps (val) {
+      this.tablePropsData = val
     }
   },
   mounted () {},

package/src/components/Table/components/TableSlotHeader.vue

@@ -9,13 +9,14 @@
         v-if="selectionType == 'multiple'"
         v-model="tablePropsData.selected"
         size="sm"
+        class="float-left"
       />
     </q-th>
     <q-th
-      v-for="col in tableProps.cols"
+      v-for="col in tablePropsData.cols"
       v-if="!smallDevice"
       :key="col.name"
-      :props="tableProps"
+      :props="tablePropsData"
     >
       {{ col.label }}
     </q-th>
@@ -45,6 +46,11 @@ export default {
       showSearch: false
     }
   },
+  watch: {
+    tableProps (val) {
+      this.tablePropsData = val
+    }
+  },
   methods: {
   }
 }

package/src/components/Table/utils/infiniteScroll.ts

@@ -3,7 +3,6 @@
 const infiniteScroll = {
   handleInfiniteScrollNewTable (self: { $nextTick: (arg0: () => void) => void; totalPageModal: number; smallDevice: boolean, totalPage: number }): void {
     self.$nextTick(() => {
-      // console.log('aqui')
       const elemClass = self.smallDevice ? 'q-table__grid-content' : 'q-table__middle scroll'
       const tableType = self.smallDevice ? 'Grid' : 'Table'
       const qtableScrollElem = document.getElementsByClassName(elemClass) as HTMLCollectionOf<HTMLElement>

package/src/components/TaskNavBar/TaskNavBar.vue

@@ -2,12 +2,12 @@
   <div id="taskNavBar">
     <q-toolbar class="q-toolbar-unset-height">
       <div class="row full-width">
-        <div class="col-6">
+        <div class="col-7">
           <img :src="logo" class="logo">
+          <span id="mobile-title">{{ title }}</span>
         </div>
-        <div class="col-6 text-right" id="buttons">
-          <q-btn v-if="showBtnBack" flat round size="lg" @click="onClickBtnBack">
-            <q-icon>
+        <div class="col-5 text-right">
+            <q-icon v-if="showBtnBack" size="md" class="cursor-pointer" @click="onClickBtnBack">
               <svg class="text-h4" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                 viewBox="0 0 23.648 22.836">
                 <g id="Arrow_brand" data-name="Arrow brand" transform="translate(0 22.836) rotate(-90)">
@@ -17,10 +17,15 @@
                 </g>
               </svg>
             </q-icon>
-          </q-btn>
-          <q-btn v-if="showBtnSearch" color="primary" flat round icon="search" size="lg" @click="onClickBtnSearch" />
-          <q-btn flat round size="lg" @click="onClickBtnMenu">
-            <q-icon id="menu">
+            <q-icon 
+              v-if="showBtnSearch"
+              color="primary" 
+              :name="showIconSearch ?'search' : 'search_off'" 
+              size="md" 
+              class="q-ml-md cursor-pointer"
+              @click="onClickBtnSearch">
+            </q-icon>
+            <q-icon id="iconMenu" size="md" @click="onClickBtnMenu" class="q-ml-md cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="30.448" height="28.247" viewBox="0 0 30.448 28.247">
                 <g id="Componente_11_3" data-name="Componente 11 – 3" transform="translate(0 1)">
                   <path id="Caminho_702" data-name="Caminho 702" d="M38.053,40.174H24"
@@ -35,7 +40,7 @@
                 </g>
               </svg>
             </q-icon>
-          </q-btn>
+
         </div>
       </div>
     </q-toolbar>
@@ -53,6 +58,7 @@ export default defineComponent({
   data() {
     return {
       date,
+      showIconSearch: true,
       rightDrawerOpen: false
     }
   },
@@ -81,6 +87,7 @@ export default defineComponent({
       console.log('menu')
     },
     onClickBtnSearch() {
+      this.showIconSearch = !this.showIconSearch
       this.$emit('onClickBtnSearch')
       console.log('search')
     },

package/src/components/TaskNavBar/css/taskNavBar.css

@@ -1,20 +1,21 @@
 #taskNavBar .logo {
   display: block;
   width: 125px;
-  height: 50px;
+  height: auto;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   margin-bottom: 10px;
 }
-#taskNavBar #buttons .q-img {
-margin-left: 20px;
-}
 
 #taskNavBar .q-toolbar__title {
-font-family: "SangBleuKingdom-Light, sans-serif";
-font-size: 25px;
-margin: 0;
+  font-family: "SangBleuKingdom-Light, sans-serif";
+  font-size: 25px;
+  margin: 0;
+}
+
+#mobile-title {
+  display: none;
 }
 
 @media only screen and (max-width: 1100px) {
@@ -24,9 +25,14 @@ margin: 0;
 }
 
 @media only screen and (max-width: 375px) {
-#taskNavBar .logo {
+#taskNavBar .logo, #taskNavBar .q-toolbar__title {
   display: none;
 }
+#mobile-title {
+  display: block;
+  font-family: "SangBleuKingdom-Light, sans-serif";
+  font-size: 20px;
+}
 #taskNavBar .q-toolbar__title {
   font-size: 18px;
 } 

package/src/css/app.css

@@ -28,6 +28,9 @@
 .bg-main-color {
   background-color: var(--main-color);
 }
+.bg-light-peach {
+  background-color: var(--light-peach);
+}
 .text-color-light-gray {
   color: var(--light-gray);
 }
@@ -37,4 +40,8 @@
 .q-toolbar-unset-height .q-toolbar {
   min-height: unset;
   padding: 0;
+}
+
+.text-color-positive {
+  color: var(--positive);
 }

package/src/layouts/MenuLayout.vue

@@ -24,6 +24,12 @@
         router.push('navBarPage')
       }"
     />
+    <q-btn
+      label="pda"
+      @click="() => {
+        router.push('pdaLayout')
+      }"
+    />
   </div>
 </template>
 <script setup lang="ts">