@fangzhongya/fang-ui 0.0.20 → 0.0.22

package/dist/components/form-item/src/index.vue

@@ -1,31 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<ElFormItem v-bind="attrs" ref="refEl">
-			<template v-for="(k, i) in Object.keys(slots)" v-slot:[k] :key="k">
-				<slot :name="k"></slot>
-			</template>
-		</ElFormItem>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useLocale } from '../../../hooks/locale';
-	import { ref, useAttrs, useSlots } from 'vue';
-	import { ElFormItem } from 'element-plus';
-	import type { Slots } from 'vue';
-	const refEl = ref();
-	const attrs = useAttrs();
-	const slots: Slots = useSlots();
-	// 样式设置方法
-	const cs = useCssName('form-item');
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	defineExpose({
-		...dataExpose,
-		refEl,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/forms/index.ts

@@ -1,8 +0,0 @@
-import './style/index.scss';
-import { withInstall } from '../../utils/vues/withInstall'
-import SrcVue from './src/index.vue'
-const Forms = withInstall(SrcVue, 'Forms');
-export {
-   Forms,
-   Forms as default
-};

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

@@ -1,145 +0,0 @@
-import type { ExtractPropTypes, Component } from 'vue';
-
-import { props, comHandle } from '../../common/urls';
-
-// 'center' | 'auto'
-
-export const dataProps = {
-	...props,
-	/**
-	 * @props { Array<ListObj> } list 展示数据列表
-	 */
-	list: {
-		type: Array<ListObj>,
-		default() {
-			return [];
-		},
-	},
-	column: {
-		type: Number,
-		default() {
-			return 1;
-		},
-	},
-	/**
-	 * @props { Boolean } disabled 是否全部禁用
-	 */
-	disabled: { type: Boolean },
-	/**
-	 * @props { Object } options 选择数据集合
-	 */
-	options: {
-		type: Object,
-		default() {
-			return {};
-		},
-	},
-	/**
-	 * @props { Object } compons 外部组件集合
-	 */
-	compons: {
-		type: Object as () => { [key: string]: Component },
-		default() {
-			return {};
-		},
-	},
-	/**
-	 * @props { String } width=auto ( )
-	 * 标签的长度
-	 */
-	labelWidth: {
-		type: [String, Number],
-		default: 'auto',
-	},
-	labelPosition: {
-		type: String as () => 'left' | 'top' | 'right' | 'center' | 'auto',
-		default: 'left',
-	},
-	rowWidth: {
-		type: String,
-	},
-	rowMinWidth: {
-		type: String,
-	},
-	rowHeight: {
-		type: String,
-		// default: '42px',
-	},
-	inline: {
-		type: Boolean,
-		// default: true,
-	},
-	inlineBox: {
-		type: Boolean,
-	},
-	query: {
-		type: Boolean,
-	},
-	queryInterval: {
-		type: String,
-		default: '10px',
-	},
-	inlineRight: {
-		type: String,
-		default: '32px',
-	},
-	itemBottom: {
-		type: String,
-		default: '18px',
-	},
-	/**
-	 * @props { Object } value 默认展示数据
-	 */
-	modelValue: {
-		type: Object,
-	},
-	/**
-	 * @props { Object } buts=[] 表单按钮
-	 * pid: {1, 调用确认提交的方法; 2, 调用取消的方法}
-	 */
-	buts: {
-		type: Array<ObjAny>,
-	},
-	butLeft: {
-		type: String,
-	},
-	colon: [Boolean, String],
-};
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-/**
- * @emits submit 提交数据
- * @emits cancel 取消
- * @emits buts buts的其他事件 ( )
- */
-export const dataEmits = [
-	'submit',
-	'cancel',
-	'buts',
-	'upform',
-	'update:modelValue',
-];
-
-export type DataEmits = typeof dataEmits;
-
-/**
- * @slot default 默认插槽
- */
-export const dataSlot = {
-	default: 'default',
-	header: 'header',
-	footer: 'footer',
-};
-
-/**
- * @expose submitForm
- * 提交表单
- */
-/**
- * @expose {Object} getForm
- * 获取表单数据
- */
-export const dataExpose = [];
-
-export const dataHandle = comHandle;

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

@@ -1,173 +0,0 @@
-<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.ts

@@ -1,265 +0,0 @@
-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,
-	};
-}