@veltra/mobile 1.0.0 → 1.1.0

package/src/components/uploader/style.scss

@@ -0,0 +1,220 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: uploader;
+
+@include m.b($root-name) {
+  @include m.size using ($size) {
+    @include m.bem($root-name, item) {
+      width: t.uploader-size($size);
+      height: t.uploader-size($size);
+    }
+  }
+
+  @include m.e(list) {
+    @include m.flex;
+    flex-wrap: wrap;
+    gap: t.use-var('spacing-sm');
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @include m.e(item) {
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    border-radius: t.control-radius(default);
+    overflow: hidden;
+  }
+
+  @include m.e(thumb) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+  }
+
+  @include m.e(file) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: t.use-var('spacing-xs');
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: t.use-var('spacing-xs');
+    background-color: fn.use-var(color, default, light-9);
+    cursor: pointer;
+  }
+
+  @include m.e(file-badge) {
+    @include m.flex(inline-flex);
+    justify-content: center;
+    padding: 1px t.use-var('spacing-xs');
+    border-radius: t.control-radius(small);
+    color: fn.use-var(text-color, white);
+    font-size: t.use-var('font-size-auxiliary');
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  @include m.e(file-name) {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: fn.use-var(text-color, second);
+    font-size: t.use-var('font-size-auxiliary');
+    line-height: 1.2;
+  }
+
+  @include m.is(failed) {
+    @include m.bem($root-name, file) {
+      border: fn.use-var(border, width) fn.use-var(border, style) fn.use-var(color, danger);
+    }
+  }
+
+  @include m.e(mask) {
+    // 上传中遮罩压暗主题无关，直接写 rgba（同 dialog overlay 处理）
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.45);
+  }
+
+  @include m.e(spinner) {
+    width: calc(#{t.use-var('loading-indicator')} / 2);
+    aspect-ratio: 1;
+    box-sizing: border-box;
+    border: 2px solid rgba(255, 255, 255, 0.35);
+    border-top-color: rgba(255, 255, 255, 0.95);
+    border-radius: 50%;
+    animation: um-uploader-spin 0.8s linear infinite;
+  }
+
+  @include m.e(remove) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: t.use-var('spacing-xl');
+    height: t.use-var('spacing-xl');
+    padding: 0;
+    border: none;
+    border-bottom-left-radius: t.control-radius(small);
+    background-color: rgba(0, 0, 0, 0.55);
+    color: fn.use-var(text-color, white);
+    font-size: t.use-var('font-size-auxiliary');
+    line-height: 1;
+    cursor: pointer;
+
+    & > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  @include m.e(trigger) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0;
+    border: fn.use-var(border, width) dashed fn.use-var(border, muted-color);
+    border-radius: t.control-radius(default);
+    background-color: fn.use-var(color, default, light-9);
+    color: fn.use-var(text-color, assist);
+    font-size: t.use-var('font-size-title');
+    cursor: pointer;
+    transition:
+      border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:active {
+      border-color: fn.use-var(color, primary);
+      color: fn.use-var(color, primary);
+    }
+
+    & > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  @include m.is(disabled) {
+    @include m.bem($root-name, trigger) {
+      border-color: fn.use-var(border, muted-color);
+      background-color: fn.use-var(color, disabled);
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.is(readonly) {
+    @include m.bem($root-name, thumb) {
+      cursor: default;
+    }
+
+    @include m.bem($root-name, file) {
+      cursor: default;
+    }
+  }
+
+  @include m.e(native) {
+    display: none;
+  }
+
+  // 内置图片大图预览：挂 overlay 容器（设备外壳内随壳定位）
+  @include m.e(previewer) {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.85);
+  }
+
+  @include m.e(previewer-image) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  @include m.e(previewer-close) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: t.use-var('touch-target');
+    height: t.use-var('touch-target');
+    padding: 0;
+    border: none;
+    background: none;
+    color: fn.use-var(text-color, white);
+    font-size: t.use-var('font-size-title');
+    cursor: pointer;
+
+    & > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+}
+
+@keyframes um-uploader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/uploader/style.ts

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

package/src/components/uploader/uploader.vue

@@ -0,0 +1,306 @@
+<template>
+  <div :class="uploaderClass">
+    <ul :class="cls.e('list')">
+      <li
+        v-for="(file, index) in modelValue"
+        :key="index"
+        :class="[cls.e('item'), bem.is('failed', file.status === 'failed')]"
+        @click="handleClick(file, index)"
+      >
+        <slot name="item" :file="file" :index="index">
+          <img
+            v-if="isImageFile(file) && file.url"
+            :src="file.url"
+            :alt="file.name ?? ''"
+            :class="cls.e('thumb')"
+          />
+          <div v-else :class="cls.e('file')">
+            <span :class="cls.e('file-badge')" :style="{ backgroundColor: badgeColor(file) }">
+              {{ badgeLabel(file) }}
+            </span>
+            <span :class="cls.e('file-name')">{{ file.name }}</span>
+          </div>
+        </slot>
+
+        <span v-if="file.status === 'uploading'" :class="cls.e('mask')">
+          <span :class="cls.e('spinner')"></span>
+        </span>
+
+        <button
+          v-if="canRemove(file, index) && !disabled && !readonly"
+          type="button"
+          aria-label="删除"
+          :class="cls.e('remove')"
+          @click.stop="handleRemove(index)"
+        >
+          <Close />
+        </button>
+      </li>
+
+      <li v-if="showTrigger" :class="cls.e('item')">
+        <button
+          type="button"
+          aria-label="上传文件"
+          :class="cls.e('trigger')"
+          :disabled="disabled"
+          @click="pick"
+        >
+          <Plus />
+        </button>
+      </li>
+    </ul>
+
+    <input
+      ref="inputRef"
+      type="file"
+      :class="cls.e('native')"
+      :accept="accept"
+      :multiple="multiple"
+      @change="handleChange"
+    />
+
+    <Teleport :to="getOverlayContainer()">
+      <div
+        v-if="previewUrl"
+        :class="cls.e('previewer')"
+        :style="{ zIndex: previewZIndex }"
+        @click="closePreview"
+      >
+        <img :src="previewUrl" alt="" :class="cls.e('previewer-image')" />
+        <button
+          type="button"
+          aria-label="关闭"
+          :class="cls.e('previewer-close')"
+          @click.stop="closePreview"
+        >
+          <Close />
+        </button>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps } from '@veltra/compositions'
+import { Close, Plus } from '@veltra/icons/normal'
+import { injectFormContext, zIndex } from '@veltra/utils'
+import { computed, reactive, ref } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { UploaderEmits, UploaderFileItem, UploaderProps } from '../../types/uploader'
+import { getOverlayContainer } from '../_internal/overlay-container'
+
+defineOptions({ name: 'UUploader' })
+
+// deletable 的联合类型必须内联在泛型里且函数成员在前：跨包 extends（@veltra/utils）解析链路下，
+// 经类型文件引用或别名引用的联合都会被宏丢失 Function 运行时类型（实测 boolean|fn 与别名均塌缩为 Boolean）
+const props = withDefaults(
+  defineProps<
+    UploaderProps & { deletable?: ((file: UploaderFileItem, index: number) => boolean) | boolean }
+  >(),
+  {
+    accept: 'image/*,.pdf,.doc,.docx,.xls,.xlsx',
+    multiple: false,
+    maxCount: Number.POSITIVE_INFINITY,
+    deletable: true,
+    preview: true,
+    disabled: undefined,
+    readonly: undefined
+  }
+)
+
+const emit = defineEmits<UploaderEmits>()
+
+defineSlots<{
+  /** 自定义文件瓦片内容，作用域参数为 `file` 与 `index`；遮罩与删除按钮始终由组件渲染 */
+  item?: (scope: { file: UploaderFileItem; index: number }) => any
+}>()
+
+const modelValue = defineModel<UploaderFileItem[]>()
+
+const cls = bem('uploader')
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const uploaderClass = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value)
+  ]
+})
+
+const inputRef = ref<HTMLInputElement>()
+
+/** 数量未满且可交互时才展示上传入口 */
+const showTrigger = computed(() => {
+  if (disabled.value || readonly.value) return false
+  return (modelValue.value?.length ?? 0) < props.maxCount
+})
+
+// ===== 文件类型识别（图片缩略图，其余走扩展名徽标） =====
+
+const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'heic', 'heif'])
+
+function extOf(name?: string): string {
+  if (!name) return ''
+  const dot = name.lastIndexOf('.')
+  return dot === -1 ? '' : name.slice(dot + 1)
+}
+
+function isImageFile(file: UploaderFileItem): boolean {
+  const ext = extOf(file.name)
+  if (ext) return IMAGE_EXTS.has(ext.toLowerCase())
+  // 无文件名的历史数据只能按地址猜测：data:image 与 blob 视为图片
+  return /^data:image|^blob:/.test(file.url)
+}
+
+/** 扩展名徽标：文案 + 品牌底色（文件格式的行业惯用色，非主题色，不随暗色切换） */
+const BADGES: Record<string, { label: string; color: string }> = {
+  pdf: { label: 'PDF', color: '#fa5151' },
+  doc: { label: 'DOC', color: '#2b7cd3' },
+  docx: { label: 'DOC', color: '#2b7cd3' },
+  xls: { label: 'XLS', color: '#217346' },
+  xlsx: { label: 'XLS', color: '#217346' }
+}
+
+const FALLBACK_BADGE = { label: 'FILE', color: '#909399' }
+
+function badgeOf(file: UploaderFileItem) {
+  return BADGES[extOf(file.name).toLowerCase()] ?? FALLBACK_BADGE
+}
+
+const badgeLabel = (file: UploaderFileItem) => badgeOf(file).label
+
+const badgeColor = (file: UploaderFileItem) => badgeOf(file).color
+
+// ===== 选择与读取 =====
+
+function pick() {
+  if (disabled.value || readonly.value) return
+  inputRef.value?.click()
+}
+
+/** accept 匹配：扩展名项（.pdf）按扩展名比对，MIME 项（application/pdf、image/*）按类型精确或通配比对 */
+function matchAccept(file: File): boolean {
+  const tokens = props.accept
+    .split(',')
+    .map((token) => token.trim().toLowerCase())
+    .filter(Boolean)
+  const mimes = tokens.filter((token) => !token.startsWith('.'))
+  if (
+    file.type &&
+    mimes.some(
+      (mime) =>
+        mime === file.type || (mime.endsWith('/*') && file.type.startsWith(mime.slice(0, -1)))
+    )
+  ) {
+    return true
+  }
+  const ext = extOf(file.name).toLowerCase()
+  return Boolean(ext) && tokens.includes(`.${ext}`)
+}
+
+async function handleChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const picked = Array.from(input.files ?? [])
+  input.value = ''
+
+  if (!picked.length || disabled.value || readonly.value) return
+
+  const remaining = props.maxCount - (modelValue.value?.length ?? 0)
+  if (remaining <= 0) return
+
+  const oversize: File[] = []
+  const candidates: File[] = []
+
+  for (const file of picked.slice(0, remaining)) {
+    if (!matchAccept(file)) continue
+    if (props.maxSize && file.size > props.maxSize) {
+      oversize.push(file)
+      continue
+    }
+    candidates.push(file)
+  }
+
+  if (oversize.length) emit('oversize', oversize)
+  if (!candidates.length) return
+
+  // beforeRead 并行校验，返回 false 或抛异常的文件剔除
+  const checked = await Promise.all(
+    candidates.map(async (file) => {
+      try {
+        return ((await props.beforeRead?.(file)) ?? true) && file
+      } catch {
+        return false
+      }
+    })
+  )
+  const accepted = checked.filter((file): file is File => Boolean(file))
+  if (!accepted.length) return
+
+  const items = await Promise.all(accepted.map((file) => toItem(file)))
+  const next = [...(modelValue.value ?? []), ...items]
+  modelValue.value = next
+  emit('change', next)
+}
+
+/** File → 列表项：无 upload 时本地 blob 直显；有 upload 先占位再回填地址（reactive 包装保证异步回填触发视图更新） */
+async function toItem(file: File): Promise<UploaderFileItem> {
+  const base: UploaderFileItem = { name: file.name, size: file.size }
+
+  if (!props.upload) return { ...base, url: URL.createObjectURL(file), status: 'done' }
+
+  const item = reactive<UploaderFileItem>({ ...base, url: '', status: 'uploading' })
+  props
+    .upload(file)
+    .then((url) => {
+      item.url = url
+      item.status = 'done'
+    })
+    .catch(() => {
+      item.status = 'failed'
+    })
+  return item
+}
+
+// ===== 操作（deletable 支持按文件控制删除按钮显隐）=====
+
+function canRemove(file: UploaderFileItem, index: number): boolean {
+  return typeof props.deletable === 'function'
+    ? props.deletable(file, index)
+    : props.deletable !== false
+}
+
+function handleRemove(index: number) {
+  if (disabled.value || readonly.value) return
+  const files = [...(modelValue.value ?? [])]
+  const [file] = files.splice(index, 1)
+  if (!file) return
+  modelValue.value = files
+  // 仅回收组件自身创建的本地预览地址
+  if (file.url.startsWith('blob:')) URL.revokeObjectURL(file.url)
+  emit('delete', file, index)
+  emit('change', files)
+}
+
+const previewUrl = ref('')
+const previewZIndex = ref(0)
+
+function handleClick(file: UploaderFileItem, index: number) {
+  // 只读态保留预览能力（查看场景）；禁用态完全不可交互
+  if (disabled.value) return
+  emit('click-file', file, index)
+  if (props.preview && file.status !== 'uploading' && isImageFile(file)) {
+    previewUrl.value = file.url
+    previewZIndex.value = zIndex()
+  }
+}
+
+function closePreview() {
+  previewUrl.value = ''
+}
+</script>

