@mouseless/baked 1.5.1 → 1.5.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mouseless/baked",
   "configKey": "baked",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -36,5 +36,5 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
+    [x: string]: ((props: any) => any) | undefined;
 };

package/dist/runtime/components/Bake.vue

@@ -6,7 +6,15 @@
     :class="classes"
     v-bind="getComponentProps()"
   >
-    <slot v-if="$slots.default" />
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]="slotProps"
+    >
+      <slot
+        :name="slotName"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
   </component>
 </template>
 
@@ -26,25 +34,29 @@ const { name, descriptor } = defineProps({
 const model = defineModel({ type: null });
 const emit = defineEmits(["loaded"]);
 const parentPath = context.injectPath();
+const parentLoading = context.injectLoading();
 const path = parentPath && parentPath !== "" ? `${parentPath}/${name}` : name;
 const events = context.injectEvents();
 const contextData = context.injectContextData();
 const componentTemplate = componentResolver.resolve(descriptor.type, "MissingComponent");
 const componentProps = buildComponentProps();
 const data = ref(dataFetcher.get({ data: descriptor.data, contextData }));
-const shouldLoad = dataFetcher.shouldLoad(descriptor.data);
+const shouldLoad = !parentLoading.value && dataFetcher.shouldLoad(descriptor.data);
 const loading = ref(shouldLoad);
-const executing = ref(false);
+let executing = null;
 const visible = ref(true);
 const classes = [`b-component--${descriptor.type}`, ...asClasses(name)];
 let reactions = null;
 context.providePath(path);
 context.provideDataDescriptor(descriptor.data);
 context.provideParentContext({ ...contextData.parent, data });
-context.provideExecuting(executing);
 if (shouldLoad) {
   context.provideLoading(loading);
 }
+if (descriptor.action) {
+  executing = ref(false);
+  context.provideExecuting(executing);
+}
 if (descriptor.reactions) {
   reactions = reactionHandler.create(`${path}:bake`, {
     reload(success) {
@@ -91,6 +103,7 @@ function buildComponentProps() {
   }
   return result;
 }
+let __BIND_COUNT__ = 0;
 function getComponentProps() {
   const result = { ...componentProps };
   if (descriptor.data) {
@@ -98,7 +111,10 @@ function getComponentProps() {
   }
   if (componentTemplate.props?.modelValue) {
     result.modelValue = model.value;
-    nextTick(() => onModelUpdate(model.value));
+    if (__BIND_COUNT__ < 2) {
+      __BIND_COUNT__++;
+      nextTick(() => onModelUpdate(model.value));
+    }
   }
   return result;
 }

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

@@ -36,5 +36,5 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
+    [x: string]: ((props: any) => any) | undefined;
 };

package/dist/runtime/components/Contents.vue

@@ -1,25 +1,59 @@
 <template>
   <div
-    class="b-Contents w-full grid grid-cols-1 gap-4 lg:grid-cols-2 items-start"
+    class="
+      b-Contents w-full flex gap-8
+      max-md:flex-col
+    "
     :class="{ 'max-w-screen-xl 3xl:max-w-screen-2xl': !fullScreen }"
   >
-    <slot v-if="$slots.default" />
-    <Bake
-      v-for="content in contents"
-      :key="`content-${content.key}`"
-      :name="`${mergedNamePrefix}/${content.key}`"
-      :descriptor="content.component"
-      :class="{ 'lg:col-span-2': !content.narrow }"
-    />
+    <div
+      class="
+        w-full
+        grid grid-cols-1 items-start gap-4
+        lg:grid-cols-2
+      "
+    >
+      <slot v-if="$slots.default" />
+      <Bake
+        v-for="content in mainContents"
+        :key="`content-${content.key}`"
+        :name="`${mergedNamePrefix}/${content.key}`"
+        :descriptor="content.component"
+        :class="{ 'lg:col-span-2': !content.narrow }"
+      />
+    </div>
+    <div
+      v-if="sideContents.length"
+      class="
+        w-[30rem] gap-2 flex flex-col
+        max-md:w-full
+        max-lg:w-80
+      "
+    >
+      <template
+        v-for="(content, i) in sideContents"
+        :key="`content-${content.key}`"
+      >
+        <Divider v-if="i > 0" />
+        <Bake
+          :name="`${mergedNamePrefix}/${content.key}`"
+          :descriptor="content.component"
+        />
+      </template>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { Divider } from "primevue";
 import { Bake } from "#components";
-const { namePrefix } = defineProps({
+const { contents, namePrefix } = defineProps({
   contents: { type: Array, default: () => [] },
   namePrefix: { type: String, default: null },
   fullScreen: { type: Boolean, default: false }
 });
 const mergedNamePrefix = namePrefix ? `${namePrefix}/contents` : "contents";
+const mainContents = computed(() => contents.filter((c) => !c.side));
+const sideContents = computed(() => contents.filter((c) => c.side));
 </script>

package/dist/runtime/components/DataContainer.vue

@@ -1,28 +1,30 @@
 <template>
   <div
     class="
-      block bg-transparent
-      border rounded border-1
-      border-slate-200 dark:border-slate-700
+      bg-transparent dark:bg-zinc-900
+      border rounded-md border-1
+      border-slate-200 dark:border-zinc-700
     "
   >
     <div
+      v-if="inputs.length > 0"
       class="
-        px-2 py-4
-        bg-transparent border-b
-        dark:bg-zinc-900 dark:border-zinc-800
+        py-2 px-4
+        bg-transparent
         rounded-none text-sm
-        flex gap-4 items-center justify-end
+        flex gap-2 items-center justify-end
       "
     >
       <Inputs
-        v-if="inputs.length > 0"
         :inputs="inputs"
         @ready="onReady"
         @changed="onChanged"
       />
     </div>
-    <div class="pt-0 [contain:inline-size]">
+    <div
+      class="p-4 [contain:inline-size]"
+      :class="{ 'pt-0': inputs.length }"
+    >
       <Bake
         v-if="loaded && ready"
         :key="uniqueKey"

package/dist/runtime/components/FormPage.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col gap-8">
-    <PageTitle :schema="title">
+    <Bake
+      name="title"
+      :descriptor="title"
+    >
       <template
         v-if="sections.length > 0"
         #actions
@@ -11,7 +14,7 @@
           @submit="onSubmit"
         />
       </template>
-    </PageTitle>
+    </Bake>
     <div class="flex justify-center">
       <Contents
         v-focustrap
@@ -78,7 +81,7 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useLocalization } from "#imports";
-import { Button, Contents, Inputs, PageTitle } from "#components";
+import { Button, Contents, Inputs } from "#components";
 const { localize: l } = useLocalization();
 const { schema } = defineProps({
   schema: { type: null, required: true }

package/dist/runtime/components/InputText.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { InputText, Skeleton } from "primevue";
 import { useContext } from "#imports";
 import { AwaitLoading, Labeler } from "#components";
@@ -34,6 +34,9 @@ const model = defineModel({ type: null, required: true });
 const { label, labelMode, labelVariant, targetProp } = schema;
 const path = context.injectPath();
 const input = ref("");
+watch(model, (newValue) => {
+  input.value = newValue;
+}, { immediate: true });
 function onUpdate(value) {
   input.value = value;
   model.value = value && targetProp ? { [targetProp]: value } : value || void 0;

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

@@ -7,7 +7,7 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     path: {
         type: StringConstructor;
@@ -32,7 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     path: {
         type: StringConstructor;
@@ -55,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: () => void;
     };
 }>> & Readonly<{}>, {
+    label: string;
     variant: string;
     dt: Record<string, any>;
     pt: Record<string, any>;

package/dist/runtime/components/Labeler.vue

@@ -24,7 +24,7 @@ import { FloatLabel, IftaLabel } from "primevue";
 import { useLocalization } from "#imports";
 const { localize: l } = useLocalization();
 const { label, mode } = defineProps({
-  label: { type: String, required: true },
+  label: { type: String, default: null },
   path: { type: String, required: true },
   mode: { type: String, default: null },
   variant: { type: String, default: "on" },

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

@@ -7,7 +7,7 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     path: {
         type: StringConstructor;
@@ -32,7 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     path: {
         type: StringConstructor;
@@ -55,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: () => void;
     };
 }>> & Readonly<{}>, {
+    label: string;
     variant: string;
     dt: Record<string, any>;
     pt: Record<string, any>;

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

@@ -9,20 +9,26 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         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>;
 type __VLS_Slots = {
-    inputs?: ((props: {}) => any) | undefined;
-} & {
     actions?: ((props: {}) => any) | undefined;
 } & {
     inputs?: ((props: {}) => any) | undefined;
 } & {
-    actions?: ((props: {}) => any) | undefined;
+    inputs?: ((props: {}) => any) | undefined;
 } & {
     extra?: ((props: {}) => any) | undefined;
 };

package/dist/runtime/components/PageTitle.vue

@@ -1,83 +1,87 @@
 <template>
   <div
     id="page-title"
-    class="
-      sticky -top-1 z-10 space-y-4 bg-body
-      max-md:space-y-0 max-lg:space-y-2
-    "
+    class="sticky -top-1 z-10 space-y-4 bg-body"
   >
-    <div
-      class="
-        flex gap-2 items-start
-        md:max-xl:items-center
-      "
-    >
+    <div class="flex justify-between items-center gap-2">
       <div
         class="
-          w-full mt-1
-          flex flex-row gap-2
-          items-baseline justify-start
-          xl:flex-col xl:mt-2
+          w-full flex justify-between
+          max-2xs:flex-col gap-2
         "
+        :class="{
+          'max-2xs:flex-col': actions.length < earlyWrapActionsAt,
+          'max-xs:flex-col': actions.length >= earlyWrapActionsAt
+        }"
       >
-        <div class="grid">
-          <h1 class="font-bold text-xl truncate">
-            {{ l(title) }}
-          </h1>
-        </div>
-        <div class="relative">
+        <div class="flex gap-4 items-center">
+          <Bake
+            v-if="icon"
+            name="icon"
+            :descriptor="icon"
+            class="min-w-16 max-md:hidden"
+          />
           <div
-            data-testid="description"
             class="
-              text-sm text-gray-600 dark:text-gray-400
-              text-nowrap overflow-hidden
-              hidden xl:grid
+              w-full mt-1
+              flex flex-row
+              items-center justify-start
+              md:flex-col md:items-start md:mt-2
+              max-md:gap-2
             "
           >
-            <span class="truncate">
-              {{ l(description) || '&nbsp;' }}
-            </span>
+            <AwaitLoading
+              :skeleton="{
+                width: '15rem',
+                height: '1.75rem',
+                class: 'max-xs:max-w-[5rem]'
+              }"
+            >
+              <div class="grid">
+                <h1 class="font-bold text-xl truncate">
+                  {{ title }}
+                </h1>
+              </div>
+            </AwaitLoading>
+            <PageTitleDescription
+              :info-fields
+              :description
+            />
           </div>
-          <Button
-            v-if="description"
-            v-tooltip.focus.bottom="{ value: l(description) }"
-            class="xl:hidden"
-            icon="pi pi-info-circle"
-            variant="text"
-            size="small"
-            rounded
+        </div>
+        <div
+          v-if="actions.length || $slots.actions"
+          class="
+            actions
+            min-w-min flex gap-2 row-span-2 items-end text-nowrap
+            max-xs:text-xs max-md:text-sm
+            md:max-md:items-center md:pt-6
+          "
+        >
+          <Bake
+            v-for="action in actions"
+            :key="action.schema.name"
+            :name="`actions/${action.schema.name}`"
+            :descriptor="action"
           />
+          <slot name="actions" />
         </div>
       </div>
       <div
+        v-if="$slots.inputs"
         v-focustrap
         class="
           min-w-min flex gap-2 row-span-2 items-end text-nowrap
-          max-lg:text-sm md:max-xl:items-center xl:pt-6
+          max-md:text-sm md:max-md:items-center md:pt-6
         "
       >
-        <template v-if="isMd">
-          <slot
-            v-if="$slots.inputs"
-            name="inputs"
-          />
-          <Bake
-            v-for="action in actions"
-            :key="action.schema.name"
-            :name="`actions/${action.schema.name}`"
-            :descriptor="action"
-          />
-          <slot
-            v-if="$slots.actions"
-            name="actions"
-          />
+        <template v-if="isLg">
+          <slot name="inputs" />
         </template>
         <template v-else>
           <Button
-            v-if="$slots.inputs"
             variant="text"
             icon="pi pi-filter"
-            class="lg:hidden"
             rounded
             @click="togglePopoverInputs"
           />
@@ -87,44 +91,12 @@
           >
             <div
               class="
-              flex flex-col flex-start
-              justify-between w-full
-              gap-4 text-sm px-2 py-2"
-            >
-              <slot
-                v-if="$slots.inputs"
-                name="inputs"
-              />
-            </div>
-          </PersistentPopover>
-          <Button
-            v-if="$slots.actions || actions?.length > 0"
-            variant="text"
-            icon="pi pi-ellipsis-h"
-            class="lg:hidden"
-            rounded
-            @click="togglePopoverActions"
-          />
-          <PersistentPopover
-            ref="popoverActions"
-            fixed
-          >
-            <div
-              class="
-              flex flex-col flex-start
-              justify-between w-full min-w-52
-              gap-4 text-sm px-2 py-2"
+                flex flex-col flex-start
+                justify-between w-full
+                gap-4 text-sm px-2 py-2
+              "
             >
-              <Bake
-                v-for="action in actions"
-                :key="action.schema.name"
-                :name="`actions/${action.schema.name}`"
-                :descriptor="action"
-              />
-              <slot
-                v-if="$slots.actions"
-                name="actions"
-              />
+              <slot name="inputs" />
             </div>
           </PersistentPopover>
         </template>
@@ -140,15 +112,17 @@ import { Button } from "primevue";
 import { useRuntimeConfig } from "#app";
 import { useBreakpoints, useHead, useLocalization } from "#imports";
 import { Bake, PersistentPopover } from "#components";
-const { isMd } = useBreakpoints();
+const { isLg } = useBreakpoints();
 const { localize: l } = useLocalization();
 const { public: { components } } = useRuntimeConfig();
-const { schema } = defineProps({
-  schema: { type: null, required: true }
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
 });
-const { title, description, actions } = schema;
+const { actions, description, earlyWrapActionsAt = 4, icon, infoFields, localizeTitle, titleProp } = schema;
+const titleData = titleProp ? data?.[titleProp] : data;
+const title = titleData ? localizeTitle ? l(titleData) : titleData : "...";
 const popoverInputs = ref();
-const popoverActions = ref();
 useHead({
   title: components?.Page?.title ? `${components.Page.title} - ${title}` : title
 });
@@ -163,16 +137,15 @@ onMounted(() => {
         e.target,
         e.intersectionRatio < 1,
         [
+          "sticked",
           "-mx-4",
-          "px-4",
-          "pb-4",
+          "-mb-4",
+          "p-4",
           "border-b",
           "border-slate-300",
           "dark:border-zinc-800",
           "drop-shadow",
-          "z-[9]",
-          "md:max-xl:pt-4",
-          "max-md:pt-2"
+          "z-[9]"
         ]
       );
     },
@@ -192,11 +165,12 @@ function toggleClasses(element, toggle, classes) {
 function togglePopoverInputs(event) {
   popoverInputs.value.toggle(event);
 }
-function togglePopoverActions(event) {
-  popoverActions.value.toggle(event);
-}
 </script>
 
 <style scoped>
 .sticky{top:-1px}
 </style>
+
+<style>
+.b-component--PageTitle .p-button{@apply self-stretch}.b-component--PageTitle .p-button .p-button-icon+.p-button-label{@apply max-sm:hidden}
+</style>

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

@@ -9,20 +9,26 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         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>;
 type __VLS_Slots = {
-    inputs?: ((props: {}) => any) | undefined;
-} & {
     actions?: ((props: {}) => any) | undefined;
 } & {
     inputs?: ((props: {}) => any) | undefined;
 } & {
-    actions?: ((props: {}) => any) | undefined;
+    inputs?: ((props: {}) => any) | undefined;
 } & {
     extra?: ((props: {}) => any) | undefined;
 };

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

@@ -0,0 +1,24 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    infoFields: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    infoFields: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    description: string;
+    infoFields: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/PageTitleDescription.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="
+      relative h-8 flex items-center gap-2
+      text-sm text-gray-600 dark:text-gray-400
+    "
+  >
+    <AwaitLoading :skeleton="{ width: '10rem' }">
+      <div
+        v-for="field in infoFields"
+        :key="field.key"
+        class="flex gap-1 items-center text-nowrap max-xs:hidden"
+      >
+        <span class="max-md:hidden">{{ l(field.label) }}:</span>
+        <Bake
+          :name="`fields-${field.key}`"
+          :descriptor="field.component"
+          class="lg:font-bold"
+        />
+      </div>
+    </AwaitLoading>
+    <template v-if="description">
+      <div
+        class="flex gap-2 items-center"
+        :class="{
+          'max-md:hidden': !infoFields.length,
+          'max-xl:hidden ml-2': infoFields.length
+        }"
+      >
+        <i
+          v-if="infoFields.length"
+          class="text-sm pi pi-info-circle"
+        />
+        <div
+          data-testid="description"
+          class="grid text-nowrap overflow-hidden"
+        >
+          <span class="truncate">
+            {{ l(description) }}
+          </span>
+        </div>
+      </div>
+      <Button
+        v-tooltip.focus.bottom="{ value: l(description) }"
+        :class="{
+          'md:hidden': !infoFields.length,
+          'xl:hidden': infoFields.length
+        }"
+        icon="pi pi-info-circle"
+        variant="text"
+        size="small"
+        rounded
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { useLocalization } from "#imports";
+import { Button } from "primevue";
+const { localize: l } = useLocalization();
+const { description, infoFields } = defineProps({
+  description: { type: String, default: null },
+  infoFields: { type: Array, default: () => [] }
+});
+</script>

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

@@ -0,0 +1,24 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    infoFields: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    infoFields: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    description: string;
+    infoFields: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Paginator.vue

@@ -27,17 +27,15 @@
 <script setup>
 import { computed } from "vue";
 import { Button } from "primevue";
-import { useContext, useLocalization } from "#imports";
+import { useContext, useLocalization, useUiStates } from "#imports";
 import { AwaitLoading } from "#components";
 const context = useContext();
 const { localize: lc } = useLocalization({ group: "Paginator" });
+const { value: { paginatorStates } } = useUiStates();
 const { data } = defineProps({
   data: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const path = context.injectPath();
-const takeStateKey = path + ".take";
-const contextData = context.injectContextData();
 const allowPrevious = computed(() => !Number.isNaN(page.value) && page.value > 1);
 const allowNext = computed(() => !Number.isNaN(page.value) && data.length >= data.take);
 const page = computed({
@@ -46,8 +44,12 @@ const page = computed({
     model.value = (value - 1) * Number(data.take);
   }
 });
-if (data && contextData.page[takeStateKey] !== data.take) {
-  contextData.page[takeStateKey] = data.take;
-  page.value = 1;
+const path = context.injectPath();
+const previousTake = paginatorStates[`${path}.previousTake`];
+if (data && data.take && previousTake !== data.take) {
+  paginatorStates[`${path}.previousTake`] = data.take;
+  if (previousTake) {
+    page.value = 1;
+  }
 }
 </script>

package/dist/runtime/components/Select.vue

@@ -25,9 +25,7 @@
         class="w-full"
       >
         <template #value="slotProps">
-          <span>
-            {{ getValueLabel(slotProps) }}
-          </span>
+          <span>{{ getValueLabel(slotProps) }}</span>
         </template>
         <template #option="slotProps">
           <span>{{ getOptionLabel(slotProps) }}</span>
@@ -71,7 +69,7 @@ function getOptionLabel(slotProps) {
 }
 function getValueLabel(slotProps) {
   const result = slotProps.value?.[optionLabel] ?? slotProps.value ?? label;
-  return localizeLabel ? l(result) : result;
+  return (localizeLabel ? l(result) : result) ?? "\xA0";
 }
 function getModel() {
   return targetProp ? model.value?.[targetProp] : model.value;

package/dist/runtime/components/SelectButton.vue

@@ -107,5 +107,5 @@ function setSelected(value) {
 </style>
 
 <style scoped>
-&:has(.p-iftalabel) .p-iftalabel{@apply mt-2}
+&:has(.p-iftalabel) .p-iftalabel{@apply mt-2}.grid .flex .b-component--SelectButton{@apply self-end}
 </style>

package/dist/runtime/components/TabbedPage.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col gap-4">
-    <PageTitle :schema="title">
+    <Bake
+      name="title"
+      :descriptor="title"
+    >
       <template
         v-if="inputs?.length > 0"
         #inputs
@@ -34,7 +37,7 @@
           </TabList>
         </Tabs>
       </template>
-    </PageTitle>
+    </Bake>
     <Message
       v-if="showRequiredMessage"
       severity="info"
@@ -69,7 +72,7 @@
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
 import { Message, Tab, TabList, Tabs } from "primevue";
 import { useContext, useLocalization, useReactionHandler } from "#imports";
-import { Bake, Contents, DeferredTabContent, Inputs, PageTitle } from "#components";
+import { Bake, Contents, DeferredTabContent, Inputs } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { localize: lc } = useLocalization({ group: "TabbedPage" });

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

@@ -1,9 +1,11 @@
 export default function _default(): import("vue").Ref<{
     panelStates: {};
+    paginatorStates: {};
     selectStates: {};
     selectButtonStates: {};
 }, {
     panelStates: {};
+    paginatorStates: {};
     selectStates: {};
     selectButtonStates: {};
 }>;

package/dist/runtime/composables/useUiStates.js

@@ -3,6 +3,7 @@ import { useState } from "#imports";
 export default function() {
   return useState("uiStates", () => ({
     panelStates: { },
+    paginatorStates: { },
     selectStates: { },
     selectButtonStates: { }
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mouseless/baked",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Baked is an opinionated framework for .NET and Vue. This is the UI package of Baked project.",
   "keywords": [
     "baked",