adata-ui 2.0.39 → 2.0.41

package/components/modals/id/IdBanner.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const { registrationModal } = useIdModals()
+
+function onRegister() {
+  registrationModal.value = true
+}
+</script>
+
+<template>
+  <div class="gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+    <div>
+      <p class="mb-2 font-semibold">
+        {{ t('modals.id.banner.title') }}
+      </p>
+      <i18n-t
+        keypath="modals.id.banner.subtitle"
+        tag="p"
+        class="text-sm text-gray-600 dark:text-gray-200"
+      >
+        <template #register>
+          <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">
+            {{ t('modals.id.banner.register') }}
+          </button>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onRegister"
+    >
+      {{ t('actions.register') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+.gradient {
+  background: linear-gradient(
+    239.71deg,
+    #B3D5F9 -7.48%,
+    #E6F1FD 39.62%,
+    #CCE2FB 85.82%
+  );
+}
+
+.dark .gradient {
+  background: linear-gradient(
+    239.71deg,
+    #17303F -7.48%,
+    #161617 39.62%,
+    #17303F 85.82%
+  );
+}
+</style>

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
 const { t, locale } = useI18n()
 const { commonAuth } = useAppConfig()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
-const { confirmAccountOtpModal, confirmSuccessfulModal } = useIdModals()
+const { confirmAccountOtpModal, confirmSuccessfulModal, intermediateState } = useIdModals()
 
 const authApiURL = commonAuth.authApiURL
 

package/components/modals/id/IdLoginModal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
 import * as z from 'zod'
 
@@ -8,10 +7,7 @@ const { $toast } = useNuxtApp()
 const { myLayer, commonAuth } = useAppConfig()
 const { t, locale } = useI18n()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
-const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal, twoFactorModal } = useIdModals()
+const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal, twoFactorModal, intermediateState } = useIdModals()
 
 const authApiURL = commonAuth.authApiURL
 

package/components/modals/id/IdModals.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdConfirmAccountOtpModal from '#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'
 import IdConfirmSuccessfulModal from '#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'
 import IdLoginModal from '#adata-ui/components/modals/id/IdLoginModal.vue'

package/components/modals/id/IdNewPasswordModal.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
 const { commonAuth } = useAppConfig()
 const { t, locale } = useI18n()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
 const authApiURL = commonAuth.authApiURL
