quasar-factory-lib 0.0.22 → 0.0.23

package/package.json

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

package/src/components/Confirm/ConfirmDialog.vue

@@ -9,14 +9,14 @@
           color="negative"
           flat
           :label="$t('confirmDialog.cancel')"
-          @click="onClickBtnCancel()"
+          @click="onClickBtnCancel"
           data-cy="cancel"
         />
         <q-btn
           color="positive"
           flat
           :label="$t('confirmDialog.confirm')"
-          @click="onClickBtnConfirm()"
+          @click="onClickBtnConfirm"
           data-cy="confirm"
         />
       </q-card-actions>
@@ -52,15 +52,8 @@ export default defineComponent({
       type: String,
       default: '',
     },
-      onClickBtnConfirm: {
-      type: Function,
-      default: function () { },
-    },
-    onClickBtnCancel: {
-      type: Function,
-      default: function () { },
-    }
   },
+  emits: ['onClickBtnConfirm', 'onClickBtnCancel'],
   methods: {
     openDialogAndSetMessage(msg: string): void {
       this.alert = true
@@ -68,6 +61,14 @@ export default defineComponent({
     },
     closeAlert() {
       this.alert = false
+    },
+    onClickBtnConfirm () {
+      this.closeAlert()
+      this.$emit('onClickBtnConfirm')
+    },
+    onClickBtnCancel () {
+      this.closeAlert()
+      this.$emit('onClickBtnCancel')
     }
   }
 })

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

@@ -29,6 +29,7 @@
         name="edit"
         color="primary"
         size="sm"
+        class="cursor-pointer"
       />
       <TablePopupEdit
         v-if="col.editable"

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

@@ -3,7 +3,6 @@
     :class="'q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition'"
     :style="tablePropsData.selected ? 'transform: scale(0.95);' : ''"
   >
-  {{ tableProps.row.rowBgColor }}
     <q-card
       bordered
       flat
@@ -46,6 +45,7 @@
                 name="fa-solid fa-pen-to-square"
                 color="primary"
                 size="sm"
+                class="cursor-pointer"
               />
               <span v-html="tableProps.row[col.name]" />
               <TablePopupEdit

package/src/components/TaskNavBar/TaskNavBar.vue

@@ -1,62 +1,50 @@
 <template>
-  <div>
-      <q-toolbar  class="q-toolbar-unset-height">
-        <div class="row full-width">
+  <div id="taskNavBar">
+    <q-toolbar class="q-toolbar-unset-height">
+      <div class="row full-width">
         <div class="col-6">
-          <img :src="logo" id="logo">
+          <img :src="logo" class="logo">
         </div>
         <div class="col-6 text-right" id="buttons">
-        <q-img v-if="showBtnBack" src="src/assets/icons/ArrowBack.svg" width="30px" @click="back" class="cursor-pointer" />
-        <q-img v-if="showSearch" src="src/assets/icons/Search.svg" width="30px" @click="search"  class="cursor-pointer"/>
-        <q-img src="src/assets/icons/Menu.svg" width="30px" @click="toggleRightDrawer"  class="cursor-pointer"/>
-        <!-- <q-btn v-if="showBtnBack" flat round icon="arrow_back" size="lg" @click="back" class="cursor-pointer" />
-        <q-btn v-if="showSearch" flat round icon="search" size="lg" @click="search"  class="cursor-pointer"/>
-        <q-btn icon="menu" flat round size="lg" @click="toggleRightDrawer"  class="cursor-pointer"/> -->
+          <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)">
+                  <path id="Caminho_1066" data-name="Caminho 1066"
+                    d="M23.648,10.644l-22.323.569L11.42,1.095,10.325,0,0,11.418,10.325,22.836l1.095-1.095-10.1-10.13,22.323.581Z"
+                    transform="translate(22.836) rotate(90)" />
+                </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">
+              <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"
+                    transform="translate(-7.604 -13.177)" fill="none" stroke="#1a1311" stroke-miterlimit="10"
+                    stroke-width="0.5" />
+                  <path id="Caminho_703" data-name="Caminho 703" d="M45.079,31.913H24"
+                    transform="translate(-14.631 -18.155)" fill="none" stroke="#1a1311" stroke-miterlimit="10"
+                    stroke-width="1" />
+                  <path id="Caminho_704" data-name="Caminho 704" d="M54.448,23.328H24"
+                    transform="translate(-24 -23.328)" fill="none" stroke="#1a1311" stroke-miterlimit="10"
+                    stroke-width="2" />
+                </g>
+              </svg>
+            </q-icon>
+          </q-btn>
         </div>
       </div>
