Skip to content

Commit 87a3119

Browse files
sfxcodesfxcode
committed
feat(slots): Support Slots
Add Slots to PrimeVue inputs that are using slots #58
1 parent 58502ff commit 87a3119

15 files changed

+92
-29
lines changed

‎src/components/PrimeAutoComplete.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const props = defineProps({
2121
},
2222
})
2323
24-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
24+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
2525
2626
const suggestions = ref([])
2727
@@ -53,6 +53,10 @@ function search(event: AutoCompleteCompleteEvent) {
5353
@complete="search"
5454
@change="handleInput"
5555
@blur="handleBlur"
56-
/>
56+
>
57+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
58+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
59+
</template>
60+
</AutoComplete>
5761
</div>
5862
</template>

‎src/components/PrimeCascadeSelect.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const props = defineProps({
2525
},
2626
})
2727
28-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
28+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
2929
</script>
3030

3131
<template>
@@ -52,6 +52,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
5252
:unstyled="unstyled"
5353
@change="handleInput"
5454
@blur="handleBlur"
55-
/>
55+
>
56+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
57+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
58+
</template>
59+
</CascadeSelect>
5660
</div>
5761
</template>

‎src/components/PrimeCheckbox.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const props = defineProps({
2525
2626
const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
2727
28-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
28+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
2929
3030
const generatedId = generateId()
3131
</script>
@@ -57,7 +57,11 @@ const generatedId = generateId()
5757
:unstyled="unstyled"
5858
@change="handleInput"
5959
@blur="handleBlur"
60-
/>
60+
>
61+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
62+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
63+
</template>
64+
</Checkbox>
6165
<label v-if="hasSuffix" :for="generatedId" class="formkit-suffix">
6266
{{ context?.suffix }}
6367
</label>

‎src/components/PrimeDatePicker.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const props = defineProps({
5959
},
6060
})
6161
62-
const { unstyled, isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
62+
const { validSlotNames, unstyled, isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
6363
6464
function handleBlur(e: DatePickerBlurEvent) {
6565
props.context?.handlers.blur(e.originalEvent)
@@ -132,6 +132,10 @@ function handleClearClick() {
132132
@input="handleInput"
133133
@blur="handleBlur"
134134
@clear-click="handleClearClick"
135-
/>
135+
>
136+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
137+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
138+
</template>
139+
</DatePicker>
136140
</div>
137141
</template>

‎src/components/PrimeInputNumber.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const props = defineProps({
3434
},
3535
})
3636
37-
const { unstyled, isInvalid } = useFormKitInput(props.context)
37+
const { validSlotNames, unstyled, isInvalid } = useFormKitInput(props.context)
3838
3939
function handleBlur(e: InputNumberBlurEvent) {
4040
props.context?.handlers.blur(e.originalEvent)
@@ -99,6 +99,10 @@ watch(
9999
:unstyled="unstyled"
100100
@input="handleInput"
101101
@blur="handleBlur"
102-
/>
102+
>
103+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
104+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
105+
</template>
106+
</InputNumber>
103107
</div>
104108
</template>

‎src/components/PrimeInputOtp.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const props = defineProps({
2323
},
2424
})
2525
26-
const { unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
26+
const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
2727
</script>
2828

2929
<template>
@@ -49,6 +49,10 @@ const { unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.c
4949
:unstyled="unstyled"
5050
@change="handleInput"
5151
@blur="handleBlur"
52-
/>
52+
>
53+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
54+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
55+
</template>
56+
</InputOtp>
5357
</div>
5458
</template>

‎src/components/PrimeListbox.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const props = defineProps({
3030
},
3131
})
3232
33-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
33+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
3434
</script>
3535

3636
<template>
@@ -63,6 +63,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
6363
:unstyled="unstyled"
6464
@change="handleInput"
6565
@blur="handleBlur"
66-
/>
66+
>
67+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
68+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
69+
</template>
70+
</Listbox>
6771
</div>
6872
</template>

‎src/components/PrimeMultiSelect.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const props = defineProps({
5151
},
5252
})
5353
54-
const { unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
54+
const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
5555
</script>
5656

5757
<template>
@@ -105,6 +105,10 @@ const { unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.
105105
:unstyled="unstyled"
106106
@change="handleChange"
107107
@blur="handleBlur"
108-
/>
108+
>
109+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
110+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
111+
</template>
112+
</MultiSelect>
109113
</div>
110114
</template>

‎src/components/PrimePassword.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const props = defineProps({
3030
},
3131
})
3232
33-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
33+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
3434
</script>
3535

3636
<template>
@@ -63,6 +63,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
6363
:unstyled="unstyled"
6464
@input="handleInput"
6565
@blur="handleBlur"
66-
/>
66+
>
67+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
68+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
69+
</template>
70+
</Password>
6771
</div>
6872
</template>

‎src/components/PrimeRating.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const props = defineProps({
2222
},
2323
})
2424
25-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
25+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
2626
</script>
2727

2828
<template>
@@ -47,6 +47,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
4747
:unstyled="unstyled"
4848
@change="handleInput"
4949
@blur="handleBlur"
50-
/>
50+
>
51+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
52+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
53+
</template>
54+
</Rating>
5155
</div>
5256
</template>

‎src/components/PrimeSelect.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const props = defineProps({
4747
},
4848
})
4949
50-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
50+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
5151
</script>
5252

5353
<template>
@@ -102,6 +102,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
102102
:unstyled="unstyled"
103103
@change="handleInput"
104104
@blur="handleBlur"
105-
/>
105+
>
106+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
107+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
108+
</template>
109+
</Select>
106110
</div>
107111
</template>

‎src/components/PrimeSelectButton.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const props = defineProps({
2525
},
2626
})
2727
28-
const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
28+
const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
2929
</script>
3030

3131
<template>
@@ -53,6 +53,10 @@ const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.
5353
:unstyled="unstyled"
5454
@change="handleChange"
5555
@blur="handleBlur"
56-
/>
56+
>
57+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
58+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
59+
</template>
60+
</SelectButton>
5761
</div>
5862
</template>

‎src/components/PrimeToggleButton.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const props = defineProps({
2424
},
2525
})
2626
27-
const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
27+
const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
2828
</script>
2929

3030
<template>
@@ -51,6 +51,10 @@ const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.
5151
:unstyled="unstyled"
5252
@change="handleChange"
5353
@blur="handleBlur"
54-
/>
54+
>
55+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
56+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
57+
</template>
58+
</ToggleButton>
5559
</div>
5660
</template>

‎src/components/PrimeTreeSelect.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const props = defineProps({
2929
},
3030
})
3131
32-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
32+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
3333
</script>
3434

3535
<template>
@@ -61,6 +61,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
6161
:unstyled="unstyled"
6262
@change="handleInput"
6363
@blur="handleBlur"
64-
/>
64+
>
65+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
66+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
67+
</template>
68+
</TreeSelect>
6569
</div>
6670
</template>

‎src/composables/useFormKitInput.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@ export function useFormKitInput(context: any) {
2626
return context?.unstyled ?? isGlobalUnstyledMode()
2727
})
2828

29+
const formKitCreateInputSlots = new Set(['label', 'help', 'messages', 'message', 'input'])
30+
31+
// FormKit slots added by createInput() and should be passed to FormKit not to the wrapped component.
32+
const validSlotNames = computed(() =>
33+
Object.keys(context?.slots).filter(slotName => !formKitCreateInputSlots.has(slotName)),
34+
)
35+
2936
function handleBlur(event: Event) {
3037
context?.handlers.blur(event)
3138
}
@@ -42,5 +49,5 @@ export function useFormKitInput(context: any) {
4249
context?.node.input(e)
4350
}
4451

45-
return { isInvalid, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect }
52+
return { isInvalid, validSlotNames, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect }
4653
}

0 commit comments

Comments
 (0)