@mouseless/baked 1.6.1 → 1.6.3

package/dist/module.json

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

package/dist/runtime/components/Button.vue

@@ -6,6 +6,7 @@
     :label="l(label)"
     :rounded
     :severity
+    :size
     :variant
     @click="$emit('submit')"
   />
@@ -21,6 +22,6 @@ const { schema } = defineProps({
   ready: { type: Boolean, default: true }
 });
 defineEmits(["submit"]);
-const { icon, label, rounded, severity = "secondary", variant } = schema;
+const { icon, label, rounded, severity = "secondary", size, variant } = schema;
 const executing = context.injectExecuting();
 </script>

package/dist/runtime/components/DataContainer.vue

@@ -7,19 +7,36 @@
     "
   >
     <div
-      v-if="inputs.length > 0"
-      class="
-        py-2 px-4
-        bg-transparent
-        rounded-none text-sm
-        flex gap-2 items-center justify-end
-      "
+      v-if="actions.length || inputs.length"
+      class="w-full flex justify-between  py-2 px-4"
     >
-      <Inputs
-        :inputs="inputs"
-        @ready="onReady"
-        @changed="onChanged"
-      />
+      <div
+        class="
+          min-w-min flex gap-2 row-span-2 items-end text-nowrap
+          max-xs:text-xs max-md:text-sm
+          md:max-md:items-center
+        "
+      >
+        <Bake
+          v-for="action in actions"
+          :key="action.schema.name"
+          :name="`actions/${action.schema.name}`"
+          :descriptor="action"
+        />
+      </div>
+      <div
+        class="
+          bg-transparent
+          rounded-none text-sm
+          flex gap-2 items-center justify-end
+        "
+      >
+        <Inputs
+          :inputs="inputs"
+          @ready="onReady"
+          @changed="onChanged"
+        />
+      </div>
     </div>
     <div
       class="p-4 [contain:inline-size]"
@@ -49,7 +66,7 @@ const { localize: lc } = useLocalization({ group: "DataContainer" });
 const { schema } = defineProps({
   schema: { type: null, required: true }
 });
-const { content, inputs } = schema;
+const { actions = [], content, inputs } = schema;
 const contextData = context.injectContextData();
 const loaded = ref(true);
 const ready = ref(inputs.length === 0);
