@veltra/mobile 1.0.0 → 1.1.0

package/src/types/collapse.ts

@@ -0,0 +1,79 @@
+import type { ComponentProps } from '@veltra/utils'
+import type { Component } from 'vue'
+
+/** Collapse 项的唯一标识 */
+export type CollapseValue = string | number
+
+/** Collapse modelValue：手风琴模式为单值，普通模式为数组（也兼容传入单值） */
+export type CollapseModelValue = CollapseValue | CollapseValue[]
+
+/** Collapse 组件属性 */
+export interface CollapseProps extends ComponentProps {
+  /** 当前展开项的 value（单个或多个） */
+  modelValue?: CollapseModelValue
+
+  /**
+   * 是否手风琴模式（一次只能展开一项）
+   * @default false
+   */
+  accordion?: boolean
+
+  /**
+   * 是否默认折叠全部项。设为 false 时默认全部展开。
+   * @default false
+   */
+  defaultCollapseAll?: boolean
+
+  /**
+   * 自定义展开图标组件，活动态会自动旋转 180°。
+   * 接受任意 Vue 组件（SFC、Functional Component 等）。
+   */
+  expandIcon?: Component
+}
+
+export interface CollapseEmits {
+  (e: 'update:modelValue', value: CollapseModelValue): void
+  /** 当前展开项变更时触发 */
+  (e: 'change', value: CollapseModelValue): void
+}
+
+/** CollapseItem 组件属性 */
+export interface CollapseItemProps {
+  /**
+   * 唯一标识；在 `UCollapse` 内使用时必填。
+   * 独立使用时可选。
+   */
+  value?: CollapseValue
+
+  /**
+   * 独立使用时的展开状态（`v-model`）。
+   * 在 `UCollapse` 内由父组件 `modelValue` 管理，此属性无效。
+   * @default false
+   */
+  modelValue?: boolean
+
+  /** 标题文本（也可通过 #header 插槽自定义标题区；展开图标始终保留，可用 expandIcon 替换） */
+  title?: string
+
+  /** 是否禁用 */
+  disabled?: boolean
+
+  /**
+   * 独立使用时的自定义展开图标，活动态会自动旋转 180°。
+   * 在 `UCollapse` 内由父组件 `expandIcon` 统一管理。
+   */
+  expandIcon?: Component
+
+  /**
+   * 折叠动画结束后卸载内容 DOM（展开时重新挂载），减少长列表的内存与渲染成本。
+   * 注意：卸载会丢失内容区的本地组件状态。
+   * @default false
+   */
+  destroyOnCollapse?: boolean
+}
+
+export interface CollapseItemEmits {
+  (e: 'update:modelValue', value: boolean): void
+  /** 展开状态变更时触发（仅独立使用） */
+  (e: 'change', value: boolean): void
+}

package/src/types/date-picker.ts

