@xlui/xux-ui 0.1.0

package/src/components/CountrySelect/index.vue

@@ -0,0 +1,319 @@
+<template>
+    <div ref="containerRef" class="country-select-container relative">
+      <div 
+        @click="toggleDropdown"
+        :class="[
+          'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#1a1a1a] focus:border-[#1a1a1a] transition-colors duration-200 cursor-pointer bg-white flex items-center justify-between',
+          customClass,
+          { 'opacity-60 cursor-not-allowed': disabled }
+        ]"
+        :tabindex="disabled ? -1 : 0"
+        @keydown.enter="toggleDropdown"
+        @keydown.space="toggleDropdown"
+        @keydown.escape="closeDropdown"
+      >
+        <div class="flex items-center gap-2">
+          <img 
+            v-if="selectedCountry"
+            :src="selectedCountry.flagSvg"
+            :alt="selectedCountry.name"
+            class="w-5 h-4 object-cover rounded-sm"
+            @error="handleFlagError"
+          />
+          <span :class="{ 'text-gray-500': !selectedCountry && placeholder }">
+            {{ selectedCountry ? selectedCountry.name : (placeholder || '选择国家') }}
+          </span>
+        </div>
+        <svg 
+          class="w-5 h-5 text-gray-400 transition-transform duration-200"
+          :class="{ 'rotate-180': isOpen }"
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+        </svg>
+      </div>
+  
+      <!-- Dropdown -->
+      <div 
+        v-if="isOpen && !disabled"
+        class="absolute z-[9999] w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto"
+        style="position: absolute;"
+      >
+        <div 
+          v-for="country in sortedCountries" 
+          :key="country.code"
+          @click="selectCountry(country)"
+          class="px-3 py-2 hover:bg-gray-50 cursor-pointer flex items-center gap-2 transition-colors"
+          :class="{ 'bg-gray-100': selectedCountry?.code === country.code }"
+        >
+          <img 
+            :src="country.flagSvg"
+            :alt="country.name"
+            class="w-5 h-4 object-cover rounded-sm flex-shrink-0"
+            @error="(e) => handleFlagError(e, country)"
+          />
+          <span>{{ country.name }}</span>
+        </div>
+      </div>
+  
+      <!-- Backdrop -->
+      <div 
+        v-if="isOpen && !disabled"
+        class="fixed inset-0 z-[9998]"
+        @click="closeDropdown"
+      ></div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  /**
+   * CountrySelect 国家选择器组件
+   * @displayName XCountrySelect
+   */
+  import countriesData from './data/countries.json'
+  import { ref, computed, onMounted, onUnmounted, nextTick, readonly } from 'vue'
+  
+  export interface Country {
+    name: string
+    code: string
+    flagEmoji: string
+    flagSvg: string
+    flagPng: string
+  }
+  
+  export interface CountrySelectProps {
+    modelValue?: string
+    placeholder?: string
+    disabled?: boolean
+    required?: boolean
+    customClass?: string
+    autoDetectFromIp?: boolean
+    returnType?: 'name' | 'code' // 返回国家名称还是国家代码
+    priorityCountries?: string[] // 优先显示的国家代码列表
+    ipDetectUrl?: string // 自定义IP检测接口URL
+    ipDetectMethod?: 'GET' | 'POST' // 请求方法
+    ipDetectHeaders?: Record<string, string> // 自定义请求头
+    ipDetectResponseParser?: (data: any) => string // 自定义响应解析函数，返回国家代码
+  }
+  
+  const props = withDefaults(defineProps<CountrySelectProps>(), {
+    modelValue: '',
+    placeholder: '',
+    disabled: false,
+    required: false,
+    customClass: '',
+    autoDetectFromIp: true,
+    returnType: 'name',
+    priorityCountries: () => ['US', 'CA', 'GB', 'DE', 'FR', 'JP', 'CN', 'AU'],
+    ipDetectUrl: 'https://ipinfo.io/json',
+    ipDetectMethod: 'GET'
+  })
+  
+  const emit = defineEmits<{
+    'update:modelValue': [value: string]
+    'change': [value: string, country: Country]
+    'ip-detect-start': [] // IP检测开始
+    'ip-detect-success': [countryCode: string] // IP检测成功
+    'ip-detect-error': [error: Error] // IP检测失败
+  }>()
+  
+  // 下拉框状态
+  const isOpen = ref(false)
+  
+  // 国家数据处理
+  const allCountries = ref<Country[]>(countriesData as Country[])
+  
+  // 当前选中的国家
+  const selectedCountry = computed(() => {
+    if (!props.modelValue) return null
+    return allCountries.value.find(country => 
+      props.returnType === 'code' ? country.code === props.modelValue : country.name === props.modelValue
+    )
+  })
+  
+  // 排序后的国家列表（优先国家在前）
+  const sortedCountries = computed(() => {
+    const priority = allCountries.value.filter(country => 
+      props.priorityCountries.includes(country.code)
+    )
+    const others = allCountries.value.filter(country => 
+      !props.priorityCountries.includes(country.code)
+    )
+    
+    // 按优先级排序，然后按字母顺序排序其他国家
+    const sortedPriority = priority.sort((a, b) => {
+      const aIndex = props.priorityCountries.indexOf(a.code)
+      const bIndex = props.priorityCountries.indexOf(b.code)
+      return aIndex - bIndex
+    })
+    
+    const sortedOthers = others.sort((a, b) => a.name.localeCompare(b.name))
+    
+    return [...sortedPriority, ...sortedOthers]
+  })
+  
+  // 下拉框操作
+  const toggleDropdown = () => {
+    if (!props.disabled) {
+      isOpen.value = !isOpen.value
+    }
+  }
+  
+  const closeDropdown = () => {
+    isOpen.value = false
+  }
+  
+  const selectCountry = (country: Country | null) => {
+    if (country) {
+      const value = props.returnType === 'code' ? country.code : country.name
+      emit('update:modelValue', value)
+      emit('change', value, country)
+    } else {
+      emit('update:modelValue', '')
+    }
+    closeDropdown()
+  }
+  
+  // 图片错误处理：SVG失败时切换到PNG
+  const handleFlagError = (event: Event, country?: Country) => {
+    const img = event.target as HTMLImageElement
+    if (country && img.src === country.flagSvg) {
+      img.src = country.flagPng
+    } else if (selectedCountry.value && img.src === selectedCountry.value.flagSvg) {
+      img.src = selectedCountry.value.flagPng
+    }
+  }
+  
+  /**
+   * IP自动检测国家
+   * 支持自定义后端接口，默认使用 ipinfo.io
+   * 
+   * @example 使用默认接口
+   * <XCountrySelect auto-detect-from-ip />
+   * 
+   * @example 使用自定义后端接口
+   * <XCountrySelect 
+   *   auto-detect-from-ip 
+   *   ip-detect-url="https://api.example.com/ip/location"
+   *   :ip-detect-response-parser="(data) => data.countryCode"
+   * />
+   */
+  const detectCountryFromIp = async () => {
+    if (!props.autoDetectFromIp || props.modelValue) return
+    
+    emit('ip-detect-start')
+    
+    try {
+      // 构建请求配置
+      const fetchOptions: RequestInit = {
+        method: props.ipDetectMethod,
+        headers: {
+          'Content-Type': 'application/json',
+          ...props.ipDetectHeaders
+        }
+      }
+      
+      // 发起请求
+      const response = await fetch(props.ipDetectUrl, fetchOptions)
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      
+      const data = await response.json()
+      
+      // 解析国家代码
+      let detectedCountryCode: string
+      
+      if (props.ipDetectResponseParser) {
+        // 使用自定义解析函数
+        detectedCountryCode = props.ipDetectResponseParser(data)
+      } else {
+        // 默认解析逻辑（适配 ipinfo.io 和常见后端格式）
+        detectedCountryCode = data.country || data.countryCode || data.country_code || ''
+      }
+      
+      detectedCountryCode = detectedCountryCode.toUpperCase()
+      
+      if (!detectedCountryCode) {
+        throw new Error('Country code not found in response')
+      }
+      
+      console.log('Auto-detected country from IP:', detectedCountryCode)
+      emit('ip-detect-success', detectedCountryCode)
+      
+      // 查找对应的国家
+      const detectedCountry = allCountries.value.find(country => 
+        country.code === detectedCountryCode
+      )
+      
+      if (detectedCountry) {
+        const valueToEmit = props.returnType === 'code' ? detectedCountry.code : detectedCountry.name
+        emit('update:modelValue', valueToEmit)
+        emit('change', valueToEmit, detectedCountry)
+      } else {
+        console.warn('Detected country code not found in country list:', detectedCountryCode)
+      }
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error))
+      console.warn('Failed to detect country from IP:', err)
+      emit('ip-detect-error', err)
+      
+      // 如果检测失败且没有初始值，可选择默认国家（默认不自动设置）
+      // 取消注释以下代码可启用默认国家逻辑
+      /*
+      const defaultCountry = allCountries.value.find(country => country.code === 'US')
+      if (defaultCountry && !props.modelValue) {
+        const valueToEmit = props.returnType === 'code' ? defaultCountry.code : defaultCountry.name
+        emit('update:modelValue', valueToEmit)
+        emit('change', valueToEmit, defaultCountry)
+      }
+      */
+    }
+  }
+  
+  // 点击外部关闭下拉框
+  const containerRef = ref<HTMLElement>()
+  
+  // 生命周期
+  onMounted(async () => {
+    await nextTick()
+    
+    // 如果启用IP检测且没有初始值，尝试自动检测
+    if (props.autoDetectFromIp && !props.modelValue) {
+      await detectCountryFromIp()
+    }
+    
+    // 设置点击外部关闭下拉框
+    const handleClickOutside = (event: Event) => {
+      if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+        closeDropdown()
+      }
+    }
+    
+    document.addEventListener('click', handleClickOutside)
+    
+    onUnmounted(() => {
+      document.removeEventListener('click', handleClickOutside)
+    })
+  })
+  
+  // 暴露方法给父组件
+  defineExpose({
+    detectCountryFromIp,
+    allCountries: readonly(allCountries),
+    sortedCountries: readonly(sortedCountries)
+  })
+  </script>
+  
+  <style scoped>
+  .country-select-container {
+    position: relative;
+  }
+  
+  .country-select-container img {
+    flex-shrink: 0;
+  }
+  </style> 

