@xlabs-store/core 0.0.1

package/dist/collection/components/x-avatar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/x-avatar/x-avatar.css

@@ -0,0 +1,128 @@
+@charset "UTF-8";
+/**
+* X-Avatar Component Variables
+* 
+* Sass variables for x-avatar component
+* Resolution priority: x-avatar → ref (x-*)
+* 
+* Usage: Import this file in x-avatar.scss
+* @use './variables' as *;
+*/
+/**
+ * X-Avatar Component Styles
+ * 
+ * Uses Sass variables from _variables.scss
+ * Following Ant Design specification
+ */
+/* ========================================
+ * BASE STYLES
+ * ======================================== */
+:host {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--x-avatar-color, var(--x-color-white, #fff));
+  font-size: var(--x-avatar-font-size, var(--x-font-size-base, 14px));
+  font-variant: tabular-nums;
+  line-height: 1;
+  list-style: none;
+  font-feature-settings: "tnum";
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  background: var(--x-avatar-bg, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25)));
+  width: var(--x-avatar-size, var(--x-control-height, 32px));
+  height: var(--x-avatar-size, var(--x-control-height, 32px));
+  border-radius: var(--x-avatar-border-radius-circle, 50%);
+}
+
+/* ========================================
+ * SIZE VARIANTS
+ * ======================================== */
+:host(.x-avatar-lg) {
+  width: var(--x-avatar-size-lg, var(--x-control-height-lg, 40px));
+  height: var(--x-avatar-size-lg, var(--x-control-height-lg, 40px));
+  font-size: var(--x-avatar-font-size-lg, 18px);
+}
+
+:host(.x-avatar-sm) {
+  width: var(--x-avatar-size-sm, var(--x-control-height-sm, 24px));
+  height: var(--x-avatar-size-sm, var(--x-control-height-sm, 24px));
+  font-size: var(--x-avatar-font-size-sm, var(--x-font-size-base, 14px));
+}
+
+:host(.x-avatar-default) {
+  width: var(--x-avatar-size, var(--x-control-height, 32px));
+  height: var(--x-avatar-size, var(--x-control-height, 32px));
+  font-size: var(--x-avatar-font-size, var(--x-font-size-base, 14px));
+}
+
+/* ========================================
+ * SHAPE VARIANTS
+ * ======================================== */
+:host(.x-avatar-square) {
+  border-radius: var(--x-avatar-border-radius-square, var(--x-border-radius-sm, 4px));
+}
+
+:host(.x-avatar-circle) {
+  border-radius: var(--x-avatar-border-radius-circle, 50%);
+}
+
+/* ========================================
+ * IMAGE AVATAR
+ * ======================================== */
+:host(.x-avatar-image) {
+  background: transparent;
+}
+
+.x-avatar-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ========================================
+ * ICON AVATAR
+ * ======================================== */
+:host(.x-avatar-icon) .x-avatar-icon {
+  font-size: var(--x-avatar-font-size-icon, 18px);
+}
+
+:host(.x-avatar-lg.x-avatar-icon) .x-avatar-icon {
+  font-size: var(--x-avatar-icon-size-lg, 24px);
+}
+
+:host(.x-avatar-sm.x-avatar-icon) .x-avatar-icon {
+  font-size: var(--x-avatar-icon-size-sm, 14px);
+}
+
+.x-avatar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+::slotted([slot=icon]) {
+  font-size: inherit;
+  color: inherit;
+}
+
+/* ========================================
+ * TEXT/STRING AVATAR
+ * ======================================== */
+.x-avatar-string {
+  position: absolute;
+  transform-origin: 0 center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}

package/dist/collection/components/x-avatar/x-avatar.js

