@skyservice-developers/vue-dev-kit 1.5.12 → 2.1.0

package/src/vue3/components/DialogNext.vue

@@ -1,427 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div
-      v-if="modelValue"
-      class="sky-dialogbox sky-dialogbox-next"
-      :style="[zIndex ? { 'z-index': zIndex } : null]"
-    >
-      <div
-        class="sky-dialog-overlay"
-      >
-          <div ref="dialogContent" class="sky-dialog-content">
-            <!-- Header -->
-            <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>
-
-            <!-- Body -->
-            <div
-              ref="dialogPaper"
-              class="sky-dialog-paper"
-              :class="{ 'sky-dialog-paper-no-footer': !showFooter }"
-              @touchstart="handleTouchStart"
-              @touchend="handleTouchEnd"
-            >
-              <!-- iOS swipe back area -->
-              <div v-if="isIos" class="sky-dialog-swipe-area" />
-              <slot></slot>
-            </div>
-
-            <!-- Footer -->
-            <div
-              v-if="showFooter"
-              class="sky-dialog-footer"
-            >
-              <!-- Порожні блоки ремонтують відображення на windows в додатку, не видаляти! -->
-              <slot name="buttons"></slot>
-            </div>
-          </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import {
-  ref,
-  computed,
-  watch,
-  onMounted,
-  onUnmounted,
-  nextTick,
-  useSlots,
-} from "vue";
-import {
-  isIosWebview,
-  isAndroidWebview,
-} from "../../shared/utils/webviewCheck";
-
-const slots = useSlots();
-
-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: "Назад",
-  },
-  closeOnEsc: {
-    type: Boolean,
-    default: true,
-  },
-  hasButtons: {
-    type: Boolean,
-    default: null,
-  },
-});
-
-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;
-  }
-});
-
-// Determine if footer should be shown
-const showFooter = computed(() => {
-  // If hasButtons prop is explicitly set, use it
-  if (props.hasButtons !== null) {
-    return props.hasButtons;
-  }
-  // Fallback to slot check (for direct usage without Dialog wrapper)
-  return !!slots.buttons;
-});
-
-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);
-  display: flex;
-  flex-direction: column;
-}
-
-.sky-dialog-header {
-  display: flex;
-  align-items: center;
-  padding: 10px 14px;
-}
-
-.sky-dialog-back {
-  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 {
-  font-size: var(--sky-dialog-title-size, 13pt);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--sky-dialog-title-color, #252525);
-  min-width: 0;
-}
-
-.sky-dialog-title-with-subtitle {
-  line-height: 1.2;
-}
-
-.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-paper {
-  flex: 1;
-  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%;
-  flex-shrink: 0;
-}
-
-.sky-dialog-footer > * + * {
-  margin-left: 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 {
-    background-color: #fff;
-    margin: 0 10px 10px 10px;
-  }
-
-  /* .sky-dialogbox,
-  .sky-dialog-overlay {
-    padding: 10px;
-  } */
-}
-
-/* Mobile */
-@media screen and (max-width: 709px) {
-  .sky-dialog-paper {
-    background-color: #fff;
-    margin: 0 10px 10px 10px;
-    max-width: 100vw !important;
-  }
-}
-
-@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-footer {
-    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
-  }
-}
-
-/* iOS safe area */
-@supports (padding-top: env(safe-area-inset-top)) {
-  .sky-dialog-header {
-    padding-top: calc(10px + env(safe-area-inset-top));
-  }
-  .sky-dialog-paper {
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-}
-</style>