Skip to content

Commit 838a607

Browse files
sfxcodesfxcode
committed
feat: add prefix and suffix icon click handlers to output components
1 parent 18affbb commit 838a607

14 files changed

+147
-81
lines changed

‎dev/pages/outputs/OutputDuration.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
const primeAttributes = ''
33
const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
44
5+
function prefixClicked() {
6+
console.error('Prefix Icon Clicked')
7+
}
8+
59
const schema
610
= [
711
{
@@ -18,6 +22,8 @@ const schema
1822
$formkit: 'primeOutputDuration',
1923
name: 'duration3',
2024
label: 'Another Duration',
25+
iconPrefix: 'pi pi-check',
26+
onIconPrefixClicked: prefixClicked,
2127
},
2228
2329
]

‎dev/pages/outputs/OutputText.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
const primeAttributes = ''
33
const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
44
5+
function prefixClicked() {
6+
console.error('Prefix Icon Clicked')
7+
}
8+
9+
function suffixClicked() {
10+
console.error('Suffix Icon Clicked')
11+
}
512
const schema
613
= [
714
{
@@ -34,13 +41,15 @@ const schema
3441
label: 'Icon Left',
3542
help: '',
3643
iconPrefix: 'pi pi-check',
44+
onIconPrefixClicked: prefixClicked,
3745
},
3846
{
3947
$formkit: 'primeOutputText',
4048
name: 'iconRight',
4149
label: 'Icon Right',
4250
help: 'Right Icon Demo',
4351
iconSuffix: 'pi pi-check text-yellow-500',
52+
onIconSuffixClicked: suffixClicked,
4453
},
4554
4655
]

‎src/components/FormKitIcon.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { defineProps } from 'vue'
3+
4+
export interface FormKitIconProps {
5+
onIconPrefixClicked?: () => void
6+
onIconSuffixClicked?: () => void
7+
}
8+
9+
defineProps({
10+
iconClass: String,
11+
onClick: Function,
12+
position: {
13+
type: String,
14+
required: true,
15+
validator: (val: string) => ['prefix', 'suffix'].includes(val),
16+
},
17+
})
18+
</script>
19+
20+
<template>
21+
<i :class="[`formkit-${position}-icon`, iconClass]" @click="onClick" />
22+
</template>

‎src/components/FormKitPrefix.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup lang="ts">
2+
import { defineProps } from 'vue'
3+
4+
defineProps({
5+
prefix: String,
6+
})
7+
</script>
8+
9+
<template>
10+
<span class="formkit-prefix">
11+
{{ prefix }}
12+
</span>
13+
</template>

‎src/components/FormKitSuffix.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup lang="ts">
2+
import { defineProps } from 'vue'
3+
4+
defineProps({
5+
suffix: String,
6+
})
7+
</script>
8+
9+
<template>
10+
<span class="formkit-suffix">
11+
{{ suffix }}
12+
</span>
13+
</template>

