quasar-factory-lib 0.0.20 → 0.0.22

package/package.json

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

package/src/assets/icons/Add.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25.956" height="26.184" viewBox="0 0 25.956 26.184">
+  <g id="Grupo_14312" data-name="Grupo 14312" transform="translate(-120.994 -824.065) rotate(45)">
+    <line id="Linha_7" data-name="Linha 7" x1="17.323" y2="17.293" transform="translate(677.612 488.5)" fill="none" stroke="#000" stroke-width="1"/>
+    <line id="Linha_8" data-name="Linha 8" x2="17.616" y2="17.616" transform="translate(677.996 488.5)" fill="none" stroke="#000" stroke-width="1"/>
+  </g>
+</svg>

package/src/assets/icons/ArrowBack.svg

@@ -0,0 +1,3 @@
+<svg id="Componente_25_1" data-name="Componente 25 – 1" xmlns="http://www.w3.org/2000/svg" width="31.14" height="30.072" viewBox="0 0 31.14 30.072">
+  <path id="Caminho_11926" data-name="Caminho 11926" d="M31.14,14.016l-29.4.75L15.038,1.442,13.6,0,0,15.036,13.6,30.072l1.442-1.442L1.744,15.291l29.4.765Z"/>
+</svg>

package/src/assets/icons/Menu.svg

@@ -0,0 +1,7 @@
+<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>

package/src/assets/icons/Search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28.831" height="28.221" viewBox="0 0 28.831 28.221">
+  <path id="Caminho_11974" data-name="Caminho 11974" d="M321.559,31.944A10.224,10.224,0,0,0,310.8,22.172,10.425,10.425,0,0,0,300.44,32.529a9.681,9.681,0,0,0,2.8,6.621l-.575.576-9.94,9.221,1.439,1.44,9.222-9.938.607-.607a10.747,10.747,0,0,0,7.2,2.458A10.425,10.425,0,0,0,321.559,31.944Zm-10.732-8.518a8.982,8.982,0,0,1,9.477,8.553,9.159,9.159,0,0,1-9.132,9.069,8.982,8.982,0,0,1-9.477-8.553A9.159,9.159,0,0,1,310.827,23.426Z" transform="translate(-292.73 -22.167)" fill-rule="evenodd"/>
+</svg>

package/src/components/Alert/AlertDialog.vue

@@ -1,10 +1,10 @@
 <template>
-  <q-dialog v-model="showPopUp" :persistent="persistent">
+  <q-dialog v-model="alert" :persistent="persistent">
     <q-banner inline-actions data-cy="alert">
       <template v-slot:avatar>
         <q-icon :name="icon" :color="iconColor" :size="iconSize"></q-icon>
       </template>
-      <p class="info">{{ message }}</p>
+      <p class="info">{{ alertMessage }}</p>
       <template v-slot:action>
         <q-btn
           flat
