@veltra/mobile 1.0.0 → 1.1.0

package/src/components/form-item/style.scss

@@ -0,0 +1,121 @@
+@use 'pkg:@veltra/styles/mixins' as m with (
+  $namespace: um
+);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: form-item;
+
+// 嵌入控件区后呈行式形态的控件类（与 form-item 联动的表单控件名单）
+$form-controls: (
+  '.um-input',
+  '.um-number-input',
+  '.um-password-input',
+  '.um-select',
+  '.um-multi-select',
+  '.um-cascade',
+  '.um-date-picker',
+  '.um-time-picker',
+  '.um-textarea',
+  '.um-uploader'
+);
+
+@include m.b($root-name) {
+  // 列表行式：label 左、控件区占右侧剩余宽度，整行热区 ≥44px（行高 48px）
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: t.use-var('form-row-height');
+  padding: 0 t.use-var('spacing-lg');
+  background-color: fn.use-var(bg-color);
+
+  // 相邻行细分隔线
+  & + & {
+    border-top: fn.use-var(border-muted);
+  }
+
+  @include m.e(label) {
+    flex-shrink: 0;
+    // 超长 label 封顶控件区一半宽度，避免挤压输入区
+    max-width: 60%;
+    color: fn.use-var(text-color, main);
+    font-size: t.use-var('font-size-main');
+    line-height: t.use-var('text-line-height');
+    padding-right: t.use-var('spacing-md');
+
+    @include m.flex($align: center);
+
+    @include m.is(required) {
+      &::before {
+        content: '*';
+        padding-right: 2px;
+        color: fn.use-var(color, danger);
+      }
+    }
+  }
+
+  @include m.e(wrapper) {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  @include m.e(content) {
+    @include m.flex($wrap: wrap, $align: center);
+    width: 100%;
+  }
+
+  // 错误提示按移动端惯例展示在行内下方：出现时才占位，长文案允许换行
+  @include m.e(error-text) {
+    display: block;
+    margin-top: t.use-var('spacing-xs');
+    color: fn.use-var(color, danger);
+    font-size: t.use-var('font-size-secondary');
+    line-height: 1.4;
+  }
+
+  // label 在控件上方：长控件（文本域等）纵向堆叠
+  @include m.is(label-top) {
+    flex-direction: column;
+    align-items: stretch;
+    padding: t.use-var('spacing-sm') t.use-var('spacing-lg');
+
+    @include m.bem($root-name, label) {
+      max-width: none;
+      padding: 0 0 t.use-var('spacing-xs');
+    }
+  }
+}
+
+// 行式嵌入态：卡片行自身就是控件容器，嵌入控件去边框、透明底、占满控件区。
+// 块级限定选择器（三层）确保覆盖控件自身尺寸档与聚焦态，不受样式引入顺序影响
+.um-form-item .um-form-item__content {
+  #{$form-controls} {
+    height: auto;
+    min-height: t.use-var('touch-target');
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  // 文本域嵌入后与输入行左缘对齐：去原生左侧内边距，纵向保留行内呼吸空间
+  .um-textarea__native {
+    padding-left: 0;
+  }
+
+  .um-number-input__step button {
+    border-color: transparent;
+    background-color: transparent;
+  }
+}
+
+.#{$root-name}-tips-enter-from,
+.#{$root-name}-tips-leave-to {
+  opacity: 0;
+}
+
+.#{$root-name}-tips-enter-active,
+.#{$root-name}-tips-leave-active {
+  transition: opacity fn.use-var(transition, fast) fn.use-var(transition, ease);
+}

package/src/components/form-item/style.ts

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

package/src/components/form-item/validate.ts

