@veltra/desktop 1.0.0

package/src/types/table.ts

@@ -0,0 +1,239 @@
+import type { Forest, TreeNode } from '@cat-kit/core'
+import type { ComponentSize } from '@veltra/utils/types/component-common'
+import type { DeconstructValue, RenderReturn } from '@veltra/utils/types/helper'
+import type { ShallowRef, Slots, VNode } from 'vue'
+
+export type TableColumnAlign = 'left' | 'center' | 'right'
+
+/**
+ * 合计上下文
+ */
+export interface TableSummaryContext {
+  /** 总数 */
+  total: number
+  /** 所有行数据 */
+  rows: TableRow[]
+  /** 多选选中的行，这是一个集合 */
+  checkedRows: Set<TableRow>
+  /** 当前列 */
+  column: TableColumnNode
+}
+
+export interface TableColumn {
+  /** 列的唯一键 */
+  key: string
+  /** 列的名称 */
+  name: string
+  /** 表头渲染，优先级大于name属性 */
+  nameRender?: (ctx: {
+    column: TableColumnNode
+  }) => VNode | string | null | undefined | (VNode | string | null | undefined)[]
+  /** 列最大宽度 */
+  width?: number
+  /** 列最小宽度 */
+  minWidth?: number
+  /**
+   * 列固定方式，为嵌套表头时此值无效
+   * @default 'left'
+   */
+  fixed?: 'left' | 'right'
+  /**
+   * 表头对齐方式, 如果没有指定，则默认使用align属性
+   * @default TableColumn['align']
+   */
+  headerAlign?: TableColumnAlign
+  /**
+   * 列对齐方式
+   * @default 'left'
+   */
+  align?: TableColumnAlign
+  /** 列渲染 */
+  render?: (scope: TableColumnRenderContext) => RenderReturn
+  /** 子列 */
+  children?: TableColumn[]
+  /** 表尾合计 */
+  summary?: boolean | ((ctx: TableSummaryContext) => RenderReturn)
+  /** 是否可调整列宽 */
+  resizable?: boolean
+  [key: string]: any
+}
+
+/** 表格组件属性 */
+export interface TableProps {
+  size?: ComponentSize
+  /** 表格数据 */
+  data?: Record<string, any>[]
+  /** 表格列 */
+  columns?: TableColumn[]
+  /** 多选时的已选项 */
+  checked?: Record<string, any>[]
+  /**
+   * 单选时的已选项
+   * @description 该属性需要指定rowKey来表示唯一性
+   */
+  selected?: Record<string, any>
+  /**
+   * 多选
+   * @description 该属性需要指定rowKey来表示唯一性
+   */
+  checkable?: boolean
+  /** 索引 */
+  showIndex?: boolean
+  /** 单选 */
+  selectable?: boolean
+  /**
+   * 标记为一个树形组件
+   * @default false
+   * @description 如果传入了一个字符串则代表树的子节点的key值
+   */
+  tree?: boolean | string
+  /**
+   * 作用域插槽
+   * @description
+   * 使用此插槽可以自定义使用外部组件的插槽而无需一级一级的嵌套
+   */
+  slots?: Readonly<Slots>
+  /** 单元格合并 */
+  mergeCell?: (ctx: TableColumnRenderContext) => { rowspan: number; colspan: number } | undefined
+
+  /** 当前点击的行 */
+  current?: TableRow
+
+  /**
+   * 高亮当前点击的行，即使没有设置current属性
+   * @default false
+   *
+   */
+  highlightCurrent?: boolean
+  /**
+   * 行key
+   * @description 用于标识行的唯一性，对于单选和多选来说是必须的
+   */
+  rowKey?: string
+
+  /**
+   * 是否开启斑马纹
+   * @default true
+   */
+  stripe?: boolean
+  /**
+   * 是否开启边框
+   * @default false
+   */
+  border?: boolean
+  /**
+   * 虚拟列表阈值
+   * @default 80
+   */
+  virtualThreshold?: number
+  /** 是否开启展开行, 只在非树形模式下有效 */
+  expandable?: boolean
+  /** 是否开启虚拟列表 */
+  virtual?: boolean
+  /**  默认展开全部 */
+  defaultExpandAll?: boolean
+  /** 文本溢出省略 */
+  textEllipsis?: boolean
+}
+
+export interface TableRow extends TreeNode<Record<string, any>> {
+  /** 是否展开 */
+  expanded: boolean
+  /** 操作中 */
+  operating: boolean
+  /** 是否选中 */
+  checked: boolean
+  /** 是否为当前点击的行 */
+  isCurrent: boolean
+  /** id */
+  uid: number | string
+  /** 索引路径 */
+  indexes: number[]
+  /** 子row */
+  children?: TableRow[]
+  /** 父row */
+  parent?: TableRow
+  /** 是否为展开行 */
+  isExpandRow: boolean
+}
+
+export interface TableColumnNode extends TreeNode<TableColumn> {
+  /** 子列 */
+  children?: TableColumnNode[] | undefined
+  /** 父列 */
+  parent?: TableColumnNode
+  /** 叶子节点数量 */
+  leafs?: number
+  key: string
+  name: string
+  align: TableColumnAlign
+  width: number | undefined
+  minWidth: number | undefined
+  fixed: 'left' | 'right' | undefined
+  isLastFixed: boolean
+  isFirstFixed: boolean
+  style: Record<string, number>
+}
+
+/**
+ * 列渲染函数参数上下文
+ */
+export interface TableColumnRenderContext {
+  /** 行 */
+  row: TableRow
+  /** 行数据 */
+  rowData: Record<string, any>
+  /** 列节点 */
+  column: TableColumnNode
+  /** 单元格数据 */
+  val: any
+}
+
+/** 表格列插槽作用域 */
+export interface TableColumnSlotsScope extends TableColumnRenderContext {
+  /** 交互模型 */
+  model: { modelValue: any; 'onUpdate:modelValue': (val: any) => void }
+}
+
+export interface TableRowSlotsScope {
+  row: TableRow
+  rowData: Record<string, any>
+  columns: TableColumnNode[]
+  index: number
+}
+
+/** 表格组件定义的事件 */
+export interface TableEmits<DataItem extends Record<string, any> = Record<string, any>> {
+  /** 多选 */
+  (e: 'update:checked', value: DataItem[]): void
+  /** 单选 */
+  (e: 'update:selected', value: DataItem | undefined): void
+  /** 行数据更新 */
+  (e: 'update:rows', rows: TableRow[]): void
+  /** 树形数据森林结构更新 */
+  (e: 'update:forest', rows?: Forest<Record<string, unknown>, any>): void
+  /**
+   * 行点击事件
+   */
+  (e: 'row-click', row: TableRow, ev: MouseEvent): void
+  /** 单元格点击 */
+  (e: 'cell-click', row: TableRow, column: TableColumn, ev: MouseEvent): void
+  /** 当前行变更 */
+  (e: 'update:current', row?: TableRow): void
+}
+
+/** 表格组件暴露的属性和方法(组件内部使用) */
+export interface _TableExposed {
+  el: ShallowRef<HTMLElement | undefined>
+  /** 清除选中的项 */
+  clearChecked: () => void
+  /** 清除单选的选项 */
+  clearSelected: () => void
+  /** 通过数据获取表格行 */
+  getRowByData: (data: Record<string, any>) => TableRow | undefined
+  /** 获取合计行 */
+  getSummaryRow: () => Record<string, any>
+}
+
+/** 表格组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type TableExposed = DeconstructValue<_TableExposed>

package/src/types/tabs.ts

@@ -0,0 +1,55 @@
+import type { ComponentProps } from '@veltra/utils/types/component-common'
+
+export type TabItem = {
+  /**
+   * 标题名称
+   * @description 如果不穿则以key为名称
+   */
+  name?: string
+  /**
+   * 标签页唯一标识
+   */
+  key: string
+  /** 是否禁用 */
+  disabled?: boolean
+}
+
+/** 标签页组件组件属性 */
+export interface TabsProps extends ComponentProps {
+  modelValue?: string
+  /** 标签项 */
+  items: TabItem[]
+  /** 显示位置 */
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  /** 是否可以动态编辑 */
+  editable?: boolean
+  /**
+   * 是否保活
+   * @default false
+   */
+  keepAlive?: boolean
+  /** 是否允许拖拽排序 */
+  // sortable?: boolean
+  // beforeLeave?: (
+  //   prev: string | number,
+  //   next: string | number
+  // ) => void | boolean | Promise<void | boolean>
+}
+
+/** 标签页组件组件定义的事件 */
+export interface TabsEmits {
+  (e: 'update:modelValue', value: string | number): void
+  (e: 'update:items', items: TabItem[]): void
+  (e: 'update:active', active: string | number): void
+  (e: 'delete', item: TabItem, index: number): void
+  (e: 'create'): void
+  (e: 'click', item: TabItem, index: number): void
+}
+
+/** 标签页组件组件暴露的属性和方法(组件内部使用) */
+export interface _TabsExposed {}
+
+/** 标签页组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export interface TabsExposed {
+  delete(key: number | string): void
+}

package/src/types/tag.ts

@@ -0,0 +1,19 @@
+import type { ColorType, ComponentSize } from '@veltra/utils/types/component-common'
+
+/** 标签组件属性 */
+export interface TagProps {
+  type?: ColorType
+  /** 是否可移除 */
+  closable?: boolean
+  /** 尺寸大小 */
+  size?: ComponentSize
+  /** 是否为圆角 */
+  round?: boolean
+  /** 深色 */
+  dark?: boolean
+}
+
+export interface TagEmits {
+  (e: 'close'): void
+}
+export interface TagExposed {}

