@hostlink/nuxt-light 1.73.2 → 1.74.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.73.2",
+  "version": "1.74.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/L/App.vue

@@ -62,25 +62,6 @@ if (app.value.version != "dev") {
     });
   }
 }
-if (app.value.facebookAppId) {
-  (function(d, s, id) {
-    var js, fjs = d.getElementsByTagName(s)[0];
-    if (d.getElementById(id)) {
-      return;
-    }
-    js = d.createElement(s);
-    js.id = id;
-    js.src = "https://connect.facebook.net/en_US/sdk.js";
-    fjs.parentNode.insertBefore(js, fjs);
-  })(document, "script", "facebook-jssdk");
-  window.fbAsyncInit = function() {
-    FB.init({
-      appId: app.value.facebookAppId,
-      xfbml: true,
-      version: "v21.0"
-    });
-  };
-}
 </script>
 
 <template>

package/dist/runtime/components/L/AppMain.d.vue.ts

@@ -20,7 +20,7 @@ type __VLS_Props = {
     userMenuItems?: UserMenuItem[];
     headerButtons?: HeaderButton[];
 };
-declare var __VLS_38: {}, __VLS_61: `header-button-menu-${string}`, __VLS_62: {}, __VLS_132: `header-button-menu-${string}`, __VLS_133: {}, __VLS_340: {}, __VLS_482: {}, __VLS_489: {};
+declare var __VLS_38: {}, __VLS_61: `header-button-menu-${string}`, __VLS_62: {}, __VLS_132: `header-button-menu-${string}`, __VLS_133: {}, __VLS_340: {}, __VLS_501: {}, __VLS_508: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_61>]?: (props: typeof __VLS_62) => any;
 } & {
@@ -30,9 +30,9 @@ type __VLS_Slots = {} & {
 } & {
     'user-menu'?: (props: typeof __VLS_340) => any;
 } & {
-    'page-top'?: (props: typeof __VLS_482) => any;
+    'page-top'?: (props: typeof __VLS_501) => any;
 } & {
-    'page-bottom'?: (props: typeof __VLS_489) => any;
+    'page-bottom'?: (props: typeof __VLS_508) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;

package/dist/runtime/components/L/AppMain.vue

@@ -6,6 +6,7 @@ import { useI18n } from "vue-i18n";
 import { ref, computed, reactive, provide, watch, toRaw, onMounted } from "vue";
 import { useRuntimeConfig } from "nuxt/app";
 import { logout } from "@hostlink/light";
+import { filterMenuItems } from "../../utils/filterMenuItems";
 const emits = defineEmits(["logout"]);
 defineProps({
   userMenuItems: { type: Array, required: false },
@@ -69,9 +70,6 @@ light.setMyFavorites(toRaw(my.myFavorites));
 const myFavorites = computed(() => {
   return light.getMyFavorites();
 });
-const myFavoritesCount = computed(() => {
-  return light.getMyFavorites().length;
-});
 $q.dark.set(light.isDarkMode());
 const i18n = useI18n();
 i18n.locale.value = my.language || "en";
@@ -81,8 +79,26 @@ for (let t of app.i18nMessages) {
   messages[t.name] = t.value;
 }
 i18n.setLocaleMessage(i18n.locale.value, messages);
-const menus = ref(app.menus);
-const my_menus = ref(my.menu);
+const menus = ref(app.menus || []);
+const my_menus = ref(my.menu || []);
+const menuSearch = ref("");
+const translateMenuLabel = (label) => i18n.t(label);
+const filteredMenus = computed(
+  () => filterMenuItems(menus.value, menuSearch.value, translateMenuLabel)
+);
+const filteredMyMenus = computed(
+  () => filterMenuItems(my_menus.value, menuSearch.value, translateMenuLabel)
+);
+const filteredMyFavorites = computed(
+  () => filterMenuItems(myFavorites.value, menuSearch.value, translateMenuLabel)
+);
+const normalizedMenuSearch = computed(
+  () => (menuSearch.value || "").trim().toLocaleLowerCase()
+);
+const isSearchingMenu = computed(() => normalizedMenuSearch.value.length > 0);
+const hasMenuSearchResults = computed(
+  () => filteredMyMenus.value.length > 0 || filteredMyFavorites.value.length > 0 || filteredMenus.value.length > 0
+);
 const leftDrawerOpen = ref(false);
 const rightDrawerOpen = ref(false);
 const toggleLeftDrawer = () => {
@@ -142,8 +158,8 @@ const reloadMenu = async () => {
       menu: true
     }
   });
-  menus.value = app2.menus;
-  my_menus.value.menu = my2.menu;
+  menus.value = app2.menus || [];
+  my_menus.value = my2.menu || [];
 };
 provide("reloadMenu", reloadMenu);
 watch(() => style.footer, async (value) => await light.setStyle("footer", value));
@@ -413,9 +429,26 @@ const onLogout = async () => {
             <!-- drawer content -->
             <q-scroll-area class="fit">
                 <div class="q-mx-xs q-mt-xs">
-                    <l-menu :value="my_menus" :dense="style.dense" />
-                    <l-fav-menu :value="myFavorites" :dense="style.dense" v-if="myFavoritesCount > 0" />
-                    <l-menu :value="menus" :dense="style.dense" />
+                    <q-input v-if="!isMini" v-model="menuSearch" :placeholder="$t('Search menu')" dense outlined
+                        clearable :dark="menuDark" class="q-mb-sm" input-class="text-body2"
+                        :aria-label="$t('Search menu')" @keyup.esc="menuSearch = ''">
+                        <template #prepend>
+                            <q-icon name="sym_o_search" />
+                        </template>
+                    </q-input>
+
+                    <l-menu :key="`my-${normalizedMenuSearch}`" :value="filteredMyMenus" :dense="style.dense"
+                        :expand-all="isSearchingMenu" />
+                    <l-fav-menu :value="filteredMyFavorites" :dense="style.dense"
+                        :expand-all="isSearchingMenu" v-if="filteredMyFavorites.length > 0" />
+                    <l-menu :key="`app-${normalizedMenuSearch}`" :value="filteredMenus" :dense="style.dense"
+                        :expand-all="isSearchingMenu" />
+
+                    <div v-if="isSearchingMenu && !hasMenuSearchResults"
+                        class="column items-center text-grey-6 q-pa-lg">
+                        <q-icon name="sym_o_search_off" size="md" class="q-mb-sm" />
+                        <span>{{ $t("No matching menu") }}</span>
+                    </div>
                 </div>
             </q-scroll-area>
         </q-drawer>

package/dist/runtime/components/L/AppMain.vue.d.ts

@@ -20,7 +20,7 @@ type __VLS_Props = {
     userMenuItems?: UserMenuItem[];
     headerButtons?: HeaderButton[];
 };
-declare var __VLS_38: {}, __VLS_61: `header-button-menu-${string}`, __VLS_62: {}, __VLS_132: `header-button-menu-${string}`, __VLS_133: {}, __VLS_340: {}, __VLS_482: {}, __VLS_489: {};
+declare var __VLS_38: {}, __VLS_61: `header-button-menu-${string}`, __VLS_62: {}, __VLS_132: `header-button-menu-${string}`, __VLS_133: {}, __VLS_340: {}, __VLS_501: {}, __VLS_508: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_61>]?: (props: typeof __VLS_62) => any;
 } & {
@@ -30,9 +30,9 @@ type __VLS_Slots = {} & {
 } & {
     'user-menu'?: (props: typeof __VLS_340) => any;
 } & {
-    'page-top'?: (props: typeof __VLS_482) => any;
+    'page-top'?: (props: typeof __VLS_501) => any;
 } & {
-    'page-bottom'?: (props: typeof __VLS_489) => any;
+    'page-bottom'?: (props: typeof __VLS_508) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;

package/dist/runtime/components/L/Card.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useLight, q, m } from "#imports";
-import { ref, computed, onMounted, useAttrs } from "vue";
+import { ref, computed, onMounted, useAttrs, useSlots } from "vue";
 import { useStorage } from "@vueuse/core";
 import { useLightCardDefaults } from "../../composables/useLightProps";
 defineOptions({ inheritAttrs: false });
@@ -23,6 +23,7 @@ const props = defineProps({
   tag: { type: null, required: false }
 });
 const vAttrs = useAttrs();
+const slots = useSlots();
 const L_KEYS = ["loading", "title", "permission", "closeable", "minimizable", "maximizable", "name", "minimized", "maximized", "onUpdate:minimized", "onUpdate:maximized"];
 const storedMinimized = props.name ? useStorage(`l-card-minimized-${props.name}`, false) : ref(false);
 if (props.name && storedMinimized.value) {
@@ -41,7 +42,7 @@ const showBar = computed(() => {
   if (props.minimizable) return true;
   if (props.title !== void 0) return true;
   if (showSecurity.value) return true;
-  if (vAttrs.actions) return true;
+  if (slots.actions) return true;
   return false;
 });
 const showSecurity = computed(() => {

package/dist/runtime/components/L/FacebookButton.d.vue.ts

@@ -1,7 +1,23 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    appId: {
+        type: StringConstructor;
+        required: true;
+    };
+    disable: BooleanConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (...args: any[]) => void;
     login: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    appId: {
+        type: StringConstructor;
+        required: true;
+    };
+    disable: BooleanConstructor;
+}>> & Readonly<{
+    onError?: ((...args: any[]) => any) | undefined;
     onLogin?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    disable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/L/FacebookButton.vue

@@ -1,20 +1,81 @@
 <script setup>
-import { ref, onMounted } from "vue";
-const button = ref(null);
-const emits = defineEmits(["login"]);
-onMounted(() => {
-  if (window.FB) {
-    window.FB.XFBML.parse();
-  }
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { fabFacebookF } from "@quasar/extras/fontawesome-v7";
+import { loadFacebookSdk } from "../../utils/socialSdk";
+const props = defineProps({
+  appId: {
+    type: String,
+    required: true
+  },
+  disable: Boolean
 });
-window.onFacebookLogin = () => {
-  window.FB.getAccessToken((accessToken) => {
-    emits("login", accessToken);
+const emit = defineEmits(["login", "error"]);
+const $q = useQuasar();
+const sdk = ref(null);
+const loading = ref(true);
+const loggingIn = ref(false);
+const unavailable = ref(false);
+const errorMessage = (error) => error instanceof Error ? error.message : String(error);
+const loadSdk = async () => {
+  loading.value = true;
+  unavailable.value = false;
+  try {
+    sdk.value = await loadFacebookSdk(props.appId);
+  } catch (error) {
+    unavailable.value = true;
+    emit("error", error);
+    $q.notify({
+      message: errorMessage(error),
+      color: "negative",
+      icon: "sym_o_error"
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+const onClick = async () => {
+  if (props.disable || loggingIn.value) {
+    return;
+  }
+  if (!sdk.value) {
+    await loadSdk();
+  }
+  if (!sdk.value) {
+    return;
+  }
+  loggingIn.value = true;
+  sdk.value.login((response) => {
+    loggingIn.value = false;
+    const accessToken = response.authResponse?.accessToken;
+    if (accessToken) {
+      emit("login", accessToken);
+      return;
+    }
+    if (response.status && response.status !== "unknown") {
+      const error = new Error("Facebook login did not return an access token");
+      emit("error", error);
+      $q.notify({
+        message: error.message,
+        color: "negative",
+        icon: "sym_o_error"
+      });
+    }
+  }, {
+    scope: "public_profile,email"
   });
 };
+onMounted(loadSdk);
 </script>
 
 <template>
-    <div class="fb-login-button" data-size="large" data-button-type="" data-layout="" data-auto-logout-link="false"
-        data-use-continue-as="false" ref="button" data-onlogin="onFacebookLogin()"></div>
+    <q-btn
+        no-caps
+        color="indigo"
+        :icon="fabFacebookF"
+        :label="$t('Continue with Facebook')"
+        :loading="loading || loggingIn"
+        :disable="disable || unavailable"
+        @click="onClick"
+    />
 </template>

package/dist/runtime/components/L/FacebookButton.vue.d.ts

@@ -1,7 +1,23 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    appId: {
+        type: StringConstructor;
+        required: true;
+    };
+    disable: BooleanConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (...args: any[]) => void;
     login: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    appId: {
+        type: StringConstructor;
+        required: true;
+    };
+    disable: BooleanConstructor;
+}>> & Readonly<{
+    onError?: ((...args: any[]) => any) | undefined;
     onLogin?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    disable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/L/FavMenu.d.vue.ts

@@ -3,7 +3,9 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     value?: any;
     dense?: any;
+    expandAll?: any;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     value?: any;
     dense?: any;
+    expandAll?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/L/FavMenu.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watch } from "vue";
 import { useLight } from "#imports";
 const light = useLight();
-const props = defineProps(["value", "dense"]);
+const props = defineProps(["value", "dense", "expandAll"]);
 const favMenuExpanded = ref(
   typeof window !== "undefined" ? JSON.parse(localStorage.getItem("fav-menu-expanded") || "false") : false
 );
@@ -11,6 +11,14 @@ watch(favMenuExpanded, (newValue) => {
     localStorage.setItem("fav-menu-expanded", JSON.stringify(newValue));
   }
 });
+const displayedExpanded = computed({
+  get: () => props.expandAll || favMenuExpanded.value,
+  set: (value) => {
+    if (!props.expandAll) {
+      favMenuExpanded.value = value;
+    }
+  }
+});
 const color1 = computed(() => {
   return light.getColorValue();
 });
@@ -27,7 +35,7 @@ const color2 = computed(() => {
 
 <template>
     <q-expansion-item :label="$t('My favorite')" :dense="dense" icon="sym_o_favorite" 
-                      v-model="favMenuExpanded">
+                      v-model="displayedExpanded">
         <q-list class="q-pl-md menu-list" :dense="dense">
             <q-item v-ripple :to="item.path" v-for="item in value">
                 <q-item-section avatar>

package/dist/runtime/components/L/FavMenu.vue.d.ts

@@ -3,7 +3,9 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     value?: any;
     dense?: any;
+    expandAll?: any;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     value?: any;
     dense?: any;
+    expandAll?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/L/Form.d.vue.ts

@@ -1,70 +1,43 @@
-declare var __VLS_23: {};
+import type { LFormGutter, LFormLayout } from "../../types/form.js";
+type __VLS_Props = {
+    actions?: boolean;
+    bordered?: boolean;
+    gutter?: LFormGutter;
+    layout?: LFormLayout;
+    modelValue?: Record<string, unknown>;
+    noRedirect?: boolean;
+    submitIcon?: string;
+    submitLabel?: string;
+};
+declare var __VLS_17: {}, __VLS_20: {
+    loading: boolean;
+}, __VLS_22: {
+    loading: boolean;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    actions?: (props: typeof __VLS_20) => any;
+} & {
+    buttons?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: ObjectConstructor;
-    };
-    bordered: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    gutter: {
-        type: StringConstructor;
-        default: string;
-    };
-    submitLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    submitIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    noRedirect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (...args: any[]) => void;
     save: (...args: any[]) => void;
     submitted: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: ObjectConstructor;
-    };
-    bordered: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    gutter: {
-        type: StringConstructor;
-        default: string;
-    };
-    submitLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    submitIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    noRedirect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
     onSubmitted?: ((...args: any[]) => any) | undefined;
 }>, {
+    actions: boolean;
     bordered: boolean;
-    gutter: string;
-    submitLabel: string;
-    submitIcon: string;
+    gutter: LFormGutter;
+    layout: LFormLayout;
     noRedirect: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    submitIcon: string;
+    submitLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;