@mouseless/baked 1.5.3 → 1.6.1

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

@@ -0,0 +1,15 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    error: {
+        type: null;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    error: {
+        type: null;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    error: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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,23 +3,46 @@
     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 } from "#imports";
+import { useDataMounter, useContext } from "#imports";
 import { Bake } from "#components";
+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;
+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)) {
@@ -39,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);
@@ -73,6 +96,9 @@ function checkValue(value) {
   return value !== void 0 && value !== null;
 }
 function setModel(value) {
+  if (value === model.value) {
+    return;
+  }
   if (!schema.numeric) {
     model.value = value;
   } else {

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,37 +1,37 @@
 <template>
-  <AwaitLoading>
-    <template #loading>
-      <div class="min-w-60">
-        <Skeleton class="min-h-10" />
-      </div>
-    </template>
-    <Labeler
-      :label
-      :path
-      :mode="labelMode"
-      :variant="labelVariant"
-    >
-      <InputNumber
-        v-model="model"
-        v-bind="$attrs"
-        :use-grouping="!noGrouping"
-        class="min-w-60"
-        @input="onInput"
-      />
-    </Labeler>
+  <AwaitLoading
+    :skeleton="{
+      height: label?.mode === 'ifta' ? '3.6rem' : '2.6rem',
+      class: 'min-w-60'
+    }"
+  >
+    <Validation>
+      <Labeler
+        :label
+        :path
+      >
+        <InputNumber
+          v-model="model"
+          v-bind="$attrs"
+          :use-grouping="!noGrouping"
+          class="min-w-60"
+          @input="onInput"
+        />
+      </Labeler>
+    </Validation>
   </AwaitLoading>
 </template>
 
 <script setup>
-import { InputNumber, Skeleton } from "primevue";
+import { InputNumber } from "primevue";
 import { useContext } from "#imports";
-import { AwaitLoading, Labeler } from "#components";
+import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
 const { schema } = defineProps({
   schema: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { label, labelMode, labelVariant, noGrouping } = schema;
+const { label, noGrouping } = schema;
 const path = context.injectPath();
 function onInput(event) {
   model.value = event.value;

package/dist/runtime/components/InputText.vue

@@ -1,37 +1,37 @@
 <template>
-  <AwaitLoading>
-    <template #loading>
-      <div class="min-w-60">
-        <Skeleton class="min-h-10" />
-      </div>
-    </template>
-    <Labeler
-      :label
-      :path
-      :mode="labelMode"
-      :variant="labelVariant"
-    >
-      <InputText
-        v-model="input"
-        v-bind="$attrs"
-        class="min-w-60"
-        @update:model-value="onUpdate"
-      />
-    </Labeler>
+  <AwaitLoading
+    :skeleton="{
+      height: label?.mode === 'ifta' ? '3.6rem' : '2.6rem',
+      class: 'min-w-60'
+    }"
+  >
+    <Validation>
+      <Labeler
+        :label
+        :path
+      >
+        <InputText
+          v-model="input"
+          v-bind="$attrs"
+          class="min-w-60"
+          @update:model-value="onUpdate"
+        />
+      </Labeler>
+    </Validation>
   </AwaitLoading>
 </template>
 
 <script setup>
 import { ref, watch } from "vue";
-import { InputText, Skeleton } from "primevue";
+import { InputText } from "primevue";
 import { useContext } from "#imports";
-import { AwaitLoading, Labeler } from "#components";
+import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
 const { schema } = defineProps({
   schema: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { label, labelMode, labelVariant, targetProp } = schema;
+const { label, targetProp } = schema;
 const path = context.injectPath();
 const input = ref("");
 watch(model, (newValue) => {

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,6 +4,7 @@
     :key="input.name"
     v-model="models[input.name]"
     :schema="input"
+    :form-mode
     :class="inputClass"
   />
 </template>
@@ -14,8 +15,9 @@ 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"]);
@@ -29,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();

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.d.vue.ts

@@ -6,61 +6,45 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
-        type: StringConstructor;
+        type: ObjectConstructor;
         default: null;
     };
     path: {
         type: StringConstructor;
         required: true;
     };
-    mode: {
-        type: StringConstructor;
-        default: null;
-    };
-    variant: {
-        type: StringConstructor;
-        default: string;
-    };
     pt: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
     dt: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
-        type: StringConstructor;
+        type: ObjectConstructor;
         default: null;
     };
     path: {
         type: StringConstructor;
         required: true;
     };
-    mode: {
-        type: StringConstructor;
-        default: null;
-    };
-    variant: {
-        type: StringConstructor;
-        default: string;
-    };
     pt: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
     dt: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
 }>> & Readonly<{}>, {
-    label: string;
-    variant: string;
+    label: Record<string, any>;
     dt: Record<string, any>;
     pt: Record<string, any>;
-    mode: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
 };

package/dist/runtime/components/Labeler.vue

@@ -1,18 +1,19 @@
 <template>
+  <template v-if="!text">
+    <slot />
+  </template>
   <component
     :is="labelComponent"
+    v-else
     :dt
     :pt
     :variant
+    :required
   >
     <template #default>
       <slot />
-      <label
-        v-if="labelComponent !== 'div'"
-        class="max-sm:truncate max-sm:w-5/6"
-        :for="path"
-      >
-        {{ l(label) }}
+      <label :for="path">
+        {{ localizedText }}
       </label>
     </template>
   </component>
@@ -21,29 +22,35 @@
 <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, default: null },
+import { useContext, useLocalization } from "#imports";
+const context = useContext();
+const { localize: l } = useLocalization({});
+const { localize: lc } = useLocalization({ group: "Labeler" });
+const { label } = defineProps({
+  label: { type: Object, default: null },
   path: { type: String, required: true },
-  mode: { type: String, default: null },
-  variant: { type: String, default: "on" },
-  pt: { type: Object, default: () => {
-  } },
-  dt: { type: Object, default: () => {
-  } }
+  pt: { type: Object, default: () => ({}) },
+  dt: { type: Object, default: () => ({}) }
+});
+const { text, mode, variant = "on", showOptionality } = label ?? {};
+const validation = context.injectValidation();
+const required = computed(() => validation?.value?.required);
+const localizedText = computed(() => {
+  if (!showOptionality) {
+    return l(text);
+  }
+  if (required.value) {
+    return lc("{label} (Required)", { label: l(text) });
+  }
+  return lc("{label} (Optional)", { label: l(text) });
 });
 const labelComponent = computed(() => {
-  if (!label) {
-    return "div";
+  if (mode === "ifta") {
+    return IftaLabel;
   }
-  switch (mode) {
-    case "ifta":
-      return IftaLabel;
-    case "float":
-      return FloatLabel;
-    default:
-      return "div";
+  if (mode === "float") {
+    return FloatLabel;
   }
+  throw new Error("`mode` must be set when `text` is set");
 });
 </script>

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

@@ -6,61 +6,45 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
-        type: StringConstructor;
+        type: ObjectConstructor;
         default: null;
     };
     path: {
         type: StringConstructor;
         required: true;
     };
-    mode: {
-        type: StringConstructor;
-        default: null;
-    };
-    variant: {
-        type: StringConstructor;
-        default: string;
-    };
     pt: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
     dt: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
-        type: StringConstructor;
+        type: ObjectConstructor;
         default: null;
     };
     path: {
         type: StringConstructor;
         required: true;
     };
-    mode: {
-        type: StringConstructor;
-        default: null;
-    };
-    variant: {
-        type: StringConstructor;
-        default: string;
-    };
     pt: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
     dt: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {};
     };
 }>> & Readonly<{}>, {
-    label: string;
-    variant: string;
+    label: Record<string, any>;
     dt: Record<string, any>;
     pt: Record<string, any>;
-    mode: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
 };

package/dist/runtime/components/Layout.vue

@@ -1,7 +1,11 @@
 <template>
   <Toast
-    :pt="{ root: 'z-10' }"
     position="top-center"
+    :pt="{
+      root: ({ state }) => ({
+        class: ['z-10', state.messages[0]?.wide ? 'w-4/5' : '']
+      })
+    }"
   />
   <Bake
     :key="descriptor.type"

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

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    error: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    error: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/LoadingError.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="
+      rounded-md pl-1
+      bg-red-500/10 text-red-500
+    "
+  >
+    <span
+      v-tooltip.bottom="{
+        value: `${title} - ${detail}`,
+        autoHide: false,
+        pt: {
+          text: { class: 'bg-red-500' },
+          arrow: { class: 'border-y-red-500' },
+        }
+      }"
+      class="text-sm"
+    >{{ title }}</span>
+  </div>
+</template>
+
+<script setup>
+const { error } = defineProps({
+  error: { type: Object, required: true }
+});
+const { title, detail } = error;
+</script>

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

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    error: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    error: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,6 +1,10 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+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<{
     schema: {
         type: null;
         required: true;
@@ -19,3 +23,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    content?: ((props: {}) => any) | undefined;
+};