package/src/types/text-editor.ts

@@ -0,0 +1,25 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** text-editor组件属性 */
+export interface BarType {
+  content: string
+  bar: string
+}
+
+export interface TextEditorProps extends FormComponentProps {
+  modelValue?: string
+  placeholder?: string
+  toolbar?: BarType[]
+}
+
+/** text-editor组件定义的事件 */
+export interface TextEditorEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** text-editor组件暴露的属性和方法(组件内部使用) */
+export interface _TextEditorExposed {}
+
+/** text-editor组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type TextEditorExposed = DeconstructValue<_TextEditorExposed>

package/src/types/text.ts

@@ -0,0 +1,28 @@
+/** 文本组件属性 */
+export interface TextProps {
+  /** 使用预设文本类型, 默认content正文 */
+  as?: 'main-title' | 'title' | 'sub-title' | 'content' | 'additional'
+  /** 文本大小, 与as同时指定时会覆盖as */
+  fontSize?: string | number
+  /** 是否删除 */
+  deleted?: boolean
+  /** 下划线 */
+  underline?: boolean
+  /** 粗体, 与as同时指定时会覆盖as中的字体粗细 */
+  bold?: boolean
+  /** 斜体 */
+  italic?: boolean
+  /** 高亮 */
+  highlight?: string | string[]
+}
+
+/** 文本组件定义的事件 */
+export interface TextEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** 文本组件暴露的属性和方法(组件内部使用) */
+export interface _TextExposed {}
+
+/** 文本组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export interface TextExposed {}

package/src/types/textarea.ts

@@ -0,0 +1,77 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** textarea组件属性 */
+export interface TextareaProps extends FormComponentProps {
+  /**
+   * 文本域的值
+   */
+  modelValue?: string
+  /**
+   * 文本域的高度
+   */
+  height?: string
+  /**
+   * 文本域的占位符
+   */
+  placeholder?: string
+  /**
+   * 文本域是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 文本域是否只读
+   */
+  readonly?: boolean
+
+  /**
+   * 是否能被缩放
+   */
+  resize?: boolean
+  /**
+   * 文本域的行数
+   */
+  rows?: number
+  /**
+   * 文本域的列数
+   */
+  cols?: number
+  /**
+   * 文本域的最大字数
+   */
+  maxlength?: number
+  /**
+   * 是否显示字符数
+   */
+  showCount?: boolean
+  /**
+   * 清空
+   */
+  clearable?: boolean
+
+  /** 原生只读 */
+  nativeReadonly?: boolean
+
+  /**是否自适应大小 */
+  autosize?: boolean
+}
+
+/** textarea组件定义的事件 */
+export interface TextareaEmits {
+  /**modelValue值改变时触发 */
+  (e: 'update:modelValue', value: string): void
+  /**当 modelValue 改变时，并且文本框失去焦点或用户按Enter时触发 */
+  (e: 'change', value: string): void
+  /**文本框获取焦点时触发 */
+  (e: 'focus'): void
+  /**文本框失去焦点时触发 */
+  (e: 'blur'): void
+  /**清空按钮时触发 */
+  (e: 'clear'): void
+}
+
+/** textarea组件暴露的属性和方法(组件内部使用) */
+export interface _TextareaExposed {}
+
+/** textarea组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type TextareaExposed = DeconstructValue<_TextareaExposed>

package/src/types/theme.ts

@@ -0,0 +1,23 @@
+import type { UITheme } from '@veltra/styles/theme'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 主题组件属性 */
+export interface ThemeProps {
+  /** 指定要编辑的主题实例，默认跟随当前已加载主题 */
+  theme?: UITheme
+}
+
+/** 主题组件暴露的属性和方法(组件内部使用) */
+export interface _ThemeExposed {
+  /** 恢复到当前基线主题 */
+  reset: () => void
+  /** 导出当前主题 */
+  exportTheme: () => void
+  /** 应用浅色预设 */
+  applyLightPreset: () => void
+  /** 应用深色预设 */
+  applyDarkPreset: () => void
+}
+
+/** 主题组件暴露的属性和方法 */
+export type ThemeExposed = DeconstructValue<_ThemeExposed>