@@ -0,0 +1,39 @@
+import type { Dater } from '@cat-kit/core'
+import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+
+/** 绑定值类型 */
+export type DatePickerDataType = 'date' | 'timestamp' | 'string'
+
+/** date-picker组件属性（与 @veltra/desktop UDatePicker 对齐） */
+export interface DatePickerProps extends FormComponentProps {
+  modelValue?: string | number | Date
+  /** 占位 */
+  placeholder?: string
+  /** 日期类型 */
+  type?: 'date' | 'month' | 'year'
+  /** 日期格式化 */
+  format?: string
+  /** 日期值格式化, 当没有指定时默认使用format属性，仅当值和显示的内容不一致时才需要使用到该属性 */
+  valueFormat?: string
+  /**
+   * 绑定值的类型，默认为字符串。
+   * 当 dataType 没有指定为字符串时，valueFormat 属性不生效
+   */
+  dataType?: DatePickerDataType
+  /** 最小可选日期 */
+  disabledDate?: (date: Dater, raw: Date) => boolean
+  /** 是否显示清除按钮 */
+  clearable?: boolean
+}
+
+/** date-picker组件定义的事件 */
+export interface DatePickerEmits {
+  (e: 'update:modelValue', value?: string | number | Date): void
+  (e: 'change', date?: Date): void
+}
+
+/** date-picker组件暴露的属性和方法(组件内部使用) */
+export interface _DatePickerExposed {}
+
+/** date-picker组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type DatePickerExposed = DeconstructValue<_DatePickerExposed>

package/src/types/descriptions.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from '@veltra/utils'
+
+/** 描述列表布局：horizontal 键值同行 / vertical 键值分行 */
+export type DescriptionsLayout = 'horizontal' | 'vertical'
+
+/** 描述列表组件属性 */
+export interface DescriptionsProps extends ComponentProps {
+  /** 列表标题，渲染在列表顶部 */
+  title?: string
+  /** 每行展示的键值对列数，默认 3 */
+  column?: number
+  /** 边框模式：键值单元格带描边与键名底色，默认 false（无边框） */
+  border?: boolean
+  /** 布局方向，默认 'horizontal' */
+  layout?: DescriptionsLayout
+}
+
+/** 描述列表项组件属性 */
+export interface DescriptionsItemProps {
+  /** 键名文本 */
+  label?: string
+}

package/src/types/dialog.ts

@@ -0,0 +1,54 @@
+import type { DeconstructValue } from '@veltra/utils'
+
+/** 对话框过渡动画名称 */
+export type DialogTransition = 'fade-scale'
+
+/** 对话框正文水平对齐（NutUI 惯例默认居中，表单等场景可切左对齐） */
+export type DialogContentAlign = 'left' | 'center' | 'right'
+
+/** 对话框组件属性 */
+export interface DialogProps {
+  /** 显示或隐藏 */
+  modelValue?: boolean
+  /** 弹框标题，header的别名 */
+  title?: string
+  /** 弹框头部内容，别名是header */
+  header?: string
+  /** 确认按钮文字；传入 #footer 插槽时整个按钮组由插槽接管 */
+  confirmText?: string
+  /** 取消按钮文字 */
+  cancelText?: string
+  /** 是否显示取消按钮 */
+  showCancel?: boolean
+  /** footer 按钮组纵向堆叠（多操作/长文案场景） */
+  verticalActions?: boolean
+  /** 正文水平对齐 */
+  contentAlign?: DialogContentAlign
+  /** 显示模态层 */
+  modal?: boolean
+  /** 全屏 */
+  fullscreen?: boolean
+  /** 弹框过渡动画，默认为 fade-scale */
+  transition?: DialogTransition
+}
+
+/** 对话框组件定义的事件 */
+export interface DialogEmits {
+  /** 更新对话框的显示 */
+  (e: 'update:modelValue', visible: boolean): void
+  /** 点击确认按钮（默认随点击关闭） */
+  (e: 'confirm'): void
+  /** 点击取消按钮（默认随点击关闭） */
+  (e: 'cancel'): void
+  /** 对话框完全关闭后触发的事件 */
+  (e: 'closed'): void
+}
+
+/** 对话框组件暴露的属性和方法(组件内部使用) */
+export interface _DialogExposed {
+  /** 关闭对话框 */
+  close: () => void
+}
+
+/** 对话框组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type DialogExposed = DeconstructValue<_DialogExposed>

package/src/types/divider.ts

@@ -0,0 +1,14 @@
+/** 分割线组件属性 */
+export interface DividerProps {
+  /** 方向，水平或垂直，默认 'horizontal' */
+  direction?: 'horizontal' | 'vertical'
+
+  /** 是否为虚线，默认 false */
+  dashed?: boolean
+
+  /** 嵌套文字的对齐位置，仅水平方向生效，默认 'center' */
+  align?: 'left' | 'center' | 'right'
+}
+
+/** 分割线组件定义的事件 */
+export interface DividerEmits {}

package/src/types/drawer.ts

