@mouseless/baked 1.5.3 → 1.6.0

package/dist/runtime/components/Input.vue

@@ -9,8 +9,9 @@
 <script setup>
 import { computed, 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();
@@ -18,8 +19,11 @@ const { schema } = defineProps({
   schema: { type: Object, required: true }
 });
 const model = defineModel({ type: null, required: true });
+const validations = context.injectValidations();
 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);
 onAfterMountData(async () => {
   if (!checkValue(model.value)) {
     if (schema.queryBound && checkValue(query.value)) {
@@ -73,6 +77,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/InputNumber.vue

@@ -5,33 +5,33 @@
         <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>
+    <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 { 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

@@ -5,19 +5,19 @@
         <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>
+    <Validation>
+      <Labeler
+        :label
+        :path
+      >
+        <InputText
+          v-model="input"
+          v-bind="$attrs"
+          class="min-w-60"
+          @update:model-value="onUpdate"
+        />
+      </Labeler>
+    </Validation>
   </AwaitLoading>
 </template>
 
@@ -25,13 +25,13 @@
 import { ref, watch } from "vue";
 import { InputText, Skeleton } 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.vue

@@ -5,11 +5,13 @@
     v-model="models[input.name]"
     :schema="input"
     :class="inputClass"
+    :invalid="invalid(input.name)"
+    @blur="() => touched(input.name)"
   />
 </template>
 
 <script setup>
-import { computed, reactive, watch } from "vue";
+import { computed, reactive, ref, watch } from "vue";
 import { useContext, useRoute } from "#imports";
 import { Input } from "#components";
 const context = useContext();
@@ -20,6 +22,8 @@ const { inputs } = defineProps({
 });
 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) => {
@@ -60,4 +64,16 @@ 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/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,22 @@
 <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) }}
+        {{ localizedText }}
       </label>
     </template>
   </component>
@@ -21,29 +25,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;
+};

package/dist/runtime/components/Message.vue

@@ -1,29 +1,60 @@
 <template>
-  <Message
-    :severity="severity"
-    :pt="{ text: { class: 'min-w-[10rem] min-h-[1.5rem]' } }"
+  <div
+    class="b-message grid"
+    :class="[`message-${severity}`, `message-${variant}`]"
   >
-    <template
-      v-if="icon"
-      #icon
-    >
-      <i :class="`pi ${icon}`" />
-    </template>
-    <AwaitLoading :skeleton="{ height: '1.5rem', width: '100%' }">
-      <span v-if="data">{{ localizeMessage ? l(data) : data }}</span>
-      <span v-else>-</span>
-    </AwaitLoading>
-  </Message>
+    <div class="min-h-0">
+      <div
+        :class="sizeClass"
+        class="
+          b-message-body
+          flex flex-col gap-3
+        "
+      >
+        <div class="flex flex-row items-center gap-2">
+          <i
+            v-if="icon"
+            class="b-message-icon"
+            :class="icon"
+          />
+          <AwaitLoading :skeleton="{ height: '1.5rem', width: '100%' }">
+            <span v-if="data">{{ localizeMessage ? l(data) : data }}</span>
+            <span v-else>-</span>
+          </AwaitLoading>
+        </div>
+        <slot name="content" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { Message } from "primevue";
-import { useLocalization } from "#imports";
+import { computed, useLocalization } from "#imports";
 import { AwaitLoading } from "#components";
 const { localize: l } = useLocalization();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { icon, severity = "info", localizeMessage } = schema;
+const { icon, localizeMessage, severity = "info", size, variant = "outlined" } = schema;
+const sizeClass = computed(() => {
+  switch (size) {
+    case "small":
+      return "text-sm font-normal";
+    case "large":
+      return "text-lg font-semibold";
+    default:
+      return "text-base font-medium";
+  }
+});
 </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
+    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
+    dark:bg-green-950/95 dark:text-green-500 dark:border-green-700/65}.message-secondary{@apply bg-transparent text-slate-500 border-slate-500
+    dark:text-slate-400 dark:border-slate-400}.message-contrast{@apply bg-transparent text-slate-950 border-slate-950
+    dark:text-white dark:border-white}
+</style>

package/dist/runtime/components/Message.vue.d.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;
+};

package/dist/runtime/components/NavLink.vue

@@ -16,7 +16,7 @@ import { computed } from "vue";
 import { Button } from "primevue";
 import { useDataMounter, usePathBuilder } from "#imports";
 import { AwaitLoading } from "#components";
-const { mount: mountData } = useDataMounter();
+const { mount: mountData } = useDataMounter({ defaultInlineError: true });
 const pathBuilder = usePathBuilder();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },

package/dist/runtime/components/Paginator.vue

@@ -40,9 +40,7 @@ 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);
-  }
+  set: (value) => model.value = (value - 1) * Number(data.take)
 });
 const path = context.injectPath();
 const previousTake = paginatorStates[`${path}.previousTake`];