adata-ui 2.1.41-beta.1 → 2.1.41

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 w-[2px] bg-blue-700 dark:bg-blue-500 z-20 h-full rounded-full"
+      :class="{ 'fill-animation': selected === idx }"
+    />
+
+    <div
+      class="absolute left-0 top-0 w-[2px] bg-gray-500/50 z-10 h-full rounded-full"
+    />
+
+    <div class="flex items-center gap-2 relative z-10">
+      <div
+        :class="[
+          'transition-all duration-300 ease-in-out',
+          selected === idx ? 'rounded-sm bg-blue-700 dark:bg-blue-500 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-white dark:text-gray-900' : 'text-gray-600 dark:text-[#9DA3AC]'"
+        />
+      </div>
+      <p
+        class="font-semibold text-base lg:text-xl transition-colors duration-300 ease-in-out"
+        :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-[#9DA3AC]'"
+      >
+        {{ 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-xs lg:text-sm pt-3">
+          {{ item.description }}
+        </p>
+      </div>
+    </a-transition-height>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon-bg {
+  box-shadow: -4px 4px 0px 0px #007AFF1A;
+}
+
+.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-sm">
+    <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>

package/components/elements/infinite-carousel/AInfiniteCarousel.vue

@@ -1,85 +1,57 @@
-<script setup lang="ts">
-/* fade: gradient — краевые градиенты на bg-main (историческое поведение,
-   верно только когда карусель лежит на основной поверхности);
-   mask — краевая маска, не зависящая от фона под каруселью. */
-withDefaults(defineProps<{
-  duration?: number
-  pauseOnHover?: boolean
-  fade?: 'gradient' | 'mask' | 'none'
-}>(), {
-  duration: 25,
-  pauseOnHover: false,
-  fade: 'gradient',
-})
-</script>
-
-<template>
-  <div
-    class="carousel relative w-full overflow-hidden"
-    :class="[
-      fade === 'gradient' ? 'carousel--fade-gradient' : '',
-      fade === 'mask' ? 'carousel--fade-mask' : '',
-      pauseOnHover ? 'carousel--pausable' : '',
-    ]"
-  >
-    <div
-      class="animate-scroll flex w-max"
-      :style="{ animationDuration: `${duration}s` }"
-    >
-      <div
-        v-for="i in 2"
-        :key="i"
-        class="flex"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-@keyframes scroll {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
-}
-
-.animate-scroll {
-  animation: scroll 25s linear infinite;
-}
-
-.carousel--pausable:hover .animate-scroll {
-  animation-play-state: paused;
-}
-
-.carousel--fade-gradient:before,
-.carousel--fade-gradient:after {
-  position: absolute;
-  top: 0;
-  width: 120px;
-  height: 100%;
-  content: "";
-  z-index: 2;
-}
-
-.carousel--fade-gradient:before {
-  left: 0;
-  background: linear-gradient(to left, transparent, var(--background-color-main));
-}
-
-.carousel--fade-gradient:after {
-  right: 0;
-  background: linear-gradient(to right, transparent, var(--background-color-main));
-}
-
-/* Маска читает только альфу, поэтому #000 здесь — не цвет (осознанное
-   исключение из запрета сырых hex). */
-.carousel--fade-mask {
-  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-scroll {
-    animation: none;
-  }
-}
-</style>
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="carousel overflow-hidden w-full relative">
+    <div class="flex w-max animate-scroll">
+      <div
+        v-for="i in 2"
+        :key="i"
+        class="flex"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@keyframes scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+.animate-scroll {
+  animation: scroll 25s linear infinite;
+}
+
+.carousel:before,
+.carousel:after {
+  position: absolute;
+  top: 0;
+  width: 120px;
+  height: 100%;
+  content: "";
+  z-index: 2;
+}
+
+.carousel:before {
+  left: 0;
+  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
+}
+
+.carousel:after {
+  right: 0;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
+}
+
+.dark {
+  .carousel:before {
+    background: linear-gradient(to left, rgba(38, 40, 43, 0), #161617);
+  }
+
+  .carousel:after {
+    background: linear-gradient(to right, rgba(38, 40, 43, 0), #161617);
+  }
+}
+</style>

package/components/elements/infinite-scroll/AInfiniteScroll.vue

@@ -1,33 +1,33 @@
-<script lang="ts" setup>
-import { useInfiniteScroll } from '@vueuse/core'
-
-const props = withDefaults(defineProps<{ canLoadMore: boolean }>(), {
-  canLoadMore: true
-})
-const emit = defineEmits<{ (e: 'intersected'): void }>()
-
-const observe = ref<HTMLDivElement | null>(null)
-
-useInfiniteScroll(
-  observe,
-  () => {
-    emit('intersected')
-  },
-  {
-    distance: 10,
-    interval: 1000,
-    canLoadMore() {
-      return props.canLoadMore
-    }
-  }
-)
-</script>
-
-<template>
-  <div>
-    <slot />
-    <div ref="observe" />
-  </div>
-</template>
-
-<style scoped></style>
+<script lang="ts" setup>
+import { useInfiniteScroll } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{ canLoadMore: boolean }>(), {
+  canLoadMore: true
+})
+const emit = defineEmits<{ (e: 'intersected'): void }>()
+
+const observe = ref<HTMLDivElement | null>(null)
+
+useInfiniteScroll(
+  observe,
+  () => {
+    emit('intersected')
+  },
+  {
+    distance: 10,
+    interval: 1000,
+    canLoadMore() {
+      return props.canLoadMore
+    }
+  }
+)
+</script>
+
+<template>
+  <div>
+    <slot />
+    <div ref="observe" />
+  </div>
+</template>
+
+<style scoped></style>