adata-ui 3.0.2 → 3.1.0

package/dist/runtime/components/forms/input/standard/InputStandard.vue

@@ -0,0 +1,301 @@
+<script setup>
+import { twMerge, twJoin } from "tailwind-merge";
+import AAlert from "../../../Alert.vue";
+import { ref, computed, useI18n, watch } from "#imports";
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false, default: "" },
+  size: { type: String, required: false, default: "md" },
+  error: { type: [String, Boolean], required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  clearable: { type: Boolean, required: false, default: false },
+  startIcon: { type: [String, Object], required: false, default: "" },
+  endIcon: { type: [String, Object], required: false, default: "" },
+  autocompleteList: { type: Array, required: false, default: () => [] },
+  type: { type: String, required: false, default: "text" },
+  autocompleteOption: { type: null, required: false, default: void 0 },
+  autocompleteKey: { type: null, required: false, default: void 0 },
+  autocompleteFn: { type: Function, required: false, default: void 0 },
+  colorClasses: { type: String, required: false }
+});
+const { t } = useI18n();
+const uiConfig = {
+  "wrapper": "transition duration-500 w-full",
+  "input-wrapper": {
+    base: "relative inline-block w-full text-sm sm:min-w-full",
+    readonly: "pointer-events-none user-select-none",
+    disabled: "pointer-events-none user-select-none opacity-40"
+  },
+  "base": "w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 hover:outline outline-offset-[-1px] hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0",
+  "size": {
+    sm: "h-8 px-4 py-1.5 sm",
+    md: "h-10 px-4 pb-1.5 pt-[18px] md",
+    smEx: "h-8 pl-4 pr-10 py-1.5 sm",
+    mdEx: "h-10 pl-4 pr-10 pb-1.5 pt-[18px] md"
+  },
+  "color": "bg-deepblue-50 dark:bg-gray-200 dark:bg-opacity-5",
+  "error": "outline outline-1 outline-red-500 focus:outline-0 focus:border-red-500 hover:border-red-500",
+  "readonly": "bg-white opacity-30",
+  "label": {
+    "base": "absolute left-4 top-[50%] d-flex text-gray-500 pointer-events-none transition-all ease duration-300 transform translate-y-[-50%] whitespace-nowrap text-ellipsis md:max-w-[90%] overflow-hidden",
+    "move-label": "!left-10 md:max-w-[calc(90%-40px)]"
+  },
+  "default": {
+    size: "md",
+    color: "gray"
+  },
+  "move-input": "!ps-10",
+  "move-input-left": "!pe-10"
+};
+const emit = defineEmits(["updateValue", "onEnter", "clear", "selectOption"]);
+function customTrim(input2) {
+  if (input2 === void 0 || input2 === null) {
+    return "";
+  }
+  if (input2 === " " || /\d/.test(input2)) {
+    return input2.trim();
+  }
+  return input2;
+}
+const input = ref();
+const [modelValue, modelModifiers] = defineModel({ type: null, ...{ default: "", set(value) {
+  if (modelModifiers["custom-trim"]) {
+    return customTrim(value);
+  }
+  return value;
+} } });
+const isFocused = ref();
+const isClearable = computed(
+  () => props.clearable && !props.disabled && !!modelValue.value
+);
+const mobileAutocomMoved = ref(false);
+const wrapperClass = uiConfig.wrapper;
+const inputWrapperClass = computed(
+  () => twMerge(
+    twJoin(
+      uiConfig["input-wrapper"].base,
+      props.readonly ? uiConfig["input-wrapper"].readonly : "",
+      props.disabled ? uiConfig["input-wrapper"].disabled : ""
+    )
+  )
+);
+const inputClass = computed(
+  () => twMerge(
+    twJoin(
+      uiConfig.base,
+      uiConfig.size[props.clearable ? `${props.size}Ex` : props.size],
+      props.error ? uiConfig.error : "",
+      props.startIcon ? uiConfig["move-input"] : "",
+      props.endIcon ? uiConfig["move-input-left"] : "",
+      props.readonly ? uiConfig.readonly : "",
+      props.colorClasses ? props.colorClasses : uiConfig.color
+    )
+  )
+);
+const labelClass = computed(
+  () => twMerge(twJoin(uiConfig.label.base, isClearable.value ? "max-w-[calc(80%-40px)]" : "max-w-[80%]", props.startIcon ? uiConfig.label["move-label"] : ""))
+);
+const currentItemIndex = ref(-1);
+const assignValue = () => {
+  if (props.autocompleteFn) {
+    modelValue.value = props.autocompleteFn(props.autocompleteList[currentItemIndex.value]);
+  } else {
+    modelValue.value = props.autocompleteKey ? props.autocompleteList[currentItemIndex.value][props.autocompleteKey] : props.autocompleteList[currentItemIndex.value];
+  }
+};
+const handleKeydown = (e) => {
+  if (!props.autocompleteList.length) return;
+  if (e.key === "ArrowDown" && currentItemIndex.value < props.autocompleteList.length - 1) {
+    e.preventDefault();
+    currentItemIndex.value++;
+    assignValue();
+  } else if (e.key === "ArrowUp" && currentItemIndex.value > 0) {
+    e.preventDefault();
+    currentItemIndex.value--;
+    assignValue();
+  } else if (e.key === "Enter") {
+    if (currentItemIndex.value !== -1) assignValue();
+    emit("onEnter", props.autocompleteList[currentItemIndex.value]);
+    input.value?.blur();
+  }
+};
+const onSelectOption = (item) => {
+  if (props.autocompleteKey) {
+    modelValue.value = item[props.autocompleteKey];
+    emit("selectOption", item[props.autocompleteKey]);
+  } else {
+    modelValue.value = item;
+    emit("selectOption", item);
+  }
+};
+const onSelectOptionMobile = (item) => {
+  if (!mobileAutocomMoved.value) {
+    onSelectOption(item);
+  } else {
+    mobileAutocomMoved.value = false;
+  }
+};
+const onClear = () => {
+  modelValue.value = "";
+  emit("clear");
+};
+const autocompleteContainer = ref();
+const scrollToElement = (container) => {
+  if (container) {
+    const selectedItem = container.children[currentItemIndex.value];
+    const containerHeight = container.clientHeight;
+    const itemTop = selectedItem.offsetTop;
+    const itemHeight = selectedItem.clientHeight;
+    if (itemTop < container.scrollTop) {
+      container.scrollTop = itemTop;
+    } else if (itemTop + itemHeight > container.scrollTop + containerHeight) {
+      container.scrollTop = itemTop + itemHeight - containerHeight;
+    }
+  }
+};
+const focus = () => {
+  input.value?.focus();
+};
+watch(currentItemIndex, () => {
+  scrollToElement(autocompleteContainer.value);
+});
+const isDropdownUp = ref(false);
+const checkDropdownPosition = () => {
+  const rect = input.value?.getBoundingClientRect();
+  const dropdownHeight = 250;
+  const windowHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+  if (rect) {
+    isDropdownUp.value = windowHeight - rect.bottom < dropdownHeight;
+  }
+};
+watch(isFocused, (newVal) => {
+  if (newVal) {
+    checkDropdownPosition();
+  }
+});
+watch(modelValue, () => {
+  checkDropdownPosition();
+});
+defineExpose({
+  focus
+});
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <div :class="inputWrapperClass">
+      <Transition name="autocomplete-fade">
+        <div
+          v-if="autocompleteList.length && isFocused"
+          :class="[
+  'absolute z-[31] w-full flex flex-col gap-4 rounded bg-gray-200 p-2 dark:bg-gray-800',
+  isDropdownUp ? 'bottom-[44px]' : 'top-[44px]'
+]"
+        >
+          <ul
+            ref="autocompleteContainer"
+            class="max-h-[250px] w-full overflow-y-auto"
+          >
+            <li
+              v-for="(item, idx) in autocompleteList"
+              :key="idx"
+              class="cursor-pointer rounded px-4 py-[10px] transition-colors hover:bg-gray-50 hover:dark:bg-gray-900"
+              :class="{ 'bg-gray-100 dark:bg-gray-700': currentItemIndex === idx }"
+              @mousedown="onSelectOption(item)"
+              @touchend="onSelectOptionMobile(item)"
+              @touchmove="mobileAutocomMoved = true"
+            >
+              <slot
+                name="autocomplete-option"
+                :item="item"
+              >
+                {{ autocompleteOption ? item[autocompleteOption] : item }}
+              </slot>
+            </li>
+          </ul>
+          <slot
+            name="autocomplete-buttons"
+            :value="modelValue"
+          />
+        </div>
+      </Transition>
+      <input
+        :id="label"
+        ref="input"
+        v-model="modelValue"
+        :type="type"
+        :class="inputClass"
+        class="input"
+        required
+        :tabindex="disabled ? -1 : 0"
+        v-bind="$attrs"
+        @input="emit('updateValue', modelValue)"
+        @keydown="handleKeydown"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      >
+      <label
+        :for="label"
+        :class="[labelClass]"
+        class="label"
+      >
+        <span class="text">{{ label }}</span>
+        <span
+          v-if="required"
+          class="text-red-600"
+        > *</span>
+      </label>
+
+      <component
+        :is="startIcon"
+        v-if="startIcon"
+        class="pointer-events-none absolute left-4 top-1/2 translate-y-[-50%] transform fill-gray-500 text-base text-gray-500"
+        filled
+      />
+      <component
+        :is="endIcon"
+        v-if="endIcon"
+        class="pointer-events-none absolute right-4 top-1/2 translate-y-[-50%] transform fill-gray-500 text-base text-gray-500"
+        filled
+      />
+      <button
+        v-if="isClearable"
+        class="pointer-events-click absolute right-4 top-1/2 translate-y-[-50%] transform rounded-full bg-deepblue-900 bg-opacity-10 p-1 text-2xl hover:opacity-80 dark:bg-gray-200 dark:bg-opacity-10"
+        type="button"
+        @click="onClear"
+      >
+        <i-x-mark
+          filled
+          class="!mb-0 fill-gray-600 dark:fill-gray-300"
+        />
+      </button>
+      <slot name="endButton" />
+    </div>
+    <Transition name="slide-in">
+      <div
+        v-if="error && typeof error === 'string'"
+        class="mt-1"
+      >
+        <a-alert
+          :size="size === 'sm' ? 'xs' : 'sm'"
+          :color="'red'"
+          icon-type="triangle"
+        >
+          <template #default>
+            <div class="flex flex-col">
+              <span
+                v-for="(err, index) in error.split(', ')"
+                :key="index"
+              >{{ err }}<br></span>
+            </div>
+          </template>
+        </a-alert>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.input:-webkit-autofill~.label,.input:focus~.label,.input:not(:focus):valid~.label{font-size:10px;transform:translateY(-10px)}.input.sm:-webkit-autofill~.label,.input.sm:focus~.label,.input.sm:not(:focus):valid~.label{display:none}.input::-ms-clear,.input::-ms-reveal{display:none}.slide-in-enter-active{opacity:0;transform:translateY(-50%);transition:transform .5s;z-index:0}.slide-in-enter-to{z-index:auto}.slide-in-enter-to,.slide-in-leave-active{opacity:1;transform:translateY(0)}.slide-in-leave-to{opacity:0;transform:translateY(-100%)}.autocomplete-fade-enter-active,.autocomplete-fade-leave-active{transition:opacity .15s ease}.autocomplete-fade-enter-from,.autocomplete-fade-leave-to{opacity:0}.move-input{padding-left:40px!important}
+</style>

