adata-ui 0.3.99 → 2.0.0

package/components/elements/curve-block/ACurveBlock.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+const props = defineProps<{
+  icon: Component
+  title: string
+  description: string
+}>()
+</script>
+
+<template>
+  <div class="relative w-fit cursor-pointer">
+    <svg
+      width="306"
+      height="182"
+      viewBox="-1 -1 308 184"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        class="border-path"
+        d="M306 106.077C306 116.087 292.009 123 282 123C262.67 123 247 138.67 247 158C247 168.009 240.087 182 230.077 182H16C7.16344 182 0 174.837 0 166V16C0 7.16344 7.16344 0 16 0H290C298.837 0 306 7.16344 306 16V106.077Z"
+        stroke-width="2"
+        fill="transparent"
+      />
+      <defs>
+        <linearGradient
+          id="gradient-light"
+          x1="164.372"
+          y1="-137.957"
+          x2="-20.5433"
+          y2="68.1723"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#479FFF" />
+          <stop
+            offset="1"
+            stop-color="#0070EB"
+          />
+        </linearGradient>
+
+        <linearGradient
+          id="gradient-dark"
+          x1="164.372"
+          y1="-137.957"
+          x2="-20.5433"
+          y2="68.1723"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#4FBDFF" />
+          <stop
+            offset="1"
+            stop-color="#1B98E2"
+          />
+        </linearGradient>
+      </defs>
+    </svg>
+
+    <div class="absolute left-6 top-6 flex flex-col gap-4 pr-6">
+      <div class="flex items-center gap-2">
+        <div class="rounded-sm bg-deepblue-900/5 dark:bg-gray-200/5 p-1">
+          <component
+            :is="icon"
+            class="size-6 shrink-0"
+          />
+        </div>
+        <p class="text-base font-semibold">
+          {{ title }}
+        </p>
+      </div>
+      <p class="text-sm text-gray-600 dark:text-gray-200">
+        {{ description }}
+      </p>
+    </div>
+
+    <svg
+      class="absolute bottom-0 right-0"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="1"
+        y="1"
+        width="46"
+        height="46"
+        rx="23"
+        fill="transparent"
+      />
+      <rect
+        class="animated-border"
+        x="1"
+        y="1"
+        width="46"
+        height="46"
+        rx="23"
+        stroke-width="2"
+        fill="transparent"
+      />
+      <path
+        class="arrow"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.1155 16C16.4994 16 16 16.4994 16 17.1155C16 17.7315 16.4994 18.231 17.1155 18.231L28.1915 18.231L16.3267 30.0958C15.8911 30.5314 15.8911 31.2377 16.3267 31.6733C16.7623 32.1089 17.4686 32.1089 17.9042 31.6733L29.769 19.8085L29.769 30.8845C29.769 31.5006 30.2685 32 30.8845 32C31.5006 32 32 31.5006 32 30.8845L32 17.1155C32 16.9642 31.9699 16.82 31.9154 16.6885C31.8617 16.5589 31.7826 16.4373 31.678 16.3315C31.6749 16.3283 31.6717 16.3251 31.6685 16.322C31.5627 16.2174 31.4411 16.1383 31.3115 16.0846C31.18 16.0301 31.0358 16 30.8845 16L17.1155 16Z"
+      />
+      <defs>
+        <linearGradient
+          id="gradient-circle-light"
+          x1="25.7838"
+          y1="-36.3843"
+          x2="-19.403"
+          y2="-6.42519"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#479FFF" />
+          <stop
+            offset="1"
+            stop-color="#0070EB"
+          />
+        </linearGradient>
+
+        <linearGradient
+          id="gradient-circle-dark"
+          x1="25.7838"
+          y1="-36.3843"
+          x2="-19.403"
+          y2="-6.42519"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#4FBDFF" />
+          <stop
+            offset="1"
+            stop-color="#1B98E2"
+          />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.border-path {
+  stroke-dasharray: 1200;
+  stroke-dashoffset: 1200;
+  fill: #F4F5F6;
+  transition: stroke-dashoffset 2s ease, fill 2s ease;
+}
+
+.animated-border {
+  stroke-dasharray: 180;
+  stroke-dashoffset: 180;
+  transition: stroke-dashoffset 2s ease, fill 2s ease;
+  fill: #F4F5F6;
+}
+
+
+.relative:hover .border-path,
+.relative:hover .animated-border {
+  stroke-dashoffset: 0;
+  fill: white;
+}
+
+.border-path {
+  stroke: url(#gradient-light);
+}
+
+.dark .border-path {
+  stroke: url(#gradient-dark);
+}
+
+.animated-border {
+  stroke: url(#gradient-circle-light);
+}
+
+.dark .animated-border {
+  stroke: url(#gradient-circle-dark);
+}
+
+.arrow {
+  fill: #0070EB;
+}
+
+.dark {
+  .border-path,
+  .animated-border {
+    fill: #393d40;
+  }
+  .relative:hover .border-path,
+  .relative:hover .animated-border {
+    fill: #26282b;
+  }
+  .arrow {
+    fill: #1b98e2;
+  }
+}
+</style>
+
+

package/components/elements/digit-badge/ADigitBadge.vue

@@ -0,0 +1,83 @@
+<script lang='ts' setup>
+import {twMerge} from "tailwind-merge";
+
+defineOptions({name: 'ADigitBadge'})
+
+interface Props {
+  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+  view?: 'default' | 'inverted'
+  size?: 'sm' | 'md' | 'lg'
+  value: string | number
+  disabled?: boolean
+  customClasses?: string
+  prefix?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  disabled: false,
+  customClasses: '',
+  prefix: ''
+})
+const formattedValue = computed(() => {
+  return Number(props.value).toLocaleString('ru-RU');
+});
+const classes = computed(() =>
+  [
+    props.disabled ? 'text-gray-500 bg-deepblue-900/5' : typeSwitchValues[props.view][props.type],
+    'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none',
+    sizeSwitchValues[props.size],
+    props.value && props.value.toString().length > 2 ? 'w-auto' : '',
+  ])
+
+export type StateType = {
+  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string;
+};
+type ViewType = {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+};
+
+type SizeSwitchValues = {
+  [key in 'sm' | 'md' | 'lg']: string;
+};
+
+const typeSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
+    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
+    warning: 'bg-yellow-400 text-white dark:text-gray-900',
+    gray: 'bg-gray-50 text-gray-500  dark:text-gray-900',
+    orange: 'bg-orange-600 text-white dark:bg-orange-500 dark:text-gray-900'
+  },
+  inverted: {
+    primary: 'bg-white text-blue-700 dark:text-blue-500 dark:bg-gray-900',
+    success: 'bg-white text-green-500 dark:text-green-400 dark:bg-gray-900',
+    danger: 'bg-white text-red-500 dark:text-red-400 dark:bg-gray-900',
+    warning: 'bg-white text-yellow-400 dark:bg-gray-900',
+    gray: 'bg-white text-gray-500 dark:text-gray-200 dark:bg-gray-200/10',
+    orange: 'bg-white text-deepblue-900 dark:text-orange-500 dark:bg-gray-900',
+  },
+  transparent: {
+    success: 'bg-green-500/20 text-green-500',
+    danger: 'bg-red-500/20 text-red-500 dark:text-red-400',
+  }
+}
+
+const sizeSwitchValues: SizeSwitchValues = {
+  sm: 'w-4 h-4 px-1 text-[9.5px]',
+  md: 'w-5 h-5 px-1 text-[10px]',
+  lg: 'px-2 w-6 h-6 text-xs font-semibold'
+}
+</script>
+<template>
+  <div
+    :class="twMerge(...classes, customClasses)"
+  >
+    {{ prefix }}{{ formattedValue }}
+  </div>
+</template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ErrorTemplateData } from './types'
+
+interface Props {
+  error: ErrorTemplateData
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-14">
+    <slot name="icon">
+      <div class="hidden lg:block max-w-[600px]">
+        <img
+          :src="error.icon"
+          class="hidden lg:block"
+          alt="error-icon"
+        >
+      </div>
+    </slot>
+    <div class="flex min-h-screen flex-col lg:min-h-0">
+      <div class="flex-1 px-4 py-8 lg:p-0">
+        <slot name="status">
+          <p class="mb-6 text-4xl font-bold">
+            {{ error.statusCode }}
+          </p>
+        </slot>
+        <slot name="title">
+          <h2 class="lg:heading-03 text-2xl font-bold ">
+            {{ error.title }}
+          </h2>
+        </slot>
+        <slot
+          name="content"
+          :data="error"
+        />
+      </div>
+      <div class="sticky bottom-0 z-[10000] lg:static lg:flex">
+        <slot name="default" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/error-template/types.ts

@@ -0,0 +1,23 @@
+import type { DefineComponent } from 'vue'
+
+export interface List {
+  id: number
+  label: string
+  link: boolean
+}
+
+export interface Content {
+  title: string
+  subTitle: string
+  subTitleSecond?:string
+  list: List[]
+}
+
+export interface ErrorTemplateData {
+  icon: string
+  statusCode: number
+  title: string
+  subTitle: string | string[]
+  subTitleSecond: string | string[]
+  content?: Content
+}

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

@@ -0,0 +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 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-md 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' : 'text-gray-600'"
+        />
+      </div>
+      <p
+        class="font-semibold text-xl transition-colors duration-300 ease-in-out"
+        :class="selected === idx ? '' : 'text-gray-600'"
+      >
+        {{ 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-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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { type LocalizedNavigationParams, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+
+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 loginUrl = appConfig.myLayer.loginUrl
+const device = useAdaptive()
+const { t, locale } = useI18n()
+
+function goAuth() {
+  if (window) {
+    if (props.to) {
+      navigateToLocalizedPage(props.to)
+    } else {
+      const fullPath = encodeURIComponent(window.location.toString())
+      navigateToLocalizedPage({
+        locale,
+        projectUrl: loginUrl.slice(0, -1),
+        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

@@ -0,0 +1,55 @@
+<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);
+}
+
+.dark .carousel:after {
+  background: linear-gradient(to right, rgba(38, 40, 43, 0), #161617);
+}
+</style>

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

@@ -0,0 +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>

package/components/elements/leave-note/ALeaveNote.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = defineProps<{
+  isError?: boolean,
+}>()
+
+const emit = defineEmits<{
+  (e: 'onSubmit'): void
+}>()
+
+const { t } = useI18n()
+
+const note = defineModel<string>({ required: true })
+const isLoading = defineModel<boolean>('loading')
+
+const schema = z.object({
+  note: z.string().nonempty(t('forms.leaveNote.errors.required')).max(100, t('forms.leaveNote.errors.maxLength', { n: 100 })),
+})
+
+const submitted = ref(false)
+
+const { validation, getError } = useUIValidation(
+  schema,
+  () => ({
+    note: note.value,
+  }),
+  submitted,
+)
+
+async function onSubmit() {
+  submitted.value = true
+  if (validation.value) return
+  emit('onSubmit')
+}
+
+defineExpose({
+  reset: () => (submitted.value = false),
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-start rounded-md">
+    <p class="text-sm font-semibold mb-4">
+      {{ t('forms.leaveNote.title') }}
+    </p>
+    <a-textarea
+      v-model="note"
+      :label="t('forms.leaveNote.placeholder')"
+      :error="getError('note')"
+      class="mb-2 min-h-[120px]"
+      resizeable="none"
+      clearable
+      required
+    >
+      <template #alert>
+        <a-alert
+          v-if="isError || getError('note')"
+          color="red"
+          class="mt-1"
+        >
+          {{ getError('note') || (isError ? t('forms.leaveNote.limit') : '') }}
+        </a-alert>
+      </template>
+    </a-textarea>
+    <a-button
+      :disabled="!note.trim() && isLoading"
+      class="w-full sm:w-auto"
+      size="lg"
+      :loading="isLoading"
+      @click="onSubmit"
+    >
+      {{ t('actions.send') }}
+    </a-button>
+  </div>
+</template>