@veltra/desktop 1.0.0

package/src/components/float-button/float-button.vue

@@ -0,0 +1,87 @@
+<template>
+  <Teleport to="body">
+    <div
+      :class="cls.b"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      ref="floatButtonRef"
+    >
+      <u-button
+        v-for="(item, index) of items"
+        :key="item.key"
+        :class="[cls.e('item'), bem.is('first', index === 0)]"
+        circle
+        :size="size"
+        :type="item.type ?? 'primary'"
+        ref="itemsRef"
+        :style="{ transitionDelay: index * 0.1 + 's' }"
+        @transitionend="handleTransitionEnd(index, $event)"
+        @click="emit('click', item.key)"
+        :title="item.name ?? item.key"
+      >
+        <u-icon v-if="item.icon"> <component :is="item.icon" /> </u-icon>
+        <span v-else>{{ item.name?.[0] ?? item.key[0] }}</span>
+      </u-button>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { bem, removeStyles, setStyles } from '@veltra/utils'
+import { shallowRef } from 'vue'
+
+import type { FloatButtonProps, FloatButtonEmits, ButtonExposed } from '../../types'
+import { UButton } from '../button'
+import { UIcon } from '../icon'
+
+defineOptions({
+  name: 'FloatButton'
+})
+
+defineProps<FloatButtonProps>()
+
+const emit = defineEmits<FloatButtonEmits>()
+
+const cls = bem('float-button')
+const hoveredCls = bem.is('hovered')
+
+const floatButtonRef = shallowRef<HTMLElement>()
+const itemsRef = shallowRef<ButtonExposed[]>()
+
+const hovered = shallowRef(false)
+
+const handleMouseEnter = () => {
+  hovered.value = true
+
+  itemsRef.value?.forEach((item) => {
+    setStyles(item.el!, { display: 'flex' })
+  })
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      itemsRef.value?.forEach((item) => {
+        item.el!.classList.add(hoveredCls)
+      })
+    })
+  })
+}
+const handleMouseLeave = () => {
+  hovered.value = false
+  itemsRef.value?.forEach((item) => {
+    item.el!.classList.remove(hoveredCls)
+  })
+}
+
+/**
+ * 动画结束回调
+ * @param index 发生的元素索引
+ * @param e 事件
+ */
+const handleTransitionEnd = (index: number, e: TransitionEvent) => {
+  if (index !== 1 || hovered.value) return
+
+  itemsRef.value?.forEach((item) => {
+    removeStyles(item.el!, ['display'])
+  })
+}
+</script>

package/src/components/float-button/index.ts

@@ -0,0 +1 @@
+export { default as UFloatButton } from './float-button.vue'

package/src/components/float-button/style.scss

