snice 1.14.3 → 2.1.0

package/components/avatar/snice-avatar.css

@@ -0,0 +1,131 @@
+:host {
+  display: inline-block;
+  --avatar-size: 2.5rem; /* 40px */
+  --avatar-bg: #6b7280;
+  --avatar-color: #ffffff;
+}
+
+.avatar {
+  position: relative;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  overflow: hidden;
+  background: var(--avatar-bg);
+  color: var(--avatar-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  user-select: none;
+}
+
+/* Shapes */
+:host([shape="circle"]) .avatar {
+  border-radius: 50%;
+}
+
+:host([shape="square"]) .avatar {
+  border-radius: 0;
+}
+
+:host([shape="rounded"]) .avatar {
+  border-radius: 8px;
+}
+
+/* Sizes */
+:host([size="xs"]) {
+  --avatar-size: 1.5rem; /* 24px */
+  font-size: 0.625rem; /* 10px */
+}
+
+:host([size="small"]) {
+  --avatar-size: 2rem; /* 32px */
+  font-size: 0.75rem; /* 12px */
+}
+
+:host([size="medium"]) {
+  --avatar-size: 2.5rem; /* 40px */
+  font-size: 0.875rem; /* 14px */
+}
+
+:host([size="large"]) {
+  --avatar-size: 3rem; /* 48px */
+  font-size: 1rem; /* 16px */
+}
+
+:host([size="xl"]) {
+  --avatar-size: 4rem; /* 64px */
+  font-size: 1.25rem; /* 20px */
+}
+
+:host([size="xxl"]) {
+  --avatar-size: 6rem; /* 96px */
+  font-size: 2rem; /* 32px */
+}
+
+/* Image */
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.avatar-image--error {
+  display: none;
+}
+
+/* Fallback */
+.avatar-fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease;
+}
+
+.avatar-fallback--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.avatar-icon {
+  width: 60%;
+  height: 60%;
+  opacity: 0.9;
+}
+
+/* Avatar color classes for fallback backgrounds */
+.avatar--red { background: rgb(var(--avatar-color-red, 239 68 68)); }
+.avatar--orange { background: rgb(var(--avatar-color-orange, 251 146 60)); }
+.avatar--yellow { background: rgb(var(--avatar-color-yellow, 234 179 8)); }
+.avatar--lime { background: rgb(var(--avatar-color-lime, 163 230 53)); }
+.avatar--green { background: rgb(var(--avatar-color-green, 34 197 94)); }
+.avatar--teal { background: rgb(var(--avatar-color-teal, 20 184 166)); }
+.avatar--cyan { background: rgb(var(--avatar-color-cyan, 6 182 212)); }
+.avatar--sky { background: rgb(var(--avatar-color-sky, 14 165 233)); }
+.avatar--blue { background: rgb(var(--avatar-color-blue, 59 130 246)); }
+.avatar--indigo { background: rgb(var(--avatar-color-indigo, 99 102 241)); }
+.avatar--violet { background: rgb(var(--avatar-color-violet, 139 92 246)); }
+.avatar--purple { background: rgb(var(--avatar-color-purple, 168 85 247)); }
+.avatar--fuchsia { background: rgb(var(--avatar-color-fuchsia, 217 70 239)); }
+.avatar--pink { background: rgb(var(--avatar-color-pink, 236 72 153)); }
+.avatar--rose { background: rgb(var(--avatar-color-rose, 244 63 94)); }
+
+/* Group avatar support */
+:host(.avatar-group-item) {
+  margin-left: -0.5rem; /* -8px */
+  border: 2px solid white; /* Keep px for crisp borders */
+  border-radius: 50%;
+}
+
+:host(.avatar-group-item:first-child) {
+  margin-left: 0;
+}
+
+:host(.avatar-group-item) .avatar {
+  border: 2px solid white;
+}

package/components/avatar/snice-avatar.ts

