nexa-mobile 0.6.0

package/dist/components/NBottomSheet.d.ts

@@ -0,0 +1 @@
+export declare const NBottomSheet: import("nexa-runtime").Component;

package/dist/components/NBottomSheet.js

@@ -0,0 +1,91 @@
+import { defineComponent, h, onMounted, onUnmounted } from 'nexa-runtime';
+import { signal, computed, effect } from 'nexa-reactivity';
+import { useGestures } from '../gestures/GestureManager.js';
+export const NBottomSheet = defineComponent({
+    name: 'NBottomSheet',
+    props: {
+        show: { type: Boolean, default: false }
+    },
+    emits: ['close'],
+    setup(props, { emit, slots }) {
+        const gestures = signal(null);
+        // Internal state
+        const yOffset = signal(0);
+        const isDragging = signal(false);
+        onMounted(() => {
+            const el = document.getElementById('nexa-bottom-sheet-content');
+            if (el) {
+                const g = useGestures(el);
+                gestures.value = g;
+                effect(() => {
+                    if (g.isSwiping.value && g.swipeDirection.value === 'down') {
+                        isDragging.value = true;
+                        yOffset.value = Math.max(0, g.deltaY.value);
+                    }
+                    else if (!g.isPressed.value && isDragging.value) {
+                        // Check if we should close
+                        if (yOffset.value > 100) {
+                            emit('close');
+                        }
+                        isDragging.value = false;
+                        yOffset.value = 0;
+                    }
+                });
+            }
+        });
+        onUnmounted(() => {
+            gestures.value?.destroy();
+        });
+        const style = computed(() => ({
+            transform: `translateY(${props.show ? (yOffset.value + 'px') : '100%'})`,
+            transition: isDragging.value ? 'none' : 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+            position: 'fixed',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            background: '#1e293b',
+            borderTopLeftRadius: '1.5rem',
+            borderTopRightRadius: '1.5rem',
+            boxShadow: '0 -10px 25px -5px rgba(0, 0, 0, 0.3)',
+            zIndex: '1000',
+            padding: '1.5rem',
+            touchAction: 'none',
+            display: props.show || isDragging.value ? 'block' : 'none'
+        }));
+        const overlayStyle = computed(() => ({
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            background: 'rgba(0,0,0,0.5)',
+            display: props.show ? 'block' : 'none',
+            zIndex: '999',
+            opacity: props.show ? (1 - (yOffset.value / 400)) : 0,
+            transition: 'opacity 0.3s ease',
+            pointerEvents: props.show ? 'auto' : 'none'
+        }));
+        return () => h('div', { class: 'n-bottom-sheet-wrapper' }, [
+            h('div', {
+                style: overlayStyle.value,
+                onClick: () => emit('close')
+            }),
+            h('div', {
+                id: 'nexa-bottom-sheet-content',
+                style: style.value
+            }, [
+                // Handle bar
+                h('div', {
+                    style: {
+                        width: '40px',
+                        height: '4px',
+                        background: '#475569',
+                        borderRadius: '2px',
+                        margin: '0 auto 1.5rem auto'
+                    }
+                }),
+                slots.default?.()
+            ])
+        ]);
+    }
+});

package/dist/gestures/GestureManager.d.ts

@@ -0,0 +1,20 @@
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down' | null;
+export declare class GestureManager {
+    private el;
+    private startX;
+    private startY;
+    isSwiping: import("nexa-reactivity").Signal<boolean>;
+    swipeDirection: import("nexa-reactivity").Signal<SwipeDirection>;
+    deltaX: import("nexa-reactivity").Signal<number>;
+    deltaY: import("nexa-reactivity").Signal<number>;
+    isPressed: import("nexa-reactivity").Signal<boolean>;
+    private boundHandleStart;
+    private boundHandleMove;
+    private boundHandleEnd;
+    constructor(el: HTMLElement);
+    private handleStart;
+    private handleMove;
+    private handleEnd;
+    destroy(): void;
+}
+export declare function useGestures(el: HTMLElement): GestureManager;

package/dist/gestures/GestureManager.js

@@ -0,0 +1,72 @@
+import { signal, batch } from 'nexa-reactivity';
+export class GestureManager {
+    el;
+    startX = 0;
+    startY = 0;
+    isSwiping = signal(false);
+    swipeDirection = signal(null);
+    deltaX = signal(0);
+    deltaY = signal(0);
+    isPressed = signal(false);
+    boundHandleStart;
+    boundHandleMove;
+    boundHandleEnd;
+    constructor(el) {
+        this.el = el;
+        this.boundHandleStart = this.handleStart.bind(this);
+        this.boundHandleMove = this.handleMove.bind(this);
+        this.boundHandleEnd = this.handleEnd.bind(this);
+        this.el.addEventListener('touchstart', this.boundHandleStart, { passive: true });
+        this.el.addEventListener('touchmove', this.boundHandleMove, { passive: false });
+        this.el.addEventListener('touchend', this.boundHandleEnd, { passive: true });
+        this.el.addEventListener('touchcancel', this.boundHandleEnd, { passive: true });
+    }
+    handleStart(e) {
+        const touch = e.touches[0];
+        this.startX = touch.clientX;
+        this.startY = touch.clientY;
+        batch(() => {
+            this.isPressed.value = true;
+            this.isSwiping.value = false;
+            this.swipeDirection.value = null;
+            this.deltaX.value = 0;
+            this.deltaY.value = 0;
+        });
+    }
+    handleMove(e) {
+        const touch = e.touches[0];
+        const dx = touch.clientX - this.startX;
+        const dy = touch.clientY - this.startY;
+        batch(() => {
+            this.deltaX.value = dx;
+            this.deltaY.value = dy;
+            if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {
+                this.isSwiping.value = true;
+                if (Math.abs(dx) > Math.abs(dy)) {
+                    this.swipeDirection.value = dx > 0 ? 'right' : 'left';
+                }
+                else {
+                    this.swipeDirection.value = dy > 0 ? 'down' : 'up';
+                }
+            }
+        });
+    }
+    handleEnd() {
+        batch(() => {
+            this.isPressed.value = false;
+            // Keep swiping state for a moment or clear it?
+            // For now, clear it.
+            this.isSwiping.value = false;
+            this.swipeDirection.value = null;
+        });
+    }
+    destroy() {
+        this.el.removeEventListener('touchstart', this.boundHandleStart);
+        this.el.removeEventListener('touchmove', this.boundHandleMove);
+        this.el.removeEventListener('touchend', this.boundHandleEnd);
+        this.el.removeEventListener('touchcancel', this.boundHandleEnd);
+    }
+}
+export function useGestures(el) {
+    return new GestureManager(el);
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './gestures/GestureManager.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './gestures/GestureManager.js';

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "nexa-mobile",
+  "version": "0.6.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "nexa-reactivity": "0.6.0",
+    "nexa-runtime": "0.6.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  }
+}