tav-ui
Version:
277 lines (274 loc) • 9.51 kB
JavaScript
import { defineComponent, reactive, ref, computed, unref, watch, nextTick, onMounted, resolveComponent, openBlock, createBlock, mergeProps, withKeys, withCtx, createVNode, normalizeProps, guardReactiveProps, createCommentVNode, renderSlot, createElementBlock, Fragment, renderList, createSlots } from 'vue';
import { Form as Form$1, Row } from 'ant-design-vue';
import { dateUtil } from '../../../utils/dateUtil2.mjs';
import { deepMerge } from '../../../utils/basic2.mjs';
import { useModalContext } from '../../modal/src/hooks/useModalContext2.mjs';
import FormAction from './components/FormAction2.mjs';
import FormItem from './components/FormItem2.mjs';
import { dateItemType } from './helper2.mjs';
import useAdvanced from './hooks/useAdvanced2.mjs';
import { useAutoFocus } from './hooks/useAutoFocus2.mjs';
import { createFormContext } from './hooks/useFormContext2.mjs';
import { useFormEvents } from './hooks/useFormEvents2.mjs';
import { useFormValues } from './hooks/useFormValues2.mjs';
import { formProps } from './props2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
const _sfc_main = defineComponent({
name: "TaForm",
components: { FormItem, Form: Form$1, Row, FormAction },
props: formProps,
emits: ["advanced-change", "reset", "submit", "register"],
setup(props, { emit, attrs }) {
const formModel = reactive({});
const modalFn = useModalContext();
const advanceState = reactive({
isAdvanced: true,
hideAdvanceBtn: false,
isLoad: false,
actionSpan: 6
});
const defaultValueRef = ref({});
const isInitedDefaultRef = ref(false);
const propsRef = ref({});
const schemaRef = ref(null);
const formElRef = ref(null);
const prefixCls = "ta-basic-form";
const getProps = computed(() => {
const mergeData = { ...props, ...unref(propsRef) };
mergeData.editable = mergeData.editable || mergeData.schemas?.some((v) => v.editable !== void 0);
return mergeData;
});
const getFormClass = computed(() => {
const schemas = unref(schemaRef) || unref(getProps).schemas;
const isEditable = unref(getProps).editable;
let hasEditableFormItemNums = 0;
if (isEditable) {
hasEditableFormItemNums++;
} else {
for (const schema of schemas) {
if (Reflect.has(schema, "editable"))
hasEditableFormItemNums++;
}
}
return [
prefixCls,
{
[`${prefixCls}--compact`]: unref(getProps).compact,
[`${prefixCls}--editable`]: hasEditableFormItemNums > 0
}
];
});
const getRow = computed(() => {
const { baseRowStyle = {}, rowProps } = unref(getProps);
return {
style: baseRowStyle,
...rowProps
};
});
const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }));
const getSchema = computed(() => {
const schemas = unref(schemaRef) || unref(getProps).schemas;
for (const schema of schemas) {
const { defaultValue, component } = schema;
if (defaultValue && component && dateItemType.includes(component)) {
if (!Array.isArray(defaultValue)) {
schema.defaultValue = dateUtil(defaultValue);
} else {
const def = [];
defaultValue.forEach((item) => {
def.push(dateUtil(item));
});
schema.defaultValue = def;
}
}
}
if (unref(getProps).showAdvancedButton)
return schemas.filter((schema) => schema.component !== "Divider");
else
return schemas;
});
const { handleToggleAdvanced } = useAdvanced({
advanceState,
emit,
getProps,
getSchema,
formModel,
defaultValueRef
});
const { handleFormValues, initDefault } = useFormValues({
getProps,
defaultValueRef,
getSchema,
formModel
});
useAutoFocus({
getSchema,
getProps,
isInitedDefault: isInitedDefaultRef,
formElRef
});
const {
handleSubmit,
setFieldsValue,
clearValidate,
validate,
validateFields,
getFieldsValue,
updateSchema,
resetSchema,
appendSchemaByField,
removeSchemaByFiled,
resetFields,
scrollToField
} = useFormEvents({
emit,
getProps,
formModel,
getSchema,
defaultValueRef,
formElRef,
schemaRef,
handleFormValues
});
createFormContext({
resetAction: resetFields,
submitAction: handleSubmit
});
watch(() => unref(getProps).model, () => {
const { model } = unref(getProps);
if (!model)
return;
setFieldsValue(model);
}, {
immediate: true
});
watch(() => unref(getProps).schemas, (schemas) => {
resetSchema(schemas ?? []);
});
watch(() => getSchema.value, (schema) => {
nextTick(() => {
modalFn?.redoModalHeight?.();
});
if (unref(isInitedDefaultRef))
return;
if (schema?.length) {
initDefault();
isInitedDefaultRef.value = true;
}
});
async function setProps(formProps2) {
propsRef.value = deepMerge(unref(propsRef) || {}, formProps2);
}
function setFormModel(key, value) {
formModel[key] = value;
const { validateTrigger } = unref(getBindValue);
if (!validateTrigger || validateTrigger === "change")
validateFields([key]).catch((_) => {
});
}
function handleEnterPress(e) {
const { autoSubmitOnEnter } = unref(getProps);
if (!autoSubmitOnEnter)
return;
if (e.key === "Enter" && e.target && e.target instanceof HTMLElement) {
const target = e.target;
if (target && target.tagName && target.tagName.toUpperCase() == "INPUT")
handleSubmit();
}
}
const formActionType = {
getFieldsValue,
setFieldsValue,
resetFields,
updateSchema,
resetSchema,
setProps,
removeSchemaByFiled,
appendSchemaByField,
clearValidate,
validateFields,
validate,
submit: handleSubmit,
scrollToField
};
onMounted(() => {
initDefault();
emit("register", formActionType);
});
return {
getBindValue,
handleToggleAdvanced,
handleEnterPress,
formModel,
defaultValueRef,
advanceState,
getRow,
getProps,
formElRef,
getSchema,
formActionType,
setFormModel,
getFormClass,
getFormActionBindProps: computed(() => ({ ...getProps.value, ...advanceState })),
...formActionType
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_FormItem = resolveComponent("FormItem");
const _component_FormAction = resolveComponent("FormAction");
const _component_Row = resolveComponent("Row");
const _component_Form = resolveComponent("Form", true);
return openBlock(), createBlock(_component_Form, mergeProps(_ctx.getBindValue, {
ref: "formElRef",
class: _ctx.getFormClass,
model: _ctx.formModel,
onKeypress: withKeys(_ctx.handleEnterPress, ["enter"])
}), {
default: withCtx(() => [
createVNode(_component_Row, normalizeProps(guardReactiveProps(_ctx.getRow)), {
default: withCtx(() => [
createCommentVNode(` :style="{ 'flex-direction': getProps.layout === 'vertical' ? 'column' : 'initial' }" `),
renderSlot(_ctx.$slots, "formHeader"),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.getSchema, (schema) => {
return openBlock(), createBlock(_component_FormItem, {
key: schema.field,
"table-action": _ctx.tableAction,
"form-action-type": _ctx.formActionType,
schema,
"form-props": _ctx.getProps,
"all-default-values": _ctx.defaultValueRef,
"form-model": _ctx.formModel,
"set-form-model": _ctx.setFormModel
}, createSlots({ _: 2 }, [
renderList(Object.keys(_ctx.$slots), (item) => {
return {
name: item,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
])
};
})
]), 1032, ["table-action", "form-action-type", "schema", "form-props", "all-default-values", "form-model", "set-form-model"]);
}), 128)),
createVNode(_component_FormAction, mergeProps(_ctx.getFormActionBindProps, { onToggleAdvanced: _ctx.handleToggleAdvanced }), createSlots({ _: 2 }, [
renderList(["resetBefore", "submitBefore", "advanceBefore", "advanceAfter"], (item) => {
return {
name: item,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
])
};
})
]), 1040, ["onToggleAdvanced"]),
renderSlot(_ctx.$slots, "formFooter")
]),
_: 3
}, 16)
]),
_: 3
}, 16, ["class", "model", "onKeypress"]);
}
var Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/form/src/form.vue"]]);
export { Form as default };
//# sourceMappingURL=form2.mjs.map