@tplc/wot 1.0.7 → 1.0.8

package/components/wd-input-number/wd-input-number.vue

@@ -1,39 +1,39 @@
 <template>
-  <view
-    :class="`wd-input-number ${!bordered ? 'is-no-border' : ''} ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`"
-    :style="customStyle"
-  >
+  <view :class="`wd-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`" :style="customStyle">
+    <!-- 减号按钮 -->
     <view
       :class="`wd-input-number__action ${minDisabled || disableMinus ? 'is-disabled' : ''}`"
-      @click="sub"
+      @click="handleClick('sub')"
+      @touchstart="handleTouchStart('sub')"
+      @touchend.stop="handleTouchEnd"
     >
-      <slot name="decrease" />
-      <wd-icon
-        name="decrease"
-        custom-class="wd-input-number__action-icon"
-        v-if="!$slots.decrease"
-      ></wd-icon>
+      <wd-icon name="decrease" custom-class="wd-input-number__action-icon"></wd-icon>
     </view>
+    <!-- 输入框 -->
     <view v-if="!withoutInput" class="wd-input-number__inner" @click.stop="">
       <input
         class="wd-input-number__input"
         :style="`${inputWidth ? 'width: ' + inputWidth : ''}`"
-        type="digit"
+        :type="inputType"
+        :input-mode="precision ? 'decimal' : 'numeric'"
         :disabled="disabled || disableInput"
-        v-model="inputValue"
+        :value="String(inputValue)"
         :placeholder="placeholder"
+        :adjust-position="adjustPosition"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
       />
       <view class="wd-input-number__input-border"></view>
     </view>
+    <!-- 加号按钮 -->
     <view
       :class="`wd-input-number__action ${maxDisabled || disablePlus ? 'is-disabled' : ''}`"
-      @click="add"
+      @click="handleClick('add')"
+      @touchstart="handleTouchStart('add')"
+      @touchend.stop="handleTouchEnd"
     >
-      <slot name="increase" />
-      <wd-icon name="add" custom-class="wd-input-number__action-icon" v-if="!$slots.increase" />
+      <wd-icon name="add" custom-class="wd-input-number__action-icon"></wd-icon>
     </view>
   </view>
 </template>
@@ -44,188 +44,421 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { debounce, isDef, isEqual } from '../common/util'
-import { inputNumberProps } from './types'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { isDef, isEqual } from '../common/util'
+import { inputNumberProps, type OperationType } from './types'
+import { callInterceptor } from '../common/interceptor'
 
 const props = defineProps(inputNumberProps)
-const emit = defineEmits(['focus', 'blur', 'change', 'update:modelValue'])
-
-const minDisabled = ref<boolean>(false)
-const maxDisabled = ref<boolean>(false)
-const inputValue = ref<string | number>('') // 输入框的值
-
+const emit = defineEmits<{
+  /**
+   * 数值变化事件
+   */
+  (e: 'change', value: { value: number | string }): void
+  /**
+   * 输入框聚焦事件
+   */
+  (e: 'focus', detail: any): void
+  /**
+   * 输入框失焦事件
+   */
+  (e: 'blur', value: { value: string | number }): void
+  /**
+   * v-model 更新事件
+   */
+  (e: 'update:modelValue', value: number | string): void
+}>()
+const inputValue = ref<string | number>(getInitValue())
+let longPressTimer: ReturnType<typeof setTimeout> | null = null
+
+/**
+ * 判断数字是否达到最小值限制
+ */
+const minDisabled = computed(() => {
+  const val = toNumber(inputValue.value)
+  return props.disabled || val <= props.min || addStep(val, -props.step) < props.min
+})
+
+/**
+ * 判断数字是否达到最大值限制
+ */
+const maxDisabled = computed(() => {
+  const val = toNumber(inputValue.value)
+  return props.disabled || val >= props.max || addStep(val, props.step) > props.max
+})
+
+// 监听 modelValue 变化
 watch(
   () => props.modelValue,
-  (newValue) => {
-    inputValue.value = newValue
-    splitDisabled(newValue)
-  },
-  { immediate: true, deep: true },
+  (val) => {
+    inputValue.value = formatValue(val)
+  }
 )
 
