@weni/unnnic-system 3.25.3 → 3.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.25.3",
+  "version": "3.25.4",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Drawer/Drawer.vue

@@ -3,6 +3,8 @@
     class="unnnic-drawer"
     data-testid="drawer"
     :open="modelValue"
+    :lazyMount="lazyMount"
+    :unmountDelay="unmountDelay"
     @update:open="$event ? () => {} : back()"
   >
     <DrawerContent
@@ -158,6 +160,14 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  lazyMount: {
+    type: Boolean,
+    default: false,
+  },
+  unmountDelay: {
+    type: Number,
+    default: 300,
+  },
   withoutOverlay: {
     type: Boolean,
     default: false,

package/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
-"<div data-v-196de012="" class="unnnic-drawer" data-testid="drawer" open="true">
+"<div data-v-196de012="" class="unnnic-drawer" data-testid="drawer" open="true" lazymount="false" unmountdelay="300">
   <div data-v-196de012="" showoverlay="true" data-testid="drawer-container" size="medium" class="unnnic-drawer__container unnnic-drawer__container--md">
     <header data-v-39d0dfb8="" data-v-196de012="" class="unnnic-drawer__header unnnic-drawer__header">
       <section data-v-196de012="" class="unnnic-drawer__title-container">

package/src/components/ui/dialog/Dialog.vue

@@ -1,19 +1,51 @@
 <script setup lang="ts">
 import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import { computed, toRef } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
 import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+import useDelayedUnmount from '@/composables/useDelayedUnmount';
 
 defineOptions({
   name: 'UnnnicDialog',
 });
 
-const props = defineProps<DialogRootProps>();
+const props = withDefaults(
+  defineProps<
+    DialogRootProps & {
+      /**
+       * When true, the dialog is only mounted while open and stays mounted for
+       * `unmountDelay` ms after closing so the exit animation can play. Use it
+       * to avoid mounting many dialogs eagerly inside lists.
+       */
+      lazyMount?: boolean;
+      /**
+       * Delay (ms) before the dialog is unmounted after closing. Should match
+       * the leave animation duration. Only applies when `lazyMount` is true.
+       */
+      unmountDelay?: number;
+    }
+  >(),
+  {
+    lazyMount: false,
+    unmountDelay: 300,
+  },
+);
 const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits);
+const delegatedProps = reactiveOmit(props, 'lazyMount', 'unmountDelay');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const open = toRef(props, 'open');
+const lazyShouldRender = useDelayedUnmount(open, props.unmountDelay);
+
+const shouldRender = computed(() => !props.lazyMount || lazyShouldRender.value);
 </script>
 
 <template>
-  <DialogRoot v-bind="forwarded">
+  <DialogRoot
+    v-if="shouldRender"
+    v-bind="forwarded"
+  >
     <slot />
   </DialogRoot>
 </template>

package/src/components/ui/dialog/DialogContent.vue