package/dist/runtime/components/forms/input/textarea/ATextarea.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { twMerge, twJoin } from "tailwind-merge";
+import AAlert from "../../../Alert.vue";
+import { computed } from "#imports";
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false, default: "" },
+  size: { type: String, required: false, default: "md" },
+  error: { type: [String, Boolean], required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  clearable: { type: Boolean, required: false, default: false },
+  resizeable: { type: [Boolean, String], required: false, default: true },
+  startIcon: { type: [String, Object], required: false, default: "" },
+  colorClasses: { type: String, required: false, default: "" }
+});
+const uiConfig = {
+  "wrapper": "transition duration-500 w-full",
+  "input-wrapper": {
+    base: "relative inline-block h-full w-full text-sm sm:min-w-full pt-5 hover:outline hover:outline-1 outline-offset-[-1px] hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500",
+    readonly: "pointer-events-none user-select-none",
+    disabled: "pointer-events-none user-select-none opacity-40",
+    color: "bg-deepblue-900/5 dark:bg-gray-200/5"
+  },
+  "base": "w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 outline-none mt-0",
+  "size": {
+    sm: "h-8 px-4 py-1.5 sm",
+    md: "h-10 px-4 pb-1.5 pt-[8px] md"
+  },
+  "color": "bg-deepblue-900/0 dark:bg-gray-200/0",
+  "error": "outline outline-1 outline-red-500 focus:outline-0 focus:border-red-500 hover:border-red-500",
+  "readonly": "bg-white opacity-30",
+  "label": {
+    "base": "absolute left-4 top-5 d-flex text-gray-500 pointer-events-none transition-all ease duration-300 transform translate-y-[-50%] whitespace-nowrap",
+    "move-label": "!left-10"
+  },
+  "default": {
+    size: "md",
+    color: "gray"
+  },
+  "resize": {
+    none: "resize-none",
+    both: "resize",
+    x: "resize-x",
+    y: "resize-y"
+  },
+  "move-input": "!ps-10"
+};
+const modelValue = defineModel({ type: [String, Number], ...{ default: "" } });
+const isClearable = computed(
+  () => props.clearable && !props.disabled && !!modelValue.value
+);
+const isResizeable = computed(
+  () => props.resizeable && props.resizeable !== "none" && !props.disabled && !!modelValue.value
+);
+const resizeable = computed(() => {
+  if (typeof props.resizeable === "boolean") return props.resizeable ? "both" : "none";
+  return props.resizeable;
+});
+const wrapperClass = uiConfig.wrapper;
+const inputWrapperClass = computed(
+  () => twMerge(
+    twJoin(
+      uiConfig["input-wrapper"].base,
+      uiConfig.base,
+      props.colorClasses ? props.colorClasses : uiConfig["input-wrapper"].color,
+      props.error ? uiConfig.error : "",
+      props.readonly ? uiConfig["input-wrapper"].readonly : "",
+      props.disabled ? uiConfig["input-wrapper"].disabled : ""
+    )
+  )
+);
+const inputClass = computed(
+  () => twMerge(
+    twJoin(
+      uiConfig.base,
+      uiConfig.color,
+      uiConfig.size[props.size],
+      props.startIcon ? uiConfig["move-input"] : "",
+      props.readonly ? uiConfig.readonly : "",
+      isResizeable.value ? uiConfig.resize[resizeable] : uiConfig.resize.none
+    )
+  )
+);
+const labelClass = computed(
+  () => twMerge(twJoin(uiConfig.label.base, props.startIcon ? uiConfig.label["move-label"] : ""))
+);
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <div :class="inputWrapperClass">
+      <textarea
+        :id="label"
+        ref="input"
+        v-model="modelValue"
+        :class="inputClass"
+        :tabindex="disabled ? -1 : 0"
+        class="input"
+        required
+        v-bind="$attrs"
+      />
+      <label
+        :class="labelClass"
+        :for="label"
+        class="label cursor-pointer"
+      >
+        <span class="text">{{ label }}</span>
+        <span
+          v-if="required"
+          class="text-red-600"
+        > *</span>
+      </label>
+
+      <component
+        :is="startIcon"
+        v-if="startIcon"
+        class="pointer-events-none absolute left-4 top-5 translate-y-[-50%] transform fill-gray-500 text-base text-gray-500"
+        filled
+      />
+      <button
+        v-if="isClearable"
+        class="pointer-events-click absolute right-4 top-5 translate-y-[-50%] transform rounded-full bg-deepblue-900 bg-opacity-10 p-1 text-2xl hover:opacity-80 dark:bg-gray-200 dark:bg-opacity-10"
+        type="button"
+        @click="modelValue = ''"
+      >
+        <i-x-mark
+          class="!mb-0 fill-gray-600 dark:fill-gray-300"
+          filled
+        />
+      </button>
+      <slot name="endButton" />
+    </div>
+    <Transition name="slide-in">
+      <div
+        v-if="error && typeof error === 'string'"
+        class="mt-1"
+      >
+        <a-alert
+          :color="'red'"
+          :size="size === 'sm' ? 'sm' : 'lg'"
+          icon-type="triangle"
+        >
+          <template #default>
+            <span
+              v-for="(err, index) in error.split(', ')"
+              :key="index"
+            >{{ err }}<br></span>
+          </template>
+        </a-alert>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.input::-webkit-scrollbar{display:none}.input:-webkit-autofill~.label,.input:focus~.label,.input:not(:focus):valid~.label{font-size:10px;transform:translateY(-10px)}.slide-in-enter-active{opacity:0;transform:translateY(-50%);transition:transform .5s;z-index:0}.slide-in-enter-to{z-index:auto}.slide-in-enter-to,.slide-in-leave-active{opacity:1;transform:translateY(0)}.slide-in-leave-to{opacity:0;transform:translateY(-100%)}.move-input{padding-left:40px!important}
+</style>

