@mouseless/baked 1.5.2 → 1.6.0

package/dist/runtime/components/Select.vue

@@ -5,33 +5,33 @@
         <Skeleton class="min-h-10" />
       </div>
     </template>
-    <Labeler
-      :label
-      :path
-      :mode="labelMode"
-      :variant="labelVariant"
-    >
-      <Select
-        v-bind="$attrs"
-        v-model="selected"
-        :input-id="path"
-        :options="data"
-        :placeholder="l(label)"
-        :show-clear
-        :filter
-        :auto-filter-focus="filter"
-        :filter-fields="[optionLabel]"
-        reset-filter-on-hide
-        class="w-full"
+    <Validation>
+      <Labeler
+        :label
+        :path
       >
-        <template #value="slotProps">
-          <span>{{ getValueLabel(slotProps) }}</span>
-        </template>
-        <template #option="slotProps">
-          <span>{{ getOptionLabel(slotProps) }}</span>
-        </template>
-      </Select>
-    </Labeler>
+        <Select
+          v-bind="$attrs"
+          v-model="selected"
+          :input-id="path"
+          :options="data"
+          :placeholder
+          :show-clear
+          :filter
+          :auto-filter-focus="filter"
+          :filter-fields="[optionLabel]"
+          reset-filter-on-hide
+          class="w-full"
+        >
+          <template #value="slotProps">
+            <span>{{ getValueLabel(slotProps) }}</span>
+          </template>
+          <template #option="slotProps">
+            <span>{{ getOptionLabel(slotProps) }}</span>
+          </template>
+        </Select>
+      </Labeler>
+    </Validation>
   </AwaitLoading>
 </template>
 
@@ -39,7 +39,7 @@
 import { ref, watch } from "vue";
 import { Select, Skeleton } from "primevue";
 import { useContext, useUiStates, useLocalization } from "#imports";
