@hostlink/nuxt-light 0.0.75 → 0.0.77

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.75"
+  "version": "0.0.77"
 }

package/dist/runtime/components/l-app-main.vue

@@ -5,12 +5,10 @@ import { useLight, q, getCurrentUser, m, f } from '../';
 import { ref, computed, reactive, provide, watch } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
-
 const config = useRuntimeConfig();
 
 const appVersion = config.public.appVersion ?? '0.0.1';
 
-
 const quasar = useQuasar();
 quasar.dark.set(false);
 const light = useLight();
@@ -36,6 +34,7 @@ if (my.granted_storage) {
 
 light.setStyles(my.styles);
 
+
 const menus = ref(app.menus)
 
 const i18n = useI18n();
@@ -62,15 +61,11 @@ const toggleRightDrawer = () => {
     rightDrawerOpen.value = !rightDrawerOpen.value
 }
 
-
-let isAdmin = false;
 let showViewAs = false;
 if (user.value && user.value.roles.indexOf('Administrators') != -1) {
-    isAdmin = true;
     showViewAs = true;
 }
 
-
 const menuOverlayHeader = ref(false)
 const layoutView = computed(() => {
     let s = ''
@@ -86,10 +81,8 @@ const style = reactive({
     dense: my.styles?.dense || false
 });
 
-
 const isMouseOnDrawer = ref(false)
 
-
 const isMini = computed(() => {
     if (isMouseOnDrawer.value) {
         return false
@@ -144,6 +137,9 @@ watch(() => style.color, async (value) => {
         name: "color",
         value: value
     })
+
+    my.styles["color"] = value;
+    light.setStyles(my.styles);
 })
 
 watch(() => style.theme, async (value) => {
@@ -165,7 +161,6 @@ const exitViewAs = async () => {
     window.location.reload();
 }
 
-
 const storageColor = computed(() => {
     if (system) {
         if (system.diskFreeSpacePercent < 0.05) {
@@ -196,12 +191,11 @@ const storageUsagePercent = computed(() => {
     return 0;
 })
 
-
 </script>
 
 <template>
     <q-layout :view="layoutView">
-        <q-header bordered class="text-white" :class="style.color">
+        <q-header bordered class="text-white" :class="`bg-${style.color}`">
             <q-toolbar>
                 <q-btn dense flat round icon="menu" class="q-mr-sm" @click="toggleLeftDrawer" />
 
@@ -247,13 +241,10 @@ const storageUsagePercent = computed(() => {
                     </div>
 
                     <div class="text-right">
-                        {{ user.roles.join(",") }}
+                        {{ user.roles[0] }}
                     </div>
                 </div>
 
-
-
-
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
                     <q-menu max-width="250px">
                         <q-list>

package/dist/runtime/components/l-card.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useLight } from '../'
-import { useAttrs } from 'vue'
+import { useAttrs, ref } from 'vue'
 
 defineProps({
     loading: Boolean,
@@ -16,16 +16,25 @@ const attrs = {
         bordered: light.getStyle("cardBordered", true),
         square: light.getStyle("cardSquare", false),
     }, ...useAttrs()
-
 }
 
+const color = light.getStyle("color", 'primary');
+
+const cl = ["text-white", `bg-${color}`];
+
+const minimize = ref(true);
 </script>
 <template>
     <q-card v-bind="attrs">
-        <q-toolbar v-if="title">
-            <q-toolbar-title>{{ title }}</q-toolbar-title>
-        </q-toolbar>
-        <slot></slot>
+        <q-bar :class="cl" v-if="title">
+            <div>{{ title }}</div>
+            <q-space />
+            <q-btn dense flat icon="sym_o_remove" @click="minimize = !minimize" />
+        </q-bar>
+        <template v-if="minimize">
+            <slot></slot>
+        </template>
+
 
         <q-inner-loading :showing="loading" label="Please wait..." label-class="text-primary" />
     </q-card>

package/dist/runtime/components/l-customizer.vue

@@ -1,12 +1,32 @@
 <script setup>
 const COLORS = [
-    'bg-primary',
-    'bg-secondary',
-    'bg-positive',
-    'bg-negative',
-    'bg-info',
-    'bg-warning',
-    'bg-dark'
+    'primary',
+    'secondary',
+    'positive',
+    'negative',
+    'info',
+    'warning',
+    'dark',
+    'red',
+    'pink',
+    'purple',
+    'deep-purple',
+    'indigo',
+    'blue',
+    'light-blue',
+    'cyan',
+    'teal',
+    'green',
+    'light-green',
+    'lime',
+    'yellow',
+    'amber',
+    'orange',
+    'deep-orange',
+    'brown',
+    'grey',
+    'blue-grey'
+
 ]
 
 defineEmits(['update:theme', 'update:menuOverlayHeader', 'update:dense', 'update:headerColor', 'update:miniState'])
@@ -62,7 +82,7 @@ const props = defineProps({
             <q-item-section>
                 <q-item-label>Header color</q-item-label>
                 <div class="row">
-                    <div v-for="c in COLORS" :key="c" :class="c" style="width: 1.5rem; height: 1.5rem;"
+                    <div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
                         class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:headerColor', c)" />
                 </div>
             </q-item-section>

package/dist/runtime/components/l-page.vue

@@ -71,11 +71,7 @@ if (props.addBtn) {
     showAddBtn = true
 }
 
-//const title = props.title || route.path.split("/")[1];
-
-//title split by Capital letter, but if Captial letter is followed by another Capital letter, it is not split
-const title = props.title || route.path.split("/")[1].replace(/([A-Z])(?=[A-Z])/g, '$1 ').replace(/([a-z])(?=[A-Z])/g, '$1 ');
-
+const title = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
 const module = route.path.split("/")[1];
 const onDelete = async () => {
 

package/dist/runtime/components/l-tabs.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { useLight } from '../'
 import { useSlots, computed, ref } from 'vue';
 
+const light = useLight();
 const props = defineProps(["modelValue"])
 const emit = defineEmits(["update:modelValue"])
 const slots = useSlots();
@@ -30,11 +32,13 @@ const localValue = computed({
     }
 })
 
+const color = light.getStyle("color", 'primary');
+
 </script>
 
 <template>
     <l-card>
-        <q-tabs class="text-grey" active-color="primary" indicator-color="primary" align="justify" v-model="localValue">
+        <q-tabs class="text-grey" :active-color="color" :indicator-color="color" align="justify" v-model="localValue">
             <q-tab v-for="tab in tabContents" :label="$t(tab.label)" :name="tab.name"></q-tab>
         </q-tabs>
         <q-tab-panels v-model="localValue">

package/dist/runtime/pages/User/setting/open_id.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { reactive, onMounted } from "vue"
+import { Notify } from "quasar";
+import { q, m } from '../../../'
+let { app, my } = await q({ app: ['googleClientId'], my: ["gmail"] })
+
+my = reactive(my);
+
+const handleGoogleCredentialResponse = async (response) => {
+    try {
+        await m("googleRegister", { credential: response.credential })
+
+        const resp = await q("my", ["gmail"]);
+        my.gmail = resp.gmail;
+
+        Notify.create({
+            message: "Google account linked",
+            color: "positive",
+            position: "top",
+            timeout: 2000
+        });
+    } catch (e) {
+        console.log(e)
+    }
+}
+
+onMounted(() => {
+    if (app.googleClientId) {
+        if (!window.google) {
+            Notify.create({
+                message: "Google login is not available", //set script https://accounts.google.com/gsi/client in nuuxt.config.js
+                color: "negative",
+                icon: "sym_o_error",
+                position: "top",
+                timeout: 2000
+            });
+            return;
+        }
+    }
+
+    //google 
+    google.accounts.id.initialize({
+        client_id: app.googleClientId,
+        callback: handleGoogleCredentialResponse,
+    });
+
+    google.accounts.id.renderButton(
+        document.getElementById('g_id_signin'),
+        {
+            type: 'profile',
+            shape: 'pill',
+            theme: 'outline',
+            text: 'signin_with',
+            size: 'large',
+            logo_alignment: 'left'
+        }
+    );
+
+});
+
+const unlink = async () => {
+    await m("unlinkGoogle");
+    my.gmail = null;
+    window.location.reload();
+}
+
+</script>
+<template>
+    <l-card :bordered="false">
+
+        <template v-if="app.googleClientId">
+            <q-card-section v-if="my.gmail">
+                You have already linked your Google account.<br />
+
+                Your gmail is {{ my.gmail }}
+
+
+
+                <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
+            </q-card-section>
+
+            <q-card-section v-else>
+                Click the button below to link your Google account.
+                <div id="g_id_signin"></div>
+            </q-card-section>
+        </template>
+
+        <q-card-section v-else>
+            Google login is not available. Please set GOOGLE_CLIENT_ID in server settings.
+        </q-card-section>
+
+    </l-card>
+</template>

package/dist/runtime/pages/User/setting.vue

@@ -23,6 +23,8 @@ const route = useRoute()
                             replace />
                         <q-route-tab name="bio" icon="sym_o_fingerprint" :label="$t('Bio')" to="/User/setting/bio-auth"
                             exact replace />
+                        <q-route-tab name="openid" icon="sym_o_key" :label="$t('Open ID')" to="/User/setting/open_id" exact replace />
+
                     </q-tabs>
                 </template>
 

package/dist/runtime/routes.mjs

@@ -121,6 +121,11 @@ function User_setting_information() {
     /* webpackChunkName: "User-setting-information" */ './pages/User/setting/information.vue'
   )
 }
+function User_setting_open_id() {
+  return import(
+    /* webpackChunkName: "User-setting-open_id" */ './pages/User/setting/open_id.vue'
+  )
+}
 function User_setting_password() {
   return import(
     /* webpackChunkName: "User-setting-password" */ './pages/User/setting/password.vue'
@@ -317,6 +322,11 @@ export default [
         path: 'information',
         component: User_setting_information,
       },
+      {
+        name: 'User-setting-open_id',
+        path: 'open_id',
+        component: User_setting_open_id,
+      },
       {
         name: 'User-setting-password',
         path: 'password',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",