@veltra/mobile 1.0.0 → 1.1.0

package/package.json

@@ -1,16 +1,42 @@
 {
   "name": "@veltra/mobile",
-  "version": "1.0.0",
+  "version": "1.1.0",
+  "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
+  "bugs": {
+    "url": "https://github.com/cabinet-fe/ultra-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cabinet-fe/ultra-ui",
+    "directory": "packages/mobile"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
   "type": "module",
+  "sideEffects": [
+    "src/**/style.ts",
+    "src/**/*.scss",
+    "dist/**/style.js",
+    "dist/**/*.css"
+  ],
   "exports": {
     ".": {
-      "import": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*",
+      "import": "./dist/*"
     }
   },
-  "scripts": {
-    "check-types": "tsc -p tsconfig.json --noEmit"
-  },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "@cat-kit/core": ">=1.2.1",
+    "@veltra/compositions": "^1.8.5",
+    "@veltra/icons": "^1.5.0",
+    "@veltra/styles": "^1.8.5",
+    "@veltra/utils": "^1.8.5",
+    "vue": ">=3.5.44"
   }
 }

package/src/components/_internal/bottom-sheet/bottom-sheet.vue

@@ -0,0 +1,81 @@
+<template>
+  <Teleport :to="getOverlayContainer()">
+    <Transition name="um-sheet" @after-leave="scrollLock.unlock">
+      <div v-if="visible" :class="overlayCls" :style="{ zIndex: zIndex() }" @click.self="close">
+        <section
+          :class="[panelCls, contentClass]"
+          :style="contentStyle"
+          role="dialog"
+          aria-modal="true"
+        >
+          <header v-if="title || $slots.header" :class="cls.e('header')">
+            <slot name="header">
+              <span :class="cls.e('title')">{{ title }}</span>
+              <button :class="cls.e('close')" type="button" aria-label="关闭" @click="close">
+                <Close />
+              </button>
+            </slot>
+          </header>
+
+          <div :class="cls.e('body')">
+            <slot />
+          </div>
+        </section>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { Close } from '@veltra/icons/normal'
+import { zIndex } from '@veltra/utils'
+import { watch } from 'vue'
+import type { CSSProperties } from 'vue'
+
+import { bem } from '../../../shared/bem'
+import { getOverlayContainer, useOverlayScrollLock } from '../overlay-container'
+
+/**
+ * 移动端底部弹层基座（内部组件，不进公开导出）
+ *
+ * 遮罩 + 底部面板进出场，供 select / multi-select / 后续弹层类组件复用。
+ * 面板打开期间锁定背景滚动（body / 设备外壳视口），内容区 `body` 自身可滚，
+ * 完全关闭后恢复原滚动位置。
+ */
+defineOptions({ name: 'UBottomSheet' })
+
+const props = defineProps<{
+  /** 是否可见（v-model:visible） */
+  visible?: boolean
+  /** 头部标题；提供 header 插槽时忽略 */
+  title?: string
+  /** 面板内容容器样式 */
+  contentStyle?: CSSProperties | string
+  /** 面板内容容器类名 */
+  contentClass?: unknown
+}>()
+
+const emit = defineEmits<{ (e: 'update:visible', visible: boolean): void }>()
+
+const cls = bem('sheet')
+
+const overlayCls = cls.b
+const panelCls = cls.e('panel')
+
+function close() {
+  emit('update:visible', false)
+}
+
+const scrollLock = useOverlayScrollLock()
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      scrollLock.lock()
+    }
+    // 解锁挂在退场过渡 after-leave：动画期间背景保持锁定
+  },
+  { immediate: true }
+)
+</script>

package/src/components/_internal/bottom-sheet/index.ts

@@ -0,0 +1 @@
+export { default as BottomSheet } from './bottom-sheet.vue'

package/src/components/_internal/bottom-sheet/style.scss