-const { newPasswordModal, passwordSuccessfulModal } = useIdModals()
+const { newPasswordModal, passwordSuccessfulModal, intermediateState } = useIdModals()
 
 const form = reactive({
   password: '',

package/components/modals/id/IdRecoveryModal.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
 const { commonAuth } = useAppConfig()
 const { t, locale } = useI18n()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
-const { recoveryModal, resetPasswordOtpModal } = useIdModals()
+const { recoveryModal, resetPasswordOtpModal, intermediateState } = useIdModals()
 const authApiURL = commonAuth.authApiURL
 const emailField = ref('')
 const loading = ref(false)

package/components/modals/id/IdRegistrationModal.vue

@@ -1,23 +1,17 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import { PAGES } from '#adata-ui/shared/constans/pages'
-
-import { useAuthStore } from '#adata-ui/stores/auth.store'
-import { computed, reactive, ref } from 'vue'
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
 const route = useRoute()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
 const localePath = useLocalePath()
 const { t, locale } = useI18n()
 const { myLayer, commonAuth }: any = useAppConfig()
 const authApiURL = commonAuth.authApiURL
 const redirectUrl = useCookie('redirect_url')
-const { loginModal, registrationModal, confirmAccountOtpModal } = useIdModals()
+const { loginModal, registrationModal, confirmAccountOtpModal, intermediateState } = useIdModals()
 
 export interface RegistrationForm {
   email: string
@@ -186,6 +180,7 @@ onBeforeUnmount(() => {
     <a-checkbox
       v-model="agreement"
       side="right"
+      name="confirm-agreement"
     >
       <i18n-t keypath="modals.id.register.agreement.text">
         <template #link>

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
 const { t, locale } = useI18n()
 const { commonAuth } = useAppConfig()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
-const { resetPasswordOtpModal, newPasswordModal } = useIdModals()
+const { resetPasswordOtpModal, newPasswordModal, intermediateState } = useIdModals()
 
 const authApiURL = commonAuth.authApiURL
 

package/components/modals/id/IdTwoFactorModal.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
 const { t, locale } = useI18n()
 const { commonAuth } = useAppConfig()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
-const { twoFactorModal } = useIdModals()
+const { twoFactorModal, intermediateState } = useIdModals()
 
 const authApiURL = commonAuth.authApiURL
 

package/components/overlays/side-panel/ASidePanel.vue

@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
+import {useAdaptive} from "~/composables/useAdaptive";
+
+type Side = 'top' | 'right' | 'bottom' | 'left'
+const props = withDefaults(defineProps<{
+  idName?: string
+  hideCloseBtn?: boolean
+  noClose?: boolean
+  side?: Side
+  rerender?: boolean
+  zIndex?: number | 'auto'
+  width?: string
+  height?: string
+  lockScroll?: boolean
+  lockScrollHtml?: boolean
+  hideScrollbar?: boolean
+  overlayColor?: string
+  overlayOpacity?: number
+  overlayDuration?: number
+  panelColor?: string
+  panelDuration?: number
+  transitionName?: string
+  headerClass?: string
+  bodyClass?: string
+  footerClass?: string
+}>(), {
+  idName: "vsp-container",
+  side: "right",
+  zIndex: "auto",
+  width: "auto",
+  height: "auto",
+  lockScroll: true,
+  hideScrollbar: false,
+  overlayColor: "black",
+  overlayOpacity: 0.5,
+  overlayDuration: 500,
+  panelColor: "bg-white dark:bg-gray-900",
+  panelDuration: 300
+})
+
+defineEmits<{
+  (e: 'opened'): void
+  (e: 'closed'): void
+}>()
+const modelValue = defineModel()
+
+let teleportContainer: HTMLDivElement | undefined = undefined
+const panel = ref<HTMLElement | null>(null)
+const overlay = ref<HTMLElement | null>(null)
+const footer = ref<HTMLElement | null>(null)
+const header = ref<HTMLElement | null>(null)
+const body = ref<HTMLElement | null>(null)
+const panelSide = ref<Side>(props.side)
+
+
+const device = useAdaptive()
+
+const zIndex = ref<number>();
+const isBodyAlreadyLocked = ref(false);
+
+const attrs = useAttrs()
+
+const closePanel = () => modelValue.value = false
+
+const lockUnlockBodyScroll = (elem: HTMLElement, lock: boolean) => {
+  if (lock) {
+    setTimeout(() => {
+      disableBodyScroll(elem, {
+        reserveScrollBarGap: true,
+        allowTouchMove: elem && elem !== document.body
+      })
+      disableBodyScroll(elem, {reserveScrollBarGap: true})
+      if (props.lockScrollHtml) document.documentElement.style.overflow = 'hidden'
+    }, 0)
+    return
+  }
+  enableBodyScroll(elem)
+  if (props.lockScrollHtml) document.documentElement.style.removeProperty('overflow')
+}
+
+const getMaxZIndex = () =>
+  Math.max(
+    ...Array.from(document.querySelectorAll('body *'), (el) =>
+      parseFloat(window.getComputedStyle(el).zIndex),
+    ).filter((zIndex) => !Number.isNaN(zIndex)),
+    0,
+  );
+
+onMounted(() => {
+  zIndex.value = props.zIndex === 'auto' ? getMaxZIndex() : props.zIndex
+
+  const alreadyCreatedTarget = document.getElementById(props.idName)
+  if (!!alreadyCreatedTarget) return
+  teleportContainer = document.createElement('div')
+  teleportContainer.setAttribute('id', props.idName)
+  document.body.appendChild(teleportContainer)
+})
+
+onBeforeUnmount(() => {
+  if (props.lockScroll && panel.value && modelValue.value) lockUnlockBodyScroll(panel.value, false)
+  if (teleportContainer) document.body.removeChild(teleportContainer)
+})
+
+watch(() => device.value, () => {
+  panelSide.value = device.value.isTablet || device.value.isSmallTablet ? 'bottom': props.side
+}, { immediate: true })
+
+watch(() => [modelValue.value, panel.value], (newP, oldP) => {
+  const wasShown = oldP ? (oldP[0] as boolean) : false
+  const [isShown, panelEl] = newP
+  const isOpening = isShown
+  const isClosing = wasShown && !isShown
+  if (!panelEl) return
+  if (isOpening) isBodyAlreadyLocked.value = !!document.body.style.overflow
+
+  if (isShown) {
+    if (props.lockScroll) lockUnlockBodyScroll(panelEl, true)
+    return;
+  }
+
+  if (!props.lockScroll || !isClosing || isBodyAlreadyLocked.value) return;
+
+  setTimeout(() => {
+    if (panelEl) lockUnlockBodyScroll(panelEl, false)
+  }, props.panelDuration)
+}, {immediate: true})
+
+const roundedClass = computed(() => {
+  const classes = {
+    left: "rounded-r-xl",
+    right: "rounded-l-xl",
+    top: "rounded-b-xl",
+    bottom: "rounded-t-xl",
+  }
+
+  return classes[panelSide.value]
+})
+
+const overlayStyles = computed(() => ({
+  zIndex: zIndex.value,
+  animationDuration: `${props.overlayDuration}ms`,
+  '--overlay-opacity': props.overlayOpacity,
+  opacity: modelValue.value ? props.overlayOpacity : 0,
+  backgroundColor: props.overlayColor,
+  pointerEvents: !modelValue.value ? 'none' : 'all',
+}));
+
+const panelStyles = computed(() => ({
+  width: ['left', 'right'].includes(panelSide.value) ? props.width : undefined,
+  maxWidth: '100%',
+
+  ...(['top', 'bottom'].includes(panelSide.value)
+    ? {
+      height: device.value.isSmallTablet || device.value.isTablet ? '100%' : props.height,
+      maxHeight: device.value.isMobile ? '90%': '100%',
+    }
+    : {}),
+
+  zIndex: zIndex.value,
+  animationDuration: `${props.panelDuration}ms`,
+
+  ...Object.assign({}, attrs.style),
+}));
+// Mobile swipe
+const positionStart = ref<number>(0)
+const isClose = ref<boolean>(false)
+const modalHeight = ref(0)
+
+const touchstart = (event: TouchEvent) => {
+  isClose.value = false
+  positionStart.value = event.touches[0].clientY
+  modalHeight.value = panel.value?.offsetHeight || 0 // Запоминаем текущую высоту модалки
+}
+
+const touchmove = (event: TouchEvent) => {
+  if (!device.value.isSmallTablet && !device.value.isTablet) return
+  event.preventDefault();
+  const touchPosition = event.touches[0].clientY
+  const step = touchPosition - positionStart.value
+
+  if (step < 0) return // предотвратить движение вверх
+
+  const newHeight = modalHeight.value - step
+  panel.value.style.height = `${newHeight}px`
+  isClose.value = step > 65
+}
+
+const touchend = () => {
+  if (isClose.value) {
+    closePanel()
+  } else {
+    panel.value.style.height = `${modalHeight.value}px`
+  }
+}
+</script>
+
+<template>
+  <client-only>
+    <Teleport :to="`#${idName}`">
+      <div class="vsp-wrapper" :class="[modelValue && 'vsp-wrapper--active']">
+        <Transition name="overlay">
+          <div
+            v-show="modelValue"
+            ref="overlay"
+            class="vsp-overlay fixed top-0 left-0 w-full h-full"
+            :style="overlayStyles"
+            @click="() => (noClose ? undefined: closePanel())"
+          />
+        </Transition>
+        <Transition
+          :name="transitionName || `slide-${panelSide}`"
+          @after-enter="$emit('opened')"
+          @after-leave="$emit('closed')">
+          <div
+            v-if="rerender ? modelValue : true"
+            v-show="rerender ? true: modelValue"
+            ref="panel"
+            class="vsp fixed flex flex-col"
+            :class="[`vsp--${panelSide}-side`, $attrs.class, roundedClass, panelColor]"
+            :style="panelStyles"
+          >
+            <div
+              class="w-full flex justify-center items-center mt-1 lg:hidden"
+              @touchmove="touchmove"
+              @touchstart="touchstart"
+              @touchend="touchend"
+            >
+              <div class="h-1 w-10 bg-[#D9D9D9] rounded m-1" />
+            </div>
+            <div
+              :class="roundedClass"
+              class="absolute w-8 px-2 py-4 bg-blue-700 text-white -left-8 top-8 cursor-pointer lg:block hidden"
+              v-if="!hideCloseBtn"
+              @click="closePanel"
+            >
+              <a-icon-x-mark />
+            </div>
+            <div v-if="!!$slots.header" ref="header"
+                 @touchmove="touchmove"
+                 @touchstart="touchstart"
+                 @touchend="touchend"
+                 :class="[headerClass, 'vsp__header border-b border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']">
+              <slot name="header" :close="closePanel"/>
+            </div>
+            <div
+              ref="body"
+              :class="[
+                  bodyClass,
+                  'vsp__body overflow-y-auto relative flex-grow-1 h-full lg:px-8 p-4',
+                  hideScrollbar ? 'vsp__body--hide-scroll' : '',
+                ]"
+            >
+              <slot name="default" :close="closePanel"/>
+            </div>
+            <div v-if="!!$slots.footer" ref="footer"
+                 :class="[footerClass, 'vsp__footer border-t border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']">
+              <slot name="footer"/>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Teleport>
+  </client-only>
+</template>
+
+<style scoped lang="scss">
+.vsp-wrapper {
+  .vsp {
+    &--right-side,
+    &--left-side {
+      top: 0;
+      height: 100%;
+    }
+
+    &--right-side {
+      right: 0;
+      left: unset;
+    }
+
+    &--left-side {
+      right: unset;
+      left: 0;
+    }
+
+    &--bottom-side,
+    &--top-side {
+      left: 0;
+      width: 100%;
+    }
+
+    &--bottom-side {
+      bottom: 0;
+    }
+
+    &--top-side {
+      top: 0;
+    }
+
+    &__body {
+      &.overflow-y-auto::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &.overflow-y-auto::-webkit-scrollbar-thumb {
+        background: #2C3E5033;
+        border-radius: 6px;
+      }
+
+      &.vsp__body--hide-scroll {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+      }
+    }
+  }
+
+  .overlay-enter-active,
+  .overlay-leave-active {
+    animation: overlay-transition;
+  }
+
+  .overlay-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-right-enter-active,
+  .slide-right-leave-active {
+    animation: slide-right;
+  }
+
+  .slide-right-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-left-enter-active,
+  .slide-left-leave-active {
+    animation: slide-left;
+  }
+
+  .slide-left-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-top-enter-active,
+  .slide-top-leave-active {
+    animation: slide-left;
+  }
+
+  .slide-top-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-top-enter-active,
+  .slide-top-leave-active {
+    animation: slide-top;
+  }
+
+  .slide-top-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-bottom-enter-active,
+  .slide-bottom-leave-active {
+    animation: slide-bottom;
+  }
+
+  .slide-bottom-leave-active {
+    animation-direction: reverse;
+  }
+
+  @keyframes slide-right {
+    0% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-left {
+    0% {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-bottom {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-top {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-top {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes overlay-transition {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: var(--overlay-opacity);
+    }
+  }
+}
+</style>

package/composables/useBuyTariffs.ts

@@ -1,4 +1,4 @@
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 
 export function useBuyTariffs() {
   const { commonAuth } = useAppConfig()

package/composables/useIdModals.ts

@@ -11,6 +11,13 @@ export function useIdModals() {
   const newPasswordModal = useState('new-password-modal', () => false)
   const passwordSuccessfulModal = useState('password-successful-modal', () => false)
 
+  const intermediateState = useState('id-intermediate-state', () => ({
+    email: '',
+    password: '',
+    otp: '',
+    token: '',
+  }))
+
   return {
     loginModal,
     twoFactorModal,
@@ -21,5 +28,6 @@ export function useIdModals() {
     newPasswordModal,
     passwordSuccessfulModal,
     confirmSuccessfulModal,
+    intermediateState,
   }
 }