@veltra/mobile 1.0.0 → 1.1.0

package/src/components/list/style.scss

@@ -0,0 +1,50 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: list;
+$item-name: $root-name + '-item';
+
+// 移动端列表：无滚动包装层，原生 ul/li 直接承载滚动；
+// 行高、字号、行间距走 --um-* 密度 token，行高保底 44px 触控热区
+@include m.b($root-name) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  // 行基础形态（与尺寸档无关）+ 可点行按压态
+  @include m.bem($item-name) {
+    display: flex;
+    align-items: center;
+    line-height: 1.4;
+    font-size: t.use-var(font-size-main);
+
+    // 绑定 @click 即视为可点行：移动端无 hover，用 :active 提供按压反馈
+    @include m.is(clickable) {
+      -webkit-tap-highlight-color: transparent;
+
+      &:active {
+        background-color: fn.use-var(bg-color, hover);
+      }
+    }
+  }
+
+  // 尺寸档：行高取控件高度档并保底 44px，横向内边距走间距刻度
+  @include m.size using ($size) {
+    @include m.bem($item-name) {
+      $padding: t.use-var(spacing-lg);
+
+      @if $size == small {
+        $padding: t.use-var(spacing-md);
+      }
+
+      @if $size == large {
+        $padding: t.use-var(spacing-xl);
+      }
+
+      padding: 0 $padding;
+      border-radius: t.control-radius($size);
+      min-height: max(t.control-height($size), t.use-var(touch-target));
+    }
+  }
+}

package/src/components/list/style.ts

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

package/src/components/loading/directive.ts

@@ -0,0 +1,34 @@
+import { createVNode, render, type DirectiveBinding, type ObjectDirective } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { LoadingType } from '../../types/loading'
+import LoadingComponent from './loading.vue'
+
+const loadingCls = bem('loading')
+const loadingContainerCls = loadingCls.e('container')
+
+function renderLoading(el: HTMLElement, binding: DirectiveBinding) {
+  el.classList.add(loadingContainerCls)
+
+  const node = createVNode(LoadingComponent, { type: binding.arg as LoadingType })
+
+  render(node, el)
+}
+
+function removeLoading(el: HTMLElement) {
+  render(null, el)
+  el.classList.remove(loadingContainerCls)
+}
+export const vLoading: ObjectDirective<HTMLElement> = {
+  mounted(el, binding) {
+    binding.value && renderLoading(el, binding)
+  },
+
+  updated(el, binding) {
+    binding.value ? renderLoading(el, binding) : removeLoading(el)
+  },
+
+  unmounted(el) {
+    removeLoading(el)
+  }
+}

package/src/components/loading/index.ts

@@ -0,0 +1,3 @@
+export { default as ULoading } from './loading.vue'
+
+export { vLoading } from './directive'

package/src/components/loading/loading.vue

@@ -0,0 +1,25 @@
+<template>
+  <transition name="fade" appear>
+    <div :class="className" :style="{ zIndex: zIndex() }">
+      <div :class="cls.e('loader')"></div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { zIndex } from '@veltra/utils'
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { LoadingProps } from '../../types/loading'
+
+defineOptions({ name: 'ULoading' })
+
+const props = withDefaults(defineProps<LoadingProps>(), { type: 'dual-ring' })
+
+const cls = bem('loading')
+
+const className = computed(() => {
+  return [cls.b, cls.e(props.type)]
+})
+</script>

package/src/components/loading/style.scss

