adata-ui 3.1.50 → 3.1.51

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "failOnWarn": false,
-  "version": "3.1.50",
+  "version": "3.1.51",
   "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, addPlugin, installModule, addImportsDir, hasNuxtModule } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addVitePlugin, addComponentsDir, addPlugin, installModule, addImportsDir, extendViteConfig, setGlobalHead, hasNuxtModule } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -73,6 +73,19 @@ const module = defineNuxtModule({
     });
     addPlugin(resolver.resolve("./runtime/i18n"));
     addImportsDir(resolver.resolve("./runtime/composables"));
+    extendViteConfig((config) => {
+      config.optimizeDeps.include ||= ["qrcode"];
+    });
+    setGlobalHead({
+      script: [
+        {
+          src: "https://widget.tiptoppay.kz/bundles/widget.js",
+          defer: true,
+          async: true,
+          onerror: `console.error("Failed to load script: https://widget.tiptoppay.kz/bundles/widget.js");`
+        }
+      ]
+    });
   }
 });
 

package/dist/runtime/components/SidePanel.vue

@@ -0,0 +1,370 @@
+<script setup>
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import { useAdaptive } from "#adata-ui/composables/useAdaptive";
+import { ref, useAttrs, onMounted, onBeforeUnmount, watch, computed } from "#imports";
+const props = defineProps({
+  idName: { type: String, required: false, default: "vsp-container" },
+  hideCloseBtn: { type: Boolean, required: false },
+  noClose: { type: Boolean, required: false },
+  side: { type: String, required: false, default: "right" },
+  rerender: { type: Boolean, required: false },
+  zIndex: { type: [Number, String], required: false, default: "auto" },
+  width: { type: String, required: false, default: "auto" },
+  height: { type: String, required: false, default: "auto" },
+  lockScroll: { type: Boolean, required: false, default: true },
+  lockScrollHtml: { type: Boolean, required: false },
+  hideScrollbar: { type: Boolean, required: false, default: false },
+  overlayColor: { type: String, required: false, default: "black" },
+  overlayOpacity: { type: Number, required: false, default: 0.5 },
+  overlayDuration: { type: Number, required: false, default: 500 },
+  panelColor: { type: String, required: false, default: "bg-white dark:bg-gray-900" },
+  panelDuration: { type: Number, required: false, default: 300 },
+  transitionName: { type: String, required: false },
+  headerClass: { type: String, required: false },
+  bodyClass: { type: String, required: false },
+  footerClass: { type: String, required: false }
+});
+defineEmits(["opened", "closed"]);
+const modelValue = defineModel();
+let teleportContainer = void 0;
+const panel = ref(null);
+const overlay = ref(null);
+const footer = ref(null);
+const header = ref(null);
+const body = ref(null);
+const panelSide = ref(props.side);
+const device = useAdaptive();
+const zIndex = ref();
+const isBodyAlreadyLocked = ref(false);
+const attrs = useAttrs();
+const closePanel = () => modelValue.value = false;
+const lockUnlockBodyScroll = (elem, lock) => {
+  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) => Number.parseFloat(window.getComputedStyle(el).zIndex)
+  ).filter((zIndex2) => !Number.isNaN(zIndex2)),
+  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] : false;
+  const [isShown, panelEl] = newP;
+  const isOpening = isShown;
+  const isClosing = wasShown && !isShown;
+  if (!panelEl) return;
+  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 : void 0,
+  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)
+}));
+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 = panel.value?.offsetHeight || 0;
+};
+const touchmove = (event) => {
+  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 ? void 0 : 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
+              v-if="!hideCloseBtn"
+              :class="roundedClass"
+              class="absolute w-8 px-2 py-4 bg-blue-700 text-white -left-8 top-8 cursor-pointer lg:block hidden"
+              @click="closePanel"
+            >
+              <i-x-mark />
+            </div>
+            <div
+              v-if="!!$slots.header"
+              ref="header"
+              :class="[headerClass, 'vsp__header border-b border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']"
+              @touchmove="touchmove"
+              @touchstart="touchstart"
+              @touchend="touchend"
+            >
+              <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>
+.vsp-wrapper .vsp--right-side, .vsp-wrapper .vsp--left-side {
+  top: 0;
+  height: 100%;
+}
+.vsp-wrapper .vsp--right-side {
+  right: 0;
+  left: unset;
+}
+.vsp-wrapper .vsp--left-side {
+  right: unset;
+  left: 0;
+}
+.vsp-wrapper .vsp--bottom-side, .vsp-wrapper .vsp--top-side {
+  left: 0;
+  width: 100%;
+}
+.vsp-wrapper .vsp--bottom-side {
+  bottom: 0;
+}
+.vsp-wrapper .vsp--top-side {
+  top: 0;
+}
+.vsp-wrapper .vsp__body.overflow-y-auto::-webkit-scrollbar {
+  width: 8px;
+}
+.vsp-wrapper .vsp__body.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: rgba(44, 62, 80, 0.2);
+  border-radius: 6px;
+}
+.vsp-wrapper .vsp__body.vsp__body--hide-scroll {
+  scrollbar-width: none;
+}
+.vsp-wrapper .vsp__body.vsp__body--hide-scroll::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.vsp-wrapper .overlay-enter-active,
+.vsp-wrapper .overlay-leave-active {
+  animation: overlay-transition;
+}
+.vsp-wrapper .overlay-leave-active {
+  animation-direction: reverse;
+}
+.vsp-wrapper .slide-right-enter-active,
+.vsp-wrapper .slide-right-leave-active {
+  animation: slide-right;
+}
+.vsp-wrapper .slide-right-leave-active {
+  animation-direction: reverse;
+}
+.vsp-wrapper .slide-left-enter-active,
+.vsp-wrapper .slide-left-leave-active {
+  animation: slide-left;
+}
+.vsp-wrapper .slide-left-leave-active {
+  animation-direction: reverse;
+}
+.vsp-wrapper .slide-top-enter-active,
+.vsp-wrapper .slide-top-leave-active {
+  animation: slide-left;
+}
+.vsp-wrapper .slide-top-leave-active {
+  animation-direction: reverse;
+}
+.vsp-wrapper .slide-top-enter-active,
+.vsp-wrapper .slide-top-leave-active {
+  animation: slide-top;
+}
+.vsp-wrapper .slide-top-leave-active {
+  animation-direction: reverse;
+}
+.vsp-wrapper .slide-bottom-enter-active,
+.vsp-wrapper .slide-bottom-leave-active {
+  animation: slide-bottom;
+}
+.vsp-wrapper .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/dist/runtime/components/SidePanel.vue.d.ts

