@veltra/mobile 1.0.0 → 1.1.0

package/src/components/collapse/style.scss

@@ -0,0 +1,157 @@
+@use 'sass:map';
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: collapse;
+
+// 标题/内容字号统一主字号 16（正文不小于 16px），档位只影响间距密度
+$size-padding: (
+  small: spacing-sm,
+  default: spacing-md,
+  large: spacing-lg
+);
+
+$ease: cubic-bezier(0.4, 0, 0.2, 1);
+$transition-fast: 0.18s $ease;
+$transition-normal: 0.24s $ease;
+
+@include m.b($root-name) {
+  width: 100%;
+  font-size: t.use-var(font-size-main);
+  color: fn.use-var(text-color, main);
+  background-color: transparent;
+
+  // ===== Item =====
+  @include m.e(item) {
+    border: fn.use-var(border-muted);
+    border-radius: t.control-radius(default);
+    // 填充式灰卡（light #f4f4f5 / dark #26262c，dark 下取比 top 亮的 hover 档）
+    background-color: fn.use-var(bg-color, hover);
+    overflow: hidden;
+
+    & + .um-#{$root-name}__item {
+      margin-top: t.use-var(spacing-md);
+    }
+
+    @include m.is(disabled) {
+      opacity: 0.55;
+    }
+  }
+
+  // ===== Header：触控热区高度保底 44px =====
+  @include m.e(header) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: t.use-var(spacing-xs);
+    padding: t.use-var(spacing-sm) t.use-var(spacing-md);
+    min-height: t.use-var(touch-target);
+    box-sizing: border-box;
+    cursor: pointer;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    color: fn.use-var(text-color, main);
+    user-select: none;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color $transition-fast;
+    // 展开时显形为 hairline：常驻占位避免展开瞬间 1px 跳动
+    border-bottom: 1px solid transparent;
+    border-radius: 0;
+
+    &:focus-visible {
+      box-shadow: inset 0 0 0 2px fn.use-var(color, primary);
+    }
+
+    // 移动端无 hover：按压与展开态提供触控反馈。
+    // 按压压暗主题无关，中性 bg 无更深一档 token，直接 rgba（同遮罩先例）
+    @include m.is-not(disabled) {
+      &:active {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    @include m.is(disabled) {
+      cursor: not-allowed;
+      color: fn.use-var(text-color, placeholder);
+    }
+
+    @include m.is(active) {
+      // 灰白交接 hairline：只在展开态显形
+      border-bottom-color: fn.use-var(border-color);
+
+      .um-#{$root-name}__icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  // ===== Title =====
+  @include m.e(title) {
+    display: flex;
+    align-items: center;
+    gap: t.use-var(spacing-xs);
+    flex: 1 1 auto;
+    min-width: 0;
+    line-height: 1.5;
+  }
+
+  // ===== Icon：无 UIcon 依赖，svg 直接经 1em 伸缩 =====
+  @include m.e(icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    // 比正文字号大一号 + 中灰，保证可辨识（assist 档在灰底上过浅）
+    font-size: t.use-var(font-size-title);
+    color: fn.use-var(text-color, second);
+    transition: transform 0.2s $ease;
+    will-change: transform;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+  }
+
+  // ===== Content wrapper =====
+  @include m.e(content-wrapper) {
+    overflow: hidden;
+    height: 0;
+    background-color: fn.use-var(bg-color, top);
+    transition: height $transition-normal;
+  }
+
+  @include m.e(content) {
+    color: fn.use-var(text-color, main);
+    line-height: 1.7;
+    padding: t.use-var(spacing-sm) t.use-var(spacing-md);
+  }
+
+  // ===== Sizes =====
+  @include m.size using ($size) {
+    $padding: t.use-var(map.get($size-padding, $size));
+
+    font-size: t.use-var(font-size-main);
+
+    @include m.bem($root-name, header) {
+      padding: $padding;
+      font-size: t.use-var(font-size-main);
+    }
+
+    @include m.bem($root-name, content) {
+      font-size: t.use-var(font-size-main);
+      padding: $padding;
+    }
+
+    .um-#{$root-name}__item {
+      border-radius: t.control-radius($size);
+
+      & + .um-#{$root-name}__item {
+        margin-top: $padding;
+      }
+    }
+  }
+}

package/src/components/collapse/style.ts

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

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

