@shwfed/nuxt 0.11.19 → 0.11.20

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.11.19",
+  "version": "0.11.20",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/modal.vue

@@ -76,15 +76,6 @@ const open = computed({
 function close() {
   open.value = false;
 }
-function isClosedContentTarget(target) {
-  return target instanceof HTMLElement && target.dataset.state === "closed";
-}
-function handleContentAnimationEnd(event) {
-  if (open.value || event.target !== event.currentTarget || !isClosedContentTarget(event.currentTarget)) {
-    return;
-  }
-  emit("after-close");
-}
 </script>
 
 <template>
@@ -108,7 +99,7 @@ function handleContentAnimationEnd(event) {
       :is="modalComponents.Content"
       v-bind="attrs"
       :show-close-button="props.showCloseButton"
-      @animationend="handleContentAnimationEnd"
+      @after-close="emit('after-close')"
     >
       <component
         :is="modalComponents.Header"

package/dist/runtime/components/ui/dialog/DialogContent.d.vue.ts

@@ -4,9 +4,9 @@ type __VLS_Props = DialogContentProps & {
     class?: HTMLAttributes['class'];
     showCloseButton?: boolean;
 };
-declare var __VLS_19: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
@@ -15,6 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
     openAutoFocus: (event: Event) => any;
     closeAutoFocus: (event: Event) => any;
+    "after-close": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
@@ -22,6 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    "onAfter-close"?: (() => any) | undefined;
 }>, {
     showCloseButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/dialog/DialogContent.vue

@@ -9,6 +9,7 @@ import {
 import { cn } from "../../../utils/cn";
 import DialogOverlay from "./DialogOverlay.vue";
 import { Icon } from "@iconify/vue";
+import { onBeforeUnmount, shallowRef, watchEffect } from "vue";
 defineOptions({
   inheritAttrs: false
 });
@@ -20,15 +21,123 @@ const props = defineProps({
   class: { type: null, required: false },
   showCloseButton: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"]);
+const emit = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus", "after-close"]);
 const delegatedProps = reactiveOmit(props, "class");
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emit);
+const contentElement = shallowRef(null);
+let closeFallbackTimer;
+let hasEmittedAfterClose = false;
+function isClosedContentTarget(target) {
+  return target instanceof HTMLElement && target.dataset.state === "closed";
+}
+function clearCloseFallbackTimer() {
+  if (closeFallbackTimer === void 0) {
+    return;
+  }
+  window.clearTimeout(closeFallbackTimer);
+  closeFallbackTimer = void 0;
+}
+function emitAfterClose() {
+  if (hasEmittedAfterClose) {
+    return;
+  }
+  hasEmittedAfterClose = true;
+  clearCloseFallbackTimer();
+  emit("after-close");
+}
+function parseDurationMs(value) {
+  const normalizedValue = value.trim();
+  if (normalizedValue.endsWith("ms")) {
+    const duration = Number.parseFloat(normalizedValue.slice(0, -2));
+    return Number.isFinite(duration) ? duration : 0;
+  }
+  if (normalizedValue.endsWith("s")) {
+    const duration = Number.parseFloat(normalizedValue.slice(0, -1));
+    return Number.isFinite(duration) ? duration * 1e3 : 0;
+  }
+  return 0;
+}
+function getLongestMotionMs(element) {
+  const style = window.getComputedStyle(element);
+  const animationDurations = style.animationDuration.split(",");
+  const animationDelays = style.animationDelay.split(",");
+  const transitionDurations = style.transitionDuration.split(",");
+  const transitionDelays = style.transitionDelay.split(",");
+  let longestMotionMs = 0;
+  for (const [index, durationValue] of animationDurations.entries()) {
+    const durationMs = parseDurationMs(durationValue);
+    const delayMs = parseDurationMs(animationDelays[index] ?? animationDelays[0] ?? "0s");
+    longestMotionMs = Math.max(longestMotionMs, durationMs + delayMs);
+  }
+  for (const [index, durationValue] of transitionDurations.entries()) {
+    const durationMs = parseDurationMs(durationValue);
+    const delayMs = parseDurationMs(transitionDelays[index] ?? transitionDelays[0] ?? "0s");
+    longestMotionMs = Math.max(longestMotionMs, durationMs + delayMs);
+  }
+  return longestMotionMs;
+}
+function syncCloseFallback() {
+  const element = contentElement.value;
+  clearCloseFallbackTimer();
+  if (!element) {
+    return;
+  }
+  if (element.dataset.state !== "closed") {
+    hasEmittedAfterClose = false;
+    return;
+  }
+  const motionMs = getLongestMotionMs(element);
+  closeFallbackTimer = window.setTimeout(() => {
+    emitAfterClose();
+  }, motionMs > 0 ? motionMs : 0);
+}
+function handleCloseMotionEnd(event) {
+  if (hasEmittedAfterClose || event.target !== event.currentTarget || !isClosedContentTarget(event.currentTarget)) {
+    return;
+  }
+  emitAfterClose();
+}
+function setContentElement(target) {
+  if (target instanceof HTMLElement) {
+    contentElement.value = target;
+    syncCloseFallback();
+    return;
+  }
+  if (target && "$el" in target && target.$el instanceof HTMLElement) {
+    contentElement.value = target.$el;
+    syncCloseFallback();
+    return;
+  }
+  contentElement.value = null;
+  clearCloseFallbackTimer();
+}
+watchEffect((onCleanup) => {
+  const element = contentElement.value;
+  if (!element) {
+    return;
+  }
+  const observer = new MutationObserver(() => {
+    syncCloseFallback();
+  });
+  observer.observe(element, {
+    attributes: true,
+    attributeFilter: ["data-state"]
+  });
+  syncCloseFallback();
+  onCleanup(() => {
+    observer.disconnect();
+  });
+});
+onBeforeUnmount(() => {
+  clearCloseFallbackTimer();
+});
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay />
     <DialogContent
+      :ref="setContentElement"
       data-slot="dialog-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
@@ -37,6 +146,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     props.class
   )
 "
+      @animationend="handleCloseMotionEnd"
+      @transitionend="handleCloseMotionEnd"
     >
       <slot />
 

package/dist/runtime/components/ui/dialog/DialogContent.vue.d.ts

@@ -4,9 +4,9 @@ type __VLS_Props = DialogContentProps & {
     class?: HTMLAttributes['class'];
     showCloseButton?: boolean;
 };
-declare var __VLS_19: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
@@ -15,6 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
     openAutoFocus: (event: Event) => any;
     closeAutoFocus: (event: Event) => any;
+    "after-close": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
@@ -22,6 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    "onAfter-close"?: (() => any) | undefined;
 }>, {
     showCloseButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/drawer/DrawerContent.d.vue.ts

@@ -3,11 +3,15 @@ type __VLS_Props = {
     class?: HTMLAttributes['class'];
     showCloseButton?: boolean;
 };
-declare var __VLS_19: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "after-close": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onAfter-close"?: (() => any) | undefined;
+}>, {
     showCloseButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/drawer/DrawerContent.vue

@@ -2,6 +2,7 @@
 import { reactiveOmit } from "@vueuse/core";
 import { Icon } from "@iconify/vue";
 import { useForwardProps } from "reka-ui";
+import { onBeforeUnmount, shallowRef, watchEffect } from "vue";
 import {
   DrawerClose,
   DrawerContent,
@@ -16,14 +17,123 @@ const props = defineProps({
   class: { type: null, required: false },
   showCloseButton: { type: Boolean, required: false, default: true }
 });
+const emit = defineEmits(["after-close"]);
 const delegatedProps = reactiveOmit(props, "class", "showCloseButton");
 const forwardedProps = useForwardProps(delegatedProps);
+const contentElement = shallowRef(null);
+let closeFallbackTimer;
+let hasEmittedAfterClose = false;
+function isClosedContentTarget(target) {
+  return target instanceof HTMLElement && target.dataset.state === "closed";
+}
+function clearCloseFallbackTimer() {
+  if (closeFallbackTimer === void 0) {
+    return;
+  }
+  window.clearTimeout(closeFallbackTimer);
+  closeFallbackTimer = void 0;
+}
+function emitAfterClose() {
+  if (hasEmittedAfterClose) {
+    return;
+  }
+  hasEmittedAfterClose = true;
+  clearCloseFallbackTimer();
+  emit("after-close");
+}
+function parseDurationMs(value) {
+  const normalizedValue = value.trim();
+  if (normalizedValue.endsWith("ms")) {
+    const duration = Number.parseFloat(normalizedValue.slice(0, -2));
+    return Number.isFinite(duration) ? duration : 0;
+  }
+  if (normalizedValue.endsWith("s")) {
+    const duration = Number.parseFloat(normalizedValue.slice(0, -1));
+    return Number.isFinite(duration) ? duration * 1e3 : 0;
+  }
+  return 0;
+}
+function getLongestMotionMs(element) {
+  const style = window.getComputedStyle(element);
+  const animationDurations = style.animationDuration.split(",");
+  const animationDelays = style.animationDelay.split(",");
+  const transitionDurations = style.transitionDuration.split(",");
+  const transitionDelays = style.transitionDelay.split(",");
+  let longestMotionMs = 0;
+  for (const [index, durationValue] of animationDurations.entries()) {
+    const durationMs = parseDurationMs(durationValue);
+    const delayMs = parseDurationMs(animationDelays[index] ?? animationDelays[0] ?? "0s");
+    longestMotionMs = Math.max(longestMotionMs, durationMs + delayMs);
+  }
+  for (const [index, durationValue] of transitionDurations.entries()) {
+    const durationMs = parseDurationMs(durationValue);
+    const delayMs = parseDurationMs(transitionDelays[index] ?? transitionDelays[0] ?? "0s");
+    longestMotionMs = Math.max(longestMotionMs, durationMs + delayMs);
+  }
+  return longestMotionMs;
+}
+function syncCloseFallback() {
+  const element = contentElement.value;
+  clearCloseFallbackTimer();
+  if (!element) {
+    return;
+  }
+  if (element.dataset.state !== "closed") {
+    hasEmittedAfterClose = false;
+    return;
+  }
+  const motionMs = getLongestMotionMs(element);
+  closeFallbackTimer = window.setTimeout(() => {
+    emitAfterClose();
+  }, motionMs > 0 ? motionMs : 0);
+}
+function handleCloseMotionEnd(event) {
+  if (hasEmittedAfterClose || event.target !== event.currentTarget || !isClosedContentTarget(event.currentTarget)) {
+    return;
+  }
+  emitAfterClose();
+}
+function setContentElement(target) {
+  if (target instanceof HTMLElement) {
+    contentElement.value = target;
+    syncCloseFallback();
+    return;
+  }
+  if (target && "$el" in target && target.$el instanceof HTMLElement) {
+    contentElement.value = target.$el;
+    syncCloseFallback();
+    return;
+  }
+  contentElement.value = null;
+  clearCloseFallbackTimer();
+}
+watchEffect((onCleanup) => {
+  const element = contentElement.value;
+  if (!element) {
+    return;
+  }
+  const observer = new MutationObserver(() => {
+    syncCloseFallback();
+  });
+  observer.observe(element, {
+    attributes: true,
+    attributeFilter: ["data-state"]
+  });
+  syncCloseFallback();
+  onCleanup(() => {
+    observer.disconnect();
+  });
+});
+onBeforeUnmount(() => {
+  clearCloseFallbackTimer();
+});
 </script>
 
 <template>
   <DrawerPortal>
     <DrawerOverlay />
     <DrawerContent
+      :ref="setContentElement"
       data-slot="drawer-content"
       v-bind="{ ...$attrs, ...forwardedProps }"
       :class="
@@ -32,6 +142,8 @@ const forwardedProps = useForwardProps(delegatedProps);
     props.class
   )
 "
+      @animationend="handleCloseMotionEnd"
+      @transitionend="handleCloseMotionEnd"
     >
       <div class="mx-auto -mt-2 h-2 w-16 rounded-full bg-zinc-200" />
 

package/dist/runtime/components/ui/drawer/DrawerContent.vue.d.ts

@@ -3,11 +3,15 @@ type __VLS_Props = {
     class?: HTMLAttributes['class'];
     showCloseButton?: boolean;
 };
-declare var __VLS_19: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "after-close": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onAfter-close"?: (() => any) | undefined;
+}>, {
     showCloseButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.11.19",
+  "version": "0.11.20",
   "description": "",
   "license": "MIT",
   "type": "module",