@skyservice-developers/vue-dev-kit 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyservice-developers/vue-dev-kit",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Vue 2 and Vue 3 developer toolkit - components and helpers",
   "type": "module",
   "main": "./dist/vue3/vue-dev-kit.cjs",

package/src/shared/utils/parentBridge.js

@@ -0,0 +1,47 @@
+import { isInIframe } from './webviewCheck'
+
+const TIMEOUT = 3000
+let counter = 0
+
+function generateRequestId() {
+  return `req_${++counter}_${Date.now()}`
+}
+
+function requestFromParent(source, key) {
+  if (!isInIframe()) return Promise.resolve(null)
+
+  return new Promise((resolve) => {
+    const requestId = generateRequestId()
+
+    const timeout = setTimeout(() => {
+      window.removeEventListener('message', handler)
+      resolve(null)
+    }, TIMEOUT)
+
+    function handler(event) {
+      if (
+        event.data?.type === 'DATA_RESPONSE' &&
+        event.data?.requestId === requestId
+      ) {
+        clearTimeout(timeout)
+        window.removeEventListener('message', handler)
+        resolve(event.data.data ?? null)
+      }
+    }
+
+    window.addEventListener('message', handler)
+
+    window.parent.postMessage(
+      { type: 'DATA_REQUEST', requestId, source, key },
+      '*',
+    )
+  })
+}
+
+export function getParentLocalStorage(key) {
+  return requestFromParent('localStorage', key)
+}
+
+export function getParentStoreValue(key) {
+  return requestFromParent('store', key)
+}

package/src/vue3/components/Header.vue

@@ -80,6 +80,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { isInIframe } from '../../shared/utils/webviewCheck'
+import { getParentLocalStorage } from '../../shared/utils/parentBridge'
 
 const props = defineProps({
   title: {
@@ -121,8 +122,34 @@ const emit = defineEmits(['back', 'navigate'])
 const dropdownRef = ref(null)
 const isDropdownOpen = ref(false)
 
+const localStorageItems = ref([])
+
+function loadComponentStats(raw) {
+  try {
+    if (!raw) return
+    const data = typeof raw === 'string' ? JSON.parse(raw) : raw
+    if (data?.pages) {
+      localStorageItems.value = Object.values(data.pages)
+    }
+  } catch {}
+}
+
+// Load from local localStorage first
+loadComponentStats(localStorage['componentStats'])
+
+// If in iframe, request from parent and update
+if (isInIframe()) {
+  getParentLocalStorage('componentStats').then((data) => {
+    if (data != null) {
+      localStorage.setItem('componentStats', JSON.stringify(data))
+      loadComponentStats(data)
+    }
+  })
+}
+
 const sortedItems = computed(() => {
-  return [...props.dropdownItems].sort((a, b) => b.lastVisit - a.lastVisit)
+  const items = props.dropdownItems.length ? props.dropdownItems : localStorageItems.value
+  return [...items].sort((a, b) => b.lastVisit - a.lastVisit)
 })
 
 const toggleDropdown = () => {
@@ -333,7 +360,6 @@ const handleBack = () => {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sky-header-actions-gap, 12px);
 }
 
 .btn-back {