-watch(
-  [() => props.max, () => props.min],
-  () => {
-    updateBoundary(true)
-  },
-  { immediate: true, deep: true },
-)
+// 监听 max, min, precision 变化时重新格式化当前值
+watch([() => props.max, () => props.min, () => props.precision], () => {
+  const val = toNumber(inputValue.value)
+  inputValue.value = formatValue(val)
+})
+
+/**
+ * 获取初始值
+ */
+function getInitValue() {
+  if (!props.updateOnInit) {
+    // 不自动修正时，仅做显示格式化，不修正值
+    return formatDisplay(props.modelValue)
+  }
 
-watch(
-  () => props.disabled,
-  (newValue) => {
-    minDisabled.value = newValue
-    maxDisabled.value = newValue
-  },
-  { immediate: true, deep: true },
-)
+  const formatted = formatValue(props.modelValue)
 
-function updateBoundary(formMaxMinDiff = false) {
-  debounce(() => {
-    const value = formatValue(inputValue.value)
-    if (!isEqual(inputValue.value, value)) {
-      setValue(value, true, formMaxMinDiff)
-    }
-    splitDisabled(value)
-  }, 30)()
+  // 如果格式化后的值与原始值不同，同步到外部
+  if (!isEqual(String(formatted), String(props.modelValue))) {
+    emit('update:modelValue', formatted)
+  }
+  return formatted
 }
 
-function splitDisabled(value: number | string) {
-  const { disabled, min, max, step } = props
-  minDisabled.value = disabled || Number(value) <= min || changeStep(value, -step) < min
-  maxDisabled.value = disabled || Number(value) >= max || changeStep(value, step) > max
+/**
+ * 获取数字的小数位数
+ */
+function getPrecision(val?: number) {
+  if (!isDef(val)) return 0
+  const str = val.toString()
+  const dotIndex = str.indexOf('.')
+  return dotIndex === -1 ? 0 : str.length - dotIndex - 1
 }
 
-function toPrecision(value: number) {
-  return Number(
-    parseFloat(
-      `${Math.round(value * Math.pow(10, props.precision)) / Math.pow(10, props.precision)}`,
-    ).toFixed(props.precision),
-  )
+/**
+ * 按指定精度处理数值
+ */
+function toPrecision(val: number) {
+  const precision = Number(props.precision)
+  return Math.round(val * Math.pow(10, precision)) / Math.pow(10, precision)
 }
 
-function getPrecision(value?: number) {
-  if (value === undefined) return 0
-  const valueString = value.toString()
-  const dotPosition = valueString.indexOf('.')
-  let precision = 0
-  if (dotPosition !== -1) {
-    precision = valueString.length - dotPosition - 1
+/**
+ * 将字符串或数字转换为标准数值
+ */
+function toNumber(val: string | number): number {
+  // 空值处理
+  if (props.allowNull && (!isDef(val) || val === '')) {
+    return NaN
   }
-  return precision
-}
 
-function toStrictlyStep(value: number | string) {
-  const stepPrecision = getPrecision(props.step)
-  const precisionFactory = Math.pow(10, stepPrecision)
-  return (Math.round(Number(value) / props.step) * precisionFactory * props.step) / precisionFactory
+  if (!isDef(val) || val === '') {
+    return props.min
+  }
+
+  let str = String(val)
+
+  // 处理中间输入状态
+  if (str.endsWith('.')) str = str.slice(0, -1)
+  if (str.startsWith('.')) str = '0' + str
+  if (str.startsWith('-.')) str = '-0' + str.substring(1)
+  if (str === '-' || str === '') return props.min
+
+  let num = Number(str)
+  if (isNaN(num)) num = props.min
+
+  return normalizeValue(num)
 }
 
-function setValue(value: string | number, change: boolean = true, formMaxMinDiff = false) {
-  if (props.allowNull && (!isDef(value) || value === '')) {
-    dispatchChangeEvent(value, change, formMaxMinDiff)
-    return
+/**
+ * 标准化数值（应用步进、边界、精度规则）
+ */
+function normalizeValue(val: number): number {
+  let result = val
+
+  // 严格步进
+  if (props.stepStrictly) {
+    const stepPrecision = getPrecision(props.step)
+    const factor = Math.pow(10, stepPrecision)
+    result = (Math.round(result / props.step) * factor * props.step) / factor
   }
 
+  // 边界限制
   if (props.stepStrictly) {
-    value = toStrictlyStep(value)
+    result = applyStrictBounds(result, props.min, props.max)
+  } else {
+    result = Math.min(Math.max(result, props.min), props.max)
   }
-  if ((value || value === 0) && props.precision !== undefined) {
-    value = toPrecision(Number(value))
+
+  // 精度处理
+  if (isDef(props.precision)) {
+    result = toPrecision(result)
   }
-  if (Number(value) > props.max) value = toPrecision(props.max)
-  if (Number(value) < props.min) value = toPrecision(props.min)
-  dispatchChangeEvent(value, change, formMaxMinDiff)
+
+  return result
 }
 
-function changeStep(val: string | number, step: number) {
-  val = Number(val)
+/**
+ * 严格步进模式下的边界处理
+ */
+function applyStrictBounds(val: number, min: number, max: number): number {
+  if (val >= min && val <= max) return val
 
-  if (isNaN(val)) {
-    return props.min
+  const stepPrecision = getPrecision(props.step)
+  const factor = Math.pow(10, stepPrecision)
+
+  if (val < min) {
+    const minSteps = Math.ceil((min * factor) / (props.step * factor))
+    const candidate = toPrecision((minSteps * props.step * factor) / factor)
+    if (candidate > max) {
+      const maxSteps = Math.floor((max * factor) / (props.step * factor))
+      return toPrecision((maxSteps * props.step * factor) / factor)
+    }
+    return candidate
   }
 
-  const precisionFactory = Math.pow(10, props.precision)
-  return toPrecision((val * precisionFactory + step * precisionFactory) / precisionFactory)
+  if (val > max) {
+    const maxSteps = Math.floor((max * factor) / (props.step * factor))
+    const candidate = toPrecision((maxSteps * props.step * factor) / factor)
+    if (candidate < min) {
+      const minSteps = Math.ceil((min * factor) / (props.step * factor))
+      return toPrecision((minSteps * props.step * factor) / factor)
+    }
+    return candidate
+  }
+
+  return val
 }
 
-function sub() {
-  if (minDisabled.value || props.disableMinus) return
+/**
+ * 格式化值用于显示（包含修正逻辑）
+ */
+function formatValue(val: string | number): string | number {
+  if (props.allowNull && (!isDef(val) || val === '')) {
+    return ''
+  }
 
-  const newValue = changeStep(inputValue.value, -props.step)
-  dispatchChangeEvent(newValue)
+  const num = toNumber(val)
+  const precision = Number(props.precision)
+  if (!isDef(props.precision)) {
+    return num
+  }
+  return precision === 0 ? Number(num.toFixed(0)) : num.toFixed(precision)
 }
 
-function add() {
-  if (maxDisabled.value || props.disablePlus) return
+/**
+ * 仅做显示格式化，不包含值修正逻辑
+ */
+function formatDisplay(val: string | number): string | number {
+  if (props.allowNull && (!isDef(val) || val === '')) {
+    return ''
+  }
 
-  const newValue = changeStep(inputValue.value, props.step)
-  dispatchChangeEvent(newValue)
-}
+  if (!isDef(val) || val === '') {
+    return props.min
+  }
 
-function handleInput(event: any) {
-  const value = event.detail.value || ''
-  dispatchChangeEvent(value)
-}
+  let num = Number(val)
+  if (isNaN(num)) {
+    return props.min
+  }
 
-function handleFocus(event: any) {
-  emit('focus', event.detail)
+  const precision = Number(props.precision)
+  if (!isDef(props.precision)) {
+    return num
+  }
+  return precision === 0 ? Number(num.toFixed(0)) : num.toFixed(precision)
 }
 
-function handleBlur() {
-  const value = formatValue(inputValue.value)
-  if (!isEqual(inputValue.value, value)) {
-    setValue(value)
-  }
-  emit('blur', {
-    value,
-  })
+/**
+ * 检查是否为中间输入状态
+ */
+function isIntermediate(val: string): boolean {
+  if (!val) return false
+  const str = String(val)
+  return str.endsWith('.') || str.startsWith('.') || str.startsWith('-.') || str === '-' || (Number(props.precision) > 0 && str.indexOf('.') === -1)
 }
 
-function dispatchChangeEvent(
-  value: string | number,
-  change: boolean = true,
-  formMaxMinDiff = false,
-) {
-  if (isEqual(inputValue.value, value)) {
-    return
+/**
+ * 清理输入值
+ */
+function cleanInput(val: string): string {
+  if (!val) return ''
+
+  // 清理非数字、小数点、负号
+  let cleaned = val.replace(/[^\d.-]/g, '')
+
+  // 处理负号，保证负号只出现在最前面
+  const hasNegative = cleaned.startsWith('-')
+  cleaned = cleaned.replace(/-/g, '')
+  if (hasNegative) cleaned = '-' + cleaned
+
+  // 处理小数点
+  const precision = Number(props.precision)
+  if (precision > 0) {
+    const parts = cleaned.split('.')
+    if (parts.length > 2) {
+      cleaned = parts[0] + '.' + parts.slice(1).join('')
+    }
+  } else {
+    cleaned = cleaned.split('.')[0]
   }
-  const mode = inputValue.value > value ? 'sub' : 'add'
-  inputValue.value = value
-  change && emit('update:modelValue', inputValue.value)
-  change && !formMaxMinDiff && emit('change', { value, mode })
+
+  // 处理以点开头的情况
+  if (cleaned.startsWith('.')) return '0' + cleaned
+  if (cleaned.startsWith('-.')) return '-0' + cleaned.substring(1)
+
+  return cleaned
 }
 
-function formatValue(value: string | number) {
-  if (props.allowNull && (!isDef(value) || value === '')) {
-    return ''
-  }
+/**
+ * 更新值并触发事件
+ */
+function updateValue(val: string | number) {
+  // 空值处理
+  if (props.allowNull && (!isDef(val) || val === '')) {
+    if (isEqual('', String(props.modelValue))) {
+      inputValue.value = ''
+      return
+    }
 
-  value = Number(value)
+    const doUpdate = () => {
+      inputValue.value = ''
+      emit('update:modelValue', '')
+      emit('change', { value: '' })
+    }
 
-  if (isNaN(value)) {
-    value = props.min
+    callInterceptor(props.beforeChange, { args: [''], done: doUpdate })
+    return
   }
 
-  if (props.stepStrictly) {
-    value = toStrictlyStep(value)
+  const num = toNumber(val)
+  const display = formatValue(val)
+
+  if (isEqual(String(num), String(props.modelValue))) {
+    inputValue.value = display
+    return
   }
 
-  if (props.precision !== undefined) {
-    value = value.toFixed(props.precision)
+  const doUpdate = () => {
+    inputValue.value = display
+    emit('update:modelValue', num)
+    emit('change', { value: num })
   }
 
-  return Number(value)
+  callInterceptor(props.beforeChange, { args: [num], done: doUpdate })
+}
+
+/**
+ * 按步进值增减
+ */
+function addStep(val: string | number, step: number) {
+  const num = Number(val)
+  if (isNaN(num)) return normalizeValue(props.min)
+
+  const precision = Math.max(getPrecision(num), getPrecision(step))
+  const factor = Math.pow(10, precision)
+  const result = (num * factor + step * factor) / factor
+  return normalizeValue(result)
+}
+
+/**
+ * 处理按钮点击
+ */
+function handleClick(type: OperationType) {
+  const step = type === 'add' ? props.step : -props.step
+  if ((step < 0 && (minDisabled.value || props.disableMinus)) || (step > 0 && (maxDisabled.value || props.disablePlus))) return
+
+  const newVal = addStep(inputValue.value, step)
+  updateValue(newVal)
+}
+
+/**
+ * 处理输入事件
+ */
+function handleInput(event: any) {
+  const rawVal = event.detail.value || ''
+
+  // 立即更新显示
+  inputValue.value = rawVal
+
+  nextTick(() => {
+    // 空值处理
+    if (rawVal === '') {
+      inputValue.value = ''
+      if (props.immediateChange && props.allowNull) {
+        updateValue('')
+      }
+      return
+    }
+
+    // 清理输入
+    const cleaned = cleanInput(rawVal)
+
+    // 中间状态处理
+    if (Number(props.precision) > 0 && isIntermediate(cleaned)) {
+      inputValue.value = cleaned
+      return
+    }
+
+    // 正常输入处理
+    inputValue.value = cleaned
+    if (props.immediateChange) {
+      updateValue(cleaned)
+    }
+  })
+}
+
+/**
+ * 处理失焦事件
+ */
+function handleBlur(event: any) {
+  const val = event.detail.value || ''
+  updateValue(val)
+  emit('blur', { value: val })
+}
+
+/**
+ * 处理聚焦事件
+ */
+function handleFocus(event: any) {
+  emit('focus', event.detail)
+}
+
+/**
+ * 长按逻辑
+ */
+function longPressStep(type: OperationType) {
+  clearLongPressTimer()
+  longPressTimer = setTimeout(() => {
+    handleClick(type)
+    longPressStep(type)
+  }, 250)
+}
+
+function handleTouchStart(type: OperationType) {
+  if (!props.longPress) return
+  clearLongPressTimer()
+  longPressTimer = setTimeout(() => {
+    handleClick(type)
+    longPressStep(type)
+  }, 600)
+}
+
+function handleTouchEnd() {
+  if (!props.longPress) return
+  clearLongPressTimer()
+}
+
+function clearLongPressTimer() {
+  if (longPressTimer) {
+    clearTimeout(longPressTimer)
+    longPressTimer = null
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-keyboard/constants.ts

@@ -0,0 +1,81 @@
+/**
+ * 车牌号键盘-省份简称
+ */
+export const CAR_KEYBOARD_AREAS = [
+  '京',
+  '沪',
+  '粤',
+  '津',
+  '冀',
+  '豫',
+  '云',
+  '辽',
+  '黑',
+  '湘',
+  '皖',
+  '鲁',
+  '苏',
+  '浙',
+  '赣',
+  '鄂',
+  '桂',
+  '甘',
+  '晋',
+  '陕',
+  '蒙',
+  '吉',
+  '闽',
+  '贵',
+  '渝',
+  '川',
+  '青',
+  '琼',
+  '宁',
+  '挂',
+  '藏',
+  '港',
+  '澳',
+  '新',
+  '使',
+  '学'
+]
+
+/**
+ * 车牌号键盘-数字和字母（不包含I和O，因为车牌号规则中不使用这两个字母）
+ */
+export const CAR_KEYBOARD_KEYS = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  0,
+  'Q',
+  'W',
+  'E',
+  'R',
+  'T',
+  'Y',
+  'U',
+  'P',
+  'A',
+  'S',
+  'D',
+  'F',
+  'G',
+  'H',
+  'J',
+  'K',
+  'L',
+  'Z',
+  'X',
+  'C',
+  'V',
+  'B',
+  'N',
+  'M'
+]