adata-ui 2.1.41-beta.7 → 2.1.41-beta.9

package/components/elements/error-template/index.vue

@@ -1,119 +1,121 @@
-<script setup lang="ts">
-import { AIconArrowLeft, AIconHome } from '#components'
-
-interface Props {
-  statusCode: number
-  homePath?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  homePath: '/',
-})
-
-const { t } = useI18n()
-const localePath = useLocalePath()
-const router = useRouter()
-
-const errorTitle = computed(() => t(`errorPage.${props.statusCode}.title`))
-const errorSubTitle = computed(() => t(`errorPage.${props.statusCode}.subTitle`))
-
-function goToMainPage() {
-  return navigateTo(`${localePath(props.homePath)}`, { external: true })
-}
-
-function goBack() {
-  if (import.meta.client && window.history.length > 1) {
-    router.back()
-  }
-  else {
-    return navigateTo(`${localePath(props.homePath)}`, { external: true })
-  }
-}
-</script>
-
-<template>
-  <div class="relative flex min-h-screen flex-col items-center justify-center gap-6 px-4 text-center">
-    <div class="pointer-events-none absolute inset-0 -z-10 flex items-center justify-center">
-      <div class="error-gradient" />
-    </div>
-
-    <p class="text-overline text-secondary uppercase tracking-widest">
-      {{ t('errorPage.error') }} {{ statusCode }}
-    </p>
-    <p class="bignum text-[90px] leading-none md:text-[210px]">
-      {{ statusCode }}
-    </p>
-    <h1 class="text-h2 md:text-display-lg">
-      {{ errorTitle }}
-    </h1>
-    <h2 class="text-body-md md:text-body-lg text-secondary max-w-[560px]">
-      {{ errorSubTitle }}
-    </h2>
-    <slot name="button">
-      <div class="flex w-full flex-col gap-3 md:w-fit md:flex-row md:gap-4">
-        <a-button-v2
-          :icon="AIconHome"
-          size="lg"
-          rounded="md"
-          block
-          @click="goToMainPage"
-        >
-          {{ t('actions.goToMainPage') }}
-        </a-button-v2>
-        <a-button-v2
-          :icon="AIconArrowLeft"
-          view="outline"
-          color="gray"
-          size="lg"
-          rounded="md"
-          block
-          @click="goBack"
-        >
-          {{ t('actions.back') }}
-        </a-button-v2>
-      </div>
-    </slot>
-  </div>
-</template>
-
-<style scoped>
-.error-gradient {
-  width: 760px;
-  height: 520px;
-  max-width: 90vw;
-  background: color-mix(in srgb, var(--color-brand-500) 18%, transparent);
-  filter: blur(80px);
-  border-radius: 50%;
-}
-
-.dark .error-gradient {
-  background: color-mix(in srgb, var(--color-brand-500) 14%, transparent);
-  filter: blur(130px);
-}
-
-.bignum {
-  position: relative;
-  font-weight: 700;
-  letter-spacing: -0.04em;
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--color-brand-500) 50%, transparent) 0%,
-    color-mix(in srgb, var(--color-brand-500) 50%, transparent) 50%,
-    color-mix(in srgb, var(--color-brand-500) 12%, transparent) 100%
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-}
-
-.dark .bignum {
-  background: linear-gradient(
-    180deg,
-    var(--color-brand-400) 0%,
-    var(--color-brand-400) 50%,
-    color-mix(in srgb, var(--color-brand-400) 28%, transparent) 100%
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-}
-</style>
+<script setup lang="ts">
+import { AIconArrowLeft, AIconHome } from '#components'
+
+interface Props {
+  statusCode: number
+  homePath?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  homePath: '/',
+})
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+const router = useRouter()
+
+const errorTitle = computed(() => t(`errorPage.${props.statusCode}.title`))
+const errorSubTitle = computed(() => t(`errorPage.${props.statusCode}.subTitle`))
+
+function goToMainPage() {
+  return navigateTo(`${localePath(props.homePath)}`, { external: true })
+}
+
+function goBack() {
+  if (import.meta.client && window.history.length > 1) {
+    router.back()
+  }
+  else {
+    return navigateTo(`${localePath(props.homePath)}`, { external: true })
+  }
+}
+</script>
+
+<template>
+  <div class="relative flex min-h-screen flex-col items-center justify-center gap-6 px-4 text-center">
+    <div class="pointer-events-none absolute inset-0 -z-10 flex items-center justify-center">
+      <div class="error-gradient" />
+    </div>
+
+    <p class="text-overline text-secondary uppercase tracking-widest">
+      {{ t('errorPage.error') }} {{ statusCode }}
+    </p>
+    <p class="bignum text-[90px] leading-none md:text-[210px]">
+      {{ statusCode }}
+    </p>
+    <h1 class="text-h2 md:text-display-lg">
+      {{ errorTitle }}
+    </h1>
+    <h2 class="text-body-md md:text-body-lg text-secondary max-w-[560px]">
+      {{ errorSubTitle }}
+    </h2>
+    <slot name="button">
+      <div class="flex w-full flex-col gap-3 md:w-fit md:flex-row md:gap-4">
+        <a-button-v2
+          :icon="AIconHome"
+          size="lg"
+          rounded="md"
+          block
+          @click="goToMainPage"
+        >
+          {{ t('actions.goToMainPage') }}
+        </a-button-v2>
+
+        <a-button-v2
+          v-if="![404, 500, 502, 503, 504].includes(statusCode)"
+          :icon="AIconArrowLeft"
+          view="outline"
+          color="gray"
+          size="lg"
+          rounded="md"
+          block
+          @click="goBack"
+        >
+          {{ t('actions.back') }}
+        </a-button-v2>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.error-gradient {
+  width: 760px;
+  height: 520px;
+  max-width: 90vw;
+  background: color-mix(in srgb, var(--color-brand-500) 18%, transparent);
+  filter: blur(80px);
+  border-radius: 50%;
+}
+
+.dark .error-gradient {
+  background: color-mix(in srgb, var(--color-brand-500) 14%, transparent);
+  filter: blur(130px);
+}
+
+.bignum {
+  position: relative;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-brand-500) 50%, transparent) 0%,
+    color-mix(in srgb, var(--color-brand-500) 50%, transparent) 50%,
+    color-mix(in srgb, var(--color-brand-500) 12%, transparent) 100%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+.dark .bignum {
+  background: linear-gradient(
+    180deg,
+    var(--color-brand-400) 0%,
+    var(--color-brand-400) 50%,
+    color-mix(in srgb, var(--color-brand-400) 28%, transparent) 100%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+</style>

package/components/elements/feature-description/AFeatureDescription.vue

@@ -1,112 +1,112 @@
-<script setup lang="ts">
-interface FeatureInfo {
-  icon: Component
-  title: string
-  description: string
-}
-
-const props = defineProps<{
-  features: FeatureInfo[]
-}>()
-
-const selected = defineModel<number>({ default: 0 })
-const duration = 5000
-let timer: ReturnType<typeof setTimeout> | null = null
-
-const nextFeature = () => {
-  selected.value = (selected.value + 1) % props.features.length
-  startTimer()
-}
-
-const startTimer = () => {
-  clearTimer()
-  timer = setTimeout(() => {
-    nextFeature()
-  }, duration)
-}
-
-const clearTimer = () => {
-  if (timer) {
-    clearTimeout(timer)
-    timer = null
-  }
-}
-
-function selectFeature(idx: number) {
-  selected.value = idx
-  startTimer()
-}
-
-onMounted(() => startTimer())
-onUnmounted(() => clearTimer())
-</script>
-
-<template>
-  <div
-    v-for="(item, idx) in features"
-    :key="idx"
-    class="relative flex flex-col pl-3 cursor-pointer"
-    @click="selectFeature(idx)"
-  >
-    <div
-      v-if="selected === idx"
-      class="absolute left-0 top-0 z-20 h-full w-[2px] rounded-full bg-brand"
-      :class="{ 'fill-animation': selected === idx }"
-    />
-
-    <div
-      class="absolute left-0 top-0 z-10 h-full w-[2px] rounded-full bg-(--border-color-strong)/50"
-    />
-
-    <div class="flex items-center gap-2 relative z-10">
-      <div
-        :class="[
-          'transition-all duration-300 ease-in-out',
-          selected === idx ? 'rounded-sm bg-action-primary p-2 icon-bg' : 'size-fit'
-        ]"
-      >
-        <component
-          :is="item.icon"
-          class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
-          :class="selected === idx ? 'text-action-primary-fg' : 'text-quaternary'"
-        />
-      </div>
-      <p
-        class="text-body-lg-strong lg:text-h3 transition-colors duration-300 ease-in-out"
-        :class="selected === idx ? '' : 'text-quaternary'"
-      >
-        {{ item.title }}
-      </p>
-    </div>
-
-    <a-transition-height
-      :transition="{
-        enterActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out',
-        leaveActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out'
-      }"
-    >
-      <div
-        v-if="selected === idx"
-      >
-        <p class="text-body-sm lg:text-body-md pt-3">
-          {{ item.description }}
-        </p>
-      </div>
-    </a-transition-height>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.icon-bg {
-  box-shadow: -4px 4px 0 0 color-mix(in srgb, var(--background-color-brand) 10%, transparent);
-}
-
-.fill-animation {
-  animation: borderFill 5s linear forwards;
-}
-
-@keyframes borderFill {
-  0% { height: 0; }
-  100% { height: 100%; }
-}
-</style>
+<script setup lang="ts">
+interface FeatureInfo {
+  icon: Component
+  title: string
+  description: string
+}
+
+const props = defineProps<{
+  features: FeatureInfo[]
+}>()
+
+const selected = defineModel<number>({ default: 0 })
+const duration = 5000
+let timer: ReturnType<typeof setTimeout> | null = null
+
+const nextFeature = () => {
+  selected.value = (selected.value + 1) % props.features.length
+  startTimer()
+}
+
+const startTimer = () => {
+  clearTimer()
+  timer = setTimeout(() => {
+    nextFeature()
+  }, duration)
+}
+
+const clearTimer = () => {
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+}
+
+function selectFeature(idx: number) {
+  selected.value = idx
+  startTimer()
+}
+
+onMounted(() => startTimer())
+onUnmounted(() => clearTimer())
+</script>
+
+<template>
+  <div
+    v-for="(item, idx) in features"
+    :key="idx"
+    class="relative flex flex-col pl-3 cursor-pointer"
+    @click="selectFeature(idx)"
+  >
+    <div
+      v-if="selected === idx"
+      class="absolute left-0 top-0 z-20 h-full w-[2px] rounded-full bg-brand"
+      :class="{ 'fill-animation': selected === idx }"
+    />
+
+    <div
+      class="absolute left-0 top-0 z-10 h-full w-[2px] rounded-full bg-(--border-color-strong)/50"
+    />
+
+    <div class="flex items-center gap-2 relative z-10">
+      <div
+        :class="[
+          'transition-all duration-300 ease-in-out',
+          selected === idx ? 'rounded-sm bg-action-primary p-2 icon-bg' : 'size-fit'
+        ]"
+      >
+        <component
+          :is="item.icon"
+          class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
+          :class="selected === idx ? 'text-action-primary-fg' : 'text-quaternary'"
+        />
+      </div>
+      <p
+        class="text-body-lg-strong lg:text-h3 transition-colors duration-300 ease-in-out"
+        :class="selected === idx ? '' : 'text-quaternary'"
+      >
+        {{ item.title }}
+      </p>
+    </div>
+
+    <a-transition-height
+      :transition="{
+        enterActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out',
+        leaveActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out'
+      }"
+    >
+      <div
+        v-if="selected === idx"
+      >
+        <p class="text-body-sm lg:text-body-md pt-3">
+          {{ item.description }}
+        </p>
+      </div>
+    </a-transition-height>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon-bg {
+  box-shadow: -4px 4px 0 0 color-mix(in srgb, var(--background-color-brand) 10%, transparent);
+}
+
+.fill-animation {
+  animation: borderFill 5s linear forwards;
+}
+
+@keyframes borderFill {
+  0% { height: 0; }
+  100% { height: 100%; }
+}
+</style>

