@shwfed/nuxt 0.11.36 → 0.11.38

package/dist/runtime/components/modal.vue

@@ -4,10 +4,10 @@ import { computed, ref, useAttrs, useSlots } from "vue";
 import {
   Dialog,
   DialogClose,
-  DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogScrollContent,
   DialogTitle,
   DialogTrigger
 } from "./ui/dialog";
@@ -39,7 +39,7 @@ const isDesktop = useMediaQuery(props.breakpoint);
 const desktopComponents = {
   Root: Dialog,
   Trigger: DialogTrigger,
-  Content: DialogContent,
+  Content: DialogScrollContent,
   Header: DialogHeader,
   Title: DialogTitle,
   Description: DialogDescription,

package/dist/runtime/components/ui/button-configurator/ButtonConfiguratorDialog.vue

@@ -13,7 +13,7 @@ import {
   ButtonsStyleC
 } from "../buttons/schema";
 import { Checkbox } from "../checkbox";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../dialog";
+import { Dialog, DialogDescription, DialogFooter, DialogHeader, DialogScrollContent, DialogTitle } from "../dialog";
 import { IconPicker } from "../icon-picker";
 import { Input } from "../input";
 import Locale from "../locale/Locale.vue";
@@ -848,7 +848,7 @@ function confirmChanges() {
     :open="open"
     @update:open="open = $event"
   >
-    <DialogContent class="flex h-[min(40rem,calc(100vh-4rem))] w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] flex-col overflow-hidden p-0 sm:w-[72rem] sm:max-w-[72rem]">
+    <DialogScrollContent class="flex h-[min(40rem,calc(100vh-4rem))] w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] flex-col overflow-hidden p-0 sm:w-[72rem] sm:max-w-[72rem]">
       <DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
         <div class="flex items-center gap-3">
           <DialogTitle class="text-xl font-semibold text-zinc-800">
@@ -1382,7 +1382,7 @@ function confirmChanges() {
           </Button>
         </div>
       </DialogFooter>
-    </DialogContent>
+    </DialogScrollContent>
   </Dialog>
 </template>
 

package/dist/runtime/components/ui/command/CommandDialog.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useForwardPropsEmits } from "reka-ui";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog";
+import { Dialog, DialogDescription, DialogHeader, DialogScrollContent, DialogTitle } from "../dialog";
 import Command from "./Command.vue";
 const props = defineProps({
   open: { type: Boolean, required: false },
@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(props, emits);
     v-slot="slotProps"
     v-bind="forwarded"
   >
-    <DialogContent
+    <DialogScrollContent
       :show-close-button="false"
       class="overflow-hidden p-0"
     >
@@ -29,6 +29,6 @@ const forwarded = useForwardPropsEmits(props, emits);
       <Command>
         <slot v-bind="slotProps" />
       </Command>
-    </DialogContent>
+    </DialogScrollContent>
   </Dialog>
 </template>

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

@@ -2,10 +2,11 @@ import type { DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 type __VLS_Props = DialogContentProps & {
     class?: HTMLAttributes['class'];
+    showCloseButton?: boolean;
 };
-declare var __VLS_22: {};
+declare var __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
@@ -14,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;
@@ -21,7 +23,10 @@ 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;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onAfter-close"?: (() => any) | undefined;
+}>, {
+    showCloseButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,13 @@
 <script setup>
-import { Icon } from "@iconify/vue";
 import { reactiveOmit } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import {
+  computed,
+  onBeforeUnmount,
+  shallowRef,
+  useAttrs,
+  watchEffect
+} from "vue";
 import {
   DialogClose,
   DialogContent,
@@ -17,11 +24,158 @@ const props = defineProps({
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  showCloseButton: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus", "after-close"]);
+const attrs = useAttrs();
+const delegatedProps = reactiveOmit(props, "class", "showCloseButton");
+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 isPointerDownOutsideEvent(event) {
+  if (!("detail" in event) || typeof event.detail !== "object" || event.detail === null) {
+    return false;
+  }
+  if (!("originalEvent" in event.detail)) {
+    return false;
+  }
+  return event.detail.originalEvent instanceof MouseEvent;
+}
+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();
+}
+function callEventHandlers(eventHandler, event) {
+  if (typeof eventHandler === "function") {
+    eventHandler(event);
+    return;
+  }
+  if (!Array.isArray(eventHandler)) {
+    return;
+  }
+  for (const handler of eventHandler) {
+    if (typeof handler === "function") {
+      handler(event);
+    }
+  }
+}
+function handlePointerDownOutside(event) {
+  if (isPointerDownOutsideEvent(event) && event.detail.originalEvent.target instanceof HTMLElement) {
+    const target = event.detail.originalEvent.target;
+    if (event.detail.originalEvent.offsetX > target.clientWidth || event.detail.originalEvent.offsetY > target.clientHeight) {
+      event.preventDefault();
+    }
+  }
+  callEventHandlers(Reflect.get(forwarded, "onPointerDownOutside"), event);
+  callEventHandlers(Reflect.get(attrs, "onPointerDownOutside"), event);
+}
+const contentBindings = computed(() => ({
+  ...attrs,
+  ...forwarded,
+  onPointerDownOutside: handlePointerDownOutside
+}));
+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();
 });
-const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"]);
-const delegatedProps = reactiveOmit(props, "class");
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -30,25 +184,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
       <DialogContent
+        :ref="setContentElement"
+        data-slot="dialog-content"
         :class="
   cn(
     'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
     props.class
   )
 "
-        v-bind="{ ...$attrs, ...forwarded }"
-        @pointer-down-outside="(event) => {
-  const originalEvent = event.detail.originalEvent;
-  const target = originalEvent.target;
-  if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-    event.preventDefault();
-  }
-}"
+        v-bind="contentBindings"
+        @animationend="handleCloseMotionEnd"
+        @transitionend="handleCloseMotionEnd"
       >
         <slot />
 
         <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-zinc-100"
+          v-if="showCloseButton"
+          data-slot="dialog-close"
+          class="data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-700 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
         >
           <Icon icon="fluent:dismiss-20-filled" />
           <span class="sr-only">Close</span>

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

@@ -2,10 +2,11 @@ import type { DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 type __VLS_Props = DialogContentProps & {
     class?: HTMLAttributes['class'];
+    showCloseButton?: boolean;
 };
-declare var __VLS_22: {};
+declare var __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
@@ -14,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;
@@ -21,7 +23,10 @@ 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;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onAfter-close"?: (() => any) | undefined;
+}>, {
+    showCloseButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;