@veltra/mobile 1.0.0 → 1.1.0

package/src/components/select/select.vue

@@ -0,0 +1,278 @@
+<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"
+    role="combobox"
+    @click="handleTriggerClick"
+  >
+    <span v-if="$slots.prefix" :class="cls.e('prefix')">
+      <slot name="prefix" />
+    </span>
+
+    <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('arrow')" aria-hidden="true">
+        <ArrowDown />
+      </span>
+    </span>
+  </div>
+
+  <!-- 底部选择面板（内部实现，不进公开导出） -->
+  <BottomSheet
+    v-model:visible="sheetVisible"
+    :title="placeholder"
+    :content-class="contentClass"
+    :content-style="contentStyle"
+  >
+    <div v-if="filterable" :class="cls.e('search')">
+      <input
+        ref="searchRef"
+        v-model="queryString"
+        :class="cls.e('search-input')"
+        type="text"
+        placeholder="搜索"
+        enterkeyhint="search"
+      />
+    </div>
+
+    <div v-if="loading" :class="cls.e('loading')">加载中...</div>
+
+    <ul
+      v-else-if="options.length"
+      :class="[cls.e('options'), bem.is('grid', !!grid)]"
+      :style="gridStyle"
+    >
+      <li
+        v-for="(option, index) of options"
+        :key="getOptionField(option, valueKey)"
+        :class="[cls.e('option'), bem.is('selected', isSelected(option))]"
+        role="option"
+        :aria-selected="isSelected(option)"
+        @click="handleSelect(option)"
+      >
+        <slot :option="option" :index="index">
+          <span :class="cls.e('option-label')">
+            {{ getOptionField(option, labelKey) }}
+          </span>
+        </slot>
+
+        <span v-if="isSelected(option) && !grid" :class="cls.e('check')" aria-hidden="true">
+          <Check />
+        </span>
+      </li>
+    </ul>
+
+    <div v-else :class="cls.e('empty')">暂无数据</div>
+  </BottomSheet>
+</template>
+
+<script lang="ts" setup>
+import { ArrowDown, Check, Close } from '@veltra/icons/normal'
+import { FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { SelectEmits, SelectProps } from '../../types/select'
+import { BottomSheet } from '../_internal/bottom-sheet'
+import { getOptionField, useOptions } from './use-options'
+
+defineOptions({ name: 'USelect', inheritAttrs: false })
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  placeholder: '请选择',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<SelectEmits>()
+
+defineSlots<{
+  /** 前缀插槽 */
+  prefix?: () => any
+  /** 默认插槽 */
+  default?: (scope: { option: Record<string, any>; index: number }) => any
+}>()
+
+const cls = bem('select')
+
+const { formProps } = injectFormContext()
+
+// 表单回滚属性：组件自身优先于表单（与 desktop 行为一致）
+const size = computed(() => props.size ?? formProps?.size ?? 'default')
+const disabled = computed(() => props.disabled ?? formProps?.disabled ?? false)
+const readonly = computed(() => props.readonly ?? formProps?.readonly ?? false)
+
+const labelKey = computed(() => props.labelKey || 'label')
+const valueKey = computed(() => props.valueKey || 'value')
+
+const filterable = computed(() => props.filterable || typeof props.options === 'function')
+
+const {
+  queryString,
+  loading,
+  options,
+  allOptions,
+  temOptionsToCreatedOptions,
+  clearCreatedOptions
+} = useOptions({ props })
+
+/** 内部展示文案，仅由选项推导（未命中时展示 text 兜底）；经 update:text 通知父级 */
+const label = shallowRef<string>()
+const selected = shallowRef<Record<string, any>>()
+
+const displayedValue = computed(() => {
+  if (label.value) return label.value
+
+  if (selected.value) return getOptionField(selected.value, labelKey.value)
+  // 未命中选项：优先展示 text 兜底文案，避免露出不可读的编码
+  return props.text ?? String(props.modelValue ?? '')
+})
+
+const sheetVisible = shallowRef(false)
+const searchRef = useTemplateRef<HTMLInputElement>('searchRef')
+
+/** 移动端无 hover：有值且可清除即展示清除按钮 */
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && !!displayedValue.value
+})
+
+/** 选中临时选项后待转正标记：面板关闭后再落定，与 desktop 行为一致 */
+let pendingTempPromote = false
+
+/** 抑制内部写入引起的外部回显同步 */
+let suppressEcho = false
+
+/** 更新内部文案；值变化时 emit update:text（readonly 纯展示，不通知父级） */
+function setLabel(next?: string) {
+  if (label.value === next) return
+  label.value = next
+  if (!readonly.value) emit('update:text', next)
+}
+
+/** 按 modelValue 与完整选项列表同步选中项与显示标签（外部回显用，O(n)） */
+function syncSelected(modelValue: any, sourceOptions: Record<string, any>[] | undefined) {
+  if (!sourceOptions?.length) return
+
+  if (modelValue !== undefined && modelValue !== null && modelValue !== '') {
+    const index = sourceOptions.findIndex(
+      (option) => getOptionField(option, valueKey.value) === modelValue
+    )
+    selected.value = index >= 0 ? sourceOptions[index] : undefined
+    if (selected.value) {
+      setLabel(getOptionField(selected.value, labelKey.value))
+    } else if (props.text) {
+      // 未命中但有 text 兜底：文案以父级为准，不回发
+      label.value = undefined
+    } else {
+      // 未命中且无兜底：如实通知父级当前没有可展示文案
+      setLabel(undefined)
+    }
+  } else {
+    selected.value = undefined
+    setLabel(undefined)
+  }
+}
+
+// 回显：以 allOptions 匹配，避免过滤列表缺项时清掉已选文案
+watch(
+  [() => props.modelValue, allOptions],
+  ([modelValue]) => {
+    if (suppressEcho) {
+      suppressEcho = false
+      return
+    }
+    syncSelected(modelValue, allOptions.value)
+  },
+  { immediate: true }
+)
+
+watch(sheetVisible, (visible) => {
+  if (visible) {
+    // 关闭动画期间被重新打开时补一次转正，保证已选临时项落到完整列表
+    promotePendingTemp()
+    // 面板展开后清空查询并聚焦搜索框，可立即输入查询
+    if (filterable.value) {
+      queryString.value = ''
+      nextTick(() => searchRef.value?.focus())
+    }
+  } else {
+    // 面板关闭后再清空查询并转正临时项，避免列表瞬间恢复全量导致面板闪烁
+    queryString.value = ''
+    promotePendingTemp()
+    suppressEcho = false
+  }
+})
+
+/** 落定待转正的临时选项 */
+function promotePendingTemp() {
+  if (!pendingTempPromote) return
+  pendingTempPromote = false
+  temOptionsToCreatedOptions()
+}
+
+function isSelected(option: Record<string, any>) {
+  if (selected.value === option) return true
+  return getOptionField(option, valueKey.value) === props.modelValue
+}
+
+function handleTriggerClick() {
+  if (disabled.value) return
+  sheetVisible.value = true
+}
+
+/** 单选：写入值与文案后收起面板 */
+function handleSelect(option: Record<string, any>) {
+  const value = getOptionField(option, valueKey.value)
+  selected.value = option
+
+  suppressEcho = true
+  emit('update:modelValue', value)
+  setLabel(getOptionField(option, labelKey.value))
+  emit('change', option)
+
+  if (option.__isTemp) {
+    // 转正延迟到面板关闭后：动画期间保持过滤列表
+    pendingTempPromote = true
+  }
+
+  sheetVisible.value = false
+}
+
+/** 清除选项 */
+function handleClear() {
+  selected.value = undefined
+  setLabel(undefined)
+  clearCreatedOptions()
+  suppressEcho = true
+  emit('update:modelValue', undefined)
+  emit('change', undefined)
+}
+
+const gridStyle = computed(() => {
+  if (!props.grid) return undefined
+  const cols = props.grid.cols
+  const gap = props.grid.gap !== undefined ? `${props.grid.gap}px` : undefined
+  return { gridTemplateColumns: `repeat(${cols}, minmax(0px, 1fr))`, rowGap: gap, columnGap: gap }
+})
+</script>

