@sakoa/ui 0.1.0

package/registry/source/components/ui/toast/SToast.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
+import { cn } from '../../../lib/utils'
+import type { ToastType, ToastOptions } from '../../../composables/useToast'
+import { dismissToast, pauseToast, resumeToast } from '../../../composables/useToast'
+import SIcon from '../SIcon.vue'
+
+export interface Props {
+  /** Unique toast ID */
+  id: string
+  /** Toast type */
+  type: ToastType
+  /** Toast title */
+  title?: string
+  /** Toast description */
+  description?: string
+  /** Duration in ms (for display purposes) */
+  duration?: number
+  /** Show progress bar */
+  showProgress?: boolean
+  /** Show close button */
+  closable?: boolean
+  /** Icon name or false to hide */
+  icon?: string | boolean
+  /** Custom color for custom type */
+  color?: string
+  /** Progress percentage (0-100) */
+  progress?: number
+  /** Whether toast is paused */
+  paused?: boolean
+  /** Custom component to render */
+  component?: object
+  /** Props for custom component */
+  componentProps?: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  description: undefined,
+  duration: 5000,
+  showProgress: true,
+  closable: true,
+  icon: undefined,
+  color: undefined,
+  progress: 100,
+  paused: false,
+  component: undefined,
+  componentProps: undefined
+})
+
+const emit = defineEmits<{
+  close: []
+  click: []
+}>()
+
+// Hover state for pause/resume
+const isHovering = ref(false)
+
+const handleMouseEnter = () => {
+  isHovering.value = true
+  pauseToast(props.id)
+}
+
+const handleMouseLeave = () => {
+  isHovering.value = false
+  resumeToast(props.id)
+}
+
+const handleClose = () => {
+  dismissToast(props.id)
+  emit('close')
+}
+
+const handleClick = () => {
+  emit('click')
+}
+
+// Type-based styling
+const typeConfig = computed(() => {
+  const configs: Record<ToastType, { 
+    bg: string
+    border: string
+    text: string
+    icon: string
+    iconColor: string
+    progress: string
+  }> = {
+    success: {
+      bg: 'bg-emerald-50 dark:bg-emerald-950/80',
+      border: 'border-emerald-200 dark:border-emerald-800',
+      text: 'text-emerald-800 dark:text-emerald-200',
+      icon: 'check-circle',
+      iconColor: 'text-emerald-600 dark:text-emerald-400',
+      progress: 'bg-emerald-500'
+    },
+    error: {
+      bg: 'bg-red-50 dark:bg-red-950/80',
+      border: 'border-red-200 dark:border-red-800',
+      text: 'text-red-800 dark:text-red-200',
+      icon: 'alert-circle',
+      iconColor: 'text-red-600 dark:text-red-400',
+      progress: 'bg-red-500'
+    },
+    warning: {
+      bg: 'bg-amber-50 dark:bg-amber-950/80',
+      border: 'border-amber-200 dark:border-amber-800',
+      text: 'text-amber-800 dark:text-amber-200',
+      icon: 'alert',
+      iconColor: 'text-amber-600 dark:text-amber-400',
+      progress: 'bg-amber-500'
+    },
+    info: {
+      bg: 'bg-blue-50 dark:bg-blue-950/80',
+      border: 'border-blue-200 dark:border-blue-800',
+      text: 'text-blue-800 dark:text-blue-200',
+      icon: 'information',
+      iconColor: 'text-blue-600 dark:text-blue-400',
+      progress: 'bg-blue-500'
+    },
+    loading: {
+      bg: 'bg-slate-50 dark:bg-slate-900/80',
+      border: 'border-slate-200 dark:border-slate-700',
+      text: 'text-slate-800 dark:text-slate-200',
+      icon: 'loading',
+      iconColor: 'text-slate-600 dark:text-slate-400',
+      progress: 'bg-slate-500'
+    },
+    custom: {
+      bg: 'bg-muted',
+      border: 'border-border',
+      text: 'text-foreground',
+      icon: 'bell',
+      iconColor: 'text-muted-foreground',
+      progress: 'bg-primary'
+    }
+  }
+  return configs[props.type]
+})
+
+const displayIcon = computed(() => {
+  if (props.icon === false) return null
+  if (typeof props.icon === 'string') return props.icon
+  return typeConfig.value.icon
+})
+
+const customStyle = computed(() => {
+  if (props.type === 'custom' && props.color) {
+    return {
+      '--toast-color': props.color,
+      borderLeftColor: props.color
+    }
+  }
+  return {}
+})
+
+const isLoading = computed(() => props.type === 'loading')
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(
+      's-toast relative flex items-start gap-3 p-4 rounded-xl border shadow-lg backdrop-blur-sm min-w-[320px] max-w-[420px] cursor-pointer transition-all duration-200',
+      typeConfig.bg,
+      typeConfig.border,
+      typeConfig.text,
+      !isLoading && 'hover:scale-[1.02]',
+      $attrs.class ?? ''
+    )"
+    :style="customStyle"
+    role="alert"
+    aria-live="polite"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+  >
+    <!-- Icon -->
+    <div 
+      v-if="displayIcon" 
+      class="flex-shrink-0 mt-0.5"
+      :class="typeConfig.iconColor"
+    >
+      <SIcon 
+        :name="displayIcon" 
+        :class="{ 'animate-spin': isLoading }"
+        size="20"
+      />
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 min-w-0">
+      <!-- Custom component -->
+      <component
+        v-if="component"
+        :is="component"
+        v-bind="componentProps"
+      />
+      
+      <!-- Default content -->
+      <template v-else>
+        <p 
+          v-if="title" 
+          class="font-semibold text-sm leading-tight"
+          :class="typeConfig.text"
+        >
+          {{ title }}
+        </p>
+        <p 
+          v-if="description" 
+          class="text-sm opacity-90 mt-0.5"
+          :class="{ 'mt-1': title }"
+        >
+          {{ description }}
+        </p>
+      </template>
+    </div>
+
+    <!-- Close button -->
+    <button
+      v-if="closable && !isLoading"
+      type="button"
+      class="flex-shrink-0 p-1 -m-1 rounded-lg opacity-60 hover:opacity-100 transition-opacity"
+      :class="typeConfig.iconColor"
+      aria-label="Dismiss"
+      @click.stop="handleClose"
+    >
+      <SIcon name="close" size="16" />
+    </button>
+
+    <!-- Progress bar -->
+    <div 
+      v-if="showProgress && duration > 0 && !isLoading"
+      class="absolute bottom-0 left-0 right-0 h-1 rounded-b-xl overflow-hidden"
+    >
+      <div 
+        class="h-full transition-all duration-100 ease-linear"
+        :class="typeConfig.progress"
+        :style="{ width: `${progress}%` }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-toast {
+  animation: toast-enter 0.3s ease-out;
+}
+
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+</style>

