@mouseless/baked 1.4.3 → 1.5.1

package/dist/module.json

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

package/dist/runtime/components/Bake.vue

@@ -1,16 +1,17 @@
 <template>
   <component
-    :is="render()"
+    :is="componentTemplate"
     v-if="visible"
     :key="loading"
     :class="classes"
+    v-bind="getComponentProps()"
   >
     <slot v-if="$slots.default" />
   </component>
 </template>
 
 <script setup>
-import { h, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 import { useActionExecuter, useComponentResolver, useContext, useDataFetcher, useFormat, useReactionHandler } from "#imports";
 const actionExecuter = useActionExecuter();
 const componentResolver = useComponentResolver();
@@ -28,7 +29,7 @@ const parentPath = context.injectPath();
 const path = parentPath && parentPath !== "" ? `${parentPath}/${name}` : name;
 const events = context.injectEvents();
 const contextData = context.injectContextData();
-const component = componentResolver.resolve(descriptor.type, "MissingComponent");
+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);
@@ -82,26 +83,27 @@ function buildComponentProps() {
   if (descriptor.schema) {
     result.schema = descriptor.schema;
   }
-  if (component.emits?.includes("submit")) {
+  if (componentTemplate.emits?.includes("submit")) {
     result.onSubmit = onModelUpdate;
   }
-  if (component.props?.modelValue) {
+  if (componentTemplate.props?.modelValue) {
     result["onUpdate:modelValue"] = onModelUpdate;
-    nextTick(() => onModelUpdate(model.value));
   }
   return result;
 }
-function render() {
+function getComponentProps() {
+  const result = { ...componentProps };
   if (descriptor.data) {
-    componentProps.data = data.value;
+    result.data = data.value;
   }
-  if (component.props?.modelValue) {
-    componentProps.modelValue = model.value;
+  if (componentTemplate.props?.modelValue) {
+    result.modelValue = model.value;
+    nextTick(() => onModelUpdate(model.value));
   }
-  return h(component, componentProps);
+  return result;
 }
 async function onModelUpdate(newModel) {
-  if (component.props?.modelValue) {
+  if (componentTemplate.props?.modelValue) {
     model.value = newModel;
   }
   if (!descriptor.action) {

package/dist/runtime/components/{ServerPaginator.d.vue.ts → DataContainer.d.vue.ts}

@@ -5,17 +5,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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/DataContainer.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="
+      block bg-transparent
+      border rounded border-1
+      border-slate-200 dark:border-slate-700
+    "
+  >
+    <div
+      class="
+        px-2 py-4
+        bg-transparent border-b
+        dark:bg-zinc-900 dark:border-zinc-800
+        rounded-none text-sm
+        flex gap-4 items-center justify-end
+      "
+    >
+      <Inputs
+        v-if="inputs.length > 0"
+        :inputs="inputs"
+        @ready="onReady"
+        @changed="onChanged"
+      />
+    </div>
+    <div class="pt-0 [contain:inline-size]">
+      <Bake
+        v-if="loaded && ready"
+        :key="uniqueKey"
+        name="content"
+        :descriptor="content"
+      />
+      <Message
+        v-else-if="!ready"
+        severity="info"
+      >
+        <i class="pi pi-info-circle" />
+        <span class="ml-3">{{ lc("Select required values to view this data") }}</span>
+      </Message>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Message } from "primevue";
+import { useContext, useLocalization } from "#imports";
+import { Bake, Inputs } from "#components";
+const context = useContext();
+const { localize: lc } = useLocalization({ group: "DataContainer" });
+const { schema } = defineProps({
+  schema: { type: null, required: true }
+});
+const { content, inputs } = schema;
+const contextData = context.injectContextData();
+const loaded = ref(true);
+const ready = ref(inputs.length === 0);
+const uniqueKey = ref("");
+const values = ref({});
+if (inputs.length > 0) {
+  contextData.parent["container-parameters"] = values;
+}
+function onReady(value) {
+  ready.value = value;
+}
+function onChanged(event) {
+  uniqueKey.value = event.uniqueKey;
+  values.value = event.values;
+}
+</script>
+
+<style>
+.p-panel-content:has(.b-component--DataContainer) .b-component--DataContainer{@apply border-none rounded-none}.b-component--DataContainer div{@apply [&:has(.p-datatable)]:p-0}
+</style>

package/dist/runtime/components/{ServerPaginator.vue.d.ts → DataContainer.vue.d.ts}

@@ -5,17 +5,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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/DataPanel.vue

@@ -132,5 +132,5 @@ function onChanged(event) {
 </script>
 
 <style>
-.p-panel-content{@apply [&:has(.p-datatable)]:p-0}
+.b-component--DataPanel .p-panel-content{@apply [&:has(.p-datatable)]:p-0}
 </style>

package/dist/runtime/components/DataTable.vue

@@ -22,33 +22,6 @@
     <template #empty>
       {{ lc("No records found") }}
     </template>
-    <div
-      v-if="sort || (!paginator && serverPaginatorOptions)"
-      class="
-        b-Header
-        flex flex-row items-center justify-end
-        gap-4 mb-2 py-4 px-2
-      "
-    >
-      <div
-        v-if="sort"
-        class="flex items-end justify-end"
-      >
-        <Bake
-          name="sort"
-          :descriptor="sort"
-        />
-      </div>
-      <div
-        v-if="!paginator && serverPaginatorOptions"
-        class="flex justify-end"
-      >
-        <ServerPaginator
-          :schema="serverPaginatorOptions"
-          :data="data"
-        />
-      </div>
-    </div>
     <Column
       v-for="column in visibleColumns"
       :key="column.key"
@@ -174,7 +147,7 @@ import Column from "primevue/column";
 import { Button, ColumnGroup, DataTable, Menu, Row } from "primevue";
 import { useRuntimeConfig } from "#app";
 import { useComposableResolver, useContext, useDataFetcher, useLocalization } from "#imports";
-import { AwaitLoading, Bake, ProvideParentContext, ServerPaginator } from "#components";
+import { AwaitLoading, Bake, ProvideParentContext } from "#components";
 const context = useContext();
 const composableResolver = useComposableResolver();
 const dataFetcher = useDataFetcher();
@@ -185,7 +158,7 @@ const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { actions, columns, dataKey, footerTemplate, itemsProp, paginator, rows, rowsWhenLoading, scrollHeight, serverPaginatorOptions, sort } = schema;
+const { actions, columns, dataKey, dataLengthContextKey, footerTemplate, itemsProp, paginator, rows, rowsWhenLoading, scrollHeight } = schema;
 const exportOptions = schema.exportOptions && {
   buttonIcon: "pi pi-download",
   ...schema.exportOptions
@@ -217,6 +190,9 @@ const visibleColumns = computed(() => columns.filter((c) => !c.hidden));
 const footerColSpan = computed(() => columns.length - footerTemplate?.columns.length);
 const exportFilename = ref(exportOptions?.fileName ? l(exportOptions.fileName) : null);
 let formatter = null;
+if (dataLengthContextKey && data) {
+  contextData.page[dataLengthContextKey] = data?.length;
+}
 if (exportOptions) {
   headerActions.value.push({
     label: l(exportOptions.buttonLabel),
@@ -280,10 +256,8 @@ function exportFunction({ data: data2, field }) {
 </script>
 
 <style>
-.p-panel-content:has(.b-component--DataTable) .b-component--DataTable{@apply border-none rounded-none}.p-panel-content:has(.b-component--DataTable) .b-component--DataTable .b-Header{@apply rounded-none}.p-panel-content:has(.b-component--DataTable) .b-component--DataTable .p-datatable-table-container{@apply border-none}.b-component--DataTable{@apply border border-slate-200 dark:border-zinc-700
+.b-component--DataContainer:has(.b-component--DataTable) .b-component--DataTable,.p-panel-content:has(.b-component--DataTable) .b-component--DataTable{@apply border-none rounded-none}.b-component--DataContainer:has(.b-component--DataTable) .b-component--DataTable .p-datatable-table-container,.p-panel-content:has(.b-component--DataTable) .b-component--DataTable .p-datatable-table-container{@apply border-none}.b-component--DataTable{@apply border border-slate-200 dark:border-zinc-700
     justify-self-center w-full
-    rounded-[--p-border-radius-md]}.b-component--DataTable .p-datatable-table-container{@apply border-none rounded-b-[--p-border-radius-md]}.b-component--DataTable:has(.b-Header) .b-Header{@apply border-b dark:border-zinc-800
-        dark:bg-zinc-900 mb-0
-        rounded-t-[--p-border-radius-md]}.b-component--DataTable:has(.b-Header) .p-datatable-table-container{@apply rounded-b-[--p-border-radius-md]}.b-component--DataTable:has(:not(.b-Header)) .p-datatable-table-container{@apply rounded-[--p-border-radius-md]}.b-component--DataTable:has(.p-datatable-paginator-bottom) .p-datatable-paginator-bottom{@apply border-t rounded-t-none
+    rounded-[--p-border-radius-md]}.b-component--DataTable .p-datatable-table-container{@apply border-none rounded-[--p-border-radius-md]}.b-component--DataTable:has(.p-datatable-paginator-bottom) .p-datatable-paginator-bottom{@apply border-t rounded-t-none
         rounded-b-[--p-border-radius-md] border-b-0}.b-component--DataTable:has(.p-datatable-paginator-bottom) .p-datatable-table-container{@apply rounded-b-none}.b-component--DataTable tbody>tr:last-child>td{@apply border-b-0}.b-component--DataTable tfoot>tr>td{@apply border-t}.b-component--DataTable .b-label-column--wide{@apply 3xl:w-[30%] 2xl:w-[20%] xl:w-[15%]}.b-component--DataTable .b-label-column--narrow{@apply 3xl:w-[40%] 2xl:w-[30%] xl:w-[20%]}.b-component--DataTable a{@apply text-sm}.b-component--DataTable .p-button{@apply -my-2}.b-component--DataTable td.p-datatable-frozen-column{@apply z-[1]}.b-component--DataTable .p-datatable-thead{@apply z-[2]}
 </style>

package/dist/runtime/components/FormPage.vue

@@ -13,7 +13,10 @@
       </template>
     </PageTitle>
     <div class="flex justify-center">
-      <Contents class="gap-6">
+      <Contents
+        v-focustrap
+        class="gap-6"
+      >
         <div
           v-for="section in sections"
           :key="section.key"
@@ -51,7 +54,7 @@
               <div
                 v-for="inputGroup in inputGroups"
                 :key="inputGroup.key"
-                class="w-full flex gap-4 max-md:flex-col"
+                class="w-full flex gap-4 max-md:flex-col self-end"
                 :class="{
                   'col-span-2': inputGroup.wide,
                   'reset-min-w': inputGroup.inputs.length > 1
@@ -98,7 +101,7 @@ function splitByWide(inputGroups) {
     cur = [];
   }
   result.push(cur);
-  return result;
+  return result.filter((r) => r.length);
 }
 function onReady(key, value) {
   Object.assign(readyData.value, { [key]: value });

package/dist/runtime/components/Input.vue

@@ -23,7 +23,7 @@ const query = schema.queryBound ? computed(() => route.query[schema.name]) : voi
 onAfterMountData(async () => {
   if (!checkValue(model.value)) {
     if (schema.queryBound && checkValue(query.value)) {
-      model.value = query.value;
+      setModel(query.value);
     } else {
       await set(defaultValue.value);
     }
@@ -31,11 +31,11 @@ onAfterMountData(async () => {
   if (schema.queryBound) {
     watch(() => route.query, async (newQuery) => {
       const newValue = newQuery[schema.name];
-      if (!checkValue(newValue) && schema.required && defaultValue.value) {
+      if (!checkValue(newValue) && schema.required && checkValue(defaultValue.value)) {
         await set(defaultValue.value);
         return;
       }
-      model.value = newValue;
+      setModel(newValue);
     }, { immediate: true });
   }
   watch(model, async (newValue) => {
@@ -46,8 +46,13 @@ onAfterMountData(async () => {
   });
 });
 async function set(value) {
-  if (schema.queryBound) {
-    if (value === query.value) {
+  if (!schema.queryBound) {
+    if (!checkValue(value)) {
+      return;
+    }
+    setModel(value);
+  } else {
+    if (String(value) === String(query.value)) {
       return;
     }
     await router.push({
@@ -59,11 +64,6 @@ async function set(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) {
@@ -72,4 +72,12 @@ function checkValue(value) {
   }
   return value !== void 0 && value !== null;
 }
+function setModel(value) {
+  if (!schema.numeric) {
+    model.value = value;
+  } else {
+    const numericValue = Number(value);
+    model.value = Number.isNaN(numericValue) ? void 0 : value;
+  }
+}
 </script>

package/dist/runtime/components/InputNumber.vue

@@ -5,7 +5,12 @@
         <Skeleton class="min-h-10" />
       </div>
     </template>
-    <FloatLabel variant="on">
+    <Labeler
+      :label
+      :path
+      :mode="labelMode"
+      :variant="labelVariant"
+    >
       <InputNumber
         v-model="model"
         v-bind="$attrs"
@@ -13,22 +18,20 @@
         class="min-w-60"
         @input="onInput"
       />
-      <label :for="path">{{ l(label) }}</label>
-    </FloatLabel>
+    </Labeler>
   </AwaitLoading>
 </template>
 
 <script setup>
-import { FloatLabel, InputNumber, Skeleton } from "primevue";
-import { useContext, useLocalization } from "#imports";
-import { AwaitLoading } from "#components";
+import { InputNumber, Skeleton } from "primevue";
+import { useContext } from "#imports";
+import { AwaitLoading, Labeler } 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, noGrouping } = schema;
+const { label, labelMode, labelVariant, noGrouping } = schema;
 const path = context.injectPath();
 function onInput(event) {
   model.value = event.value;

package/dist/runtime/components/InputText.vue

@@ -5,30 +5,33 @@
         <Skeleton class="min-h-10" />
       </div>
     </template>
-    <FloatLabel variant="on">
+    <Labeler
+      :label
+      :path
+      :mode="labelMode"
+      :variant="labelVariant"
+    >
       <InputText
         v-model="input"
         v-bind="$attrs"
         class="min-w-60"
         @update:model-value="onUpdate"
       />
-      <label :for="path">{{ l(label) }}</label>
-    </FloatLabel>
+    </Labeler>
   </AwaitLoading>
 </template>
 
 <script setup>
 import { ref } from "vue";
-import { FloatLabel, InputText, Skeleton } from "primevue";
-import { useContext, useLocalization } from "#imports";
-import { AwaitLoading } from "#components";
+import { InputText, Skeleton } from "primevue";
+import { useContext } from "#imports";
+import { AwaitLoading, Labeler } 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, targetProp } = schema;
+const { label, labelMode, labelVariant, targetProp } = schema;
 const path = context.injectPath();
 const input = ref("");
 function onUpdate(value) {

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

@@ -0,0 +1,65 @@
+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<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    path: {
+        type: StringConstructor;
+        required: true;
+    };
+    mode: {
+        type: StringConstructor;
+        default: null;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    dt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    path: {
+        type: StringConstructor;
+        required: true;
+    };
+    mode: {
+        type: StringConstructor;
+        default: null;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    dt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>> & Readonly<{}>, {
+    variant: string;
+    dt: Record<string, any>;
+    pt: Record<string, any>;
+    mode: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Labeler.vue

@@ -0,0 +1,49 @@
+<template>
+  <component
+    :is="labelComponent"
+    :dt
+    :pt
+    :variant
+  >
+    <template #default>
+      <slot />
+      <label
+        v-if="labelComponent !== 'div'"
+        class="max-sm:truncate max-sm:w-5/6"
+        :for="path"
+      >
+        {{ l(label) }}
+      </label>
+    </template>
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { FloatLabel, IftaLabel } from "primevue";
+import { useLocalization } from "#imports";
+const { localize: l } = useLocalization();
+const { label, mode } = defineProps({
+  label: { type: String, required: true },
+  path: { type: String, required: true },
+  mode: { type: String, default: null },
+  variant: { type: String, default: "on" },
+  pt: { type: Object, default: () => {
+  } },
+  dt: { type: Object, default: () => {
+  } }
+});
+const labelComponent = computed(() => {
+  if (!label) {
+    return "div";
+  }
+  switch (mode) {
+    case "ifta":
+      return IftaLabel;
+    case "float":
+      return FloatLabel;
+    default:
+      return "div";
+  }
+});
+</script>

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

@@ -0,0 +1,65 @@
+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<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    path: {
+        type: StringConstructor;
+        required: true;
+    };
+    mode: {
+        type: StringConstructor;
+        default: null;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    dt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    path: {
+        type: StringConstructor;
+        required: true;
+    };
+    mode: {
+        type: StringConstructor;
+        default: null;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    dt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>> & Readonly<{}>, {
+    variant: string;
+    dt: Record<string, any>;
+    pt: Record<string, any>;
+    mode: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

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

@@ -0,0 +1,33 @@
+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;
+    };
+    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;
+    };
+    data: {
+        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/PageSize.vue

@@ -0,0 +1,28 @@
+<template>
+  <Select
+    v-if="isXs"
+    v-model="model"
+    :schema
+    :data
+    class="
+      shadow-none rounded-md
+      bg-slate-100 border-slate-100
+      dark:bg-zinc-950 dark:border-zinc-950
+    "
+  />
+</template>
+
+<script setup>
+import { useBreakpoints } from "#imports";
+import { Select } from "#components";
+const { isXs } = useBreakpoints();
+defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const model = defineModel({ type: null, required: true });
+</script>
+
+<style>
+.b-component--PageSize .p-select-label{font-size:inherit}
+</style>

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

@@ -0,0 +1,33 @@
+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;
+    };
+    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;
+    };
+    data: {
+        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/Paginator.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<{
+    data: {
+        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<{
+    data: {
+        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/Paginator.vue

@@ -0,0 +1,53 @@
+<template>
+  <AwaitLoading>
+    <div class="flex items-center justify-center gap-1">
+      <span class="whitespace-nowrap text-xs max-xs:hidden">{{ lc("Page {page}", { page }) }}</span>
+      <Button
+        rounded
+        variant="text"
+        icon="pi pi-chevron-left"
+        :disabled="!allowPrevious"
+        severity="secondary"
+        size="small"
+        @click="page--"
+      />
+      <Button
+        rounded
+        variant="text"
+        icon="pi pi-chevron-right"
+        severity="secondary"
+        size="small"
+        :disabled="!allowNext"
+        @click="page++"
+      />
+    </div>
+  </AwaitLoading>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { Button } from "primevue";
+import { useContext, useLocalization } from "#imports";
+import { AwaitLoading } from "#components";
+const context = useContext();
+const { localize: lc } = useLocalization({ group: "Paginator" });
+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({
+  get: () => Number(model.value) / Number(data.take) + 1,
+  set: (value) => {
+    model.value = (value - 1) * Number(data.take);
+  }
+});
+if (data && contextData.page[takeStateKey] !== data.take) {
+  contextData.page[takeStateKey] = data.take;
+  page.value = 1;
+}
+</script>

package/dist/runtime/components/Paginator.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<{
+    data: {
+        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<{
+    data: {
+        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/Select.vue

@@ -5,9 +5,11 @@
         <Skeleton class="min-h-10" />
       </div>
     </template>
-    <component
-      :is="labelComponent"
-      v-bind="labelProps"
+    <Labeler
+      :label
+      :path
+      :mode="labelMode"
+      :variant="labelVariant"
     >
       <Select
         v-bind="$attrs"
@@ -31,21 +33,15 @@
           <span>{{ getOptionLabel(slotProps) }}</span>
         </template>
       </Select>
-      <label
-        v-if="!noFloatLabel"
-        :for="path"
-      >
-        {{ l(label) }}
-      </label>
-    </component>
+    </Labeler>
   </AwaitLoading>
 </template>
 
 <script setup>
-import { computed, ref, watch } from "vue";
-import { FloatLabel, Select, Skeleton } from "primevue";
+import { ref, watch } from "vue";
+import { Select, Skeleton } from "primevue";
 import { useContext, useUiStates, useLocalization } from "#imports";
-import { AwaitLoading } from "#components";
+import { AwaitLoading, Labeler } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { value: { selectStates } } = useUiStates();
@@ -54,11 +50,9 @@ const { schema, data } = defineProps({
   data: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { filter, label, localizeLabel, noFloatLabel, optionLabel, optionValue, showClear, stateful, targetProp } = schema;
+const { filter, label, labelMode, labelVariant, localizeLabel, optionLabel, optionValue, showClear, stateful, targetProp } = schema;
 const path = context.injectPath();
 const selected = ref();
-const labelComponent = computed(() => noFloatLabel ? "div" : FloatLabel);
-const labelProps = computed(() => noFloatLabel ? {} : { variant: "on" });
 watch(
   [() => data, getModel],
   ([_data, _model]) => {
@@ -104,5 +98,5 @@ function setSelected(value) {
 </script>
 
 <style>
-.b-component--Select .p-placeholder{visibility:hidden}.b-component--Select .p-select-label{font-size:inherit}
+.b-component--Select .p-placeholder{opacity:0}.b-component--Select .p-select-label{font-size:inherit}
 </style>

package/dist/runtime/components/SelectButton.vue

@@ -5,16 +5,21 @@
         <Skeleton class="min-h-10" />
       </div>
     </template>
-    <div :class="label ? 'flex flex-col' : 'inline-block'">
-      <label
-        v-if="label"
-        class="
-          text-xs text-slate-500 font-normal
-          dark:text-zinc-400 mb-1 ml-2
-        "
-      >
-        {{ l(label) }}
-      </label>
+    <Labeler
+      :label
+      :path
+      :mode="labelMode == 'ifta' ? labelMode : null"
+      :dt="{
+        colorScheme: {
+          light: {
+            top: '-1rem',
+          },
+          dark: {
+            top: '-1rem'
+          }
+        }
+      }"
+    >
       <SelectButton
         v-if="data"
         v-model="selected"
@@ -28,7 +33,7 @@
           <span>{{ getOptionLabel(slotProps) }}</span>
         </template>
       </SelectButton>
-    </div>
+    </Labeler>
   </AwaitLoading>
 </template>
 
@@ -36,7 +41,7 @@
 import { ref, watch } from "vue";
 import { SelectButton, Skeleton } from "primevue";
 import { useContext, useLocalization, useUiStates } from "#imports";
-import { AwaitLoading } from "#components";
+import { AwaitLoading, Labeler } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { value: { selectButtonStates } } = useUiStates();
@@ -45,7 +50,16 @@ const { schema, data } = defineProps({
   data: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { allowEmpty = false, label, localizeLabel, optionLabel, optionValue, stateful, targetProp } = schema;
+const {
+  allowEmpty = false,
+  label,
+  labelMode,
+  localizeLabel,
+  optionLabel,
+  optionValue,
+  stateful,
+  targetProp
+} = schema;
 const path = context.injectPath();
 const selected = ref();
 watch(
@@ -91,3 +105,7 @@ function setSelected(value) {
 <style>
 .p-togglebutton-content{@apply whitespace-nowrap}.p-popover-content .b-component--SelectButton .p-selectbutton{@apply max-sm:flex max-sm:flex-col}.p-popover-content .b-component--SelectButton .p-selectbutton .p-togglebutton:first-child{@apply max-sm:rounded-t-lg max-sm:rounded-es-none}.p-popover-content .b-component--SelectButton .p-selectbutton .p-togglebutton:last-child{@apply max-sm:rounded-b-lg max-sm:rounded-se-none}
 </style>
+
+<style scoped>
+&:has(.p-iftalabel) .p-iftalabel{@apply mt-2}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mouseless/baked",
-  "version": "1.4.3",
+  "version": "1.5.1",
   "description": "Baked is an opinionated framework for .NET and Vue. This is the UI package of Baked project.",
   "keywords": [
     "baked",
@@ -61,14 +61,14 @@
     "sass": "1.99.0",
     "typescript": "6.0.3",
     "vitest": "4.1.5",
-    "vue-tsc": "3.2.7"
+    "vue-tsc": "3.2.8"
   },
   "optionalDependencies": {
-    "@oxc-parser/binding-darwin-arm64": "0.128.0",
-    "@oxc-parser/binding-linux-arm64-gnu": "0.128.0",
-    "@oxc-parser/binding-linux-arm64-musl": "0.128.0",
-    "@oxc-parser/binding-linux-x64-gnu": "0.128.0",
-    "@oxc-parser/binding-linux-x64-musl": "0.128.0",
-    "@oxc-parser/binding-win32-x64-msvc": "0.128.0"
+    "@oxc-parser/binding-darwin-arm64": "0.129.0",
+    "@oxc-parser/binding-linux-arm64-gnu": "0.129.0",
+    "@oxc-parser/binding-linux-arm64-musl": "0.129.0",
+    "@oxc-parser/binding-linux-x64-gnu": "0.129.0",
+    "@oxc-parser/binding-linux-x64-musl": "0.129.0",
+    "@oxc-parser/binding-win32-x64-msvc": "0.129.0"
   }
 }

package/dist/runtime/components/ServerPaginator.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="flex items-center justify-center gap-1">
-    <Bake
-      v-if="takeComponent && isXs"
-      v-model="take"
-      name="take"
-      class="
-        mr-2 shadow-none rounded-md
-        bg-slate-100 border-slate-100
-        dark:bg-zinc-950 dark:border-zinc-950
-      "
-      :descriptor="takeComponent"
-    />
-    <span class="whitespace-nowrap text-xs 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++"
-    />
-  </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>