@sfxcode/formkit-primevue 4.1.10 → 4.2.0

package/dist/components/FormKitDataEdit.vue

@@ -3,7 +3,7 @@ import type { FormKitSchemaDefinition } from '@formkit/core'
 import type { PropType } from 'vue'
 import { reset } from '@formkit/core'
 import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import FormKitDataDebug from './FormKitDataDebug.vue'
 
 const props = defineProps({
@@ -82,6 +82,17 @@ if (props.data) {
 
 const formSchema = ref(props.schema)
 
+// Watch for changes to props and update internal refs
+watch(() => props.schema, (newSchema) => {
+  formSchema.value = newSchema
+}, { deep: true })
+
+watch(() => props.data, (newData) => {
+  if (newData && newData !== formData.value) {
+    formData.value = newData
+  }
+}, { deep: true })
+
 function handleSave() {
   emit('dataSaved', formData.value)
 }

package/dist/components/FormKitDataView.vue

@@ -3,7 +3,7 @@ import type { FormKitSchemaDefinition } from '@formkit/core'
 import type { PropType } from 'vue'
 
 import { FormKit, FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import FormKitDataDebug from './FormKitDataDebug.vue'
 
 const props = defineProps({
@@ -33,6 +33,17 @@ const formSchema = ref(props.schema)
 
 const formData = defineModel<any>()
 
+// Watch for changes to props and update internal refs
+watch(() => props.schema, (newSchema) => {
+  formSchema.value = newSchema
+}, { deep: true })
+
+watch(() => props.data, (newData) => {
+  if (newData && newData !== formData.value) {
+    formData.value = newData
+  }
+}, { deep: true })
+
 if (props.data) {
   formData.value = props.data
 }

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

@@ -31,6 +31,10 @@ export interface FormKitPrimeListboxProps {
     transferRightHeaderText?: string;
     transferHeaderClass?: string;
     transferAll?: boolean;
+    transferButtonSeverity?: string;
+    transferContainerClass?: string;
+    transferListContainerClass?: string;
+    transferButtonClass?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/components/PrimeListbox.vue

@@ -35,6 +35,10 @@ export interface FormKitPrimeListboxProps {
   transferRightHeaderText?: string
   transferHeaderClass?: string
   transferAll?: boolean
+  transferButtonSeverity?: string
+  transferContainerClass?: string
+  transferListContainerClass?: string
+  transferButtonClass?: string
 }
 
 const props = defineProps({
@@ -44,7 +48,24 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, handleChange, modelValue } = useFormKitInput(props.context)
+
+// Computed properties for transfer mode styling
+const transferContainerClass = computed(() => {
+  return props.context.transferContainerClass || 'p-formkit-transfer'
+})
+
+const transferListContainerClass = computed(() => {
+  return props.context.transferListContainerClass || 'p-formkit-transfer-list-container'
+})
+
+const transferButtonClass = computed(() => {
+  return props.context.transferButtonClass || ''
+})
+
+const transferButtonSeverity = computed(() => {
+  return props.context.transferButtonSeverity || 'secondary'
+})
 
 // Transfer List functionality
 const optionValueKey = computed(() => {
@@ -89,22 +110,30 @@ const sourceItems = computed(() => {
 })
 
 function transferSelected() {
-  // sourceSelection now contains full objects since we removed optionValue
+  if (sourceSelection.value.length === 0)
+    return
+  // Use splice-based approach for better performance
   targetItems.value = [...targetItems.value, ...sourceSelection.value]
   sourceSelection.value = []
 }
 
 function transferAll() {
+  if (sourceItems.value.length === 0)
+    return
   targetItems.value = [...targetItems.value, ...sourceItems.value]
   sourceSelection.value = []
 }
 
 function removeSelected() {
-  // targetSelection now contains full objects since we removed optionValue
+  if (targetSelection.value.length === 0)
+    return
+
+  // Filter out selected items using splice-inspired logic
+  const valueKey = optionValueKey.value
   targetItems.value = targetItems.value.filter((item: any) => {
-    const itemValue = optionValueKey.value && typeof item === 'object' ? item[optionValueKey.value] : item
+    const itemValue = valueKey && typeof item === 'object' ? item[valueKey] : item
     return !targetSelection.value.some((sel: any) => {
-      const selValue = optionValueKey.value && typeof sel === 'object' ? sel[optionValueKey.value] : sel
+      const selValue = valueKey && typeof sel === 'object' ? sel[valueKey] : sel
       return selValue === itemValue
     })
   })
@@ -112,6 +141,8 @@ function removeSelected() {
 }
 
 function removeAll() {
+  if (targetItems.value.length === 0)
+    return
   targetItems.value = []
   targetSelection.value = []
 }
@@ -119,6 +150,7 @@ function removeAll() {
 watch(targetItems, (newVal) => {
   modelValue.value = newVal
   handleInput(newVal)
+  handleChange(newVal)
 }, { deep: true })
 
 // Watch for external changes to modelValue and update targetItems
@@ -168,7 +200,8 @@ watch(() => modelValue.value, (newVal) => {
       :pt="context.pt"
       :pt-options="context.ptOptions"
       :unstyled="unstyled"
-      @change="handleInput"
+      @update:model-value="handleInput"
+      @change="handleChange"
       @blur="handleBlur"
     >
       <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
@@ -180,11 +213,10 @@ watch(() => modelValue.value, (newVal) => {
   <!-- Transfer Mode -->
   <div
     v-if="context.displayMode === 'transfer'"
-    class="p-formkit-transfer"
-    style="display: flex; align-items: stretch; gap: 1rem; width: 100%;"
+    :class="transferContainerClass"
   >
     <!-- Source List -->
-    <div style="display: flex; flex-direction: column; flex: 1; gap: 0.5rem; min-width: 0;">
+    <div :class="transferListContainerClass">
       <span
         v-if="context.transferLeftHeaderText"
         :class="transferHeaderClass"
@@ -199,7 +231,7 @@ watch(() => modelValue.value, (newVal) => {
         :class="context?.attrs?.class"
         :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
-        :aria-label="context?.attrs.ariaLabel"
+        :aria-label="context?.attrs.ariaLabel || 'Source list'"
         :aria-labelledby="context?.attrs.ariaLabelledby"
         :options="sourceItems"
         :option-label="context.optionLabel"
@@ -229,19 +261,21 @@ watch(() => modelValue.value, (newVal) => {
     </div>
 
     <!-- Transfer Buttons -->
-    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;">
+    <div class="p-formkit-transfer-buttons">
       <Button
         icon="pi pi-angle-right"
-        severity="secondary"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
         outlined
         :disabled="sourceSelection.length === 0"
-        aria-label="Move selected to target"
+        :aria-label="context.transferAll ? 'Move selected to target' : 'Move to target'"
         @click="transferSelected"
       />
       <Button
         v-if="context.transferAll"
         icon="pi pi-angle-double-right"
-        severity="secondary"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
         outlined
         :disabled="sourceItems.length === 0"
         aria-label="Move all to target"
@@ -249,16 +283,18 @@ watch(() => modelValue.value, (newVal) => {
       />
       <Button
         icon="pi pi-angle-left"
-        severity="secondary"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
         outlined
         :disabled="targetSelection.length === 0"
-        aria-label="Move selected to source"
+        :aria-label="context.transferAll ? 'Move selected to source' : 'Move to source'"
         @click="removeSelected"
       />
       <Button
         v-if="context.transferAll"
         icon="pi pi-angle-double-left"
-        severity="secondary"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
         outlined
         :disabled="targetItems.length === 0"
         aria-label="Move all to source"
@@ -267,7 +303,7 @@ watch(() => modelValue.value, (newVal) => {
     </div>
 
     <!-- Target List -->
-    <div style="display: flex; flex-direction: column; flex: 1; gap: 0.5rem; min-width: 0;">
+    <div :class="transferListContainerClass">
       <span
         v-if="context.transferRightHeaderText"
         :class="transferHeaderClass"
@@ -282,7 +318,7 @@ watch(() => modelValue.value, (newVal) => {
         :class="context?.attrs?.class"
         :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
-        :aria-label="context?.attrs.ariaLabel"
+        :aria-label="context?.attrs.ariaLabel || 'Target list'"
         :aria-labelledby="context?.attrs.ariaLabelledby"
         :options="targetItems"
         :option-label="context.optionLabel"

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

@@ -31,6 +31,10 @@ export interface FormKitPrimeListboxProps {
     transferRightHeaderText?: string;
     transferHeaderClass?: string;
     transferAll?: boolean;
+    transferButtonSeverity?: string;
+    transferContainerClass?: string;
+    transferListContainerClass?: string;
+    transferButtonClass?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/definitions/repeater.js

@@ -24,7 +24,7 @@ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", button
       class: buttonGroupItemClass
     }, render2);
   };
-  return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "pi pi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"), addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$false"), addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$false"), addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$false"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "pi pi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")], {
+  return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "pi pi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"), addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems"), addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"), addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "pi pi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")], {
     class: buttonGroupClass
   }, render);
 }
@@ -33,7 +33,8 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     onClick: "$insertNode($node)",
     label,
     icon,
-    size: buttonSize
+    size: buttonSize,
+    disabled: "$node.value.length > $maxItems -1"
   })], {
     class: styleClass
   }, render);
@@ -45,16 +46,13 @@ const primeRepeaterDefinition = exports.primeRepeaterDefinition = (0, _vue.creat
 })], true, {})], true, "true")], {
   class: "$internalListClass"
 }, true), {
-  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton"],
+  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems"],
   features: [addRepeaterHandler]
 });
 function addRepeaterHandler(node) {
   const swapElements = (array, index1, index2) => {
-    const newArray = [...array];
-    const temp = newArray[index1];
-    newArray[index1] = newArray[index2];
-    newArray[index2] = temp;
-    return newArray;
+    array.splice(index2, 0, array.splice(index1, 1)[0]);
+    return array;
   };
   node.on("created", () => {
     if (node.context) {
@@ -81,31 +79,27 @@ function addRepeaterHandler(node) {
       };
       node.context.addNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [...parentNode.value.slice(0, index + 1), {
-            ...newItem
-          }, ...parentNode.value.slice(index + 1)];
-          parentNode.input([...newArray], false);
+          const array = parentNode.value;
+          array.splice(index + 1, 0, newItem);
+          parentNode.input(array, false);
         }
       };
       node.context.cloneNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const item = parentNode.value[index];
-          const newArray = [...parentNode.value.slice(0, index + 1), {
-            ...item
-          }, ...parentNode.value.slice(index + 1)];
-          parentNode.input([...newArray], false);
+          const array = parentNode.value;
+          array.splice(index + 1, 0, item);
+          parentNode.input(array, false);
         }
       };
       node.context.moveNodeUp = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const array = [...parentNode.value];
-          if (index > 0) parentNode.input(swapElements(array, index - 1, index), false);
+          if (index > 0) parentNode.input(swapElements(parentNode.value, index - 1, index), false);
         }
       };
       node.context.moveNodeDown = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const array = [...parentNode.value];
-          if (index < array.length - 1) parentNode.input(swapElements(array, index, index + 1), false);
+          if (index < parentNode.value.length - 1) parentNode.input(swapElements(parentNode.value, index, index + 1), false);
         }
       };
     }