@@ -31,8 +31,8 @@ export default defineComponent({
   name: 'AlertDialog',
   data() {
     return {
-      showPopUp: false,
-      message: '',
+      alert: false,
+      alertMessage: '',
     }
   },
   props: {
@@ -68,11 +68,11 @@ export default defineComponent({
   emit: ['dialogClosed'],
   methods: {
     openAlertAndSetMessage(message: string): void {
-      this.showPopUp = true
-      this.message = message
+      this.alert = true
+      this.alertMessage = message
     },
     closePopup(): void {
-      this.showPopUp = false
+      this.alert = false
       this.$emit('onPopupClosed')
     },
   },

package/src/components/Table/Table.vue

@@ -93,7 +93,6 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import type { QTable } from 'quasar'
 import TableSlotHeader from './components/TableSlotHeader.vue'
 import TableColumnsSelector from './components/TableColumnsSelector.vue'
 import TableSlotBody from './components/TableSlotBody.vue'
@@ -259,8 +258,9 @@ export default defineComponent({
       this.$emit('onUpdateCustomizedCheckboxValue', row)
     },
     clearTableSelection () {
-      const table = this.$refs.myTable as QTable
-      table.clearSelection()
+      // const table = this.$refs.myTable as QTable
+      // table.clearSelection()
+      this.selected = []
     },
     toggleSearchVisibility (store: {disableScannerButtons: boolean, lastFilterValue: string, valueInputFilterTable: string}) {
       this.showSearch = !this.showSearch

package/src/components/TaskNavBar/BasicNavBar.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+      <q-toolbar  class="q-toolbar-unset-height ">
+        <div class="row full-width">
+        <div class="col-6" id="date-and-employee-name">
+          <p data-cy="date" class="textFontSize text-color-light-gray ">{{date.formatDate(Date.now(), "dddd, DD MMM YYYY")}}</p>
+          <p data-cy="employeeName" class="textFontSize text-color-almost-black">{{$t('header.hello')}}, {{ employeeName }}</p>
+        </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/Lupa.svg" width="30px" @click="search"  class="cursor-pointer"/>
+        <q-img src="src/assets/icons/Menu.svg" width="30px" @click="toggleRightDrawer"  class="cursor-pointer"/>
+        </div>
+      </div>
+      </q-toolbar >
+      <q-toolbar  class="q-toolbar-unset-height ">
+        <img :src="logo" id="logo">
+      </q-toolbar>
+  </div>
+</template>
+
+<style>
+#logo {
+    display: block;
+    width: 125px;
+    height: 50px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+#date-and-employee-name > p {
+  margin-bottom: 0;
+} 
+
+#buttons .q-img {
+  margin-left: 20px;
+}
+@media only screen and (max-width: 1100px) {
+  .textFontSize{
+    font-size: 12px;
+  }
+}
+@media only screen and (max-width: 350px) {
+  #logo {
+    display: none;
+  }
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { date } from 'quasar'
+export default defineComponent({
+  name: 'BasicNavBar',
+  data() {
+    return {
+      date,
+      rightDrawerOpen: false
+    }
+  },
+  props: {
+    logo: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: 'Testing Title'
+    },
+    employeeName: {
+      type: String,
+      default: 'employeeName'
+    },
+    showBtnBack: {
+      type: Boolean,
+      default: true
+    },
+    showBtnSearch: {
+      type: Boolean,
+      default: true
+    },
+    showSearch: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['search', 'back'],
+  methods: {
+    toggleRightDrawer () {
+      console.log('toggleRightDrawer')
+    },
+    search () {
+      this.$emit('search')
+      console.log('search')
+    },
+    back () {
+      this.$emit('back')
+      console.log('back')
+    }
+  },
+})
+</script>

package/src/components/TaskNavBar/TaskNavBar.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+      <q-toolbar  class="q-toolbar-unset-height">
+        <div class="row full-width">
+        <div class="col-6">
+          <img :src="logo" id="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"/> -->
+        </div>
+      </div>
+      </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'
+export default defineComponent({
+  name: 'TaskNavBar',
+  data() {
+    return {
+      date,
+      rightDrawerOpen: false
+    }
+  },
+  props: {
+    logo: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: 'Testing Title'
+    },
+    showBtnBack: {
+      type: Boolean,
+      default: true
+    },
+    showBtnSearch: {
+      type: Boolean,
+      default: true
+    },
+    showSearch: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['search', 'back'],
+  methods: {
+    toggleRightDrawer () {
+      console.log('toggleRightDrawer')
+    },
+    search () {
+      this.$emit('search')
+      console.log('search')
+    },
+    back () {
+      this.$emit('back')
+      console.log('back')
+    }
+  },
+})
+</script>

package/src/components/{KMyButton → TaskNavBar}/index.ts

@@ -1,6 +1,6 @@
 import type { App, Plugin } from 'vue'
 
-import MyButton from './MyButton.vue'
+import TaskNavBar from './TaskNavBar.vue'
 
 import { registerComponent } from '@/utils/plugins'
 
@@ -10,9 +10,11 @@ import { registerComponent } from '@/utils/plugins'
 /** export button plugin */
 export default {
   install (app: App) {
-    registerComponent(app, 'KMyButton', MyButton)
+    registerComponent(app, 'TaskNavBar', TaskNavBar)
   }
 } as Plugin
 
 /** export button components */
-export { MyButton as KMyButton }
+export { TaskNavBar as TaskNavBar }
+
+

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './Table'
 export * from './Alert'
-export * from './Confirm'
+export * from './Confirm'
+export * from './TaskNavBar'

package/src/components/plugins.ts

@@ -1,5 +1,6 @@
 import MyTable from './Table'
 import AlertDialog from './Alert'
 import ConfirmDialog from './Confirm'
-export { MyTable, AlertDialog, ConfirmDialog }
+import TaskNavBar from './TaskNavBar'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar }
 

package/src/css/app.css

@@ -26,4 +26,14 @@
 }
 .bg-main-color {
   background-color: var(--main-color);
+}
+.text-color-light-gray {
+  color: var(--light-gray);
+}
+.text-color-almost-black {
+  color: var(--almost-black);
+}
+.q-toolbar-unset-height .q-toolbar {
+  min-height: unset;
+  padding: 0;
 }

package/src/i18n/en/index.ts

@@ -16,6 +16,12 @@ const en = {
       emptyField: 'The field cannot be empty',
       exceedCharactersTypeList: 'Field must not exceed {0} characters'
     }
+  },
+  header: {
+    hello: 'Hello'
+  },
+  global: {
+    total: 'Total'
   }
 }
 export default en

package/src/i18n/es/index.ts

@@ -16,6 +16,12 @@ const es = {
       emptyField: 'El campo no puede estar vacío',
       exceedCharactersTypeList: 'El campo no debe exceder más de {0} caracteres'
     }
+  },
+  header: {
+    hello: 'Hola'
+  },
+  global: {
+    total: 'Total'
   }
 }
 export default es

