@mouseless/baked 1.6.0 → 1.6.2

package/dist/module.json

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

package/dist/runtime/components/Bake.vue

@@ -73,7 +73,7 @@ const errorHandled = context.provideError(rawError);
 const error = normalizeError(rawError);
 context.providePath(path);
 context.provideDataDescriptor(descriptor.data);
-context.provideParentContext({ ...contextData.parent, data });
+context.provideParentContext({ ...contextData.parent, data, grand: contextData.parent });
 if (shouldLoad) {
   context.provideLoading(loading);
 }

package/dist/runtime/components/Button.vue

@@ -6,6 +6,7 @@
     :label="l(label)"
     :rounded
     :severity
+    :size
     :variant
     @click="$emit('submit')"
   />
@@ -21,6 +22,6 @@ const { schema } = defineProps({
   ready: { type: Boolean, default: true }
 });
 defineEmits(["submit"]);
-const { icon, label, rounded, severity = "secondary", variant } = schema;
+const { icon, label, rounded, severity = "secondary", size, variant } = schema;
 const executing = context.injectExecuting();
 </script>

package/dist/runtime/components/DataContainer.vue

@@ -7,19 +7,36 @@
     "
   >
     <div
-      v-if="inputs.length > 0"
-      class="
-        py-2 px-4
-        bg-transparent
-        rounded-none text-sm
-        flex gap-2 items-center justify-end
-      "
+      v-if="actions.length || inputs.length"
+      class="w-full flex justify-between  py-2 px-4"
     >
-      <Inputs
-        :inputs="inputs"
-        @ready="onReady"
-        @changed="onChanged"
-      />
+      <div
+        class="
+          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
+        "
+      >
+        <Bake
+          v-for="action in actions"
+          :key="action.schema.name"
+          :name="`actions/${action.schema.name}`"
+          :descriptor="action"
+        />
+      </div>
+      <div
+        class="
+          bg-transparent
+          rounded-none text-sm
+          flex gap-2 items-center justify-end
+        "
+      >
+        <Inputs
+          :inputs="inputs"
+          @ready="onReady"
+          @changed="onChanged"
+        />
+      </div>
     </div>
     <div
       class="p-4 [contain:inline-size]"
@@ -49,7 +66,7 @@ const { localize: lc } = useLocalization({ group: "DataContainer" });
 const { schema } = defineProps({
   schema: { type: null, required: true }
 });
-const { content, inputs } = schema;
+const { actions = [], content, inputs } = schema;
 const contextData = context.injectContextData();
 const loaded = ref(true);
 const ready = ref(inputs.length === 0);
@@ -68,5 +85,5 @@ function onChanged(event) {
 </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}
+.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}.b-component--DataContainer .p-button{@apply self-stretch}.b-component--DataContainer .p-button .p-button-icon+.p-button-label{@apply max-sm:hidden}
 </style>

package/dist/runtime/components/FormPage.vue

@@ -74,6 +74,7 @@
               >
                 <Inputs
                   :inputs="inputGroup.inputs"
+                  form-mode
                   input-class="w-full"
                   @ready="(value) => onReady(`${section.key}_${inputGroup.key}`, value)"
                   @changed="onChanged"

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

@@ -5,6 +5,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: ObjectConstructor;
         required: true;
     };
+    formMode: {
+        type: BooleanConstructor;
+    };
     modelValue: {
         type: import("vue").PropType<any>;
         required: true;
@@ -16,10 +19,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: ObjectConstructor;
         required: true;
     };
