@hostlink/nuxt-light 1.6.1 → 1.6.3

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.6.1"
+  "version": "1.6.3"
 }

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

@@ -34,6 +34,8 @@ const light = useLight({
 });
 light.init(my.styles);
 
+quasar.addressbarColor.set(light.color);
+
 //set permission
 light.setPermissions(my.permissions);
 
@@ -396,7 +398,7 @@ const c1 = computed(() => {
 
                 <div class="q-mx-sm">
                     <l-fav-menu :value="myFavorites" :dense="style.dense" v-if="myFavoritesCount > 0" />
-                    <l-menu v-for=" menu  in  menus " :value="menu" :dense="style.dense" />
+                    <l-menu :value="menus" :dense="style.dense" />
 
                 </div>
 

package/dist/runtime/components/l-fav-menu.vue

@@ -16,13 +16,14 @@ const color2 = computed(() => {
     return c;
 });
 
+
 </script>
 
 <style scoped>
 .menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,v-bind(color1),v-bind(color2));color:#fff}
 </style>
 <template>
-    <q-expansion-item :label="$t('My favorite')" :dense="dense" ref="expansion" icon="sym_o_favorite">
+    <q-expansion-item :label="$t('My favorite')" :dense="dense" icon="sym_o_favorite">
         <q-list class="q-pl-md menu-list">
             <q-item v-ripple :to="item.path" v-for="item in value">
                 <q-item-section avatar>
@@ -31,6 +32,7 @@ const color2 = computed(() => {
                 <q-item-section>
                     <q-item-label v-text="$t(item.label)"></q-item-label>
                 </q-item-section>
+                
             </q-item>
         </q-list>
     </q-expansion-item>

package/dist/runtime/components/l-file-manager.vue

@@ -204,7 +204,6 @@ const breadcrumbs = computed(() => {
 });
 
 const onClickRow = (evt, row, index) => {
-  console.log("click row", row)
   if (row.type == "folder") {
     preview.value = null;
     return;

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

@@ -1,6 +1,6 @@
 <script setup>
 import { useLight } from "#imports";
-import { ref, reactive, onMounted, inject } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useQuasar, Notify, Dialog } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { m, notify } from '#imports';
@@ -170,13 +170,8 @@ onMounted(() => {
         logo_alignment: 'left'
       }
     );
-
   }
-
 })
-
-
-
 </script>
 
 <template>
@@ -187,18 +182,29 @@ onMounted(() => {
           <q-img src="https://raw.githubusercontent.com/HostLink/.github/master/profile/logo.webp" class="full-width" />
         </template>
       </q-img>
-
       <div class="text-h6">
         {{ light.getCompany() }}
       </div>
       <q-form ref="form1">
         <div class="q-gutter-sm">
           <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
-            clearable :outlined="false" stackLabel autocomplete="username" />
+            clearable :outlined="false" stackLabel autocomplete="username">
+            <template v-slot:prepend>
+              <q-icon name="sym_o_person" />
+            </template>
+          </l-input>
           <l-input v-model="data.password" label="Password" type="password" clearable show-password stackLabel
             :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false"
-            autocomplete="current-password" />
-          <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
+            autocomplete="current-password">
+            <template v-slot:prepend>
+              <q-icon name="sym_o_lock" />
+            </template>
+          </l-input>
+          <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code"
+            :rules="[v => !!v || $t('2FA code is required')]" type="text" clearable stackLabel :outlined="false">
+            <template v-slot:prepend>
+              <q-icon name="sym_o_key" />
+            </template>
           </l-input>
         </div>
       </q-form>

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

@@ -2,40 +2,14 @@
 import { ref, computed } from 'vue'
 import { useLight } from '#imports'
 const props = defineProps(["value", "dense"])
-const menus = ref(null);
 const light = useLight();
 
-const expansion = ref(null);
-
-const onShowChild = (menu) => {
-    menus.value.forEach((m) => {
-        if (m.value() !== menu) {
-            m.hide()
-        }
-    })
-}
-
-defineExpose({
-    hide: () => {
-        if (expansion.value) {
-            expansion.value.hide();
-        }
-    },
-    value: () => {
-        return props.value;
-    }
-})
-
-const isShowExpansionItem = computed(() => {
-    if (props.value.children) {
-        if (props.value.children.length > 0) {
-            return true;
-
-        }
+const isShowExpansionItem = (menu) => {
+    if (menu.children && menu.children.length > 0) {
+        return true;
     }
     return false;
-
-});
+};
 
 const color1 = computed(() => {
     return light.getColorValue()
@@ -48,28 +22,36 @@ const color2 = computed(() => {
     return c;
 });
 
+//generate a random group name
+const group = Math.random().toString(36).substring(7);
 </script>
 
 <style scoped>
 .menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,v-bind(color1),v-bind(color2));color:#fff}
 </style>
 <template>
-    <q-expansion-item v-if="isShowExpansionItem" :label="$t(value.label)" :icon="value.icon" :dense="dense" ref="expansion">
-        <q-list class="q-pl-md">
-            <l-menu :value="menu" v-for="menu in value.children" :dense="dense" @show="onShowChild(menu)"
-                ref="menus"></l-menu>
-        </q-list>
-    </q-expansion-item>
-    <q-list v-else class="menu-list" :dense="dense">
-        <q-separator v-if="value.type == 'separator'" :spaced="value.spaced" />
-        <q-item-label header v-if="value.type == 'header'">{{ value.label }}</q-item-label>
-        <q-item v-ripple :to="value.to" v-if="!value.type">
-            <q-item-section avatar>
-                <q-icon :name="value.icon" />
-            </q-item-section>
-            <q-item-section>
-                <q-item-label v-text="$t(value.label)"></q-item-label>
-            </q-item-section>
-        </q-item>
+    <q-list class="menu-list" :dense="dense">
+        <template v-for="menu in value">
+
+            <q-expansion-item  :label="$t(menu.label)" :icon="menu.icon" :dense="dense" v-if="isShowExpansionItem(menu)"
+                :group="group">
+                <l-menu class="q-pl-md" :value="menu.children" :dense="dense"></l-menu>
+            </q-expansion-item>
+
+            <template v-else>
+                <q-separator v-if="menu.type == 'separator'" :spaced="menu.spaced" />
+                <q-item-label header v-if="menu.type == 'header'">{{ menu.label }}</q-item-label>
+
+                <q-item v-ripple :to="menu.to" v-if="!value.type">
+                    <q-item-section avatar>
+                        <q-icon :name="menu.icon" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label v-text="$t(menu.label)"></q-item-label>
+                    </q-item-section>
+                </q-item>
+            </template>
+
+        </template>
     </q-list>
 </template>

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

@@ -375,8 +375,7 @@ const getFilterValue = () => {
 
 
 const onFilters = () => {
-    console.log("onFilters", filters.value)
-
+    
     //clone the filters
     onRequest({
         pagination: {
@@ -493,7 +492,6 @@ const localSelected = computed({
         return props.selected;
     },
     set(val) {
-        console.log(val)
         emits("update:selected", val);
     }
 });
@@ -604,13 +602,13 @@ const localSelected = computed({
                         <template v-if="col.searchType == 'number'">
                             <q-input style="min-width: 80px;" dense clearable filled square
                                 v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters" @clear="onFilters"
-                                mask="##########"></q-input>
+                                mask="##########" enterkeyhint="search"></q-input>
                         </template>
 
                         <template v-if="col.searchType == 'select'">
                             <q-select dense clearable filled square v-model="filters[col.name]"
                                 @update:model-value="onFilters" options-dense :options="col.searchOptions" emit-value
-                                map-options :multiple="col.searchMultiple" />
+                                map-options :multiple="col.searchMultiple" :color="$light.color" />
 
                         </template>
 
@@ -622,7 +620,8 @@ const localSelected = computed({
 
                         <template v-if="!col.searchType">
                             <q-input style="min-width: 80px;" dense clearable filled square v-model="filters[col.name]"
-                                @keydown.enter.prevent="onFilters" @clear="onFilters" enterkeyhint="search"></q-input>
+                                @keydown.enter.prevent="onFilters" @clear="onFilters" enterkeyhint="search"
+                                :color="$light.color"></q-input>
 
                         </template>
 

package/dist/runtime/formkit/Select.vue

@@ -14,8 +14,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-//console.log(props.context.node.props.parsedRules);
-
 //check required in parsedRules
 let required = false;
 for (let rule of props.context.node.props.parsedRules ?? []) {

package/dist/runtime/pages/System/menu/index.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
 import { m, q } from '#imports'
-import { useQuasar } from 'quasar';
+import { useQuasar, Dialog } from 'quasar';
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const quasar = useQuasar();
 const appMenus = await q("appMenus", [])
 
@@ -38,14 +40,14 @@ const onReload = async () => {
 
 const onAddChild = (node) => {
 
-    quasar.dialog({
-        title: 'Add Child Menu',
-        message: 'Enter menu label',
+    Dialog.create({
+        title: t('Add child menu'),
+        message: t('Enter menu label'),
         prompt: {
             model: '',
         },
         cancel: true,
-        persistent: true,
+        persistent: true
     }).onOk((data) => {
         if (data === '') return;
 

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

@@ -1,8 +1,6 @@
 <script setup>
 import { reactive } from "vue"
-import { useRouter } from "vue-router";
 import { q } from '#imports'
-const router = useRouter()
 const obj = reactive({
     username: null,
     password: null,

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

@@ -1,7 +1,7 @@
 <script setup>
-import { reactive, onMounted } from "vue"
+import { reactive, onMounted, nextTick } from "vue"
 import { Notify } from "quasar";
-import { q, m } from '../../../'
+import { q, m } from '#imports'
 let { app, my } = await q({ app: ['googleClientId'], my: ["gmail"] })
 
 my = reactive(my);
@@ -25,6 +25,7 @@ const handleGoogleCredentialResponse = async (response) => {
 }
 
 onMounted(() => {
+
     if (app.googleClientId) {
         if (!window.google) {
             Notify.create({
@@ -38,23 +39,30 @@ onMounted(() => {
         }
     }
 
-    //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'
-        }
-    );
+    //nextTick
+
+    nextTick(() => {
+
+        //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'
+            }
+        );
+
+    })
+
 
 });
 
@@ -79,7 +87,7 @@ const unlink = async () => {
                 <div>
                     <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
                 </div>
-                
+
             </q-card-section>
 
             <q-card-section v-else>

package/dist/runtime/plugin.mjs

@@ -1,4 +1,4 @@
-import { Quasar, Dialog, Notify, Loading, AppFullscreen } from "quasar";
+import { Quasar, Dialog, Notify, Loading, AppFullscreen, AddressbarColor } from "quasar";
 import { createI18n } from "vue-i18n";
 import { defineNuxtPlugin } from "#app";
 import { useRouter } from "vue-router";
@@ -60,7 +60,8 @@ export default defineNuxtPlugin((nuxtApp) => {
       Dialog,
       Notify,
       Loading,
-      AppFullscreen
+      AppFullscreen,
+      AddressbarColor
     }
   });
   let locale = localStorage.getItem("locale") || "en";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "nuxi dev playground",
+    "dev": "nuxi dev playground --host",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
     "release:org": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",