@@ -0,0 +1,533 @@
+import { Host, h } from "@stencil/core";
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+/**
+ * Avatar component supporting image, icon, or text content.
+ */
+export class XAvatar {
+    /**
+     * Host element reference for sizing.
+     */
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * The shape of avatar.
+     * @example
+     * <x-avatar shape="square"></x-avatar>
+     */
+    shape = 'circle';
+    /**
+     * The size of the avatar.
+     * @example
+     * <x-avatar size="large"></x-avatar>
+     */
+    size = 'default';
+    /**
+     * The address of the image for an image avatar.
+     * @example
+     * <x-avatar src="/avatar.png"></x-avatar>
+     */
+    src;
+    /**
+     * A list of sources to use for different screen resolutions.
+     * @example
+     * <x-avatar srcSet="/avatar@2x.png 2x"></x-avatar>
+     */
+    srcSet;
+    /**
+     * This attribute defines the alternative text describing the image.
+     * @example
+     * <x-avatar src="/avatar.png" alt="User"></x-avatar>
+     */
+    alt = '';
+    /**
+     * Icon type (for icon avatar, use slot="icon" instead).
+     * @example
+     * <x-avatar icon="user"><x-icon slot="icon" name="user"></x-icon></x-avatar>
+     */
+    icon;
+    /**
+     * Letter type unit distance between left and right sides.
+     * @example
+     * <x-avatar gap={6}>AB</x-avatar>
+     */
+    gap = 4;
+    /**
+     * Whether the picture is allowed to be dragged.
+     * @example
+     * <x-avatar src="/avatar.png" imgDraggable={false}></x-avatar>
+     */
+    imgDraggable = true;
+    /**
+     * CORS settings attributes.
+     * @example
+     * <x-avatar src="/avatar.png" crossOrigin="anonymous"></x-avatar>
+     */
+    crossOrigin;
+    // ========================================
+    // STATE
+    // ========================================
+    /**
+     * Track whether image loaded successfully.
+     */
+    isImgExist = true;
+    /**
+     * Scale factor for text content to fit avatar width.
+     */
+    scale = 1;
+    /**
+     * Whether component is mounted to allow measurements.
+     */
+    mounted = false;
+    /**
+     * Text element reference used for measuring width.
+     */
+    textRef;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Handler when img load error.
+     * @example
+     * <x-avatar onXError={(ev) => console.log(ev.detail)}></x-avatar>
+     */
+    xError;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Mark mounted and compute initial text scale.
+     * @returns void
+     * @example
+     * <x-avatar>AB</x-avatar>
+     */
+    componentDidLoad() {
+        this.mounted = true;
+        this.setScale();
+    }
+    /**
+     * Recompute scale on updates.
+     * @returns void
+     * @example
+     * <x-avatar>AB</x-avatar>
+     */
+    componentDidUpdate() {
+        this.setScale();
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Handle image load error and fall back to text/icon.
+     * @param e - Image error event.
+     * @returns void
+     * @example
+     * <x-avatar src="/bad.png" onXError={(ev) => console.log(ev.detail)}></x-avatar>
+     */
+    handleImgLoadError = (e) => {
+        this.isImgExist = false;
+        this.xError.emit({ event: e });
+    };
+    /**
+     * Compute scale for text content based on available width.
+     *
+     * Flow:
+     * 1. Checks if text element (`textRef`) and component are mounted.
+     * 2. Measures `offsetWidth` of the text content.
+     * 3. Measures `clientWidth` of the host element (defaulting to 32px).
+     * 4. Calculates `availableWidth` by subtracting gaps.
+     * 5. If text width exceeds available width:
+     *    - Sets `scale` to `availableWidth / textWidth`.
+     *    - This shrinks the text to fit within the avatar circle/square.
+     * 6. Otherwise, resets `scale` to 1.
+     *
+     * @returns void
+     * @example
+     * <x-avatar>AB</x-avatar>
+     */
+    setScale() {
+        // Guard until text element exists and component is mounted.
+        if (!this.textRef || !this.mounted)
+            return;
+        const textWidth = this.textRef.offsetWidth;
+        const avatarWidth = this.el.shadowRoot?.host?.clientWidth || 32;
+        const availableWidth = avatarWidth - this.gap * 2;
+        // Scale down when text is wider than available space.
+        if (avatarWidth && textWidth && availableWidth < textWidth) {
+            this.scale = availableWidth / textWidth;
+        }
+        else {
+            this.scale = 1;
+        }
+    }
+    /**
+     * Compute inline size style when size is numeric.
+     * @returns Record of CSS properties.
+     * @example
+     * <x-avatar size={48}></x-avatar>
+     */
+    getSizeStyle() {
+        // Numeric size maps to width/height/lineHeight/fontSize.
+        if (typeof this.size === 'number') {
+            return {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                lineHeight: `${this.size}px`,
+                fontSize: `${this.size / 2}px`,
+            };
+        }
+        return {};
+    }
+    /**
+     * Get size class when size is a string token.
+     * @returns string
+     * @example
+     * <x-avatar size="small"></x-avatar>
+     */
+    getSizeClass() {
+        // String sizes map to CSS class.
+        if (typeof this.size === 'string') {
+            return `x-avatar-${this.size}`;
+        }
+        return '';
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Render avatar content based on src/icon/text.
+     *
+     * Flow:
+     * 1. Priority 1: Image.
+     *    - If `src` exists and `isImgExist` is true.
+     *    - Renders `<img>` with handlers for load errors.
+     * 2. Priority 2: Icon.
+     *    - If `icon` prop is present.
+     *    - Renders `slot[name="icon"]`.
+     * 3. Priority 3: Text/String.
+     *    - Applies calculated `scale` transform if needed to fit text.
+     *    - Renders default slot content inside a span.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-avatar src="/avatar.png"></x-avatar>
+     */
+    renderContent() {
+        // Image avatar
+        if (this.src && this.isImgExist) {
+            return (h("img", { class: "x-avatar-image", src: this.src, srcSet: this.srcSet, alt: this.alt, draggable: this.imgDraggable, crossOrigin: this.crossOrigin || undefined, onError: this.handleImgLoadError }));
+        }
+        // Icon avatar (via slot)
+        if (this.icon) {
+            return (h("span", { class: "x-avatar-icon" }, h("slot", { name: "icon" })));
+        }
+        // Text/Letter avatar
+        const textStyle = {};
+        // Apply scale and centering when text exceeds container.
+        if (this.scale !== 1) {
+            textStyle.transform = `scale(${this.scale})`;
+            textStyle.position = 'absolute';
+            textStyle.left = '50%';
+            textStyle.transformOrigin = '0 center';
+            textStyle.marginLeft = `-${Math.round((this.textRef?.offsetWidth || 0) / 2)}px`;
+        }
+        return (h("span", { class: "x-avatar-string", ref: (el) => (this.textRef = el), style: textStyle }, h("slot", null)));
+    }
+    /**
+     * Build host class map based on size, shape, and content type.
+     * @returns Record of class flags.
+     * @example
+     * <x-avatar shape="square"></x-avatar>
+     */
+    getHostClasses() {
+        const sizeClass = this.getSizeClass();
+        const hasImage = this.src && this.isImgExist;
+        const hasIcon = !!this.icon;
+        return {
+            'x-avatar': true,
+            [`x-avatar-${this.shape}`]: true,
+            [sizeClass]: !!sizeClass,
+            'x-avatar-image': hasImage,
+            'x-avatar-icon': hasIcon && !hasImage,
+        };
+    }
+    /**
+     * Render avatar host with computed classes and size style.
+     * @returns JSX.Element
+     * @example
+     * <x-avatar size={40}>AB</x-avatar>
+     */
+    render() {
+        return (h(Host, { key: 'f4ec3bed6c5f9e11b1c603da7b22db56462abe5d', class: this.getHostClasses(), style: this.getSizeStyle() }, this.renderContent()));
+    }
+    static get is() { return "x-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarShape",
+                    "resolved": "\"circle\" | \"square\"",
+                    "references": {
+                        "AvatarShape": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-avatar/types.ts::AvatarShape",
+                            "referenceLocation": "AvatarShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar shape=\"square\"></x-avatar>"
+                        }],
+                    "text": "The shape of avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'circle'"
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarSize",
+                    "resolved": "\"default\" | \"large\" | \"small\" | number",
+                    "references": {
+                        "AvatarSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-avatar/types.ts::AvatarSize",
+                            "referenceLocation": "AvatarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar size=\"large\"></x-avatar>"
+                        }],
+                    "text": "The size of the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar src=\"/avatar.png\"></x-avatar>"
+                        }],
+                    "text": "The address of the image for an image avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "srcSet": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar srcSet=\"/avatar@2x.png 2x\"></x-avatar>"
+                        }],
+                    "text": "A list of sources to use for different screen resolutions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src-set"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar src=\"/avatar.png\" alt=\"User\"></x-avatar>"
+                        }],
+                    "text": "This attribute defines the alternative text describing the image."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar icon=\"user\"><x-icon slot=\"icon\" name=\"user\"></x-icon></x-avatar>"
+                        }],
+                    "text": "Icon type (for icon avatar, use slot=\"icon\" instead)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "gap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar gap={6}>AB</x-avatar>"
+                        }],
+                    "text": "Letter type unit distance between left and right sides."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "4"
+            },
+            "imgDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar src=\"/avatar.png\" imgDraggable={false}></x-avatar>"
+                        }],
+                    "text": "Whether the picture is allowed to be dragged."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-draggable",
+                "defaultValue": "true"
+            },
+            "crossOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'anonymous' | 'use-credentials' | ''",
+                    "resolved": "\"\" | \"anonymous\" | \"use-credentials\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar src=\"/avatar.png\" crossOrigin=\"anonymous\"></x-avatar>"
+                        }],
+                    "text": "CORS settings attributes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cross-origin"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isImgExist": {},
+            "scale": {},
+            "mounted": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xError",
+                "name": "xError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-avatar onXError={(ev) => console.log(ev.detail)}></x-avatar>"
+                        }],
+                    "text": "Handler when img load error."
+                },
+                "complexType": {
+                    "original": "AvatarErrorEventDetail",
+                    "resolved": "AvatarErrorEventDetail",
+                    "references": {
+                        "AvatarErrorEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-avatar/types.ts::AvatarErrorEventDetail",
+                            "referenceLocation": "AvatarErrorEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}