+    formMode: {
+        type: BooleanConstructor;
+    };
     modelValue: {
         type: import("vue").PropType<any>;
         required: true;
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    formMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Input.vue

@@ -3,11 +3,13 @@
     v-model="model"
     :name="schema.name"
     :descriptor="schema.component"
+    :invalid
+    @blur="onBlur"
   />
 </template>
 
 <script setup>
-import { computed, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "#app";
 import { useDataMounter, useContext } from "#imports";
 import { Bake } from "#components";
@@ -15,15 +17,32 @@ const context = useContext();
 const { mount: mountData, onAfterMount: onAfterMountData } = useDataMounter();
 const route = useRoute();
 const router = useRouter();
-const { schema } = defineProps({
-  schema: { type: Object, required: true }
+const { schema, formMode } = defineProps({
+  schema: { type: Object, required: true },
+  formMode: { type: Boolean }
 });
 const model = defineModel({ type: null, required: true });
 const validations = context.injectValidations();
+const mutableValidations = context.injectMutableValidations();
 const defaultValue = mountData(schema.default);
 const query = schema.queryBound ? computed(() => route.query[schema.name]) : void 0;
-const validation = computed(() => validations.value[schema.name] || {});
-context.provideValidation(validation);
+let validation = void 0;
+let mutableValidation = void 0;
+let touched = void 0;
+let invalidInForm = void 0;
+let invalid = void 0;
+let onBlur = void 0;
+if (validations) {
+  validation = computed(() => validations.value[schema.name]);
+  mutableValidation = ref({ valid: true });
+  touched = ref(false);
+  invalidInForm = computed(() => !validation.value?.valid && (validation.value?.persist || touched.value));
+  invalid = computed(() => !mutableValidation.value.valid || invalidInForm.value);
+  onBlur = () => touched.value = true;
+  mutableValidations[schema.name] = mutableValidation;
+  context.provideValidation(validation);
+  context.provideMutableValidation(mutableValidation);
+}
 onAfterMountData(async () => {
   if (!checkValue(model.value)) {
     if (schema.queryBound && checkValue(query.value)) {
@@ -43,7 +62,7 @@ onAfterMountData(async () => {
     }, { immediate: true });
   }
   watch(model, async (newValue) => {
-    if (!checkValue(newValue)) {
+    if (!checkValue(newValue) && !formMode) {
       newValue = schema.required ? defaultValue.value : void 0;
     }
     await set(newValue);

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

@@ -5,6 +5,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: ObjectConstructor;
         required: true;
     };
+    formMode: {
+        type: BooleanConstructor;
+    };
     modelValue: {
         type: import("vue").PropType<any>;
         required: true;
@@ -16,10 +19,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: ObjectConstructor;
         required: true;
     };
+    formMode: {
+        type: BooleanConstructor;
+    };
     modelValue: {
         type: import("vue").PropType<any>;
         required: true;
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    formMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/InputNumber.vue

@@ -1,10 +1,10 @@
 <template>
-  <AwaitLoading>
-    <template #loading>
-      <div class="min-w-60">
-        <Skeleton class="min-h-10" />
-      </div>
-    </template>
+  <AwaitLoading
+    :skeleton="{
+      height: label?.mode === 'ifta' ? '3.6rem' : '2.6rem',
+      class: 'min-w-60'
+    }"
+  >
     <Validation>
       <Labeler
         :label
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { InputNumber, Skeleton } from "primevue";
+import { InputNumber } from "primevue";
 import { useContext } from "#imports";
 import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();

package/dist/runtime/components/InputText.vue

@@ -1,10 +1,10 @@
 <template>
-  <AwaitLoading>
-    <template #loading>
-      <div class="min-w-60">
-        <Skeleton class="min-h-10" />
-      </div>
-    </template>
+  <AwaitLoading
+    :skeleton="{
+      height: label?.mode === 'ifta' ? '3.6rem' : '2.6rem',
+      class: 'min-w-60'
+    }"
+  >
     <Validation>
       <Labeler
         :label
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref, watch } from "vue";
-import { InputText, Skeleton } from "primevue";
+import { InputText } from "primevue";
 import { useContext } from "#imports";
 import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();

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

@@ -5,6 +5,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: ArrayConstructor;
         required: true;
     };
+    formMode: {
+        type: BooleanConstructor;
+    };
     inputClass: {
         type: StringConstructor;
         default: string;
@@ -17,6 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: ArrayConstructor;
         required: true;
     };
+    formMode: {
+        type: BooleanConstructor;
+    };
     inputClass: {
         type: StringConstructor;
         default: string;
@@ -25,5 +31,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onReady?: ((...args: any[]) => any) | undefined;
     onChanged?: ((...args: any[]) => any) | undefined;
 }>, {
+    formMode: boolean;
     inputClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Inputs.vue

@@ -4,26 +4,24 @@
     :key="input.name"
     v-model="models[input.name]"
     :schema="input"
+    :form-mode
     :class="inputClass"
-    :invalid="invalid(input.name)"
-    @blur="() => touched(input.name)"
   />
 </template>
 
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
+import { computed, reactive, watch } from "vue";
 import { useContext, useRoute } from "#imports";
 import { Input } from "#components";
 const context = useContext();
 const route = useRoute();
-const { inputs } = defineProps({
+const { inputs, formMode } = defineProps({
   inputs: { type: Array, required: true },
+  formMode: { type: Boolean },
   inputClass: { type: String, default: "" }
 });
 const emit = defineEmits(["ready", "changed"]);
 const parentPath = context.injectPath();
-const validations = context.injectValidations();
-const inputEvents = ref({});
 const models = reactive({});
 const values = computed(
   () => inputs.reduce((result, input) => {
@@ -33,7 +31,7 @@ const values = computed(
 );
 context.providePath(`${parentPath}/inputs`);
 watch(values, (newValues) => {
-  if (inputs.filter((i) => i.default || i.defaultSelfManaged).some((i) => !checkValue(newValues[i.name]))) {
+  if (!formMode && inputs.filter((i) => i.default || i.defaultSelfManaged).some((i) => !checkValue(newValues[i.name]))) {
     return;
   }
   emitChanged();
@@ -64,16 +62,4 @@ function getValue(input) {
     return models[input.name];
   }
 }
-function touched(key) {
-  inputEvents.value[key] = { touched: true };
-}
-function invalid(input) {
-  if (!Object.values(validations.value).length) {
-    return;
-  }
-  if (!validations.value[input]?.valid && validations.value[input]?.persist) {
-    return true;
-  }
-  return !validations.value[input]?.valid && inputEvents.value[input]?.touched || false;
-}
 </script>

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

@@ -5,6 +5,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: ArrayConstructor;
         required: true;
     };
+    formMode: {
+        type: BooleanConstructor;
+    };
     inputClass: {
         type: StringConstructor;
         default: string;
@@ -17,6 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: ArrayConstructor;
         required: true;
     };
+    formMode: {
+        type: BooleanConstructor;
+    };
     inputClass: {
         type: StringConstructor;
         default: string;
@@ -25,5 +31,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onReady?: ((...args: any[]) => any) | undefined;
     onChanged?: ((...args: any[]) => any) | undefined;
 }>, {
+    formMode: boolean;
     inputClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Labeler.vue

@@ -12,10 +12,7 @@
   >
     <template #default>
       <slot />
-      <label
-        class="max-sm:truncate max-sm:w-5/6"
-        :for="path"
-      >
+      <label :for="path">
         {{ localizedText }}
       </label>
     </template>

package/dist/runtime/components/Message.vue

@@ -1,6 +1,10 @@
 <template>
   <div
-    class="b-message grid"
+    class="
+      b-message
+      grid grid-cols-[1fr_auto] gap-2
+      items-center
+    "
     :class="[`message-${severity}`, `message-${variant}`]"
   >
     <div class="min-h-0">
@@ -25,18 +29,27 @@
         <slot name="content" />
       </div>
     </div>
+    <div
+      v-if="action"
+      class="b-message-action px-2"
+    >
+      <Bake
+        name="action"
+        :descriptor="{ ...action, schema: { ...action.schema, severity } }"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { computed, useLocalization } from "#imports";
-import { AwaitLoading } from "#components";
+import { AwaitLoading, Bake } from "#components";
 const { localize: l } = useLocalization();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { icon, localizeMessage, severity = "info", size, variant = "outlined" } = schema;
+const { action, icon, localizeMessage, severity = "info", size, variant = "outlined" } = schema;
 const sizeClass = computed(() => {
   switch (size) {
     case "small":
@@ -50,7 +63,7 @@ const sizeClass = computed(() => {
 </script>
 
 <style scoped>
-.message-outlined{@apply border rounded-md}.message-outlined .b-message-body{@apply py-[0.50rem] px-[0.75rem] min-w-[10rem] min-h-[1.5rem]}.message-simple{@apply !bg-transparent}.message-simple .b-message-body{@apply px-0}.message-info{@apply bg-blue-50/95 text-blue-600 border-blue-200
+.message-outlined{@apply border rounded-md}.message-outlined .b-message-body{@apply py-[0.50rem] px-[0.75rem] min-w-[10rem] min-h-[1.5rem]}.message-simple{@apply !bg-transparent}.message-simple .b-message-icon{@apply text-sm}.message-simple .b-message-body{@apply px-0}.message-info{@apply bg-blue-50/95 text-blue-600 border-blue-200
     dark:bg-blue-950/95 dark:text-blue-500 dark:border-blue-700/65}.message-error{@apply bg-red-50/95 text-red-600 border-red-200
     dark:bg-red-950/95 dark:text-red-500 dark:border-red-700/65}.message-warn{@apply bg-yellow-50/95 text-yellow-600 border-yellow-200
     dark:bg-yellow-950/95 dark:text-yellow-500 dark:border-yellow-700/65}.message-success{@apply bg-green-50/95 text-green-600 border-green-200

package/dist/runtime/components/NavLink.vue

@@ -1,13 +1,15 @@
 <template>
   <AwaitLoading :skeleton="{ height: '1.5rem' }">
     <Button
+      v-if="data"
       :icon
-      :label="data"
+      :label
       :to
       as="router-link"
       link
       class="m-0 p-0"
     />
+    <span v-else>-</span>
   </AwaitLoading>
 </template>
 
@@ -22,9 +24,10 @@ const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { icon, path, query: queryData, params: paramsData } = schema;
+const { icon, labelProp, path, query: queryData, params: paramsData } = schema;
 const query = mountData(queryData);
 const params = mountData(paramsData);
+const label = computed(() => labelProp ? data?.[labelProp] : data);
 const to = computed(() => ({
   path: params.value ? pathBuilder.build(path, params.value, { forRoute: true }) : path,
   query: query.value

package/dist/runtime/components/Select.vue

@@ -1,10 +1,10 @@
 <template>
-  <AwaitLoading>
-    <template #loading>
-      <div class="min-w-40">
-        <Skeleton class="min-h-10" />
-      </div>
-    </template>
+  <AwaitLoading
+    :skeleton="{
+      height: label?.mode === 'ifta' ? '3.6rem' : '2.6rem',
+      class: 'min-w-40'
+    }"
+  >
     <Validation>
       <Labeler
         :label
@@ -21,7 +21,6 @@
           :auto-filter-focus="filter"
           :filter-fields="[optionLabel]"
           reset-filter-on-hide
-          class="w-full"
         >
           <template #value="slotProps">
             <span>{{ getValueLabel(slotProps) }}</span>
@@ -37,7 +36,7 @@
 
 <script setup>
 import { ref, watch } from "vue";
-import { Select, Skeleton } from "primevue";
+import { Select } from "primevue";
 import { useContext, useUiStates, useLocalization } from "#imports";
 import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
@@ -97,5 +96,5 @@ function setSelected(value) {
 </script>
 
 <style>
-.b-component--Select .p-placeholder{opacity:0}.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}.p-popover-content .b-component--Select{@apply max-md:w-full}
 </style>

package/dist/runtime/components/SelectButton.vue

@@ -1,10 +1,10 @@
 <template>
-  <AwaitLoading>
-    <template #loading>
-      <div class="min-w-60">
-        <Skeleton class="min-h-10" />
-      </div>
-    </template>
+  <AwaitLoading
+    :skeleton="{
+      height: label?.mode === 'ifta' ? '3.6rem' : '2.6rem',
+      class: 'min-w-60'
+    }"
+  >
     <Validation>
       <Labeler
         :label="{
@@ -46,7 +46,7 @@
 
 <script setup>
 import { ref, watch } from "vue";
-import { SelectButton, Skeleton } from "primevue";
+import { SelectButton } from "primevue";
 import { useContext, useLocalization, useUiStates } from "#imports";
 import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
@@ -109,7 +109,7 @@ function setSelected(value) {
 </script>
 
 <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}
+.p-togglebutton-content{@apply whitespace-nowrap}.p-popover-content .b-component--SelectButton .p-selectbutton,.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,.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,.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>

package/dist/runtime/components/SimpleForm.vue

@@ -55,34 +55,41 @@
   <template v-else>
     <div
       v-bind="$attrs"
-      class="flex flex-col gap-8"
+      class="flex flex-col gap-4"
+      :class="{ 'gap-8': !horizontal }"
     >
-      <h1 class="font-bold text-xl truncate">
+      <h2 class="font-bold text-xl truncate">
         {{ l(title) }}
-      </h1>
-      <div class="flex flex-col gap-4">
+      </h2>
+      <div
+        class="flex gap-4"
+        :class="{ 'flex-col': !horizontal }"
+      >
         <Inputs
           v-if="inputs"
           :inputs
+          form-mode
           input-class="w-full"
           @ready="onReady"
           @changed="onChanged"
         />
+        <Button
+          ref="submitRef"
+          v-tooltip.top="{
+            disabled: !showValidationSummary,
+            value: messages,
+            pt: { text: 'text-sm' }
+          }"
+          :schema="submit"
+          :ready
+          class="min-w-min"
+          :class="{ 'mt-4': !horizontal && inputs.length }"
+          @submit="$emit('submit', model)"
+        />
+        <ErrorPopover ref="errorPopoverRef">
+          <InlineError :error />
+        </ErrorPopover>
       </div>
-      <Button
-        ref="submitRef"
-        v-tooltip.left="{
-          disabled: !showValidationSummary,
-          value: messages,
-          pt: { text: 'text-sm' }
-        }"
-        :schema="submit"
-        :ready
-        @submit="$emit('submit', model)"
-      />
-      <ErrorPopover ref="errorPopoverRef">
-        <InlineError :error />
-      </ErrorPopover>
     </div>
   </template>
 </template>
@@ -99,7 +106,7 @@ const { schema } = defineProps({
   schema: { type: null, required: true }
 });
 const emit = defineEmits(["submit"]);
-const { dialogOptions, inputs, submit, title, validations = [], showValidationSummary = false } = schema;
+const { dialogOptions, inputs, horizontal, submit, title, validations = [], showValidationSummary = false } = schema;
 const model = ref({});
 const readyData = ref({});
 const submitted = ref(false);

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

@@ -12,5 +12,6 @@ type __VLS_Slots = {
 } & {
     message?: ((props: {
         validation: any;
+        mutableValidation: any;
     }) => any) | undefined;
 };

package/dist/runtime/components/Validation.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-if="!validation">
+  <template v-if="validationHandled || !validation">
     <slot />
   </template>
   <div
@@ -10,15 +10,19 @@
     <slot
       name="message"
       :validation
+      :mutable-validation
     >
       <Message
-        v-if="validation.message && validation.persist"
+        v-if="message"
+        :key="`${severity}:${icon}`"
+        icon="pi pi-info-circle"
         :schema="{
-          severity: validation.severity,
+          severity,
           variant: 'simple',
-          size: 'small'
+          size: 'small',
+          icon
         }"
-        :data="validation.message || ''"
+        :data="message || ''"
         class="ml-3"
       />
     </slot>
@@ -26,8 +30,23 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { useContext } from "#imports";
 import { Message } from "#components";
 const context = useContext();
+const validationHandled = context.injectValidationHandled();
 const validation = context.injectValidation();
+const mutableValidation = context.injectMutableValidation();
+context.provideValidationHandled(true);
+const message = computed(() => {
+  if (mutableValidation?.value.message) {
+    return mutableValidation.value.message;
+  }
+  if (validation.value?.message && validation.value?.persist) {
+    return validation.value.message;
+  }
+  return null;
+});
+const severity = computed(() => mutableValidation?.value.severity || validation?.value.severity);
+const icon = computed(() => mutableValidation?.value.icon || validation?.value.icon);
 </script>

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

@@ -12,5 +12,6 @@ type __VLS_Slots = {
 } & {
     message?: ((props: {
         validation: any;
+        mutableValidation: any;
     }) => any) | undefined;
 };

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

@@ -17,12 +17,18 @@ export default function _default(): {
     provideExecuting: (value: any) => void;
     injectLoading: () => import("vue").Ref<boolean, boolean>;
     provideLoading: (value: any) => void;
+    injectMutableValidations: () => {};
+    provideMutableValidations: (value: any) => void;
+    injectMutableValidation: () => null;
+    provideMutableValidation: (value: any) => void;
     injectPageContext: () => any;
     providePageContext: (value: any) => void;
     injectParentContext: () => null;
     provideParentContext: (value: any) => void;
-    injectValidations: () => import("vue").Ref<{}, {}>;
+    injectValidations: () => null;
     provideValidations: (value: any) => void;
     injectValidation: () => null;
     provideValidation: (value: any) => void;
+    injectValidationHandled: () => boolean;
+    provideValidationHandled: (value: any) => void;
 };

package/dist/runtime/composables/useContext.js

@@ -71,6 +71,22 @@ export default function() {
     provide("__bake_loading", value);
   }
 
+  function injectMutableValidations() {
+    return inject("__bake_mutable_validations", {});
+  }
+
+  function provideMutableValidations(value) {
+    provide("__bake_mutable_validations", value);
+  }
+
+  function injectMutableValidation() {
+    return inject("__bake_mutable_validation", null);
+  }
+
+  function provideMutableValidation(value) {
+    provide("__bake_mutable_validation", value);
+  }
+
   function injectPageContext() {
     return inject("__bake_page_context");
   }
@@ -88,7 +104,7 @@ export default function() {
   }
 
   function injectValidations() {
-    return inject("__bake_validations", ref({}));
+    return inject("__bake_validations", null);
   }
 
   function provideValidations(value) {
@@ -103,6 +119,14 @@ export default function() {
     provide("__bake_validation", value);
   }
 
+  function injectValidationHandled() {
+    return inject("__bake_validation_handled", false);
+  }
+
+  function provideValidationHandled(value) {
+    provide("__bake_validation_handled", value);
+  }
+
   return {
     injectPath,
     providePath,
@@ -117,6 +141,10 @@ export default function() {
     provideExecuting,
     injectLoading,
     provideLoading,
+    injectMutableValidations,
+    provideMutableValidations,
+    injectMutableValidation,
+    provideMutableValidation,
     injectPageContext,
     providePageContext,
     injectParentContext,
@@ -124,6 +152,8 @@ export default function() {
     injectValidations,
     provideValidations,
     injectValidation,
-    provideValidation
+    provideValidation,
+    injectValidationHandled,
+    provideValidationHandled
   };
 }

package/dist/runtime/composables/useReactionHandler.js

@@ -74,7 +74,8 @@ function On({ evaluate, eventId, events }) {
 
 function When({ contextData, evaluate }) {
   function bind({ trigger, react }) {
-    watch(() => contextData.page[trigger.when], async value => {
+    watch(() => contextData[trigger.key ?? "page"][trigger.when], async value => {
+      react(false);
       react(await evaluate(trigger.constraint, value));
     }, { immediate: true });
 

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

@@ -1,3 +1,3 @@
 export default function _default(): {
-    run: ({ route, back, expected, actual }?: {}) => Promise<void>;
+    run: ({ route, back, expected, actual, ...params }?: {}) => Promise<void>;
 };

package/dist/runtime/composables/useRedirect.js

@@ -1,11 +1,17 @@
 import { useRouter } from "#app";
+import { usePathBuilder } from "#imports";
 
 export default function() {
   const router = useRouter();
+  const { build } = usePathBuilder();
 
-  async function run({ route, back, expected, actual } = {}) {
+  async function run({ route, back, expected, actual, ...params } = {}) {
     if(expected && actual !== expected) { return; }
 
+    if(route && Object.keys(params).length > 0) {
+      route = build(route, params, { forRoute: true });
+    }
+
     if(back) {
       router.back();
     } else {

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

@@ -8,4 +8,12 @@ export default function _default(): {
         messages: import("vue").ComputedRef<string>;
         validations: import("vue").ComputedRef<any>;
     };
+    injectMutable: () => {
+        clear: () => void;
+        setError: (message: any) => void;
+        setMessage: (message: any, { persist, severity, icon }?: {
+            persist?: boolean | undefined;
+            severity?: string | undefined;
+        }) => void;
+    } | null;
 };

package/dist/runtime/composables/useValidation.js

@@ -26,15 +26,19 @@ export default function() {
       }), {})
     );
 
+    const mutableValidations = {};
+
     context.provideValidations(validations);
+    context.provideMutableValidations(mutableValidations);
 
     const isValid = computed(() =>
-      Object.values(validations.value).every(v => v.valid)
+      Object.values(validations.value).every(v => v.valid) &&
+      Object.values(mutableValidations).every(v => v.value.valid)
     );
 
     const messages = computed(() =>
-      Object.values(validations.value)
-        .filter(v => v.message)
+      [...Object.values(validations.value), ...Object.values(mutableValidations).map(v => v.value)]
+        .filter(v => v.message && v.severity === "error")
         .map((v, i) => `${i > 0 ? "\n" : ""} - ${v.message}`)
         .join("")
     );
@@ -42,7 +46,41 @@ export default function() {
     return { isValid, messages, validations };
   }
 
+  function injectMutable() {
+    const ref = context.injectMutableValidation();
+    if(!ref) { return null; }
+
+    return MutableValidation(ref);
+  }
+
+  return {
+    validate,
+    injectMutable
+  };
+}
+
+function MutableValidation(ref) {
+  function clear() {
+    ref.value.valid = true;
+    delete ref.value.message;
+    delete ref.value.severity;
+  }
+
+  function setError(message) {
+    setMessage(message, { persist: true, severity: "error" });
+  }
+
+  function setMessage(message, { persist = false, severity = "secondary", icon } = {}) {
+    ref.value.valid = severity !== "error";
+    ref.value.message = message;
+    ref.value.persist = persist;
+    ref.value.severity = severity;
+    ref.value.icon = icon;
+  }
+
   return {
-    validate
+    clear,
+    setError,
+    setMessage
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mouseless/baked",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Baked is an opinionated framework for .NET and Vue. This is the UI package of Baked project.",
   "keywords": [
     "baked",
@@ -47,6 +47,7 @@
     "@nuxtjs/tailwindcss": "6.14.0",
     "@primeuix/themes": "2.0.3",
     "async-mutex": "0.5.0",
+    "playwright": "^1.60.0",
     "primeicons": "7.0.0",
     "primevue": "4.5.5"
   },
@@ -71,4 +72,4 @@
     "@oxc-parser/binding-linux-x64-musl": "0.133.0",
     "@oxc-parser/binding-win32-x64-msvc": "0.133.0"
   }
-}
+}