adata-ui 2.1.40-beta.2 → 2.1.40-beta.20

package/components/modals/SubmitApplicationModal.vue

@@ -1,123 +1,126 @@
-<script setup lang="ts">
-import * as z from 'zod'
-import { useUIValidation } from '#adata-ui/composables/useUIValidation'
-
-const props = defineProps<{
-  userInfo: any
-}>()
-
-const emit = defineEmits<{
-  (e: 'send', num: number): void
-}>()
-const { t } = useI18n()
-const isOpen = defineModel<boolean>({default: false})
-const form: any = reactive({
-  name: '',
-  email: '',
-  phone: '',
-  comment: '',
-})
-
-const scheme = z.object({
-  name: z.string().nonempty(t('modals.submit_application_modal.rules.required')),
-  email: z.string().nonempty(t('modals.submit_application_modal.rules.required')).email(t('modals.submit_application_modal.rules.email')),
-  phone: z.string().nonempty(t('modals.submit_application_modal.rules.required')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
-  comment: z.string().nonempty(t('modals.submit_application_modal.rules.required')),
-})
-
-const submitted = ref(false)
-
-const { validation, getError } = useUIValidation(
-  scheme,
-  () => form,
-  submitted,
-)
-
-const send = () => {
-  submitted.value = true
-  if (validation.value) return
-  emit('send', form)
-  form.name = ''
-  form.email = props.userInfo?.email || ''
-  form.phone = ''
-  form.comment = ''
-
-}
-const cancel = () => {
-  isOpen.value = false
-}
-
-defineExpose({
-  reset: () => (submitted.value = false),
-})
-
-onMounted(() => {
-  form.email = props.userInfo?.email || ''
-})
-</script>
-
-<template>
-  <a-modal
-    v-model="isOpen"
-    name="submit-application"
-    :prevent-close="true"
-  >
-    <div class="flex flex-col gap-5">
-      <p class="text-center heading-02">
-        {{ t('modals.submit_application_modal.title') }}
-      </p>
-      <a-ill-mail class="w-full" />
-      <div class="flex flex-col gap-2">
-        <a-input-standard
-          v-model="form.name"
-          :label="t('modals.submit_application_modal.labels.name')"
-          :error="getError('name')"
-          required
-        />
-        <a-input-standard
-          v-model="form.email"
-          :label="t('modals.submit_application_modal.labels.email')"
-          :error="getError('email')"
-          required
-        />
-        <a-input-standard
-          v-model="form.phone"
-          v-maska
-          :label="t('modals.submit_application_modal.labels.phone')"
-          data-maska="8 (###) ###-##-##"
-          :error="getError('phone')"
-          clearable
-          required
-        />
-        <a-textarea
-          v-model="form.comment"
-          :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
-          view="outline"
-          block
-          @click="cancel"
-        >
-          {{ t('reuse.close') }}
-        </a-button>
-        <a-button
-          block
-          @click="send"
-        >
-          {{ t('reuse.send') }}
-        </a-button>
-      </div>
-    </template>
-  </a-modal>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = defineProps<{
+  userInfo: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'send', num: number): void
+}>()
+const { t } = useI18n()
+const isOpen = defineModel<boolean>({default: false})
+const form: any = reactive({
+  name: '',
+  email: '',
+  phone: '',
+  comment: '',
+})
+
+const scheme = z.object({
+  name: z.string().nonempty(t('modals.submit_application_modal.rules.required')),
+  email: z.string().nonempty(t('modals.submit_application_modal.rules.required')).email(t('modals.submit_application_modal.rules.email')),
+  phone: z.string().nonempty(t('modals.submit_application_modal.rules.required')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
+  comment: z.string().nonempty(t('modals.submit_application_modal.rules.required')),
+})
+
+const submitted = ref(false)
+
+const { validation, getError } = useUIValidation(
+  scheme,
+  () => form,
+  submitted,
+)
+
+const send = () => {
+  submitted.value = true
+  if (validation.value) return
+  emit('send', form)
+  form.name = ''
+  form.email = props.userInfo?.email || ''
+  form.phone = ''
+  form.comment = ''
+
+}
+const cancel = () => {
+  isOpen.value = false
+}
+
+defineExpose({
+  reset: () => (submitted.value = false),
+})
+
+onMounted(() => {
+  form.email = props.userInfo?.email || ''
+})
+</script>
+
+<template>
+  <a-modal-v2
+    v-model="isOpen"
+    width="424px"
+    persistent
+  >
+    <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-3">
+        <a-input-v2
+          v-model="form.name"
+          required
+          :label="t('modals.submit_application_modal.labels.name')"
+          :error="getError('name')"
+        />
+        <a-input-v2
+          v-model="form.email"
+          required
+          type="email"
+          :label="t('modals.submit_application_modal.labels.email')"
+          :error="getError('email')"
+        />
+        <a-input-v2
+          v-model="form.phone"
+          required
+          type="tel"
+          clearable
+          mask="8 (###) ###-##-##"
+          :label="t('modals.submit_application_modal.labels.phone')"
+          :error="getError('phone')"
+        />
+        <a-textarea-v2
+          v-model="form.comment"
+          required
+          :rows="4"
+          resize="none"
+          :label="t('modals.submit_application_modal.labels.comment')"
+          :error="getError('comment')"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-2">
+        <a-button-v2
+          view="outline"
+          color="blue"
+          block
+          @click="cancel"
+        >
+          {{ t('reuse.close') }}
+        </a-button-v2>
+        <a-button-v2
+          block
+          @click="send"
+        >
+          {{ t('reuse.send') }}
+        </a-button-v2>
+      </div>
+    </template>
+  </a-modal-v2>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/id/AuthModal.vue

@@ -1,92 +1,92 @@
-<script setup lang="ts">
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-const { t } = useI18n()
-const isOpen = useAuthModal()
-const { myLayer } = useAppConfig()
-const { login } = useUrls()
-
-const { loginModal, registrationModal } = useIdModals()
-
-function goAuth() {
-  if (myLayer.authMode !== 'local') {
-    if (window) {
-      let fullPath = encodeURIComponent(window.location.toString())
-      if (fullPath.includes('basic-info')) {
-        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
-      }
-      window.location.href = `${login}?url=${fullPath}`
-    }
-  }
-  else {
-    isOpen.value = false
-    loginModal.value = true
-  }
-}
-
-function goRegister() {
-  if (myLayer.authMode !== 'local') {
-    if (window) {
-      let fullPath = encodeURIComponent(window.location.toString())
-      if (fullPath.includes('basic-info')) {
-        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
-      }
-      window.location.href = `${login}register?url=${fullPath}`
-    }
-  }
-  else {
-    isOpen.value = false
-    registrationModal.value = true
-  }
-}
-const close = () => {
-  isOpen.value = false
-  emit('close')
-}
-</script>
-
-<template>
-  <a-modal
-    v-model="isOpen"
-    :title="t('modals.auth.title')"
-    data-test-id="no-access-popup"
-  >
-    <div class="flex flex-col items-center gap-5 text-center text-sm">
-      <a-ill-door />
-      <div>{{ t('modals.auth.content') }}</div>
-      <a-button
-        block
-        variant="success"
-        data-test-id="no-access-popup-authorize-button"
-        @click="goAuth"
-      >
-        {{ t('modals.buttons.logIn') }}
-      </a-button>
-      <div>{{ t('modals.auth.firstTime') }}</div>
-    </div>
-    <template #footer>
-      <div class="flex gap-2">
-        <a-button
-          view="outline"
-          block
-          data-test-id="no-access-popup-close-button"
-          @click="close"
-        >
-          {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button
-          block
-          data-test-id="no-access-popup-register-button"
-          @click="goRegister"
-        >
-          {{ t('modals.buttons.register') }}
-        </a-button>
-      </div>
-    </template>
-  </a-modal>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+const { t } = useI18n()
+const isOpen = useAuthModal()
+const { myLayer } = useAppConfig()
+const { login } = useUrls()
+
+const { loginModal, registrationModal } = useIdModals()
+
+function goAuth() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
+      }
+      window.location.href = `${login}?url=${fullPath}`
+    }
+  }
+  else {
+    isOpen.value = false
+    loginModal.value = true
+  }
+}
+
+function goRegister() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
+      }
+      window.location.href = `${login}register?url=${fullPath}`
+    }
+  }
+  else {
+    isOpen.value = false
+    registrationModal.value = true
+  }
+}
+const close = () => {
+  isOpen.value = false
+  emit('close')
+}
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    :title="t('modals.auth.title')"
+    data-test-id="no-access-popup"
+  >
+    <div class="flex flex-col items-center gap-5 text-center text-sm">
+      <a-ill-door />
+      <div>{{ t('modals.auth.content') }}</div>
+      <a-button
+        block
+        variant="success"
+        data-test-id="no-access-popup-authorize-button"
+        @click="goAuth"
+      >
+        {{ t('modals.buttons.logIn') }}
+      </a-button>
+      <div>{{ t('modals.auth.firstTime') }}</div>
+    </div>
+    <template #footer>
+      <div class="flex gap-2">
+        <a-button
+          view="outline"
+          block
+          data-test-id="no-access-popup-close-button"
+          @click="close"
+        >
+          {{ t('modals.buttons.close') }}
+        </a-button>
+        <a-button
+          block
+          data-test-id="no-access-popup-register-button"
+          @click="goRegister"
+        >
+          {{ t('modals.buttons.register') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped></style>

package/components/modals/id/IdAutoLogoutModal.vue

@@ -1,45 +1,45 @@
-<script setup lang="ts">
-const emit = defineEmits<{
-  (e: 'closed', value: boolean): void
-}>()
-
-const { t } = useI18n()
-
-const { loginModal, autoLogoutModal } = useIdModals()
-
-function onLogin() {
-  autoLogoutModal.value = false
-  loginModal.value = true
-}
-
-function onClose() {
-  emit('closed', true)
-}
-</script>
-
-<template>
-  <div class="flex flex-col items-center gap-4 text-center">
-    <h2 class="text-2xl font-bold">
-      {{ t('modals.id.autoLogout.title') }}
-    </h2>
-    <a-ill-info class="size-[120px]" />
-    <p class="text-sm">
-      {{ t('modals.id.autoLogout.content') }}
-    </p>
-    <div class="flex w-full gap-2">
-      <a-button block view="outline" @click="onClose">
-        {{ t('actions.close') }}
-      </a-button>
-      <a-button
-        block
-        @click="onLogin"
-      >
-        {{ t('actions.login') }}
-      </a-button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'closed', value: boolean): void
+}>()
+
+const { t } = useI18n()
+
+const { loginModal, autoLogoutModal } = useIdModals()
+
+function onLogin() {
+  autoLogoutModal.value = false
+  loginModal.value = true
+}
+
+function onClose() {
+  emit('closed', true)
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 text-center">
+    <h2 class="text-2xl font-bold">
+      {{ t('modals.id.autoLogout.title') }}
+    </h2>
+    <a-ill-info class="size-[120px]" />
+    <p class="text-sm">
+      {{ t('modals.id.autoLogout.content') }}
+    </p>
+    <div class="flex w-full gap-2">
+      <a-button block view="outline" @click="onClose">
+        {{ t('actions.close') }}
+      </a-button>
+      <a-button
+        block
+        @click="onLogin"
+      >
+        {{ t('actions.login') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/id/IdBanner.vue

@@ -1,61 +1,61 @@
-<script setup lang="ts">
-const { t } = useI18n()
-
-const { registrationModal } = useIdModals()
-
-function onRegister() {
-  registrationModal.value = true
-}
-</script>
-
-<template>
-  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
-    <div>
-      <p class="mb-2 font-semibold">
-        {{ t('modals.id.banners.auth.title') }}
-      </p>
-      <i18n-t
-        keypath="modals.id.banners.auth.subtitle"
-        tag="p"
-        class="text-sm text-gray-600 dark:text-gray-200"
-      >
-        <template #register>
-          <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">
-            {{ t('modals.id.banners.auth.register') }}
-          </button>
-        </template>
-        <template #checks>
-          <span class="font-bold text-deepblue-900 dark:text-white">{{ t('modals.id.banners.auth.checks') }}</span>
-        </template>
-      </i18n-t>
-    </div>
-
-    <a-button
-      size="md"
-      class="sm:self-end bg-gradient-blue"
-      @click="onRegister"
-    >
-      {{ t('actions.register') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-.gradient {
-  background: linear-gradient(
-    239.71deg,
-    #B3D5F9 -7.48%,
-    #E6F1FD 39.62%,
-    #CCE2FB 85.82%
-  );
-}
-
-.dark .gradient {
-  background: linear-gradient(
-    239.71deg,
-    #17303F -7.48%,
-    #161617 39.62%,
-    #17303F 85.82%
-  );
-}
-</style>
+<script setup lang="ts">
+const { t } = useI18n()
+
+const { registrationModal } = useIdModals()
+
+function onRegister() {
+  registrationModal.value = true
+}
+</script>
+
+<template>
+  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+    <div>
+      <p class="mb-2 text-h5">
+        {{ t('modals.id.banners.auth.title') }}
+      </p>
+      <i18n-t
+        keypath="modals.id.banners.auth.subtitle"
+        tag="p"
+        class="text-body-md text-gray-600 dark:text-gray-200"
+      >
+        <template #register>
+          <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">
+            {{ t('modals.id.banners.auth.register') }}
+          </button>
+        </template>
+        <template #checks>
+          <span class="font-bold text-deepblue-900 dark:text-white">{{ t('modals.id.banners.auth.checks') }}</span>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="sm:self-end bg-gradient-blue"
+      @click="onRegister"
+    >
+      {{ t('actions.register') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+.gradient {
+  background: linear-gradient(
+    239.71deg,
+    #B3D5F9 -7.48%,
+    #E6F1FD 39.62%,
+    #CCE2FB 85.82%
+  );
+}
+
+.dark .gradient {
+  background: linear-gradient(
+    239.71deg,
+    #17303F -7.48%,
+    #161617 39.62%,
+    #17303F 85.82%
+  );
+}
+</style>