@@ -0,0 +1,38 @@
+import type { DeconstructValue } from '@veltra/utils'
+
+/** 抽屉方位（NutUI 惯例 prop 名），决定滑出方向与对应边缘的拖拽关闭手势 */
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'
+
+/** 抽屉模式 */
+export type DrawerMode = 'edge' | 'inset'
+
+/** 抽屉组件属性 */
+export interface DrawerProps {
+  /** 是否显示抽屉 */
+  modelValue?: boolean
+  /** 抽屉方位，默认 bottom（移动端惯例底部面板） */
+  placement?: DrawerPlacement
+
+  /** 是否显示关闭按钮 */
+  showClose?: boolean
+  /**
+   * 抽屉标题；传入时在内容区上方渲染标题栏
+   * @description 不传则不渲染标题栏，内容仍全部来自默认插槽
+   */
+  title?: string
+}
+
+/** 抽屉组件定义的事件 */
+export interface DrawerEmits {
+  (e: 'update:modelValue', value: boolean): void
+  /** 开始关闭时触发（点遮罩、点关闭按钮、边缘拖拽关闭） */
+  (e: 'close'): void
+  /** 完全关闭后触发：抽屉与遮罩的退出动画结束、节点已移除时 */
+  (e: 'closed'): void
+}
+
+/** 抽屉组件暴露的属性和方法(组件内部使用) */
+export interface _DrawerExposed {}
+
+/** 抽屉组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type DrawerExposed = DeconstructValue<_DrawerExposed>

package/src/types/empty.ts

@@ -0,0 +1,19 @@
+import type { DeconstructValue } from '@veltra/utils'
+
+/** 空内容组件属性 */
+export interface EmptyProps {
+  /** 图标大小, 默认48 */
+  size?: number
+
+  /** 空文本 */
+  text?: string
+}
+
+/** 空内容组件定义的事件 */
+export interface EmptyEmits {}
+
+/** 空内容组件暴露的属性和方法(组件内部使用) */
+export interface _EmptyExposed {}
+
+/** 空内容组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type EmptyExposed = DeconstructValue<_EmptyExposed>

package/src/types/form-item.ts

@@ -0,0 +1,22 @@
+import type { FormComponentProps } from '@veltra/utils'
+
+/** 表单项组件属性 */
+export interface FormItemProps extends FormComponentProps {
+  /**
+   * 标签宽度
+   * - number 单位 px；传了该值（自身或 UForm）label 用固定宽对齐
+   * - 都未传时 label 按内容自适应宽度（移动端默认）
+   */
+  labelWidth?: string | number
+  /** 标签位置；默认 'left' 行式（label 左、控件右），'top' 时 label 在控件上方 */
+  labelPosition?: 'top' | 'left'
+}
+
+/** 表单项组件定义的事件 */
+export interface FormItemEmits {
+  /** 内部控件 change，参数与控件一致 */
+  (e: 'change', ...args: any[]): void
+}
+
+/** 表单项组件暴露的属性和方法 */
+export interface FormItemExposed {}

package/src/types/form.ts