package/registry/source/components/ui/toast/SToastContainer.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { computed, Teleport, TransitionGroup } from 'vue'
+import { getToasts, getToastConfig, type ToastPosition } from '../../../composables/useToast'
+import SToast from './SToast.vue'
+
+export interface Props {
+  /** Position to render toasts (defaults to global config) */
+  position?: ToastPosition
+  /** Maximum toasts to show (defaults to global config) */
+  maxToasts?: number
+  /** Gap between toasts in px */
+  gap?: number
+  /** Teleport target */
+  teleport?: boolean | string
+  /** Z-index for the container */
+  zIndex?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: undefined,
+  maxToasts: undefined,
+  gap: undefined,
+  teleport: true,
+  zIndex: 9999
+})
+
+const toasts = getToasts()
+const config = getToastConfig()
+
+const effectivePosition = computed(() => props.position ?? config.position)
+const effectiveMaxToasts = computed(() => props.maxToasts ?? config.maxToasts)
+const effectiveGap = computed(() => props.gap ?? config.gap)
+
+// Filter toasts for this position
+const positionToasts = computed(() => {
+  const filtered = toasts.value.filter(t => {
+    const toastPosition = t.options.position ?? config.position
+    return toastPosition === effectivePosition.value
+  })
+  
+  // Limit to max toasts
+  return filtered.slice(0, effectiveMaxToasts.value)
+})
+
+// Position classes
+const positionClasses = computed(() => {
+  const classes: Record<ToastPosition, string> = {
+    'top-left': 'top-4 left-4 items-start',
+    'top-right': 'top-4 right-4 items-end',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
+    'bottom-left': 'bottom-4 left-4 items-start',
+    'bottom-right': 'bottom-4 right-4 items-end',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center'
+  }
+  return classes[effectivePosition.value]
+})
+
+// Stack direction (bottom positions stack upward)
+const isBottomPosition = computed(() => 
+  effectivePosition.value.startsWith('bottom')
+)
+
+const teleportTarget = computed(() => {
+  if (props.teleport === true) return 'body'
+  if (typeof props.teleport === 'string') return props.teleport
+  return undefined
+})
+</script>
+
+<template>
+  <Teleport v-if="teleportTarget" :to="teleportTarget" :disabled="!teleportTarget">
+    <div
+      v-if="positionToasts.length > 0"
+      v-bind="$attrs"
+      class="s-toast-container fixed flex flex-col pointer-events-none"
+      :class="[positionClasses, isBottomPosition ? 'flex-col-reverse' : 'flex-col']"
+      :style="{ 
+        zIndex,
+        gap: `${effectiveGap}px`
+      }"
+      role="region"
+      aria-label="Notifications"
+      aria-live="polite"
+    >
+      <TransitionGroup
+        :name="isBottomPosition ? 'toast-bottom' : 'toast-top'"
+        tag="div"
+        class="flex flex-col"
+        :class="[isBottomPosition ? 'flex-col-reverse' : 'flex-col']"
+        :style="{ gap: `${effectiveGap}px` }"
+      >
+        <div
+          v-for="toast in positionToasts"
+          :key="toast.id"
+          class="pointer-events-auto"
+        >
+          <SToast
+            :id="toast.id"
+            :type="toast.type"
+            :title="toast.options.title"
+            :description="toast.options.description"
+            :duration="toast.options.duration"
+            :show-progress="toast.options.showProgress"
+            :closable="toast.options.closable"
+            :icon="toast.options.icon"
+            :color="toast.options.color"
+            :progress="toast.progress"
+            :paused="toast.paused"
+            :component="toast.options.component"
+            :component-props="toast.options.componentProps"
+            @click="toast.options.onClick?.()"
+          />
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+
+  <!-- Non-teleported fallback -->
+  <template v-else>
+    <div
+      v-if="positionToasts.length > 0"
+      v-bind="$attrs"
+      class="s-toast-container fixed flex flex-col pointer-events-none"
+      :class="[positionClasses, isBottomPosition ? 'flex-col-reverse' : 'flex-col']"
+      :style="{ 
+        zIndex,
+        gap: `${effectiveGap}px`
+      }"
+      role="region"
+      aria-label="Notifications"
+      aria-live="polite"
+    >
+      <TransitionGroup
+        :name="isBottomPosition ? 'toast-bottom' : 'toast-top'"
+        tag="div"
+        class="flex flex-col"
+        :class="[isBottomPosition ? 'flex-col-reverse' : 'flex-col']"
+        :style="{ gap: `${effectiveGap}px` }"
+      >
+        <div
+          v-for="toast in positionToasts"
+          :key="toast.id"
+          class="pointer-events-auto"
+        >
+          <SToast
+            :id="toast.id"
+            :type="toast.type"
+            :title="toast.options.title"
+            :description="toast.options.description"
+            :duration="toast.options.duration"
+            :show-progress="toast.options.showProgress"
+            :closable="toast.options.closable"
+            :icon="toast.options.icon"
+            :color="toast.options.color"
+            :progress="toast.progress"
+            :paused="toast.paused"
+            :component="toast.options.component"
+            :component-props="toast.options.componentProps"
+            @click="toast.options.onClick?.()"
+          />
+        </div>
+      </TransitionGroup>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+/* Top position transitions */
+.toast-top-enter-active,
+.toast-top-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-top-enter-from {
+  opacity: 0;
+  transform: translateY(-20px) scale(0.95);
+}
+
+.toast-top-leave-to {
+  opacity: 0;
+  transform: translateX(100%) scale(0.95);
+}
+
+.toast-top-move {
+  transition: transform 0.3s ease;
+}
+
+/* Bottom position transitions */
+.toast-bottom-enter-active,
+.toast-bottom-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+
+.toast-bottom-leave-to {
+  opacity: 0;
+  transform: translateX(100%) scale(0.95);
+}
+
+.toast-bottom-move {
+  transition: transform 0.3s ease;
+}
+</style>

package/registry/source/components/ui/toast/index.ts

@@ -0,0 +1,2 @@
+export { default as SToast } from './SToast.vue'
+export { default as SToastContainer } from './SToastContainer.vue'