adata-ui 2.1.40-beta.9 → 2.1.41-beta.0

package/components/modals/AboutTariffModal.vue

@@ -1,114 +1,115 @@
-<script setup lang="ts">
-import CheckmarkCircle from '#adata-ui/icons/check/checkmark-circle.vue'
-
-interface Item {
-  price: number
-  action: string
-  id: number
-  isConnected: boolean
-  key: string
-  code: string
-}
-
-interface Props {
-  id: number
-  items: Item[]
-}
-
-withDefaults(defineProps<Props>(), {})
-
-const isOpen = defineModel<boolean>({ default: false })
-
-const device = useAdaptive()
-
-const { t, rt, tm } = useI18n()
-
-</script>
-
-<template>
-  <a-modal
-    v-model="isOpen"
-    width="522"
-    :height-modal-class="device.isSmallTablet ? 'h-[612px]' : ''"
-    :is-scrollable="true"
-    @close="isOpen = false"
-  >
-    <div class="flex flex-col gap-5 lg:w-[458px]">
-      <h3 class="heading-02 text-center lg:text-left">
-        {{ t('tariffs.aboutTariff') }}
-      </h3>
-      <div class="flex flex-col gap-2 lg:pb-0">
-        <div
-          class="body-400 relative grid w-full grid-cols-1 grid-rows-2 gap-[43px] px-4 py-8 lg:max-w-[458px] lg:px-[70px] lg:py-[27px]"
-        >
-          <img
-            class="absolute size-full"
-            src="/tariff/subtract.png"
-            alt="background"
-          >
-          <div class="flex justify-around gap-8 lg:justify-between">
-            <div>
-              <div>
-                {{ t('reuse.subscribe') }}
-              </div>
-              <h4 class="md:heading-02 heading-03">
-                {{ t(`tariffs.modals.${id}.name`) }}
-              </h4>
-            </div>
-            <div>
-              <div>
-                {{ t('reuse.startingFrom') }}
-              </div>
-              <div class="md:heading-02 heading-03">
-                {{ t(`tariffs.modals.${id}.price`) }} <span
-                  class="body-400"
-                >{{ t(`tariffs.modals.${id}.period`) }}</span>
-              </div>
-            </div>
-          </div>
-          <p class="px-1 text-center lg:px-0">
-            {{ t(`tariffs.modals.${id}.forWho`) }}
-          </p>
-        </div>
-        <div class="flex flex-wrap gap-1 sm:gap-2">
-          <div
-            v-for="(item, index) in tm(`tariffs.modals.${id}.professions`)"
-            class=" h-7 rounded-full bg-blue-700 px-[10px] py-[5px] text-xs leading-[16px] text-white dark:bg-blue-500  dark:text-gray-900 "
-          >
-            {{ rt(item) }}
-          </div>
-        </div>
-        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-          <div
-            v-for="(item, index) in tm(`tariffs.modals.${id}.functions`)"
-            class="flex items-center gap-[1.5px]"
-          >
-            <checkmark-circle class="shrink-0 text-green-500 dark:text-green-400" />
-            <p class="text-xs">
-              {{ rt(item) }}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex gap-4"
-        :class="device.isMobile ? 'bg-white dark:bg-gray-900 m-0 p-4 sticky bottom-0 left-0 w-full' : ''"
-      >
-        <a-button
-          view="outline"
-          variant="primary"
-          block
-          class="!rounded-full"
-          @click="isOpen = false"
-        >
-          {{ t('reuse.close') }}
-        </a-button>
-        <slot
-          name="button"
-          size="lg"
-          :item="items[id - 1]"
-        />
-      </div>
-    </div>
-  </a-modal>
-</template>
+<script setup lang="ts">
+import CheckmarkCircle from '#adata-ui/icons/check/checkmark-circle.vue'
+
+interface Item {
+  price: number
+  action: string
+  id: number
+  isConnected: boolean
+  key: string
+  code: string
+}
+
+interface Props {
+  id: number
+  items: Item[]
+}
+
+withDefaults(defineProps<Props>(), {})
+
+const isOpen = defineModel<boolean>({ default: false })
+
+const device = useAdaptive()
+
+const { t, rt, tm } = useI18n()
+
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    width="522"
+    :height-modal-class="device.isSmallTablet ? 'h-[612px]' : ''"
+    :is-scrollable="true"
+    @close="isOpen = false"
+  >
+    <div class="flex flex-col gap-5 lg:w-[458px]">
+      <h3 class="text-h2 text-center lg:text-left">
+        {{ t('tariffs.aboutTariff') }}
+      </h3>
+      <div class="flex flex-col gap-2 lg:pb-0">
+        <div
+          class="text-body-md relative grid w-full grid-cols-1 grid-rows-2 gap-[43px] px-4 py-8 lg:max-w-[458px] lg:px-[70px] lg:py-[27px]"
+        >
+          <img
+            class="absolute size-full"
+            src="/tariff/subtract.png"
+            alt="background"
+          >
+          <div class="flex justify-around gap-8 lg:justify-between">
+            <div>
+              <div>
+                {{ t('reuse.subscribe') }}
+              </div>
+              <h4 class="md:text-h2 text-h3">
+                {{ t(`tariffs.modals.${id}.name`) }}
+              </h4>
+            </div>
+            <div>
+              <div>
+                {{ t('reuse.startingFrom') }}
+              </div>
+              <div class="md:text-h2 text-h3">
+                {{ t(`tariffs.modals.${id}.price`) }} <span
+                  class="text-body-md"
+                >{{ t(`tariffs.modals.${id}.period`) }}</span>
+              </div>
+            </div>
+          </div>
+          <p class="px-1 text-center lg:px-0">
+            {{ t(`tariffs.modals.${id}.forWho`) }}
+          </p>
+        </div>
+        <div class="flex flex-wrap gap-1 sm:gap-2">
+          <!-- осознанно константный text-white: белый текст на цветной brand-пилюле -->
+          <div
+            v-for="(item, index) in tm(`tariffs.modals.${id}.professions`)"
+            class="h-7 rounded-full bg-brand px-[10px] py-[5px] text-body-sm text-white"
+          >
+            {{ rt(item) }}
+          </div>
+        </div>
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <div
+            v-for="(item, index) in tm(`tariffs.modals.${id}.functions`)"
+            class="flex items-center gap-[1.5px]"
+          >
+            <checkmark-circle class="shrink-0 text-success" />
+            <p class="text-body-sm">
+              {{ rt(item) }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex gap-4"
+        :class="device.isMobile ? 'bg-main m-0 p-4 sticky bottom-0 left-0 w-full' : ''"
+      >
+        <a-button
+          view="outline"
+          variant="primary"
+          block
+          class="!rounded-full"
+          @click="isOpen = false"
+        >
+          {{ t('reuse.close') }}
+        </a-button>
+        <slot
+          name="button"
+          size="lg"
+          :item="items[id - 1]"
+        />
+      </div>
+    </div>
+  </a-modal>
+</template>

package/components/modals/AnotherDeviceModal.vue

@@ -1,64 +1,65 @@
-<script setup lang="ts">
-import { useUrls } from '#adata-ui/composables/useUrls'
-import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
-
-const { t, locale } = useI18n()
-const localePath = useLocalePath()
-
-const isOpen = useAnotherDeviceModal()
-const { landing } = useUrls()
-
-function onClose() {
-  isOpen.value = false
-  return navigateTo(localePath('/'))
-}
-
-function onToMain() {
-  return navigateToLocalizedPage({ locale, projectUrl: landing, target: '_self' })
-}
-</script>
-
-<template>
-  <a-modal-v2
-    v-model="isOpen"
-    width="424px"
-    @close="onClose"
-  >
-    <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 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="size-4 shrink-0"
-        />
-        <span class="text-xs">
-          {{ t('modals.another_device_modal.alert') }}
-        </span>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex w-full gap-2">
-        <a-button-v2
-          view="outline"
-          color="blue"
-          block
-          @click="onClose"
-        >
-          {{ t('modals.buttons.close') }}
-        </a-button-v2>
-        <a-button-v2
-          block
-          @click="onToMain"
-        >
-          {{ t('modals.buttons.toMain') }}
-        </a-button-v2>
-      </div>
-    </template>
-  </a-modal-v2>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { useUrls } from '#adata-ui/composables/useUrls'
+import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+
+const { t, locale } = useI18n()
+const localePath = useLocalePath()
+
+const isOpen = useAnotherDeviceModal()
+const { landing } = useUrls()
+
+function onClose() {
+  isOpen.value = false
+  return navigateTo(localePath('/'))
+}
+
+function onToMain() {
+  return navigateToLocalizedPage({ locale, projectUrl: landing, target: '_self' })
+}
+</script>
+
+<template>
+  <a-modal-v2
+    v-model="isOpen"
+    width="424px"
+    hide-header-border
+    @close="onClose"
+  >
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
+      <a-ill-phone-check />
+      <p class="text-h4 whitespace-pre-wrap text-center">
+        {{ t('modals.another_device_modal.title') }}
+      </p>
+      <p class="text-body-md whitespace-pre-wrap text-center text-quaternary">
+        {{ t('modals.another_device_modal.info') }}
+      </p>
+      <a-alert
+        color="red"
+        icon-type="triangle"
+        size="xs"
+      >
+        {{ t('modals.another_device_modal.alert') }}
+      </a-alert>
+    </div>
+    <template #footer>
+      <div class="flex w-full gap-2">
+        <a-button-v2
+          view="outline"
+          color="blue"
+          block
+          @click="onClose"
+        >
+          {{ t('modals.buttons.close') }}
+        </a-button-v2>
+        <a-button-v2
+          block
+          @click="onToMain"
+        >
+          {{ t('modals.buttons.toMain') }}
+        </a-button-v2>
+      </div>
+    </template>
+  </a-modal-v2>
+</template>
+
+<style scoped></style>

package/components/modals/ApplicationAcceptedModal.vue

@@ -1,44 +1,45 @@
-<script setup lang="ts">
-const { t } = useI18n()
-
-const isOpen = defineModel<boolean>({ default: false })
-
-function cancel() {
-  isOpen.value = false
-}
-
-const modalText = {
-  title: t('modals.application_accepted_modal.title'),
-  info: t('modals.application_accepted_modal.info'),
-  close: t('modals.buttons.close'),
-}
-</script>
-
-<template>
-  <a-modal-v2
-    v-model="isOpen"
-    width="424px"
-    :persistent="true"
-  >
-    <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-v2
-        view="outline"
-        color="blue"
-        block
-        @click="cancel"
-      >
-        {{ modalText.close }}
-      </a-button-v2>
-    </template>
-  </a-modal-v2>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+const { t } = useI18n()
+
+const isOpen = defineModel<boolean>({ default: false })
+
+function cancel() {
+  isOpen.value = false
+}
+
+const modalText = {
+  title: t('modals.application_accepted_modal.title'),
+  info: t('modals.application_accepted_modal.info'),
+  close: t('modals.buttons.close'),
+}
+</script>
+
+<template>
+  <a-modal-v2
+    v-model="isOpen"
+    width="424px"
+    :persistent="true"
+    hide-header-border
+  >
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
+      <a-ill-ok />
+      <p class="text-body-md text-center text-quaternary">
+        {{ modalText.info }}
+      </p>
+    </div>
+    <template #footer>
+      <a-button-v2
+        view="outline"
+        color="blue"
+        block
+        @click="cancel"
+      >
+        {{ modalText.close }}
+      </a-button-v2>
+    </template>
+  </a-modal-v2>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/ConnectingTariffModal.vue

@@ -1,60 +1,60 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    tariff?: string
-    deleteFromDom?: boolean
-
-  }>(),
-  {
-    tariff: '',
-    deleteFromDom: false,
-  },
-)
-const emit = defineEmits<{
-  (e: 'buyTariff', num: number): void
-}>()
-const { t } = useI18n()
-
-const isOpen = defineModel<boolean>({ default: false })
-function confirm() {
-  emit('buyTariff', props.tariff)
-}
-function cancel() {
-  isOpen.value = false
-}
-// `deleteFromDom` сохранён для совместимости API; ручной z-index в AModalV2 не нужен.
-</script>
-
-<template>
-  <a-modal-v2
-    v-model="isOpen"
-    width="424px"
-  >
-    <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 w-full gap-2">
-        <a-button-v2
-          view="outline"
-          color="blue"
-          block
-          @click="cancel"
-        >
-          {{ t('modals.buttons.close') }}
-        </a-button-v2>
-        <a-button-v2 block @click="confirm">
-          {{ t('reuse.yes') }}
-        </a-button-v2>
-      </div>
-    </template>
-  </a-modal-v2>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    tariff?: string
+    deleteFromDom?: boolean
+
+  }>(),
+  {
+    tariff: '',
+    deleteFromDom: false,
+  },
+)
+const emit = defineEmits<{
+  (e: 'buyTariff', num: number): void
+}>()
+const { t } = useI18n()
+
+const isOpen = defineModel<boolean>({ default: false })
+function confirm() {
+  emit('buyTariff', props.tariff)
+}
+function cancel() {
+  isOpen.value = false
+}
+// `deleteFromDom` сохранён для совместимости API; ручной z-index в AModalV2 не нужен.
+</script>
+
+<template>
+  <a-modal-v2
+    v-model="isOpen"
+    width="424px"
+  >
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-turn-on-tariff />
+      <p class="text-body-md whitespace-pre-wrap text-center">
+        {{ t('modals.connecting.questions') }}
+      </p>
+    </div>
+
+    <template #footer>
+      <div class="flex w-full gap-2">
+        <a-button-v2
+          view="outline"
+          color="blue"
+          block
+          @click="cancel"
+        >
+          {{ t('modals.buttons.close') }}
+        </a-button-v2>
+        <a-button-v2 block @click="confirm">
+          {{ t('reuse.yes') }}
+        </a-button-v2>
+      </div>
+    </template>
+  </a-modal-v2>
+</template>
+
+<style scoped>
+
+</style>