@@ -0,0 +1,136 @@
+import { element, property, watch, query, ready, on, part } from 'snice';
+import css from './snice-avatar.css?inline';
+import type { AvatarSize, AvatarShape, SniceAvatarElement } from './snice-avatar.types';
+
+@element('snice-avatar')
+export class SniceAvatar extends HTMLElement implements SniceAvatarElement {
+  @property({ reflect: true })
+  src = '';
+
+  @property({ reflect: true })
+  alt = '';
+
+  @property({ reflect: true })
+  name = '';
+
+  @property({ reflect: true })
+  size: AvatarSize = 'medium';
+
+  @property({ reflect: true })
+  shape: AvatarShape = 'circle';
+
+  @property({ attribute: 'fallback-color', reflect: true })
+  fallbackColor = '#ffffff';
+
+  @property({ attribute: 'fallback-background', reflect: true })
+  fallbackBackground = '';
+
+  @query('.avatar-image')
+  imageElement?: HTMLImageElement;
+
+  @query('.avatar-fallback')
+  fallbackElement?: HTMLElement;
+
+  private imageError = false;
+
+  html() {
+    const colorClass = this.fallbackBackground ? '' : this.getColorClass(this.name);
+    const bgStyle = this.fallbackBackground ? `style="--avatar-bg: ${this.fallbackBackground}; --avatar-color: ${this.fallbackColor}"` : '';
+    
+    return /*html*/`
+      <div class="avatar ${colorClass}" ${bgStyle}>
+        <div part="image-section"></div>
+        <div part="fallback-section"></div>
+      </div>
+    `;
+  }
+
+  @watch('src')
+  @part('image-section')
+  renderImageSection() {
+    return this.src ? /*html*/`
+      <img class="avatar-image ${this.imageError ? 'avatar-image--error' : ''}" 
+           src="${this.src}" 
+           alt="${this.alt || this.name}"
+           loading="lazy">
+    ` : '';
+  }
+
+  @watch('name')
+  @part('fallback-section')
+  renderFallbackSection() {
+    const initials = this.getInitials(this.name);
+    return /*html*/`
+      <div class="avatar-fallback ${!this.src || this.imageError ? 'avatar-fallback--visible' : ''}">
+        ${initials || this.renderIcon()}
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    this.setupImageHandlers();
+  }
+
+  private setupImageHandlers() {
+    if (this.imageElement) {
+      this.imageElement.addEventListener('load', this.handleImageLoad.bind(this));
+      this.imageElement.addEventListener('error', this.handleImageError.bind(this));
+    }
+  }
+
+  @on('load', '.avatar-image')
+  handleImageLoad() {
+    this.imageError = false;
+    this.renderImageSection();
+    this.renderFallbackSection();
+  }
+
+  @on('error', '.avatar-image')
+  handleImageError() {
+    this.imageError = true;
+    this.renderImageSection();
+    this.renderFallbackSection();
+  }
+
+
+  getInitials(name: string): string {
+    if (!name) return '';
+    const words = name.trim().split(/\s+/);
+    if (words.length === 1) {
+      return words[0].substring(0, 2).toUpperCase();
+    }
+    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+  }
+
+  private getColorClass(name: string): string {
+    if (!name) return '';
+    
+    const colors = [
+      'red', 'orange', 'yellow', 'lime', 'green',
+      'teal', 'cyan', 'sky', 'blue', 'indigo',
+      'violet', 'purple', 'fuchsia', 'pink', 'rose'
+    ];
+    
+    // Hash the name to get a consistent index
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    const colorIndex = Math.abs(hash) % colors.length;
+    return `avatar--${colors[colorIndex]}`;
+  }
+
+  private renderIcon(): string {
+    return /*html*/`
+      <svg class="avatar-icon" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
+    `;
+  }
+}

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

@@ -0,0 +1,13 @@
+export type AvatarSize = 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl';
+export type AvatarShape = 'circle' | 'square' | 'rounded';
+
+export interface SniceAvatarElement extends HTMLElement {
+  src: string;
+  alt: string;
+  name: string;
+  size: AvatarSize;
+  shape: AvatarShape;
+  fallbackColor: string;
+  fallbackBackground: string;
+  getInitials(name: string): string;
+}