oxy-uni-ui 1.0.1

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

@@ -0,0 +1,464 @@
+<template>
+  <view :class="`oxy-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`" :style="customStyle">
+    <!-- 减号按钮 -->
+    <view
+      :class="`oxy-input-number__action ${minDisabled || disableMinus ? 'is-disabled' : ''}`"
+      @click="handleClick('sub')"
+      @touchstart="handleTouchStart('sub')"
+      @touchend.stop="handleTouchEnd"
+    >
+      <oxy-icon name="decrease" custom-class="oxy-input-number__action-icon"></oxy-icon>
+    </view>
+    <!-- 输入框 -->
+    <view v-if="!withoutInput" class="oxy-input-number__inner" @click.stop="">
+      <input
+        class="oxy-input-number__input"
+        :style="`${inputWidth ? 'width: ' + inputWidth : ''}`"
+        :type="inputType"
+        :input-mode="precision ? 'decimal' : 'numeric'"
+        :disabled="disabled || disableInput"
+        :value="String(inputValue)"
+        :placeholder="placeholder"
+        :adjust-position="adjustPosition"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <view class="oxy-input-number__input-border"></view>
+    </view>
+    <!-- 加号按钮 -->
+    <view
+      :class="`oxy-input-number__action ${maxDisabled || disablePlus ? 'is-disabled' : ''}`"
+      @click="handleClick('add')"
+      @touchstart="handleTouchStart('add')"
+      @touchend.stop="handleTouchEnd"
+    >
+      <oxy-icon name="add" custom-class="oxy-input-number__action-icon"></oxy-icon>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-input-number',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-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<{
+  /**
+   * 数值变化事件
+   */
+  (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,
+  (val) => {
+    inputValue.value = formatValue(val)
+  }
+)
+
+// 监听 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)
+  }
+
+  const formatted = formatValue(props.modelValue)
+
+  // 如果格式化后的值与原始值不同，同步到外部
+  if (!isEqual(String(formatted), String(props.modelValue))) {
+    emit('update:modelValue', formatted)
+  }
+  return formatted
+}
+
+/**
+ * 获取数字的小数位数
+ */
+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(val: number) {
+  const precision = Number(props.precision)
+  return Math.round(val * Math.pow(10, precision)) / Math.pow(10, precision)
+}
+
+/**
+ * 将字符串或数字转换为标准数值
+ */
+function toNumber(val: string | number): number {
+  // 空值处理
+  if (props.allowNull && (!isDef(val) || val === '')) {
+    return NaN
+  }
+
+  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 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) {
+    result = applyStrictBounds(result, props.min, props.max)
+  } else {
+    result = Math.min(Math.max(result, props.min), props.max)
+  }
+
+  // 精度处理
+  if (isDef(props.precision)) {
+    result = toPrecision(result)
+  }
+
+  return result
+}
+
+/**
+ * 严格步进模式下的边界处理
+ */
+function applyStrictBounds(val: number, min: number, max: number): number {
+  if (val >= min && val <= max) return val
+
+  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
+  }
+
+  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 formatValue(val: string | number): string | number {
+  if (props.allowNull && (!isDef(val) || val === '')) {
+    return ''
+  }
+
+  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 formatDisplay(val: string | number): string | number {
+  if (props.allowNull && (!isDef(val) || val === '')) {
+    return ''
+  }
+
+  if (!isDef(val) || val === '') {
+    return props.min
+  }
+
+  let num = Number(val)
+  if (isNaN(num)) {
+    return props.min
+  }
+
+  const precision = Number(props.precision)
+  if (!isDef(props.precision)) {
+    return num
+  }
+  return precision === 0 ? Number(num.toFixed(0)) : num.toFixed(precision)
+}
+
+/**
+ * 检查是否为中间输入状态
+ */
+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 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]
+  }
+
+  // 处理以点开头的情况
+  if (cleaned.startsWith('.')) return '0' + cleaned
+  if (cleaned.startsWith('-.')) return '-0' + cleaned.substring(1)
+
+  return cleaned
+}
+
+/**
+ * 更新值并触发事件
+ */
+function updateValue(val: string | number) {
+  // 空值处理
+  if (props.allowNull && (!isDef(val) || val === '')) {
+    if (isEqual('', String(props.modelValue))) {
+      inputValue.value = ''
+      return
+    }
+
+    const doUpdate = () => {
+      inputValue.value = ''
+      emit('update:modelValue', '')
+      emit('change', { value: '' })
+    }
+
+    callInterceptor(props.beforeChange, { args: [''], done: doUpdate })
+    return
+  }
+
+  const num = toNumber(val)
+  const display = formatValue(val)
+
+  if (isEqual(String(num), String(props.modelValue))) {
+    inputValue.value = display
+    return
+  }
+
+  const doUpdate = () => {
+    inputValue.value = display
+    emit('update:modelValue', num)
+    emit('change', { value: num })
+  }
+
+  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.scss';
+</style>

package/components/oxy-input-number/types.ts

@@ -0,0 +1,101 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
+
+/**
+ * 输入框值变化前的回调函数类型定义
+ * @param value 输入框的新值
+ * @returns 返回布尔值或Promise<boolean>，用于控制是否允许值的变化
+ */
+export type InputNumberBeforeChange = (value: number | string) => boolean | Promise<boolean>
+
+export type OperationType = 'add' | 'sub'
+
+export const inputNumberProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: makeRequiredProp(numericProp),
+  /**
+   * 最小值
+   */
+  min: makeNumberProp(1),
+  /**
+   * 最大值
+   */
+  max: makeNumberProp(Number.MAX_SAFE_INTEGER),
+  /**
+   * 步进值
+   */
+  step: makeNumberProp(1),
+  /**
+   * 是否严格按照步进值递增或递减
+   */
+  stepStrictly: makeBooleanProp(false),
+  /**
+   * 数值精度
+   */
+  precision: makeNumericProp(0),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否禁用输入框
+   */
+  disableInput: makeBooleanProp(false),
+  /**
+   * 是否禁用减号按钮
+   */
+  disableMinus: makeBooleanProp(false),
+  /**
+   * 是否禁用加号按钮
+   */
+  disablePlus: makeBooleanProp(false),
+  /**
+   * 是否不显示输入框
+   */
+  withoutInput: makeBooleanProp(false),
+  /**
+   * 输入框宽度
+   */
+  inputWidth: makeNumericProp(36),
+  /**
+   * 是否允许为空
+   */
+  allowNull: makeBooleanProp(false),
+  /**
+   * 输入框占位符
+   */
+  placeholder: makeStringProp(''),
+  /**
+   * 原生属性，键盘弹起时，是否自动上推页面
+   */
+  adjustPosition: makeBooleanProp(true),
+  /**
+   * 输入值变化前的回调函数，返回 `false` 可阻止输入，支持返回 `Promise`
+   */
+  beforeChange: Function as PropType<InputNumberBeforeChange>,
+  /**
+   * 是否开启长按加减手势
+   */
+  longPress: makeBooleanProp(false),
+  /**
+   * 是否立即响应输入变化，false 时仅在失焦和按钮点击时更新
+   */
+  immediateChange: makeBooleanProp(true),
+  /**
+   * 是否在初始化时更新 v-model 为修正后的值
+   * true: 自动修正并更新 v-model
+   * false: 保持原始值不修正，但仍会进行显示格式化
+   */
+  updateOnInit: makeBooleanProp(true),
+  /**
+   * 输入框类型
+   * number: 数字输入
+   * digit: 整数输入
+   */
+  inputType: makeStringProp<'number' | 'digit'>('digit')
+}
+
+export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>

package/components/oxy-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'
+]