@veltra/desktop 1.0.0

package/src/types/css-transition.ts

@@ -0,0 +1,38 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 过渡组件属性 */
+export interface CssTransitionProps {
+  /** 类名称，和vue的transition组件类似 */
+  name: string
+  /** 是否激活 */
+  active?: boolean
+}
+
+/** 过渡组件定义的事件 */
+export interface CssTransitionEmits {
+  /** 过渡进入动画结束 */
+  (e: 'after-enter'): void
+  /** 过渡离开动画结束 */
+  (e: 'after-leave'): void
+  /** 离开过渡动画取消 */
+  (e: 'leave-canceled'): void
+  /** 进入过渡动画取消 */
+  (e: 'enter-canceled'): void
+}
+
+/** 过渡组件暴露的属性和方法(组件内部使用) */
+export interface _CssTransitionExposed {
+  /**
+   * 切换过渡状态
+   * @param active 是否激活. true激活，false未激活
+   */
+  toggle(active: boolean): void
+  /**
+   * 切换过渡状态
+   * @param activeAction 激活函数，通过返回值来确定是否激活
+   */
+  toggle(activeAction: (active: boolean) => boolean): void
+}
+
+/** 过渡组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type CssTransitionExposed = DeconstructValue<_CssTransitionExposed>

package/src/types/date-panel.ts

@@ -0,0 +1,18 @@
+import type { Dater } from '@cat-kit/core'
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+
+export type PanelType = 'day' | 'month' | 'year'
+
+export interface DatePanelProps {
+  date?: Dater
+  rangeDate?: [Dater, Dater]
+  range?: boolean
+  disabledDate?: (date: Dater) => boolean
+  type?: 'date' | 'month' | 'year'
+  size?: FormComponentProps['size']
+}
+
+export interface DatePanelEmits {
+  (e: 'select:date', date: Dater): void
+  (e: 'select:range-date', rangeDate?: [Dater, Dater]): void
+}

package/src/types/date-picker.ts

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

package/src/types/date-range-picker.ts

@@ -0,0 +1,31 @@
+import type { Dater } from '@cat-kit/core'
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** date-range-picker组件属性 */
+export interface DateRangePickerProps extends FormComponentProps {
+  modelValue?: [string, string]
+  /** 占位 */
+  placeholder?: [string, string]
+  /** 日期类型 */
+  type?: 'date' | 'month' | 'year'
+  /** 日期格式化 */
+  format?: string
+  /** 日期值格式化, 当没有指定时默认使用format属性，仅当值和显示的内容不一致时才需要使用到该属性 */
+  valueFormat?: string
+  /** 最小可选日期 */
+  disabledDate?: (date: Dater) => boolean
+  /** 是否显示清除按钮 */
+  clearable?: boolean
+}
+
+/** date-range-picker组件定义的事件 */
+export interface DateRangePickerEmits {
+  (e: 'update:modelValue', value?: [string, string]): void
+}
+
+/** date-range-picker组件暴露的属性和方法(组件内部使用) */
+export interface _DateRangePickerExposed {}
+
+/** date-range-picker组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type DateRangePickerExposed = DeconstructValue<_DateRangePickerExposed>

package/src/types/dialog.ts

@@ -0,0 +1,35 @@
+import type { ComponentSize } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 对话框组件属性 */
+export interface DialogProps {
+  /** 显示或隐藏 */
+  modelValue?: boolean
+  /** 弹框标题，header的别名 */
+  title?: string
+  /** 弹框头部内容，别名是header */
+  header?: string
+  /** 大小尺寸 */
+  size?: ComponentSize
+  /** 显示模态层 */
+  modal?: boolean
+  /** 全屏 */
+  fullscreen?: boolean
+}
+
+/** 对话框组件定义的事件 */
+export interface DialogEmits {
+  /** 更新对话框的显示 */
+  (e: 'update:modelValue', visible: boolean): void
+  /** 对话框完全关闭后触发的事件 */
+  (e: 'closed'): void
+}
+
+/** 对话框组件暴露的属性和方法(组件内部使用) */
+export interface _DialogExposed {
+  /** 关闭对话框 */
+  close: () => void
+}
+
+/** 对话框组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type DialogExposed = DeconstructValue<_DialogExposed>

package/src/types/drawer.ts

@@ -0,0 +1,35 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 抽屉方向 */
+export type DrawerDirection = 'left' | 'right' | 'top' | 'bottom'
+
+/** 抽屉模式 */
+export type DrawerMode = 'edge' | 'inset'
+
+/** 抽屉组件属性 */
+export interface DrawerProps {
+  /** 是否显示抽屉 */
+  modelValue?: boolean
+  /** 抽屉方向 */
+  direction?: DrawerDirection
+
+  /** 是否显示关闭按钮 */
+  showClose?: boolean
+  /** 抽屉标题 */
+  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/dropdown.ts

@@ -0,0 +1,59 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { CSSProperties } from 'vue'
+
+/** 下拉框组件属性 */
+export interface DropdownProps {
+  /**
+   * 触发方式
+   * @default 'hover'
+   */
+  trigger?: 'hover' | 'click' | 'custom'
+  /**
+   * 宽度
+   * @default - 跟随触发宽度
+   */
+  width?: string
+  /**
+   * 最小宽度
+   */
+  minWidth?: string
+  /**
+   * 内容容器标签
+   */
+  contentTag?: string
+  /** 内容容器类 */
+  contentClass?: unknown
+  /** 内容容器样式 */
+  contentStyle?: CSSProperties | string
+  /** 显示下拉框 */
+  visible?: boolean
+  /** 禁用 */
+  disabled?: boolean
+}
+
+/** 下拉框组件定义的事件 */
+export interface DropdownEmits {
+  /** 下拉框显示或隐藏事件 */
+  (e: 'update:visible', visible: boolean): void
+  /** 键盘事件 */
+  (e: 'keydown', event: KeyboardEvent): void
+}
+
+/** 下拉框组件暴露的属性和方法(组件内部使用) */
+export interface _DropdownExposed {
+  /**
+   * 打开下拉擦菜单
+   * @param config 配置
+   */
+  open: (config?: {
+    /** 自定义触发元素 */
+    trigger?: HTMLElement
+  }) => void
+  /** 关闭 */
+  close: () => void
+  /** 更新下拉框位置 */
+  updateDropdown: () => void
+}
+
+/** 下拉框组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type DropdownExposed = DeconstructValue<_DropdownExposed>

package/src/types/empty.ts

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

package/src/types/expression-editor.ts

@@ -0,0 +1,30 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+export interface VariableItem {
+  label: string
+  value: string
+  /** 可选类型标识（如 string、number） */
+  type?: string
+  /** 子级变量（支持树形结构） */
+  children?: VariableItem[]
+}
+
+/** 表达式编辑器组件属性 */
+export interface ExpressionEditorProps extends FormComponentProps {
+  modelValue?: string
+  placeholder?: string
+  /** 变量列表 */
+  variables?: VariableItem[]
+}
+
+/** 表达式编辑器组件定义的事件 */
+export interface ExpressionEditorEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** 表达式编辑器组件暴露的属性和方法(组件内部使用) */
+export interface _ExpressionEditorExposed {}
+
+/** 表达式编辑器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type ExpressionEditorExposed = DeconstructValue<_ExpressionEditorExposed>

package/src/types/file-picker.ts

@@ -0,0 +1,24 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 文件上传器组件属性 */
+export interface UploaderProps extends FormComponentProps {
+  /** 渲染标签 */
+  tag?: string
+  /** 允许上传的文件类型 */
+  accept?: string
+  /** 是否允许多选 */
+  multiple?: boolean
+}
+
+/** 文件上传器组件定义的事件 */
+export interface UploaderEmits {
+  /** 拾取 */
+  (e: 'pick', files: File[]): void
+}
+
+/** 文件上传器组件暴露的属性和方法(组件内部使用) */
+export interface _UploaderExposed {}
+
+/** 文件上传器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type UploaderExposed = DeconstructValue<_UploaderExposed>

package/src/types/float-button.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { Component } from 'vue'
+
+import type { ButtonType } from './button'
+
+export interface FloatButtonItem {
+  /** 一个图标 */
+  icon?: Component
+  /** 名称 */
+  name?: string
+  /** 按钮颜色类别 */
+  type?: ButtonType
+  /** 标识，用来确定唯一性 */
+  key: string
+}
+
+/** 悬浮按钮组件属性 */
+export interface FloatButtonProps extends ComponentProps {
+  /** 操作项 */
+  items?: FloatButtonItem[]
+}
+
+/** 悬浮按钮组件定义的事件 */
+export interface FloatButtonEmits {
+  (e: 'click', key: string): void
+}
+
+/** 悬浮按钮组件暴露的属性和方法(组件内部使用) */
+export interface _FloatButtonExposed {}
+
+/** 悬浮按钮组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type FloatButtonExposed = DeconstructValue<_FloatButtonExposed>

package/src/types/form-item.ts

@@ -0,0 +1,13 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+
+/** 组件项组件属性 */
+export interface FormItemProps extends FormComponentProps {
+  /** 标签宽度 */
+  labelWidth?: string | number
+}
+
+/** 组件项组件定义的事件 */
+export interface FormItemEmits {}
+
+/** 组件项组件暴露的属性和方法 */
+export interface FormItemExposed {}

