@fy-/fws-vue-core 3.0.3 → 3.0.5

package/src/components/ui/DefaultNotif.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  SparklesIcon,
+  XMarkIcon,
+} from '@heroicons/vue/24/solid'
+import { useDebounceFn, useRafFn } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref, shallowRef } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+
+interface NotifProps {
+  imgSrc?: string
+  imgIcon?: Component
+  title: string
+  content?: string
+  ctaText?: string
+  ctaLink?: string
+  ctaAction?: () => void
+  type?: 'info' | 'warning' | 'success' | 'secret'
+  time?: number
+}
+
+const eventBus = useEventBus()
+const currentNotif = shallowRef<NotifProps | null>(null)
+const progress = ref(0)
+const isPaused = ref(false)
+
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+let rafStop: Function | null = null
+
+// Accent colors per type — left stripe + icon + progress
+const typeAccent = {
+  info: { stripe: '#3b82f6', icon: InformationCircleIcon },
+  success: { stripe: '#22c55e', icon: CheckCircleIcon },
+  warning: { stripe: '#f59e0b', icon: ExclamationTriangleIcon },
+  secret: { stripe: '#a855f7', icon: SparklesIcon },
+}
+
+function hideNotif() {
+  currentNotif.value = null
+  progress.value = 0
+  isPaused.value = false
+  if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout = null }
+  if (rafStop) { rafStop(); rafStop = null }
+}
+
+const onCall = useDebounceFn((data: NotifProps) => {
+  hideNotif()
+  const type = data.type || 'info'
+  if (!data.imgIcon) data.imgIcon = typeAccent[type].icon
+  currentNotif.value = { ...data, time: data.time || 3000 }
+  hideTimeout = setTimeout(() => hideNotif(), currentNotif.value.time)
+  progress.value = 0
+  const startTime = performance.now()
+  const duration = Number(currentNotif.value.time)
+  const { pause } = useRafFn((timestamp) => {
+    if (isPaused.value) return
+    const elapsed = timestamp.timestamp - startTime
+    progress.value = Math.min(100, (elapsed / duration) * 100)
+    if (progress.value >= 100) hideNotif()
+  })
+  rafStop = pause
+}, 50)
+
+function pauseTimer() {
+  isPaused.value = true
+  if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout = null }
+}
+
+function resumeTimer() {
+  if (!currentNotif.value) return
+  isPaused.value = false
+  const remainingTime = currentNotif.value.time
+    ? Math.max(currentNotif.value.time * (1 - progress.value / 100), 500)
+    : 2000
+  hideTimeout = setTimeout(() => hideNotif(), remainingTime)
+}
+
+const handleCtaClick = useDebounceFn(() => {
+  if (currentNotif.value?.ctaAction) currentNotif.value.ctaAction()
+}, 300)
+
+const accentColor = computed(() => {
+  if (!currentNotif.value) return '#3b82f6'
+  return typeAccent[currentNotif.value.type || 'info'].stripe
+})
+
+onMounted(() => { eventBus.on('SendNotif', onCall) })
+onUnmounted(() => { eventBus.off('SendNotif', onCall); hideNotif() })
+</script>
+
+<template>
+  <Transition
+    enter-active-class="notif-enter-active"
+    enter-from-class="notif-enter-from"
+    leave-active-class="notif-leave-active"
+    leave-to-class="notif-leave-to"
+  >
+    <div
+      v-if="currentNotif !== null"
+      class="fv-notif"
+      role="alert"
+      @mouseenter="pauseTimer"
+      @mouseleave="resumeTimer"
+    >
+      <!-- Left accent stripe -->
+      <div class="fv-notif__stripe" :style="{ backgroundColor: accentColor }" />
+
+      <!-- Content -->
+      <div class="fv-notif__body">
+        <div class="fv-notif__header">
+          <div class="fv-notif__icon" :style="{ color: accentColor }">
+            <img
+              v-if="currentNotif.imgSrc"
+              class="w-4 h-4 rounded-full"
+              :src="currentNotif.imgSrc"
+              :alt="currentNotif.title"
+            >
+            <component
+              :is="currentNotif.imgIcon"
+              v-else
+              class="w-4 h-4"
+              aria-hidden="true"
+            />
+          </div>
+          <h3 class="fv-notif__title" v-text="currentNotif.title" />
+          <button
+            type="button"
+            class="fv-notif__close"
+            aria-label="Close notification"
+            @click="hideNotif"
+          >
+            <XMarkIcon class="w-3.5 h-3.5" aria-hidden="true" />
+          </button>
+        </div>
+
+        <div
+          v-if="currentNotif.content"
+          class="fv-notif__content"
+          v-html="currentNotif.content"
+        />
+
+        <div
+          v-if="currentNotif.ctaText || currentNotif.ctaLink || currentNotif.ctaAction"
+          class="fv-notif__actions"
+        >
+          <a
+            v-if="currentNotif.ctaLink"
+            :href="currentNotif.ctaLink"
+            class="fv-notif__cta"
+            :style="{ color: accentColor }"
+          >
+            {{ currentNotif.ctaText || $t("action_cta") }}
+          </a>
+          <button
+            v-else-if="currentNotif.ctaAction"
+            type="button"
+            class="fv-notif__cta"
+            :style="{ color: accentColor }"
+            @click="handleCtaClick"
+          >
+            {{ currentNotif.ctaText || $t("action_cta") }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Bottom progress -->
+      <div class="fv-notif__progress-track">
+        <div
+          class="fv-notif__progress-bar"
+          :style="{ width: `${progress}%`, backgroundColor: accentColor }"
+        />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+/* ═══ Glass notification — Framer/Linear inspired ═══ */
+.fv-notif {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 2000;
+  width: min(22rem, calc(100vw - 2rem));
+  display: flex;
+  overflow: hidden;
+  border-radius: 0.75rem;
+
+  /* Glass effect — Framer: blur + saturate */
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px) saturate(1.3);
+  -webkit-backdrop-filter: blur(20px) saturate(1.3);
+
+  /* Vercel shadow-as-border + elevation */
+  box-shadow:
+    rgba(0, 0, 0, 0.08) 0 0 0 1px,
+    rgba(0, 0, 0, 0.04) 0 4px 6px,
+    rgba(0, 0, 0, 0.02) 0 12px 24px;
+}
+
+/* Dark: luminance border (Linear) */
+:is(.dark) .fv-notif {
+  background: rgba(24, 24, 27, 0.88);
+  backdrop-filter: blur(24px) saturate(1.2);
+  -webkit-backdrop-filter: blur(24px) saturate(1.2);
+  box-shadow: none;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.fv-notif__stripe {
+  width: 3px;
+  flex-shrink: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+.fv-notif__body {
+  flex: 1;
+  padding: 0.75rem 0.75rem 0.5rem;
+  min-width: 0;
+}
+
+.fv-notif__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.fv-notif__icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.fv-notif__title {
+  flex: 1;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: #171717;
+  min-width: 0;
+  word-break: break-word;
+}
+:is(.dark) .fv-notif__title { color: #f5f5f5; }
+
+.fv-notif__close {
+  flex-shrink: 0;
+  padding: 2px;
+  border-radius: 0.25rem;
+  color: #a3a3a3;
+  cursor: pointer;
+  transition: color 150ms, background-color 150ms;
+  border: none;
+  background: none;
+}
+.fv-notif__close:hover {
+  color: #525252;
+  background: rgba(0, 0, 0, 0.05);
+}
+:is(.dark) .fv-notif__close:hover {
+  color: #e5e5e5;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.fv-notif__content {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: #737373;
+}
+:is(.dark) .fv-notif__content { color: #a3a3a3; }
+
+.fv-notif__actions {
+  margin-top: 0.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fv-notif__cta {
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  transition: opacity 150ms;
+}
+.fv-notif__cta:hover { opacity: 0.7; }
+
+.fv-notif__progress-track {
+  position: absolute;
+  bottom: 0;
+  left: 3px; /* offset for stripe */
+  right: 0;
+  height: 2px;
+  background: rgba(0, 0, 0, 0.05);
+}
+:is(.dark) .fv-notif__progress-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.fv-notif__progress-bar {
+  height: 100%;
+  transition: width 100ms linear;
+  border-radius: 0 0 2px 0;
+}
+
+/* ═══ Entrance/Exit — smooth slide-up + fade (not harsh slide-right) ═══ */
+.notif-enter-active {
+  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease-out;
+}
+.notif-leave-active {
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 150ms ease-in;
+}
+.notif-enter-from {
+  transform: translateY(1rem) scale(0.96);
+  opacity: 0;
+}
+.notif-leave-to {
+  transform: translateY(-0.5rem) scale(0.98);
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notif-enter-active,
+  .notif-leave-active { transition: opacity 100ms; }
+  .notif-enter-from,
+  .notif-leave-to { transform: none; }
+}
+</style>