@mouseless/baked 1.0.3 → 1.1.0

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

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

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

@@ -1,11 +1,21 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    schema: any;
-    data: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_props: {
-    readonly schema: any;
-    readonly data: any;
-};
+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/Message.vue

@@ -9,25 +9,21 @@
     >
       <i :class="`pi ${icon}`" />
     </template>
-    <Skeleton
-      v-if="loading"
-      height="1.5rem"
-      width="100%"
-    />
-    <span v-else-if="data">{{ localizeMessage ? l(data) : data }}</span>
-    <span v-else>-</span>
+    <AwaitLoading :skeleton="{ height: '1.5rem', width: '100%' }">
+      <span v-if="data">{{ localizeMessage ? l(data) : data }}</span>
+      <span v-else>-</span>
+    </AwaitLoading>
   </Message>
 </template>
 
 <script setup>
-import { Message, Skeleton } from "primevue";
-import { useContext, useLocalization } from "#imports";
-const context = useContext();
+import { Message } from "primevue";
+import { useLocalization } from "#imports";
+import { AwaitLoading } from "#components";
 const { localize: l } = useLocalization();
-const { schema } = defineProps({
-  schema: { type: null, default: null },
-  data: { type: null, default: null }
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
 });
 const { icon, severity, localizeMessage } = schema;
-const loading = context.injectLoading();
 </script>

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

@@ -1,11 +1,21 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    schema: any;
-    data: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_props: {
-    readonly schema: any;
-    readonly data: any;
-};
+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/MissingComponent.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/MissingComponent.vue