package/dist/runtime/components/forms/input/textarea/ATextarea.vue.d.ts

@@ -0,0 +1,43 @@
+interface Props {
+    disabled?: boolean;
+    label?: string;
+    size?: 'sm' | 'md';
+    error?: string | boolean;
+    required?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    resizeable?: boolean | 'none' | 'both' | 'x' | 'y';
+    startIcon?: string | object;
+    colorClasses?: string;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string | number;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    endButton?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    size: "sm" | "md";
+    error: string | boolean;
+    disabled: boolean;
+    required: boolean;
+    label: string;
+    readonly: boolean;
+    clearable: boolean;
+    startIcon: string | object;
+    colorClasses: string;
+    resizeable: boolean | "none" | "both" | "x" | "y";
+}, {}, {}, {}, 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/components/forms/need-more-data/NeedMoreData.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { ref, useI18n, watch } from "#imports";
+const { t } = useI18n();
+const mail = ref("");
+const phone = ref("");
+const comment = ref("");
+const isLoading = defineModel("isLoading", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["submit"]);
+const isSend = ref(false);
+function validatePhone(value) {
+  if (!value) return t("forms.feedback.fieldRequired");
+  if (value.length < 11) return t("forms.feedback.phoneMinLength");
+}
+function validateEmail(value) {
+  if (!value) return t("forms.feedback.fieldRequired");
+  if (!value.includes("@")) return t("forms.feedback.emailValid");
+}
+function validateComment(value) {
+  if (!value) return t("forms.feedback.fieldRequired");
+  if (value.length < 10) return t("forms.feedback.commentMinLength");
+  if (value.length > 250) return t("forms.feedback.commentMaxLength");
+}
+const phoneValidation = ref("");
+const emailValidation = ref("");
+const commentValidation = ref("");
+const send = () => {
+  phoneValidation.value = validatePhone(phone.value);
+  emailValidation.value = validateEmail(mail.value);
+  commentValidation.value = validateComment(comment.value);
+  isSend.value = false;
+  if (phoneValidation.value || emailValidation.value || commentValidation.value) {
+    return;
+  }
+  emit("submit", { phone: phone.value, mail: mail.value, comment: comment.value });
+  isSend.value = true;
+  phone.value = "";
+  mail.value = "";
+  comment.value = "";
+  phoneValidation.value = "";
+  emailValidation.value = "";
+  commentValidation.value = "";
+};
+watch(mail, (newMail) => {
+  if (isSend.value) return;
+  emailValidation.value = validateEmail(newMail);
+});
+watch(phone, (newPhone) => {
+  if (isSend.value) return;
+  phoneValidation.value = validatePhone(newPhone);
+});
+watch(comment, (newComment) => {
+  if (isSend.value) return;
+  commentValidation.value = validateComment(newComment);
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 sm:gap-8 bg-white p-8 dark:bg-gray-900 sm:rounded-[20px]">
+    <div class="flex flex-col gap-2">
+      <h2 class="font-bold text-[2rem] leading-10">
+        {{ t("forms.feedback.title") }}
+      </h2>
+      <p class="body-400 text-gray-600 dark:text-gray-200">
+        {{ t("forms.feedback.subtitle") }}
+      </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">
+        <adt-forms-input-standard
+          v-model="mail"
+          type="email"
+          color-classes="bg-gray-50 dark:bg-gray-800"
+          :error="emailValidation"
+          :label="t('forms.feedback.email')"
+          required
+          size="md"
+        />
+        <adt-forms-input-standard
+          v-model="phone"
+          v-maska
+          type="tel"
+          color-classes="bg-gray-50 dark:bg-gray-800"
+          :error="phoneValidation"
+          :label="t('forms.feedback.phone')"
+          data-maska="8 (###) ###-##-##"
+          required
+          size="md"
+        />
+      </div>
+      <div class="sm:w-1/2">
+        <lazy-adt-forms-input-textarea-a-textarea
+          v-model="comment"
+          :error="commentValidation"
+          :label="t('forms.feedback.comment')"
+          :resizeable="false"
+          class="min-h-[72px]"
+          color-classes="dark:bg-gray-800 bg-gray-50"
+          required
+          size="sm"
+        />
+      </div>
+    </form>
+    <adt-button
+      class="w-full self-end sm:w-[215px] font-semibold"
+      :loading="isLoading"
+      @click="send"
+    >
+      {{ t("forms.feedback.send") }}
+    </adt-button>
+  </div>
+</template>

package/dist/runtime/components/forms/need-more-data/NeedMoreData.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_PublicProps = {
+    'isLoading'?: boolean;
+};
+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>;
+export default _default;

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

@@ -0,0 +1,67 @@
+<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"]);
+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("");
+</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>
+      <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>
+    </form>
+    <a-button class="w-full self-end sm:w-[215px] font-semibold" :disabled="isLoading">
+      {{ t("forms.demo.b") }}
+    </a-button>
+  </div>
+</template>