adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/features/lang-switcher/lang-switcher.vue

@@ -1,158 +1,160 @@
-<script setup lang="ts">
-import Check from '#adata-ui/icons/check/check.vue'
-import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
-import { onClickOutside } from '@vueuse/core'
-
-type LocaleItem = string | { code: string }
-
-const props = withDefaults(defineProps<{
-  isMobile?: boolean
-}>(), {
-  isMobile: false,
-})
-
-const switchLocalePath = useSwitchLocalePath()
-const { t, locale, locales } = useI18n()
-
-const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
-
-const wrapper = ref<HTMLDivElement | null>(null)
-const reference = ref<HTMLButtonElement | null>(null)
-const floating = ref<HTMLDivElement | null>(null)
-const isOpen = ref(false)
-
-const placement = computed(() => props.isMobile ? 'bottom-end' as const : 'bottom-start' as const)
-
-const { x, y, strategy, update } = useFloating(reference, floating, {
-  placement,
-  strategy: 'absolute',
-  middleware: computed(() => [
-    offset(6),
-    flip({ fallbackPlacements: props.isMobile ? ['top-end'] : ['top-start'] }),
-    shift({ padding: 8 }),
-  ]),
-})
-
-let cleanup: (() => void) | null = null
-watch(isOpen, (open) => {
-  if (open && reference.value && floating.value) {
-    cleanup = autoUpdate(reference.value, floating.value, update)
-  }
-  else {
-    cleanup?.()
-    cleanup = null
-  }
-})
-onUnmounted(() => cleanup?.())
-
-onClickOutside(wrapper, () => {
-  if (isOpen.value) isOpen.value = false
-})
-
-function localeCode(loc: LocaleItem): string {
-  return typeof loc === 'string' ? loc : loc.code
-}
-
-function onSelect(loc: LocaleItem) {
-  isOpen.value = false
-  const code = localeCode(loc)
-  if (code === locale.value) return
-  window.location.assign(switchLocalePath(code))
-}
-</script>
-
-<template>
-  <div ref="wrapper" class="relative">
-    <button
-      ref="reference"
-      type="button"
-      class="inline-flex size-8 items-center justify-center rounded-lg text-body-sm font-semibold text-primary transition-colors duration-150 hover:bg-action-secondary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1"
-      :class="[
-        isOpen
-          ? 'bg-brand-subtle text-brand ring-2 ring-brand-500/20'
-          : '',
-      ]"
-      :data-test-id="`header-switch-language-button${testIdSuffix}`"
-      :aria-expanded="isOpen"
-      aria-haspopup="listbox"
-      @click="isOpen = !isOpen"
-    >
-      {{ t(`lang.${locale}.short`) }}
-    </button>
-
-    <transition
-      enter-active-class="lang-switcher__dropdown-enter-active"
-      enter-from-class="lang-switcher__dropdown-enter-from"
-      enter-to-class="lang-switcher__dropdown-enter-to"
-      leave-active-class="lang-switcher__dropdown-leave-active"
-      leave-from-class="lang-switcher__dropdown-leave-from"
-      leave-to-class="lang-switcher__dropdown-leave-to"
-    >
-      <div
-        v-if="isOpen"
-        ref="floating"
-        class="z-[10000] w-fit rounded-lg border border-default bg-main shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
-        :style="{
-          position: strategy,
-          left: x != null ? `${x}px` : '',
-          top: y != null ? `${y}px` : '',
-        }"
-      >
-        <ul class="flex flex-col gap-1 p-1.5" role="listbox">
-          <li
-            v-for="loc in locales"
-            :key="localeCode(loc)"
-            role="option"
-            :aria-selected="localeCode(loc) === locale"
-          >
-            <nuxt-link
-              :data-test-id="`header-switch-${localeCode(loc)}-language-button${testIdSuffix}`"
-              :to="switchLocalePath(localeCode(loc))"
-              class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-body-md transition-colors duration-100"
-              :class="[
-                localeCode(loc) === locale
-                  ? 'bg-brand-subtle font-medium text-brand'
-                  : 'text-quaternary hover:bg-action-secondary-hover',
-              ]"
-              @click.prevent="onSelect(loc)"
-            >
-              <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
-              <check
-                v-if="localeCode(loc) === locale"
-                class="size-4 shrink-0 text-brand"
-              />
-            </nuxt-link>
-          </li>
-        </ul>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-.lang-switcher__dropdown-enter-active,
-.lang-switcher__dropdown-leave-active {
-  transition:
-    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.lang-switcher__dropdown-enter-from,
-.lang-switcher__dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-.lang-switcher__dropdown-enter-to,
-.lang-switcher__dropdown-leave-from {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .lang-switcher__dropdown-enter-active,
-  .lang-switcher__dropdown-leave-active {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import Check from '#adata-ui/icons/check/check.vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+
+type LocaleItem = string | { code: string }
+
+const props = withDefaults(defineProps<{
+  isMobile?: boolean
+}>(), {
+  isMobile: false,
+})
+
+const switchLocalePath = useSwitchLocalePath()
+const { t, locale, locales } = useI18n()
+
+const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
+
+const wrapper = ref<HTMLDivElement | null>(null)
+const reference = ref<HTMLButtonElement | null>(null)
+const floating = ref<HTMLDivElement | null>(null)
+const isOpen = ref(false)
+
+const placement = computed(() => props.isMobile ? 'bottom-end' as const : 'bottom-start' as const)
+
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement,
+  strategy: 'absolute',
+  middleware: computed(() => [
+    offset(6),
+    flip({ fallbackPlacements: props.isMobile ? ['top-end'] : ['top-start'] }),
+    shift({ padding: 8 }),
+  ]),
+})
+
+let cleanup: (() => void) | null = null
+watch(isOpen, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+onUnmounted(() => cleanup?.())
+
+onClickOutside(wrapper, () => {
+  if (isOpen.value) isOpen.value = false
+})
+
+function localeCode(loc: LocaleItem): string {
+  return typeof loc === 'string' ? loc : loc.code
+}
+
+function onSelect(loc: LocaleItem) {
+  isOpen.value = false
+  const code = localeCode(loc)
+  if (code === locale.value) return
+  window.location.assign(switchLocalePath(code))
+}
+</script>
+
+<template>
+  <div ref="wrapper" class="relative">
+    <button
+      ref="reference"
+      type="button"
+      class="inline-flex size-8 items-center justify-center rounded-lg text-body-sm font-semibold text-primary transition-colors duration-150 hover:bg-action-secondary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1"
+      :class="[
+        isOpen
+          ? 'bg-brand-subtle text-brand ring-2 ring-brand-500/20'
+          : '',
+      ]"
+      :data-test-id="`header-switch-language-button${testIdSuffix}`"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click="isOpen = !isOpen"
+    >
+      {{ t(`lang.${locale}.short`) }}
+    </button>
+
+    <transition
+      enter-active-class="lang-switcher__dropdown-enter-active"
+      enter-from-class="lang-switcher__dropdown-enter-from"
+      enter-to-class="lang-switcher__dropdown-enter-to"
+      leave-active-class="lang-switcher__dropdown-leave-active"
+      leave-from-class="lang-switcher__dropdown-leave-from"
+      leave-to-class="lang-switcher__dropdown-leave-to"
+    >
+      <div
+        v-if="isOpen"
+        ref="floating"
+        class="z-[10000] w-fit rounded-lg border border-default bg-main shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
+        :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
+      >
+        <ul class="flex flex-col gap-1 p-1.5" role="listbox">
+          <li
+            v-for="loc in locales"
+            :key="localeCode(loc)"
+            role="option"
+            :aria-selected="localeCode(loc) === locale"
+          >
+            <!-- Текущий язык — не ссылка: якорь на саму страницу краулеры считают циклической ссылкой -->
+            <span
+              v-if="localeCode(loc) === locale"
+              :data-test-id="`header-switch-${localeCode(loc)}-language-button${testIdSuffix}`"
+              class="flex w-full items-center justify-between gap-3 rounded-md bg-brand-subtle px-3 py-2 text-body-md font-medium text-brand"
+              @click="isOpen = false"
+            >
+              <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
+              <check class="size-4 shrink-0 text-brand" />
+            </span>
+            <nuxt-link
+              v-else
+              :data-test-id="`header-switch-${localeCode(loc)}-language-button${testIdSuffix}`"
+              :to="switchLocalePath(localeCode(loc))"
+              class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-body-md text-quaternary transition-colors duration-100 hover:bg-action-secondary-hover"
+              @click.prevent="onSelect(loc)"
+            >
+              <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
+            </nuxt-link>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.lang-switcher__dropdown-enter-active,
+.lang-switcher__dropdown-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.lang-switcher__dropdown-enter-from,
+.lang-switcher__dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.lang-switcher__dropdown-enter-to,
+.lang-switcher__dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lang-switcher__dropdown-enter-active,
+  .lang-switcher__dropdown-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/features/payment/banner/BasicPlusLimitBanner.vue

@@ -1,84 +1,84 @@
-<script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-
-const props = defineProps<{
-  balance: number
-}>()
-
-const { $toast } = useNuxtApp()
-const { t, locale } = useI18n()
-const { commonAuth } = useAppConfig()
-const accessToken = useCookie('accessToken')
-
-const { topUpSidePanel } = usePayment()
-
-const userApiURL = commonAuth.userApiURL
-
-const isLoading = ref(false)
-
-async function updateUserRate() {
-  try {
-    isLoading.value = true
-    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
-      method: 'PUT',
-      credentials: 'include',
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`,
-        lang: locale.value,
-      },
-      body: {
-        rate_code: 'basic_plus',
-      },
-    })
-    window.location.reload()
-  }
-  catch (error) {
-    $toast.error(error.data.message)
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-function onUpdate() {
-  if (props.balance >= 1000) {
-    updateUserRate()
-  }
-  else {
-    topUpSidePanel.value = true
-  }
-}
-</script>
-
-<template>
-  <div class="bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
-    <div>
-      <p class="mb-2 text-h5">
-        {{ t('modals.id.banners.basicPlusLimit.title') }}
-      </p>
-      <i18n-t
-        keypath="modals.id.banners.basicPlusLimit.subtitle"
-        tag="p"
-        class="text-body-md text-quaternary"
-      >
-        <template #topUp>
-          <button
-            class="font-semibold text-brand"
-            @click="topUpSidePanel = true"
-          >
-            {{ t('modals.id.banners.basicPlusLimit.topUp') }}
-          </button>
-        </template>
-      </i18n-t>
-    </div>
-
-    <a-button
-      size="md"
-      class="self-end"
-      @click="onUpdate"
-      :loading="isLoading"
-    >
-      {{ t('actions.update') }}
-    </a-button>
-  </div>
-</template>
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+
+const props = defineProps<{
+  balance: number
+}>()
+
+const { $toast } = useNuxtApp()
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+const accessToken = useCookie('accessToken')
+
+const { topUpSidePanel } = usePayment()
+
+const userApiURL = commonAuth.userApiURL
+
+const isLoading = ref(false)
+
+async function updateUserRate() {
+  try {
+    isLoading.value = true
+    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      body: {
+        rate_code: 'basic_plus',
+      },
+    })
+    window.location.reload()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function onUpdate() {
+  if (props.balance >= 1000) {
+    updateUserRate()
+  }
+  else {
+    topUpSidePanel.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
+    <div>
+      <p class="mb-2 text-h5">
+        {{ t('modals.id.banners.basicPlusLimit.title') }}
+      </p>
+      <i18n-t
+        keypath="modals.id.banners.basicPlusLimit.subtitle"
+        tag="p"
+        class="text-body-md text-quaternary"
+      >
+        <template #topUp>
+          <button
+            class="font-semibold text-brand"
+            @click="topUpSidePanel = true"
+          >
+            {{ t('modals.id.banners.basicPlusLimit.topUp') }}
+          </button>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onUpdate"
+      :loading="isLoading"
+    >
+      {{ t('actions.update') }}
+    </a-button>
+  </div>
+</template>

package/components/features/payment/banner/PaymentBanner.vue

@@ -1,88 +1,88 @@
-<script setup lang="ts">
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import {removeTrailingSlash} from "#adata-ui/components/utils/removeTrailingSlash";
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const props = defineProps<{
-  balance?: number
-}>()
-
-const { $toast } = useNuxtApp()
-
-const { t, locale } = useI18n()
-const accessToken = useCookie('accessToken')
-
-const { topUpSidePanel } = usePayment()
-const { commonAuth } = useAppConfig()
-
-const { landing } = useUrls()
-const userApiURL = commonAuth.userApiURL
-
-const isLoading = ref(false)
-
-async function updateUserRate() {
-  try {
-    isLoading.value = true
-    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
-      method: 'PUT',
-      credentials: 'include',
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`,
-        lang: locale.value,
-      },
-      body: {
-        rate_code: 'basic_plus',
-      },
-    })
-    window.location.reload()
-  }
-  catch (error) {
-    $toast.error(error.data.message)
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-function onBuy() {
-  if (props.balance && props.balance >= 1000) {
-    updateUserRate()
-  }
-  else {
-    topUpSidePanel.value = true
-  }
-}
-
-</script>
-
-<template>
-  <div class="bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
-    <div>
-      <p class="mb-2 text-h5">
-        {{ t('payment.banner.title') }}
-      </p>
-      <i18n-t
-        keypath="payment.banner.subtitle"
-        tag="p"
-        class="text-body-md text-quaternary"
-      >
-        <template #tariffs>
-          <nuxt-link
-            class="font-semibold text-brand"
-            :to="buildLocalizedUrl(locale, landing, '/tariffs')"
-          >
-            {{ t('payment.banner.tariffs') }}
-          </nuxt-link>
-        </template>
-      </i18n-t>
-    </div>
-
-    <a-button
-      size="md"
-      class="self-end"
-      @click="onBuy"
-    >
-      {{ t('actions.buy') }}
-    </a-button>
-  </div>
-</template>
+<script setup lang="ts">
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import {removeTrailingSlash} from "#adata-ui/components/utils/removeTrailingSlash";
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const props = defineProps<{
+  balance?: number
+}>()
+
+const { $toast } = useNuxtApp()
+
+const { t, locale } = useI18n()
+const accessToken = useCookie('accessToken')
+
+const { topUpSidePanel } = usePayment()
+const { commonAuth } = useAppConfig()
+
+const { landing } = useUrls()
+const userApiURL = commonAuth.userApiURL
+
+const isLoading = ref(false)
+
+async function updateUserRate() {
+  try {
+    isLoading.value = true
+    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      body: {
+        rate_code: 'basic_plus',
+      },
+    })
+    window.location.reload()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function onBuy() {
+  if (props.balance && props.balance >= 1000) {
+    updateUserRate()
+  }
+  else {
+    topUpSidePanel.value = true
+  }
+}
+
+</script>
+
+<template>
+  <div class="bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
+    <div>
+      <p class="mb-2 text-h5">
+        {{ t('payment.banner.title') }}
+      </p>
+      <i18n-t
+        keypath="payment.banner.subtitle"
+        tag="p"
+        class="text-body-md text-quaternary"
+      >
+        <template #tariffs>
+          <nuxt-link
+            class="font-semibold text-brand"
+            :to="buildLocalizedUrl(locale, landing, '/tariffs')"
+          >
+            {{ t('payment.banner.tariffs') }}
+          </nuxt-link>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onBuy"
+    >
+      {{ t('actions.buy') }}
+    </a-button>
+  </div>
+</template>