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

package/src/vue3/components/Dialog.vue

@@ -47,7 +47,7 @@ const props = defineProps({
   },
   enableAnimation: {
     type: Boolean,
-    default: true
+    default: false
   },
   closeOnEsc: {
     type: Boolean,

package/src/vue3/components/DialogModal.vue

@@ -116,7 +116,7 @@ const props = defineProps({
   },
   enableAnimation: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   closeOnEsc: {
     type: Boolean,

package/src/vue3/components/DialogNext.vue

@@ -12,32 +12,31 @@
         >
           <div ref="dialogContent" class="sky-dialog-content">
             <!-- Header -->
-            <button class="sky-dialog-back" :title="closeText" @click="close">
-              <svg
-                width="15"
-                height="15"
-                viewBox="0 0 451.847 451.847"
-                style="transform: rotate(90deg)"
+            <div class="sky-dialog-header">
+              <button class="sky-dialog-back" :title="closeText" @click="close">
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 451.847 451.847"
+                  style="transform: rotate(90deg)"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
+                  />
+                </svg>
+              </button>
+              <div
+                class="sky-dialog-title"
+                :class="{ 'sky-dialog-title-with-subtitle': subtitle }"
               >
-                <path
-                  fill="currentColor"
-                  d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
-                />
-              </svg>
-            </button>
-
-            <div
-              class="sky-dialog-title"
-              :class="{ 'sky-dialog-title-with-subtitle': subtitle }"
-            >
-              {{ title }}
-              <span v-if="subtitle" class="sky-dialog-subtitle">{{
-                subtitle
-              }}</span>
+                {{ title }}
+                <span v-if="subtitle" class="sky-dialog-subtitle">{{
+                  subtitle
+                }}</span>
+              </div>
             </div>
 
-            <div class="sky-dialog-clearfix" />
-
             <!-- Body -->
             <div
               ref="dialogPaper"
@@ -50,8 +49,8 @@
               <div v-if="isIos" class="sky-dialog-swipe-area" />
               <slot></slot>
             </div>
+
             <!-- Footer -->
-            <div></div>
             <div
               v-if="showFooter"
               class="sky-dialog-footer"
@@ -109,7 +108,7 @@ const props = defineProps({
   },
   enableAnimation: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   closeOnEsc: {
     type: Boolean,
@@ -265,37 +264,52 @@ onUnmounted(() => {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
+.sky-dialog-header {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+}
+
 .sky-dialog-back {
-  cursor: pointer;
-  margin: 10px;
-  padding: 14px 12px 6px;
-  float: left;
-  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
   background: transparent;
   border: none;
+  cursor: pointer;
   border-radius: 6px;
   color: var(--sky-dialog-back-color, #374151);
   transition: background-color 0.2s;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.sky-dialog-back svg {
+  display: block;
 }
 
 .sky-dialog-back:hover {
   background-color: var(--sky-dialog-back-hover-bg, #f8f9fa);
 }
 
+.sky-dialog-back:active {
+  background-color: var(--sky-dialog-back-active-bg, #e9ecef);
+}
+
 .sky-dialog-title {
-  max-width: calc(100% - 80px);
   font-size: var(--sky-dialog-title-size, 13pt);
-  padding: 21px 0;
-  padding-right: 0;
-  float: left;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--sky-dialog-title-color, #252525);
+  min-width: 0;
 }
 
 .sky-dialog-title-with-subtitle {
-  padding: 13px 0;
+  line-height: 1.2;
 }
 
 .sky-dialog-subtitle {
@@ -308,9 +322,6 @@ onUnmounted(() => {
   text-overflow: ellipsis;
 }
 
-.sky-dialog-clearfix {
-  clear: both;
-}
 
 .sky-dialog-paper {
   height: 100%;

package/src/vue3/components/Header.vue

@@ -1,49 +1,85 @@
 <template>
-  <header class="sky-header">
-    <div class="header-content">
-      <div class="header-top">
-        <div class="header-title-wrapper">
+  <header class="sky-header-container">
+    <div class="topmenubox">
+      <div class="header-left">
+        <button
+          v-if="shouldShowBackButton"
+          class="btn-back"
+          @click="handleBack"
+          :title="backButtonTitle"
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 451.847 451.847"
+            style="transform: rotate(90deg)"
+          >
+            <path
+              fill="currentColor"
+              d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
+            />
+          </svg>
+        </button>
+        <div ref="dropdownRef" class="titleAndDesc">
           <button
-            v-if="shouldShowBackButton"
-            class="btn-back"
-            @click="handleBack"
-            :title="backButtonTitle"
+            class="title-dropdown-toggle"
+            :class="{ 'title-dropdown-toggle-active': sortedItems.length }"
+            @click="toggleDropdown"
           >
-            <svg
-              width="15"
-              height="15"
-              viewBox="0 0 451.847 451.847"
-              style="transform: rotate(90deg)"
-            >
-              <path
-                fill="currentColor"
-                d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
-              />
-            </svg>
-          </button>
-          <div class="header-title-content">
             <slot name="title">
-              <h4 class="header-title">{{ title }}</h4>
-            </slot>
-            <slot name="subtitle">
-              <div v-if="subtitle" class="header-subtitle">{{ subtitle }}</div>
+              <h4 class="notPadding" style="margin-bottom: 4px">
+                <span class="topmenu-title">{{ title }}</span>
+                <svg
+                  v-if="sortedItems.length"
+                  class="arrow"
+                  :class="{ open: isDropdownOpen }"
+                  width="12"
+                  height="12"
+                  viewBox="0 0 451.847 451.847"
+                  style="flex-shrink: 0"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
+                  />
+                </svg>
+              </h4>
             </slot>
+          </button>
+          <div v-if="isDropdownOpen && sortedItems.length" class="title-dropdown">
+            <div class="title-dropdown-header">{{ dropdownTitle }}</div>
+            <div class="title-dropdown-divider"></div>
+            <div
+              v-for="(item, index) in sortedItems"
+              :key="index"
+              class="title-dropdown-item"
+              @click="selectItem(item)"
+            >
+              <p class="pageName">{{ capitalize(item.name) }}</p>
+              <small class="pageVisit">
+                ({{ visitLabel }} {{ getTimeAgo(item.lastVisit) }})
+              </small>
+            </div>
           </div>
+          <slot name="subtitle">
+            <p v-if="subtitle" class="topmenu-description">{{ subtitle }}</p>
+          </slot>
         </div>
+      </div>
 
-        <div class="header-actions">
-          <!-- Порожні блоки ремонтують відображення на windows в додатку, не видаляти! -->
-          <div></div>
-          <slot></slot>
-          <div></div>
-        </div>
+      <div class="topmenubox-button">
+        <!-- Порожні блоки ремонтують відображення на windows в додатку, не видаляти! -->
+        <div></div>
+        <slot></slot>
+        <div></div>
       </div>
     </div>
   </header>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { isInIframe } from '../../shared/utils/webviewCheck'
 
 const props = defineProps({
   title: {
@@ -66,64 +102,238 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  dropdownItems: {
+    type: Array,
+    default: () => [],
+  },
+  dropdownTitle: {
+    type: String,
+    default: "Останні відвідані розділи",
+  },
+  visitLabel: {
+    type: String,
+    default: "Останнє відвідування",
+  },
 });
 
-// Перевіряємо чи сторінка в iframe
-const isInIframe = computed(() => {
-  try {
-    return window.self !== window.top;
-  } catch (e) {
-    return true;
+const emit = defineEmits(['back', 'navigate'])
+
+const dropdownRef = ref(null)
+const isDropdownOpen = ref(false)
+
+const sortedItems = computed(() => {
+  return [...props.dropdownItems].sort((a, b) => b.lastVisit - a.lastVisit)
+})
+
+const toggleDropdown = () => {
+  if (sortedItems.value.length) {
+    isDropdownOpen.value = !isDropdownOpen.value
   }
-});
+}
+
+const closeDropdown = () => {
+  isDropdownOpen.value = false
+}
+
+const selectItem = (item) => {
+  emit('navigate', item.path)
+  closeDropdown()
+}
+
+const capitalize = (str) => {
+  if (!str) return ''
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+const getTimeAgo = (lastVisit) => {
+  const now = Date.now()
+  const diff = now - lastVisit
+
+  const seconds = Math.floor(diff / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (days > 0) return `${days}д тому`
+  if (hours > 0) return `${hours}год тому`
+  if (minutes > 0) return `${minutes}хв тому`
+  return `${seconds}с тому`
+}
+
+const handleClickOutside = (e) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target)) {
+    closeDropdown()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside, true)
+})
 
 // Показуємо кнопку якщо є backEvent АБО (showBackButton=true І сторінка в iframe)
 const shouldShowBackButton = computed(() => {
-  return props.backEvent || (props.showBackButton && isInIframe.value);
+  return props.backEvent || (props.showBackButton && isInIframe());
 });
 
-// Обробник кнопки "Назад" - викликає backEvent або відправляє повідомлення батьківському вікну
 const handleBack = () => {
-  if (props.backEvent) {
-    props.backEvent();
-  } else {
-    window.parent.postMessage({ type: "exit" }, "*");
-  }
-};
+  if (props.backEvent) return props.backEvent()
+
+  window.parent.postMessage({ type: 'exit' }, '*')
+}
 </script>
 
 <style scoped>
-.sky-header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: var(--sky-header-bg, white);
+.sky-header-container {
+  width: 100%;
+  min-height: var(--sky-header-min-height, 82px);
+  background-color: var(--sky-header-bg, transparent);
+  display: flex;
+  flex-direction: row;
+  padding: var(--sky-header-padding, 10px);
   border-bottom: 1px solid var(--sky-header-border-color, #dee2e6);
-  z-index: var(--sky-header-z-index, 100);
-  padding: var(--sky-header-padding, 10px 0);
+  z-index: var(--sky-header-z-index, 4);
+  position: relative;
 }
 
-.header-content {
-  padding: var(--sky-header-content-padding, 4px 14px);
-  margin: 0 auto;
-}
-
-.header-top {
+.topmenubox {
+  width: 100%;
   display: flex;
+  padding: 4px;
   justify-content: space-between;
   align-items: center;
+  background-color: transparent;
 }
 
-.header-title-wrapper {
+.header-left {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.header-title-content {
+.titleAndDesc {
   display: flex;
   flex-direction: column;
+  position: relative;
+}
+
+.notPadding {
+  margin: 0;
+  padding: 0;
+  font-size: var(--sky-header-title-size, 18px);
+  font-weight: var(--sky-header-title-weight, 500);
+  color: var(--sky-header-title-color, #252525);
+  line-height: 1.5;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.topmenu-title {
+  white-space: pre-line;
+}
+
+.title-dropdown-toggle {
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+
+.title-dropdown-toggle-active {
+  cursor: pointer;
+}
+
+.arrow {
+  width: 12px;
+  position: relative;
+  margin-left: 5px;
+  flex-shrink: 0;
+  transition: transform 0.25s ease;
+  color: var(--sky-header-title-color, #252525);
+}
+
+.arrow.open {
+  transform: rotate(180deg);
+}
+
+.title-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 240px;
+  background: white;
+  border-radius: 5px;
+  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1);
+  border: none;
+  z-index: 10;
+  padding: 4px 0;
+  margin-top: 4px;
+}
+
+.title-dropdown-header {
+  padding: 4px 24px;
+  font-size: 13px;
+  color: #6c757d;
+}
+
+.title-dropdown-divider {
+  height: 0;
+  margin: 4px 0;
+  border-top: 1px solid #e9ecef;
+}
+
+.title-dropdown-item {
+  padding: 4px 24px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.title-dropdown-item:hover {
+  background-color: #f8f9fa;
+}
+
+.title-dropdown-item:active {
+  background-color: #e9ecef;
+}
+
+.pageName {
+  padding-bottom: 0;
+  margin: 0;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.pageVisit {
+  color: gray;
+  font-weight: 400;
+  font-size: 11px;
+}
+
+.topmenu-description {
+  margin: 0;
+  margin-bottom: 5px;
+  color: var(--sky-header-subtitle-color, #5d5d5d);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.topmenubox-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sky-header-actions-gap, 12px);
 }
 
 .btn-back {
@@ -154,41 +364,27 @@ const handleBack = () => {
   background-color: var(--sky-header-back-btn-active-bg, #e9ecef);
 }
 
-.header-title {
-  margin: 0;
-  font-size: var(--sky-header-title-size, 18px);
-  font-weight: var(--sky-header-title-weight, 500);
-  color: var(--sky-header-title-color, #252525);
-  line-height: 1.5;
-  user-select: none;
-}
-
-.header-subtitle {
-  font-size: var(--sky-header-subtitle-size, 14px);
-  color: var(--sky-header-subtitle-color, #6c757d);
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-.header-actions {
-  display: flex;
-  gap: var(--sky-header-actions-gap, 12px);
+/* Responsive: <500px — hide description, smaller title */
+@media (max-width: 499px) {
+  .topmenu-description {
+    display: none;
+  }
+  .notPadding {
+    font-size: 13px;
+  }
 }
 
-@media (max-width: 768px) {
-  /* .header-content {
-    padding: 12px 16px;
-  } */
-
-  .header-top {
-    flex-direction: column;
-    align-items: flex-start;
-    /* gap: 12px; */
+/* Responsive: 500-1099px — smaller description */
+@media (min-width: 500px) and (max-width: 1099px) {
+  .topmenu-description {
+    font-size: 11px;
   }
+}
 
-  .header-actions {
-    width: 100%;
-    justify-content: flex-end;
+/* iOS safe area */
+@supports (padding-top: env(safe-area-inset-top)) {
+  .sky-header-container {
+    padding-top: calc(10px + env(safe-area-inset-top));
   }
 }
 </style>

package/src/vue3/components/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseTeleport to="body">
-    <transition name="modal-fade">
+    <transition>
       <div
         v-if="modelValue"
         class="sky-modal-overlay"
@@ -12,15 +12,12 @@
               <svg
                 width="15"
                 height="15"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
+                viewBox="0 0 451.847 451.847"
+                style="transform: rotate(90deg)"
               >
                 <path
-                  d="M19 12H5M12 19l-7-7 7-7"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                  fill="currentColor"
+                  d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
                 />
               </svg>
             </button>
@@ -169,8 +166,8 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   background: transparent;
   border: none;
@@ -181,10 +178,18 @@ onUnmounted(() => {
   margin-right: 12px;
 }
 
+.sky-modal-back svg {
+  display: block;
+}
+
 .sky-modal-back:hover {
   background-color: var(--sky-modal-back-hover-bg, #f8f9fa);
 }
 
+.sky-modal-back:active {
+  background-color: var(--sky-modal-back-active-bg, #e9ecef);
+}
+
 .sky-modal-title-wrapper {
   flex: 1;
   min-width: 0;