adata-ui 3.1.36 → 3.1.37

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "failOnWarn": false,
-  "version": "3.1.36",
+  "version": "3.1.37",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { defu } from 'defu';
-import { defineNuxtModule, createResolver, addVitePlugin, addComponentsDir, installModule, addPlugin, hasNuxtModule } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addVitePlugin, addComponentsDir, addPlugin, installModule, hasNuxtModule } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -49,6 +49,16 @@ const module = defineNuxtModule({
       path: resolver.resolve("./runtime/icons"),
       prefix: "I"
     });
+    _nuxt.options.alias["#adata-ui"] = resolver.resolve("./runtime");
+    _nuxt.options.alias["#illustrations"] = resolver.resolve("./runtime/illustrations");
+    addComponentsDir({
+      path: resolver.resolve("./runtime/illustrations"),
+      prefix: "Ill"
+    });
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/toast.client.ts"),
+      mode: "client"
+    });
     await installModule("@nuxtjs/i18n", {
       defaultLocale: "ru",
       strategy: "prefix_except_default"

package/dist/runtime/components/Header.vue

@@ -8,6 +8,7 @@ import { useI18n, ref, onBeforeMount, useAppConfig, useRuntimeConfig } from "#im
 import ILogout from "#icons/navigation/logout.vue";
 import IAdata from "#icons/logo/adata.vue";
 import LangSwitcher from "./header/LangSwitcher.vue";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
 const { localize, isColorModeActive } = useRuntimeConfig().public.adataUI;
 const props = defineProps({
   replenish: { type: String, required: false },
@@ -26,11 +27,16 @@ const props = defineProps({
 });
 const emit = defineEmits(["logout", "search", "login"]);
 const { t } = useI18n();
-const appConfig = useAppConfig();
-const mode = appConfig.adataUI.mode;
+const { adataUI } = useAppConfig();
+const { mode, authMode } = adataUI;
+const { loginModal } = useIdModals();
 const langIsOn = false;
 const contacts = ref(useContacts());
 const goAuth = () => {
+  if (authMode === "local") {
+    loginModal.value = true;
+    return;
+  }
   if (window) {
     emit("login");
     let fullPath = props.redirectAfterLogin ?? encodeURIComponent(window.location.toString());

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,286 @@
+<script setup>
+import { watch, ref, computed, useSlots, onBeforeMount, nextTick } from "#imports";
+import { twJoin, twMerge } from "tailwind-merge";
+import { onClickOutside, useWindowSize } from "@vueuse/core";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+const uiConfig = {
+  wrapper: "modal-wrapper relative z-[10001]",
+  overlay: {
+    base: "fixed inset-0 transition-opacity ",
+    background: "bg-deepblue-900/20 dark:bg-white/20 backdrop-blur",
+    transition: {
+      "enter-active-class": "ease-out duration-300",
+      "enter-from-class": "opacity-0",
+      "enter-to-class": "opacity-100",
+      "leave-active-class": "ease-in duration-200",
+      "leave-from-class": "opacity-100",
+      "leave-to-class": "opacity-0"
+    }
+  },
+  base: "base-modal max-h-full fixed text-deepblue-900 dark:text-gray-200 text-left rtl:text-right flex flex-col max-w-full sm:max-h-[calc(100%-48px)]",
+  position: "top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2",
+  padding: "p-8",
+  background: "bg-white dark:bg-gray-900",
+  rounded: "rounded-lg",
+  fullscreen: "w-screen h-screen rounded-none",
+  mobile: {
+    width: "w-screen",
+    position: "bottom-0 left-0 transition-transform",
+    padding: "px-4 sm:pb-8 pb-4 pt-3",
+    rounded: "rounded-t-2xl"
+  },
+  transition: {
+    desktop: {
+      "enter-active-class": "ease-out duration-300",
+      "enter-from-class": "opacity-0 bg",
+      "enter-to-class": "opacity-100",
+      "leave-active-class": "ease-in duration-200",
+      "leave-from-class": "opacity-100",
+      "leave-to-class": "opacity-0"
+    },
+    mobile: {
+      "enter-active-class": "transition-transform ease-in-out duration-300",
+      "leave-active-class": "transition-transform ease-in-out duration-200",
+      "enter-from-class": "translate-y-[100%]",
+      "leave-to-class": "translate-y-[100%]"
+    }
+  }
+};
+const props = defineProps({
+  title: { type: String, required: false, default: "" },
+  transition: { type: Boolean, required: false, default: true },
+  overlay: { type: Boolean, required: false, default: true },
+  preventClose: { type: Boolean, required: false, default: false },
+  fullscreen: { type: Boolean, required: false, default: false },
+  name: { type: String, required: false, default: "modal" },
+  isScrollable: { type: Boolean, required: false, default: false },
+  width: { type: [String, Number], required: false, default: 424 },
+  heightModalClass: { type: String, required: false, default: "" }
+});
+const content = ref();
+const emit = defineEmits(["close"]);
+const slots = useSlots();
+const { width: windowWidth } = useWindowSize();
+const modelValue = defineModel({ type: Boolean });
+let teleportContainer;
+const modal = ref(null);
+const isMobile = computed(() => windowWidth.value < 1025);
+const wrapperClasses = uiConfig.wrapper;
+const overlayClasses = computed(() => !props.overlay || twMerge(twJoin(uiConfig.overlay.base, uiConfig.overlay.background)));
+const baseClasses = computed(() => twMerge(twJoin(
+  uiConfig.base,
+  uiConfig.background,
+  props.heightModalClass,
+  props.fullscreen ? uiConfig.fullscreen : "",
+  isMobile.value ? uiConfig.mobile.padding : uiConfig.padding,
+  isMobile.value ? uiConfig.mobile.rounded : uiConfig.rounded,
+  isMobile.value ? uiConfig.mobile.width : "",
+  isMobile.value ? uiConfig.mobile.position : uiConfig.position
+)));
+const transitionClasses = computed(() => {
+  return {
+    overlay: props.transition ? uiConfig.overlay.transition : {},
+    base: props.transition ? !isMobile.value ? uiConfig.transition.desktop : uiConfig.transition.mobile : {}
+  };
+});
+const modalStyles = computed(() => {
+  if (props.fullscreen || isMobile.value) return;
+  return ` width: ${props.width}${typeof props.width === "number" ? "px" : ""}`;
+});
+const onClose = () => {
+  modelValue.value = false;
+  emit("close");
+};
+onClickOutside(modal, () => props.preventClose || onClose());
+const hasSlot = (name) => {
+  return Boolean(slots[name]);
+};
+const hasFooter = computed(() => {
+  return hasSlot("footer");
+});
+const hasHeader = computed(() => {
+  return props.title || hasSlot("header");
+});
+const hasContent = computed(() => {
+  return Boolean(slots.default);
+});
+onBeforeMount(() => {
+  const alreadyCreatedTarget = document.getElementById(props.name);
+  if (alreadyCreatedTarget) return;
+  teleportContainer = document.createElement("div");
+  teleportContainer.setAttribute("id", props.name);
+  document.body.appendChild(teleportContainer);
+});
+const positionStart = ref(0);
+const isClose = ref(false);
+const modalHeight = ref(0);
+const touchstart = (event) => {
+  isClose.value = false;
+  positionStart.value = event.touches[0].clientY;
+  modalHeight.value = modal.value?.offsetHeight || 0;
+};
+const touchmove = (event) => {
+  if (!isMobile.value) return;
+  event.preventDefault();
+  const touchPosition = event.touches[0].clientY;
+  const step = touchPosition - positionStart.value;
+  if (step < 0) return;
+  const newHeight = modalHeight.value - step;
+  modal.value.style.height = `${newHeight}px`;
+  isClose.value = step > 65;
+};
+const touchend = () => {
+  if (isClose.value) {
+    onClose();
+  } else {
+    modal.value.style.height = `${modalHeight.value}px`;
+  }
+};
+const toggleBodyScroll = (lock) => {
+  if (!content.value) return;
+  if (lock) {
+    setTimeout(() => {
+      disableBodyScroll(content.value, {
+        reserveScrollBarGap: true,
+        allowTouchMove: (el) => {
+          return el && modal.value?.contains(el);
+        }
+        // allowTouchMove: (el: EventTarget | null): boolean => {
+        //   if (!el || !content.value) return false;
+        //
+        //   // Функция проверки, есть ли у элемента вертикальный скролл
+        //   const hasScroll = (el: HTMLElement | null): boolean => {
+        //     if (!el) return false;
+        //     return el.scrollHeight > el.clientHeight;
+        //   };
+        //
+        //   // Функция поиска блока с position: absolute
+        //   const findAbsoluteBlock = (el: HTMLElement | null): HTMLElement | null => {
+        //     while (el && el !== content.value) {
+        //       const style = window.getComputedStyle(el);
+        //       if (style.position === 'absolute') return el; // Возвращаем найденный absolute-элемент
+        //       el = el.parentElement;
+        //     }
+        //     return null;
+        //   };
+        //
+        //   // Проверяем, есть ли у родителя absolute-позиционирование
+        //   const someParentHasScroll = (el: HTMLElement | null, maxParentEl: HTMLElement | null): boolean => {
+        //     while (el && maxParentEl && el !== maxParentEl) {
+        //       if (hasScroll(el)){
+        //         return true
+        //       } // Если нашли родителя со скроллом, возвращаем true
+        //       el = el?.parentElement;
+        //     }
+        //     return false; // Если не нашли, возвращаем false
+        //   };
+        //
+        //   const absoluteBlock = findAbsoluteBlock(el as HTMLElement);
+        //
+        //
+        //   // Проверяем наличие скролла у основного контента
+        //   const contentHasScroll = hasScroll(content.value);
+        //
+        //   // Проверка на то, что элемент находится внутри модального контента
+        //   const isInsideModal = content.value.contains(el as Node);
+        //
+        //
+        //   return (contentHasScroll && isInsideModal) || (isInsideModal && absoluteBlock && someParentHasScroll(el, absoluteBlock));
+        // }
+        //
+      });
+    }, 0);
+  } else {
+    enableBodyScroll(content.value);
+  }
+};
+watch(modelValue, async (newValue) => {
+  if (newValue) {
+    await nextTick();
+    toggleBodyScroll(true);
+  } else {
+    toggleBodyScroll(false);
+  }
+});
+</script>
+
+<template>
+  <client-only>
+    <teleport :to="`#${name}`">
+      <div
+        :class="wrapperClasses"
+      >
+        <Transition
+          name="overlay"
+          v-bind="transitionClasses.overlay"
+        >
+          <div
+            v-show="modelValue"
+            ref="overlay"
+            :class="overlayClasses"
+          />
+        </Transition>
+        <Transition
+          name="modal"
+          v-bind="transitionClasses.base"
+        >
+          <div
+            v-if="modelValue"
+            class="fixed overflow-y-auto inset-0"
+          >
+            <div
+              ref="modal"
+              :class="baseClasses"
+              :style="modalStyles"
+            >
+              <div
+                v-if="isMobile"
+                class="w-full flex justify-center items-center -mt-3 pt-3 mb-2"
+                @touchmove="touchmove"
+                @touchstart="touchstart"
+                @touchend="touchend"
+              >
+                <div class="h-1 w-10 bg-[#D9D9D9] rounded m-1" />
+              </div>
+              <div
+                class="flex flex-col gap-5"
+                :class="isScrollable ? 'overflow-x-hidden' : ''"
+              >
+                <div
+                  v-if="hasHeader"
+                  class="top"
+                >
+                  <h4
+                    v-if="title"
+                    class="heading-02 text-center"
+                    @touchmove="touchmove"
+                    @touchstart="touchstart"
+                    @touchend="touchend"
+                  >
+                    {{ title }}
+                  </h4>
+                  <div v-if="!!$slots.header">
+                    <slot name="header" />
+                  </div>
+                </div>
+                <div
+                  v-if="hasContent"
+                  ref="content"
+                  class="grow"
+                  :class="isScrollable ? 'overflow-x-hidden' : ''"
+                >
+                  <slot />
+                </div>
+                <div
+                  v-if="hasFooter"
+                >
+                  <slot name="footer" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </teleport>
+  </client-only>
+</template>

package/dist/runtime/components/Modal.vue.d.ts

@@ -0,0 +1,41 @@
+interface Props {
+    title?: string;
+    transition?: boolean;
+    overlay?: boolean;
+    preventClose?: boolean;
+    fullscreen?: boolean;
+    name?: string;
+    isScrollable?: boolean;
+    width?: string | number;
+    heightModalClass?: string;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: boolean;
+};
+declare var __VLS_18: {}, __VLS_20: {}, __VLS_22: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_18) => any;
+} & {
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    footer?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+    name: string;
+    transition: boolean;
+    title: string;
+    overlay: boolean;
+    preventClose: boolean;
+    fullscreen: boolean;
+    isScrollable: boolean;
+    width: string | number;
+    heightModalClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/header/ListItem.vue.d.ts

@@ -1,4 +1,4 @@
-import type { NavChildItem } from '~/src/runtime/components/header/types';
+import type { NavChildItem } from '#adata-ui/components/header/types';
 type __VLS_Props = {
     item: NavChildItem;
     someHovered: boolean;

package/dist/runtime/components/mobile-navigation/BottomNavigation.vue

@@ -1,13 +1,15 @@
 <script setup>
 import { useAppConfig, useI18n } from "#imports";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
 const props = defineProps({
   items: { type: Array, required: true },
   hasNotification: { type: Boolean, required: false },
   isAuthenticated: { type: Boolean, required: true }
 });
 const activeModel = defineModel({ type: String, ...{ default: "" } });
-const appConfig = useAppConfig();
-const mode = appConfig.adataUI.mode;
+const { adataUI } = useAppConfig();
+const { mode, authMode } = adataUI;
+const { loginModal } = useIdModals();
 const { t } = useI18n();
 function pushItem(value) {
   if (value === activeModel.value) value = "";
@@ -17,6 +19,10 @@ function pushProfile() {
   if (props.isAuthenticated) {
     pushItem("profile");
   } else {
+    if (authMode === "local") {
+      loginModal.value = true;
+      return;
+    }
     const fullPath = encodeURIComponent(window.location.toString());
     location.href = `https://id.${mode}.kz/?url=${fullPath}`;
   }

package/dist/runtime/components/modals/NoAccessContent.vue

@@ -3,15 +3,21 @@ import AButton from "../button/Button.vue";
 import { useAppConfig, useI18n } from "#imports";
 import { navigateTo } from "#app";
 import { useLocalePath } from "#i18n";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
 const props = defineProps({
   redirectPath: { type: String, required: true }
 });
 const emit = defineEmits(["close"]);
 const { t } = useI18n();
-const appConfig = useAppConfig();
-const mode = appConfig.adataUI.mode;
+const { adataUI } = useAppConfig();
+const { mode, authMode } = adataUI;
 const localePath = useLocalePath();
+const { loginModal } = useIdModals();
 function logIn() {
+  if (authMode === "local") {
+    loginModal.value = true;
+    return;
+  }
   const fullPath = encodeURIComponent(window.location.toString());
   return navigateTo(localePath(`https://id.${mode}.kz/?url=${fullPath}${props.redirectPath}`), { external: true });
 }

package/dist/runtime/components/modals/id/IdAccessModal.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { useAppConfig, useI18n } from "#imports";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
+import { useUrls } from "#adata-ui/utils/useUrls";
+const emit = defineEmits(["close"]);
+const { t } = useI18n();
+const { adataUI } = useAppConfig();
+const { login } = useUrls();
+const { accessModal, loginModal, registrationModal } = useIdModals();
+function goAuth() {
+  if (adataUI.authMode === "local") {
+    accessModal.value = false;
+    loginModal.value = true;
+    return;
+  }
+  if (window) {
+    let fullPath = encodeURIComponent(window.location.toString());
+    if (fullPath.includes("basic-info")) {
+      fullPath = fullPath.replace("%2Fcounterparty%2Fmain", "").replace("%2Fbasic-info", "");
+    }
+    window.location.href = `${login}?url=${fullPath}`;
+  }
+}
+function goRegister() {
+  if (adataUI.authMode === "local") {
+    accessModal.value = false;
+    registrationModal.value = true;
+    return;
+  }
+  if (window) {
+    let fullPath = encodeURIComponent(window.location.toString());
+    if (fullPath.includes("basic-info")) {
+      fullPath = fullPath.replace("%2Fcounterparty%2Fmain", "").replace("%2Fbasic-info", "");
+    }
+    window.location.href = `${login}register?url=${fullPath}`;
+  }
+}
+</script>
+
+<template>
+  <adt-modal
+    v-model="accessModal"
+    :title="t('modals.auth.title')"
+  >
+    <div class="flex flex-col items-center gap-5 text-center text-sm">
+      <ill-door />
+      <div>{{ t("modals.auth.content") }}</div>
+      <adt-button
+        block
+        variant="success"
+        @click="goAuth"
+      >
+        {{ t("modals.buttons.logIn") }}
+      </adt-button>
+      <div>{{ t("modals.auth.firstTime") }}</div>
+    </div>
+    <template #footer>
+      <div class="flex gap-2">
+        <adt-button
+          view="outline"
+          block
+          @click="emit('close')"
+        >
+          {{ t("modals.buttons.close") }}
+        </adt-button>
+        <adt-button
+          block
+          @click="goRegister"
+        >
+          {{ t("modals.buttons.register") }}
+        </adt-button>
+      </div>
+    </template>
+  </adt-modal>
+</template>

package/dist/runtime/components/modals/id/IdAccessModal.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/modals/id/IdBanner.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { useI18n } from "#imports";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
+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.banners.auth.title") }}
+      </p>
+      <i18n-t
+        keypath="modals.id.banners.auth.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.banners.auth.register") }}
+          </button>
+        </template>
+      </i18n-t>
+    </div>
+
+    <adt-button
+      size="md"
+      class="self-end"
+      @click="onRegister"
+    >
+      {{ t("actions.register") }}
+    </adt-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/dist/runtime/components/modals/id/IdBanner.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;