quasar-factory-lib 0.0.57 → 0.0.59

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "author": ""
 }

package/src/components/ConfirmedTask/ConfirmedTask.vue

@@ -84,42 +84,4 @@ export default defineComponent({
 </script>
 
 <style>
-#confirmed-task .counter{
-  font-size: 60px;
-  text-align: center;
-}
-
-#confirmed-task.msg-text{
-  font-size: 20px;
-  text-align: center;
-  margin: auto;
-}
-#confirmed-task .q-btn {
-  font-size: 20px;
-}
-#confirmed-task .q-btn:nth-child(2) {
-  border: 1px solid #212427;
-}
-#confirmed-task img {
-    width: 70px;
-  }
-
-@media only screen and (max-width: 700px) {
-#confirmed-task  .counter{
-    font-size: 40px;
-  }
-
-#confirmed-task .msg-text{
-    font-size: 15px;
-    text-align: center;
-    margin: auto;
-  }
-
-#confirmed-task  img {
-    width: 50px;
-  }
-#confirmed-task .q-btn {
-    font-size: 15px;
-  }
-}
 </style>

package/src/components/ConfirmedTask/style.css

@@ -0,0 +1,39 @@
+
+#confirmed-task .counter{
+  font-size: 60px;
+  text-align: center;
+}
+
+#confirmed-task.msg-text{
+  font-size: 20px;
+  text-align: center;
+  margin: auto;
+}
+#confirmed-task .q-btn {
+  font-size: 20px;
+}
+#confirmed-task .q-btn:nth-child(2) {
+  border: 1px solid #212427;
+}
+#confirmed-task img {
+    width: 70px;
+  }
+
+@media only screen and (max-width: 700px) {
+#confirmed-task  .counter{
+    font-size: 40px;
+  }
+
+#confirmed-task .msg-text{
+    font-size: 15px;
+    text-align: center;
+    margin: auto;
+  }
+
+#confirmed-task  img {
+    width: 50px;
+  }
+#confirmed-task .q-btn {
+    font-size: 15px;
+  }
+}

package/src/components/NavBarSkeleton/NavBarSkeleton.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <q-card style="width: 100%" class="q-mb-sm">
+      <q-item>
+        <q-item-section>
+          <q-item-label>
+            <q-skeleton  size="20px" class="float-right"/>
+            <q-skeleton type="text" width="100px" height="50px" />
+            <q-skeleton type="text" width="250px" />
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-if="!smallDevice">
+        <q-item-section>
+          <q-item-label>
+            <q-skeleton
+            type="QInput"
+            width="200px"
+            height="40px"
+            class="float-left q-mr-md"
+          />
+          <q-skeleton
+            type="QInput"
+            width="200px"
+            height="40px"
+            class="float-left"
+          />
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item  v-if="!smallDevice">
+        <q-item-section>
+          <q-item-label>
+            <q-skeleton
+            type="text"
+            width="30px"
+          />
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-card>
+  </div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'ToolbarSkeleton',
+  props: {
+    smallDevice: {
+      type: Boolean,
+      required: true
+    }
+  }
+}
+</script>

package/src/components/NavBarSkeleton/index.ts

@@ -0,0 +1,19 @@
+import type { App, Plugin } from 'vue'
+
+import NavBarSkeleton from './NavBarSkeleton.vue'
+
+import { registerComponent } from '@/utils/plugins'
+
+/** export button specific types */
+// export type * from './types'
+
+/** export button plugin */
+export default {
+  install (app: App) {
+    registerComponent(app, 'NavBarSkeleton', NavBarSkeleton)
+  }
+} as Plugin
+
+/** export button components */
+export { NavBarSkeleton as NavBarSkeleton }
+

package/src/components/TableRowsCounter/TableRowsCounter.vue

@@ -0,0 +1,33 @@
+<template>
+<div>
+  <q-toolbar class="q-px-none q-py-none">
+  <div v-for="(item, index) in counterJson" :key="index" class="inline q-mr-md">
+    <span :data-cy="item.dataCy"  
+      style="font-size: 20px; padding-right: 5px;"
+      :class="item.extraClasses">{{ item.qty }}</span>
+    <span style="font-size: 12px;">{{ $t(item.title) }}</span>
+  </div>
+</q-toolbar>
+</div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'TableRowsCounter',
+  data() {
+    return {
+
+    }
+  },
+  props: {
+  counterJson: {
+    type: Array,
+    required: true
+  }
+  },
+  methods: {
+  }
+})
+</script>  
+<style>
+</style>

package/src/components/TableRowsCounter/index.ts

