quasar-factory-lib 0.1.2 → 0.1.4

package/package.json

@@ -98,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "author": ""
 }

package/src/components/FormSkeleton/FormSkeleton.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <q-card style="width: 320px; max-width: 320px;">
+      <q-item>
+        <q-item-section>
+          <q-item-label caption>
+            <q-skeleton type="text" />
+          </q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-skeleton type="circle" animation="fade" size="30px" />
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section>
+          <q-item-label v-for="n in numInputs" :key="n" caption>
+            <q-skeleton type="QInput" />
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-card-actions align="right" class="q-gutter-md">
+        <q-skeleton type="QBtn" v-for="n in numButtons" :key="n"/>
+      </q-card-actions>
+    </q-card>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'FormSkeleton',
+  props: {
+    numInputs: {
+      type: Number,
+      default: 1
+    },
+    numButtons: {
+      type: Number,
+      default: 1
+    }
+  }
+})
+</script>

package/src/components/FormSkeleton/index.ts

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

package/src/components/Table/Table.vue

@@ -527,7 +527,7 @@ export default defineComponent({
         }, {} as { [key: string]: string })
     },
     handleInfiniteScrollTableCompositionAPi () {
-      const offSet = this.showAdvancedFilter   && this.smallDevice ? document.getElementsByClassName('q-table__control')[0].offsetHeight : 0
+      const offSet = this.showIconAdvancedFilter   && this.smallDevice ? document.getElementsByClassName('q-table__control')[0].offsetHeight : 0
       this.$nextTick(() => {
         const elemClass = this.smallDevice ? 'q-table__grid-content' : 'q-table__middle scroll'
         const tableType = this.smallDevice ? 'Grid' : 'Table'

package/src/components/Table/css/table.css

@@ -97,3 +97,6 @@
     padding-left: 8px !important;
   }
 }
+.bg-offWhite{
+  background-color: red;
+}

package/src/components/index.ts

@@ -5,4 +5,5 @@ export * from './TaskNavBar'
 export * from './ConfirmedTask'
 export * from './TableRowsCounter'
 export * from './NavBarSkeleton'
-export * from './AlertLabelsWithError'
+export * from './AlertLabelsWithError'
+export * from './FormSkeleton'

package/src/components/plugins.ts

@@ -6,5 +6,6 @@ import ConfirmedTask from './ConfirmedTask'
 import TableRowsCounter from './TableRowsCounter'
 import NavBarSkeleton from './NavBarSkeleton'
 import AlertLabelsWithError from './AlertLabelsWithError'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError }
+import FormSkeleton from './FormSkeleton'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton }
 

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

package/src/layouts/PdaLayoutVueCompositionApi.vue

@@ -579,7 +579,7 @@ import { ref, computed, onMounted, watch } from 'vue'
     showSkeleton.value = true
     rows.value = rowsData.value
       setTimeout(()=> {
-        showSkeleton.value = false
+        // showSkeleton.value = false
   
       }, 1000)
     }