@mouseless/baked 1.8.5 → 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.5",
+  "version": "1.8.6",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

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/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.5",
+  "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"
   }
 }