@@ -0,0 +1,326 @@
+<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">
+        <Calendar />
+      </span>
+    </span>
+  </div>
+
+  <!-- 底部日历面板（复用 P6 弹层基座，内部实现不进公开导出） -->
+  <BottomSheet v-model:visible="sheetVisible" :title="placeholder">
+    <!-- 横向滑动翻页（左滑下一个、右滑上一个，与点击翻页按钮并存）；prevent 阻断滚动链 -->
+    <div :class="cls.e('panel')" v-on="swipeHandlers" @touchmove.prevent>
+      <header :class="cls.e('panel-header')">
+        <button
+          :class="cls.e('nav')"
+          type="button"
+          :aria-label="`上一个${navUnit}`"
+          @click="handlePrev"
+        >
+          <Left />
+        </button>
+        <span :class="cls.e('panel-title')">{{ panelTitle }}</span>
+        <button
+          :class="cls.e('nav')"
+          type="button"
+          :aria-label="`下一个${navUnit}`"
+          @click="handleNext"
+        >
+          <Right />
+        </button>
+      </header>
+
+      <template v-if="type === 'date'">
+        <ul :class="cls.e('week')">
+          <li v-for="weekDay of weekDays" :key="weekDay" :class="cls.e('week-day')">
+            {{ weekDay }}
+          </li>
+        </ul>
+        <ul :class="cls.e('days')">
+          <li
+            v-for="cell of dayCells"
+            :key="cell.key"
+            :class="[cls.e('cell'), bem.is(cell.type), cellClass(cell)]"
+            role="gridcell"
+            :aria-selected="isSelected(cell.date)"
+            @click="handleSelect(cell)"
+          >
+            {{ cell.date.day }}
+          </li>
+        </ul>
+      </template>
+
+      <ul v-else-if="type === 'month'" :class="cls.e('months')">
+        <li
+          v-for="cell of monthCells"
+          :key="cell.date.month"
+          :class="[cls.e('cell'), cellClass(cell)]"
+          role="gridcell"
+          :aria-selected="isSelected(cell.date)"
+          @click="handleSelect(cell)"
+        >
+          {{ cell.date.month }}月
+        </li>
+      </ul>
+
+      <ul v-else :class="cls.e('years')">
+        <li
+          v-for="cell of yearCells"
+          :key="cell.date.year"
+          :class="[cls.e('cell'), cellClass(cell)]"
+          role="gridcell"
+          :aria-selected="isSelected(cell.date)"
+          @click="handleSelect(cell)"
+        >
+          {{ cell.date.year }}
+        </li>
+      </ul>
+    </div>
+  </BottomSheet>
+</template>
+
+<script lang="ts" setup>
+import { date, Dater } from '@cat-kit/core'
+import { useFormFallbackProps } from '@veltra/compositions'
+import { Calendar, Close, Left, Right } from '@veltra/icons/normal'
+import { FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import { computed, shallowRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import { horizontalSwipeDirection, useTouchGesture } from '../../shared/use-touch-gesture'
+import type { DatePickerEmits, DatePickerProps } from '../../types/date-picker'
+import { BottomSheet } from '../_internal/bottom-sheet'
+
+defineOptions({ name: 'UDatePicker', inheritAttrs: false })
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  placeholder: '选择日期',
+  type: 'date',
+  dataType: 'string',
+  disabled: undefined,
+  readonly: undefined,
+  clearable: true
+})
+
+const emit = defineEmits<DatePickerEmits>()
+
+const cls = bem('date-picker')
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const formats = { date: 'yyyy-MM-dd', month: 'yyyy-MM', year: 'yyyy' } as const
+
+/** 选中格式串：显示与字符串值共用的模板 */
+const formatStr = computed(() => props.format ?? formats[props.type ?? 'date'])
+
+const currentDate = shallowRef<Dater>()
+
+const sheetVisible = shallowRef(false)
+
+/** 面板浏览中的年月（与选中值解耦，翻页不改动选中） */
+const panelDate = shallowRef(date())
+
+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
+  }
+  if (props.dataType === 'string' && props.valueFormat) {
+    const parsed = Dater.parse(val, props.valueFormat)
+    if (!isNaN(parsed.timestamp)) return parsed
+  }
+  const fallback = date(val)
+  return isNaN(fallback.timestamp) ? undefined : fallback
+}
+
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    currentDate.value = parseModelValue(modelValue)
+  },
+  { immediate: true }
+)
+
+// 面板展开时以选中值（无则今天）定位浏览年月
+watch(sheetVisible, (visible) => {
+  if (!visible) return
+  panelDate.value = date(currentDate.value?.timestamp ?? Date.now())
+})
+
+const displayedValue = computed(() => currentDate.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 粒度：日比到日、月比到月、年比到年） */
+const compareFmt = computed(
+  () => ({ date: 'yyyyMMdd', month: 'yyyyMM', year: 'yyyy' })[props.type ?? 'date']
+)
+
+function isSelected(d: Dater) {
+  return (
+    !!currentDate.value && d.format(compareFmt.value) === currentDate.value.format(compareFmt.value)
+  )
+}
+
+const navUnit = computed(() => ({ date: '月', month: '年', year: '十年' })[props.type ?? 'date'])
+
+const panelTitle = computed(() => {
+  const p = panelDate.value
+  if (props.type === 'date') return `${p.year}年${p.month}月`
+  if (props.type === 'month') return `${p.year}年`
+  const start = p.year - (p.year % 10)
+  return `${start} - ${start + 9}`
+})
+
+function handlePrev() {
+  shiftPanel(-1)
+}
+
+function handleNext() {
+  shiftPanel(1)
+}
+
+/** 翻页步长随 type 变化：日视图按月、月视图按年、年视图按十年 */
+function shiftPanel(step: number) {
+  const { type } = props
+  if (type === 'date') {
+    panelDate.value = panelDate.value.calc(step, 'months')
+  } else if (type === 'year') {
+    panelDate.value = panelDate.value.calc(step * 10, 'years')
+  } else {
+    panelDate.value = panelDate.value.calc(step, 'years')
+  }
+}
+
+/** 日历面板横滑翻页：左滑下一个、右滑上一个，与点击翻页按钮并存 */
+const swipeHandlers = useTouchGesture({
+  onEnd(state) {
+    const direction = horizontalSwipeDirection(state)
+    if (direction === 'left') shiftPanel(1)
+    else if (direction === 'right') shiftPanel(-1)
+  }
+})
+
+interface Cell {
+  key: string
+  date: Dater
+  type: 'pre' | 'current' | 'next'
+  isToday: boolean
+  disabled?: boolean
+}
+
+const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+/** 与 desktop 日历一致：固定 6 行 42 格，含上月尾与下月头补位 */
+const dayCells = computed<Cell[]>(() => {
+  const first = date(panelDate.value.timestamp).setDay(1)
+  const todayStr = date().format()
+
+  const cells: Cell[] = []
+  const toCell = (d: Dater, type: Cell['type']): Cell => ({
+    key: `${type}-${d.timestamp}`,
+    date: d,
+    type,
+    isToday: d.format() === todayStr,
+    disabled: props.disabledDate?.(d, d.raw)
+  })
+
+  for (let i = 0; i < first.weekDay; i++)
+    cells.push(toCell(first.calc(i - first.weekDay, 'days'), 'pre'))
+  for (let i = 0; i < first.getDays(); i++) cells.push(toCell(first.calc(i, 'days'), 'current'))
+  for (let i = 0; cells.length < 42; i++)
+    cells.push(toCell(first.calc(first.getDays() + i, 'days'), 'next'))
+
+  return cells
+})
+
+/** 月格：以月末 23:59:59 参与 disabledDate 判定（与 desktop 一致） */
+const monthCells = computed(() => {
+  const year = panelDate.value.year
+  return Array.from({ length: 12 }, (_, i) => {
+    const d = date(`${year}-${i + 1}`)
+      .toEndOfMonth()
+      .setHours(23)
+      .setMinutes(59)
+      .setSeconds(59)
+    return { key: `${year}-${i + 1}`, date: d, disabled: props.disabledDate?.(d, d.raw) }
+  })
+})
+
+/** 年格：十年一页，以年末 23:59:59 参与 disabledDate 判定（与 desktop 一致） */
+const yearCells = computed(() => {
+  const start = panelDate.value.year - (panelDate.value.year % 10)
+  return Array.from({ length: 10 }, (_, i) => {
+    const d = date(`${start + i}-12-31 23:59:59`)
+    return { key: `${start + i}`, date: d, disabled: props.disabledDate?.(d, d.raw) }
+  })
+})
+
+type AnyCell = Cell | { key: string; date: Dater; disabled?: boolean }
+
+function cellClass(cell: AnyCell) {
+  return [
+    bem.is('today', 'isToday' in cell && cell.isToday),
+    bem.is('selected', isSelected(cell.date)),
+    bem.is('disabled', !!cell.disabled)
+  ]
+}
+
+function handleTriggerClick() {
+  if (disabled.value) return
+  sheetVisible.value = true
+}
+
+/** 选中即落值并收起（与 desktop 选中关闭一致） */
+function handleSelect(cell: AnyCell) {
+  if (cell.disabled) return
+  currentDate.value = date(cell.date.timestamp)
+  emit('update:modelValue', formatModelValue(cell.date))
+  emit('change', cell.date.raw)
+  sheetVisible.value = false
+}
+
+function handleClear() {
+  currentDate.value = undefined
+  emit('update:modelValue', undefined)
+  emit('change', undefined)
+}
+</script>

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

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