@xlabs-store/core 0.0.1

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

@@ -0,0 +1,494 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Descriptions component for labeled data lists with optional responsive columns.
+ */
+export class XDescriptions {
+    /**
+     * Host element reference for measuring width.
+     */
+    el;
+    /**
+     * Title of the descriptions list.
+     * @example
+     * <x-descriptions descriptionTitle="Profile"></x-descriptions>
+     */
+    descriptionTitle;
+    /**
+     * Whether to display the border.
+     * @example
+     * <x-descriptions bordered></x-descriptions>
+     */
+    bordered = false;
+    /**
+     * Number of columns in the descriptions list.
+     * Can be a number or responsive config object
+     * @example
+     * <x-descriptions column={3}></x-descriptions>
+     */
+    column = 3;
+    /**
+     * Layout direction.
+     * @example
+     * <x-descriptions layout="vertical"></x-descriptions>
+     */
+    layout = 'horizontal';
+    /**
+     * Size of the list.
+     * @example
+     * <x-descriptions size="small"></x-descriptions>
+     */
+    size = 'default';
+    /**
+     * Whether to show colon after label.
+     * @example
+     * <x-descriptions colon={false}></x-descriptions>
+     */
+    colon = true;
+    /**
+     * Items to display (alternative to using slot).
+     * @example
+     * <x-descriptions items={[{ label: 'Name', children: 'Jane' }]}></x-descriptions>
+     */
+    items;
+    /**
+     * Custom label style for all items.
+     * @example
+     * <x-descriptions labelStyle={{ color: 'gray' }}></x-descriptions>
+     */
+    labelStyle;
+    /**
+     * Custom content style for all items.
+     * @example
+     * <x-descriptions contentStyle={{ color: 'black' }}></x-descriptions>
+     */
+    contentStyle;
+    /**
+     * Computed column count for current width.
+     */
+    currentColumn = 3;
+    /**
+     * Resize observer for responsive columns.
+     */
+    resizeObserver;
+    /**
+     * Initialize column count before render.
+     * @returns void
+     * @example
+     * <x-descriptions column={3}></x-descriptions>
+     */
+    componentWillLoad() {
+        this.updateColumn();
+    }
+    /**
+     * Setup resize observer when responsive config is used.
+     * @returns void
+     * @example
+     * <x-descriptions column={{ md: 2, lg: 3 }}></x-descriptions>
+     */
+    componentDidLoad() {
+        if (typeof this.column === 'object') {
+            this.setupResizeObserver();
+        }
+    }
+    /**
+     * Disconnect resize observer.
+     * @returns void
+     * @example
+     * <x-descriptions></x-descriptions>
+     */
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Initialize ResizeObserver for responsive layout.
+     * @returns void
+     * @example
+     * <x-descriptions column={{ sm: 1, md: 2 }}></x-descriptions>
+     */
+    setupResizeObserver() {
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateColumn();
+            });
+            this.resizeObserver.observe(this.el);
+        }
+    }
+    /**
+     * Compute columns based on responsive breakpoints.
+     *
+     * Flow:
+     * 1. If `column` is a fixed number, use it directly.
+     * 2. If `column` is a config object:
+     *    - Measure client width or window width.
+     *    - Match against breakpoints (xxl, xl, lg, md, sm, xs).
+     *    - Set `currentColumn` to the matched value or default to 3.
+     *
+     * @returns void
+     * @example
+     * <x-descriptions column={{ xs: 1, md: 2, lg: 3 }}></x-descriptions>
+     */
+    updateColumn() {
+        if (typeof this.column === 'number') {
+            this.currentColumn = this.column;
+            return;
+        }
+        const width = this.el.clientWidth || window.innerWidth;
+        const config = this.column;
+        // Responsive breakpoints
+        if (width >= 1600 && config.xxl !== undefined) {
+            this.currentColumn = config.xxl;
+        }
+        else if (width >= 1200 && config.xl !== undefined) {
+            this.currentColumn = config.xl;
+        }
+        else if (width >= 992 && config.lg !== undefined) {
+            this.currentColumn = config.lg;
+        }
+        else if (width >= 768 && config.md !== undefined) {
+            this.currentColumn = config.md;
+        }
+        else if (width >= 576 && config.sm !== undefined) {
+            this.currentColumn = config.sm;
+        }
+        else if (config.xs !== undefined) {
+            this.currentColumn = config.xs;
+        }
+        else {
+            this.currentColumn = 3;
+        }
+    }
+    /**
+     * Get the current column count
+     * @returns Promise<number>
+     * @example
+     * const count = await el.getColumnCount()
+     */
+    async getColumnCount() {
+        return this.currentColumn;
+    }
+    /**
+     * Render items from props or default slot.
+     *
+     * Flow:
+     * 1. Checks if `items` prop is provided.
+     * 2. If no items, renders default `<slot />` (for manual item composition).
+     * 3. If items exist, maps them to `<x-descriptions-item>` elements.
+     *    - Passes label, span, styles, and children.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-descriptions items={[{ label: 'Name', children: 'Jane' }]}></x-descriptions>
+     */
+    renderItems() {
+        if (!this.items || this.items.length === 0) {
+            return h("slot", null);
+        }
+        return this.items.map((item, index) => (h("x-descriptions-item", { key: item.key || index, label: item.label, span: item.span, colon: this.colon, labelStyle: item.labelStyle || this.labelStyle, contentStyle: item.contentStyle || this.contentStyle }, item.children)));
+    }
+    /**
+     * Render descriptions table with header and body.
+     * @returns JSX.Element
+     * @example
+     * <x-descriptions descriptionTitle="Info"></x-descriptions>
+     */
+    render() {
+        const hostStyle = {
+            '--x-descriptions-column-count': String(this.currentColumn),
+        };
+        return (h(Host, { key: '80c7abb0c07f2dbf15720fa8a448390d67b7e57f', class: {
+                'x-descriptions': true,
+                'x-descriptions-bordered': this.bordered,
+                [`x-descriptions-${this.size}`]: true,
+                [`x-descriptions-${this.layout}`]: true,
+                'x-descriptions-colon': this.colon,
+            }, style: hostStyle }, this.descriptionTitle && (h("div", { key: 'f052a2bc9cb3950cd8445f808c797e0f7b164cc6', class: "x-descriptions-header" }, h("div", { key: '80a2919fdbb541d8979c3a650712d2f0f2636565', class: "x-descriptions-title" }, this.descriptionTitle), h("div", { key: 'df61e5f6bec9e46637f540213bbfbaa1d147601b', class: "x-descriptions-extra" }, h("slot", { key: 'a02e104beb1466f1ccb014f11ccc6a5d98cbb549', name: "extra" })))), h("div", { key: '54b9e0ff14c250ceed9e1996b58c0f22cc31cef0', class: "x-descriptions-view" }, h("table", { key: '20f839facd10f0884b833f01a31d1d7ad72bf4e5', class: "x-descriptions-table" }, h("tbody", { key: 'cb27649f93111306bb888eed28b62146caad1f30', class: "x-descriptions-tbody" }, this.renderItems())))));
+    }
+    static get is() { return "x-descriptions"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-descriptions.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-descriptions.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "descriptionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions descriptionTitle=\"Profile\"></x-descriptions>"
+                        }],
+                    "text": "Title of the descriptions list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description-title"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions bordered></x-descriptions>"
+                        }],
+                    "text": "Whether to display the border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            },
+            "column": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | DescriptionsColumnConfig",
+                    "resolved": "DescriptionsColumnConfig | number",
+                    "references": {
+                        "DescriptionsColumnConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-descriptions/types.ts::DescriptionsColumnConfig",
+                            "referenceLocation": "DescriptionsColumnConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions column={3}></x-descriptions>"
+                        }],
+                    "text": "Number of columns in the descriptions list.\r\nCan be a number or responsive config object"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "column",
+                "defaultValue": "3"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DescriptionsLayout",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "DescriptionsLayout": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-descriptions/types.ts::DescriptionsLayout",
+                            "referenceLocation": "DescriptionsLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions layout=\"vertical\"></x-descriptions>"
+                        }],
+                    "text": "Layout direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'horizontal'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DescriptionsSize",
+                    "resolved": "\"default\" | \"middle\" | \"small\"",
+                    "references": {
+                        "DescriptionsSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-descriptions/types.ts::DescriptionsSize",
+                            "referenceLocation": "DescriptionsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions size=\"small\"></x-descriptions>"
+                        }],
+                    "text": "Size of the list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "colon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions colon={false}></x-descriptions>"
+                        }],
+                    "text": "Whether to show colon after label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colon",
+                "defaultValue": "true"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DescriptionsItemData[]",
+                    "resolved": "DescriptionsItemData[]",
+                    "references": {
+                        "DescriptionsItemData": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-descriptions/types.ts::DescriptionsItemData",
+                            "referenceLocation": "DescriptionsItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions items={[{ label: 'Name', children: 'Jane' }]}></x-descriptions>"
+                        }],
+                    "text": "Items to display (alternative to using slot)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "labelStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DescriptionsLabelStyle",
+                    "resolved": "{ [x: string]: string; }",
+                    "references": {
+                        "DescriptionsLabelStyle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-descriptions/types.ts::DescriptionsLabelStyle",
+                            "referenceLocation": "DescriptionsLabelStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions labelStyle={{ color: 'gray' }}></x-descriptions>"
+                        }],
+                    "text": "Custom label style for all items."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "contentStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DescriptionsContentStyle",
+                    "resolved": "{ [x: string]: string; }",
+                    "references": {
+                        "DescriptionsContentStyle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-descriptions/types.ts::DescriptionsContentStyle",
+                            "referenceLocation": "DescriptionsContentStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-descriptions contentStyle={{ color: 'black' }}></x-descriptions>"
+                        }],
+                    "text": "Custom content style for all items."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentColumn": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getColumnCount": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Get the current column count",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<number>"
+                        }, {
+                            "name": "example",
+                            "text": "const count = await el.getColumnCount()"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}