adata-ui 3.1.16 → 3.1.17

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "failOnWarn": false,
-  "version": "3.1.16",
+  "version": "3.1.17",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/components/CurveBlock.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { NuxtLinkLocale } from "#components";
-defineProps({
-  icon: { type: null, required: true },
+const props = defineProps({
+  icon: { type: Object, required: true },
   title: { type: String, required: true },
   description: { type: String, required: true },
   to: { type: String, required: false }
@@ -12,12 +12,11 @@ defineProps({
   <component
     :is="to ? NuxtLinkLocale : 'button'"
     :to="to"
-    class="curve-block relative w-fit cursor-pointer z-10 block "
+    class="curve-block relative w-full cursor-pointer"
     active-class="active-item"
   >
     <svg
-      width="306"
-      height="182"
+      class="w-full"
       viewBox="-1 -1 308 184"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -60,27 +59,25 @@ defineProps({
       </defs>
     </svg>
 
-    <div class="absolute  left-6 top-6 flex flex-col gap-4 pr-6">
+    <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">
+        <div class="rounded-[4px]  icon-item 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">
+        <p class="text-base title font-semibold">
           {{ title }}
         </p>
       </div>
-      <p class="text-sm text-gray-600 dark:text-gray-200 text-left">
+      <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"
+      class="absolute bottom-0 right-0 size-12 2xl:size-14"
       viewBox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -156,10 +153,12 @@ defineProps({
   fill: #F4F5F6;
 }
 
-.active-item .border-path,
-.active-item .animated-border {
-  stroke-dashoffset: 0;
-  fill: white;
+.active-item .title {
+  color: #0070EB;
+}
+
+.active-item .border-path {
+  fill: rgba(0, 112, 235, 0.1019607843);
 }
 
 .curve-block:hover .border-path,
@@ -169,6 +168,12 @@ defineProps({
   fill: white;
 }
 
+.curve-block:hover .icon-item {
+  background-color: #E0EFFF;
+  color: #0070EB;
+  transition: all 2s ease, fill 2s ease;
+}
+
 .border-path {
   stroke: url(#gradient-light);
 }
@@ -193,10 +198,16 @@ defineProps({
 .dark .animated-border {
   fill: #26282b;
 }
-.dark .active-item .border-path,
-.dark .active-item .animated-border {
-  stroke-dashoffset: 0;
-  fill: #131415;
+.dark .active-item .title {
+  color: #1b98e2;
+}
+.dark .active-item .border-path {
+  fill: rgba(23, 146, 221, 0.38);
+}
+.dark .curve-block:hover .icon-item {
+  background-color: rgba(30, 88, 156, 0.6);
+  color: #1b98e2;
+  transition: all 2s ease, fill 2s ease;
 }
 .dark .curve-block:hover .border-path,
 .dark .curve-block:hover .animated-border {

package/dist/runtime/components/CurveBlock.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import type { Component } from '@nuxt/schema';
 type __VLS_Props = {
     icon: Component;
     title: string;

package/dist/runtime/components/forms/request-demo/RequestDemo.vue

@@ -1,67 +1,88 @@
 <script setup>
-import AButton from "../../button/Button.vue";
-import InputStandard from "../input/standard/InputStandard.vue";
-import ATextarea from "../input/textarea/ATextarea.vue";
-import { ref, useI18n } from "#imports";
-const emit = defineEmits(["onSend"]);
+import * as z from "zod";
+import { useUIValidation } from "~/src/runtime/composables/useUIValidation";
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false }
+});
+const emit = defineEmits(["send"]);
 const { t } = useI18n();
-const isLoading = defineModel("loading", { type: Boolean, ...{ default: false } });
-const isModalOpen = defineModel("modal", { type: Boolean, ...{ default: false } });
-const fullName = ref("");
-const phone = ref("");
-const comment = ref("");
+const form = reactive({
+  sender_name: "",
+  email: "",
+  phone_number: ""
+});
+const submitted = ref(false);
+const schema = z.object({
+  sender_name: z.string().nonempty(t("forms.feedback.fieldRequired")),
+  email: z.string().nonempty(t("forms.feedback.fieldRequired")).email(t("forms.feedback.emailValid")),
+  phone_number: z.string().nonempty(t("forms.feedback.fieldRequired")).min(17, t("forms.feedback.phoneMinLength", { count: 10 }))
+});
+const { validation, getError } = useUIValidation(schema, () => form, submitted);
+function onSend() {
+  submitted.value = true;
+  if (validation.value) return;
+  emit("send", form);
+  submitted.value = false;
+  form.sender_name = "";
+  form.email = "";
+  form.phone_number = "";
+}
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 rounded-[20px] bg-white p-8 dark:bg-gray-900">
-    <div class="flex flex-col gap-2">
-      <h3 class="font-bold text-[2rem] leading-10">
-        {{ t("forms.demo.t") }}
-      </h3>
-      <p class="text-base">
-        {{ t("forms.demo.st") }}
-      </p>
-    </div>
-    <form
-      action=""
-      class="flex flex-col justify-between gap-2 sm:flex-row sm:gap-4"
-    >
-      <div class="flex flex-col gap-2 sm:w-1/2 sm:gap-4">
-        <input-standard
-          v-model="fullName"
-          color-classes="bg-gray-50 dark:bg-gray-800"
-          :label="t('forms.demo.n')"
-          required
-          size="md"
-          :disabled="isLoading"
-        />
-        <input-standard
-          v-model="phone"
-          v-maska
-          color-classes="bg-gray-50 dark:bg-gray-800"
-          type="tel"
-          :label="t('forms.demo.p')"
-          data-maska="8 (###) ###-##-##"
-          required
-          size="md"
-          :disabled="isLoading"
-        />
+  <div class="rounded-[20px] bg-blue-700 dark:bg-[#1B98E2] p-4 dark:bg-blue-500 lg:p-8">
+    <div class="flex w-full flex-col gap-4 lg:flex-row lg:justify-between">
+      <div class="flex flex-col gap-4 text-white dark:text-gray-900 lg:max-w-[50%] lg:gap-6">
+        <slot name="title">
+          <p class="md:text-[32px] text-[24px]  font-bold">
+            {{ title || t("forms.request_demo.title") }}
+          </p>
+        </slot>
+        <slot name="description">
+          <p class="text-base whitespace-pre-line">
+            {{ description || t("forms.request_demo.info") }}
+          </p>
+        </slot>
       </div>
-      <div class="sm:w-1/2">
-        <a-textarea
-          v-model="comment"
-          :label="t('forms.demo.c')"
-          :resizeable="false"
-          class="min-h-[72px]"
-          color-classes="dark:bg-gray-800 bg-gray-50"
-          required
-          size="sm"
-          :disabled="isLoading"
-        />
+      <div class="rounded-[20px] bg-white p-6 dark:bg-gray-900 lg:w-[456px]">
+        <div class="flex flex-col gap-4">
+          <slot name="inputs">
+            <div class="flex flex-col gap-4">
+              <adt-forms-input-standard
+                v-model="form.sender_name"
+                required
+                :label="t('forms.demo.n')"
+                :error="getError('sender_name')"
+              />
+              <adt-forms-input-standard
+                v-model="form.email"
+                required
+                :label="t('forms.demo.e')"
+                :error="getError('email')"
+                type="email"
+              />
+              <adt-forms-input-standard
+                v-model="form.phone_number"
+                v-maska
+                required
+                data-maska="8 (###) ###-##-##"
+                :label="t('forms.demo.p')"
+                :error="getError('phone_number')"
+                type="tel"
+              />
+            </div>
+          </slot>
+          <div>
+            <a-button
+              block
+              @click="onSend"
+            >
+              {{ t("forms.request_demo.send") }}
+            </a-button>
+          </div>
+        </div>
       </div>
-    </form>
-    <a-button class="w-full self-end sm:w-[215px] font-semibold" :disabled="isLoading">
-      {{ t("forms.demo.b") }}
-    </a-button>
+    </div>
   </div>
 </template>

package/dist/runtime/components/forms/request-demo/RequestDemo.vue.d.ts

@@ -1,23 +1,20 @@
-type __VLS_PublicProps = {
-    'loading'?: boolean;
-    'modal'?: boolean;
+type __VLS_Props = {
+    title?: string;
+    description?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:loading": (value: boolean) => any;
-    "update:modal": (value: boolean) => any;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
 } & {
-    onSend: (form: {
-        sender_name: string;
-        phone_number: string;
-        message: string;
-    }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onOnSend?: ((form: {
-        sender_name: string;
-        phone_number: string;
-        message: string;
-    }) => any) | undefined;
-    "onUpdate:loading"?: ((value: boolean) => any) | undefined;
-    "onUpdate:modal"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    description?: (props: typeof __VLS_3) => any;
+} & {
+    inputs?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useUIValidation.d.ts

@@ -0,0 +1,4 @@
+export declare function useUIValidation(schema: any, data: any, submitted: Ref<boolean>): {
+    validation: any;
+    getError: (path: string) => any;
+};

package/dist/runtime/composables/useUIValidation.js

@@ -0,0 +1,14 @@
+export function useUIValidation(schema, data, submitted) {
+  const validation = computed(() => {
+    if (!submitted.value) return null;
+    const result = schema.safeParse(data());
+    return result.success ? null : result.error;
+  });
+  function getError(path) {
+    return validation.value?.issues.find((issue) => issue.path[0] === path)?.message;
+  }
+  return {
+    validation,
+    getError
+  };
+}

package/dist/runtime/i18n/i18n.config.d.ts

@@ -382,6 +382,12 @@ declare const _default: {
                     modalTitle: string;
                     modalSubtitle: string;
                 };
+                request_demo: {
+                    title: string;
+                    info: string;
+                    agreement: string;
+                    send: string;
+                };
                 demo: {
                     t: string;
                     st: string;
@@ -946,6 +952,12 @@ declare const _default: {
                     modalTitle: string;
                     modalSubtitle: string;
                 };
+                request_demo: {
+                    title: string;
+                    info: string;
+                    agreement: string;
+                    send: string;
+                };
                 demo: {
                     t: string;
                     st: string;
@@ -1510,6 +1522,12 @@ declare const _default: {
                     modalTitle: string;
                     modalSubtitle: string;
                 };
+                request_demo: {
+                    title: string;
+                    info: string;
+                    agreement: string;
+                    send: string;
+                };
                 demo: {
                     t: string;
                     st: string;

package/dist/runtime/lang/en.js

@@ -376,6 +376,12 @@ const EnLocale = {
       modalTitle: "Request Accepted",
       modalSubtitle: "Thank you for your feedback!"
     },
+    request_demo: {
+      title: "Try all the features of the service for free",
+      info: "Check the functionality and quality of the data in real conditions. Demo access will allow you to test all the key features of the service.\nFill out the form to submit a connection request",
+      agreement: "By filling out the form, you agree to the processing of personal data and receiving informational messages",
+      send: "Submit Request"
+    },
     demo: {
       t: "Request Demo Access",
       st: "Fill out the form to request demo access",

package/dist/runtime/lang/kk.js

@@ -376,6 +376,12 @@ const KkLocale = {
       modalTitle: "\u04E8\u0442\u0456\u043D\u0456\u043C \u049B\u0430\u0431\u044B\u043B\u0434\u0430\u043D\u0434\u044B",
       modalSubtitle: "\u049A\u0430\u0442\u044B\u0441\u049B\u0430\u043D\u044B\u04A3\u044B\u0437 \u04AF\u0448\u0456\u043D \u0440\u0430\u0445\u043C\u0435\u0442!"
     },
+    request_demo: {
+      title: "\u049A\u044B\u0437\u043C\u0435\u0442\u0442\u0456\u04A3 \u0431\u0430\u0440\u043B\u044B\u049B \u043C\u04AF\u043C\u043A\u0456\u043D\u0434\u0456\u043A\u0442\u0435\u0440\u0456\u043D \u0442\u0435\u0433\u0456\u043D \u049B\u043E\u043B\u0434\u0430\u043D\u044B\u043F \u043A\u04E9\u0440\u0456\u04A3\u0456\u0437",
+      info: "\u0414\u0435\u0440\u0435\u043A\u0442\u0435\u0440\u0434\u0456\u04A3 \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0434\u044B\u0493\u044B\u043D \u0436\u04D9\u043D\u0435 \u0441\u0430\u043F\u0430\u0441\u044B\u043D \u043D\u0430\u049B\u0442\u044B \u0436\u0430\u0493\u0434\u0430\u0439\u043B\u0430\u0440\u0434\u0430 \u0442\u0435\u043A\u0441\u0435\u0440\u0456\u04A3\u0456\u0437. \u0414\u0435\u043C\u043E-\u049B\u043E\u043B\u0436\u0435\u0442\u0456\u043C\u0434\u0456\u043B\u0456\u043A \u049B\u044B\u0437\u043C\u0435\u0442\u0442\u0456\u04A3 \u0431\u0430\u0440\u043B\u044B\u049B \u043D\u0435\u0433\u0456\u0437\u0433\u0456 \u043C\u04AF\u043C\u043A\u0456\u043D\u0434\u0456\u043A\u0442\u0435\u0440\u0456\u043D \u0441\u044B\u043D\u0430\u043F \u043A\u04E9\u0440\u0443\u0433\u0435 \u043C\u04AF\u043C\u043A\u0456\u043D\u0434\u0456\u043A \u0431\u0435\u0440\u0435\u0434\u0456.\n\u049A\u043E\u0441\u044B\u043B\u0443\u0493\u0430 \u04E9\u0442\u0456\u043D\u0456\u043C \u0431\u0435\u0440\u0443 \u04AF\u0448\u0456\u043D \u0444\u043E\u0440\u043C\u0430\u043D\u044B \u0442\u043E\u043B\u0442\u044B\u0440\u044B\u04A3\u044B\u0437",
+      agreement: "\u041F\u0456\u0448\u0456\u043D\u0434\u0456 \u0442\u043E\u043B\u0442\u044B\u0440\u0430 \u043E\u0442\u044B\u0440\u044B\u043F, \u0441\u0456\u0437 \u0436\u0435\u043A\u0435 \u0434\u0435\u0440\u0435\u043A\u0442\u0435\u0440\u0434\u0456 \u04E9\u04A3\u0434\u0435\u0443\u0433\u0435 \u0436\u04D9\u043D\u0435 \u0430\u049B\u043F\u0430\u0440\u0430\u0442\u0442\u044B\u049B \u0445\u0430\u0431\u0430\u0440\u043B\u0430\u043C\u0430\u043B\u0430\u0440\u0434\u044B \u0430\u043B\u0443\u0493\u0430 \u043A\u0435\u043B\u0456\u0441\u0456\u043C \u0431\u0435\u0440\u0435\u0441\u0456\u0437",
+      send: "\u04E8\u0442\u0456\u043D\u0456\u043C\u0434\u0456 \u0436\u0456\u0431\u0435\u0440\u0443"
+    },
     demo: {
       t: "\u0414\u0435\u043C\u043E \u049B\u043E\u043B\u0436\u0435\u0442\u0456\u043C\u0434\u0456\u043B\u0456\u043A\u0442\u0456 \u0441\u04B1\u0440\u0430\u0443",
       st: "\u0414\u0435\u043C\u043E \u049B\u043E\u043B\u0436\u0435\u0442\u0456\u043C\u0434\u0456\u043B\u0456\u043A\u0442\u0456 \u0441\u04B1\u0440\u0430\u0443 \u04AF\u0448\u0456\u043D \u0444\u043E\u0440\u043C\u0430\u043D\u044B \u0442\u043E\u043B\u0442\u044B\u0440\u044B\u04A3\u044B\u0437",

package/dist/runtime/lang/ru.d.ts

@@ -376,6 +376,12 @@ declare const RuLocale: {
             modalTitle: string;
             modalSubtitle: string;
         };
+        request_demo: {
+            title: string;
+            info: string;
+            agreement: string;
+            send: string;
+        };
         demo: {
             t: string;
             st: string;

package/dist/runtime/lang/ru.js

@@ -275,7 +275,7 @@ const RuLocale = {
       },
       toContacts: "\u041D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 \u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B"
     },
-    login: "\u0412\u0445\u043E\u0434",
+    login: "\u0412\u043E\u0439\u0442\u0438",
     oldVersion: "\u0421\u0442\u0430\u0440\u0430\u044F \u0432\u0435\u0440\u0441\u0438\u044F \u0441\u0430\u0439\u0442\u0430",
     notifications: {
       title: "\u0423\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F",
@@ -370,6 +370,12 @@ const RuLocale = {
       modalTitle: "\u0417\u0430\u044F\u0432\u043A\u0430 \u043F\u0440\u0438\u043D\u044F\u0442\u0430",
       modalSubtitle: "\u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435!"
     },
+    request_demo: {
+      title: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0432\u0441\u0435 \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0431\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E",
+      info: "\u041F\u0440\u043E\u0432\u0435\u0440\u044C\u0442\u0435 \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B \u0438 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u043E \u0434\u0430\u043D\u043D\u044B\u0445 \u0432 \u0440\u0435\u0430\u043B\u044C\u043D\u044B\u0445 \u0443\u0441\u043B\u043E\u0432\u0438\u044F\u0445. \u0414\u0435\u043C\u043E-\u0434\u043E\u0441\u0442\u0443\u043F \u043F\u043E\u0437\u0432\u043E\u043B\u0438\u0442 \u043F\u0440\u043E\u0442\u0435\u0441\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0432\u0441\u0435 \u043A\u043B\u044E\u0447\u0435\u0432\u044B\u0435 \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430.\n\u0417\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u0435 \u0444\u043E\u0440\u043C\u0443, \u0447\u0442\u043E\u0431\u044B \u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043D\u0430 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u0435",
+      agreement: "\u0417\u0430\u043F\u043E\u043B\u043D\u044F\u044F \u0444\u043E\u0440\u043C\u0443, \u0432\u044B \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u0435\u0442\u0435\u0441\u044C \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445 \u0438 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0445 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439",
+      send: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443"
+    },
     demo: {
       t: "\u0417\u0430\u043F\u0440\u043E\u0441\u0438\u0442\u044C \u0434\u0435\u043C\u043E-\u0434\u043E\u0441\u0442\u0443\u043F",
       st: "\u0417\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u0435 \u0444\u043E\u0440\u043C\u0443, \u0447\u0442\u043E\u0431\u044B \u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043D\u0430 \u0434\u0435\u043C\u043E-\u0434\u043E\u0441\u0442\u0443\u043F",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "3.1.16",
+  "version": "3.1.17",
   "description": "Adata UI",
   "repository": "your-org/my-module",
   "license": "MIT",