@@ -0,0 +1,174 @@
+<template>
+  <AwaitLoading :skeleton="{ height:'2rem', class:'inline-block bg-red-500/20' }">
+    <Button
+      v-if="inlinesData"
+      v-bind="$attrs"
+      :label
+      size="small"
+      severity="danger"
+      class="px-1 py-0 hover:underline"
+      @click="visible = true"
+    />
+    <Button
+      v-else
+      v-bind="$attrs"
+      :label
+      size="small"
+      severity="danger"
+      icon="pi pi-plus"
+      @click="visible = true"
+    />
+  </AwaitLoading>
+  <Dialog
+    v-model:visible="visible"
+    header="Missing Component"
+    modal
+    dismissable-mask
+    class="min-w-[500px] max-w-[750px] mx-4"
+  >
+    <div class="flex flex-col gap-4 w-full">
+      <code v-if="path">{{ path.join('/') }}</code>
+      <span>A component descriptor is required but missing here.</span>
+      <span v-if="code">
+        You can use below convention in your theme feature
+        (<code>...ThemeFeature.cs</code>) or in one of your UI override
+        features (<code>...UiOverrideFeature.cs</code>).
+      </span>
+      <code
+        v-if="code"
+        class="flex flex-col"
+      >
+        <Button
+          :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
+          variant="text"
+          severity="secondary"
+          size="small"
+          class="self-end p-1 hover:bg-transparent hover:text-white"
+          @click="copyToClipboard"
+        />
+        <!-- eslint-disable vue/no-v-html -->
+        <pre
+          class="-mt-[2.5em]"
+          v-html="highlightedCode"
+        />
+        <!-- eslint-enable vue/no-v-html -->
+      </code>
+      <template v-if="!inlinesData && data">
+        <Divider class="m-0" />
+        <Panel
+          header="Expand to see the data"
+          collapsed
+          toggleable
+          class="border-none"
+          :pt="{ header: 'p-0', content: 'px-0' }"
+        >
+          <code>
+            <!-- eslint-disable vue/no-v-html -->
+            <pre v-html="highlightedData" />
+            <!-- eslint-enable vue/no-v-html -->
+          </code>
+        </Panel>
+      </template>
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { Button, Dialog, Panel, Divider } from "primevue";
+import { AwaitLoading } from "#components";
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const { component, path, source } = schema;
+const inlinesData = data !== void 0 && typeof data !== "object";
+const label = inlinesData ? data : "Configure";
+const visible = ref(false);
+const copied = ref(false);
+const code = computed(() => {
+  if (!source) {
+    return null;
+  }
+  if (!source.type) {
+    return null;
+  }
+  return source.type.startsWith("Type") ? renderTypeSample(source.path) : source.type.startsWith("Property") ? renderPropertySample(source.path) : source.type.startsWith("Method") ? renderMethodSample(source.path) : source.type.startsWith("Parameter") ? renderParameterSample(source.path) : null;
+});
+const highlightedCode = computed(() => {
+  if (!code.value) {
+    return null;
+  }
+  return highlightCSharp(code.value);
+});
+const highlightedData = computed(() => {
+  if (inlinesData) {
+    return null;
+  }
+  return highlightJson(JSON.stringify(data, null, 2));
+});
+function renderTypeSample([type]) {
+  return String.raw`builder.Conventions.AddTypeComponent${component ? `<${component}>` : ""}(
+    when: c => c.Type.Is<${type}>(),
+    where: cc => cc.Path.EndsWith(${path.map((p) => `"${p}"`).join(", ")}),
+    component: () => ${component ? "..." : "B.Text()"}
+);`;
+}
+function renderPropertySample([type, property]) {
+  return String.raw`builder.Conventions.AddPropertyComponent${component ? `<${component}>` : ""}(
+    when: c => c.Type.Is<${type}>() && c.Property.Name == nameof(${type}.${property}),
+    where: cc => cc.Path.EndsWith(${path.map((p) => `"${p}"`).join(", ")}),
+    component: () => ${component ? "..." : "B.Text()"}
+);`;
+}
+function renderMethodSample([type, method]) {
+  return String.raw`builder.Conventions.AddMethodComponent${component ? `<${component}>` : ""}(
+    when: c => c.Type.Is<${type}>() && c.Method.Name == nameof(${type}.${method}),
+    where: cc => cc.Path.EndsWith(${path.map((p) => `"${p}"`).join(", ")}),
+    component: () => ${component ? "..." : "B.DataTable()"}
+);`;
+}
+function renderParameterSample([type, method, parameter]) {
+  return String.raw`builder.Conventions.AddParameterComponent${component ? `<${component}>` : ""}(
+    when: c => c.Type.Is<${type}>() && c.Method.Name == nameof(${type}.${method}) && c.Parameter.Name == "${parameter}",
+    where: cc => cc.Path.EndsWith(${path.map((p) => `"${p}"`).join(", ")}),
+    component: () => ${component ? "..." : "B.InputText()"}
+);`;
+}
+async function copyToClipboard() {
+  try {
+    await navigator.clipboard.writeText(code.value);
+    copied.value = true;
+    setTimeout(() => copied.value = false, 1e3);
+  } catch {
+    console.log("clipboard copy failed");
+  }
+}
+function highlightCSharp(src) {
+  if (!src) return "";
+  let s = src.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/=/g, "&equals;");
+  const kw = ["nameof"];
+  const kwRe = new RegExp(`\\b(${kw.join("|")})\\b`, "g");
+  s = s.replace(kwRe, "<span class='c--code-keyword'>$1</span>");
+  s = s.replace(/\/\/.*$/gm, (m) => `<span class='c--code-comment'>${m}</span>`);
+  s = s.replace(/"([^"]*)"/g, `<span class='c--code-string'>"$1"</span>`);
+  s = s.replace(
+    /(\w+)\s*(&lt;[^&]+&gt;)?\s*\(/g,
+    (_, name, generic) => `<span class='c--code-method'>${name}</span>` + (generic ? `<span class='c--code-type'>${generic}</span>` : "") + "("
+  );
+  s = s.replace(/((\w|&lt;|&gt;)+)\s*\(/g, "<span class='c--code-method'>$1</span>(");
+  s = s.replace(/(\.|\(|\)|&amp;|&lt;|&gt;|&equals;)/g, "<span class='c--code-symbol'>$1</span>");
+  return s;
+}
+function highlightJson(src) {
+  if (!src) return "";
+  let s = src.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/=/g, "&equals;");
+  s = s.replace(/"([^"]*)"/g, `<span class='c--code-string'>"$1"</span>`);
+  s = s.replace(/(\{|\}|\[|\]|&equals;)/g, "<span class='c--code-symbol'>$1</span>");
+  return s;
+}
+</script>
+
+<style>
+code:not(:has(pre)){@apply rounded p-1 text-xs bg-zinc-50 text-orange-700 dark:bg-zinc-950 dark:text-orange-400}pre{@apply block rounded-lg overflow-auto max-h-[20em] bg-zinc-950 p-4 text-xs text-sky-300}pre .c--code-comment{@apply text-green-800}pre .c--code-string{@apply text-orange-400}pre .c--code-keyword{@apply text-purple-400}pre .c--code-symbol{@apply text-gray-100}pre .c--code-type{@apply text-blue-400}pre .c--code-method{@apply text-yellow-100}
+</style>

