@wot-ui/ui 1.0.0 → 2.0.0-alpha.3

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

@@ -0,0 +1,473 @@
+<template>
+  <view
+    :class="`wd-input-number wd-input-number--${theme} ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''} ${
+      round ? 'is-round' : ''
+    }`"
+    :style="customStyle"
+  >
+    <!-- 减号按钮 -->
+    <view
+      :class="`wd-input-number__action wd-input-number__sub ${minDisabled || disableMinus ? 'is-disabled' : ''}`"
+      @click="handleClick('sub')"
+      @touchstart="handleTouchStart('sub')"
+      @touchend.stop="handleTouchEnd"
+    >
+      <view class="wd-input-number__action-divider" />
+    </view>
+    <!-- 输入框 -->
+    <view v-if="!withoutInput" class="wd-input-number__inner" @click.stop="">
+      <input
+        class="wd-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>
+    <!-- 加号按钮 -->
+    <view
+      :class="`wd-input-number__action wd-input-number__add ${maxDisabled || disablePlus ? 'is-disabled' : ''}`"
+      @click="handleClick('add')"
+      @touchstart="handleTouchStart('add')"
+      @touchend.stop="handleTouchEnd"
+    >
+      <view class="wd-input-number__action-divider" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-input-number',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { isDef, isEqual } from '../../common/util'
+import { useParent } from '../../composables/useParent'
+import { inputNumberProps, type OperationType } from './types'
+import { callInterceptor } from '../../common/interceptor'
+import { FORM_ITEM_VALIDATE_KEY } from '../wd-form-item/types'
+
+const props = defineProps(inputNumberProps)
+const { parent: formItemValidate } = useParent(FORM_ITEM_VALIDATE_KEY)
+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 })
+  formItemValidate.value?.validateByTrigger('blur')
+}
+
+/**
+ * 处理聚焦事件
+ */
+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">
+@use './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'
+]

package/components/wd-keyboard/index.scss

@@ -0,0 +1,104 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 键盘背景色
+$keyboard-bg: var(--wot-keyboard-bg, $filled-content) !default;
+// 键盘文字颜色
+$keyboard-color: var(--wot-keyboard-color, $text-main) !default;
+// 键盘内容间距
+$keyboard-padding: var(--wot-keyboard-padding, $padding-tight) !default;
+// 键盘头部高度
+$keyboard-header-height: var(--wot-keyboard-header-height, $n-40) !default;
+// 键盘标题颜色
+$keyboard-title-color: var(--wot-keyboard-title-color, $text-secondary) !default;
+// 键盘标题字号
+$keyboard-title-font-size: var(--wot-keyboard-title-font-size, $typography-body-size-main) !default;
+// 关闭按钮文字颜色
+$keyboard-close-color: var(--wot-keyboard-close-color, $primary-6) !default;
+// 关闭按钮悬浮透明度
+$keyboard-close-opacity-hover: var(--wot-keyboard-close-opacity-hover, $opacity-dimmer) !default;
+// 关闭按钮字号
+$keyboard-close-font-size: var(--wot-keyboard-close-font-size, $typography-body-size-main) !default;
+// 关闭按钮内边距
+$keyboard-close-padding: var(--wot-keyboard-close-padding, $padding-zero $padding-loose) !default;
+
+@include b(keyboard) {
+  width: 100%;
+  background: $keyboard-bg;
+  color: $keyboard-color;
+  user-select: none;
+
+  @include e(header) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $keyboard-header-height;
+    color: $keyboard-title-color;
+    font-size: $keyboard-title-font-size;
+  }
+
+  @include e(title) {
+    display: inline-block;
+    font-weight: normal;
+
+    &-left {
+      position: absolute;
+      left: 0;
+    }
+  }
+
+  @include e(body) {
+    display: flex;
+    padding-left: $keyboard-padding;
+    padding-top: $keyboard-padding;
+
+    .wd-keyboard__header + & {
+      padding-top: 0;
+    }
+  }
+
+  @include e(keys) {
+    display: flex;
+    flex: 3;
+    flex-wrap: wrap;
+  }
+
+  @include e(car-keys) {
+    display: flex;
+    flex: 10;
+    flex-wrap: wrap;
+
+    .wd-key-wrapper {
+      flex-basis: 10%;
+
+      @include m(wider) {
+        flex-basis: 20%;
+      }
+    }
+  }
+
+  @include e(close) {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 0;
+    height: 100%;
+    padding: $keyboard-close-padding;
+    color: $keyboard-close-color;
+    font-size: $keyboard-close-font-size;
+    background-color: transparent;
+    border: none;
+
+    &:active {
+      opacity: $keyboard-close-opacity-hover;
+    }
+
+  }
+
+  @include e(sidebar) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}