@schemx/vue 0.1.20

package/dist/index.mjs

@@ -0,0 +1,686 @@
+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 classnames from "classnames";
+import { omit } from "es-toolkit";
+import { createRendererRegistry, createValidatorsRegistry, createForm, createField, createWatch, createEffect } from "@schemx/core";
+export * from "@schemx/core";
+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
+  };
+  const instance = computed(() => createForm(mergedOptions));
+  provide(SCHEMX_INSTANCE_KEY, instance.value);
+  onUnmounted(() => {
+    instance.value.destroy();
+  });
+  return instance.value;
+}
+function useFormInstance() {
+  const instance = inject(SCHEMX_INSTANCE_KEY);
+  if (!instance) {
+    throw new Error("useFormInstance must be used within a Form");
+  }
+  return instance;
+}
+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 fieldPending = shallowRef(field.isPending());
+  const dispose = field.effect(() => {
+    fieldValue.value = field.getValue();
+    fieldError.value = field.getError();
+    fieldPending.value = field.isPending();
+  });
+  const error = computed(() => fieldError.value);
+  const dirty = computed(() => {
+    void fieldValue.value;
+    return field.isTouched();
+  });
+  const pending = computed(() => fieldPending.value);
+  const result = {
+    value: fieldValue,
+    error,
+    dirty,
+    pending,
+    ...field,
+    getValue: () => fieldValue.value
+  };
+  return { result, dispose };
+}
+const useField = (name) => {
+  const form = useFormInstance();
+  const key = name;
+  let formCache = fieldHookCache.get(form);
+  if (!formCache) {
+    formCache = /* @__PURE__ */ new Map();
+    fieldHookCache.set(form, formCache);
+  }
+  const cachedEntry = formCache.get(key);
+  let activeEntry;
+  if (cachedEntry) {
+    cachedEntry.refCount++;
+    activeEntry = cachedEntry;
+  } else {
+    const { result, dispose } = createFieldHook(form, name);
+    activeEntry = {
+      refCount: 1,
+      result,
+      dispose
+    };
+    formCache.set(key, activeEntry);
+  }
+  onUnmounted(() => {
+    if (--activeEntry.refCount <= 0) {
+      activeEntry.dispose();
+      formCache.delete(key);
+    }
+  });
+  return activeEntry.result;
+};
+function useWatch(nameOrNamesOrCallback, callbackOrOptions, maybeOptions) {
+  const form = useFormInstance();
+  const dispose = createWatch(
+    form,
+    nameOrNamesOrCallback,
+    callbackOrOptions,
+    maybeOptions
+  );
+  onUnmounted(dispose);
+  return dispose;
+}
+function useWatchField(name, callback, options) {
+  return useWatch(name, callback, options);
+}
+function useWatchFields(names, callback, options) {
+  return useWatch(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;
+  return new Error(String(err));
+}
+const useDictionary = (options, fieldName) => {
+  var _a;
+  const instance = useFormInstance();
+  const list = ref([]);
+  const loading = ref(false);
+  const error = ref(void 0);
+  let requestCount = 0;
+  const format = async (res) => {
+    if (typeof (options == null ? void 0 : options.formatter) === "function") {
+      return await options.formatter(res, instance);
+    }
+    return res;
+  };
+  const executeWithRetry = async (formValues) => {
+    const maxRetries = options.retryCount ?? 0;
+    const retryDelay = options.retryInterval ?? 1e3;
+    let lastError = new Error("Unknown error");
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      try {
+        return await options.api(formValues, instance);
+      } catch (err) {
+        lastError = normalizeError(err);
+        if (attempt < maxRetries) {
+          await new Promise((r) => setTimeout(r, retryDelay));
+        }
+      }
+    }
+    throw lastError;
+  };
+  const loadDict = async () => {
+    try {
+      const formValues = instance.getFieldsValue();
+      if (typeof options.shouldFetch === "function" && !options.shouldFetch(formValues)) {
+        list.value = [];
+        loading.value = false;
+        return;
+      }
+      loading.value = true;
+      error.value = void 0;
+      const currentCount = ++requestCount;
+      const res = await executeWithRetry(formValues);
+      if (currentCount !== requestCount) return;
+      const formatted = await format(res);
+      if (currentCount !== requestCount) return;
+      list.value = formatted;
+      error.value = void 0;
+      if (typeof options.onSuccess === "function") {
+        options.onSuccess(formatted, instance);
+      }
+      loading.value = false;
+    } catch (err) {
+      const normalized = normalizeError(err);
+      error.value = normalized;
+      list.value = [];
+      loading.value = false;
+      if (typeof options.onError === "function") {
+        options.onError(normalized, instance);
+      }
+    }
+  };
+  const refresh = () => loadDict();
+  const mutate = (data) => {
+    list.value = data;
+  };
+  if ((_a = options.dependsOn) == null ? void 0 : _a.length) {
+    useWatchFields(options.dependsOn, (_payload, latestSnapshot) => {
+      if (typeof options.onDepsChange === "function") {
+        options.onDepsChange(latestSnapshot, instance);
+      }
+      if (options.resetOnDepsChange && fieldName) {
+        instance.setFieldValue(fieldName, void 0);
+      }
+      void loadDict();
+    });
+  }
+  const immediate = options.immediate ?? true;
+  onMounted(() => {
+    if (immediate) {
+      void loadDict();
+    }
+  });
+  return { list, loading, error, loadDict, refresh, mutate };
+};
+const FORM_CONTEXT_KEY = Symbol("FormContext");
+const createContext = (props) => {
+  provide(FORM_CONTEXT_KEY, props);
+};
+function useContext() {
+  const context = inject(FORM_CONTEXT_KEY);
+  if (!context) {
+    throw new Error("useContext must be used within a Form");
+  }
+  return context;
+}
+const isShallowEqual = (a, b) => {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every((key) => a[key] === b[key]);
+};
+function useStableRef(factory) {
+  const stableRef = shallowRef({});
+  watchEffect(() => {
+    const next = factory();
+    if (!isShallowEqual(stableRef.value, next)) {
+      stableRef.value = next;
+    }
+  });
+  return stableRef;
+}
+function useViewSchemas(form) {
+  const viewSchemas = shallowRef(form.getViewSchemas());
+  const unsubscribe = form.subscribeViewSchemas((nextSchemas) => {
+    viewSchemas.value = nextSchemas;
+  });
+  onScopeDispose(unsubscribe);
+  return viewSchemas;
+}
+const FIELD_CONTEXT_KEY = Symbol("schemx:field");
+function provideFieldContext(field) {
+  provide(FIELD_CONTEXT_KEY, field);
+}
+function useFieldContext() {
+  const field = inject(FIELD_CONTEXT_KEY);
+  if (!field) {
+    throw new Error("[schemx] useFieldContext() must be used inside a FormItem tree");
+  }
+  return field;
+}
+function isValidTrigger(v) {
+  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;
+  return defaultTrigger;
+}
+function normalizeTrigger(t) {
+  const map = {
+    onBlur: "blur",
+    onChange: "change",
+    onSubmit: "submit",
+    blur: "blur",
+    change: "change",
+    submit: "submit"
+  };
+  return map[t] ?? "submit";
+}
+function shouldValidateOn(event, trigger) {
+  if (!trigger) return false;
+  const triggers = Array.isArray(trigger) ? trigger : [trigger];
+  return triggers.some((t) => normalizeTrigger(t) === event);
+}
+const isCamelCase = (str) => /[A-Z]/.test(str);
+const isKebabCase = (str) => str.includes("-");
+const camelToKebab = (str) => {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+};
+const kebabToCamel = (str) => {
+  return str.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
+};
+const normalizeToKebab = (str) => {
+  if (isCamelCase(str)) return camelToKebab(str);
+  return str;
+};
+const normalizeToCamel = (str) => {
+  if (isKebabCase(str)) return kebabToCamel(str);
+  return str;
+};
+const resolveSlot = (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];
+  return void 0;
+};
+const extractChildSlots = (fieldName, allSlots) => {
+  const result = {};
+  const camelPrefix = normalizeToCamel(String(fieldName)) + ":";
+  const kebabPrefix = normalizeToKebab(String(fieldName)) + ":";
+  for (const [key, value] of Object.entries(allSlots)) {
+    if (key.startsWith(camelPrefix)) {
+      result[key.slice(camelPrefix.length)] = value;
+    } else if (key.startsWith(kebabPrefix) && kebabPrefix !== camelPrefix) {
+      result[key.slice(kebabPrefix.length)] = value;
+    }
+  }
+  return result;
+};
+const FormGroup = /* @__PURE__ */ defineComponent((props, {
+  slots
+}) => {
+  const collapsed = ref(Boolean(props.schema.defaultCollapsed));
+  const toggle = () => {
+    if (props.schema.collapsible) {
+      collapsed.value = !collapsed.value;
+    }
+  };
+  return () => {
+    const schema = props.schema;
+    const collapsible = Boolean(schema.collapsible);
+    return createVNode("div", {
+      "class": classnames("schemx-group", {
+        "schemx-group--collapsed": collapsed.value
+      }, schema.class),
+      "data-key": schema.key
+    }, [schema.label && createVNode("div", {
+      "role": collapsible ? "button" : void 0,
+      "tabindex": collapsible ? 0 : void 0,
+      "class": classnames("schemx-group__header", {
+        "schemx-group__header--clickable": collapsible
+      }),
+      "onClick": toggle,
+      "onKeydown": (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggle();
+        }
+      }
+    }, [createVNode("span", {
+      "class": "schemx-group__title"
+    }, [schema.label]), collapsible && createVNode("span", {
+      "class": classnames("schemx-group__arrow", {
+        "schemx-group__arrow--down": !collapsed.value
+      })
+    }, null)]), !collapsed.value && createVNode("div", {
+      "class": "schemx-group__body"
+    }, [schema.children.map((child) => createVNode(FormItem, {
+      "key": child.key,
+      "schema": child
+    }, slots))])]);
+  };
+}, {
+  name: "SchemxGroup",
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    }
+  }
+});
+const FormItem = /* @__PURE__ */ defineComponent((props, {
+  slots
+}) => {
+  const schemaRef = toRef(props, "schema");
+  if (isViewGroupSchema(schemaRef.value)) {
+    return () => {
+      return h(FormGroup, {
+        schema: schemaRef.value
+      }, slots);
+    };
+  }
+  const form = useFormInstance();
+  const formContext = useContext();
+  const schema = () => schemaRef.value;
+  const field = useField(schema().name);
+  provideFieldContext(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 formItemProps = computed(() => {
+    return {
+      ...omit(schema(), ["componentProps"]),
+      name: schema().name,
+      componentType: schema().componentType,
+      class: classnames("schemx-item", schema().class),
+      required: schema().required,
+      readonly: schema().readonly,
+      disabled: schema().disabled,
+      visible: schema().visible,
+      placeholder: schema().placeholder,
+      validationTrigger: trigger.value
+    };
+  });
+  const componentProps = useStableRef(() => ({
+    ...schema().componentProps,
+    formItemProps: formItemProps.value,
+    value: field.getValue(),
+    readonly: schema().readonly,
+    disabled: schema().disabled,
+    placeholder: schema().placeholder,
+    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(formItemProps.value);
+    }
+    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({
+        ...formItemProps.value,
+        columnElement
+      });
+    }
+    return createVNode("div", {
+      "class": "schemx-item__control"
+    }, [columnElement]);
+  };
+  const renderError = () => {
+    const errorSlot = resolveSlot(slots, `${schema().name}Error`);
+    if (errorSlot) {
+      return errorSlot({
+        ...formItemProps.value,
+        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(formItemProps.value);
+    }
+    const labelPosition = schema().labelPosition || formContext.labelPosition;
+    return createVNode("div", {
+      "class": classnames("schemx-item-wrapper", {
+        "is-readonly": schema().readonly,
+        "is-disabled": schema().disabled
+      })
+    }, [createVNode("div", {
+      "class": classnames("schemx-item", `schemx-item--label-${labelPosition}`, schema().class),
+      "style": {
+        ...schema().style ?? {}
+      }
+    }, [renderLabel(), createVNode("div", {
+      "class": "schemx-item__content"
+    }, [renderContent(), renderError()])])]);
+  };
+}, {
+  name: "SchemxItem",
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    }
+  }
+});
+const isViewGroupSchema = (schema) => {
+  return schema.componentType === "group";
+};
+const normalizeNameKey = (name) => {
+  if (Array.isArray(name)) {
+    return name.map((part) => String(part)).join(".");
+  }
+  return String(name);
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "SchemxForm" },
+  __name: "form",
+  props: {
+    class: { default: "" },
+    style: { default: () => ({}) },
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    visible: { type: Boolean },
+    labelIcon: {},
+    labelAlign: {},
+    labelPosition: {},
+    labelWidth: {},
+    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 }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    createContext(
+      omit(props, [
+        "form",
+        "modelValue",
+        "rendererRegistry",
+        "defaultRendererType",
+        "validatorRegistry",
+        "onFinish",
+        "onFinishFailed",
+        "onValuesChange",
+        "onFieldsChange"
+      ])
+    );
+    const form = props.form ? props.form : useForm({
+      schemas: props.schemas,
+      initialValues: props.initialValues,
+      rendererRegistry: props.rendererRegistry,
+      defaultRendererType: props.defaultRendererType,
+      validatorRegistry: props.validatorRegistry,
+      readonly: props.readonly,
+      disabled: props.disabled,
+      onFinish: async (values) => {
+        var _a;
+        (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
+      },
+      onFinishFailed: async (errors) => {
+        var _a;
+        (_a = props.onFinishFailed) == null ? void 0 : _a.call(props, errors);
+      },
+      onValuesChange: (changedValues, latestSnapshot) => {
+        var _a;
+        emit("update:modelValue", latestSnapshot);
+        (_a = props.onValuesChange) == null ? void 0 : _a.call(props, changedValues, latestSnapshot);
+      },
+      onFieldsChange: (changedPaths, allPaths) => {
+        var _a;
+        (_a = props.onFieldsChange) == null ? void 0 : _a.call(props, changedPaths, allPaths);
+      }
+    });
+    watch(
+      () => props.schemas,
+      (schemas) => {
+        form.setSchemas(schemas);
+      },
+      { deep: false, immediate: !!props.form }
+    );
+    const viewSchemas = useViewSchemas(form);
+    watchEffect(() => {
+      form.updateDefaultProps(props);
+    });
+    __expose({
+      ...form
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["schemx", props.class])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(viewSchemas), (schema) => {
+          return openBlock(), createBlock(unref(FormItem), {
+            key: schema.key,
+            schema
+          }, createSlots({ _: 2 }, [
+            renderList(_ctx.$slots, (_, slotName) => {
+              return {
+                name: slotName,
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, slotName, mergeProps({ ref_for: true }, slotProps ?? {}))
+                ])
+              };
+            })
+          ]), 1032, ["schema"]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+function withInstall(comp, extra) {
+  return Object.assign(comp, extra);
+}
+const SchemxFormExport = withInstall(_sfc_main, {
+  /** Vue 插件安装方法 */
+  install(app, _options) {
+    app.component("SchemxForm", _sfc_main);
+  },
+  /** FormItem 子组件引用 */
+  FormItem
+});
+function WithRemoteOptions(WrappedComponent) {
+  return defineComponent({
+    name: `WithRemoteOptions(${WrappedComponent.name || "Anonymous"})`,
+    inheritAttrs: false,
+    props: {
+      dict: {
+        type: Object,
+        default: void 0
+      },
+      fieldName: {
+        type: [String, Array],
+        default: void 0
+      }
+    },
+    setup(props, { attrs, slots }) {
+      const dictResult = props.dict ? useDictionary(props.dict, props.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
+        };
+      });
+      return () => h(WrappedComponent, childrenProps.value, slots);
+    }
+  });
+}
+export {
+  FormGroup,
+  FormItem,
+  WithRemoteOptions,
+  SchemxFormExport as default,
+  rendererRegistry,
+  SchemxFormExport as schemxForm,
+  useContext,
+  useDictionary,
+  useEffect,
+  useField,
+  useFieldContext,
+  useForm,
+  useWatch,
+  useWatchAll,
+  useWatchField,
+  useWatchFields,
+  validatorRegistry
+};
+//# sourceMappingURL=index.mjs.map