@veltra/desktop 1.0.0

package/dist/components/float-button/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/float-button/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/float-button/style2.css

@@ -0,0 +1,48 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-float-button {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  display: flex;
+  justify-items: flex-end;
+  flex-direction: column-reverse;
+  flex-wrap: nowrap;
+}
+.u-float-button__item {
+  box-shadow: 0 0 5px 1px var(--u-color-primary-light-3);
+  transition-property: transform, opacity;
+  transition-duration: 0.2s;
+  transform: scale(0.4);
+  opacity: 0;
+  display: none;
+}
+.u-float-button__item:not(:first-child) {
+  margin-bottom: 6px;
+}
+.u-float-button__item.is-hovered {
+  opacity: 1;
+  transform: scale(1);
+}
+.u-float-button__item.is-first {
+  opacity: 1;
+  transform: scale(1);
+}
+.u-float-button__item.is-first {
+  display: flex;
+}

package/dist/components/form/dynamic-form-model.d.ts

@@ -0,0 +1,71 @@
+import { DataSettingConfig, FormModelItem } from "../../types/form.js";
+//#region src/components/form/dynamic-form-model.d.ts
+/**
+ * 动态表单模型
+ */
+declare class DynamicFormModel {
+  /** 表单数据 */
+  private _data;
+  set data(v: Record<string, any>);
+  get data(): Record<string, any>;
+  /** 表单规则 */
+  readonly fields: Record<string, FormModelItem>;
+  private validator;
+  /**
+   * 不同表单对应的key
+   */
+  formKeys: Map<number, string[]>;
+  readonly errors: Map<string, string[] | undefined>;
+  /**
+   * 是否在表单值更新时校验
+   */
+  private validateOnFieldChange;
+  private modelChangeCallback;
+  private _allKeys;
+  /** 所有的键 */
+  get allKeys(): string[];
+  private getAllKeys;
+  /** 初始数据 */
+  readonly initialData: Record<string, any>;
+  /**
+   * 变更前的值
+   */
+  private readonly oldData;
+  constructor(fields?: Record<string, FormModelItem>);
+  private watchData;
+  append(fields: Record<string, FormModelItem>): void;
+  /**
+   * 添加字段
+   * @param field 字段
+   * @param item 字段配置项
+   */
+  add(field: string, item: FormModelItem): void;
+  /**
+   * 移除字段
+   * @param field 字段
+   */
+  delete(field: string): void;
+  /**
+   * 监听值变更
+   * @param cb 回调
+   */
+  onChange(cb: (field: string, val: any) => void): void;
+  offChange(cb: (field: string, val: any) => void): void;
+  validate(fields?: string | string[]): Promise<boolean>;
+  private getValidateFields;
+  /**
+   * 重置数据
+   * @param fields 需要重置的字段
+   */
+  resetData(keys?: string | string[]): void;
+  /**
+   * 设置值
+   * @param formData 表单值
+   * @param options 配置
+   */
+  setData(formData: Record<string, any>, config?: DataSettingConfig): void;
+  clearValidate(): void;
+}
+//#endregion
+export { DynamicFormModel };
+//# sourceMappingURL=dynamic-form-model.d.ts.map

package/dist/components/form/dynamic-form-model.js

