adata-ui 0.3.99 → 2.0.0

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

@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import { twMerge, twJoin } from 'tailwind-merge'
+import AAlert from '#adata-ui/components/elements/alert/AAlert.vue'
+
+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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  label: '',
+  size: 'md',
+  error: false,
+  required: false,
+  readonly: false,
+  clearable: false,
+  resizeable: true,
+  startIcon: '',
+  colorClasses: ''
+})
+
+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<string | number>({ default: '' })
+
+const isClearable = computed<boolean>(
+  () => props.clearable && !props.disabled && !!modelValue.value
+)
+const isResizeable = computed<boolean>(
+  () => 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 = ''"
+      >
+        <a-icon-x-mark class="!mb-0 fill-gray-600 dark:fill-gray-300" filled />
+      </button>
+      <slot name="endButton" />
+    </div>
+    <Transition name="slide-in">
+      <slot name="alert">
+        <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>
+      </slot>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.input {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:focus ~ .label,
+  &:not(:focus):valid ~ .label,
+  &:-webkit-autofill ~ .label {
+    font-size: 10px;
+    transform: translateY(-17px);
+  }
+}
+
+.slide-in-enter-active {
+  z-index: 0;
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: transform 0.5s;
+}
+
+.slide-in-enter-to {
+  z-index: auto;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.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/components/forms/radio-button/ARadioButton.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex items-center"
+       :class="[disabled ? 'opacity-20' : '']"
+  >
+    <input
+      :id="name"
+      :name="name"
+      type="radio"
+      class="hidden"
+      :checked="model === value"
+      :disabled="disabled"
+      @change="update"
+    >
+    <label
+      :for="name"
+      class="flex items-center text-deepblue-900 dark:text-gray-200 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-deepblue-900 dark:text-gray-200 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 currentComponent = computed(() => {
+  if (model.value ===props.value ) {
+    return  RadioCheck
+  } else {
+    return RadioEmpty
+  }
+})
+
+function update() {
+  if(props.disabled) return
+
+  if(props.value == model.value && !props.permanent) {
+    model.value = undefined
+  }else{
+    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-sm gap-2',
+  sm: 'text-xs gap-2'
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = defineProps<{
+  title?: string
+  description?: string
+}>()
+
+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 = ''
+  form.phone_number = ''
+}
+</script>
+
+<template>
+  <div class="rounded-[20px] bg-blue-700 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 lg:max-w-[50%] lg:gap-6">
+        <p class="text-[32px] font-bold">
+          {{ title || t('forms.request_demo.title') }}
+        </p>
+        <p class="text-base">
+          {{ description || t('forms.request_demo.info') }}
+        </p>
+      </div>
+      <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">
+              <a-input-standard
+                v-model="form.sender_name"
+                :label="t('forms.demo.n')"
+                :error="getError('sender_name')"
+              />
+              <a-input-standard
+                v-model="form.email"
+                :label="t('forms.demo.e')"
+                :error="getError('email')"
+                type="email"
+              />
+              <a-input-standard
+                v-model="form.phone_number"
+                :label="t('forms.demo.p')"
+                :error="getError('phone_number')"
+                type="tel"
+              />
+            </div>
+          </slot>
+          <div class="flex flex-col gap-2">
+            <a-button @click="onSend">{{ t('forms.request_demo.send') }}</a-button>
+            <p class="text-center text-[10px] text-gray-500">{{ t('forms.request_demo.title') }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/forms/toggle/AToggle.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import {Switch} from "@headlessui/vue";
+import {twMerge, twJoin} from "tailwind-merge";
+
+import type {Props} from "./types";
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'md',
+  switchClass: '',
+  color: 'blue',
+  onIcon: null,
+  onIconClass: null,
+  offIcon: null,
+  offIconClass: null,
+  activeClass: '',
+  inactiveClass: '',
+  activeContainerClass: '',
+  inactiveContainerClass: ''
+})
+const active = defineModel<boolean>({required: true})
+const switchClass = computed(() => {
+  return twMerge(twJoin(
+    ui.base,
+    ui.size[props.size],
+    ui.rounded,
+    ui.ring,
+    props.disabled ? 'opacity-20' : '',
+    // color.value && (active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
+    props.color && (active.value ? ui.active[props.color] : ui.inactive),
+    active.value ? props.activeClass : props.inactiveClass
+  ), props.switchClass)
+})
+const containerClass = computed(() => {
+  return twMerge(twJoin(
+    ui.container.base,
+    ui.container.size[props.size],
+    (active.value ? ui.container.active[props.size] : ui.container.inactive),
+    active.value ? props.activeContainerClass : props.inactiveContainerClass
+  ))
+})
+const onIconClassFormatted = computed(() => {
+  return twMerge(twJoin(
+    ui.icon.size[props.size],
+    props.onIconClass
+    // props.color && ui.icon.on
+  ))
+})
+const offIconClassFormatted = computed(() => {
+  return twMerge(twJoin(
+    ui.icon.size[props.size],
+    props.offIconClass
+    // color && ui.value.icon.off.replaceAll('{color}', color.value)
+  ))
+})
+
+
+const ui = {
+  "base": "relative inline-flex flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none transition ease-in-out",
+  "rounded": "rounded-full",
+  "ring": "focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  "active": {
+    "blue": "bg-blue-700 dark:bg-blue-500",
+    "green": "bg-green"
+  },
+  "inactive": "bg-gray-200 dark:bg-gray-200/20",
+  "size": {
+    "2xs": "h-3 w-5",
+    "xs": "h-3.5 w-6",
+    "sm": "h-4 w-7",
+    "md": "h-5 w-9",
+    "lg": "h-6 w-11",
+    "xl": "h-7 w-[3.25rem]",
+    "2xl": "h-8 w-[3.75rem]"
+  },
+  "container": {
+    "base": "pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200",
+    "active": {
+      "2xs": "translate-x-2 rtl:-translate-x-2",
+      "xs": "translate-x-2.5 rtl:-translate-x-2.5",
+      "sm": "translate-x-3 rtl:-translate-x-3",
+      "md": "translate-x-4 rtl:-translate-x-4",
+      "lg": "translate-x-5 rtl:-translate-x-5",
+      "xl": "translate-x-6 rtl:-translate-x-6",
+      "2xl": "translate-x-7 rtl:-translate-x-7"
+    },
+    "inactive": "translate-x-0 rtl:-translate-x-0",
+    "size": {
+      "2xs": "h-2 w-2",
+      "xs": "h-2.5 w-2.5",
+      "sm": "h-3 w-3",
+      "md": "h-4 w-4",
+      "lg": "h-5 w-5",
+      "xl": "h-6 w-6",
+      "2xl": "h-7 w-7"
+    }
+  },
+  "icon": {
+    "base": "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity",
+    "active": "opacity-100 ease-in duration-200",
+    "inactive": "opacity-0 ease-out duration-100",
+    "size": {
+      "2xs": "h-2 w-2",
+      "xs": "h-2 w-2",
+      "sm": "h-2 w-2",
+      "md": "h-3 w-3",
+      "lg": "h-4 w-4",
+      "xl": "h-5 w-5",
+      "2xl": "h-6 w-6"
+    },
+    // "on": "text-{color}-500 dark:text-{color}-400",
+    // "off": "text-gray-400 dark:text-gray-500"
+  },
+}
+
+</script>
+
+<template>
+  <Switch
+    v-model="active"
+    :disabled="disabled"
+    :class="switchClass"
+    aria-label="Switch"
+    style="border-color: transparent"
+  >
+    <span :class="containerClass">
+      <span
+        v-if="onIcon"
+        :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]"
+        aria-hidden="true"
+      >
+        <component
+          :is="onIcon"
+          :class="onIconClassFormatted"
+          filled
+          :font-controlled="false"
+        />
+      </span>
+      <span
+        v-if="offIcon"
+        :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]"
+        aria-hidden="true"
+      >
+        <component
+          :is="offIcon"
+          :class="offIconClassFormatted"
+          filled
+          :font-controlled="false"
+        />
+      </span>
+    </span>
+  </Switch>
+</template>
+
+<style scoped>
+
+</style>