@@ -0,0 +1,179 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: loading;
+
+// 指示器基准边长：走 --um-* 密度 token，各形态几何按其比例推导
+$indicator: t.use-var(loading-indicator);
+// 环形描边与内环参数（比例常量）
+$ring-border: calc(#{$indicator} / 12);
+$ring-inner-border: calc(#{$indicator} / 18);
+$ring-inner-inset: calc(#{$indicator} / 6);
+// 三点 / 竖条的单元尺寸（比例常量）
+$dot-size: calc(#{$indicator} / 4);
+$dot-gap: calc(#{$indicator} / 6);
+$bar-width: calc(#{$indicator} / 6);
+$bar-height: calc(#{$indicator} * 3 / 4);
+
+@include m.b($root-name) {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: fn.use-var(bg-color, top, alpha);
+  color: fn.use-var(color, primary);
+  @include m.flex($justify: center, $align: center);
+
+  @include m.e(container) {
+    position: relative;
+  }
+
+  // ============================================================
+  // dual-ring — 双环反向旋转（经典 loader）
+  // 外环顺时针，内嵌小环逆时针，border + linear 旋转无缝循环
+  // ============================================================
+  @include m.e(dual-ring) {
+    @include m.bem($root-name, loader) {
+      width: $indicator;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      border: #{$ring-border} solid fn.color-a(color, 22, primary);
+      border-top-color: currentColor;
+      position: relative;
+      animation: um-loading-spin 0.8s linear infinite;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: $ring-inner-inset;
+        border-radius: 50%;
+        border: #{$ring-inner-border} solid fn.color-a(color, 22, primary);
+        border-bottom-color: currentColor;
+        animation: um-loading-spin 1.2s linear infinite reverse;
+      }
+    }
+  }
+
+  // ============================================================
+  // dot — 三点呼吸弹跳
+  // 元素自身 + 两个伪元素，交错起伏
+  // ============================================================
+  @include m.e(dot) {
+    @include m.bem($root-name, loader) {
+      width: $dot-size;
+      height: $dot-size;
+      border-radius: 50%;
+      background: currentColor;
+      position: relative;
+      animation: um-loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        width: $dot-size;
+        height: $dot-size;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      &::before {
+        left: calc(-1 * (#{$dot-size} + #{$dot-gap}));
+        animation: um-loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+        animation-delay: 0.18s;
+      }
+
+      &::after {
+        right: calc(-1 * (#{$dot-size} + #{$dot-gap}));
+        animation: um-loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+        animation-delay: 0.36s;
+      }
+    }
+  }
+
+  // ============================================================
+  // ring — 单环旋转
+  // ============================================================
+  @include m.e(ring) {
+    @include m.bem($root-name, loader) {
+      width: $indicator;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      border: #{$ring-border} solid fn.color-a(color, 22, primary);
+      border-top-color: currentColor;
+      animation: um-loading-spin 0.9s linear infinite;
+    }
+  }
+
+  // ============================================================
+  // bars — 三条音频跳动
+  // 三根竖条以容器中心为基准上下对称伸缩
+  // ============================================================
+  @include m.e(bars) {
+    @include m.bem($root-name, loader) {
+      width: $bar-width;
+      height: $bar-height;
+      background: currentColor;
+      border-radius: calc(#{$bar-width} / 2);
+      position: relative;
+      animation: um-loading-bars 1s ease-in-out infinite;
+      animation-delay: 0.15s;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: $bar-width;
+        height: $bar-height;
+        background: currentColor;
+        border-radius: calc(#{$bar-width} / 2);
+        animation: um-loading-bars 1s ease-in-out infinite;
+      }
+
+      &::before {
+        left: calc(-1 * (#{$bar-width} + #{$dot-gap}));
+      }
+
+      &::after {
+        right: calc(-1 * (#{$bar-width} + #{$dot-gap}));
+        animation-delay: 0.3s;
+      }
+    }
+  }
+}
+
+// ================================================================
+// 关键帧
+// ================================================================
+
+@keyframes um-loading-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes um-loading-dot {
+  0%,
+  100% {
+    transform: scale(0.5);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// 竖条伸缩的上下限按指示器基准推导（CSS 变量在关键帧内按动画元素解析）
+@keyframes um-loading-bars {
+  0%,
+  100% {
+    height: calc(#{$indicator} / 4);
+  }
+  50% {
+    height: $bar-height;
+  }
+}

package/src/components/loading/style.ts

@@ -0,0 +1,2 @@
+import '@veltra/styles/transitions/fade.scss'
+import './style.scss'

package/src/components/message/helper.ts

@@ -0,0 +1,28 @@
+import {
+  CircleCheckFilled,
+  CircleClose,
+  InfoFilled,
+  QuestionFilled,
+  WarningFilled
+} from '@veltra/icons/normal'
+import type { ColorType } from '@veltra/utils'
+import type { DefineComponent } from 'vue'
+
+import type { MessageType } from '../../types/message'
+
+const typeIcons = {
+  default: InfoFilled,
+  info: QuestionFilled,
+  success: CircleCheckFilled,
+  warn: WarningFilled,
+  error: CircleClose
+}
+export function getTypeIcon(type: MessageType, icon?: DefineComponent): DefineComponent {
+  return (icon ?? typeIcons[type]) as any
+}
+
+const typeColors = { error: 'danger', warn: 'warning' }
+
+export function getTypeColor(type: MessageType): ColorType {
+  return typeColors[type] ?? type
+}

package/src/components/message/index.ts

@@ -0,0 +1,3 @@
+export { default as UMessage } from './message.vue'
+
+export { message } from './message'

package/src/components/message/message-box.vue

@@ -0,0 +1,31 @@
+<template>
+  <transition-group name="message" appear @after-leave="handleAfterLeave">
+    <UMessage
+      v-for="({ onClose, ...message }, index) of messages"
+      :key="message.key"
+      v-bind="message"
+      :data-id="message.key"
+      @close="handleClose(index, onClose)"
+    />
+  </transition-group>
+</template>
+
+<script lang="ts" setup>
+import type { MessageOptions } from '../../types/message'
+import UMessage from './message.vue'
+
+defineOptions({ name: 'UMessageBox' })
+
+defineProps<{ messages: Array<Omit<MessageOptions & { key: string }, 'onClosed'>> }>()
+
+const emit = defineEmits<{ (e: 'closed', id: string): void; (e: 'close', index: number): void }>()
+
+function handleAfterLeave(el: Element) {
+  emit('closed', (el as HTMLElement).dataset.id as string)
+}
+
+function handleClose(i: number, onClose?: () => void) {
+  emit('close', i)
+  onClose?.()
+}
+</script>

package/src/components/message/message.ts

@@ -0,0 +1,122 @@
+import { setStyles, zIndex } from '@veltra/utils'
+import { h, render, shallowReactive } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { Message, MessageInstance, MessageOptions } from '../../types/message'
+import { getOverlayContainer } from '../_internal/overlay-container'
+import UMessageBox from './message-box.vue'
+
+const cls = bem('message')
+
+/** 消息项数据结构 */
+type MessageItem = MessageOptions & { key: string }
+
+/** --- 状态管理 --- */
+let container: HTMLElement | null = null
+const messages = shallowReactive<MessageItem[]>([])
+
+/** 消息关闭后回调 */
+const closedCallbacks = new Map<string, () => void>()
+
+/** 用于计数正在显示的 DOM 节点 (包含动画执行中) */
+let activeCount = 0
+let uid = 0
+
+/** --- 内部辅助函数 --- */
+
+/** 彻底销毁容器 */
+const destroy = () => {
+  if (container) {
+    render(null, container)
+    container.remove()
+    container = null
+  }
+}
+
+/** 离开动画结束后的清理 */
+const handleClosed = (id: string) => {
+  activeCount--
+
+  const cb = closedCallbacks.get(id)
+  if (cb) {
+    cb()
+    closedCallbacks.delete(id)
+  }
+
+  // 没有活跃消息时销毁容器，保持页面干净
+  if (activeCount === 0) destroy()
+}
+
+/** 触发关闭 (仅从数组移除，触发 Transition 离开动画) */
+const handleClose = (id: string) => {
+  const index = messages.findIndex((m) => m.key === id)
+  if (index !== -1) messages.splice(index, 1)
+}
+
+/** 挂载并渲染容器 */
+const ensureContainer = () => {
+  // 宿主容器可能随设备外壳卸载而失效，失联时重建
+  if (container?.isConnected) return container
+  container = null
+
+  container = document.createElement('ul')
+  container.className = cls.e('container')
+  getOverlayContainer().appendChild(container)
+  return container
+}
+
+/** 执行 Vue 渲染逻辑 */
+const updateView = () => {
+  const el = ensureContainer()
+  setStyles(el, { zIndex: zIndex() })
+
+  const vnode = h(UMessageBox, {
+    messages,
+    onClosed: handleClosed,
+    onClose: (i: number) => messages.splice(i, 1)
+  })
+
+  vnode.appContext = message._context
+  render(vnode, el)
+}
+
+/** 创建消息实例 */
+const createMessage = (options: MessageOptions): MessageInstance => {
+  const { onClosed: userOnClosed, ...messageOptions } = options
+  const id = `msg_${uid++}`
+  activeCount++
+
+  // 生命周期 Promise
+  let resolveClosed: () => void
+  const onClosed = new Promise<void>((r) => (resolveClosed = r))
+
+  closedCallbacks.set(id, () => {
+    userOnClosed?.()
+    resolveClosed()
+  })
+
+  messages.push({ key: id, ...messageOptions })
+  updateView()
+
+  return { id, close: () => handleClose(id), onClosed }
+}
+
+/** --- 导出 API --- */
+
+export const message = ((options) => {
+  const mergedOptions = typeof options === 'string' ? { message: options } : options
+  return createMessage(mergedOptions)
+}) as Message
+
+message._context = null
+
+// 挂载快捷方法: message.success(...)
+const messageTypes = ['success', 'warn', 'info', 'error', 'default'] as const
+messageTypes.forEach((type) => {
+  message[type] = (msg, config) => message({ ...config, message: msg, type })
+})
+
+/** 关闭所有当前显示的消息 */
+message.closeAll = () => {
+  messages.splice(0)
+}

package/src/components/message/message.vue

@@ -0,0 +1,54 @@
+<template>
+  <li :class="[cls.b, cls.m('color-' + getTypeColor(type))]">
+    <span :class="cls.e('icon')">
+      <UIcon>
+        <component :is="getTypeIcon(type, icon)" />
+      </UIcon>
+    </span>
+    <div :class="cls.e('content')" v-if="html" v-html="message"></div>
+    <div :class="cls.e('content')" v-else>
+      {{ message }}
+    </div>
+    <button
+      :class="cls.e('close')"
+      v-if="closable || duration === 0"
+      type="button"
+      aria-label="关闭"
+      @click.stop="immediateClose"
+    >
+      <UIcon><Close /></UIcon>
+    </button>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { Close } from '@veltra/icons/normal'
+import { onBeforeUnmount, onMounted } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { MessageProps } from '../../types/message'
+import { UIcon } from '../icon'
+import { getTypeColor, getTypeIcon } from './helper'
+
+defineOptions({ name: 'UMessage' })
+
+const props = withDefaults(defineProps<MessageProps>(), { type: 'default', duration: 3000 })
+
+const emit = defineEmits<{ (e: 'close'): void }>()
+
+const cls = bem('message')
+
+// 移动端无 hover，不做悬停暂停：到时关闭，点击关闭按钮立即关闭
+let timer: number | undefined
+
+onMounted(() => {
+  if (props.duration <= 0) return
+  timer = setTimeout(() => emit('close'), props.duration)
+})
+
+onBeforeUnmount(() => clearTimeout(timer))
+
+function immediateClose() {
+  emit('close')
+}
+</script>

package/src/components/message/style.scss

@@ -0,0 +1,130 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars' as vars;
+@use '../../styles/tokens' as t;
+
+// 方便拼接
+$root-name: message;
+
+// 顶部轻提示容器：视口顶部居中列排，避让刘海安全区
+@include m.bem($root-name, container) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // 两侧留白保证提示在窄视口内不贴边溢出；顶部避让刘海安全区
+  padding: calc(#{t.use-var(spacing-md)} + constant(safe-area-inset-top)) #{t.use-var(spacing-md)} 0;
+  padding: calc(#{t.use-var(spacing-md)} + env(safe-area-inset-top)) #{t.use-var(spacing-md)} 0;
+  pointer-events: none;
+}
+
+@include m.b($root-name) {
+  pointer-events: auto;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  // 触控热区不小于 44（含可关闭提示的整条热区）
+  min-height: t.use-var(touch-target);
+  max-width: 100%;
+  margin-bottom: t.use-var(spacing-sm);
+  padding: t.use-var(spacing-sm) t.use-var(spacing-lg);
+  gap: t.use-var(spacing-sm);
+  border-radius: t.use-var('panel-radius');
+  font-size: t.use-var(font-size-main);
+  line-height: 1.5;
+  box-shadow: fn.use-var(shadow, lg);
+
+  @include m.e(icon) {
+    display: inline-flex;
+    flex-shrink: 0;
+
+    // 与 UIcon 的 1em 图标对齐
+    > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  @include m.e(content) {
+    min-width: 0;
+    word-break: break-all;
+  }
+
+  @include m.e(close) {
+    // 关闭热区不小于 44x44（外扩补足，不挤压内容）
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: t.use-var(touch-target);
+    min-height: t.use-var(touch-target);
+    margin: calc(-1 * #{t.use-var(spacing-sm)}) calc(-1 * #{t.use-var(spacing-lg)});
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font-size: 1em;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+
+    > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  @each $type, $_ in vars.$color-types {
+    @if ($type == 'default') {
+      @include m.m(color-#{$type}) {
+        background-color: fn.use-var(color, $type);
+        color: fn.use-var(text-color, main);
+      }
+    } @else {
+      @include m.m(color-#{$type}) {
+        background-color: fn.use-var(color, $type, 'light-9');
+        color: fn.use-var(color, $type);
+      }
+    }
+  }
+}
+
+/* 进出场：自顶部滑入滑出（transition-group name="message"） */
+.#{$root-name}-move,
+.#{$root-name}-enter-active,
+.#{$root-name}-leave-active {
+  transition:
+    opacity fn.use-var(transition, normal) fn.use-var(transition, ease),
+    transform fn.use-var(transition, normal) fn.use-var(transition, ease);
+}
+
+.#{$root-name}-enter-from,
+.#{$root-name}-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+/* 确保将离开的元素从布局流中删除
+  以便能够正确地计算移动的动画。 */
+.#{$root-name}-leave-active {
+  position: absolute;
+  width: max-content;
+}
+
+// 减弱动态效果：不位移、不缩放，堆叠重排也不滑动，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .message-move,
+  .message-enter-active,
+  .message-leave-active {
+    transition-property: opacity;
+  }
+
+  .message-enter-from,
+  .message-leave-to {
+    transform: none;
+    opacity: 0;
+  }
+}

package/src/components/message/style.ts

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

package/src/components/message-confirm/index.ts

@@ -0,0 +1,3 @@
+export { default as UMessageConfirm } from './message-confirm.vue'
+
+export { messageConfirm } from './message-confirm'