feat: implement disabled form tree (#71)

* feat: add cascading disable logic to option groups and options * refactor: add a barrel file for easy importing * feat: implement cascading disabled context for all inputs * chore: include all components in playground * feat: implement form-level disabled * chore: add changeset
formwerkjs · Nov 12, 2024 · bbba9bf · bbba9bf
1 parent d3601ba
commit bbba9bf
Show file tree

Hide file tree

Showing 25 changed files with 237 additions and 93 deletions.
diff --git a/.changeset/green-starfishes-join.md b/.changeset/green-starfishes-join.md
@@ -0,0 +1,5 @@
+---
+'@formwerk/core': minor
+---
+
+feat: implement disabled form tree
diff --git a/packages/core/src/helpers/createDisabledContext/createDisabledContext.ts b/packages/core/src/helpers/createDisabledContext/createDisabledContext.ts
@@ -0,0 +1,24 @@
+import { InjectionKey, MaybeRefOrGetter, Ref, computed, inject, provide, toValue } from 'vue';
+
+interface DisabledContext {
+  isDisabled: Ref<boolean>;
+}
+
+const DisabledContextKey: InjectionKey<DisabledContext> = Symbol('disabledContextKey');
+
+/**
+ * Create a disabled context.
+ * @param isDisabled - The disabled state.
+ * @param terminate - Whether to terminate the context and not provide it further.
+ * @returns The disabled state.
+ */
+export function createDisabledContext(isDisabled?: MaybeRefOrGetter<boolean | undefined>) {
+  const parentContext = inject(DisabledContextKey, null);
+  const context: DisabledContext = {
+    isDisabled: computed(() => parentContext?.isDisabled.value || toValue(isDisabled) || false),
+  };
+
+  provide(DisabledContextKey, context);
+
+  return context.isDisabled;
+}
diff --git a/packages/core/src/helpers/createDisabledContext/index.ts b/packages/core/src/helpers/createDisabledContext/index.ts
@@ -0,0 +1 @@
+export * from './createDisabledContext';
diff --git a/packages/core/src/useCheckbox/useCheckbox.ts b/packages/core/src/useCheckbox/useCheckbox.ts
@@ -77,7 +77,7 @@ export function useCheckbox<TValue = string>(
       disableHtmlValidation: props.disableHtmlValidation,
     });
   }