@@ -0,0 +1,165 @@
+import { isReactive, reactive, shallowReactive, watch } from "vue";
+import { o } from "@cat-kit/core";
+import { Validator } from "@veltra/utils";
+//#region src/components/form/dynamic-form-model.ts
+/**
+* 动态表单模型
+*/
+var DynamicFormModel = class {
+	/** 表单数据 */
+	_data = reactive({});
+	set data(v) {
+		if (!isReactive(v)) {
+			console.error(`data不是一个响应式对象`);
+			return;
+		}
+		this._data = v;
+		this.watchData();
+	}
+	get data() {
+		return this._data;
+	}
+	/** 表单规则 */
+	fields = shallowReactive({});
+	validator;
+	/**
+	* 不同表单对应的key
+	*/
+	formKeys = /* @__PURE__ */ new Map();
+	errors = shallowReactive(/* @__PURE__ */ new Map());
+	/**
+	* 是否在表单值更新时校验
+	*/
+	validateOnFieldChange = true;
+	modelChangeCallback = /* @__PURE__ */ new Set();
+	_allKeys = [];
+	/** 所有的键 */
+	get allKeys() {
+		return this._allKeys;
+	}
+	getAllKeys() {
+		this._allKeys = Object.keys(this.fields);
+	}
+	/** 初始数据 */
+	initialData = {};
+	/**
+	* 变更前的值
+	*/
+	oldData = {};
+	constructor(fields) {
+		this.append(fields ?? {});
+		this.validator = new Validator(this.fields);
+		this.getAllKeys();
+		this.watchData();
+	}
+	watchData() {
+		const { oldData } = this;
+		watch(this.data, (data) => {
+			let changedKeys = [];
+			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) {
+		for (const key in fields) this.add(key, fields[key] ?? {});
+	}
+	/**
+	* 添加字段
+	* @param field 字段
+	* @param item 字段配置项
+	*/
+	add(field, item) {
+		this.fields[field] = item;
+		const { value } = item;
+		const v = typeof value === "function" ? value() : value;
+		/** 这是有bug的 */
+		if (v !== void 0) 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) {
+		delete this.fields[field];
+		this.getAllKeys();
+	}
+	/**
+	* 监听值变更
+	* @param cb 回调
+	*/
+	onChange(cb) {
+		this.modelChangeCallback.add(cb);
+	}
+	offChange(cb) {
+		this.modelChangeCallback.delete(cb);
+	}
+	async validate(fields) {
+		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;
+	}
+	getValidateFields(fields) {
+		if (!fields) if (this.formKeys.size) {
+			let _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 需要重置的字段
+	*/
+	resetData(keys) {
+		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, o(this.initialData).get(field));
+		});
+	}
+	/**
+	* 设置值
+	* @param formData 表单值
+	* @param options 配置
+	*/
+	setData(formData, config) {
+		const { validate = true } = config || {};
+		if (!validate) this.validateOnFieldChange = false;
+		this.allKeys.forEach((key) => {
+			const value = o(formData).get(key);
+			if (value !== void 0) o(this.data).set(key, value);
+		});
+	}
+	clearValidate() {
+		this.errors.clear();
+	}
+};
+//#endregion
+export { DynamicFormModel };
+
+//# sourceMappingURL=dynamic-form-model.js.map

package/dist/components/form/dynamic-form-model.js.map

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

package/dist/components/form/form-model.d.ts

@@ -0,0 +1,73 @@
+import { DataSettingConfig, FormModelItem, IFormModel, ModelData } from "../../types/form.js";
+import { Reactive } from "vue";
+
+//#region src/components/form/form-model.d.ts
+/**
+ * 表单模型
+ */
+declare 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)[]>;
+  /** 初始数据 */
+  readonly initialData: ModelData<Fields>;
+  readonly errors: Map<keyof Fields, string[] | undefined>;
+  private validator;
+  /**
+   * 是否在表单值更新时校验
+   */
+  private validateOnFieldChange;
+  private modelChangeCallback;
+  constructor(fields: Fields);
+  /**
+   * 设置响应式值, 替换掉原有的数据
+   * @description 设置响应式值时，会自动监听值的变化，并进行校验
+   * @param proxyData 响应式的值
+   */
+  setProxyData(proxyData: ModelData<Fields> | Reactive<ModelData<Fields>>): void;
+  private getValidateFields;
+  /**
+   * 模型校验
+   * @param fields 需要校验的字段, 不传则校验所有字段
+   * @returns
+   */
+  validate(fields?: keyof Fields | (keyof Fields)[]): Promise<boolean>;
+  /**
+   * 重置数据
+   * @param fields 需要重置的字段
+   */
+  resetData(keys?: keyof Fields | (keyof Fields)[]): void;
+  /**
+   * 设置值
+   * @param formData 表单值
+   * @param options 配置
+   */
+  setData(formData: Partial<ModelData<Fields> & Record<string, any>>, config?: DataSettingConfig): FormModel<Fields>;
+  /**
+   * 设置初始值
+   * @description 初始值在重置数据和查看原始数据时会用到
+   * @param data 初始值
+   */
+  setInitialData(data: Partial<ModelData<Fields>>): FormModel<Fields>;
+  /** 清除校验 */
+  clearValidate(): void;
+  /**
+   * 监听值变更
+   * @param cb 回调
+   */
+  onChange(cb: (field: keyof Fields, val: any) => void): void;
+  /** 关闭监听值变更 */
+  offChange(cb: (field: keyof Fields, val: any) => void): void;
+}
+//#endregion
+export { FormModel };
+//# sourceMappingURL=form-model.d.ts.map

