quasar-factory-lib 0.0.66 → 0.0.67

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -66,7 +66,7 @@
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-save-value-popup-edit="onSaveValuePopupEdit"
           @on-click-button="onClickButton"
-          @on-click-button-with-tool-tip="onClickButtonWithToolTip"
+          @on-click-icon-tool-tip="onClickIconToolTip"
           @click="onRowClick(props.row)"
         />
       </template>
@@ -81,7 +81,7 @@
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-save-value-popup-edit="onSaveValuePopupEdit"
           @on-click-button="onClickButton"
-          @on-click-button-with-tool-tip="onClickButtonWithToolTip"
+          @on-click-icon-tool-tip="onClickIconToolTip"
           @click="onRowClick(props.row)"
         />
       </template>
@@ -201,7 +201,7 @@ export default defineComponent({
     'pauseMaintenanceTicket',
     'finishMaintenanceTicket',
     'onRowClick',
-    'onClickButtonWithToolTip'
+    'onClickIconToolTip'
   ],
   data () {
     return {
@@ -274,8 +274,8 @@ export default defineComponent({
     onClickButton (emit: 'onClickButton', row: object) {
       this.$emit(emit, row)
     },
-    onClickButtonWithToolTip (row: object) {
-      this.$emit('onClickButtonWithToolTip', row)
+    onClickIconToolTip (emit: 'onClickIconToolTip', row: object) {
+      this.$emit(emit, row)
     },
     onRowClick (row: object) {
       this.$emit('onRowClick', row)

package/src/components/Table/components/{CustomizedButtonWithToolTip.vue → IConWithToolTip.vue}

@@ -1,13 +1,11 @@
 <template>
-  <q-btn
+  <q-icon
     :data-cy="dataCy"
-    flat
-    round
-    :color="btnColor"
-    size="md"
-    @click="$emit('onClickButtonWithToolTip')"
-  >
-    <q-icon :name="btnIcon" />
+    :name="iconName"
+    :color="iconColor"
+    size="sm"
+    @click="$emit('onClickIconToolTip')"
+  > 
     <q-tooltip
       anchor="top middle"
       self="bottom middle"
@@ -15,21 +13,21 @@
     >
       {{ $t(toolTipText) }}
     </q-tooltip>
-  </q-btn>
+  </q-icon>
 </template>
 <script lang="ts">
 export default {
-  name: 'CustomizedButtonWithToolTip',
+  name: 'IConWithToolTip',
   props: {
     dataCy: {
       type: String,
       required: true
     },
-    btnColor: {
+    iconColor: {
       type: String,
       required: true
     },
-    btnIcon: {
+    iconName: {
       type: String,
       required: true
     },
@@ -38,6 +36,6 @@ export default {
       required: true
     }
   },
-  emits: ['onClickButtonWithToolTip']
+  emits: ['onClickIconToolTip']
 }
 </script>

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

@@ -98,14 +98,14 @@
           $emit('onClickButton', col.btnEmit, tablePropsData.row)
         }"
       />
-      <CustomizedButtonWithToolTip
-        v-if="col.showCustomizedButtonWithToolTip"
-        :data-cy="col.ButtonWithToolTip + '-' + tablePropsData.row.id"
-        :btn-color="tablePropsData.row.btnColor || 'primary'"
-        :btn-icon="col.btnIcon|| ''"
-        :toolTipText="tablePropsData.row.toolTipText || ''"
-        @on-click-button-with-tool-tip="() => {
-          $emit('onClickButtonWithToolTip', col.btnEmit, tablePropsData.row)
+      <IconWithToolTip
+        v-if="col.showIconWithToolTip"
+        :data-cy="col.IconWithToolTip + '-' + tablePropsData.row.id"
+        :icon-color="tablePropsData.row.iconWithToolTipColor"
+        :icon-name="tablePropsData.row.iconWithToolTipName"
+        :tool-tip-text="tablePropsData.row.toolTipText"
+        @on-click-icon-tool-tip="() => {
+          $emit('onClickIconToolTip', col.iconWithToolTipEmit, tablePropsData.row)
         }"
       />
       <CustomizedBadge
@@ -129,7 +129,7 @@ import CustomizedCheckBox from './CustomizedCheckBox.vue'
 import CustomizedIcon from './CustomizedIcon.vue'
 import CustomizedButton from './CustomizedButton.vue'
 import CustomizedBadge from './CustomizedBadge.vue'
-import CustomizedButtonWithToolTip from './CustomizedButtonWithToolTip.vue'
+import IconWithToolTip from './IConWithToolTip.vue'
 export default {
   name: 'TableSlotBody',
   components: {
@@ -140,7 +140,7 @@ export default {
     CustomizedIcon,
     CustomizedButton,
     CustomizedBadge,
-    CustomizedButtonWithToolTip
+    IconWithToolTip
   },
   props: {
     tableProps: {
@@ -166,7 +166,7 @@ export default {
     'onUpdateBasicCheckboxValue',
     'onClickButton',
     'onUpdateCustomizedCheckboxValue',
-    'onClickButtonWithToolTip'
+    'onClickIconToolTip'
   ],
   data () {
     return {
@@ -174,8 +174,8 @@ export default {
     }
   },
   methods: {
-    getColumnValue (col: { showBasicCheckbox: boolean; showCustomizedCheckBox: boolean; showCustomizedIcon: boolean; showColumButton: boolean, showBadge: boolean, showCustomizedButtonWithToolTip: boolean }): boolean {
-      return !(col.showBasicCheckbox || col.showCustomizedCheckBox || col.showCustomizedIcon || col.showColumButton || col.showBadge || col.showCustomizedButtonWithToolTip)
+    getColumnValue (col: { showBasicCheckbox: boolean; showCustomizedCheckBox: boolean; showCustomizedIcon: boolean; showColumButton: boolean, showBadge: boolean, showIconWithToolTip: boolean }): boolean {
+      return !(col.showBasicCheckbox || col.showCustomizedCheckBox || col.showCustomizedIcon || col.showColumButton || col.showBadge || col.showIconWithToolTip)
     }
   }
 }

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

@@ -129,16 +129,16 @@
               />
             </q-item-section>
               <q-item-section>
-                <CustomizedButtonWithToolTip
-                v-if="col.showCustomizedButtonWithToolTip"
-                :data-cy="col.ButtonWithToolTip + '-' + tablePropsData.row.id"
-                :btn-color="tablePropsData.row.btnColor || 'primary'"
-                :btn-icon="col.btnIcon|| ''"
-                :toolTipText="tablePropsData.row.toolTipText || ''"
-                @on-click-button-with-tool-tip="() => {
-                  $emit('onClickButtonWithToolTip', col.btnEmit, tablePropsData.row)
-                }"
-              />
+                <IconWithToolTip
+                  v-if="col.showIconWithToolTip"
+                  :data-cy="col.IconWithToolTip + '-' + tablePropsData.row.id"
+                  :icon-color="tablePropsData.row.iconWithToolTipColor"
+                  :icon-name="tablePropsData.row.iconWithToolTipName"
+                  :tool-tip-text="tablePropsData.row.toolTipText"
+                  @on-click-icon-tool-tip="() => {
+                    $emit('onClickIconToolTip', col.iconWithToolTipEmit, tablePropsData.row)
+                  }"
+                />
             </q-item-section>
             <q-item-section>
               <CustomizedBadge
@@ -166,7 +166,7 @@ import CustomizedCheckBox from './CustomizedCheckBox.vue'
 import CustomizedIcon from './CustomizedIcon.vue'
 import CustomizedButton from './CustomizedButton.vue'
 import CustomizedBadge from './CustomizedBadge.vue'
-import CustomizedButtonWithToolTip from './CustomizedButtonWithToolTip.vue'
+import IconWithToolTip from './IConWithToolTip.vue'
 
 export default {
   name: 'TableSlotGrid',
@@ -178,7 +178,7 @@ export default {
     CustomizedIcon,
     CustomizedButton,
     CustomizedBadge,
-    CustomizedButtonWithToolTip
+    IconWithToolTip
   },
   props: {
     tableProps: {
@@ -202,7 +202,8 @@ export default {
     'onUpdateBasicCheckboxValue',
     'onClickButton',
     'onUpdateCustomizedCheckboxValue',
-    'onClickButtonWithToolTip'
+    'onClickIcon',
+    'onClickIconToolTip'
   ],
   data () {
     return {
@@ -217,8 +218,8 @@ export default {
   },
   mounted () {},
   methods: {
-    getColumnValue (col: { showBasicCheckbox: boolean; showCustomizedCheckBox: boolean; showCustomizedIcon: boolean; showColumButton: boolean, showBadge: boolean, showCustomizedButtonWithToolTip: boolean }): boolean {
-      return !(col.showBasicCheckbox || col.showCustomizedCheckBox || col.showCustomizedIcon || col.showColumButton || col.showBadge || col.showCustomizedButtonWithToolTip)
+    getColumnValue (col: { showBasicCheckbox: boolean; showCustomizedCheckBox: boolean; showCustomizedIcon: boolean; showColumButton: boolean, showBadge: boolean, showIconWithToolTip: boolean, showCustomizedButton: boolean }): boolean {
+      return !(col.showBasicCheckbox || col.showCustomizedCheckBox || col.showCustomizedIcon || col.showColumButton || col.showBadge || col.showIconWithToolTip || col.showCustomizedButton)
     }
   }
 }

package/src/pages/TablePage.vue

@@ -13,7 +13,7 @@
           :rows="rows"
           :columns="columns"
           :visible-columns="store.visiblecolumns"
-          :small-device="false"
+          :small-device="true"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="showSkeleton"
@@ -28,7 +28,7 @@
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
-          @onClickButtonWithToolTip="onClickBadge"
+          @onClickIconToolTip="onClickIconToolTip"
 
         />
       </div>
@@ -131,7 +131,6 @@ export default {
         format: (val: number) => `${val}`,
         showBadge: true,
         badgeDataCy: 'badgeDataCy',
-        badgeEmit: 'onClickBadge',
         badgeText: (row: { badgeText: string }) => row.badgeText,
         badgeColor: (row: { badgeColor: string }) => row.badgeColor,
         badgeTextColor: 'black',
@@ -172,11 +171,11 @@ export default {
         field: 'sodium',
         required: true,
         sortable: true,
-        showCustomizedButtonWithToolTip: true,
-        btnIcon: 'warning',
-        btnEmit: 'onClickButtonWithToolTip',
-        dataCy: 'onClickButtonWithToolTip',
-        btnColor:  (row: { btnColor: string }) => row.btnColor,
+        showIconWithToolTip: true,
+        dataCy: 'iconWithToolTip',
+        iconWithToolTipEmit: 'onClickIconToolTip',
+        iconWithToolTipColor:  (row: { iconWithToolTipColor: string }) => row.iconWithToolTipColor,
+        iconWithToolTipName: (row: { iconWithToolTipName: string }) => row.iconWithToolTipName,
         toolTipText: (row: { toolTipText: string }) => row.toolTipText,
       },
       {
@@ -376,11 +375,12 @@ export default {
           sodium: lista[i].sodium,
           calcium: lista[i].calcium,
           iron: lista[i].iron,
-          btnDisable: true,
+          btnDisable: this.getBtnDisable(lista[i].carbs),
           badgeColor: this.getBadgeColor(lista[i].carbs),
           badgeText: this.getBadgeText(lista[i].carbs),
           toolTipText: this.getBadgeText(lista[i].carbs),
-          btnColor: this.getBadgeColor(lista[i].carbs)
+          iconWithToolTipColor: this.getBadgeColor(lista[i].carbs),
+          iconWithToolTipName: this.getIconWithToolTipName(lista[i].carbs)
         })
       }
       setTimeout(() => {
@@ -394,8 +394,11 @@ export default {
     getBadgeText (carbs: number) {
       return carbs > 50 ? 'header.hello': 'global.total' 
     },
-    onClickBadge (rows: object []) {
-      console.log(rows, 'onClickBadge')
+    getBtnDisable (carbs: number) {
+      return carbs > 50
+    },
+    getIconWithToolTipName (carbs: number) {
+      return carbs > 50 ? 'warning': 'home' 
     },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')
@@ -406,6 +409,9 @@ export default {
     setItemNotFound (rows: object []) {
       console.log(rows, 'onClickButton')
     },
+    onClickIconToolTip (rows: object []) {
+      console.log(rows, 'onClickIconToolTip page')
+    },
     getCellClass (row, col) {
       if (col.name === 'dessert' && row.dessert === 'Frozen Yogurt') {
         return 'text-color-negative-bold';