@@ -15,6 +15,7 @@ import { useTeleportTarget } from '@/lib/teleport-target';
 
 defineOptions({
   name: 'UnnnicDialogContent',
+  inheritAttrs: false,
 });
 
 const props = withDefaults(
@@ -69,7 +70,7 @@ const ConditionalWrapper: Component = (_, { slots }) => {
 
     <ConditionalWrapper>
       <DialogContent
-        v-bind="forwarded"
+        v-bind="{ ...forwarded, ...$attrs }"
         :class="contentClasses"
         :style="{ zIndex: modalZIndex }"
       >

package/src/components/ui/drawer/Drawer.vue

@@ -1,23 +1,76 @@
 <script lang="ts" setup>
-import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue';
+import type { DrawerRootEmits } from 'vaul-vue';
+import { computed, toRef } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
 import { useForwardPropsEmits } from 'reka-ui';
 import { DrawerRoot } from 'vaul-vue';
+import useDelayedUnmount from '@/composables/useDelayedUnmount';
 
 defineOptions({
   name: 'UnnnicDrawerNext',
 });
 
-const props = withDefaults(defineProps<DrawerRootProps>(), {
+/**
+ * Self-contained props type that mirrors `vaul-vue`'s `DrawerRootProps`.
+ *
+ * We intentionally avoid extending or intersecting `DrawerRootProps` because
+ * its definition includes the internal, non-exported `WithoutFadeFromProps`
+ * type, which breaks `vite-plugin-dts` declaration rollup with TS4023 when
+ * combined with our extra `lazyMount` / `unmountDelay` props.
+ */
+interface DrawerRootProps {
+  activeSnapPoint?: number | string | null;
+  closeThreshold?: number;
+  shouldScaleBackground?: boolean;
+  setBackgroundColorOnScale?: boolean;
+  scrollLockTimeout?: number;
+  fixed?: boolean;
+  dismissible?: boolean;
+  modal?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  nested?: boolean;
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  noBodyStyles?: boolean;
+  handleOnly?: boolean;
+  preventScrollRestoration?: boolean;
+  snapPoints?: (number | string)[];
+}
+
+export interface UnnnicDrawerNextProps extends DrawerRootProps {
+  /**
+   * When true, the drawer is only mounted while open and stays mounted for
+   * `unmountDelay` ms after closing so the exit animation can play. Use it
+   * to avoid mounting many drawers eagerly inside lists.
+   */
+  lazyMount?: boolean;
+  /**
+   * Delay (ms) before the drawer is unmounted after closing. Should match
+   * the leave animation duration. Only applies when `lazyMount` is true.
+   */
+  unmountDelay?: number;
+}
+
+const props = withDefaults(defineProps<UnnnicDrawerNextProps>(), {
   shouldScaleBackground: true,
+  lazyMount: false,
+  unmountDelay: 300,
 });
 
 const emits = defineEmits<DrawerRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits);
+const delegatedProps = reactiveOmit(props, 'lazyMount', 'unmountDelay');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const open = toRef(props, 'open');
+const lazyShouldRender = useDelayedUnmount(open, props.unmountDelay);
+
+const shouldRender = computed(() => !props.lazyMount || lazyShouldRender.value);
 </script>
 
 <template>
   <DrawerRoot
+    v-if="shouldRender"
     v-bind="forwarded"
     direction="right"
     handleOnly

package/src/components/ui/drawer/DrawerContent.vue

@@ -11,6 +11,7 @@ import DrawerOverlay from './DrawerOverlay.vue';
 
 defineOptions({
   name: 'UnnnicDrawerContent',
+  inheritAttrs: false,
 });
 
 const props = withDefaults(
@@ -43,7 +44,7 @@ const portalTarget = useTeleportTarget();
       :style="{ zIndex: layerZIndex - 2 }"
     />
     <DrawerContent
-      v-bind="forwardedProps"
+      v-bind="{ ...forwardedProps, ...$attrs }"
       :class="
         cn(
           'unnnic-drawer__content',

package/src/composables/useDelayedUnmount.ts

@@ -0,0 +1,48 @@
+import { type Ref, onBeforeUnmount, ref, watch } from 'vue';
+
+/**
+ * Keeps an overlay mounted for `delay` ms after it closes so the leave
+ * animation can play, while still allowing lazy mounting on first open.
+ *
+ * Used internally by drawer/dialog components when `lazyMount` is enabled to
+ * preserve their exit animation without keeping every overlay's portal
+ * eagerly mounted in the DOM.
+ */
+export default function useDelayedUnmount(
+  isOpen: Ref<boolean | undefined>,
+  delay = 300,
+): Ref<boolean> {
+  const shouldRender = ref(!!isOpen.value);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const clearTimer = () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+
+  watch(
+    isOpen,
+    (open) => {
+      clearTimer();
+
+      if (open) {
+        shouldRender.value = true;
+        return;
+      }
+
+      if (shouldRender.value) {
+        timer = setTimeout(() => {
+          shouldRender.value = false;
+          timer = null;
+        }, delay);
+      }
+    },
+    { immediate: true },
+  );
+
+  onBeforeUnmount(clearTimer);
+
+  return shouldRender;
+}

package/src/stories/Dialog.stories.js

@@ -46,10 +46,28 @@ export default {
       },
       description: 'The type of the dialog (affects header icon)',
     },
+    lazyMount: {
+      control: { type: 'boolean' },
+      defaultValue: {
+        summary: false,
+      },
+      description:
+        'When true, the dialog is only mounted while open and stays mounted for `unmountDelay` ms after closing so the exit animation can play. Use it to avoid mounting many dialogs eagerly inside lists.',
+    },
+    unmountDelay: {
+      control: { type: 'number' },
+      defaultValue: {
+        summary: 300,
+      },
+      description:
+        'Delay (ms) before the dialog is unmounted after closing. Should match the leave animation duration. Only applies when `lazyMount` is true.',
+    },
   },
   args: {
     size: 'medium',
     type: 'default',
+    lazyMount: false,
+    unmountDelay: 300,
   },
 };
 

package/src/stories/DrawerNext.stories.js

@@ -66,10 +66,28 @@ export default {
       },
       description: 'Whether to show the overlay background',
     },
+    lazyMount: {
+      control: { type: 'boolean' },
+      defaultValue: {
+        summary: false,
+      },
+      description:
+        'When true, the drawer is only mounted while open and stays mounted for `unmountDelay` ms after closing so the exit animation can play. Use it to avoid mounting many drawers eagerly inside lists.',
+    },
+    unmountDelay: {
+      control: { type: 'number' },
+      defaultValue: {
+        summary: 300,
+      },
+      description:
+        'Delay (ms) before the drawer is unmounted after closing. Should match the leave animation duration. Only applies when `lazyMount` is true.',
+    },
   },
   args: {
     size: 'medium',
     showOverlay: true,
+    lazyMount: false,
+    unmountDelay: 300,
   },
 };