@@ -0,0 +1,116 @@
+@use 'pkg:@veltra/styles/mixins' as m with (
+  $namespace: um
+);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../../styles/tokens' as t;
+
+$root-name: sheet;
+
+@include m.b($root-name) {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  // 遮罩点击热区由根元素自身承担，面板区域不透传
+  background-color: fn.color-a(shadow, 52, color);
+
+  @include m.e(panel) {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    max-height: 75%;
+    flex-shrink: 0;
+    border-radius: t.use-var('panel-radius') t.use-var('panel-radius') 0 0;
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, lg);
+    // 底部安全区（全面屏手势条），内容不与系统区域重叠
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  @include m.e(header) {
+    // 关闭钮绝对定位后，标题占满整行宽度，文字才能真正水平居中
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: fn.use-var(gap, default);
+    min-height: t.use-var('form-row-height');
+    padding: fn.use-var(gap, small) fn.use-var(gap, default) 0;
+  }
+
+  @include m.e(title) {
+    flex: 1;
+    min-width: 0;
+    font-size: t.use-var('font-size-title');
+    font-weight: 600;
+    color: fn.use-var(text-color, title);
+    text-align: center;
+    @include m.ellipsis;
+  }
+
+  @include m.e(close) {
+    // 头部操作热区 ≥44×44；不参与文档流，避免挤压标题的居中基准
+    position: absolute;
+    right: fn.use-var(gap, small);
+    top: 50%;
+    transform: translateY(-50%);
+    min-width: t.use-var('touch-target');
+    min-height: t.use-var('touch-target');
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    // 关闭图标走标题档字号，与面板标题同级
+    font-size: t.use-var('font-size-title');
+    color: fn.use-var(text-color, main);
+    cursor: pointer;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    &:active {
+      color: fn.use-var(text-color, title);
+    }
+  }
+
+  @include m.e(body) {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    padding: fn.use-var(gap, small) fn.use-var(gap, default) fn.use-var(gap, large);
+  }
+}
+
+// 进出场：遮罩淡入淡出，面板自底部滑入滑出
+.um-sheet-enter-active,
+.um-sheet-leave-active {
+  transition: opacity fn.use-var(transition, normal) fn.use-var(transition, ease);
+
+  @include m.bem($root-name, panel) {
+    transition:
+      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+      border-radius 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+}
+
+.um-sheet-enter-from,
+.um-sheet-leave-to {
+  opacity: 0;
+
+  @include m.bem($root-name, panel) {
+    transform: translateY(100%);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

package/src/components/_internal/bottom-sheet/style.ts

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

package/src/components/_internal/overlay-container.ts

@@ -0,0 +1,34 @@
+import { createScrollLock } from '../../shared/use-scroll-lock'
+import type { ScrollLock } from '../../shared/use-scroll-lock'
+
+/**
+ * 弹层宿主容器（内部机制，不进公开导出）
+ *
+ * 设备外壳等嵌入场景把承载元素注册进来，底部弹层 / 对话框 / 抽屉 / 函数式消息
+ * 改挂到该元素内，随容器一起定位与缩放；未注册时行为不变（挂 body）。
+ *
+ * `scrollLockEl` 是背景滚动锁定的目标：挂载层自身通常不滚动（弹层不随内容
+ * 滚动），真正滚动的是与其并列的内容视口，注册时需一并传入；缺省回落到
+ * 挂载元素（未注册时即 body）。
+ */
+let container: HTMLElement | undefined
+let scrollLockEl: HTMLElement | undefined
+
+export function setOverlayContainer(el: HTMLElement | undefined, scrollEl?: HTMLElement): void {
+  container = el
+  scrollLockEl = scrollEl
+}
+
+export function getOverlayContainer(): HTMLElement {
+  return container ?? document.body
+}
+
+/**
+ * 弹层背景滚动锁（Dialog / Drawer / BottomSheet 共用）
+ *
+ * 打开期间锁定（未注册宿主时锁 body，注册设备外壳时锁其内容视口），
+ * 完全关闭后由组件调用 `unlock()` 还原滚动位置；嵌套弹层计数叠加。
+ */
+export function useOverlayScrollLock(): ScrollLock {
+  return createScrollLock(() => scrollLockEl ?? getOverlayContainer())
+}

package/src/components/avatar/avatar.vue

@@ -0,0 +1,44 @@
+<template>
+  <span :class="classList">
+    <img v-if="src && !errored" :class="cls.e('image')" :src :alt @error="handleError" />
+    <span v-else :class="cls.e('fallback')">
+      <slot />
+    </span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { computed, shallowRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { AvatarEmits, AvatarProps } from '../../types/avatar'
+
+defineOptions({ name: 'UAvatar' })
+
+const { src, alt, shape, size } = defineProps<AvatarProps>()
+
+const emit = defineEmits<AvatarEmits>()
+
+const cls = bem('avatar')
+
+const errored = shallowRef(false)
+
+// 切换 src 时重置错误态，让新地址的图片重新尝试加载
+watch(
+  () => src,
+  () => {
+    errored.value = false
+  }
+)
+
+const classList = computed(() => [
+  cls.b,
+  cls.m(size ?? 'default'),
+  bem.is('round', shape === 'round')
+])
+
+function handleError(ev: Event) {
+  errored.value = true
+  emit('error', ev)
+}
+</script>

package/src/components/avatar/index.ts

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

package/src/components/avatar/style.scss

@@ -0,0 +1,53 @@
+@use 'sass:map';
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: avatar;
+
+// 尺寸档位走移动端密度 token（32 / 40 / 48），不再沿用桌面 24/32/40 表单控件高度
+$size-tier: (
+  small: avatar-size-small,
+  default: avatar-size-default,
+  large: avatar-size-large
+);
+
+@include m.b($root-name) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 50%;
+  color: fn.use-var(text-color, white);
+  background-color: fn.use-var(color, primary);
+  user-select: none;
+
+  @include m.size using ($size) {
+    $side: t.use-var(map.get($size-tier, $size));
+
+    width: $side;
+    height: $side;
+    // 回退文字对齐主字号体系，各档同字号，层级交给尺寸本身
+    font-size: t.use-var(font-size-main);
+  }
+
+  @include m.is(round) {
+    border-radius: t.control-radius(large);
+  }
+
+  @include m.e(image) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @include m.e(fallback) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    white-space: nowrap;
+  }
+}

package/src/components/avatar/style.ts

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

package/src/components/badge/badge.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :class="cls.b">
+    <slot />
+    <sup v-if="!hidden" ref="supRef" :class="classList">{{ badgeValue }}</sup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { setStyles, zIndex } from '@veltra/utils'
+import { computed, nextTick, shallowRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { BadgeProps } from '../../types/badge'
+
+defineOptions({ name: 'UBadge' })
+
+const cls = bem('badge')
+
+const props = withDefaults(defineProps<BadgeProps>(), { max: 99 })
+
+const badgeValue = computed(() => {
+  if (props.dot) return ''
+  if (typeof props.value === 'number' && typeof props.max === 'number') {
+    return props.value > props.max ? `${props.max}+` : props.value
+  }
+  return props.value
+})
+
+const classList = computed(() => {
+  return [
+    cls.e('sup'),
+    props.type && cls.m('color-' + props.type),
+    cls.m(props.size ?? 'default'),
+    bem.is('dot', props.dot)
+  ]
+})
+
+const supRef = shallowRef<HTMLElement>()
+
+// 角标向内容末端偏移半个自身，实现悬浮角标形态；color/zIndex 需运行时写入
+const setPosition = () => {
+  if (supRef.value) {
+    const { width, height } = supRef.value.getBoundingClientRect()
+    setStyles(supRef.value, {
+      transform: `translate(-${width / 2}px, -${height / 2}px)`,
+      backgroundColor: props.color,
+      zIndex: zIndex()
+    })
+  }
+}
+
+// sup 因 hidden 切换而销毁重建、或 size/dot 改变自身尺寸时，重新写入偏移
+watch([supRef, () => props.size, () => props.dot], ([el]) => {
+  if (!el) return
+  nextTick(() => {
+    setPosition()
+  })
+})
+</script>

package/src/components/badge/index.ts

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

package/src/components/badge/style.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@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: badge;
+
+// 密度走 --um-*：小档辅助字号 / 默认档次字号 / 大档主字号
+$size-font: (
+  small: font-size-auxiliary,
+  default: font-size-secondary,
+  large: font-size-main
+);
+
+// 修饰符类（u-badge--color-* / u-badge--<size>）由组件挂在 sup 元素上，
+// 因此以下规则直接作用于 sup 本身，与 desktop badge 选择器结构一致
+@include m.b($root-name) {
+  width: max-content;
+  position: relative;
+
+  @include m.e(sup) {
+    position: absolute;
+    cursor: default;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    // sup 不在全局 border-box 名单内，需自带，min-width 才能含左右 padding 计入宽度
+    box-sizing: border-box;
+    background-color: fn.use-var(color, danger);
+    // 胶囊圆角：远大于自身高度，保证两端全圆
+    border-radius: 999px;
+    color: fn.use-var(text-color, white);
+
+    @include m.is(dot) {
+      height: t.use-var(spacing-sm);
+      width: t.use-var(spacing-sm);
+      // 尺寸档的 min-width 会让圆点撑成椭圆，圆点固定宽高需归零
+      min-width: 0;
+      padding: 0;
+      border-radius: 50%;
+    }
+  }
+
+  @each $type, $_ in vars.$color-types {
+    @include m.m(color-#{$type}) {
+      background-color: fn.use-var(color, $type, light-7);
+      color: fn.use-var(color, $type);
+    }
+  }
+
+  @include m.size using ($size) {
+    $font: t.use-var(map.get($size-font, $size));
+
+    font-size: $font;
+    // 高度随字号伸缩：字号 + 上下合计 8px 呼吸空间
+    height: calc(#{$font} + #{t.use-var(spacing-sm)});
+    // 个位数角标呈正圆：最小宽度等于高度；多位数向两侧撑开为胶囊
+    min-width: calc(#{$font} + #{t.use-var(spacing-sm)});
+    padding: 0 t.use-var(spacing-xs);
+  }
+}

package/src/components/badge/style.ts

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

package/src/components/button/button.vue

@@ -0,0 +1,76 @@
+<template>
+  <button :class="classList" type="button" ref="buttonRef" @click="handleClick">
+    <!-- 加载图标 -->
+    <span v-if="loading" :class="[iconCls, bem.is('loading')]" :style="iconStyle">
+      <component :is="loadingIcon" />
+    </span>
+
+    <!-- 左侧图标 -->
+    <span v-else-if="!!icon && iconPosition === 'left'" :class="iconCls" :style="iconStyle">
+      <component :is="icon" />
+    </span>
+
+    <slot />
+
+    <!-- 右侧图标 -->
+    <span v-if="!!icon && iconPosition === 'right'" :class="iconCls" :style="iconStyle">
+      <component :is="icon" />
+    </span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { Loading } from '@veltra/icons'
+import { withUnit } from '@veltra/utils'
+import { computed, shallowRef } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { ButtonEmits, ButtonProps, _ButtonExposed } from '../../types/button'
+
+defineOptions({ name: 'UButton' })
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  iconPosition: 'left',
+  loadingIcon: () => Loading,
+  disabled: false,
+  propagate: true
+})
+
+const emit = defineEmits<ButtonEmits>()
+
+const cls = bem('button')
+
+const classList = computed(() => {
+  return [
+    cls.b,
+    cls.m(props.size ?? 'default'),
+    props.type && cls.m('color-' + props.type),
+    bem.is('circle', props.circle),
+    bem.is('disabled', props.disabled),
+    bem.is('loading', props.loading),
+    bem.is('plain', props.plain),
+    bem.is('text', props.text)
+  ]
+})
+
+const iconCls = cls.e('icon')
+
+const iconStyle = computed(() => ({ fontSize: withUnit(props.iconSize, 'px') }))
+
+const handleClick = (e: MouseEvent) => {
+  if (props.disabled || props.loading) {
+    e.stopPropagation()
+    return
+  }
+
+  !props.propagate && e.stopPropagation()
+
+  emit('click', e)
+}
+
+const buttonRef = shallowRef<HTMLButtonElement>()
+
+const exposed: _ButtonExposed = { el: buttonRef }
+
+defineExpose(exposed)
+</script>

package/src/components/button/index.ts

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