feat: bubble input/change for form component

Author: zernonia

packages/core/src/Select/BubbleSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { VisuallyHidden } from '@/VisuallyHidden'
 
 interface BubbleSelectProps {
@@ -18,20 +18,19 @@ const props = defineProps<BubbleSelectProps>()
 const selectElement = ref<HTMLElement>()
 
 // This would bubble "change" event to form, with the target as Select element.
-// We temporary disable this as not sure if it will be needed for Vue
-// watch(value, () => {
-//   const selectProto = window.HTMLSelectElement.prototype;
-//   const descriptor = Object.getOwnPropertyDescriptor(
-//     selectProto,
-//     "value"
-//   ) as PropertyDescriptor;
-//   const setValue = descriptor.set;
-//   if (prevValue.value !== value.value && setValue) {
-//     const event = new Event("change", { bubbles: true });
-//     setValue.call(selectElement.value, value.value);
-//     selectElement.value?.dispatchEvent(event);
-//   }
-// });
+watch(() => props.value, (cur, prev) => {
+  const selectProto = window.HTMLSelectElement.prototype
+  const descriptor = Object.getOwnPropertyDescriptor(
+    selectProto,
+    'value',
+  ) as PropertyDescriptor
+  const setValue = descriptor.set
+  if (cur !== prev && setValue) {
+    const event = new Event('change', { bubbles: true })
+    setValue.call(selectElement.value, cur)
+    selectElement.value?.dispatchEvent(event)
+  }
+})
 
 /**
  * We purposefully use a `select` here to support form autofill as much

packages/core/src/ToggleGroup/ToggleGroupRoot.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
 import type { ComputedRef, Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
-import type { AcceptableValue, DataOrientation, Direction, SingleOrMultipleProps, SingleOrMultipleType } from '../shared/types'
-import { createContext, useDirection, useForwardExpose } from '@/shared'
+import type { AcceptableValue, DataOrientation, Direction, FormFieldProps, SingleOrMultipleProps, SingleOrMultipleType } from '../shared/types'
+import { createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'
+import VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'
 
 export interface ToggleGroupRootProps<ValidValue = AcceptableValue | AcceptableValue[], ExplicitType = SingleOrMultipleType>
-  extends PrimitiveProps, SingleOrMultipleProps<ValidValue, ExplicitType> {
+  extends PrimitiveProps, FormFieldProps, SingleOrMultipleProps<ValidValue, ExplicitType> {
   /** When `false`, navigating through the items using arrow keys will be disabled. */
   rovingFocus?: boolean
   /** When `true`, prevents the user from interacting with the toggle group and all its items. */
@@ -59,9 +60,10 @@ defineSlots<{
 
 const { loop, rovingFocus, disabled, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
-const { forwardRef } = useForwardExpose()
+const { forwardRef, currentElement } = useForwardExpose()
 
 const { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits)
+const isFormControl = useFormControl(currentElement)
 
 provideToggleGroupRootContext({
   isSingle,
@@ -90,6 +92,13 @@ provideToggleGroupRootContext({
       :as="as"
     >
       <slot :model-value="modelValue" />
+
+      <VisuallyHiddenInput
+        v-if="isFormControl && name"
+        :name="name"
+        :required="required"
+        :value="modelValue"
+      />
     </Primitive>
   </component>
 </template>

packages/core/src/VisuallyHidden/VisuallyHiddenInput.vue

@@ -1,19 +1,14 @@
 <script setup lang="ts" generic="T">
 import { computed } from 'vue'
-import VisuallyHidden, { type VisuallyHiddenProps } from './VisuallyHidden.vue'
+import VisuallyHiddenInputBubble, { type VisuallyHiddenInputBubbleProps } from './VisuallyHiddenInputBubble.vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<{
-  name: string
-  value: T
-  required?: boolean
-  disabled?: boolean
-  feature?: VisuallyHiddenProps['feature']
-}>(), {
+const props = withDefaults(defineProps<VisuallyHiddenInputBubbleProps<T>>(), {
   feature: 'fully-hidden',
+  checked: undefined,
 })
 
 const parsedValue = computed(() => {
@@ -44,15 +39,11 @@ const parsedValue = computed(() => {
 </script>
 
 <template>
-  <VisuallyHidden
+  <VisuallyHiddenInputBubble
     v-for="parsed in parsedValue"
     :key="parsed.name"
-    v-bind="$attrs"
-    as="input"
-    :feature="feature"
+    v-bind="{ ...props, ...$attrs }"
     :name="parsed.name"
     :value="parsed.value"
-    :required="required"
-    :disabled="disabled"
   />
 </template>

packages/core/src/VisuallyHidden/VisuallyHiddenInputBubble.vue

@@ -0,0 +1,53 @@
+<script lang="ts">
+export interface VisuallyHiddenInputBubbleProps<T> {
+  name: string
+  value: T
+  checked?: boolean
+  required?: boolean
+  disabled?: boolean
+  feature?: VisuallyHiddenProps['feature']
+}
+</script>
+
+<script setup lang="ts" generic="T">
+import { usePrimitiveElement } from '@/Primitive'
+import VisuallyHidden, { type VisuallyHiddenProps } from './VisuallyHidden.vue'
+import { computed, watch } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<VisuallyHiddenInputBubbleProps<T>>(), {
+  feature: 'fully-hidden',
+  checked: undefined,
+})
+
+const { primitiveElement, currentElement } = usePrimitiveElement()
+const valueState = computed(() => props.checked ?? props.value)
+
+watch(valueState, (cur, prev) => {
+  if (!currentElement.value)
+    return
+
+  const input = currentElement.value as HTMLInputElement
+  const inputProto = window.HTMLInputElement.prototype
+  const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor
+  const setValue = descriptor.set
+  if (setValue && cur !== prev) {
+    const inputEvent = new Event('input', { bubbles: true })
+    const changeEvent = new Event('change', { bubbles: true })
+    setValue.call(input, cur)
+    input.dispatchEvent(inputEvent)
+    input.dispatchEvent(changeEvent)
+  }
+})
+</script>
+
+<template>
+  <VisuallyHidden
+    ref="primitiveElement"
+    v-bind="{ ...props, ...$attrs }"
+    as="input"
+  />
+</template>