feat: support groupAppend & groupAppend slots for form-input component

tada5hi · Feb 11, 2025 · 036ce79 · 036ce79
1 parent 9e43be3
commit 036ce79
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 9 deletions.
diff --git a/packages/form-controls/src/components/constants.ts b/packages/form-controls/src/components/constants.ts
@@ -13,6 +13,10 @@ export enum SlotName {
     DEFAULT = 'default',
     LABEL = 'label',
     HINT = 'hint',
+
+    GROUP_APPEND = 'groupAppend',
+    GROUP_PREPEND = 'groupPrepend',
+
     VALIDATION_GROUP = 'validationGroup',
     VALIDATION_ITEM = 'validationItem',
 }

diff --git a/packages/form-controls/src/components/form-input/component.ts b/packages/form-controls/src/components/form-input/component.ts
@@ -1,5 +1,7 @@
+import type { SlotsType } from 'vue';
 import { defineComponent } from 'vue';
 import { buildFormInput } from './module';
+import type { SlotName } from '../constants';
 
 export const VCFormInput = defineComponent({
     props: {
@@ -14,7 +16,18 @@ export const VCFormInput = defineComponent({
         },
     },
     emits: ['update:modelValue'],
-    setup(props, { attrs, emit }) {
+    slots: Object as SlotsType<{
+        [SlotName.GROUP_APPEND]: undefined,
+        [SlotName.GROUP_PREPEND]: undefined
+    }>,
+    setup(
+        props,
+        {
+            attrs,
+            emit,
+            slots,
+        },
+    ) {
         return () => buildFormInput({
             type: props.type,
 
@@ -24,6 +37,8 @@ export const VCFormInput = defineComponent({
                 emit('update:modelValue', input);
             },
 
+            slotItems: slots,
+
             props: attrs,
         });
     },

diff --git a/packages/form-controls/src/components/form-input/module.ts b/packages/form-controls/src/components/form-input/module.ts
@@ -1,7 +1,7 @@
 import type { VNodeChild } from 'vue';
 import { h, mergeProps, unref } from 'vue';
-import { createComponentOptionsManager } from '@vuecs/core';
-import { Component } from '../constants';
+import { createComponentOptionsManager, hasNormalizedSlot, normalizeSlot } from '@vuecs/core';
+import { Component, SlotName } from '../constants';
 import { buildFormBaseOptions, handleFormValueChanged } from '../form-base';
 import type { FormInputBuildOptions, FormInputBuildOptionsInput } from './type';
 
@@ -84,9 +84,25 @@ export function buildFormInputFromOptions(
 ): VNodeChild {
     const children : VNodeChild = [];
 
-    if (options.groupPrepend) {
+    if (hasNormalizedSlot(SlotName.GROUP_PREPEND)) {
         children.push(
-            h('span', { class: options.groupPrependClass }, [options.groupPrependContent]),
+            h(
+                'span',
+                { class: options.groupPrependClass },
+                [
+                    normalizeSlot(SlotName.GROUP_PREPEND, {}, options.slotItems),
+                ],
+            ),
+        );
+    } else if (options.groupPrepend) {
+        children.push(
+            h(
+                'span',
+                { class: options.groupPrependClass },
+                [
+                    options.groupPrependContent,
+                ],
+            ),
         );
     }
 
@@ -111,9 +127,27 @@ export function buildFormInputFromOptions(
         ),
     ));
 
-    if (options.groupAppend) {
+    if (hasNormalizedSlot(SlotName.GROUP_APPEND)) {
         children.push(
-            h('span', { class: options.groupAppendClass }, [options.groupAppendContent]),
+            h(
+                'span',
+                { class: options.groupAppendClass },
+                [
+                    normalizeSlot(SlotName.GROUP_APPEND, {}, options.slotItems),
+                ],
+            ),
+        );
+    } else if (options.groupAppend) {
+        children.push(
+            h(
+                'span',
+                {
+                    class: options.groupAppendClass,
+                },
+                [
+                    options.groupAppendContent,
+                ],
+            ),
         );
     }
 

diff --git a/packages/form-controls/src/components/form-input/type.ts b/packages/form-controls/src/components/form-input/type.ts
@@ -4,10 +4,12 @@ import type {
     PartialPick,
     VNodeClass,
 } from '@vuecs/core';
-import type { VNodeChild } from 'vue';
+import type { Slots, VNodeChild } from 'vue';
 import type { ExpectFormBaseOptions, FormBaseOptions, FormBaseOptionsInput } from '../form-base';
 
 export type FormInputBuildOptions = FormBaseOptions & {
+    slotItems: Slots,
+
     type: string,
     group: boolean,
     groupClass: VNodeClass,
@@ -34,6 +36,7 @@ export type FormInputBuildOptionsInput =
     'groupPrependContent' |
     'groupAppend' |
     'groupAppendClass' |
-    'groupAppendContent'
+    'groupAppendContent' |
+    'slotItems'
     >>
     >;