@veltra/desktop 1.0.0

package/src/components/watermark/style.ts

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

package/src/components/watermark/watermark.vue

@@ -0,0 +1,89 @@
+<template>
+  <Teleport v-if="appendToBody" to="body">
+    <div :class="cls.b" ref="watermark" :style="{ zIndex: zIndex() }"></div>
+  </Teleport>
+
+  <div v-else :class="cls.b" ref="watermark" :style="{ zIndex: zIndex() }">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from '@cat-kit/core'
+import { bem, setStyles, zIndex } from '@veltra/utils'
+import { onBeforeUnmount, onMounted, reactive, useTemplateRef } from 'vue'
+
+import type { WatermarkProps, WatermarkEmits } from '../../types'
+
+defineOptions({
+  name: 'Watermark'
+})
+const cls = bem('watermark')
+const props = withDefaults(defineProps<WatermarkProps>(), {
+  route: -30,
+  fontSize: 60
+})
+defineEmits<WatermarkEmits>()
+
+const watermarkRef = useTemplateRef('watermark')
+
+const styles = reactive({
+  fontColor: 'rgba(0,0,0,.1)',
+  fontFamily: 'Arial',
+  image: props.image
+})
+
+const setWatermark = debounce(async () => {
+  const str = props.text
+  const container = watermarkRef.value
+
+  if (!container || !str) return
+
+  // 创建canvas
+  let canvas: HTMLCanvasElement | null = document.createElement('canvas')
+
+  // 创建canvs画布
+  let ctx = canvas.getContext('2d')!
+  // 字体
+  ctx.font = `${props.fontSize}px ${styles.fontFamily}`
+
+  const textWidth = ctx.measureText(str).width
+  canvas = document.createElement('canvas')
+  canvas.width = textWidth
+  canvas.height = textWidth
+  ctx = canvas.getContext('2d')!
+  // 字体
+  ctx.font = `${props.fontSize}px ${styles.fontFamily}`
+  ctx = canvas.getContext('2d')!
+  // 字体颜色
+  ctx.fillStyle = styles.fontColor
+  // 对齐方式
+  ctx.textAlign = 'left'
+  // 文本基线
+  ctx.textBaseline = 'top'
+
+  // 逆时旋转
+  ctx.translate(textWidth / 2, textWidth / 2)
+  ctx.rotate((props.route * Math.PI) / 180)
+  ctx.translate(-textWidth / 2, -textWidth / 2)
+  // 编制文字
+  ctx.fillText(str, 0, (textWidth - props.fontSize) / 2)
+
+  setStyles(container, {
+    background: `url(${canvas.toDataURL('image/png')}) repeat`
+  })
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  canvas = null
+}, 150)
+
+window.addEventListener('resize', setWatermark)
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', setWatermark)
+})
+
+onMounted(() => {
+  setWatermark()
+})
+</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

@@ -0,0 +1,3 @@
+export * from './components'
+
+export type * from './types'

package/src/types/action.ts