‎src/components/PrimeOutputBoolean.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
<script setup lang='ts'>
22
import type { FormKitFrameworkContext } from '@formkit/core'
33
import type { PropType } from 'vue'
4+
import type { FormKitIconProps } from './FormKitIcon.vue'
45
import { computed } from 'vue'
56
import { useI18n } from 'vue-i18n'
67
import { useFormKitSection } from '../composables'
8+
import FormKitIcon from './FormKitIcon.vue'
9+
import FormKitPrefix from './FormKitPrefix.vue'
10+
import FormKitSuffix from './FormKitSuffix.vue'
711
812
const props = defineProps({
913
context: {
10-
type: Object as PropType<FormKitFrameworkContext>,
14+
type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
1115
required: true,
1216
},
1317
})
@@ -26,16 +30,12 @@ const translated = computed(() => {
2630

2731
<template>
2832
<div class="p-formkit p-output-boolean">
29-
<i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
30-
<span v-if="hasPrefix" class="formkit-prefix">
31-
{{ context?.prefix }}
32-
</span>
33+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
34+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
3335
<span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
3436
{{ translated }}
3537
</span>
36-
<span v-if="hasSuffix" class="formkit-suffix">
37-
{{ context?.suffix }}
38-
</span>
39-
<i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
38+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
39+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
4040
</div>
4141
</template>

‎src/components/PrimeOutputDate.vue

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
<script setup lang='ts'>
22
import type { FormKitFrameworkContext } from '@formkit/core'
33
import type { PropType } from 'vue'
4+
import type { FormKitIconProps } from './FormKitIcon.vue'
45
import { computed } from 'vue'
56
import { useI18n } from 'vue-i18n'
67
import { useFormKitSection } from '../composables'
8+
import FormKitIcon from './FormKitIcon.vue'
9+
import FormKitPrefix from './FormKitPrefix.vue'
10+
import FormKitSuffix from './FormKitSuffix.vue'
711
812
const props = defineProps({
913
context: {
10-
type: Object as PropType<FormKitFrameworkContext>,
14+
type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
1115
required: true,
1216
},
1317
})
18+
1419
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
1520
1621
const { d } = useI18n()
@@ -35,16 +40,12 @@ const converted = computed(() => {
3540

3641
<template>
3742
<div class="p-formkit p-output-date">
38-
<i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
39-
<span v-if="hasPrefix" class="formkit-prefix">
40-
{{ context?.prefix }}
41-
</span>
43+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
44+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
4245
<span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
4346
{{ converted }}
4447
</span>
45-
<span v-if="hasSuffix" class="formkit-suffix">
46-
{{ context?.suffix }}
47-
</span>
48-
<i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
48+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
49+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
4950
</div>
5051
</template>

‎src/components/PrimeOutputDuration.vue

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
<script setup lang='ts'>
22
import type { FormKitFrameworkContext } from '@formkit/core'
33
import type { PropType } from 'vue'
4+
import type { FormKitIconProps } from './FormKitIcon.vue'
45
import { useFormKitSection, useOutputDuration } from '../composables'
6+
import FormKitIcon from './FormKitIcon.vue'
7+
import FormKitPrefix from './FormKitPrefix.vue'
8+
import FormKitSuffix from './FormKitSuffix.vue'
59
610
const props = defineProps({
711
context: {
8-
type: Object as PropType<FormKitFrameworkContext>,
12+
type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
913
required: true,
1014
},
1115
})
16+
1217
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
1318
1419
const { formattedDuration } = useOutputDuration()
1520
</script>
1621

1722
<template>
1823
<div class="p-formkit p-output-duration">
19-
<i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
20-
<span v-if="hasPrefix" class="formkit-prefix">
21-
{{ context?.prefix }}
22-
</span>
24+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
25+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
2326
<span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
2427
{{ formattedDuration(context?._value) }}
2528
</span>
26-
<span v-if="hasSuffix" class="formkit-suffix">
27-
{{ context?.suffix }}
28-
</span>
29-
<i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
29+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
30+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
3031
</div>
3132
</template>

‎src/components/PrimeOutputLink.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<script setup lang='ts'>
22
import type { FormKitFrameworkContext } from '@formkit/core'
33
import type { PropType } from 'vue'
4+
import type { FormKitIconProps } from './FormKitIcon.vue'
45
import { computed } from 'vue'
56
import { useFormKitSection } from '../composables'
7+
import FormKitIcon from './FormKitIcon.vue'
8+
import FormKitPrefix from './FormKitPrefix.vue'
9+
import FormKitSuffix from './FormKitSuffix.vue'
610
711
const props = defineProps({
812
context: {
9-
type: Object as PropType<FormKitFrameworkContext>,
13+
type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
1014
required: true,
1115
},
1216
})
@@ -28,10 +32,8 @@ const title = computed(() => {
2832

2933
<template>
3034
<div class="p-formkit p-output-link">
31-
<i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
32-
<span v-if="hasPrefix" class="formkit-prefix">
33-
{{ context?.prefix }}
34-
</span>
35+
<FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" position="prefix" />
36+
<FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
3537
<a
3638
v-if="context?.value"
3739
:id="context?.id"
@@ -42,9 +44,7 @@ const title = computed(() => {
4244
>
4345
<span>{{ title }}</span>
4446
</a>
45-
<span v-if="hasSuffix" class="formkit-suffix">
46-
{{ context?.suffix }}
47-
</span>
48-
<i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
47+
<FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
48+
<FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" position="suffix" />
4949
</div>
5050
</template>

‎src/components/PrimeOutputList.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
<script setup lang='ts'>
22
import type { FormKitFrameworkContext } from '@formkit/core'
33
import type { PropType } from 'vue'
4+
import type { FormKitIconProps } from './FormKitIcon.vue'
45
import { computed } from 'vue'
56
import { useFormKitSection } from '../composables'
7+
import FormKitIcon from './FormKitIcon.vue'
8+
import FormKitPrefix from './FormKitPrefix.vue'
9+
import FormKitSuffix from './FormKitSuffix.vue'
610
711
export interface FormKitOutputListProps {
812
listStyle?: 'div' | 'ul' | 'ol' | 'span'
913
}
1014
1115
const props = defineProps({
1216
context: {
13-
type: Object as PropType<FormKitFrameworkContext & FormKitOutputListProps>,
17+
type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
1418
required: true,
1519
},
1620
})
@@ -24,10 +28,8 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
2428

2529
<template>
2630
<div class="p-formkit p-output-list">
27-
<i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
28-
<span v-if="hasPrefix && listStyle === 'span'" class="formkit-prefix">
29-
{{ context?.prefix }}
30-
</span>
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" />
3133
<span v-if="listStyle === 'span'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
3234
<template v-for="(value, index) of context?._value" :key="index">
3335
<span v-if="index !== 0" class="p-output-list-divider" :class="context?.dividerClass">{{ context?.divider ?? ', ' }}</span>
@@ -55,9 +57,7 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
5557
</span>
5658
</li>
5759
</ol>
58-
<span v-if="hasSuffix && listStyle === 'span'" class="formkit-suffix">
59-
{{ context?.suffix }}
60-
</span>
61-
<i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
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" />
6262
</div>
6363
</template>

0 commit comments

Comments
 (0)