, any>
5 | export default component
6 | }
7 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | // eslint.config.js
2 | import antfu from '@antfu/eslint-config'
3 |
4 | export default antfu(
5 | {
6 | ignores: ['README.md'],
7 | },
8 | {
9 | rules: {
10 | 'vue/no-mutating-props': ['error', {
11 | shallowOnly: true,
12 | }],
13 | 'unicorn/consistent-function-scoping': 'off',
14 | },
15 |
16 | },
17 | )
18 |
--------------------------------------------------------------------------------
/formkit-primevue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/formkit-primevue/9e49e70fd4c5e0a9ba1ca3250d58cb52cec008cd/formkit-primevue.png
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "pnpm run dev:build"
3 |
4 | [build.environment]
5 | NPM_FLAGS = "--prefix=/dev/null"
6 | NODE_VERSION = "20"
7 |
8 | [[redirects]]
9 | from = "/*"
10 | to = "/index.html"
11 | status = 200
12 |
--------------------------------------------------------------------------------
/primevue-formkit.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
8 |
11 |
--------------------------------------------------------------------------------
/src/components/FormKitDataEdit.vue:
--------------------------------------------------------------------------------
1 |
94 |
95 |
96 |
97 |
105 |
106 |
109 |
110 |
111 |
113 |
114 |
115 |
116 |
119 |
120 |
121 |
124 |
125 |
126 |
129 |
--------------------------------------------------------------------------------
/src/components/FormKitDataView.vue:
--------------------------------------------------------------------------------
1 |
36 |
37 |
38 |
39 |
45 |
48 |
51 |
52 |
53 |
56 |
--------------------------------------------------------------------------------
/src/components/FormKitDebug.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
21 |
22 |
23 |
26 |
--------------------------------------------------------------------------------
/src/components/PrimeAutoComplete.vue:
--------------------------------------------------------------------------------
1 |
58 |
59 |
60 |
94 |
95 |
--------------------------------------------------------------------------------
/src/components/PrimeCascadeSelect.vue:
--------------------------------------------------------------------------------
1 |
30 |
31 |
32 |
33 |
57 |
58 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/src/components/PrimeCheckbox.vue:
--------------------------------------------------------------------------------
1 |
33 |
34 |
35 |
36 |
37 | {{ context?.prefix }}
38 |
39 |
63 |
64 |
66 |
67 |
68 | {{ context?.suffix }}
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/src/components/PrimeColorPicker.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 |
48 |
49 |
--------------------------------------------------------------------------------
/src/components/PrimeEditor.vue:
--------------------------------------------------------------------------------
1 |
31 |
32 |
33 |
34 |
56 |
57 |
--------------------------------------------------------------------------------
/src/components/PrimeInputMask.vue:
--------------------------------------------------------------------------------
1 |
33 |
34 |
35 |
36 |
37 |
63 |
88 |
89 |
--------------------------------------------------------------------------------
/src/components/PrimeInputOtp.vue:
--------------------------------------------------------------------------------
1 |
28 |
29 |
30 |
31 |
54 |
55 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/src/components/PrimeInputText.vue:
--------------------------------------------------------------------------------
1 |
29 |
30 |
31 |
32 |
33 |
57 |
80 |
81 |
--------------------------------------------------------------------------------
/src/components/PrimeKnob.vue:
--------------------------------------------------------------------------------
1 |
43 |
44 |
45 |
46 |
75 |
76 |
--------------------------------------------------------------------------------
/src/components/PrimeListbox.vue:
--------------------------------------------------------------------------------
1 |
34 |
35 |
36 |
37 |
66 |
67 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/src/components/PrimeOutputBoolean.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 |
31 | {{ context?.prefix }}
32 |
33 |
34 | {{ translated }}
35 |
36 |
37 | {{ context?.suffix }}
38 |
39 |
41 |
42 |
--------------------------------------------------------------------------------
/src/components/PrimeOutputDate.vue:
--------------------------------------------------------------------------------
1 |
35 |
36 |
37 |
38 |
40 | {{ context?.prefix }}
41 |
42 |
43 | {{ converted }}
44 |
45 |
46 | {{ context?.suffix }}
47 |
48 |
50 |
51 |
--------------------------------------------------------------------------------
/src/components/PrimeOutputDuration.vue:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
21 | {{ context?.prefix }}
22 |
23 |
24 | {{ formattedDuration(context?._value) }}
25 |
26 |
27 | {{ context?.suffix }}
28 |
29 |
31 |
32 |
--------------------------------------------------------------------------------
/src/components/PrimeOutputLink.vue:
--------------------------------------------------------------------------------
1 |
28 |
29 |
30 |
50 |
51 |
--------------------------------------------------------------------------------
/src/components/PrimeOutputList.vue:
--------------------------------------------------------------------------------
1 |
24 |
25 |
26 |
63 |
64 |
--------------------------------------------------------------------------------
/src/components/PrimeOutputNumber.vue:
--------------------------------------------------------------------------------
1 |
43 |
44 |
45 |
46 |
48 | {{ context?.prefix }}
49 |
50 |
51 | {{ converted }}
52 |
53 |
54 | {{ context?.suffix }}
55 |
56 |
58 |
59 |
--------------------------------------------------------------------------------
/src/components/PrimeOutputReference.vue:
--------------------------------------------------------------------------------
1 |
30 |
31 |
32 |
62 |
63 |
--------------------------------------------------------------------------------
/src/components/PrimeOutputText.vue:
--------------------------------------------------------------------------------
1 |
31 |
32 |
33 |
34 |
36 | {{ context?.prefix }}
37 |
38 |
41 | {{ context?.suffix }}
42 |
43 |
45 |
46 |
--------------------------------------------------------------------------------
/src/components/PrimePassword.vue:
--------------------------------------------------------------------------------
1 |
35 |
36 |
37 |
73 |
74 |
--------------------------------------------------------------------------------
/src/components/PrimeRadioButton.vue:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
53 |
54 |
--------------------------------------------------------------------------------
/src/components/PrimeRating.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 |
50 |
51 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/components/PrimeSelectButton.vue:
--------------------------------------------------------------------------------
1 |
31 |
32 |
33 |
34 |
59 |
60 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/src/components/PrimeSlider.vue:
--------------------------------------------------------------------------------
1 |
33 |
34 |
35 |
36 |
60 |
61 |
--------------------------------------------------------------------------------
/src/components/PrimeTextarea.vue:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
30 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/src/components/PrimeToggleButton.vue:
--------------------------------------------------------------------------------
1 |
30 |
31 |
32 |
33 |
57 |
58 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/src/components/PrimeToggleSwitch.vue:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
30 |
31 | {{ context?.prefix }}
32 |
33 |
54 | {{ context?.suffix }}
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/src/components/PrimeTreeSelect.vue:
--------------------------------------------------------------------------------
1 |
34 |
35 |
36 |
37 |
66 |
67 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import FormKitDataEdit from './FormKitDataEdit.vue'
2 | import FormKitDataView from './FormKitDataView.vue'
3 | import FormKitDataDebug from './FormKitDebug.vue'
4 | import PrimeAutoComplete from './PrimeAutoComplete.vue'
5 | import PrimeCascadeSelect from './PrimeCascadeSelect.vue'
6 | import PrimeCheckbox from './PrimeCheckbox.vue'
7 | import PrimeColorPicker from './PrimeColorPicker.vue'
8 | import PrimeDatePicker from './PrimeDatePicker.vue'
9 | import PrimeEditor from './PrimeEditor.vue'
10 | import PrimeInputMask from './PrimeInputMask.vue'
11 | import PrimeInputNumber from './PrimeInputNumber.vue'
12 | import PrimeInputText from './PrimeInputText.vue'
13 | import PrimeKnob from './PrimeKnob.vue'
14 | import PrimeListbox from './PrimeListbox.vue'
15 | import PrimeMultiSelect from './PrimeMultiSelect.vue'
16 | import PrimePassword from './PrimePassword.vue'
17 | import PrimeRadioButton from './PrimeRadioButton.vue'
18 | import PrimeRating from './PrimeRating.vue'
19 | import PrimeSelect from './PrimeSelect.vue'
20 | import PrimeSelectButton from './PrimeSelectButton.vue'
21 | import PrimeSlider from './PrimeSlider.vue'
22 | import PrimeTextarea from './PrimeTextarea.vue'
23 | import PrimeToggleButton from './PrimeToggleButton.vue'
24 | import PrimeInputSwitch from './PrimeToggleSwitch.vue'
25 | import PrimeTreeSelect from './PrimeTreeSelect.vue'
26 |
27 | export {
28 | FormKitDataDebug,
29 | FormKitDataEdit,
30 | FormKitDataView,
31 | PrimeAutoComplete,
32 | PrimeCascadeSelect,
33 | PrimeCheckbox,
34 | PrimeColorPicker,
35 | PrimeDatePicker,
36 | PrimeEditor,
37 | PrimeInputMask,
38 | PrimeInputNumber,
39 | PrimeInputSwitch,
40 | PrimeInputText,
41 | PrimeKnob,
42 | PrimeListbox,
43 | PrimeMultiSelect,
44 | PrimePassword,
45 | PrimeRadioButton,
46 | PrimeRating,
47 | PrimeSelect,
48 | PrimeSelectButton,
49 | PrimeSlider,
50 | PrimeTextarea,
51 | PrimeToggleButton,
52 | PrimeTreeSelect,
53 | }
54 |
--------------------------------------------------------------------------------
/src/composables/index.ts:
--------------------------------------------------------------------------------
1 | import { useFormKitInput } from './useFormKitInput'
2 | import { useFormKitRepeater } from './useFormKitRepeater'
3 | import { useFormKitSchema } from './useFormKitSchema'
4 | import { useFormKitSection } from './useFormKitSection'
5 | import { useInputEditor } from './useInputEditor'
6 | import { useInputEditorSchema } from './useInputEditorSchema'
7 | import { useOutputDuration } from './useOutputDuration'
8 | import { usePrimeInputs } from './usePrimeInputs'
9 |
10 | export {
11 | useFormKitInput,
12 | useFormKitRepeater,
13 | useFormKitSchema,
14 | useFormKitSection,
15 | useInputEditor,
16 | useInputEditorSchema,
17 | useOutputDuration,
18 | usePrimeInputs,
19 | }
20 |
--------------------------------------------------------------------------------
/src/composables/useFormKitInput.ts:
--------------------------------------------------------------------------------
1 | import { usePrimeVue } from 'primevue/config'
2 | import { computed } from 'vue'
3 |
4 | export function useFormKitInput(context: any) {
5 | const isInvalid = computed(() => {
6 | return context?.state?.validationVisible && !context?.state?.valid
7 | })
8 |
9 | const styleClass = computed(() => {
10 | return (context?.state?.validationVisible && !context?.state?.valid)
11 | ? `${context?.attrs?.class || ''} p-invalid`
12 | : context?.attrs?.class || ''
13 | })
14 |
15 | function isGlobalUnstyledMode(): boolean {
16 | let result = false
17 | try {
18 | const primevue = usePrimeVue()
19 | result = primevue?.config?.unstyled || false
20 | }
21 | // eslint-disable-next-line unused-imports/no-unused-vars
22 | catch (e) {
23 | }
24 | return result
25 | }
26 |
27 | const unstyled = computed(() => {
28 | return context?.unstyled ?? isGlobalUnstyledMode()
29 | })
30 |
31 | const formKitCreateInputSlots = new Set(['label', 'help', 'messages', 'message', 'input'])
32 |
33 | // FormKit slots added by createInput() and should be passed to FormKit not to the wrapped component.
34 | const validSlotNames = computed(() =>
35 | Object.keys(context?.slots || {}).filter(slotName => !formKitCreateInputSlots.has(slotName)),
36 | )
37 |
38 | function handleBlur(event: Event) {
39 | context?.handlers?.blur?.(event)
40 | }
41 |
42 | function handleChange(_: any) {
43 | context?.node?.input?.(context?._value)
44 | }
45 |
46 | function handleInput(_: any) {
47 | context?.node?.input?.(context?._value)
48 | }
49 |
50 | function handleSelect(e: any) {
51 | context?.node?.input?.(e)
52 | }
53 |
54 | return { isInvalid, validSlotNames, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect }
55 | }
56 |
--------------------------------------------------------------------------------
/src/composables/useFormKitRepeater.ts:
--------------------------------------------------------------------------------
1 | import { useFormKitSchema } from './useFormKitSchema'
2 |
3 | export function useFormKitRepeater() {
4 | const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema()
5 |
6 | function addInsertButton(label: string = 'Add', innerClass: string = '', outerClass: string = '', buttonClass: string = 'p-button-sm', iconClass: string = 'pi pi-plus') {
7 | return addElementsInOuterDiv([
8 | addComponent('Button', { onClick: '$addNode($node)', label, class: buttonClass, icon: iconClass }, '$node.value.length == 0'),
9 | ], innerClass, outerClass)
10 | }
11 |
12 | function addListGroupFunctions(data: any, addNodeDefaultObject: object = {}) {
13 | const swapElements = (array: any[], index1: number, index2: number) => {
14 | array[index1] = array.splice(index2, 1, array[index1])[0]
15 | return array
16 | }
17 |
18 | data.addNode = (parentNode: any) => (): void => {
19 | const newArray: any[] = [...parentNode.value, addNodeDefaultObject]
20 | parentNode.input(newArray, false)
21 | }
22 | data.removeNode = (parentNode: any, index: number) => (): void => {
23 | parentNode.input(parentNode._value.filter((_: any, i: number): boolean => i !== index), false)
24 | }
25 | data.moveNodeUp = (parentNode: any, index: number) => (): void => {
26 | const array: any[] = [...parentNode.value]
27 | if (index > 0)
28 | parentNode.input(swapElements(array, index - 1, index), false)
29 | }
30 | data.moveNodeDown = (parentNode: any, index: number) => (): void => {
31 | const array: any[] = [...parentNode.value]
32 | if (index < array.length - 1)
33 | parentNode.input(swapElements(array, index, index + 1), false)
34 | }
35 | data.copyNode = (parentNode: any, index: number) => (): void => {
36 | const obj: any = parentNode.value[index]
37 | const newArray: any[] = [...parentNode.value, { ...obj }]
38 | parentNode.input(newArray, false)
39 | }
40 | }
41 |
42 | function addGroupButtons(innerClass: string = '', outerClass: string = 'col-4', label: string = 'Actions', help: string = '', render: string = 'true') {
43 | const addButtonComponent = (onClick: string = '', label: string = '', icon: string = '', severity: string = '', render: string = 'true', styleClass: string = 'p-button-sm'): object => {
44 | return addComponent('Button', { onClick, label, icon, class: styleClass, severity }, render)
45 | }
46 |
47 | return addElementsInOuterDiv([
48 | addButtonComponent('$removeNode($node, $index)', '', 'pi pi-times', 'danger'),
49 | addButtonComponent('$copyNode($node, $index)', '', 'pi pi-plus'),
50 | addButtonComponent('$moveNodeUp($node, $index)', '', 'pi pi-arrow-up', 'secondary', '$index != 0'),
51 | addElement('span', [], { class: 'p-space' }, '$index == 0'),
52 | addButtonComponent('$moveNodeDown($node, $index)', '', 'pi pi-arrow-down', 'secondary', '$index < $node.value.length -1'),
53 | addElement('span', [], { class: 'p-space' }, '$index == $node.value.length -1'),
54 | ], `p-action-buttons ${innerClass}`, outerClass, label, help, render)
55 | }
56 |
57 | return { addInsertButton, addGroupButtons, addListGroupFunctions }
58 | }
59 |
--------------------------------------------------------------------------------
/src/composables/useFormKitSchema.ts:
--------------------------------------------------------------------------------
1 | export function useFormKitSchema() {
2 | const addComponent = (component: string = 'Button', props: object = {}, render: string | boolean = true, formKitAttrs: object = {}): object => {
3 | return {
4 | $cmp: component,
5 | if: render.toString(),
6 | props,
7 | ...formKitAttrs,
8 | }
9 | }
10 |
11 | const addElement = (element: string = 'div', children: any[] | string = [], attrs: object = {}, render: string | boolean = true, formKitAttrs: object = {}) => {
12 | return {
13 | $el: element,
14 | if: render.toString(),
15 | attrs,
16 | children,
17 | ...formKitAttrs,
18 | }
19 | }
20 |
21 | const addGroup = (name: string, children: object[] = [], render: string | boolean = true, formKitAttrs: object = {}) => {
22 | return {
23 | $formkit: 'group',
24 | if: render.toString(),
25 | name,
26 | children,
27 | ...formKitAttrs,
28 | }
29 | }
30 |
31 | const addList = (name: string, children: object[] = [], dynamic: boolean = true, render: string | boolean = true, formKitAttrs: object = {}) => {
32 | return {
33 | $formkit: 'list',
34 | if: render.toString(),
35 | name,
36 | dynamic,
37 | children,
38 | ...formKitAttrs,
39 | }
40 | }
41 |
42 | const addListGroup = (children: object[] = [], render: string | boolean = true, formKitAttrs: object = {}) => {
43 | return {
44 | $formkit: 'group',
45 | if: render.toString(),
46 | for: ['item', 'index', '$items'], // 👈 $items is in the slot’s scope
47 | key: '$item',
48 | index: '$index',
49 | children,
50 | ...formKitAttrs,
51 | }
52 | }
53 |
54 | const addElementsInOuterDiv = (children: object[] = [], innerClass: string = '', outerClass: string = '', label: string = '', help: string = '', render: string | boolean = true) => {
55 | const inner = addElement('div', children, { class: `formkit-inner ${innerClass}`, style: 'position: relative;' })
56 | const labelDiv = addElement('label', [label], { class: 'formkit-label' })
57 | const wrapperDiv = addElement('div', [labelDiv, inner], { class: 'formkit-wrapper' })
58 | const helpDiv = addElement('div', [help], { class: 'formkit-help' })
59 | return addElement('div', [wrapperDiv, helpDiv], { class: `formkit-outer ${outerClass}`, style: 'position: relative;' }, render)
60 | }
61 |
62 | return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv }
63 | }
64 |
--------------------------------------------------------------------------------
/src/composables/useFormKitSection.ts:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from 'uuid'
2 | import { computed } from 'vue'
3 |
4 | export function useFormKitSection(context: any) {
5 | const hasPrefix = computed(() => {
6 | return Boolean(context?.prefix?.length > 0)
7 | })
8 |
9 | const hasPrefixIcon = computed(() => {
10 | return Boolean(context?.iconPrefix?.length > 0)
11 | })
12 |
13 | const hasSuffixIcon = computed(() => {
14 | return Boolean(context?.iconSuffix?.length > 0)
15 | })
16 |
17 | const hasSuffix = computed(() => {
18 | return Boolean(context?.suffix?.length > 0)
19 | })
20 |
21 | function generateId() {
22 | return uuidv4()
23 | }
24 |
25 | return { generateId, hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon }
26 | }
27 |
--------------------------------------------------------------------------------
/src/composables/useOutputDuration.ts:
--------------------------------------------------------------------------------
1 | export function useOutputDuration() {
2 | function durationToMinutes(duration: string): number {
3 | let hours = 0
4 | let minutes = 0
5 |
6 | const lowerDuration = duration.toLowerCase()
7 |
8 | if (lowerDuration.includes(':')) {
9 | [hours, minutes] = lowerDuration.split(':').map(part => +part.trim())
10 | }
11 | else {
12 | if (lowerDuration.includes('h')) {
13 | hours = +lowerDuration.split('h')[0].trim()
14 | const remainder = lowerDuration.split('h')[1] || ''
15 |
16 | if (remainder.includes('m'))
17 | minutes = +remainder.split('m')[0].trim()
18 | else if (/^\d+$/.test(remainder))
19 | minutes = +remainder
20 | }
21 | else if (lowerDuration.includes('m')) {
22 | minutes = +lowerDuration.split('m')[0].trim()
23 | }
24 | else if (/^\d+$/.test(lowerDuration)) {
25 | minutes = +lowerDuration
26 | }
27 | }
28 |
29 | return hours * 60 + minutes
30 | }
31 |
32 | function formattedDuration(duration: string): string {
33 | const minutes = durationToMinutes(duration)
34 | const hours = Math.trunc(minutes / 60)
35 | const remainingMinutes = minutes % 60
36 |
37 | if (minutes === 0)
38 | return '0'
39 | return `${hours > 0 ? `${hours}h` : ''}${hours > 0 && remainingMinutes > 0 ? ' ' : ''}${remainingMinutes > 0 ? `${remainingMinutes}m` : ''}`
40 | }
41 |
42 | return { durationToMinutes, formattedDuration }
43 | }
44 |
--------------------------------------------------------------------------------
/src/composables/usePrimeInputs.ts:
--------------------------------------------------------------------------------
1 | import AutoComplete from 'primevue/autocomplete'
2 | import Button from 'primevue/button'
3 | import CascadeSelect from 'primevue/cascadeselect'
4 | import Checkbox from 'primevue/checkbox'
5 | import Chip from 'primevue/chip'
6 | import ColorPicker from 'primevue/colorpicker'
7 | import DatePicker from 'primevue/datepicker'
8 | import InputMask from 'primevue/inputmask'
9 | import InputNumber from 'primevue/inputnumber'
10 | import InputOtp from 'primevue/inputotp'
11 | import InputText from 'primevue/inputtext'
12 | import Knob from 'primevue/knob'
13 | import Listbox from 'primevue/listbox'
14 | import MultiSelect from 'primevue/multiselect'
15 | import Password from 'primevue/password'
16 | import RadioButton from 'primevue/radiobutton'
17 | import Rating from 'primevue/rating'
18 | import Select from 'primevue/select'
19 | import SelectButton from 'primevue/selectbutton'
20 | import Slider from 'primevue/slider'
21 | import Textarea from 'primevue/textarea'
22 | import ToggleButton from 'primevue/togglebutton'
23 | import ToggleSwitch from 'primevue/toggleswitch'
24 | import TreeSelect from 'primevue/treeselect'
25 |
26 | export function usePrimeInputs() {
27 | function registerInputs(app: any) {
28 | app.component('AutoComplete', AutoComplete)
29 | app.component('Button', Button)
30 | app.component('CascadeSelect', CascadeSelect)
31 | app.component('Checkbox', Checkbox)
32 | app.component('Chip', Chip)
33 | app.component('ColorPicker', ColorPicker)
34 | app.component('DatePicker', DatePicker)
35 | app.component('InputMask', InputMask)
36 | app.component('InputNumber', InputNumber)
37 | app.component('InputOtp', InputOtp)
38 | app.component('InputText', InputText)
39 | app.component('Knob', Knob)
40 | app.component('Listbox', Listbox)
41 | app.component('MultiSelect', MultiSelect)
42 | app.component('Password', Password)
43 | app.component('RadioButton', RadioButton)
44 | app.component('Rating', Rating)
45 | app.component('Select', Select)
46 | app.component('SelectButton', SelectButton)
47 | app.component('Slider', Slider)
48 | app.component('Textarea', Textarea)
49 | app.component('ToggleButton', ToggleButton)
50 | app.component('ToggleSwitch', ToggleSwitch)
51 | app.component('TreeSelect', TreeSelect)
52 | }
53 | return { registerInputs }
54 | }
55 |
--------------------------------------------------------------------------------
/src/definitions/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | primeAutoCompleteDefinition,
3 | primeCascadeSelectDefinition,
4 | primeCheckboxDefinition,
5 | primeColorPickerDefinition,
6 | primeDatePickerDefinition,
7 | primeEditorDefinition,
8 | primeInputMaskDefinition,
9 | primeInputNumberDefinition,
10 | primeInputOtpDefinition,
11 | primeInputTextDefinition,
12 | primeKnobDefinition,
13 | primeListboxDefinition,
14 | primeMultiSelectDefinition,
15 | primePasswordDefinition,
16 | primeRadioButtonDefinition,
17 | primeRatingDefinition,
18 | primeSelectButtonDefinition,
19 | primeSelectDefinition,
20 | primeSliderDefinition,
21 | primeTextareaDefinition,
22 | primeToggleButtonDefinition,
23 | primeToggleSwitchDefinition,
24 | primeTreeSelectDefinition,
25 | } from './input'
26 |
27 | import {
28 | primeOutputBooleanDefinition,
29 | primeOutputDateDefinition,
30 | primeOutputDurationDefinition,
31 | primeOutputLinkDefinition,
32 | primeOutputListDefinition,
33 | primeOutputNumberDefinition,
34 | primeOutputReferenceDefinition,
35 | primeOutputTextDefinition,
36 | } from './output'
37 |
38 | export const primeInputs = {
39 | primeAutoComplete: primeAutoCompleteDefinition,
40 | primeInputText: primeInputTextDefinition,
41 | primeInputNumber: primeInputNumberDefinition,
42 | primeInputMask: primeInputMaskDefinition,
43 | primePassword: primePasswordDefinition,
44 | primeCheckbox: primeCheckboxDefinition,
45 | primeToggleSwitch: primeToggleSwitchDefinition,
46 | primeTextarea: primeTextareaDefinition,
47 | primeSelect: primeSelectDefinition,
48 | primeMultiSelect: primeMultiSelectDefinition,
49 | primeDatePicker: primeDatePickerDefinition,
50 | primeSlider: primeSliderDefinition,
51 | primeKnob: primeKnobDefinition,
52 | primeRating: primeRatingDefinition,
53 | primeRadioButton: primeRadioButtonDefinition,
54 | primeColorPicker: primeColorPickerDefinition,
55 | primeToggleButton: primeToggleButtonDefinition,
56 | primeListbox: primeListboxDefinition,
57 | primeSelectButton: primeSelectButtonDefinition,
58 | primeCascadeSelect: primeCascadeSelectDefinition,
59 | primeTreeSelect: primeTreeSelectDefinition,
60 | primeInputOtp: primeInputOtpDefinition,
61 | primeEditor: primeEditorDefinition,
62 | }
63 |
64 | export const primeOutputs = {
65 | primeOutputText: primeOutputTextDefinition,
66 | primeOutputLink: primeOutputLinkDefinition,
67 | primeOutputReference: primeOutputReferenceDefinition,
68 | primeOutputNumber: primeOutputNumberDefinition,
69 | primeOutputDate: primeOutputDateDefinition,
70 | primeOutputBoolean: primeOutputBooleanDefinition,
71 | primeOutputDuration: primeOutputDurationDefinition,
72 | primeOutputList: primeOutputListDefinition,
73 | primeEditor: primeEditorDefinition,
74 | }
75 |
--------------------------------------------------------------------------------
/src/definitions/output.ts:
--------------------------------------------------------------------------------
1 | import type { FormKitTypeDefinition } from '@formkit/core'
2 | import { createInput } from '@formkit/vue'
3 | import PrimeOutputBoolean from '../components/PrimeOutputBoolean.vue'
4 | import PrimeOutputDate from '../components/PrimeOutputDate.vue'
5 | import PrimeOutputDuration from '../components/PrimeOutputDuration.vue'
6 | import PrimeOutputLink from '../components/PrimeOutputLink.vue'
7 | import PrimeOutputList from '../components/PrimeOutputList.vue'
8 | import PrimeOutputNumber from '../components/PrimeOutputNumber.vue'
9 | import PrimeOutputReference from '../components/PrimeOutputReference.vue'
10 | import PrimeOutputText from '../components/PrimeOutputText.vue'
11 |
12 | export const primeOutputTextDefinition: FormKitTypeDefinition = createInput(PrimeOutputText, {
13 | props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'isTranslationKey', 'html'],
14 | })
15 |
16 | export const primeOutputDateDefinition: FormKitTypeDefinition = createInput(PrimeOutputDate, {
17 | props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix'],
18 | })
19 |
20 | export const primeOutputNumberDefinition: FormKitTypeDefinition = createInput(PrimeOutputNumber, {
21 | props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix'],
22 | })
23 |
24 | export const primeOutputLinkDefinition: FormKitTypeDefinition = createInput(PrimeOutputLink, {
25 | props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'title'],
26 | })
27 |
28 | export const primeOutputReferenceDefinition: FormKitTypeDefinition = createInput(PrimeOutputReference, {
29 | props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'reference', 'internal', 'linkComponentName', 'title'],
30 | })
31 |
32 | export const primeOutputBooleanDefinition: FormKitTypeDefinition = createInput(PrimeOutputBoolean, {
33 | props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'trueValue', 'falseValue'],
34 | })
35 |
36 | export const primeOutputDurationDefinition: FormKitTypeDefinition = createInput(PrimeOutputDuration, {
37 | props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix'],
38 | })
39 |
40 | export const primeOutputListDefinition: FormKitTypeDefinition = createInput(PrimeOutputList, {
41 | props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'divider', 'itemClass', 'dividerClass', 'listStyle'],
42 | })
43 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import type { FormKitInputs } from '@formkit/inputs'
2 | import type { CascadeSelectProps } from 'primevue/cascadeselect'
3 | import type { ListboxProps } from 'primevue/listbox'
4 | import type { MultiSelectProps } from 'primevue/multiselect'
5 | import type { SelectProps } from 'primevue/select'
6 | import type { SelectButtonProps } from 'primevue/selectbutton'
7 | import type { TreeSelectProps } from 'primevue/treeselect'
8 | import { FormKitDataDebug, FormKitDataEdit, FormKitDataView } from './components'
9 | import { useFormKitRepeater, useFormKitSchema, useInputEditor, useInputEditorSchema, usePrimeInputs } from './composables'
10 | import { primeInputs, primeOutputs } from './definitions'
11 |
12 | export {
13 | FormKitDataDebug,
14 | FormKitDataEdit,
15 | FormKitDataView,
16 | primeInputs,
17 | primeOutputs,
18 | useFormKitRepeater,
19 | useFormKitSchema,
20 | useInputEditor,
21 | useInputEditorSchema,
22 | usePrimeInputs,
23 | }
24 |
25 | declare module '@formkit/inputs' {
26 | interface FormKitInputProps> {
27 | primeAutoComplete: {
28 | type: 'primeAutoComplete'
29 | }
30 | primeInputText: {
31 | type: 'primeInputText'
32 | }
33 | primeInputNumber: {
34 | type: 'primeInputNumber'
35 | }
36 | primeInputMask: {
37 | type: 'primeInputMask'
38 | }
39 | primePassword: {
40 | type: 'primePassword'
41 | }
42 | primeCheckbox: {
43 | type: 'primeCheckbox'
44 | }
45 | primeToggleSwitch: {
46 | type: 'primeToggleSwitch'
47 | }
48 | primeTextarea: {
49 | type: 'primeTextarea'
50 | }
51 | primeEditor: {
52 | type: 'primeEditor'
53 | }
54 | primeSelect: {
55 | type: 'primeSelect'
56 | options?: SelectProps['options']
57 | }
58 | primeMultiSelect: {
59 | type: 'primeMultiSelect'
60 | options?: MultiSelectProps['options']
61 | }
62 | primeDatePicker: {
63 | type: 'primeDatePicker'
64 | }
65 | primeSlider: {
66 | type: 'primeSlider'
67 | }
68 | primeKnob: {
69 | type: 'primeKnob'
70 | }
71 | primeRating: {
72 | type: 'primeRating'
73 | }
74 | primeRadioButton: {
75 | type: 'primeRadioButton'
76 | }
77 | primeColorPicker: {
78 | type: 'primeColorPicker'
79 | }
80 | primeToggleButton: {
81 | type: 'primeToggleButton'
82 | }
83 | primeListbox: {
84 | type: 'primeListbox'
85 | options?: ListboxProps['options']
86 | }
87 | primeSelectButton: {
88 | type: 'primeSelectButton'
89 | options?: SelectButtonProps['options']
90 | }
91 | primeCascadeSelect: {
92 | type: 'primeCascadeSelect'
93 | options?: CascadeSelectProps['options']
94 | }
95 | primeTreeSelect: {
96 | type: 'primeTreeSelect'
97 | options?: TreeSelectProps['options']
98 | }
99 | primeInputOtp: {
100 | type: 'primeInputOtp'
101 | }
102 | primeOutputText: {
103 | type: 'primeOutputText'
104 | }
105 | primeOutputLink: {
106 | type: 'primeOutputLink'
107 | }
108 | primeOutputReference: {
109 | type: 'primeOutputReference'
110 | }
111 | primeOutputNumber: {
112 | type: 'primeOutputNumber'
113 | }
114 | primeOutputDate: {
115 | type: 'primeOutputDate'
116 | }
117 | primeOutputBoolean: {
118 | type: 'primeOutputBoolean'
119 | }
120 | primeOutputDuration: {
121 | type: 'primeOutputDuration'
122 | }
123 | primeOutputList: {
124 | type: 'primeOutputList'
125 | }
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/src/plugins/index.ts:
--------------------------------------------------------------------------------
1 | import type { FormKitExtendableSchemaRoot, FormKitNode } from '@formkit/core'
2 |
3 | export function addPrimeAsteriskPlugin(node: FormKitNode): void {
4 | if (!node.props.type.startsWith('prime'))
5 | return
6 |
7 | node.on('created', () => {
8 | if (node.props.definition?.schema) {
9 | const schemaFn = node.props.definition?.schema as FormKitExtendableSchemaRoot
10 | node.props.definition!.schema = (sectionsSchema = {}) => {
11 | sectionsSchema.label = {
12 | children: ['$label', {
13 | $el: 'span',
14 | if: '$state.required',
15 | attrs: {
16 | class: 'p-formkit-asterisk',
17 | },
18 | children: ['*'],
19 | }],
20 | }
21 |
22 | return schemaFn(sectionsSchema)
23 | }
24 | }
25 | })
26 | }
27 |
--------------------------------------------------------------------------------
/test/useOutputDuration.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, it } from 'vitest'
2 | import { useOutputDuration } from '../src/composables'
3 |
4 | it('durationToMinutes', () => {
5 | const { durationToMinutes } = useOutputDuration()
6 | expect(durationToMinutes('2h')).toBe(120)
7 | expect(durationToMinutes('40m')).toBe(40)
8 | expect(durationToMinutes('2h20m')).toBe(140)
9 | expect(durationToMinutes('2:40')).toBe(160)
10 | })
11 |
12 | it('formattedDuration', () => {
13 | const { formattedDuration } = useOutputDuration()
14 | expect(formattedDuration('120m')).toBe('2h')
15 | expect(formattedDuration('40m')).toBe('40m')
16 | expect(formattedDuration('140m')).toBe('2h 20m')
17 | })
18 |
19 | it('handles empty duration string', () => {
20 | const { durationToMinutes } = useOutputDuration()
21 | expect(durationToMinutes('')).toBe(0)
22 | })
23 |
24 | it('handles hours-only duration', () => {
25 | const { durationToMinutes } = useOutputDuration()
26 | expect(durationToMinutes('3h')).toBe(180)
27 | })
28 |
29 | it('handles minutes-only duration', () => {
30 | const { durationToMinutes } = useOutputDuration()
31 | expect(durationToMinutes('45m')).toBe(45)
32 | })
33 |
34 | it('handles colon-separated hours and minutes', () => {
35 | const { durationToMinutes } = useOutputDuration()
36 | expect(durationToMinutes('1:30')).toBe(90)
37 | })
38 |
39 | it('handles text format hours and minutes', () => {
40 | const { durationToMinutes } = useOutputDuration()
41 | expect(durationToMinutes('2h15m')).toBe(135)
42 | })
43 |
44 | it('returns original string for invalid input', () => {
45 | const { formattedDuration } = useOutputDuration()
46 | expect(formattedDuration('invalid')).toBe('0')
47 | })
48 |
49 | it('formats minutes-only duration', () => {
50 | const { formattedDuration } = useOutputDuration()
51 | expect(formattedDuration('45m')).toBe('45m')
52 | })
53 |
54 | it('formats hours-only duration', () => {
55 | const { formattedDuration } = useOutputDuration()
56 | expect(formattedDuration('120m')).toBe('2h')
57 | })
58 |
59 | it('formats hours and minutes duration', () => {
60 | const { formattedDuration } = useOutputDuration()
61 | expect(formattedDuration('135M')).toBe('2h 15m')
62 | })
63 |
64 | it('handles non-numeric duration values', () => {
65 | const { durationToMinutes } = useOutputDuration()
66 | expect(durationToMinutes('h')).toBe(0)
67 | expect(durationToMinutes('m')).toBe(0)
68 | })
69 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@vue/tsconfig/tsconfig.dom.json",
3 | "compilerOptions": {
4 | "types": ["vitest/globals"]
5 | },
6 | "include": [
7 | "src",
8 | "test"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import vue from '@vitejs/plugin-vue'
2 | import { defineConfig } from 'vite'
3 |
4 | export default defineConfig({
5 | plugins: [vue()],
6 | test: {
7 | // enable jest-like global test APIs
8 | globals: true,
9 |
10 | // simulate DOM with happy-dom
11 | // (requires installing happy-dom as a peer dependency)
12 | environment: 'happy-dom',
13 |
14 | coverage: {
15 | exclude: ['dev/**', 'docs/**'],
16 | },
17 | },
18 | })
19 |
--------------------------------------------------------------------------------