@veltra/mobile 1.0.0 → 1.1.0

package/src/components/progress/index.ts

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

package/src/components/progress/progress.vue

@@ -0,0 +1,90 @@
+<template>
+  <div :class="className">
+    <!-- 条形进度条 -->
+    <div :class="cls.e('bar-wrap')" v-if="!circle">
+      <div :class="cls.e('bar')" :style="{ width: percentage + '%' }">
+        <slot v-bind="{ percentage, type }">{{ percentage }}%</slot>
+      </div>
+    </div>
+
+    <!-- 环形进度条 -->
+    <div
+      v-else
+      :class="cls.e('circle')"
+      :style="{ height: withUnit(size, 'px'), width: withUnit(size, 'px') }"
+    >
+      <svg viewBox="0 0 100 100">
+        <circle
+          :class="cls.e('circle-track')"
+          cx="50"
+          cy="50"
+          :r="r"
+          fill="none"
+          stroke-width="8"
+        />
+        <circle
+          :class="cls.e('circle-ring')"
+          cx="50"
+          cy="50"
+          :r="r"
+          fill="none"
+          stroke-width="8"
+          :stroke-dasharray="dashArray"
+          :stroke-dashoffset="offset"
+          :stroke-linecap="percentage === 0 ? undefined : 'round'"
+        />
+      </svg>
+
+      <div :class="cls.e('circle-content')">
+        <slot v-bind="{ percentage, type }"> {{ percentage }}% </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { withUnit } from '@veltra/utils'
+import type { ColorType } from '@veltra/utils'
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { ProgressProps } from '../../types/progress'
+
+defineOptions({ name: 'UProgress' })
+
+const props = defineProps<ProgressProps>()
+
+defineSlots<{
+  default: (props: {
+    /** 进度百分比 */
+    percentage: number
+    /** 样式类型 */
+    type: ColorType
+  }) => any
+}>()
+
+const cls = bem('progress')
+
+const percentage = computed(() => {
+  return Math.min(100, Math.max(0, props.percentage ?? 0))
+})
+
+const type = computed<ColorType>(() => {
+  const { type } = props
+  return typeof type === 'function' ? type(percentage.value) : type
+})
+
+const className = computed(() => {
+  return [cls.b, bem.is('circle', props.circle), cls.m(type.value)]
+})
+
+const r = 44
+const c = 2 * Math.PI * r
+const offset = c / 4
+
+/** 圆周 */
+const dashArray = computed(() => {
+  const dashLen = (c * percentage.value) / 100
+  return `${dashLen}, ${c - dashLen}`
+})
+</script>

package/src/components/progress/style.scss

@@ -0,0 +1,73 @@
+@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: progress;
+
+// 进度文本走辅助字号档，条形高度按字号推导以容纳内嵌百分比文本
+@include m.b($root-name) {
+  font-size: t.use-var(font-size-secondary);
+
+  $bar-height: 1.4em;
+
+  @include m.e(bar-wrap) {
+    height: $bar-height;
+    background-color: fn.use-var(bg-color, hover);
+    border-radius: $bar-height;
+    overflow: hidden;
+  }
+
+  @include m.e(bar) {
+    height: 100%;
+    color: fn.use-var(text-color, white);
+    overflow: hidden;
+    transition:
+      width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
+      background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+    @include m.flex($justify: center);
+  }
+
+  // 环形进度条：直径兜底走 token（size 未传时），传 size 后由内联样式覆盖
+  @include m.e(circle) {
+    width: t.use-var(progress-circle);
+    height: t.use-var(progress-circle);
+    position: relative;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @include m.e(circle-track) {
+    stroke: fn.use-var(bg-color, hover);
+  }
+
+  @include m.e(circle-ring) {
+    transition: stroke-dasharray 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+
+  @include m.e(circle-content) {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    @include m.flex($justify: center);
+  }
+
+  // 颜色
+  @each $type, $_ in vars.$color-types {
+    @include m.m($type) {
+      @include m.bem($root-name, bar) {
+        background-color: fn.use-var(color, $type);
+      }
+
+      @include m.bem($root-name, circle-ring) {
+        stroke: fn.use-var(color, $type);
+      }
+    }
+  }
+}

package/src/components/progress/style.ts

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

package/src/components/radio/index.ts

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

package/src/components/radio/radio.vue

@@ -0,0 +1,57 @@
+<template>
+  <label :class="classList">
+    <input
+      type="radio"
+      :class="cls.e('native')"
+      :value="value"
+      v-model="model"
+      :disabled="disabled"
+    />
+
+    <span :class="cls.e('label')">
+      <slot>{{ label }}</slot>
+    </span>
+
+    <!-- 右侧圆形选中标记：列表行式选项的移动端惯例 -->
+    <span :class="cls.e('indicator')">
+      <span :class="cls.e('dot')" v-if="radioChecked"></span>
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps } from '@veltra/compositions'
+import { injectFormContext } from '@veltra/utils'
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { RadioEmits, RadioProps } from '../../types/radio'
+
+defineOptions({ name: 'URadio' })
+
+const model = defineModel<any>()
+
+const props = withDefaults(defineProps<RadioProps>(), { disabled: undefined })
+
+defineEmits<RadioEmits>()
+
+const cls = bem('radio')
+
+const { formProps } = injectFormContext()
+
+const { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false
+})
+
+const radioChecked = computed(() => model.value === props.value)
+
+const classList = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('checked', radioChecked.value)
+  ]
+})
+</script>

