adata-ui 2.1.41-beta.7 → 2.1.41-beta.8

package/components/forms/radio-button/ARadioButton.vue

@@ -1,95 +1,95 @@
-<template>
-  <div class="flex items-center"
-       :class="[disabled ? 'opacity-20' : '']"
-  >
-    <input
-      :id="name"
-      :name="name"
-      type="radio"
-      class="hidden"
-      ref="input"
-      :checked="model === value"
-      :disabled="disabled"
-      @change="update"
-    >
-    <label
-      :for="name"
-      class="flex items-center text-primary cursor-pointer w-full whitespace-nowrap"
-      :class="[textSizeOptions[size]]"
-    >
-      <span v-if="side==='left'" class="select-none w-full"><slot/></span>
-      <component :is="currentComponent" class="text-primary w-full"
-                 :class="[sizeOptions[size]]"
-      />
-      <span v-if="side==='right'" class="select-none w-full"><slot/></span>
-    </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-import RadioCheck from "#adata-ui/icons/radio/radio-check.vue";
-import RadioEmpty from "#adata-ui/icons/radio/radio-empty.vue";
-
-defineOptions({name: 'ARadioButton'})
-
-
-interface Props {
-  size?: 'lg' | 'sm',
-  name?: string
-  disabled?: boolean
-  side?: 'right' | 'left'
-  value: string | number | boolean | null | undefined
-  permanent?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'sm',
-  name: 'check',
-  value: null,
-  side: 'left',
-  disabled: false,
-  permanent: false,
-})
-
-const emit = defineEmits(['radioChanged'])
-const model = defineModel<string | number | boolean | null | undefined>()
-const input = ref()
-
-const currentComponent = computed(() => {
-  if (model.value === props.value) {
-    return RadioCheck
-  } else {
-    return RadioEmpty
-  }
-})
-
-function update() {
-  if (props.disabled) return
-  model.value = props.value
-
-  emit("radioChanged", model.value)
-
-}
-
-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-body-md gap-2',
-  sm: 'text-body-sm gap-2'
-}
-
-watch(model, async (e) => {
-  await nextTick()
-  if (props.value == e && !props.permanent) {
-    input.value.addEventListener('click', () => {
-      model.value = undefined
-    })
-  }
-}, {immediate: true, deep: true})
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <div class="flex items-center"
+       :class="[disabled ? 'opacity-20' : '']"
+  >
+    <input
+      :id="name"
+      :name="name"
+      type="radio"
+      class="hidden"
+      ref="input"
+      :checked="model === value"
+      :disabled="disabled"
+      @change="update"
+    >
+    <label
+      :for="name"
+      class="flex items-center text-primary cursor-pointer w-full whitespace-nowrap"
+      :class="[textSizeOptions[size]]"
+    >
+      <span v-if="side==='left'" class="select-none w-full"><slot/></span>
+      <component :is="currentComponent" class="text-primary w-full"
+                 :class="[sizeOptions[size]]"
+      />
+      <span v-if="side==='right'" class="select-none w-full"><slot/></span>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import RadioCheck from "#adata-ui/icons/radio/radio-check.vue";
+import RadioEmpty from "#adata-ui/icons/radio/radio-empty.vue";
+
+defineOptions({name: 'ARadioButton'})
+
+
+interface Props {
+  size?: 'lg' | 'sm',
+  name?: string
+  disabled?: boolean
+  side?: 'right' | 'left'
+  value: string | number | boolean | null | undefined
+  permanent?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  name: 'check',
+  value: null,
+  side: 'left',
+  disabled: false,
+  permanent: false,
+})
+
+const emit = defineEmits(['radioChanged'])
+const model = defineModel<string | number | boolean | null | undefined>()
+const input = ref()
+
+const currentComponent = computed(() => {
+  if (model.value === props.value) {
+    return RadioCheck
+  } else {
+    return RadioEmpty
+  }
+})
+
+function update() {
+  if (props.disabled) return
+  model.value = props.value
+
+  emit("radioChanged", model.value)
+
+}
+
+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-body-md gap-2',
+  sm: 'text-body-sm gap-2'
+}
+
+watch(model, async (e) => {
+  await nextTick()
+  if (props.value == e && !props.permanent) {
+    input.value.addEventListener('click', () => {
+      model.value = undefined
+    })
+  }
+}, {immediate: true, deep: true})
+</script>
+
+<style scoped>
+
+</style>

package/components/forms/request-demo/ARequestDemo.vue

@@ -1,108 +1,108 @@
-<script setup lang="ts">
-import * as z from 'zod'
-import { useUIValidation } from '#adata-ui/composables/useUIValidation'
-
-const props = defineProps<{
-  title?: string
-  description?: string
-  userInfo: any
-}>()
-
-const emit = defineEmits(['send'])
-
-const { t } = useI18n()
-
-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 = props.userInfo?.email || ''
-  form.phone_number = ''
-}
-
-onMounted(() => {
-  form.email = props.userInfo?.email || ''
-})
-</script>
-
-<template>
-  <div class="rounded-[20px] bg-brand p-4 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 lg:max-w-[50%] lg:gap-6">
-        <slot name="title">
-          <p class="text-h2 md:text-display-sm">
-            {{ title || t('forms.request_demo.title') }}
-          </p>
-        </slot>
-        <slot name="description">
-          <p class="text-body-lg whitespace-pre-line">
-            {{ description || t('forms.request_demo.info') }}
-          </p>
-        </slot>
-      </div>
-      <div class="rounded-[20px] bg-main p-6 lg:w-[456px]">
-        <div class="flex flex-col gap-4">
-          <slot name="inputs">
-            <div class="flex flex-col gap-4">
-              <a-input-standard
-                v-model="form.sender_name"
-                required
-                :label="t('forms.demo.n')"
-                :error="getError('sender_name')"
-              />
-              <a-input-standard
-                v-model="form.email"
-                required
-                :label="t('forms.demo.e')"
-                :error="getError('email')"
-                type="email"
-              />
-              <a-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>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = defineProps<{
+  title?: string
+  description?: string
+  userInfo: any
+}>()
+
+const emit = defineEmits(['send'])
+
+const { t } = useI18n()
+
+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 = props.userInfo?.email || ''
+  form.phone_number = ''
+}
+
+onMounted(() => {
+  form.email = props.userInfo?.email || ''
+})
+</script>
+
+<template>
+  <div class="rounded-[20px] bg-brand p-4 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 lg:max-w-[50%] lg:gap-6">
+        <slot name="title">
+          <p class="text-h2 md:text-display-sm">
+            {{ title || t('forms.request_demo.title') }}
+          </p>
+        </slot>
+        <slot name="description">
+          <p class="text-body-lg whitespace-pre-line">
+            {{ description || t('forms.request_demo.info') }}
+          </p>
+        </slot>
+      </div>
+      <div class="rounded-[20px] bg-main p-6 lg:w-[456px]">
+        <div class="flex flex-col gap-4">
+          <slot name="inputs">
+            <div class="flex flex-col gap-4">
+              <a-input-standard
+                v-model="form.sender_name"
+                required
+                :label="t('forms.demo.n')"
+                :error="getError('sender_name')"
+              />
+              <a-input-standard
+                v-model="form.email"
+                required
+                :label="t('forms.demo.e')"
+                :error="getError('email')"
+                type="email"
+              />
+              <a-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>
+    </div>
+  </div>
+</template>