@usssa/component-library 1.0.0-alpha.38 → 1.0.0-alpha.39

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0
+# Component Library
 
 This library provides custom UI components for USSSA applications.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.38",
+  "version": "1.0.0-alpha.39",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/index.js

@@ -29,8 +29,10 @@ import UMenuButtonStd from './core/UMenuButtonStd.vue'
 import UBreadCrumbs from './core/UBreadCrumbs.vue'
 
 import { useNotify } from '../composables/useNotify.js'
+import { useOverlayLoader } from '../composables/useOverlayLoader.js'
 
 export {
+  useOverlayLoader,
   useNotify,
   UAvatar,
   UAvatarGroup,

package/src/composables/useOverlayLoader.js

@@ -0,0 +1,23 @@
+import { Loading, QSpinnerGears } from 'quasar'
+
+export const useOverlayLoader = () => {
+
+    const showLoader = (props) => {
+
+    Loading.show({
+        backgroundColor: props?.backgroundColor,
+        customClass: props.customClass ? props.customClass : '',
+        message: props?.message,
+        messageColor: props.messageColor ? props.messageColor: 'dark',
+        spinner: props.spinner ? props.spinner : QSpinnerGears,
+        spinnerSize: props.spinnerSize ? props.spinnerSize : '6rem',
+        spinnerColor: props?.spinnerColor
+    })
+   }
+
+  const hideLoader = () =>{
+   Loading.hide()
+  }
+ 
+  return { showLoader, hideLoader }
+}

package/src/layouts/MainLayout.vue

@@ -126,6 +126,10 @@ const components = [
     title: 'Inner Loader',
     path: '/inner-loader',
   },
+  {
+    title: 'Overlay Loader',
+    path: '/overlay-loader',
+  },
 ]
 
 const leftDrawerOpen = ref(true)

package/src/pages/OverlayLoader.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { useOverlayLoader } from '../composables/useOverlayLoader'
+import ComponentBase from './ComponentBase.vue'
+import UBtnStd from 'src/components/core/UBtnStd.vue'
+import {
+  QSpinnerGears,
+  QSpinnerFacebook,
+  QSpinnerBars,
+  QSpinnerDots,
+} from 'quasar'
+
+defineOptions({
+  name: 'OverlayLoader',
+})
+
+const { showLoader, hideLoader } = useOverlayLoader()
+const messageColors = ['dark', 'white', 'primary', 'positive', 'warning']
+const backgroundColors = ['dark', 'white', 'primary', 'positive', 'warning']
+const spinnerColors = ['dark', 'white', 'primary', 'positive', 'warning']
+const spinnerOptions = [
+  {
+    label: 'QSpinnerGears',
+    value: QSpinnerGears,
+  },
+  {
+      label: 'QSpinnerBars',
+    value: QSpinnerBars,
+  },
+  {
+    label: 'QSpinnerDots',
+    value: QSpinnerDots,
+  },
+  {
+    label: 'QSpinnerFacebook',
+    value: QSpinnerFacebook,
+  },
+]
+const customProps = ref({
+  backgroundColor: 'dark',
+  message: 'Authenticating User',
+  messageColor: 'white',
+  spinner: spinnerOptions[0],
+  spinnerSize: '6rem',
+  spinnerColor: 'white',
+})
+
+const htmlContent = ` 
+const { showLoader, hideLoader } = useOverlayLoader()
+
+--To show the loader--
+
+showLoader({
+    backgroundColor:props.backgroundColor,
+    message: props..message,
+    messageColor: props.messageColor
+    spinner: props.spinner
+    spinnerSize: props.spinnerSize,
+    spinnerColor: props.spinnerColor,
+  })
+
+--To hide the loader--
+
+  hideLoader()`
+
+const showOverlayLoader = () => {
+  showLoader({
+    backgroundColor: customProps.value?.backgroundColor,
+    message: customProps.value?.message,
+    messageColor: customProps.value.messageColor,
+    spinner: customProps.value.spinner.value,
+    spinnerSize: customProps.value.spinnerSize,
+    spinnerColor: customProps.value.spinnerColor,
+  })
+
+  setTimeout(() => {
+    hideLoader()
+  }, 2000)
+}
+
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase figmaUrl="#">
+      <template v-slot:component>
+        <UBtnStd label="Show loader" color="primary" @on-click="showOverlayLoader" />
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Message" v-model="customProps.message" />
+          <q-input
+            label="Spinner size (In rem)"
+            v-model="customProps.spinnerSize"
+          />
+
+          <q-select
+            v-model="customProps.messageColor"
+            :options="messageColors"
+            label="Message color"
+          />
+          <q-select
+            v-model="customProps.backgroundColor"
+            :options="backgroundColors"
+            label="Background color"
+          />
+          <q-select
+            v-model="customProps.spinnerColor"
+            :options="spinnerColors"
+            label="Spinner color"
+          />
+          <q-select
+            v-model="customProps.spinner"
+            :options="spinnerOptions"
+            option-value="value"
+            option-label="label"
+            label="Spinner"
+          />
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/router/routes.js

@@ -127,6 +127,10 @@ const routes = [
         path: 'bread-crumbs',
         component: () => import('src/pages/BreadCrumbs.vue'),
       },
+      {
+        path: 'overlay-loader',
+        component: () => import('src/pages/OverlayLoader.vue'),
+      },
     ],
   },