@@ -0,0 +1,54 @@
+import type { ComponentProps, DeconstructValue } from '@veltra/utils'
+import type { ShallowRef } from 'vue'
+
+/** 表单组件属性 */
+export interface FormProps extends ComponentProps {
+  /**
+   * 自定义表单列数
+   * - 移动端单列呈现，该属性不生效
+   */
+  cols?: number
+  /** 分组标题：渲染在卡片列表顶部，与 #header 插槽二选一，插槽优先 */
+  title?: string
+  /** 表单数据 */
+  model?: Record<string, any>
+  /** 开启后，字段当前值与基准值不同时，在控件下方展示「变更前」 */
+  showModified?: boolean
+  /** 「变更前」标签文案，默认「变更前：」 */
+  modifiedLabel?: string
+  /** 变更前基准数据；未传时回退到 model 引用首次传入时的快照（与 reset 一致） */
+  initialModel?: Record<string, any>
+  /**
+   * 表单项 label 宽度
+   * - number 单位 px；传了该值各行 label 固定宽对齐
+   * - 未传时 label 按内容自适应宽度（移动端默认）
+   */
+  labelWidth?: string | number
+  /** 表单项 label 位置；默认 'left' 行式（label 左、控件右），'top' 时 label 在控件上方 */
+  labelPosition?: 'top' | 'left'
+  /** 是否不显示tips */
+  noTips?: boolean
+  /** 是否只读 */
+  readonly?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+}
+
+/** 表单组件定义的事件 */
+export interface FormEmits {
+  /** model 字段值更新，含编程写入 */
+  (e: 'field:update', field: string, value: any): void
+}
+
+/** 表单暴露的属性和方法(组件内部使用) */
+export interface _FormExposed {
+  el: ShallowRef<HTMLElement | null | undefined>
+  /** 校验指定字段，未传 keys 时校验全部已注册字段 */
+  validate: (keys?: string[]) => Promise<boolean>
+  clearValidate: () => void
+  /** 将 model 恢复为最近一次 props.model 引用变更时的快照，并清除校验 */
+  reset: () => void
+}
+
+/** 表单暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type FormExposed = DeconstructValue<_FormExposed>

package/src/types/icon.ts

@@ -0,0 +1,10 @@
+/** 图标组件属性 */
+export interface IconProps {
+  /** 尺寸 */
+  size?: `${number}px` | number
+}
+
+export interface IconEmits {}
+
+/** 图标组件暴露的对象 */
+export interface IconExposed {}

package/src/types/input.ts

@@ -0,0 +1,51 @@
+import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { ShallowRef } from 'vue'
+
+/** 输入框组件属性（API 与 @veltra/desktop UInput 对齐；字号 16px、44px 触控热区为移动端形态） */
+export interface InputProps extends FormComponentProps {
+  /** modelValue */
+  modelValue?: string
+  /** 占位符 */
+  placeholder?: string
+  /** 前缀 */
+  prefix?: string
+  /** 后缀 */
+  suffix?: string
+  /** 是否可清除（移动端有值即展示清除按钮，不依赖 hover），默认 true */
+  clearable?: boolean
+  /** 原生只读 */
+  nativeReadonly?: boolean
+  /**
+   * 模式
+   * @description 如果指定请保证有一个符合模式的默认值
+   */
+  pattern?: RegExp
+}
+
+/** 输入框组件定义的事件 */
+export interface InputEmits {
+  /** 输入时持续更新 */
+  (e: 'update:modelValue', value: string): void
+  /** 在输入框失焦时触发更新 */
+  (e: 'change', value: string): void
+  /** 后缀点击事件 */
+  (e: 'suffix:click', value?: string): void
+  /** 前缀点击事件 */
+  (e: 'prefix:click', value?: string): void
+  /** 聚焦事件 */
+  (e: 'focus', value?: string): void
+  /** 清除事件 */
+  (e: 'clear'): void
+  /** 失焦事件 */
+  (e: 'blur', value?: string): void
+  /** 原生输入事件 */
+  (e: 'native:input', ev: Event): void
+}
+
+/** 输入框暴露的属性和方法(组件内部使用) */
+export interface _InputExposed {
+  el: ShallowRef<HTMLInputElement | undefined>
+}
+
+/** 输入框暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type InputExposed = DeconstructValue<_InputExposed>

package/src/types/list.ts

@@ -0,0 +1,13 @@
+import type { ComponentSize, DeconstructValue } from '@veltra/utils'
+
+export interface ListProps {
+  size?: ComponentSize
+  /** 列表数据 */
+  data: Record<string, any>[]
+}
+
+export interface ListEmits {}
+
+export interface _ListExposed {}
+
+export type ListExposed = DeconstructValue<_ListExposed>

package/src/types/loading.ts

