@skyservice-developers/vue-dev-kit 1.0.0

package/src/components/DialogNext.vue

@@ -0,0 +1,401 @@
+<template>
+  <Teleport to="body">
+    <transition :name="enableAnimation ? 'dialog-slide' : ''">
+      <div
+        v-if="modelValue"
+        class="sky-dialogbox sky-dialogbox-next"
+        :style="[zIndex ? { 'z-index': zIndex } : null]"
+      >
+        <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>
+
+            <div class="sky-dialog-clearfix" />
+
+            <!-- Body -->
+            <div
+              ref="dialogPaper"
+              class="sky-dialog-paper"
+              @touchstart="handleTouchStart"
+              @touchend="handleTouchEnd"
+            >
+              <!-- iOS swipe back area -->
+              <div v-if="isIos" class="sky-dialog-swipe-area" />
+              <slot></slot>
+            </div>
+
+            <!-- Footer -->
+            <div v-if="$slots.buttons" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
+              <slot name="buttons"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { isIosWebview, isAndroidWebview } from '../utils/webviewCheck'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  zIndex: {
+    type: [Number, String],
+    default: null
+  },
+  closeText: {
+    type: String,
+    default: 'Назад'
+  },
+  enableAnimation: {
+    type: Boolean,
+    default: true
+  },
+  closeOnEsc: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'close', 'save'])
+
+const dialogContent = ref(null)
+const dialogPaper = ref(null)
+const touchStartX = ref(0)
+
+const isIos = computed(() => {
+  try {
+    return isIosWebview()
+  } catch {
+    return false
+  }
+})
+
+const isAndroid = computed(() => {
+  try {
+    return isAndroidWebview()
+  } catch {
+    return false
+  }
+})
+
+const close = () => {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && props.closeOnEsc && props.modelValue) {
+    close()
+  }
+  if (e.key === 'Enter' && props.modelValue) {
+    emit('save')
+  }
+}
+
+// Touch handling for iOS swipe back
+const handleTouchStart = (e) => {
+  if (e.touches[0].clientX < 35) {
+    touchStartX.value = e.touches[0].clientX
+  }
+}
+
+const handleTouchEnd = (e) => {
+  if (touchStartX.value > 0 && touchStartX.value < 35) {
+    const touchEndX = e.changedTouches[0].clientX
+    if (touchEndX - touchStartX.value > 50) {
+      close()
+    }
+  }
+  touchStartX.value = 0
+}
+
+// Android notch fix
+const androidFix = () => {
+  if (!isAndroid.value || !dialogContent.value) return
+
+  try {
+    if (typeof Android !== 'undefined' && Android.getDisplayCutoutTop) {
+      const cutoutTop = Android.getDisplayCutoutTop()
+      if (cutoutTop && window.devicePixelRatio > 1.0) {
+        const paddingTop = cutoutTop / window.devicePixelRatio
+        dialogContent.value.style.paddingTop = paddingTop + 'px'
+      }
+    }
+  } catch (err) {
+    // Android interface not available
+  }
+}
+
+// Body scroll lock
+watch(() => props.modelValue, (value) => {
+  if (value) {
+    document.body.style.overflow = 'hidden'
+    nextTick(() => {
+      androidFix()
+    })
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+  window.addEventListener('resize', androidFix)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  window.removeEventListener('resize', androidFix)
+  document.body.style.overflow = ''
+})
+</script>
+
+<style>
+/* Global styles (не scoped через баг з Teleport) */
+.sky-dialogbox-next {
+  display: block;
+  position: fixed;
+  padding: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--sky-dialog-z-index, 9998);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+}
+</style>
+
+<style scoped>
+.sky-dialog-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  padding: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+}
+
+.sky-dialog-content {
+  background: var(--sky-dialog-bg, white);
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.sky-dialog-back {
+  cursor: pointer;
+  margin: 10px;
+  padding: 14px 12px 6px;
+  float: left;
+  line-height: 1;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--sky-dialog-back-color, #374151);
+  transition: background-color 0.2s;
+}
+
+.sky-dialog-back:hover {
+  background-color: var(--sky-dialog-back-hover-bg, #f8f9fa);
+}
+
+.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);
+}
+
+.sky-dialog-title-with-subtitle {
+  padding: 13px 0;
+}
+
+.sky-dialog-subtitle {
+  display: block;
+  font-size: var(--sky-dialog-subtitle-size, 12pt);
+  line-height: 24px;
+  color: var(--sky-dialog-subtitle-color, #6c757d);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sky-dialog-clearfix {
+  clear: both;
+}
+
+.sky-dialog-paper {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+}
+
+.sky-dialog-swipe-area {
+  position: absolute;
+  width: 35px;
+  height: 100%;
+  left: 0;
+}
+
+.sky-dialog-footer {
+  padding: 5px 10px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  transform: translateY(-52px);
+  gap: 10px;
+}
+
+/* Кнопки в футері: 1 = 100%, 2 = по 50% */
+.sky-dialog-footer > :deep(*) {
+  flex: 1;
+  min-width: 0;
+}
+
+.sky-dialog-footer:has(> :deep(*:only-child)) > :deep(*) {
+  max-width: 100%;
+}
+
+.sky-dialog-footer:has(> :deep(*:nth-child(2)):not(:has(> :deep(*:nth-child(3))))) > :deep(*) {
+  flex: 1 1 50%;
+}
+
+/* Desktop */
+@media only screen and (min-width: 1400px) {
+  .sky-dialog-content {
+    width: 100%;
+    margin: 0 auto;
+  }
+}
+
+/* Tablet and Desktop */
+@media screen and (min-width: 710px) {
+  .sky-dialog-paper {
+    height: calc(100% - 150px);
+    max-height: calc(100% - 150px);
+    background-color: #fff;
+    margin: 0 10px 60px 10px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 709px) {
+  .sky-dialog-paper {
+    height: calc(100% - 142px);
+    max-height: calc(100% - 142px);
+    background-color: #fff;
+    margin: 0 10px 10px 10px;
+    max-width: 100vw !important;
+  }
+
+  .sky-dialog-footer {
+    transform: translateY(-6px);
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .sky-dialog-subtitle {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sky-dialog-title-with-subtitle {
+    padding: 12px 24px !important;
+  }
+}
+
+@media screen and (max-width: 374px) {
+  .sky-dialog-subtitle {
+    font-size: 9pt;
+  }
+}
+
+/* iPhone safe area support */
+@supports (padding-top: env(safe-area-inset-top)) {
+  .sky-dialog-paper {
+    height: calc(100% - 150px - env(safe-area-inset-top));
+  }
+
+  .sky-dialog-footer {
+    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
+  }
+}
+
+/* Animations */
+.sky-dialog-animate {
+  animation: sky-dialog-slide-in 0.4s ease-in-out;
+}
+
+.sky-dialog-footer-animate {
+  animation: sky-dialog-footer-in 0.4s ease-in-out;
+}
+
+@keyframes sky-dialog-slide-in {
+  0% {
+    opacity: 0;
+    margin-top: -1600px;
+  }
+  100% {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+
+@keyframes sky-dialog-footer-in {
+  0% {
+    opacity: 0;
+    bottom: -100px;
+  }
+  50% {
+    opacity: 0.25;
+    bottom: -50px;
+  }
+  100% {
+    opacity: 1;
+    bottom: 15px;
+  }
+}
+
+/* Transition */
+.dialog-slide-leave-active {
+  animation: sky-dialog-slide-in 0.4s reverse;
+}
+</style>

package/src/components/Header.vue

@@ -0,0 +1,175 @@
+<template>
+  <header class="sky-header">
+    <div class="header-content">
+      <div class="header-top">
+        <div class="header-title-wrapper">
+          <button
+            v-if="shouldShowBackButton"
+            class="btn-back"
+            @click="handleBack"
+            :title="backButtonTitle"
+          >
+            <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>
+          </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>
+            </slot>
+          </div>
+        </div>
+
+        <div class="header-actions">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  showBackButton: {
+    type: Boolean,
+    default: true
+  },
+  backButtonTitle: {
+    type: String,
+    default: 'Назад'
+  }
+})
+
+// Перевіряємо чи сторінка в iframe
+const isInIframe = computed(() => {
+  try {
+    return window.self !== window.top
+  } catch (e) {
+    return true
+  }
+})
+
+// Показуємо кнопку тільки якщо showBackButton=true І сторінка в iframe
+const shouldShowBackButton = computed(() => {
+  return props.showBackButton && isInIframe.value
+})
+
+// Обробник кнопки "Назад" - відправляє повідомлення батьківському вікну
+const handleBack = () => {
+  window.parent.postMessage({ type: 'exit' }, '*')
+}
+</script>
+
+<style scoped>
+.sky-header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: var(--sky-header-bg, white);
+  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);
+}
+
+.header-content {
+  padding: var(--sky-header-content-padding, 4px 14px);
+  margin: 0 auto;
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-title-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.btn-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.2s;
+  color: var(--sky-header-back-btn-color, #374151);
+}
+
+.btn-back img,
+.btn-back svg {
+  display: block;
+}
+
+.btn-back:hover {
+  background-color: var(--sky-header-back-btn-hover-bg, #f8f9fa);
+}
+
+.btn-back:active {
+  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);
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    padding: 12px 16px;
+  }
+
+  .header-top {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+</style>