adata-ui 2.1.40-beta.1 → 2.1.40-beta.11

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/forms/toggle/AToggleV2.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+type Size = 'sm' | 'md'
+
+const props = withDefaults(defineProps<{
+  label?: string
+  labelSide?: 'left' | 'right'
+  size?: Size
+  disabled?: boolean
+}>(), {
+  labelSide: 'left',
+  size: 'md',
+  disabled: false,
+})
+
+const model = defineModel<boolean>({ default: false })
+
+const SIZE: Record<Size, { track: string, knob: string, on: string, off: string, text: string }> = {
+  sm: { track: 'h-5 w-9', knob: 'size-4', on: 'translate-x-4', off: 'translate-x-0.5', text: 'text-xs' },
+  md: { track: 'h-6 w-11', knob: 'size-5', on: 'translate-x-5', off: 'translate-x-0.5', text: 'text-sm' },
+}
+const s = computed(() => SIZE[props.size])
+
+function toggle() {
+  if (props.disabled) return
+  model.value = !model.value
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="model"
+    :aria-disabled="disabled || undefined"
+    :disabled="disabled"
+    class="toggle-v2 group inline-flex select-none items-center gap-2 rounded-full focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+    :class="labelSide === 'right' ? 'flex-row-reverse' : ''"
+    @click="toggle"
+  >
+    <span
+      v-if="label"
+      class="font-medium text-gray-600 transition-colors group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100"
+      :class="s.text"
+    >
+      {{ label }}
+    </span>
+    <span
+      class="relative inline-flex shrink-0 items-center rounded-full ring-1 ring-inset transition-colors duration-200 group-focus-visible:ring-2 group-focus-visible:ring-blue-500/50"
+      :class="[
+        s.track,
+        model
+          ? 'bg-blue-600 ring-blue-600/30 dark:bg-blue-500 dark:ring-blue-400/30'
+          : 'bg-gray-200 ring-gray-300/60 dark:bg-gray-700 dark:ring-gray-600/60',
+      ]"
+    >
+      <span
+        class="toggle-v2__knob inline-block rounded-full bg-white shadow-sm transition-transform duration-200 will-change-transform dark:bg-gray-100"
+        :class="[s.knob, model ? s.on : s.off]"
+      />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+@media (prefers-reduced-motion: reduce) {
+  .toggle-v2,
+  .toggle-v2 * {
+    transition: none !important;
+  }
+}
+</style>

package/components/modals/AnotherDeviceModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useAnotherDeviceModal } from '#adata-ui/composables/modalsState'
 import { useUrls } from '#adata-ui/composables/useUrls'
+import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+
 const { t, locale } = useI18n()
 const localePath = useLocalePath()
 
@@ -11,50 +12,53 @@ function onClose() {
   isOpen.value = false
   return navigateTo(localePath('/'))
 }
+
+function onToMain() {
+  return navigateToLocalizedPage({ locale, projectUrl: landing, target: '_self' })
+}
 </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"
-          :to="buildLocalizedUrl(locale, landing)"
+        </a-button-v2>
+        <a-button-v2
+          block
+          @click="onToMain"
         >
           {{ 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>