@fy-/fws-vue-core 3.0.4 → 3.0.6

package/src/components/ui/DefaultLoader.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+
+const props = withDefaults(
+  defineProps<{
+    image?: string
+    force?: boolean
+    id?: string
+  }>(),
+  {
+    image: '',
+    force: false,
+    id: '',
+  },
+)
+
+const eventBus = useEventBus()
+const loading = ref(false)
+
+const eventName = computed(() => props.id ? `${props.id}-loading` : 'loading')
+
+const setLoading = useDebounceFn((value: boolean) => {
+  loading.value = value
+}, 50)
+
+onMounted(() => { eventBus.on(eventName.value, setLoading) })
+onUnmounted(() => { eventBus.off(eventName.value, setLoading) })
+</script>
+
+<template>
+  <Transition
+    enter-active-class="fv-loader-enter-active"
+    enter-from-class="fv-loader-enter-from"
+    leave-active-class="fv-loader-leave-active"
+    leave-to-class="fv-loader-leave-to"
+  >
+    <div v-if="loading || force" class="fv-loader">
+      <div class="fv-loader__panel">
+        <img
+          v-if="image"
+          :src="image"
+          :alt="$t('global_loading')"
+          class="fv-loader__image"
+        >
+        <div v-else class="fv-loader__spinner" />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fv-loader {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Frosted glass overlay */
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(8px) saturate(1.1);
+  -webkit-backdrop-filter: blur(8px) saturate(1.1);
+}
+:is(.dark) .fv-loader {
+  background: rgba(10, 10, 10, 0.6);
+}
+
+.fv-loader__panel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 1rem;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.06) 0 8px 24px;
+}
+:is(.dark) .fv-loader__panel {
+  background: rgba(30, 30, 30, 0.9);
+  box-shadow: none;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.fv-loader__image {
+  width: 2.5rem;
+  height: 2.5rem;
+  animation: fv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Spinner fallback when no image */
+.fv-loader__spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  border-top-color: var(--color-fv-primary-600, #7c3aed);
+  border-radius: 50%;
+  animation: fv-spin 0.6s linear infinite;
+}
+:is(.dark) .fv-loader__spinner {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-top-color: var(--color-fv-primary-400, #a78bfa);
+}
+
+@keyframes fv-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(0.95); }
+}
+
+@keyframes fv-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Entry/exit */
+.fv-loader-enter-active { transition: opacity 200ms ease-out; }
+.fv-loader-leave-active { transition: opacity 150ms ease-in; }
+.fv-loader-enter-from, .fv-loader-leave-to { opacity: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .fv-loader__image { animation: none; }
+  .fv-loader__spinner { animation: none; border-top-color: var(--color-fv-primary-600, #7c3aed); }
+}
+</style>

package/src/components/ui/DefaultModal.vue

@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/24/solid'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
+import { computed, h, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import { ClientOnly } from '../ssr/ClientOnly'
+
+// Global modal registry for z-index stacking
+if (typeof window !== 'undefined') {
+  // @ts-expect-error: global registry
+  window.__FWS_MODAL_REGISTRY = window.__FWS_MODAL_REGISTRY || {
+    modals: new Map<string, number>(),
+    baseZ: 40,
+    maxZ: 59,
+    getNextZIndex() {
+      if (this.modals.size === 0) return this.baseZ
+      const highest = Math.max(...Array.from(this.modals.values()) as number[])
+      const next = highest + 1
+      if (next >= this.maxZ) {
+        this.resetAll()
+        return this.baseZ
+      }
+      return next
+    },
+    resetAll() {
+      const sorted = Array.from(this.modals.entries()).sort((a: any, b: any) => a[1] - b[1])
+      let z = this.baseZ
+      sorted.forEach(([id]: any) => { this.modals.set(id, z++) })
+    },
+  }
+}
+
+// @ts-expect-error: global registry
+const registry = typeof window !== 'undefined' ? window.__FWS_MODAL_REGISTRY : { modals: new Map() }
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    title?: string
+    onOpen?: Function
+    onClose?: Function
+    closeIcon?: object
+    mSize?: string
+    ofy?: string
+  }>(),
+  {
+    closeIcon: () => h(XMarkIcon),
+    mSize: 'w-full',
+    ofy: 'overflow-y-auto',
+  },
+)
+
+const eventBus = useEventBus()
+const isOpen = ref(false)
+const modalRef = shallowRef<HTMLElement | null>(null)
+const zIndex = ref(40)
+const modalUniqueId = shallowRef('')
+let previouslyFocusedElement: HTMLElement | null = null
+let focusableElements: HTMLElement[] = []
+
+const focusableSelector = 'a[href], button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), details, [tabindex]:not([tabindex="-1"])'
+
+const modalPanelClasses = computed(() =>
+  `fv-modal__panel ${props.mSize}`,
+)
+
+function getFocusableElements(el: HTMLElement): HTMLElement[] {
+  return Array.from(el.querySelectorAll(focusableSelector))
+    .filter(e => !e.hasAttribute('disabled') && !e.getAttribute('aria-hidden')) as HTMLElement[]
+}
+
+function isTopMost(id: string): boolean {
+  if (registry.modals.size === 0) return false
+  const entries = Array.from(registry.modals.entries())
+  const top = entries.reduce((prev: any, curr: any) => curr[1] > prev[1] ? curr : prev)
+  return top[0] === id
+}
+
+const handleKeyDown = useDebounceFn((event: KeyboardEvent) => {
+  if (!isOpen.value || !isTopMost(modalUniqueId.value)) return
+
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    setModal(false)
+    return
+  }
+
+  if (event.key === 'Tab' && focusableElements.length > 0) {
+    const first = focusableElements[0]
+    const last = focusableElements[focusableElements.length - 1]
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+}, 10)
+
+const setModal = useDebounceFn((value: boolean) => {
+  if (value) {
+    props.onOpen?.()
+    previouslyFocusedElement = document.activeElement as HTMLElement
+
+    const newZ = registry.getNextZIndex()
+    const uid = `${props.id}-${Date.now()}`
+    modalUniqueId.value = uid
+    registry.modals.set(uid, newZ)
+    zIndex.value = newZ
+
+    useEventListener(document, 'keydown', handleKeyDown)
+  } else {
+    props.onClose?.()
+    if (modalUniqueId.value) registry.modals.delete(modalUniqueId.value)
+    previouslyFocusedElement?.focus()
+  }
+  isOpen.value = value
+}, 50)
+
+watch(isOpen, async (open) => {
+  if (!open) return
+  await nextTick()
+  const el = modalRef.value
+  if (!el) return
+  focusableElements = getFocusableElements(el)
+  requestAnimationFrame(() => {
+    const close = el.querySelector('button[aria-label="Close modal"]') as HTMLElement
+    if (close) close.focus()
+    else if (focusableElements.length) focusableElements[0].focus()
+    else el.focus()
+  })
+})
+
+const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
+  if (event.target === event.currentTarget) setModal(false)
+}, 200)
+
+const modalEventName = `${props.id}Modal`
+onMounted(() => { eventBus.on(modalEventName, setModal) })
+onUnmounted(() => {
+  eventBus.off(modalEventName, setModal)
+  if (isOpen.value && modalUniqueId.value) registry.modals.delete(modalUniqueId.value)
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <Transition
+      enter-active-class="fv-modal-enter-active"
+      enter-from-class="fv-modal-enter-from"
+      leave-active-class="fv-modal-leave-active"
+      leave-to-class="fv-modal-leave-to"
+    >
+      <div
+        v-if="isOpen"
+        class="fv-modal"
+        :style="{ zIndex }"
+        role="dialog"
+        :aria-labelledby="title ? `${id}-title` : undefined"
+        aria-modal="true"
+        :data-modal-id="id"
+      >
+        <!-- Frosted glass backdrop -->
+        <div
+          class="fv-modal__backdrop"
+          :style="{ zIndex }"
+          @click="handleBackdropClick"
+        >
+          <!-- Panel -->
+          <div
+            ref="modalRef"
+            :class="modalPanelClasses"
+            :style="{ zIndex }"
+            tabindex="-1"
+            @click.stop
+          >
+            <!-- Header -->
+            <div v-if="title" class="fv-modal__header">
+              <slot name="before" />
+              <h2
+                :id="`${id}-title`"
+                class="fv-modal__title"
+                v-html="title"
+              />
+              <button
+                class="fv-modal__close"
+                aria-label="Close modal"
+                @click="setModal(false)"
+              >
+                <component :is="closeIcon" class="w-5 h-5" />
+              </button>
+            </div>
+
+            <!-- Content -->
+            <div :class="`fv-modal__content ${ofy}`">
+              <slot />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </ClientOnly>
+</template>
+
+<style scoped>
+/* ═══ Modal — Glass backdrop, Vercel shadow-as-border panel ═══ */
+.fv-modal {
+  position: fixed;
+  inset: 0;
+}
+
+.fv-modal__backdrop {
+  display: flex;
+  position: fixed;
+  inset: 0;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+  overflow-y: auto;
+
+  /* Linear: near-opaque backdrop for extreme content focus */
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px) saturate(1.1);
+  -webkit-backdrop-filter: blur(8px) saturate(1.1);
+}
+@media (min-width: 768px) {
+  .fv-modal__backdrop { padding: 2rem 1rem; }
+}
+
+:is(.dark) .fv-modal__backdrop {
+  background: rgba(0, 0, 0, 0.85);
+}
+
+.fv-modal__panel {
+  position: relative;
+  max-width: min(calc(100vw - 2rem), 72rem);
+  max-height: 85vh;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.75rem;
+
+  /* Stripe: blue-tinted parallax depth shadows + Vercel shadow-as-border */
+  background: #ffffff;
+  box-shadow:
+    rgba(0, 0, 0, 0.08) 0 0 0 1px,
+    rgba(50, 50, 93, 0.25) 0px 30px 45px -30px,
+    rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
+}
+
+:is(.dark) .fv-modal__panel {
+  background: #1a1a1e;
+  box-shadow: none;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.fv-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  flex-shrink: 0;
+}
+:is(.dark) .fv-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.fv-modal__title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #171717;
+  flex: 1;
+  min-width: 0;
+}
+@media (min-width: 768px) {
+  .fv-modal__title { font-size: 1.125rem; }
+}
+:is(.dark) .fv-modal__title { color: #f5f5f5; }
+
+.fv-modal__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  color: #a3a3a3;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 150ms, background-color 150ms;
+}
+.fv-modal__close:hover {
+  color: #525252;
+  background: rgba(0, 0, 0, 0.05);
+}
+:is(.dark) .fv-modal__close:hover {
+  color: #e5e5e5;
+  background: rgba(255, 255, 255, 0.08);
+}
+.fv-modal__close:focus-visible {
+  outline: 2px solid var(--color-fv-primary-400, #a78bfa);
+  outline-offset: -2px;
+}
+
+.fv-modal__content {
+  padding: 1rem;
+  flex-grow: 1;
+}
+@media (min-width: 768px) {
+  .fv-modal__content { padding: 1.25rem; }
+}
+
+/* ═══ Entrance/exit — scale + fade (Apple/Linear pattern) ═══ */
+.fv-modal-enter-active {
+  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.fv-modal-enter-active .fv-modal__panel {
+  animation: fv-modal-scale-in 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.fv-modal-leave-active {
+  transition: opacity 150ms ease-in;
+}
+.fv-modal-leave-active .fv-modal__panel {
+  animation: fv-modal-scale-out 150ms ease-in both;
+}
+.fv-modal-enter-from,
+.fv-modal-leave-to {
+  opacity: 0;
+}
+
+@keyframes fv-modal-scale-in {
+  from { transform: scale(0.95) translateY(0.5rem); opacity: 0; }
+  to { transform: scale(1) translateY(0); opacity: 1; }
+}
+@keyframes fv-modal-scale-out {
+  from { transform: scale(1); opacity: 1; }
+  to { transform: scale(0.97); opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fv-modal-enter-active,
+  .fv-modal-leave-active { transition: opacity 100ms; }
+  .fv-modal-enter-active .fv-modal__panel,
+  .fv-modal-leave-active .fv-modal__panel { animation: none; }
+}
+</style>