adata-ui 2.1.0 → 2.1.2

package/components/navigation/side-navigation/ASideNavigation.vue

@@ -24,6 +24,7 @@ import IconMedal from "#adata-ui/icons/medal.vue";
 
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 import {PAGES} from "#adata-ui/shared/constans/pages";
+import { useUrls } from '#adata-ui/composables/useUrls'
 
 type Modules = 'counterparty' | 'work' | 'tender' | 'fines' | 'analytics'
 
@@ -43,6 +44,7 @@ const props = withDefaults(defineProps<Props>(), {
   zIndex: 'auto'
 })
 const { myLayer }: any = useAppConfig()
+const urls = useUrls()
 
 const activeModule = ref<Modules | null>(null)
 const bottom = ref<HTMLElement | null>(null)
@@ -98,37 +100,37 @@ const sideLinks = {
     {
       icon: IconSearch,
       label: "Проверка контрагентов",
-      link: myLayer.pkUrl + PAGES.pk.main
+      link: urls.pk + PAGES.pk.main
     },
     {
       icon: IconScales,
       label: "Сравнение контрагентов",
-      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + PAGES.pk.compare : myLayer.pkUrl + PAGES.pk.compare
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.compare : urls.pk + PAGES.pk.compare
     },
     {
       icon: IconLink,
       label: "Косвенные связи",
-      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + '/search-connections/check' : myLayer.pkUrl + PAGES.pk.connections
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + '/search-connections/check' : urls.pk + PAGES.pk.connections
     },
     {
       icon: IconUsers,
       label: "Массовая проверка",
-      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + PAGES.pk.employees : myLayer.pkUrl + PAGES.pk.employees
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.employees : urls.pk + PAGES.pk.employees
     },
     {
       icon: IconGlobe,
       label: "Зарубежные контрагенты",
-      link: myLayer.pkUrl + PAGES.pk.foreign
+      link: urls.pk + PAGES.pk.foreign
     },
     {
       icon: IconBlock,
       label: "Санкции",
-      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + PAGES.pk.sanctions : myLayer.pkUrl + PAGES.pk.sanctions
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.sanctions : urls.pk + PAGES.pk.sanctions
     },
     {
       icon: IconDollar,
       label: "Офшоры",
-      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + PAGES.pk.offshore : myLayer.pkUrl + PAGES.pk.offshore
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.offshore : urls.pk + PAGES.pk.offshore
     },
     {
       icon: IconDocument,
@@ -138,80 +140,80 @@ const sideLinks = {
     {
       icon: IconArrowCircle,
       label: "Выгрузка данных",
-      link: myLayer.pkUrl + PAGES.pk.unload
+      link: urls.pk + PAGES.pk.unload
     }
   ],
   work: [
     {
       icon: IconWork,
       label: "Вакансии",
-      link: myLayer.workUrl + PAGES.work.vacancy
+      link: urls.work + PAGES.work.vacancy
     },
     {
       icon: IconDocument,
       label: "Резюме",
-      link: myLayer.workUrl + PAGES.work.summary
+      link: urls.work + PAGES.work.summary
     },
   ],
   tender: [
     {
       icon: IconSearch,
       label: "Поиск тендеров",
-      link: myLayer.tenderUrl + PAGES.tender.main
+      link: urls.tender + PAGES.tender.main
     },
     {
       icon: IconFile,
       label: "Поиск договоров",
-      link: myLayer.tenderUrl + PAGES.tender.contracts
+      link: urls.tender + PAGES.tender.contracts
     },
     {
       icon: IconCheck,
       label: "Планы закупок",
-      link: myLayer.tenderUrl + PAGES.tender.plans
+      link: urls.tender + PAGES.tender.plans
     }
   ],
   fines: [
     {
       icon: IconCheckCircle,
       label: "Проверка штрафов",
-      link: myLayer.avtoUrl + PAGES.fines.main
+      link: urls.avto + PAGES.fines.main
     },
     {
       icon: IconCar,
       label: "Проверка авто",
-      link: myLayer.avtoUrl + PAGES.fines.avto
+      link: urls.avto + PAGES.fines.avto
     },
     {
       icon: IconTruck,
       label: "Массовая проверка авто",
-      link: myLayer.avtoUrl + PAGES.fines.bulk
+      link: urls.avto + PAGES.fines.bulk
     }
   ],
   analytics: [
     {
       icon: IconSearch,
       label: "Поиск клиентов",
-      link: myLayer.analyticsUrl + PAGES.analytics.clients
+      link: urls.analytics + PAGES.analytics.clients
     },
     {
       icon: IconCheck,
       label: "Анализ закупок",
-      link: myLayer.analyticsUrl + PAGES.analytics.analysis
+      link: urls.analytics + PAGES.analytics.analysis
     },
     {
       icon: IconArrowGraph,
       label: "Индекс деловой активности",
-      link: myLayer.analyticsUrl + PAGES.analytics.index
+      link: urls.analytics + PAGES.analytics.index
     },
     {
       icon: IconCompany,
       label: "Субьекты бизнеса",
-      link: myLayer.analyticsUrl + PAGES.analytics.business
+      link: urls.analytics + PAGES.analytics.business
     },
     {
       icon: IconMedal,
       label: "Рейтинг налогоплательщиков",
-      link: myLayer.analyticsUrl + PAGES.analytics.rating
+      link: urls.analytics + PAGES.analytics.rating
     }
   ],
 }

package/components/overlays/README.md

@@ -1 +1 @@
-# tooltip, popover, slide over, modal, context menu
+# tooltip, popover, slide over, modal, context menu

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>