package/src/types/tip.ts

@@ -0,0 +1,58 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { CSSProperties } from 'vue'
+
+export type TipDirection = 'top' | 'bottom' | 'left' | 'right'
+
+export type TipAlign = 'center' | 'start' | 'end'
+
+/** tip提示组件组件属性 */
+export interface TipProps {
+  /** 控制显影 */
+  visible?: boolean
+  /**提示内容 */
+  content?: string
+  /** 自定义tip样式 */
+  style?: CSSProperties | string
+  /** 自定义tip的class */
+  class?: string | string[] | Record<string, boolean>
+  /** 触发方式 */
+  trigger?: 'hover' | 'click'
+  /**
+   * 触发元素
+   * - 通过指定`triggerDom`来更改弹框弹出位置
+   */
+  triggerDom?: HTMLElement
+  /**
+   * 方向
+   * @default 'auto'
+   */
+  direction?: TipDirection
+
+  /** 隐藏箭头 */
+  hideArrow?: boolean
+
+  /**
+   * 对齐方式
+   * @default 'center'
+   */
+  alignment?: TipAlign
+
+  /**
+   * tip内容标签
+   */
+  contentTag?: string
+
+  /** 禁用tip */
+  disabled?: boolean
+}
+
+/** tip提示组件组件定义的事件 */
+export interface TipEmits {
+  (e: 'update:visible', value: boolean): void
+}
+
+/** tip提示组件组件暴露的属性和方法(组件内部使用) */
+export interface _TipExposed {}
+
+/** tip提示组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type TipExposed = DeconstructValue<_TipExposed>

package/src/types/tree-select.ts

@@ -0,0 +1,54 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { CSSProperties } from 'vue'
+
+import type { TreeProps } from './tree'
+
+/** 树形选择器组件属性 */
+export interface TreeSelectProps
+  extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
+  modelValue?: string | number
+
+  /** 自定义占位文字 */
+  placeholder?: string
+  /**
+   * 是否可清空
+   */
+  clearable?: boolean
+  /**
+   * 是否可搜索
+   */
+  filterable?: boolean
+  /**
+   * 最小宽度
+   * @default '280px'
+   */
+  minWidth?: string
+  /**
+   * 弹框宽度
+   * @default 跟随触发元素的宽度
+   */
+  width?: string
+
+  /** 显示文本 */
+  text?: string
+
+  /** 内容容器样式 */
+  contentStyle?: CSSProperties | string
+
+  /** 内容容器类名 */
+  contentClass?: unknown
+}
+
+/** 树形选择器组件定义的事件 */
+export interface TreeSelectEmits {
+  (e: 'clear'): void
+  (e: 'change', value?: string | number, selectedData?: Record<string, any>): void
+  (e: 'update:text', text?: string): void
+}
+
+/** 树形选择器组件暴露的属性和方法(组件内部使用) */
+export interface _TreeSelectExposed {}
+
+/** 树形选择器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type TreeSelectExposed = DeconstructValue<_TreeSelectExposed>

package/src/types/tree.ts

@@ -0,0 +1,110 @@
+import type { Forest, ITreeNode } from '@cat-kit/core'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { ComputedRef, ShallowRef } from 'vue'
+
+export interface TreeNode<Data extends Record<string, any> = Record<string, any>> extends ITreeNode<
+  Data,
+  TreeNode<Data>
+> {
+  parent?: TreeNode<Data>
+  children?: TreeNode<Data>[]
+  valueKey: string
+  labelKey: string
+  visible: boolean
+  expanded: boolean
+  loading: boolean
+  loaded: boolean
+  checked: boolean
+  indeterminate: boolean
+  disabled: boolean
+  label: string
+  key: string | number
+  childrenCheckCount: number
+
+  bubbleSet: (setter: (node: TreeNode<Data>) => void) => void
+}
+
+/** 树组件属性 */
+export interface TreeProps {
+  /** 是否展开所有节点 */
+  expandAll?: boolean
+  /** 是否在点击节点的时候展开或者收缩节点 */
+  expandOnClickNode?: boolean
+  /** label键 */
+  labelKey?: string
+  /** value键 */
+  valueKey?: string
+  /** 子节点键 */
+  childrenKey?: string
+  /** 数据 */
+  data?: Record<string, any>[]
+  /** 禁止单选或多选的节点 */
+  disabledNode?: (item: Record<string, any>, node: TreeNode) => boolean
+  /** 可多选 */
+  checkable?: boolean
+  /** 可单选 */
+  selectable?: boolean
+  /**
+   * 严格选择，选择的内容和父级不会产生关联
+   * @default false
+   */
+  checkStrictly?: boolean
+  /** 单选选中项 */
+  selected?: any
+  /** 多选选中项 */
+  checked?: any[]
+  /** 插槽穿透 */
+  slots?: Record<string, any>
+  /** 使选中项或多选项出现在滚动视图中 */
+  scrollToView?: boolean
+}
+
+export interface TreeEmit {
+  /** 节点展开/折叠事件 */
+  (e: 'expand', node: TreeNode): void
+  /** 节点点击事件 */
+  (e: 'node-click', node: TreeNode): void
+  /** 单选选中项 */
+  (e: 'update:selected', selected?: any, selectedData?: Record<string, any>, node?: TreeNode): void
+  /** 多选选中项 */
+  (e: 'update:checked', checked: any[], checkedData: Record<string, any>[]): void
+  /** 节点右键菜单事件 */
+  (e: 'node-contextmenu', event: MouseEvent, node: TreeNode): void
+  /** 选中项同步完成事件 */
+  (e: 'selected-synced', selected?: Record<string, any>): void
+}
+
+export interface TreeNodeProps {
+  node: TreeNode
+  measureElement?: (el: any) => void
+}
+
+/** 树组件暴露的属性和方法(组件内部使用) */
+export interface _TreeExposed {
+  /** 滚动到目标元素 */
+  scrollTo: (index: number) => void
+  /**
+   * 过滤树节点。注意：不要再watchEffect中调用！
+   * @param filter 过滤器或一个字符串
+   */
+  filter(filter: string | ((node: TreeNode) => boolean)): void
+  forest: ComputedRef<Forest<Record<string, unknown>, any>>
+  nodes: ShallowRef<TreeNode[]>
+  /** 多选选择节点 */
+  checkNode: (node: TreeNode, check: boolean) => void
+  /** 单选选择节点 */
+  selectNode: (node: TreeNode) => void
+  /** 对全部节点进行勾选/取消勾选 */
+  checkAll: (check: boolean) => void
+  /** 获取选择的节点值 */
+  getSelected(): Record<string, any> | undefined
+  /** 获取选中的节点值 */
+  getChecked(): Record<string, any>[]
+  /** 展开全部节点 */
+  expandAll(): void
+  /** 折叠全部节点 */
+  collapseAll(): void
+}
+
+/** 树组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type TreeExposed = DeconstructValue<_TreeExposed>