@@ -0,0 +1,37 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: 'float-button';
+
+@include m.b($root-name) {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  display: flex;
+  justify-items: flex-end;
+  flex-direction: column-reverse;
+  flex-wrap: nowrap;
+
+  @include m.e(item) {
+    box-shadow: 0 0 5px 1px #{fn.use-var(color, primary, light-3)};
+    transition-property: transform, opacity;
+    transition-duration: 0.2s;
+    transform: scale(0.4);
+    opacity: 0;
+    display: none;
+
+    &:not(:first-child) {
+      margin-bottom: 6px;
+    }
+
+    @include m.is(hovered, first) {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    @include m.is(first) {
+      display: flex;
+    }
+  }
+}

package/src/components/float-button/style.ts

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

package/src/components/form/dynamic-form-model.ts

@@ -0,0 +1,230 @@
+import { o } from '@cat-kit/core'
+import { Validator } from '@veltra/utils'
+import { isReactive, reactive, shallowReactive, watch } from 'vue'
+
+import type { FormModelItem, DataSettingConfig } from '../../types'
+
+/**
+ * 动态表单模型
+ */
+export class DynamicFormModel {
+  /** 表单数据 */
+  private _data: Record<string, any> = reactive({})
+
+  set data(v: Record<string, any>) {
+    if (!isReactive(v)) {
+      console.error(`data不是一个响应式对象`)
+      return
+    }
+    this._data = v
+    this.watchData()
+  }
+
+  get data() {
+    return this._data
+  }
+
+  /** 表单规则 */
+  readonly fields: Record<string, FormModelItem> = shallowReactive(
+    {} as Record<string, FormModelItem>
+  )
+
+  private validator: Validator
+
+  /**
+   * 不同表单对应的key
+   */
+  formKeys: Map<number, string[]> = new Map()
+
+  readonly errors: Map<string, string[] | undefined> = shallowReactive(new Map())
+
+  /**
+   * 是否在表单值更新时校验
+   */
+  private validateOnFieldChange = true
+
+  private modelChangeCallback: Set<(fields: string, val: any) => void> = new Set()
+
+  private _allKeys: string[] = []
+
+  /** 所有的键 */
+  get allKeys(): string[] {
+    return this._allKeys
+  }
+
+  private getAllKeys(): void {
+    this._allKeys = Object.keys(this.fields)
+  }
+
+  /** 初始数据 */
+  readonly initialData: Record<string, any> = {}
+
+  /**
+   * 变更前的值
+   */
+  private readonly oldData: Record<string, any> = {}
+
+  constructor(fields?: Record<string, FormModelItem>) {
+    this.append(fields ?? {})
+    this.validator = new Validator(this.fields)
+    this.getAllKeys()
+    this.watchData()
+  }
+
+  private watchData(): void {
+    const { oldData } = this
+    watch(this.data, (data) => {
+      let changedKeys: string[] = []
+
+      this.allKeys.forEach((key) => {
+        const oldVal = o(oldData).get(key)
+        const newVal = o(data).get(key)
+        if (oldVal !== newVal) {
+          this.modelChangeCallback.forEach((cb) => cb(key, newVal))
+          changedKeys.push(key)
+          o(oldData).set(key, newVal)
+        }
+      })
+
+      if (this.validateOnFieldChange) {
+        this.validate(changedKeys)
+      } else {
+        this.validateOnFieldChange = true
+      }
+    })
+  }
+
+  append(fields: Record<string, FormModelItem>): void {
+    for (const key in fields) {
+      this.add(key, fields[key] ?? {})
+    }
+  }
+
+  /**
+   * 添加字段
+   * @param field 字段
+   * @param item 字段配置项
+   */
+  add(field: string, item: FormModelItem): void {
+    this.fields[field] = item
+    const { value } = item
+    const v = typeof value === 'function' ? value() : value
+    /** 这是有bug的 */
+    if (v !== undefined) {
+      this.initialData[field] = JSON.parse(JSON.stringify(v))
+    }
+    o(this.data).set(field, v)
+    o(this.oldData).set(field, v)
+    this.getAllKeys()
+  }
+
+  /**
+   * 移除字段
+   * @param field 字段
+   */
+  delete(field: string): void {
+    delete this.fields[field]
+    this.getAllKeys()
+  }
+
+  /**
+   * 监听值变更
+   * @param cb 回调
+   */
+  onChange(cb: (field: string, val: any) => void): void {
+    this.modelChangeCallback.add(cb)
+  }
+
+  offChange(cb: (field: string, val: any) => void): void {
+    this.modelChangeCallback.delete(cb)
+  }
+
+  async validate(fields?: string | string[]): Promise<boolean> {
+    const { errors, validator, data } = this
+
+    const results = await validator.validate(data, this.getValidateFields(fields))
+
+    // 设置错误提示
+    if (!fields) {
+      errors.clear()
+      for (const field in results) {
+        errors.set(field, results[field])
+      }
+    } else {
+      ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {
+        const errs = results[field]
+        if (errs?.length) {
+          errors.set(field, errs)
+        } else {
+          errors.delete(field)
+        }
+      })
+    }
+
+    return errors.size === 0
+  }
+
+  private getValidateFields(fields?: string | string[]) {
+    if (!fields) {
+      if (this.formKeys.size) {
+        let _fields: string[] = []
+        this.formKeys.forEach((fields) => {
+          _fields = _fields.concat(fields)
+        })
+        return _fields
+      } else {
+        return this.allKeys
+      }
+    }
+
+    if (!Array.isArray(fields)) {
+      return [fields]
+    }
+    return fields
+  }
+
+  /**
+   * 重置数据
+   * @param fields 需要重置的字段
+   */
+  resetData(keys?: string | string[]): void {
+    if (typeof keys === 'string') {
+      keys = [keys]
+    } else if (Array.isArray(keys)) {
+    } else {
+      keys = this.allKeys
+    }
+
+    this.clearValidate()
+
+    this.validateOnFieldChange = false
+
+    keys.forEach((field) => {
+      o(this.data).set(field as string, o(this.initialData).get(field as string))
+    })
+  }
+
+  /**
+   * 设置值
+   * @param formData 表单值
+   * @param options 配置
+   */
+  setData(formData: Record<string, any>, config?: DataSettingConfig): void {
+    const { validate = true } = config || {}
+
+    if (!validate) {
+      this.validateOnFieldChange = false
+    }
+
+    this.allKeys.forEach((key) => {
+      const value = o(formData).get(key)
+      if (value !== undefined) {
+        o(this.data).set(key, value)
+      }
+    })
+  }
+
+  clearValidate(): void {
+    this.errors.clear()
+  }
+}

package/src/components/form/form-model.ts