package/dist/components/form/form-model.js

@@ -0,0 +1,164 @@
+import { nextTick, reactive, shallowReactive, watch } from "vue";
+import { o } from "@cat-kit/core";
+import { Validator, middleProxy } from "@veltra/utils";
+//#region src/components/form/form-model.ts
+/**
+* 表单模型
+*/
+var FormModel = class {
+	/** 表单数据 */
+	data;
+	/** 表单规则 */
+	fields;
+	/** 所有的键 */
+	allKeys;
+	/**
+	* 不同表单所需要校验的字段
+	* @description
+	* 这个值会在表单组件渲染时由表单设置，因为只有真正渲染的组件才应该被校验
+	*/
+	formKeys = /* @__PURE__ */ new Map();
+	/** 初始数据 */
+	initialData;
+	errors = shallowReactive(/* @__PURE__ */ new Map());
+	validator;
+	/**
+	* 是否在表单值更新时校验
+	*/
+	validateOnFieldChange = true;
+	modelChangeCallback = /* @__PURE__ */ new Set();
+	constructor(fields) {
+		this.fields = fields;
+		const rawData = {};
+		const allKeys = [];
+		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) {
+		this.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);
+			}
+		});
+	}
+	getValidateFields(fields) {
+		if (!fields) if (this.formKeys.size) {
+			let _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) {
+		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) {
+		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, o(this.initialData).get(field));
+		});
+	}
+	/**
+	* 设置值
+	* @param formData 表单值
+	* @param options 配置
+	*/
+	setData(formData, config) {
+		const { validate = true } = config || {};
+		if (!validate) this.validateOnFieldChange = false;
+		this.allKeys.forEach((key) => {
+			const value = o(formData).get(key);
+			if (value !== void 0) o(this.data).set(key, value);
+		});
+		return this;
+	}
+	/**
+	* 设置初始值
+	* @description 初始值在重置数据和查看原始数据时会用到
+	* @param data 初始值
+	*/
+	setInitialData(data) {
+		this.allKeys.forEach((key) => {
+			o(this.initialData).set(key, o(data).get(key));
+		});
+		return this;
+	}
+	/** 清除校验 */
+	clearValidate() {
+		this.errors.clear();
+	}
+	/**
+	* 监听值变更
+	* @param cb 回调
+	*/
+	onChange(cb) {
+		this.modelChangeCallback.add(cb);
+	}
+	/** 关闭监听值变更 */
+	offChange(cb) {
+		this.modelChangeCallback.delete(cb);
+	}
+};
+//#endregion
+export { FormModel };
+
+//# sourceMappingURL=form-model.js.map