-  const { fieldValue, setTouched, setValue, errorMessage, setErrors } = field;
+  const { fieldValue, setTouched, setValue, errorMessage, setErrors, isDisabled } = field;
 
   const checked = computed({
     get() {
@@ -103,10 +103,8 @@ export function useCheckbox<TValue = string>(
     errorMessage,
   });
 
-  const isDisabled = () => (toValue(props.disabled) || group?.disabled) ?? false;
   const isReadOnly = () => (toValue(props.readonly) || group?.readonly) ?? false;
-
-  const isMutable = () => !isDisabled() && !isReadOnly() && !toValue(props.indeterminate);
+  const isMutable = () => !isDisabled.value && !isReadOnly() && !toValue(props.indeterminate);
 
   function createHandlers(isInput: boolean) {
     const baseHandlers = {
@@ -163,7 +161,7 @@ export function useCheckbox<TValue = string>(
       [isInput ? 'checked' : 'aria-checked']: checked.value,
       [isInput ? 'required' : 'aria-required']: (group ? group.required : toValue(props.required)) || undefined,
       [isInput ? 'readonly' : 'aria-readonly']: isReadOnly() || undefined,
-      [isInput ? 'disabled' : 'aria-disabled']: isDisabled() || undefined,
+      [isInput ? 'disabled' : 'aria-disabled']: isDisabled.value || undefined,
       ...(group
         ? {}
         : {
@@ -183,14 +181,14 @@ export function useCheckbox<TValue = string>(
     return {
       ...base,
       role: 'checkbox',
-      tabindex: toValue(props.disabled) ? '-1' : '0',
+      tabindex: isDisabled.value ? '-1' : '0',
     };
   }
 
   group?.useCheckboxRegistration({
     id: inputId,
     getElem: () => inputEl.value,
-    isDisabled,
+    isDisabled: () => isDisabled.value,
     isChecked: () => checked.value,
     setChecked: (force?: boolean) => {
       if (!isMutable()) {

diff --git a/packages/core/src/useCheckbox/useCheckboxGroup.ts b/packages/core/src/useCheckbox/useCheckboxGroup.ts
@@ -41,7 +41,6 @@ export interface CheckboxRegistration {
 
 export interface CheckboxGroupContext<TCheckbox> {
   name: string;
-  disabled: boolean;
   readonly: boolean;
   required: boolean;
   field: FormField<CheckboxGroupValue<TCheckbox>>;
@@ -97,6 +96,7 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
     path: props.name,
     initialValue: toValue(props.modelValue),
     schema: props.schema,
+    disabled: props.disabled,
   });
 
   const { validityDetails, updateValidity } = useInputValidity({
@@ -107,7 +107,7 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
     disableHtmlValidation: props.disableHtmlValidation,
   });
 
-  const { fieldValue, setValue, isTouched, setTouched, errorMessage } = field;
+  const { fieldValue, setValue, isTouched, setTouched, errorMessage, isDisabled } = field;
   const { describedByProps, descriptionProps } = createDescribedByProps({
     inputId: groupId,
     description: props.description,
@@ -137,6 +137,10 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
   }
 
   function toggleValue(value: TCheckbox, force?: boolean) {
+    if (isDisabled.value || toValue(props.readonly)) {
+      return;
+    }
+
     const nextValue = toggleValueSelection(fieldValue.value ?? [], value, force);
 
     setValue(nextValue);
@@ -175,7 +179,6 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
 
   const context: CheckboxGroupContext<TCheckbox> = reactive({
     name: computed(() => toValue(props.name) ?? groupId),
-    disabled: computed(() => toValue(props.disabled) ?? false),
     readonly: computed(() => toValue(props.readonly) ?? false),
     required: computed(() => toValue(props.required) ?? false),
     field: markRaw(field),

diff --git a/packages/core/src/useForm/useForm.ts b/packages/core/src/useForm/useForm.ts
@@ -1,4 +1,4 @@
-import { computed, InjectionKey, onMounted, provide, reactive, readonly, Ref, ref } from 'vue';
+import { computed, InjectionKey, MaybeRefOrGetter, onMounted, provide, reactive, readonly, Ref, ref } from 'vue';
 import type { v1 } from '@standard-schema/spec';
 import { cloneDeep, isEqual, useUniqId } from '../utils/common';
 import {
@@ -24,13 +24,15 @@ import { getConfig } from '../config';
 import { FieldTypePrefixes } from '../constants';
 import { appendToFormData, clearFormData } from '../utils/formData';
 import { PartialDeep } from 'type-fest';
+import { createDisabledContext } from '../helpers/createDisabledContext';
 
 export interface FormOptions<TSchema extends GenericFormSchema, TInput extends FormObject = v1.InferInput<TSchema>> {
   id: string;
   initialValues: MaybeGetter<MaybeAsync<TInput>>;
   initialTouched: TouchedSchema<TInput>;
   schema: TSchema;
   disableHtmlValidation: boolean;
+  disabled: MaybeRefOrGetter<boolean | undefined>;
 }
 
 export interface FormContext<TInput extends FormObject = FormObject, TOutput extends FormObject = TInput>
@@ -64,6 +66,7 @@ export function useForm<
   });
 
   const id = opts?.id || useUniqId(FieldTypePrefixes.Form);
+  const isDisabled = createDisabledContext(opts?.disabled);
   const isHtmlValidationDisabled = () => opts?.disableHtmlValidation ?? getConfig().disableHtmlValidation;
   const values = reactive(cloneDeep(valuesSnapshot.originals.value)) as PartialDeep<TInput>;
   const touched = reactive(cloneDeep(touchedSnapshot.originals.value)) as TouchedSchema<TInput>;
@@ -155,6 +158,7 @@ export function useForm<
     isTouched,
     isDirty,
     isValid,
+    isDisabled,
     isFieldDirty: ctx.isFieldDirty,
     setFieldValue: ctx.setFieldValue,
     getFieldValue: ctx.getFieldValue,

diff --git a/packages/core/src/useFormField/useFormField.ts b/packages/core/src/useFormField/useFormField.ts
@@ -6,6 +6,7 @@ import { cloneDeep, isEqual, normalizeArrayable, combineIssues, tryOnScopeDispos
 import { FormGroupKey } from '../useFormGroup';
 import { useErrorDisplay } from './useErrorDisplay';
 import { usePathPrefixer } from '../helpers/usePathPrefixer';
+import { createDisabledContext } from '../helpers/createDisabledContext';
 
 interface FormFieldOptions<TValue = unknown> {
   path: MaybeRefOrGetter<string | undefined> | undefined;
@@ -22,6 +23,7 @@ export type FormField<TValue> = {
   isTouched: Ref<boolean>;
   isDirty: Ref<boolean>;
   isValid: Ref<boolean>;
+  isDisabled: Ref<boolean>;
   errors: Ref<string[]>;
   errorMessage: Ref<string>;
   schema: StandardSchema<TValue> | undefined;
@@ -38,6 +40,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
   const form = inject(FormKey, null);
   const formGroup = inject(FormGroupKey, null);
   const pathPrefixer = usePathPrefixer();
+  const isDisabled = createDisabledContext(opts?.disabled);
   const getPath = () => {
     const path = toValue(opts?.path);
 
@@ -108,6 +111,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     isValid,
     errors,
     errorMessage,
+    isDisabled,
     schema: opts?.schema,
     validate,
     getPath,
@@ -122,7 +126,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     return field;
   }
 
-  initFormPathIfNecessary(form, getPath, initialValue, opts?.initialTouched ?? false, toValue(opts?.disabled) ?? false);
+  initFormPathIfNecessary(form, getPath, initialValue, opts?.initialTouched ?? false, isDisabled);
 
   form.onSubmitAttempt(() => {
     setTouched(true);
@@ -159,26 +163,21 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
           path: newPath,
           value: cloneDeep(oldPath ? tf.getFieldValue(oldPath) : pathlessValue.value),
           touched: oldPath ? tf.isFieldTouched(oldPath) : pathlessTouched.value,
-          disabled: toValue(opts?.disabled) ?? false,
+          disabled: isDisabled.value,
           errors: [...(oldPath ? tf.getFieldErrors(oldPath) : pathlessValidity.errors.value)],
         };
       });
     }
   });
 
-  if (opts?.disabled) {
-    watch(
-      () => toValue(opts?.disabled) ?? false,
-      disabled => {
-        const path = getPath();
-        if (!path) {
-          return;
-        }
-
-        form.setFieldDisabled(path, disabled);
-      },
-    );
-  }
+  watch(isDisabled, disabled => {
+    const path = getPath();
+    if (!path) {
+      return;
+    }
+
+    form.setFieldDisabled(path, disabled);
+  });
 
   return field;
 }
@@ -292,7 +291,7 @@ function initFormPathIfNecessary(
   getPath: Getter<string | undefined>,
   initialValue: unknown,
   initialTouched: boolean,
-  disabled: boolean,
+  isDisabled: MaybeRefOrGetter<boolean>,
 ) {
   const path = getPath();
   if (!path) {
@@ -306,7 +305,7 @@ function initFormPathIfNecessary(
       path,
       value: initialValue ?? form.getFieldInitialValue(path),
       touched: initialTouched,
-      disabled,
+      disabled: toValue(isDisabled),
       errors: [...tf.getFieldErrors(path)],
     }));
   });

diff --git a/packages/core/src/useFormGroup/useFormGroup.ts b/packages/core/src/useFormGroup/useFormGroup.ts
@@ -16,11 +16,13 @@ import { FormValidationMode } from '../useForm/formContext';
 import { prefixPath as _prefixPath } from '../utils/path';
 import { getConfig } from '../config';
 import { createPathPrefixer } from '../helpers/usePathPrefixer';
+import { createDisabledContext } from '../helpers/createDisabledContext';
 
 export interface FormGroupProps<TInput extends FormObject = FormObject, TOutput extends FormObject = TInput> {
   name: string;
   label?: string;
   schema?: StandardSchema<TInput, TOutput>;
+  disabled?: boolean;
   disableHtmlValidation?: boolean;
 }
 
@@ -48,6 +50,7 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
   const getPath = () => toValue(props.name);
   const groupEl = elementRef || shallowRef<HTMLInputElement>();
   const form = inject(FormKey, null);
+  const isDisabled = createDisabledContext(props.disabled);
   const isHtmlValidationDisabled = () =>
     toValue(props.disableHtmlValidation) ?? form?.isHtmlValidationDisabled() ?? getConfig().disableHtmlValidation;
   const { validate, onValidationDispatch, defineValidationRequest, onValidationDone, dispatchValidateDone } =
@@ -161,6 +164,7 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
     isDirty,
     isValid,
     isTouched,
+    isDisabled,
     getErrors,
     getValues,
     getError,

diff --git a/packages/core/src/useNumberField/useNumberField.ts b/packages/core/src/useNumberField/useNumberField.ts
@@ -91,7 +91,7 @@ export function useNumberField(
     field,
     disableHtmlValidation: props.disableHtmlValidation,
   });
-  const { fieldValue, setValue, setTouched, errorMessage } = field;
+  const { fieldValue, setValue, setTouched, errorMessage, isDisabled } = field;
   const formattedText = computed<string>(() => {
     if (Number.isNaN(fieldValue.value) || isEmpty(fieldValue.value)) {
       return '';
@@ -124,7 +124,7 @@ export function useNumberField(
       min: props.min,
       max: props.max,
       readonly: props.readonly,
-      disabled: () => toValue(props.disabled) || toValue(props.readonly),
+      disabled: () => isDisabled.value || toValue(props.readonly),
       incrementLabel: props.incrementLabel,
       decrementLabel: props.decrementLabel,
       orientation: 'vertical',
@@ -187,7 +187,7 @@ export function useNumberField(
   const inputProps = computed<NumberInputDOMProps>(() => {
     return withRefCapture(
       {
-        ...propsToValues(props, ['name', 'placeholder', 'required', 'readonly', 'disabled']),
+        ...propsToValues(props, ['name', 'placeholder', 'required', 'readonly']),
         ...labelledByProps.value,
         ...describedByProps.value,
         ...accessibleErrorProps.value,
@@ -196,6 +196,7 @@ export function useNumberField(
         id: inputId,
         inputmode: inputMode.value,
         value: formattedText.value,
+        disabled: isDisabled.value ? true : undefined,
         max: toValue(props.max),
         min: toValue(props.min),
         type: 'text',
@@ -217,7 +218,7 @@ export function useNumberField(
 
       decrement();
     },
-    { disabled: () => toValue(props.disableWheel), passive: true },
+    { disabled: () => isDisabled.value || toValue(props.disableWheel), passive: true },
   );
 
   return {

diff --git a/packages/core/src/useRadio/useRadio.ts b/packages/core/src/useRadio/useRadio.ts
@@ -4,6 +4,7 @@ import { AriaInputProps, AriaLabelableProps, InputBaseAttributes, Reactivify, Ro
 import { useLabel } from '../a11y/useLabel';
 import { RadioGroupContext, RadioGroupKey } from './useRadioGroup';
 import { FieldTypePrefixes } from '../constants';
+import { createDisabledContext } from '../helpers/createDisabledContext';
 
 export interface RadioProps<TValue = string> {
   value: TValue;
@@ -30,6 +31,7 @@ export function useRadio<TValue = string>(
   const group: RadioGroupContext<TValue> | null = inject(RadioGroupKey, null);
   const inputEl = elementRef || ref<HTMLInputElement>();
   const checked = computed(() => isEqual(group?.modelValue, toValue(props.value)));
+  const isDisabled = createDisabledContext(props.disabled);
   const { labelProps, labelledByProps } = useLabel({
     for: inputId,
     label: props.label,
@@ -43,8 +45,7 @@ export function useRadio<TValue = string>(
   }
 
   const isReadOnly = () => group?.readonly ?? false;
-  const isDisabled = () => (toValue(props.disabled) || group?.disabled) ?? false;
-  const isMutable = () => !isReadOnly() && !isDisabled();
+  const isMutable = () => !isReadOnly() && !isDisabled.value;
 
   function focus() {
     inputEl.value?.focus();
@@ -66,7 +67,7 @@ export function useRadio<TValue = string>(
     id: inputId,
     getElem: () => inputEl.value,
     isChecked: () => checked.value,
-    isDisabled,
+    isDisabled: () => isDisabled.value,
     setChecked,
   });
 
@@ -97,7 +98,7 @@ export function useRadio<TValue = string>(
       id: inputId,
       [isInput ? 'checked' : 'aria-checked']: checked.value,
       [isInput ? 'readonly' : 'aria-readonly']: group?.readonly || undefined,
-      [isInput ? 'disabled' : 'aria-disabled']: isDisabled() || undefined,
+      [isInput ? 'disabled' : 'aria-disabled']: isDisabled.value || undefined,
       [isInput ? 'required' : 'aria-required']: group?.required,
     };
 
@@ -112,7 +113,7 @@ export function useRadio<TValue = string>(
     return {
       ...base,
       role: 'radio',
-      tabindex: checked.value ? '0' : registration?.canReceiveFocus() ? '0' : '-1',
+      tabindex: checked.value ? '0' : registration?.canReceiveFocus() && !isDisabled.value ? '0' : '-1',
     };
   }
 
@@ -122,7 +123,7 @@ export function useRadio<TValue = string>(
     inputEl,
     inputProps,
     isChecked: checked,
-    isDisabled: computed(() => isDisabled()),
+    isDisabled,
     labelProps,
   };
 }