package/src/types/form.ts

@@ -0,0 +1,89 @@
+import type { ValidateRule } from '@veltra/utils/types'
+import type { ComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { ShallowRef } from 'vue'
+
+export interface FormModelItem<Val = any> extends ValidateRule {
+  /** 模型值 */
+  value?: Val
+}
+
+export type ModelData<Fields extends Record<string, FormModelItem>> = {
+  [key in keyof Fields]: Fields[key]['value'] extends () => infer T ? T : Fields[key]['value']
+}
+
+export type ModelRules<Fields extends Record<string, FormModelItem>> = {
+  [key in keyof Fields]: Omit<Fields[key], 'value'>
+}
+
+export interface DataSettingConfig {
+  /**
+   * 是否校验
+   * @default true
+   */
+  validate?: boolean
+}
+
+export type IFormModel<
+  Fields extends Record<string, FormModelItem> = Record<string, FormModelItem>
+> = {
+  /** 表单数据 */
+  readonly data: ModelData<Fields>
+  /** 字段校验规则 */
+  readonly fields: Fields
+  /**
+   * 字段键
+   */
+  readonly allKeys: string[]
+  /** 需要校验的key */
+  formKeys: Map<number, (keyof Fields)[]>
+  /** 错误 */
+  readonly errors: Map<keyof Fields, string[] | undefined>
+  /**
+   * 字段校验
+   * @param fields 字段， 如果不传入时将会使用keyFields来进行校验
+   */
+  validate: (fields?: keyof Fields | (keyof Fields)[]) => Promise<boolean>
+  /** 重置数据 */
+  resetData(fields?: keyof Fields | (keyof Fields)[]): void
+
+  /**
+   * 设置数据
+   * @param formData 表单值
+   * @param options 配置
+   */
+  setData(formData: Partial<ModelData<Fields>>, config?: DataSettingConfig): void
+  /** 清除校验 */
+  clearValidate(): void
+  /** 监听值变更 */
+  onChange(cb: (field: keyof Fields, val: any) => void): void
+  /** 关闭监听值变更 */
+  offChange(cb: (field: keyof Fields, val: any) => void): void
+}
+
+/** 表单组件属性 */
+export interface FormProps<Model extends IFormModel = IFormModel> extends ComponentProps {
+  /**
+   * 自定义表单列数
+   * - 默认根据尺寸断点自动排列
+   */
+  cols?: number
+  /** 是否显示初始数据 */
+  showInitialData?: boolean
+  /** 表单数据模型 */
+  model: Model
+  /** 表单项label宽度 */
+  labelWidth?: string | number
+  /** 是否不显示tips */
+  noTips?: boolean
+  /** 是否只读 */
+  readonly?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+}
+
+export interface _FormExposed {
+  el: ShallowRef<HTMLElement | null | undefined>
+}
+
+export type FormExposed = DeconstructValue<_FormExposed>

package/src/types/gantt-chart.ts

@@ -0,0 +1,15 @@
+/** 甘特图组件属性 */
+export interface GanttChartProps {
+  modelValue?: string
+}
+
+/** 甘特图组件定义的事件 */
+export interface GanttChartEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** 甘特图组件暴露的属性和方法(组件内部使用) */
+export interface _GanttChartExposed {}
+
+/** 甘特图组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export interface GanttChartExposed {}

package/src/types/grid-input.ts

@@ -0,0 +1,23 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 密码输入框组件组件属性 */
+export interface GridInputProps {
+  modelValue?: string
+  length?: number
+  zero?: false
+  separator?: string
+}
+
+/** 密码输入框组件组件定义的事件 */
+export interface GridInputEmits {
+  (e: 'update:modelValue', value: string): void
+  (e: 'input', value: string): void
+}
+
+/** 密码输入框组件组件暴露的属性和方法(组件内部使用) */
+export interface _GridInputExposed {
+  clear: () => void
+}
+
+/** 密码输入框组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type GridInputExposed = DeconstructValue<_GridInputExposed>

package/src/types/grid.ts

@@ -0,0 +1,86 @@
+import type { BreakpointName } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { ShallowRef } from 'vue'
+
+export interface Breakpoint {
+  name: BreakpointName
+  level: number
+}
+
+/** 断点列 */
+export interface BreakCols {
+  /** 超小尺寸 */
+  xs?: number
+  /** 小尺寸 */
+  sm?: number
+  /** 中等尺寸 */
+  md?: number
+  /** 大尺寸 */
+  lg?: number
+  /** 中大尺寸 */
+  xl?: number
+  /** 默认尺寸 */
+  default?: number
+}
+
+/** 网格布局组件属性 */
+export interface GridProps {
+  /**
+   * 栅格列数, 可传入数字，对象或者函数
+   * @default 24
+   * @example
+   * ```ts
+   * // 数字
+   * const cols = 12
+   * // 对象
+   * const cols = {
+   *   xs: 12,
+   *   sm: 12,
+   *   md: 12,
+   *   lg: 24,
+   *   xl: 24
+   * }
+   * // 函数
+   * const cols = (size: 'xs' | 'sm' | 'md' | 'lg' | 'xl', sizeLevel: number) => {
+   *   if (sizeLevel < 3) return 12
+   *   return 24
+   * }
+   * ```
+   */
+  cols?: number | BreakCols | ((breakpoint: Breakpoint) => number)
+  /** 渲染标签 */
+  tag?: string
+  /** 间隔, 为字符串时可以同时指定行间隔和列间隔 */
+  gap?: number | string
+}
+
+/**
+ * 网格布局项组件事件
+ */
+export interface GridEmits {
+  /** 尺寸变更 */
+  (e: 'resize', rect: DOMRect): void
+  /** 断点变更 */
+  (e: 'breakpoint-change', breakpoint: Breakpoint): void
+}
+
+/** 网格布局项组件属性 */
+export interface GridItemProps {
+  /** 跨距，当指定为0时，则代表隐藏, 默认为1 */
+  span?:
+    | number
+    | 'full'
+    | ({
+        [key in BreakpointName]?: 'full' | number
+      } & { default: number | 'full' })
+  /** 容器标签 */
+  tag?: string
+}
+
+/** 网格组件暴露的属性和方法(组件内部使用) */
+export interface _GridExposed {
+  el: ShallowRef<HTMLElement | null>
+}
+
+/** 网格组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type GridExposed = DeconstructValue<_GridExposed>

package/src/types/group-input.ts

@@ -0,0 +1,29 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { StyleValue } from 'vue'
+
+/** 分组输入组件属性 */
+export interface GroupInputProps<
+  GroupItem extends Record<string, any> = Record<string, any>
+> extends FormComponentProps {
+  modelValue?: GroupItem[]
+  /** 最大数量 */
+  max?: number
+  /** 是否允许创建 */
+  creatable?: boolean
+  /** 默认值 */
+  itemDefault?: Record<string, any>
+  /** 输入项样式 */
+  itemStyle?: StyleValue
+}
+
+/** 分组输入组件定义的事件 */
+export interface GroupInputEmits<GroupItem extends Record<string, any> = Record<string, any>> {
+  (e: 'update:modelValue', modelValue: GroupItem[]): void
+}
+
+/** 分组输入组件暴露的属性和方法(组件内部使用) */
+export interface _GroupInputExposed {}
+
+/** 分组输入组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type GroupInputExposed = DeconstructValue<_GroupInputExposed>

package/src/types/icon.ts

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