cynx-lib 1.3.80 → 1.3.82

package/vue/components/Modal.vue

@@ -1,226 +1,226 @@
-<script setup lang="ts">
-import { ref, watch, onUnmounted, computed } from "vue";
-import { X } from "lucide-vue-next";
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean;
-    open?: boolean;
-    title?: string;
-    maxWidth?: number | string;
-    maxHeight?: number | string;
-    showClose?: boolean;
-    bodyStyle?: Record<string, any>;
-    style?: Record<string, any>;
-  }>(),
-  {
-    modelValue: false,
-    open: false,
-    title: "",
-    maxWidth: 520,
-    showClose: true,
-    bodyStyle: () => ({}),
-    style: () => ({}),
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "close"): void;
-}>();
-
-const isOpen = computed(() => props.modelValue || props.open);
-const closing = ref(false);
-
-const STYLES = `
-@keyframes cynxModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
-@keyframes cynxModalFadeOut { from { opacity: 1; } to { opacity: 0; } }
-@keyframes cynxModalCardIn { from { opacity: 0; transform: scale(.96) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
-@keyframes cynxModalCardOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(.96) translateY(-8px); } }
-`;
-
-let _id = "cynx-modal-styles";
-function ensureStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(_id)) return;
-  const tag = document.createElement("style");
-  tag.id = _id;
-  tag.textContent = STYLES;
-  document.head.appendChild(tag);
-}
-
-if (typeof document !== "undefined") ensureStyles();
-
-function close() {
-  if (closing.value) return;
-  closing.value = true;
-  setTimeout(() => {
-    closing.value = false;
-    emit("update:modelValue", false);
-    emit("close");
-  }, 260);
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === "Escape" && isOpen.value) {
-    close();
-  }
-}
-
-watch(
-  isOpen,
-  (val) => {
-    if (typeof document === "undefined") return;
-    if (val) {
-      document.body.style.overflow = "hidden";
-      window.addEventListener("keydown", handleKeydown);
-    } else {
-      document.body.style.overflow = "";
-      window.removeEventListener("keydown", handleKeydown);
-    }
-  },
-  { immediate: true }
-);
-
-onUnmounted(() => {
-  if (typeof document !== "undefined") {
-    document.body.style.overflow = "";
-    window.removeEventListener("keydown", handleKeydown);
-  }
-});
-
-const resolvedMaxWidth = computed(() => {
-  if (typeof props.maxWidth === "number") return `${props.maxWidth}px`;
-  return props.maxWidth;
-});
-
-const resolvedMaxHeight = computed(() => {
-  if (props.maxHeight) {
-    return typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
-  }
-  return "85vh";
-});
-</script>
-
-<template>
-  <Teleport to="body">
-    <div
-      v-if="isOpen || closing"
-      class="cynx-modal-backdrop"
-      :style="{
-        position: 'fixed',
-        inset: 0,
-        background: 'rgba(20, 22, 41, .45)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 8000,
-        padding: '20px',
-        animation: `${closing ? 'cynxModalFadeOut' : 'cynxModalFadeIn'} .26s ease forwards`,
-      }"
-      @mousedown.self="close"
-    >
-      <div
-        class="cynx-modal-card"
-        :style="{
-          background: 'var(--surface, #ffffff)',
-          border: '1px solid var(--border, #e2e8f0)',
-          borderRadius: '14px',
-          width: '100%',
-          maxWidth: resolvedMaxWidth,
-          maxHeight: resolvedMaxHeight,
-          boxShadow: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .25))',
-          overflow: 'hidden',
-          display: 'flex',
-          flexDirection: 'column',
-          animation: `${closing ? 'cynxModalCardOut' : 'cynxModalCardIn'} .26s cubic-bezier(.4, 0, .2, 1) forwards`,
-          ...style,
-        }"
-        @mousedown.stop
-      >
-        <!-- Modal Header -->
-        <div
-          class="cynx-modal-hdr"
-          :style="{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '15px 20px',
-            borderBottom: '1px solid var(--border-light, #ebebf0)',
-            borderRadius: '14px 14px 0 0',
-            flexShrink: 0,
-          }"
-        >
-          <slot name="header">
-            <span
-              class="cynx-modal-title"
-              :style="{
-                fontSize: '.95rem',
-                fontWeight: 700,
-                letterSpacing: '-.01em',
-                color: 'var(--t, var(--primary-text, #0f111c))',
-              }"
-            >
-              {{ title }}
-            </span>
-          </slot>
-
-          <button
-            v-if="showClose"
-            type="button"
-            class="cynx-modal-close"
-            :style="{
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              padding: '4px',
-              borderRadius: '6px',
-              color: 'var(--muted, #797b8d)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'all .14s',
-            }"
-            @click="close"
-          >
-            <X :size="16" />
-          </button>
-        </div>
-
-        <!-- Modal Body -->
-        <div
-          class="cynx-modal-body custom-scrollbar"
-          :style="{
-            padding: '20px',
-            overflowX: 'hidden',
-            overflowY: 'auto',
-            flex: '1 1 auto',
-            minHeight: 0,
-            color: 'var(--t, var(--primary-text, #0f111c))',
-            ...bodyStyle,
-          }"
-        >
-          <slot />
-        </div>
-
-        <!-- Modal Footer -->
-        <div
-          v-if="$slots.footer"
-          class="cynx-modal-footer"
-          :style="{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: '8px',
-            padding: '13px 20px',
-            borderTop: '1px solid var(--border-light, #ebebf0)',
-            background: 'var(--grey-1, #f5f5f8)',
-            borderRadius: '0 0 14px 14px',
-            flexShrink: 0,
-          }"
-        >
-          <slot name="footer" />
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
+<script setup lang="ts">
+import { ref, watch, onUnmounted, computed } from "vue";
+import { X } from "lucide-vue-next";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    open?: boolean;
+    title?: string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    showClose?: boolean;
+    bodyStyle?: Record<string, any>;
+    style?: Record<string, any>;
+  }>(),
+  {
+    modelValue: false,
+    open: false,
+    title: "",
+    maxWidth: 520,
+    showClose: true,
+    bodyStyle: () => ({}),
+    style: () => ({}),
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "close"): void;
+}>();
+
+const isOpen = computed(() => props.modelValue || props.open);
+const closing = ref(false);
+
+const STYLES = `
+@keyframes cynxModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cynxModalFadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes cynxModalCardIn { from { opacity: 0; transform: scale(.96) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+@keyframes cynxModalCardOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(.96) translateY(-8px); } }
+`;
+
+let _id = "cynx-modal-styles";
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement("style");
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+if (typeof document !== "undefined") ensureStyles();
+
+function close() {
+  if (closing.value) return;
+  closing.value = true;
+  setTimeout(() => {
+    closing.value = false;
+    emit("update:modelValue", false);
+    emit("close");
+  }, 260);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape" && isOpen.value) {
+    close();
+  }
+}
+
+watch(
+  isOpen,
+  (val) => {
+    if (typeof document === "undefined") return;
+    if (val) {
+      document.body.style.overflow = "hidden";
+      window.addEventListener("keydown", handleKeydown);
+    } else {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", handleKeydown);
+    }
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = "";
+    window.removeEventListener("keydown", handleKeydown);
+  }
+});
+
+const resolvedMaxWidth = computed(() => {
+  if (typeof props.maxWidth === "number") return `${props.maxWidth}px`;
+  return props.maxWidth;
+});
+
+const resolvedMaxHeight = computed(() => {
+  if (props.maxHeight) {
+    return typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
+  }
+  return "85vh";
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen || closing"
+      class="cynx-modal-backdrop"
+      :style="{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(20, 22, 41, .45)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 8000,
+        padding: '20px',
+        animation: `${closing ? 'cynxModalFadeOut' : 'cynxModalFadeIn'} .26s ease forwards`,
+      }"
+      @mousedown.self="close"
+    >
+      <div
+        class="cynx-modal-card"
+        :style="{
+          background: 'var(--surface, #ffffff)',
+          border: '1px solid var(--border, #e2e8f0)',
+          borderRadius: '14px',
+          width: '100%',
+          maxWidth: resolvedMaxWidth,
+          maxHeight: resolvedMaxHeight,
+          boxShadow: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .25))',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          animation: `${closing ? 'cynxModalCardOut' : 'cynxModalCardIn'} .26s cubic-bezier(.4, 0, .2, 1) forwards`,
+          ...style,
+        }"
+        @mousedown.stop
+      >
+        <!-- Modal Header -->
+        <div
+          class="cynx-modal-hdr"
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '15px 20px',
+            borderBottom: '1px solid var(--border-light, #ebebf0)',
+            borderRadius: '14px 14px 0 0',
+            flexShrink: 0,
+          }"
+        >
+          <slot name="header">
+            <span
+              class="cynx-modal-title"
+              :style="{
+                fontSize: '.95rem',
+                fontWeight: 700,
+                letterSpacing: '-.01em',
+                color: 'var(--t, var(--primary-text, #0f111c))',
+              }"
+            >
+              {{ title }}
+            </span>
+          </slot>
+
+          <button
+            v-if="showClose"
+            type="button"
+            class="cynx-modal-close"
+            :style="{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '4px',
+              borderRadius: '6px',
+              color: 'var(--muted, #797b8d)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all .14s',
+            }"
+            @click="close"
+          >
+            <X :size="16" />
+          </button>
+        </div>
+
+        <!-- Modal Body -->
+        <div
+          class="cynx-modal-body custom-scrollbar"
+          :style="{
+            padding: '20px',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            flex: '1 1 auto',
+            minHeight: 0,
+            color: 'var(--t, var(--primary-text, #0f111c))',
+            ...bodyStyle,
+          }"
+        >
+          <slot />
+        </div>
+
+        <!-- Modal Footer -->
+        <div
+          v-if="$slots.footer"
+          class="cynx-modal-footer"
+          :style="{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '8px',
+            padding: '13px 20px',
+            borderTop: '1px solid var(--border-light, #ebebf0)',
+            background: 'var(--grey-1, #f5f5f8)',
+            borderRadius: '0 0 14px 14px',
+            flexShrink: 0,
+          }"
+        >
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>