@veltra/mobile 1.0.0 → 1.1.0

package/src/components/dialog/style.scss

@@ -0,0 +1,163 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: dialog;
+
+// NutUI 惯例卡片宽度上限；视口内不溢出由 overlay 留白 + width: 100% 保证
+$dialog-max-width: 320px;
+
+@include m.bem($root-name, overlay) {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  outline: none;
+  box-sizing: border-box;
+  // 两侧留白保证卡片在窄视口内不贴边
+  padding: fn.use-var(gap, large);
+  @include m.flex($justify: center);
+
+  @include m.is(modal) {
+    // 遮罩压暗主题无关，black 不在 theme.color 表内、无 alpha token，直接写 rgba
+    background-color: rgba(0, 0, 0, 0.32);
+    pointer-events: auto;
+  }
+
+  @include m.is(fullscreen) {
+    // 全屏去留白：卡片铺满到屏幕边缘，方角由设备屏幕圆角（真机硬件 / 外壳）裁剪
+    padding: 0;
+  }
+}
+
+@include m.b($root-name) {
+  pointer-events: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  width: 100%;
+  max-width: $dialog-max-width;
+  max-height: 86%;
+  // NutUI 惯例：大圆角居中卡片（弹层容器圆角）
+  border-radius: t.use-var('panel-radius');
+  background-color: fn.use-var(bg-color, top);
+  box-shadow: fn.use-var(shadow, lg);
+
+  // NutUI 惯例：标题居中加粗，主字号
+  @include m.e(header) {
+    position: relative;
+    flex-shrink: 0;
+    min-height: t.use-var('form-row-height');
+    padding: t.use-var('spacing-lg') t.use-var('spacing-lg') 0;
+    @include m.flex($justify: center);
+  }
+
+  @include m.e(title) {
+    width: 100%;
+    font-size: t.use-var('font-size-main');
+    font-weight: 600;
+    color: fn.use-var(text-color, title);
+    line-height: 1.4;
+    text-align: center;
+    // 多行标题省略为两行，长标题不挤压正文
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  // 标题居中时关闭按钮绝对定位在右上角，不挤偏标题
+  @include m.e(close) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    // 关闭热区不小于 44x44
+    min-width: t.use-var('touch-target');
+    min-height: t.use-var('touch-target');
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var('font-size-main');
+    line-height: 1;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    @include m.flex($display: inline-flex, $justify: center);
+
+    &:active {
+      color: fn.use-var(text-color, main);
+    }
+
+    & > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  @include m.e(body) {
+    flex-grow: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    // NutUI 惯例：正文默认居中，表单等场景经 contentAlign 切左对齐
+    text-align: center;
+    font-size: t.use-var('font-size-main');
+    color: fn.use-var(text-color, second);
+    line-height: 1.6;
+    padding: t.use-var('spacing-lg');
+    word-break: break-word;
+
+    @include m.is(align-left) {
+      text-align: left;
+    }
+
+    @include m.is(align-right) {
+      text-align: right;
+    }
+  }
+
+  // 移动端惯例水平按钮组：等宽铺满、主操作（最后一个）居右，
+  // 操作区高度不小于 44px 触控下限（NutUI 惯例 48px）
+  @include m.e(footer) {
+    flex-shrink: 0;
+    gap: t.use-var('spacing-md');
+    min-height: t.use-var('form-row-height');
+    padding: t.use-var('spacing-sm') t.use-var('spacing-lg');
+    @include m.flex;
+
+    // 按钮等宽铺满，包括插槽内容
+    & > * {
+      flex: 1 1 0;
+    }
+
+    @include m.is(actions-vertical) {
+      flex-direction: column;
+
+      & > * {
+        width: 100%;
+        flex-basis: auto;
+      }
+    }
+  }
+
+  @include m.is(fullscreen) {
+    max-width: none;
+    max-height: none;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+
+    // 全屏铺满视口时正文与按钮组让出底部安全区（手势条）
+    @include m.bem($root-name, body) {
+      padding-bottom: calc(#{t.use-var('spacing-lg')} + env(safe-area-inset-bottom));
+    }
+
+    @include m.bem($root-name, footer) {
+      padding-bottom: calc(#{t.use-var('spacing-sm')} + env(safe-area-inset-bottom));
+    }
+  }
+}
+
+@include m.bem($root-name, trigger) {
+  display: inline-flex;
+}

package/src/components/dialog/style.ts

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

package/src/components/divider/divider.vue

@@ -0,0 +1,29 @@
+<template>
+  <div :class="classList" role="separator" :aria-orientation="direction">
+    <span v-if="slots.default" :class="cls.e('text')">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { DividerProps } from '../../types/divider'
+
+defineOptions({ name: 'UDivider' })
+
+const { direction = 'horizontal', dashed = false, align = 'center' } = defineProps<DividerProps>()
+
+const slots = useSlots()
+const cls = bem('divider')
+
+const classList = computed(() => [
+  cls.b,
+  cls.m(direction),
+  bem.is('dashed', dashed),
+  bem.is('with-text', !!slots.default),
+  slots.default && cls.m(align)
+])
+</script>

package/src/components/divider/index.ts

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

package/src/components/divider/style.scss

@@ -0,0 +1,91 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+// 方便拼接
+$root-name: divider;
+
+// 文字靠左/靠右时，对侧长线之外那一侧的短线宽度
+$short-line-width: 5%;
+
+@include m.b($root-name) {
+  // 水平分割线（默认形态）：单独使用时由上边框划线
+  border-top: 1px solid fn.use-var(border-color);
+  margin: t.use-var(spacing-lg) 0;
+
+  // 虚线
+  @include m.is(dashed) {
+    border-top-style: dashed;
+  }
+
+  // 垂直分割线：行内元素，随文字高度伸缩
+  @include m.m(vertical) {
+    display: inline-block;
+    border-top: none;
+    border-left: 1px solid fn.use-var(border-color);
+    height: 1em;
+    margin: 0 t.use-var(spacing-sm);
+    vertical-align: middle;
+
+    @include m.is(dashed) {
+      border-left-style: dashed;
+    }
+  }
+
+  // 嵌套文字：两侧伪元素划线，文字默认居中
+  @include m.is(with-text) {
+    display: flex;
+    align-items: center;
+    border-top: none;
+    margin: t.use-var(spacing-lg) 0;
+
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      border-top: 1px solid fn.use-var(border-color);
+    }
+
+    &::before {
+      margin-right: t.use-var(spacing-sm);
+    }
+
+    &::after {
+      margin-left: t.use-var(spacing-sm);
+    }
+
+    // 虚线作用于两侧伪元素线
+    @include m.is(dashed) {
+      &::before,
+      &::after {
+        border-top-style: dashed;
+      }
+    }
+  }
+
+  // 文字靠左：左线收窄为短线
+  @include m.m(left) {
+    @include m.is(with-text) {
+      &::before {
+        flex: none;
+        width: $short-line-width;
+      }
+    }
+  }
+
+  // 文字靠右：右线收窄为短线
+  @include m.m(right) {
+    @include m.is(with-text) {
+      &::after {
+        flex: none;
+        width: $short-line-width;
+      }
+    }
+  }
+
+  @include m.e(text) {
+    color: fn.use-var(text-color, main);
+    font-size: t.use-var(font-size-main);
+    white-space: nowrap;
+  }
+}

package/src/components/divider/style.ts

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

package/src/components/drawer/drawer.vue

@@ -0,0 +1,168 @@
+<template>
+  <Teleport :to="getOverlayContainer()">
+    <transition name="fade" appear @enter="onOverlayEnter" @after-leave="onOverlayLeave">
+      <div
+        v-if="overlayVisible"
+        :class="overlayCls.b"
+        :style="{ zIndex: overlayZIndex }"
+        @click="close"
+      >
+        <transition :name="transitionName" appear @after-leave="onAfterDrawerLeave">
+          <div
+            v-if="drawerVisible"
+            v-bind="$attrs"
+            :class="drawerClass"
+            :style="dragStyle"
+            @click.stop
+          >
+            <!-- 边缘拖拽把手：上/下为整行横把手，左/右为内沿居中的竖把手 -->
+            <div
+              :class="cls.e('grabber')"
+              @touchstart.passive="dragHandlers.touchstart"
+              @touchmove.prevent="dragHandlers.touchmove"
+              @touchend.passive="dragHandlers.touchend"
+              @touchcancel.passive="dragHandlers.touchcancel"
+            />
+
+            <div v-if="title || showClose" :class="cls.e('header')">
+              <span :class="cls.e('title')">{{ title }}</span>
+
+              <button
+                v-if="showClose"
+                :class="cls.e('close')"
+                type="button"
+                aria-label="关闭"
+                @click="close"
+              >
+                <Close />
+              </button>
+            </div>
+
+            <div :class="cls.e('content')">
+              <slot />
+            </div>
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { Close } from '@veltra/icons/normal'
+import { zIndex } from '@veltra/utils'
+import { computed, shallowRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import { shouldCloseByDrag, useTouchGesture } from '../../shared/use-touch-gesture'
+import type { DrawerEmits, DrawerPlacement, DrawerProps } from '../../types/drawer'
+import { getOverlayContainer, useOverlayScrollLock } from '../_internal/overlay-container'
+
+defineOptions({ name: 'UDrawer', inheritAttrs: false })
+
+const props = withDefaults(defineProps<DrawerProps>(), { placement: 'bottom' })
+
+const emit = defineEmits<DrawerEmits>()
+
+const cls = bem('drawer')
+const overlayCls = bem('drawer-overlay')
+
+const visible = defineModel<boolean>({ default: false })
+
+const overlayVisible = shallowRef(false)
+const drawerVisible = shallowRef(false)
+const overlayZIndex = shallowRef<number>()
+
+const transitionName = computed(() => `drawer-slide-${props.placement}`)
+
+// 打开期间锁定背景滚动（body / 设备外壳视口），完全关闭后恢复原滚动位置
+const scrollLock = useOverlayScrollLock()
+
+// 打开时盖在新一层级上；关闭链路：抽屉滑出 -> 遮罩退场 -> closed
+watch(
+  visible,
+  (v) => {
+    if (v) {
+      overlayZIndex.value = zIndex()
+      resetDrag()
+      scrollLock.lock()
+      overlayVisible.value = true
+    } else {
+      drawerVisible.value = false
+    }
+  },
+  { immediate: true }
+)
+
+function onOverlayEnter() {
+  drawerVisible.value = true
+}
+
+function onAfterDrawerLeave() {
+  overlayVisible.value = false
+}
+
+/** 遮罩退场完成即整条关闭链路结束：解锁背景滚动并通知 closed */
+function onOverlayLeave() {
+  scrollLock.unlock()
+  emit('closed')
+}
+
+/** 关闭抽屉：写回 model（emit update:modelValue），滑出经 watch 驱动 */
+const close = () => {
+  visible.value = false
+  emit('close')
+}
+
+// ---- 四向边缘拖拽关闭（实现细节，不新增公开 API） ----
+
+/** 各方位沿关闭方向拖拽的轴与符号：bottom 下拉 / top 上推 / left 左拖 / right 右拖 */
+const DRAG_DISMISS: Record<DrawerPlacement, { axis: 'x' | 'y'; sign: 1 | -1 }> = {
+  bottom: { axis: 'y', sign: 1 },
+  top: { axis: 'y', sign: -1 },
+  left: { axis: 'x', sign: -1 },
+  right: { axis: 'x', sign: 1 }
+}
+
+/** 沿关闭方向的实时偏移，经 CSS 变量并入滑动过渡，松手回弹或继续滑出 */
+const dragOffset = shallowRef(0)
+const dragging = shallowRef(false)
+
+const dragStyle = computed(() => {
+  return dragOffset.value ? { '--u-drawer-drag': `${dragOffset.value}px` } : undefined
+})
+
+const drawerClass = computed(() => {
+  return [cls.b, bem.is(props.placement), bem.is('dragging', dragging.value)]
+})
+
+const dragHandlers = useTouchGesture({
+  onStart() {
+    dragging.value = true
+  },
+  onMove(state) {
+    const { axis, sign } = DRAG_DISMISS[props.placement]
+    // 只跟随朝关闭方向的分量，反方向拖动面板不动
+    dragOffset.value = Math.max(0, sign * (axis === 'x' ? state.dx : state.dy))
+  },
+  onEnd(state) {
+    dragging.value = false
+    const { axis, sign } = DRAG_DISMISS[props.placement]
+    if (shouldCloseByDrag(state, { axis, sign })) {
+      close()
+    } else {
+      dragOffset.value = 0
+    }
+  },
+  onCancel() {
+    // 手势被打断（来电、落到多指等）：回弹而不是关闭
+    dragging.value = false
+    dragOffset.value = 0
+  }
+})
+
+function resetDrag() {
+  dragging.value = false
+  dragOffset.value = 0
+}
+</script>

package/src/components/drawer/index.ts

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

package/src/components/drawer/style.scss

@@ -0,0 +1,240 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: drawer;
+$overlay-name: #{$root-name}-overlay;
+
+// 侧滑宽度 / 上下抽屉高度上限（相对弹层宿主，窄屏与模拟器内均不溢出）
+$side-width: min(86%, 400px);
+$vertical-max-height: min(70%, 560px);
+
+@include m.b($overlay-name) {
+  position: fixed;
+  inset: 0;
+  // 遮罩压暗主题无关，black 不在 theme.color 表内、无 alpha token，直接写 rgba
+  background-color: rgba(0, 0, 0, 0.32);
+  overflow: hidden;
+}
+
+@include m.b($root-name) {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background-color: fn.use-var(bg-color, top);
+  box-shadow: fn.use-var(shadow, lg);
+  // 松手回弹；进出滑动的 -active 类在其后声明，覆盖此过渡
+  transition: transform fn.use-var(transition, normal) fn.use-var(transition, ease-out);
+
+  // 拖拽跟手期间禁用过渡，松手回弹 / 继续滑出时恢复
+  @include m.is(dragging) {
+    transition: none;
+  }
+
+  // 边缘拖拽把手：热区不小于 44x44，视觉为居中的圆角把手
+  @include m.e(grabber) {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    touch-action: none;
+    @include m.flex($display: flex, $justify: center);
+
+    &::after {
+      content: '';
+      border-radius: t.control-radius(small);
+      background-color: fn.use-var(text-color, assist);
+    }
+  }
+
+  @include m.e(header) {
+    flex-shrink: 0;
+    min-height: t.use-var('form-row-height');
+    padding: 0 t.use-var('spacing-md');
+    gap: t.use-var('spacing-md');
+    border-bottom: fn.use-var(border);
+    @include m.flex($justify: space-between);
+  }
+
+  @include m.e(title) {
+    font-size: t.use-var('font-size-main');
+    font-weight: 600;
+    color: fn.use-var(text-color, title);
+    @include m.ellipsis;
+  }
+
+  @include m.e(close) {
+    // 关闭热区不小于 44x44
+    flex-shrink: 0;
+    min-width: t.use-var('touch-target');
+    min-height: t.use-var('touch-target');
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var('font-size-main');
+    line-height: 1;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    @include m.flex($display: inline-flex, $justify: center);
+
+    &:active {
+      color: fn.use-var(text-color, main);
+    }
+
+    & > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  @include m.e(content) {
+    flex-grow: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    font-size: t.use-var('font-size-main');
+    padding: t.use-var('spacing-lg');
+  }
+
+  @include m.is(left, right) {
+    top: 0;
+    bottom: 0;
+    width: $side-width;
+    max-height: 100%;
+
+    // 侧边形态：内沿中部 44x44 竖把手（绝对定位，不占内容流）
+    @include m.bem($root-name, grabber) {
+      position: absolute;
+      top: 50%;
+      width: t.use-var('touch-target');
+      height: t.use-var('touch-target');
+      transform: translateY(-50%);
+      z-index: 1;
+
+      &::after {
+        width: 4px;
+        height: 36px;
+      }
+    }
+  }
+
+  @include m.is(top, bottom) {
+    left: 0;
+    right: 0;
+    max-height: $vertical-max-height;
+
+    // 上下形态：整行 44px 触控热区，视觉为居中横把手（把手由 flex 居中，热区 padding 走间距刻度）
+    @include m.bem($root-name, grabber) {
+      width: 100%;
+      height: t.use-var('touch-target');
+      padding: t.use-var('spacing-sm') 0;
+
+      &::after {
+        width: 36px;
+        height: 4px;
+      }
+    }
+  }
+
+  // 各方位：贴边定位、外沿圆角，拖拽偏移挂到基础 transform 上，
+  // 松手关闭时从当前位置继续滑出（--u-drawer-drag 始终 ≥ 0，方向由此处折叠）
+  @include m.is(right) {
+    right: 0;
+    border-radius: t.use-var('panel-radius') 0 0 t.use-var('panel-radius');
+    transform: translateX(var(--u-drawer-drag, 0px));
+
+    // 把手锚定在面板左内沿
+    @include m.bem($root-name, grabber) {
+      left: 0;
+    }
+
+    &.drawer-slide-right-enter-from,
+    &.drawer-slide-right-leave-to {
+      transform: translateX(calc(100% + var(--u-drawer-drag, 0px)));
+    }
+  }
+
+  @include m.is(left) {
+    left: 0;
+    border-radius: 0 t.use-var('panel-radius') t.use-var('panel-radius') 0;
+    transform: translateX(calc(-1 * var(--u-drawer-drag, 0px)));
+
+    // 把手锚定在面板右内沿
+    @include m.bem($root-name, grabber) {
+      right: 0;
+    }
+
+    &.drawer-slide-left-enter-from,
+    &.drawer-slide-left-leave-to {
+      transform: translateX(calc(-100% - var(--u-drawer-drag, 0px)));
+    }
+  }
+
+  @include m.is(top) {
+    top: 0;
+    border-radius: 0 0 t.use-var('panel-radius') t.use-var('panel-radius');
+    // 顶部形态让出刘海安全区
+    padding-top: env(safe-area-inset-top);
+    transform: translateY(calc(-1 * var(--u-drawer-drag, 0px)));
+
+    // 把手渲染在面板下边缘（关闭方向）
+    @include m.bem($root-name, grabber) {
+      order: 1;
+    }
+
+    &.drawer-slide-top-enter-from,
+    &.drawer-slide-top-leave-to {
+      transform: translateY(calc(-100% - var(--u-drawer-drag, 0px)));
+    }
+  }
+
+  @include m.is(bottom) {
+    bottom: 0;
+    border-radius: t.use-var('panel-radius') t.use-var('panel-radius') 0 0;
+    // 底部形态让出手势条安全区
+    padding-bottom: env(safe-area-inset-bottom);
+    transform: translateY(var(--u-drawer-drag, 0px));
+
+    &.drawer-slide-bottom-enter-from,
+    &.drawer-slide-bottom-leave-to {
+      transform: translateY(calc(100% + var(--u-drawer-drag, 0px)));
+    }
+  }
+}
+
+// 滑动进出过渡
+.drawer-slide-right-enter-active,
+.drawer-slide-left-enter-active,
+.drawer-slide-top-enter-active,
+.drawer-slide-bottom-enter-active,
+.drawer-slide-right-leave-active,
+.drawer-slide-left-leave-active,
+.drawer-slide-top-leave-active,
+.drawer-slide-bottom-leave-active {
+  transition: transform fn.use-var(transition, normal) fn.use-var(transition, ease-out);
+}
+
+// 减弱动态效果：面板不位移，只淡入淡出。拖拽跟手不在这里处理。
+@media (prefers-reduced-motion: reduce) {
+  .drawer-slide-right-enter-active,
+  .drawer-slide-left-enter-active,
+  .drawer-slide-top-enter-active,
+  .drawer-slide-bottom-enter-active,
+  .drawer-slide-right-leave-active,
+  .drawer-slide-left-leave-active,
+  .drawer-slide-top-leave-active,
+  .drawer-slide-bottom-leave-active {
+    transition-property: opacity;
+  }
+
+  .drawer-slide-right-enter-from,
+  .drawer-slide-right-leave-to,
+  .drawer-slide-left-enter-from,
+  .drawer-slide-left-leave-to,
+  .drawer-slide-top-enter-from,
+  .drawer-slide-top-leave-to,
+  .drawer-slide-bottom-enter-from,
+  .drawer-slide-bottom-leave-to {
+    transform: none;
+    opacity: 0;
+  }
+}