-      </q-toolbar >
-      <q-toolbar-title  class="text-color-almost-black">
-        {{ title }}
-      </q-toolbar-title>
+    </q-toolbar>
+    <q-toolbar-title class="text-color-almost-black">
+      {{ title }}
+    </q-toolbar-title>
   </div>
 </template>
 
-<style>
-#logo {
-    display: block;
-    width: 125px;
-    height: 50px;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    margin-bottom: 10px;
-}
-#buttons .q-img {
-  margin-left: 20px;
-}
-
-.q-toolbar__title {
-  font-family: "SangBleuKingdom-Light, sans-serif";
-  font-size: 25px;
-  margin: 0;
-}
-
-@media only screen and (max-width: 1100px) {
-  .q-toolbar__title {
-    font-size: 20px;
-  }
-}
-
-@media only screen and (max-width: 375px) {
-  #logo {
-    display: none;
-  }
-  .q-toolbar__title {
-    font-size: 18px;
-  } 
-}
-</style>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { date } from 'quasar'
@@ -92,14 +80,14 @@ export default defineComponent({
   },
   emits: ['search', 'back'],
   methods: {
-    toggleRightDrawer () {
+    onClickBtnMenu() {
       console.log('toggleRightDrawer')
     },
-    search () {
+    onClickBtnSearch() {
       this.$emit('search')
       console.log('search')
     },
-    back () {
+    onClickBtnBack() {
       this.$emit('back')
       console.log('back')
     }

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

@@ -0,0 +1,33 @@
+#taskNavBar .logo {
+  display: block;
+  width: 125px;
+  height: 50px;
+  background-position: center;
+  background-repeat: no-repeat;
+  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;
+}
+
+@media only screen and (max-width: 1100px) {
+#taskNavBar .q-toolbar__title {
+  font-size: 20px;
+}
+}
+
+@media only screen and (max-width: 375px) {
+#taskNavBar .logo {
+  display: none;
+}
+#taskNavBar .q-toolbar__title {
+  font-size: 18px;
+} 
+}

package/src/css/app.css

@@ -1,4 +1,5 @@
 @import url('../components/Table/css/table.css');
+@import url('../components/TaskNavBar/css/taskNavBar.css');
 @import url('./fonts.css');
 :root {
   --main-color: #FFF8F2;

package/src/i18n/en/index.ts

@@ -9,7 +9,9 @@ const en = {
   },
   confirmDialog: {
     cancel: 'Cancel',
-    confirm: 'Confirm'
+    confirm: 'Confirm',
+    yes: 'Yes',
+    no: 'No'
   },
   form: {
     rules: {

package/src/i18n/es/index.ts

@@ -9,7 +9,9 @@ const es = {
   },
   confirmDialog: {
     cancel: 'Cancelar',
-    confirm: 'Confirmar'
+    confirm: 'Confirmar',
+    yes: 'Sí',
+    no: 'No'
   },
   form: {
     rules: {

package/src/pages/ConfirmPage.vue

@@ -9,8 +9,8 @@
       >
       <ConfirmDialog
           ref="ConfirmRef"
-          :onClickBtnConfirm="onClickBtnConfirm"
-          :onClickBtnCancel="onClickBtnCancel"
+          @onClickBtnConfirm="onClickBtnConfirm"
+          @onClickBtnCancel="onClickBtnCancel"
         />
       </div>
     </q-page>
@@ -35,10 +35,8 @@ export default {
   methods: {
     onClickBtnConfirm() {
       console.log('confirm')
-      this.$refs.ConfirmRef.closeAlert()
     },
     onClickBtnCancel() {
-      this.$refs.ConfirmRef.closeAlert()
       console.log('cancel')
     }
   }

package/src/pages/NavBarPage.vue

@@ -10,7 +10,8 @@
       <q-header class="bg-main-color text-black">
         <TaskNavBar
         :logo="'src/assets/vue.svg'"
-        :title="'Load Preparation'"/>
+        :title="'Testing new navbar'">
+      </TaskNavBar>
       </q-header>
       </div>
     </q-page>