quasar-factory-lib 0.1.8 → 0.1.10

package/package.json

@@ -98,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "author": ""
 }

package/src/components/ListSkeleton/ListSkeleton.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="q-pa-md">
+    <q-item>
+      <q-item-section>
+        <q-item-label>
+          <q-skeleton type="text" />
+        </q-item-label>
+        <q-item-label caption>
+          <q-skeleton
+            type="text"
+            width="65%"
+          />
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section>
+        <q-item-label>
+          <q-skeleton type="text" />
+        </q-item-label>
+        <q-item-label caption>
+          <q-skeleton
+            type="text"
+            width="90%"
+          />
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section>
+        <q-item-label>
+          <q-skeleton
+            type="text"
+            width="50%"
+          />
+        </q-item-label>
+        <q-item-label caption>
+          <q-skeleton type="text" />
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section>
+        <q-item-label>
+          <q-skeleton
+            type="text"
+            width="35%"
+          />
+        </q-item-label>
+        <q-item-label caption>
+          <q-skeleton type="text" />
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </div>
+</template>
+<script lang="ts">
+  export default {
+    name: 'ListSkeleton',
+  }
+</script>
+<style></style>

package/src/components/ListSkeleton/index.ts

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

package/src/components/SkeletonAreas/SkeletonAreas.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card class="cardSkeleton">
+  <q-card class="skeleton-areas">
     <q-card-section>
       <q-skeleton type="QAvatar" />
       <q-skeleton
@@ -15,13 +15,5 @@
   }
 </script>
 <style scoped>
-  .cardSkeleton {
-    width: 200px;
-    height: 200px;
-  }
-  @media only screen and (max-width: 600px) {
-    .cardSkeleton {
-      width: 100%;
-    }
-  }
+@import url();
 </style>

package/src/components/SkeletonAreas/style.css

@@ -0,0 +1,9 @@
+.skeleton-areas {
+    width: 200px;
+    height: 200px;
+}
+@media only screen and (max-width: 600px) {
+    .skeleton-areas {
+        width: 100%;
+    }
+}

package/src/components/SkeletonTaskList/SkeletonTaskList.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <q-card>
+      <q-item>
+        <q-item-section>
+          <q-item-label>
+            <q-skeleton type="text" />
+          </q-item-label>
+          <q-item-label caption>
+            <q-skeleton type="text" />
+          </q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-skeleton type="QAvatar" />
+        </q-item-section>
+      </q-item>
+
+      <q-item>
+        <q-skeleton type="QBadge" />
+      </q-item>
+
+      <q-item-label>
+        <q-skeleton
+          v-for="n in 3"
+          :key="n"
+          type="text"
+        />
+      </q-item-label>
+
+      <q-card-actions>
+        <q-skeleton
+          v-for="n in 4"
+          :key="n"
+          size="25px"
+          type="QBtn"
+          class="q-mr-sm"
+        />
+      </q-card-actions>
+    </q-card>
+  </div>
+</template>
+<script lang="ts">
+  export default {
+    name: 'SkeletonTaskList',
+  }
+</script>
+<style></style>

package/src/components/SkeletonTaskList/index.ts

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

package/src/components/index.ts

@@ -7,4 +7,10 @@ export * from './TableRowsCounter'
 export * from './NavBarSkeleton'
 export * from './AlertLabelsWithError'
 export * from './FormSkeleton'
-export * from './SkeletonAreas'
+export * from './SkeletonAreas'
+export * from './ListSkeleton'
+export * from './SkeletonTaskList'
+
+
+
+

package/src/components/plugins.ts

@@ -8,5 +8,7 @@ import NavBarSkeleton from './NavBarSkeleton'
 import AlertLabelsWithError from './AlertLabelsWithError'
 import FormSkeleton from './FormSkeleton'
 import SkeletonAreas from './SkeletonAreas'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton, SkeletonAreas }
+import ListSkeleton from './ListSkeleton'
+import SkeletonTaskList from './SkeletonTaskList'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton, SkeletonAreas, ListSkeleton, SkeletonTaskList }
 

package/src/css/app.css

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

package/src/layouts/PdaLayout.vue

@@ -33,7 +33,10 @@
       />
       <q-page-container>
         <q-page>
+          <ListSkeleton/>
+          <SkeletonTaskList/>
         <Table
+          v-if="false"
           ref="table"
           :rows="rows"
           :columns="columns"
@@ -59,9 +62,6 @@
           @on-drag-end="(args) => {
             console.log(args, 'end')
           }"
-          @onUpdateSelected="(details) => {
-            console.log(details, 'details')
-          }"
         />
           <q-page-sticky
             v-if="smallDevice"
@@ -88,6 +88,8 @@ import TableRowsCounter from'../components/TableRowsCounter/TableRowsCounter.vue
 import AlertLabelsWithError from '../components/AlertLabelsWithError/AlertLabelsWithError.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 // import infiniteScroll from '../components/Table/utils/infiniteScroll'
+import ListSkeleton from '../components/ListSkeleton/ListSkeleton.vue'
+import SkeletonTaskList from '../components/SkeletonTaskList/SkeletonTaskList.vue'
 import { tableStore } from '../store/table.js'
 export default {
   components: {
@@ -95,7 +97,9 @@ export default {
     Table,
     TableRowsCounter,
     AlertLabelsWithError,
-    NavBarSkeleton
+    NavBarSkeleton,
+    ListSkeleton,
+    SkeletonTaskList
   },
   data () {
     return {
@@ -144,12 +148,8 @@ export default {
         label: 'Boolean Icon',
         align: 'left',
         sortable: true,
-        showCustomizedIcon: true, 
-        type: 'boolean',
-        customizedIconNameCaseTrue: 'warning',
-        customizedIconNameCaseFalse: 'edit',
-        customizedIconColorCaseTrue: 'negative',
-        customizedIconColorCaseFalse: 'positive',
+        showCustomizedIcon: true,
+        type: 'boolean'
       },
       {
         name: 'calories',