@fangzhongya/fang-ui 0.0.14 → 0.0.16

package/dist/components/forms/src/index.vue

@@ -0,0 +1,173 @@
+<template>
+	<div
+		ref="refEl"
+		:class="[cs.z()]"
+		:style="
+			cs.vdo({
+				itemBottom,
+				inlineRight,
+				queryInterval,
+				rowHeight,
+			})
+		"
+		v-bind="attrs.root"
+	>
+		<div
+			:class="[
+				cs.z('div'),
+				cs.zis('div', 'inline', props.inline),
+				cs.zis('div', 'box', props.inlineBox),
+				cs.zis('div', 'query', props.query),
+				cs.zis('div', 'column', props.column > 1),
+			]"
+			:style="styles"
+		>
+			<ElForm
+				v-bind="attrs.assem"
+				:key="props.list.length"
+				:class="[cs.z('elf'), props.labelPosition]"
+				:model="dataForm"
+				:disabled="props.disabled"
+				:rules="dataRules"
+				:label-width="
+					props.labelPosition == 'auto' ? '' : props.labelWidth
+				"
+				:label-position="
+					props.labelPosition == 'auto'
+						? undefined
+						: (props.labelPosition as any)
+				"
+				ref="refForm"
+				@submit.prevent
+			>
+				<slot :name="dataSlot.header"></slot>
+				<template
+					v-for="(item, index) of props.list"
+					:key="setKey(item, index)"
+				>
+					<div
+						:class="[
+							cs.z('li'),
+							cs.is('div', item?.isdiv),
+							item.class,
+						]"
+						:style="setStyles(item)"
+						v-show="!useHide(item, dataForm)"
+					>
+						<template v-if="item?.isdiv">
+							<FormsDiv
+								:listobj="item"
+								:optionss="props.options"
+								:valueobj="dataForm"
+								v-model="dataForm"
+							>
+								<template
+									v-for="k of Object.keys(slots)"
+									#[k]="scope"
+									:key="k"
+								>
+									<slot :name="k" v-bind="scope"></slot>
+								</template>
+							</FormsDiv>
+						</template>
+						<template v-else>
+							<FormsItem
+								:listobj="item"
+								:optionss="props.options"
+								:valueobj="dataForm"
+								v-model="dataForm"
+							>
+								<template
+									v-for="k of Object.keys(slots)"
+									#[k]="scope"
+									:key="k"
+								>
+									<slot :name="k" v-bind="scope"></slot>
+								</template>
+							</FormsItem>
+						</template>
+					</div>
+				</template>
+				<slot :name="dataSlot.footer"></slot>
+				<div
+					v-if="buts && buts.length > 0"
+					:class="[cs.z('li'), cs.z('buts')]"
+					:style="setStyles({})"
+				>
+					<ElFormItem :label-width="props.butLeft">
+						<div
+							:style="{ height: props.rowHeight }"
+							:class="cs.z('buts-div')"
+						>
+							<template
+								v-for="(item, index) of buts"
+								:key="index"
+							>
+								<ElButton
+									v-if="!useHide(item, dataForm)"
+									v-bind="item"
+									:disabled="item.disabled ?? props.disabled"
+									@click.stop="
+										onClickButs(item, index, $event)
+									"
+								>
+									{{ item.label }}
+								</ElButton>
+							</template>
+						</div>
+					</ElFormItem>
+				</div>
+			</ElForm>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+	import { dataProps, dataEmits, dataSlot } from './data';
+	import FormsDiv from '../../forms-div/index';
+	import FormsItem from '../../forms-item/index';
+	import { ElForm, ElFormItem, ElButton } from 'element-plus';
+	import { useCssName } from '../../../hooks/cssname';
+	import { useInherit } from '../../../hooks/inherit';
+	import { ref, useAttrs, useSlots } from 'vue';
+	import { useHide } from '../../common/use';
+	import { setUp } from './setup';
+	import type { Slots } from 'vue';
+
+	const slots: Slots = useSlots();
+	const attrs = useInherit(useAttrs());
+	const props = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+	const cs = useCssName('forms');
+	const refForm = ref();
+	const refEl = ref();
+	const {
+		buts,
+		styles,
+		dataRules,
+		onClickButs,
+		setStyles,
+		submitForm,
+		validateField,
+		resetFields,
+		closeForm,
+		dataForm,
+		validate,
+	} = setUp(props, emit, cs, refForm);
+
+	function setKey(value: ObjAny, index: number) {
+		return [index, value.label, value.prop, value.compon].join(',');
+	}
+
+	defineOptions({ inheritAttrs: false });
+
+	defineExpose({
+		el: refEl,
+		closeForm,
+		submitForm,
+		validateField,
+		resetFields,
+		validate,
+	});
+</script>
+
+<style lang="scss" scoped></style>