package/src/components/Input/index.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="x-input-group" :style="{ width: width }">
+    <input
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :placeholder="hasLabel ? '' : placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :maxlength="maxlength"
+      :minlength="minlength"
+      :autocomplete="autocomplete"
+      :class="[
+        'x-input',
+        {
+          'x-input--disabled': disabled,
+          'x-input--error': error,
+          'x-input--clearable': clearable && modelValue,
+          'x-input--with-label': hasLabel
+        }
+      ]"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="handleFocus"
+      @keydown="handleKeydown"
+      @keyup="handleKeyup"
+      @change="handleChange"
+    />
+    <label 
+      v-if="label" 
+      :class="[
+        'x-input-label',
+        {
+          'x-input-label--active': isFocused || hasValue,
+          'x-input-label--error': error
+        }
+      ]"
+    >
+      {{ label }}
+    </label>
+    
+    <!-- 清除按钮 -->
+    <button
+      v-if="clearable && modelValue && !disabled"
+      type="button"
+      class="x-input-clear"
+      @click="handleClear"
+      @mousedown.prevent
+    >
+      <Icon icon="bi:x-circle"></Icon>
+    </button>
+    
+    <!-- 字数统计 -->
+    <div v-if="showWordLimit && maxlength" class="x-input-count">
+      {{ currentLength }} / {{ maxlength }}
+    </div>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Icon } from '@iconify/vue'
+/**
+ * Input 输入框组件 适用于表单输入
+ * @displayName XInput
+ */
+
+export interface InputProps {
+  modelValue?: string | number
+  type?: string
+  placeholder?: string
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  clearable?: boolean
+  showWordLimit?: boolean
+  maxlength?: number
+  minlength?: number
+  autocomplete?: string
+  error?: boolean
+  width?: string
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  placeholder: '',
+  label: '',
+  disabled: false,
+  readonly: false,
+  required: false,
+  clearable: false,
+  showWordLimit: false,
+  autocomplete: 'off',
+  error: false,
+  width: '100%'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+  'input': [value: string | number, event: Event]
+  'change': [value: string | number, event: Event]
+  'blur': [event: FocusEvent]
+  'focus': [event: FocusEvent]
+  'clear': []
+  'keydown': [event: KeyboardEvent]
+  'keyup': [event: KeyboardEvent]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const isFocused = ref(false)
+
+// 计算属性
+const hasLabel = computed(() => !!props.label)
+
+const hasValue = computed(() => {
+  const value = props.modelValue
+  return value !== undefined && value !== null && value !== ''
+})
+
+const currentLength = computed(() => {
+  return String(props.modelValue || '').length
+})
+
+// 事件处理
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value
+  emit('update:modelValue', value)
+  emit('input', value, event)
+}
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value
+  emit('change', value, event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  emit('keydown', event)
+}
+
+const handleKeyup = (event: KeyboardEvent) => {
+  emit('keyup', event)
+}
+
+const handleClear = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+  inputRef.value?.focus()
+}
+
+// 暴露方法
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+const blur = () => {
+  inputRef.value?.blur()
+}
+
+const select = () => {
+  inputRef.value?.select()
+}
+
+defineExpose({
+  focus,
+  blur,
+  select,
+  ref: inputRef
+})
+</script>
+<style scoped>
+.x-input-group {
+  font-family: var(--x-font-family, 'Segoe UI', sans-serif);
+  position: relative;
+  display: inline-block;
+}
+
+.x-input {
+  width: 100%;
+  font-size: var(--x-font-size-sm, 14px);
+  padding: 0.8em 1em;
+  outline: none;
+  border: 2px solid var(--x-color-gray-300, rgb(200, 200, 200));
+  background-color: transparent;
+  border-radius: var(--x-radius-lg, 12px);
+  transition: all var(--x-transition, 0.3s ease);
+  color: var(--x-color-gray-900, #1a1a1a);
+}
+
+.x-input:hover:not(:disabled) {
+  border-color: var(--x-color-gray-400, rgb(170, 170, 170));
+}
+
+.x-input:focus {
+  border-color: var(--x-color-primary, #1a1a1a);
+  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
+}
+
+.x-input--disabled {
+  background-color: var(--x-color-gray-100, #f5f5f5);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.x-input--error {
+  border-color: var(--x-color-danger, #ef4444);
+}
+
+.x-input--error:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.x-input--clearable {
+  padding-right: 2.5em;
+}
+
+.x-input-label {
+  position: absolute;
+  left: 1em;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0 0.4em;
+  font-size: var(--x-font-size-sm, 14px);
+  color: var(--x-color-gray-500, rgb(100, 100, 100));
+  background-color: white;
+  pointer-events: none;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: left center;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+/* Label 浮动状态 */
+.x-input-label--active {
+  top: 0;
+  transform: translateY(-50%) scale(0.85);
+  font-size: var(--x-font-size-xs, 12px);
+  color: var(--x-color-primary, #1a1a1a);
+  font-weight: 500;
+}
+
+/* Label 错误状态 */
+.x-input-label--error.x-input-label--active {
+  color: var(--x-color-danger, #ef4444);
+}
+
+/* 禁用状态的 label */
+.x-input--disabled ~ .x-input-label {
+  color: var(--x-color-gray-400, #aaa);
+  opacity: 0.6;
+}
+
+.x-input-clear {
+  position: absolute;
+  right: 0.8em;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.2em;
+  color: var(--x-color-gray-400, #aaa);
+  transition: color 0.2s;
+  font-size: 1.2em;
+  line-height: 1;
+}
+
+.x-input-clear:hover {
+  color: var(--x-color-gray-600, #666);
+}
+
+.x-input-count {
+  position: absolute;
+  right: 0.8em;
+  bottom: -1.5em;
+  font-size: var(--x-font-size-xs, 12px);
+  color: var(--x-color-gray-500, #888);
+}
+</style>