@grasco/profile-picture 0.1.7 → 0.1.8

package/dist/vue.d.ts

@@ -1,4 +1,4 @@
-import * as lit_html from 'lit-html';
+import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 /**
@@ -201,84 +201,6 @@ interface ProfilePictureGroupProps {
     animated?: boolean;
 }
 
-declare class ProfilePicture extends LitElement {
-    private static stylesInjected;
-    private static cdnBaseUrl;
-    private static instances;
-    /**
-     * Set global CDN base URL for all ProfilePicture instances
-     * @example ProfilePicture.setCdnBaseUrl('https://api.example.com')
-     */
-    static setCdnBaseUrl(url: string): void;
-    /**
-     * Get current CDN base URL
-     */
-    static getCdnBaseUrl(): string;
-    protected createRenderRoot(): this;
-    private static injectStylesOnce;
-    src: string;
-    alt: string;
-    extCustomerId?: string;
-    size: Size | string;
-    variant: Variant;
-    shadow: ShadowPreset;
-    border: boolean;
-    borderWidth: 1 | 2 | 3 | 4 | 5 | 6 | 8;
-    borderColor: string;
-    rotation: number;
-    bgColor?: string;
-    bgGradient?: string;
-    ring?: RingConfig;
-    presence?: PresenceConfig;
-    glow?: GlowConfig;
-    badge?: BadgeConfig;
-    loading: LoadingStrategy;
-    placeholder: PlaceholderType;
-    placeholderColor: string;
-    fallback?: string;
-    interactive?: InteractionConfig;
-    private isLoaded;
-    private hasError;
-    private cdnImageUrl?;
-    private cdnLoadFailed;
-    private previousSrc;
-    private previousExtCustomerId?;
-    private retryTimeoutId?;
-    private readonly RETRY_DELAY_MS;
-    private get pixelSize();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected firstUpdated(): void;
-    protected updated(changedProperties: Map<string, unknown>): void;
-    protected willUpdate(changedProperties: Map<string, unknown>): void;
-    private handleLoad;
-    private handleError;
-    /**
-     * Construct CDN URL for profile picture using ext-customer-id
-     * Uses direct image src binding - browser handles redirects automatically
-     */
-    private loadCdnImage;
-    private getContainerStyles;
-    private renderPlaceholder;
-    private renderFallback;
-    private renderImage;
-    private renderRing;
-    /**
-     * Calculate corner offset based on variant
-     * Returns the inset from container edge where badges/presence should be positioned
-     */
-    private getCornerOffset;
-    private renderPresence;
-    private renderBadge;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "profile-picture": ProfilePicture;
-    }
-}
-
 declare class ProfilePictureGroup extends LitElement {
     protected createRenderRoot(): this;
     max: 4;
@@ -330,7 +252,7 @@ declare class ProfilePictureGroup extends LitElement {
     private renderDropdownItem;
     private formatStatus;
     protected updated(changedProperties: Map<PropertyKey, unknown>): void;
-    render(): lit_html.TemplateResult<1>;
+    render(): lit.TemplateResult<1>;
 }
 
 declare global {
@@ -339,4 +261,84 @@ declare global {
     }
 }
 
-export type { BadgeConfig, DropdownConfig, GlowConfig, GroupUserData, InteractionConfig, LoadingStrategy, PlaceholderType, Position, PresenceConfig, PresenceStatus, ProfilePictureGroupProps, ProfilePictureProps, RingConfig, ShadowPreset, Size, StackDirection, TooltipConfig, TooltipPosition, Variant };
+/**
+ * Vue wrapper for ProfilePicture Web Component
+ *
+ * The component is a standard Web Component and works natively with Vue 3.
+ * Just import to register, then use in templates.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import '@grasco/profile-picture/vue';
+ * import type { ProfilePictureProps, RingConfig, BadgeConfig } from '@grasco/profile-picture/vue';
+ *
+ * const avatarUrl = 'https://example.com/avatar.png';
+ *
+ * const ring: RingConfig = { show: true, color: '#ff5722' };
+ * const badge: BadgeConfig = { content: 3, position: 'bottom-right', pulse: true };
+ *
+ * function handleLoad() {
+ *   console.log('Image loaded');
+ * }
+ *
+ * function handleError() {
+ *   console.error('Image failed to load');
+ * }
+ * </script>
+ *
+ * <template>
+ *   <profile-picture
+ *     :src="avatarUrl"
+ *     alt="John Doe"
+ *     size="lg"
+ *     variant="circle"
+ *     :border="true"
+ *     border-color="white"
+ *     bg-color="#f3f4f6"
+ *     :ring="JSON.stringify(ring)"
+ *     :badge="JSON.stringify(badge)"
+ *     @load="handleLoad"
+ *     @error="handleError"
+ *   />
+ * </template>
+ * ```
+ *
+ * Note: You may need to add the custom element to Vue's config:
+ *
+ * ```typescript
+ * // vite.config.ts or main.ts
+ * app.config.compilerOptions.isCustomElement = (tag) =>
+ *   tag === 'profile-picture' || tag === 'profile-picture-group';
+ * ```
+ *
+ * Or in Vite:
+ *
+ * ```typescript
+ * // vite.config.ts
+ * export default {
+ *   plugins: [
+ *     vue({
+ *       template: {
+ *         compilerOptions: {
+ *           isCustomElement: (tag) =>
+ *             tag === 'profile-picture' || tag === 'profile-picture-group'
+ *         }
+ *       }
+ *     })
+ *   ]
+ * }
+ * ```
+ */
+
+/**
+ * Set global CDN base URL for all ProfilePicture instances
+ * @example setCdnBaseUrl('https://api.example.com')
+ */
+declare function setCdnBaseUrl(url: string): void;
+/**
+ * Get current CDN base URL
+ */
+declare function getCdnBaseUrl(): string;
+
+export { type BadgeConfig, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, getCdnBaseUrl, setCdnBaseUrl };