@veltra/mobile 1.0.0 → 1.1.0

package/src/components/time-picker/style.scss

@@ -0,0 +1,216 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: time-picker;
+
+@include m.b($root-name) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  gap: t.use-var('spacing-sm');
+  padding: 0 t.use-var('spacing-md');
+  border: fn.use-var(border);
+  border-radius: t.control-radius(default);
+  background-color: fn.use-var(bg-color, top);
+  color: fn.use-var(text-color, main);
+  font-size: t.use-var('font-size-main');
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  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);
+
+  // 触控热区：任何尺寸的可点击区域不小于 44×44，高度走移动端密度 token
+  @include m.size using ($size) {
+    min-height: max(t.control-height($size), t.use-var('touch-target'));
+  }
+
+  &:active {
+    border-color: fn.use-var(color, primary);
+  }
+
+  &:focus-visible {
+    box-shadow: fn.use-var(focus-ring);
+  }
+
+  @include m.is(active) {
+    border-color: fn.use-var(color, primary);
+  }
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+    color: fn.use-var(text-color, disabled);
+    background-color: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(value) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+
+    @include m.is(placeholder) {
+      color: fn.use-var(text-color, placeholder);
+    }
+  }
+
+  @include m.e(icons) {
+    display: inline-flex;
+    align-items: center;
+    align-self: stretch;
+    flex-shrink: 0;
+  }
+
+  @include m.e(clear) {
+    // 清除热区 ≥44×44（高度受行高约束，用外扩补足）
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: t.use-var('touch-target');
+    min-height: t.use-var('touch-target');
+    // 热区外扩量（spacing-sm）：补偿清除钮居中图标的两侧留白，不挤压视觉边距
+    margin: calc(-1 * #{t.use-var('spacing-sm')}) calc(-1 * #{t.use-var('spacing-sm')}) calc(-1 * #{t.use-var('spacing-sm')}) 0;
+    padding: 0;
+    border: none;
+    background: none;
+    font-size: t.use-var('font-size-main');
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    &:active {
+      color: fn.use-var(text-color, title);
+    }
+  }
+
+  @include m.e(icon) {
+    display: inline-flex;
+    align-items: center;
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var('font-size-main');
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  // 面板头部操作（BottomSheet header 槽位）
+  @include m.e(cancel) {
+    // 操作热区 ≥44×44
+    display: inline-flex;
+    align-items: center;
+    min-height: t.use-var('touch-target');
+    padding: 0 t.use-var('spacing-sm');
+    border: none;
+    background: none;
+    font-size: t.use-var('font-size-main');
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+
+    &:active {
+      color: fn.use-var(text-color, title);
+    }
+  }
+
+  @include m.e(title) {
+    flex: 1;
+    min-width: 0;
+    text-align: center;
+    font-size: t.use-var('font-size-title');
+    font-weight: 600;
+    color: fn.use-var(text-color, title);
+    @include m.ellipsis;
+  }
+
+  @include m.e(confirm) {
+    // 操作热区 ≥44×44
+    display: inline-flex;
+    align-items: center;
+    min-height: t.use-var('touch-target');
+    padding: 0 t.use-var('spacing-sm');
+    border: none;
+    background: none;
+    font-size: t.use-var('font-size-main');
+    font-weight: 600;
+    color: fn.use-var(color, primary);
+    cursor: pointer;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  // 底部滚轮面板
+  @include m.e(wheel) {
+    position: relative;
+    display: flex;
+    gap: t.use-var('spacing-sm');
+  }
+
+  @include m.e(highlight) {
+    // 中心选中行高亮带：覆盖三列、不拦截触摸
+    position: absolute;
+    top: calc(50% - 22px);
+    left: 0;
+    right: 0;
+    height: 44px;
+    border-radius: t.control-radius(default);
+    background-color: fn.use-var(color, primary, light-9);
+    pointer-events: none;
+  }
+
+  @include m.e(column) {
+    // 提到高亮带之上：highlight 画在普通流元素上方，不透明浅底会盖住数字，
+    // 列自身无背景，提升层级后文字浮在带上、带透出作选中底色
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    min-width: 0;
+    height: 220px;
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  @include m.e(spacer) {
+    height: 88px;
+  }
+
+  @include m.e(item) {
+    // 滚轮行高与脚本 ITEM_HEIGHT 常量耦合（spacer/列高/highlight 同源），不取 token
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    scroll-snap-align: center;
+    color: fn.use-var(text-color, main);
+    // 滚轮主内容走标题档字号（18px），与面板标题同级
+    font-size: t.use-var('font-size-title');
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    @include m.is(selected) {
+      color: fn.use-var(text-color, title);
+      font-weight: 600;
+    }
+
+    @include m.is(disabled) {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+import '../_internal/bottom-sheet/style'
+import './style.scss'

package/src/components/time-picker/time-picker.vue

@@ -0,0 +1,263 @@
+<template>
+  <!-- 只读态：纯展示 -->
+  <template v-if="readonly">{{ displayedValue || FORM_EMPTY_CONTENT }}</template>
+
+  <div
+    v-else
+    v-bind="$attrs"
+    :class="[cls.b, cls.m(size), bem.is('disabled', disabled), bem.is('active', sheetVisible)]"
+    :aria-expanded="sheetVisible"
+    aria-haspopup="dialog"
+    @click="handleTriggerClick"
+  >
+    <span :class="[cls.e('value'), bem.is('placeholder', !displayedValue)]">
+      {{ displayedValue || placeholder }}
+    </span>
+
+    <span :class="cls.e('icons')">
+      <button
+        v-if="showClear"
+        :class="cls.e('clear')"
+        type="button"
+        aria-label="清除"
+        @click.stop="handleClear"
+      >
+        <Close />
+      </button>
+      <span v-else :class="cls.e('icon')" aria-hidden="true">
+        <Time />
+      </span>
+    </span>
+  </div>
+
+  <!-- 底部滚轮面板（复用 BottomSheet 弹层基座，内部实现不进公开导出）：取消/确定，滚动结果暂存至确认 -->
+  <BottomSheet v-model:visible="sheetVisible">
+    <template #header>
+      <button :class="cls.e('cancel')" type="button" @click="sheetVisible = false">取消</button>
+      <span :class="cls.e('title')">{{ placeholder }}</span>
+      <button :class="cls.e('confirm')" type="button" @click="handleConfirm">确定</button>
+    </template>
+
+    <div :class="cls.e('wheel')">
+      <div
+        v-for="col of columns"
+        :key="col.name"
+        :ref="setColumnRef(col.name)"
+        :class="cls.e('column')"
+        role="listbox"
+        :aria-label="unitLabels[col.name]"
+        @scroll.passive="handleScroll(col.name)"
+      >
+        <div :class="cls.e('spacer')" aria-hidden="true"></div>
+        <div
+          v-for="item of col.values"
+          :key="item.value"
+          :class="[
+            cls.e('item'),
+            bem.is('selected', staged[col.name] === item.value),
+            bem.is('disabled', item.disabled)
+          ]"
+          role="option"
+          :aria-selected="staged[col.name] === item.value"
+          @click="handleSelect(col.name, item)"
+        >
+          {{ pad(item.value) }}
+        </div>
+        <div :class="cls.e('spacer')" aria-hidden="true"></div>
+      </div>
+      <div :class="cls.e('highlight')" aria-hidden="true"></div>
+    </div>
+  </BottomSheet>
+</template>
+
+<script lang="ts" setup>
+import { date, Dater } from '@cat-kit/core'
+import { useFormFallbackProps } from '@veltra/compositions'
+import { Close, Time } from '@veltra/icons/normal'
+import { FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import { computed, nextTick, onBeforeUnmount, shallowRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { TimePickerEmits, TimePickerProps } from '../../types/time-picker'
+import { BottomSheet } from '../_internal/bottom-sheet'
+
+defineOptions({ name: 'UTimePicker', inheritAttrs: false })
+
+const props = withDefaults(defineProps<TimePickerProps>(), {
+  placeholder: '选择时间',
+  dataType: 'string',
+  disabled: undefined,
+  readonly: undefined,
+  clearable: true
+})
+
+const emit = defineEmits<TimePickerEmits>()
+
+const cls = bem('time-picker')
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const formatStr = computed(() => props.format ?? 'HH:mm:ss')
+
+const currentTime = shallowRef<Dater>()
+
+const sheetVisible = shallowRef(false)
+
+function parseModelValue(val?: string | number | Date): Dater | undefined {
+  if (val == null || val === '') return undefined
+  if (val instanceof Date || typeof val === 'number') {
+    const d = date(val)
+    return isNaN(d.timestamp) ? undefined : d
+  }
+  const parsed = Dater.parse(val, props.valueFormat ?? formatStr.value)
+  if (!isNaN(parsed.timestamp)) return parsed
+  const fallback = date(val)
+  return isNaN(fallback.timestamp) ? undefined : fallback
+}
+
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    currentTime.value = parseModelValue(modelValue)
+  },
+  { immediate: true }
+)
+
+const displayedValue = computed(() => currentTime.value?.format(formatStr.value) ?? '')
+
+/** 移动端无 hover：有值且可清除即展示清除按钮 */
+const showClear = computed(() => props.clearable && !disabled.value && !!displayedValue.value)
+
+function formatModelValue(d: Dater) {
+  if (props.dataType === 'date') return d.raw
+  if (props.dataType === 'timestamp') return d.timestamp
+  return d.format(props.valueFormat ?? formatStr.value)
+}
+
+type TimeUnit = 'hours' | 'minutes' | 'seconds'
+
+interface TimeItem {
+  value: number
+  disabled: boolean
+}
+
+const unitLabels: Record<TimeUnit, string> = { hours: '时', minutes: '分', seconds: '秒' }
+
+/** 滚轮行高（CSS px），列高固定 5 行 */
+const ITEM_HEIGHT = 44
+
+/** 面板打开期间的暂存时间：确定时落盘，取消时丢弃 */
+const staged = shallowRef<Record<TimeUnit, number>>({ hours: 0, minutes: 0, seconds: 0 })
+
+function buildValues(count: number, disabled: Set<number>): TimeItem[] {
+  return Array.from({ length: count }, (_, value) => ({ value, disabled: disabled.has(value) }))
+}
+
+const columns = computed(() => {
+  const { hours, minutes } = staged.value
+  const disabledHours = new Set(props.disabledHours?.() ?? [])
+  const disabledMinutes = new Set(props.disabledMinutes?.(hours) ?? [])
+  const disabledSeconds = new Set(props.disabledSeconds?.(hours, minutes) ?? [])
+
+  return [
+    { name: 'hours' as const, values: buildValues(24, disabledHours) },
+    { name: 'minutes' as const, values: buildValues(60, disabledMinutes) },
+    { name: 'seconds' as const, values: buildValues(60, disabledSeconds) }
+  ]
+})
+
+const columnEls = new Map<TimeUnit, HTMLElement>()
+
+/** v-for 函数 ref：按列名登记滚轮列元素 */
+function setColumnRef(name: TimeUnit) {
+  return (el: unknown) => {
+    if (el instanceof HTMLElement) columnEls.set(name, el)
+    else columnEls.delete(name)
+  }
+}
+
+/** 行索引即滚动位置 / 行高（上下补位等高，首行居中时 scrollTop 为 0） */
+function scrollToValue(name: TimeUnit, value: number, smooth = false) {
+  columnEls.get(name)?.scrollTo({ top: value * ITEM_HEIGHT, behavior: smooth ? 'smooth' : 'auto' })
+}
+
+const SCROLL_SETTLE_DELAY = 100
+
+const scrollTimers = new Map<TimeUnit, ReturnType<typeof setTimeout>>()
+
+onBeforeUnmount(() => {
+  for (const timer of scrollTimers.values()) clearTimeout(timer)
+})
+
+/** 滚动停稳后把视口中心的值落为暂存；停在禁用项则回弹到当前暂存值 */
+function handleScroll(name: TimeUnit) {
+  clearTimeout(scrollTimers.get(name))
+  scrollTimers.set(
+    name,
+    setTimeout(() => {
+      const el = columnEls.get(name)
+      if (!el) return
+      const values = columns.value.find((col) => col.name === name)!.values
+      const item = values[Math.round(el.scrollTop / ITEM_HEIGHT)]
+      if (!item || item.disabled) {
+        scrollToValue(name, staged.value[name], true)
+        return
+      }
+      staged.value = { ...staged.value, [name]: item.value }
+    }, SCROLL_SETTLE_DELAY)
+  )
+}
+
+/** 点击选项：落暂存并平滑滚动到中心 */
+function handleSelect(name: TimeUnit, item: TimeItem) {
+  if (item.disabled) return
+  staged.value = { ...staged.value, [name]: item.value }
+  scrollToValue(name, item.value, true)
+}
+
+// 面板展开时以当前值定位各滚轮（无值则 00:00:00，与 desktop 基底行为一致）
+watch(sheetVisible, (visible) => {
+  if (!visible) return
+  const t = currentTime.value
+  staged.value = t
+    ? { hours: t.hours, minutes: t.minutes, seconds: t.seconds }
+    : { hours: 0, minutes: 0, seconds: 0 }
+  nextTick(() => {
+    for (const col of columns.value) scrollToValue(col.name, staged.value[col.name])
+  })
+})
+
+const pad = (value: number) => `${value}`.padStart(2, '0')
+
+function handleTriggerClick() {
+  if (disabled.value) return
+  sheetVisible.value = true
+}
+
+/** 确定：暂存落盘并通知父级（无值时以今天 00:00:00 为基底，与 desktop 一致） */
+function handleConfirm() {
+  const base = currentTime.value ?? date().setHours(0).setMinutes(0).setSeconds(0)
+  const next = base
+    .clone()
+    .setHours(staged.value.hours)
+    .setMinutes(staged.value.minutes)
+    .setSeconds(staged.value.seconds)
+
+  currentTime.value = next
+  emit('update:modelValue', formatModelValue(next))
+  emit('change', next.raw)
+  sheetVisible.value = false
+}
+
+function handleClear() {
+  currentTime.value = undefined
+  emit('update:modelValue', undefined)
+  emit('change', undefined)
+}
+</script>

package/src/components/timeline/index.ts

@@ -0,0 +1,2 @@
+export { default as UTimeline } from './timeline.vue'
+export { default as UTimelineItem } from './timeline-item.vue'

package/src/components/timeline/style.scss

@@ -0,0 +1,107 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: 'timeline';
+
+// 首行行高系数：与根 line-height 保持一致，圆点、尾线、时间戳的对齐基准由它派生
+$line-ratio: 1.6;
+// 内容首行行盒高度：圆点垂直中心的对齐目标
+$first-line: calc(#{t.use-var(font-size-main)} * #{$line-ratio});
+// 圆点直径：正文字号的 7/8（移动档 14px）
+$node-size: calc(#{t.use-var(font-size-main)} * 7 / 8);
+// 尾线宽度（几何常量）
+$tail-width: 2px;
+
+@include m.b($root-name) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: t.use-var(font-size-main);
+  line-height: $line-ratio;
+  color: fn.use-var(text-color, main);
+
+  @include m.e(item) {
+    position: relative;
+    padding-left: calc(#{$node-size} + #{t.use-var(spacing-md)});
+    padding-bottom: t.use-var(spacing-lg);
+
+    // 尾线：伪元素绘制，起点在圆点下方一个小间距，水平中心与圆点同心
+    &::before {
+      content: '';
+      position: absolute;
+      left: calc((#{$node-size} - #{$tail-width}) / 2);
+      top: calc((#{$first-line} + #{$node-size}) / 2 + #{t.use-var(spacing-sm)});
+      bottom: 0;
+      border-left: #{$tail-width} solid fn.use-var(border-color);
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  // 节点盒：高度等于首行行盒，盒内垂直居中即与首行文字中心对齐（纯 CSS，自定义 #dot 同样适用）
+  @include m.e(node) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $node-size;
+    height: $first-line;
+
+    // 默认圆点
+    &::before {
+      content: '';
+      width: $node-size;
+      height: $node-size;
+      border-radius: 50%;
+      background-color: fn.use-var(border-color);
+    }
+
+    // 语义色圆点
+    @each $type in (primary, success, warning, danger) {
+      @include m.m(#{$type}) {
+        &::before {
+          background-color: fn.use-var(color, $type);
+        }
+      }
+    }
+
+    // 自定义节点（#dot 插槽）：隐藏默认圆点；保持圆点直径的盒宽，
+    // 超宽插槽内容以竖线为轴向两侧对称溢出，与尾线保持同心
+    @include m.is(custom) {
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  @include m.e(wrapper) {
+    min-width: 0;
+  }
+
+  @include m.e(timestamp) {
+    margin-top: t.use-var(spacing-sm);
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var(font-size-auxiliary);
+    // 行盒与内容首行等高，timestamp-placement 为 top 时与圆点共用对齐基准
+    line-height: $first-line;
+  }
+
+  // 时间戳在内容上方时改为下间距
+  @include m.em(timestamp, top) {
+    margin-top: 0;
+    margin-bottom: t.use-var(spacing-sm);
+  }
+
+  @include m.e(content) {
+    word-break: break-word;
+  }
+}

package/src/components/timeline/style.ts

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

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

@@ -0,0 +1,43 @@
+<template>
+  <li :class="cls.e('item')">
+    <div :class="nodeClass">
+      <slot name="dot" />
+    </div>
+    <div :class="cls.e('wrapper')">
+      <div v-if="timestamp" :class="timestampClass">{{ timestamp }}</div>
+      <div :class="cls.e('content')">
+        <slot />
+      </div>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { TimelineItemProps } from '../../types/timeline'
+
+defineOptions({ name: 'UTimelineItem' })
+
+const {
+  color = 'default',
+  timestamp,
+  timestampPlacement = 'bottom'
+} = defineProps<TimelineItemProps>()
+
+const cls = bem('timeline')
+
+const slots = useSlots()
+
+const nodeClass = computed(() => [
+  cls.e('node'),
+  cls.em('node', color),
+  bem.is('custom', !!slots.dot)
+])
+
+const timestampClass = computed(() => [
+  cls.e('timestamp'),
+  ...(timestampPlacement === 'top' ? [cls.em('timestamp', 'top')] : [])
+])
+</script>

package/src/components/timeline/timeline.vue

@@ -0,0 +1,16 @@
+<template>
+  <ul :class="cls.b">
+    <slot />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '../../shared/bem'
+import type { TimelineProps } from '../../types/timeline'
+
+defineOptions({ name: 'UTimeline' })
+
+defineProps<TimelineProps>()
+
+const cls = bem('timeline')
+</script>

package/src/components/uploader/index.ts

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