nexa-ui-kit 0.7.10 → 0.8.0

package/src/components/NModal.nexa

@@ -1,226 +1,226 @@
-<script setup>
-import { signal, effect, onMounted, onUnmounted } from 'nexa-framework'
-
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  title: { type: String, default: '' },
-  size: { type: String, default: 'md' },
-  closable: { type: Boolean, default: true },
-  closeLeft: { type: Boolean, default: false }
-})
-
-const emit = defineEmits(['close'])
-
-const isVisible = signal(false)
-let modalEl = null
-let previousFocus = null
-const bodyOverflow = signal('')
-
-const setModalRef = (el) => { modalEl = el }
-
-const sizeMap = { sm: '400px', md: '500px', lg: '640px', xl: '800px', full: '96%' }
-
-effect(() => {
-  if (props.show) {
-    previousFocus = document.activeElement
-    isVisible.value = true
-    bodyOverflow.value = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-    requestAnimationFrame(() => {
-      if (modalEl) modalEl.focus()
-    })
-  } else {
-    setTimeout(() => {
-      isVisible.value = false
-      document.body.style.overflow = bodyOverflow.value
-      if (previousFocus && previousFocus.focus) {
-        try { previousFocus.focus() } catch {}
-      }
-    }, 250)
-  }
-})
-
-const close = () => {
-  if (!props.closable) return
-  emit('close')
-}
-
-const handleEsc = (e) => {
-  if (e.key === 'Escape' && props.show) close()
-}
-
-const handleOverlayClick = (e) => {
-  if (e.target === e.currentTarget) close()
-}
-
-const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-
-const handleKeydown = (e) => {
-  if (e.key !== 'Tab' || !modalEl) return
-  const focusable = modalEl.querySelectorAll(focusableSelector)
-  if (focusable.length === 0) {
-    e.preventDefault()
-    return
-  }
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-  if (e.shiftKey && document.activeElement === first) {
-    e.preventDefault()
-    last.focus()
-  } else if (!e.shiftKey && document.activeElement === last) {
-    e.preventDefault()
-    first.focus()
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleEsc)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleEsc)
-  document.body.style.overflow = ''
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <div v-if="isVisible.value" class="n-modal-root">
-      <div
-        class="n-modal-overlay"
-        :class="{ 'is-active': show }"
-        @click="handleOverlayClick"
-      ></div>
-      <div
-        :ref="setModalRef"
-        class="n-modal-container"
-        :class="{ 'is-active': show }"
-        :style="{ maxWidth: sizeMap[size] || size }"
-        tabindex="-1"
-        @keydown="handleKeydown"
-      >
-        <div v-if="title || $slots.header" class="n-modal-header" :class="{ 'close-left': closeLeft }">
-          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
-          <slot name="header">
-            <h3>{{ title }}</h3>
-          </slot>
-          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
-        </div>
-        <div class="n-modal-content">
-          <slot />
-        </div>
-        <div v-if="$slots.footer" class="n-modal-footer">
-          <slot name="footer" />
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.n-modal-root {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--n-z-modal);
-}
-
-.n-modal-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--n-color-overlay);
-  backdrop-filter: blur(8px);
-  opacity: 0;
-  transition: opacity 0.25s ease;
-}
-
-.n-modal-overlay.is-active {
-  opacity: 1;
-}
-
-.n-modal-container {
-  position: relative;
-  width: 90%;
-  background: var(--n-color-surface);
-  border: 1px solid var(--n-color-border);
-  border-radius: var(--n-radius-2xl);
-  box-shadow: var(--n-shadow-xl);
-  transform: scale(0.9) translateY(20px);
-  opacity: 0;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  overflow: hidden;
-  outline: none;
-  max-height: 85vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.n-modal-container.is-active {
-  transform: scale(1) translateY(0);
-  opacity: 1;
-}
-
-.n-modal-header {
-  padding: var(--n-space-6) var(--n-space-8);
-  border-bottom: 1px solid var(--n-color-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.n-modal-header h3 {
-  margin: 0;
-  font-size: var(--n-text-xl);
-  font-weight: var(--n-weight-bold);
-  color: var(--n-color-text);
-}
-
-.n-modal-close {
-  background: transparent;
-  border: none;
-  color: var(--n-color-text-secondary);
-  font-size: 1.75rem;
-  cursor: pointer;
-  transition: color var(--n-transition-fast);
-  padding: 0;
-  line-height: 1;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--n-radius-sm);
-}
-
-.n-modal-close:hover {
-  color: var(--n-color-text);
-  background: var(--n-color-glass);
-}
-
-.n-modal-content {
-  padding: var(--n-space-8);
-  color: var(--n-color-text-secondary);
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex: 1;
-}
-
-.n-modal-footer {
-  padding: var(--n-space-5) var(--n-space-8);
-  background: rgba(0, 0, 0, 0.15);
-  border-top: 1px solid var(--n-color-border);
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--n-space-4);
-  flex-shrink: 0;
-}
-</style>
+<script setup>
+import { signal, effect, onMounted, onUnmounted } from 'nexa-framework'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  size: { type: String, default: 'md' },
+  closable: { type: Boolean, default: true },
+  closeLeft: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['close'])
+
+const isVisible = signal(false)
+let modalEl = null
+let previousFocus = null
+const bodyOverflow = signal('')
+
+const setModalRef = (el) => { modalEl = el }
+
+const sizeMap = { sm: '400px', md: '500px', lg: '640px', xl: '800px', full: '96%' }
+
+effect(() => {
+  if (props.show) {
+    previousFocus = document.activeElement
+    isVisible.value = true
+    bodyOverflow.value = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    requestAnimationFrame(() => {
+      if (modalEl) modalEl.focus()
+    })
+  } else {
+    setTimeout(() => {
+      isVisible.value = false
+      document.body.style.overflow = bodyOverflow.value
+      if (previousFocus && previousFocus.focus) {
+        try { previousFocus.focus() } catch {}
+      }
+    }, 250)
+  }
+})
+
+const close = () => {
+  if (!props.closable) return
+  emit('close')
+}
+
+const handleEsc = (e) => {
+  if (e.key === 'Escape' && props.show) close()
+}
+
+const handleOverlayClick = (e) => {
+  if (e.target === e.currentTarget) close()
+}
+
+const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+const handleKeydown = (e) => {
+  if (e.key !== 'Tab' || !modalEl) return
+  const focusable = modalEl.querySelectorAll(focusableSelector)
+  if (focusable.length === 0) {
+    e.preventDefault()
+    return
+  }
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault()
+    last.focus()
+  } else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleEsc)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleEsc)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="isVisible.value" class="n-modal-root">
+      <div
+        class="n-modal-overlay"
+        :class="{ 'is-active': show }"
+        @click="handleOverlayClick"
+      ></div>
+      <div
+        :ref="setModalRef"
+        class="n-modal-container"
+        :class="{ 'is-active': show }"
+        :style="{ maxWidth: sizeMap[size] || size }"
+        tabindex="-1"
+        @keydown="handleKeydown"
+      >
+        <div v-if="title || $slots.header" class="n-modal-header" :class="{ 'close-left': closeLeft }">
+          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+          <slot name="header">
+            <h3>{{ title }}</h3>
+          </slot>
+          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+        </div>
+        <div class="n-modal-content">
+          <slot />
+        </div>
+        <div v-if="$slots.footer" class="n-modal-footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.n-modal-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--n-z-modal);
+}
+
+.n-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--n-color-overlay);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.n-modal-overlay.is-active {
+  opacity: 1;
+}
+
+.n-modal-container {
+  position: relative;
+  width: 90%;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-2xl);
+  box-shadow: var(--n-shadow-xl);
+  transform: scale(0.9) translateY(20px);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+  outline: none;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.n-modal-container.is-active {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.n-modal-header {
+  padding: var(--n-space-6) var(--n-space-8);
+  border-bottom: 1px solid var(--n-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.n-modal-header h3 {
+  margin: 0;
+  font-size: var(--n-text-xl);
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-text);
+}
+
+.n-modal-close {
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-secondary);
+  font-size: 1.75rem;
+  cursor: pointer;
+  transition: color var(--n-transition-fast);
+  padding: 0;
+  line-height: 1;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--n-radius-sm);
+}
+
+.n-modal-close:hover {
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-modal-content {
+  padding: var(--n-space-8);
+  color: var(--n-color-text-secondary);
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+}
+
+.n-modal-footer {
+  padding: var(--n-space-5) var(--n-space-8);
+  background: rgba(0, 0, 0, 0.15);
+  border-top: 1px solid var(--n-color-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--n-space-4);
+  flex-shrink: 0;
+}
+</style>