adata-ui 2.1.40-beta.18 → 2.1.40-beta.19

package/components/forms/input/AInputV2.vue

@@ -0,0 +1,542 @@
+<script generic="T, K extends keyof T" lang="ts" setup>
+import type { Component } from 'vue'
+import { autoUpdate, flip, size as floatingSize, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import { MaskInput } from 'maska'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  required: false,
+  disabled: false,
+  readonly: false,
+  clearable: false,
+  size: 'sm',
+  error: undefined,
+  placeholder: '',
+  autocomplete: 'off',
+  loading: false,
+  variant: 'default',
+  mask: undefined,
+  autocompleteList: () => [] as T[],
+  autocompleteKey: undefined,
+  autocompleteOption: undefined,
+  autocompleteFn: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'clear'): void
+  (e: 'focus', ev: FocusEvent): void
+  (e: 'blur', ev: FocusEvent): void
+  (e: 'keydown', ev: KeyboardEvent): void
+  (e: 'enter', value: string | AutocompleteValue): void
+  (e: 'selectOption', value: AutocompleteValue): void
+  (e: 'updateValue', value: string | number): void
+}>()
+
+interface Props {
+  label?: string
+  type?: 'text' | 'search' | 'email' | 'password' | 'tel' | 'url' | 'number'
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  clearable?: boolean
+  size?: 'sm' | 'md'
+  error?: string | string[]
+  startIcon?: Component
+  endIcon?: Component
+  loading?: boolean
+  variant?: 'default' | 'gray' | 'blue'
+  mask?: string
+  inputId?: string
+  autocomplete?: string
+  autocompleteList?: T[]
+  autocompleteKey?: K
+  autocompleteOption?: K
+  autocompleteFn?: (item: T) => string
+}
+
+type AutocompleteValue = T | T[keyof T]
+
+function customTrim(input: string | number | null | undefined): string | number {
+  if (input == null) return ''
+  if (typeof input !== 'string') return input
+  if (input === ' ' || /\d/.test(input)) return input.trim()
+  return input
+}
+
+const [modelValue, modelModifiers] = defineModel<string | number | AutocompleteValue>({
+  default: '',
+  set(value) {
+    if (modelModifiers['custom-trim']) return customTrim(value as string)
+    return value
+  },
+})
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const isFocused = ref(false)
+
+let maskInput: MaskInput | null = null
+onMounted(() => {
+  if (props.mask && inputRef.value) {
+    maskInput = new MaskInput(inputRef.value, { mask: props.mask })
+  }
+})
+onUnmounted(() => {
+  maskInput?.destroy()
+  maskInput = null
+})
+
+const internalId = useId()
+const inputId = computed(() => props.inputId ?? `input-v2-${internalId}`)
+
+const hasValue = computed(() => modelValue.value != null && modelValue.value !== '')
+const hasError = computed(() => Array.isArray(props.error) ? props.error.length > 0 : !!props.error)
+const isLabelFloated = computed(() => hasValue.value || isFocused.value)
+
+const hasAutocomplete = computed(() => props.autocompleteList && props.autocompleteList.length > 0)
+const isDropdownOpen = computed(() => hasAutocomplete.value && isFocused.value)
+const currentItemIndex = ref(-1)
+
+const fieldRef = ref<HTMLElement | null>(null)
+const floatingRef = ref<HTMLElement | null>(null)
+const { x, y, strategy, update } = useFloating(fieldRef, floatingRef, {
+  placement: 'bottom-start',
+  strategy: 'absolute',
+  middleware: [
+    offset(6),
+    flip({ fallbackPlacements: ['top-start'] }),
+    shift({ padding: 8 }),
+    floatingSize({
+      apply({ availableHeight, elements, rects }) {
+        const el = elements.floating as HTMLElement
+        el.style.width = `${rects.reference.width}px`
+        el.style.maxHeight = `${Math.min(availableHeight, 320)}px`
+      },
+    }),
+  ],
+})
+
+let cleanup: (() => void) | null = null
+watch(isDropdownOpen, (open) => {
+  if (open && fieldRef.value && floatingRef.value) {
+    cleanup = autoUpdate(fieldRef.value, floatingRef.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+    currentItemIndex.value = -1
+  }
+})
+onUnmounted(() => cleanup?.())
+
+const wrapperRef = ref<HTMLDivElement | null>(null)
+onClickOutside(wrapperRef, () => {
+  if (isFocused.value) inputRef.value?.blur()
+})
+
+function resolveSelectedValue(item: T): AutocompleteValue {
+  if (props.autocompleteFn) return props.autocompleteFn(item) as AutocompleteValue
+  if (props.autocompleteKey) return item[props.autocompleteKey] as AutocompleteValue
+  return item
+}
+
+function applyCurrentItem() {
+  const item = props.autocompleteList[currentItemIndex.value]
+  if (item == null) return
+  modelValue.value = resolveSelectedValue(item)
+}
+
+function onSelectOption(item: T) {
+  const value = resolveSelectedValue(item)
+  modelValue.value = value
+  emit('selectOption', value)
+  inputRef.value?.blur()
+}
+
+const isTouchScrolling = ref(false)
+function onTouchEndOption(item: T) {
+  if (!isTouchScrolling.value) onSelectOption(item)
+  isTouchScrolling.value = false
+}
+
+function onInput(ev: Event) {
+  const value = (ev.target as HTMLInputElement).value
+  modelValue.value = value
+  emit('updateValue', value)
+}
+
+function onFocus(ev: FocusEvent) {
+  isFocused.value = true
+  emit('focus', ev)
+}
+
+function onBlur(ev: FocusEvent) {
+  isFocused.value = false
+  emit('blur', ev)
+}
+
+const autocompleteListEl = ref<HTMLUListElement | null>(null)
+function scrollIntoView(idx: number) {
+  const container = autocompleteListEl.value
+  if (!container) return
+  const item = container.children[idx] as HTMLElement | undefined
+  if (!item) return
+  const itemTop = item.offsetTop
+  const itemBottom = itemTop + item.clientHeight
+  if (itemTop < container.scrollTop) container.scrollTop = itemTop
+  else if (itemBottom > container.scrollTop + container.clientHeight)
+    container.scrollTop = itemBottom - container.clientHeight
+}
+
+function onKeydown(ev: KeyboardEvent) {
+  emit('keydown', ev)
+
+  if (hasAutocomplete.value) {
+    const last = props.autocompleteList.length - 1
+    if (ev.key === 'ArrowDown' && currentItemIndex.value < last) {
+      ev.preventDefault()
+      currentItemIndex.value++
+      applyCurrentItem()
+      nextTick(() => scrollIntoView(currentItemIndex.value))
+      return
+    }
+    if (ev.key === 'ArrowUp' && currentItemIndex.value > 0) {
+      ev.preventDefault()
+      currentItemIndex.value--
+      applyCurrentItem()
+      nextTick(() => scrollIntoView(currentItemIndex.value))
+      return
+    }
+    if (ev.key === 'Enter') {
+      if (currentItemIndex.value !== -1) {
+        applyCurrentItem()
+        emit('enter', props.autocompleteList[currentItemIndex.value])
+      }
+      else {
+        emit('enter', (ev.target as HTMLInputElement).value)
+      }
+      inputRef.value?.blur()
+      return
+    }
+    if (ev.key === 'Escape') {
+      inputRef.value?.blur()
+      return
+    }
+  }
+
+  if (ev.key === 'Enter') emit('enter', (ev.target as HTMLInputElement).value)
+}
+
+function onClear() {
+  modelValue.value = ''
+  emit('clear')
+  emit('updateValue', '')
+  inputRef.value?.focus()
+}
+
+function focus() {
+  inputRef.value?.focus()
+}
+
+function blur() {
+  inputRef.value?.blur()
+}
+
+function onFieldMousedown(ev: MouseEvent) {
+  if (ev.target === inputRef.value) return
+  ev.preventDefault()
+  inputRef.value?.focus()
+}
+
+defineExpose({ focus, blur, inputRef })
+
+const layoutClass = computed(() => {
+  if (!props.label) {
+    return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
+  }
+  return props.size === 'md' ? 'h-10 pt-4 pb-0.5' : 'h-9 pt-3 pb-0.5'
+})
+
+const iconOffsetClass = computed(() => {
+  if (!props.label) return ''
+  return props.size === 'md' ? '-translate-y-[7px]' : '-translate-y-[5px]'
+})
+
+const showClearButton = computed(() =>
+  props.clearable && hasValue.value && !props.disabled && !props.readonly && !props.loading,
+)
+
+const errorMessages = computed(() => {
+  if (!props.error) return [] as string[]
+  return Array.isArray(props.error) ? props.error : [props.error]
+})
+
+const attrs = useAttrs()
+const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
+  return rest
+})
+
+const fieldClass = computed(() => {
+  if (props.disabled) {
+    return 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
+  }
+  if (props.variant === 'gray') {
+    return 'border-transparent bg-gray-50 dark:border-transparent dark:bg-white/[0.04]'
+  }
+  if (props.variant === 'blue') {
+    return 'border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20'
+  }
+  return 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'
+})
+
+function rowDisplay(item: T): unknown {
+  if (props.autocompleteOption) return item[props.autocompleteOption]
+  return item
+}
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    class="input-v2 relative w-full text-body-md"
+    v-bind="wrapperAttrs"
+  >
+    <div
+      ref="fieldRef"
+      class="input-v2__field text-deepblue-900 relative flex w-full cursor-text items-center gap-2 rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-600/20 hover:border-blue-500 dark:text-gray-200 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20 dark:hover:border-blue-400"
+      :class="[
+        layoutClass,
+        fieldClass,
+        startIcon ? 'pl-3' : 'pl-4',
+        clearable || endIcon || loading || $slots.endButton ? 'pr-3' : 'pr-4',
+        { 'input-v2__field--error': hasError, 'input-v2__field--disabled': disabled },
+      ]"
+      @mousedown="onFieldMousedown"
+    >
+      <label
+        v-if="label"
+        :for="inputId"
+        class="input-v2__label pointer-events-none absolute top-1/2 max-w-[calc(100%-32px)] truncate text-gray-500 dark:text-gray-400"
+        :data-size="size"
+        :class="[
+          startIcon ? 'left-9' : 'left-4',
+          { 'input-v2__label--floated': isLabelFloated },
+        ]"
+      >
+        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
+      </label>
+
+      <component
+        :is="startIcon"
+        v-if="startIcon"
+        class="size-4 shrink-0 text-gray-400 dark:text-gray-500"
+        :class="iconOffsetClass"
+      />
+
+      <input
+        :id="inputId"
+        ref="inputRef"
+        :type="type"
+        :value="modelValue ?? ''"
+        :placeholder="(isLabelFloated || !label) ? placeholder : ''"
+        :disabled="disabled"
+        :readonly="readonly"
+        :autocomplete="autocomplete"
+        :tabindex="disabled ? -1 : 0"
+        class="input-v2__input text-deepblue-900 w-full min-w-0 bg-transparent leading-tight outline-none placeholder:text-gray-500 disabled:cursor-not-allowed dark:text-gray-200 dark:placeholder:text-gray-400"
+        v-bind="inputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+      >
+
+      <a-icon-loader-circle
+        v-if="loading"
+        class="size-4 shrink-0 animate-spin text-gray-400 dark:text-gray-500"
+        :class="iconOffsetClass"
+      />
+
+      <button
+        v-else-if="showClearButton"
+        type="button"
+        tabindex="-1"
+        class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.08] dark:hover:text-gray-300"
+        :class="iconOffsetClass"
+        @mousedown.prevent
+        @click.stop="onClear"
+      >
+        <a-icon-x-mark class="!m-0 size-3.5" />
+      </button>
+
+      <component
+        :is="endIcon"
+        v-else-if="endIcon"
+        class="size-4 shrink-0 text-gray-400 dark:text-gray-500"
+        :class="iconOffsetClass"
+      />
+
+      <slot name="endButton" />
+    </div>
+
+    <transition
+      enter-active-class="input-v2__dropdown-enter-active"
+      enter-from-class="input-v2__dropdown-enter-from"
+      enter-to-class="input-v2__dropdown-enter-to"
+      leave-active-class="input-v2__dropdown-leave-active"
+      leave-from-class="input-v2__dropdown-leave-from"
+      leave-to-class="input-v2__dropdown-leave-to"
+    >
+      <div
+        v-if="isDropdownOpen"
+        ref="floatingRef"
+        class="input-v2__dropdown z-[10000] flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-1.5 shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
+      >
+        <ul ref="autocompleteListEl" class="input-v2__list flex flex-col">
+          <li
+            v-for="(item, idx) in autocompleteList"
+            :key="idx"
+            class="cursor-pointer rounded-md px-3 py-2 text-body-md transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
+            :class="{ 'input-v2__option--active': currentItemIndex === idx }"
+            @mousedown.prevent="onSelectOption(item)"
+            @touchend.prevent="onTouchEndOption(item)"
+            @touchmove="isTouchScrolling = true"
+          >
+            <slot name="autocomplete-option" :item="item">
+              {{ rowDisplay(item) }}
+            </slot>
+          </li>
+        </ul>
+
+        <slot name="autocomplete-buttons" :value="modelValue" />
+      </div>
+    </transition>
+
+    <transition
+      enter-active-class="input-v2__error-enter-active"
+      enter-from-class="input-v2__error-enter-from"
+      enter-to-class="input-v2__error-enter-to"
+      leave-active-class="input-v2__error-leave-active"
+      leave-from-class="input-v2__error-leave-from"
+      leave-to-class="input-v2__error-leave-to"
+    >
+      <p v-if="hasError" class="mt-1 flex flex-col text-body-sm text-red-500 dark:text-red-400">
+        <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
+      </p>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.input-v2__field--error {
+  border-color: theme('colors.red.500');
+}
+
+.input-v2__field--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.input-v2__field--disabled .input-v2__input {
+  cursor: not-allowed;
+}
+
+.input-v2__label {
+  font-size: 14px;
+  line-height: 1.3;
+  transform: translateY(-50%);
+  transition:
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    font-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 300ms ease-out;
+}
+
+.input-v2__label--floated {
+  font-size: 10px;
+  transform: translateY(-17px);
+}
+
+.input-v2__label--floated[data-size="sm"] {
+  transform: translateY(-14px);
+}
+
+.input-v2__dropdown-enter-active,
+.input-v2__dropdown-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.input-v2__dropdown-enter-from,
+.input-v2__dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.input-v2__dropdown-enter-to,
+.input-v2__dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.input-v2__list {
+  max-height: 250px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.input-v2__list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.input-v2__option--active {
+  background-color: theme('colors.blue.50');
+}
+
+:is(.dark) .input-v2__option--active {
+  background-color: rgb(30 64 175 / 0.18);
+}
+
+.input-v2__error-enter-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.input-v2__error-enter-from {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.input-v2__error-leave-active {
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.input-v2__error-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .input-v2__label,
+  .input-v2__dropdown-enter-active,
+  .input-v2__dropdown-leave-active,
+  .input-v2__error-enter-active,
+  .input-v2__error-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/forms/input/date/AInputDate.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { twJoin, twMerge } from 'tailwind-merge'
 import ACalendar from "#adata-ui/components/elements/calendar/ACalendar.vue";
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 
 
 interface Props {
@@ -48,7 +48,7 @@ const uiConfig = {
   "input-wrapper": {
     base: 'relative inline-block w-full text-sm sm:min-w-full'
   },
-  base: 'w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 hover:outline 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',
+  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 hover:outline 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'

package/components/forms/input/password/AInputPassword.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import AInputStandard from "#adata-ui/components/forms/input/standard/AInputStandard.vue";
 
-
 interface Props {
   disabled?: boolean
   label?: string
   size?: 'sm' | 'md'
   error?: string
   required?: boolean
+  iconEyeTestId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,19 +19,25 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const isOpened = ref<boolean>(false)
+
+const inputProps = computed(() => {
+  const { iconEyeTestId, ...rest } = props
+  return rest
+})
 </script>
 
 <template>
   <a-input-standard
     v-bind="$attrs"
     :type="isOpened ? 'text' : 'password'"
-    v-bind.prop="props"
+    v-bind.prop="inputProps"
   >
     <template #endButton>
       <button
         class="absolute top-1/2 right-4 text-gray-500 fill-gray-500 pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 disabled:pointer-events-none"
         :disabled="disabled"
         type="button"
+        :data-test-id="iconEyeTestId"
         @click="isOpened = !isOpened"
       >
         <a-icon-eye-closed

package/components/forms/input/standard/AInputStandard.vue

@@ -1,6 +1,6 @@
 <script generic="T, K extends keyof T" lang="ts" setup>
-import {twMerge, twJoin} from 'tailwind-merge'
 import AAlert from '#adata-ui/components/elements/alert/AAlert.vue'
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge'
 
 interface Props {
   disabled?: boolean
@@ -44,11 +44,11 @@ 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',
+    base: 'relative inline-block w-full text-body-md 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',
+  base: 'w-full border-0 rounded-sm 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',

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { twMerge, twJoin } from 'tailwind-merge'
 import AAlert from '#adata-ui/components/elements/alert/AAlert.vue'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 
 interface Props {
   disabled?: boolean
@@ -38,7 +38,7 @@ const uiConfig = {
     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',
+  base: 'w-full border-0 rounded-sm 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'