@schemx/vue 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -1,34 +1,36 @@
 import "./style.css";
-import { computed, provide, onUnmounted, inject, shallowRef, ref, onMounted, watchEffect, onScopeDispose, defineComponent, createVNode, toRef, h, createTextVNode, watch, openBlock, createElementBlock, normalizeClass, Fragment, renderList, unref, createBlock, createSlots, withCtx, renderSlot, mergeProps } from "vue";
+import { onScopeDispose, provide, inject, onUnmounted, shallowRef, computed, ref, onMounted, watchEffect, defineComponent, createVNode, h, toRef, createTextVNode, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, Fragment, renderList, unref, createBlock, createSlots, withCtx, renderSlot, mergeProps } from "vue";
 import classnames from "classnames";
 import { createRendererRegistry, createValidatorsRegistry, createForm, createField, createWatch, createEffect } from "@schemx/core";
 export * from "@schemx/core";
 import { omit } from "es-toolkit";
 const rendererRegistry = createRendererRegistry("input");
 const validatorRegistry = createValidatorsRegistry();
-const SCHEMX_INSTANCE_KEY = Symbol("SCHEMX_INSTANCE");
 function useForm(options = {}) {
-  const { ...formOptions } = options;
   const mergedOptions = {
-    ...formOptions,
-    rendererRegistry: formOptions.rendererRegistry ?? rendererRegistry,
-    validatorRegistry: formOptions.validatorRegistry ?? validatorRegistry
+    ...options,
+    rendererRegistry: options.rendererRegistry ?? rendererRegistry,
+    validatorRegistry: options.validatorRegistry ?? validatorRegistry
   };
-  const instance = computed(() => createForm(mergedOptions));
-  provide(SCHEMX_INSTANCE_KEY, instance.value);
-  onUnmounted(() => {
-    instance.value.destroy();
+  const instance = createForm(mergedOptions);
+  onScopeDispose(() => {
+    instance.destroy();
   });
-  return instance.value;
+  return instance;
+}
+const SCHEMX_FORM_INSTANCE_KEY = Symbol("schemx:instance");
+function createFormContext(instance) {
+  provide(SCHEMX_FORM_INSTANCE_KEY, instance);
 }
 function useFormContext() {
-  const instance = inject(SCHEMX_INSTANCE_KEY);
+  const instance = inject(SCHEMX_FORM_INSTANCE_KEY, null);
   if (!instance) {
-    throw new Error("useFormContext must be used within a Form");
+    throw new Error(
+      "[schemx] useFormContext() must be called inside a <SchemxForm> descendant. Ensure createFormContext(form) is called synchronously during setup()."
+    );
   }
   return instance;
 }
-const FIELD_CONTEXT_KEY = Symbol("schemx:field");
 const fieldHookCache = /* @__PURE__ */ new WeakMap();
 function createFieldHook(form, name) {
   const field = createField(form, name);
@@ -47,6 +49,7 @@ function createFieldHook(form, name) {
   });
   const pending = computed(() => fieldPending.value);
   const result = {
+    name,
     value: fieldValue,
     error,
     dirty,
@@ -86,13 +89,18 @@ const useField = (name) => {
   });
   return activeEntry.result;
 };
+const SCHEMX_FORM_FIELD_KEY = Symbol(
+  "schemx:field"
+);
 function createFieldContext(field) {
-  provide(FIELD_CONTEXT_KEY, field);
+  provide(SCHEMX_FORM_FIELD_KEY, field);
 }
 function useFieldContext() {
-  const field = inject(FIELD_CONTEXT_KEY);
+  const field = inject(SCHEMX_FORM_FIELD_KEY);
   if (!field) {
-    throw new Error("[schemx] useFieldContext() must be used inside a FormItem tree");
+    throw new Error(
+      "[schemx] useFieldContext() must be called inside a component tree where createFieldContext(field) has been called."
+    );
   }
   return field;
 }
@@ -190,7 +198,7 @@ const useDictionary = (options, fieldName) => {
     list.value = data;
   };
   if ((_a = options.dependsOn) == null ? void 0 : _a.length) {
-    useWatchFields(options.dependsOn, (_payload, latestSnapshot) => {
+    useWatchFields(options.dependsOn, (latestSnapshot, _payload) => {
       if (typeof options.onDepsChange === "function") {
         options.onDepsChange(latestSnapshot, instance);
       }
@@ -208,14 +216,27 @@ const useDictionary = (options, fieldName) => {
   });
   return { list, loading, error, loadDict, refresh, mutate };
 };
-const FORM_CONTEXT_KEY = Symbol("FormContext");
-const createConfigContext = (props) => {
-  provide(FORM_CONTEXT_KEY, props);
+const SCHEMX_FORM_CONFIG_KEY = Symbol("schemx:form-config");
+const formConfigContextOmitKey = [
+  "form",
+  "modelValue",
+  "rendererRegistry",
+  "validatorRegistry",
+  "defaultRendererType",
+  "onFinish",
+  "onFinishFailed",
+  "onValuesChange",
+  "onFieldsChange"
+];
+const createFormConfigContext = (props) => {
+  provide(SCHEMX_FORM_CONFIG_KEY, props);
 };
-function useConfigContext() {
-  const context = inject(FORM_CONTEXT_KEY);
+function useFormConfigContext() {
+  const context = inject(SCHEMX_FORM_CONFIG_KEY);
   if (!context) {
-    throw new Error("useConfigContext must be used within a Form");
+    throw new Error(
+      "[schemx] useFormConfigContext() must be called inside a <SchemxForm> descendant. Ensure createFormConfigContext(props) is called synchronously during setup()."
+    );
   }
   return context;
 }
@@ -320,6 +341,7 @@ const FormGroup = /* @__PURE__ */ defineComponent((props, {
       "class": classnames("schemx-group", {
         "schemx-group--collapsed": collapsed.value
       }, schema.class),
+      "style": schema.style,
       "data-key": schema.key
     }, [schema.label && createVNode("div", {
       "role": collapsible ? "button" : void 0,
@@ -356,138 +378,166 @@ const FormGroup = /* @__PURE__ */ defineComponent((props, {
     }
   }
 });
-const FormItem = /* @__PURE__ */ defineComponent((props, {
-  slots
-}) => {
-  const schemaRef = toRef(props, "schema");
-  if (isViewGroupSchema(schemaRef.value)) {
+const FormItem = /* @__PURE__ */ defineComponent({
+  name: "SchemxItem",
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, {
+    slots
+  }) {
     return () => {
-      return h(FormGroup, {
-        schema: schemaRef.value
+      const schema = props.schema;
+      if (isViewGroupSchema(schema)) {
+        return h(FormGroup, {
+          schema
+        }, slots);
+      }
+      return h(FieldFormItem, {
+        schema
       }, slots);
     };
   }
-  const form = useFormContext();
-  const formContext = useConfigContext();
-  const schema = () => schemaRef.value;
-  const field = useField(schema().name);
-  createFieldContext(field);
-  const trigger = computed(() => mergeTrigger(schema().validationTrigger, formContext.validationTrigger, "onChange"));
-  const canVerified = computed(() => {
-    const isOperate = schema().visible && !schema().readonly && !schema().disabled;
-    const rules = schema().rules;
-    const hasRules = Array.isArray(rules) ? (rules == null ? void 0 : rules.length) > 0 : !!schema().rules;
-    return isOperate && hasRules;
-  });
-  const handleChange = (v) => {
-    var _a, _b;
-    field.setValue(v);
-    (_b = (_a = schema().componentProps) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, v);
-    if (canVerified.value && shouldValidateOn("change", trigger.value)) {
-      field.validate();
-    }
-  };
-  const handleBlur = () => {
-    if (canVerified.value && shouldValidateOn("blur", trigger.value)) {
-      field.validate();
-    }
-  };
-  const componentProps = useStableRef(() => ({
-    ...schema().componentProps,
-    value: field.getValue(),
-    onChange: handleChange,
-    onBlur: handleBlur,
-    "onUpdate:value": (v) => field.setValue(v)
-  }));
-  const renderRequired = () => {
-    if (!schema().required || schema().disabled || schema().readonly) {
-      return null;
-    }
-    return createVNode("span", {
-      "class": "schemx-item__required"
-    }, [createTextVNode("*")]);
-  };
-  const renderLabel = () => {
-    const labelSlot = resolveSlot(slots, `${schema().name}Label`);
-    if (labelSlot) {
-      return labelSlot(schema());
-    }
-    const labelAlign = schema().labelAlign || formContext.labelAlign;
-    const labelWidth = schema().labelWidth || formContext.labelWidth;
-    const colon = schema().colon ?? formContext.colon;
-    return createVNode("label", {
-      "class": "schemx-item__label",
-      "style": {
-        width: labelWidth,
-        textAlign: labelAlign
-      }
-    }, [renderRequired(), createVNode("span", {
-      "class": "schemx-item__label-text"
-    }, [schema().label, colon ? ":" : ""])]);
-  };
-  const renderContent = () => {
-    const component = form.getRenderer(schema().componentType);
-    if (!component) {
-      throw new Error(`[schemx] Can not find component renderer of "${schema().componentType}".`);
-    }
-    const childSlots = extractChildSlots(normalizeNameKey(schema().name), slots);
-    const columnElement = h(component, componentProps.value, childSlots);
-    const contentSlot = resolveSlot(slots, `${schema().name}Content`);
-    if (contentSlot) {
-      return contentSlot({
-        ...schema(),
-        columnElement
-      });
-    }
-    return createVNode("div", {
-      "class": "schemx-item__control"
-    }, [columnElement]);
-  };
-  const renderError = () => {
-    const errorSlot = resolveSlot(slots, `${schema().name}Error`);
-    if (errorSlot) {
-      return errorSlot({
-        ...schema(),
-        errors: field.error.value
-      });
-    }
-    if (!Array.isArray(field.error.value) || field.error.value.length === 0) {
-      return null;
-    }
-    return createVNode("div", {
-      "class": "schemx-item__error"
-    }, [field.error.value[0]]);
-  };
-  return () => {
-    if (!schema().visible) {
-      return null;
-    }
-    const itemSlot = resolveSlot(slots, normalizeNameKey(schema().name));
-    if (itemSlot) {
-      return itemSlot(schema());
-    }
-    const labelPosition = schema().labelPosition || formContext.labelPosition;
-    return createVNode("div", {
-      "class": classnames("schemx-item-wrapper")
-    }, [createVNode("div", {
-      "class": classnames("schemx-item", `schemx-item--label-${labelPosition}`, schema().class, {
-        "is-readonly": schema().readonly,
-        "is-disabled": schema().disabled
-      }),
-      "style": {
-        ...schema().style ?? {}
-      }
-    }, [renderLabel(), createVNode("div", {
-      "class": "schemx-item__content"
-    }, [renderContent(), renderError()])])]);
-  };
-}, {
-  name: "SchemxItem",
+});
+const FieldFormItem = /* @__PURE__ */ defineComponent({
+  name: "SchemxFieldItem",
   props: {
     schema: {
       type: Object,
       required: true
     }
+  },
+  setup(props, {
+    slots
+  }) {
+    const schemaRef = toRef(props, "schema");
+    const form = useFormContext();
+    const formContext = useFormConfigContext();
+    const schema = () => schemaRef.value;
+    const field = useField(schema().name);
+    createFieldContext(field);
+    const trigger = computed(() => mergeTrigger(schema().validationTrigger, formContext.validationTrigger, "onChange"));
+    const canVerified = computed(() => {
+      const isOperate = schema().visible && !schema().readonly && !schema().disabled;
+      const rules = schema().rules;
+      const hasRules = Array.isArray(rules) ? (rules == null ? void 0 : rules.length) > 0 : !!schema().rules;
+      return isOperate && hasRules;
+    });
+    const handleChange = (v) => {
+      var _a, _b;
+      field.setValue(v);
+      (_b = (_a = schema().componentProps) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, v);
+      if (canVerified.value && shouldValidateOn("change", trigger.value)) {
+        field.validate();
+      }
+    };
+    const handleBlur = (v) => {
+      var _a, _b;
+      (_b = (_a = schema().componentProps) == null ? void 0 : _a.onBlur) == null ? void 0 : _b.call(_a, v);
+      if (canVerified.value && shouldValidateOn("blur", trigger.value)) {
+        field.validate();
+      }
+    };
+    const componentProps = useStableRef(() => {
+      const currentSchema = schema();
+      return {
+        ...currentSchema.componentProps,
+        readonly: currentSchema.readonly,
+        disabled: currentSchema.disabled,
+        placeholder: currentSchema.placeholder,
+        formItemProps: currentSchema,
+        value: field.getValue(),
+        onChange: handleChange,
+        onBlur: handleBlur,
+        "onUpdate:value": (v) => field.setValue(v)
+      };
+    });
+    const renderRequired = () => {
+      if (!schema().required || schema().disabled || schema().readonly) {
+        return null;
+      }
+      return createVNode("span", {
+        "class": "schemx-item__required"
+      }, [createTextVNode("*")]);
+    };
+    const renderLabel = () => {
+      const labelSlot = resolveSlot(slots, `${schema().name}Label`);
+      if (labelSlot) {
+        return labelSlot(schema());
+      }
+      const labelAlign = schema().labelAlign || formContext.labelAlign;
+      const labelWidth = schema().labelWidth || formContext.labelWidth;
+      const colon = schema().colon ?? formContext.colon;
+      return createVNode("label", {
+        "class": "schemx-item__label",
+        "style": {
+          width: labelWidth,
+          textAlign: labelAlign
+        }
+      }, [renderRequired(), createVNode("span", {
+        "class": "schemx-item__label-text"
+      }, [schema().label, colon ? ":" : ""])]);
+    };
+    const renderContent = () => {
+      const component = form.getRenderer(schema().componentType);
+      if (!component) {
+        throw new Error(`[schemx] Can not find component renderer of "${schema().componentType}".`);
+      }
+      const childSlots = extractChildSlots(normalizeNameKey(schema().name), slots);
+      const columnElement = h(component, componentProps.value, childSlots);
+      const contentSlot = resolveSlot(slots, `${schema().name}Content`);
+      if (contentSlot) {
+        return contentSlot({
+          ...schema(),
+          columnElement
+        });
+      }
+      return createVNode("div", {
+        "class": "schemx-item__control"
+      }, [columnElement]);
+    };
+    const renderError = () => {
+      const errorSlot = resolveSlot(slots, `${schema().name}Error`);
+      if (errorSlot) {
+        return errorSlot({
+          ...schema(),
+          errors: field.error.value
+        });
+      }
+      if (!Array.isArray(field.error.value) || field.error.value.length === 0) {
+        return null;
+      }
+      return createVNode("div", {
+        "class": "schemx-item__error"
+      }, [field.error.value[0]]);
+    };
+    return () => {
+      if (!schema().visible) {
+        return null;
+      }
+      const itemSlot = resolveSlot(slots, normalizeNameKey(schema().name));
+      if (itemSlot) {
+        return itemSlot(schema());
+      }
+      const labelPosition = schema().labelPosition || formContext.labelPosition;
+      return createVNode("div", {
+        "class": classnames("schemx-item-wrapper"),
+        "style": schema().style
+      }, [createVNode("div", {
+        "class": classnames("schemx-item", `schemx-item--label-${labelPosition}`, schema().class, {
+          "is-readonly": schema().readonly,
+          "is-disabled": schema().disabled
+        }),
+        "style": {
+          ...schema().style ?? {}
+        }
+      }, [renderLabel(), createVNode("div", {
+        "class": "schemx-item__content"
+      }, [renderContent(), renderError()])])]);
+    };
   }
 });
 const isViewGroupSchema = (schema) => {
@@ -540,11 +590,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "form",
   props: {
     class: { default: "" },
-    style: { default: () => ({}) },
+    style: { type: [Boolean, null, String, Object, Array], default: () => ({}) },
     required: { type: Boolean },
     readonly: { type: Boolean },
     disabled: { type: Boolean },
-    visible: { type: Boolean },
+    visible: { type: Boolean, default: true },
     labelIcon: {},
     labelAlign: {},
     labelPosition: {},
@@ -568,22 +618,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    createConfigContext(
-      omit(props, [
-        "form",
-        "modelValue",
-        "rendererRegistry",
-        "defaultRendererType",
-        "validatorRegistry",
-        "onFinish",
-        "onFinishFailed",
-        "onValuesChange",
-        "onFieldsChange"
-      ])
-    );
+    createFormConfigContext(omit(props, formConfigContextOmitKey));
     const form = props.form ? props.form : useForm({
       schemas: props.schemas,
-      initialValues: props.initialValues,
+      initialValues: Object.keys(props.modelValue).length > 0 ? props.modelValue : props.initialValues,
       rendererRegistry: props.rendererRegistry,
       defaultRendererType: props.defaultRendererType,
       validatorRegistry: props.validatorRegistry,
@@ -599,7 +637,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       onValuesChange: (changedValues, latestSnapshot) => {
         var _a;
-        emit("update:modelValue", latestSnapshot);
         (_a = props.onValuesChange) == null ? void 0 : _a.call(props, changedValues, latestSnapshot);
       },
       onFieldsChange: (changedPaths, allPaths) => {
@@ -607,6 +644,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (_a = props.onFieldsChange) == null ? void 0 : _a.call(props, changedPaths, allPaths);
       }
     });
+    createFormContext(form);
+    let syncingFromModel = false;
+    watch(
+      () => props.modelValue,
+      (values) => {
+        syncingFromModel = true;
+        form.setFieldsValue(values);
+        syncingFromModel = false;
+      }
+    );
+    const disposeWatch = createWatch(form, (latestSnapshot) => {
+      if (syncingFromModel) return;
+      emit("update:modelValue", latestSnapshot);
+    });
+    onUnmounted(disposeWatch);
     watch(
       () => props.schemas,
       (schemas) => {
@@ -633,7 +685,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["schemx", props.class])
+        class: normalizeClass(["schemx", props.class]),
+        style: normalizeStyle(props.style)
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(viewSchemas), (schema) => {
           return openBlock(), createBlock(unref(FormItem), {
@@ -651,7 +704,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             })
           ]), 1032, ["schema", "class"]);
         }), 128))
-      ], 2);
+      ], 6);
     };
   }
 });
@@ -681,7 +734,8 @@ function WithRemoteOptions(WrappedComponent) {
       }
     },
     setup(props, { attrs, slots }) {
-      const dictResult = props.dict ? useDictionary(props.dict, props.fieldName) : null;
+      const fieldName = props.fieldName ?? (props.dict ? useFieldContext().name : void 0);
+      const dictResult = props.dict ? useDictionary(props.dict, fieldName) : null;
       const childrenProps = computed(() => {
         return {
           ...attrs,
@@ -698,16 +752,22 @@ export {
   FormGroup,
   FormItem,
   WithRemoteOptions,
+  createFieldContext,
+  createFormConfigContext,
+  createFormContext,
   SchemxFormExport as default,
+  formConfigContextOmitKey,
   rendererRegistry,
   SchemxFormExport as schemxForm,
-  useConfigContext,
   useDictionary,
   useEffect,
   useField,
   useFieldContext,
   useForm,
+  useFormConfigContext,
   useFormContext,
+  useStableRef,
+  useViewSchemas,
   useWatch,
   useWatchAll,
   useWatchField,