package/dist/runtime/components/MissingComponent.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/ModalLayout.d.vue.ts

@@ -1,18 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_base: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    schema: any;
-    data: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
-};
-declare const __VLS_props: {
-    readonly schema: any;
-    readonly data: any;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

package/dist/runtime/components/ModalLayout.vue

@@ -5,10 +5,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  schema: { type: null, default: null },
-  data: { type: null, default: null }
-});
-</script>

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

@@ -1,18 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_base: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    schema: any;
-    data: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
-};
-declare const __VLS_props: {
-    readonly schema: any;
-    readonly data: any;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

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

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

package/dist/runtime/components/Money.vue

@@ -1,27 +1,22 @@
 <template>
-  <Skeleton
-    v-if="loading"
-    height="1.5rem"
-  />
-  <span
-    v-else-if="data"
-    v-tooltip.bottom="tooltip"
-    class="max-sm:select-none"
-  >{{ display }}</span>
-  <span v-else>-</span>
+  <AwaitLoading :skeleton="{ height: '1.5rem' }">
+    <span
+      v-if="data"
+      v-tooltip.bottom="tooltip"
+      class="max-sm:select-none"
+    >{{ display }}</span>
+    <span v-else>-</span>
+  </AwaitLoading>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import { Skeleton } from "primevue";
-import { useContext, useFormat } from "#imports";
-const context = useContext();
+import { useFormat } from "#imports";
+import { AwaitLoading } from "#components";
 const { asCurrency } = useFormat();
 const { data } = defineProps({
-  schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const loading = context.injectLoading();
 const display = computed(() => asCurrency(data));
 const tooltip = computed(() => display.value.shortened ? `${asCurrency(data, { shorten: false })}` : null);
 </script>

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

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

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

@@ -1,11 +1,21 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    schema: any;
-    data: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_props: {
-    readonly schema: any;
-    readonly data: any;
-};
+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/NavLink.vue

@@ -1,30 +1,44 @@
 <template>
-  <Skeleton
-    v-if="loading"
-    height="1.5rem"
-  />
-  <Button
-    v-else-if="data"
-    as="router-link"
-    link
-    :label="l(text)"
-    :to
-  />
+  <AwaitLoading :skeleton="{ height: '1.5rem' }">
+    <Button
+      :icon
+      :label="data"
+      :to
+      as="router-link"
+      link
+      class="m-0 p-0"
+    />
+  </AwaitLoading>
 </template>
 
 <script setup>
-import { computed } from "vue";
-import { Button, Skeleton } from "primevue";
-import { useContext, useFormat, useLocalization } from "#imports";
+import { computed, onMounted, ref } from "vue";
+import { Button } from "primevue";
+import { useContext, useDataFetcher, usePathBuilder } from "#imports";
+import { AwaitLoading } from "#components";
 const context = useContext();
-const { format } = useFormat();
-const { localize: l } = useLocalization();
+const dataFetcher = useDataFetcher();
+const pathBuilder = usePathBuilder();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { path, idProp, textProp } = schema;
-const loading = context.injectLoading();
-const to = computed(() => format(path, [data[idProp]]));
-const text = computed(() => data[textProp]);
+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 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/NavLink.vue.d.ts

@@ -1,11 +1,21 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    schema: any;
-    data: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_props: {
-    readonly schema: any;
-    readonly data: any;
-};
+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>;