quasar-factory-lib 0.0.26 → 0.0.28

package/package.json

@@ -3,7 +3,7 @@
     "@quasar/extras": "^1.16.11",
     "global": "^4.4.0",
     "pinia": "^3.0.1",
-    "quasar": "^2.17.0",
+    "quasar": "^2.18.0",
     "vue": "^3.5.11",
     "vue-i18n": "^10.0.4"
   },
@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -56,7 +56,7 @@
           :small-device="smallDevice"
         />
       </template>
-      <template #body="props">
+      <!-- <template #body="props">
         <TableSlotBody
           v-if="!showSkeleton"
           :table-props="props"
@@ -67,7 +67,7 @@
           @on-click-button="onClickButton"
           @click="onRowClick(props.row)"
         />
-      </template>
+      </template> -->
       <template #item="props">
         <TableSlotGrid
           :table-props="props"
@@ -95,7 +95,7 @@
 import { defineComponent } from 'vue'
 import TableSlotHeader from './components/TableSlotHeader.vue'
 import TableColumnsSelector from './components/TableColumnsSelector.vue'
-import TableSlotBody from './components/TableSlotBody.vue'
+// import TableSlotBody from './components/TableSlotBody.vue'
 import TableSlotGrid from './components/TableSlotGrid.vue'
 import TableFilter from './components/TableFilter.vue'
 import TableSort from './utils/sort.js'
