quasar-factory-lib 0.0.28 → 0.0.30

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "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,19 +17,17 @@
       :key="col.name"
       :class="tableProps.row.rowBgColor || 'bg-main-color'"
       :props="tableProps"
-      :style="tablePropsData.row.tdStyle"
     >
       <span
-        :style="tableProps.row.rowStyleFn(col.name, tableProps.row.name)"
         v-if="getColumnValue(col)"
-        v-html="tableProps.row[col.name]"
+        v-html="tablePropsData.row[col.name]"
       ></span>
       <!-- fa-solid fa-pen-to-square -->
       <q-icon
         v-if="col.editable"
         name="fa-solid fa-pen-to-square "
         color="primary"
-        size="sm"
+        size="xs"
         class="cursor-pointer"
       />
       <TablePopupEdit

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

@@ -39,13 +39,12 @@
             <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"
                 name="fa-solid fa-pen-to-square"
                 color="primary"
-                size="sm"
+                size="sx"
                 class="cursor-pointer"
               />
               <span v-html="tableProps.row[col.name]" />

package/src/pages/TablePage.vue

@@ -11,10 +11,10 @@
           :rows="rows"
           :columns="columns"
           :visible-columns="visibleColumns"
-          :small-device="true"
+          :small-device="false"
           :store="store"
           :table-style="tableStyle"
-          :show-skeleton="false"
+          :show-skeleton="showSkeleton"
           :selection-type="'multiple'"
           :filter-method="filterMethod"
           :filter-computed="filter"
@@ -39,6 +39,7 @@ export default {
   },
   data () {
     return {
+      showSkeleton: true,
       showDialog: false,
       forceRender: false,
       store: tableStore(),
@@ -51,8 +52,7 @@ export default {
         label: 'Dessert (100g serving)',
         align: 'left',
         sortable: true,
-        tdStyle: (row: { tdStyle: string }) => row.tdStyle,
-        rowStyleFn: (row: { rowStyleFn: string }) => row.rowStyleFn,
+        rowStyleFn: (row) => row.rowStyleFn,
       },
       {
         name: 'available',
@@ -81,8 +81,7 @@ export default {
         popupEditEmit: 'onSaveValuePopupEdit',
         popupEditInputtype: 'number',
         popupEditDataCy: '',
-        popupEditMask: '#####',
-        tdStyle: (row: { tdStyle: string }) => row.tdStyle,
+        popupEditMask: '#####'
       },
       {
         name: 'fat',
@@ -301,12 +300,6 @@ export default {
     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,
@@ -319,16 +312,17 @@ export default {
         sodium: lista[i].sodium,
         calcium: lista[i].calcium,
         iron: lista[i].iron,
-        tdStyle: tdStyle_,
         rowStyleFn: this.rowStyleFn
       })
     }
-      // console.log(lista2)
-      this.rows = lista2
+    this.rows = lista2
+    this.showSkeleton = false
+
   },
   methods: {
     rowStyleFn (colName: string, rowName: string) {
-      if (colName ==='name' &&  rowName=== 'Frozen Yogurt') {
+      console.log('rowStyleFn', colName)
+      if (colName === 'name' &&  rowName=== 'Frozen Yogurt') {
         return  'color: red !important; font-weight: bold;'
       }
        return 'color: blue !important; font-weight: bold;'