@veltra/mobile 1.0.0 → 1.1.0

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

@@ -0,0 +1,36 @@
+<template>
+  <transition-group name="message-confirm" tag="div" appear @after-leave="handleAfterLeave">
+    <UMessageConfirm
+      v-for="{ onClose, onClosed, ...confirm } of confirms"
+      :key="confirm.key"
+      v-bind="confirm"
+      :data-key="confirm.key"
+      @close="handleClose(confirm.key, onClose, $event)"
+    />
+  </transition-group>
+</template>
+
+<script lang="ts" setup>
+import type { MessageConfirmAction, MessageConfirmOptions } from '../../types/message-confirm'
+import UMessageConfirm from './message-confirm.vue'
+
+defineOptions({ name: 'UMessageConfirmBox' })
+
+type ConfirmItem = MessageConfirmOptions & { key: string }
+
+defineProps<{ confirms: ConfirmItem[] }>()
+
+const emit = defineEmits<{
+  (e: 'closed', key: string): void
+  (e: 'close', key: string, action: MessageConfirmAction): void
+}>()
+
+function handleAfterLeave(el: Element) {
+  emit('closed', (el as HTMLElement).dataset.key as string)
+}
+
+function handleClose(key: string, onClose: ConfirmItem['onClose'], action: MessageConfirmAction) {
+  emit('close', key, action)
+  onClose?.(action)
+}
+</script>

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

@@ -0,0 +1,139 @@
+import { setStyles, zIndex } from '@veltra/utils'
+import { h, render, shallowReactive } from 'vue'
+
+import { bem } from '../../shared/bem'
+import { useScrollLock } from '../../shared/use-scroll-lock'
+import type {
+  MessageConfirm,
+  MessageConfirmAction,
+  MessageConfirmInstance,
+  MessageConfirmOptions
+} from '../../types/message-confirm'
+import { getOverlayContainer } from '../_internal/overlay-container'
+import UMessageConfirmBox from './message-confirm-box.vue'
+
+const cls = bem('message-confirm')
+
+/** 确认框项数据结构 */
+type ConfirmItem = MessageConfirmOptions & { key: string }
+
+/** --- 状态管理 --- */
+let container: HTMLElement | null = null
+const confirms = shallowReactive<ConfirmItem[]>([])
+
+/** 弹层存在期间锁定 body 滚动（首个弹出锁定、最后一个关闭动画结束后解锁） */
+const { lock: lockScroll, unlock: unlockScroll } = useScrollLock()
+
+/** 关闭动画结束后的回调 */
+const closedCallbacks = new Map<string, (action: MessageConfirmAction) => void>()
+
+/** 记录每项关闭时的用户操作，动画结束后随回调抛出 */
+const pendingActions = new Map<string, MessageConfirmAction>()
+
+/** 用于计数正在显示的 DOM 节点 (包含动画执行中) */
+let activeCount = 0
+let uid = 0
+
+/** --- 内部辅助函数 --- */
+
+/** 彻底销毁容器 */
+const destroy = () => {
+  if (container) {
+    render(null, container)
+    container.remove()
+    container = null
+  }
+}
+
+/** 离开动画结束后的清理 */
+const handleClosed = (key: string) => {
+  activeCount--
+
+  // 最后一个确认框关闭：解锁背景滚动（还原原滚动位置）
+  if (activeCount === 0) unlockScroll()
+
+  const cb = closedCallbacks.get(key)
+  if (cb) {
+    cb(pendingActions.get(key) ?? 'cancel')
+    closedCallbacks.delete(key)
+  }
+  pendingActions.delete(key)
+
+  // 没有活跃确认框时销毁容器，保持页面干净
+  if (activeCount === 0) destroy()
+}
+
+/** 触发关闭 (仅从数组移除，触发 Transition 离开动画) */
+const handleClose = (key: string, action: MessageConfirmAction) => {
+  pendingActions.set(key, action)
+  const index = confirms.findIndex((c) => c.key === key)
+  if (index !== -1) confirms.splice(index, 1)
+}
+
+/** 挂载并渲染容器 */
+const ensureContainer = () => {
+  // 宿主容器可能随设备外壳卸载而失效，失联时重建
+  if (container?.isConnected) return container
+  container = null
+
+  container = document.createElement('div')
+  container.className = cls.e('container')
+  getOverlayContainer().appendChild(container)
+  return container
+}
+
+/** 执行 Vue 渲染逻辑 */
+const updateView = (layer: number) => {
+  const el = ensureContainer()
+  setStyles(el, { zIndex: layer })
+
+  const vnode = h(UMessageConfirmBox, { confirms, onClosed: handleClosed, onClose: handleClose })
+
+  vnode.appContext = messageConfirm._context
+  render(vnode, el)
+}
+
+/** 创建确认框实例 */
+const createConfirm = (options: MessageConfirmOptions): MessageConfirmInstance => {
+  const { onClosed: userOnClosed, ...confirmOptions } = options
+  const id = `confirm_${uid++}`
+  activeCount++
+
+  // 首个确认框弹出：锁定背景滚动
+  if (activeCount === 1) lockScroll()
+
+  // 生命周期 Promise
+  let resolveClosed: (action: MessageConfirmAction) => void
+  const onClosed = new Promise<MessageConfirmAction>((r) => (resolveClosed = r))
+
+  closedCallbacks.set(id, (action) => {
+    userOnClosed?.(action)
+    resolveClosed(action)
+  })
+
+  const layer = confirmOptions.zIndex ?? zIndex()
+  confirms.push({ ...confirmOptions, zIndex: layer, key: id })
+  updateView(layer)
+
+  return { id, close: (action = 'cancel') => handleClose(id, action), onClosed }
+}
+
+/** --- 导出 API --- */
+
+export const messageConfirm = ((options) => {
+  return createConfirm(typeof options === 'string' ? { message: options } : options)
+}) as MessageConfirm
+
+messageConfirm._context = null
+
+// 挂载快捷方法: messageConfirm.danger(...)
+const confirmTypes = ['primary', 'success', 'info', 'warning', 'danger'] as const
+confirmTypes.forEach((type) => {
+  messageConfirm[type] = (msg, config) =>
+    messageConfirm({ ...config, message: msg, confirmButtonType: type })
+})
+
+/** 关闭所有当前显示的确认框 */
+messageConfirm.closeAll = () => {
+  confirms.splice(0)
+}

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