@@ -68,5 +85,5 @@ function onChanged(event) {
 </script>
 
 <style>
-.p-panel-content:has(.b-component--DataContainer) .b-component--DataContainer{@apply border-none rounded-none}.b-component--DataContainer div{@apply [&:has(.p-datatable)]:p-0}
+.p-panel-content:has(.b-component--DataContainer) .b-component--DataContainer{@apply border-none rounded-none}.b-component--DataContainer div{@apply [&:has(.p-datatable)]:p-0}.b-component--DataContainer .p-button{@apply self-stretch}.b-component--DataContainer .p-button .p-button-icon+.p-button-label{@apply max-sm:hidden}
 </style>

package/dist/runtime/components/DataTable.vue

@@ -99,7 +99,7 @@
             :data="row.$getRow()"
             data-key="row"
           >
-            <div class="flex">
+            <div class="flex text-nowrap">
               <Bake
                 :name="`rows/${index}/actions`"
                 :descriptor="actions.component"

package/dist/runtime/components/Message.vue

@@ -1,6 +1,10 @@
 <template>
   <div
-    class="b-message grid"
+    class="
+      b-message
+      grid grid-cols-[1fr_auto] gap-2
+      items-center
+    "
     :class="[`message-${severity}`, `message-${variant}`]"
   >
     <div class="min-h-0">
@@ -25,18 +29,27 @@
         <slot name="content" />
       </div>
     </div>
+    <div
+      v-if="action"
+      class="b-message-action p-2"
+    >
+      <Bake
+        name="action"
+        :descriptor="{ ...action, schema: { ...action.schema, severity } }"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { computed, useLocalization } from "#imports";
-import { AwaitLoading } from "#components";
+import { AwaitLoading, Bake } from "#components";
 const { localize: l } = useLocalization();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { icon, localizeMessage, severity = "info", size, variant = "outlined" } = schema;
+const { action, icon, localizeMessage, severity = "info", size, variant = "outlined" } = schema;
 const sizeClass = computed(() => {
   switch (size) {
     case "small":
@@ -50,7 +63,7 @@ const sizeClass = computed(() => {
 </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
+.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-icon{@apply text-sm}.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

package/dist/runtime/components/SimpleForm.vue

@@ -31,6 +31,7 @@
         <Inputs
           v-if="inputs"
           :inputs
+          form-mode
           input-class="w-full"
           @ready="onReady"
           @changed="onChanged"
@@ -55,12 +56,16 @@
   <template v-else>
     <div
       v-bind="$attrs"
-      class="flex flex-col gap-8"
+      class="flex flex-col gap-4"
+      :class="{ 'gap-8': !horizontal }"
     >
-      <h1 class="font-bold text-xl truncate">
+      <h2 class="font-bold text-xl truncate">
         {{ l(title) }}
-      </h1>
-      <div class="flex flex-col gap-4">
+      </h2>
+      <div
+        class="flex gap-4"
+        :class="{ 'flex-col': !horizontal }"
+      >
         <Inputs
           v-if="inputs"
           :inputs
@@ -69,21 +74,23 @@
           @ready="onReady"
           @changed="onChanged"
         />
+        <Button
+          ref="submitRef"
+          v-tooltip.top="{
+            disabled: !showValidationSummary,
+            value: messages,
+            pt: { text: 'text-sm' }
+          }"
+          :schema="submit"
+          :ready
+          class="min-w-min"
+          :class="{ 'mt-4': !horizontal && inputs.length }"
+          @submit="$emit('submit', model)"
+        />
+        <ErrorPopover ref="errorPopoverRef">
+          <InlineError :error />
+        </ErrorPopover>
       </div>
-      <Button
-        ref="submitRef"
-        v-tooltip.top="{
-          disabled: !showValidationSummary,
-          value: messages,
-          pt: { text: 'text-sm' }
-        }"
-        :schema="submit"
-        :ready
-        @submit="$emit('submit', model)"
-      />
-      <ErrorPopover ref="errorPopoverRef">
-        <InlineError :error />
-      </ErrorPopover>
     </div>
   </template>
 </template>
@@ -100,7 +107,7 @@ const { schema } = defineProps({
   schema: { type: null, required: true }
 });
 const emit = defineEmits(["submit"]);
-const { dialogOptions, inputs, submit, title, validations = [], showValidationSummary = false } = schema;
+const { dialogOptions, inputs, horizontal, submit, title, validations = [], showValidationSummary = false } = schema;
 const model = ref({});
 const readyData = ref({});
 const submitted = ref(false);

package/dist/runtime/components/Validation.vue

@@ -14,10 +14,13 @@
     >
       <Message
         v-if="message"
+        :key="`${severity}:${icon}`"
+        icon="pi pi-info-circle"
         :schema="{
-          severity: severity,
+          severity,
           variant: 'simple',
-          size: 'small'
+          size: 'small',
+          icon
         }"
         :data="message || ''"
         class="ml-3"
@@ -45,4 +48,5 @@ const message = computed(() => {
   return null;
 });
 const severity = computed(() => mutableValidation?.value.severity || validation?.value.severity);
+const icon = computed(() => mutableValidation?.value.icon || validation?.value.icon);
 </script>

package/dist/runtime/composables/useReactionHandler.js

@@ -1,4 +1,4 @@
-import { watch } from "vue";
+import { watch, unref } from "vue";
 import { useConstraintEvaluator, useContext } from "#imports";
 
 export default function() {
@@ -74,12 +74,22 @@ function On({ evaluate, eventId, events }) {
 
 function When({ contextData, evaluate }) {
   function bind({ trigger, react }) {
-    watch(() => contextData.page[trigger.when], async value => {
+    watch(() => access(contextData[trigger.key ?? "page"], trigger.when), async value => {
+      react(false);
       react(await evaluate(trigger.constraint, value));
     }, { immediate: true });
 
     return [];
   }
+  function access(data, propChain) {
+    data = unref(data);
+    for(const prop of propChain.split(".")) {
+      data = data?.[prop];
+      data = unref(data);
+    }
+
+    return data;
+  }
 
   return {
     bind

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

@@ -11,5 +11,9 @@ export default function _default(): {
     injectMutable: () => {
         clear: () => void;
         setError: (message: any) => void;
+        setMessage: (message: any, { persist, severity, icon }?: {
+            persist?: boolean | undefined;
+            severity?: string | undefined;
+        }) => void;
     } | null;
 };

package/dist/runtime/composables/useValidation.js

@@ -38,7 +38,7 @@ export default function() {
 
     const messages = computed(() =>
       [...Object.values(validations.value), ...Object.values(mutableValidations).map(v => v.value)]
-        .filter(v => v.message)
+        .filter(v => v.message && v.severity === "error")
         .map((v, i) => `${i > 0 ? "\n" : ""} - ${v.message}`)
         .join("")
     );
@@ -67,13 +67,20 @@ function MutableValidation(ref) {
   }
 
   function setError(message) {
-    ref.value.valid = false;
+    setMessage(message, { persist: true, severity: "error" });
+  }
+
+  function setMessage(message, { persist = false, severity = "secondary", icon } = {}) {
+    ref.value.valid = severity !== "error";
     ref.value.message = message;
-    ref.value.severity = "error";
+    ref.value.persist = persist;
+    ref.value.severity = severity;
+    ref.value.icon = icon;
   }
 
   return {
     clear,
-    setError
+    setError,
+    setMessage
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mouseless/baked",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Baked is an opinionated framework for .NET and Vue. This is the UI package of Baked project.",
   "keywords": [
     "baked",
@@ -47,6 +47,7 @@
     "@nuxtjs/tailwindcss": "6.14.0",
     "@primeuix/themes": "2.0.3",
     "async-mutex": "0.5.0",
+    "playwright": "^1.60.0",
     "primeicons": "7.0.0",
     "primevue": "4.5.5"
   },
@@ -71,4 +72,4 @@
     "@oxc-parser/binding-linux-x64-musl": "0.133.0",
     "@oxc-parser/binding-win32-x64-msvc": "0.133.0"
   }
-}
+}