@mouseless/baked 1.6.0 → 1.6.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mouseless/baked",
   "configKey": "baked",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "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/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/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

@@ -64,6 +64,7 @@
         <Inputs
           v-if="inputs"
           :inputs
+          form-mode
           input-class="w-full"
           @ready="onReady"
           @changed="onChanged"
@@ -71,7 +72,7 @@
       </div>
       <Button
         ref="submitRef"
-        v-tooltip.left="{
+        v-tooltip.top="{
           disabled: !showValidationSummary,
           value: messages,
           pt: { text: 'text-sm' }

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,16 @@
     <slot
       name="message"
       :validation
+      :mutable-validation
     >
       <Message
-        v-if="validation.message && validation.persist"
+        v-if="message"
         :schema="{
-          severity: validation.severity,
+          severity: severity,
           variant: 'simple',
           size: 'small'
         }"
-        :data="validation.message || ''"
+        :data="message || ''"
         class="ml-3"
       />
     </slot>
@@ -26,8 +27,22 @@
 </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);
 </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/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,8 @@ export default function _default(): {
         messages: import("vue").ComputedRef<string>;
         validations: import("vue").ComputedRef<any>;
     };
+    injectMutable: () => {
+        clear: () => void;
+        setError: (message: any) => void;
+    } | null;
 };

package/dist/runtime/composables/useValidation.js

@@ -26,14 +26,18 @@ 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)
+      [...Object.values(validations.value), ...Object.values(mutableValidations).map(v => v.value)]
         .filter(v => v.message)
         .map((v, i) => `${i > 0 ? "\n" : ""} - ${v.message}`)
         .join("")
@@ -42,7 +46,34 @@ 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) {
+    ref.value.valid = false;
+    ref.value.message = message;
+    ref.value.severity = "error";
+  }
+
   return {
-    validate
+    clear,
+    setError
   };
 }

package/package.json

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