Skip to content

Commit 7dcd135

Browse files
sfxcodesfxcode
committed
feat: add type safety to iconClass and onClick props in FormKit components
1 parent 12c112f commit 7dcd135

9 files changed

+38
-38
lines changed

‎src/components/FormKitIcon.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import type { PropType } from 'vue'
23
import { defineProps } from 'vue'
34
45
export interface FormKitIconProps {
@@ -7,8 +8,11 @@ export interface FormKitIconProps {
78
}
89
910
defineProps({
10-
iconClass: String,
11-
onClick: Function,
11+
iconClass: {
12+
type: String,
13+
default: '',
14+
},
15+
onClick: { type: Function as PropType<() => void>, default: undefined },
1216
position: {
1317
type: String,
1418
required: true,

‎src/components/PrimeOutputBoolean.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@ const translated = computed(() => {
3030

3131
<template>
3232
<div class="p-formkit p-output-boolean">
33-
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
34-
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
33+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
34+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
3535
<span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
3636
{{ translated }}
3737
</span>
38-
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
39-
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
38+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
39+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
4040
</div>
4141
</template>

‎src/components/PrimeOutputDate.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@ const converted = computed(() => {
4040

4141
<template>
4242
<div class="p-formkit p-output-date">
43-
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
44-
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
43+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
44+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
4545
<span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
4646
{{ converted }}
4747
</span>
48-
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
49-
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
48+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
49+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
5050
</div>
5151
</template>

‎src/components/PrimeOutputDuration.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ const { formattedDuration } = useOutputDuration()
2121

2222
<template>
2323
<div class="p-formkit p-output-duration">
24-
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
25-
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
24+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
25+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
2626
<span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
2727
{{ formattedDuration(context?._value) }}
2828
</span>
29-
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
30-
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
29+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
30+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
3131
</div>
3232
</template>

‎src/components/PrimeOutputLink.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ const title = computed(() => {
3232

3333
<template>
3434
<div class="p-formkit p-output-link">
35-
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
36-
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
35+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
36+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
3737
<a
3838
v-if="context?.value"
3939
:id="context?.id"
@@ -44,7 +44,7 @@ const title = computed(() => {
4444
>
4545
<span>{{ title }}</span>
4646
</a>
47-
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
48-
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
47+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
48+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
4949
</div>
5050
</template>

‎src/components/PrimeOutputList.vue

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ import FormKitIcon from './FormKitIcon.vue'
88
import FormKitPrefix from './FormKitPrefix.vue'
99
import FormKitSuffix from './FormKitSuffix.vue'
1010
11-
export interface FormKitOutputListProps {
12-
listStyle?: 'div' | 'ul' | 'ol' | 'span'
13-
}
14-
1511
const props = defineProps({
1612
context: {
1713
type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
@@ -28,8 +24,8 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
2824

2925
<template>
3026
<div class="p-formkit p-output-list">
31-
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
32-
<FormKitPrefix v-if="hasPrefix && listStyle === 'span'" :prefix="context?.prefix" />
27+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
28+
<FormKitPrefix v-if="hasPrefix && listStyle === 'span'" :prefix="context?.prefix as string" />
3329
<span v-if="listStyle === 'span'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
3430
<template v-for="(value, index) of context?._value" :key="index">
3531
<span v-if="index !== 0" class="p-output-list-divider" :class="context?.dividerClass">{{ context?.divider ?? ', ' }}</span>
@@ -57,7 +53,7 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
5753
</span>
5854
</li>
5955
</ol>
60-
<FormKitSuffix v-if="hasSuffix && listStyle === 'span'" :suffix="context?.suffix" />
61-
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
56+
<FormKitSuffix v-if="hasSuffix && listStyle === 'span'" :suffix="context?.suffix as string" />
57+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
6258
</div>
6359
</template>

‎src/components/PrimeOutputNumber.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,12 @@ const converted = computed(() => {
4848

4949
<template>
5050
<div class="p-formkit p-output-number">
51-
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
52-
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
51+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
52+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
5353
<span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
5454
{{ converted }}
5555
</span>
56-
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
57-
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
56+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
57+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
5858
</div>
5959
</template>

‎src/components/PrimeOutputReference.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ const title = computed(() => {
3434

3535
<template>
3636
<div class="p-formkit p-output-reference">
37-
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
38-
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
37+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
38+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
3939
<component
4040
:is="context?.linkComponentName ? context?.linkComponentName : 'RouterLink'"
4141
v-if="context?.internal"
@@ -56,7 +56,7 @@ const title = computed(() => {
5656
>
5757
{{ title }}
5858
</a>
59-
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
60-
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
59+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
60+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
6161
</div>
6262
</template>

‎src/components/PrimeOutputText.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
3535

3636
<template>
3737
<div class="p-formkit p-output-text">
38-
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
39-
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
38+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
39+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
4040
<span v-if="context?.html" :id="context?.id" :class="context?.attrs?.class" :style="context?.attrs?.style" v-html="textValue" />
4141
<span v-else :id="context?.id" :class="context?.attrs?.class" :style="context?.attrs?.style" v-text="textValue" />
42-
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
43-
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
42+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
43+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
4444
</div>
4545
</template>

0 commit comments

Comments
 (0)