@sfxcode/formkit-primevue 2.0.5 → 2.2.0

package/README.md

@@ -1,10 +1,12 @@
 # Formkit - Primevue
 
-Helper classes for using [FormKit](https://formkit.com/) with the [PrimeVue UI Framework](https://www.primefaces.org/primevue/#/)
+PrimeVue based formkit inputs for using [FormKit](https://formkit.com/) with the [PrimeVue UI Framework](https://www.primefaces.org/primevue/#/).
+
+Main focus of this project is to provide configuration based forms with validation.
 
 ## PrimeVue Versions
 
-Actual PrimeVue Version in the main branch is 4.x.
+Actual PrimeVue Version in the main branch is *4.x.*
 
 PrimeVue 3 is in the prime3 branch.
 
@@ -16,6 +18,11 @@ PrimeVue 3 is in the prime3 branch.
 
 ## Usage
 
+### Configuration
+
+Add *formkit.config.ts*
+
+
 ```typescript
 import { defaultConfig, plugin } from '@formkit/vue'
 import { primeInputs } from '@sfxcode/formkit-primevue'
@@ -28,6 +35,32 @@ app.use(plugin, defaultConfig({
 }))
 ```
 
+### Nuxt
+
+Important: use *autoimport: false* if using primevue formkit validation and include or
+exclude not needed components as usual.
+
+Autoimport true prevents elements lookup correctly. 
+
+Example:
+```typescript
+  primevue: {
+  autoImport: false,
+    components: {
+    exclude: ['Chart', 'Editor'],
+  },
+  options: {
+    theme: {
+      preset: Aura,
+        options: {
+        darkModeSelector: '.dark',
+      },
+    },
+    ripple: true,
+  },
+},
+```
+
 ## Limitations
 
 Prefixing of the PrimeVue component names is not supported.
@@ -53,6 +86,8 @@ You can use it or take it as base for your own styling.
 ### Extended Styling
 
 - All inputs are wrapped in a div with a **p-formkit** class
+- Use *wrapperClass* to add additional styleclasses to wrapper div
+- Most Prime Components have access to class / styles attributes
 - Most Prime Components have access to class / styles attributes
 - PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
 - [Styling](https://formkit-primevue.netlify.app/styling/base) and [PT](https://formkit-primevue.netlify.app/styling/passThrough) demo available
@@ -71,31 +106,30 @@ Some samples for common tasks are available
 
 [Nuxt 3 PrimeVue Starter](https://github.com/sfxcode/nuxt3-primevue-starter) and [Vite PrimeVue Starter](https://github.com/sfxcode/vite-primevue-starter) with Formkit support available.
 
-## Supported Inputs
+## Supported Inputs for PrimeVue 4
 
 - AutoComplete
-- Calendar
 - CascadeSelect
 - Checkbox
-- Chips
-- Dropdown
+- ColorPicker
+- DatePicker
 - Editor (HTML Editor)
 - InputMask
 - InputNumber
 - InputOtp
-- InputSwitch
 - InputText
-- InputTextarea
-- MultiSelect
-- Password
-- Ranking
 - Knob
-- ColorPicker
 - Listbox
-- ToggleButton
-- SelectButton
-- TriStateCheckbox
+- MultiSelect
+- Password
 - RadioButton
+- Rating
+- Select
+- SelectButton
+- Slider
+- Textarea
+- ToggleButton
+- ToggleSwitch
 - TreeSelect
 
 ## Demo

package/dist/components/PrimeAutoComplete.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed, ref } from 'vue'
+import { type PropType, ref } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeAutoCompleteProps {
   pt?: AutoCompleteProps['pt']
@@ -11,6 +12,7 @@ export interface FormKitPrimeAutoCompleteProps {
   dropdown?: AutoCompleteProps['dropdown']
   multiple?: AutoCompleteProps['multiple']
   typeahead?: AutoCompleteProps['typeahead']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -20,25 +22,17 @@ const props = defineProps({
   },
 })
 
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+
 const suggestions = ref([])
 
 function search(event: AutoCompleteCompleteEvent) {
   suggestions.value = props.context?.attrs.complete(event.query)
 }
-
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(event: Event) {
-  props.context?.handlers.blur(event)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <AutoComplete
       :id="context.id"
       v-model="context._value"
@@ -55,6 +49,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       :pt="context?.pt"
       :pt-options="context?.ptOptions"
       :unstyled="context?.unstyled ?? false"
+      @keydown.enter.prevent
       @complete="search"
       @change="handleInput"
       @blur="handleBlur"

package/dist/components/PrimeCascadeSelect.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { CascadeSelectProps } from 'primevue/cascadeselect'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeCascadeSelectProps {
   options?: CascadeSelectProps['options']
@@ -14,6 +15,7 @@ export interface FormKitPrimeCascadeSelectProps {
   pt?: CascadeSelectProps['pt']
   ptOptions?: CascadeSelectProps['ptOptions']
   unstyled?: CascadeSelectProps['unstyled']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -23,19 +25,11 @@ const props = defineProps({
   },
 })
 
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <CascadeSelect
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeCheckbox.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { CheckboxProps } from 'primevue/checkbox'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeCheckboxProps {
   binary?: CheckboxProps['binary']
@@ -11,8 +12,11 @@ export interface FormKitPrimeCheckboxProps {
   pt?: CheckboxProps['pt']
   ptOptions?: CheckboxProps['ptOptions']
   unstyled?: CheckboxProps['unstyled']
+  indeterminate?: CheckboxProps['indeterminate']
+  variant?: CheckboxProps['variant']
   labelLeft?: string
   labelRight?: string
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -22,19 +26,11 @@ const props = defineProps({
   },
 })
 
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
     <Checkbox
       v-model="context._value"
@@ -47,7 +43,9 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"
+      :indeterminate="context.indeterminate ?? null"
       :binary="context.binary ?? true"
+      :variant="context.variant ?? 'outlined'"
       :true-value="context.trueValue ?? undefined"
       :false-value="context.falseValue ?? undefined"
       :pt="context.pt"

package/dist/components/PrimeColorPicker.vue

@@ -3,6 +3,7 @@ import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { ColorPickerProps } from 'primevue/colorpicker'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeColorPickerProps {
   defaultColor?: ColorPickerProps['defaultColor']
@@ -11,6 +12,7 @@ export interface FormKitPrimeColorPickerProps {
   pt?: ColorPickerProps['pt']
   ptOptions?: ColorPickerProps['ptOptions']
   unstyled?: ColorPickerProps['unstyled']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -20,13 +22,11 @@ const props = defineProps({
   },
 })
 
-function handleChange(_: any) {
-  props.context?.node.input(props.context?._value)
-}
+const { wrapperClass, handleChange } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <ColorPicker
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeDatePicker.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { DatePickerBlurEvent, DatePickerProps } from 'primevue/datepicker'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeDatePickerProps {
   dateFormat?: DatePickerProps['dateFormat']
@@ -48,6 +49,7 @@ export interface FormKitPrimeDatePickerProps {
   pt?: DatePickerProps['pt']
   ptOptions?: DatePickerProps['ptOptions']
   unstyled?: DatePickerProps['unstyled']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -57,13 +59,7 @@ const props = defineProps({
   },
 })
 
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleSelect(e: any) {
-  props.context?.node.input(e)
-}
+const { styleClass, wrapperClass, handleInput, handleSelect } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -72,12 +68,10 @@ function handleBlur(e: DatePickerBlurEvent) {
 function handleClearClick() {
   props.context?.node.input(null)
 }
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <DatePicker
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeEditor.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { EditorProps, EditorSelectionChangeEvent } from 'primevue/editor'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeEditorProps {
   placeholder?: EditorProps['placeholder']
@@ -11,6 +12,7 @@ export interface FormKitPrimeEditorProps {
   pt?: EditorProps['pt']
   ptOptions?: EditorProps['ptOptions']
   unstyled?: EditorProps['unstyled']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -20,20 +22,16 @@ const props = defineProps({
   },
 })
 
-function handleInput(e: any) {
-  props.context?.node.input(e.htmlValue)
-}
+const { styleClass, wrapperClass, handleInput } = useFormKitInput(props.context)
 
 function handleSelection(e: EditorSelectionChangeEvent) {
   if (e.range === null)
     props.context?.handlers.blur(e.htmlValue)
 }
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <Editor
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeInputMask.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { InputMaskProps } from 'primevue/inputmask'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeInputMaskProps {
   mask?: InputMaskProps['mask']
@@ -16,6 +17,7 @@ export interface FormKitPrimeInputMaskProps {
   variant?: InputMaskProps['variant']
   iconLeft?: string
   iconRight?: string
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -25,6 +27,8 @@ const props = defineProps({
   },
 })
 
+const { styleClass, wrapperClass } = useFormKitInput(props.context)
+
 function handleInput(e: FocusEvent) {
   props.context?.node.input(props.context?._value)
   props.context?.handlers.blur(e)
@@ -46,12 +50,10 @@ function spanClass() {
     result = `${result}p-input-icon-right `
   return result
 }
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <span :class="spanClass()">
       <i v-if="hasLeftIcon()" :class="context.iconLeft" />
 

package/dist/components/PrimeInputNumber.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { InputNumberBlurEvent, InputNumberProps } from 'primevue/inputnumber'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeInputNumberProps {
   useGrouping?: InputNumberProps['useGrouping']
@@ -22,6 +23,7 @@ export interface FormKitPrimeInputNumberProps {
   ptOptions?: InputNumberProps['ptOptions']
   unstyled?: InputNumberProps['unstyled']
   placeholder?: InputNumberProps['placeholder']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -31,18 +33,15 @@ const props = defineProps({
   },
 })
 
+const { styleClass, wrapperClass, handleInput } = useFormKitInput(props.context)
+
 function handleBlur(e: InputNumberBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
 }
-
-function handleInput(e: any) {
-  props.context?.node.input(e.value)
-}
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <InputNumber
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeInputOtp.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { InputOtpProps } from 'primevue/inputotp'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeInputOtpProps {
   unstyled?: InputOtpProps['unstyled']
@@ -12,6 +13,7 @@ export interface FormKitPrimeInputOtpProps {
   variant?: InputOtpProps['variant']
   mask?: InputOtpProps['mask']
   integerOnly?: InputOtpProps['integerOnly']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -21,19 +23,11 @@ const props = defineProps({
   },
 })
 
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleBlur, handleInput } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <InputOtp
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeInputText.vue

@@ -5,6 +5,7 @@ import type { FormKitFrameworkContext } from '@formkit/core'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import type { InputTextProps } from 'primevue/inputtext'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeInputTextProps {
   pt?: InputTextProps['pt']
@@ -12,6 +13,7 @@ export interface FormKitPrimeInputTextProps {
   unstyled?: InputTextProps['unstyled']
   placeholder?: InputTextProps['placeholder']
   icon?: string
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -21,6 +23,8 @@ const props = defineProps({
   },
 })
 
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+
 const hasIcon = computed(() => {
   if (props.context?.icon && props.context?.icon.length > 0)
     return true
@@ -35,20 +39,10 @@ const icon = computed(() => {
 const iconPosition = computed(() => {
   return props.context?.attrs?.iconPosition ?? undefined
 })
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-function handleInput(e: any) {
-  props.context?.node.input(e.target.value)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <IconField v-if="hasIcon" :icon-position="iconPosition">
       <InputIcon :class="icon" />
       <InputText

package/dist/components/PrimeKnob.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { KnobProps } from 'primevue/knob'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeKnobProps {
   pt?: KnobProps['pt']
@@ -18,6 +19,7 @@ export interface FormKitPrimeKnobProps {
   rangeColor?: KnobProps['rangeColor']
   textColor?: KnobProps['textColor']
   valueTemplate?: KnobProps['valueTemplate']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -27,6 +29,8 @@ const props = defineProps({
   },
 })
 
+const { styleClass, wrapperClass } = useFormKitInput(props.context)
+
 function handleInput(e: any) {
   props.context?.node.input(e)
   props.context?.handlers.blur(e)
@@ -35,12 +39,10 @@ function handleInput(e: any) {
 function updateValue(n: number) {
   props.context?.node.input(n)
 }
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <Knob
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeListbox.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { ListboxProps } from 'primevue/listbox'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeListboxProps {
   pt?: ListboxProps['pt']
@@ -19,6 +20,7 @@ export interface FormKitPrimeListboxProps {
   filterMatchMode?: ListboxProps['filterMatchMode']
   autoOptionFocus?: ListboxProps['autoOptionFocus']
   selectOnFocus?: ListboxProps['selectOnFocus']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -28,19 +30,11 @@ const props = defineProps({
   },
 })
 
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <Listbox
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeMultiSelect.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { MultiSelectProps } from 'primevue/multiselect'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeMultiSelectProps {
   options?: MultiSelectProps['options']
@@ -40,6 +41,7 @@ export interface FormKitPrimeMultiSelectProps {
   placeholder?: MultiSelectProps['placeholder']
   ptOptions?: MultiSelectProps['ptOptions']
   unstyled?: MultiSelectProps['unstyled']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -49,19 +51,11 @@ const props = defineProps({
   },
 })
 
-function handleChange(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleBlur, handleChange } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <MultiSelect
       v-model="context._value"
       v-bind="context?.attrs"