@@ -106,7 +106,7 @@ export default defineComponent({
   components: {
     TableSlotHeader,
     TableColumnsSelector,
-    TableSlotBody,
+    // TableSlotBody,
     TableSlotGrid,
     TableFilter,
     TableSkeleton,

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

@@ -20,13 +20,14 @@
       :style="tablePropsData.row.tdStyle"
     >
       <span
+        :style="tableProps.row.rowStyleFn(col.name, tableProps.row.name)"
         v-if="getColumnValue(col)"
         v-html="tableProps.row[col.name]"
-      />
+      ></span>
       <!-- fa-solid fa-pen-to-square -->
       <q-icon
         v-if="col.editable"
-        name="edit"
+        name="fa-solid fa-pen-to-square "
         color="primary"
         size="sm"
         class="cursor-pointer"

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

@@ -39,6 +39,7 @@
             <q-item-label
               v-if="getColumnValue(col)"
               class="itemsFontSize text-almost-black"
+              :style="tableProps.row.rowStyleFn(col.name, tableProps.row.name)"
             >
               <q-icon
                 v-if="col.editable"

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

@@ -9,6 +9,7 @@
         v-if="selectionType == 'multiple'"
         v-model="tablePropsData.selected"
         size="sm"
+        class="float-left"
       />
     </q-th>
     <q-th

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-8">
           <img :src="logo" class="logo">
           <span id="mobile-title">{{ title }}</span>
         </div>
-        <div class="col-6 text-right">
-            <q-icon v-if="showBtnBack" size="md" @click="onClickBtnBack">
+        <div class="col-4 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-icon v-if="showBtnSearch" color="primary" name="search" size="md" class="q-ml-md" @click="onClickBtnSearch">
+            <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">
+            <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"
@@ -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,7 +1,7 @@
 #taskNavBar .logo {
   display: block;
   width: 125px;
-  height: 50px;
+  height: auto;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;

package/src/css/app.css

@@ -37,4 +37,15 @@
 .q-toolbar-unset-height .q-toolbar {
   min-height: unset;
   padding: 0;
+}
+
+.text-color-positive {
+  color: var(--positive);
+}
+
+.bg-negative {
+  background-color: var(--negative);
+}
+.bg-positive {
+  background-color: var(--positive);
 }

package/src/pages/TablePage.vue

@@ -11,7 +11,7 @@
           :rows="rows"
           :columns="columns"
           :visible-columns="visibleColumns"
-          :small-device="false"
+          :small-device="true"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="false"
@@ -23,30 +23,12 @@
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
         />
-        <q-dialog v-model="showDialog" >
-          <div>
-            <q-btn @click="close">Close</q-btn>
-          <Table
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :small-device="false"
-          :store="store"
-          :table-style="tableStyle"
-          :show-skeleton="false"
-          :selection-type="'multiple'"
-          :filter-method="filterMethod"
-          :filter-computed="filter"
-        />
-          </div>
-        </q-dialog>
       </div>
     </q-page>
   </q-page-container>
 </template>
 <script lang="ts">
 import Table from '../components/Table/Table.vue'
-// import rows from '../testData.js'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 import infiniteScroll from '../components/Table/utils/infiniteScroll'
 import FilterMethod from '../components/Table/utils/filterMethod'
@@ -68,11 +50,13 @@ export default {
         required: true,
         label: 'Dessert (100g serving)',
         align: 'left',
-        sortable: true
+        sortable: true,
+        tdStyle: (row: { tdStyle: string }) => row.tdStyle,
+        rowStyleFn: (row: { rowStyleFn: string }) => row.rowStyleFn,
       },
       {
         name: 'available',
-        required: true,
+        required: false,
         label: 'Available',
         align: 'left',
         sortable: true,
@@ -97,7 +81,8 @@ export default {
         popupEditEmit: 'onSaveValuePopupEdit',
         popupEditInputtype: 'number',
         popupEditDataCy: '',
-        popupEditMask: '#####'
+        popupEditMask: '#####',
+        tdStyle: (row: { tdStyle: string }) => row.tdStyle,
       },
       {
         name: 'fat',
@@ -120,7 +105,7 @@ export default {
         label: 'Checked',
         field: 'carbs',
         sortable: true,
-        required: true,
+        required: false,
         showCustomizedCheckBox: true,
         checkedIcon: 'check_circle',
         uncheckedIcon: 'cancel',
@@ -133,7 +118,7 @@ export default {
         label: 'Protein (g)',
         field: 'protein',
         sortable: true,
-        required: true,
+        required: false,
         editable: true,
         showEditIcon: true,
         popupEditEmit: 'onSaveValuePopupEdit',
@@ -310,10 +295,44 @@ export default {
     this.store.cleanTableFilter()
     this.tableStyle = setTableHeight.setTableHeight()
     infiniteScroll.handleInfiniteScrollNewTable(this)
-    this.rows = this.rowsData
+    // this.rows = this.rowsData
     this.visibleColumns = this.store.visiblecolumns
+
+    const lista = this.rowsData
+    const lista2 = []
+    for (let i = 0; i < lista.length; i++) {
+      let tdStyle_= ''
+      // if (lista[i].name === 'Frozen Yogurt') {
+      //   tdStyle_ = "color: red !important; font-weight: bold;"
+      // }else {
+      //   tdStyle_ = "color: blue !important; font-weight: bold;"
+      // }
+      lista2.push({
+       name: lista[i].name,
+       booleanIcon: lista[i].booleanIcon,
+       available:  lista[i].available,
+        calories: lista[i].calories,
+        fat: lista[i]. fat,
+        carbs: lista[i].carbs,
+        checked: lista[i].checked,
+        protein: lista[i].protein,
+        sodium: lista[i].sodium,
+        calcium: lista[i].calcium,
+        iron: lista[i].iron,
+        tdStyle: tdStyle_,
+        rowStyleFn: this.rowStyleFn
+      })
+    }
+      // console.log(lista2)
+      this.rows = lista2
   },
   methods: {
+    rowStyleFn (colName: string, rowName: string) {
+      if (colName ==='name' &&  rowName=== 'Frozen Yogurt') {
+        return  'color: red !important; font-weight: bold;'
+      }
+       return 'color: blue !important; font-weight: bold;'
+    },
     saveSelectedColumns (columns: string []): void {
       this.store.visiblecolumns = columns
       this.visibleColumns = columns
@@ -329,12 +348,6 @@ export default {
     },
     setItemNotFound (rows: object []) {
       console.log(rows, 'onClickButton')
-      this.showDialog = true
-      this.store.lastFilterValue = this.store.filterValue 
-    },
-    close () {
-      this.showDialog= false
-      this.store.filterValue = this.store.lastFilterValue
     }
   }
 }