adata-ui 2.1.19 → 2.1.21

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

@@ -1,406 +1,406 @@
-<script setup lang="ts">
-import Hummer from "#adata-ui/icons/hummer.vue";
-import Work from "#adata-ui/icons/work.vue";
-import Company from "#adata-ui/icons/company.vue";
-import Car from "#adata-ui/icons/car.vue";
-import IconArrowGraph from "#adata-ui/icons/arrow/arrow-graph-up.vue";
-import IconSearch from "#adata-ui/icons/search.vue"
-import IconUsers from "#adata-ui/icons/users.vue";
-import IconDocument from "#adata-ui/icons/hdocument.vue";
-import IconArrowCircle from "#adata-ui/icons/arrow/arrow-circle-down.vue";
-import IconScales from "#adata-ui/icons/scales/scale.vue";
-import IconLink from "#adata-ui/icons/link-chain.vue";
-import IconGlobe from "#adata-ui/icons/globe.vue";
-import IconBlock from "#adata-ui/icons/block.vue";
-import IconWork from "#adata-ui/icons/work-bag.vue";
-import IconDollar from "#adata-ui/icons/currency/currency-dollar.vue";
-import IconFile from "#adata-ui/icons/file/file.vue";
-import IconCheck from "#adata-ui/icons/hcheck.vue";
-import IconCheckCircle from "#adata-ui/icons/check/check-circle.vue";
-import IconCar from "#adata-ui/icons/car.vue";
-import IconTruck from "#adata-ui/icons/truck.vue";
-import IconCompany from "#adata-ui/icons/company.vue";
-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'
-
-interface Props {
-  topMargin?: number
-  width?: string
-  panelDuration: number
-  overlayDuration: number
-  zIndex: number | string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  topMargin: 0,
-  width: 'auto',
-  panelDuration: 300,
-  overlayDuration: 500,
-  zIndex: 'auto'
-})
-const { myLayer }: any = useAppConfig()
-const urls = useUrls()
-
-const activeModule = ref<Modules | null>(null)
-const bottom = ref<HTMLElement | null>(null)
-const bottomHeight = ref(0)
-const windowHeight = ref(0)
-const open = ref(!!activeModule.value)
-
-const calculateSize = () => {
-  if (window?.innerHeight > 0) windowHeight.value = window.innerHeight
-
-  bottomHeight.value = bottom.value ? bottom.value.clientHeight : 0
-}
-
-const sidebarHeight = computed(() => {
-  if (!windowHeight.value) return
-
-  return  windowHeight.value - props.topMargin - bottomHeight.value
-})
-
-const menu = ref<HTMLElement | null>(null)
-const isBodyAlreadyLocked = ref<boolean>(false)
-const zIndex = ref()
-const items = [
-  {
-    label: "Контрагенты",
-    icon: Company,
-    value: "counterparty"
-  },
-  {
-    label: "Работа",
-    icon: Work,
-    value: "work"
-  },
-  {
-    label: "Тендеры",
-    icon: Hummer,
-    value: "tender"
-  },
-  {
-    label: "Штрафы",
-    icon: Car,
-    value: "fines"
-  },
-  {
-    label: "Аналитика",
-    icon: IconArrowGraph,
-    value: "analytics"
-  }
-]
-
-const sideLinks = {
-  counterparty: [
-    {
-      icon: IconSearch,
-      label: "Проверка контрагентов",
-      link: urls.pk + PAGES.pk.main
-    },
-    {
-      icon: IconScales,
-      label: "Сравнение контрагентов",
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.compare : urls.pk + PAGES.pk.compare
-    },
-    {
-      icon: IconLink,
-      label: "Косвенные связи",
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + '/search-connections/check' : urls.pk + PAGES.pk.connections
-    },
-    {
-      icon: IconUsers,
-      label: "Массовая проверка",
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.employees : urls.pk + PAGES.pk.employees
-    },
-    {
-      icon: IconGlobe,
-      label: "Зарубежные контрагенты",
-      link: urls.pk + PAGES.pk.foreign
-    },
-    {
-      icon: IconBlock,
-      label: "Санкции",
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.sanctions : urls.pk + PAGES.pk.sanctions
-    },
-    {
-      icon: IconDollar,
-      label: "Офшоры",
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.offshore : urls.pk + PAGES.pk.offshore
-    },
-    {
-      icon: IconDocument,
-      label: "Экспресс проверка",
-      link: "#"
-    },
-    {
-      icon: IconArrowCircle,
-      label: "Выгрузка данных",
-      link: urls.pk + PAGES.pk.unload
-    }
-  ],
-  work: [
-    {
-      icon: IconWork,
-      label: "Вакансии",
-      link: urls.work + PAGES.work.vacancy
-    },
-    {
-      icon: IconDocument,
-      label: "Резюме",
-      link: urls.work + PAGES.work.summary
-    },
-  ],
-  tender: [
-    {
-      icon: IconSearch,
-      label: "Поиск тендеров",
-      link: urls.tender + PAGES.tender.main
-    },
-    {
-      icon: IconFile,
-      label: "Поиск договоров",
-      link: urls.tender + PAGES.tender.contracts
-    },
-    {
-      icon: IconCheck,
-      label: "Планы закупок",
-      link: urls.tender + PAGES.tender.plans
-    }
-  ],
-  fines: [
-    {
-      icon: IconCheckCircle,
-      label: "Проверка штрафов",
-      link: urls.avto + PAGES.fines.main
-    },
-    {
-      icon: IconCar,
-      label: "Проверка авто",
-      link: urls.avto + PAGES.fines.avto
-    },
-    {
-      icon: IconTruck,
-      label: "Массовая проверка авто",
-      link: urls.avto + PAGES.fines.bulk
-    }
-  ],
-  analytics: [
-    {
-      icon: IconSearch,
-      label: "Поиск клиентов",
-      link: urls.analytics + PAGES.analytics.clients
-    },
-    {
-      icon: IconCheck,
-      label: "Анализ закупок",
-      link: urls.analytics + PAGES.analytics.analysis
-    },
-    {
-      icon: IconArrowGraph,
-      label: "Индекс деловой активности",
-      link: urls.analytics + PAGES.analytics.index
-    },
-    {
-      icon: IconCompany,
-      label: "Субьекты бизнеса",
-      link: urls.analytics + PAGES.analytics.business
-    },
-    {
-      icon: IconMedal,
-      label: "Рейтинг налогоплательщиков",
-      link: urls.analytics + PAGES.analytics.rating
-    }
-  ],
-}
-const currentLinks = ref(sideLinks.counterparty)
-
-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 toggleBodyScroll = (el: HTMLBodyElement | HTMLDivElement, lock: boolean) => {
-  if (lock) {
-    setTimeout(() => {
-      disableBodyScroll(el, { reserveScrollBarGap: true })
-    }, 0)
-    return
-  }
-
-  enableBodyScroll(el)
-  document.documentElement.style.removeProperty('overflow')
-}
-
-watch(() => [
-  bottom.value,
-  props.topMargin,
-  open.value
-], () => {
-  nextTick(() => calculateSize())
-})
-
-watch(
-  () => [open.value, menu.value],
-  (newVal, oldVal) => {
-    const wasShown = oldVal ? oldVal[0] : false
-    const [isShown, menuEl] = newVal
-    const isOpening = isShown
-    const isClosing = wasShown && !isShown
-
-    if (!menuEl) return
-    if (isOpening) isBodyAlreadyLocked.value = !!document.body.style.overflow
-
-    if (isShown) {
-      toggleBodyScroll(menuEl, true)
-      return;
-    }
-
-    if (!isClosing || isBodyAlreadyLocked.value) return;
-
-    setTimeout(() => {
-      if (menuEl) toggleBodyScroll(menuEl, false)
-    }, props.panelDuration)
-  })
-
-watch(activeModule, (e) => {
-  if (e) {
-    currentLinks.value = sideLinks[e]
-  }
-  open.value = !!e;
-})
-
-const overlayStyles = computed(() => ({
-  zIndex: zIndex.value,
-  animationDuration: `${props.overlayDuration}ms`,
-  pointerEvents: !open.value ? 'none' : 'all',
-  top: `${props.topMargin}px`,
-  bottom: `${bottomHeight.value}px`,
-  height: `${sidebarHeight.value}px`,
-}))
-
-const panelStyles = computed(() => ({
-  zIndex: zIndex.value,
-  width: props.width === 'auto' ? '100%': props.width,
-  height: `${sidebarHeight.value}px`,
-  bottom: `${bottomHeight.value}px`,
-  top: `${props.topMargin}px`,
-  animationDuration: `${props.panelDuration}ms`
-}))
-</script>
-
-<template>
-  <div class="lg:hidden">
-    <Transition name="overlay">
-      <div
-        v-show="open"
-        ref="overlay"
-        class="w-full h-full fixed left-0 top-0 backdrop-blur bg-gray-200/20"
-        :style="overlayStyles"
-        @click="activeModule = null"
-      />
-    </Transition>
-    <Transition name="slide">
-      <div
-        v-if="open"
-        ref="menu"
-        class="bg-white dark:bg-gray-900 fixed w-full h-full overflow-y-auto overflow-x-hidden px-4 py-5"
-        :style="panelStyles"
-      >
-        <Transition
-          mode="out-in"
-          name="module-slide"
-        >
-          <div :key="activeModule ? activeModule : 0">
-            <nuxt-link
-              v-for="item in currentLinks"
-              :key="item.label"
-              :to="item.link"
-              class="flex items-center gap-4 px-4 py-3 bg-gray-50 dark:bg-gray-800 mb-2 rounded"
-            >
-              <component
-                :is="item.icon"
-                class="w-6 h-6"
-              />
-              <span>{{ item.label }}</span>
-            </nuxt-link>
-          </div>
-        </Transition>
-      </div>
-    </Transition>
-  </div>
-  <div
-    ref="bottom"
-    class="sticky bottom-0 lg:hidden z-10"
-  >
-    <a-bottom-navigation
-      v-model="activeModule"
-      :items="items"
-      grow
-    />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.slide-enter-active,
-.slide-leave-active {
-  animation: slide-left;
-}
-
-.slide-leave-active {
-  animation-direction: reverse;
-}
-
-.overlay-enter-active,
-.overlay-leave-active {
-  animation: overlay-transition;
-}
-
-.overlay-leave-active {
-  animation-direction: reverse;
-}
-
-.module-slide-enter-active,
-.module-slide-leave-active {
-  transition: .2s ease-in-out;
-}
-
-.module-slide-enter-from,
-.module-slide-leave-to {
-  transform: translateX(50px);
-  opacity: 0;
-}
-
-@keyframes slide-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes overlay-transition {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-</style>
+<script setup lang="ts">
+import Hummer from "#adata-ui/icons/hummer.vue";
+import Work from "#adata-ui/icons/work.vue";
+import Company from "#adata-ui/icons/company.vue";
+import Car from "#adata-ui/icons/car.vue";
+import IconArrowGraph from "#adata-ui/icons/arrow/arrow-graph-up.vue";
+import IconSearch from "#adata-ui/icons/search.vue"
+import IconUsers from "#adata-ui/icons/users.vue";
+import IconDocument from "#adata-ui/icons/hdocument.vue";
+import IconArrowCircle from "#adata-ui/icons/arrow/arrow-circle-down.vue";
+import IconScales from "#adata-ui/icons/scales/scale.vue";
+import IconLink from "#adata-ui/icons/link-chain.vue";
+import IconGlobe from "#adata-ui/icons/globe.vue";
+import IconBlock from "#adata-ui/icons/block.vue";
+import IconWork from "#adata-ui/icons/work-bag.vue";
+import IconDollar from "#adata-ui/icons/currency/currency-dollar.vue";
+import IconFile from "#adata-ui/icons/file/file.vue";
+import IconCheck from "#adata-ui/icons/hcheck.vue";
+import IconCheckCircle from "#adata-ui/icons/check/check-circle.vue";
+import IconCar from "#adata-ui/icons/car.vue";
+import IconTruck from "#adata-ui/icons/truck.vue";
+import IconCompany from "#adata-ui/icons/company.vue";
+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'
+
+interface Props {
+  topMargin?: number
+  width?: string
+  panelDuration: number
+  overlayDuration: number
+  zIndex: number | string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  topMargin: 0,
+  width: 'auto',
+  panelDuration: 300,
+  overlayDuration: 500,
+  zIndex: 'auto'
+})
+const { myLayer }: any = useAppConfig()
+const urls = useUrls()
+
+const activeModule = ref<Modules | null>(null)
+const bottom = ref<HTMLElement | null>(null)
+const bottomHeight = ref(0)
+const windowHeight = ref(0)
+const open = ref(!!activeModule.value)
+
+const calculateSize = () => {
+  if (window?.innerHeight > 0) windowHeight.value = window.innerHeight
+
+  bottomHeight.value = bottom.value ? bottom.value.clientHeight : 0
+}
+
+const sidebarHeight = computed(() => {
+  if (!windowHeight.value) return
+
+  return  windowHeight.value - props.topMargin - bottomHeight.value
+})
+
+const menu = ref<HTMLElement | null>(null)
+const isBodyAlreadyLocked = ref<boolean>(false)
+const zIndex = ref()
+const items = [
+  {
+    label: "Контрагенты",
+    icon: Company,
+    value: "counterparty"
+  },
+  {
+    label: "Работа",
+    icon: Work,
+    value: "work"
+  },
+  {
+    label: "Тендеры",
+    icon: Hummer,
+    value: "tender"
+  },
+  {
+    label: "Штрафы",
+    icon: Car,
+    value: "fines"
+  },
+  {
+    label: "Аналитика",
+    icon: IconArrowGraph,
+    value: "analytics"
+  }
+]
+
+const sideLinks = {
+  counterparty: [
+    {
+      icon: IconSearch,
+      label: "Проверка контрагентов",
+      link: urls.pk + PAGES.pk.main
+    },
+    {
+      icon: IconScales,
+      label: "Сравнение контрагентов",
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.compare : urls.pk + PAGES.pk.compare
+    },
+    {
+      icon: IconLink,
+      label: "Косвенные связи",
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + '/search-connections/check' : urls.pk + PAGES.pk.connections
+    },
+    {
+      icon: IconUsers,
+      label: "Массовая проверка",
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.employees : urls.pk + PAGES.pk.employees
+    },
+    {
+      icon: IconGlobe,
+      label: "Зарубежные контрагенты",
+      link: urls.pk + PAGES.pk.foreign
+    },
+    {
+      icon: IconBlock,
+      label: "Санкции",
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.sanctions : urls.pk + PAGES.pk.sanctions
+    },
+    {
+      icon: IconDollar,
+      label: "Офшоры",
+      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.offshore : urls.pk + PAGES.pk.offshore
+    },
+    {
+      icon: IconDocument,
+      label: "Экспресс проверка",
+      link: "#"
+    },
+    {
+      icon: IconArrowCircle,
+      label: "Выгрузка данных",
+      link: urls.pk + PAGES.pk.unload
+    }
+  ],
+  work: [
+    {
+      icon: IconWork,
+      label: "Вакансии",
+      link: urls.work + PAGES.work.vacancy
+    },
+    {
+      icon: IconDocument,
+      label: "Резюме",
+      link: urls.work + PAGES.work.summary
+    },
+  ],
+  tender: [
+    {
+      icon: IconSearch,
+      label: "Поиск тендеров",
+      link: urls.tender + PAGES.tender.main
+    },
+    {
+      icon: IconFile,
+      label: "Поиск договоров",
+      link: urls.tender + PAGES.tender.contracts
+    },
+    {
+      icon: IconCheck,
+      label: "Планы закупок",
+      link: urls.tender + PAGES.tender.plans
+    }
+  ],
+  fines: [
+    {
+      icon: IconCheckCircle,
+      label: "Проверка штрафов",
+      link: urls.avto + PAGES.fines.main
+    },
+    {
+      icon: IconCar,
+      label: "Проверка авто",
+      link: urls.avto + PAGES.fines.avto
+    },
+    {
+      icon: IconTruck,
+      label: "Массовая проверка авто",
+      link: urls.avto + PAGES.fines.bulk
+    }
+  ],
+  analytics: [
+    {
+      icon: IconSearch,
+      label: "Поиск клиентов",
+      link: urls.analytics + PAGES.analytics.clients
+    },
+    {
+      icon: IconCheck,
+      label: "Анализ закупок",
+      link: urls.analytics + PAGES.analytics.analysis
+    },
+    {
+      icon: IconArrowGraph,
+      label: "Индекс деловой активности",
+      link: urls.analytics + PAGES.analytics.index
+    },
+    {
+      icon: IconCompany,
+      label: "Субьекты бизнеса",
+      link: urls.analytics + PAGES.analytics.business
+    },
+    {
+      icon: IconMedal,
+      label: "Рейтинг налогоплательщиков",
+      link: urls.analytics + PAGES.analytics.rating
+    }
+  ],
+}
+const currentLinks = ref(sideLinks.counterparty)
+
+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 toggleBodyScroll = (el: HTMLBodyElement | HTMLDivElement, lock: boolean) => {
+  if (lock) {
+    setTimeout(() => {
+      disableBodyScroll(el, { reserveScrollBarGap: true })
+    }, 0)
+    return
+  }
+
+  enableBodyScroll(el)
+  document.documentElement.style.removeProperty('overflow')
+}
+
+watch(() => [
+  bottom.value,
+  props.topMargin,
+  open.value
+], () => {
+  nextTick(() => calculateSize())
+})
+
+watch(
+  () => [open.value, menu.value],
+  (newVal, oldVal) => {
+    const wasShown = oldVal ? oldVal[0] : false
+    const [isShown, menuEl] = newVal
+    const isOpening = isShown
+    const isClosing = wasShown && !isShown
+
+    if (!menuEl) return
+    if (isOpening) isBodyAlreadyLocked.value = !!document.body.style.overflow
+
+    if (isShown) {
+      toggleBodyScroll(menuEl, true)
+      return;
+    }
+
+    if (!isClosing || isBodyAlreadyLocked.value) return;
+
+    setTimeout(() => {
+      if (menuEl) toggleBodyScroll(menuEl, false)
+    }, props.panelDuration)
+  })
+
+watch(activeModule, (e) => {
+  if (e) {
+    currentLinks.value = sideLinks[e]
+  }
+  open.value = !!e;
+})
+
+const overlayStyles = computed(() => ({
+  zIndex: zIndex.value,
+  animationDuration: `${props.overlayDuration}ms`,
+  pointerEvents: !open.value ? 'none' : 'all',
+  top: `${props.topMargin}px`,
+  bottom: `${bottomHeight.value}px`,
+  height: `${sidebarHeight.value}px`,
+}))
+
+const panelStyles = computed(() => ({
+  zIndex: zIndex.value,
+  width: props.width === 'auto' ? '100%': props.width,
+  height: `${sidebarHeight.value}px`,
+  bottom: `${bottomHeight.value}px`,
+  top: `${props.topMargin}px`,
+  animationDuration: `${props.panelDuration}ms`
+}))
+</script>
+
+<template>
+  <div class="lg:hidden">
+    <Transition name="overlay">
+      <div
+        v-show="open"
+        ref="overlay"
+        class="w-full h-full fixed left-0 top-0 backdrop-blur bg-gray-200/20"
+        :style="overlayStyles"
+        @click="activeModule = null"
+      />
+    </Transition>
+    <Transition name="slide">
+      <div
+        v-if="open"
+        ref="menu"
+        class="bg-white dark:bg-gray-900 fixed w-full h-full overflow-y-auto overflow-x-hidden px-4 py-5"
+        :style="panelStyles"
+      >
+        <Transition
+          mode="out-in"
+          name="module-slide"
+        >
+          <div :key="activeModule ? activeModule : 0">
+            <nuxt-link
+              v-for="item in currentLinks"
+              :key="item.label"
+              :to="item.link"
+              class="flex items-center gap-4 px-4 py-3 bg-gray-50 dark:bg-gray-800 mb-2 rounded"
+            >
+              <component
+                :is="item.icon"
+                class="w-6 h-6"
+              />
+              <span>{{ item.label }}</span>
+            </nuxt-link>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </div>
+  <div
+    ref="bottom"
+    class="sticky bottom-0 lg:hidden z-10"
+  >
+    <a-bottom-navigation
+      v-model="activeModule"
+      :items="items"
+      grow
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.slide-enter-active,
+.slide-leave-active {
+  animation: slide-left;
+}
+
+.slide-leave-active {
+  animation-direction: reverse;
+}
+
+.overlay-enter-active,
+.overlay-leave-active {
+  animation: overlay-transition;
+}
+
+.overlay-leave-active {
+  animation-direction: reverse;
+}
+
+.module-slide-enter-active,
+.module-slide-leave-active {
+  transition: .2s ease-in-out;
+}
+
+.module-slide-enter-from,
+.module-slide-leave-to {
+  transform: translateX(50px);
+  opacity: 0;
+}
+
+@keyframes slide-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes overlay-transition {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>