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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyservice-developers/vue-dev-kit",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Vue 2 and Vue 3 developer toolkit - components and helpers",
   "type": "module",
   "main": "./dist/vue3/vue-dev-kit.cjs",
@@ -31,6 +31,7 @@
   ],
   "scripts": {
     "dev": "vite",
+    "playground": "vite --config playground/vite.config.js playground",
     "build:vue2": "vite build --config vite.vue2.config.js",
     "build:vue3": "vite build --config vite.vue3.config.js",
     "build": "npm run build:vue2 && npm run build:vue3",

package/src/shared/types/index.d.ts

@@ -2,11 +2,26 @@ import { DefineComponent } from 'vue'
 
 // ============ Components ============
 
+export interface HeaderDropdownItem {
+  name: string
+  path: string
+  lastVisit: number
+}
+
 export interface HeaderProps {
   title?: string
   subtitle?: string
   showBackButton?: boolean
   backButtonTitle?: string
+  backEvent?: (() => void) | null
+  dropdownItems?: HeaderDropdownItem[]
+  dropdownTitle?: string
+  visitLabel?: string
+}
+
+export interface HeaderEmits {
+  'back': () => void
+  'navigate': (path: string) => void
 }
 
 export interface HeaderSlots {

package/src/shared/utils/index.js

@@ -1 +1 @@
-export { webviewCheck, isIosWebview, isAndroidWebview, isCefWebview, isWebview } from './webviewCheck'
+export { webviewCheck, isIosWebview, isAndroidWebview, isCefWebview, isWebview, isInIframe } from './webviewCheck'

package/src/shared/utils/webviewCheck.js

@@ -44,3 +44,11 @@ export function isWebview() {
   const check = webviewCheck()
   return check !== 'browser'
 }
+
+export function isInIframe() {
+  try {
+    return window.self !== window.top
+  } catch (e) {
+    return true
+  }
+}

package/src/vue2/components/Header.vue

@@ -1,130 +1,324 @@
 <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">
-          <div></div>
-          <slot></slot>
-          <div></div>
-        </div>
+      <div class="topmenubox-button">
+        <!-- Порожні блоки ремонтують відображення на windows в додатку, не видаляти! -->
+        <div></div>
+        <slot></slot>
+        <div></div>
       </div>
     </div>
   </header>
 </template>
 
 <script>
+import { isInIframe } from '../../shared/utils/webviewCheck'
+
 export default {
-  name: "Header",
+  name: 'Header',
   props: {
     title: {
       type: String,
-      default: "",
+      default: ''
     },
     subtitle: {
       type: String,
-      default: "",
+      default: ''
     },
     showBackButton: {
       type: Boolean,
-      default: true,
+      default: true
     },
     backButtonTitle: {
       type: String,
-      default: "Назад",
+      default: 'Назад'
     },
     backEvent: {
       type: Function,
-      default: null,
+      default: null
+    },
+    dropdownItems: {
+      type: Array,
+      default: () => []
+    },
+    dropdownTitle: {
+      type: String,
+      default: 'Останні відвідані розділи'
     },
+    visitLabel: {
+      type: String,
+      default: 'Останнє відвідування'
+    }
+  },
+  data() {
+    return {
+      isDropdownOpen: false
+    }
   },
   computed: {
-    // Перевіряємо чи сторінка в iframe
-    isInIframe() {
-      try {
-        return window.self !== window.top;
-      } catch (e) {
-        return true;
-      }
+    sortedItems() {
+      return [...this.dropdownItems].sort((a, b) => b.lastVisit - a.lastVisit)
     },
-    // Показуємо кнопку якщо є backEvent АБО (showBackButton=true І сторінка в iframe)
     shouldShowBackButton() {
-      return this.backEvent || (this.showBackButton && this.isInIframe);
-    },
+      return this.backEvent || (this.showBackButton && isInIframe())
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside, true)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleClickOutside, true)
   },
   methods: {
-    // Обробник кнопки "Назад" - викликає backEvent або відправляє повідомлення батьківському вікну
     handleBack() {
-      if (this.backEvent) {
-        this.backEvent();
-      } else {
-        window.parent.postMessage({ type: "exit" }, "*");
+      if (this.backEvent) return this.backEvent()
+
+      window.parent.postMessage({ type: 'exit' }, '*')
+    },
+    toggleDropdown() {
+      if (this.sortedItems.length) {
+        this.isDropdownOpen = !this.isDropdownOpen
       }
     },
-  },
-};
+    closeDropdown() {
+      this.isDropdownOpen = false
+    },
+    selectItem(item) {
+      this.$emit('navigate', item.path)
+      this.closeDropdown()
+    },
+    capitalize(str) {
+      if (!str) return ''
+      return str.charAt(0).toUpperCase() + str.slice(1)
+    },
+    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}с тому`
+    },
+    handleClickOutside(e) {
+      if (this.$refs.dropdownRef && !this.$refs.dropdownRef.contains(e.target)) {
+        this.closeDropdown()
+      }
+    }
+  }
+}
 </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;
 }
 
 .btn-back {
@@ -155,41 +349,27 @@ export default {
   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/DialogNext.vue

@@ -50,8 +50,8 @@
               <div v-if="isIos" class="sky-dialog-swipe-area" />
               <slot></slot>
             </div>
+
             <!-- Footer -->
-            <div></div>
             <div
               v-if="showFooter"
               class="sky-dialog-footer"