@sekiui/elements 0.0.65 → 0.0.70

package/dist/collection/components/drawer/seki-drawer-content.js

@@ -0,0 +1,425 @@
+import { h, Host } from "@stencil/core";
+/**
+ * seki-drawer-content: Container for drawer content with gesture support
+ *
+ * @component DrawerContent
+ */
+export class SekiDrawerContent {
+    constructor() {
+        /**
+         * Direction the drawer slides in from
+         * @default 'bottom'
+         */
+        this.direction = 'bottom';
+        /**
+         * Comma-separated snap points (0-1). E.g., "0.5,1" for half and full open
+         * @default '1'
+         */
+        this.snapPoints = '1';
+        /**
+         * Distance threshold (0-1) to trigger close when dragging
+         * @default 0.5
+         */
+        this.closeThreshold = 0.5;
+        /**
+         * Velocity threshold (px/s) to trigger close on quick swipe
+         * @default 500
+         */
+        this.velocityThreshold = 500;
+        /**
+         * Parsed snap points array
+         */
+        this.parsedSnapPoints = [1];
+        /**
+         * Current drag state
+         */
+        this.isDragging = false;
+        /**
+         * Current drag offset in pixels
+         */
+        this.dragOffset = 0;
+        /**
+         * Current open percentage (0-1)
+         */
+        this.openPercent = 1;
+        // Gesture tracking state
+        this.startY = 0;
+        this.startX = 0;
+        this.contentEl = null;
+        this.positions = [];
+        this.handleCloseClick = () => {
+            this.requestClose.emit();
+        };
+        // eslint-disable-next-line no-undef
+        this.handlePointerDown = (event) => {
+            // Only handle primary button
+            if (event.button !== 0)
+                return;
+            this.isDragging = true;
+            this.startX = event.clientX;
+            this.startY = event.clientY;
+            this.positions = [{ x: event.clientX, y: event.clientY, time: Date.now() }];
+            // Capture pointer for reliable tracking
+            event.target.setPointerCapture(event.pointerId);
+            // Update parent dragging state
+            const parent = this.el.closest('seki-drawer');
+            if (parent) {
+                parent.setAttribute('data-dragging', 'true');
+            }
+        };
+        // eslint-disable-next-line no-undef
+        this.handlePointerMove = (event) => {
+            if (!this.isDragging)
+                return;
+            const deltaX = event.clientX - this.startX;
+            const deltaY = event.clientY - this.startY;
+            // Track positions for velocity calculation
+            this.positions.push({ x: event.clientX, y: event.clientY, time: Date.now() });
+            if (this.positions.length > 5) {
+                this.positions.shift();
+            }
+            // Calculate offset based on direction
+            let offset;
+            if (this.isHorizontal) {
+                offset = this.direction === 'right' ? deltaX : -deltaX;
+            }
+            else {
+                offset = this.direction === 'bottom' ? deltaY : -deltaY;
+            }
+            // Only allow dragging in the closing direction (positive offset)
+            this.dragOffset = Math.max(0, offset);
+        };
+        // eslint-disable-next-line no-undef
+        this.handlePointerUp = (event) => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            // Release pointer capture
+            event.target.releasePointerCapture(event.pointerId);
+            // Update parent dragging state
+            const parent = this.el.closest('seki-drawer');
+            if (parent) {
+                parent.setAttribute('data-dragging', 'false');
+            }
+            // Calculate velocity
+            const velocity = this.calculateVelocity();
+            // Get drawer dimensions
+            const dimension = this.getDrawerDimension();
+            const dragPercent = dimension > 0 ? this.dragOffset / dimension : 0;
+            // Determine action based on velocity and distance
+            const isClosingDirection = this.isVelocityClosing(velocity);
+            if (isClosingDirection && Math.abs(velocity) > this.velocityThreshold) {
+                // Quick swipe in closing direction - close
+                this.requestClose.emit();
+            }
+            else if (dragPercent > this.closeThreshold) {
+                // Dragged past threshold - close
+                this.requestClose.emit();
+            }
+            else {
+                // Find nearest snap point based on current position
+                const currentOpenPercent = 1 - dragPercent;
+                const nearestPoint = this.findNearestSnapPoint(currentOpenPercent);
+                if (nearestPoint <= 0) {
+                    this.requestClose.emit();
+                }
+                else {
+                    this.requestSnap.emit({ point: nearestPoint });
+                }
+            }
+            // Reset drag offset
+            this.dragOffset = 0;
+        };
+    }
+    /**
+     * Computed: should show handle based on prop or direction default
+     */
+    get shouldShowHandle() {
+        if (this.showHandle !== undefined) {
+            return this.showHandle;
+        }
+        // Default: show handle for bottom/top, hide for sides
+        return this.direction === 'bottom' || this.direction === 'top';
+    }
+    /**
+     * Computed: is horizontal direction
+     */
+    get isHorizontal() {
+        return this.direction === 'left' || this.direction === 'right';
+    }
+    componentWillLoad() {
+        this.parseSnapPoints();
+        // Propagate direction to parent for styling
+        const parent = this.el.closest('seki-drawer');
+        if (parent) {
+            parent.setAttribute('data-direction', this.direction);
+        }
+    }
+    parseSnapPoints() {
+        const points = this.snapPoints
+            .split(',')
+            .map(s => parseFloat(s.trim()))
+            .filter(n => !isNaN(n) && n >= 0 && n <= 1)
+            .sort((a, b) => a - b);
+        this.parsedSnapPoints = points.length > 0 ? points : [1];
+    }
+    calculateVelocity() {
+        if (this.positions.length < 2)
+            return 0;
+        const first = this.positions[0];
+        const last = this.positions[this.positions.length - 1];
+        const timeDelta = (last.time - first.time) / 1000; // Convert to seconds
+        if (timeDelta === 0)
+            return 0;
+        if (this.isHorizontal) {
+            return (last.x - first.x) / timeDelta;
+        }
+        else {
+            return (last.y - first.y) / timeDelta;
+        }
+    }
+    isVelocityClosing(velocity) {
+        // Positive velocity = moving in positive direction
+        switch (this.direction) {
+            case 'bottom':
+                return velocity > 0; // Swipe down
+            case 'top':
+                return velocity < 0; // Swipe up
+            case 'right':
+                return velocity > 0; // Swipe right
+            case 'left':
+                return velocity < 0; // Swipe left
+            default:
+                return false;
+        }
+    }
+    getDrawerDimension() {
+        if (!this.contentEl)
+            return 0;
+        return this.isHorizontal
+            ? this.contentEl.offsetWidth
+            : this.contentEl.offsetHeight;
+    }
+    findNearestSnapPoint(current) {
+        return this.parsedSnapPoints.reduce((nearest, point) => Math.abs(point - current) < Math.abs(nearest - current) ? point : nearest);
+    }
+    getTransformStyle() {
+        if (this.dragOffset === 0)
+            return '';
+        if (this.isHorizontal) {
+            const sign = this.direction === 'right' ? 1 : -1;
+            return `translateX(${sign * this.dragOffset}px)`;
+        }
+        else {
+            const sign = this.direction === 'bottom' ? 1 : -1;
+            return `translateY(${sign * this.dragOffset}px)`;
+        }
+    }
+    render() {
+        const transformStyle = this.getTransformStyle();
+        return (h(Host, { key: '5bb7d5d106bee2412a1973581ee48c7f1e12dfd4', "data-direction": this.direction }, h("div", { key: 'ed450481ec4a48630f9f7ae0c0976c891d6bec09', ref: (el) => (this.contentEl = el !== null && el !== void 0 ? el : null), role: "dialog", "aria-modal": "true", "aria-label": this.ariaLabel, class: {
+                'seki-drawer-content': true,
+                [`seki-drawer-content--${this.direction}`]: true,
+            }, style: transformStyle ? { transform: transformStyle } : {}, part: "content", onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, this.shouldShowHandle && (h("div", { key: '36a530bf169fd1dd8a54b3608b31d0bacfe92cef', class: "seki-drawer-handle", part: "handle" })), h("button", { key: '63970cac2aa8c085e95378d9b8b8ebe8d32224ea', type: "button", class: "seki-drawer-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { key: '43128bac99462f9de58726475b599a8caad72435', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '74a1a2e1c79542d6a9a2994618d4617133e1b6b4', d: "M18 6 6 18" }), h("path", { key: 'ad56b44c97578d7eb2419aa2091bc1a85cb8296e', d: "m6 6 12 12" }))), h("div", { key: '57dc9d1d51eb39725ed42fdd2f5fcc85b359ba5f', class: "seki-drawer-body" }, h("slot", { key: '217d5953991c77642309ed6ac0f5efb37dc951ef' })))));
+    }
+    static get is() { return "seki-drawer-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DrawerDirection",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "DrawerDirection": {
+                            "location": "local",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/drawer/seki-drawer-content.tsx",
+                            "id": "src/components/drawer/seki-drawer-content.tsx::DrawerDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "Direction the drawer slides in from"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'bottom'"
+            },
+            "snapPoints": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'1'"
+                        }],
+                    "text": "Comma-separated snap points (0-1). E.g., \"0.5,1\" for half and full open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-points",
+                "defaultValue": "'1'"
+            },
+            "showHandle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the drag handle indicator\nDefault: true for bottom/top, false for left/right"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-handle"
+            },
+            "closeThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0.5"
+                        }],
+                    "text": "Distance threshold (0-1) to trigger close when dragging"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-threshold",
+                "defaultValue": "0.5"
+            },
+            "velocityThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "500"
+                        }],
+                    "text": "Velocity threshold (px/s) to trigger close on quick swipe"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "velocity-threshold",
+                "defaultValue": "500"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the drawer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedSnapPoints": {},
+            "isDragging": {},
+            "dragOffset": {},
+            "openPercent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "requestClose",
+                "name": "requestClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to request drawer close"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "requestSnap",
+                "name": "requestSnap",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to request snap to a point"
+                },
+                "complexType": {
+                    "original": "{ point: number }",
+                    "resolved": "{ point: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "snapPoints",
+                "methodName": "parseSnapPoints"
+            }];
+    }
+}