quasar-factory-lib 0.0.31 → 0.0.32

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -258,8 +258,6 @@ export default defineComponent({
       this.$emit('onUpdateCustomizedCheckboxValue', row)
     },
     clearTableSelection () {
-      // const table = this.$refs.myTable as QTable
-      // table.clearSelection()
       this.selected = []
     },
     toggleSearchVisibility (store: {disableScannerButtons: boolean, lastFilterValue: string, valueInputFilterTable: string}) {
@@ -294,5 +292,4 @@ export default defineComponent({
 })
 </script>
 <style>
-/* @import url('./style.css'); */
 </style>

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

@@ -20,6 +20,7 @@
     >
       <span
         v-if="getColumnValue(col)"
+        :class="tableProps.row.customizedClass && tableProps.row.customizedClass(col.name, tablePropsData.row[col.name])"
         v-html="tablePropsData.row[col.name]"
       ></span>
       <!-- fa-solid fa-pen-to-square -->
@@ -27,7 +28,7 @@
         v-if="col.editable"
         name="edit"
         color="primary"
-        size="xs"
+        size="md"
         class="cursor-pointer"
       />
       <TablePopupEdit

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

@@ -27,7 +27,7 @@
           v-for="col in tablePropsData.cols.filter((col: any) => col.name !== 'desc')"
           :key="col.name"
         >
-          <q-item-section>
+          <q-item-section :class="tableProps.row.customizedClass && tableProps.row.customizedClass(col.name, tablePropsData.row[col.name])">
             <q-item-label class="itemsFontSize ellipsis text-light-gray">
               {{
                 col.label
@@ -40,12 +40,11 @@
               v-if="getColumnValue(col)"
               class="itemsFontSize text-almost-black"
             >
-            <!-- fa-solid fa-pen-to-square -->
               <q-icon
                 v-if="col.editable"
                 name="edit"
                 color="primary"
-                size="sx"
+                size="md"
                 class="cursor-pointer"
               />
               <span v-html="tableProps.row[col.name]" />

package/src/css/app.css

@@ -48,4 +48,11 @@
 }
 .bg-positive {
   background-color: var(--positive);
+}
+
+.text-negative {
+  color: var(--negative);
+}
+.text-positive {
+ color: var(--positive);
 }

package/src/pages/TablePage.vue

@@ -4,14 +4,18 @@
       class="full-width column justify-center align-center items-center"
       style="height: 70vh;"
     >
+    <q-btn @click="()=> {
+        smallDevice = ! smallDevice
+      }">Change Device</q-btn>
       <div
         class="full-width"
       >
         <Table
+          ref="table"
           :rows="rows"
           :columns="columns"
           :visible-columns="visibleColumns"
-          :small-device="false"
+          :small-device="smallDevice"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="showSkeleton"
@@ -39,6 +43,7 @@ export default {
   },
   data () {
     return {
+      smallDevice: false,
       showSkeleton: true,
       showDialog: false,
       forceRender: false,
@@ -51,7 +56,8 @@ export default {
         required: true,
         label: 'Dessert (100g serving)',
         align: 'left',
-        sortable: true
+        sortable: true,
+        customizedClass: (row: { customizedClass: string }) => row.customizedClass,
       },
       {
         name: 'available',
@@ -295,10 +301,12 @@ export default {
     infiniteScroll.handleInfiniteScrollNewTable(this)
     // this.rows = this.rowsData
     this.visibleColumns = this.store.visiblecolumns
+    console.log(this.$refs.table)
 
     const lista = this.rowsData
     const lista2 = []
     for (let i = 0; i < lista.length; i++) {
+
       lista2.push({
        name: lista[i].name,
        booleanIcon: lista[i].booleanIcon,
@@ -310,7 +318,8 @@ export default {
         protein: lista[i].protein,
         sodium: lista[i].sodium,
         calcium: lista[i].calcium,
-        iron: lista[i].iron
+        iron: lista[i].iron,
+        customizedClass: this.getClass
       })
     }
     this.rows = lista2
@@ -318,6 +327,13 @@ export default {
 
   },
   methods: {
+    getClass (colName: string, rowName: string) {
+      if (colName === 'name' && rowName === 'Frozen Yogurt') {
+        return 'text-negative'
+      } else {
+        return 'text-positive'
+      }
+    },
     saveSelectedColumns (columns: string []): void {
       this.store.visiblecolumns = columns
       this.visibleColumns = columns