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