adata-ui 4.0.38 → 4.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/runtime/components/forms/input/standard/InputStandard.vue +1 -0
- package/dist/runtime/components/forms/input/textarea/ATextarea.vue +1 -0
- package/dist/runtime/components/forms/need-more-data/NeedMoreData.vue +114 -0
- package/dist/runtime/components/forms/need-more-data/NeedMoreData.vue.d.ts +5 -0
- package/dist/runtime/components/forms/request-demo/RequestDemo.vue +1 -1
- package/dist/runtime/components/mobile-navigation/BottomNavigation.vue +1 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { twMerge, twJoin } from "tailwind-merge";
|
|
3
3
|
import AAlert from "../../../Alert.vue";
|
|
4
|
+
import { ref, computed, useI18n, watch } from "#imports";
|
|
4
5
|
const props = defineProps({
|
|
5
6
|
disabled: { type: Boolean, required: false, default: false },
|
|
6
7
|
label: { type: String, required: false, default: "" },
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { twMerge, twJoin } from "tailwind-merge";
|
|
3
3
|
import AAlert from "../../../Alert.vue";
|
|
4
|
+
import { computed } from "#imports";
|
|
4
5
|
const props = defineProps({
|
|
5
6
|
disabled: { type: Boolean, required: false, default: false },
|
|
6
7
|
label: { type: String, required: false, default: "" },
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref, useI18n, watch } from "#imports";
|
|
3
|
+
const { t } = useI18n();
|
|
4
|
+
const mail = ref("");
|
|
5
|
+
const phone = ref("");
|
|
6
|
+
const comment = ref("");
|
|
7
|
+
const isLoading = defineModel("isLoading", { type: Boolean, ...{ default: false } });
|
|
8
|
+
const emit = defineEmits(["submit"]);
|
|
9
|
+
const isSend = ref(false);
|
|
10
|
+
function validatePhone(value) {
|
|
11
|
+
if (!value) return t("forms.feedback.fieldRequired");
|
|
12
|
+
if (value.length < 11) return t("forms.feedback.phoneMinLength");
|
|
13
|
+
}
|
|
14
|
+
function validateEmail(value) {
|
|
15
|
+
if (!value) return t("forms.feedback.fieldRequired");
|
|
16
|
+
if (!value.includes("@")) return t("forms.feedback.emailValid");
|
|
17
|
+
}
|
|
18
|
+
function validateComment(value) {
|
|
19
|
+
if (!value) return t("forms.feedback.fieldRequired");
|
|
20
|
+
if (value.length < 10) return t("forms.feedback.commentMinLength");
|
|
21
|
+
if (value.length > 250) return t("forms.feedback.commentMaxLength");
|
|
22
|
+
}
|
|
23
|
+
const phoneValidation = ref("");
|
|
24
|
+
const emailValidation = ref("");
|
|
25
|
+
const commentValidation = ref("");
|
|
26
|
+
const send = () => {
|
|
27
|
+
phoneValidation.value = validatePhone(phone.value);
|
|
28
|
+
emailValidation.value = validateEmail(mail.value);
|
|
29
|
+
commentValidation.value = validateComment(comment.value);
|
|
30
|
+
isSend.value = false;
|
|
31
|
+
if (phoneValidation.value || emailValidation.value || commentValidation.value) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
emit("submit", { phone: phone.value, mail: mail.value, comment: comment.value });
|
|
35
|
+
isSend.value = true;
|
|
36
|
+
phone.value = "";
|
|
37
|
+
mail.value = "";
|
|
38
|
+
comment.value = "";
|
|
39
|
+
phoneValidation.value = "";
|
|
40
|
+
emailValidation.value = "";
|
|
41
|
+
commentValidation.value = "";
|
|
42
|
+
};
|
|
43
|
+
watch(mail, (newMail) => {
|
|
44
|
+
if (isSend.value) return;
|
|
45
|
+
emailValidation.value = validateEmail(newMail);
|
|
46
|
+
});
|
|
47
|
+
watch(phone, (newPhone) => {
|
|
48
|
+
if (isSend.value) return;
|
|
49
|
+
phoneValidation.value = validatePhone(newPhone);
|
|
50
|
+
});
|
|
51
|
+
watch(comment, (newComment) => {
|
|
52
|
+
if (isSend.value) return;
|
|
53
|
+
commentValidation.value = validateComment(newComment);
|
|
54
|
+
});
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<template>
|
|
58
|
+
<div class="flex flex-col gap-4 sm:gap-8 bg-white p-8 dark:bg-gray-900 sm:rounded-[20px]">
|
|
59
|
+
<div class="flex flex-col gap-2">
|
|
60
|
+
<h2 class="font-bold text-[2rem] leading-10">
|
|
61
|
+
{{ t("forms.feedback.title") }}
|
|
62
|
+
</h2>
|
|
63
|
+
<p class="body-400 text-gray-600 dark:text-gray-200">
|
|
64
|
+
{{ t("forms.feedback.subtitle") }}
|
|
65
|
+
</p>
|
|
66
|
+
</div>
|
|
67
|
+
<form
|
|
68
|
+
action=""
|
|
69
|
+
class="flex flex-col justify-between gap-2 sm:flex-row sm:gap-4"
|
|
70
|
+
>
|
|
71
|
+
<div class="flex flex-col gap-2 sm:w-1/2 sm:gap-4">
|
|
72
|
+
<adt-forms-input-standard
|
|
73
|
+
v-model="mail"
|
|
74
|
+
type="email"
|
|
75
|
+
color-classes="bg-gray-50 dark:bg-gray-800"
|
|
76
|
+
:error="emailValidation"
|
|
77
|
+
:label="t('forms.feedback.email')"
|
|
78
|
+
required
|
|
79
|
+
size="md"
|
|
80
|
+
/>
|
|
81
|
+
<adt-forms-input-standard
|
|
82
|
+
v-model="phone"
|
|
83
|
+
v-maska
|
|
84
|
+
type="tel"
|
|
85
|
+
color-classes="bg-gray-50 dark:bg-gray-800"
|
|
86
|
+
:error="phoneValidation"
|
|
87
|
+
:label="t('forms.feedback.phone')"
|
|
88
|
+
data-maska="8 (###) ###-##-##"
|
|
89
|
+
required
|
|
90
|
+
size="md"
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="sm:w-1/2">
|
|
94
|
+
<lazy-adt-forms-input-textarea-a-textarea
|
|
95
|
+
v-model="comment"
|
|
96
|
+
:error="commentValidation"
|
|
97
|
+
:label="t('forms.feedback.comment')"
|
|
98
|
+
:resizeable="false"
|
|
99
|
+
class="min-h-[72px]"
|
|
100
|
+
color-classes="dark:bg-gray-800 bg-gray-50"
|
|
101
|
+
required
|
|
102
|
+
size="sm"
|
|
103
|
+
/>
|
|
104
|
+
</div>
|
|
105
|
+
</form>
|
|
106
|
+
<adt-button
|
|
107
|
+
class="w-full self-end sm:w-[215px] font-semibold"
|
|
108
|
+
:loading="isLoading"
|
|
109
|
+
@click="send"
|
|
110
|
+
>
|
|
111
|
+
{{ t("forms.feedback.send") }}
|
|
112
|
+
</adt-button>
|
|
113
|
+
</div>
|
|
114
|
+
</template>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
type __VLS_PublicProps = {
|
|
2
|
+
'isLoading'?: boolean;
|
|
3
|
+
};
|
|
4
|
+
declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
5
|
+
export default _default;
|
|
@@ -15,7 +15,7 @@ const comment = ref("");
|
|
|
15
15
|
<template>
|
|
16
16
|
<div class="flex flex-col gap-8 rounded-[20px] bg-white p-8 dark:bg-gray-900">
|
|
17
17
|
<div class="flex flex-col gap-2">
|
|
18
|
-
<h3 class="
|
|
18
|
+
<h3 class="font-bold text-[2rem] leading-10">
|
|
19
19
|
{{ t("forms.demo.t") }}
|
|
20
20
|
</h3>
|
|
21
21
|
<p class="text-base">
|
|
@@ -26,7 +26,7 @@ function pushProfile() {
|
|
|
26
26
|
<template>
|
|
27
27
|
<div class="sticky bottom-0 z-100 lg:hidden">
|
|
28
28
|
<div class="w-full border-t border-gray-500/50 bg-white dark:bg-gray-900">
|
|
29
|
-
<div class="grid w-full grid-cols-
|
|
29
|
+
<div class="grid w-full grid-flow-col auto-cols-fr items-center">
|
|
30
30
|
<slot>
|
|
31
31
|
<button
|
|
32
32
|
v-for="item in items"
|