feat: expose useCustomControl

Author: logaretm

packages/core/src/useCustomField/index.ts

@@ -1 +1,2 @@
 export * from './useCustomField';
+export * from './useCustomControl';

packages/core/src/useCustomField/useCustomControl.ts

@@ -0,0 +1,60 @@
+import { shallowRef, toValue } from 'vue';
+import { FieldTypePrefixes } from '../constants';
+import { ControlProps, Reactivify } from '../types';
+import { exposeField, resolveControlField } from '../useFormField';
+import { normalizeProps, propsToValues, useUniqId, useCaptureProps } from '../utils/common';
+import { useInputValidity } from '../validation';
+
+export interface CustomControlProps<TValue = unknown> extends ControlProps<TValue> {
+  /**
+   * Whether the field is readonly.
+   */
+  readonly?: boolean;
+}
+
+export function useCustomControl<TValue = unknown>(
+  _props: Reactivify<CustomControlProps<TValue>, 'schema' | '_field'>,
+) {
+  const props = normalizeProps(_props, ['schema', '_field']);
+  const controlId = useUniqId(FieldTypePrefixes.CustomField);
+  const controlEl = shallowRef<HTMLInputElement>();
+  const field = resolveControlField<TValue>(props);
+  const { labelledByProps, accessibleErrorProps, describedByProps, isDisabled } = field;
+  const { updateValidity } = useInputValidity({ field });
+
+  field.registerControl({
+    getControlElement: () => controlEl.value,
+    getControlId: () => controlId,
+  });
+
+  const controlProps = useCaptureProps(() => {
+    return {
+      ...propsToValues(props, ['name', 'readonly']),
+      ...labelledByProps.value,
+      ...describedByProps.value,
+      ...accessibleErrorProps.value,
+      'aria-readonly': toValue(props.readonly) ? ('true' as const) : undefined,
+      'aria-disabled': isDisabled.value ? ('true' as const) : undefined,
+      id: controlId,
+    };
+  }, controlEl);
+
+  return exposeField(
+    {
+      /**
+       * The id of the control element.
+       */
+      controlId,
+
+      /**
+       * Props for the control element/group.
+       */
+      controlProps,
+      /**
+       * Validates the field.
+       */
+      validate: updateValidity,
+    },
+    field,
+  );
+}

packages/core/src/useCustomField/useCustomField.ts

@@ -1,106 +1,22 @@
-import { shallowRef, toValue } from 'vue';
-import { FieldTypePrefixes } from '../constants';
-import { Reactivify, StandardSchema } from '../types';
-import { exposeField, useFormField } from '../useFormField';
-import { normalizeProps, propsToValues, useUniqId, useCaptureProps } from '../utils/common';
-import { useInputValidity } from '../validation';
+import { Reactivify } from '../types';
+import { resolveFieldInit, useFormField, WithFieldProps } from '../useFormField';
+import { normalizeProps } from '../utils/common';
 import { registerField } from '@formwerk/devtools';
+import { CustomControlProps, useCustomControl } from './useCustomControl';
 
-export interface CustomFieldProps<TValue = unknown> {
-  /**
-   * The label of the field.
-   */
-  label: string;
-
-  /**
-   * The v-model value of the field.
-   */
-  modelValue?: TValue | undefined;
-
-  /**
-   * Description text that provides additional context about the field.
-   */
-  description?: string;
-
-  /**
-   * The name attribute of the input element.
-   */
-  name?: string;
-
-  /**
-   * The initial static value of the field.
-   */
-  value?: TValue | undefined;
-
-  /**
-   * Whether the field is readonly.
-   */
-  readonly?: boolean;
-
-  /**
-   * Whether the field is disabled.
-   */
-  disabled?: boolean;
-
-  /**
-   * Schema for field validation.
-   */
-  schema?: StandardSchema<TValue>;
-}
+export type CustomFieldProps<TValue = unknown> = WithFieldProps<CustomControlProps<TValue>>;
 
 export function useCustomField<TValue = unknown>(_props: Reactivify<CustomFieldProps<TValue>, 'schema'>) {
   const props = normalizeProps(_props, ['schema']);
-  const controlId = useUniqId(FieldTypePrefixes.CustomField);
-  const controlEl = shallowRef<HTMLInputElement>();
-  const field = useFormField<TValue | undefined>({
-    label: props.label,
-    description: props.description,
-    path: props.name,
-    initialValue: (toValue(props.modelValue) ?? toValue(props.value)) as TValue | undefined,
-    disabled: props.disabled,
-    schema: props.schema,
-  });
-
-  const { labelledByProps, accessibleErrorProps, describedByProps, isDisabled } = field;
-  const { updateValidity } = useInputValidity({ field });
-
-  field.registerControl({
-    getControlElement: () => controlEl.value,
-    getControlId: () => controlId,
-  });
-
-  const controlProps = useCaptureProps(() => {
-    return {
-      ...propsToValues(props, ['name', 'readonly']),
-      ...labelledByProps.value,
-      ...describedByProps.value,
-      ...accessibleErrorProps.value,
-      'aria-readonly': toValue(props.readonly) ? ('true' as const) : undefined,
-      'aria-disabled': isDisabled.value ? ('true' as const) : undefined,
-      id: controlId,
-    };
-  }, controlEl);
+  const field = useFormField(resolveFieldInit<TValue>(props));
+  const control = useCustomControl<TValue>({
+    ...props,
+    _field: field,
+  } as any);
 
   if (__DEV__) {
     registerField(field, 'Custom');
   }
 
-  return exposeField(
-    {
-      /**
-       * The id of the control element.
-       */
-      controlId,
-
-      /**
-       * Props for the control element/group.
-       */
-      controlProps,
-      /**
-       * Validates the field.
-       */
-      validate: updateValidity,
-    },
-    field,
-  );
+  return control;
 }