@veltra/mobile 1.0.0 → 1.1.0

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

@@ -0,0 +1,407 @@
+<template>
+  <div v-if="!readonly" :class="className">
+    <u-input
+      ref="inputRef"
+      :class="cls.e('field')"
+      :model-value="displayed"
+      v-bind="inputProps"
+      inputmode="decimal"
+      @update:model-value="handleUpdateModelValue"
+      @change="handleChange"
+      @keydown.stop="handleKeydown"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      :size="size"
+      :readonly="readonly"
+      :disabled="disabled"
+      :clearable="false"
+    >
+      <template #suffix v-if="hasSuffix">
+        <span :class="cls.e('suffix')">
+          <button
+            v-if="props.clearable"
+            :class="[cls.e('clear'), bem.is('hidden', !showClear)]"
+            type="button"
+            aria-label="清除"
+            @click.stop="handleClear"
+          >
+            <Close />
+          </button>
+          <span v-if="hasCustomSuffix" :class="cls.e('suffix-content')">
+            {{ suffix }}
+            <slot name="suffix" />
+          </span>
+        </span>
+      </template>
+
+      <template #prefix v-if="slots.prefix">
+        <slot name="prefix" />
+      </template>
+    </u-input>
+
+    <!-- 步进按钮外置在输入框右侧，保证 44×44 触控热区（移动端形态） -->
+    <div v-if="showStep" :class="cls.e('step')">
+      <button
+        type="button"
+        aria-label="减少"
+        :class="bem.is('disabled', disabled || !reducible)"
+        :disabled="disabled || !reducible"
+        @click="decrease"
+      >
+        <Minus />
+      </button>
+      <button
+        type="button"
+        aria-label="增加"
+        :class="bem.is('disabled', disabled || !increasable)"
+        :disabled="disabled || !increasable"
+        @click="increase"
+      >
+        <Plus />
+      </button>
+    </div>
+  </div>
+
+  <template v-else>
+    {{ generateDisplayed || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { $n, n, o, isUndef } from '@cat-kit/core'
+import { useFormFallbackProps } from '@veltra/compositions'
+import { Close, Minus, Plus } from '@veltra/icons/normal'
+import { FORM_EMPTY_CONTENT, Tween, injectFormContext } from '@veltra/utils'
+import { computed, shallowRef, useAttrs, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { InputExposed } from '../../types/input'
+import type { NumberInputEmits, NumberInputProps } from '../../types/number-input'
+import { UInput } from '../input'
+
+defineOptions({ name: 'UNumberInput', inheritAttrs: false })
+
+const props = withDefaults(defineProps<NumberInputProps>(), {
+  placeholder: '请输入',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+const emit = defineEmits<NumberInputEmits>()
+
+const slots = defineSlots<{ prefix?: () => any; suffix?: () => any }>()
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const attrs = useAttrs()
+
+const inputProps = computed(() => ({
+  ...attrs,
+  ...o(props as Record<string, any>).pick(['disabled', 'placeholder', 'size', 'prefix'])
+}))
+
+const inputRef = shallowRef<InputExposed>()
+
+const inputDom = computed(() => inputRef.value?.el)
+
+const cls = bem('number-input')
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value)]
+})
+
+/** 实际值 */
+const model = defineModel<NumberInputProps['modelValue']>()
+
+// 展示值
+const displayed = shallowRef('')
+
+const focused = shallowRef(false)
+
+const generateDisplayed = computed(() => {
+  if (!displayed.value) return ''
+
+  return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`
+})
+
+const showStep = computed(() => props.step !== undefined && props.step !== false)
+
+const hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)
+
+const hasSuffix = computed(() => props.clearable || hasCustomSuffix.value)
+
+// 移动端无 hover，有输入即展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && displayed.value !== ''
+})
+
+/** 步长 */
+const stepVal = computed<number>(() => {
+  const { step } = props
+  if (step === undefined) return 1
+  return typeof step === 'boolean' ? 1 : step
+})
+
+/** 是否可增 */
+const increasable = computed(() => {
+  const { max, multiple } = props
+  if (isUndef(max) || isUndef(model.value)) return true
+  // 如果存在倍数，先将 model.value 除以倍数得到原始值再比较
+  const rawValue = multiple ? $n.div(model.value, multiple) : model.value
+  return rawValue < max
+})
+
+/** 是否可减 */
+const reducible = computed(() => {
+  const { min, multiple } = props
+  if (isUndef(min) || isUndef(model.value)) return true
+  // 如果存在倍数，先将 model.value 除以倍数得到原始值再比较
+  const rawValue = multiple ? $n.div(model.value, multiple) : model.value
+  return rawValue > min
+})
+
+// 通过值和步长值计算默认的最大精度
+const defaultMaxPrecision = computed(() => {
+  const { multiple } = props
+  // 如果存在倍数，基于原始值计算精度
+  const rawValue =
+    multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value
+  return Math.max(
+    String(rawValue).split('.')[1]?.length ?? 0,
+    String(stepVal.value).split('.')[1]?.length ?? 0
+  )
+})
+
+/**
+ * 获取展示值
+ * @param num 实际值
+ */
+function getDisplayed(num?: number): string {
+  if (!num && num !== 0) return ''
+
+  const {
+    currency,
+    precision,
+    minPrecision,
+    // 如果没有指定最大精度那么设置默认为值和步长值中的较大值
+    maxPrecision = defaultMaxPrecision.value,
+    multiple
+  } = props
+
+  // 如果存在倍数，先将实际值除以倍数得到原始值
+  const displayValue = multiple ? $n.div(num, multiple) : num
+
+  return currency
+    ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })
+    : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })
+}
+
+watch(
+  [model, focused, () => props.currency],
+  ([modelValue, inputFocused]) => {
+    if (inputFocused) return
+    displayed.value = getDisplayed(modelValue)
+  },
+  { immediate: true }
+)
+
+/**
+ * 解析展示值
+ * @param str 展示值
+ */
+function parseDisplayed(str: string): number | undefined {
+  if (!str) return undefined
+
+  // 将货币格式去掉再转化为数字
+  const number = +str.replace(/,/g, '')
+  const { multiple } = props
+
+  // 如果解析失败，使用当前值作为回退
+  // 如果存在倍数，需要先将 model.value 除以倍数得到原始值
+  let result: number | undefined
+  if (isNaN(number)) {
+    if (model.value === undefined) return undefined
+    result = multiple ? $n.div(model.value, multiple) : model.value
+  } else {
+    result = number
+  }
+
+  if (result === undefined) return undefined
+
+  const { precision, maxPrecision, minPrecision } = props
+
+  const fixedResult = +n(result).fixed(precision ?? { minPrecision, maxPrecision })
+
+  // 如果存在倍数，将原始值乘以倍数返回实际值
+  return multiple ? $n.mul(fixedResult, multiple) : fixedResult
+}
+
+/**
+ * 获取有效值
+ * @param val 值
+ */
+function getValidValue<T extends undefined | number>(val: T): T {
+  if (val === undefined) return val
+  const { min, max, multiple } = props
+
+  // 如果存在倍数，先将值除以倍数得到原始值进行验证，验证后再乘以倍数
+  if (multiple) {
+    const rawVal = $n.div(val, multiple)
+    let validRawVal = rawVal
+    if (min !== undefined && rawVal < min) validRawVal = min
+    if (max !== undefined && rawVal > max) validRawVal = max
+    return $n.mul(validRawVal, multiple) as T
+  }
+
+  if (min !== undefined && val < min) return min as T
+  if (max !== undefined && val > max) return max as T
+  return val
+}
+
+function handleUpdateModelValue(input: string): void {
+  const newVal = parseDisplayed(input)
+  model.value = getValidValue(newVal)
+  displayed.value = input
+}
+
+function handleClear(): void {
+  if (!showClear.value) return
+  model.value = undefined
+  displayed.value = ''
+  emit('clear')
+}
+
+/**
+ * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,
+ * 主要用于在输入非数字的情况下的修正处理
+ */
+function handleChange(): void {
+  emit('change', model.value)
+}
+
+const tween = new Tween(
+  { n: model.value ?? 0 },
+  {
+    onUpdate(state) {
+      const _rawInput = inputDom.value
+      if (!_rawInput) return
+      const { multiple } = props
+      // 如果存在倍数，tween.state.n 存储的是原始值，需要乘以倍数后传给 getDisplayed
+      const actualValue = multiple ? $n.mul(state.n, multiple) : state.n
+      _rawInput.value = getDisplayed(actualValue)
+    },
+    // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值
+    onComplete() {
+      const _rawInput = inputDom.value
+      if (!_rawInput) return
+      _rawInput.value = getDisplayed(model.value)
+    }
+  }
+)
+
+/**
+ * 步进后更新输入框的展示值
+ * 步长为 1 时直接展示目标值, 不播放数字滚动动画
+ * @param rawFrom 步进前的原始值（存在倍数时为除以倍数后的值）
+ * @param rawTarget 步进后的原始值（存在倍数时为除以倍数后的值）
+ */
+function updateStepDisplay(rawFrom: number, rawTarget: number): void {
+  tween.state.n = rawFrom
+
+  if (stepVal.value === 1) {
+    tween.state.n = rawTarget
+    const _rawInput = inputDom.value
+    if (!_rawInput) return
+    const { multiple } = props
+    _rawInput.value = getDisplayed(multiple ? $n.mul(rawTarget, multiple) : rawTarget)
+    return
+  }
+
+  // tween 动画在原始值上进行
+  tween.to({ n: rawTarget })
+}
+
+/** 增 */
+function increase(): void {
+  if (disabled.value) return
+  const { multiple } = props
+  const val = model.value ?? 0
+
+  if (multiple) {
+    // 如果存在倍数，先将实际值除以倍数得到原始值
+    const rawVal = $n.div(val, multiple)
+    // 在原始值基础上加步长
+    const newRawVal = $n.plus(rawVal, stepVal.value)
+    // 乘以倍数得到新的实际值
+    const target = getValidValue($n.mul(newRawVal, multiple))
+    model.value = target
+    updateStepDisplay($n.div(val, multiple), $n.div(target, multiple))
+  } else {
+    const target = getValidValue($n.plus(val, stepVal.value))
+    model.value = target
+    updateStepDisplay(val, target)
+  }
+}
+
+/** 减 */
+function decrease(): void {
+  if (disabled.value) return
+  const { multiple } = props
+  const val = model.value ?? 0
+
+  if (multiple) {
+    // 如果存在倍数，先将实际值除以倍数得到原始值
+    const rawVal = $n.div(val, multiple)
+    // 在原始值基础上减步长
+    const newRawVal = $n.minus(rawVal, stepVal.value)
+    // 乘以倍数得到新的实际值
+    const target = getValidValue($n.mul(newRawVal, multiple))
+    model.value = target
+    updateStepDisplay($n.div(val, multiple), $n.div(target, multiple))
+  } else {
+    const target = getValidValue($n.minus(val, stepVal.value))
+    model.value = target
+    updateStepDisplay(val, target)
+  }
+}
+
+function handleKeydown(e: KeyboardEvent): void {
+  if (!props.step) return
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    return increase()
+  }
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    return decrease()
+  }
+}
+
+function handleFocus(): void {
+  focused.value = true
+
+  // 如果初始值和当前设置的精度不匹配则进行精度修正
+  if (model.value === undefined) return
+  const { precision, maxPrecision, minPrecision, multiple } = props
+
+  if (multiple) {
+    // 如果存在倍数，先除以倍数得到原始值进行精度修正，再乘以倍数
+    const rawVal = $n.div(model.value, multiple)
+    const fixedRawVal = +n(rawVal).fixed(precision ?? { maxPrecision, minPrecision })
+    model.value = $n.mul(fixedRawVal, multiple)
+  } else {
+    model.value = +n(model.value).fixed(precision ?? { maxPrecision, minPrecision })
+  }
+}
+
+function handleBlur(): void {
+  focused.value = false
+  model.value = props.modelValue
+}
+</script>

package/src/components/number-input/style.scss

@@ -0,0 +1,118 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: number-input;
+
+@include m.b($root-name) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: t.use-var('spacing-xs');
+
+  @include m.e(field) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @include m.e(suffix) {
+    display: inline-flex;
+    // 拉伸让清除按钮撑满输入行高度（行高 ≥44px）
+    align-items: stretch;
+    height: 100%;
+  }
+
+  @include m.e(suffix-content) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include m.e(clear) {
+    // 清除按钮：宽度 44px、高度撑满输入行内容盒（行高 ≥44px）
+    min-width: t.use-var('touch-target');
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var('font-size-main');
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+
+    &:active {
+      color: fn.use-var(color, primary);
+    }
+
+    @include m.is(hidden) {
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  // 步进按钮组：外置于输入框右侧，各 44×44 触控热区
+  @include m.e(step) {
+    display: flex;
+    flex-shrink: 0;
+
+    button {
+      width: t.use-var('touch-target');
+      height: t.use-var('touch-target');
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: fn.use-var(border-muted);
+      background-color: fn.component-var(number-input, step-bg, fn.use-var(bg-color, middle));
+      color: fn.use-var(text-color, main);
+      font-size: t.use-var('font-size-main');
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+      transition:
+        background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+        color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+      svg {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+      }
+
+      &:active {
+        background-color: fn.use-var(color, primary, light-9);
+        color: fn.use-var(color, primary);
+      }
+
+      @include m.is(disabled) {
+        cursor: not-allowed;
+        color: fn.use-var(text-color, disabled);
+
+        &:active {
+          background-color: fn.component-var(number-input, step-bg, fn.use-var(bg-color, middle));
+        }
+      }
+
+      &:first-child {
+        border-radius: t.use-var('control-radius-default') 0 0 t.use-var('control-radius-default');
+      }
+
+      &:last-child {
+        border-left: none;
+        border-radius: 0 t.use-var('control-radius-default') t.use-var('control-radius-default') 0;
+      }
+
+      &:only-child {
+        border-radius: t.use-var('control-radius-default');
+      }
+    }
+  }
+}

package/src/components/number-input/style.ts

@@ -0,0 +1,2 @@
+import '../input/style'
+import './style.scss'

package/src/components/password-input/index.ts

@@ -0,0 +1 @@
+export { default as UPasswordInput } from './password-input.vue'

package/src/components/password-input/password-input.vue

@@ -0,0 +1,134 @@
+<template>
+  <u-input
+    :class="cls.b"
+    :model-value="passwordText"
+    v-bind="inputProps"
+    :size="size"
+    :readonly="readonly"
+    :disabled="disabled"
+    :clearable="false"
+    @native:input="handleUpdatePwd"
+    @update:model-value="!$event && handleClear()"
+  >
+    <template #suffix>
+      <span :class="cls.e('suffix')">
+        <button
+          v-if="showClear"
+          :class="cls.e('clear')"
+          type="button"
+          aria-label="清除"
+          @click.stop="handleClear"
+        >
+          <Close />
+        </button>
+        <button
+          :class="cls.e('visibility-toggle')"
+          type="button"
+          :aria-label="pwdVisible ? '隐藏密码' : '显示密码'"
+          @click.stop="toggleVisible"
+        >
+          <Hide v-if="pwdVisible" />
+          <View v-else />
+        </button>
+      </span>
+    </template>
+
+    <template #prefix v-if="slots.prefix">
+      <slot name="prefix" />
+    </template>
+  </u-input>
+</template>
+
+<script lang="ts" setup>
+import { o } from '@cat-kit/core'
+import { useFormFallbackProps } from '@veltra/compositions'
+import { Close, Hide, View } from '@veltra/icons/normal'
+import { injectFormContext } from '@veltra/utils'
+import { computed, nextTick, shallowRef } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { PasswordInputProps } from '../../types/password-input'
+import { UInput } from '../input'
+
+defineOptions({ name: 'UPasswordInput' })
+
+const props = withDefaults(defineProps<PasswordInputProps>(), {
+  clearable: false,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const slots = defineSlots<{ prefix?: () => any }>()
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const inputProps = computed(() => {
+  return o(props as Record<string, any>).pick(['disabled', 'placeholder', 'size'])
+})
+
+const cls = bem('password-input')
+
+const model = defineModel<string>()
+
+// 移动端无 hover，有值即展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && !!model.value
+})
+
+const passwordChar = '●'
+
+const handleUpdatePwd = (e: Event): void => {
+  const target = e.target as HTMLInputElement
+  const val = target.value
+  if (!val) {
+    model.value = val
+    return
+  }
+
+  // 字符从无到有
+  if (!model.value) {
+    model.value = val
+    return
+  }
+
+  const pointIndex = target.selectionStart!
+  let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!
+  if (inputChar === passwordChar) inputChar = ''
+
+  // 光标右侧字符数量（当前字符长度减去光标位置）
+  const rightLen = val.length - pointIndex
+  // 光标左侧字符数量 （当光标前的字符是刚刚输入的，则为这个字符前的所有的字符，否则为光标前的所有字符）
+  const leftLen = inputChar === '' ? pointIndex : pointIndex - 1
+
+  const leftVal = model.value.slice(0, leftLen)
+  const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)
+
+  model.value = leftVal + inputChar + rightVal
+
+  nextTick(() => {
+    target.selectionStart = pointIndex
+    target.selectionEnd = pointIndex
+  })
+}
+
+const handleClear = (): void => {
+  model.value = ''
+}
+
+const pwdVisible = shallowRef(false)
+
+const passwordText = computed<string | undefined>(() => {
+  if (pwdVisible.value) return model.value
+  return model.value ? passwordChar.repeat(model.value.length) : ''
+})
+
+const toggleVisible = () => {
+  pwdVisible.value = !pwdVisible.value
+}
+</script>

package/src/components/password-input/style.scss

@@ -0,0 +1,40 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: password-input;
+
+@include m.b($root-name) {
+  @include m.e(suffix) {
+    display: inline-flex;
+    align-items: stretch;
+    height: 100%;
+  }
+
+  @include m.e(clear, visibility-toggle) {
+    // 清除与明文切换按钮：宽度 44px、高度撑满输入行内容盒（行高 ≥44px）
+    min-width: t.use-var('touch-target');
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var('font-size-main');
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+
+    &:active {
+      color: fn.use-var(color, primary);
+    }
+  }
+}

package/src/components/password-input/style.ts

@@ -0,0 +1,2 @@
+import '../input/style'
+import './style.scss'