@skyservice-developers/vue-dev-kit 1.3.4 → 1.3.6

package/package.json

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

package/src/vue2/components/DialogModal.vue

@@ -249,6 +249,10 @@ export default {
   height: 100%;
   border-radius: var(--sky-dialog-radius, 5px);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
 }
 
 .sky-dialog-title {

package/src/vue2/components/DialogNext.vue

@@ -217,6 +217,10 @@ export default {
   width: 100%;
   height: 100%;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
 }
 
 .sky-dialog-header {

package/src/vue2/components/Header.vue

@@ -71,6 +71,7 @@
 
 <script>
 import { isInIframe } from '../../shared/utils/webviewCheck'
+import { getParentLocalStorage, sendToParent, setSenderId, getSenderId } from '../../shared/utils/parentBridge'
 
 export default {
   name: 'Header',
@@ -106,11 +107,16 @@ export default {
     visitLabel: {
       type: String,
       default: 'Останнє відвідування'
+    },
+    appId: {
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
-      isDropdownOpen: false
+      isDropdownOpen: false,
+      previousRocketMode: null
     }
   },
   computed: {
@@ -121,17 +127,34 @@ export default {
       return this.backEvent || (this.showBackButton && isInIframe())
     }
   },
+  created() {
+    setSenderId(this.appId || getSenderId())
+    if (isInIframe()) {
+      getParentLocalStorage('rocketMode').then((value) => {
+        this.previousRocketMode = value
+        sendToParent({ type: 'setRocketMode', value: true })
+      })
+    }
+  },
   mounted() {
     document.addEventListener('click', this.handleClickOutside, true)
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleClickOutside, true)
+    this.restoreRocketMode()
   },
   methods: {
+    restoreRocketMode() {
+      if (isInIframe() && this.previousRocketMode !== null) {
+        const restore = this.previousRocketMode === 'true'
+        sendToParent({ type: 'setRocketMode', value: restore })
+      }
+    },
     handleBack() {
       if (this.backEvent) return this.backEvent()
 
-      window.parent.postMessage({ type: 'exit' }, '*')
+      this.restoreRocketMode()
+      sendToParent({ type: 'exit' })
     },
     toggleDropdown() {
       if (this.sortedItems.length) {

package/src/vue2/components/Modal.vue

@@ -151,6 +151,10 @@ export default {
   flex-direction: column;
   max-width: 100%;
   max-height: 100%;
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
 }
 
 .sky-modal-header {

package/src/vue3/components/DialogModal.vue

@@ -271,6 +271,10 @@ onUnmounted(() => {
   height: 100%;
   border-radius: var(--sky-dialog-radius, 5px);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
 }
 
 .sky-dialog-title {

package/src/vue3/components/DialogNext.vue

@@ -262,6 +262,10 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
 }
 
 .sky-dialog-header {

package/src/vue3/components/Header.vue

@@ -160,10 +160,7 @@ if (isInIframe()) {
 }
 
 onUnmounted(() => {
-  if (isInIframe() && previousRocketMode.value !== null) {
-    const restore = previousRocketMode.value === 'true'
-    sendToParent({ type: 'setRocketMode', value: restore })
-  }
+  restoreRocketMode()
 })
 
 // Load translations from parent
@@ -261,9 +258,17 @@ const shouldShowBackButton = computed(() => {
   return props.backEvent || (props.showBackButton && isInIframe());
 });
 
+const restoreRocketMode = () => {
+  if (previousRocketMode.value !== null) {
+    const restore = previousRocketMode.value === 'true'
+    sendToParent({ type: 'setRocketMode', value: restore })
+  }
+}
+
 const handleBack = () => {
   if (props.backEvent) return props.backEvent()
 
+  restoreRocketMode()
   sendToParent({ type: 'exit' })
 }
 </script>

package/src/vue3/components/Modal.vue

@@ -152,6 +152,10 @@ onUnmounted(() => {
   flex-direction: column;
   max-width: 100%;
   max-height: 100%;
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
 }
 
 .sky-modal-header {