@mouseless/baked 1.8.4 → 1.8.6

package/dist/module.d.mts

@@ -11,10 +11,20 @@ interface ModuleOptions {
 }
 interface Components {
     Page?: PageOptions;
+    NavLink?: NavLinkOptions;
 }
 interface PageOptions {
     title?: String;
 }
+interface NavLinkOptions {
+    timeouts?: {
+        show?: {
+            initial?: number;
+            consequent?: number;
+        };
+        hide?: number;
+    };
+}
 interface PrimeVueOptions {
     theme: any;
     locale?: any;
@@ -50,4 +60,4 @@ interface ScreenOptions {
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { CacheOptions, Components, Composables, ModuleOptions, PageOptions, Plugins, PrimeVueOptions, RetryOptions, ScreenOptions, UseBreakpointsOptions, UseDataFetcherOptions, UseFormatOptions };
+export type { CacheOptions, Components, Composables, ModuleOptions, NavLinkOptions, PageOptions, Plugins, PrimeVueOptions, RetryOptions, ScreenOptions, UseBreakpointsOptions, UseDataFetcherOptions, UseFormatOptions };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mouseless/baked",
   "configKey": "baked",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/runtime/assets/components.css

@@ -3,7 +3,7 @@
         dark:bg-red-950/95 dark:text-red-500 dark:border-red-700/65}.b-component--Message.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}.b-component--Message.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}.b-component--Message.message-secondary{@apply bg-transparent text-slate-500 border-slate-500
-        dark:text-slate-400 dark:border-slate-400}.b-component--Message.message-contrast{@apply bg-transparent text-slate-950 border-slate-950
+        dark:text-zinc-400 dark:border-zinc-400}.b-component--Message.message-contrast{@apply bg-transparent text-slate-950 border-slate-950
         dark:text-white dark:border-white}.c--missing-component-dialog code:not(:has(pre)){@apply rounded p-1 text-xs bg-zinc-50 text-orange-700
         dark:bg-zinc-950 dark:text-orange-400}.c--missing-component-dialog pre{@apply block rounded-lg overflow-auto max-h-[20em]
         bg-zinc-950 p-4 text-xs text-sky-300}.c--missing-component-dialog pre .c--code-comment{@apply text-green-800}.c--missing-component-dialog pre .c--code-string{@apply text-orange-400}.c--missing-component-dialog pre .c--code-keyword{@apply text-purple-400}.c--missing-component-dialog pre .c--code-symbol{@apply text-gray-100}.c--missing-component-dialog pre .c--code-type{@apply text-blue-400}.c--missing-component-dialog pre .c--code-method{@apply text-yellow-100}.p-scrolltop{@apply right-6 bottom-6 max-md:bottom-24 py-icon-only-width}.b-component--Select .p-placeholder{@apply opacity-0}.b-component--Select .p-select-label{@apply text-[length:inherit]}.p-popover-content .b-component--Select{@apply max-md:w-full}.b-component--SelectButton .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}.b-component--SimpleForm.horizontal :has(.p-iftalabel) .p-button[data-p=large]{@apply mt-1}.b-component--SimpleForm.horizontal :has(.p-iftalabel) .p-button:not([data-p=large]){@apply mt-2}.b-component--PageSize .p-select-label{@apply text-[length:inherit]}.b-component--PageTitle .p-button{@apply self-stretch}.b-component--PageTitle .p-button .p-button-icon+.p-button-label{@apply max-sm:hidden}.p-popover-content>div{@apply max-sm:p-0}}

package/dist/runtime/components/Bake.vue

