@veltra/mobile 1.0.0 → 1.1.0

package/src/components/skeleton/index.ts

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

package/src/components/skeleton/skeleton.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="loading" :class="className">
+    <span v-if="avatar" :class="cls.e('avatar')" />
+    <div :class="cls.e('content')">
+      <span v-if="title" :class="cls.e('title')" />
+      <template v-if="paragraph">
+        <span v-for="i in rows" :key="i" :class="cls.e('paragraph')" />
+      </template>
+      <span v-if="button" :class="cls.e('button')" />
+    </div>
+  </div>
+  <slot v-else />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { SkeletonProps } from '../../types/skeleton'
+
+defineOptions({ name: 'USkeleton' })
+
+const {
+  loading = true,
+  avatar = false,
+  title = true,
+  paragraph = true,
+  rows = 3,
+  button = false,
+  round = false,
+  animated = false
+} = defineProps<SkeletonProps>()
+
+const cls = bem('skeleton')
+
+const className = computed(() => [cls.b, bem.is('animated', animated), bem.is('round', round)])
+</script>

package/src/components/skeleton/style.scss

@@ -0,0 +1,95 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+// 方便拼接
+$root-name: skeleton;
+
+// 头像占位边长：移动端头像默认档
+$avatar-size: t.use-var(avatar-size-default);
+// 标题占位高度：主字号 + 4px（宽度按内容区比例收窄）
+$title-height: calc(#{t.use-var(font-size-main)} + #{t.use-var(spacing-xs)});
+$title-width: 33%;
+// 段落行占位高度：辅助字号 + 4px（末行收窄模拟自然段落）
+$paragraph-height: calc(#{t.use-var(font-size-secondary)} + #{t.use-var(spacing-xs)});
+$paragraph-last-width: 60%;
+// 按钮形态占位：宽度为触控热区两倍，高度走控件默认档
+$button-width: calc(#{t.use-var(touch-target)} * 2);
+// 呼吸动画一轮时长（token 无该量级档位，组件级常量）
+$pulse-duration: 1.4s;
+
+@include m.b($root-name) {
+  display: flex;
+  align-items: flex-start;
+  gap: t.use-var(spacing-md);
+
+  // 头像占位
+  @include m.e(avatar) {
+    flex: none;
+    width: $avatar-size;
+    height: $avatar-size;
+    border-radius: 50%;
+    background-color: fn.use-var(bg-color, hover);
+  }
+
+  // 文本区占位
+  @include m.e(content) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: t.use-var(spacing-md);
+    min-width: 0;
+  }
+
+  // 标题占位
+  @include m.e(title) {
+    height: $title-height;
+    width: $title-width;
+    border-radius: t.control-radius(small);
+    background-color: fn.use-var(bg-color, hover);
+  }
+
+  // 段落占位：末行收窄模拟自然段落
+  @include m.e(paragraph) {
+    height: $paragraph-height;
+    border-radius: t.control-radius(small);
+    background-color: fn.use-var(bg-color, hover);
+
+    &:last-child {
+      width: $paragraph-last-width;
+    }
+  }
+
+  // 按钮形态占位：圆角与 button 控件档一致
+  @include m.e(button) {
+    width: $button-width;
+    height: t.control-height(default);
+    border-radius: t.control-radius(default);
+    background-color: fn.use-var(bg-color, hover);
+  }
+
+  // 胶囊形态：作用于标题 / 段落 / 按钮
+  @include m.is(round) {
+    @include m.bem($root-name, title paragraph button) {
+      border-radius: 999px;
+    }
+  }
+
+  // 动画：占位块呼吸明暗
+  @include m.is(animated) {
+    @include m.bem($root-name, avatar title paragraph button) {
+      animation: um-skeleton-pulse $pulse-duration ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes um-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}

package/src/components/skeleton/style.ts

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

package/src/components/space/index.ts

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

package/src/components/space/space.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :class="classList" :style="style">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { SpaceProps } from '../../types/space'
+
+defineOptions({ name: 'USpace' })
+
+const {
+  size = 'default',
+  direction = 'horizontal',
+  align = 'center',
+  wrap = false
+} = defineProps<SpaceProps>()
+
+const cls = bem('space')
+
+const classList = computed(() => [
+  cls.b,
+  cls.m(direction),
+  typeof size === 'string' && cls.m(size),
+  cls.m('align-' + align),
+  bem.is('wrap', wrap)
+])
+
+/** 间距档走 token class；数字与二元组写内联 gap */
+const style = computed(() => {
+  if (typeof size === 'number') {
+    return { gap: `${size}px` }
+  }
+
+  if (Array.isArray(size)) {
+    const [horizontal, vertical] = size
+    return { columnGap: `${horizontal}px`, rowGap: `${vertical}px` }
+  }
+
+  return undefined
+})
+</script>

package/src/components/space/style.scss

@@ -0,0 +1,41 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use '../../styles/tokens' as t;
+
+// 方便拼接
+$root-name: space;
+
+@include m.b($root-name) {
+  display: inline-flex;
+  gap: t.use-var(spacing-md);
+  align-items: center;
+
+  @include m.m(vertical) {
+    flex-direction: column;
+  }
+
+  @include m.is(wrap) {
+    flex-wrap: wrap;
+  }
+
+  // 间距档：走 --um-* 间距刻度 token
+  @include m.m(small) {
+    gap: t.use-var(spacing-sm);
+  }
+
+  @include m.m(large) {
+    gap: t.use-var(spacing-lg);
+  }
+
+  // 交叉轴对齐
+  @include m.m(align-start) {
+    align-items: flex-start;
+  }
+
+  @include m.m(align-end) {
+    align-items: flex-end;
+  }
+
+  @include m.m(align-baseline) {
+    align-items: baseline;
+  }
+}

package/src/components/space/style.ts

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

package/src/components/steps/index.ts

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

package/src/components/steps/steps.vue

@@ -0,0 +1,114 @@
+<template>
+  <ol :class="className" ref="steps">
+    <li
+      v-for="(item, index) in items"
+      :key="index"
+      :class="[
+        cls.e('item'),
+        bem.is('current', index === currentIndex),
+        bem.is('finished', currentIndex === undefined || index < currentIndex)
+      ]"
+      @click="handleStepClick(item, index)"
+    >
+      <div :class="cls.e('node')">
+        <i :class="cls.e('link')" v-if="index !== items.length - 1"></i>
+
+        <span :class="cls.e('icon')">
+          <slot name="icon" :item="item" :index="index">
+            <Check v-if="currentIndex === undefined || index < currentIndex" />
+
+            <template v-else>
+              {{ index + 1 }}
+            </template>
+          </slot>
+        </span>
+      </div>
+
+      <div :class="cls.e('content')">
+        <slot name="content" :item="item" :index="index">
+          {{ item[labelKey] }}
+        </slot>
+      </div>
+    </li>
+  </ol>
+</template>
+
+<script lang="ts" setup>
+import { Check } from '@veltra/icons/normal'
+import { fieldKey } from '@veltra/utils'
+import { computed, useTemplateRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { StepsEmits, StepsProps, StepsSlotScope } from '../../types/steps'
+
+defineOptions({ name: 'USteps' })
+
+const props = withDefaults(defineProps<StepsProps>(), {
+  direction: 'horizontal',
+  finishedStepType: 'success',
+  labelKey: 'label'
+})
+
+const emit = defineEmits<StepsEmits>()
+
+defineSlots<{ icon?: (scope: StepsSlotScope) => any; content?: (scope: StepsSlotScope) => any }>()
+
+const cls = bem('steps')
+
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+
+const className = computed(() => {
+  const { direction, currentStepType, finishedStepType } = props
+  const ret: string[] = [
+    cls.b,
+    bem.is(direction),
+    cls.m(props.size ?? 'default'),
+    bem.is('align-center', props.alignCenter),
+    cls.em('finished', finishedStepType)
+  ]
+  currentStepType && ret.push(cls.em('current', currentStepType))
+  return ret
+})
+
+const stepsRef = useTemplateRef('steps')
+
+const currentToIndexMap = computed<Record<string, number> | undefined>(() => {
+  const { currentKey, items } = props
+  if (!currentKey) return undefined
+  return items.reduce(
+    (acc, item, index) => {
+      acc[item[currentKey]] = index
+      return acc
+    },
+    {} as Record<string, number>
+  )
+})
+
+/** 当前索引 */
+const currentIndex = computed<number | undefined>(() => {
+  const { currentKey, current } = props
+  if (current === undefined) return undefined
+
+  if (currentKey) {
+    return currentToIndexMap.value?.[current]
+  }
+
+  if (typeof current !== 'number') return undefined
+  return Math.min(Math.max(current, 0), props.items.length - 1)
+})
+
+// 横向滚动形态下把当前步骤滚入视野
+watch(currentIndex, (index) => {
+  if (index === undefined || props.direction === 'vertical') return
+  const step = stepsRef.value?.children[index]
+  if (step) {
+    step.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+  }
+})
+
+// 点击步骤项
+function handleStepClick(item: Record<string, any>, index: number) {
+  emit('item-click', item, index)
+  emit('update:current', props.currentKey ? item[props.currentKey] : index)
+}
+</script>

package/src/components/steps/style.scss

@@ -0,0 +1,231 @@
+@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: steps;
+
+// 触控可读的下限：圆圈直径与点击热区不小于该值
+$icon-min: 40px;
+
+@include m.b($root-name) {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  font-size: t.use-var('font-size-main');
+  color: fn.use-var(text-color, main);
+  -webkit-tap-highlight-color: transparent;
+
+  @each $type, $_ in vars.$color-types {
+    @include m.em(finished, $type) {
+      @include m.bem($root-name, item) {
+        @include m.is(finished) {
+          color: fn.use-var(color, $type);
+        }
+      }
+    }
+    @include m.em(current, $type) {
+      @include m.bem($root-name, item) {
+        @include m.is(current) {
+          color: fn.use-var(color, $type);
+        }
+      }
+    }
+  }
+
+  /** 步骤项（整项可点击，热区高度不小于 44px） */
+  @include m.e(item) {
+    font-weight: 600;
+    color: fn.use-var(text-color, placeholder);
+    min-height: t.use-var('touch-target');
+    border-radius: t.control-radius(default);
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    // 可点项按压反馈（移动端无 hover）
+    &:active {
+      background-color: fn.use-var(bg-color, hover);
+    }
+  }
+
+  @include m.e(node) {
+    position: relative;
+  }
+
+  @include m.e(link) {
+    background-color: currentColor;
+    position: absolute;
+    margin: auto;
+    z-index: 0;
+  }
+
+  @keyframes um-steps-link-flow-horizontal {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      // 位移是虚线周期（8px）的整数倍，保证流动动画首尾衔接
+      background-position: 16px 0;
+    }
+  }
+
+  @keyframes um-steps-link-flow-vertical {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 0 16px;
+    }
+  }
+
+  @keyframes um-steps-icon-breathing {
+    0% {
+      color: fn.use-var(text-color, placeholder);
+      border-color: fn.use-var(text-color, placeholder);
+    }
+    50% {
+      color: currentColor;
+      border-color: currentColor;
+    }
+    100% {
+      color: fn.use-var(text-color, placeholder);
+      border-color: fn.use-var(text-color, placeholder);
+    }
+  }
+
+  @include m.e(icon) {
+    display: flex;
+    border: 2px solid currentColor;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    background-color: fn.use-var(bg-color, top);
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    transition: opacity 0.3s ease;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+  }
+
+  @include m.bem($root-name, item) {
+    @include m.is(current) {
+      @include m.bem($root-name, icon) {
+        animation: um-steps-icon-breathing 2s ease-in-out infinite;
+        will-change: opacity;
+      }
+    }
+  }
+
+  /** 步骤项描述 */
+  @include m.e(content) {
+    padding: t.use-var('spacing-sm') 0;
+    word-break: break-word;
+  }
+
+  // 横向滚动形态：窄屏不压缩步骤，超出横向滚动
+  @include m.is(horizontal) {
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @include m.bem($root-name, item) {
+      flex: 1 0 auto;
+      min-width: 100px;
+
+      @include m.is(current) {
+        @include m.bem($root-name, link) {
+          background-color: transparent;
+          background-image: linear-gradient(
+            to right,
+            currentColor 0%,
+            currentColor 50%,
+            transparent 50%,
+            transparent 100%
+          );
+          background-size: 8px 2px;
+          animation: um-steps-link-flow-horizontal 1s linear infinite;
+        }
+      }
+    }
+
+    @include m.bem($root-name, link) {
+      width: 100%;
+      height: 2px;
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    @include m.is(align-center) {
+      @include m.bem($root-name, (content, node)) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      @include m.bem($root-name, link) {
+        left: 50%;
+      }
+    }
+  }
+
+  // 纵向形态：窄屏主形态，节点在左、内容在右
+  @include m.is(vertical) {
+    @include m.bem($root-name, item) {
+      @include m.flex($align: stretch, $wrap: nowrap);
+      gap: t.use-var('spacing-md');
+      padding-bottom: t.use-var('spacing-md');
+
+      &:last-child {
+        padding-bottom: 0;
+      }
+
+      @include m.is(current) {
+        @include m.bem($root-name, link) {
+          background-color: transparent;
+          background-image: linear-gradient(
+            to bottom,
+            currentColor 0%,
+            currentColor 50%,
+            transparent 50%,
+            transparent 100%
+          );
+          background-size: 2px 8px;
+          animation: um-steps-link-flow-vertical 1s linear infinite;
+        }
+      }
+    }
+
+    @include m.bem($root-name, link) {
+      height: 100%;
+      width: 2px;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    // 长文本在窄屏换行而非撑破容器
+    @include m.bem($root-name, content) {
+      min-width: 0;
+    }
+  }
+
+  @include m.size using ($size) {
+    @include m.bem($root-name, icon) {
+      font-size: t.use-var('font-size-main');
+      width: max(t.control-height($size), $icon-min);
+      height: max(t.control-height($size), $icon-min);
+    }
+  }
+}

package/src/components/steps/style.ts

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

package/src/components/switch/index.ts

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