@mouseless/baked 1.5.3 → 1.6.1

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

@@ -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>
 
@@ -16,15 +18,16 @@ 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 },
   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/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`];

package/dist/runtime/components/Select.vue

@@ -1,45 +1,44 @@
 <template>
-  <AwaitLoading>
-    <template #loading>
-      <div class="min-w-40">
-        <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"
+  <AwaitLoading
+    :skeleton="{
+      height: label?.mode === 'ifta' ? '3.6rem' : '2.6rem',
+      class: 'min-w-40'
+    }"
+  >
+    <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
+        >
+          <template #value="slotProps">
+            <span>{{ getValueLabel(slotProps) }}</span>
+          </template>
+          <template #option="slotProps">
+            <span>{{ getOptionLabel(slotProps) }}</span>
+          </template>
+        </Select>
+      </Labeler>
+    </Validation>
   </AwaitLoading>
 </template>
 
 <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 } from "#components";
+import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { value: { selectStates } } = useUiStates();
@@ -48,9 +47,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 +65,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;
@@ -96,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,47 +1,54 @@
 <template>
-  <AwaitLoading>
-    <template #loading>
-      <div class="min-w-60">
-        <Skeleton class="min-h-10" />
-      </div>
-    </template>
-    <Labeler
-      :label
-      :path
-      :mode="labelMode == 'ifta' ? labelMode : null"
-      :dt="{
-        colorScheme: {
-          light: {
-            top: '-1rem',
-          },
-          dark: {
-            top: '-1rem'
+  <AwaitLoading
+    :skeleton="{
+      height: label?.mode === 'ifta' ? '3.6rem' : '2.6rem',
+      class: 'min-w-60'
+    }"
+  >
+    <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>
 
 <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 } 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;
@@ -103,9 +109,9 @@ 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>
-&:has(.p-iftalabel) .p-iftalabel{@apply mt-4}
+.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
@@ -60,49 +64,80 @@
         <Inputs
           v-if="inputs"
           :inputs
+          form-mode
           input-class="w-full"
           @ready="onReady"
           @changed="onChanged"
         />
       </div>
       <Button
+        ref="submitRef"
+        v-tooltip.top="{
+          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/Validation.d.vue.ts

@@ -0,0 +1,17 @@
+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;
+        mutableValidation: any;
+    }) => any) | undefined;
+};

package/dist/runtime/components/Validation.vue

@@ -0,0 +1,48 @@
+<template>
+  <template v-if="validationHandled || !validation">
+    <slot />
+  </template>
+  <div
+    v-else
+    class="b-Validation flex flex-col gap-2"
+  >
+    <slot />
+    <slot
+      name="message"
+      :validation
+      :mutable-validation
+    >
+      <Message
+        v-if="message"
+        :schema="{
+          severity: severity,
+          variant: 'simple',
+          size: 'small'
+        }"
+        :data="message || ''"
+        class="ml-3"
+      />
+    </slot>
+  </div>
+</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

@@ -0,0 +1,17 @@
+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;
+        mutableValidation: 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
+  };
+}