refactor(VisuallyHidden)!: remove curly brackets in prop name format (#2017)

kricsleo · web-flow · commit e0acb1b9604f · 2025-07-14T19:04:27.000+08:00
* refactor(VisuallyHiddenInput)!: remove curly brackets in prop name format

* test: update tests for prop name formats
diff --git a/packages/core/src/Checkbox/Checkbox.test.ts b/packages/core/src/Checkbox/Checkbox.test.ts
@@ -260,7 +260,7 @@ describe('given checkboxGroup in a form', async () => {
       const submittedData = Object.fromEntries(formData as any)
 
       expect(handleSubmit).toHaveBeenCalledTimes(1)
-      expect(submittedData).toStrictEqual({ '[test][0][name]': 'jack' })
+      expect(submittedData).toStrictEqual({ 'test[0][name]': 'jack' })
     })
   })
 
diff --git a/packages/core/src/Slider/Slider.test.ts b/packages/core/src/Slider/Slider.test.ts
@@ -416,7 +416,7 @@ describe('given slider in a form', async () => {
 
     it('should trigger submit once', () => {
       expect(handleSubmit).toHaveBeenCalledTimes(1)
-      expect(handleSubmit.mock.results[0].value).toStrictEqual({ '[slider][0]': '50' })
+      expect(handleSubmit.mock.results[0].value).toStrictEqual({ 'slider[0]': '50' })
     })
   })
 
@@ -430,7 +430,7 @@ describe('given slider in a form', async () => {
 
     it('should trigger submit once', () => {
       expect(handleSubmit).toHaveBeenCalledTimes(2)
-      expect(handleSubmit.mock.results[1].value).toStrictEqual({ '[slider][0]': '51' })
+      expect(handleSubmit.mock.results[1].value).toStrictEqual({ 'slider[0]': '51' })
     })
   })
 })
diff --git a/packages/core/src/VisuallyHidden/VisuallyHiddenInput.vue b/packages/core/src/VisuallyHidden/VisuallyHiddenInput.vue
@@ -30,16 +30,16 @@ const parsedValue = computed(() => {
     return props.value.flatMap((obj, index) => {
       // if item in array is object
       if (typeof obj === 'object')
-        return Object.entries(obj).map(([key, value]) => ({ name: `[${props.name}][${index}][${key}]`, value }))
+        return Object.entries(obj).map(([key, value]) => ({ name: `${props.name}[${index}][${key}]`, value }))
       // if item in array is not object, may be primitive
       else
-        return ({ name: `[${props.name}][${index}]`, value: obj })
+        return ({ name: `${props.name}[${index}]`, value: obj })
     })
   }
 
   // if object value
   else if (props.value !== null && typeof props.value === 'object' && !Array.isArray(props.value)) {
-    return Object.entries(props.value as object).map(([key, value]) => ({ name: `[${props.name}][${key}]`, value }))
+    return Object.entries(props.value as object).map(([key, value]) => ({ name: `${props.name}[${key}]`, value }))
   }
 
   return []