@@ -0,0 +1,53 @@
+<template>
+  <div :class="[cls.b, cls.m(size)]" :style="{ zIndex: layer }">
+    <div :class="cls.e('mask')"></div>
+    <div :class="cls.e('box')" role="alertdialog" aria-modal="true">
+      <div :class="cls.e('header')" v-if="title">{{ title }}</div>
+      <div :class="cls.e('content')">{{ message }}</div>
+      <div :class="cls.e('footer')">
+        <UButton
+          text
+          :class="[cls.em('footer', 'btn'), cls.em('footer', 'cancel')]"
+          v-if="cancelButtonText"
+          @click="emit('close', 'cancel')"
+          >{{ cancelButtonText }}</UButton
+        >
+        <UButton
+          text
+          :type="confirmButtonType"
+          :class="cls.em('footer', 'btn')"
+          @click="emit('close', 'confirm')"
+          >{{ confirmButtonText }}</UButton
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { zIndex } from '@veltra/utils'
+import type { ColorType } from '@veltra/utils'
+
+import { bem } from '../../shared/bem'
+import type { MessageConfirmEmits, MessageConfirmProps } from '../../types/message-confirm'
+import { UButton } from '../button'
+
+defineOptions({ name: 'UMessageConfirm' })
+
+const props = withDefaults(defineProps<MessageConfirmProps>(), {
+  title: '',
+  message: '',
+  confirmButtonText: '确定',
+  confirmButtonType: 'primary' as ColorType,
+  cancelButtonText: ''
+})
+
+const emit = defineEmits<MessageConfirmEmits>()
+
+const cls = bem('message-confirm')
+
+const size = props.size ?? 'default'
+
+// 函数式调用由 API 层分配层级；组件直用时自增兜底
+const layer = props.zIndex ?? zIndex()
+</script>

package/src/components/message-confirm/style.scss