@@ -0,0 +1,20 @@
+import type { DeconstructValue } from '@veltra/utils'
+
+export type LoadingType = 'dual-ring' | 'dot' | 'ring' | 'bars'
+
+/** loading组件属性 */
+export interface LoadingProps {
+  /** 加载类型 */
+  type: LoadingType
+}
+
+/** loading组件定义的事件 */
+export interface LoadingEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** loading组件暴露的属性和方法(组件内部使用) */
+export interface _LoadingExposed {}
+
+/** loading组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type LoadingExposed = DeconstructValue<_LoadingExposed>

package/src/types/message-confirm.ts

@@ -0,0 +1,72 @@
+import type { ColorType, ComponentProps, DeconstructValue } from '@veltra/utils'
+import type { AppContext } from 'vue'
+
+/** 消息确认框用户操作 */
+export type MessageConfirmAction = 'confirm' | 'cancel'
+
+/** 消息确认框组件属性 */
+export interface MessageConfirmProps extends ComponentProps {
+  /** 标题 */
+  title?: string
+  /** 内容 */
+  message: string
+  /** 确认按钮文字 */
+  confirmButtonText?: string
+  /** 取消按钮文字，为空则不显示 */
+  cancelButtonText?: string
+  /** 确认按钮类型 */
+  confirmButtonType?: ColorType
+  /** 层级，默认由 API 创建时自增分配 */
+  zIndex?: number
+}
+
+/** 消息确认框调用选项 */
+export interface MessageConfirmOptions extends MessageConfirmProps {
+  /** 点击按钮触发关闭时回调 */
+  onClose?: (action: MessageConfirmAction) => void
+  /** 关闭动画结束后回调 */
+  onClosed?: (action: MessageConfirmAction) => void
+}
+
+/** 消息确认框实例 */
+export interface MessageConfirmInstance {
+  /** 唯一标识 */
+  id: string
+  /** 手动关闭，未指定操作时视为 cancel */
+  close(action?: MessageConfirmAction): void
+  /** 彻底关闭（含动画结束）后的 Promise，值为用户操作 */
+  onClosed: Promise<MessageConfirmAction>
+}
+
+type MessageConfirmShortcutConfig = Omit<MessageConfirmOptions, 'message' | 'confirmButtonType'>
+
+/** 消息确认框函数式 API */
+export interface MessageConfirm {
+  /** 创建确认框 */
+  (options: MessageConfirmOptions | string): MessageConfirmInstance
+  /** 主要确认框 */
+  primary(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 成功确认框 */
+  success(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 信息确认框 */
+  info(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 警告确认框 */
+  warning(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 危险确认框 */
+  danger(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 关闭所有确认框 */
+  closeAll(): void
+  /** 设置全局渲染上下文 */
+  _context: AppContext | null
+}
+
+/** 消息确认框组件定义的事件 */
+export interface MessageConfirmEmits {
+  (e: 'close', action: MessageConfirmAction): void
+}
+
+/** 消息确认框组件暴露的属性和方法(组件内部使用) */
+export interface _MessageConfirmExposed {}
+
+/** 消息确认框组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type MessageConfirmExposed = DeconstructValue<_MessageConfirmExposed>

package/src/types/message.ts

@@ -0,0 +1,71 @@
+import type { DeconstructValue } from '@veltra/utils'
+import type { DefineComponent, AppContext } from 'vue'
+
+/** 消息类型 */
+export type MessageType = 'success' | 'warn' | 'info' | 'error' | 'default'
+
+/** 消息选项 */
+export type MessageOptions = MessageProps & {
+  /** 关闭回调 */
+  onClose?: () => void
+  /** 关闭结束后回调 */
+  onClosed?: () => void
+}
+
+type MsgAliasConf = Omit<MessageOptions, 'type' | 'message'>
+
+export interface MessageInstance {
+  /** 消息唯一标识 */
+  id: string
+  /** 手动关闭消息 */
+  close(): void
+  /** 消息彻底销毁后的 Promise (包括动画结束) */
+  onClosed: Promise<void>
+}
+
+export interface Message {
+  /** 创建消息 */
+  (options: MessageOptions | string): MessageInstance
+  /** 关闭所有的消息 */
+  closeAll(): void
+  /** 成功消息 */
+  success(message: string, config?: MsgAliasConf): MessageInstance
+  /** 警告消息 */
+  warn(message: string, config?: MsgAliasConf): MessageInstance
+  /** 信息消息 */
+  info(message: string, config?: MsgAliasConf): MessageInstance
+  /** 错误消息 */
+  error(message: string, config?: MsgAliasConf): MessageInstance
+  /** 默认消息 */
+  default(message: string, config?: MsgAliasConf): MessageInstance
+  /** 设置全局渲染上下文 */
+  _context: AppContext | null
+}
+
+/** 消息弹框组件组件属性 */
+export interface MessageProps {
+  /** 消息内容 */
+  message?: string
+  /** 渲染样式 */
+  type?: MessageType
+  /** 是否可以关闭 */
+  closable?: boolean
+  /**
+   * 持续时间, 单位ms
+   * @default 3000
+   */
+  duration?: number
+  /** 渲染html */
+  html?: boolean
+  /** 图标 */
+  icon?: DefineComponent
+}
+
+/** 消息弹框组件组件定义的事件 */
+export interface MessageEmits {}
+
+/** 消息弹框组件组件暴露的属性和方法(组件内部使用) */
+export interface _MessageExposed {}
+
+/** 消息弹框组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type MessageExposed = DeconstructValue<_MessageExposed>

package/src/types/multi-select.ts

@@ -0,0 +1,38 @@
+import type { FormComponentProps } from '@veltra/utils'
+import type { CSSProperties } from 'vue'
+
+/** multi-select 组件属性（移动端形态：面板走 BottomSheet） */
+export interface MultiSelectProps extends FormComponentProps {
+  /** 绑定值 */
+  modelValue?: Array<any>
+  /** 列表选项 */
+  options?:
+    | Record<string, any>[]
+    | ((qs: string) => Promise<Record<string, any>[]> | Record<string, any>[])
+  /** 值字段 */
+  valueKey?: string
+  /** 标签字段 */
+  labelKey?: string
+  /** 是否可清除 */
+  clearable?: boolean
+  /** 占位符 */
+  placeholder?: string
+  /** 是否启用搜索功能 */
+  filterable?: boolean
+  /** 最大展示数量 */
+  visibilityLimit?: number
+  /** 最大可选数量 */
+  max?: number
+  /** 底部面板内容容器样式 */
+  contentStyle?: CSSProperties | string
+  /** 底部面板内容容器类名 */
+  contentClass?: unknown
+  /** 是否允许创建新选项 */
+  creatable?: boolean
+}
+
+/** multi-select 组件定义的事件 */
+export interface MultiSelectEmits {
+  (e: 'update:modelValue', value: Array<any>): void
+  (e: 'change', options: Record<string, any>[]): void
+}

package/src/types/number-input.ts

@@ -0,0 +1,32 @@
+import type { InputProps } from './input'
+
+/** 数字输入组件属性（API 与 @veltra/desktop UNumberInput 对齐；步进按钮外置右侧、44px 触控热区为移动端形态） */
+export interface NumberInputProps extends Omit<InputProps, 'modelValue'> {
+  modelValue?: number
+  /** 是否为货币模式 */
+  currency?: boolean
+  /** 精度 */
+  precision?: number
+  /** 最小精度 */
+  minPrecision?: number
+  /** 最大精度 */
+  maxPrecision?: number
+  /** 步进, 指定为数字时开启累加按钮并将该值作为累加的步长, 为true则步长默认为1 */
+  step?: boolean | number
+  /** 最大值 */
+  max?: number
+  /** 最小值 */
+  min?: number
+  /** 倍数 */
+  multiple?: number
+}
+
+/** 数字输入组件定义的事件 */
+export interface NumberInputEmits {
+  (event: 'update:modelValue', value?: number): void
+  (event: 'change', value?: number): void
+  (event: 'clear'): void
+}
+
+/** 数字输入组件暴露的属性和方法 */
+export interface NumberInputExposed {}