@schemx/vue 0.2.0 → 0.2.1

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, 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);
@@ -86,13 +88,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;
 }
@@ -208,14 +215,16 @@ 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 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;
 }
@@ -356,138 +365,163 @@ 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 = () => {
+      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")
+      }, [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) => {
@@ -568,7 +602,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    createConfigContext(
+    createFormConfigContext(
       omit(props, [
         "form",
         "modelValue",
@@ -607,6 +641,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (_a = props.onFieldsChange) == null ? void 0 : _a.call(props, changedPaths, allPaths);
       }
     });
+    createFormContext(form);
     watch(
       () => props.schemas,
       (schemas) => {
@@ -698,16 +733,21 @@ export {
   FormGroup,
   FormItem,
   WithRemoteOptions,
+  createFieldContext,
+  createFormConfigContext,
+  createFormContext,
   SchemxFormExport as default,
   rendererRegistry,
   SchemxFormExport as schemxForm,
-  useConfigContext,
   useDictionary,
   useEffect,
   useField,
   useFieldContext,
   useForm,
+  useFormConfigContext,
   useFormContext,
+  useStableRef,
+  useViewSchemas,
   useWatch,
   useWatchAll,
   useWatchField,