@@ -0,0 +1,19 @@
+import type { App, Plugin } from 'vue'
+
+import TableRowsCounter from './TableRowsCounter.vue'
+
+import { registerComponent } from '@/utils/plugins'
+
+/** export button specific types */
+// export type * from './types'
+
+/** export button plugin */
+export default {
+  install (app: App) {
+    registerComponent(app, 'TableRowsCounter', TableRowsCounter)
+  }
+} as Plugin
+
+/** export button components */
+export { TableRowsCounter as TableRowsCounter }
+

package/src/components/TaskNavBar/TaskNavBar.vue

@@ -56,6 +56,8 @@ import { defineComponent } from 'vue'
 import { date } from 'quasar'
 export default defineComponent({
   name: 'TaskNavBar',
+  components: {
+  },
   data() {
     return {
       date,
@@ -79,6 +81,10 @@ export default defineComponent({
     showBtnSearch: {
       type: Boolean,
       default: true
+    },
+    showSkeleton: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['onClickBtnMenu', 'onClickBtnSearch', 'onClickBtnBack'],

package/src/components/index.ts

@@ -2,4 +2,6 @@ export * from './Table'
 export * from './Alert'
 export * from './Confirm'
 export * from './TaskNavBar'
-export * from './ConfirmedTask'
+export * from './ConfirmedTask'
+export * from './TableRowsCounter'
+export * from './NavBarSkeleton'

package/src/components/plugins.ts

@@ -3,5 +3,7 @@ import AlertDialog from './Alert'
 import ConfirmDialog from './Confirm'
 import TaskNavBar from './TaskNavBar'
 import ConfirmedTask from './ConfirmedTask'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask }
+import TableRowsCounter from './TableRowsCounter'
+import NavBarSkeleton from './NavBarSkeleton'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton }
 

package/src/css/app.css

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

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, TaskNavBar, ConfirmedTask } from './components/plugins.ts'
+import { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton} 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, TaskNavBar, ConfirmedTask } from './components/index.ts'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton } from './components/index.ts'
 
 export type { TranslateKeys }
 // import plugins from "./components/plugins";
@@ -26,6 +26,8 @@ const plugin: Plugin = {
     registerPlugin(app, ConfirmDialog)
     registerPlugin(app, TaskNavBar)
     registerPlugin(app, ConfirmedTask)
+    registerPlugin(app, TableRowsCounter)
+    registerPlugin(app, NavBarSkeleton)
     app.use(i18n)
     app.use(pinia)
     i18n.global.locale = 'en'

package/src/layouts/PdaLayout.vue

@@ -16,6 +16,11 @@
             @on-click-btn-search="toggleSearchVisibility"
             @on-click-btn-menu="toogleColumnsSelectorVisibility">
           </TaskNavBar>
+          <TableRowsCounter :counterJson="[
+            { qty: 1, title: 'Total',  dataCy: 'datacy', extraClasses: 'class'},
+            { qty: 10, title: 'Total2',  dataCy: 'datacy', extraClasses: 'text-color-positive'},
+            { qty: 30, title: 'Total3',  dataCy: 'datacy', extraClasses: 'text-color-negative-bold'}
+          ]"/>
         </div>
       </q-header>
       <q-page-container>
@@ -60,6 +65,7 @@
 import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
 import Table from '../components/Table/Table.vue'
 import SideBar from '../components/TaskNavBar/SideBar.vue'
+import TableRowsCounter from'../components/TableRowsCounter/TableRowsCounter.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 import infiniteScroll from '../components/Table/utils/infiniteScroll'
 import { tableStore } from '../store/table.js'
@@ -67,7 +73,8 @@ export default {
   components: {
     TaskNavBar,
     SideBar,
-    Table
+    Table,
+    TableRowsCounter
   },
   data () {
     return {

package/src/pages/NavBarPage.vue

@@ -10,7 +10,8 @@
       <q-header class="bg-main-color text-black">
         <TaskNavBar
         :logo="'src/assets/vue.svg'"
-        :title="'Testing new navbar'">
+        :title="'Testing new navbar'"
+        :showSkeleton="showSkeleton">
       </TaskNavBar>
       </q-header>
       </div>
@@ -27,13 +28,16 @@ export default {
   },
   data () {
     return {
-      rightDrawerOpen: false
+      rightDrawerOpen: false,
+      showSkeleton: true
     }
   },
   computed: {
   },
   mounted () {
-   
+  //  setTimeout(() => {
+  //   this.showSkeleton = false
+  //  }, 1000)
   },
   methods: {
   }