@codesuma/baseline 1.0.2 → 1.0.5

package/README.md

@@ -645,4 +645,4 @@ my-app/
 
 ---
 
-MIT License
+MIT License

package/components/advanced/page.module.css

@@ -1,12 +1,14 @@
 .page {
-    position: absolute;
+    position: fixed;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    width: 100%;
+    height: 100%;
+    padding-left: 60px;
     padding-top: env(safe-area-inset-top);
     padding-bottom: env(safe-area-inset-bottom);
     background-color: #fff;
@@ -15,6 +17,7 @@
     transition: opacity 0.16s ease, transform 0.16s ease;
     transform: translateY(60px);
     pointer-events: none;
+    opacity: 0;
 }
 
 /* Forward enter: from bottom */
@@ -47,11 +50,11 @@
 
 /* Initial hidden states for stacking */
 .page.hiddenBelow {
-    transform: translateY(-60px);
+    transform: translateY(60px);
     opacity: 0;
 }
 
 .page.hiddenAbove {
-    transform: translateY(60px);
+    transform: translateY(-60px);
     opacity: 0;
 }

package/components/advanced/page.ts

@@ -10,10 +10,20 @@ const TRANSITION_DURATION = 160
 export const Page = () => {
     const base = Div()
     base.addClass(styles.page)  // Initial state is hidden below (in CSS)
+    base.el.setAttribute('aria-hidden', 'true')
 
     // Enter: direction based on isBack flag
     base.on('enter', async ({ isBack }: IRouteEvent) => {
-        await waitFor(10)
+        // Pre-position correctly before entering to ensure correct transition direction
+        if (isBack) {
+            base.addClass(styles.hiddenAbove)
+            base.removeClass(styles.hiddenBelow)
+        } else {
+            base.addClass(styles.hiddenBelow)
+            base.removeClass(styles.hiddenAbove)
+        }
+
+        await waitFor(200)
         // Clear all state classes
         base.removeClass(
             styles.exitUp,
@@ -23,6 +33,7 @@ export const Page = () => {
         )
         // Add enter class (same visual result, but positioned correctly before)
         base.addClass(isBack ? styles.enterDown : styles.enterUp)
+        base.el.setAttribute('aria-hidden', 'false')
     })
 
     // Exit: direction based on isBack flag
@@ -37,6 +48,8 @@ export const Page = () => {
         }
         await waitFor(TRANSITION_DURATION)
 
+        base.el.setAttribute('aria-hidden', 'true')
+
         // Position for next enter
         if (isBack) {
             // After exiting down, position below for next forward enter

package/index.ts

@@ -25,7 +25,7 @@ export { Page } from './components/advanced/page'
 export { default as router, IRouteEvent } from './lib/router'
 export { default as http } from './lib/http'
 export { default as ldb } from './lib/ldb'
-export { default as createDB } from './lib/idb'
+export { default as idb } from './lib/idb'
 export { default as state } from './lib/state'
 
 // Utilities
@@ -33,3 +33,4 @@ export { createEmitter, emitter, IEmitter } from './utils/emitter'
 export { createStyler, injectCSS, IStyler } from './utils/styler'
 export { waitFor } from './utils/wait'
 export { withRipple } from './utils/ripple'
+export { nextId, shortUUID, uuidv4 } from './utils/id'

package/lib/idb.ts

@@ -36,100 +36,112 @@ const withStore = async <T>(
     })
 }
 
-export default (dbName: string) => ({
-    // Get database info
-    async info(): Promise<{ version: number; objectStoreNames: DOMStringList }> {
-        const db = await openDB(dbName)
-        const result = { version: db.version, objectStoreNames: db.objectStoreNames }
-        db.close()
-        return result
-    },
-
-    // Create or upgrade store
-    async createStore(name: string, version: number, options: StoreOptions = {}) {
-        const opts = { keyPath: 'id', autoIncrement: true, indices: [], ...options }
-        return new Promise<void>((resolve, reject) => {
-            const req = indexedDB.open(dbName, version)
-            req.onupgradeneeded = (e) => {
-                const db = (e.target as IDBOpenDBRequest).result
-                if (!db.objectStoreNames.contains(name)) {
-                    const store = db.createObjectStore(name, { keyPath: opts.keyPath, autoIncrement: opts.autoIncrement })
-                    opts.indices!.forEach(idx => store.createIndex(idx, idx))
-                }
+// Get database info
+async function info(dbName: string): Promise<{ version: number; objectStoreNames: DOMStringList }> {
+    const db = await openDB(dbName)
+    const result = { version: db.version, objectStoreNames: db.objectStoreNames }
+    db.close()
+    return result
+}
+
+// Create or upgrade store
+async function createStore(dbName: string, name: string, version: number, options: StoreOptions = {}) {
+    const opts = { keyPath: 'id', autoIncrement: true, indices: [], ...options }
+    return new Promise<void>((resolve, reject) => {
+        const req = indexedDB.open(dbName, version)
+        req.onupgradeneeded = (e) => {
+            const db = (e.target as IDBOpenDBRequest).result
+            if (!db.objectStoreNames.contains(name)) {
+                const store = db.createObjectStore(name, { keyPath: opts.keyPath, autoIncrement: opts.autoIncrement })
+                opts.indices!.forEach(idx => store.createIndex(idx, idx))
             }
-            req.onsuccess = () => { req.result.close(); resolve() }
-            req.onerror = () => reject(req.error)
-        })
-    },
-
-    // CRUD operations
-    async save<T>(store: string, data: T | T[]): Promise<T | T[]> {
-        const items = Array.isArray(data) ? data : [data]
-        await withStore(dbName, store, 'readwrite', (s) => {
-            items.forEach(item => s.add(item))
-        })
-        return data
-    },
-
-    async get<T>(store: string, id: any): Promise<T | undefined> {
-        return withStore(dbName, store, 'readonly', s => s.get(id))
-    },
-
-    async all<T>(store: string): Promise<T[]> {
-        return withStore(dbName, store, 'readonly', s => s.getAll())
-    },
-
-    async update<T>(store: string, data: T): Promise<T> {
-        await withStore(dbName, store, 'readwrite', s => s.put(data))
-        return data
-    },
-
-    async delete(store: string, id: any): Promise<void> {
-        await withStore(dbName, store, 'readwrite', s => s.delete(id))
-    },
-
-    async clear(store: string): Promise<void> {
-        await withStore(dbName, store, 'readwrite', s => s.clear())
-    },
-
-    async count(store: string): Promise<number> {
-        return withStore(dbName, store, 'readonly', s => s.count())
-    },
-
-    // Query with options
-    async find<T>(store: string, options: {
-        index?: string
-        value?: any
-        limit?: number
-        reverse?: boolean
-    } = {}): Promise<T[]> {
-        const { index, value, limit = 1000, reverse = false } = options
-        const db = await openDB(dbName)
-
-        return new Promise((resolve, reject) => {
-            if (!db.objectStoreNames.contains(store)) {
+        }
+        req.onsuccess = () => { req.result.close(); resolve() }
+        req.onerror = () => reject(req.error)
+    })
+}
+
+// CRUD operations
+async function save<T>(dbName: string, store: string, data: T | T[]): Promise<T | T[]> {
+    const items = Array.isArray(data) ? data : [data]
+    await withStore(dbName, store, 'readwrite', (s) => {
+        items.forEach(item => s.add(item))
+    })
+    return data
+}
+
+async function get<T>(dbName: string, store: string, id: any): Promise<T | undefined> {
+    return withStore(dbName, store, 'readonly', s => s.get(id))
+}
+
+async function all<T>(dbName: string, store: string): Promise<T[]> {
+    return withStore(dbName, store, 'readonly', s => s.getAll())
+}
+
+async function update<T>(dbName: string, store: string, data: T): Promise<T> {
+    await withStore(dbName, store, 'readwrite', s => s.put(data))
+    return data
+}
+
+async function del(dbName: string, store: string, id: any): Promise<void> {
+    await withStore(dbName, store, 'readwrite', s => s.delete(id))
+}
+
+async function clear(dbName: string, store: string): Promise<void> {
+    await withStore(dbName, store, 'readwrite', s => s.clear())
+}
+
+async function count(dbName: string, store: string): Promise<number> {
+    return withStore(dbName, store, 'readonly', s => s.count())
+}
+
+// Query with options
+async function find<T>(dbName: string, store: string, options: {
+    index?: string
+    value?: any
+    limit?: number
+    reverse?: boolean
+} = {}): Promise<T[]> {
+    const { index, value, limit = 1000, reverse = false } = options
+    const db = await openDB(dbName)
+
+    return new Promise((resolve, reject) => {
+        if (!db.objectStoreNames.contains(store)) {
+            db.close()
+            return resolve([])
+        }
+
+        const tx = db.transaction(store, 'readonly')
+        const s = tx.objectStore(store)
+        const source = index ? s.index(index) : s
+        const range = value !== undefined ? IDBKeyRange.only(value) : undefined
+        const req = source.openCursor(range, reverse ? 'prev' : 'next')
+
+        const results: T[] = []
+        req.onsuccess = () => {
+            const cursor = req.result
+            if (cursor && results.length < limit) {
+                results.push(cursor.value)
+                cursor.continue()
+            } else {
                 db.close()
-                return resolve([])
+                resolve(results)
             }
+        }
+        tx.onerror = () => { db.close(); reject(tx.error) }
+    })
+}
 
-            const tx = db.transaction(store, 'readonly')
-            const s = tx.objectStore(store)
-            const source = index ? s.index(index) : s
-            const range = value !== undefined ? IDBKeyRange.only(value) : undefined
-            const req = source.openCursor(range, reverse ? 'prev' : 'next')
-
-            const results: T[] = []
-            req.onsuccess = () => {
-                const cursor = req.result
-                if (cursor && results.length < limit) {
-                    results.push(cursor.value)
-                    cursor.continue()
-                } else {
-                    db.close()
-                    resolve(results)
-                }
-            }
-            tx.onerror = () => { db.close(); reject(tx.error) }
-        })
-    }
-})
+
+export default {
+    info,
+    createStore,
+    save,
+    get,
+    all,
+    update,
+    delete: del,
+    clear,
+    count,
+    find
+}

package/lib/router.ts

@@ -11,6 +11,7 @@ export interface IRouteEvent {
     from: string
     data?: any
     isBack?: boolean  // True if navigating via back button
+    to?: string
 }
 
 interface RouteConfig {
@@ -82,6 +83,7 @@ const navigate = async (to: string, data?: any) => {
             params: {},
             query: getQuery(),
             from: currentPath,
+            to: path,
             data,
             isBack
         })
@@ -112,6 +114,7 @@ const navigate = async (to: string, data?: any) => {
         params: match.params,
         query: getQuery(),
         from,
+        to: path,
         data,
         isBack
     })
@@ -121,6 +124,7 @@ const navigate = async (to: string, data?: any) => {
         params: match.params,
         query: getQuery(),
         from,
+        to: path,
         data,
         isBack
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesuma/baseline",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "A minimal, imperative UI framework for building fast web apps. No virtual DOM, no magic, no dependencies.",
   "main": "index.ts",
   "types": "index.ts",

package/utils/appender.ts

@@ -118,10 +118,10 @@ export function createAppender(base: AnyComponent): IAppender {
             if (base.parent) {
                 base.parent.setChildren(base.parent.getChildren().filter(c => c !== base))
             }
+            base.emit('unmounted')
             base.removeAllListeners()
             pendingRoots.delete(base)
             base.el.remove()
-            base.emit('unmounted')
         }
     }
 }