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

package/package.json

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

@@ -52,7 +52,7 @@ export default {
     },
     enableAnimation: {
       type: Boolean,
-      default: true
+      default: false
     },
     closeOnEsc: {
       type: Boolean,

package/src/vue2/components/DialogModal.vue

@@ -102,7 +102,7 @@ export default {
     },
     enableAnimation: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     closeOnEsc: {
       type: Boolean,

package/src/vue2/components/DialogNext.vue

@@ -8,19 +8,18 @@
       <div class="sky-dialog-overlay" :class="{ 'sky-dialog-animate': enableAnimation }">
         <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)">
-              <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>
+          <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 }">
+              {{ title }}
+              <span v-if="subtitle" class="sky-dialog-subtitle">{{ subtitle }}</span>
+            </div>
           </div>
 
-          <div class="sky-dialog-clearfix" />
-
           <!-- Body -->
           <div
             ref="dialogPaper"
@@ -72,7 +71,7 @@ export default {
     },
     enableAnimation: {
       type: Boolean,
-      default: true
+      default: false
     },
     closeOnEsc: {
       type: Boolean,
@@ -220,37 +219,52 @@ export default {
   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 {
@@ -263,9 +277,6 @@ export default {
   text-overflow: ellipsis;
 }
 
-.sky-dialog-clearfix {
-  clear: both;
-}
 
 .sky-dialog-paper {
   height: 100%;

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/vue2/components/Modal.vue

@@ -1,12 +1,12 @@
 <template>
   <base-teleport to="body"> 
-    <transition name="modal-fade">
+    <transition>
       <div v-if="isOpen" class="sky-modal-overlay" @click.self="handleOverlayClick">
         <div class="sky-modal" :style="modalStyle">
           <div class="sky-modal-header">
             <button class="sky-modal-back" @click="close" :title="closeTitle">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M19 12H5M12 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round"/>
+              <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-modal-title-wrapper">
@@ -165,8 +165,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   background: transparent;
   border: none;
@@ -177,10 +177,18 @@ export default {
   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;