quasar-factory-lib 0.0.27 → 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.27",
+  "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

@@ -17,16 +17,17 @@
       :key="col.name"
       :class="tableProps.row.rowBgColor || 'bg-main-color'"
       :props="tableProps"
+      :style="tablePropsData.row.tdStyle"
     >
       <span
-        :style="tablePropsData.row.tdStyle"
+        :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,7 +39,7 @@
             <q-item-label
               v-if="getColumnValue(col)"
               class="itemsFontSize text-almost-black"
-              :style="tablePropsData.row.tdStyle"
+              :style="tableProps.row.rowStyleFn(col.name, tableProps.row.name)"
             >
               <q-icon
                 v-if="col.editable"

package/src/css/app.css

@@ -41,4 +41,11 @@
 
 .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"
@@ -50,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,
@@ -79,7 +81,8 @@ export default {
         popupEditEmit: 'onSaveValuePopupEdit',
         popupEditInputtype: 'number',
         popupEditDataCy: '',
-        popupEditMask: '#####'
+        popupEditMask: '#####',
+        tdStyle: (row: { tdStyle: string }) => row.tdStyle,
       },
       {
         name: 'fat',
@@ -102,7 +105,7 @@ export default {
         label: 'Checked',
         field: 'carbs',
         sortable: true,
-        required: true,
+        required: false,
         showCustomizedCheckBox: true,
         checkedIcon: 'check_circle',
         uncheckedIcon: 'cancel',
@@ -115,7 +118,7 @@ export default {
         label: 'Protein (g)',
         field: 'protein',
         sortable: true,
-        required: true,
+        required: false,
         editable: true,
         showEditIcon: true,
         popupEditEmit: 'onSaveValuePopupEdit',
@@ -144,7 +147,6 @@ export default {
       rows: [],
       rowsData: [
         {
-          tdStyle: "color: #597765 !important; font-weight: bold;",
           name: 'Frozen Yogurt',
           booleanIcon: true,
           available: true,
@@ -293,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