quasar-factory-lib 0.0.23 → 0.0.25

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "author": ""
 }

package/src/components/TaskNavBar/TaskNavBar.vue

@@ -4,10 +4,10 @@
       <div class="row full-width">
         <div class="col-6">
           <img :src="logo" class="logo">
+          <span id="mobile-title">{{ title }}</span>
         </div>
-        <div class="col-6 text-right" id="buttons">
-          <q-btn v-if="showBtnBack" flat round size="lg" @click="onClickBtnBack">
-            <q-icon>
+        <div class="col-6 text-right">
+            <q-icon v-if="showBtnBack" size="md" @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,10 @@
                 </g>
               </svg>
             </q-icon>
-          </q-btn>
-          <q-btn v-if="showSearch" flat round icon="search" size="lg" @click="onClickBtnSearch" />
-          <q-btn flat round size="lg" @click="onClickBtnMenu">
-            <q-icon id="menu">
+            <q-icon v-if="showBtnSearch" color="primary" name="search" size="md" class="q-ml-md" @click="onClickBtnSearch">
+            </q-icon>
+      
+            <q-icon id="menu" size="md" @click="onClickBtnMenu" class="q-ml-md">
               <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"
@@ -35,11 +35,11 @@
                 </g>
               </svg>
             </q-icon>
-          </q-btn>
+
         </div>
       </div>
     </q-toolbar>
-    <q-toolbar-title class="text-color-almost-black">
+    <q-toolbar-title class="text-color-almost-black q-pl-none">
       {{ title }}
     </q-toolbar-title>
   </div>
@@ -72,23 +72,20 @@ export default defineComponent({
     showBtnSearch: {
       type: Boolean,
       default: true
-    },
-    showSearch: {
-      type: Boolean,
-      default: true
     }
   },
-  emits: ['search', 'back'],
+  emits: ['onClickBtnMenu', 'onClickBtnSearch', 'onClickBtnBack'],
   methods: {
     onClickBtnMenu() {
-      console.log('toggleRightDrawer')
+      this.$emit('onClickBtnMenu')
+      console.log('menu')
     },
     onClickBtnSearch() {
-      this.$emit('search')
+      this.$emit('onClickBtnSearch')
       console.log('search')
     },
     onClickBtnBack() {
-      this.$emit('back')
+      this.$emit('onClickBtnBack')
       console.log('back')
     }
   },

package/src/components/TaskNavBar/css/taskNavBar.css

@@ -7,14 +7,15 @@
   background-size: contain;
   margin-bottom: 10px;
 }
-#taskNavBar #buttons .q-img {
-margin-left: 20px;
-}
 
 #taskNavBar .q-toolbar__title {
-font-family: "SangBleuKingdom-Light, sans-serif";
-font-size: 25px;
-margin: 0;
+  font-family: "SangBleuKingdom-Light, sans-serif";
+  font-size: 25px;
+  margin: 0;
+}
+
+#mobile-title {
+  display: none;
 }
 
 @media only screen and (max-width: 1100px) {
@@ -24,9 +25,14 @@ margin: 0;
 }
 
 @media only screen and (max-width: 375px) {
-#taskNavBar .logo {
+#taskNavBar .logo, #taskNavBar .q-toolbar__title {
   display: none;
 }
+#mobile-title {
+  display: block;
+  font-family: "SangBleuKingdom-Light, sans-serif";
+  font-size: 20px;
+}
 #taskNavBar .q-toolbar__title {
   font-size: 18px;
 } 

package/src/pages/TablePage.vue

