@flowgram-vue/form 0.2.0

package/src/vue/field.vue

@@ -0,0 +1,127 @@
+<script lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import {
+  cloneVNode,
+  defineComponent,
+  isVNode,
+  onBeforeUnmount,
+  provide,
+  type PropType,
+  type VNode,
+} from 'vue';
+import { isFunction } from 'lodash-es';
+import { DisposableCollection, useRefresh } from '@flowgram-vue/utils';
+import { useReadonlyReactiveState } from '@flowgram-vue/reactive';
+
+import { toField, toFieldState } from '../core/to-field';
+import { FieldModelState, FieldName, FieldRenderProps } from '../types/field';
+import { FormModelState } from '../types';
+import { toFormState } from '../core/to-form';
+import { useFormModel } from '../composables/use-form-model';
+import { FieldModelKey } from './context';
+
+export default defineComponent({
+  name: 'Field',
+  props: {
+    name: { type: String, required: true },
+    defaultValue: { default: undefined },
+    render: {
+      type: Function as PropType<(props: FieldRenderProps<any>) => VNode>,
+      default: undefined,
+    },
+    deps: { type: Array as PropType<FieldName[]>, default: undefined },
+  },
+  setup(props, { slots }) {
+    const formModel = useFormModel();
+    const fieldModel = formModel.getField(props.name) || formModel.createField(props.name);
+    const field = toField(fieldModel);
+
+    const fieldModelState = useReadonlyReactiveState<FieldModelState>(fieldModel.reactiveState);
+    const formModelState = useReadonlyReactiveState<FormModelState>(formModel.reactiveState);
+    const fieldState = toFieldState(fieldModelState);
+    const formState = toFormState(formModelState);
+    const refresh = useRefresh();
+
+    const bind = () => {
+      if (fieldModel.disposed) {
+        refresh();
+        return () => {};
+      }
+      fieldModel.renderCount = fieldModel.renderCount + 1;
+
+      if (!formModel.getValueIn(props.name) !== undefined && props.defaultValue !== undefined) {
+        formModel.setInitValueIn(props.name, props.defaultValue);
+        refresh();
+      }
+
+      const disposableCollection = new DisposableCollection();
+
+      disposableCollection.push(
+        fieldModel.onValueChange(() => {
+          refresh();
+        })
+      );
+
+      if (props.deps) {
+        props.deps.forEach((dep) => {
+          const disposable = formModel.getField(dep)?.onValueChange(() => {
+            refresh();
+          });
+          if (disposable) {
+            disposableCollection.push(disposable);
+          }
+        });
+      }
+
+      return () => {
+        disposableCollection.dispose();
+
+        if (fieldModel.renderCount > 1) {
+          fieldModel.renderCount = fieldModel.renderCount - 1;
+        } else {
+          const newFieldModel = formModel.getField(fieldModel.name);
+          if (newFieldModel === fieldModel) fieldModel.dispose();
+        }
+      };
+    };
+
+    const unbind = bind();
+    onBeforeUnmount(unbind);
+
+    provide(FieldModelKey, fieldModel);
+
+    return () => {
+      if (fieldModel.disposed) {
+        return null;
+      }
+
+      const slotProps: FieldRenderProps<any> = { field, fieldState, formState };
+
+      if (props.render) {
+        return props.render(slotProps);
+      }
+
+      const slot = slots.default;
+      if (isFunction(slot)) {
+        const children = slot(slotProps);
+        if (Array.isArray(children) && children.length === 1 && isVNode(children[0])) {
+          return cloneVNode(children[0], {
+            value: field.value,
+            onInput: field.onChange,
+            onChange: field.onChange,
+            onFocus: field.onFocus,
+            onBlur: field.onBlur,
+            name: field.name,
+          });
+        }
+        return children;
+      }
+
+      return null;
+    };
+  },
+});
+</script>

package/src/vue/form.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { defineComponent, h, onBeforeUnmount, provide, type PropType, type VNode } from 'vue';
+
+import { createForm } from '../core/create-form';
+import { toForm } from '../core/to-form';
+import type { FormControl, FormOptions, FormRenderProps } from '../types/form';
+import { FormModelKey } from './context';
+
+const FormContentRender = defineComponent({
+  name: 'FormContentRender',
+  props: {
+    form: { type: Object, required: true },
+    render: { type: Function as PropType<(props: FormRenderProps<any>) => any>, required: true },
+  },
+  setup(props) {
+    return () => props.render({ form: props.form });
+  },
+});
+
+export default defineComponent({
+  name: 'Form',
+  props: {
+    keepModelOnUnMount: { type: Boolean, default: false },
+    control: { type: Object as PropType<FormControl<any>>, default: undefined },
+    initialValues: { type: Object, default: undefined },
+    validateTrigger: { type: String, default: undefined },
+    validate: { type: [Object, Function], default: undefined },
+    context: { type: Object, default: undefined },
+  },
+  setup(props, { slots }) {
+    const restOptions: FormOptions = {
+      initialValues: props.initialValues,
+      validateTrigger: props.validateTrigger as FormOptions['validateTrigger'],
+      validate: props.validate as FormOptions['validate'],
+      context: props.context,
+    };
+    const { _formModel: formModel } = props.control ? props.control : createForm(restOptions).control;
+
+    onBeforeUnmount(() => {
+      if (!props.keepModelOnUnMount) {
+        formModel.dispose();
+      }
+    });
+
+    const form = toForm(formModel);
+    provide(FormModelKey, formModel);
+
+    return () => {
+      const slot = slots.default;
+      if (!slot) {
+        return null;
+      }
+      return h(FormContentRender, { form, render: slot as (p: FormRenderProps<any>) => VNode });
+    };
+  },
+});
+</script>

package/src/vue/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as Form } from './form.vue';
+export { default as Field } from './field.vue';
+export { default as FieldArray } from './field-array.vue';
+export { FormModelKey, FieldModelKey } from './context';
+export type { FormProps, FieldProps, FieldArrayProps } from './types';
+export * from '../composables';

package/src/vue/types.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { VNode } from 'vue';
+
+import { FieldArrayRenderProps, FieldName, FieldOptions, FieldRenderProps } from '../types/field';
+import { FormControl, FormOptions, FormRenderProps } from '../types/form';
+
+export type FormProps<TValues> = FormOptions & {
+  /**
+   * Vue default slot or child render prop
+   */
+  children?: ((props: FormRenderProps<TValues>) => VNode) | VNode;
+  /**
+   * If this prop is set to true, Form instance will be kept even though <Form /> is destroyed.
+   * This means you can still use some form's api such as Form.validate and Form.setValueIn to handle pure data logic.
+   * @default false
+   */
+  keepModelOnUnMount?: boolean;
+  /**
+   * provide form instance from outside. if control is given Form will use the form instance in the control instead of creating one.
+   */
+  control?: FormControl<TValues>;
+};
+
+export type FieldProps<TValue> = FieldOptions<TValue> & {
+  /**
+   * A Vue VNode or a render prop
+   */
+  children?: ((props: FieldRenderProps<TValue>) => VNode) | VNode;
+  /**
+   * Dependencies of the current field. If a field name is given in deps, current field will re-render if the given field name data is updated
+   */
+  deps?: FieldName[];
+};
+
+export type FieldArrayProps<TValue> = {
+  name: FieldName;
+  defaultValue?: TValue[];
+  render?: (props: FieldArrayRenderProps<TValue>) => VNode;
+  children?: ((props: FieldArrayRenderProps<TValue>) => VNode) | VNode;
+  deps?: FieldName[];
+};