package/components/elements/illustrations/noAccess.vue

@@ -1,71 +1,71 @@
-<script setup lang="ts">
-import { type LocalizedNavigationParams, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-interface Props {
-  illClass?: string
-  text?: string
-  textClass?:string
-  buttonName?: string
-  to?: LocalizedNavigationParams
-  noIll?: boolean
-  noText?: boolean
-  noBtn?: boolean
-}
-const props = defineProps<Props>()
-
-const appConfig = useAppConfig()
-const { login } = useUrls()
-const authMode = appConfig.myLayer.authMode
-const device = useAdaptive()
-const { t, locale } = useI18n()
-
-const { loginModal } = useIdModals()
-
-function goAuth() {
-  if (authMode === 'local') {
-    loginModal.value = true
-    return
-  }
-
-  if (window) {
-    if (props.to) {
-      navigateToLocalizedPage(props.to)
-    } else {
-      const fullPath = encodeURIComponent(window.location.toString())
-      navigateToLocalizedPage({
-        locale,
-        projectUrl: login,
-        path: `/?url=${fullPath}`,
-        target: '_self'
-      })
-    }
-  }
-}
-</script>
-
-<template>
-  <div class="flex flex-col items-center gap-4 text-center text-body-md">
-    <div v-if="!noIll">
-      <slot name="illustration">
-        <a-ill-door :class="illClass" />
-      </slot>
-    </div>
-    <p
-      v-if="!noText"
-      :class="textClass"
-    >
-      {{ text ?? t('illustrations.afterLogInBlock.tariff') }}
-    </p>
-    <slot name="button">
-      <a-button
-        v-if="!noBtn"
-        :block="device.isMobile"
-        view="outline"
-        @click="goAuth"
-      >
-        {{ buttonName ?? t('illustrations.afterLogInBlock.login') }}
-      </a-button>
-    </slot>
-  </div>
-</template>
+<script setup lang="ts">
+import { type LocalizedNavigationParams, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+interface Props {
+  illClass?: string
+  text?: string
+  textClass?:string
+  buttonName?: string
+  to?: LocalizedNavigationParams
+  noIll?: boolean
+  noText?: boolean
+  noBtn?: boolean
+}
+const props = defineProps<Props>()
+
+const appConfig = useAppConfig()
+const { login } = useUrls()
+const authMode = appConfig.myLayer.authMode
+const device = useAdaptive()
+const { t, locale } = useI18n()
+
+const { loginModal } = useIdModals()
+
+function goAuth() {
+  if (authMode === 'local') {
+    loginModal.value = true
+    return
+  }
+
+  if (window) {
+    if (props.to) {
+      navigateToLocalizedPage(props.to)
+    } else {
+      const fullPath = encodeURIComponent(window.location.toString())
+      navigateToLocalizedPage({
+        locale,
+        projectUrl: login,
+        path: `/?url=${fullPath}`,
+        target: '_self'
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 text-center text-body-md">
+    <div v-if="!noIll">
+      <slot name="illustration">
+        <a-ill-door :class="illClass" />
+      </slot>
+    </div>
+    <p
+      v-if="!noText"
+      :class="textClass"
+    >
+      {{ text ?? t('illustrations.afterLogInBlock.tariff') }}
+    </p>
+    <slot name="button">
+      <a-button
+        v-if="!noBtn"
+        :block="device.isMobile"
+        view="outline"
+        @click="goAuth"
+      >
+        {{ buttonName ?? t('illustrations.afterLogInBlock.login') }}
+      </a-button>
+    </slot>
+  </div>
+</template>