@veltra/mobile 1.0.0 → 1.1.0

package/src/components/tag/style.scss

@@ -0,0 +1,114 @@
+@use 'sass:map';
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use '../../styles/tokens' as t;
+
+$root-name: tag;
+
+// 密度走 --um-*：小档辅助字号 / 默认档次字号 / 大档主字号；高度 = 字号 × 2（24 / 28 / 32）
+$size-font: (
+  small: font-size-auxiliary,
+  default: font-size-secondary,
+  large: font-size-main
+);
+
+$size-padding: (
+  small: spacing-xs,
+  default: spacing-sm,
+  large: spacing-md
+);
+
+// 进入缩放动画（与 desktop tag 一致）
+@keyframes um-tag-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@include m.b($root-name) {
+  cursor: default;
+  color: fn.use-var(text-color, main);
+  background-color: fn.use-var(color, default);
+  min-width: 0;
+  border: 1px solid fn.use-var(text-color, main);
+  @include m.flex(inline-flex, flex-start, center);
+
+  animation: um-tag-zoom-in 0.25s cubic-bezier(0.23, 1, 0.32, 1);
+
+  @include m.e(content) {
+    @include m.ellipsis;
+    flex-grow: 1;
+  }
+
+  // 关闭图标：视觉尺寸跟随字号，触控热区经 ::after 扩到 44×44（不撑破标签布局）
+  @include m.e(icon-close) {
+    position: relative;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: t.use-var(touch-target);
+      height: t.use-var(touch-target);
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @include m.size using ($size) {
+    $font: t.use-var(map.get($size-font, $size));
+
+    height: calc(#{$font} * 2);
+    font-size: $font;
+    padding: 0 t.use-var(map.get($size-padding, $size));
+    border-radius: t.control-radius($size);
+
+    @include m.bem($root-name, icon-close) {
+      margin-left: calc(#{t.use-var(spacing-xs)} / 2);
+
+      // 视觉尺寸跟随标签档位字号（覆盖 UIcon 的 16px 默认字号）
+      &.um-icon {
+        font-size: $font;
+      }
+    }
+
+    @include m.is(round) {
+      // 圆角半径 = 高度的一半 = 字号
+      border-radius: $font;
+    }
+  }
+
+  @include m.is(dark) {
+    border-color: fn.use-var(color, default);
+  }
+
+  // 颜色样式
+  @each $type, $_ in vars.$color-types {
+    @include m.m(color-#{$type}) {
+      color: fn.component-var(tag, #{$type}-color, fn.use-var(color, $type));
+      border-color: fn.component-var(tag, #{$type}-border, fn.use-var(color, $type));
+      background-color: fn.component-var(tag, #{$type}-bg, fn.use-var(color, $type, light-9));
+
+      @include m.is(dark) {
+        color: fn.component-var(tag, #{$type}-dark-color, fn.use-var(text-color, white));
+        background-color: fn.component-var(tag, #{$type}-dark-bg, fn.use-var(color, $type));
+      }
+
+      // 移动端无 hover，按压时给关闭图标触控反馈
+      @include m.bem($root-name, icon-close) {
+        &:active {
+          color: fn.use-var(color, $type);
+        }
+      }
+    }
+  }
+}

package/src/components/tag/style.ts

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

package/src/components/tag/tag.vue

@@ -0,0 +1,49 @@
+<template>
+  <span :class="className">
+    <span :class="cls.e('content')">
+      <slot />
+    </span>
+
+    <UIcon v-if="closable" :class="cls.e('icon-close')" @click.stop="handleClose">
+      <Close />
+    </UIcon>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { Close } from '@veltra/icons/normal'
+import { injectFormContext } from '@veltra/utils'
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { TagEmits, TagProps } from '../../types/tag'
+import { UIcon } from '../icon'
+
+defineOptions({ name: 'UTag' })
+
+const cls = bem('tag')
+
+const props = defineProps<TagProps>()
+
+const emit = defineEmits<TagEmits>()
+
+// 表单内继承表单尺寸，与 desktop tag 行为一致
+const { formProps } = injectFormContext()
+
+const size = computed(() => props.size ?? formProps?.size ?? 'default')
+
+const handleClose = () => {
+  emit('close')
+}
+
+const className = computed(() => {
+  const { type } = props
+  return [
+    cls.b,
+    cls.m(size.value),
+    type && cls.m('color-' + type),
+    bem.is('round', props.round),
+    bem.is('dark', props.dark)
+  ]
+})
+</script>

package/src/components/text/index.ts

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

package/src/components/text/style.scss

@@ -0,0 +1,63 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+// 角色字号走 --um-*：正文（content）主字号 16px，标题层级靠字重与颜色区分（移动端惯例），
+// 辅助说明降为 12px
+$role-size: (
+  main-title: (
+    font-size: calc(#{t.use-var(font-size-main)} * 1.25),
+    font-weight: 700,
+    color: fn.use-var(text-color, title)
+  ),
+  title: (
+    font-size: t.use-var(font-size-main),
+    font-weight: 600,
+    color: fn.use-var(text-color, main)
+  ),
+  sub-title: (
+    font-size: t.use-var(font-size-main),
+    font-weight: 500,
+    color: fn.use-var(text-color, placeholder)
+  ),
+  content: (
+    font-size: t.use-var(font-size-main),
+    font-weight: 400,
+    color: fn.use-var(text-color, second)
+  ),
+  additional: (
+    font-size: t.use-var(font-size-auxiliary),
+    font-weight: 400,
+    color: fn.use-var(text-color, assist)
+  )
+);
+
+@include m.b(text) {
+  margin: 0;
+  // 移动端阅读密度：行高比桌面（1.3）略放宽
+  line-height: 1.5;
+
+  @each $role, $styles in $role-size {
+    @include m.is(#{$role}) {
+      @each $prop, $val in $styles {
+        #{$prop}: $val;
+      }
+    }
+  }
+
+  @include m.is(italic) {
+    font-style: italic;
+  }
+
+  @include m.is(bold) {
+    font-weight: bold;
+  }
+
+  // 高亮：去掉浏览器默认黄底，改走主题 warning 色
+  mark {
+    padding: 0;
+    background-color: transparent;
+    color: fn.use-var(color, warning);
+    font-weight: 600;
+  }
+}

package/src/components/text/style.ts

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

package/src/components/text/text.vue

@@ -0,0 +1,63 @@
+<template>
+  <p :class="classList" :style="style">
+    <template v-for="(chunk, i) of chunks" :key="i">
+      <mark v-if="chunk.highlight">{{ chunk.text }}</mark>
+      <template v-else>{{ chunk.text }}</template>
+    </template>
+  </p>
+</template>
+
+<script lang="ts" setup>
+import { getHighlightChunks, isTextNode, withUnit } from '@veltra/utils'
+import { type CSSProperties, computed, useSlots } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { TextProps } from '../../types/text'
+
+// Text 是 Vue 保留组件名（vue/no-reserved-component-names），与 desktop 一致带 U 前缀
+defineOptions({ name: 'UText' })
+
+const {
+  as = 'content',
+  fontSize,
+  deleted,
+  underline,
+  bold,
+  italic,
+  highlight
+} = defineProps<TextProps>()
+
+const cls = bem('text')
+
+const classList = computed(() => {
+  return [cls.b, bem.is(as), bem.is('bold', bold), bem.is('italic', italic)]
+})
+
+const style = computed<CSSProperties>(() => {
+  const style: CSSProperties = { fontSize: withUnit(fontSize, 'px') }
+
+  if (deleted) {
+    style.textDecoration = 'line-through'
+  }
+  if (underline) {
+    style.textDecoration = 'underline'
+  }
+
+  return style
+})
+
+const slots = useSlots()
+
+/** 只渲染文本节点；传 highlight 时按关键词切分为高亮块 */
+const chunks = computed(() => {
+  const text = (slots.default?.() ?? [])
+    .filter(isTextNode)
+    .map((node) => String(node.children))
+    .join('')
+
+  if (!text) return []
+  if (!highlight) return [{ text }]
+
+  return getHighlightChunks(text, [highlight].flat())
+})
+</script>

package/src/components/textarea/index.ts

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

package/src/components/textarea/style.scss

@@ -0,0 +1,124 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: textarea;
+
+@include m.b($root-name) {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border: fn.use-var(border-muted);
+  box-shadow: fn.use-var(shadow, emboss);
+  background-color: fn.component-var(textarea, 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;
+  vertical-align: middle;
+
+  @include m.size using ($size) {
+    border-radius: t.control-radius($size);
+
+    @include m.bem($root-name, native) {
+      // 行高、内边距走移动端 token；右侧让位计数/清除 44px 热区
+      padding: t.spacing($size) t.use-var('touch-target') t.spacing($size) t.spacing($size);
+      // 触控热区：文本域高度不小于 44px；字号 16px（iOS 聚焦防视口缩放）
+      min-height: max(t.control-height($size), t.use-var('touch-target'));
+      font-size: t.use-var('font-size-main');
+      line-height: t.use-var('text-line-height');
+    }
+  }
+
+  @include m.e(native) {
+    display: block;
+    box-sizing: border-box;
+    color: fn.use-var(text-color, main);
+    outline: none;
+    border: none;
+    background-color: transparent;
+    font-family: fn.use-var(font-family);
+    width: 100%;
+    padding: 0;
+    // 触屏没有拖拽手柄，一律不缩放（resize prop 仅保留 API 兼容）
+    resize: none;
+    overflow: auto;
+    -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.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
+  @include m.is(disabled) {
+    background-color: fn.use-var(color, disabled);
+    box-shadow: none;
+
+    @include m.bem($root-name, native) {
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.m(count) {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    // 计数为展示元素：占位 44px 热区、不拦截触摸
+    min-width: t.use-var('touch-target');
+    min-height: t.use-var('touch-target');
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding: 0 t.use-var('spacing-sm') t.use-var('spacing-xs') 0;
+    font-size: t.use-var('font-size-secondary');
+    color: fn.use-var(text-color, placeholder);
+    pointer-events: none;
+  }
+
+  @include m.m(clear) {
+    // 清空按钮固定右上角，44×44 触控热区
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: t.use-var('touch-target');
+    height: t.use-var('touch-target');
+    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.m(readonly) {
+    display: inline-block;
+    white-space: pre-wrap;
+    color: fn.use-var(text-color, main);
+  }
+}

package/src/components/textarea/style.ts

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

package/src/components/textarea/textarea.vue

@@ -0,0 +1,121 @@
+<template>
+  <div v-if="!readonly" :class="textareaClass">
+    <textarea
+      :class="cls.e('native')"
+      :placeholder="placeholder"
+      v-model="model"
+      :maxlength="maxlength"
+      :rows="rows"
+      :cols="cols"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      :disabled="disabled"
+      :readonly="nativeReadonly"
+      ref="textareaRef"
+    />
+    <span v-if="props.maxlength && props.showCount" :class="cls.m('count')">
+      {{ model?.length ?? 0 }}/{{ props.maxlength }}
+    </span>
+    <button
+      v-if="props.clearable && model && !disabled"
+      :class="cls.m('clear')"
+      type="button"
+      aria-label="清空"
+      @click.stop="handleClear"
+    >
+      <Close />
+    </button>
+  </div>
+
+  <span v-else :class="cls.m('readonly')">
+    {{ model || FORM_EMPTY_CONTENT }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { useFocus, useFormFallbackProps } from '@veltra/compositions'
+import { Close } from '@veltra/icons/normal'
+import { FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import type { ComponentSize } from '@veltra/utils'
+import { computed, ref, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { TextareaEmits, TextareaProps } from '../../types/textarea'
+import { calcTextareaHeight } from './utils'
+
+defineOptions({ name: 'UTextarea' })
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  placeholder: '请输入',
+  resize: true,
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined,
+  autosize: false
+})
+
+const cls = bem('textarea')
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default' as ComponentSize,
+  disabled: false,
+  readonly: false
+})
+
+const emit = defineEmits<TextareaEmits>()
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const model = defineModel<string>()
+
+const { focus, handleBlur, handleFocus } = useFocus((focused) => {
+  focused ? emit('focus') : emit('blur')
+})
+
+const textareaClass = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('resize-none', !props.resize),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value),
+    bem.is('focus', focus.value),
+    cls.m('more')
+  ]
+})
+
+const handleInput = (e: Event) => {
+  const value = (e.target as HTMLTextAreaElement).value
+  if (value.length > props.maxlength!) {
+    // 如果输入的字符数超过了最大长度，截取字符串到最大长度
+    const truncatedValue = value.slice(0, props.maxlength)
+    emit('update:modelValue', truncatedValue)
+  } else {
+    // 如果没有超过最大长度，则正常更新模型值
+    emit('update:modelValue', value)
+  }
+}
+
+const handleClear = () => {
+  model.value = ''
+  emit('clear')
+}
+
+const handleChange = (e: Event) => {
+  emit('change', (e.target as HTMLTextAreaElement).value)
+}
+
+watch(
+  [model, textareaRef],
+  ([model, textareaRef]) => {
+    if (!textareaRef) return
+    if (!props.autosize) return
+    calcTextareaHeight(textareaRef)
+  },
+  { immediate: true }
+)
+</script>

package/src/components/textarea/utils.ts

@@ -0,0 +1,11 @@
+import { setStyles } from '@veltra/utils'
+import { nextTick } from 'vue'
+
+export function calcTextareaHeight(el: HTMLTextAreaElement): void {
+  setStyles(el, { height: 'auto' })
+  nextTick(() => {
+    const { scrollHeight } = el
+
+    setStyles(el, { overflow: 'hidden', height: scrollHeight + 'px' })
+  })
+}

package/src/components/time-picker/index.ts

@@ -0,0 +1 @@
+export { default as UTimePicker } from './time-picker.vue'