package/dist/components/forms/src/setup.cjs

@@ -5,7 +5,7 @@ const util = require("./util.cjs");
 const setObjStyle = require("@fangzhongya/utils/css/setObjStyle");
 require("@fangzhongya/utils/css/getCss");
 const use = require("../../common/use.cjs");
-const require$$0 = require("vue");
+const vue = require("vue");
 require("@fangzhongya/utils/basic/string/splitUpper");
 require("@fangzhongya/utils/basic/array/isArray");
 require("@fangzhongya/utils/basic/object/isObject");
@@ -19,6 +19,7 @@ require("@fangzhongya/utils/basic/object/deepCopy");
 require("@fangzhongya/utils/basic/Array/toggleArray");
 require("@fangzhongya/utils/basic/object/objValue");
 require("../../../utils/vues/getBuildProps.cjs");
+require("../../../utils/vues/withInstall.cjs");
 const compons = require("../../common/compons.cjs");
 const index = require("../../forms-items/index.cjs");
 const Components = {
@@ -34,7 +35,7 @@ const Changes = [
   "Cascader"
 ];
 function setUp(props, emit, cs, refForm) {
-  const buts = require$$0.computed(() => {
+  const buts = vue.computed(() => {
     if (typeof props.buts == "undefined") {
       return [
         {
@@ -52,13 +53,13 @@ function setUp(props, emit, cs, refForm) {
     }
   });
   const tfcom = compons.getCompons(Components, props.compons);
-  require$$0.provide("forms-compons", tfcom);
-  require$$0.provide("forms-form", props);
+  vue.provide("forms-compons", tfcom);
+  vue.provide("forms-form", props);
   const defaultValue = {};
   const getDataForm = () => {
     if (props.modelValue) {
-      if (require$$0.isProxy(props.modelValue)) {
-        return require$$0.computed({
+      if (vue.isProxy(props.modelValue)) {
+        return vue.computed({
           get() {
             return props.modelValue;
           },
@@ -67,14 +68,14 @@ function setUp(props, emit, cs, refForm) {
           }
         });
       } else {
-        return require$$0.ref(props.modelValue);
+        return vue.ref(props.modelValue);
       }
     } else {
-      return require$$0.ref(defaultValue);
+      return vue.ref(defaultValue);
     }
   };
   const dataForm = getDataForm();
-  const styles = require$$0.computed(() => {
+  const styles = vue.computed(() => {
     return cs.vdo({
       "inline-right": props.inlineRight,
       "item-bottom": props.query ? "0px" : props.itemBottom
@@ -150,15 +151,15 @@ function setUp(props, emit, cs, refForm) {
     setListValue(props.list);
     return rules;
   }
-  const dataRules = require$$0.ref(getRules());
-  require$$0.watch(
+  const dataRules = vue.ref(getRules());
+  vue.watch(
     () => dataForm.value,
     () => {
       emit("upform", dataForm.value);
     },
     { deep: true }
   );
-  require$$0.watch(
+  vue.watch(
     () => props.list.length,
     () => {
       dataRules.value = getRules();

package/dist/components/forms/src/setup.d.ts

@@ -1,12 +1,12 @@
 import { DataProps } from './data';
 import { UseCssNameReturn } from '../../../hooks/cssname';
-import { Ref, CSSProperties } from 'vue';
+import { Ref, CSSProperties, WritableComputedRef, ComputedRef } from 'vue';
 type Emit = (event: string, ...args: any[]) => void;
 export declare function setUp(props: DataProps, emit: Emit, cs: UseCssNameReturn, refForm: any): {
     dataRules: Ref<ObjAny, ObjAny>;
-    dataForm: Ref<ObjAny, ObjAny> | import('vue').WritableComputedRef<Record<string, any> | undefined, Record<string, any> | undefined>;
-    buts: import('vue').ComputedRef<ObjAny[]>;
-    styles: import('vue').ComputedRef<CSSProperties>;
+    dataForm: Ref<ObjAny, ObjAny> | WritableComputedRef<Record<string, any> | undefined, Record<string, any> | undefined>;
+    buts: ComputedRef<ObjAny[]>;
+    styles: ComputedRef<CSSProperties>;
     setStyles: (v: ListObj) => string | {
         [key: string]: string | number;
     };

package/dist/components/forms/src/setup.js

@@ -17,6 +17,7 @@ import "@fangzhongya/utils/basic/object/deepCopy";
 import "@fangzhongya/utils/basic/Array/toggleArray";
 import "@fangzhongya/utils/basic/object/objValue";
 import "../../../utils/vues/getBuildProps.js";
+import "../../../utils/vues/withInstall.js";
 import { getCompons } from "../../common/compons.js";
 import { FormsItems } from "../../forms-items/index.js";
 const Components = {

package/dist/components/forms/src/setup.ts

@@ -0,0 +1,265 @@
+import { dataHandle, type DataProps } from './data';
+import { getRule } from './util';
+import { setObjStyle } from '../../../utils/css';
+import type { UseCssNameReturn } from '../../../hooks/cssname';
+import { getFormRule, setFormDefaultValue } from '../../common/use';
+import { lineToLargeHump } from '../../../utils/index';
+import { type Ref, ref, watch, provide, computed, isProxy } from 'vue';
+import type { CSSProperties, Component } from 'vue';
+
+import { getCompons } from '../../common/compons';
+
+import Items from '../../forms-items/index';
+
+const Components: { [key: string]: Component } = {
+	Items,
+};
+
+const Changes = [
+	'Select',
+	'Date',
+	'Array',
+	'Check',
+	'Labels',
+	'Switch',
+	'Cascader',
+];
+
+type Emit = (event: string, ...args: any[]) => void;
+
+export function setUp(
+	props: DataProps,
+	emit: Emit,
+	cs: UseCssNameReturn,
+	refForm: any,
+) {
+	const buts = computed(() => {
+		if (typeof props.buts == 'undefined') {
+			return [
+				{
+					_id: '2',
+					label: '关闭',
+				},
+				{
+					_id: '1',
+					type: 'primary',
+					label: '确认',
+				},
+			];
+		} else {
+			return props.buts || [];
+		}
+	});
+
+	const tfcom = getCompons(Components, props.compons);
+	provide('forms-compons', tfcom);
+	provide('forms-form', props);
+
+	const defaultValue: ObjAny = {};
+
+	const getDataForm = () => {
+		if (props.modelValue) {
+			if (isProxy(props.modelValue)) {
+				return computed({
+					get() {
+						return props.modelValue;
+					},
+					set(value) {
+						emit('update:modelValue', value);
+					},
+				});
+			} else {
+				return ref(props.modelValue);
+			}
+		} else {
+			return ref(defaultValue);
+		}
+	};
+
+	const dataForm = getDataForm();
+
+	const styles = computed(() => {
+		return cs.vdo({
+			'inline-right': props.inlineRight,
+			'item-bottom': props.query ? '0px' : props.itemBottom,
+		}) as CSSProperties;
+	});
+
+	function setStyles(v: ListObj) {
+		const style = v.style || {};
+		let vst: ObjStrNum;
+		if (typeof style === 'function') {
+			vst = style(v, dataForm.value) || {};
+		} else {
+			vst = style;
+		}
+		const obj: ObjAny = {};
+		const minWidth = v.minWidth ?? props.rowMinWidth;
+		const width = v.width ?? props.rowWidth;
+		if (width) {
+			obj.width = width;
+		} else {
+			if (props.column > 1) {
+				obj.width = Number((100 / props.column).toFixed(2)) + '%';
+			}
+		}
+		if (minWidth) {
+			obj.minWidth = minWidth;
+		}
+		if (v.whole) {
+			obj.display = 'block';
+			obj.width = '100%';
+		}
+		return setObjStyle(vst, obj);
+	}
+
+	function getRules() {
+		const rules: ObjAny = {};
+		const setListValue = (arr: ListObj[], listobj?: ListObj) => {
+			arr?.forEach((obj: ListObj) => {
+				if (listobj) {
+					obj.father = obj.father ?? listobj;
+				}
+				if (obj.children) {
+					setListValue(obj.children, obj);
+				}
+
+				if (obj.prop) {
+					setFormDefaultValue(obj, dataForm.value as ObjAny);
+				}
+
+				let trigger = 1;
+				if (typeof obj.compon == 'string') {
+					if (Changes.includes(lineToLargeHump(obj.compon))) {
+						trigger = 2;
+					}
+				}
+				obj.config = obj.config ?? {};
+				if (obj.config?.placeholder === undefined) {
+					obj.config.placeholder =
+						(trigger == 1 ? '请输入' : '请选择') + obj.label;
+				}
+				if (obj.config?.clearable === undefined) {
+					obj.config.clearable = true;
+				}
+				if (obj.prop) {
+					const p = getFormRule(obj) ?? obj.prop;
+					obj.__prop = p;
+					if (obj.rules) {
+						rules[p] = obj.rules;
+					} else if (obj.rule) {
+						rules[p] = getRule(trigger, obj, dataForm, refForm);
+					} else {
+						rules[p] = [];
+					}
+				}
+			});
+		};
+		setListValue(props.list);
+		return rules;
+	}
+
+	const dataRules = ref(getRules());
+
+	watch(
+		() => dataForm.value,
+		() => {
+			emit('upform', dataForm.value);
+		},
+		{ deep: true },
+	);
+
+	watch(
+		() => props.list.length,
+		() => {
+			dataRules.value = getRules();
+		},
+	);
+
+	function validate() {
+		return new Promise((resolve, reject) => {
+			if (refForm.value) {
+				refForm.value.validate((valid: boolean) => {
+					if (valid) {
+						resolve(dataForm.value);
+					} else {
+						reject();
+					}
+				});
+			} else {
+				reject();
+			}
+		});
+	}
+
+	function submitForm(callback?: Function) {
+		validate()
+			.then((obj) => {
+				if (props.ajax) {
+					dataHandle(props, obj as ObjAny)
+						.then((list: any) => {
+							if (callback) {
+								callback(list, true);
+							}
+							emit('submit', list);
+						})
+						.catch((res: any) => {
+							if (callback) {
+								callback(res, false);
+							}
+							emit('submit', res);
+						});
+				} else {
+					if (callback) {
+						callback(obj);
+					}
+					emit('submit', obj);
+				}
+			})
+			.catch(() => {});
+	}
+
+	function resetFields() {
+		refForm.value?.resetFields();
+	}
+
+	function validateField(...arr: any[]) {
+		refForm.value?.validateField(...arr);
+	}
+
+	function closeForm() {
+		resetFields();
+		emit('cancel', dataForm.value);
+	}
+	function onClickButs(obj: ObjAny, index: number, event: Event) {
+		if (obj._id == 1) {
+			submitForm();
+		} else if (obj._id == 2) {
+			closeForm();
+		} else {
+			if (obj.click) {
+				obj.click(obj, dataForm.value, index, event);
+			} else {
+				emit('buts', obj, dataForm.value, index, event);
+			}
+		}
+	}
+
+	if (props.query) {
+		emit('submit', dataForm.value);
+	}
+
+	return {
+		dataRules,
+		dataForm,
+		buts,
+		styles,
+		setStyles,
+		onClickButs,
+		submitForm,
+		validateField,
+		resetFields,
+		closeForm,
+		validate,
+	};
+}

package/dist/components/forms/src/util.ts

@@ -0,0 +1,150 @@
+import { useHide } from '../../common/use';
+import * as judge from '@fangzhongya/utils/judge/judge';
+
+type Rule = {
+	required?: boolean;
+	validator: Function;
+	trigger: string | string[];
+};
+
+export type Rules = {
+	[key: string]: Array<Rule> | Rule;
+};
+
+/**
+ * 后期要实现 v.rule 多匹配，
+ * 错误提示自定义
+ */
+/**
+ * 获取表单校验规则
+ * @param {number} trigger 校验触发类型
+ * @param {ListObj} obj 表单项配置对象
+ * @param {any} data 表单数据
+ * @param {any} refForm 表单引用
+ * @returns {{ required: boolean, validator: Function, trigger: string }}
+ */
+export function getRule(
+	trigger: number,
+	obj: ListObj,
+	data: any,
+	refForm: any,
+): Rule {
+	const name = obj.label;
+	let multiple = obj.multiple ?? obj.config?.multiple;
+	const rule = obj.rule;
+
+	if (typeof multiple != 'boolean') {
+		multiple = false;
+	}
+	let required = true;
+	let jyjudgev = '';
+	switch (typeof rule) {
+		case 'string':
+			jyjudgev = rule;
+			required = false;
+			break;
+		case 'number':
+			required = true;
+			trigger = rule;
+			break;
+		case 'boolean':
+			required = true;
+			break;
+		case 'object':
+			if (rule) {
+				trigger = rule.type ?? trigger;
+				required = rule.must ?? true;
+				jyjudgev = rule.judge;
+			}
+			break;
+		default:
+			break;
+	}
+	required = obj.required ?? required;
+	let inputPrompt = trigger == 1 ? '请输入' : '请选择';
+	let validator = function (rule: any, value: any, callback: Function) {
+		callback();
+	};
+	if (jyjudgev) {
+		let isJudgeFailed = function (value: any) {
+			return false;
+		};
+		let processCallback = function (
+			callback: Function,
+			value: any,
+			data?: any,
+			refForm?: any,
+			obj?: any,
+		) {
+			callback();
+		};
+		if (typeof jyjudgev == 'string') {
+			let judgeFun =
+				(judge as ObjAny)[jyjudgev] ??
+				function (value: any) {
+					return true;
+				};
+			isJudgeFailed = function (value: any) {
+				return !judgeFun(value);
+			};
+		} else {
+			processCallback = jyjudgev;
+		}
+		if (required) {
+			validator = function (rule, value, callback) {
+				if (useHide(obj, data.value)) {
+					callback();
+				} else if (!value && value !== 0) {
+					callback(new Error(inputPrompt + name));
+				} else if (multiple && value.length == 0) {
+					callback(new Error(inputPrompt + name));
+				} else if (isJudgeFailed(value)) {
+					callback(new Error(name + '校验失败'));
+				} else {
+					processCallback(
+						callback,
+						value,
+						data.value,
+						refForm.value,
+						obj,
+					);
+				}
+			};
+		} else {
+			validator = function (rule, value, callback) {
+				if (useHide(obj, data.value)) {
+					callback();
+				} else if (value && value !== 0 && isJudgeFailed(value)) {
+					callback(new Error(name + '校验失败'));
+				} else {
+					processCallback(
+						callback,
+						value,
+						data.value,
+						refForm.value,
+						obj,
+					);
+				}
+			};
+		}
+	} else {
+		if (required) {
+			validator = function (rule, value, callback) {
+				if (useHide(obj, data.value)) {
+					callback();
+				} else if (!value && value !== 0) {
+					callback(new Error(inputPrompt + name));
+				} else if (multiple && value.length == 0) {
+					callback(new Error(inputPrompt + name));
+				} else {
+					callback();
+				}
+			};
+		}
+	}
+	return {
+		required,
+		validator,
+		trigger: trigger == 1 ? 'blur' : 'change',
+	};
+}