@@ -0,0 +1,240 @@
+import { o } from '@cat-kit/core'
+import { middleProxy, Validator } from '@veltra/utils'
+import { nextTick, reactive, shallowReactive, watch, type Reactive } from 'vue'
+
+import type {
+  FormModelItem,
+  ModelData,
+  ModelRules,
+  DataSettingConfig,
+  IFormModel
+} from '../../types'
+
+/**
+ * 表单模型
+ */
+export class FormModel<
+  Fields extends Record<string, FormModelItem> = Record<string, FormModelItem>
+> implements IFormModel<Fields> {
+  /** 表单数据 */
+  data!: ModelData<Fields>
+
+  /** 表单规则 */
+  readonly fields: Fields
+
+  /** 所有的键 */
+  readonly allKeys: string[]
+
+  /**
+   * 不同表单所需要校验的字段
+   * @description
+   * 这个值会在表单组件渲染时由表单设置，因为只有真正渲染的组件才应该被校验
+   */
+  formKeys: Map<number, (keyof Fields)[]> = new Map()
+
+  /** 初始数据 */
+  readonly initialData: ModelData<Fields>
+
+  readonly errors: Map<keyof Fields, string[] | undefined> = shallowReactive(new Map())
+
+  private validator: Validator<ModelRules<Fields>>
+
+  /**
+   * 是否在表单值更新时校验
+   */
+  private validateOnFieldChange = true
+
+  private modelChangeCallback: Set<(fields: string, val: any) => void> = new Set()
+
+  constructor(fields: Fields) {
+    this.fields = fields
+    const rawData = {} as ModelData<Fields>
+    const allKeys: string[] = []
+
+    for (const key in fields) {
+      const fieldItem = fields[key]!
+      allKeys.push(key)
+      const { value } = fieldItem
+      let v = value
+
+      if (typeof value === 'function') {
+        watch(value, (v) => {
+          o(this.initialData).set(key, v)
+        })
+        v = value()
+      }
+
+      o(rawData).set(key, v)
+    }
+
+    this.allKeys = allKeys
+    this.initialData = JSON.parse(JSON.stringify(rawData))
+
+    this.setProxyData(reactive(rawData))
+
+    this.validator = new Validator(this.fields)
+
+    return shallowReactive(this)
+  }
+
+  /**
+   * 设置响应式值, 替换掉原有的数据
+   * @description 设置响应式值时，会自动监听值的变化，并进行校验
+   * @param proxyData 响应式的值
+   */
+  setProxyData(proxyData: ModelData<Fields> | Reactive<ModelData<Fields>>): void {
+    const data = middleProxy(proxyData, {
+      set: (field, val) => {
+        this.modelChangeCallback.forEach((cb) => cb(field, val))
+      },
+
+      changed: (fields) => {
+        if (!this.validateOnFieldChange) {
+          this.validateOnFieldChange = true
+          return
+        }
+        this.validate(fields)
+      }
+    })
+
+    this.data = data as ModelData<Fields>
+  }
+
+  private getValidateFields(fields?: keyof Fields | (keyof Fields)[]) {
+    if (!fields) {
+      if (this.formKeys.size) {
+        let _fields: (keyof Fields)[] = []
+        this.formKeys.forEach((fields) => {
+          _fields = _fields.concat(fields)
+        })
+        return _fields
+      } else {
+        return this.allKeys
+      }
+    }
+
+    if (!Array.isArray(fields)) {
+      return [fields]
+    }
+    return fields
+  }
+
+  /**
+   * 模型校验
+   * @param fields 需要校验的字段, 不传则校验所有字段
+   * @returns
+   */
+  async validate(fields?: keyof Fields | (keyof Fields)[]): Promise<boolean> {
+    const { errors, validator, data } = this
+
+    const results = await validator.validate(data, this.getValidateFields(fields))
+
+    // 全量校验
+    if (!fields) {
+      errors.clear()
+
+      for (const field in results) {
+        errors.set(field, results[field])
+      }
+    }
+    // 局部校验
+    else {
+      ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {
+        const errs = results[field]
+        if (errs?.length) {
+          errors.set(field, errs)
+        } else {
+          errors.delete(field)
+        }
+      })
+    }
+
+    if (errors.size > 0) {
+      if (!fields) {
+        nextTick(() => {
+          document.querySelector('.u-form-item.is-error')?.scrollIntoView({ block: 'nearest' })
+        })
+      }
+      return Promise.reject(false)
+    }
+
+    return true
+  }
+
+  /**
+   * 重置数据
+   * @param fields 需要重置的字段
+   */
+  resetData(keys?: keyof Fields | (keyof Fields)[]): void {
+    if (typeof keys === 'string') {
+      keys = [keys]
+    } else if (Array.isArray(keys)) {
+    } else {
+      keys = this.allKeys
+    }
+
+    this.clearValidate()
+
+    this.validateOnFieldChange = false
+
+    keys.forEach((field) => {
+      o(this.data).set(field as string, o(this.initialData).get(field as string))
+    })
+  }
+
+  /**
+   * 设置值
+   * @param formData 表单值
+   * @param options 配置
+   */
+  setData(
+    formData: Partial<ModelData<Fields> & Record<string, any>>,
+    config?: DataSettingConfig
+  ): FormModel<Fields> {
+    const { validate = true } = config || {}
+
+    if (!validate) {
+      this.validateOnFieldChange = false
+    }
+
+    this.allKeys.forEach((key) => {
+      const value = o(formData).get(key)
+      if (value !== undefined) {
+        o(this.data).set(key, value)
+      }
+    })
+
+    return this
+  }
+
+  /**
+   * 设置初始值
+   * @description 初始值在重置数据和查看原始数据时会用到
+   * @param data 初始值
+   */
+  setInitialData(data: Partial<ModelData<Fields>>): FormModel<Fields> {
+    this.allKeys.forEach((key) => {
+      o(this.initialData).set(key, o(data).get(key))
+    })
+
+    return this
+  }
+
+  /** 清除校验 */
+  clearValidate(): void {
+    this.errors.clear()
+  }
+
+  /**
+   * 监听值变更
+   * @param cb 回调
+   */
+  onChange(cb: (field: keyof Fields, val: any) => void): void {
+    this.modelChangeCallback.add(cb)
+  }
+
+  /** 关闭监听值变更 */
+  offChange(cb: (field: keyof Fields, val: any) => void): void {
+    this.modelChangeCallback.delete(cb)
+  }
+}

