adata-ui 2.1.17 → 2.1.19

package/components/forms/checkbox/ACheckbox.vue

@@ -1,149 +1,149 @@
-<template>
-  <div
-    class="flex items-center"
-    :class="[disabled ? 'opacity-20' : '']"
-  >
-    <input
-      :id="name"
-      type="checkbox"
-      class="hidden"
-      :checked="isChecked"
-      :disabled="disabled"
-      :value="value"
-      @change="updateInput"
-    >
-    <label
-      v-if="viewType === 'checkbox'"
-      :for="name"
-      class="flex items-center text-deepblue-900 dark:text-gray-200"
-      :class="twMerge(textSizeOptions[size], disabled ? 'cursor-default': 'cursor-pointer', labelClass)"
-    >
-      <span
-        v-if="side==='left' && hasSlotContent"
-      >
-        <slot />
-      </span>
-      <span :class="[sizeOptions[size]]">
-        <a-icon-checkbox-intermediate
-          v-if="isIntermediate"
-          class="w-full h-full"
-          :class="twMerge('text-blue-700 dark:text-blue-500', intermediateCheckboxClass)"
-        />
-        <a-icon-checkbox-active
-          v-else-if="isChecked"
-          class="w-full h-full"
-          :class="twMerge('text-blue-700 dark:text-blue-500', checkboxClass)"
-        />
-        <a-icon-checkbox-empty
-          v-else
-          class="w-full h-full"
-          :class="twMerge('text-deepblue-900 dark:text-gray-200', emptyCheckboxClass)"
-        />
-      </span>
-      <span
-        v-if="side==='right' && hasSlotContent"
-      >
-        <slot />
-      </span>
-    </label>
-    <label
-      v-else-if="viewType === 'chip'"
-      :for="name"
-      class="px-[10px] py-[3.5px] text-deepblue-900 border border-gray-500 rounded-full  dark:text-gray-200 text-xs"
-      :class="[{'bg-blue-700 text-white dark:bg-blue-500 dark:border-blue-500 dark:text-gray-900 font-medium': isChecked}]"
-    >
-      <slot/>
-    </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { twMerge } from 'tailwind-merge'
-
-
-defineOptions({ name: 'ACheckbox' })
-const emit = defineEmits(['update:modelValue'])
-
-interface Props {
-  size?: 'lg' | 'sm',
-  name?: string
-  modelValue: string | number | Array<any> | Object | boolean | null
-  value?: string | number | Object | null
-  intermediate?: boolean
-  disabled?: boolean
-  side?: 'right' | 'left' | null
-  masterControl?: boolean;
-  emptyCheckboxClass?: string
-  intermediateCheckboxClass?: string
-  alwaysIntermediate?: boolean
-  checkboxClass?: string
-  labelClass?: string
-  viewType?: 'checkbox' | 'chip'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'sm',
-  name: 'check',
-  value: null,
-  side: 'left',
-  modelValue: () => [],
-  masterControl: false,
-  emptyCheckboxClass: '',
-  intermediateCheckboxClass: '',
-  checkboxClass: '',
-  labelClass: '',
-  viewType: 'checkbox',
-  alwaysIntermediate: false
-})
-
-const slots = useSlots()
-
-const isChecked = computed(() => {
-  if (props.modelValue instanceof Array) {
-    return props.modelValue.includes(props.value)
-  }
-  return props.modelValue === true
-})
-const isIntermediate = computed(() => {
-  if (props.alwaysIntermediate) {
-    return props.intermediate
-  } else {
-    return isChecked.value && props.intermediate
-  }
-})
-
-const updateInput = (e) => {
-  const isChecked = e.target.checked
-  if (props.masterControl) {
-    emit('update:modelValue', isChecked)
-  } else if (props.modelValue instanceof Array) {
-    const newValue = [...props.modelValue]
-    if (isChecked) {
-      newValue.push(props.value)
-    } else {
-      newValue.splice(newValue.indexOf(props.value), 1)
-    }
-    emit('update:modelValue', newValue)
-  } else {
-    emit('update:modelValue', !!isChecked)
-  }
-}
-
-const sizeOptions = {
-  lg: 'min-w-6 min-h-6 max-w-6 max-h-6',
-  sm: 'min-w-4 min-h-4 max-w-4 max-h-4'
-}
-const textSizeOptions = {
-  lg: 'text-sm gap-2.5',
-  sm: 'text-xs gap-2'
-}
-
-
-const hasSlotContent = computed(() => {
-  return !!slots.default?.().length
-})
-
-</script>
-
-<style scoped>
-</style>
+<template>
+  <div
+    class="flex items-center"
+    :class="[disabled ? 'opacity-20' : '']"
+  >
+    <input
+      :id="name"
+      type="checkbox"
+      class="hidden"
+      :checked="isChecked"
+      :disabled="disabled"
+      :value="value"
+      @change="updateInput"
+    >
+    <label
+      v-if="viewType === 'checkbox'"
+      :for="name"
+      class="flex items-center text-deepblue-900 dark:text-gray-200"
+      :class="twMerge(textSizeOptions[size], disabled ? 'cursor-default': 'cursor-pointer', labelClass)"
+    >
+      <span
+        v-if="side==='left' && hasSlotContent"
+      >
+        <slot />
+      </span>
+      <span :class="[sizeOptions[size]]">
+        <a-icon-checkbox-intermediate
+          v-if="isIntermediate"
+          class="w-full h-full"
+          :class="twMerge('text-blue-700 dark:text-blue-500', intermediateCheckboxClass)"
+        />
+        <a-icon-checkbox-active
+          v-else-if="isChecked"
+          class="w-full h-full"
+          :class="twMerge('text-blue-700 dark:text-blue-500', checkboxClass)"
+        />
+        <a-icon-checkbox-empty
+          v-else
+          class="w-full h-full"
+          :class="twMerge('text-deepblue-900 dark:text-gray-200', emptyCheckboxClass)"
+        />
+      </span>
+      <span
+        v-if="side==='right' && hasSlotContent"
+      >
+        <slot />
+      </span>
+    </label>
+    <label
+      v-else-if="viewType === 'chip'"
+      :for="name"
+      class="px-[10px] py-[3.5px] text-deepblue-900 border border-gray-500 rounded-full  dark:text-gray-200 text-xs"
+      :class="[{'bg-blue-700 text-white dark:bg-blue-500 dark:border-blue-500 dark:text-gray-900 font-medium': isChecked}]"
+    >
+      <slot/>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+
+
+defineOptions({ name: 'ACheckbox' })
+const emit = defineEmits(['update:modelValue'])
+
+interface Props {
+  size?: 'lg' | 'sm',
+  name?: string
+  modelValue: string | number | Array<any> | Object | boolean | null
+  value?: string | number | Object | null
+  intermediate?: boolean
+  disabled?: boolean
+  side?: 'right' | 'left' | null
+  masterControl?: boolean;
+  emptyCheckboxClass?: string
+  intermediateCheckboxClass?: string
+  alwaysIntermediate?: boolean
+  checkboxClass?: string
+  labelClass?: string
+  viewType?: 'checkbox' | 'chip'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  name: 'check',
+  value: null,
+  side: 'left',
+  modelValue: () => [],
+  masterControl: false,
+  emptyCheckboxClass: '',
+  intermediateCheckboxClass: '',
+  checkboxClass: '',
+  labelClass: '',
+  viewType: 'checkbox',
+  alwaysIntermediate: false
+})
+
+const slots = useSlots()
+
+const isChecked = computed(() => {
+  if (props.modelValue instanceof Array) {
+    return props.modelValue.includes(props.value)
+  }
+  return props.modelValue === true
+})
+const isIntermediate = computed(() => {
+  if (props.alwaysIntermediate) {
+    return props.intermediate
+  } else {
+    return isChecked.value && props.intermediate
+  }
+})
+
+const updateInput = (e) => {
+  const isChecked = e.target.checked
+  if (props.masterControl) {
+    emit('update:modelValue', isChecked)
+  } else if (props.modelValue instanceof Array) {
+    const newValue = [...props.modelValue]
+    if (isChecked) {
+      newValue.push(props.value)
+    } else {
+      newValue.splice(newValue.indexOf(props.value), 1)
+    }
+    emit('update:modelValue', newValue)
+  } else {
+    emit('update:modelValue', !!isChecked)
+  }
+}
+
+const sizeOptions = {
+  lg: 'min-w-6 min-h-6 max-w-6 max-h-6',
+  sm: 'min-w-4 min-h-4 max-w-4 max-h-4'
+}
+const textSizeOptions = {
+  lg: 'text-sm gap-2.5',
+  sm: 'text-xs gap-2'
+}
+
+
+const hasSlotContent = computed(() => {
+  return !!slots.default?.().length
+})
+
+</script>
+
+<style scoped>
+</style>

