@schemx/vue 1.0.0-next.0 → 1.0.0-next.1

package/dist/index.mjs

@@ -1,9 +1,10 @@
 import "./style.css";
-import { getCurrentInstance, inject, onScopeDispose, provide, onUnmounted, shallowRef, computed, ref, onMounted, watchEffect, defineComponent, watch, createVNode, h, toRef, createTextVNode, reactive, openBlock, createElementBlock, normalizeStyle, normalizeClass, Fragment, renderList, unref, createBlock, createSlots, withCtx, renderSlot, mergeProps } from "vue";
-import classnames from "classnames";
-import { createRendererRegistry, createValidationRuleRegistry, mergeSchemxConfig, createForm, createField, createWatch, createEffect, isSchemxSchemas, defaultSchemxConfigKeys } from "@schemx/core";
+import { getCurrentInstance, inject, onScopeDispose, provide, onUnmounted, shallowRef, computed, ref, onMounted, watchEffect, defineComponent, watch, createVNode, h, createTextVNode, mergeProps, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderList, unref, createBlock, createSlots, withCtx, renderSlot } from "vue";
+import { createValidationRuleRegistry, mergeSchemxConfig, createForm, createField, createWatch, isViewGroupSchema, isSchemxViewFieldSchema, isSchemxSchemas, defaultSchemxConfigKeys } from "@schemx/core";
 export * from "@schemx/core";
+import classnames from "classnames";
 import { pick } from "es-toolkit";