@@ -0,0 +1,68 @@
+type Side = 'top' | 'right' | 'bottom' | 'left';
+type __VLS_Props = {
+    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;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: any;
+};
+declare var __VLS_27: {
+    close: any;
+}, __VLS_29: {
+    close: any;
+}, __VLS_31: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_27) => any;
+} & {
+    default?: (props: typeof __VLS_29) => any;
+} & {
+    footer?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+} & {
+    opened: () => any;
+    closed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    onOpened?: (() => any) | undefined;
+    onClosed?: (() => any) | undefined;
+}>, {
+    side: Side;
+    width: string;
+    idName: string;
+    zIndex: number | "auto";
+    height: string;
+    lockScroll: boolean;
+    hideScrollbar: boolean;
+    overlayColor: string;
+    overlayOpacity: number;
+    overlayDuration: number;
+    panelColor: string;
+    panelDuration: number;
+}, {}, {}, {}, 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/payment/process/PaymentKaspiQrSidePanel.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { toCanvas } from "qrcode";
+import { removeTrailingSlash } from "#adata-ui/utils/removeTrailingSlash";
+import { watch, ref, nextTick } from "vue";
+import { useAppConfig, useColorMode, useCookie, useI18n } from "#imports";
+const props = defineProps({
+  requestUrl: { type: String, required: true },
+  requestId: { type: Number, required: true }
+});
+const emit = defineEmits(["back", "updateUserRate"]);
+const isOpen = defineModel({ default: false });
+const { t, locale } = useI18n();
+const { commonAuth } = useAppConfig();
+const accessToken = useCookie("accessToken");
+const colorMode = useColorMode();
+const userApiURL = commonAuth.userApiURL;
+const paymentSuccess = ref(false);
+let intervalId = null;
+function onBack() {
+  emit("back", "kaspi");
+}
+async function checkPayment() {
+  try {
+    const { data } = await $fetch(`${removeTrailingSlash(userApiURL)}/user/kaspi-balance/invoice-status`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value
+      },
+      params: {
+        request_id: props.requestId,
+        initial: 0
+      }
+    });
+    if (data.status === "completed") {
+      paymentSuccess.value = true;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+}
+watch(isOpen, async (value) => {
+  if (!value) {
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+    return;
+  }
+  await nextTick();
+  const canvas = document.getElementById("kaspiQr");
+  if (!canvas) return;
+  toCanvas(
+    canvas,
+    props.requestUrl,
+    {
+      errorCorrectionLevel: "H",
+      width: 300,
+      margin: 0,
+      color: {
+        dark: colorMode.value === "dark" ? "#FFFFFF" : "#000000",
+        // квадраты
+        light: colorMode.value === "dark" ? "#000000" : "#FFFFFF"
+        // фон
+      }
+    },
+    (error) => {
+      if (error) {
+        console.error(error);
+        return;
+      }
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const logo = new Image();
+      logo.src = "/adata-ui/kaspi/logo.svg";
+      logo.onload = () => {
+        const size = canvas.width * 0.2;
+        const x = (canvas.width - size) / 2;
+        const y = (canvas.height - size) / 2;
+        ctx.fillStyle = colorMode.value === "dark" ? "#000000" : "#fff";
+        ctx.fillRect(x - 6, y - 6, size + 12, size + 12);
+        ctx.drawImage(logo, x, y, size, size);
+      };
+    }
+  );
+  intervalId = setInterval(() => {
+    if (paymentSuccess.value && intervalId) {
+      clearInterval(intervalId);
+      emit("updateUserRate");
+      return;
+    }
+    checkPayment();
+  }, 1e3);
+});
+</script>
+
+<template>
+  <adt-side-panel
+    v-model="isOpen"
+    width="484px"
+  >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <button @click="onBack">
+          <i-chevron-left class="size-6" />
+        </button>
+        <p class="text-xl font-semibold">
+          {{ t("payment.kaspi.title") }}
+        </p>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-center text-center text-black dark:text-white">
+        <p class="mb-4 font-semibold text-sm">
+          {{ t("payment.kaspi.description") }}
+        </p>
+
+        <div class="flex gap-3 items-center">
+          <i-kaspi-qr class="size-16" />
+          <span class="font-bold text-[44px]">
+            {{ t("payment.kaspi.qr") }}
+          </span>
+        </div>
+
+        <p class="mt-5 font-bold text-2xl">
+          {{ t("payment.kaspi.scan") }}
+        </p>
+
+        <canvas
+          id="kaspiQr"
+          class="mt-5"
+        />
+
+        <p class="mt-10 text-lg">
+          {{ t("payment.kaspi.adata") }}
+        </p>
+      </div>
+
+      <adt-button
+        view="outline"
+        @click="onBack"
+      >
+        {{ t("payment.kaspi.changeMethod") }}
+      </adt-button>
+    </div>
+  </adt-side-panel>
+</template>

package/dist/runtime/components/payment/process/PaymentKaspiQrSidePanel.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    requestUrl: string;
+    requestId: number;
+};
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    back: (type: "kaspi") => any;
+    updateUserRate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onBack?: ((type: "kaspi") => any) | undefined;
+    onUpdateUserRate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;