adata-ui 2.1.40-beta.4 → 2.1.40-beta.5

package/components/elements/button/AButtonV2.vue

@@ -3,9 +3,11 @@ import type { Component } from 'vue'
 
 type View = 'solid' | 'outline' | 'ghost' | 'soft'
 type Size = 'sm' | 'md' | 'lg'
+type Color = 'blue' | 'green' | 'red' | 'gray'
 
 const props = withDefaults(defineProps<{
   view?: View
+  color?: Color
   size?: Size
   icon?: Component
   iconRight?: boolean
@@ -15,6 +17,7 @@ const props = withDefaults(defineProps<{
   type?: 'button' | 'submit' | 'reset'
 }>(), {
   view: 'solid',
+  color: 'blue',
   size: 'md',
   iconRight: false,
   loading: false,
@@ -25,11 +28,31 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
-const VIEW_CLASS: Record<View, string> = {
-  solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
-  outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
-  ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-  soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
+const VIEW_CLASS: Record<Color, Record<View, string>> = {
+  blue: {
+    solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
+    outline: 'border border-blue-500 bg-white text-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:border-blue-500 dark:bg-gray-900 dark:text-blue-300 dark:hover:bg-blue-950/40',
+    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
+    soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
+  },
+  green: {
+    solid: 'bg-green-600 text-white shadow-sm hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:bg-green-500 dark:hover:bg-green-400',
+    outline: 'border border-green-500 bg-white text-green-700 hover:bg-green-50 active:bg-green-100 dark:border-green-500 dark:bg-gray-900 dark:text-green-300 dark:hover:bg-green-950/40',
+    ghost: 'text-green-700 hover:bg-green-50 active:bg-green-100 dark:text-green-300 dark:hover:bg-green-950/40',
+    soft: 'bg-green-50 text-green-700 hover:bg-green-100 active:bg-green-200/70 dark:bg-green-950/40 dark:text-green-300 dark:hover:bg-green-900/40',
+  },
+  red: {
+    solid: 'bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow-md active:bg-red-800 dark:bg-red-500 dark:hover:bg-red-400',
+    outline: 'border border-red-500 bg-white text-red-700 hover:bg-red-50 active:bg-red-100 dark:border-red-500 dark:bg-gray-900 dark:text-red-300 dark:hover:bg-red-950/40',
+    ghost: 'text-red-700 hover:bg-red-50 active:bg-red-100 dark:text-red-300 dark:hover:bg-red-950/40',
+    soft: 'bg-red-50 text-red-700 hover:bg-red-100 active:bg-red-200/70 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-900/40',
+  },
+  gray: {
+    solid: 'bg-gray-600 text-white shadow-sm hover:bg-gray-700 hover:shadow-md active:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400',
+    outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
+    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
+    soft: 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-200/70 dark:bg-gray-800/60 dark:text-gray-200 dark:hover:bg-gray-700/60',
+  },
 }
 
 const SIZE_CLASS: Record<Size, string> = {
@@ -56,7 +79,7 @@ function onClick(event: MouseEvent) {
     :disabled="disabled || loading"
     class="button-v2 inline-flex select-none items-center justify-center rounded-xl font-semibold transition-all duration-150 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
-      VIEW_CLASS[view],
+      VIEW_CLASS[color][view],
       SIZE_CLASS[size],
       block ? 'w-full' : '',
       iconRight ? 'flex-row-reverse' : '',

package/components/elements/status-badge-v2/StatusBadgeV2.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'StatusBadgeV2', inheritAttrs: false })
+
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+interface Props {
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'inverted',
+  size: 'sm',
+})
+
+const base
+  = 'inline-flex w-fit items-center justify-center gap-1.5 rounded-full font-semibold select-none'
+
+const sizeClasses: Record<BadgeSize, string> = {
+  xs: 'px-2 py-0.5 text-[11px] leading-none',
+  sm: 'px-2.5 py-1 text-xs leading-none',
+  md: 'px-3 py-1.5 text-sm',
+  lg: 'px-4 py-2 text-base',
+}
+
+const typeClasses: Record<BadgeView, Partial<Record<BadgeType, string>>> = {
+  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:text-gray-100',
+    warning: 'bg-yellow-400 text-white dark:text-gray-900',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200/10 dark:text-gray-200',
+    orange: 'bg-orange-600 text-white dark:text-gray-100',
+  },
+  inverted: {
+    primary: 'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500',
+    success: 'bg-green-500/15 text-green-600 dark:bg-green-400/15 dark:text-green-400',
+    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400',
+    warning: 'bg-yellow-400/15 text-yellow-500 dark:bg-yellow-400/15 dark:text-yellow-400',
+    gray: 'bg-deepblue-900/10 text-gray-600 dark:bg-gray-200/10 dark:text-gray-300',
+    orange: 'bg-orange-600/10 text-orange-600 dark:text-orange-500',
+  },
+  transparent: {
+    primary: 'bg-transparent text-blue-700 dark:text-blue-500',
+    success: 'bg-transparent text-green-600 dark:text-green-400',
+    danger: 'bg-transparent text-red-500 dark:text-red-400',
+    warning: 'bg-transparent text-yellow-500 dark:text-yellow-400',
+    gray: 'bg-transparent text-gray-600 dark:text-gray-300',
+    orange: 'bg-transparent text-orange-600 dark:text-orange-500',
+  },
+}
+
+const attrs = useAttrs()
+
+// twMerge resolves Tailwind conflicts: any class passed via `class` wins over
+// the defaults below, so padding / rounded / bg / text can all be overridden.
+const classes = computed(() =>
+  twMerge(
+    base,
+    sizeClasses[props.size],
+    typeClasses[props.view][props.type],
+    attrs.class as string,
+  ),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="{ ...$attrs, class: undefined }">
+    <slot name="point" />
+    <slot />
+  </div>
+</template>

package/components/forms/feedback-form/FeedbackForm.vue

@@ -152,26 +152,26 @@ onMounted(() => {
     </AButton>
   </section>
 
-  <a-modal
+  <a-modal-v2
     v-model="isModalOpen"
     width="424px"
     @close="isModalOpen = false"
   >
-    <div class="flex flex-col items-center gap-5">
-      <h4 class="heading-04">
+    <div class="flex flex-col items-center gap-4 px-6 py-4">
+      <a-ill-mail />
+      <h4 class="text-[18px] font-semibold">
         {{ t('forms.feedback.modalTitle') }}
       </h4>
-      <a-ill-mail />
       <p class="body-400 max-[352xp]">
         {{ t('forms.feedback.modalSubtitle') }}
       </p>
-      <AButton
-        block
+      <a-button-v2
         view="outline"
+        block
         @click="isModalOpen = false"
       >
         {{ t('forms.feedback.close') }}
-      </AButton>
+      </a-button-v2>
     </div>
-  </a-modal>
+  </a-modal-v2>
 </template>

package/components/forms/input/AInputV2.vue

@@ -257,7 +257,7 @@ const layoutClass = computed(() => {
   if (!props.label) {
     return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
   }
-  return props.size === 'md' ? 'h-10 pt-3 pb-1' : 'h-9 pt-2 pb-1'
+  return props.size === 'md' ? 'h-10 pt-4 pb-0.5' : 'h-9 pt-3 pb-0.5'
 })
 
 const iconOffsetClass = computed(() => {

package/components/forms/input/textarea/ATextareaV2.vue

@@ -0,0 +1,248 @@
+<script lang="ts" setup>
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: '',
+  required: false,
+  disabled: false,
+  readonly: false,
+  error: undefined,
+  size: 'md',
+  variant: 'default',
+  rows: 4,
+  resize: 'vertical',
+  maxlength: undefined,
+  autoResize: false,
+  inputId: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'focus', ev: FocusEvent): void
+  (e: 'blur', ev: FocusEvent): void
+}>()
+
+interface Props {
+  label?: string
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  error?: string | string[]
+  size?: 'sm' | 'md'
+  variant?: 'default' | 'gray' | 'blue'
+  rows?: number
+  resize?: 'none' | 'vertical' | 'both'
+  maxlength?: number
+  autoResize?: boolean
+  inputId?: string
+}
+
+const modelValue = defineModel<string>({ default: '' })
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const isFocused = ref(false)
+
+const internalId = useId()
+const inputId = computed(() => props.inputId ?? `textarea-v2-${internalId}`)
+
+const hasValue = computed(() => modelValue.value != null && modelValue.value !== '')
+const hasError = computed(() => Array.isArray(props.error) ? props.error.length > 0 : !!props.error)
+const isLabelFloated = computed(() => hasValue.value || isFocused.value)
+
+const errorMessages = computed(() => {
+  if (!props.error) return [] as string[]
+  return Array.isArray(props.error) ? props.error : [props.error]
+})
+
+const fieldClass = computed(() => {
+  if (props.disabled) {
+    return 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
+  }
+  if (props.variant === 'gray') {
+    return 'border-transparent bg-gray-50 dark:border-transparent dark:bg-white/[0.04]'
+  }
+  if (props.variant === 'blue') {
+    return 'border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20'
+  }
+  return 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'
+})
+
+const resizeClass = computed(() => {
+  if (props.autoResize) return 'resize-none'
+  switch (props.resize) {
+    case 'none': return 'resize-none'
+    case 'both': return 'resize'
+    case 'vertical':
+    default: return 'resize-y'
+  }
+})
+
+const paddingClass = computed(() => {
+  // Паддинг постоянный (не зависит от фокуса/значения) — textarea не меняет размер при фокусе.
+  const pt = !props.label ? 'pt-2.5' : (props.size === 'md' ? 'pt-4' : 'pt-3.5')
+  const pb = props.maxlength ? 'pb-6' : (!props.label ? 'pb-2.5' : (props.size === 'md' ? 'pb-2' : 'pb-1.5'))
+  return `px-4 ${pt} ${pb}`
+})
+
+const attrs = useAttrs()
+const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
+  return rest
+})
+
+function adjustHeight() {
+  const el = textareaRef.value
+  if (!props.autoResize || !el) return
+  el.style.height = 'auto'
+  el.style.height = `${el.scrollHeight}px`
+}
+
+function onFocus(ev: FocusEvent) {
+  isFocused.value = true
+  emit('focus', ev)
+}
+function onBlur(ev: FocusEvent) {
+  isFocused.value = false
+  emit('blur', ev)
+}
+
+function focus() {
+  textareaRef.value?.focus()
+}
+function blur() {
+  textareaRef.value?.blur()
+}
+
+watch(modelValue, () => nextTick(adjustHeight))
+onMounted(adjustHeight)
+
+defineExpose({ focus, blur, textareaRef })
+</script>
+
+<template>
+  <div class="textarea-v2 relative w-full text-sm" v-bind="wrapperAttrs">
+    <div
+      class="textarea-v2__field relative rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-600/20 hover:border-blue-500 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20 dark:hover:border-blue-400"
+      :class="[fieldClass, { 'textarea-v2__field--error': hasError, 'textarea-v2__field--disabled': disabled }]"
+    >
+      <label
+        v-if="label"
+        :for="inputId"
+        :data-size="size"
+        class="textarea-v2__label pointer-events-none absolute left-4 max-w-[calc(100%-2rem)] truncate text-gray-500 dark:text-gray-400"
+        :class="{ 'textarea-v2__label--floated': isLabelFloated }"
+      >
+        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
+      </label>
+
+      <textarea
+        :id="inputId"
+        ref="textareaRef"
+        v-model="modelValue"
+        :rows="rows"
+        :maxlength="maxlength"
+        :placeholder="(isLabelFloated || !label) ? placeholder : ''"
+        :disabled="disabled"
+        :readonly="readonly"
+        :tabindex="disabled ? -1 : 0"
+        class="textarea-v2__input text-deepblue-900 block w-full bg-transparent leading-snug outline-none placeholder:text-gray-500 disabled:cursor-not-allowed dark:text-gray-200 dark:placeholder:text-gray-400"
+        :class="[resizeClass, paddingClass]"
+        v-bind="inputAttrs"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+
+      <span
+        v-if="maxlength"
+        class="textarea-v2__counter pointer-events-none absolute bottom-1.5 right-3 text-[10px] text-gray-400 dark:text-gray-500"
+      >
+        {{ modelValue?.length ?? 0 }}/{{ maxlength }}
+      </span>
+    </div>
+
+    <transition
+      enter-active-class="textarea-v2__error-enter-active"
+      enter-from-class="textarea-v2__error-enter-from"
+      enter-to-class="textarea-v2__error-enter-to"
+      leave-active-class="textarea-v2__error-leave-active"
+      leave-from-class="textarea-v2__error-leave-from"
+      leave-to-class="textarea-v2__error-leave-to"
+    >
+      <p v-if="hasError" class="mt-1 flex flex-col text-xs text-red-500 dark:text-red-400">
+        <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
+      </p>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.textarea-v2__field--error {
+  border-color: theme('colors.red.500');
+}
+
+.textarea-v2__field--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.textarea-v2__field--disabled .textarea-v2__input {
+  cursor: not-allowed;
+}
+
+.textarea-v2__input {
+  scrollbar-width: thin;
+}
+
+.textarea-v2__label {
+  top: 26px;
+  transform: translateY(-50%);
+  font-size: 14px;
+  line-height: 1.3;
+  transition:
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    font-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 300ms ease-out;
+}
+
+.textarea-v2__label[data-size="sm"] {
+  top: 24px;
+}
+
+.textarea-v2__label--floated {
+  font-size: 10px;
+  transform: translateY(-21px);
+}
+
+.textarea-v2__label--floated[data-size="sm"] {
+  transform: translateY(-19px);
+}
+
+.textarea-v2__error-enter-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.textarea-v2__error-enter-from {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.textarea-v2__error-leave-active {
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.textarea-v2__error-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea-v2__label,
+  .textarea-v2__error-enter-active,
+  .textarea-v2__error-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/modals/AnotherDeviceModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useAnotherDeviceModal } from '#adata-ui/composables/modalsState'
 import { useUrls } from '#adata-ui/composables/useUrls'
+
 const { t, locale } = useI18n()
 const localePath = useLocalePath()
 
@@ -14,47 +14,46 @@ function onClose() {
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    :title="t('modals.another_device_modal.title')"
+    width="424px"
     @close="onClose"
   >
-    <div class="flex flex-col items-center justify-center gap-5">
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
       <a-ill-phone-check />
       <p class="body-400 text-center">
         {{ t('modals.another_device_modal.info') }}
       </p>
       <div
-        class="body-400 flex gap-2 rounded-lg border border-red-500 dark:border-red-400 bg-[#FDECEB] dark:bg-red-400/10 p-4 text-red-500 dark:text-red-400"
+        class="body-400 flex gap-2 rounded-lg border border-red-500 bg-[#FDECEB] p-3 text-red-500 dark:border-red-400 dark:bg-red-400/10 dark:text-red-400"
       >
         <a-icon-warning-triangle
-          class="shrink-0"
-          width="24"
-          height="24"
+          class="size-4 shrink-0"
         />
-        <p>
+        <span class="text-xs">
           {{ t('modals.another_device_modal.alert') }}
-        </p>
+        </span>
       </div>
     </div>
     <template #footer>
       <div class="flex w-full gap-2">
-        <a-button
+        <a-button-v2
           view="outline"
-          class="w-full"
+          color="blue"
+          block
           @click="onClose"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button
-          class="w-full"
+        </a-button-v2>
+        <a-button-v2
+          block
           :to="buildLocalizedUrl(locale, landing)"
         >
           {{ t('modals.buttons.toMain') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped></style>

package/components/modals/ApplicationAcceptedModal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-
 const { t } = useI18n()
 
-const isOpen = defineModel<boolean>({default: false})
+const isOpen = defineModel<boolean>({ default: false })
 
-const cancel = () => {
+function cancel() {
   isOpen.value = false
 }
 
@@ -16,30 +15,28 @@ const modalText = {
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="application-accepted"
-    :prevent-close="true"
+    width="424px"
+    :persistent="true"
   >
-    <div class="flex flex-col gap-5">
-      <p class="text-center heading-02">
-        {{ modalText.title }}
-      </p>
-      <a-ill-ok class="w-full" />
-      <p class="text-center body-400">
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-ok />
+      <p class="body-400 text-center">
         {{ modalText.info }}
       </p>
     </div>
     <template #footer>
-      <a-button
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="cancel"
       >
         {{ modalText.close }}
-      </a-button>
+      </a-button-v2>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/modals/ConnectingTariffModal.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'
-
 const props = withDefaults(
   defineProps<{
-    tariff: string
+    tariff?: string
     deleteFromDom?: boolean
 
   }>(),
@@ -24,42 +22,37 @@ function confirm() {
 function cancel() {
   isOpen.value = false
 }
-
-if (props.deleteFromDom) {
-  handleElementPosition('connecting-tariff')
-}
+// `deleteFromDom` сохранён для совместимости API; ручной z-index в AModalV2 не нужен.
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="connecting-tariff"
+    width="424px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
-        {{ t('modals.connecting.title') }}
-      </p>
-      <a-ill-turn-on-tariff class="w-full"/>
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-turn-on-tariff />
       <p class="body-400 whitespace-pre-wrap text-center">
         {{ t('modals.connecting.questions') }}
       </p>
     </div>
 
     <template #footer>
-      <div class="flex gap-2 ">
-        <a-button
+      <div class="flex w-full gap-2">
+        <a-button-v2
           view="outline"
+          color="blue"
           block
           @click="cancel"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button block @click="confirm">
+        </a-button-v2>
+        <a-button-v2 block @click="confirm">
           {{ t('reuse.yes') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/modals/Insufficient-funds-modal.vue

@@ -1,20 +1,8 @@
 <script setup lang="ts">
 import type { UserInfo } from '~/api/modules/user/types'
-import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'
-
-const props = withDefaults(defineProps<Props>(), {
-  deleteFromDom: false,
-})
-
-const emit = defineEmits<{
-  (e: 'next'): void
-}>()
 
 const { t } = useI18n()
 
-interface Props {
-  deleteFromDom?: boolean
-}
 const { topUpSidePanel } = usePayment()
 
 const isOpen = defineModel<boolean>({ default: false })
@@ -27,49 +15,46 @@ function confirm() {
 function cancel() {
   isOpen.value = false
 }
-
-if (props.deleteFromDom) {
-  handleElementPosition('insufficient-funds')
-}
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="insufficient-funds"
+    width="424px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
+    <div class="flex flex-col gap-4 px-6 py-4">
+      <a-ill-empty-wallet class="self-center" />
+      <p class="text-center text-[18px] font-semibold">
         {{ t('modals.low_balance.title') }}
       </p>
-      <a-ill-empty-wallet class="self-center" />
-      <div class="m-[0_-32px] flex flex-col bg-green-500 py-1.5">
-        <p class="body-600 text-center  text-white ">
+      <p class="text-center">
+        {{ t('modals.low_balance.questions') }}
+      </p>
+      <div class="flex flex-col rounded-xl border border-blue-500 bg-blue-50 px-4 py-2 dark:border-blue-500 dark:bg-blue-950/40">
+        <p class="body-600 text-center text-blue-700 dark:text-blue-300">
           {{ t('modals.low_balance.current_balance') }}
         </p>
-        <p class="body-600 text-center text-xl text-white ">
+        <p class="body-600 text-center text-xl text-blue-700 dark:text-blue-300">
           {{ userInfo?.balance ? userInfo?.balance.toLocaleString('ru-RU') : 0 }}₸
         </p>
       </div>
-      <p class="text-center">
-        {{ t('modals.low_balance.questions') }}
-      </p>
     </div>
     <template #footer>
-      <div class="flex gap-2 ">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
+          color="blue"
           block
           @click="cancel"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button block @click="confirm">
+        </a-button-v2>
+        <a-button-v2 block @click="confirm">
           {{ t('modals.buttons.topUp') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/modals/LimitReachedModal.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { useUrls } from '#adata-ui/composables/useUrls'
 
 const { t } = useI18n()
@@ -16,11 +15,13 @@ function goTariffs() {
 <template>
   <a-modal v-model="isOpen" :title="t('modals.limit.title')">
     <div class="flex flex-col items-center gap-5 text-center text-sm">
-      <a-ill-empty-wallet></a-ill-empty-wallet>
+      <a-ill-empty-wallet />
       <div>{{ t('modals.limit.content') }}</div>
     </div>
     <template #footer>
-      <a-button @click="goTariffs" block>{{ t('modals.buttons.goTariffs') }}</a-button>
+      <a-button block @click="goTariffs">
+        {{ t('modals.buttons.goTariffs') }}
+      </a-button>
     </template>
   </a-modal>
 </template>

package/components/modals/NoAccessModal.vue

@@ -5,33 +5,31 @@ const { t } = useI18n()
 
 const isOpen = useNoAccessModal()
 
-const onClose = () => {
+function onClose() {
   isOpen.value = false
 }
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="no-access-modal"
+    width="424px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
-        {{ t('modals.no_access.title') }}
-      </p>
-      <a-ill-door class="w-full" />
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-door />
       <p class="body-400 whitespace-pre-wrap text-center">
         {{ t('modals.no_access.info') }}
       </p>
     </div>
     <template #footer>
-      <a-button
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="onClose"
       >
         {{ t('modals.buttons.close') }}
-      </a-button>
+      </a-button-v2>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>

package/components/modals/PaymentMethodModal.vue

@@ -66,7 +66,7 @@ if (props.deleteFromDom) {
         :name="`${item.name}`"
         side="right"
         :value="item.id"
-        class="flex items-center justify-between	gap-2 bg-gray-50 p-[10px_16px] rounded-md dark:bg-[#393D40]"
+        class="flex items-center justify-between	gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
       >
         <div class="flex w-full items-center gap-2">
           <component :is="item.img" />

package/components/modals/ReportBugConfirmModal.vue

@@ -3,28 +3,30 @@ const { t } = useI18n()
 
 const isOpen = defineModel<boolean>({ required: true })
 </script>
+
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
     width="424px"
   >
-    <template #header>
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-ok />
       <p class="heading-02 text-center font-bold">
         {{ t('modals.report_bug.confirmed') }}
       </p>
-    </template>
-    <div class="flex flex-col gap-5 items-center">
-      <a-ill-ok />
-      <p class="text-sm text-center">
+      <p class="body-400 text-center">
         {{ t('modals.report_bug.gratitude') }}
       </p>
-      <a-button
+    </div>
+    <template #footer>
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="isOpen = false"
       >
         {{ t('actions.close') }}
-      </a-button>
-    </div>
-  </a-modal>
+      </a-button-v2>
+    </template>
+  </a-modal-v2>
 </template>

package/components/modals/ReportBugModal.vue

@@ -18,7 +18,7 @@ const env = myLayer.mode
 
 const mask = new Mask({ mask: '# (###) ### ## ##' })
 
-const isOpen = defineModel<boolean>()
+const isOpen = defineModel<boolean>({ default: false })
 const form: any = reactive({
   name: '',
   email: '',
@@ -35,6 +35,7 @@ const scheme = z.object({
 })
 
 const submitted = ref(false)
+const sending = ref(false)
 
 const { validation, getError } = useUIValidation(
   scheme,
@@ -58,6 +59,7 @@ watch(phone, () => {
 async function send() {
   submitted.value = true
   if (validation.value) return
+  sending.value = true
   try {
     await $fetch<any>(`https://users.${env}.kz/api/v1/message/error`, {
       method: 'POST',
@@ -79,86 +81,90 @@ async function send() {
     form.comment = ''
     phone.value = ''
     submitted.value = false
+    sending.value = false
     emit('close')
   }
 }
 </script>
 
 <template>
-  <a-modal v-model="isOpen" data-test-id="report-form-modal">
+  <a-modal-v2 v-model="isOpen" width="424px">
     <template #header>
-      <p class="heading-02 text-center" data-test-id="report-form-title">
+      <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100" data-test-id="report-form-title">
         {{ t('modals.report_bug.title') }}
-      </p>
+      </h2>
     </template>
-    <div class="flex flex-col gap-5">
-      <div class="flex flex-col items-center justify-center gap-5">
-        <a-ill-stop-sign class="size-[185px]" />
+
+    <div class="flex flex-col gap-5 px-6 py-4">
+      <div class="flex flex-col items-center justify-center gap-4">
+        <a-ill-stop-sign class="size-[140px]" />
         <slot name="title">
           <p class="label-400 text-center">
             {{ name }}
           </p>
         </slot>
       </div>
-      <div class="flex flex-col gap-2">
-        <a-input-standard
+
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="form.name"
           required
-          :data-test-id="'report-form-name-input'"
           :label="t('modals.report_bug.labels.name')"
           :error="getError('name')"
+          data-test-id="report-form-name-input"
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.email"
           required
-          :data-test-id="'report-form-email-input'"
+          type="email"
           :label="t('modals.report_bug.labels.email')"
           :error="getError('email')"
+          data-test-id="report-form-email-input"
         />
-        <a-input-standard
+        <a-input-v2
           v-model="phone"
-          v-maska
           required
-          data-maska="8 (###) ### ## ##"
+          type="tel"
           clearable
-          :data-test-id="'report-form-phone-input'"
+          mask="8 (###) ### ## ##"
           :label="t('modals.report_bug.labels.phone')"
           :error="getError('phone_number')"
+          data-test-id="report-form-phone-input"
+        />
+        <a-textarea-v2
+          v-model="form.comment"
+          required
+          :rows="4"
+          resize="none"
+          :label="t('modals.report_bug.labels.comment')"
+          :error="getError('comment')"
+          data-test-id="report-form-comment-textarea"
         />
-        <div>
-          <a-textarea
-            v-model="form.comment"
-            required
-            :data-test-id="'report-form-comment-textarea'"
-            :label="t('modals.report_bug.labels.comment')"
-            size="md"
-            :error="getError('comment')"
-            class="min-h-[120px]"
-            :resizeable="false"
-          />
-        </div>
       </div>
     </div>
+
     <template #footer>
-      <div class="flex w-full gap-2">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
-          class="w-full"
+          color="blue"
+          block
           data-test-id="report-form-close-button"
           @click="emit('close')"
         >
           {{ t('actions.close') }}
-        </a-button>
-        <a-button
-          class="w-full"
+        </a-button-v2>
+        <a-button-v2
+          block
+          :loading="sending"
           data-test-id="report-form-submit-button"
           @click="send"
         >
           {{ t('actions.send') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped></style>

package/components/modals/Resend.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { useUrls } from '#adata-ui/composables/useUrls'
 
 const emit = defineEmits<{
@@ -17,33 +16,33 @@ function runTimer() {
   const intervalId = setInterval(() => {
     if (timer.value <= 0) {
       isResend.value = true
-      clearInterval(intervalId);
-      return;
+      clearInterval(intervalId)
+      return
     }
-    timer.value--;
-  }, 1000);
+    timer.value--
+  }, 1000)
 }
 
 onMounted(() => resend())
 
-const resend = () => {
+function resend() {
   isResend.value = false
   runTimer()
   emit('resend')
 }
-const goToMain = () => {
+function goToMain() {
   if (route.query.url) {
     document.location.replace(route.query.url)
-  } else {
+  }
+  else {
     document.location.replace(landing)
   }
   emit('close')
-
 }
 </script>
 
 <template>
-  <div class="flex flex-col justify-center items-center gap-5">
+  <div class="flex flex-col items-center justify-center gap-5">
     <p class="heading-02">
       {{ $t('login.modal.title') }}
     </p>

package/components/modals/SubmitApplicationModal.vue

@@ -57,65 +57,68 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="submit-application"
-    :prevent-close="true"
+    width="424px"
+    persistent
   >
-    <div class="flex flex-col gap-5">
-      <p class="text-center heading-02">
+    <div class="flex flex-col gap-5 px-6 py-4">
+      <p class="heading-02 text-center">
         {{ t('modals.submit_application_modal.title') }}
       </p>
       <a-ill-mail class="w-full" />
-      <div class="flex flex-col gap-2">
-        <a-input-standard
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="form.name"
+          required
           :label="t('modals.submit_application_modal.labels.name')"
           :error="getError('name')"
-          required
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.email"
+          required
+          type="email"
           :label="t('modals.submit_application_modal.labels.email')"
           :error="getError('email')"
-          required
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.phone"
-          v-maska
+          required
+          type="tel"
+          clearable
+          mask="8 (###) ###-##-##"
           :label="t('modals.submit_application_modal.labels.phone')"
-          data-maska="8 (###) ###-##-##"
           :error="getError('phone')"
-          clearable
-          required
         />
-        <a-textarea
+        <a-textarea-v2
           v-model="form.comment"
+          required
+          :rows="4"
+          resize="none"
           :label="t('modals.submit_application_modal.labels.comment')"
           :error="getError('comment')"
-          resizeable="none"
-          required
         />
       </div>
     </div>
     <template #footer>
-      <div class="flex gap-2 ">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
+          color="blue"
           block
           @click="cancel"
         >
           {{ t('reuse.close') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           block
           @click="send"
         >
           {{ t('reuse.send') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/overlays/modal/AModalV2.vue

@@ -298,7 +298,7 @@ function onTouchEnd() {
               </div>
 
               <header
-                v-if="!hideHeader && (title || $slots.header)"
+                v-if="!hideHeader"
                 class="flex shrink-0 items-center justify-between gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-800"
                 @touchstart.passive="onTouchStart"
                 @touchmove="onTouchMove"
@@ -306,17 +306,18 @@ function onTouchEnd() {
                 @touchcancel="onTouchEnd"
               >
                 <slot name="header">
-                  <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                  <h2 v-if="title" class="text-base font-semibold text-gray-900 dark:text-gray-100">
                     {{ title }}
                   </h2>
-                  <button
-                    type="button"
-                    class="rounded-md p-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                    @click="closeIfAllowed"
-                  >
-                    <a-icon-x-mark class="size-4" />
-                  </button>
                 </slot>
+                <!-- Кнопка закрытия не зависит от title и слота header — рендерится всегда (если header не скрыт). -->
+                <button
+                  type="button"
+                  class="ml-auto rounded-md p-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                  @click="closeIfAllowed"
+                >
+                  <a-icon-x-mark class="size-4" />
+                </button>
               </header>
 
               <div class="min-h-0 flex-1 overflow-auto" :class="contentClass">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.40-beta.4",
+  "version": "2.1.40-beta.5",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",