Merge branch 'main' into demo

src/components/SingleModalSectionC.vue

@@ -32,11 +32,11 @@ const { open, unlock } = useModal('PagePrepareModalC', {
   manual: true,
 
   // TODO: has bug when not allow open (the tag is not corrent)
-  // validate(data) {
-  //   // Not allow pass any data
-  //   // TODO: click danger button twice will open modal route
-  //   return !data
-  // },
+  validate(data) {
+    // Not allow pass any data
+    // TODO: click danger button twice will open modal route
+    return !data
+  },
   props: modalProps,
 })
 
@@ -77,7 +77,7 @@ onMounted(async () => {
           Open ModalC
         </ElButton>
       </div>
-      <!-- <div>
+      <div>
         <ElButton
           type="danger"
           icon="check"
@@ -87,7 +87,7 @@ onMounted(async () => {
         >
           Open ModalC with data (not allowed)
         </ElButton>
-      </div> -->
+      </div>
     </div>
     <!-- <ElButton
       type="primary"

src/modal/helpers.ts

@@ -89,6 +89,8 @@ export function once(fn: CallableFunction) {
 
 export const noop = () => { }
 
+export const deepClone = (obj: any) => JSON.parse(JSON.stringify(obj))
+
 export const isModalRoute = (route: RouteRecordRaw) => {
   return route.meta?.modal
 }

src/modal/history.ts

@@ -1,10 +1,13 @@
 import { HistoryState, RouteLocationNormalizedGeneric, Router, RouterHistory, START_LOCATION } from 'vue-router'
-import { defer, TDefer } from './helpers'
+import { deepClone, defer, TDefer } from './helpers'
 import { useSessionStorage } from './storage'
 
 export type TModalHistory = ReturnType<typeof useModalHistory>
 type TvmrtTags = Record<string, string>
 
+// Note: enter the same url as current => position not change => same as refresh
+// enter different url => position + 1 => forward
+
 export const useModalHistory = (options: {
   router: Router
   routerHistory: RouterHistory
@@ -19,15 +22,69 @@ export const useModalHistory = (options: {
   const initPosition = { value: getCurrentPosition() ?? 0 }
   const position = { value: initPosition.value }
   router.afterEach((_to, _from, failure) => {
-    if (!failure) {
-      position.value = getCurrentPosition()
+    if (failure) {
+      return
     }
+    position.value = getCurrentPosition()
+
+    // TODO: make it no need to do this twice
+    let needSave = false
+    Object.keys(_tags).forEach((key) => {
+      if (parseFloat(key) >= position.value) {
+        delete _tags[key]
+        needSave = true
+      }
+    })
+    Object.keys(tags).forEach((key) => {
+      if (parseFloat(key) >= position.value) {
+        delete tags[key]
+        needSave = true
+      }
+    })
+    if (needSave) {
+      saveTags()
+    }
+  })
+
+  window.addEventListener('beforeunload', () => {
+    tags[`${getCurrentPosition()}`] = 'unload'
+    saveTags()
   })
   const vmrtStorage = useSessionStorage<TvmrtTags>('vmrt')
-  const tags: TvmrtTags = vmrtStorage.get() ?? {}
+  const { tags, _tags } = initTags()
+  saveTags()
 
-  const saveTags = () => {
-    vmrtStorage.set(tags)
+  function initTags() {
+    const _tags: TvmrtTags = vmrtStorage.get() ?? {}
+    let unloadPosition = -1
+    Object.entries(_tags).forEach(([key, value]) => {
+      if (parseFloat(key) >= initPosition.value) {
+        // e.g: unload position, include unload position set by refresh
+        delete _tags[key]
+        return
+      }
+      if (value === 'unload') {
+        // get last unload position
+        unloadPosition = parseFloat(key)
+      }
+    })
+    const tags = Object.fromEntries(
+      Object.entries(deepClone(_tags) as TvmrtTags)
+        .filter(([key]) => parseFloat(key) > unloadPosition),
+    )
+
+    return { tags, _tags }
+  }
+
+  function saveTags() {
+    console.log('save', {
+      ..._tags,
+      ...tags,
+    })
+    vmrtStorage.set({
+      ..._tags,
+      ...tags,
+    })
   }
   const tagHistory = (name: string, position: number = getCurrentPosition()) => {
     tags[`${position}`] = name
@@ -51,12 +108,6 @@ export const useModalHistory = (options: {
     const r = routerHistory.push(to, data)
     position.value = getCurrentPosition()
     console.log('push', to, position.value)
-
-    if (tags[`${getCurrentPosition()}`]) {
-      delete tags[`${getCurrentPosition()}`]
-      saveTags()
-    }
-
     return r
   }
   const replaceHistory: RouterHistory['replace'] = (to: string, data?: HistoryState) => {
@@ -93,6 +144,7 @@ export const useModalHistory = (options: {
     }
 
     _goPromise = defer()
+    console.log('go', delta, triggerListener)
     routerHistory.go(delta, triggerListener)
     _goPromise.then(() => {
       position.value = getCurrentPosition()