@schemx/vue 0.2.3 → 1.0.0-next.0

package/dist/index.mjs

@@ -1,16 +1,49 @@
 import "./style.css";
-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 { 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, createValidatorsRegistry, createForm, createField, createWatch, createEffect } from "@schemx/core";
+import { createRendererRegistry, createValidationRuleRegistry, mergeSchemxConfig, createForm, createField, createWatch, createEffect, isSchemxSchemas, defaultSchemxConfigKeys } from "@schemx/core";
 export * from "@schemx/core";
-import { omit } from "es-toolkit";
+import { pick } from "es-toolkit";
+const SCHEMX_APP_CONFIG_KEY = Symbol("schemx:app-config");
+const EMPTY_SCHEMX_CONFIG = Object.freeze({
+  schemaConfig: Object.freeze({}),
+  validatorAdapters: Object.freeze([])
+});
+function normalizeSchemxAppConfig(config) {
+  const schemaConfig = Object.freeze({ ...config.schemaConfig ?? {} });
+  const validatorAdapters = Object.freeze([...config.validatorAdapters ?? []]);
+  return Object.freeze({
+    schemaConfig,
+    validatorAdapters,
+    defaultRendererType: config.defaultRendererType,
+    rendererRegistry: config.rendererRegistry,
+    validationRuleRegistry: config.validationRuleRegistry
+  });
+}
+function provideSchemxAppConfig(app, config = {}) {
+  const normalizedConfig = normalizeSchemxAppConfig(config);
+  app.provide(SCHEMX_APP_CONFIG_KEY, normalizedConfig);
+}
+function getSchemxAppConfig() {
+  if (getCurrentInstance() === null) {
+    return EMPTY_SCHEMX_CONFIG;
+  }
+  return inject(SCHEMX_APP_CONFIG_KEY, EMPTY_SCHEMX_CONFIG);
+}
 const rendererRegistry = createRendererRegistry("input");
