From b5dde4e8237566af9276938d56cd2ec5458a95dd Mon Sep 17 00:00:00 2001
From: xion <xiongxiao1012@outlook.com>
Date: Sun, 8 Dec 2024 12:54:57 +0800
Subject: [PATCH] fix: page

---
 demo/index.html   | 83 +++++++++++++++++++++++++++++++++++++++++++++++
 demo/src/index.ts | 10 ++++--
 package.json      |  3 +-
 src/page.ts       | 27 +++++++++++----
 4 files changed, 114 insertions(+), 9 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index ceb31fe..9df58c6 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -11,6 +11,89 @@
   <h1>Welcome to the Demo Page</h1>
   <p>This is a basic HTML template.</p>
   <script src="./src/index.ts" type="module"></script>
+  <form action="/submit" method="POST">
+    <label for="browser">选择浏览器：</label>
+    <input list="browsers" id="browser" name="browser" />
+    <datalist id="browsers">
+      <option value="Chrome">
+      <option value="Firefox">
+      <option value="Safari">
+      <option value="Edge">
+    </datalist>
+    <button type="submit">提交</button>
+  </form>
+
+  <style>
+    .custom-datalist-wrapper {
+      position: relative;
+      width: 200px;
+    }
+
+    .custom-datalist-input {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+
+    .custom-datalist-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: white;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      max-height: 150px;
+      overflow-y: auto;
+      display: none;
+      z-index: 1000;
+    }
+
+    .custom-datalist-dropdown.active {
+      display: block;
+    }
+
+    .custom-datalist-item {
+      padding: 8px;
+      cursor: pointer;
+    }
+
+    .custom-datalist-item:hover {
+      background-color: #f0f0f0;
+    }
+  </style>
+
+  <div class="custom-datalist-wrapper">
+    <input type="text" class="custom-datalist-input" placeholder="选择或输入..." oninput="filterDatalist(this)" />
+    <div class="custom-datalist-dropdown" id="datalist-dropdown">
+      <div class="custom-datalist-item" onclick="selectDatalistItem(this)">Apple</div>
+      <div class="custom-datalist-item" onclick="selectDatalistItem(this)">Banana</div>
+      <div class="custom-datalist-item" onclick="selectDatalistItem(this)">Cherry</div>
+      <div class="custom-datalist-item" onclick="selectDatalistItem(this)">Date</div>
+    </div>
+  </div>
+
+  <script>
+    function filterDatalist(input) {
+      const filter = input.value.toLowerCase();
+      const dropdown = document.getElementById('datalist-dropdown');
+      const items = dropdown.querySelectorAll('.custom-datalist-item');
+
+      dropdown.classList.add('active');
+      items.forEach(item => {
+        item.style.display = item.textContent.toLowerCase().includes(filter) ? 'block' : 'none';
+      });
+    }
+
+    function selectDatalistItem(item) {
+      const input = document.querySelector('.custom-datalist-input');
+      input.value = item.textContent;
+
+      const dropdown = document.getElementById('datalist-dropdown');
+      dropdown.classList.remove('active');
+    }
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/demo/src/index.ts b/demo/src/index.ts
index 4f38a5e..20a8b1f 100644
--- a/demo/src/index.ts
+++ b/demo/src/index.ts
@@ -4,9 +4,15 @@ import { Page } from '@kevisual/store/page';
 const page = new Page({
   isListen: true,
 });
-
+page.addPage('/', 'home');
 page.addPage('/:id', 'user');
-
+page.subscribe(
+  'home',
+  (params, state) => {
+    console.log('home', params, 'state', state);
+    return;
+  },
+);
 page.subscribe('user', (params, state) => {
   console.log('user', params, 'state', state);
   return;
diff --git a/package.json b/package.json
index 5f43c3f..858095a 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "@kevisual/store",
-  "version": "0.0.1-alpha.4",
+  "version": "0.0.1-alpha.5",
   "main": "dist/store.js",
   "module": "dist/store.js",
   "types": "dist/store.d.ts",
   "private": false,
   "type": "module",
   "scripts": {
+    "dev": "rollup -c -w",
     "build": "npm run clean && rollup -c",
     "build:app": "npm run build && rsync dist/* ../deploy/dist",
     "clean": "rm -rf dist"
diff --git a/src/page.ts b/src/page.ts
index 55c5879..70c4fe8 100644
--- a/src/page.ts
+++ b/src/page.ts
@@ -38,12 +38,22 @@ export class Page {
       this.listen();
     }
   }
-  popstate(event?: PopStateEvent, manual?: boolean) {
+  popstate(event?: PopStateEvent, manualOpts?: { id?: string; type: 'singal' | 'all' }) {
     const pathname = window.location.pathname;
+    if (manualOpts) {
+      if (manualOpts.type === 'singal') {
+        const item = this.callbacks.find((item) => item.id === manualOpts.id);
+        if (item) {
+          const result = this.check(item.key, pathname);
+          result && item.fn?.(result.params, event.state, { event });
+        }
+        return;
+      }
+    }
     // manual 为true时，表示手动调用，不需要检查是否相等
     this.callbacks.forEach((item) => {
       const result = this.check(item.key, pathname);
-      result && item.fn?.(result.params, event.state, { event, manual });
+      result && item.fn?.(result.params, event.state, { event, manualOpts });
     });
   }
   listen() {
@@ -118,7 +128,12 @@ export class Page {
     }
     this.callbacks.push({ key, fn, id: id, path });
     if (runImmediately) {
-      this.popstate({ state: window.history.state } as any, true);
+      const location = window.location;
+      const pathname = opts?.pathname ?? location.pathname;
+      const result = this.check(key, pathname);
+      if (result) {
+        this.popstate({ state: window.history.state } as any, { id, type: 'singal' });
+      }
     }
     return () => {
       this.callbacks = this.callbacks.filter((item) => item.id !== id);
@@ -169,18 +184,18 @@ export class Page {
     window.history.pushState(state, '', this.basename + path);
     let _check = check ?? true;
     if (_check) {
-      this.popstate({ state } as any, true);
+      this.popstate({ state } as any, { type: 'all' });
     }
   }
   replace(path: string, state?: any, check?: boolean) {
     let _check = check ?? true;
     window.history.replaceState(state, '', this.basename + path);
     if (_check) {
-      this.popstate({ state } as any, true);
+      this.popstate({ state } as any, { type: 'all' });
     }
   }
   refresh() {
     const state = window.history.state;
-    this.popstate({ state } as any, true);
+    this.popstate({ state } as any, { type: 'all' });
   }
 }