package/src/index.ts

@@ -1,11 +1,11 @@
 import '@quasar/extras/material-icons/material-icons.css'
 import { Quasar } from 'quasar'
 import { App, Plugin } from 'vue'
-import { MyTable, AlertDialog, ConfirmDialog } from './components/plugins.ts'
+import { MyTable, AlertDialog, ConfirmDialog, TaskNavBar } from './components/plugins.ts'
 import { registerPlugin, setVueInstance } from './utils/plugins.ts'
 import TranslateKeys from './i18n/translateKeys.ts'
 import { createPinia } from 'pinia'
-export { MyTable, AlertDialog, ConfirmDialog } from './components/index.ts'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar } from './components/index.ts'
 
 export type { TranslateKeys }
 // import plugins from "./components/plugins";
@@ -24,6 +24,7 @@ const plugin: Plugin = {
     registerPlugin(app, MyTable)
     registerPlugin(app, AlertDialog)
     registerPlugin(app, ConfirmDialog)
+    registerPlugin(app, TaskNavBar)
     app.use(i18n)
     app.use(pinia)
     i18n.global.locale = 'en'

package/src/layouts/MenuLayout.vue

@@ -18,6 +18,12 @@
         router.push('confirmPage')
       }"
     />
+    <q-btn
+      label="navbar"
+      @click="() => {
+        router.push('navBarPage')
+      }"
+    />
   </div>
 </template>
 <script setup lang="ts">

package/src/pages/NavBarPage.vue

@@ -0,0 +1,40 @@
+<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"
+      >
+      <q-header class="bg-main-color text-black">
+        <TaskNavBar
+        :logo="'src/assets/vue.svg'"
+        :title="'Load Preparation'"/>
+      </q-header>
+      </div>
+    </q-page>
+  </q-page-container>
+</template>
+<style>
+</style>
+<script lang="ts">
+ import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
+export default {
+  components: {
+    TaskNavBar
+  },
+  data () {
+    return {
+      rightDrawerOpen: false
+    }
+  },
+  computed: {
+  },
+  mounted () {
+   
+  },
+  methods: {
+  }
+}
+</script>

package/src/pages/TablePage.vue

@@ -50,7 +50,7 @@ import Table from '../components/Table/Table.vue'
 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'
+import { tableStore } from '../store/table.js'
 export default {
   components: {
     Table

package/src/router/routes.ts

@@ -17,6 +17,10 @@ const routes: RouteRecordRaw[] = [
     path: '/confirmPage',
     component: () => import('../pages/ConfirmPage.vue')
   },
+  {
+    path: '/navBarPage',
+    component: () => import('../pages/NavBarPage.vue')
+  },
 ]
 
 export default routes

package/src/store/table.js

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { useStorage } from '@vueuse/core'
-const tableStore = defineStore('tableStore', {
+export const tableStore = defineStore('tableStore', {
   state: () => ({
     disableScannerButtons: useStorage('counter', false),
     filterValue: useStorage('filterValue', ''),
@@ -21,5 +21,3 @@ const tableStore = defineStore('tableStore', {
 
   }
 })
-
-export default tableStore

package/dist/components/KMyButton/MyButton.vue.d.ts

@@ -1,27 +0,0 @@
-import { QBtn } from 'quasar';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    label: {
-        type: StringConstructor;
-        required: true;
-    };
-    color: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {
-    onClick: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: StringConstructor;
-        required: true;
-    };
-    color: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    color: string;
-}, {}, {
-    QBtn: import("quasar").ComponentConstructor<QBtn>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/store/plugin.d.ts

@@ -1,2 +0,0 @@
-import TableStore from './table.js';
-export { TableStore };

package/src/components/KMyButton/MyButton.vue

@@ -1,36 +0,0 @@
-<template>abc<q-btn :label="label" :color="color" @click="onClick" /></template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { QBtn } from 'quasar'
-
-export default defineComponent({
-  name: 'MyButton',
-  components: {
-    QBtn
-  },
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    color: {
-      type: String,
-      default: 'primary'
-    }
-  },
-  setup(props) {
-    const onClick = () => {
-      console.log(`${props.label} button clicked!`)
-    }
-
-    return {
-      onClick
-    }
-  }
-})
-</script>
-
-<style scoped>
-/* Custom styles for your button */
-</style>

package/src/store/index.ts

@@ -1 +0,0 @@
-export { default as tableStore } from './table.js';

package/src/store/plugin.ts

@@ -1,3 +0,0 @@
-import TableStore from './table.js'
-export { TableStore }
-