@mouseless/baked 1.5.2 → 1.6.0

package/dist/module.json

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

package/dist/module.mjs

@@ -11,7 +11,7 @@ const module$1 = defineNuxtModule({
   defaults: {},
   moduleDependencies: {
     "@nuxtjs/i18n": {
-      version: "10.3.0",
+      version: "10.4.0",
       defaults: {
         strategy: "no_prefix",
         detectBrowserLanguage: {
@@ -64,6 +64,7 @@ const module$1 = defineNuxtModule({
       "3xl": "1920px"
     };
     _nuxt.options.runtimeConfig.public.error = app?.error;
+    _nuxt.options.runtimeConfig.public.inlineError = app?.inlineError;
     _nuxt.options.runtimeConfig.public.primevue = _options.primevue;
     _nuxt.options.runtimeConfig.public.components = _options.components;
     _nuxt.options.runtimeConfig.public.composables = _options.composables;

package/dist/runtime/components/AwaitLoading.d.ts

@@ -2,13 +2,16 @@ declare namespace _default {
     namespace props {
         namespace skeleton {
             export let type: ObjectConstructor;
-            export let required: boolean;
             function _default(): void;
             export { _default as default };
         }
+        namespace noError {
+            let type_1: BooleanConstructor;
+            export { type_1 as type };
+            let _default_1: boolean;
+            export { _default_1 as default };
+        }
     }
-    function setup(): (props: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | undefined;
+    function setup(props: any): () => any;
 }
 export default _default;

package/dist/runtime/components/AwaitLoading.js

@@ -1,27 +1,55 @@
-import { h, useSlots } from "vue";
+import { h, unref, useSlots } from "vue";
 import { Skeleton } from "primevue";
-import { useContext } from "#imports";
+import { LoadingError } from "#components";
+import { useBakeError, useContext } from "#imports";
 
 export default {
   props: {
-    skeleton: { type: Object, required: false, default: () => { } }
+    skeleton: { type: Object, default: () => { } },
+    noError: { type: Boolean, default: false }
   },
-  setup() {
+  setup(props) {
+    const { handle: handleError } = useBakeError();
     const context = useContext();
     const slots = useSlots();
 
     const loading = context.injectLoading();
 
-    return props => {
+    const { rawError, error } = props.noError ? { } : handleError();
+
+    return () => {
       if(loading.value) {
-        if(slots.loading) {
-          return slots.loading()[0];
-        }
+        return render(slots.loading, {
+          fallback: () => h(Skeleton, props.skeleton)
+        });
+      }
 
-        return h(Skeleton, props.skeleton);
+      if(rawError?.value) {
+        return render(slots.error, {
+          props: {
+            error: unref(error),
+            rawError: unref(rawError)
+          },
+          fallback: () => h(LoadingError, {
+            style: props.skeleton,
+            error: unref(error)
+          })
+        });
       }
 
-      return slots.default()[0];
+      return render(slots.default);
     };
   }
-};
+};
+
+function render(slot, { fallback, props } = {}) {
+  if(!slot) {
+    return fallback ? fallback() : null;
+  }
+
+  const children = slot(props);
+
+  return children.length > 1
+    ? h("div", children)
+    : children[0];
+}

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

@@ -17,8 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<any>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    loaded: (...args: any[]) => void;
-    "update:modelValue": (value: any) => void;
+    "update:modelValue": (value: any) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
@@ -32,7 +31,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<any>;
     };
 }>> & Readonly<{
-    onLoaded?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

package/dist/runtime/components/Bake.vue

@@ -1,27 +1,49 @@
 <template>
-  <component
-    :is="componentTemplate"
-    v-if="visible"
-    :key="loading"
-    :class="classes"
-    v-bind="getComponentProps()"
-  >
-    <template
-      v-for="(_, slotName) in $slots"
-      #[slotName]="slotProps"
+  <template v-if="!error || errorHandled || errorCausedByAction">
+    <component
+      :is="component"
+      v-if="visible"
+      ref="componentRef"
+      :key="loading"
+      :class="classes"
+      v-bind="{
+        ...$attrs,
+        ...baseAttrs,
+        ...dataAttrs(),
+        ...modelAttrs()
+      }"
     >
-      <slot
-        :name="slotName"
-        v-bind="slotProps ?? {}"
-      />
-    </template>
-  </component>
+      <template
+        v-for="(_, slotName) in $slots"
+        #[slotName]="slotProps"
+      >
+        <slot
+          :name="slotName"
+          v-bind="slotProps ?? {}"
+        />
+      </template>
+    </component>
+    <ErrorPopover
+      v-if="descriptor.action && !errorHandled"
+      ref="errorPopoverRef"
+    >
+      <InlineError :error />
+    </ErrorPopover>
+  </template>
+  <InlineError
+    v-else
+    :class="$attrs.class"
+    :style="$attrs.style"
+    :error
+  />
 </template>
 
 <script setup>
-import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
-import { useActionExecuter, useComponentResolver, useContext, useDataFetcher, useFormat, useReactionHandler } from "#imports";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useActionExecuter, useBakeError, useComponentResolver, useContext, useDataFetcher, useFormat, useReactionHandler } from "#imports";
+import { ErrorPopover, InlineError } from "#components";
 const actionExecuter = useActionExecuter();
+const { normalize: normalizeError } = useBakeError();
 const componentResolver = useComponentResolver();
 const context = useContext();
 const dataFetcher = useDataFetcher();
@@ -35,28 +57,66 @@ const model = defineModel({ type: null });
 const emit = defineEmits(["loaded"]);
 const parentPath = context.injectPath();
 const parentLoading = context.injectLoading();
-const path = parentPath && parentPath !== "" ? `${parentPath}/${name}` : name;
 const events = context.injectEvents();
 const contextData = context.injectContextData();
-const componentTemplate = componentResolver.resolve(descriptor.type, "MissingComponent");
-const componentProps = buildComponentProps();
+const component = componentResolver.resolve(descriptor.type, "MissingComponent");
+const componentRef = ref();
+const path = parentPath && parentPath !== "" ? `${parentPath}/${name}` : name;
 const data = ref(dataFetcher.get({ data: descriptor.data, contextData }));
 const shouldLoad = !parentLoading.value && dataFetcher.shouldLoad(descriptor.data);
 const loading = ref(shouldLoad);
-let executing = null;
 const visible = ref(true);
 const classes = [`b-component--${descriptor.type}`, ...asClasses(name)];
-let reactions = null;
+const baseAttrs = {};
+const rawError = ref();
+const errorHandled = context.provideError(rawError);
+const error = normalizeError(rawError);
 context.providePath(path);
 context.provideDataDescriptor(descriptor.data);
 context.provideParentContext({ ...contextData.parent, data });
 if (shouldLoad) {
   context.provideLoading(loading);
 }
+let errorPopoverRef = null;
+let errorCausedByAction = null;
+let executing = null;
 if (descriptor.action) {
+  errorPopoverRef = ref();
+  errorCausedByAction = ref(false);
   executing = ref(false);
   context.provideExecuting(executing);
+  watch([executing, error], ([newExecuting, newError], [oldExecuting, oldError]) => {
+    if (newExecuting) {
+      rawError.value = null;
+      errorCausedByAction.value = false;
+    } else if (oldExecuting && newError && !oldError) {
+      errorCausedByAction.value = true;
+    }
+  });
+  watch(error, (newError) => {
+    if (newError) {
+      errorPopoverRef.value?.show(componentRef);
+    } else {
+      errorPopoverRef.value?.hide();
+    }
+  });
+}
+if (descriptor.schema) {
+  baseAttrs.schema = descriptor.schema;
+}
+if (component.emits?.includes("submit")) {
+  baseAttrs.onSubmit = executeAction;
 }
+let dataAttrs = () => ({});
+if (descriptor.data) {
+  dataAttrs = () => ({ data: data.value });
+}
+let modelAttrs = () => ({});
+if (component.props?.modelValue) {
+  modelAttrs = () => ({ modelValue: model.value, "onUpdate:modelValue": (value) => model.value = value });
+  watch(model, executeAction);
+}
+let reactions = null;
 if (descriptor.reactions) {
   reactions = reactionHandler.create(`${path}:bake`, {
     reload(success) {
@@ -83,45 +143,21 @@ onBeforeUnmount(() => {
 });
 async function load() {
   loading.value = true;
-  data.value = await dataFetcher.fetch({
-    data: descriptor.data,
-    contextData
-  });
-  loading.value = false;
-  emit("loaded");
-}
-function buildComponentProps() {
-  const result = {};
-  if (descriptor.schema) {
-    result.schema = descriptor.schema;
-  }
-  if (componentTemplate.emits?.includes("submit")) {
-    result.onSubmit = onModelUpdate;
-  }
-  if (componentTemplate.props?.modelValue) {
-    result["onUpdate:modelValue"] = onModelUpdate;
-  }
-  return result;
-}
-let __BIND_COUNT__ = 0;
-function getComponentProps() {
-  const result = { ...componentProps };
-  if (descriptor.data) {
-    result.data = data.value;
-  }
-  if (componentTemplate.props?.modelValue) {
-    result.modelValue = model.value;
-    if (__BIND_COUNT__ < 2) {
-      __BIND_COUNT__++;
-      nextTick(() => onModelUpdate(model.value));
+  try {
+    data.value = await dataFetcher.fetch({
+      data: descriptor.data,
+      contextData
+    });
+  } catch (err) {
+    if (err?.status !== 400) {
+      throw err;
     }
+    rawError.value = err;
   }
-  return result;
+  loading.value = false;
+  emit("loaded");
 }
-async function onModelUpdate(newModel) {
-  if (componentTemplate.props?.modelValue) {
-    model.value = newModel;
-  }
+async function executeAction(newModel) {
   if (!descriptor.action) {
     return;
   }
@@ -132,6 +168,11 @@ async function onModelUpdate(newModel) {
       contextData: { ...contextData, model: newModel },
       events
     });
+  } catch (err) {
+    if (err?.status !== 400) {
+      throw err;
+    }
+    rawError.value = err;
   } finally {
     executing.value = false;
   }

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

@@ -17,8 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<any>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    loaded: (...args: any[]) => void;
-    "update:modelValue": (value: any) => void;
+    "update:modelValue": (value: any) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
@@ -32,7 +31,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<any>;
     };
 }>> & Readonly<{
-    onLoaded?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

package/dist/runtime/components/DataContainer.vue

@@ -33,20 +33,17 @@
       />
       <Message
         v-else-if="!ready"
-        severity="info"
-      >
-        <i class="pi pi-info-circle" />
-        <span class="ml-3">{{ lc("Select required values to view this data") }}</span>
-      </Message>
+        :schema="{ severity: 'info', icon: 'pi pi-info-circle' }"
+        :data="lc('Select required values to view this data')"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
-import { Message } from "primevue";
 import { useContext, useLocalization } from "#imports";
-import { Bake, Inputs } from "#components";
+import { Bake, Inputs, Message } from "#components";
 const context = useContext();
 const { localize: lc } = useLocalization({ group: "DataContainer" });
 const { schema } = defineProps({

package/dist/runtime/components/DataPanel.vue

@@ -71,20 +71,18 @@
       />
       <Message
         v-else-if="!ready"
-        severity="info"
-      >
-        <i class="pi pi-info-circle" />
-        <span class="ml-3">{{ lc("Select required values to view this data") }}</span>
-      </Message>
+        :schema="{ severity: 'info', icon: 'pi pi-info-circle' }"
+        :data="lc('Select required values to view this data')"
+      />
     </template>
   </Panel>
 </template>
 
 <script setup>
 import { computed, ref, useTemplateRef } from "vue";
-import { Message, Panel, Button } from "primevue";
+import { Panel, Button } from "primevue";
 import { useBreakpoints, useContext, useDataMounter, useUiStates, useLocalization } from "#imports";
-import { Bake, Inputs, PersistentPopover } from "#components";
+import { Bake, Inputs, PersistentPopover, Message } from "#components";
 const { value: { panelStates } } = useUiStates();
 const { isMd } = useBreakpoints();
 const context = useContext();

package/dist/runtime/components/DataTable.vue

@@ -38,7 +38,10 @@
       :frozen="column.frozen"
     >
       <template #body="{ data: row, index }">
-        <AwaitLoading :skeleton="{ class: 'min-h-5' }">
+        <AwaitLoading
+          :skeleton="{ class: 'min-h-5' }"
+          no-error
+        >
           <ProvideParentContext
             v-if="data"
             :data="row.$getRow()"
@@ -87,7 +90,10 @@
         v-if="actions"
         #body="{ data: row, index }"
       >
-        <AwaitLoading :skeleton="{ class: 'min-h-5' }">
+        <AwaitLoading
+          :skeleton="{ class: 'min-h-5' }"
+          no-error
+        >
           <ProvideParentContext
             v-if="data"
             :data="row.$getRow()"
@@ -119,7 +125,10 @@
           :class="{ 'text-right': column.alignRight }"
         >
           <template #footer>
-            <AwaitLoading :skeleton="{ class: 'min-h-5' }">
+            <AwaitLoading
+              :skeleton="{ class: 'min-h-5' }"
+              no-error
+            >
               <Bake
                 v-if="data"
                 :name="`rows/footer/${column.key}`"

package/dist/runtime/components/ErrorPage.vue

@@ -40,17 +40,18 @@
       type="dashed"
       class="my-8"
     />
-    <Message severity="warn">
-      <i class="pi pi-exclamation-circle mr-2" />
-      {{ l(footerInfo) }}
-    </Message>
+    <Message
+      :schema="{ severity: 'warn', icon: 'pi pi-exclamation-circle' }"
+      :data="l(footerInfo)"
+    />
   </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import { Divider, Message, Tag } from "primevue";
+import { Divider, Tag } from "primevue";
 import { useLocalization } from "#imports";
+import { Message } from "#components";
 const { localize: l } = useLocalization();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
@@ -63,7 +64,7 @@ const {
   safeLinksMessage = "Try the links from the menu below to view the page you want to access:"
 } = schema;
 const statusCode = computed(() => {
-  const code = data.value?.data?.status ?? data.value?.statusCode ?? 999;
+  const code = !data ? 999 : data.status ?? data.statusCode ?? data.value?.status ?? data.value?.statusCode ?? 999;
   return code === 999 ? "APP" : code;
 });
 const errorInfo = computed(() => {

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

@@ -0,0 +1,15 @@
+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<{}, {
+    show: typeof show;
+    hide: typeof hide;
+}, {}, {}, {}, 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;
+};
+declare function show(target: any): void;
+declare function hide(): void;

package/dist/runtime/components/ErrorPopover.vue

@@ -0,0 +1,22 @@
+<template>
+  <Popover
+    ref="popoverRef"
+    class="bg-transparent border-none before:content-none after:content-none"
+    pt:content="p-0"
+  >
+    <slot />
+  </Popover>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Popover } from "primevue";
+defineExpose({ show, hide });
+const popoverRef = ref();
+function show(target) {
+  popoverRef.value.show({ currentTarget: target.value.$el });
+}
+function hide() {
+  popoverRef.value.hide();
+}
+</script>

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

@@ -0,0 +1,15 @@
+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<{}, {
+    show: typeof show;
+    hide: typeof hide;
+}, {}, {}, {}, 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;
+};
+declare function show(target: any): void;
+declare function hide(): void;

package/dist/runtime/components/FormPage.vue

@@ -9,10 +9,19 @@
         #actions
       >
         <Button
+          ref="submitRef"
+          v-tooltip.left="{
+            disabled: !showValidationSummary,
+            value: messages,
+            pt: { text: 'text-sm' }
+          }"
           :schema="submit"
           :ready
           @submit="onSubmit"
         />
+        <ErrorPopover ref="errorPopoverRef">
+          <InlineError :error />
+        </ErrorPopover>
       </template>
     </Bake>
     <div class="flex justify-center">
@@ -57,7 +66,7 @@
               <div
                 v-for="inputGroup in inputGroups"
                 :key="inputGroup.key"
-                class="w-full flex gap-4 max-md:flex-col self-end"
+                class="w-full flex gap-4 max-md:flex-col"
                 :class="{
                   'col-span-2': inputGroup.wide,
                   'reset-min-w': inputGroup.inputs.length > 1
@@ -79,18 +88,36 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
-import { useLocalization } from "#imports";
-import { Button, Contents, Inputs } from "#components";
+import { computed, ref, watch } from "vue";
+import { useBakeError, useLocalization, useValidation } from "#imports";
+import { Bake, Button, Contents, 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 { title, submit, sections } = schema;
-const formData = ref({});
+const { title, submit, sections, validations = [], showValidationSummary = true } = schema;
+const model = ref({});
 const readyData = ref({});
-const ready = computed(() => Object.values(readyData.value).every((v) => v));
+const inputs = ref(sections.flatMap((section) => section.inputGroups.flatMap((group) => group.inputs)));
+const ready = computed(() => Object.values(readyData.value).every((v) => v) && isValid.value);
+const submitRef = ref();
+const errorPopoverRef = ref();
+const { error } = handleError();
+const { isValid, messages } = validate({
+  model,
+  inputs: inputs.value,
+  composables: validations
+});
+watch(error, (newError) => {
+  if (newError) {
+    errorPopoverRef.value.show(submitRef);
+  } else {
+    errorPopoverRef.value.hide();
+  }
+});
 function splitByWide(inputGroups) {
   const result = [];
   let cur = [];
@@ -110,13 +137,13 @@ function onReady(key, value) {
   Object.assign(readyData.value, { [key]: value });
 }
 function onChanged({ values }) {
-  Object.assign(formData.value, values);
+  Object.assign(model.value, values);
 }
 function onSubmit() {
   if (!ready.value) {
     return;
   }
-  emit("submit", formData.value);
+  emit("submit", model.value);
 }
 </script>
 

package/dist/runtime/components/InlineError.d.vue.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/InlineError.vue

@@ -0,0 +1,27 @@
+<template>
+  <Bake
+    v-if="error"
+    name="error"
+    :descriptor
+  >
+    <template #content>
+      {{ error.detail }}
+    </template>
+  </Bake>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig } from "#imports";
+const { public: { inlineError } } = useRuntimeConfig();
+const { error } = defineProps({
+  error: { type: null, default: void 0 }
+});
+const descriptor = computed(() => ({
+  ...inlineError,
+  data: {
+    type: "Inline",
+    value: error.title
+  }
+}));
+</script>