@oiij/naive-ui/dist/components/preset-form/PresetForm.js

Some Composable Functions And Components for Vue 3

import { useNaiveForm } from "../../composables/useNaiveForm.js";
import PresetInput_default from "../preset-input/PresetInput.js";
import "../preset-input/index.js";
import { mergeRule } from "./_utils.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useTemplateRef, withCtx } from "vue";
import { NButton, NCollapseTransition, NDivider, NForm, NFormItem, NGi, NGrid } from "naive-ui";

//#region src/components/preset-form/PresetForm.vue
const _sfc_main = /* @__PURE__ */ defineComponent({
	__name: "PresetForm",
	props: {
		options: {},
		values: {},
		rules: {},
		clearRules: {},
		formProps: {},
		gridProps: {}
	},
	emits: ["validated"],
	setup(__props, { expose: __expose, emit: __emit }) {
		const emit = __emit;
		const { formValue, formRules, formRef, formProps: _formProps, setValue, validate, resetValidation, resetForm, reset, clear, onValidated } = useNaiveForm(useTemplateRef("form-ref"), __props.values, {
			rules: __props.rules,
			clearRules: __props.clearRules
		});
		onValidated((value) => {
			emit("validated", value);
		});
		const filterCollapsed = ref(false);
		const _options = computed(() => {
			return __props.options?.filter((f) => typeof f.hidden === "function" ? !f.hidden() : !f.hidden).filter((f) => typeof f.collapsed === "function" ? !f.collapsed() : !f.collapsed);
		});
		const _collapsedOptions = computed(() => {
			return __props.options?.filter((f) => typeof f.hidden === "function" ? !f.hidden() : !f.hidden).filter((f) => typeof f.collapsed === "function" ? !f.collapsed() : f.collapsed);
		});
		function onPresetInputUpdate(val, key) {
			if (key) setValue({ [key]: val });
		}
		const expose = {
			formRef,
			formValue,
			formRules,
			formProps: _formProps,
			setValue,
			validate,
			resetValidation,
			resetForm,
			reset,
			clear,
			onValidated
		};
		const templateBind = computed(() => {
			return {
				...expose,
				formRef: toValue(formRef),
				formValue: toValue(formValue),
				formRules: toValue(formRules),
				formProps: toValue(_formProps)
			};
		});
		__expose(expose);
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(NForm), mergeProps({
				ref: "form-ref",
				model: unref(formValue),
				rules: unref(formRules)
			}, __props.formProps), {
				default: withCtx(() => [
					renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(templateBind.value))),
					renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(templateBind.value)), () => [_options.value && _options.value.length > 0 ? (openBlock(), createBlock(unref(NGrid), normalizeProps(mergeProps({ key: 0 }, __props.gridProps)), {
						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_options.value, ({ key, label, required, span, rule, itemProps: { offset, span: _span, suffix, ..._itemProps } = {}, render, ...opt }, _index) => {
							return openBlock(), createBlock(unref(NGi), mergeProps({
								key: _index,
								span: typeof span === "function" ? span() : span ?? _span
							}, { ref_for: true }, {
								offset,
								suffix
							}), {
								default: withCtx(({ overflow }) => [createVNode(unref(NFormItem), mergeProps({
									label: typeof label === "function" ? label() : label,
									path: typeof key === "string" ? key : void 0,
									rule: unref(mergeRule)({
										key,
										label,
										required,
										rule
									})
								}, { ref_for: true }, _itemProps), {
									default: withCtx(() => [render ? (openBlock(), createBlock(resolveDynamicComponent(render({
										...expose,
										overflow
									})), { key: 0 })) : (openBlock(), createBlock(unref(PresetInput_default), {
										key: 1,
										options: opt,
										value: key ? unref(formValue)[key] : void 0,
										"onUpdate:value": (val) => onPresetInputUpdate(val, key)
									}, null, 8, [
										"options",
										"value",
										"onUpdate:value"
									]))]),
									_: 2
								}, 1040, [
									"label",
									"path",
									"rule"
								])]),
								_: 2
							}, 1040, ["span"]);
						}), 128))]),
						_: 1
					}, 16)) : createCommentVNode("v-if", true), _collapsedOptions.value && _collapsedOptions.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(NDivider), { style: { margin: "5px 0" } }, {
						default: withCtx(() => [createVNode(unref(NButton), {
							size: "tiny",
							onClick: _cache[0] || (_cache[0] = ($event) => filterCollapsed.value = !filterCollapsed.value)
						}, {
							default: withCtx(() => [createTextVNode(toDisplayString(filterCollapsed.value ? "折叠" : "展开"), 1)]),
							_: 1
						})]),
						_: 1
					}), createVNode(unref(NCollapseTransition), { show: filterCollapsed.value }, {
						default: withCtx(() => [createVNode(unref(NGrid), normalizeProps(guardReactiveProps(__props.gridProps)), {
							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_collapsedOptions.value, ({ key, label, required, span, rule, itemProps: { offset, span: _span, suffix, ..._itemProps } = {}, render, ...opt }, _index) => {
								return openBlock(), createBlock(unref(NGi), mergeProps({
									key: _index,
									span: typeof span === "function" ? span() : span ?? _span
								}, { ref_for: true }, {
									offset,
									suffix
								}), {
									default: withCtx(({ overflow }) => [createVNode(unref(NFormItem), mergeProps({
										label: typeof label === "function" ? label() : label,
										path: typeof key === "string" ? key : void 0,
										rule: unref(mergeRule)({
											key,
											label,
											required,
											rule
										})
									}, { ref_for: true }, _itemProps), {
										default: withCtx(() => [render ? (openBlock(), createBlock(resolveDynamicComponent(render({
											...expose,
											overflow
										})), { key: 0 })) : (openBlock(), createBlock(unref(PresetInput_default), {
											key: 1,
											options: opt,
											value: key ? unref(formValue)[key] : void 0,
											"onUpdate:value": (val) => onPresetInputUpdate(val, key)
										}, null, 8, [
											"options",
											"value",
											"onUpdate:value"
										]))]),
										_: 2
									}, 1040, [
										"label",
										"path",
										"rule"
									])]),
									_: 2
								}, 1040, ["span"]);
							}), 128))]),
							_: 1
						}, 16)]),
						_: 1
					}, 8, ["show"])], 64)) : createCommentVNode("v-if", true)]),
					renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(templateBind.value)))
				]),
				_: 3
			}, 16, ["model", "rules"]);
		};
	}
});
var PresetForm_default = _sfc_main;

//#endregion
export { PresetForm_default as default };