@mouseless/baked 1.1.4 → 1.2.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mouseless/baked",
   "configKey": "baked",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -11,7 +11,7 @@ const module$1 = defineNuxtModule({
   defaults: {},
   moduleDependencies: {
     "@nuxtjs/i18n": {
-      version: "10.2.1",
+      version: "10.2.3",
       defaults: {
         strategy: "no_prefix",
         detectBrowserLanguage: {

package/dist/runtime/components/Bake.d.vue.ts

@@ -16,7 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     modelValue: {
         type: import("vue").PropType<any>;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
         required: true;
@@ -28,7 +31,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     modelValue: {
         type: import("vue").PropType<any>;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    onLoaded?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {}) => any) | undefined;
 };

package/dist/runtime/components/Bake.vue

@@ -31,7 +31,7 @@ const contextData = context.injectContextData();
 const component = componentResolver.resolve(descriptor.type, "MissingComponent");
 const componentProps = buildComponentProps();
 const data = ref(dataFetcher.get({ data: descriptor.data, contextData }));
-const shouldLoad = dataFetcher.shouldLoad(descriptor.data?.type);
+const shouldLoad = dataFetcher.shouldLoad(descriptor.data);
 const loading = ref(shouldLoad);
 const executing = ref(false);
 const visible = ref(true);

package/dist/runtime/components/Bake.vue.d.ts

@@ -16,7 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     modelValue: {
         type: import("vue").PropType<any>;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
         required: true;
@@ -28,7 +31,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     modelValue: {
         type: import("vue").PropType<any>;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    onLoaded?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {}) => any) | undefined;
 };

package/dist/runtime/components/DataPanel.vue

@@ -81,14 +81,14 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, useTemplateRef } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { Message, Panel, Button } from "primevue";
+import { useBreakpoints, useContext, useDataMounter, useUiStates, useLocalization } from "#imports";
 import { Bake, Inputs, PersistentPopover } from "#components";
-import { useBreakpoints, useContext, useDataFetcher, useUiStates, useLocalization } from "#imports";
 const { value: { panelStates } } = useUiStates();
 const { isMd } = useBreakpoints();
 const context = useContext();
-const dataFetcher = useDataFetcher();
+const { mount: mountData } = useDataMounter();
 const { localize: l } = useLocalization();
 const { localize: lc } = useLocalization({ group: "DataPanel" });
 const panel = useTemplateRef("panel");
@@ -107,13 +107,7 @@ const values = ref({});
 if (inputs.length > 0) {
   contextData.parent["parameters"] = values;
 }
-const title = ref(dataFetcher.get({ data: titleData, contextData }));
-const shouldLoadTitle = dataFetcher.shouldLoad(titleData.type);
-onMounted(async () => {
-  if (shouldLoadTitle) {
-    title.value = await dataFetcher.fetch({ data: titleData, contextData });
-  }
-});
+const title = mountData(titleData);
 function togglePopover(event) {
   popover.value.toggle(event);
 }

package/dist/runtime/components/DataTable.vue

@@ -22,8 +22,17 @@
     <template #empty>
       {{ lc("No records found") }}
     </template>
+    <div
+      v-if="!paginator && serverPaginatorOptions"
+      class="flex w-full justify-end items-end"
+    >
+      <ServerPaginator
+        :schema="serverPaginatorOptions"
+        :data="data"
+      />
+    </div>
     <Column
-      v-for="column in columns"
+      v-for="column in columns.filter(c => !c.hidden)"
       :key="column.key"
       :header="l(column.title)"
       :field="column.key"
@@ -147,8 +156,8 @@ import { computed, onMounted, ref } from "vue";
 import Column from "primevue/column";
 import { Button, ColumnGroup, DataTable, Menu, Row } from "primevue";
 import { useRuntimeConfig } from "#app";
-import { AwaitLoading, Bake, ProvideParentContext } from "#components";
 import { useComposableResolver, useContext, useDataFetcher, useLocalization } from "#imports";
+import { AwaitLoading, Bake, ProvideParentContext, ServerPaginator } from "#components";
 const context = useContext();
 const composableResolver = useComposableResolver();
 const dataFetcher = useDataFetcher();
@@ -159,7 +168,16 @@ const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { actions, columns, dataKey, exportOptions, footerTemplate, itemsProp, paginator, rows, rowsWhenLoading, scrollHeight, virtualScrollerOptions } = schema;
+const { actions, columns, dataKey, footerTemplate, itemsProp, paginator, rows, rowsWhenLoading, scrollHeight, serverPaginatorOptions } = schema;
+const exportOptions = schema.exportOptions && {
+  buttonIcon: "pi pi-download",
+  ...schema.exportOptions
+};
+const virtualScrollerOptions = schema.virtualScrollerOptions && {
+  appendOnly: true,
+  numToleratedItems: 10,
+  ...schema.exportOptions
+};
 const contextData = context.injectContextData();
 const dataDescriptor = context.injectDataDescriptor();
 const dataTable = ref();
@@ -196,11 +214,11 @@ onMounted(async () => {
       parameterFormatter: parameterFormatterName
     } = exportOptions;
     if (formatterName) {
-      formatter = (await composableResolver.resolve(formatterName)).default();
+      formatter = composableResolver.resolve(formatterName).default();
     }
     let parameterFormatter = null;
     if (parameterFormatterName) {
-      parameterFormatter = (await composableResolver.resolve(parameterFormatterName)).default();
+      parameterFormatter = composableResolver.resolve(parameterFormatterName).default();
     }
     if (appendParameters && dataDescriptor) {
       let parameters = await dataFetcher.fetchParameters({ data: dataDescriptor, contextData });
@@ -223,5 +241,5 @@ function exportFunction({ data: data2, field }) {
 </script>
 
 <style>
-.b-component--DataTable a{@apply text-sm}.b-component--DataTable .p-button{@apply -my-2}
+.b-component--DataTable a{@apply text-sm}.b-component--DataTable .p-button{@apply -my-2}.b-component--DataTable .p-datatable-tbody td.p-datatable-frozen-column{z-index:1}
 </style>

package/dist/runtime/components/Dialog.vue

@@ -34,8 +34,8 @@
 <script setup>
 import { ref } from "vue";
 import { Dialog } from "primevue";
-import { Bake, Button } from "#components";
 import { useLocalization } from "#imports";
+import { Bake, Button } from "#components";
 const { localize: l } = useLocalization();
 const { schema } = defineProps({
   schema: { type: Object, required: true }

package/dist/runtime/components/Error.vue

@@ -14,6 +14,6 @@ import { Bake } from "#components";
 const context = useContext();
 const events = useEvents();
 const { public: { error } } = useRuntimeConfig();
-context.provideEvents(events.create());
+context.provideEvents(events);
 context.providePageContext(reactive({}));
 </script>

package/dist/runtime/components/ErrorPage.vue

@@ -56,7 +56,12 @@ const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, default: null }
 });
-const { errorInfos, footerInfo, safeLinks, safeLinksMessage } = schema;
+const {
+  errorInfos,
+  footerInfo = "If you cannot reach the page you want please contact the system administrator",
+  safeLinks,
+  safeLinksMessage = "Try the links from the menu below to view the page you want to access:"
+} = schema;
 const statusCode = computed(() => {
   const code = data.value?.data?.status ?? data.value?.statusCode ?? 999;
   return code === 999 ? "APP" : code;

package/dist/runtime/components/Fieldset.vue

@@ -27,8 +27,8 @@
 
 <script setup>
 import { Fieldset } from "primevue";
-import { AwaitLoading, Bake } from "#components";
 import { useLocalization } from "#imports";
+import { AwaitLoading, Bake } from "#components";
 const { localize: l } = useLocalization();
 const { schema, data } = defineProps({
   schema: { type: Object, required: true },

package/dist/runtime/components/Filter.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script setup>
+import { watch } from "vue";
 import { IconField, InputIcon, InputText } from "primevue";
 import { useLocalization } from "#imports";
 const { localize: l } = useLocalization();
@@ -17,5 +18,14 @@ const { schema } = defineProps({
   schema: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { placeholder } = schema;
+const { placeholder, whiteSpaceSensitive } = schema;
+watch(model, (newValue, oldValue) => {
+  if (newValue === oldValue) {
+    return;
+  }
+  if (whiteSpaceSensitive) {
+    return;
+  }
+  model.value = newValue.trim();
+});
 </script>

package/dist/runtime/components/Input.vue

@@ -7,37 +7,32 @@
 </template>
 
 <script setup>
-import { computed, onMounted, watch } from "vue";
+import { computed, watch } from "vue";
 import { useRoute, useRouter } from "#app";
-import { useContext, useDataFetcher } from "#imports";
+import { useDataMounter } from "#imports";
 import { Bake } from "#components";
-const context = useContext();
-const dataFetcher = useDataFetcher();
+const { mount: mountData, onAfterMount: onAfterMountData } = useDataMounter();
 const route = useRoute();
 const router = useRouter();
 const { schema } = defineProps({
   schema: { type: Object, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const contextData = context.injectContextData();
-let defaultValue = schema.default ? dataFetcher.get({ data: schema.default, contextData }) : void 0;
+const defaultValue = mountData(schema.default);
 const query = schema.queryBound ? computed(() => route.query[schema.name]) : void 0;
-onMounted(async () => {
-  if (schema.default && dataFetcher.shouldLoad(schema.default.type)) {
-    defaultValue = await dataFetcher.fetch({ data: schema.default, contextData });
-  }
+onAfterMountData(async () => {
   if (!checkValue(model.value)) {
     if (schema.queryBound && checkValue(query.value)) {
       model.value = query.value;
     } else {
-      await set(defaultValue);
+      await set(defaultValue.value);
     }
   }
   if (schema.queryBound) {
     watch(() => route.query, async (newQuery) => {
       const newValue = newQuery[schema.name];
-      if (!checkValue(newValue) && schema.required && defaultValue) {
-        await set(defaultValue);
+      if (!checkValue(newValue) && schema.required && defaultValue.value) {
+        await set(defaultValue.value);
         return;
       }
       model.value = newValue;
@@ -45,7 +40,7 @@ onMounted(async () => {
   }
   watch(model, async (newValue) => {
     if (!checkValue(newValue)) {
-      newValue = schema.required ? defaultValue : void 0;
+      newValue = schema.required ? defaultValue.value : void 0;
     }
     await set(newValue);
   });

package/dist/runtime/components/Layout.vue

@@ -23,7 +23,7 @@ const events = useEvents();
 const layouts = useLayouts();
 const pages = usePages();
 const route = useRoute();
-context.provideEvents(events.create());
+context.provideEvents(events);
 context.providePageContext(reactive({}));
 const descriptor = ref(await findLayout(route.matched[0].name));
 watch(

package/dist/runtime/components/MenuPage.vue

@@ -52,8 +52,8 @@
 import { onBeforeUnmount, ref } from "vue";
 import { Divider } from "primevue";
 import { useRuntimeConfig } from "#app";
-import { Bake } from "#components";
 import { useContext, useLocalization } from "#imports";
+import { Bake } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { localize: lc } = useLocalization({ group: "MenuPage" });

package/dist/runtime/components/Message.vue

@@ -25,5 +25,5 @@ const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { icon, severity, localizeMessage } = schema;
+const { icon, severity = "info", localizeMessage } = schema;
 </script>

package/dist/runtime/components/NavLink.vue

@@ -12,33 +12,21 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed } from "vue";
 import { Button } from "primevue";
-import { useContext, useDataFetcher, usePathBuilder } from "#imports";
+import { useDataMounter, usePathBuilder } from "#imports";
 import { AwaitLoading } from "#components";
-const context = useContext();
-const dataFetcher = useDataFetcher();
+const { mount: mountData } = useDataMounter();
 const pathBuilder = usePathBuilder();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
 const { icon, path, query: queryData, params: paramsData } = schema;
-const contextData = context.injectContextData();
-const query = ref(queryData ? dataFetcher.get({ data: queryData, contextData }) : null);
-const shouldLoadQuery = queryData ? dataFetcher.shouldLoad(queryData.type) : false;
-const params = ref(paramsData ? dataFetcher.get({ data: paramsData, contextData }) : null);
-const shouldLoadParams = paramsData ? dataFetcher.shouldLoad(paramsData.type) : false;
+const query = mountData(queryData);
+const params = mountData(paramsData);
 const to = computed(() => ({
   path: params.value ? pathBuilder.build(path, params.value, { forRoute: true }) : path,
   query: query.value
 }));
-onMounted(async () => {
-  if (shouldLoadQuery) {
-    query.value = await dataFetcher.fetch({ data: queryData, contextData });
-  }
-  if (shouldLoadParams) {
-    params.value = await dataFetcher.fetch({ data: paramsData, contextData });
-  }
-});
 </script>

package/dist/runtime/components/Page.vue

@@ -18,7 +18,7 @@ const pages = usePages();
 const route = useRoute();
 const { public: { components } } = useRuntimeConfig();
 useHead({ title: components?.Page?.title });
-context.provideEvents(events.create());
+context.provideEvents(events);
 context.providePageContext(reactive({}));
 const name = route.matched[0].name;
 const className = name.replace("[", "").replace("]", "");

package/dist/runtime/components/PageTitle.vue

@@ -138,8 +138,8 @@
 import { onMounted, ref } from "vue";
 import { Button } from "primevue";
 import { useRuntimeConfig } from "#app";
-import { Bake, PersistentPopover } from "#components";
 import { useBreakpoints, useHead, useLocalization } from "#imports";
+import { Bake, PersistentPopover } from "#components";
 const { isMd } = useBreakpoints();
 const { localize: l } = useLocalization();
 const { public: { components } } = useRuntimeConfig();

package/dist/runtime/components/ServerPaginator.d.vue.ts

@@ -0,0 +1,21 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/ServerPaginator.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex items-center gap-1 justify-center">
+    <span class="text-sm mr-2 max-xs:hidden">{{ lc("Page {page}", { page }) }}</span>
+    <Button
+      rounded
+      variant="text"
+      icon="pi pi-chevron-left"
+      :disabled="page <= 1"
+      severity="secondary"
+      size="small"
+      @click="page--"
+    />
+    <Button
+      rounded
+      variant="text"
+      icon="pi pi-chevron-right"
+      severity="secondary"
+      size="small"
+      :disabled="!allowNext"
+      @click="page++"
+    />
+    <Bake
+      v-if="takeComponent && isXs"
+      v-model="take"
+      name="take"
+      :descriptor="takeComponent"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+import { Button } from "primevue";
+import { useRoute, useRouter } from "#app";
+import { useBreakpoints, useContext, useLocalization } from "#imports";
+import { Bake } from "#components";
+const route = useRoute();
+const router = useRouter();
+const { isXs } = useBreakpoints();
+const context = useContext();
+const { localize: lc } = useLocalization({ group: "ServerPaginator" });
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const { take: takeComponent, takeParameterName = "take", skipParameterName = "skip", pageChangeEventName = "page-changed" } = schema;
+const events = context.injectEvents();
+context.provideLoading(false);
+const take = ref(Number(route.query[takeParameterName]) || 10);
+const allowNext = computed(() => data?.length >= take.value);
+const skip = computed(() => Number(route.query[skipParameterName]) || 0);
+const page = computed({
+  get: () => skip.value / take.value + 1 || 1,
+  set: (value) => {
+    router.push({
+      query: {
+        ...route.query,
+        [skipParameterName]: (value - 1) * take.value,
+        [takeParameterName]: take.value
+      }
+    });
+  }
+});
+watch(take, (newTake, oldTake) => {
+  if (oldTake === newTake) {
+    return;
+  }
+  page.value = 1;
+});
+watch([() => route.query[skipParameterName], () => route.query[takeParameterName]], () => {
+  events.publish(pageChangeEventName, page.value);
+});
+</script>

package/dist/runtime/components/ServerPaginator.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/SideMenu.vue

@@ -104,15 +104,20 @@
 import { ref } from "vue";
 import { RouterLink } from "vue-router";
 import { Button, Skeleton } from "primevue";
-import { Bake, Logo, PersistentPopover, SideMenuItem } from "#components";
 import { useBreakpoints, useContext } from "#imports";
+import { Bake, Logo, PersistentPopover, SideMenuItem } from "#components";
 const { isMd } = useBreakpoints();
 const context = useContext();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { logo, largeLogo, menu, footer } = schema;
+const {
+  logo = "logo.svg",
+  largeLogo = "logo-full.svg",
+  menu,
+  footer
+} = schema;
 const loading = context.injectLoading();
 const popover = ref();
 function togglePopover(event) {

package/dist/runtime/composables/useActionExecuter.js

@@ -37,7 +37,7 @@ function Local() {
   const dataFetcher = useDataFetcher();
 
   async function execute({ action, contextData }) {
-    const composable = (await composableResolver.resolve(action.composable)).default();
+    const composable = composableResolver.resolve(action.composable).default();
 
     if(composable.run) {
       const options = action.options ? await dataFetcher.fetch({ data: action.options, contextData }) : { };

package/dist/runtime/composables/useComposableResolver.js

@@ -6,7 +6,7 @@ export default function() {
   function resolve(name) {
     if(!$composables[name]) { throw new Error(`Cannot resolve composable '${name}'`); }
 
-    return $composables[name]();
+    return $composables[name];
   }
 
   return {

package/dist/runtime/composables/useConstraintEvaluator.js

@@ -26,7 +26,7 @@ function Composable() {
 
   async function evaluate({ constraint, value, contextData }) {
     const options = constraint.options ? await dataFetcher.fetch({ data: constraint.options, contextData }) : { };
-    const composable = (await composableResolver.resolve(constraint.composable)).default(options);
+    const composable = composableResolver.resolve(constraint.composable).default(options);
     if(!composable.validate) { throw new Error("Constraint composable should have `validate`"); }
 
     return composable.validate(value);

package/dist/runtime/composables/useDataFetcher.d.ts

@@ -1,5 +1,5 @@
 export default function _default(): {
-    shouldLoad: (dataType: any) => boolean;
+    shouldLoad: (data: any) => any;
     get: ({ data, contextData }: {
         data: any;
         contextData: any;

package/dist/runtime/composables/useDataFetcher.js

@@ -3,15 +3,19 @@ import { useComposableResolver, usePathBuilder, useUnref } from "#imports";
 
 export default function() {
   const datas = {
-    "Composite": Composite({ parentFetch: fetch, parentFetchParameters: fetchParameters }),
-    "Computed": Computed({ parentFetch: fetch }),
+    "Composite": Composite({ parentGet: get, parentFetch: fetch, parentFetchParameters: fetchParameters }),
+    "Computed": Computed({ parentGet: get, parentFetch: fetch }),
     "Context": Context(),
     "Inline": Inline(),
     "Remote": Remote({ parentFetch: fetch })
   };
 
-  function shouldLoad(dataType) {
-    return datas[dataType]?.fetch !== undefined;
+  function shouldLoad(data) {
+    if(!data) { return false; }
+
+    return data.isAsync === undefined
+      ? !!datas[data.type]?.isAsync
+      : data.isAsync;
   }
 
   function get({ data, contextData }) {
@@ -19,6 +23,7 @@ export default function() {
     if(!type) { return null; }
     if(!datas[type]) { return null; }
     if(!datas[type].get) { return null; }
+    if(shouldLoad(data)) { return null; }
 
     return datas[type].get({ data, contextData });
   }
@@ -27,7 +32,7 @@ export default function() {
     const fetcher = datas[data?.type];
     if(!fetcher) { throw new Error(`${data?.type} is not a valid data type`); }
 
-    return fetcher.get
+    return fetcher.get && !shouldLoad(data)
       ? fetcher.get({ data, contextData })
       : await fetcher.fetch({ data, contextData });
   }
@@ -48,9 +53,22 @@ export default function() {
   };
 }
 
-function Composite({ parentFetch, parentFetchParameters }) {
+function Composite({ parentGet, parentFetch, parentFetchParameters }) {
   const unref = useUnref();
 
+  function get({ data, contextData }) {
+    const result = {};
+
+    for(const part of data.parts) {
+      Object.assign(
+        result,
+        unref.deepUnref(parentGet({ data: part, contextData }))
+      );
+    }
+
+    return result;
+  }
+
   async function fetch({ data, contextData }) {
     const result = {};
 
@@ -77,28 +95,29 @@ function Composite({ parentFetch, parentFetchParameters }) {
   }
 
   return {
+    isAsync: false,
+    get,
     fetch,
     fetchParameters
   };
 }
 
-function Computed({ parentFetch }) {
+function Computed({ parentGet, parentFetch }) {
   const composableResolver = useComposableResolver();
   const unref = useUnref();
 
-  async function fetch({ data, contextData }) {
-    const composable = (await composableResolver.resolve(data.composable)).default();
-    const options = data.options ? unref.deepUnref(await parentFetch({ data: data.options, contextData })) : { };
+  function get({ data, contextData }) {
+    const composable = composableResolver.resolve(data.composable).default();
+    const options = data.options ? unref.deepUnref(parentGet({ data: data.options, contextData })) : { };
 
-    if(composable.computeSync) {
-      return composable.computeSync(options);
-    }
+    return composable.compute(options);
+  }
 
-    if(composable.compute) {
-      return await composable.compute(options);
-    }
+  async function fetch({ data, contextData }) {
+    const composable = composableResolver.resolve(data.composable).default();
+    const options = data.options ? unref.deepUnref(await parentFetch({ data: data.options, contextData })) : { };
 
-    throw new Error("Data composable should have either `computeSync` or `compute`");
+    return await composable.compute(options);
   }
 
   async function fetchParameters({ data }) {
@@ -106,6 +125,8 @@ function Computed({ parentFetch }) {
   }
 
   return {
+    isAsync: false,
+    get,
     fetch,
     fetchParameters
   };
@@ -136,6 +157,7 @@ function Context() {
   }
 
   return {
+    isAsync: false,
     get
   };
 }
@@ -146,6 +168,7 @@ function Inline() {
   }
 
   return {
+    isAsync: false,
     get
   };
 }
@@ -223,6 +246,7 @@ function Remote({ parentFetch }) {
   }
 
   return {
+    isAsync: true,
     fetch,
     fetchParameters
   };

package/dist/runtime/composables/useDataMounter.d.ts

@@ -0,0 +1,5 @@
+export default function _default(): {
+    mount: (schema: any) => import("vue").Ref<null, null>;
+    onAfterMount: (callback: any) => void;
+    onBeforeMount: (callback: any) => void;
+};

package/dist/runtime/composables/useDataMounter.js

@@ -0,0 +1,58 @@
+import { onMounted, ref } from "vue";
+import { useContext, useDataFetcher } from "#imports";
+
+export default function() {
+  const context = useContext();
+  const dataFetcher = useDataFetcher();
+  const contextData = context.injectContextData();
+  const mounts = [];
+  let onAfterMountCallback = null;
+  let onBeforeMountCallback = null;
+
+  onMounted(async() => {
+    if(onBeforeMountCallback) {
+      await onBeforeMountCallback();
+    }
+
+    await Promise.all(
+      mounts.map(async({ value, schema }) => {
+        value.value = await dataFetcher.fetch({ data: schema, contextData });
+      })
+    );
+
+    if(onAfterMountCallback) {
+      await onAfterMountCallback();
+    }
+  });
+
+  function mount(schema) {
+    const value = ref(null);
+
+    if(!schema) {
+      return value;
+    }
+
+    value.value = dataFetcher.get({ data: schema, contextData });
+
+    const shouldLoad = dataFetcher.shouldLoad(schema);
+    if(shouldLoad) {
+      mounts.push({ value, schema });
+    }
+
+    return value;
+  }
+
+  function onAfterMount(callback) {
+    onAfterMountCallback = callback;
+  }
+
+  function onBeforeMount(callback) {
+    onBeforeMountCallback = callback;
+  }
+
+  return {
+    mount,
+    onAfterMount,
+    onBeforeMount
+  };
+}

package/dist/runtime/composables/useEvents.d.ts

@@ -1,7 +1,5 @@
 export default function _default(): {
-    create: () => {
-        on: (name: any, id: any, callback: any) => void;
-        off: (name: any, id: any) => void;
-        publish: (name: any, value: any) => Promise<void>;
-    };
+    on: (name: any, id: any, callback: any) => void;
+    off: (name: any, id: any) => void;
+    publish: (name: any, value: any) => Promise<void>;
 };

package/dist/runtime/composables/useEvents.js

@@ -1,33 +1,27 @@
 export default function() {
   const listeners = {};
 
-  function create() {
-    function on(name, id, callback) {
-      listeners[name] ||= {};
+  function on(name, id, callback) {
+    listeners[name] ||= {};
 
-      listeners[name][id] = callback;
-    }
+    listeners[name][id] = callback;
+  }
 
-    function off(name, id) {
-      delete listeners[name][id];
-    }
+  function off(name, id) {
+    delete listeners[name][id];
+  }
 
-    async function publish(name, value) {
-      if(!listeners[name]) { return; }
+  async function publish(name, value) {
+    if(!listeners[name]) { return; }
 
-      for(const id in listeners[name]) {
-        listeners[name][id](value);
-      }
+    for(const id in listeners[name]) {
+      listeners[name][id](value);
     }
-
-    return {
-      on,
-      off,
-      publish
-    };
   }
 
   return {
-    create
+    on,
+    off,
+    publish
   };
 }

package/dist/runtime/composables/useLoginRedirect.d.ts

@@ -1,3 +1,3 @@
 export default function _default(): {
-    computeSync: () => string;
+    compute: () => string;
 };

package/dist/runtime/composables/useLoginRedirect.js

@@ -3,13 +3,13 @@ import { useRoute, useRuntimeConfig } from "#app";
 export default function() {
   const { public: { auth } } = useRuntimeConfig();
 
-  function computeSync() {
+  function compute() {
     const route = useRoute();
 
     return `/${auth.loginPageRoute}?redirect=${route.fullPath}`;
   }
 
   return {
-    computeSync
+    compute
   };
 }

package/dist/runtime/composables/useNuxtError.d.ts

@@ -1,3 +1,3 @@
 export default function _default(): {
-    computeSync: () => import("vue").Ref<import("#app").NuxtError<unknown> | undefined, import("#app").NuxtError<unknown> | undefined>;
+    compute: () => import("vue").Ref<import("#app").NuxtError<unknown> | undefined, import("#app").NuxtError<unknown> | undefined>;
 };

package/dist/runtime/composables/useNuxtError.js

@@ -3,11 +3,11 @@ import { useError } from "#app";
 export default function() {
   const error = useError();
 
-  function computeSync() {
+  function compute() {
     return error;
   }
 
   return {
-    computeSync
+    compute
   };
 }

package/dist/runtime/composables/useNuxtRoute.d.ts

@@ -1,3 +1,3 @@
 export default function _default(): {
-    computeSync: ({ property }?: {}) => any;
+    compute: ({ property }?: {}) => any;
 };

package/dist/runtime/composables/useNuxtRoute.js

@@ -3,11 +3,11 @@ import { useRoute } from "#app";
 export default function() {
   const route = useRoute();
 
-  function computeSync({ property } = {}) {
+  function compute({ property } = {}) {
     return property ? route[property] : route;
   }
 
   return {
-    computeSync
+    compute
   };
 }

package/dist/runtime/plugins/baked.js

@@ -3,8 +3,8 @@ import { defineNuxtPlugin } from "#app";
 export default defineNuxtPlugin({
   name: "baked",
   setup() {
-    const bakedComposables = import.meta.glob("../composables/*");
-    const projectComposables = import.meta.glob("@/composables/*");
+    const bakedComposables = import.meta.glob("../composables/*", { eager: true });
+    const projectComposables = import.meta.glob("@/composables/*", { eager: true });
 
     const pages = import.meta.glob("@@/.baked/**/*.page.json");
     const layouts = import.meta.glob("@@/.baked/**/*.layout.json");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mouseless/baked",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "description": "Baked is an opinionated framework for .NET and Vue. This is the UI package of Baked project.",
   "keywords": [
     "baked",
@@ -43,32 +43,32 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@nuxtjs/i18n": "10.2.1",
+    "@nuxtjs/i18n": "10.2.3",
     "@nuxtjs/tailwindcss": "6.14.0",
-    "@primeuix/themes": "2.0.2",
+    "@primeuix/themes": "2.0.3",
     "async-mutex": "0.5.0",
     "primeicons": "7.0.0",
     "primevue": "4.5.4"
   },
   "devDependencies": {
-    "@nuxt/eslint": "1.12.1",
+    "@nuxt/eslint": "1.15.1",
     "@nuxt/module-builder": "1.0.2",
-    "@nuxt/test-utils": "3.21.0",
-    "@playwright/test": "1.57.0",
-    "@types/node": "25.0.3",
+    "@nuxt/test-utils": "4.0.0",
+    "@playwright/test": "1.58.2",
+    "@types/node": "25.2.3",
     "changelogen": "0.6.2",
-    "nuxt": "4.2.2",
-    "sass": "1.97.1",
+    "nuxt": "4.3.1",
+    "sass": "1.97.3",
     "typescript": "5.9.3",
-    "vitest": "3.2.4",
-    "vue-tsc": "3.2.1"
+    "vitest": "4.0.18",
+    "vue-tsc": "3.2.4"
   },
   "optionalDependencies": {
-    "@oxc-parser/binding-darwin-arm64": "0.106.0",
-    "@oxc-parser/binding-linux-arm64-gnu": "0.106.0",
-    "@oxc-parser/binding-linux-arm64-musl": "0.106.0",
-    "@oxc-parser/binding-linux-x64-gnu": "0.106.0",
-    "@oxc-parser/binding-linux-x64-musl": "0.106.0",
-    "@oxc-parser/binding-win32-x64-msvc": "0.106.0"
+    "@oxc-parser/binding-darwin-arm64": "0.114.0",
+    "@oxc-parser/binding-linux-arm64-gnu": "0.114.0",
+    "@oxc-parser/binding-linux-arm64-musl": "0.114.0",
+    "@oxc-parser/binding-linux-x64-gnu": "0.114.0",
+    "@oxc-parser/binding-linux-x64-musl": "0.114.0",
+    "@oxc-parser/binding-win32-x64-msvc": "0.114.0"
   }
 }