@@ -0,0 +1,34 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+import type { ButtonProps } from './button'
+
+/** 操作组件属性 */
+export interface ActionProps extends ButtonProps {
+  /** 是否需要确认 */
+  needConfirm?: boolean
+
+  /** 是否为下拉菜单中的操作项 */
+  inDropdown?: boolean
+}
+
+/** 操作组组件属性 */
+export interface ActionGroupProps {
+  /** 是否加载中 */
+  loading?: boolean
+  /** 是否为圆形按钮， 适用于图标类 */
+  circle?: boolean
+
+  /** 最大可显示数量 */
+  max?: number
+}
+
+/** 操作组件定义的事件 */
+export interface ActionEmits {
+  (e: 'run'): void
+}
+
+/** 操作组件暴露的属性和方法(组件内部使用) */
+export interface _ActionExposed {}
+
+/** 操作组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type ActionExposed = DeconstructValue<_ActionExposed>

package/src/types/animation.ts

@@ -0,0 +1,23 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 动画组件属性 */
+export interface AnimationProps {
+  /**
+   * 标签元素
+   * @default 'div'
+   */
+  tag?: string
+
+  inView?: Record<string, any>
+}
+
+/** 动画组件定义的事件 */
+export interface AnimationEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** 动画组件暴露的属性和方法(组件内部使用) */
+export interface _AnimationExposed {}
+
+/** 动画组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type AnimationExposed = DeconstructValue<_AnimationExposed>

package/src/types/auto-complete.ts

@@ -0,0 +1,25 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 自动补全组件组件属性 */
+export interface AutoCompleteProps extends FormComponentProps {
+  modelValue?: string
+  /** 占位符 */
+  placeholder?: string
+  /** 建议 */
+  suggestions?: string[] | (() => Promise<string[]> | string[])
+  /** 是否可清空 */
+  clearable?: boolean
+}
+
+/** 自动补全组件组件定义的事件 */
+export interface AutoCompleteEmits {
+  (e: 'update:modelValue', value: string): void
+  (e: 'select', value: string): void
+}
+
+/** 自动补全组件组件暴露的属性和方法(组件内部使用) */
+export interface _AutoCompleteExposed {}
+
+/** 自动补全组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type AutoCompleteExposed = DeconstructValue<_AutoCompleteExposed>

package/src/types/badge.ts

@@ -0,0 +1,29 @@
+import type { ColorType, ComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 徽章组件属性 */
+export interface BadgeProps extends ComponentProps {
+  /** 显示值 */
+  value?: number
+  /** 类别 */
+  type?: ColorType
+  /** 自定义背景色 */
+  color?: string
+  /** 是否隐藏 Badge */
+  hidden?: boolean
+  /** 最大值 {{max}}+ */
+  max?: number
+  /** 是否显示小圆点 */
+  dot?: boolean
+}
+
+/** 徽章组件定义的事件 */
+export interface BadgeEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** 徽章组件暴露的属性和方法(组件内部使用) */
+export interface _BadgeExposed {}
+
+/** 徽章组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type BadgeExposed = DeconstructValue<_BadgeExposed>

package/src/types/batch-edit.ts

@@ -0,0 +1,100 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+import type { ActionProps } from './action'
+import type { IFormModel } from './form'
+import type { TableColumn, TableEmits, TableProps, TableRow } from './table'
+
+/** 批量编辑列 */
+export interface BatchEditColumn extends TableColumn {
+  // /**
+  //  * 是否在列中显示
+  //  * @default true
+  //  */
+  // visible?: boolean
+  // /** 校验规则 */
+  // rules?: ValidateRule
+  // /** 默认值 */
+  // defaultValue?: any | (() => any)
+}
+
+export type BatchEditFeature = 'create' | 'update' | 'copy' | 'delete' | 'view' | 'createChild'
+
+/** 批量编辑组件属性 */
+export interface BatchEditProps<Model extends IFormModel = IFormModel> extends TableProps {
+  /**
+   * 表单模型
+   * @description 该模型优先级要大于列配置
+   */
+  model?: Model
+  /** 表格标题 */
+  title?: string
+  /**
+   * 列的宽度定义
+   */
+  cols?: string | [string, string]
+  /** 只读模式 */
+  readonly?: boolean
+  /** label的宽度 */
+  labelWidth?: string | number
+  /** 删除方法 */
+  deleteMethod?: (data: Record<string, any>[]) => Promise<any> | any
+  /**
+   * 保存方法
+   * @description 这个方法旨在快编时生效
+   * @returns 如果返回一个值，那么这个值会被插入，否则插入的为表单值
+   */
+  saveMethod?: (
+    /** 表单数据 */
+    data: Record<string, any>,
+    /** 操作类型 */
+    actionType: 'create' | 'update',
+    /** 父级数据 */
+    parentData?: Record<string, any>
+  ) => Promise<any> | any
+
+  /**
+   * 可用功能，不穿则对功能没有任何限制
+   *
+   * ## 用法
+   * ```ts
+   * // 只允许新增和更新
+   * const features = ['create', 'update']
+   * // 不允许新增，并且只有当行深度小于2时才允许新增子级，对其他功能不做限制
+   * const features = {
+   *   create: false,
+   *   createChild: row => row.depth < 2
+   * }
+   * ```
+   */
+  features?:
+    | Array<BatchEditFeature>
+    | {
+        [key in BatchEditFeature]?: boolean | ((row: TableRow) => boolean)
+      }
+
+  /**
+   * 操作按钮的属性配置, 可以是action组件的任意属性
+   * @example
+   * ```ts
+   * const actionsProps = {
+   *   delete: {
+   *     needConfirm: true,
+   *     circle: false
+   *   }
+   * }
+   * ```
+   */
+  actionsProps?: Partial<Record<BatchEditFeature, ActionProps>>
+}
+
+/** 批量编辑组件定义的事件 */
+export interface BatchEditEmits extends TableEmits {
+  /** 更新数据 */
+  (e: 'update:data', value: Record<string, any>[]): void
+}
+
+/** 批量编辑组件暴露的属性和方法(组件内部使用) */
+export interface _BatchEditExposed {}
+
+/** 批量编辑组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type BatchEditExposed = DeconstructValue<_BatchEditExposed>

package/src/types/button.ts

@@ -0,0 +1,45 @@
+import type { ColorType, ComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { Component, ShallowRef } from 'vue'
+
+/** 按钮类型 */
+export type ButtonType = ColorType
+
+/** 按钮属性类型 */
+export interface ButtonProps extends ComponentProps {
+  /** 按钮类型 */
+  type?: ButtonType
+  /** 是否以文本形式展示 */
+  text?: boolean
+  /** 朴素模式 */
+  plain?: boolean
+  /** 加载中 */
+  loading?: boolean
+  /** 加载图标 */
+  loadingIcon?: Component
+  /** 圆形 */
+  circle?: boolean
+  /** 禁用 */
+  disabled?: boolean
+  /** 图标 */
+  icon?: Component
+  /** 图标大小, 单位px */
+  iconSize?: number
+  /** 图标位置 */
+  iconPosition?: 'left' | 'right'
+  /** 事件是否传播（冒泡或者捕获） */
+  propagate?: boolean
+}
+
+export interface ButtonEmits {
+  /** 点击事件 */
+  (name: 'click', e: MouseEvent): void
+}
+
+/** 在组件内部引用 */
+export interface _ButtonExposed {
+  el: ShallowRef<HTMLButtonElement | undefined>
+}
+
+/** 按钮暴露的属性和方法 */
+export type ButtonExposed = DeconstructValue<_ButtonExposed>