@@ -0,0 +1,131 @@
+import { isEmpty, o } from '@cat-kit/core'
+import type { PresetRule, Undef, ValidateRule } from '@veltra/utils'
+
+const presetRules: Record<PresetRule, (value: string) => string | undefined> = {
+  email(v) {
+    const re = /^([\w_-]+)@([\w-]+[.]?)*[\w]+\.[a-zA-Z]{2,10}$/
+    if (!re.test(v)) {
+      return '邮箱格式不正确'
+    }
+  },
+  phone(v) {
+    const re = /^\d{11}$/
+    if (!re.test(v)) {
+      return '手机号格式不正确'
+    }
+  },
+  num(v) {
+    const re = /^\d+$/
+    if (!re.test(v)) {
+      return '数字格式不正确'
+    }
+  },
+  url(v) {
+    const re = /^(ftp|https?):\/\/([\w_-]+)\.([\w-]+[.]?)*[\w]+\.[a-zA-Z]{2,10}(.*)/
+    if (!re.test(v)) {
+      return '链接格式不正确'
+    }
+  },
+
+  idCard(v) {
+    const re = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
+    if (!re.test(v)) {
+      return '身份证格式不正确'
+    }
+  }
+}
+
+/** 预设规则 */
+const ruleTypes = {
+  required(value: any, required: ValidateRule['required']): Undef<string> {
+    if (required === false) return
+
+    const errMsg = typeof required === 'string' ? required : '该项不能为空'
+    if (isEmpty(value)) return errMsg
+
+    if (Array.isArray(value) && !value.length) return errMsg
+    if (typeof value === 'string' && !value) return errMsg
+  },
+  min(value: any, rule: ValidateRule['min']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项必须大于等于${_rule}`
+    if (typeof value !== 'number') return `${value}不是一个数字`
+    if (value < _rule) return errMsg
+  },
+  max(value: any, rule: ValidateRule['max']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项必须小于等于${_rule}`
+    if (typeof value !== 'number') return `${value}不是一个数字`
+    if (value > _rule) return errMsg
+  },
+
+  minLen(value: any, rule: ValidateRule['minLen']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项长度必须大于等于${_rule}`
+    if (!Array.isArray(value) && typeof value !== 'string') return `${value}不是一个字符串或数组`
+    if (value.length < _rule) return errMsg
+  },
+  maxLen(value: any, rule: ValidateRule['maxLen']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项长度必须小于等于:${_rule}`
+    if (!Array.isArray(value) && typeof value !== 'string') return `${value}不是一个字符串或数组`
+    if (value.length > _rule) return errMsg
+  },
+  match(value: any, rule: ValidateRule['match']): Undef<string> {
+    if (isEmpty(value) || value === '') return
+    if (typeof rule === 'string') {
+      if (!rule) return
+      rule = new RegExp(rule)
+    }
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项不匹配正则:${_rule}`
+    if (typeof value !== 'string') return `${value}不是一个字符串`
+    if (!_rule.test(value)) return errMsg
+  },
+  preset(value: any, rule: ValidateRule['preset']): Undef<string> {
+    if (isEmpty(value) || value === '' || !rule) return
+    if (typeof value !== 'string') return `${value}不是一个字符串`
+    const ruleValidator = presetRules[rule]
+    return ruleValidator(value)
+  }
+}
+
+export async function validateField(
+  formData: Record<string, any>,
+  field: string,
+  rules: ValidateRule
+): Promise<Undef<string>> {
+  const value = o(formData).get(field)
+
+  if (!rules) return
+
+  const { validator, required, ...normalRules } = rules
+
+  // 必填要先去校验
+  if (required) {
+    const err = ruleTypes.required(value, required)
+    if (err) return err
+  }
+
+  // 校验规则
+  for (const ruleKey in normalRules) {
+    const validate = ruleTypes[ruleKey as keyof typeof ruleTypes]
+    if (!validate) continue
+
+    const err = validate(value, normalRules[ruleKey])
+
+    if (err) return err
+  }
+
+  // 自定义校验最后校验
+  if (validator) {
+    const err = await validator(value, formData)
+    if (err) return err
+  }
+
+  return
+}

package/src/components/icon/icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <i :class="cls.b" :style="style">
+    <slot></slot>
+  </i>
+</template>
+
+<script lang="ts" setup>
+import { withUnit } from '@veltra/utils'
+import { type CSSProperties, computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { IconProps } from '../../types/icon'
+
+defineOptions({ name: 'UIcon' })
+
+const props = defineProps<IconProps>()
+
+const cls = bem('icon')
+
+const style = computed<CSSProperties>(() => {
+  return { fontSize: withUnit(props.size, 'px') }
+})
+</script>

package/src/components/icon/index.ts

@@ -0,0 +1 @@
+export { default as UIcon } from './icon.vue'

package/src/components/icon/style.scss

@@ -0,0 +1,37 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use '../../styles/tokens' as t;
+
+@keyframes um-icon-rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@include m.b(icon) {
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  @include m.flex(inline-flex, center, center);
+  position: relative;
+  fill: currentColor;
+  // 默认尺寸对齐移动端 16px 主字号体系；显式 size 经内联 font-size 覆盖
+  font-size: t.use-var(font-size-main);
+  color: inherit;
+  vertical-align: middle;
+  user-select: none;
+  will-change: transform;
+
+  // 加载转圈
+  @include m.is(loading) {
+    transform-origin: center;
+    animation: um-icon-rotating 2s linear infinite;
+  }
+
+  svg {
+    height: 1em;
+    width: 1em;
+  }
+}

package/src/components/icon/style.ts

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

package/src/components/input/index.ts

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

package/src/components/input/input.vue

@@ -0,0 +1,187 @@
+<template>
+  <div v-if="!readonly" v-bind="rootAttrs" :class="inputClass">
+    <span v-if="$slots.prefix || prefix" :class="prefixClass" @click="handlePrefixClick">
+      {{ prefix }}
+      <slot name="prefix"></slot>
+    </span>
+
+    <input
+      :class="cls.e('native')"
+      :placeholder="props.placeholder"
+      type="text"
+      :value="model"
+      v-bind="nativeAttrs"
+      @input="handleInput"
+      @change="handleChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @compositionstart="handleCompositionStart"
+      @compositionend="handleCompositionEnd"
+      autocomplete="off"
+      ref="el"
+      :disabled="disabled"
+      :readonly="nativeReadonly"
+    />
+
+    <span :class="suffixClass" v-if="hasSuffix">
+      <button
+        v-if="showClear"
+        :class="cls.e('clear')"
+        type="button"
+        aria-label="清除"
+        @click.stop="clearModelValue"
+        key="clear"
+      >
+        <Close />
+      </button>
+
+      <span v-else :class="cls.e('suffix-content')" @click="handleSuffixClick" key="suffix">
+        {{ suffix }}
+        <slot name="suffix"></slot>
+      </span>
+    </span>
+  </div>
+
+  <template v-else>
+    {{ generateModel || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { o } from '@cat-kit/core'
+import { useFocus, useFormFallbackProps } from '@veltra/compositions'
+import { Close } from '@veltra/icons/normal'
+import { FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import { computed, getCurrentInstance, nextTick, shallowRef, useAttrs } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { InputEmits, InputProps, _InputExposed } from '../../types/input'
+
+defineOptions({ name: 'UInput', inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputProps>(), {
+  placeholder: '请输入',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<InputEmits>()
+
+const model = defineModel<string>()
+
+const inst = getCurrentInstance()
+
+const cls = bem('input')
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const { focus, handleBlur, handleFocus } = useFocus((focused) => {
+  if (focused) {
+    emit('focus')
+  } else {
+    emit('blur')
+  }
+})
+
+/**
+ * 透传到原生 input 的原生属性（输入约束与移动端键盘提示，如 inputmode 弹出数字键盘、
+ * maxlength 限制长度），其余属性仍落在根元素上，不构成新的公开 prop
+ */
+const NATIVE_INPUT_ATTRS = ['inputmode', 'enterkeyhint', 'maxlength'] as const
+
+const attrs = useAttrs()
+
+const nativeAttrs = computed(() => o(attrs as Record<string, any>).pick([...NATIVE_INPUT_ATTRS]))
+
+const rootAttrs = computed(() => o(attrs as Record<string, any>).omit([...NATIVE_INPUT_ATTRS]))
+
+const inputClass = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value),
+    bem.is('focus', focus.value)
+  ]
+})
+
+const prefixClass = [cls.e('prefix'), bem.is('clickable', !!inst?.vnode.props?.['onPrefix:click'])]
+
+const suffixClass = [cls.e('suffix'), bem.is('clickable', !!inst?.vnode.props?.['onSuffix:click'])]
+
+let isComposing = false
+
+function handleCompositionStart() {
+  isComposing = true
+}
+
+function handleCompositionEnd(e: Event) {
+  isComposing = false
+  handleInput(e)
+}
+
+const handleInput = (e: Event) => {
+  if (isComposing) return
+
+  const inputVal = (e.target as HTMLInputElement).value
+  emit('native:input', e)
+
+  const valid = props.pattern?.test(inputVal) ?? true
+
+  if (!valid) return
+  model.value = inputVal
+}
+
+const handlePrefixClick = () => {
+  emit('prefix:click', model.value)
+}
+
+const handleSuffixClick = () => {
+  emit('suffix:click', model.value)
+}
+
+const clearModelValue = () => {
+  model.value = ''
+  emit('clear')
+}
+
+// 移动端无 hover，有值即展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && !!model.value
+})
+
+const hasSuffixContent = computed(() => {
+  return !!inst?.slots.suffix || !!props.suffix
+})
+
+const hasSuffix = computed(() => {
+  return hasSuffixContent.value || showClear.value
+})
+
+const handleChange = (e: Event) => {
+  const target = e.target as HTMLInputElement
+
+  const valid = props.pattern?.test(target.value) ?? true
+
+  if (valid) {
+    emit('change', target.value)
+  } else {
+    nextTick(() => {
+      target.value = model.value ?? ''
+    })
+  }
+}
+
+const el = shallowRef<HTMLInputElement>()
+
+const generateModel = computed(() => {
+  if (!model.value) return ''
+
+  return `${props.prefix ?? ''}${model.value}${props.suffix ?? ''}`
+})
+
+defineExpose<_InputExposed>({ el })
+</script>

package/src/components/input/style.scss

@@ -0,0 +1,121 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: input;
+
+@include m.b($root-name) {
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 1;
+  border: fn.use-var(border-muted);
+  box-shadow: fn.use-var(shadow, emboss);
+  background-color: fn.component-var(input, bg, fn.use-var(bg-color, middle));
+  transition:
+    border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
+  overflow: hidden;
+  width: 100%;
+
+  @include m.flex($display: inline-flex);
+
+  @include m.size using ($size) {
+    // 密度全部取移动端 token：高度不小于 44px 触控热区，字号 16px（iOS 聚焦防缩放）
+    height: max(t.control-height($size), t.use-var('touch-target'));
+    border-radius: t.control-radius($size);
+    padding: 0 t.use-var('spacing-md');
+
+    @include m.bem($root-name, native) {
+      font-size: t.use-var('font-size-main');
+      line-height: t.use-var('text-line-height');
+    }
+  }
+
+  // 聚焦态：移动端高亮惯例（主色描边 + 焦点环）
+  @include m.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
+  @include m.e(native) {
+    // 清除默认样式
+    outline: none;
+    border: none;
+    background-color: transparent;
+    width: 100%;
+    flex-grow: 1;
+    height: 100%;
+    color: fn.use-var(text-color, main);
+    font-family: fn.use-var(font-family);
+    padding: 0;
+    -webkit-tap-highlight-color: transparent;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+
+    &:disabled {
+      opacity: 1;
+      -webkit-text-fill-color: fn.use-var(text-color, disabled);
+    }
+  }
+
+  @include m.e(prefix, suffix) {
+    font-size: t.use-var('font-size-main');
+    color: fn.use-var(text-color, main);
+    flex-shrink: 0;
+    height: 100%;
+    text-align: center;
+    @include m.flex(inline-flex, $justify: center, $align: center);
+
+    // 前后缀可点击时保证 44px 宽热区
+    @include m.is(clickable) {
+      min-width: t.use-var('touch-target');
+      cursor: pointer;
+    }
+  }
+
+  @include m.e(clear) {
+    // 清除按钮：宽度 44px、高度撑满输入行内容盒（行高 ≥44px）
+    min-width: t.use-var('touch-target');
+    align-self: stretch;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    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.e(suffix-content) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    // 撑满前后缀区高度，slot 内的清除/切换按钮（number-input 等）才能拉伸满输入行
+    align-self: stretch;
+  }
+
+  @include m.is(disabled) {
+    background-color: fn.use-var(color, disabled);
+    box-shadow: none;
+
+    @include m.bem($root-name, native) {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/input/style.ts

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

package/src/components/list/index.ts

@@ -0,0 +1,3 @@
+export { default as UList } from './list.vue'
+
+export { default as UListItem } from './list-item.vue'

package/src/components/list/list-item.vue

@@ -0,0 +1,20 @@
+<template>
+  <li :class="itemClass">
+    <slot />
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue'
+
+import { bem } from '../../shared/bem'
+
+defineOptions({ name: 'UListItem' })
+
+const cls = bem('list-item')
+
+// 绑定了点击监听（如 @click）即视为可点行：加按压态反馈，点击由 attrs 透传到 li
+const attrs = useAttrs()
+
+const itemClass = computed(() => [cls.b, bem.is('clickable', 'onClick' in attrs)])
+</script>

package/src/components/list/list.vue

@@ -0,0 +1,20 @@
+<template>
+  <ul :class="[cls.b, cls.m(size)]">
+    <slot v-for="(item, index) of data" v-bind="{ item, index }" />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { ListProps } from '../../types/list'
+
+defineOptions({ name: 'UList' })
+
+const props = withDefaults(defineProps<ListProps>(), {})
+
+const cls = bem('list')
+
+const size = computed(() => props.size ?? 'default')
+</script>