@skyservice-developers/vue-dev-kit 1.5.10 → 1.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyservice-developers/vue-dev-kit",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "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

@@ -78,3 +78,7 @@ export function getParentStoreValue(key) {
 export function getParentWindowValue(key) {
   return requestFromParent('window', key)
 }
+
+export function setParentLocalStorage(key, value) {
+  sendToParent({ type: 'setLocalStorage', key, value })
+}

package/src/vue2/components/Header.vue

@@ -71,7 +71,7 @@
 
 <script>
 import { isInIframe } from '../../shared/utils/webviewCheck'
-import { getParentLocalStorage, sendToParent, setSenderId, getSenderId } from '../../shared/utils/parentBridge'
+import { getParentLocalStorage, setParentLocalStorage, sendToParent, setSenderId, getSenderId } from '../../shared/utils/parentBridge'
 
 export default {
   name: 'Header',
@@ -150,8 +150,12 @@ export default {
       }
 
       // Set rocketMode
-      getParentLocalStorage('rocketMode').then((value) => {
+      getParentLocalStorage('rocketMode').then(async (value) => {
         this.previousRocketMode = value
+        const existingFallback = await getParentLocalStorage('fallbackRocketMode')
+        if (existingFallback === null) {
+          setParentLocalStorage('fallbackRocketMode', value === true || value === 'true' ? 'true' : 'false')
+        }
         sendToParent({ type: 'setRocketMode', value: true })
       })
 

package/src/vue3/components/Header.vue

@@ -80,7 +80,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { isInIframe } from '../../shared/utils/webviewCheck'
-import { getParentLocalStorage, getParentWindowValue, sendToParent, setSenderId, getSenderId } from '../../shared/utils/parentBridge'
+import { getParentLocalStorage, getParentWindowValue, setParentLocalStorage, sendToParent, setSenderId, getSenderId } from '../../shared/utils/parentBridge'
 
 const props = defineProps({
   title: {
@@ -153,8 +153,12 @@ if (isInIframe() && props.trackPageName) {
 const previousRocketMode = ref(null)
 
 if (isInIframe()) {
-  getParentLocalStorage('rocketMode').then((value) => {
+  getParentLocalStorage('rocketMode').then(async (value) => {
     previousRocketMode.value = value
+    const existingFallback = await getParentLocalStorage('fallbackRocketMode')
+    if (existingFallback === null) {
+      setParentLocalStorage('fallbackRocketMode', value === true || value === 'true' ? 'true' : 'false')
+    }
     sendToParent({ type: 'setRocketMode', value: true })
   })
 }

package/src/vue3/components/SkySelect.vue

@@ -40,7 +40,8 @@
     <template v-if="open">
       <Teleport v-if="teleport" to="body">
         <div
-          class="sky-select-dropdown sky-select-dropdown-teleported"
+          ref="dropdownEl"
+          class="sky-select-dropdown-teleported"
           :style="dropdownStyle"
         >
           <div
@@ -139,6 +140,7 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 
 const root = ref(null);
+const dropdownEl = ref(null);
 const open = ref(false);
 const focusedIdx = ref(-1);
 const dropdownStyle = ref({});
@@ -158,11 +160,9 @@ function calcDropdownStyle() {
   if (!props.teleport || !root.value) return;
   const rect = root.value.getBoundingClientRect();
   dropdownStyle.value = {
-    position: "fixed",
     top: `${rect.bottom + 4}px`,
     left: `${rect.left}px`,
     width: `${rect.width}px`,
-    zIndex: "var(--sky-select-dropdown-z-index, 9999)",
   };
 }
 
@@ -197,7 +197,9 @@ function select(option) {
 }
 
 function onOutsideClick(e) {
-  if (!root.value?.contains(e.target)) close();
+  if (root.value?.contains(e.target)) return;
+  if (dropdownEl.value?.contains(e.target)) return;
+  close();
 }
 
 function onScrollOrResize() {
@@ -237,6 +239,20 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<style>
+.sky-select-dropdown-teleported {
+  position: fixed;
+  z-index: var(--sky-select-dropdown-z-index, 9999);
+  background: var(--sky-select-dropdown-bg, #fff);
+  border: var(--sky-select-dropdown-border, 1px solid #d1d5db);
+  border-radius: var(--sky-select-dropdown-radius, 6px);
+  box-shadow: var(--sky-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
+  max-height: var(--sky-select-dropdown-max-height, 220px);
+  overflow-y: auto;
+  padding: 4px;
+}
+</style>
+
 <style scoped>
 .sky-select {
   position: relative;
@@ -333,17 +349,6 @@ onBeforeUnmount(() => {
   padding: 4px;
 }
 
-.sky-select-dropdown-teleported {
-  position: fixed;
-  background: var(--sky-select-dropdown-bg, #fff);
-  border: var(--sky-select-dropdown-border, 1px solid #d1d5db);
-  border-radius: var(--sky-select-dropdown-radius, 6px);
-  box-shadow: var(--sky-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
-  max-height: var(--sky-select-dropdown-max-height, 220px);
-  overflow-y: auto;
-  padding: 4px;
-}
-
 /* Option */
 .sky-select-option {
   display: flex;