-const validatorRegistry = createValidatorsRegistry();
+const validationRuleRegistry = createValidationRuleRegistry();
 function useForm(options = {}) {
+  const configuredOptions = mergeSchemxConfig(
+    getUseFormSchemxConfig(options),
+    getSchemxAppConfig(),
+    {
+      rendererRegistry,
+      validationRuleRegistry
+    }
+  );
   const mergedOptions = {
     ...options,
-    rendererRegistry: options.rendererRegistry ?? rendererRegistry,
-    validatorRegistry: options.validatorRegistry ?? validatorRegistry
+    ...configuredOptions
   };
   const instance = createForm(mergedOptions);
   onScopeDispose(() => {
@@ -18,6 +51,23 @@ function useForm(options = {}) {
   });
   return instance;
 }
+function getUseFormSchemxConfig(options) {
+  const {
+    schemaConfig = {},
+    validatorAdapters = [],
+    defaultRendererType = void 0,
+    rendererRegistry: rendererRegistry2 = void 0,
+    validationRuleRegistry: validationRuleRegistry2 = void 0,
+    ...rest
+  } = options;
+  return {
+    schemaConfig,
+    defaultRendererType,
+    rendererRegistry: rendererRegistry2,
+    validationRuleRegistry: validationRuleRegistry2,
+    validatorAdapters
+  };
+}
 const SCHEMX_FORM_INSTANCE_KEY = Symbol("schemx:instance");
 function createFormContext(instance) {
   provide(SCHEMX_FORM_INSTANCE_KEY, instance);
@@ -35,14 +85,14 @@ const fieldHookCache = /* @__PURE__ */ new WeakMap();
 function createFieldHook(form, name) {
   const field = createField(form, name);
   const fieldValue = shallowRef(field.getValue());
-  const fieldError = shallowRef(field.getError());
+  const fieldErrors = shallowRef(field.getErrors());
   const fieldPending = shallowRef(field.isPending());
   const dispose = field.effect(() => {
     fieldValue.value = field.getValue();
-    fieldError.value = field.getError();
+    fieldErrors.value = field.getErrors();
     fieldPending.value = field.isPending();
   });
-  const error = computed(() => fieldError.value);
+  const errors = computed(() => fieldErrors.value);
   const dirty = computed(() => {
     void fieldValue.value;
     return field.isTouched();
@@ -51,7 +101,7 @@ function createFieldHook(form, name) {
   const result = {
     name,
     value: fieldValue,
-    error,
+    errors,
     dirty,
     pending,
     ...field,
@@ -136,7 +186,7 @@ function normalizeError(err) {
 const useDictionary = (options, fieldName) => {
   var _a;
   const instance = useFormContext();
-  const list = ref([]);
+  const list = shallowRef([]);
   const loading = ref(false);
   const error = ref(void 0);
   let requestCount = 0;
@@ -144,6 +194,11 @@ const useDictionary = (options, fieldName) => {
     if (typeof (options == null ? void 0 : options.formatter) === "function") {
       return await options.formatter(res, instance);
     }
+    if (!Array.isArray(res)) {
+      throw new Error(
+        "[schemx] Dictionary api must return an array when formatter is not provided."
+      );
+    }
     return res;
   };
   const executeWithRetry = async (formValues) => {
@@ -216,18 +271,9 @@ const useDictionary = (options, fieldName) => {
   });
   return { list, loading, error, loadDict, refresh, mutate };
 };
-const SCHEMX_FORM_CONFIG_KEY = Symbol("schemx:form-config");
-const formConfigContextOmitKey = [
-  "form",
-  "modelValue",
-  "rendererRegistry",
-  "validatorRegistry",
-  "defaultRendererType",
-  "onFinish",
-  "onFinishFailed",
-  "onValuesChange",
-  "onFieldsChange"
-];
+const SCHEMX_FORM_CONFIG_KEY = Symbol(
+  "schemx:form-config"
+);
 const createFormConfigContext = (props) => {
   provide(SCHEMX_FORM_CONFIG_KEY, props);
 };
@@ -257,7 +303,9 @@ function useStableRef(factory) {
   return stableRef;
 }
 function useViewSchemas(form) {
-  const viewSchemas = shallowRef(form.getViewSchemas());
+  const viewSchemas = shallowRef(
+    form.getViewSchemas()
+  );
   const unsubscribe = form.subscribeViewSchemas((nextSchemas) => {
     viewSchemas.value = nextSchemas;
   });
@@ -328,30 +376,76 @@ const extractChildSlots = (fieldName, allSlots) => {
 const FormGroup = /* @__PURE__ */ defineComponent((props, {
   slots
 }) => {
-  const collapsed = ref(Boolean(props.schema.defaultCollapsed));
+  var _a;
+  const internalCollapsed = ref(Boolean(props.schema.defaultCollapsed));
+  const collapsed = computed(() => props.schema.collapsed ?? internalCollapsed.value);
+  const componentId = ((_a = getCurrentInstance()) == null ? void 0 : _a.uid) ?? 0;
+  watch(() => props.schema.collapsed, (nextCollapsed, previousCollapsed) => {
+    if (nextCollapsed !== void 0) {
+      internalCollapsed.value = nextCollapsed;
+    } else if (previousCollapsed !== void 0) {
+      internalCollapsed.value = previousCollapsed;
+    }
+  });
   const toggle = () => {
-    if (props.schema.collapsible) {
-      collapsed.value = !collapsed.value;
+    var _a2, _b;
+    if (!props.schema.collapsible || props.schema.disabled) {
+      return;
+    }
+    const nextCollapsed = !collapsed.value;
+    if (props.schema.collapsed === void 0) {
+      internalCollapsed.value = nextCollapsed;
     }
+    (_b = (_a2 = props.schema).onCollapsedChange) == null ? void 0 : _b.call(_a2, nextCollapsed);
   };
   return () => {
+    var _a2;
     const schema = props.schema;
+    if (schema.visible === false) {
+      return null;
+    }
     const collapsible = Boolean(schema.collapsible);
+    const isCollapsed = collapsed.value;
+    const destroyOnCollapse = schema.destroyOnCollapse ?? true;
+    const uniqueId = ((_a2 = schema.debug) == null ? void 0 : _a2.runtimeNodeId) ?? `local-${componentId}`;
+    const idBase = `schemx-group-${uniqueId}-${normalizeId(schema.key)}`;
+    const headerId = `${idBase}-header`;
+    const bodyId = `${idBase}-body`;
+    const body = createVNode("div", {
+      "id": bodyId,
+      "role": "group",
+      "aria-labelledby": schema.label ? headerId : void 0,
+      "aria-hidden": isCollapsed || void 0,
+      "class": "schemx-group__body",
+      "style": !destroyOnCollapse && isCollapsed ? {
+        display: "none"
+      } : void 0
+    }, [schema.children.map((child) => createVNode(FormItem, {
+      "key": child.key,
+      "schema": child
+    }, slots))]);
     return createVNode("div", {
       "class": classnames("schemx-group", {
-        "schemx-group--collapsed": collapsed.value
+        "schemx-group--collapsed": isCollapsed,
+        "is-readonly": schema.readonly,
+        "is-disabled": schema.disabled
       }, schema.class),
       "style": schema.style,
-      "data-key": schema.key
+      "data-key": schema.key,
+      "aria-disabled": schema.disabled || void 0
     }, [schema.label && createVNode("div", {
+      "id": headerId,
       "role": collapsible ? "button" : void 0,
-      "tabindex": collapsible ? 0 : void 0,
+      "tabindex": collapsible ? schema.disabled ? -1 : 0 : void 0,
+      "aria-expanded": collapsible ? !isCollapsed : void 0,
+      "aria-controls": collapsible ? bodyId : void 0,
+      "aria-disabled": collapsible ? schema.disabled || void 0 : void 0,
       "class": classnames("schemx-group__header", {
-        "schemx-group__header--clickable": collapsible
+        "schemx-group__header--clickable": collapsible && !schema.disabled
       }),
       "onClick": toggle,
       "onKeydown": (e) => {
-        if (e.key === "Enter" || e.key === " ") {
+        if (!schema.disabled && (e.key === "Enter" || e.key === " ")) {
           e.preventDefault();
           toggle();
         }
@@ -360,14 +454,9 @@ const FormGroup = /* @__PURE__ */ defineComponent((props, {
       "class": "schemx-group__title"
     }, [schema.label]), collapsible && createVNode("span", {
       "class": classnames("schemx-group__arrow", {
-        "schemx-group__arrow--down": !collapsed.value
+        "schemx-group__arrow--down": !isCollapsed
       })
-    }, null)]), !collapsed.value && createVNode("div", {
-      "class": "schemx-group__body"
-    }, [schema.children.map((child) => createVNode(FormItem, {
-      "key": child.key,
-      "schema": child
-    }, slots))])]);
+    }, null)]), destroyOnCollapse ? !isCollapsed && body : body]);
   };
 }, {
   name: "SchemxGroup",
@@ -378,6 +467,9 @@ const FormGroup = /* @__PURE__ */ defineComponent((props, {
     }
   }
 });
+const normalizeId = (key) => {
+  return String(key).replace(/[^a-zA-Z0-9_-]/g, "-");
+};
 const FormItem = /* @__PURE__ */ defineComponent({
   name: "SchemxItem",
   props: {
@@ -391,7 +483,7 @@ const FormItem = /* @__PURE__ */ defineComponent({
   }) {
     return () => {
       const schema = props.schema;
-      if (isViewGroupSchema(schema)) {
+      if (isViewGroupSchema$1(schema)) {
         return h(FormGroup, {
           schema
         }, slots);
@@ -419,12 +511,12 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
     const schema = () => schemaRef.value;
     const field = useField(schema().name);
     createFieldContext(field);
-    const trigger = computed(() => mergeTrigger(schema().validationTrigger, formContext.validationTrigger, "onChange"));
+    const trigger = computed(() => mergeTrigger(schema().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 && hasRules;
+      return isOperate && (Boolean(schema().required) || hasRules);
     });
     const handleChange = (v) => {
       var _a, _b;
@@ -456,7 +548,8 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
       };
     });
     const renderRequired = () => {
-      if (!schema().required || schema().disabled || schema().readonly) {
+      const showRequiredMark = schema().showRequiredMark ?? Boolean(schema().required);
+      if (!showRequiredMark || schema().disabled || schema().readonly) {
         return null;
       }
       return createVNode("span", {
@@ -468,9 +561,9 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
       if (labelSlot) {
         return labelSlot(schema());
       }
-      const labelAlign = schema().labelAlign || formContext.labelAlign;
-      const labelWidth = schema().labelWidth || formContext.labelWidth;
-      const colon = schema().colon ?? formContext.colon;
+      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": {
@@ -504,15 +597,15 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
       if (errorSlot) {
         return errorSlot({
           ...schema(),
-          errors: field.error.value
+          errors: field.errors.value
         });
       }
-      if (!Array.isArray(field.error.value) || field.error.value.length === 0) {
+      if (field.errors.value.length === 0) {
         return null;
       }
       return createVNode("div", {
         "class": "schemx-item__error"
-      }, [field.error.value[0]]);
+      }, [field.errors.value[0]]);
     };
     return () => {
       if (!schema().visible) {
@@ -522,7 +615,7 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
       if (itemSlot) {
         return itemSlot(schema());
       }
-      const labelPosition = schema().labelPosition || formContext.labelPosition;
+      const labelPosition = schema().labelPosition || formContext.schemaConfig.labelPosition;
       return createVNode("div", {
         "class": classnames("schemx-item-wrapper"),
         "style": schema().style
@@ -540,8 +633,8 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const isViewGroupSchema = (schema) => {
-  return schema.componentType === "group";
+const isViewGroupSchema$1 = (schema) => {
+  return "children" in schema;
 };
 const normalizeNameKey = (name) => {
   if (Array.isArray(name)) {
@@ -566,32 +659,54 @@ function getSectionPosition(list, currentKey) {
       isLast: false
     };
   }
-  const prevItem = findPositionItem(list, currentIndex, -1);
-  const nextItem = findPositionItem(list, currentIndex, 1);
   return {
     found: true,
-    isFirst: !prevItem,
-    isLast: !nextItem
+    isFirst: !hasPositionItemInSection(list, currentIndex, -1),
+    isLast: !hasPositionItemInSection(list, currentIndex, 1)
   };
 }
+function isViewGroupSchema(item) {
+  return !!item && "children" in item;
+}
 function isPositionItem(item) {
-  return !!item && item.componentType !== "group" && (!("visible" in item) || item.visible !== false);
+  return !!item && !isViewGroupSchema(item) && item.visible !== false;
 }
-function findPositionItem(list, startIndex, step) {
+function hasPositionItemInSection(list, startIndex, step) {
   for (let index = startIndex + step; index >= 0 && index < list.length; index += step) {
-    if (isPositionItem(list[index])) {
-      return list[index];
+    const item = list[index];
+    if (item.visible === false) {
+      continue;
+    }
+    if (isViewGroupSchema(item)) {
+      return false;
+    }
+    if (isPositionItem(item)) {
+      return true;
     }
   }
-  return void 0;
+  return false;
 }
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "SchemxForm" },
   __name: "form",
   props: {
+    schemas: { default: () => [] },
+    initialValues: { default: () => ({}) },
+    modelValue: { default: () => ({}) },
+    form: { default: void 0 },
     class: { default: "" },
     style: { type: [Boolean, null, String, Object, Array], default: () => ({}) },
-    required: { type: Boolean },
+    validatorAdapters: {},
+    defaultRendererType: {},
+    rendererRegistry: { default: void 0 },
+    validationRuleRegistry: { default: void 0 },
+    onRuleError: {},
+    onFinish: { type: Function, default: void 0 },
+    onFinishFailed: { type: Function, default: void 0 },
+    onValuesChange: { type: Function, default: void 0 },
+    onFieldsChange: { type: Function, default: void 0 },
+    lifecycleHooks: {},
+    required: { type: [Boolean, Object] },
     readonly: { type: Boolean },
     disabled: { type: Boolean },
     visible: { type: Boolean, default: true },
@@ -602,31 +717,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     contentAlign: {},
     validationTrigger: {},
     colon: { type: Boolean },
-    modelValue: { default: () => ({}) },
-    initialValues: { default: () => ({}) },
-    schemas: { default: () => [] },
-    form: { default: void 0 },
-    rendererRegistry: { default: void 0 },
-    defaultRendererType: {},
-    validatorRegistry: { default: void 0 },
-    onFinish: { type: Function, default: void 0 },
-    onFinishFailed: { type: Function, default: void 0 },
-    onValuesChange: { type: Function, default: void 0 },
-    onFieldsChange: { type: Function, default: void 0 }
+    showRequiredMark: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    createFormConfigContext(omit(props, formConfigContextOmitKey));
+    const pickSchemaConfig = () => {
+      return pick(props, defaultSchemxConfigKeys);
+    };
+    const formSchemaConfig = reactive(pickSchemaConfig());
+    createFormConfigContext({ schemaConfig: formSchemaConfig });
     const form = props.form ? props.form : useForm({
       schemas: props.schemas,
+      schemaConfig: pickSchemaConfig(),
       initialValues: Object.keys(props.modelValue).length > 0 ? props.modelValue : props.initialValues,
       rendererRegistry: props.rendererRegistry,
       defaultRendererType: props.defaultRendererType,
-      validatorRegistry: props.validatorRegistry,
-      readonly: props.readonly,
-      disabled: props.disabled,
+      validationRuleRegistry: props.validationRuleRegistry,
+      validatorAdapters: props.validatorAdapters,
       onFinish: async (values) => {
         var _a;
         (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
@@ -662,7 +771,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.schemas,
       (schemas) => {
-        form.setSchemas(schemas);
+        if (!isSchemxSchemas(schemas)) {
+          form.setSchemas(schemas);
+        }
       },
       { deep: false, immediate: !!props.form }
     );
@@ -678,7 +789,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     };
     watchEffect(() => {
-      form.updateDefaultProps(props);
+      const nextSchemaConfig = pickSchemaConfig();
+      Object.assign(formSchemaConfig, nextSchemaConfig);
+      form.updateSchemaConfig(nextSchemaConfig);
     });
     __expose({
       ...form
@@ -713,7 +826,8 @@ function withInstall(comp, extra) {
 }
 const SchemxFormExport = withInstall(_sfc_main, {
   /** Vue 插件安装方法 */
-  install(app, _options) {
+  install(app, options = {}) {
+    provideSchemxAppConfig(app, options);
     app.component("SchemxForm", _sfc_main);
   },
   /** FormItem 子组件引用 */
@@ -756,7 +870,6 @@ export {
   createFormConfigContext,
   createFormContext,
   SchemxFormExport as default,
-  formConfigContextOmitKey,
   rendererRegistry,
   SchemxFormExport as schemxForm,
   useDictionary,
@@ -772,6 +885,6 @@ export {
   useWatchAll,
   useWatchField,
   useWatchFields,
-  validatorRegistry
+  validationRuleRegistry
 };
 //# sourceMappingURL=index.mjs.map