@@ -0,0 +1,341 @@
+<template>
+  <q-page-container class=" full-width column justify-center">
+    <q-page
+      class="full-width column justify-center align-center items-center"
+      style="height: 70vh;"
+    >
+      <div
+        class="full-width"
+      >
+        <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"
+          @on-select-visible-columns="saveSelectedColumns"
+          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
+          @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'
+import { tableStore } from '../store/table.js'
+export default {
+  components: {
+    Table
+  },
+  data () {
+    return {
+      showDialog: false,
+      forceRender: false,
+      store: tableStore(),
+      totalPage: 0,
+      pageSize: 20,
+      tableStyle: '',
+      columns: [{
+        name: 'name',
+        required: true,
+        label: 'Dessert (100g serving)',
+        align: 'left',
+        sortable: true
+      },
+      {
+        name: 'available',
+        required: true,
+        label: 'Available',
+        align: 'left',
+        sortable: true,
+        showBasicCheckbox: true
+      },
+      {
+        name: 'booleanIcon',
+        required: true,
+        label: 'Boolean Icon',
+        align: 'left',
+        sortable: true,
+        showCustomizedIcon: true
+      },
+      {
+        name: 'calories',
+        align: 'center',
+        label: 'Calories',
+        field: 'calories',
+        sortable: true,
+        editable: true,
+        showEditIcon: true,
+        popupEditEmit: 'onSaveValuePopupEdit',
+        popupEditInputtype: 'number',
+        popupEditDataCy: '',
+        popupEditMask: '#####'
+      },
+      {
+        name: 'fat',
+        label: 'Fat (g)',
+        field: 'fat',
+        sortable: true,
+        showCustomizedButton: true,
+        btnIcon: 'save',
+        btnEmit: 'onClickButton',
+        dataCy: 'onClickButton',
+        btnColor: 'primary'
+      },
+      {
+        name: 'carbs',
+        label: 'Carbs (g)',
+        field: 'carbs'
+      },
+      {
+        name: 'checked',
+        label: 'Checked',
+        field: 'carbs',
+        sortable: true,
+        required: true,
+        showCustomizedCheckBox: true,
+        checkedIcon: 'check_circle',
+        uncheckedIcon: 'cancel',
+        checkBoxColorCaseTrue: 'positive',
+        checkBoxColorCaseFalse: 'negative',
+        checkBoxDataCy: ''
+      },
+      {
+        name: 'protein',
+        label: 'Protein (g)',
+        field: 'protein',
+        sortable: true,
+        required: true,
+        editable: true,
+        showEditIcon: true,
+        popupEditEmit: 'onSaveValuePopupEdit',
+        popupEditInputtype: 'text',
+        popupEditDataCy: '',
+        showInputPopupEdit: true
+      },
+      {
+        name: 'sodium',
+        label: 'Sodium (mg)',
+        field: 'sodium'
+      },
+      {
+        name: 'calcium',
+        label: 'Calcium (%)',
+        field: 'calcium',
+        sortable: true
+      },
+      {
+        name: 'iron',
+        label: 'Iron (%)',
+        field: 'iron',
+        sortable: true
+      }
+      ],
+      rows: [],
+      rowsData: [
+        {
+          name: 'Frozen Yogurt',
+          booleanIcon: true,
+          available: true,
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          checked: false,
+          protein: 4.0,
+          sodium: 87,
+          calcium: '14%',
+          iron: '1%'
+        },
+        {
+          name: 'Ice cream sandwich',
+          booleanIcon: true,
+          available: false,
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          checked: false,
+          protein: 4.3,
+          sodium: 129,
+          calcium: '8%',
+          iron: '1%'
+        },
+        {
+          name: 'Eclair',
+          booleanIcon: true,
+          available: true,
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          checked: false,
+          protein: 6.0,
+          sodium: 337,
+          calcium: '6%',
+          iron: '7%'
+        },
+        {
+          name: 'Cupcake',
+          booleanIcon: false,
+          available: false,
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          checked: false,
+          protein: 4.3,
+          sodium: 413,
+          calcium: '3%',
+          iron: '8%'
+        },
+        {
+          name: 'Gingerbread',
+          booleanIcon: true,
+          available: true,
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          checked: false,
+          protein: 3.9,
+          sodium: 327,
+          calcium: '7%',
+          iron: '16%'
+        },
+        {
+          name: 'Jelly bean',
+          booleanIcon: false,
+          available: false,
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          checked: true,
+          protein: 0.0,
+          sodium: 50,
+          calcium: '0%',
+          iron: '0%'
+        },
+        {
+          name: 'Lollipop',
+          booleanIcon: true,
+          available: true,
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          checked: false,
+          protein: 0,
+          sodium: 38,
+          calcium: '0%',
+          iron: '2%'
+        },
+        {
+          name: 'Honeycomb',
+          booleanIcon: true,
+          available: false,
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          checked: true,
+          protein: 6.5,
+          sodium: 562,
+          calcium: '0%',
+          iron: '45%'
+        },
+        {
+          name: 'Donut',
+          booleanIcon: true,
+          available: true,
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          checked: false,
+          protein: 4.9,
+          sodium: 326,
+          calcium: '2%',
+          iron: '22%'
+        },
+        {
+          name: 'KitKat',
+          booleanIcon: false,
+          available: false,
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          checked: true,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%'
+        }
+      ],
+      visibleColumns: []
+    }
+  },
+  computed: {
+    pageLength (): number {
+      return (this.totalPage + 1) * this.pageSize
+    },
+    filter ():object {
+      return {
+        search: this.store.filterValue,
+        forceRender: this.forceRender
+      }
+    }
+  },
+  mounted () {
+    this.store.cleanTableFilter()
+    this.tableStyle = setTableHeight.setTableHeight()
+    infiniteScroll.handleInfiniteScrollNewTable(this)
+    this.rows = this.rowsData
+    this.visibleColumns = this.store.visiblecolumns
+  },
+  methods: {
+    saveSelectedColumns (columns: string []): void {
+      this.store.visiblecolumns = columns
+      this.visibleColumns = columns
+    },
+    filterMethod (rows: string | [], terms: { search: string }): object[] | [] {
+      return FilterMethod.filter(this, rows, terms)
+    },
+    onUpdateBasicCheckboxValue (rows: object []) {
+      console.log(rows, 'onUpdateBasicCheckboxValue')
+    },
+    onUpdateCustomizedCheckboxValue (rows: object []) {
+      console.log(rows, 'onUpdateCustomizedCheckboxValue')
+    },
+    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
+    }
+  }
+}
+</script>