package/src/env.d.ts

@@ -0,0 +1,7 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, any>
+  export default component
+}
+
+declare module '*.scss' {}

package/src/index.ts

@@ -1 +1,99 @@
-export default {}
+export { UAvatar } from './components/avatar'
+export { UBadge } from './components/badge'
+export { UButton } from './components/button'
+export { UCard } from './components/card'
+export { UCascade } from './components/cascade'
+export { UCheckTag } from './components/check-tag'
+export { UCheckbox } from './components/checkbox'
+export { UCheckboxGroup } from './components/checkbox-group'
+export { UCollapse, UCollapseItem } from './components/collapse'
+export { UDatePicker } from './components/date-picker'
+export { UDescriptions, UDescriptionsItem } from './components/descriptions'
+export { UDialog } from './components/dialog'
+export { UDivider } from './components/divider'
+export { UDrawer } from './components/drawer'
+export { UEmpty } from './components/empty'
+export { UForm } from './components/form'
+export { UFormItem } from './components/form-item'
+export { UIcon } from './components/icon'
+export { UInput } from './components/input'
+export { UList, UListItem } from './components/list'
+export { ULoading, vLoading } from './components/loading'
+export { UMessage, message } from './components/message'
+export { UMessageConfirm, messageConfirm } from './components/message-confirm'
+export { UMultiSelect } from './components/multi-select'
+export { UNumberInput } from './components/number-input'
+export { URadio } from './components/radio'
+export { URadioGroup } from './components/radio-group'
+export { UPasswordInput } from './components/password-input'
+export { UProgress } from './components/progress'
+export { USegment } from './components/segment'
+export { USkeleton } from './components/skeleton'
+export { USelect } from './components/select'
+export { USwitch } from './components/switch'
+export { USpace } from './components/space'
+export { USteps } from './components/steps'
+export { UTabs } from './components/tabs'
+export { UTag } from './components/tag'
+export { UText } from './components/text'
+export { UTextarea } from './components/textarea'
+export { UTimePicker } from './components/time-picker'
+export { UUploader } from './components/uploader'
+export { UTimeline, UTimelineItem } from './components/timeline'
+
+export { useScrollLock } from './shared/use-scroll-lock'
+export type { ScrollLock } from './shared/use-scroll-lock'
+export {
+  horizontalSwipeDirection,
+  shouldCloseByDrag,
+  useTouchGesture
+} from './shared/use-touch-gesture'
+export type {
+  DragDismissOptions,
+  TouchGestureHandlers,
+  TouchGestureState,
+  UseTouchGestureOptions
+} from './shared/use-touch-gesture'
+
+export type * from './types/avatar'
+export type * from './types/badge'
+export type * from './types/button'
+export type * from './types/card'
+export type * from './types/cascade'
+export type * from './types/check-tag'
+export type * from './types/checkbox'
+export type * from './types/checkbox-group'
+export type * from './types/date-picker'
+export type * from './types/collapse'
+export type * from './types/icon'
+export type * from './types/input'
+export type * from './types/list'
+export type * from './types/loading'
+export type * from './types/message'
+export type * from './types/message-confirm'
+export type * from './types/multi-select'
+export type * from './types/number-input'
+export type * from './types/password-input'
+export type * from './types/radio'
+export type * from './types/radio-group'
+export type * from './types/descriptions'
+export type * from './types/dialog'
+export type * from './types/divider'
+export type * from './types/drawer'
+export type * from './types/empty'
+export type * from './types/form'
+export type * from './types/form-item'
+export type * from './types/progress'
+export type * from './types/skeleton'
+export type * from './types/select'
+export type * from './types/switch'
+export type * from './types/segment'
+export type * from './types/space'
+export type * from './types/steps'
+export type * from './types/tabs'
+export type * from './types/tag'
+export type * from './types/text'
+export type * from './types/textarea'
+export type * from './types/time-picker'
+export type * from './types/timeline'
+export type * from './types/uploader'

package/src/shared/bem.ts

@@ -0,0 +1,12 @@
+import { makeBEM, type BEM } from '@veltra/utils'
+
+/**
+ * 移动端类名前缀 `um-`（桌面端为 `u-`）
+ *
+ * 双端组件名刻意对齐，类名前缀必须分离：同一应用同时引入
+ * `@veltra/desktop` 与 `@veltra/mobile` 时，同名组件的样式互不覆盖。
+ * 对应 SCSS 侧 `@use ... with ($namespace: um)`。
+ */
+export const bem = makeBEM('um-')
+
+export type MobileBEM<N extends string> = BEM<N, 'um-'>