@xlabs-store/core 0.0.1

package/dist/esm/x-avatar.entry.js

@@ -0,0 +1,267 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xAvatarCss = () => `@charset "UTF-8";:host{-webkit-box-sizing:border-box;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;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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%)}: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))}: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%)}:host(.x-avatar-image){background:transparent}.x-avatar-image{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}: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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}::slotted([slot=icon]){font-size:inherit;color:inherit}.x-avatar-string{position:absolute;-webkit-transform-origin:0 center;transform-origin:0 center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;line-height:1;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`;
+
+const XAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xError = createEvent(this, "xError", 7);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // 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 (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()));
+    }
+};
+XAvatar.style = xAvatarCss();
+
+export { XAvatar as x_avatar };

package/dist/esm/x-back-top.entry.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, h, H as Host } from './index-ig_mFsVk.js';
+
+const xBackTopCss = () => `@charset "UTF-8";:host{position:fixed;right:var(--x-back-top-right, 100px);bottom:var(--x-back-top-bottom, 50px);z-index:var(--x-back-top-z-index, var(--x-z-index-popup, 1050));width:var(--x-back-top-size, var(--x-control-height-lg, 40px));height:var(--x-back-top-size, var(--x-control-height-lg, 40px));cursor:pointer;display:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.x-back-top-visible){display:block}.x-back-top-content{width:var(--x-back-top-size, var(--x-control-height-lg, 40px));height:var(--x-back-top-size, var(--x-control-height-lg, 40px));overflow:hidden;color:var(--x-back-top-content-color, var(--x-color-white, #ffffff));text-align:center;background-color:var(--x-back-top-content-bg, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));border-radius:var(--x-back-top-content-border-radius, 20px);-webkit-transition:all var(--x-back-top-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-back-top-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-back-top-content:hover{background-color:var(--x-back-top-content-bg-hover, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-back-top-icon{font-size:var(--x-back-top-icon-font-size, var(--x-font-size-xxl, 24px));line-height:var(--x-back-top-size, var(--x-control-height-lg, 40px));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}`;
+
+const XBackTop = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Scroll distance before the button becomes visible.
+     * @example
+     * <x-back-top visibilityHeight={300}></x-back-top>
+     */
+    visibilityHeight = 400;
+    /**
+     * Scroll animation duration (ms).
+     * @example
+     * <x-back-top duration={600}></x-back-top>
+     */
+    duration = 450;
+    /**
+     * Visibility state based on scroll position.
+     */
+    visible = false;
+    /**
+     * Attach scroll listener and initialize visibility.
+     * @returns void
+     * @example
+     * <x-back-top></x-back-top>
+     */
+    componentDidLoad() {
+        window.addEventListener('scroll', this.handleScroll.bind(this));
+        this.handleScroll();
+    }
+    /**
+     * Remove scroll listener on disconnect.
+     * @returns void
+     * @example
+     * <x-back-top></x-back-top>
+     */
+    disconnectedCallback() {
+        window.removeEventListener('scroll', this.handleScroll.bind(this));
+    }
+    /**
+     * Update visibility based on current scroll position.
+     *
+     * Flow:
+     * 1. Retrieves `scrollTop` from `document.documentElement` or `document.body`.
+     * 2. Compares `scrollTop` against `visibilityHeight` prop.
+     * 3. Sets `visible` state to true if threshold is exceeded.
+     *
+     * @returns void
+     * @example
+     * <x-back-top></x-back-top>
+     */
+    handleScroll() {
+        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        this.visible = scrollTop > this.visibilityHeight;
+    }
+    /**
+     * Smoothly scroll the window to the top.
+     * @returns void
+     * @example
+     * <x-back-top></x-back-top>
+     */
+    scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+    /**
+     * Render back-to-top button and slot content.
+     * @returns JSX.Element
+     * @example
+     * <x-back-top><span>Top</span></x-back-top>
+     */
+    render() {
+        return (h(Host, { key: '0014f1884f6dfae9f11f0afbd2e734ded3094d06', class: {
+                'x-back-top': true,
+                'x-back-top-visible': this.visible,
+            }, onClick: () => this.scrollToTop() }, h("div", { key: '5645a8759ce8c21df162006dd64d82b6eee951d2', class: "x-back-top-content" }, h("slot", { key: '9073f22954a5a3c9b386184c2df017d7a6e2699f' }, h("div", { key: 'd38d425542ec4a59ca712c8f92ba54f14635aad1', class: "x-back-top-icon" }, h("svg", { key: '4880a607c6dc42c7600ff1d89b7014fad3f9ba25', viewBox: "64 64 896 896", focusable: "false", "data-icon": "vertical-align-top", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: 'ad194bce7bdfe5ba32c1dfae73260c840fb82bce', d: "M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 555.9l187.6 233.1c5.2 6.5 3.5 16.3-3.9 20.4l-49.4 27.3c-6.2 3.4-13.9 1.8-18-4.1L512 634.1 389.4 832.6c-4.1 5.9-11.8 7.5-18 4.1l-49.4-27.3c-7.4-4.1-9.1-13.9-3.9-20.4l187.6-233.1c7.5-9.4 22.5-9.4 30 0z" }), h("path", { key: 'e50e348256ac30bc7692d25208c4099950d486e3', d: "M512 320c-4.4 0-8 3.6-8 8v480c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V328c0-4.4-3.6-8-8-8h-48z" })))))));
+    }
+};
+XBackTop.style = xBackTopCss();
+
+export { XBackTop as x_back_top };