+import { createRendererRegistry } from "@schemx/core/adapter";
 const SCHEMX_APP_CONFIG_KEY = Symbol("schemx:app-config");
 const EMPTY_SCHEMX_CONFIG = Object.freeze({
   schemaConfig: Object.freeze({}),
@@ -57,8 +58,7 @@ function getUseFormSchemxConfig(options) {
     validatorAdapters = [],
     defaultRendererType = void 0,
     rendererRegistry: rendererRegistry2 = void 0,
-    validationRuleRegistry: validationRuleRegistry2 = void 0,
-    ...rest
+    validationRuleRegistry: validationRuleRegistry2 = void 0
   } = options;
   return {
     schemaConfig,
@@ -174,13 +174,9 @@ function useWatchFields(names, callback, options) {
 function useWatchAll(callback, options) {
   return useWatch(callback, options);
 }
-function useEffect(callback) {
-  const dispose = createEffect(callback);
-  onUnmounted(dispose);
-  return dispose;
-}
 function normalizeError(err) {
-  if (err instanceof Error) return err;
+  if (err instanceof Error)
+    return err;
   return new Error(String(err));
 }
 const useDictionary = (options, fieldName) => {
@@ -229,9 +225,11 @@ const useDictionary = (options, fieldName) => {
       error.value = void 0;
       const currentCount = ++requestCount;
       const res = await executeWithRetry(formValues);
-      if (currentCount !== requestCount) return;
+      if (currentCount !== requestCount)
+        return;
       const formatted = await format(res);
-      if (currentCount !== requestCount) return;
+      if (currentCount !== requestCount)
+        return;
       list.value = formatted;
       error.value = void 0;
       if (typeof options.onSuccess === "function") {
@@ -289,7 +287,8 @@ function useFormConfigContext() {
 const isShallowEqual = (a, b) => {
   const keysA = Object.keys(a);
   const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
+  if (keysA.length !== keysB.length)
+    return false;
   return keysA.every((key) => a[key] === b[key]);
 };
 function useStableRef(factory) {
@@ -313,13 +312,17 @@ function useViewSchemas(form) {
   return viewSchemas;
 }
 function isValidTrigger(v) {
-  if (v === void 0) return false;
-  if (Array.isArray(v) && v.length === 0) return false;
+  if (v === void 0)
+    return false;
+  if (Array.isArray(v) && v.length === 0)
+    return false;
   return true;
 }
 function mergeTrigger(columnTrigger, contextTrigger, defaultTrigger) {
-  if (isValidTrigger(columnTrigger)) return columnTrigger;
-  if (isValidTrigger(contextTrigger)) return contextTrigger;
+  if (isValidTrigger(columnTrigger))
+    return columnTrigger;
+  if (isValidTrigger(contextTrigger))
+    return contextTrigger;
   return defaultTrigger;
 }
 function normalizeTrigger(t) {
@@ -334,7 +337,8 @@ function normalizeTrigger(t) {
   return map[t] ?? "submit";
 }
 function shouldValidateOn(event, trigger) {
-  if (!trigger) return false;
+  if (!trigger)
+    return false;
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
   return triggers.some((t) => normalizeTrigger(t) === event);
 }
@@ -347,17 +351,21 @@ const kebabToCamel = (str) => {
   return str.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
 };
 const normalizeToKebab = (str) => {
-  if (isCamelCase(str)) return camelToKebab(str);
+  if (isCamelCase(str))
+    return camelToKebab(str);
   return str;
 };
 const normalizeToCamel = (str) => {
-  if (isKebabCase(str)) return kebabToCamel(str);
+  if (isKebabCase(str))
+    return kebabToCamel(str);
   return str;
 };
 const resolveSlot = (slots, name) => {
-  if (slots[name]) return slots[name];
+  if (slots[name])
+    return slots[name];
   const alt = isCamelCase(name) ? camelToKebab(name) : isKebabCase(name) ? kebabToCamel(name) : void 0;
-  if (alt && slots[alt]) return slots[alt];
+  if (alt && slots[alt])
+    return slots[alt];
   return void 0;
 };
 const extractChildSlots = (fieldName, allSlots) => {
@@ -420,7 +428,7 @@ const FormGroup = /* @__PURE__ */ defineComponent((props, {
       "style": !destroyOnCollapse && isCollapsed ? {
         display: "none"
       } : void 0
-    }, [schema.children.map((child) => createVNode(FormItem, {
+    }, [schema.children.map((child) => createVNode(FormItem$1, {
       "key": child.key,
       "schema": child
     }, slots))]);
@@ -467,9 +475,105 @@ const FormGroup = /* @__PURE__ */ defineComponent((props, {
     }
   }
 });
+const FormGroup$1 = FormGroup;
 const normalizeId = (key) => {
   return String(key).replace(/[^a-zA-Z0-9_-]/g, "-");
 };
+function createFormItemSlotRenderers(options) {
+  const {
+    schemaRef,
+    field,
+    form,
+    formContext,
+    componentProps,
+    slots
+  } = options;
+  const renderRequired = () => {
+    const showRequiredMark = schemaRef.value.showRequiredMark ?? Boolean(schemaRef.value.required);
+    if (!showRequiredMark || schemaRef.value.disabled || schemaRef.value.readonly) {
+      return null;
+    }
+    return createVNode("span", {
+      "class": "schemx-item__required"
+    }, [createTextVNode("*")]);
+  };
+  const createSlotProps = (additionalProps = {}) => {
+    return {
+      ...componentProps.value,
+      value: field.value.value,
+      ...additionalProps
+    };
+  };
+  const renderFieldSlot = (suffix) => {
+    const slot = resolveSlot(slots, `${schemaRef.value.name}${suffix}`);
+    return (slot == null ? void 0 : slot(createSlotProps())) ?? null;
+  };
+  const renderLabel = () => {
+    const labelSlot = resolveSlot(slots, `${schemaRef.value.name}Label`);
+    if (labelSlot) {
+      return labelSlot(schemaRef.value);
+    }
+    const labelAlign = schemaRef.value.labelAlign || formContext.schemaConfig.labelAlign;
+    const labelWidth = schemaRef.value.labelWidth || formContext.schemaConfig.labelWidth;
+    const colon = schemaRef.value.colon ?? formContext.schemaConfig.colon;
+    return createVNode("label", {
+      "class": "schemx-item__label",
+      "style": {
+        width: labelWidth,
+        textAlign: labelAlign
+      }
+    }, [renderRequired(), createVNode("span", {
+      "class": "schemx-item__label-text"
+    }, [schemaRef.value.label, colon ? ":" : ""])]);
+  };
+  const renderBefore = () => renderFieldSlot("Before");
+  const renderContent = () => {
+    const component = form.getRenderer(schemaRef.value.componentType);
+    if (!component) {
+      throw new Error(`[schemx] Can not find component renderer of "${schemaRef.value.componentType}".`);
+    }
+    const childSlots = extractChildSlots(normalizeNameKey(schemaRef.value.name), slots);
+    const columnElement = h(component, componentProps.value, childSlots);
+    const contentSlot = resolveSlot(slots, `${schemaRef.value.name}Content`);
+    if (contentSlot) {
+      return contentSlot(createSlotProps({
+        columnElement
+      }));
+    }
+    return createVNode("div", {
+      "class": "schemx-item__control"
+    }, [columnElement]);
+  };
+  const renderAfter = () => renderFieldSlot("After");
+  const renderError = () => {
+    const errorSlot = resolveSlot(slots, `${schemaRef.value.name}Error`);
+    if (errorSlot) {
+      return errorSlot(createSlotProps({
+        errors: field.errors.value
+      }));
+    }
+    if (field.errors.value.length === 0) {
+      return null;
+    }
+    return createVNode("div", {
+      "class": "schemx-item__error"
+    }, [field.errors.value[0]]);
+  };
+  return {
+    createSlotProps,
+    renderAfter,
+    renderBefore,
+    renderContent,
+    renderError,
+    renderLabel
+  };
+}
+function normalizeNameKey(name) {
+  if (Array.isArray(name)) {
+    return name.map((part) => String(part)).join(".");
+  }
+  return String(name);
+}
 const FormItem = /* @__PURE__ */ defineComponent({
   name: "SchemxItem",
   props: {
@@ -483,8 +587,8 @@ const FormItem = /* @__PURE__ */ defineComponent({
   }) {
     return () => {
       const schema = props.schema;
-      if (isViewGroupSchema$1(schema)) {
-        return h(FormGroup, {
+      if (isViewGroupSchema(schema)) {
+        return h(FormGroup$1, {
           schema
         }, slots);
       }
@@ -496,6 +600,7 @@ const FormItem = /* @__PURE__ */ defineComponent({
 });
 const FieldFormItem = /* @__PURE__ */ defineComponent({
   name: "SchemxFieldItem",
+  inheritAttrs: false,
   props: {
     schema: {
       type: Object,
@@ -503,145 +608,120 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
     }
   },
   setup(props, {
+    attrs,
     slots
   }) {
-    const schemaRef = toRef(props, "schema");
     const form = useFormContext();
+    const inputSchema = props.schema;
+    const schemaVersion = shallowRef(0);
+    const disposeSchemaEffect = form.effect(() => {
+      form.getViewSchemas();
+      schemaVersion.value++;
+    });
+    onUnmounted(disposeSchemaEffect);
+    const schemaRef = computed(() => {
+      void schemaVersion.value;
+      const latestSchema = form.getViewSchemas().find((viewSchema) => viewSchema.key === inputSchema.key);
+      return latestSchema && isSchemxViewFieldSchema(latestSchema) ? latestSchema : inputSchema;
+    });
     const formContext = useFormConfigContext();
-    const schema = () => schemaRef.value;
-    const field = useField(schema().name);
+    const field = useField(schemaRef.value.name);
     createFieldContext(field);
-    const trigger = computed(() => mergeTrigger(schema().validationTrigger, formContext.schemaConfig.validationTrigger, "onChange"));
+    const trigger = computed(() => mergeTrigger(schemaRef.value.validationTrigger, formContext.schemaConfig.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 && (Boolean(schema().required) || hasRules);
+      const isOperate = schemaRef.value.visible && !schemaRef.value.readonly && !schemaRef.value.disabled;
+      const rules = schemaRef.value.rules;
+      const hasRules = Array.isArray(rules) ? (rules == null ? void 0 : rules.length) > 0 : !!schemaRef.value.rules;
+      return isOperate && (Boolean(schemaRef.value.required) || 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);
+      (_b = (_a = schemaRef.value.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);
+      (_b = (_a = schemaRef.value.componentProps) == null ? void 0 : _a.onBlur) == null ? void 0 : _b.call(_a, v);
       if (canVerified.value && shouldValidateOn("blur", trigger.value)) {
         field.validate();
       }
     };
+    const handleValueUpdate = (v) => {
+      field.setValue(v);
+    };
     const componentProps = useStableRef(() => {
-      const currentSchema = schema();
+      const currentSchema = schemaRef.value;
+      const currentComponentProps = currentSchema.componentProps ?? {};
+      const formItemProps = {
+        name: currentSchema.name,
+        label: currentSchema.label,
+        componentType: currentSchema.componentType,
+        ...currentComponentProps.formItemProps
+      };
       return {
-        ...currentSchema.componentProps,
-        readonly: currentSchema.readonly,
+        ...currentComponentProps,
+        value: field.value.value,
         disabled: currentSchema.disabled,
+        readonly: currentSchema.readonly,
+        readonlyPlaceholder: currentSchema.readonlyPlaceholder,
         placeholder: currentSchema.placeholder,
-        formItemProps: currentSchema,
-        value: field.getValue(),
+        formItemProps: {
+          ...formItemProps,
+          disabled: currentSchema.disabled,
+          readonly: currentSchema.readonly,
+          readonlyPlaceholder: currentSchema.readonlyPlaceholder,
+          placeholder: currentSchema.placeholder
+        },
         onChange: handleChange,
         onBlur: handleBlur,
-        "onUpdate:value": (v) => field.setValue(v)
+        "onUpdate:value": handleValueUpdate
       };
     });
-    const renderRequired = () => {
-      const showRequiredMark = schema().showRequiredMark ?? Boolean(schema().required);
-      if (!showRequiredMark || 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.schemaConfig.labelAlign;
-      const labelWidth = schema().labelWidth || formContext.schemaConfig.labelWidth;
-      const colon = schema().colon ?? formContext.schemaConfig.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.errors.value
-        });
-      }
-      if (field.errors.value.length === 0) {
-        return null;
-      }
-      return createVNode("div", {
-        "class": "schemx-item__error"
-      }, [field.errors.value[0]]);
-    };
+    const {
+      createSlotProps,
+      renderAfter,
+      renderBefore,
+      renderContent,
+      renderError,
+      renderLabel
+    } = createFormItemSlotRenderers({
+      schemaRef,
+      field,
+      form,
+      formContext,
+      componentProps,
+      slots
+    });
     return () => {
-      if (!schema().visible) {
+      if (!schemaRef.value.visible) {
         return null;
       }
-      const itemSlot = resolveSlot(slots, normalizeNameKey(schema().name));
+      const itemSlot = resolveSlot(slots, normalizeNameKey(schemaRef.value.name));
       if (itemSlot) {
-        return itemSlot(schema());
+        return itemSlot(createSlotProps());
       }
-      const labelPosition = schema().labelPosition || formContext.schemaConfig.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
+      const labelPosition = schemaRef.value.labelPosition || formContext.schemaConfig.labelPosition;
+      return createVNode("div", mergeProps(attrs, {
+        "class": classnames("schemx-item-wrapper", attrs.class),
+        "style": [attrs.style, schemaRef.value.style]
+      }), [createVNode("div", {
+        "class": classnames("schemx-item", `schemx-item--label-${labelPosition}`, schemaRef.value.class, {
+          "is-readonly": schemaRef.value.readonly,
+          "is-disabled": schemaRef.value.disabled
         }),
         "style": {
-          ...schema().style ?? {}
+          ...schemaRef.value.style ?? {}
         }
       }, [renderLabel(), createVNode("div", {
         "class": "schemx-item__content"
-      }, [renderContent(), renderError()])])]);
+      }, [renderBefore(), renderContent(), renderAfter(), renderError()])])]);
     };
   }
 });
-const isViewGroupSchema$1 = (schema) => {
-  return "children" in schema;
-};
-const normalizeNameKey = (name) => {
-  if (Array.isArray(name)) {
-    return name.map((part) => String(part)).join(".");
-  }
-  return String(name);
-};
+const FormItem$1 = FormItem;
 function getSectionPosition(list, currentKey) {
   const currentIndex = list.findIndex((item) => item.key === currentKey);
   if (currentIndex === -1) {
@@ -665,9 +745,6 @@ function getSectionPosition(list, currentKey) {
     isLast: !hasPositionItemInSection(list, currentIndex, 1)
   };
 }
-function isViewGroupSchema(item) {
-  return !!item && "children" in item;
-}
 function isPositionItem(item) {
   return !!item && !isViewGroupSchema(item) && item.visible !== false;
 }
@@ -753,6 +830,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (_a = props.onFieldsChange) == null ? void 0 : _a.call(props, changedPaths, allPaths);
       }
     });
+    const isExternalForm = props.form !== void 0;
     createFormContext(form);
     let syncingFromModel = false;
     watch(
@@ -761,10 +839,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         syncingFromModel = true;
         form.setFieldsValue(values);
         syncingFromModel = false;
-      }
+      },
+      { deep: true }
     );
     const disposeWatch = createWatch(form, (latestSnapshot) => {
-      if (syncingFromModel) return;
+      if (syncingFromModel)
+        return;
       emit("update:modelValue", latestSnapshot);
     });
     onUnmounted(disposeWatch);
@@ -788,11 +868,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "schemx-item-wrapper--last": isLast
       };
     };
-    watchEffect(() => {
-      const nextSchemaConfig = pickSchemaConfig();
-      Object.assign(formSchemaConfig, nextSchemaConfig);
-      form.updateSchemaConfig(nextSchemaConfig);
-    });
+    watch(
+      pickSchemaConfig,
+      (nextSchemaConfig) => {
+        Object.assign(formSchemaConfig, nextSchemaConfig);
+        form.updateSchemaConfig(nextSchemaConfig);
+      },
+      { deep: false, immediate: isExternalForm }
+    );
     __expose({
       ...form
     });
@@ -802,7 +885,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(props.style)
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(viewSchemas), (schema) => {
-          return openBlock(), createBlock(unref(FormItem), {
+          return openBlock(), createBlock(unref(FormItem$1), {
             key: schema.key,
             schema,
             class: normalizeClass(getFormItemClass(schema))
@@ -831,31 +914,35 @@ const SchemxFormExport = withInstall(_sfc_main, {
     app.component("SchemxForm", _sfc_main);
   },
   /** FormItem 子组件引用 */
-  FormItem
+  FormItem: FormItem$1
 });
+const SchemxFormExport$1 = SchemxFormExport;
+function normalizeDictionary(dictionary) {
+  if (typeof dictionary === "function") {
+    return { api: dictionary };
+  }
+  return dictionary;
+}
 function WithRemoteOptions(WrappedComponent) {
   return defineComponent({
     name: `WithRemoteOptions(${WrappedComponent.name || "Anonymous"})`,
     inheritAttrs: false,
     props: {
       dict: {
-        type: Object,
-        default: void 0
-      },
-      fieldName: {
-        type: [String, Array],
+        type: [Object, Function],
         default: void 0
       }
     },
     setup(props, { attrs, slots }) {
-      const fieldName = props.fieldName ?? (props.dict ? useFieldContext().name : void 0);
-      const dictResult = props.dict ? useDictionary(props.dict, fieldName) : null;
+      const dictionary = normalizeDictionary(props.dict);
+      const fieldName = dictionary ? attrs.fieldName ?? useFieldContext().name : void 0;
+      const dictResult = dictionary ? useDictionary(dictionary, fieldName) : null;
       const childrenProps = computed(() => {
         return {
           ...attrs,
-          dict: props.dict,
-          options: props.dict ? dictResult == null ? void 0 : dictResult.list.value : attrs.options,
-          loading: props.dict ? dictResult == null ? void 0 : dictResult.loading.value : attrs.loading
+          dict: dictionary,
+          options: dictionary ? dictResult == null ? void 0 : dictResult.list.value : attrs.options,
+          loading: dictionary ? dictResult == null ? void 0 : dictResult.loading.value : attrs.loading
         };
       });
       return () => h(WrappedComponent, childrenProps.value, slots);
@@ -863,17 +950,16 @@ function WithRemoteOptions(WrappedComponent) {
   });
 }
 export {
-  FormGroup,
-  FormItem,
+  FormGroup$1 as FormGroup,
+  FormItem$1 as FormItem,
   WithRemoteOptions,
   createFieldContext,
   createFormConfigContext,
   createFormContext,
-  SchemxFormExport as default,
+  SchemxFormExport$1 as default,
   rendererRegistry,
-  SchemxFormExport as schemxForm,
+  SchemxFormExport$1 as schemxForm,
   useDictionary,
-  useEffect,
   useField,
   useFieldContext,
   useForm,