@@ -0,0 +1,138 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+// 方便拼接
+$root-name: message-confirm;
+
+@include m.b($root-name) {
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  // 两侧留白保证确认框在窄视口内不贴边
+  padding: t.use-var(spacing-lg);
+  // 根元素平时即有 transition：transition-group 靠 computed transition
+  // 判定有无过渡，只在过渡类上声明会读不到 → after-leave 同步触发
+  transition: opacity fn.use-var(transition, normal) fn.use-var(transition, ease);
+  @include m.flex($justify: center);
+
+  @include m.e(container) {
+    position: fixed;
+    inset: 0;
+  }
+
+  @include m.e(mask) {
+    position: absolute;
+    inset: 0;
+    // 遮罩压暗主题无关，black 不在 theme.color 表内、无 alpha token，直接写 rgba
+    background-color: rgba(0, 0, 0, 0.32);
+    transition: opacity fn.use-var(transition, normal) fn.use-var(transition, ease);
+  }
+
+  // 居中卡片复用 dialog 形态：表层背景、大圆角、投影；
+  // 宽度上限是布局约束（非密度刻度），保持窄视口内不贴边
+  @include m.e(box) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 320px;
+    padding: t.use-var(spacing-lg);
+    padding-bottom: 0;
+    gap: t.use-var(spacing-md);
+    border-radius: t.use-var('panel-radius');
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, lg);
+    transition:
+      opacity fn.use-var(transition, normal) fn.use-var(transition, ease),
+      transform fn.use-var(transition, normal) fn.use-var(transition, ease-out);
+  }
+
+  @include m.e(header) {
+    font-size: t.use-var(font-size-main);
+    font-weight: 600;
+    text-align: center;
+    @include m.ellipsis;
+  }
+
+  @include m.e(content) {
+    line-height: 1.6;
+    text-align: center;
+    word-break: break-word;
+  }
+
+  // 移动端惯例按钮组：顶部细分隔线横贯卡片、按钮等宽铺满且以细分隔线相隔
+  @include m.e(footer) {
+    display: flex;
+    margin: t.use-var(spacing-sm) calc(-1 * #{t.use-var(spacing-lg)});
+    margin-bottom: 0;
+    border-top: 1px solid fn.use-var(border-muted-color);
+
+    &--btn {
+      flex: 1;
+      border-radius: 0;
+      font-size: t.use-var(font-size-main);
+      font-weight: 500;
+    }
+
+    // 取消按钮：次级灰文本（确认按钮为主题色文本）
+    &--cancel {
+      color: fn.use-var(text-color, second);
+    }
+
+    &--btn + &--btn {
+      border-left: 1px solid fn.use-var(border-muted-color);
+    }
+  }
+
+  // 尺寸档只影响正文字号：small 用辅助档，default / large 用主字号
+  @include m.size using ($size) {
+    $content-font: t.use-var(font-size-main);
+
+    @if $size == small {
+      $content-font: t.use-var(font-size-secondary);
+    }
+
+    @include m.bem($root-name, content) {
+      font-size: $content-font;
+    }
+  }
+}
+
+/* 根元素必须声明 transition：与 message 对称，靠根元素的
+   computed transition 判定走动画，after-leave 才会等动画结束 */
+.#{$root-name}-enter-active,
+.#{$root-name}-leave-active {
+  transition-duration: fn.use-var(transition, normal);
+  transition-timing-function: fn.use-var(transition, ease);
+  transition-property: opacity;
+}
+
+.#{$root-name}-enter-from,
+.#{$root-name}-leave-to {
+  opacity: 0;
+
+  @include m.bem($root-name, mask) {
+    opacity: 0;
+  }
+
+  @include m.bem($root-name, box) {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+}
+
+// 减弱动态效果：确认框不位移，只保留透明度。根上的 opacity 过渡不能删。
+@media (prefers-reduced-motion: reduce) {
+  @include m.bem($root-name, box) {
+    transition-property: opacity;
+  }
+
+  .#{$root-name}-enter-from,
+  .#{$root-name}-leave-to {
+    @include m.bem($root-name, box) {
+      transform: none;
+    }
+  }
+}

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

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

package/src/components/multi-select/index.ts

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