@veltra/mobile 1.0.0 → 1.1.0

package/src/components/date-picker/style.scss

@@ -0,0 +1,236 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: date-picker;
+
+@include m.b($root-name) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  gap: t.use-var('spacing-sm');
+  padding: 0 t.use-var('spacing-md');
+  border: fn.use-var(border);
+  border-radius: t.control-radius(default);
+  background-color: fn.use-var(bg-color, top);
+  color: fn.use-var(text-color, main);
+  font-size: t.use-var('font-size-main');
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+  // 触控热区：任何尺寸的可点击区域不小于 44×44，高度走移动端密度 token
+  @include m.size using ($size) {
+    min-height: max(t.control-height($size), t.use-var('touch-target'));
+  }
+
+  &:active {
+    border-color: fn.use-var(color, primary);
+  }
+
+  &:focus-visible {
+    box-shadow: fn.use-var(focus-ring);
+  }
+
+  @include m.is(active) {
+    border-color: fn.use-var(color, primary);
+  }
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+    color: fn.use-var(text-color, disabled);
+    background-color: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(value) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+
+    @include m.is(placeholder) {
+      color: fn.use-var(text-color, placeholder);
+    }
+  }
+
+  @include m.e(icons) {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  @include m.e(clear) {
+    // 清除热区 ≥44×44（高度受行高约束，用外扩补足）
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: t.use-var('touch-target');
+    min-height: t.use-var('touch-target');
+    // 热区外扩量（spacing-sm）：补偿清除钮居中图标的两侧留白，不挤压视觉边距
+    margin: calc(-1 * #{t.use-var('spacing-sm')}) calc(-1 * #{t.use-var('spacing-sm')}) calc(-1 * #{t.use-var('spacing-sm')}) 0;
+    padding: 0;
+    border: none;
+    background: none;
+    font-size: t.use-var('font-size-main');
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    &:active {
+      color: fn.use-var(text-color, title);
+    }
+  }
+
+  @include m.e(icon) {
+    display: inline-flex;
+    align-items: center;
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var('font-size-main');
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  // 底部日历面板
+  @include m.e(panel) {
+    display: flex;
+    flex-direction: column;
+    gap: t.use-var('spacing-sm');
+  }
+
+  @include m.e(panel-header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  @include m.e(nav) {
+    // 翻页热区 ≥44×44
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: t.use-var('touch-target');
+    min-height: t.use-var('touch-target');
+    border: none;
+    background: none;
+    font-size: t.use-var('font-size-main');
+    color: fn.use-var(text-color, main);
+    cursor: pointer;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    &:active {
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(panel-title) {
+    // 日历面板内部标题走主字号（面板级主标题才用 font-size-title 档）
+    font-size: t.use-var('font-size-main');
+    font-weight: 600;
+    color: fn.use-var(text-color, title);
+  }
+
+  @include m.e(week) {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @include m.e(week-day) {
+    text-align: center;
+    font-size: t.use-var('font-size-auxiliary');
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(days) {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: t.use-var('spacing-xs');
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @include m.e(months) {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: t.use-var('spacing-xs');
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @include m.e(years) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: t.use-var('spacing-xs');
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @include m.e(cell) {
+    // 日期格热区 ≥44×44，字号走移动端密度 token
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: t.use-var('touch-target');
+    border-radius: t.control-radius(large);
+    color: fn.use-var(text-color, main);
+    font-size: t.use-var('font-size-main');
+    user-select: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    &:active {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    // 补位日期弱化
+    @include m.is(pre) {
+      color: fn.use-var(text-color, disabled);
+    }
+
+    @include m.is(next) {
+      color: fn.use-var(text-color, disabled);
+    }
+
+    @include m.is(today) {
+      color: fn.component-var(date-picker, today-color, fn.use-var(color, primary));
+      font-weight: 600;
+    }
+
+    @include m.is(selected) {
+      background-color: fn.use-var(color, primary);
+      color: fn.use-var(text-color, white);
+      font-weight: 600;
+
+      &:active {
+        background-color: fn.use-var(color, primary);
+      }
+    }
+
+    @include m.is(disabled) {
+      cursor: not-allowed;
+      color: fn.use-var(text-color, disabled);
+
+      &:active {
+        background-color: transparent;
+      }
+    }
+  }
+}

package/src/components/date-picker/style.ts

@@ -0,0 +1,2 @@
+import '../_internal/bottom-sheet/style'
+import './style.scss'

package/src/components/descriptions/descriptions-item.vue

@@ -0,0 +1,12 @@
+<template>
+  <!-- 本组件不自行布局：由 UDescriptions 收集插槽 vnode 后渲染进单列键值列表 -->
+  <slot />
+</template>
+
+<script lang="ts" setup>
+import type { DescriptionsItemProps } from '../../types/descriptions'
+
+defineOptions({ name: 'UDescriptionsItem' })
+
+defineProps<DescriptionsItemProps>()
+</script>

package/src/components/descriptions/descriptions.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="classList">
+    <div v-if="title" :class="cls.e('header')">{{ title }}</div>
+
+    <ul v-if="items.length" :class="cls.e('list')">
+      <li v-for="(item, i) of items" :key="i" :class="cls.e('row')">
+        <div :class="cls.e('label')">{{ item.label }}</div>
+        <div :class="cls.e('content')">
+          <component :is="item.vnode" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots, type VNode } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { DescriptionsProps } from '../../types/descriptions'
+import UDescriptionsItem from './descriptions-item.vue'
+
+defineOptions({ name: 'UDescriptions' })
+
+const props = defineProps<DescriptionsProps>()
+
+const cls = bem('descriptions')
+
+const slots = useSlots()
+
+interface DescriptionItem {
+  label: string | undefined
+  vnode: VNode
+}
+
+// 插槽 vnode 须在渲染路径读取：插槽内容读取的响应式数据经调用链追踪，内容变化时重新计算。
+// 移动端单列形态不按 column 分组，逐项纵向堆叠（column 语义保留，不影响窄屏布局）
+const items = computed<DescriptionItem[]>(() => {
+  return (slots.default?.() ?? [])
+    .filter((vnode) => vnode.type === UDescriptionsItem)
+    .map((vnode) => ({ label: vnode.props?.label as string | undefined, vnode }))
+})
+
+const classList = computed(() => [
+  cls.b,
+  cls.m(props.layout ?? 'horizontal'),
+  cls.m(props.size ?? 'default'),
+  bem.is('bordered', !!props.border)
+])
+</script>

package/src/components/descriptions/index.ts

@@ -0,0 +1,2 @@
+export { default as UDescriptions } from './descriptions.vue'
+export { default as UDescriptionsItem } from './descriptions-item.vue'

package/src/components/descriptions/style.scss

@@ -0,0 +1,120 @@
+@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: descriptions;
+
+// 小档用次字号，默认 / 大档主字号 16；行内边距走移动端间距刻度（4 / 8 / 12）
+$size-font: (
+  small: font-size-secondary,
+  default: font-size-main,
+  large: font-size-main
+);
+
+$size-row-padding: (
+  small: spacing-xs,
+  default: spacing-sm,
+  large: spacing-md
+);
+
+@include m.b($root-name) {
+  font-size: t.use-var(font-size-main);
+  line-height: 1.6;
+  color: fn.use-var(text-color, main);
+
+  @include m.e(header) {
+    margin-bottom: t.use-var(spacing-sm);
+    font-weight: 600;
+    color: fn.use-var(text-color, main);
+  }
+
+  // 单列键值列表：每项一行，无多列分组（窄屏适配，column 不参与布局）
+  @include m.e(list) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @include m.e(row) {
+    display: flex;
+    align-items: baseline;
+    gap: t.use-var(spacing-md);
+  }
+
+  @include m.e(label) {
+    flex: none;
+    max-width: 40%;
+    text-align: start;
+    font-weight: 500;
+    color: fn.use-var(text-color, second);
+    word-break: break-word;
+  }
+
+  @include m.e(content) {
+    flex: 1;
+    min-width: 0;
+    text-align: end;
+    word-break: break-word;
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.size using ($size) {
+    font-size: t.use-var(map.get($size-font, $size));
+
+    .um-#{$root-name}__row {
+      padding: t.use-var(map.get($size-row-padding, $size)) 0;
+    }
+  }
+
+  // 垂直布局：键名在上、内容在下
+  @include m.m(vertical) {
+    .um-#{$root-name}__row {
+      flex-direction: column;
+      align-items: stretch;
+      gap: t.use-var(spacing-sm);
+    }
+
+    .um-#{$root-name}__content {
+      text-align: start;
+    }
+  }
+
+  // 边框模式：列表整体描边、纯白底，行间分隔线，键名灰底块（对应 desktop 单元格描边语义）
+  @include m.is(bordered) {
+    .um-#{$root-name}__list {
+      border: fn.use-var(border-muted);
+      border-radius: t.control-radius(default);
+      background-color: fn.use-var(bg-color, top);
+      overflow: hidden;
+    }
+
+    .um-#{$root-name}__row {
+      gap: 0;
+
+      & + & {
+        border-top: fn.use-var(border-muted);
+      }
+    }
+
+    .um-#{$root-name}__label {
+      max-width: none;
+      flex: 0 0 38%;
+      align-self: stretch;
+      padding-inline: t.use-var(spacing-sm);
+    }
+
+    .um-#{$root-name}__content {
+      padding-inline: t.use-var(spacing-sm);
+    }
+
+    // 垂直布局下键名独占一行：保留灰底块作行分组头
+    // 此处不能用 m.m()：嵌套在 is(bordered) 下会拼出 .is-bordered--vertical 的失效复合选择器
+    &.um-#{$root-name}--vertical {
+      .um-#{$root-name}__label {
+        flex-basis: auto;
+        background-color: fn.use-var(bg-color, middle);
+      }
+    }
+  }
+}

package/src/components/descriptions/style.ts

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

package/src/components/dialog/dialog.vue

@@ -0,0 +1,143 @@
+<template>
+  <Teleport :to="getOverlayContainer()">
+    <transition name="fade" appear @enter="onOverlayEnter" @after-leave="onOverlayLeave">
+      <div
+        v-if="overlayVisible"
+        :class="[cls.e('overlay'), bem.is('modal', modal), bem.is('fullscreen', fullscreen)]"
+        :style="{ zIndex: overlayZIndex }"
+        @click="modal && close()"
+      >
+        <transition :name="transition" appear @after-leave="onAfterDialogLeave">
+          <div v-if="dialogVisible" v-bind="$attrs" :class="className" @click.stop>
+            <section :class="cls.e('header')">
+              <div :class="cls.e('title')">
+                <slot name="header">
+                  {{ header || title }}
+                </slot>
+              </div>
+
+              <button :class="cls.e('close')" type="button" aria-label="关闭" @click="close">
+                <Close />
+              </button>
+            </section>
+
+            <section :class="bodyClass">
+              <slot />
+            </section>
+
+            <!-- 移动端惯例按钮组：等宽铺满、主操作居右；不传插槽时内置取消/确认 -->
+            <section :class="footerClass">
+              <slot name="footer" v-bind="{ close }">
+                <UButton v-if="showCancel" plain @click="onCancel">
+                  {{ cancelText }}
+                </UButton>
+                <UButton type="primary" @click="onConfirm">
+                  {{ confirmText }}
+                </UButton>
+              </slot>
+            </section>
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </Teleport>
+
+  <!-- 触发器 -->
+  <span v-if="$slots.trigger" :class="cls.e('trigger')" @click="visible = !visible">
+    <slot name="trigger" />
+  </span>
+</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 type { DialogEmits, DialogProps, _DialogExposed } from '../../types/dialog'
+import { getOverlayContainer, useOverlayScrollLock } from '../_internal/overlay-container'
+import { UButton } from '../button'
+
+defineOptions({ name: 'UDialog', inheritAttrs: false })
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  modal: true,
+  transition: 'fade-scale',
+  confirmText: '确认',
+  cancelText: '取消',
+  showCancel: true,
+  contentAlign: 'center'
+})
+
+const emit = defineEmits<DialogEmits>()
+
+const cls = bem('dialog')
+
+const visible = defineModel<boolean>({ default: false })
+
+const overlayVisible = shallowRef(false)
+const dialogVisible = shallowRef(false)
+const overlayZIndex = shallowRef<number>()
+
+// 打开期间锁定背景滚动（body / 设备外壳视口），完全关闭后恢复原滚动位置
+const scrollLock = useOverlayScrollLock()
+
+// 打开时盖在新一层级上；关闭链路：卡片退场 -> 遮罩退场 -> closed
+// immediate：初始即为 true 时直接进入打开态，由 appear 补上进场动画
+watch(
+  visible,
+  (v) => {
+    if (v) {
+      overlayZIndex.value = zIndex()
+      scrollLock.lock()
+      overlayVisible.value = true
+    } else {
+      dialogVisible.value = false
+    }
+  },
+  { immediate: true }
+)
+
+function onOverlayEnter() {
+  dialogVisible.value = true
+}
+
+function onAfterDialogLeave() {
+  overlayVisible.value = false
+}
+
+/** 遮罩退场完成即整条关闭链路结束：解锁背景滚动并通知 closed */
+function onOverlayLeave() {
+  scrollLock.unlock()
+  emit('closed')
+}
+
+const className = computed(() => {
+  return [cls.b, bem.is('fullscreen', props.fullscreen)]
+})
+
+const bodyClass = computed(() => {
+  return [cls.e('body'), bem.is(`align-${props.contentAlign}`, true)]
+})
+
+const footerClass = computed(() => {
+  return [cls.e('footer'), bem.is('actions-vertical', props.verticalActions)]
+})
+
+/** 关闭 */
+const close = () => {
+  visible.value = false
+}
+
+function onCancel() {
+  emit('cancel')
+  close()
+}
+
+function onConfirm() {
+  emit('confirm')
+  close()
+}
+
+defineExpose<_DialogExposed>({ close })
+</script>

package/src/components/dialog/index.ts

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