package/src/types/calendar.ts

@@ -0,0 +1,47 @@
+import type { Dater } from '@cat-kit/core'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** day接口 */
+export interface CalendarDay {
+  date: Dater
+  /** 是否今日 */
+  isToday?: boolean
+  /** 日期类型：上月， 本月， 下月 */
+  type: 'pre' | 'current' | 'next'
+  /** 是否禁止选择 */
+  disabled?: boolean
+}
+
+export interface CalendarMonth {
+  date: Dater
+  /** 是否禁止选择 */
+  disabled?: boolean
+  /** 年月标识 */
+  key: string
+  /** 月份 */
+  month: number
+}
+
+export interface CalendarYear {
+  date: Dater
+  /** 是否禁止选择 */
+  disabled?: boolean
+  /** 年份 */
+  year: number
+}
+
+/** 日历组件属性 */
+export interface CalendarProps {
+  modelValue?: string
+}
+
+/** 日历组件定义的事件 */
+export interface CalendarEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** 日历组件暴露的属性和方法(组件内部使用) */
+export interface _CalendarExposed {}
+
+/** 日历组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type CalendarExposed = DeconstructValue<_CalendarExposed>

package/src/types/card.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 卡片组件属性 */
+export interface CardProps extends ComponentProps {
+  /** 宽度 */
+  width?: string | number
+
+  /** 融合样式，卡片不再有阴影 */
+  integrate?: boolean
+}
+
+export interface CardActionProps {
+  /** 右对齐 */
+  alignRight?: boolean
+}
+
+export interface CardContentProps {
+  /** 封面模式 */
+  cover?: boolean
+}
+
+export interface CardCoverProps {
+  /** 封面图片地址 */
+  src: string
+  /** 封面高度 */
+  height?: string | number
+}
+
+export interface CardEmits {}
+
+export interface _CardExposed {}
+
+export type CardExposed = DeconstructValue<_CardExposed>

