@mouseless/baked 1.0.3 → 1.1.0

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

@@ -0,0 +1,25 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Input.vue

@@ -0,0 +1,78 @@
+<template>
+  <Bake
+    v-model="model"
+    :name="schema.name"
+    :descriptor="schema.component"
+  />
+</template>
+
+<script setup>
+import { computed, onMounted, watch } from "vue";
+import { useRoute, useRouter } from "#app";
+import { useContext, useDataFetcher } from "#imports";
+import { Bake } from "#components";
+const context = useContext();
+const dataFetcher = useDataFetcher();
+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 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 });
+  }
+  if (schema.queryBound && checkValue(query.value)) {
+    model.value = query.value;
+  } else {
+    await set(defaultValue);
+  }
+  if (schema.queryBound) {
+    watch(() => route.query, async (newQuery) => {
+      const newValue = newQuery[schema.name];
+      if (!checkValue(newValue) && schema.required && defaultValue) {
+        await set(defaultValue);
+        return;
+      }
+      model.value = newValue;
+    }, { immediate: true });
+  }
+  watch(model, async (newValue) => {
+    if (!checkValue(newValue)) {
+      newValue = schema.required ? defaultValue : void 0;
+    }
+    await set(newValue);
+  });
+});
+async function set(value) {
+  if (schema.queryBound) {
+    if (value === query.value) {
+      return;
+    }
+    await router.push({
+      path: route.path,
+      query: {
+        ...route.query,
+        [schema.name]: value
+      },
+      // prevents extra browser history when setting default value of input
+      replace: schema.required && (schema.default || schema.defaultSelfManaged) && !query.value
+    });
+  } else {
+    if (!value) {
+      return;
+    }
+    model.value = value;
+  }
+}
+function checkValue(value) {
+  if (typeof value === "string") {
+    return value !== "";
+  }
+  return value !== void 0 && value !== null;
+}
+</script>

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

@@ -0,0 +1,25 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,25 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/InputNumber.vue

@@ -0,0 +1,35 @@
+<template>
+  <AwaitLoading>
+    <template #loading>
+      <div class="min-w-60">
+        <Skeleton class="min-h-10" />
+      </div>
+    </template>
+    <FloatLabel variant="on">
+      <InputNumber
+        v-model="model"
+        v-bind="$attrs"
+        class="min-w-60"
+        @input="onInput"
+      />
+      <label :for="path">{{ l(label) }}</label>
+    </FloatLabel>
+  </AwaitLoading>
+</template>
+
+<script setup>
+import { FloatLabel, InputNumber, Skeleton } from "primevue";
+import { useContext, useLocalization } from "#imports";
+import { AwaitLoading } from "#components";
+const context = useContext();
+const { localize: l } = useLocalization();
+const { schema } = defineProps({
+  schema: { type: null, required: true }
+});
+const model = defineModel({ type: null, required: true });
+const { label } = schema;
+const path = context.injectPath();
+function onInput(event) {
+  model.value = event.value;
+}
+</script>

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

@@ -0,0 +1,25 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,25 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/InputText.vue

@@ -0,0 +1,31 @@
+<template>
+  <AwaitLoading>
+    <template #loading>
+      <div class="min-w-60">
+        <Skeleton class="min-h-10" />
+      </div>
+    </template>
+    <FloatLabel variant="on">
+      <InputText
+        v-model="model"
+        v-bind="$attrs"
+        class="min-w-60"
+      />
+      <label :for="path">{{ l(label) }}</label>
+    </FloatLabel>
+  </AwaitLoading>
+</template>
+
+<script setup>
+import { FloatLabel, InputText, Skeleton } from "primevue";
+import { useContext, useLocalization } from "#imports";
+import { AwaitLoading } from "#components";
+const context = useContext();
+const { localize: l } = useLocalization();
+const { schema } = defineProps({
+  schema: { type: null, required: true }
+});
+const model = defineModel({ type: null, required: true });
+const { label } = schema;
+const path = context.injectPath();
+</script>

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