package/dist/components/form/form-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-model.js","names":[],"sources":["../../../src/components/form/form-model.ts"],"sourcesContent":["import { o } from '@cat-kit/core'\nimport { middleProxy, Validator } from '@veltra/utils'\nimport { nextTick, reactive, shallowReactive, watch, type Reactive } from 'vue'\n\nimport type {\n  FormModelItem,\n  ModelData,\n  ModelRules,\n  DataSettingConfig,\n  IFormModel\n} from '../../types'\n\n/**\n * 表单模型\n */\nexport class FormModel<\n  Fields extends Record<string, FormModelItem> = Record<string, FormModelItem>\n> implements IFormModel<Fields> {\n  /** 表单数据 */\n  data!: ModelData<Fields>\n\n  /** 表单规则 */\n  readonly fields: Fields\n\n  /** 所有的键 */\n  readonly allKeys: string[]\n\n  /**\n   * 不同表单所需要校验的字段\n   * @description\n   * 这个值会在表单组件渲染时由表单设置，因为只有真正渲染的组件才应该被校验\n   */\n  formKeys: Map<number, (keyof Fields)[]> = new Map()\n\n  /** 初始数据 */\n  readonly initialData: ModelData<Fields>\n\n  readonly errors: Map<keyof Fields, string[] | undefined> = shallowReactive(new Map())\n\n  private validator: Validator<ModelRules<Fields>>\n\n  /**\n   * 是否在表单值更新时校验\n   */\n  private validateOnFieldChange = true\n\n  private modelChangeCallback: Set<(fields: string, val: any) => void> = new Set()\n\n  constructor(fields: Fields) {\n    this.fields = fields\n    const rawData = {} as ModelData<Fields>\n    const allKeys: string[] = []\n\n    for (const key in fields) {\n      const fieldItem = fields[key]!\n      allKeys.push(key)\n      const { value } = fieldItem\n      let v = value\n\n      if (typeof value === 'function') {\n        watch(value, (v) => {\n          o(this.initialData).set(key, v)\n        })\n        v = value()\n      }\n\n      o(rawData).set(key, v)\n    }\n\n    this.allKeys = allKeys\n    this.initialData = JSON.parse(JSON.stringify(rawData))\n\n    this.setProxyData(reactive(rawData))\n\n    this.validator = new Validator(this.fields)\n\n    return shallowReactive(this)\n  }\n\n  /**\n   * 设置响应式值, 替换掉原有的数据\n   * @description 设置响应式值时，会自动监听值的变化，并进行校验\n   * @param proxyData 响应式的值\n   */\n  setProxyData(proxyData: ModelData<Fields> | Reactive<ModelData<Fields>>): void {\n    const data = middleProxy(proxyData, {\n      set: (field, val) => {\n        this.modelChangeCallback.forEach((cb) => cb(field, val))\n      },\n\n      changed: (fields) => {\n        if (!this.validateOnFieldChange) {\n          this.validateOnFieldChange = true\n          return\n        }\n        this.validate(fields)\n      }\n    })\n\n    this.data = data as ModelData<Fields>\n  }\n\n  private getValidateFields(fields?: keyof Fields | (keyof Fields)[]) {\n    if (!fields) {\n      if (this.formKeys.size) {\n        let _fields: (keyof Fields)[] = []\n        this.formKeys.forEach((fields) => {\n          _fields = _fields.concat(fields)\n        })\n        return _fields\n      } else {\n        return this.allKeys\n      }\n    }\n\n    if (!Array.isArray(fields)) {\n      return [fields]\n    }\n    return fields\n  }\n\n  /**\n   * 模型校验\n   * @param fields 需要校验的字段, 不传则校验所有字段\n   * @returns\n   */\n  async validate(fields?: keyof Fields | (keyof Fields)[]): Promise<boolean> {\n    const { errors, validator, data } = this\n\n    const results = await validator.validate(data, this.getValidateFields(fields))\n\n    // 全量校验\n    if (!fields) {\n      errors.clear()\n\n      for (const field in results) {\n        errors.set(field, results[field])\n      }\n    }\n    // 局部校验\n    else {\n      ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {\n        const errs = results[field]\n        if (errs?.length) {\n          errors.set(field, errs)\n        } else {\n          errors.delete(field)\n        }\n      })\n    }\n\n    if (errors.size > 0) {\n      if (!fields) {\n        nextTick(() => {\n          document.querySelector('.u-form-item.is-error')?.scrollIntoView({ block: 'nearest' })\n        })\n      }\n      return Promise.reject(false)\n    }\n\n    return true\n  }\n\n  /**\n   * 重置数据\n   * @param fields 需要重置的字段\n   */\n  resetData(keys?: keyof Fields | (keyof Fields)[]): void {\n    if (typeof keys === 'string') {\n      keys = [keys]\n    } else if (Array.isArray(keys)) {\n    } else {\n      keys = this.allKeys\n    }\n\n    this.clearValidate()\n\n    this.validateOnFieldChange = false\n\n    keys.forEach((field) => {\n      o(this.data).set(field as string, o(this.initialData).get(field as string))\n    })\n  }\n\n  /**\n   * 设置值\n   * @param formData 表单值\n   * @param options 配置\n   */\n  setData(\n    formData: Partial<ModelData<Fields> & Record<string, any>>,\n    config?: DataSettingConfig\n  ): FormModel<Fields> {\n    const { validate = true } = config || {}\n\n    if (!validate) {\n      this.validateOnFieldChange = false\n    }\n\n    this.allKeys.forEach((key) => {\n      const value = o(formData).get(key)\n      if (value !== undefined) {\n        o(this.data).set(key, value)\n      }\n    })\n\n    return this\n  }\n\n  /**\n   * 设置初始值\n   * @description 初始值在重置数据和查看原始数据时会用到\n   * @param data 初始值\n   */\n  setInitialData(data: Partial<ModelData<Fields>>): FormModel<Fields> {\n    this.allKeys.forEach((key) => {\n      o(this.initialData).set(key, o(data).get(key))\n    })\n\n    return this\n  }\n\n  /** 清除校验 */\n  clearValidate(): void {\n    this.errors.clear()\n  }\n\n  /**\n   * 监听值变更\n   * @param cb 回调\n   */\n  onChange(cb: (field: keyof Fields, val: any) => void): void {\n    this.modelChangeCallback.add(cb)\n  }\n\n  /** 关闭监听值变更 */\n  offChange(cb: (field: keyof Fields, val: any) => void): void {\n    this.modelChangeCallback.delete(cb)\n  }\n}\n"],"mappings":";;;;;;;AAeA,IAAa,YAAb,MAEgC;;CAE9B;;CAGA;;CAGA;;;;;;CAOA,2BAA0C,IAAI,KAAK;;CAGnD;CAEA,SAA2D,gCAAgB,IAAI,KAAK,CAAC;CAErF;;;;CAKA,wBAAgC;CAEhC,sCAAuE,IAAI,KAAK;CAEhF,YAAY,QAAgB;AAC1B,OAAK,SAAS;EACd,MAAM,UAAU,EAAE;EAClB,MAAM,UAAoB,EAAE;AAE5B,OAAK,MAAM,OAAO,QAAQ;GACxB,MAAM,YAAY,OAAO;AACzB,WAAQ,KAAK,IAAI;GACjB,MAAM,EAAE,UAAU;GAClB,IAAI,IAAI;AAER,OAAI,OAAO,UAAU,YAAY;AAC/B,UAAM,QAAQ,MAAM;AAClB,OAAE,KAAK,YAAY,CAAC,IAAI,KAAK,EAAE;MAC/B;AACF,QAAI,OAAO;;AAGb,KAAE,QAAQ,CAAC,IAAI,KAAK,EAAE;;AAGxB,OAAK,UAAU;AACf,OAAK,cAAc,KAAK,MAAM,KAAK,UAAU,QAAQ,CAAC;AAEtD,OAAK,aAAa,SAAS,QAAQ,CAAC;AAEpC,OAAK,YAAY,IAAI,UAAU,KAAK,OAAO;AAE3C,SAAO,gBAAgB,KAAK;;;;;;;CAQ9B,aAAa,WAAkE;AAe7E,OAAK,OAdQ,YAAY,WAAW;GAClC,MAAM,OAAO,QAAQ;AACnB,SAAK,oBAAoB,SAAS,OAAO,GAAG,OAAO,IAAI,CAAC;;GAG1D,UAAU,WAAW;AACnB,QAAI,CAAC,KAAK,uBAAuB;AAC/B,UAAK,wBAAwB;AAC7B;;AAEF,SAAK,SAAS,OAAO;;GAExB,CAAC;;CAKJ,kBAA0B,QAA0C;AAClE,MAAI,CAAC,OACH,KAAI,KAAK,SAAS,MAAM;GACtB,IAAI,UAA4B,EAAE;AAClC,QAAK,SAAS,SAAS,WAAW;AAChC,cAAU,QAAQ,OAAO,OAAO;KAChC;AACF,UAAO;QAEP,QAAO,KAAK;AAIhB,MAAI,CAAC,MAAM,QAAQ,OAAO,CACxB,QAAO,CAAC,OAAO;AAEjB,SAAO;;;;;;;CAQT,MAAM,SAAS,QAA4D;EACzE,MAAM,EAAE,QAAQ,WAAW,SAAS;EAEpC,MAAM,UAAU,MAAM,UAAU,SAAS,MAAM,KAAK,kBAAkB,OAAO,CAAC;AAG9E,MAAI,CAAC,QAAQ;AACX,UAAO,OAAO;AAEd,QAAK,MAAM,SAAS,QAClB,QAAO,IAAI,OAAO,QAAQ,OAAO;QAKnC,GAAE,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,SAAS,UAAU;GAC9D,MAAM,OAAO,QAAQ;AACrB,OAAI,MAAM,OACR,QAAO,IAAI,OAAO,KAAK;OAEvB,QAAO,OAAO,MAAM;IAEtB;AAGJ,MAAI,OAAO,OAAO,GAAG;AACnB,OAAI,CAAC,OACH,gBAAe;AACb,aAAS,cAAc,wBAAwB,EAAE,eAAe,EAAE,OAAO,WAAW,CAAC;KACrF;AAEJ,UAAO,QAAQ,OAAO,MAAM;;AAG9B,SAAO;;;;;;CAOT,UAAU,MAA8C;AACtD,MAAI,OAAO,SAAS,SAClB,QAAO,CAAC,KAAK;WACJ,MAAM,QAAQ,KAAK,EAAE,OAE9B,QAAO,KAAK;AAGd,OAAK,eAAe;AAEpB,OAAK,wBAAwB;AAE7B,OAAK,SAAS,UAAU;AACtB,KAAE,KAAK,KAAK,CAAC,IAAI,OAAiB,EAAE,KAAK,YAAY,CAAC,IAAI,MAAgB,CAAC;IAC3E;;;;;;;CAQJ,QACE,UACA,QACmB;EACnB,MAAM,EAAE,WAAW,SAAS,UAAU,EAAE;AAExC,MAAI,CAAC,SACH,MAAK,wBAAwB;AAG/B,OAAK,QAAQ,SAAS,QAAQ;GAC5B,MAAM,QAAQ,EAAE,SAAS,CAAC,IAAI,IAAI;AAClC,OAAI,UAAU,KAAA,EACZ,GAAE,KAAK,KAAK,CAAC,IAAI,KAAK,MAAM;IAE9B;AAEF,SAAO;;;;;;;CAQT,eAAe,MAAqD;AAClE,OAAK,QAAQ,SAAS,QAAQ;AAC5B,KAAE,KAAK,YAAY,CAAC,IAAI,KAAK,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC;IAC9C;AAEF,SAAO;;;CAIT,gBAAsB;AACpB,OAAK,OAAO,OAAO;;;;;;CAOrB,SAAS,IAAmD;AAC1D,OAAK,oBAAoB,IAAI,GAAG;;;CAIlC,UAAU,IAAmD;AAC3D,OAAK,oBAAoB,OAAO,GAAG"}

package/dist/components/form/form.js

@@ -0,0 +1,7 @@
+import form_vue_vue_type_script_setup_true_lang_default from "./form.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/form/form.vue
+var form_default = form_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { form_default as default };
+
+//# sourceMappingURL=form.js.map

package/dist/components/form/form.js.map

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

package/dist/components/form/form.vue.d.ts

@@ -0,0 +1,27 @@
+import { FormProps, _FormExposed } from "../../types/form.js";
+import { DynamicFormModel } from "./dynamic-form-model.js";
+import { FormModel } from "./form-model.js";
+import * as _$vue from "vue";
+
+//#region src/components/form/form.vue.d.ts
+declare const __VLS_export: <Model extends FormModel | DynamicFormModel>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<FormProps<Model>> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: _$vue.ShallowUnwrapRef<_FormExposed>) => void;
+  attrs: any;
+  slots: {
+    default(props: {
+      /** 表单数据 */data: Model["data"]; /** 表单模型 */
+      model: Model;
+    }): any;
+  };
+  emit: {};
+}>) => _$vue.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+export { _default };
+//# sourceMappingURL=form.vue.d.ts.map