package/src/types/cascade.ts

@@ -0,0 +1,70 @@
+import type { ITreeNode } from '@cat-kit/core'
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+export interface CascadeNode extends ITreeNode<Record<string, any>, CascadeNode> {
+  children?: CascadeNode[]
+  visible: boolean
+  value: string
+  label: string
+}
+
+/** 级联选择器组件属性 */
+export interface CascadeProps extends FormComponentProps {
+  /**
+   * 分隔符
+   * @default '/'
+   */
+  separator?: string
+  /** 数据值 */
+  modelValue?: string[] | string
+  /** 级联数据项的标签字段 */
+  labelKey?: string
+  /** 级联数据项的值字段 */
+  valueKey?: string
+  /** 占位符 */
+  placeholder?: string
+  /** 是否可清除 */
+  clearable?: boolean
+  /** 子级字段 */
+  childrenKey?: string
+  /** 严格模式 */
+  strict?: boolean
+  /**
+   * 数据项
+   */
+  data?: Record<string, any>[]
+
+  /**
+   * 禁用项
+   */
+  disabledNode?: (item: Record<string, any>) => boolean
+  /**
+   * 多选
+   */
+  multiple?: boolean
+  /**
+   * 搜索
+   */
+  filterable?: boolean
+  visibilityLimit?: number
+}
+
+export interface PanelItem {
+  key: number
+  nodes: CascadeNode[]
+}
+
+/** 级联选择器组件定义的事件 */
+export interface CascadeEmits {
+  (e: 'update:modelValue', value?: string | string[]): void
+  (e: 'change', value: string[], label: string[], data: Record<string, any>[]): void
+  (e: 'change', value?: string, label?: string, item?: Record<string, any>): void
+  (e: 'clear'): void
+}
+
+/** 级联选择器组件暴露的属性和方法(组件内部使用) */
+export interface _CascadeExposed {}
+
+/** 级联选择器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type CascadeExposed = DeconstructValue<_CascadeExposed>

package/src/types/check-tag.ts

@@ -0,0 +1,19 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** check-tag组件属性 */
+export interface CheckTagProps {
+  modelValue?: string
+
+  checked?: boolean
+}
+
+/** check-tag组件定义的事件 */
+export interface CheckTagEmits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
+/** check-tag组件暴露的属性和方法(组件内部使用) */
+export interface _CheckTagExposed {}
+
+/** check-tag组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type CheckTagExposed = DeconstructValue<_CheckTagExposed>

package/src/types/checkbox-group.ts

@@ -0,0 +1,23 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+
+/** 复选框组, 用来选择一组数据组件属性 */
+export interface CheckboxGroupProps extends FormComponentProps {
+  /** 值 */
+  modelValue?: Array<any>
+  /** 复选框项 */
+  items: Array<Record<string, any>>
+  /** 标签文本的key */
+  labelKey?: string
+  /** 值的key */
+  valueKey?: string
+  /** 块级显示 */
+  block?: boolean
+}
+
+/** 复选框组, 用来选择一组数据组件属性 */
+export interface CheckboxGroupEmits {
+  (e: 'update:modelValue', value: Array<any>): void
+}
+
+/** 复选框组, 用来选择一组数据暴露的属性和方法 */
+export interface CheckboxGroupExposed {}