package/components/forms/feedback-form/FeedbackForm.vue

@@ -1,171 +1,177 @@
-<script lang="ts" setup>
-import * as z from 'zod'
-import { useUIValidation } from '#adata-ui/composables/useUIValidation'
-
-const props = withDefaults(defineProps<{
-  formType?: 'get-demo' | 'feedback'
-}>(), {
-  formType: 'feedback',
-})
-
-const emit = defineEmits(['submit'])
-
-const { t } = useI18n()
-
-const fullName = ref<string>('')
-const mail = ref<string>('')
-const phone = ref<string>('')
-const comment = ref<string>('')
-
-const isLoading = defineModel< null | any>('isLoading', { default: false })
-const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })
-
-const feedbackScheme = z.object({
-  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
-  mail: z.string().nonempty(t('forms.feedback.fieldRequired')).email(t('forms.feedback.emailValid')),
-  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
-})
-
-const getDemoScheme = z.object({
-  fullName: z.string().nonempty(t('forms.feedback.fieldRequired')),
-  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
-  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
-})
-
-const submitted = ref(false)
-
-const feedbackValidation = useUIValidation(
-  feedbackScheme,
-  () => ({
-    phone: phone.value,
-    mail: mail.value,
-    comment: comment.value,
-  }),
-  submitted,
-)
-
-const getDemoValidation = useUIValidation(
-  getDemoScheme,
-  () => ({
-    fullName: fullName.value,
-    phone: phone.value,
-    comment: comment.value,
-  }),
-  submitted,
-)
-
-const send = () => {
-  submitted.value = true
-
-  if (props.formType === 'feedback') {
-    if (feedbackValidation.validation.value) return
-  }
-  else {
-    if (getDemoValidation.validation.value) return
-  }
-
-  emit('submit', { sender_name: fullName.value, phone_number: phone.value, email: mail.value, message: comment.value })
-  fullName.value = ''
-  phone.value = ''
-  mail.value = ''
-  comment.value = ''
-}
-
-defineExpose({
-  reset: () => (submitted.value = false),
-})
-</script>
-<template>
-  <section class="flex flex-col gap-4 bg-white p-8 dark:bg-gray-900 sm:gap-8 sm:rounded-[20px]">
-    <div class="flex flex-col gap-2">
-      <h2 class="heading-01">
-        {{ formType === 'feedback' ? t('forms.feedback.title') : t('forms.demo.t') }}
-      </h2>
-      <p class="body-400 text-gray-600 dark:text-gray-200">
-        {{ formType === 'feedback' ? t('forms.feedback.subtitle') : 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">
-        <a-input-standard
-          v-if="formType === 'feedback'"
-          v-model="mail"
-          type="email"
-          color-classes="bg-gray-50 dark:bg-gray-800"
-          :error="feedbackValidation.getError('mail')"
-          :label="t('forms.feedback.email')"
-          required
-          size="md"
-          :disabled="isLoading"
-        />
-        <a-input-standard
-          v-else
-          v-model="fullName"
-          :error="getDemoValidation.getError('fullName')"
-          :label="t('forms.demo.n')"
-          required
-          size="md"
-          :disabled="isLoading"
-        />
-        <a-input-standard
-          v-model="phone"
-          v-maska
-          type="tel"
-          color-classes="bg-gray-50 dark:bg-gray-800"
-          :error="formType === 'feedback' ? feedbackValidation.getError('phone') : getDemoValidation.getError('phone')"
-          :label="t('forms.feedback.phone')"
-          data-maska="8 (###) ###-##-##"
-          required
-          size="md"
-          :disabled="isLoading"
-        />
-      </div>
-      <div class="sm:w-1/2">
-        <a-textarea
-          v-model="comment"
-          :error="formType === 'feedback' ? feedbackValidation.getError('comment') : getDemoValidation.getError('comment')"
-          :label="t('forms.feedback.comment')"
-          :resizeable="false"
-          class="min-h-[72px]"
-          color-classes="bg-gray-50 dark:bg-gray-800"
-          required
-          size="sm"
-          :disabled="isLoading"
-        />
-      </div>
-    </form>
-    <AButton
-      class="w-full self-end sm:w-[215px]"
-      :loading="isLoading"
-      @click="send"
-    >
-      {{ formType === 'feedback' ? t('forms.feedback.send') : t('forms.demo.b') }}
-    </AButton>
-  </section>
-
-  <a-modal
-    v-model="isModalOpen"
-    width="424px"
-    @close="isModalOpen = false"
-  >
-    <div class="flex flex-col items-center gap-5">
-      <h4 class="heading-04">
-        {{ t('forms.feedback.modalTitle') }}
-      </h4>
-      <a-ill-mail />
-      <p class="body-400 max-[352xp]">
-        {{ t('forms.feedback.modalSubtitle') }}
-      </p>
-      <AButton
-        block
-        view="outline"
-        @click="isModalOpen = false"
-      >
-        {{ t('forms.feedback.close') }}
-      </AButton>
-    </div>
-  </a-modal>
-</template>
+<script lang="ts" setup>
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = withDefaults(defineProps<{
+  formType?: 'get-demo' | 'feedback'
+  userInfo: any
+}>(), {
+  formType: 'feedback',
+})
+
+const emit = defineEmits(['submit'])
+
+const { t } = useI18n()
+
+const fullName = ref<string>('')
+const mail = ref<string>('')
+const phone = ref<string>('')
+const comment = ref<string>('')
+
+const isLoading = defineModel< null | any>('isLoading', { default: false })
+const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })
+
+const feedbackScheme = z.object({
+  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
+  mail: z.string().nonempty(t('forms.feedback.fieldRequired')).email(t('forms.feedback.emailValid')),
+  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
+})
+
+const getDemoScheme = z.object({
+  fullName: z.string().nonempty(t('forms.feedback.fieldRequired')),
+  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
+  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
+})
+
+const submitted = ref(false)
+
+const feedbackValidation = useUIValidation(
+  feedbackScheme,
+  () => ({
+    phone: phone.value,
+    mail: mail.value,
+    comment: comment.value,
+  }),
+  submitted,
+)
+
+const getDemoValidation = useUIValidation(
+  getDemoScheme,
+  () => ({
+    fullName: fullName.value,
+    phone: phone.value,
+    comment: comment.value,
+  }),
+  submitted,
+)
+
+const send = () => {
+  submitted.value = true
+
+  if (props.formType === 'feedback') {
+    if (feedbackValidation.validation.value) return
+  }
+  else {
+    if (getDemoValidation.validation.value) return
+  }
+
+  emit('submit', { sender_name: fullName.value, phone_number: phone.value, email: mail.value, message: comment.value })
+  fullName.value = ''
+  phone.value = ''
+  mail.value = props.userInfo?.email || ''
+  comment.value = ''
+}
+
+defineExpose({
+  reset: () => (submitted.value = false),
+})
+
+onMounted(() => {
+  mail.value = props.userInfo?.email || ''
+})
+</script>
+
+<template>
+  <section class="flex flex-col gap-4 bg-white p-8 dark:bg-gray-900 sm:gap-8 sm:rounded-[20px]">
+    <div class="flex flex-col gap-2">
+      <h2 class="heading-01">
+        {{ formType === 'feedback' ? t('forms.feedback.title') : t('forms.demo.t') }}
+      </h2>
+      <p class="body-400 text-gray-600 dark:text-gray-200">
+        {{ formType === 'feedback' ? t('forms.feedback.subtitle') : 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">
+        <a-input-standard
+          v-if="formType === 'feedback'"
+          v-model="mail"
+          type="email"
+          color-classes="bg-gray-50 dark:bg-gray-800"
+          :error="feedbackValidation.getError('mail')"
+          :label="t('forms.feedback.email')"
+          required
+          size="md"
+          :disabled="isLoading"
+        />
+        <a-input-standard
+          v-else
+          v-model="fullName"
+          :error="getDemoValidation.getError('fullName')"
+          :label="t('forms.demo.n')"
+          required
+          size="md"
+          :disabled="isLoading"
+        />
+        <a-input-standard
+          v-model="phone"
+          v-maska
+          type="tel"
+          color-classes="bg-gray-50 dark:bg-gray-800"
+          :error="formType === 'feedback' ? feedbackValidation.getError('phone') : getDemoValidation.getError('phone')"
+          :label="t('forms.feedback.phone')"
+          data-maska="8 (###) ###-##-##"
+          required
+          size="md"
+          :disabled="isLoading"
+        />
+      </div>
+      <div class="sm:w-1/2">
+        <a-textarea
+          v-model="comment"
+          :error="formType === 'feedback' ? feedbackValidation.getError('comment') : getDemoValidation.getError('comment')"
+          :label="t('forms.feedback.comment')"
+          :resizeable="false"
+          class="min-h-[72px]"
+          color-classes="bg-gray-50 dark:bg-gray-800"
+          required
+          size="sm"
+          :disabled="isLoading"
+        />
+      </div>
+    </form>
+    <AButton
+      class="w-full self-end sm:w-[215px]"
+      :loading="isLoading"
+      @click="send"
+    >
+      {{ formType === 'feedback' ? t('forms.feedback.send') : t('forms.demo.b') }}
+    </AButton>
+  </section>
+
+  <a-modal
+    v-model="isModalOpen"
+    width="424px"
+    @close="isModalOpen = false"
+  >
+    <div class="flex flex-col items-center gap-5">
+      <h4 class="heading-04">
+        {{ t('forms.feedback.modalTitle') }}
+      </h4>
+      <a-ill-mail />
+      <p class="body-400 max-[352xp]">
+        {{ t('forms.feedback.modalSubtitle') }}
+      </p>
+      <AButton
+        block
+        view="outline"
+        @click="isModalOpen = false"
+      >
+        {{ t('forms.feedback.close') }}
+      </AButton>
+    </div>
+  </a-modal>
+</template>