@hostlink/nuxt-light 1.73.2 → 1.74.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.73.2",
+  "version": "1.74.0",
   "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/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;

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

@@ -1,48 +1,41 @@
 <script setup>
-import { computed, ref, useAttrs, getCurrentInstance } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { useQuasar, QForm } from "quasar";
+import { computed, getCurrentInstance, ref, useAttrs, useSlots } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
 import { model } from "#imports";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  actions: { type: Boolean, required: false, default: true },
+  bordered: { type: Boolean, required: false, default: true },
+  gutter: { type: String, required: false, default: "md" },
+  layout: { type: String, required: false, default: "grid" },
+  modelValue: { type: Object, required: false },
+  noRedirect: { type: Boolean, required: false, default: false },
+  submitIcon: { type: String, required: false, default: "sym_o_save" },
+  submitLabel: { type: String, required: false, default: "Save" }
+});
+const emit = defineEmits(["save", "submit", "submitted"]);
+const attrs = useAttrs();
+const slots = useSlots();
 const route = useRoute();
 const router = useRouter();
 const quasar = useQuasar();
 const form = ref(null);
-const props = defineProps({
-  modelValue: {
-    type: Object
-  },
-  bordered: {
-    type: Boolean,
-    default: true
-  },
-  gutter: {
-    type: String,
-    default: "md"
-  },
-  submitLabel: {
-    type: String,
-    default: "Save"
-  },
-  submitIcon: {
-    type: String,
-    default: "sym_o_save"
-  },
-  noRedirect: {
-    type: Boolean,
-    default: false
-  }
-});
 const loading = ref(false);
-const attrs = useAttrs();
-const emit = defineEmits(["save", "submit", "submitted"]);
 const instance = getCurrentInstance();
-const hasSubmitListener = computed(() => {
-  return !!instance?.vnode?.props?.onSubmit;
-});
+const hasSubmitListener = computed(() => Boolean(instance?.vnode.props?.onSubmit));
+const hasCustomActions = computed(() => Boolean(slots.actions || slots.buttons));
+const contentClass = computed(() => attrs.class);
+const formAttrs = computed(() => Object.fromEntries(
+  Object.entries(attrs).filter(([key]) => key !== "class")
+));
+const routeParts = computed(() => typeof route.name === "string" ? route.name.split("-") : []);
+const modelName = computed(() => routeParts.value[0]);
+const idName = computed(() => routeParts.value[1]);
 const save = async () => {
-  if (!form.value) return;
-  let valid = await form.value.validate();
-  if (!valid) return;
+  if (!form.value || !await form.value.validate()) {
+    return;
+  }
   emit("save");
   if (hasSubmitListener.value) {
     emit("submit", () => {
@@ -50,57 +43,54 @@ const save = async () => {
     });
     return;
   }
-  if (props.modelValue && route.name) {
-    try {
-      if (route.params[id_name]) {
-        if (await model(module).update(parseInt(route.params[id_name]), props.modelValue)) {
-          if (!props.noRedirect) {
-            router.push(`/${module}`);
-          }
-          emit("submitted");
-          return;
-        }
-      } else {
-        if (await model(module).add(props.modelValue)) {
-          if (!props.noRedirect) {
-            router.push(`/${module}`);
-          }
-          emit("submitted");
-          return;
-        }
-      }
-    } catch (e) {
-      quasar.dialog({
-        title: "Error",
-        message: e.message,
-        ok: "OK"
-      });
+  if (!props.modelValue || !modelName.value) {
+    return;
+  }
+  loading.value = true;
+  try {
+    const routeId = idName.value ? route.params[idName.value] : void 0;
+    const saved = routeId ? await model(modelName.value).update(Number(routeId), props.modelValue) : await model(modelName.value).add(props.modelValue);
+    if (!saved) {
+      return;
     }
+    if (!props.noRedirect) {
+      await router.push(`/${modelName.value}`);
+    }
+    emit("submitted");
+  } catch (error) {
+    quasar.dialog({
+      title: "Error",
+      message: error instanceof Error ? error.message : String(error),
+      ok: "OK"
+    });
+  } finally {
+    loading.value = false;
   }
-  loading.value = false;
 };
-const onSubmit = (e) => {
-  e.preventDefault();
-  save();
+const onSubmit = async (event) => {
+  event.preventDefault();
+  await save();
 };
-const localClass = computed(() => {
-  if (attrs.class) {
-    return attrs.class;
-  }
-  return "row q-col-gutter-" + props.gutter;
-});
 </script>
 
 <template>
-    <q-form ref="form" @submit="onSubmit">
-        <l-card :bordered="bordered">
-            <q-card-section :class="localClass">
-                <slot></slot>
-            </q-card-section>
+    <q-form ref="form" v-bind="formAttrs" @submit="onSubmit">
+        <l-form-layout
+            :actions="actions"
+            :bordered="bordered"
+            :content-class="contentClass"
+            :gutter="gutter"
+            :layout="layout"
+            :submit-icon="submitIcon"
+            :submit-label="submitLabel"
+            :submit-loading="loading"
+        >
+            <slot />
 
-            <q-card-actions align="right">
-                <l-btn :icon="submitIcon" :label="submitLabel" :loading="loading" type="submit" />
-            </q-card-actions>
-        </l-card>
+            <template v-if="hasCustomActions" #actions>
+                <slot v-if="$slots.actions" name="actions" :loading="loading" />
+                <slot v-else name="buttons" :loading="loading" />
+            </template>
+        </l-form-layout>
     </q-form>
 </template>