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

package/components/forms/input/AInputV2.vue

@@ -1,542 +0,0 @@
-<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>