@@ -164,6 +164,9 @@ async function executeAction(newModel) {
   if (!descriptor.action) {
     return;
   }
+  if (descriptor.actionSkipsEmptyModel && isEmpty(newModel)) {
+    return;
+  }
   try {
     executing.value = true;
     await actionExecuter.execute({
@@ -180,4 +183,16 @@ async function executeAction(newModel) {
     executing.value = false;
   }
 }
+function isEmpty(value) {
+  if (value === null || value === void 0) {
+    return true;
+  }
+  if (typeof value === "string" && value.trim() === "") {
+    return true;
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    return true;
+  }
+  return false;
+}
 </script>

package/dist/runtime/components/Message.vue

@@ -2,12 +2,19 @@
   <div
     class="
       b-message
-      grid grid-cols-[1fr_auto] gap-2
+      grid grid-cols-[1fr_auto]
       items-center
+      md:gap-2
+      max-md:flex max-md:flex-col max-md:space-between
     "
     :class="[`message-${severity}`, `message-${variant}`]"
   >
-    <div class="min-h-0">
+    <div
+      class="
+        min-h-0
+        max-md:w-full
+      "
+    >
       <div
         :class="sizeClass"
         class="
@@ -31,10 +38,14 @@
     </div>
     <div
       v-if="action"
-      class="b-message-action p-2"
+      class="
+        b-message-action p-2
+        max-md:w-full
+      "
     >
       <Bake
         name="action"
+        class="max-md:w-full"
         :descriptor="{ ...action, schema: { ...action.schema, severity } }"
       />
     </div>

package/dist/runtime/components/NavLink.vue

@@ -1,35 +1,106 @@
 <template>
   <AwaitLoading :skeleton="{ height: '1.5rem' }">
-    <Button
+    <div
       v-if="data"
-      :icon
-      :label
-      :to
-      as="router-link"
-      link
-      class="m-0 p-0"
-    />
+      class="flex gap-2"
+    >
+      <Button
+        :icon
+        :label
+        :to
+        as="router-link"
+        link
+        class="m-0 p-0"
+        @mouseenter="openPopover"
+        @mouseleave="closePopover"
+      />
+      <span
+        v-if="summary"
+        class="md:hidden"
+        data-icon
+        @click="openPopover"
+      >
+        <i class="pi pi-eye" />
+      </span>
+      <PersistentPopover
+        v-if="summary"
+        ref="popover"
+        class="
+          mx-4 max-w-96
+          max-md:w-[calc(100%-2rem)]
+        "
+      >
+        <Bake
+          v-if="summaryShown"
+          name="summary"
+          :descriptor="summary"
+          @loaded="showPopover"
+          @mouseenter="cancelHidePopover"
+          @mouseleave="closePopover"
+        />
+      </PersistentPopover>
+    </div>
     <span v-else>-</span>
   </AwaitLoading>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import defu from "defu";
 import { Button } from "primevue";
-import { useDataMounter, usePathBuilder } from "#imports";
-import { AwaitLoading } from "#components";
+import { useRuntimeConfig } from "#app";
+import { useDataMounter, useFormat, usePathBuilder } from "#imports";
+import { AwaitLoading, Bake, PersistentPopover } from "#components";
 const { mount: mountData } = useDataMounter({ defaultInlineError: true });
+const { truncate } = useFormat();
 const pathBuilder = usePathBuilder();
+const runtimeConfig = useRuntimeConfig();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { icon, labelProp, path, query: queryData, params: paramsData } = schema;
+const { icon, labelProp, path, query: queryData, params: paramsData, summary, maxLength } = schema;
+const timeouts = defu(
+  runtimeConfig.public.components?.NavLink?.timeouts,
+  { show: { initial: 500, consequent: 250 }, hide: 250 }
+);
+const popover = ref();
+let loadPopoverTask = null;
+let hidePopoverTask = null;
+let showPopover = null;
 const query = mountData(queryData);
 const params = mountData(paramsData);
-const label = computed(() => labelProp ? data?.[labelProp] : data);
+const label = computed(() => truncate(labelProp ? data?.[labelProp] : data, maxLength));
+const summaryShown = ref(false);
 const to = computed(() => ({
   path: params.value ? pathBuilder.build(path, params.value, { forRoute: true }) : path,
   query: query.value
 }));
+function openPopover(event) {
+  if (!summary) {
+    return false;
+  }
+  clearTimeout(loadPopoverTask);
+  clearTimeout(hidePopoverTask);
+  const target = event.target || event;
+  const onIcon = event.target.dataset["icon"] !== void 0;
+  loadPopoverTask = setTimeout(
+    () => {
+      if (summaryShown.value) {
+        popover.value?.show(event, target);
+      } else {
+        summaryShown.value = true;
+        showPopover = () => popover.value?.show(event, target);
+      }
+    },
+    onIcon ? 0 : !summaryShown.value ? timeouts.show.initial : timeouts.show.consequent
+  );
+}
+function closePopover(event) {
+  clearTimeout(loadPopoverTask);
+  hidePopoverTask = setTimeout(() => popover.value?.hide(event.target), timeouts.hide);
+}
+function cancelHidePopover() {
+  clearTimeout(hidePopoverTask);
+}
 </script>

package/dist/runtime/components/Text.vue

@@ -27,11 +27,10 @@ const data = computed(() => {
   }
   return rawData;
 });
-const lengthIsExceeded = computed(() => maxLength && data.value.length > maxLength);
-const text = computed(() => lengthIsExceeded.value ? truncate(data.value, maxLength) : data.value);
+const text = computed(() => truncate(data.value, maxLength));
 const tooltip = computed(() => ({
   value: `${data.value}`,
-  disabled: !lengthIsExceeded.value,
+  disabled: text.value === data.value,
   pt: {
     root: {
       style: maxLength ? `min-width: ${maxLength / 2}rem;` : ""

package/dist/runtime/composables/useActionExecuter.js

@@ -1,5 +1,5 @@
 import { useRuntimeConfig } from "#app";
-import { useComposableResolver, useDataFetcher, usePathBuilder, useUnref } from "#imports";
+import { useComposableResolver, useContext, useDataFetcher, usePathBuilder, useUnref, useValidation } from "#imports";
 import { bfetch } from "../utils/bfetch.js";
 
 export default function() {
@@ -36,9 +36,14 @@ function Composite({ actionExecuter }) {
 function Local() {
   const composableResolver = useComposableResolver();
   const dataFetcher = useDataFetcher();
+  const validation = useValidation();
+  const context = useContext();
+
+  const mutableValidation = validation.injectMutable();
+  const events = context.injectEvents();
 
   async function execute({ action, contextData }) {
-    const composable = composableResolver.resolve(action.composable).default();
+    const composable = composableResolver.resolve(action.composable).default({ mutableValidation, events });
 
     if(composable.run) {
       const options = action.options ? await dataFetcher.fetch({ data: action.options, contextData }) : { };
@@ -106,4 +111,4 @@ function Remote({ actionExecuter }) {
   return {
     execute
   };
-}
+}

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

@@ -11,7 +11,7 @@ export default function _default(): {
         handle?: boolean | undefined;
     }) => import("vue").Ref<{}, {}>;
     provideError: (error: any) => import("vue").Ref<boolean, boolean>;
-    injectEvents: () => any;
+    injectEvents: () => null;
     provideEvents: (value: any) => void;
     injectExecuting: () => import("vue").Ref<boolean, boolean>;
     provideExecuting: (value: any) => void;

package/dist/runtime/composables/useContext.js

@@ -48,7 +48,7 @@ export default function() {
   }
 
   function injectEvents() {
-    return inject("__bake_events");
+    return inject("__bake_events", null);
   }
 
   function provideEvents(value) {

package/dist/runtime/composables/useUnref.js

@@ -20,7 +20,6 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
 */
 
 import { isRef, unref } from "vue";
@@ -29,7 +28,7 @@ const isObject = val => val !== null && typeof val === "object";
 const isArray = Array.isArray;
 
 /**
- * Deeply unref a value, recursing into objects and arrays.
+ * Deeply unref a value, recursing into objects, plain object and arrays.
  *
  * @param {Mixed} val - The value to deeply unref.
  *
@@ -38,7 +37,7 @@ const isArray = Array.isArray;
 const deepUnref = val => {
   const checkedVal = isRef(val) ? unref(val) : val;
 
-  if(! isObject(checkedVal)) {
+  if(!isObject(checkedVal)) {
     return checkedVal;
   }
 
@@ -46,9 +45,26 @@ const deepUnref = val => {
     return unrefArray(checkedVal);
   }
 
+  if(!isPlainObject(checkedVal)) {
+    return checkedVal;
+  }
+
   return unrefObject(checkedVal);
 };
 
+/**
+ * Is this value a plain object?
+ *
+ * @param {Object} val - The object to check.
+ *
+ * @return {Boolean}
+ */
+const isPlainObject = val => {
+  const proto = Object.getPrototypeOf(val);
+
+  return proto === Object.prototype || proto === null;
+};
+
 /**
  * Unref a value, recursing into it if it's an object.
  *
@@ -58,7 +74,7 @@ const deepUnref = val => {
  */
 const smartUnref = val => {
   // Non-ref object?  Go deeper!
-  if(val !== null && ! isRef(val) && typeof val === "object") {
+  if(val !== null && !isRef(val) && typeof val === "object") {
     return deepUnref(val);
   }
 

package/dist/types.d.mts

@@ -1,3 +1,3 @@
 export { default } from './module.mjs'
 
-export { type CacheOptions, type Components, type Composables, type ModuleOptions, type PageOptions, type Plugins, type PrimeVueOptions, type RetryOptions, type ScreenOptions, type UseBreakpointsOptions, type UseDataFetcherOptions, type UseFormatOptions } from './module.mjs'
+export { type CacheOptions, type Components, type Composables, type ModuleOptions, type NavLinkOptions, type PageOptions, type Plugins, type PrimeVueOptions, type RetryOptions, type ScreenOptions, type UseBreakpointsOptions, type UseDataFetcherOptions, type UseFormatOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mouseless/baked",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "description": "Baked is an opinionated framework for .NET and Vue. This is the UI package of Baked project.",
   "keywords": [
     "baked",
@@ -71,5 +71,13 @@
     "@oxc-parser/binding-linux-x64-gnu": "0.141.0",
     "@oxc-parser/binding-linux-x64-musl": "0.141.0",
     "@oxc-parser/binding-win32-x64-msvc": "0.141.0"
+  },
+  "allowScripts": {
+    "esbuild@0.25.12": true,
+    "esbuild@0.28.2": true,
+    "unrs-resolver@1.12.2": true
+  },
+  "overrides": {
+    "vue-sfc-transformer": "0.2.5"
   }
 }