@@ -0,0 +1,25 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,29 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    inputs: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (...args: any[]) => void;
+    changed: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    inputs: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onChanged?: ((...args: any[]) => any) | undefined;
+}>, {
+    inputClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Inputs.vue

@@ -0,0 +1,50 @@
+<template>
+  <Input
+    v-for="input in inputs"
+    :key="input.name"
+    v-model="values[input.name]"
+    :schema="input"
+    :class="inputClass"
+  />
+</template>
+
+<script setup>
+import { onMounted, watch, reactive } from "vue";
+import { useContext } from "#imports";
+import { Input } from "#components";
+const context = useContext();
+const { inputs } = defineProps({
+  inputs: { type: Array, required: true },
+  inputClass: { type: String, default: "" }
+});
+const emit = defineEmits(["ready", "changed"]);
+const parentPath = context.injectPath();
+const values = reactive({});
+context.providePath(`${parentPath}/inputs`);
+watch(values, async () => {
+  emitChanged();
+  emitReady();
+}, { deep: true });
+onMounted(async () => {
+  emitChanged();
+  emitReady();
+});
+function emitReady() {
+  emit(
+    "ready",
+    inputs.filter((i) => i.required).reduce((result, i) => result && checkValue(values[i.name]), true)
+  );
+}
+function emitChanged() {
+  emit("changed", {
+    uniqueKey: inputs.map((i) => values[i.name]).filter(checkValue).join("-"),
+    values
+  });
+}
+function checkValue(value) {
+  if (typeof value === "string") {
+    return value !== "";
+  }
+  return value !== void 0 && value !== null;
+}
+</script>

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

@@ -0,0 +1,29 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    inputs: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (...args: any[]) => void;
+    changed: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    inputs: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onChanged?: ((...args: any[]) => any) | undefined;
+}>, {
+    inputClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,11 +1,3 @@
 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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/LanguageSwitcher.vue

@@ -39,10 +39,6 @@ import { Button, Menu } from "primevue";
 import { useLocalization } from "#imports";
 const { locale, getLocales, setLocale, localize: l } = useLocalization();
 const { localize: lc } = useLocalization({ group: "LanguageSwitcher" });
-defineProps({
-  schema: { type: null, required: true },
-  data: { type: null, default: null }
-});
 const menu = ref();
 const model = computed(
   () => getLocales().map((currentLocale) => ({

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

@@ -1,11 +1,3 @@
 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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Layout.vue

@@ -13,17 +13,21 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useRoute } from "#app";
 import { Toast } from "primevue";
-import { useLayouts, usePages } from "#imports";
+import { useContext, useEvents, useLayouts, usePages } from "#imports";
 import { Bake } from "#components";
-const route = useRoute();
+const context = useContext();
+const events = useEvents();
 const layouts = useLayouts();
 const pages = usePages();
-const descriptor = ref(await findLayout(route.params.baked?.[0]));
+const route = useRoute();
+context.provideEvents(events.create());
+context.providePageContext(reactive({}));
+const descriptor = ref(await findLayout(route.matched[0].name));
 watch(
-  () => route.params.baked?.[0],
+  () => route.matched[0].name,
   async (newPageName, oldPageName) => {
     if (newPageName === oldPageName) {
       return;

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

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

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

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

package/dist/runtime/components/MenuPage.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<{
+    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/MenuPage.vue

@@ -49,45 +49,44 @@
 </template>
 
 <script setup>
+import { onBeforeUnmount, ref } from "vue";
+import { Divider } from "primevue";
 import { useRuntimeConfig } from "#app";
 import { Bake } from "#components";
 import { useContext, useLocalization } from "#imports";
-import { Divider } from "primevue";
-import { ref, watch } from "vue";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { localize: lc } = useLocalization({ group: "MenuPage" });
 const { public: { composables } } = useRuntimeConfig();
 const { schema } = defineProps({
-  schema: { type: null, required: true },
-  data: { type: null, default: null }
+  schema: { type: null, required: true }
 });
-const { header, sections, filterPageContextKey } = schema;
+const { header, sections, filterEvent } = schema;
+const path = context.injectPath();
 const locale = composables?.useFormat?.locale || "en-US";
+const events = context.injectEvents();
 const sectionsData = ref(sections);
-const page = context.injectPage();
-if (filterPageContextKey) {
-  watch(
-    () => page[filterPageContextKey],
-    (newValue, oldValue) => {
-      if (newValue === oldValue || newValue === void 0) {
-        return;
-      }
-      if (!newValue.trim()) {
-        sectionsData.value = sections;
-        return;
-      }
-      const searchTerm = newValue.toLocaleLowerCase(locale);
-      const sectionsWithFilteredLinks = sections.map((section) => ({
-        title: section.title,
-        links: section.links.filter((link) => {
-          const title = l(link.title);
-          return title?.toLocaleLowerCase(locale).startsWith(searchTerm);
-        })
-      }));
-      sectionsData.value = sectionsWithFilteredLinks.filter((section) => section.links.length > 0);
-    },
-    { immediate: true }
-  );
+if (filterEvent) {
+  events.on(filterEvent, path, filterSections);
+}
+onBeforeUnmount(() => {
+  if (filterEvent) {
+    events.off(filterEvent, path);
+  }
+});
+function filterSections(filter) {
+  if (!filter?.trim()) {
+    sectionsData.value = sections;
+    return;
+  }
+  const searchTerm = filter.toLocaleLowerCase(locale);
+  const sectionsWithFilteredLinks = sections.map((section) => ({
+    title: section.title,
+    links: section.links.filter((link) => {
+      const title = l(link.title);
+      return title?.toLocaleLowerCase(locale).startsWith(searchTerm);
+    })
+  }));
+  sectionsData.value = sectionsWithFilteredLinks.filter((section) => section.links.length > 0);
 }
 </script>