package/components/forms/toggle/types.ts

@@ -0,0 +1,16 @@
+export type Size = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+export type Color = 'blue' | 'green'
+export interface Props {
+  disabled?: boolean
+  size?: Size
+  color?: Color
+  switchClass?: string
+  activeClass?: string
+  inactiveClass?: string
+  onIcon?: SVGElement | null
+  onIconClass?: string | null
+  offIcon?: SVGElement | null
+  offIconClass?: string | null
+  activeContainerClass?: string
+  inactiveContainerClass?: string
+}

package/components/modals/AboutTariffModal.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import CheckmarkCircle from '#adata-ui/icons/check/checkmark-circle.vue'
+
+interface Item {
+  price: number
+  action: string
+  id: number
+  isConnected: boolean
+  key: string
+  code: string
+}
+
+interface Props {
+  id: number
+  items: Item[]
+}
+
+withDefaults(defineProps<Props>(), {})
+
+const isOpen = defineModel<boolean>({ default: false })
+
+const device = useAdaptive()
+
+const { t, rt, tm } = useI18n()
+
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    width="522"
+    :height-modal-class="device.isSmallTablet ? 'h-[612px]' : ''"
+    :is-scrollable="true"
+    @close="isOpen = false"
+  >
+    <div class="flex flex-col gap-5 lg:w-[458px]">
+      <h3 class="heading-02 text-center lg:text-left">
+        {{ t('tariffs.aboutTariff') }}
+      </h3>
+      <div class="flex flex-col gap-2 lg:pb-0">
+        <div
+          class="body-400 relative grid w-full grid-cols-1 grid-rows-2 gap-[43px] px-4 py-8 lg:max-w-[458px] lg:px-[70px] lg:py-[27px]"
+        >
+          <img
+            class="absolute size-full"
+            src="/tariff/subtract.png"
+            alt="background"
+          >
+          <div class="flex justify-around gap-8 lg:justify-between">
+            <div>
+              <div>
+                {{ t('reuse.subscribe') }}
+              </div>
+              <h4 class="md:heading-02 heading-03">
+                {{ t(`tariffs.modals.${id}.name`) }}
+              </h4>
+            </div>
+            <div>
+              <div>
+                {{ t('reuse.startingFrom') }}
+              </div>
+              <div class="md:heading-02 heading-03">
+                {{ t(`tariffs.modals.${id}.price`) }} <span
+                  class="body-400"
+                >{{ t(`tariffs.modals.${id}.period`) }}</span>
+              </div>
+            </div>
+          </div>
+          <p class="px-1 text-center lg:px-0">
+            {{ t(`tariffs.modals.${id}.forWho`) }}
+          </p>
+        </div>
+        <div class="flex flex-wrap gap-1 sm:gap-2">
+          <div
+            v-for="(item, index) in tm(`tariffs.modals.${id}.professions`)"
+            class=" h-7 rounded-full bg-blue-700 px-[10px] py-[5px] text-xs leading-[16px] text-white dark:bg-blue-500  dark:text-gray-900 "
+          >
+            {{ rt(item) }}
+          </div>
+        </div>
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <div
+            v-for="(item, index) in tm(`tariffs.modals.${id}.functions`)"
+            class="flex items-center gap-[1.5px]"
+          >
+            <checkmark-circle class="shrink-0 text-green-500 dark:text-green-400" />
+            <p class="text-xs">
+              {{ rt(item) }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex gap-4"
+        :class="device.isMobile ? 'bg-white dark:bg-gray-900 m-0 p-4 sticky bottom-0 left-0 w-full' : ''"
+      >
+        <a-button
+          view="outline"
+          variant="primary"
+          block
+          @click="isOpen = false"
+        >
+          {{ t('reuse.close') }}
+        </a-button>
+        <slot
+          name="button"
+          size="lg"
+          :item="items[id - 1]"
+        />
+      </div>
+    </div>
+  </a-modal>
+</template>