package/dist/definitions/repeater.mjs

@@ -7,15 +7,15 @@ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", button
   };
   return addElement("div", [
     addActionButtonComponent("$moveNodeUp($node.parent, $index)", "pi pi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"),
-    addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$false"),
-    addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$false"),
-    addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$false"),
+    addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems"),
+    addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"),
+    addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1"),
     addActionButtonComponent("$moveNodeDown($node.parent, $index)", "pi pi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
   ], { class: buttonGroupClass }, render);
 }
 function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
   return addElement("div", [
-    addComponent("Button", { onClick: "$insertNode($node)", label, icon, size: buttonSize })
+    addComponent("Button", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
   ], { class: styleClass }, render);
 }
 export const primeRepeaterDefinition = createInput(
@@ -28,17 +28,14 @@ export const primeRepeaterDefinition = createInput(
     ], true, "true")
   ], { class: "$internalListClass" }, true),
   {
-    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton"],
+    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems"],
     features: [addRepeaterHandler]
   }
 );
 function addRepeaterHandler(node) {
   const swapElements = (array, index1, index2) => {
-    const newArray = [...array];
-    const temp = newArray[index1];
-    newArray[index1] = newArray[index2];
-    newArray[index2] = temp;
-    return newArray;
+    array.splice(index2, 0, array.splice(index1, 1)[0]);
+    return array;
   };
   node.on("created", () => {
     if (node.context) {
@@ -63,29 +60,29 @@ function addRepeaterHandler(node) {
       };
       node.context.addNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [...parentNode.value.slice(0, index + 1), { ...newItem }, ...parentNode.value.slice(index + 1)];
-          parentNode.input([...newArray], false);
+          const array = parentNode.value;
+          array.splice(index + 1, 0, newItem);
+          parentNode.input(array, false);
         }
       };
       node.context.cloneNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const item = parentNode.value[index];
-          const newArray = [...parentNode.value.slice(0, index + 1), { ...item }, ...parentNode.value.slice(index + 1)];
-          parentNode.input([...newArray], false);
+          const array = parentNode.value;
+          array.splice(index + 1, 0, item);
+          parentNode.input(array, false);
         }
       };
       node.context.moveNodeUp = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const array = [...parentNode.value];
           if (index > 0)