-import { AwaitLoading, Labeler } from "#components";
+import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { value: { selectStates } } = useUiStates();
@@ -48,9 +48,10 @@ const { schema, data } = defineProps({
   data: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { filter, label, labelMode, labelVariant, localizeLabel, optionLabel, optionValue, showClear, stateful, targetProp } = schema;
+const { filter, label, localizeOptionLabels, optionLabel, optionValue, showClear, stateful, targetProp } = schema;
 const path = context.injectPath();
 const selected = ref();
+const placeholder = label?.text ? l(label.text) : null;
 watch(
   [() => data, getModel],
   ([_data, _model]) => {
@@ -65,11 +66,11 @@ watch(
 watch(selected, (newSelected) => setModel(newSelected));
 function getOptionLabel(slotProps) {
   const result = slotProps.option[optionLabel] ?? slotProps.option;
-  return localizeLabel ? l(result) : result;
+  return localizeOptionLabels ? l(result) : result;
 }
 function getValueLabel(slotProps) {
-  const result = slotProps.value?.[optionLabel] ?? slotProps.value ?? label;
-  return (localizeLabel ? l(result) : result) ?? "\xA0";
+  const result = slotProps.value?.[optionLabel] ?? slotProps.value ?? placeholder;
+  return (localizeOptionLabels ? l(result) : result) ?? "\xA0";
 }
 function getModel() {
   return targetProp ? model.value?.[targetProp] : model.value;

package/dist/runtime/components/SelectButton.vue

@@ -5,35 +5,42 @@
         <Skeleton class="min-h-10" />
       </div>
     </template>
-    <Labeler
-      :label
-      :path
-      :mode="labelMode == 'ifta' ? labelMode : null"
-      :dt="{
-        colorScheme: {
-          light: {
-            top: '-1rem',
-          },
-          dark: {
-            top: '-1rem'
+    <Validation>
+      <Labeler
+        :label="{
+          ...label,
+          mode: label?.mode === 'ifta' ? label.mode : null,
+          text: label?.mode === 'ifta' ? label.text : null
+        }"
+        :path
+        :dt="{
+          colorScheme: {
+            light: {
+              top: '-1rem',
+            },
+            dark: {
+              top: '-1rem'
+            }
           }
-        }
-      }"
-    >
-      <SelectButton
-        v-if="data"
-        v-model="selected"
-        :options="data"
-        :allow-empty
-        :data-key="optionValue"
-        :option-label
-        :pt="{ pcToggleButton: { root: { class: 'text-[length:inherit]' } } }"
+        }"
       >
-        <template #option="slotProps">
-          <span>{{ getOptionLabel(slotProps) }}</span>
-        </template>
-      </SelectButton>
-    </Labeler>
+        <SelectButton
+          v-if="data"
+          v-bind="$attrs"
+          v-model="selected"
+          :options="data"
+          :allow-empty
+          :data-key="optionValue"
+          :option-label
+          class="!w-auto"
+          pt:pc-toggle-button:root="text-[length:inherit]"
+        >
+          <template #option="slotProps">
+            <span>{{ getOptionLabel(slotProps) }}</span>
+          </template>
+        </SelectButton>
+      </Labeler>
+    </Validation>
   </AwaitLoading>
 </template>
 
@@ -41,7 +48,7 @@
 import { ref, watch } from "vue";
 import { SelectButton, Skeleton } from "primevue";
 import { useContext, useLocalization, useUiStates } from "#imports";
-import { AwaitLoading, Labeler } from "#components";
+import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { value: { selectButtonStates } } = useUiStates();
@@ -53,8 +60,7 @@ const model = defineModel({ type: null, required: true });
 const {
   allowEmpty = false,
   label,
-  labelMode,
-  localizeLabel,
+  localizeOptionLabels,
   optionLabel,
   optionValue,
   stateful,
@@ -76,7 +82,7 @@ watch(
 watch(selected, (newSelected) => setModel(newSelected));
 function getOptionLabel(slotProps) {
   const result = slotProps.option[optionLabel] ?? slotProps.option;
-  return localizeLabel ? l(result) : result;
+  return localizeOptionLabels ? l(result) : result;
 }
 function getModel() {
   return targetProp ? model.value?.[targetProp] : model.value;
@@ -107,5 +113,5 @@ function setSelected(value) {
 </style>
 
 <style scoped>
-&:has(.p-iftalabel) .p-iftalabel{@apply mt-2}.grid .flex .b-component--SelectButton{@apply self-end}
+.p-iftalabel:has(.p-selectbutton){@apply mt-4}
 </style>

package/dist/runtime/components/SimpleForm.vue

@@ -1,6 +1,7 @@
 <template>
   <template v-if="dialogOptions">
     <Button
+      ref="submitRef"
       :schema="dialogOptions.open"
       v-bind="$attrs"
       @click="visible = true"
@@ -47,6 +48,9 @@
         />
       </template>
     </Dialog>
+    <ErrorPopover ref="errorPopoverRef">
+      <InlineError :error />
+    </ErrorPopover>
   </template>
   <template v-else>
     <div
@@ -66,43 +70,73 @@
         />
       </div>
       <Button
+        ref="submitRef"
+        v-tooltip.left="{
+          disabled: !showValidationSummary,
+          value: messages,
+          pt: { text: 'text-sm' }
+        }"
         :schema="submit"
         :ready
-        @submit="$emit('submit', formData)"
+        @submit="$emit('submit', model)"
       />
+      <ErrorPopover ref="errorPopoverRef">
+        <InlineError :error />
+      </ErrorPopover>
     </div>
   </template>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { Dialog } from "primevue";
-import { useLocalization } from "#imports";
-import { Button, Inputs } from "#components";
+import { useBakeError, useLocalization, useValidation } from "#imports";
+import { Button, ErrorPopover, InlineError, Inputs } from "#components";
+const { handle: handleError } = useBakeError();
 const { localize: l } = useLocalization();
+const { validate } = useValidation();
 const { schema } = defineProps({
   schema: { type: null, required: true }
 });
 const emit = defineEmits(["submit"]);
-const { dialogOptions, inputs, submit, title } = schema;
-const formData = ref({});
-const ready = ref(inputs.length === 0);
+const { dialogOptions, inputs, submit, title, validations = [], showValidationSummary = false } = schema;
+const model = ref({});
+const readyData = ref({});
 const submitted = ref(false);
 const visible = ref(false);
+const submitRef = ref();
+const errorPopoverRef = ref();
+const { error } = handleError();
+const ready = computed(() => Object.values(readyData.value).every((v) => v) && isValid.value);
+const { isValid, messages } = validate({
+  inputs,
+  model,
+  composables: validations
+});
+watch(error, (newError) => {
+  if (newError) {
+    errorPopoverRef.value.show(submitRef);
+  } else {
+    errorPopoverRef.value.hide();
+  }
+});
 function onReady(value) {
-  ready.value = value;
+  readyData.value = value;
 }
 function onChanged({ values }) {
-  formData.value = values;
+  model.value = values;
 }
 function execute() {
+  if (!ready.value) {
+    return;
+  }
   submitted.value = true;
   visible.value = false;
 }
 function emitSubmit() {
-  if (submitted.value) {
+  if (submitted.value && ready.value) {
     submitted.value = false;
-    emit("submit", formData.value);
+    emit("submit", model.value);
   }
 }
 </script>

package/dist/runtime/components/TabbedPage.vue

@@ -40,11 +40,9 @@
     </Bake>
     <Message
       v-if="showRequiredMessage"
-      severity="info"
-    >
-      <i class="pi pi-info-circle" />
-      <span class="ml-3">{{ lc("Select required values to view this page") }}</span>
-    </Message>
+      :schema="{ severity: 'info', icon: 'pi pi-info-circle' }"
+      :data="lc('Select required values to view this page')"
+    />
     <div
       v-if="ready"
       class="pt-4 flex flex-col gap-4 items-center"
@@ -70,9 +68,9 @@
 
 <script setup>
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
-import { Message, Tab, TabList, Tabs } from "primevue";
+import { Tab, TabList, Tabs } from "primevue";
 import { useContext, useLocalization, useReactionHandler } from "#imports";
-import { Bake, Contents, DeferredTabContent, Inputs } from "#components";
+import { Bake, Contents, DeferredTabContent, Inputs, Message } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { localize: lc } = useLocalization({ group: "TabbedPage" });

package/dist/runtime/components/Text.vue

@@ -34,7 +34,7 @@ const tooltip = computed(() => ({
   disabled: !lengthIsExceeded.value,
   pt: {
     root: {
-      style: maxLength ? `min-width: ${maxLength / 4}rem;` : ""
+      style: maxLength ? `min-width: ${maxLength / 2}rem;` : ""
     }
   }
 }));

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

@@ -0,0 +1,16 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    message?: ((props: {
+        validation: any;
+    }) => any) | undefined;
+};

package/dist/runtime/components/Validation.vue

@@ -0,0 +1,33 @@
+<template>
+  <template v-if="!validation">
+    <slot />
+  </template>
+  <div
+    v-else
+    class="b-Validation flex flex-col gap-2"
+  >
+    <slot />
+    <slot
+      name="message"
+      :validation
+    >
+      <Message
+        v-if="validation.message && validation.persist"
+        :schema="{
+          severity: validation.severity,
+          variant: 'simple',
+          size: 'small'
+        }"
+        :data="validation.message || ''"
+        class="ml-3"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { useContext } from "#imports";
+import { Message } from "#components";
+const context = useContext();
+const validation = context.injectValidation();
+</script>

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

@@ -0,0 +1,16 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    message?: ((props: {
+        validation: any;
+    }) => any) | undefined;
+};

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

@@ -0,0 +1,13 @@
+export default function _default(): {
+    handle: () => {
+        error: import("vue").ComputedRef<{
+            title: any;
+            detail: any;
+        } | null>;
+        rawError: any;
+    };
+    normalize: (error: any) => import("vue").ComputedRef<{
+        title: any;
+        detail: any;
+    } | null>;
+};

package/dist/runtime/composables/useBakeError.js

@@ -0,0 +1,51 @@
+import { computed, unref } from "vue";
+import { useContext } from "#imports";
+
+export default function() {
+  const context = useContext();
+
+  function handle() {
+    const data = context.injectError({ handle: true });
+
+    return NormalizedError(data);
+  }
+
+  function normalize(error) {
+    return NormalizedError(error).error;
+  }
+
+  return {
+    handle,
+    normalize
+  };
+}
+
+function NormalizedError(rawError) {
+  const error = computed(() => {
+    const e = unref(rawError);
+    if(!e) {
+      return null;
+    }
+
+    if(e.name === "FetchError") {
+      const messages = e.data?.errors
+        ? Object.values(e.data.errors).flat().join(" ")
+        : null;
+
+      return {
+        title: e.data?.title ?? e.statusCode ?? "ERROR",
+        detail: messages ?? e.data?.detail ?? e.message ?? e.cause ?? "An error occured."
+      };
+    }
+
+    return {
+      title: e.statusCode ?? e.status ?? "ERROR",
+      detail: e.message ?? e.cause ?? "An error occured."
+    };
+  });
+
+  return {
+    error,
+    rawError
+  };
+}

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

@@ -7,6 +7,10 @@ export default function _default(): {
     };
     injectDataDescriptor: () => null;
     provideDataDescriptor: (value: any) => void;
+    injectError: ({ handle }?: {
+        handle?: boolean | undefined;
+    }) => import("vue").Ref<{}, {}>;
+    provideError: (error: any) => import("vue").Ref<boolean, boolean>;
     injectEvents: () => any;
     provideEvents: (value: any) => void;
     injectExecuting: () => import("vue").Ref<boolean, boolean>;
@@ -17,4 +21,8 @@ export default function _default(): {
     providePageContext: (value: any) => void;
     injectParentContext: () => null;
     provideParentContext: (value: any) => void;
+    injectValidations: () => import("vue").Ref<{}, {}>;
+    provideValidations: (value: any) => void;
+    injectValidation: () => null;
+    provideValidation: (value: any) => void;
 };

package/dist/runtime/composables/useContext.js

@@ -24,6 +24,29 @@ export default function() {
     return provide("__bake_data_descriptor", value);
   }
 
+  function injectError({ handle = false } = {}) {
+    const { error, handled } = inject("__bake_error", {
+      error: ref({}),
+      handled: ref(false)
+    });
+
+    if(handle) {
+      handled.value = true;
+    }
+
+    return error;
+  }
+
+  function provideError(error) {
+    const handled = ref(false);
+    provide("__bake_error", {
+      error,
+      handled
+    });
+
+    return handled;
+  }
+
   function injectEvents() {
     return inject("__bake_events");
   }
@@ -64,12 +87,30 @@ export default function() {
     provide("__bake_parent_context", value);
   }
 
+  function injectValidations() {
+    return inject("__bake_validations", ref({}));
+  }
+
+  function provideValidations(value) {
+    provide("__bake_validations", value);
+  }
+
+  function injectValidation() {
+    return inject("__bake_validation", null);
+  }
+
+  function provideValidation(value) {
+    provide("__bake_validation", value);
+  }
+
   return {
     injectPath,
     providePath,
     injectContextData,
     injectDataDescriptor,
     provideDataDescriptor,
+    injectError,
+    provideError,
     injectEvents,
     provideEvents,
     injectExecuting,
@@ -79,6 +120,10 @@ export default function() {
     injectPageContext,
     providePageContext,
     injectParentContext,
-    provideParentContext
+    provideParentContext,
+    injectValidations,
+    provideValidations,
+    injectValidation,
+    provideValidation
   };
-}
+}

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

@@ -1,5 +1,7 @@
-export default function _default(): {
-    mount: (schema: any) => import("vue").Ref<null, null>;
+export default function _default({ defaultInlineError }?: {}): {
+    mount: (schema: any, { inlineError }?: {
+        inlineError?: any;
+    }) => import("vue").Ref<null, null>;
     onAfterMount: (callback: any) => void;
     onBeforeMount: (callback: any) => void;
 };

package/dist/runtime/composables/useDataMounter.js

@@ -1,10 +1,13 @@
 import { onMounted, ref } from "vue";
 import { useContext, useDataFetcher } from "#imports";
 
-export default function() {
+export default function({ defaultInlineError } = {}) {
   const context = useContext();
   const dataFetcher = useDataFetcher();
+
   const contextData = context.injectContextData();
+  const error = context.injectError();
+
   const mounts = [];
   let onAfterMountCallback = null;
   let onBeforeMountCallback = null;
@@ -15,8 +18,14 @@ export default function() {
     }
 
     await Promise.all(
-      mounts.map(async({ value, schema }) => {
-        value.value = await dataFetcher.fetch({ data: schema, contextData });
+      mounts.map(async({ value, schema, inlineError }) => {
+        try {
+          value.value = await dataFetcher.fetch({ data: schema, contextData });
+        } catch (err) {
+          if(!inlineError || err.statusCode !== 400) { throw err; }
+
+          error.value = err;
+        }
       })
     );
 
@@ -25,7 +34,7 @@ export default function() {
     }
   });
 
-  function mount(schema) {
+  function mount(schema, { inlineError = defaultInlineError } = {}) {
     const value = ref(null);
 
     if(!schema) {
@@ -36,7 +45,7 @@ export default function() {
 
     const shouldLoad = dataFetcher.shouldLoad(schema);
     if(shouldLoad) {
-      mounts.push({ value, schema });
+      mounts.push({ value, schema, inlineError });
     }
 
     return value;
@@ -55,4 +64,4 @@ export default function() {
     onAfterMount,
     onBeforeMount
   };
-}
+}

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

@@ -0,0 +1,4 @@
+export default function useDefaultValidation({ inputs, model }: {
+    inputs: any;
+    model: any;
+}): {};

package/dist/runtime/composables/useDefaultValidation.js

@@ -0,0 +1,37 @@
+import { useLocalization } from "#imports";
+
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
+
+export default function useDefaultValidation({ inputs, model }) {
+  const { localize: lc } = useLocalization({ group: "useDefaultValidation" });
+  const { localize: l } = useLocalization();
+
+  const result = {};
+  const validation = {
+    valid: false,
+    persist: false,
+    severity: "error",
+    message: ""
+  };
+
+  inputs.map(input => {
+    const value = model?.[input.name];
+    const isEmpty = value === undefined || value === null || String(value).trim() === "";
+    const label = input.component?.schema?.label?.text || capitalize(input.name);
+
+    result[input.name] = {
+      ...validation,
+      required: !!input.required,
+      valid: !input.required || !isEmpty,
+      persist: !(input.required && isEmpty)
+    };
+
+    if(input.required && isEmpty) {
+      result[input.name].message = lc("{label} cannot be empty", { label: l(label) });
+    }
+
+    return input;
+  });
+
+  return result;
+}