package/src/types/checkbox.ts

@@ -0,0 +1,31 @@
+import type { ColorType, FormComponentProps } from '@veltra/utils/types/component-common'
+
+/** 复选框组件属性 */
+export interface CheckboxProps extends FormComponentProps {
+  /** 部分选中 */
+  indeterminate?: boolean
+  /** 是否选中  */
+  modelValue?: boolean
+}
+
+export interface CheckboxButtonProps extends FormComponentProps {
+  /** 是否选中  */
+  modelValue?: boolean
+  /** 是否圆角 */
+  round?: boolean
+  /** 类型 */
+  type?: ColorType
+}
+
+export interface CheckboxEmits {
+  (name: 'update:modelValue', checked: boolean): void
+  (name: 'change', checked: boolean, e: MouseEvent): void
+}
+
+export interface CheckboxButtonEmits {
+  (name: 'update:modelValue', checked: boolean): void
+  (name: 'change', checked: boolean): void
+}
+
+/** 复选框暴露的属性和方法 */
+export interface CheckboxExposed {}

package/src/types/code-editor.ts

@@ -0,0 +1,22 @@
+import type { FormComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+export type CodeEditorLang = 'js' | 'sql' | 'java' | 'json'
+
+/** 代码编辑器组件属性 */
+export interface CodeEditorProps extends FormComponentProps {
+  modelValue?: string
+  /** 定义语言 */
+  language?: CodeEditorLang
+}
+
+/** 代码编辑器组件定义的事件 */
+export interface CodeEditorEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** 代码编辑器组件暴露的属性和方法(组件内部使用) */
+export interface _CodeEditorExposed {}
+
+/** 代码编辑器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type CodeEditorExposed = DeconstructValue<_CodeEditorExposed>

package/src/types/condition-editor.ts

@@ -0,0 +1,17 @@
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+
+/** 条件编辑器组件属性 */
+export interface ConditionEditorProps {
+  modelValue?: string
+}
+
+/** 条件编辑器组件定义的事件 */
+export interface ConditionEditorEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** 条件编辑器组件暴露的属性和方法(组件内部使用) */
+export interface _ConditionEditorExposed {}
+
+/** 条件编辑器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type ConditionEditorExposed = DeconstructValue<_ConditionEditorExposed>

package/src/types/context-menu.ts

@@ -0,0 +1,43 @@
+import type { ComponentProps } from '@veltra/utils/types/component-common'
+import type { DeconstructValue } from '@veltra/utils/types/helper'
+import type { Component } from 'vue'
+
+/**
+ * 右键菜单项
+ */
+export interface ContextMenuItem {
+  /** 菜单名称 */
+  label: string
+  /** 菜单描述 */
+  description?: string
+  /** 菜单图标 */
+  icon?: Component
+  /** 菜单点击时的回调 */
+  callback?: () => void | Promise<void>
+  /** 是否禁用 */
+  disabled?: boolean | (() => boolean)
+}
+
+/** 鼠标右键菜单组件属性 */
+export interface ContextMenuProps extends ComponentProps {
+  /** 鼠标位置 */
+  mousePosition: { x: number; y: number }
+  /**
+   * 菜单宽度
+   * @default 200
+   */
+  width?: number | string
+  /** 菜单项 */
+  menus: ContextMenuItem[] | (() => ContextMenuItem[])
+}
+
+/** 鼠标右键菜单组件定义的事件 */
+export interface ContextMenuEmits {
+  (e: 'destroy'): void
+}
+
+/** 鼠标右键菜单组件暴露的属性和方法(组件内部使用) */
+export interface _ContextMenuExposed {}
+
+/** 鼠标右键菜单组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type ContextMenuExposed = DeconstructValue<_ContextMenuExposed>