-            parentNode.input(swapElements(array, index - 1, index), false);
+            parentNode.input(swapElements(parentNode.value, index - 1, index), false);
         }
       };
       node.context.moveNodeDown = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const array = [...parentNode.value];
-          if (index < array.length - 1)
-            parentNode.input(swapElements(array, index, index + 1), false);
+          if (index < parentNode.value.length - 1)
+            parentNode.input(swapElements(parentNode.value, index, index + 1), false);
         }
       };
     }

package/dist/sass/formkit-primevue.scss

@@ -287,6 +287,30 @@ $grid-breakpoints: (
     }
 }
 
+// Listbox Transfer
+.p-formkit-transfer {
+  display: flex;
+  align-items: stretch;
+  gap: 1rem;
+  width: 100%;
+  min-width: 600px;
+}
+
+.p-formkit-transfer-list-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.p-formkit-transfer-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
 
 
 // Debug

package/dist/style.css

@@ -1 +1 @@
-:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.5rem;padding-left:.5rem}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem;display:flex}.formkit-form .formkit-actions button{margin-right:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span .p-space{margin-right:3rem}.formkit-form .p-chip-item{align-items:center;background:var(--p-surface-500);color:var(--p-surface-0);border-radius:1rem;padding:.2rem .5rem}.p-formkit-data-view .formkit-outer{padding-bottom:.5rem}.p-formkit-data-view.form-horizontal{padding-bottom:.8rem}.p-formkit-data-view .formkit-help{padding-top:.25rem;margin:0}.p-formkit-data-view ul,.p-formkit-data-view ol{padding-inline-start:1rem;margin-block-start:0;margin-block-end:0}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper{display:flex;flex-wrap:wrap}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner{width:auto !important}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label{width:auto;order:2;padding:.125rem 0}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:after{content:""}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner{margin-left:0 !important;order:1;flex-basis:2rem;flex-grow:0;flex-shrink:0;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner:has(label){flex-grow:1;flex-basis:100%}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3),.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{width:auto}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3){order:1}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)+div.p-checkbox{order:2;width:auto}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{order:3}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child{margin-left:0 !important}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child .p-formkit{display:flex}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .p-checkbox:not(:only-child){width:2rem;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-help{width:auto !important}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}@media(min-width: 768px){.formkit-form.form-horizontal .formkit-wrapper{display:flex}.formkit-form.form-horizontal .formkit-wrapper label{display:inline-block;padding:0 .25rem 0 0;font-size:inherit}.formkit-form.form-horizontal .formkit-wrapper label:after{content:":"}}@media(min-width: 768px)and (min-width: 768px){.formkit-form.form-horizontal.form-horizontal-checkbox-indent .formkit-outer[data-type=primeCheckbox]{padding-left:33.3333333333%}}@media(min-width: 768px){.p-formkit-data-view .formkit-form.form-horizontal label{white-space:nowrap}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer{width:100%}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer label{width:33.3333333333%;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{width:66.6666666667%}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner{margin-left:auto}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner .p-formkit{display:flex}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner label{width:auto;padding:0}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-help,.p-formkit-data-edit .formkit-form.form-horizontal .formkit-messages{width:66.6666666667%;margin-left:auto}}
+:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.5rem;padding-left:.5rem}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem;display:flex}.formkit-form .formkit-actions button{margin-right:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span .p-space{margin-right:3rem}.formkit-form .p-chip-item{align-items:center;background:var(--p-surface-500);color:var(--p-surface-0);border-radius:1rem;padding:.2rem .5rem}.p-formkit-data-view .formkit-outer{padding-bottom:.5rem}.p-formkit-data-view.form-horizontal{padding-bottom:.8rem}.p-formkit-data-view .formkit-help{padding-top:.25rem;margin:0}.p-formkit-data-view ul,.p-formkit-data-view ol{padding-inline-start:1rem;margin-block-start:0;margin-block-end:0}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper{display:flex;flex-wrap:wrap}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner{width:auto !important}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label{width:auto;order:2;padding:.125rem 0}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:after{content:""}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner{margin-left:0 !important;order:1;flex-basis:2rem;flex-grow:0;flex-shrink:0;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner:has(label){flex-grow:1;flex-basis:100%}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3),.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{width:auto}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3){order:1}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)+div.p-checkbox{order:2;width:auto}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{order:3}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child{margin-left:0 !important}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child .p-formkit{display:flex}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .p-checkbox:not(:only-child){width:2rem;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-help{width:auto !important}.p-formkit-transfer{display:flex;align-items:stretch;gap:1rem;width:100%;min-width:600px}.p-formkit-transfer-list-container{display:flex;flex-direction:column;flex:1;gap:.5rem;min-width:0}.p-formkit-transfer-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}@media(min-width: 768px){.formkit-form.form-horizontal .formkit-wrapper{display:flex}.formkit-form.form-horizontal .formkit-wrapper label{display:inline-block;padding:0 .25rem 0 0;font-size:inherit}.formkit-form.form-horizontal .formkit-wrapper label:after{content:":"}}@media(min-width: 768px)and (min-width: 768px){.formkit-form.form-horizontal.form-horizontal-checkbox-indent .formkit-outer[data-type=primeCheckbox]{padding-left:33.3333333333%}}@media(min-width: 768px){.p-formkit-data-view .formkit-form.form-horizontal label{white-space:nowrap}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer{width:100%}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer label{width:33.3333333333%;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{width:66.6666666667%}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner{margin-left:auto}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner .p-formkit{display:flex}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner label{width:auto;padding:0}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-help,.p-formkit-data-edit .formkit-form.form-horizontal .formkit-messages{width:66.6666666667%;margin-left:auto}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "4.1.10",
+  "version": "4.2.0",
   "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
   "author": {
     "name": "Tom",
@@ -79,7 +79,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",
@@ -95,6 +95,7 @@
   },
   "dependencies": {
     "@formkit/addons": "^2.0.0",
+    "@formkit/auto-animate": "^0.9.0",
     "@formkit/core": "^2.0.0",
     "@formkit/i18n": "^2.0.0",
     "@formkit/inputs": "^2.0.0",
@@ -116,7 +117,7 @@
     "@vitest/ui": "^4.1.8",
     "@vue/compiler-sfc": "^3.5.35",
     "@vue/server-renderer": "^3.5.35",
-    "@vue/test-utils": "^2.4.10",
+    "@vue/test-utils": "^2.4.11",
     "@vue/tsconfig": "^0.9.1",
     "@vueuse/core": "^14.3.0",
     "@vueuse/head": "^2.0.0",
@@ -126,7 +127,7 @@
     "cookie": "^1.1.1",
     "esbuild": "^0.28.0",
     "eslint": "^10.4.1",
-    "happy-dom": "^20.9.0",
+    "happy-dom": "^20.10.1",
     "json-editor-vue": "^0.18.1",
     "mkdist": "^2.4.1",
     "sass": "^1.100.0",