quasar-factory-lib 0.0.35 → 0.0.37

package/package.json

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

package/src/components/Table/Table.vue

@@ -258,6 +258,8 @@ 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}) {
@@ -292,4 +294,5 @@ export default defineComponent({
 })
 </script>
 <style>
+/* @import url('./style.css'); */
 </style>

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

@@ -17,18 +17,18 @@
       :key="col.name"
       :class="tableProps.row.rowBgColor || 'bg-main-color'"
       :props="tableProps"
+      :style="tablePropsData.row.tdStyle"
     >
       <span
         v-if="getColumnValue(col)"
-        :class="tableProps.row.customizedTextClass"
-        v-html="tablePropsData.row[col.name]"
-      ></span>
+        v-html="tableProps.row[col.name]"
+      />
       <!-- fa-solid fa-pen-to-square -->
       <q-icon
         v-if="col.editable"
         name="edit"
         color="primary"
-        size="md"
+        size="sm"
         class="cursor-pointer"
       />
       <TablePopupEdit

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

@@ -38,15 +38,13 @@
           <q-item-section side>
             <q-item-label
               v-if="getColumnValue(col)"
-              :class="[
-                tableProps.row.customizedTextClass ? tableProps.row.customizedTextClass : 'itemsFontSize text-almost-black',
-              ]"
+              class="itemsFontSize text-almost-black"
             >
               <q-icon
                 v-if="col.editable"
-                name="edit"
+                name="fa-solid fa-pen-to-square"
                 color="primary"
-                size="md"
+                size="sm"
                 class="cursor-pointer"
               />
               <span v-html="tableProps.row[col.name]" />

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

@@ -9,7 +9,6 @@
         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-8">
+        <div class="col-6">
           <img :src="logo" class="logo">
-          <span id="mobile-title">{{ title }}</span>
         </div>
-        <div class="col-4 text-right">
-            <q-icon v-if="showBtnBack" size="md" class="cursor-pointer" @click="onClickBtnBack">
+        <div class="col-6 text-right" id="buttons">
+          <q-btn v-if="showBtnBack" flat round size="lg" @click="onClickBtnBack">
+            <q-icon>
               <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,15 +17,10 @@
                 </g>
               </svg>
             </q-icon>
-            <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">
+          </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">
               <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"
@@ -40,7 +35,7 @@
                 </g>
               </svg>
             </q-icon>
-
+          </q-btn>
         </div>
       </div>
     </q-toolbar>
@@ -58,7 +53,6 @@ export default defineComponent({
   data() {
     return {
       date,
-      showIconSearch: true,
       rightDrawerOpen: false
     }
   },
@@ -87,7 +81,6 @@ 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,21 +1,20 @@
 #taskNavBar .logo {
   display: block;
   width: 125px;
-  height: auto;
+  height: 50px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   margin-bottom: 10px;
 }
-
-#taskNavBar .q-toolbar__title {
-  font-family: "SangBleuKingdom-Light, sans-serif";
-  font-size: 25px;
-  margin: 0;
+#taskNavBar #buttons .q-img {
+margin-left: 20px;
 }
 
-#mobile-title {
-  display: none;
+#taskNavBar .q-toolbar__title {
+font-family: "SangBleuKingdom-Light, sans-serif";
+font-size: 25px;
+margin: 0;
 }
 
 @media only screen and (max-width: 1100px) {
@@ -25,14 +24,9 @@
 }
 
 @media only screen and (max-width: 375px) {
-#taskNavBar .logo, #taskNavBar .q-toolbar__title {
+#taskNavBar .logo {
   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

@@ -37,22 +37,4 @@
 .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);
-}
-
-.text-negative {
-  color: var(--negative);
-}
-.text-positive {
- color: var(--positive);
 }

package/src/pages/TablePage.vue

@@ -4,21 +4,17 @@
       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="smallDevice"
+          :small-device="false"
           :store="store"
           :table-style="tableStyle"
-          :show-skeleton="showSkeleton"
+          :show-skeleton="false"
           :selection-type="'multiple'"
           :filter-method="filterMethod"
           :filter-computed="filter"
@@ -27,12 +23,30 @@
           @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'
@@ -43,8 +57,6 @@ export default {
   },
   data () {
     return {
-      smallDevice: false,
-      showSkeleton: true,
       showDialog: false,
       forceRender: false,
       store: tableStore(),
@@ -56,11 +68,11 @@ export default {
         required: true,
         label: 'Dessert (100g serving)',
         align: 'left',
-        sortable: true,
-        customizedTextClass: (row: { customizedTextClass: string }) => row.customizedTextClass
+        sortable: true
       },
       {
         name: 'available',
+        required: true,
         label: 'Available',
         align: 'left',
         sortable: true,
@@ -108,6 +120,7 @@ export default {
         label: 'Checked',
         field: 'carbs',
         sortable: true,
+        required: true,
         showCustomizedCheckBox: true,
         checkedIcon: 'check_circle',
         uncheckedIcon: 'cancel',
@@ -120,6 +133,7 @@ export default {
         label: 'Protein (g)',
         field: 'protein',
         sortable: true,
+        required: true,
         editable: true,
         showEditIcon: true,
         popupEditEmit: 'onSaveValuePopupEdit',
@@ -296,50 +310,10 @@ 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
-    console.log(this.$refs.table)
-
-    const lista = this.rowsData
-    const lista2 = []
-    for (let i = 0; i < lista.length; i++) {
-      let myNewClass = ''
-      if (lista[i]['calories'] === 159) {
-        myNewClass = 'text-negative'
-      } else {
-        myNewClass = 'text-positive'
-      }
-      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,
-        customizedTextClass: myNewClass
-      })
-    }
-    this.rows = lista2
-    this.showSkeleton = false
-
   },
   methods: {
-    getClass (slotType: string, props: string, rowName: string) {
-      console.log(slotType, props, rowName)
-      // if (cols.name === 'name' && rowName === 'Frozen Yogurt') {
-      //   return 'text-negative'
-      // } else {
-      //   return 'text-positive'
-      // }
-      if (props.columns.Name.name === '') {
-
-      }
-    },
     saveSelectedColumns (columns: string []): void {
       this.store.visiblecolumns = columns
       this.visibleColumns = columns
@@ -355,6 +329,12 @@ 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
     }
   }
 }