package/src/components/radio/style.scss

@@ -0,0 +1,113 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: radio;
+
+// 移动端单选框指示器下限：过小难以辨认选中状态
+$indicator-min: 20px;
+
+@include m.b($root-name) {
+  vertical-align: middle;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: t.control-radius(small);
+  @include m.flex(inline-flex);
+  gap: t.spacing(default);
+
+  @include m.size using ($size) {
+    // 触控热区：整个 label 可点，不小于触控下限
+    min-height: max(t.control-height($size), t.use-var(touch-target));
+    min-width: t.use-var(touch-target);
+
+    @include m.bem($root-name, indicator) {
+      $indicator: max(calc(t.control-height($size) / 2), $indicator-min);
+
+      width: $indicator;
+      height: $indicator;
+      padding: 3px;
+    }
+
+    @include m.bem($root-name, label) {
+      font-size: t.use-var(font-size-main);
+    }
+  }
+
+  @include m.e(label) {
+    line-height: 1.4;
+    color: fn.use-var(text-color, main);
+    // 文本占满剩余宽度，把圆形选中标记推到行右
+    flex-grow: 1;
+  }
+
+  @include m.e(indicator) {
+    border-radius: 50%;
+    border: fn.use-var(border, width) fn.use-var(border, style)
+      #{fn.component-var(radio, border, fn.use-var(text-color, assist))};
+    box-sizing: border-box;
+    flex-shrink: 0;
+    overflow: hidden;
+    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);
+  }
+
+  @include m.e(dot) {
+    background-color: fn.use-var(color, primary);
+    border-radius: 50%;
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  @include m.is(checked) {
+    @include m.bem($root-name, indicator) {
+      border-color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(native) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  // label 不可聚焦，ring 由视觉隐藏的原生 input 驱动；移动端无 hover，按压反馈走 :active（整行底色）
+  @include m.is-not(disabled) {
+    &:active {
+      background-color: fn.use-var(color, default, light-9);
+
+      @include m.bem($root-name, indicator) {
+        border-color: fn.use-var(color, primary);
+      }
+    }
+
+    .um-#{$root-name}__native:focus-visible ~ .um-#{$root-name}__indicator {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
+  @include m.is(disabled) {
+    color: fn.use-var(text-color, disabled);
+    cursor: not-allowed;
+
+    @include m.bem($root-name, indicator) {
+      border-color: fn.use-var(border, muted-color);
+      background-color: fn.use-var(color, disabled);
+    }
+
+    @include m.bem($root-name, dot) {
+      background-color: fn.use-var(text-color, disabled);
+    }
+  }
+}
+
+// 嵌入表单行时占满控件区，整行热区与列表行式布局协同
+.um-form-item__content .um-#{$root-name} {
+  display: flex;
+  width: 100%;
+  min-height: t.use-var(form-row-height);
+}

package/src/components/radio/style.ts

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

package/src/components/radio-group/index.ts

@@ -0,0 +1 @@
+export { default as URadioGroup } from './radio-group.vue'

package/src/components/radio-group/radio-group.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="!readonly" v-bind="$attrs" :class="[cls.b, cls.m(size), bem.is('divider', divider)]">
+    <URadio
+      v-for="item of items"
+      :key="item[valueKey]"
+      :value="item[valueKey]"
+      :model-value="model"
+      @update:model-value="handleUpdate($event, item)"
+      :disabled="disabledItem?.(item) || disabled"
+      :size="size"
+    >
+      {{ item[labelKey] }}
+    </URadio>
+  </div>
+
+  <template v-else>
+    {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps } from '@veltra/compositions'
+import { fieldKey, FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { RadioGroupEmits, RadioGroupProps } from '../../types/radio-group'
+import URadio from '../radio/radio.vue'
+
+defineOptions({ name: 'URadioGroup', inheritAttrs: false })
+
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: undefined,
+  readonly: undefined
+})
+
+const model = defineModel<any>()
+
+const emit = defineEmits<RadioGroupEmits>()
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const cls = bem('radio-group')
+
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
+const handleUpdate = (value: any, item: Record<string, any>) => {
+  model.value = value
+  emit('change', item)
+}
+</script>

package/src/components/radio-group/style.scss

@@ -0,0 +1,29 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: radio-group;
+
+@include m.b($root-name) {
+  vertical-align: middle;
+  // 列表行式：选项纵向排列，整组占满可用宽度（表单内占满控件区）
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+
+  @include m.bem(radio) {
+    margin: 0;
+    display: flex;
+    min-height: t.use-var(form-row-height);
+  }
+
+  // 行间细分隔线可选
+  @include m.is(divider) {
+    @include m.bem(radio) {
+      &:not(:last-of-type) {
+        border-bottom: 1px solid fn.use-var(border, muted-color);
+      }
+    }
+  }
+}

package/src/components/radio-group/style.ts

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

package/src/components/segment/index.ts

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

package/src/components/segment/segment.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    v-if="!readonly"
+    v-bind="$attrs"
+    ref="trackRef"
+    :class="[cls.b, bem.is('block', block), bem.is('disabled', disabled), cls.m(size)]"
+    role="radiogroup"
+  >
+    <div :class="cls.e('thumb')" :style="thumbStyle" aria-hidden="true" />
+    <div
+      v-for="item of items"
+      :key="item[valueKey]"
+      :class="[
+        cls.e('item'),
+        bem.is('active', item[valueKey] === model),
+        bem.is('disabled', disabled || Boolean(disabledItem?.(item)))
+      ]"
+      role="radio"
+      :aria-checked="item[valueKey] === model"
+      :aria-disabled="disabled || Boolean(disabledItem?.(item))"
+      tabindex="0"
+      @click="handleSelect(item)"
+      @keydown.enter.prevent="handleSelect(item)"
+      @keydown.space.prevent="handleSelect(item)"
+    >
+      <slot name="item" :item="item" :active="item[valueKey] === model">
+        <span :class="cls.e('item-label')">{{ item[labelKey] }}</span>
+      </slot>
+    </div>
+  </div>
+
+  <template v-else>
+    {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps, useResizeObserver } from '@veltra/compositions'
+import { fieldKey, FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import { computed, nextTick, onMounted, shallowRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { SegmentEmits, SegmentItem, SegmentProps } from '../../types/segment'
+
+defineOptions({ name: 'USegment', inheritAttrs: false })
+
+const props = withDefaults(defineProps<SegmentProps>(), {
+  items: () => [],
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: undefined,
+  readonly: undefined,
+  block: false
+})
+
+const model = defineModel<any>()
+
+const emit = defineEmits<SegmentEmits>()
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const cls = bem('segment')
+
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
+const trackRef = shallowRef<HTMLElement>()
+const thumbX = shallowRef(0)
+const thumbY = shallowRef(0)
+const thumbW = shallowRef(0)
+const thumbH = shallowRef(0)
+const thumbRadius = shallowRef('0px')
+const thumbOn = shallowRef(false)
+
+const thumbStyle = computed(() => ({
+  width: `${thumbW.value}px`,
+  height: `${thumbH.value}px`,
+  borderRadius: thumbRadius.value,
+  transform: `translate(${thumbX.value}px, ${thumbY.value}px)`,
+  opacity: thumbOn.value ? '1' : '0'
+}))
+
+function measure() {
+  const track = trackRef.value
+  if (!track) return
+  const active = track.querySelector<HTMLElement>(':scope > .is-active')
+  if (!active) {
+    thumbOn.value = false
+    return
+  }
+  // 用布局坐标（offset*）：thumb 是 track 内的绝对定位元素，需要的正是 track 坐标系内的
+  // 位置与尺寸。getBoundingClientRect 是视觉坐标，祖先链上有 transform: scale（如演示用
+  // 设备壳）时会把缩放差引入 translate，导致滑块越偏离原点偏移越大。
+  thumbX.value = active.offsetLeft
+  thumbY.value = active.offsetTop
+  thumbW.value = active.offsetWidth
+  thumbH.value = active.offsetHeight
+  thumbRadius.value = getComputedStyle(active).borderRadius
+  thumbOn.value = true
+}
+
+useResizeObserver({ targets: trackRef, onResize: () => measure() })
+
+watch([model, () => props.items, size], () => nextTick(measure), { deep: true })
+
+onMounted(() => nextTick(measure))
+
+const handleSelect = (item: SegmentItem) => {
+  if (disabled.value || props.disabledItem?.(item)) return
+  const val = item[valueKey.value]
+  if (model.value === val) return
+  model.value = val
+  emit('change', item)
+}
+</script>

package/src/components/segment/style.scss

@@ -0,0 +1,118 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+@include m.b(segment) {
+  position: relative;
+  vertical-align: middle;
+  @include m.flex($display: inline-flex, $align: center);
+  gap: 2px;
+  padding: 2px;
+  background-color: fn.use-var(bg-color, bottom);
+  box-sizing: border-box;
+  max-width: 100%;
+  -webkit-tap-highlight-color: transparent;
+
+  @include m.e(thumb) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    pointer-events: none;
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, sm);
+    transition:
+      transform 200ms cubic-bezier(0.77, 0, 0.175, 1),
+      opacity 200ms cubic-bezier(0.77, 0, 0.175, 1);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  @include m.size using ($size) {
+    border-radius: t.control-radius($size);
+
+    @include m.bem(segment, item) {
+      // 密度走移动端 token：视觉高度 ≥32px、触控热区 ≥44×44
+      // （block 形态由更高特异性保持 min-width: 0 的弹性分配）
+      min-height: max(calc(#{t.control-height($size)} - 4px), t.use-var('touch-target'));
+      min-width: max(calc(#{t.control-height($size)} - 4px), t.use-var('touch-target'));
+      padding: 0 calc(#{t.spacing($size)} * 1.5);
+      border-radius: calc(#{t.control-radius($size)} - 2px);
+      font-size: t.use-var('font-size-main');
+    }
+  }
+
+  @include m.e(item) {
+    position: relative;
+    z-index: 1;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    background-color: transparent;
+    box-shadow: none;
+    font-weight: 500;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition:
+      color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    // 按压态（移动端无 hover，用 :active 提供触控反馈）
+    &:active:not(.is-active):not(.is-disabled) {
+      color: fn.use-var(text-color, title);
+      background-color: fn.color-a(color, 5, primary);
+    }
+
+    @include m.is(active) {
+      color: fn.use-var(color, primary);
+      background-color: transparent;
+      box-shadow: none;
+      font-weight: 600;
+    }
+
+    @include m.is(disabled) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      color: fn.use-var(text-color, disabled);
+    }
+
+    &:focus-visible:not(.is-disabled) {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
+  @include m.e(item-label) {
+    @include m.ellipsis;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include m.is(block) {
+    display: flex;
+    width: 100%;
+
+    @include m.bem(segment, item) {
+      flex: 1 1 0%;
+      width: 0;
+      min-width: 0;
+      display: inline-flex;
+      justify-content: center;
+    }
+  }
+
+  @include m.is(disabled) {
+    opacity: 0.7;
+
+    @include m.bem(segment, item) {
+      opacity: 1;
+    }
+  }
+}

package/src/components/segment/style.ts

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

package/src/components/select/index.ts

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