@sfxcode/formkit-primevue 3.2.9 → 3.3.0

package/dist/components/PrimeAutoComplete.vue

@@ -2,7 +2,7 @@
 import type { FormKitFrameworkContext } from '@formkit/core'
 import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
 import type { PropType } from 'vue'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeAutoCompleteProps {
@@ -28,34 +28,12 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 
 const suggestions = ref(['', {}])
 suggestions.value = []
 const loading = ref(false)
 
-// Local value for v-model
-const localValue = ref(props.context._value)
-
-// Sync localValue with context._value
-watch(
-  () => props.context._value,
-  (newVal) => {
-    localValue.value = newVal
-  },
-)
-
-// Emit changes from localValue to context
-watch(
-  localValue,
-  (newVal) => {
-    if (newVal !== props.context._value) {
-      props.context._value = newVal
-      props.context?.node?.input?.(newVal)
-    }
-  },
-)
-
 /**
  * Searches for suggestions based on the input query.
  */
@@ -102,22 +80,22 @@ function handlePaste(event: ClipboardEvent) {
       .map(item => item.trim())
       .filter(item => item.length > 0)
     // Use a local ref, never mutate context._value directly
-    if (Array.isArray(localValue.value)) {
-      localValue.value = [...localValue.value, ...items]
+    if (Array.isArray(modelValue.value)) {
+      modelValue.value = [...modelValue.value, ...items]
     }
     else {
-      localValue.value = items
+      modelValue.value = items
     }
   }
   // If no separators, just set the value directly
   else if (pastedText) {
     event.preventDefault()
     // If no separators, just set the value directly
-    if (Array.isArray(localValue.value)) {
-      localValue.value = [...localValue.value, pastedText.trim()]
+    if (Array.isArray(modelValue.value)) {
+      modelValue.value = [...modelValue.value, pastedText.trim()]
     }
     else {
-      localValue.value = [pastedText.trim()]
+      modelValue.value = [pastedText.trim()]
     }
   }
 }
@@ -127,7 +105,7 @@ function handlePaste(event: ClipboardEvent) {
   <div class="p-formkit">
     <AutoComplete
       :id="context.id"
-      v-model="localValue"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :class="context?.attrs?.class"

package/dist/components/PrimeCascadeSelect.vue

@@ -25,14 +25,14 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <CascadeSelect
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeCheckbox.vue

@@ -26,7 +26,7 @@ const props = defineProps({
 
 const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 
 const generatedId = generateId()
 </script>
@@ -37,7 +37,7 @@ const generatedId = generateId()
       {{ context?.prefix }}
     </label>
     <Checkbox
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="generatedId"
       :disabled="!!context?.disabled"

package/dist/components/PrimeColorPicker.vue

@@ -21,13 +21,13 @@ const props = defineProps({
   },
 })
 
-const { unstyled, handleChange } = useFormKitInput(props.context)
+const { unstyled, handleChange, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <ColorPicker
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeDatePicker.vue

@@ -60,7 +60,7 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, modelValue } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
   props.context?.handlers.blur(e.originalEvent as FocusEvent)
@@ -83,7 +83,7 @@ function handleSelect(e: any) {
 <template>
   <div class="p-formkit">
     <DatePicker
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"

package/dist/components/PrimeInputMask.vue

@@ -27,7 +27,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -37,7 +37,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
       <InputIcon v-if="hasPrefixIcon" :class="context?.iconPrefix" />
       <InputMask
         :id="context.id"
-        v-model="context._value"
+        v-model="modelValue"
         v-bind="context?.attrs"
         :disabled="!!context?.disabled"
         :readonly="context?.attrs.readonly ?? false"
@@ -63,7 +63,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
     <InputMask
       v-if="!hasPrefixIcon && !hasSuffixIcon"
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeInputNumber.vue

@@ -34,7 +34,7 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, modelValue } = useFormKitInput(props.context)
 
 function handleBlur(e: InputNumberBlurEvent) {
   props.context?.handlers.blur(e.originalEvent as FocusEvent)
@@ -70,7 +70,7 @@ watch(
 <template>
   <div class="p-formkit">
     <InputNumber
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"

package/dist/components/PrimeInputOtp.vue

@@ -23,14 +23,14 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <InputOtp
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeInputText.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -33,7 +33,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
       <InputIcon v-if="hasPrefixIcon" :class="context?.iconPrefix" />
       <InputText
         :id="context.id"
-        v-model="context._value"
+        v-model="modelValue"
         v-bind="context?.attrs"
         :type="context?.attrs?.inputType ?? 'text'"
         :disabled="!!context?.disabled"
@@ -57,7 +57,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
     <InputText
       v-if="!hasPrefixIcon && !hasSuffixIcon"
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :type="context?.inputType ?? 'text'"
       :disabled="!!context?.disabled"

package/dist/components/PrimeKnob.vue

@@ -29,7 +29,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid } = useFormKitInput(props.context)
+const { unstyled, isInvalid, modelValue } = useFormKitInput(props.context)
 
 function handleInput(e: any) {
   props.context?.node.input(e)
@@ -45,7 +45,7 @@ function updateValue(n: number) {
   <div class="p-formkit">
     <Knob
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeListbox.vue

@@ -38,14 +38,14 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <Listbox
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeMultiSelect.vue

@@ -51,13 +51,13 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <MultiSelect
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"

package/dist/components/PrimeOutputList.vue

@@ -32,35 +32,39 @@ const getListValues = computed(() => {
   }
   return values
 })
+
+const dividerClass = computed(() => props.context?.dividerClass || '')
+const itemClass = computed(() => props.context?.itemClass || '')
+const listItemsClass = computed(() => props.context?.attrs?.class || '')
 </script>
 
 <template>
   <div class="p-formkit p-output-list">
     <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
     <FormKitPrefix v-if="hasPrefix && listStyle === 'span'" :prefix="context?.prefix as string" />
-    <span v-if="listStyle === 'span'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
+    <span v-if="listStyle === 'span'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
       <template v-for="(value, index) of getListValues" :key="index">
-        <span v-if="index !== 0" class="p-output-list-divider" :class="context?.dividerClass">{{ context?.divider ?? ', ' }}</span>
-        <span class="p-output-list-item" :class="context?.itemClass">{{ value }}</span>
+        <span v-if="index !== 0" class="p-output-list-divider" :class="dividerClass">{{ context?.divider ?? ', ' }}</span>
+        <span class="p-output-list-item" :class="itemClass">{{ value }}</span>
       </template>
     </span>
-    <div v-if="listStyle === 'div'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
+    <div v-if="listStyle === 'div'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
       <template v-for="(value, index) of getListValues" :key="index">
-        <div class="p-output-list-item" :class="context?.itemClass">
+        <div class="p-output-list-item" :class="itemClass">
           {{ value }}
         </div>
       </template>
     </div>
-    <ul v-if="listStyle === 'ul'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
+    <ul v-if="listStyle === 'ul'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
       <li v-for="(value, index) of getListValues" :key="index">
-        <span class="p-output-list-item" :class="context?.itemClass">
+        <span class="p-output-list-item" :class="itemClass">
           {{ value }}
         </span>
       </li>
     </ul>
-    <ol v-if="listStyle === 'ol'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
+    <ol v-if="listStyle === 'ol'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
       <li v-for="(value, index) of getListValues" :key="index">
-        <span class="p-output-list-item" :class="context?.itemClass">
+        <span class="p-output-list-item" :class="itemClass">
           {{ value }}
         </span>
       </li>

package/dist/components/PrimeOutputText.d.vue.ts

@@ -5,6 +5,7 @@ export interface FormKitOutputTextProps {
     html?: boolean;
     isTranslationKey?: boolean;
     convertValue?: (value: string) => string;
+    maxLength?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/components/PrimeOutputText.vue

@@ -13,6 +13,7 @@ export interface FormKitOutputTextProps {
   html?: boolean
   isTranslationKey?: boolean
   convertValue?: (value: string) => string
+  maxLength?: number
 }
 
 const props = defineProps({
@@ -25,20 +26,35 @@ const props = defineProps({
 const textValue = computed(() => {
   const value = props.context?._value
   const { t } = useI18n()
+  let result = ''
   if (value) {
     if (props.context?.isTranslationKey) {
-      return t(value)
+      result = t(value)
     }
     else if (typeof props.context?.convertValue === 'function') {
-      return props.context?.convertValue(value)
+      result = props.context?.convertValue(value)
     }
     else {
-      return value
+      result = value
     }
   }
-  else {
-    return ''
+
+  // Apply maxLength truncation if specified
+  const maxLength = props.context?.maxLength as number | undefined
+  if (result && maxLength && !props.context?.html && result.length > maxLength) {
+    // Try to truncate at word boundary
+    let truncated = result.substring(0, maxLength)
+    const lastSpaceIndex = truncated.lastIndexOf(' ')
+
+    // Only truncate at word boundary if there's a space, and it's not too far back
+    // (at least 80% of maxLength to avoid cutting too much)
+    if (lastSpaceIndex > maxLength * 0.8) {
+      truncated = truncated.substring(0, lastSpaceIndex)
+    }
+    result = `${truncated}...`
   }
+
+  return result
 })
 
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)

package/dist/components/PrimeOutputText.vue.d.ts

@@ -5,6 +5,7 @@ export interface FormKitOutputTextProps {
     html?: boolean;
     isTranslationKey?: boolean;
     convertValue?: (value: string) => string;
+    maxLength?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/components/PrimePassword.vue

@@ -30,13 +30,13 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <Password
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"

package/dist/components/PrimeRadioButton.vue

@@ -3,6 +3,7 @@ import type { FormKitFrameworkContext } from '@formkit/core'
 import type { RadioButtonProps } from 'primevue/radiobutton'
 
 import type { PropType } from 'vue'
+import { computed } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeRadioButtonProps {
@@ -22,15 +23,19 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(props.context)
+
+const optionsClass = computed(() => props.context?.optionsClass ?? '')
+const optionClass = computed(() => props.context?.optionClass ?? '')
+const labelClass = computed(() => props.context?.labelClass ?? '')
 </script>
 
 <template>
-  <div class="p-formkit p-formkit-options" :class="context.optionsClass">
-    <div v-for="option in context.options" :key="option.value" class="p-formkit-option" :class="context.optionClass">
+  <div class="p-formkit p-formkit-options" :class="optionsClass">
+    <div v-for="option in context.options" :key="option.value" class="p-formkit-option" :class="optionClass">
       <RadioButton
         :id="context.id"
-        v-model="context._value"
+        v-model="modelValue"
         v-bind="context?.attrs"
         :disabled="!!context?.disabled"
         :readonly="context?.attrs.readonly ?? false"
@@ -47,7 +52,7 @@ const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.
         @change="handleChange"
         @blur="handleBlur"
       />
-      <label :for="option.value" :class="context.labelClass">{{ option.label }}</label>
+      <label :for="option.value" :class="labelClass">{{ option.label }}</label>
     </div>
   </div>
 </template>

package/dist/components/PrimeRating.vue

@@ -21,14 +21,14 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <Rating
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeSelect.vue

@@ -48,13 +48,13 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <Select
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"

package/dist/components/PrimeSelectButton.vue

@@ -26,14 +26,14 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <SelectButton
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeSlider.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleBlur, modelValue } = useFormKitInput(props.context)
 
 function handleInput(e: any) {
   props.context?.node.input(e)
@@ -35,7 +35,7 @@ function handleInput(e: any) {
   <div class="p-formkit">
     <Slider
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeTextarea.vue

@@ -22,14 +22,14 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <Textarea
       :id="context.id"
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"

package/dist/components/PrimeToggleButton.vue

@@ -24,13 +24,13 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <ToggleButton
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"

package/dist/components/PrimeToggleSwitch.vue

@@ -22,7 +22,7 @@ const props = defineProps({
 
 const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -31,7 +31,7 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
       {{ context?.prefix }}
     </span>
     <ToggleSwitch
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"

package/dist/components/PrimeTreeSelect.vue

@@ -29,13 +29,13 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
     <TreeSelect
-      v-model="context._value"
+      v-model="modelValue"
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"

package/dist/composables/useFormKitInput.d.ts

@@ -7,4 +7,5 @@ export declare function useFormKitInput(context: any): {
     handleChange: (_: any) => void;
     handleInput: (_: any) => void;
     handleSelect: (e: any) => void;
+    modelValue: import("vue").WritableComputedRef<any, any>;
 };

package/dist/composables/useFormKitInput.js

@@ -38,6 +38,12 @@ function useFormKitInput(context) {
   function handleSelect(e) {
     context?.node?.input?.(e);
   }
+  const modelValue = (0, _vue.computed)({
+    get: () => context._value,
+    set: value => {
+      context.node.input(value);
+    }
+  });
   return {
     isInvalid,
     validSlotNames,
@@ -46,6 +52,7 @@ function useFormKitInput(context) {
     handleBlur,
     handleChange,
     handleInput,
-    handleSelect
+    handleSelect,
+    modelValue
   };
 }

package/dist/composables/useFormKitInput.mjs

@@ -35,5 +35,11 @@ export function useFormKitInput(context) {
   function handleSelect(e) {
     context?.node?.input?.(e);
   }
-  return { isInvalid, validSlotNames, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect };
+  const modelValue = computed({
+    get: () => context._value,
+    set: (value) => {
+      context.node.input(value);
+    }
+  });
+  return { isInvalid, validSlotNames, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect, modelValue };
 }

package/dist/composables/useFormKitRepeater.js

@@ -13,11 +13,11 @@ function useFormKitRepeater() {
   } = (0, _useFormKitSchema.useFormKitSchema)();
   function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "pi pi-plus") {
     return addElementsInOuterDiv([addComponent("Button", {
-      onClick: "$addNode($node.parent)",
+      onClick: "$addNode($node)",
       label,
       class: buttonClass,
       icon: iconClass
-    }, "$node.parent.value.length == 0")], innerClass, outerClass);
+    }, "$node.children.length == 0")], innerClass, outerClass);
   }
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {
     const swapElements = (array, index1, index2) => {

package/dist/composables/useFormKitRepeater.mjs

@@ -3,7 +3,7 @@ export function useFormKitRepeater() {
   const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema();
   function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "pi pi-plus") {
     return addElementsInOuterDiv([
-      addComponent("Button", { onClick: "$addNode($node.parent)", label, class: buttonClass, icon: iconClass }, "$node.parent.value.length == 0")
+      addComponent("Button", { onClick: "$addNode($node)", label, class: buttonClass, icon: iconClass }, "$node.children.length == 0")
     ], innerClass, outerClass);
   }
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {

package/dist/composables/useInputEditor.js

@@ -77,7 +77,9 @@ function useInputEditor() {
     for (const key in result) {
       const value = result[key];
       if (value !== null && value !== void 0 && typeof value === "string") {
-        if (value.trim().length === 0) result[key] = void 0;
+        if (value.trim().length === 0) {
+          result[key] = void 0;
+        }
       }
     }
     return result;

package/dist/composables/useInputEditor.mjs

@@ -73,8 +73,9 @@ export function useInputEditor() {
     for (const key in result) {
       const value = result[key];
       if (value !== null && value !== void 0 && typeof value === "string") {
-        if (value.trim().length === 0)
+        if (value.trim().length === 0) {
           result[key] = void 0;
+        }
       }
     }
     return result;

package/dist/definitions/output.js

@@ -15,7 +15,7 @@ var _PrimeOutputReference = _interopRequireDefault(require("../components/PrimeO
 var _PrimeOutputText = _interopRequireDefault(require("../components/PrimeOutputText.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const primeOutputTextDefinition = exports.primeOutputTextDefinition = (0, _vue.createInput)(_PrimeOutputText.default, {
-  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html", "onIconPrefixClicked", "onIconSuffixClicked", "convertValue"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html", "onIconPrefixClicked", "onIconSuffixClicked", "convertValue", "maxLength"]
 });
 const primeOutputDateDefinition = exports.primeOutputDateDefinition = (0, _vue.createInput)(_PrimeOutputDate.default, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "onIconPrefixClicked", "onIconSuffixClicked"]

package/dist/definitions/output.mjs

@@ -8,7 +8,7 @@ import PrimeOutputNumber from "../components/PrimeOutputNumber.vue";
 import PrimeOutputReference from "../components/PrimeOutputReference.vue";
 import PrimeOutputText from "../components/PrimeOutputText.vue";
 export const primeOutputTextDefinition = createInput(PrimeOutputText, {
-  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html", "onIconPrefixClicked", "onIconSuffixClicked", "convertValue"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html", "onIconPrefixClicked", "onIconSuffixClicked", "convertValue", "maxLength"]
 });
 export const primeOutputDateDefinition = createInput(PrimeOutputDate, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "onIconPrefixClicked", "onIconSuffixClicked"]

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import type { FormKitInputs } from '@formkit/inputs';
+import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
+import type { AutoCompleteSlots, CascadeSelectSlots, CheckboxSlots, ColorPickerSlots, DatePickerSlots, InputMaskSlots, InputNumberSlots, InputOtpSlots, InputTextSlots, KnobSlots, ListboxSlots, MultiSelectSlots, PasswordSlots, RadioButtonSlots, RatingSlots, SelectButtonSlots, SelectSlots, SliderSlots, TextareaSlots, ToggleButtonSlots, ToggleSwitchSlots, TreeSelectSlots } from 'primevue';
 import type { CascadeSelectProps } from 'primevue/cascadeselect';
 import type { ListboxProps } from 'primevue/listbox';
 import type { MultiSelectProps } from 'primevue/multiselect';
@@ -9,6 +10,10 @@ import { FormKitDataEdit, FormKitDataView } from './components';
 import { useFormKitRepeater, useFormKitSchema, useInputEditor, useInputEditorSchema, usePrimeInputs } from './composables';
 import { primeInputs, primeOutputs } from './definitions';
 export { FormKitDataEdit, FormKitDataView, primeInputs, primeOutputs, useFormKitRepeater, useFormKitSchema, useInputEditor, useInputEditorSchema, usePrimeInputs, };
+/**
+ * Keeps all slots from 1st argument, add any slots from 2nd type which do not collide with the 1st's names.
+ */
+type MergeSlots<A, B> = A & Omit<B, keyof A>;
 declare module '@formkit/inputs' {
     interface FormKitInputProps<Props extends FormKitInputs<Props>> {
         primeAutoComplete: {
@@ -108,4 +113,36 @@ declare module '@formkit/inputs' {
             type: 'primeOutputList';
         };
     }
+    interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+        primeAutoComplete: MergeSlots<FormKitBaseSlots<Props>, AutoCompleteSlots>;
+        primeCascadeSelect: MergeSlots<FormKitBaseSlots<Props>, CascadeSelectSlots>;
+        primeCheckbox: MergeSlots<FormKitBaseSlots<Props>, CheckboxSlots>;
+        primeColorPicker: MergeSlots<FormKitBaseSlots<Props>, ColorPickerSlots>;
+        primeDatePicker: MergeSlots<FormKitBaseSlots<Props>, DatePickerSlots>;
+        primeInputMask: MergeSlots<FormKitBaseSlots<Props>, InputMaskSlots>;
+        primeInputNumber: MergeSlots<FormKitBaseSlots<Props>, InputNumberSlots>;
+        primeInputOtp: MergeSlots<FormKitBaseSlots<Props>, InputOtpSlots>;
+        primeInputText: MergeSlots<FormKitBaseSlots<Props>, InputTextSlots>;
+        primeKnob: MergeSlots<FormKitBaseSlots<Props>, KnobSlots>;
+        primeListbox: MergeSlots<FormKitBaseSlots<Props>, ListboxSlots>;
+        primeMultiSelect: MergeSlots<FormKitBaseSlots<Props>, MultiSelectSlots>;
+        primeOutputBoolean: FormKitBaseSlots<Props>;
+        primeOutputDate: FormKitBaseSlots<Props>;
+        primeOutputDuration: FormKitBaseSlots<Props>;
+        primeOutputLink: FormKitBaseSlots<Props>;
+        primeOutputList: FormKitBaseSlots<Props>;
+        primeOutputNumber: FormKitBaseSlots<Props>;
+        primeOutputReference: FormKitBaseSlots<Props>;
+        primeOutputText: FormKitBaseSlots<Props>;
+        primePassword: MergeSlots<FormKitBaseSlots<Props>, PasswordSlots>;
+        primeRadioButton: MergeSlots<FormKitBaseSlots<Props>, RadioButtonSlots>;
+        primeRating: MergeSlots<FormKitBaseSlots<Props>, RatingSlots>;
+        primeSelect: MergeSlots<FormKitBaseSlots<Props>, SelectSlots>;
+        primeSelectButton: MergeSlots<FormKitBaseSlots<Props>, SelectButtonSlots>;
+        primeSlider: MergeSlots<FormKitBaseSlots<Props>, SliderSlots>;
+        primeTextarea: MergeSlots<FormKitBaseSlots<Props>, TextareaSlots>;
+        primeToggleButton: MergeSlots<FormKitBaseSlots<Props>, ToggleButtonSlots>;
+        primeToggleSwitch: MergeSlots<FormKitBaseSlots<Props>, ToggleSwitchSlots>;
+        primeTreeSelect: MergeSlots<FormKitBaseSlots<Props>, TreeSelectSlots>;
+    }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "3.2.9",
-  "packageManager": "pnpm@10.26.0+sha512.3b3f6c725ebe712506c0ab1ad4133cf86b1f4b687effce62a9b38b4d72e3954242e643190fc51fa1642949c735f403debd44f5cb0edd657abe63a8b6a7e1e402",
+  "version": "3.3.0",
+  "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017",
   "author": {
     "name": "Tom",
     "email": "tom@sfxcode.com"
@@ -75,7 +75,7 @@
     "dev": "vite serve dev",
     "dev:build": "vite build dev",
     "dev:preview": "vite preview dev",
-    "release": "npm run lint && npm run build && changelogen --patch --release  && npm publish --access public && git push --follow-tags",
+    "release": "npm run lint && npm run build && changelogen --minor --release  && npm publish --access public && git push --follow-tags",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prepublishOnly": "pnpm build",
@@ -101,48 +101,48 @@
     "vue-i18n": "^11.2.8"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^6.7.3",
+    "@antfu/eslint-config": "^7.6.1",
     "@formkit/core": "^1.6.9",
     "@formkit/drag-and-drop": "^0.5.3",
-    "@primeuix/themes": "^2.0.2",
-    "@types/node": "^25.0.6",
-    "@unocss/preset-icons": "66.5.10",
-    "@unocss/preset-uno": "66.5.10",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vitest/coverage-v8": "^4.0.17",
-    "@vitest/ui": "^4.0.17",
-    "@vue/compiler-sfc": "^3.5.26",
-    "@vue/server-renderer": "^3.5.26",
+    "@primeuix/themes": "^2.0.3",
+    "@types/node": "^25.3.2",
+    "@unocss/preset-icons": "66.6.2",
+    "@unocss/preset-uno": "66.6.2",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "@vue/compiler-sfc": "^3.5.29",
+    "@vue/server-renderer": "^3.5.29",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
-    "@vueuse/core": "^14.1.0",
+    "@vueuse/core": "^14.2.1",
     "@vueuse/head": "^2.0.0",
     "changelogen": "^0.6.2",
     "chart.js": "^4.5.1",
     "consola": "^3.4.2",
     "cookie": "^1.1.1",
-    "esbuild": "^0.27.2",
-    "eslint": "^9.39.2",
-    "happy-dom": "^20.1.0",
+    "esbuild": "^0.27.3",
+    "eslint": "^10.0.2",
+    "happy-dom": "^20.7.0",
     "json-editor-vue": "^0.18.1",
     "mkdist": "^2.4.1",
-    "sass": "^1.97.2",
+    "sass": "^1.97.3",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "unbuild": "^3.6.1",
-    "unocss": "66.5.10",
-    "unplugin-auto-import": "^20.3.0",
-    "unplugin-vue-components": "^30.0.0",
+    "unocss": "66.6.2",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^31.0.0",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-pages": "^0.33.2",
-    "vite-ssg": "^28.2.2",
+    "vite-plugin-pages": "^0.33.3",
+    "vite-ssg": "^28.3.0",
     "vitepress": "2.0.0-alpha.12",
-    "vitest": "^4.0.17",
-    "vue": "^3.5.26",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.29",
     "vue-demi": "^0.14.10",
-    "vue-router": "^4.6.4",
-    "vue-tsc": "^3.2.2"
+    "vue-router": "^5.0.3",
+    "vue-tsc": "^3.2.5"
   }
 }