snice 1.14.3 → 2.1.0

package/components/toast/snice-toast.css

@@ -0,0 +1,213 @@
+/* Toast Container */
+:host {
+  position: fixed;
+  z-index: var(--snice-z-index-tooltip);
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--snice-spacing-sm);
+  padding: var(--snice-spacing-md);
+}
+
+/* Position variants */
+:host([position="top-left"]) {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+:host([position="top-center"]) {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+:host([position="top-right"]) {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+:host([position="bottom-left"]) {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+:host([position="bottom-center"]) {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+:host([position="bottom-right"]) {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+/* Toast Item */
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--snice-spacing-sm);
+  min-width: 12.5rem; /* 200px */
+  max-width: 20rem; /* 320px */
+  padding: var(--snice-spacing-sm) var(--snice-spacing-md);
+  border-radius: var(--snice-border-radius-lg);
+  box-shadow: var(--snice-shadow-lg);
+  font-family: var(--snice-font-family);
+  font-size: var(--snice-font-size-sm);
+  line-height: var(--snice-line-height-normal);
+  animation: slideIn var(--snice-transition-medium) ease-out;
+  transition: all var(--snice-transition-medium) ease;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.toast.toast--hiding {
+  animation: slideOut 0.3s ease-out;
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+/* Type variants */
+.toast--success {
+  background-color: var(--snice-color-success);
+  color: var(--snice-color-text-inverse);
+}
+
+.toast--error {
+  background-color: var(--snice-color-danger);
+  color: var(--snice-color-text-inverse);
+}
+
+.toast--warning {
+  background-color: var(--snice-color-warning);
+  color: var(--snice-color-text-inverse);
+}
+
+.toast--info {
+  background-color: var(--snice-color-primary);
+  color: var(--snice-color-text-inverse);
+}
+
+/* Toast icon */
+.toast-icon {
+  flex-shrink: 0;
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* Toast content */
+.toast-content {
+  flex: 1;
+  word-wrap: break-word;
+}
+
+/* Close button */
+.toast-close {
+  flex-shrink: 0;
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--snice-transition-fast);
+  background: none;
+  border: none;
+  color: inherit;
+  padding: 0;
+}
+
+.toast-close:hover {
+  opacity: 1;
+}
+
+.toast-close svg {
+  width: 0.875rem; /* 14px */
+  height: 0.875rem; /* 14px */
+  fill: currentColor;
+}
+
+/* Animations - Pop up like toast */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+/* For top-positioned toasts - slide down */
+:host([position^="top"]) .toast {
+  animation: slideInTop var(--snice-transition-medium) ease-out;
+}
+
+:host([position^="top"]) .toast.toast--hiding {
+  animation: slideOutTop var(--snice-transition-medium) ease-out;
+  transform: translateY(-100%);
+}
+
+@keyframes slideInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutTop {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+/* Progress bar for auto-dismiss */
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 0.1875rem; /* 3px */
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 0 0 var(--snice-toast-border-radius) var(--snice-toast-border-radius);
+  transition: width linear;
+}

package/components/toast/snice-toast.ts

@@ -0,0 +1,276 @@
+import { element, property, query, on, watch, dispatch } from 'snice';
+import type { ToastType, SniceToastElement } from './snice-toast.types';
+
+@element('snice-toast')
+export class SniceToast extends HTMLElement implements SniceToastElement {
+  @property({ reflect: true })
+  type: ToastType = 'info';
+
+  @property({ reflect: true })
+  message: string = '';
+
+  @property({ type: Boolean, reflect: true })
+  closable: boolean = true;
+
+  @property({ type: Boolean, reflect: true })
+  icon: boolean = true;
+
+  @query('.toast')
+  toastElement?: HTMLElement;
+
+  @query('.toast-icon')
+  iconElement?: HTMLElement;
+
+  @query('.toast-content')
+  contentElement?: HTMLElement;
+
+  @query('.toast-close')
+  closeButton?: HTMLElement;
+
+  html() {
+    return /*html*/`
+      <div class="toast toast--${this.type}" role="alert" aria-live="polite">
+        <span class="toast-icon">${this.getIcon(this.type)}</span>
+        <span class="toast-content">${this.message}</span>
+        <button class="toast-close" aria-label="Close">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+            <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+
+  css() {
+    return /*css*/`
+      :host {
+        pointer-events: auto;
+        display: block;
+        animation: slideIn 0.3s ease-out;
+      }
+
+      .toast {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 200px;
+        max-width: 320px;
+        padding: 12px 16px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        font-family: system-ui, -apple-system, sans-serif;
+        font-size: 14px;
+        line-height: 1.5;
+        transition: all 0.3s ease;
+      }
+
+      .toast--success {
+        background-color: #10b981;
+        color: white;
+      }
+
+      .toast--error {
+        background-color: #ef4444;
+        color: white;
+      }
+
+      .toast--warning {
+        background-color: #f59e0b;
+        color: white;
+      }
+
+      .toast--info {
+        background-color: #3b82f6;
+        color: white;
+      }
+
+      .toast-icon {
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .toast-icon[hidden] {
+        display: none;
+      }
+
+      .toast-icon svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+      }
+
+      .toast-content {
+        flex: 1;
+        word-wrap: break-word;
+      }
+
+      .toast-close {
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+        background: none;
+        border: none;
+        color: inherit;
+        padding: 0;
+      }
+
+      .toast-close[hidden] {
+        display: none;
+      }
+
+      .toast-close:hover {
+        opacity: 1;
+      }
+
+      /* Animations */
+      @keyframes slideIn {
+        from {
+          opacity: 0;
+          transform: translateY(100%);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      :host(.hiding) {
+        animation: slideOut 0.3s ease-out;
+      }
+
+      @keyframes slideOut {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(100%);
+        }
+      }
+
+      /* For top-positioned container - slide down */
+      :host-context(snice-toast-container[position^="top"]) {
+        animation: slideInTop 0.3s ease-out;
+      }
+
+      :host-context(snice-toast-container[position^="top"]):host(.hiding) {
+        animation: slideOutTop 0.3s ease-out;
+      }
+
+      @keyframes slideInTop {
+        from {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes slideOutTop {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+    `;
+  }
+
+  // Helper function to hide/show elements
+  private setHidden(selector: string, hide: boolean): void {
+    const element = this.shadowRoot?.querySelector(selector) as HTMLElement;
+    if (element) {
+      if (hide) {
+        element.setAttribute('hidden', '');
+      } else {
+        element.removeAttribute('hidden');
+      }
+    }
+  }
+
+  @watch('type')
+  updateType() {
+    if (this.toastElement) {
+      // Remove old type class
+      this.toastElement.className = this.toastElement.className.replace(/toast--\w+/, '');
+      // Add new type class
+      this.toastElement.classList.add(`toast--${this.type}`);
+    }
+    // Update icon
+    if (this.iconElement) {
+      this.iconElement.innerHTML = this.getIcon(this.type);
+    }
+  }
+
+  @watch('message')
+  updateMessage() {
+    if (this.contentElement) {
+      this.contentElement.textContent = this.message;
+    }
+  }
+
+  @watch('closable')
+  updateClosable() {
+    this.setHidden('.toast-close', !this.closable);
+  }
+
+  @watch('icon')
+  updateIcon() {
+    this.setHidden('.toast-icon', !this.icon);
+  }
+
+  @on('click', '.toast-close')
+  @dispatch('close-toast')
+  handleClose() {
+    return { id: this.getAttribute('toast-id') };
+  }
+
+  hide() {
+    this.classList.add('hiding');
+  }
+
+  private getIcon(type: ToastType): string {
+    switch (type) {
+      case 'success':
+        return `<svg viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+        </svg>`;
+      
+      case 'error':
+        return `<svg viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM10 7a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
+        </svg>`;
+      
+      case 'warning':
+        return `<svg viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+        </svg>`;
+      
+      case 'info':
+      default:
+        return `<svg viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
+        </svg>`;
+    }
+  }
+}

package/components/toast/snice-toast.types.ts

@@ -0,0 +1,35 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+export interface ToastOptions {
+  type?: ToastType;
+  duration?: number;  // ms, 0 for no auto-dismiss
+  position?: ToastPosition;
+  closable?: boolean;
+  icon?: boolean;
+  id?: string;
+}
+
+export interface SniceToastElement extends HTMLElement {
+  type: ToastType;
+  message: string;
+  closable: boolean;
+  icon: boolean;
+  hide(): void;
+}
+
+export interface SniceToastContainerElement extends HTMLElement {
+  position: ToastPosition;
+  show(message: string, options?: ToastOptions): string;
+  hide(id: string): void;
+  clear(): void;
+}
+
+export interface ToastEventDetail {
+  message: string;
+  options?: ToastOptions;
+}
+
+export interface ToastResponseEventDetail {
+  toastId: string;
+}