package/src/components/select/style.scss

@@ -0,0 +1,237 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: select;
+
+@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.bem($root-name, arrow) {
+      transform: rotate(180deg);
+    }
+  }
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+    color: fn.use-var(text-color, disabled);
+    background-color: fn.use-var(bg-color, middle);
+
+    @include m.bem($root-name, arrow) {
+      color: fn.use-var(text-color, disabled);
+    }
+  }
+
+  @include m.e(prefix) {
+    display: inline-flex;
+    align-items: center;
+    color: fn.use-var(text-color, second);
+    font-size: 1em;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  @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(arrow) {
+    // 箭头热区 ≥44×44：随行高拉伸、宽度不小于触控热区下限
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    min-width: t.use-var('touch-target');
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var('font-size-secondary');
+    transition: transform fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  // 面板内搜索行
+  @include m.e(search) {
+    padding: t.use-var('spacing-sm') 0;
+  }
+
+  @include m.e(search-input) {
+    // 字号 ≥16px（placeholder 继承同字号）：iOS Safari 聚焦不触发页面缩放
+    width: 100%;
+    box-sizing: border-box;
+    min-height: t.use-var('touch-target');
+    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, middle);
+    color: fn.use-var(text-color, main);
+    font-size: t.use-var('font-size-main');
+    outline: none;
+    -webkit-appearance: none;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+
+    &:focus {
+      border-color: fn.use-var(color, primary);
+    }
+  }
+
+  // 选项列表
+  @include m.e(options) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: t.use-var('spacing-xs');
+
+    @include m.is(grid) {
+      display: grid;
+    }
+  }
+
+  @include m.e(option) {
+    // 选项整行热区 ≥44×44
+    display: flex;
+    align-items: center;
+    min-height: t.use-var('touch-target');
+    gap: t.use-var('spacing-sm');
+    padding: 0 t.use-var('spacing-md');
+    border-radius: t.control-radius(default);
+    color: fn.use-var(text-color, main);
+    user-select: none;
+    cursor: pointer;
+
+    &:active {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    @include m.is(grid) {
+      justify-content: center;
+      text-align: center;
+    }
+
+    // 选中态：网格布局用底色强调（无对钩），列表布局再由对钩指示
+    @include m.is(selected) {
+      color: fn.component-var(select, option-selected-color, fn.use-var(color, primary));
+      font-weight: 600;
+      background-color: fn.component-var(
+        select,
+        option-selected-bg,
+        fn.use-var(color, primary, light-9)
+      );
+
+      &:active {
+        background-color: fn.use-var(color, primary, light-7);
+      }
+    }
+  }
+
+  @include m.e(option-label) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+  }
+
+  @include m.e(check) {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: fn.use-var(color, primary);
+    font-size: t.use-var('font-size-main');
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  @include m.e(empty) {
+    padding: t.use-var('spacing-lg') 0;
+    text-align: center;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(loading) {
+    padding: t.use-var('spacing-lg') 0;
+    text-align: center;
+    color: fn.use-var(text-color, second);
+  }
+}

package/src/components/select/style.ts

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

package/src/components/select/use-options.ts

@@ -0,0 +1,195 @@
+import { computed, shallowRef, watch } from 'vue'
+import type { ComputedRef, ShallowRef } from 'vue'
+
+import type { SelectProps } from '../../types/select'
+
+/**
+ * 按 key 读取选项字段
+ * @description 支持 `a.b` 链式 key，语义与 desktop 的链式取值一致
+ */
+export function getOptionField(option: Record<string, any>, key: string): any {
+  if (!key.includes('.')) return option?.[key]
+  return key.split('.').reduce<any>((cur, k) => cur?.[k], option)
+}
+
+/** 最小防抖：仅本文件内的查询过滤使用 */
+function debounce<A extends unknown[]>(fn: (...args: A) => void, delay: number) {
+  let timer: ReturnType<typeof setTimeout> | undefined
+  return (...args: A) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), delay)
+  }
+}
+
+interface Options {
+  props: SelectProps
+}
+
+export interface UseOptionsReturned {
+  /** 查询字符串 */
+  queryString: ShallowRef<string>
+  /** 远程搜索加载中 */
+  loading: ShallowRef<boolean>
+  /** 选项（含待创建临时项） */
+  options: ComputedRef<Record<string, any>[]>
+  /** 所有选项（含已创建项，不含临时项） */
+  allOptions: ComputedRef<Record<string, any>[]>
+  /** 将临时选项转正为已创建选项 */
+  temOptionsToCreatedOptions: () => void
+  /** 清空用户创建的选项 */
+  clearCreatedOptions: () => void
+}
+
+// 允许创建的实现
+// 1. 在过滤时将选项加入待选列表中
+// 2. 如果选择了该临时选项，则取消该选项的临时标记并并入已创建列表
+// 3. 多次创建累计保留，已创建项参与后续过滤匹配
+
+export function useOptions(o: Options): UseOptionsReturned {
+  const { props } = o
+
+  /** 查询串 */
+  const queryString = shallowRef('')
+
+  const loading = shallowRef(false)
+  /** 远程请求序号；响应返回时序号不一致说明已有更新的请求，结果作废 */
+  let remoteSeq = 0
+
+  const remoteOptions = shallowRef<Record<string, any>[]>([])
+  const filteredOptions = shallowRef<Record<string, any>[]>([])
+  // 临时选项（待创建）
+  const tempOptions = shallowRef<({ __isTemp: true } & Record<string, any>)[]>([])
+  // 创建的选项
+  const createdOptions = shallowRef<({ __isTemp: false } & Record<string, any>)[]>([])
+
+  function getSourceOptions(propsOptions: SelectProps['options']) {
+    if (typeof propsOptions === 'function') return remoteOptions.value
+    return [...createdOptions.value, ...(propsOptions ?? [])]
+  }
+
+  /** 无查询时同步展示完整列表（含已创建项） */
+  function resetToSourceOptions() {
+    const sourceOptions = getSourceOptions(props.options)
+    if (typeof props.options === 'function') {
+      setTempOption('', remoteOptions.value)
+      return
+    }
+    filteredOptions.value = sourceOptions
+    tempOptions.value = []
+  }
+
+  function temOptionsToCreatedOptions() {
+    if (!tempOptions.value.length) return
+
+    createdOptions.value = [
+      ...createdOptions.value,
+      ...tempOptions.value.map((item) => ({ ...item, __isTemp: false as const }))
+    ]
+    resetToSourceOptions()
+  }
+
+  function clearCreatedOptions() {
+    createdOptions.value = []
+    resetToSourceOptions()
+  }
+
+  const setTempOption = (qs: string, options?: Record<string, any>[]) => {
+    if (!qs?.trim() || !props.creatable) {
+      tempOptions.value = []
+      return
+    }
+    const labelKey = props.labelKey || 'label'
+    const valueKey = props.valueKey || 'value'
+    const exactMatch = options
+      ? options.some((option) => getOptionField(option, labelKey) === qs)
+      : false
+
+    tempOptions.value = exactMatch ? [] : [{ [labelKey]: qs, [valueKey]: qs, __isTemp: true }]
+  }
+
+  const allOptions = computed(() => {
+    const { options } = props
+    if (typeof options === 'function') return remoteOptions.value
+    return [...createdOptions.value, ...(options ?? [])]
+  })
+
+  /** 展示的选项：临时选项（待创建）固定置顶 */
+  const options = computed(() => {
+    const { options } = props
+    if (typeof options === 'function') return remoteOptions.value
+
+    return [...tempOptions.value, ...filteredOptions.value]
+  })
+
+  const applyLocalFilter = (qs: string, propsOptions: Record<string, any>[] | undefined) => {
+    const labelKey = props.labelKey || 'label'
+    const sourceOptions = [...createdOptions.value, ...(propsOptions ?? [])]
+
+    if (!qs) {
+      filteredOptions.value = sourceOptions
+      setTempOption(qs, filteredOptions.value)
+      return
+    }
+
+    const _filteredOptions = sourceOptions.filter((item) => {
+      return getOptionField(item, labelKey)?.includes(qs) ?? false
+    })
+
+    setTempOption(qs, _filteredOptions)
+    filteredOptions.value = _filteredOptions
+  }
+
+  // 仅对「有查询词」的本地过滤做防抖；清空查询同步生效，避免选中后列表延迟重建
+  const debouncedLocalFilter = debounce(
+    (qs: string, propsOptions: Record<string, any>[] | undefined) => {
+      // 防抖回调可能晚于清空查询到达，以当前 queryString 为准
+      if (!queryString.value) {
+        applyLocalFilter('', propsOptions)
+        return
+      }
+      applyLocalFilter(qs, propsOptions)
+    },
+    200
+  )
+
+  const debouncedRemoteFilter = debounce(async (qs: string, propsOptions: Function) => {
+    const seq = ++remoteSeq
+    loading.value = true
+    try {
+      const options = await propsOptions(qs)
+      // 响应到达时查询词可能已变化或已有更新的请求，过期结果直接丢弃
+      if (seq !== remoteSeq || qs !== queryString.value) return
+      remoteOptions.value = options ?? []
+      setTempOption(qs, remoteOptions.value)
+    } finally {
+      if (seq === remoteSeq) loading.value = false
+    }
+  }, 200)
+
+  watch(
+    [queryString, () => props.options, createdOptions],
+    ([qs, propsOptions]) => {
+      if (typeof propsOptions === 'function') {
+        debouncedRemoteFilter(qs, propsOptions)
+        return
+      }
+
+      if (!qs) {
+        applyLocalFilter('', propsOptions)
+        return
+      }
+
+      debouncedLocalFilter(qs, propsOptions)
+    },
+    { immediate: true }
+  )
+
+  return {
+    queryString,
+    loading,
+    options,
+    allOptions,
+    temOptionsToCreatedOptions,
+    clearCreatedOptions
+  }
+}