package/src/components/form/form.vue

@@ -0,0 +1,95 @@
+<template>
+  <u-grid
+    tag="form"
+    ref="gridRef"
+    @submit.prevent
+    :cols="cols || breakpointCols"
+    :class="[cls.b, bem.is('readonly', readonly)]"
+  >
+    <template
+      v-for="{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()"
+      :key="node.key"
+    >
+      <component v-if="isFormItem || !field" :is="node" />
+
+      <u-form-item v-else v-bind="formItemProps">
+        <component
+          :is="node"
+          :model-value="modelValue ?? o(model?.data ?? {}).get(field)"
+          @update:model-value="handleUpdateValue(field, $event)"
+        />
+
+        <div :class="cls.e('data-before')" v-if="showInitialNode(field)">
+          <i :class="cls.e('changed-tag')">变更前：</i>
+
+          <component :is="node" readonly :model-value="o(model?.initialData ?? {}).get(field)" />
+        </div>
+      </u-form-item>
+    </template>
+  </u-grid>
+</template>
+
+<script lang="tsx" setup generic="Model extends FormModel | DynamicFormModel">
+import { o } from '@cat-kit/core'
+import { useFormComponent } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { shallowRef, toRef } from 'vue'
+
+import type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'
+import { UFormItem } from '../form-item'
+import { UGrid } from '../grid'
+import type { DynamicFormModel } from './dynamic-form-model'
+import type { FormModel } from './form-model'
+import { useNodeInterceptor } from './use-node-interceptor'
+
+defineOptions({
+  name: 'Form'
+})
+
+const props = defineProps<FormProps<Model>>()
+
+defineSlots<{
+  default(props: {
+    /** 表单数据 */
+    data: Model['data']
+    /** 表单模型 */
+    model: Model
+  }): any
+}>()
+
+const cls = bem('form')
+
+const breakpointCols: BreakCols = {
+  xs: 1,
+  md: 2,
+  lg: 3,
+  xl: 4,
+  default: 4
+}
+
+useFormComponent(props)
+
+const { getSlotsNodes } = useNodeInterceptor({ props })
+
+function handleUpdateValue(field: string, value: any) {
+  const { model } = props
+  if (!model) return
+  o(model.data).set(field, value)
+}
+
+function showInitialNode(field: string) {
+  const { data, initialData } = props.model || {}
+
+  const currentValue = o(data ?? {}).get(field)
+  const initialValue = o(initialData ?? {}).get(field)
+  const notEqual = !(initialValue === currentValue || (!initialValue && !currentValue))
+
+  return props.showInitialData && notEqual
+}
+
+const gridRef = shallowRef<GridExposed>()
+
+defineExpose<_FormExposed>({
+  el: toRef(() => gridRef.value?.el)
+})
+</script>

package/src/components/form/helper.ts

@@ -0,0 +1,14 @@
+import type { FormModelItem } from '../../types'
+
+/**
+ * 定义表单项
+ * @param item 表单项
+ * @returns
+ */
+export function formField<Val = unknown>(item?: FormModelItem<Val>): FormModelItem<Val> {
+  if (!item) {
+    return {}
+  }
+
+  return item
+}