@sfxcode/formkit-primevue 4.2.1 → 4.2.3

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

@@ -35,6 +35,7 @@ export interface FormKitPrimeListboxProps {
     transferContainerClass?: string;
     transferListContainerClass?: string;
     transferButtonClass?: string;
+    transferDragDrop?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/components/PrimeListbox.vue

@@ -39,6 +39,7 @@ export interface FormKitPrimeListboxProps {
   transferContainerClass?: string
   transferListContainerClass?: string
   transferButtonClass?: string
+  transferDragDrop?: boolean
 }
 
 const props = defineProps({
@@ -67,6 +68,14 @@ const transferButtonSeverity = computed(() => {
   return props.context.transferButtonSeverity || 'secondary'
 })
 
+const transferDragDrop = computed(() => {
+  return props.context.transferDragDrop ?? true
+})
+
+const transferSlotNames = computed(() => {
+  return validSlotNames.value.filter((slotName: string) => slotName !== 'option')
+})
+
 // Transfer List functionality
 const optionValueKey = computed(() => {
   const key = props.context.optionValue
@@ -109,6 +118,121 @@ const sourceItems = computed(() => {
   })
 })
 
+type TransferList = 'source' | 'target'
+
+const dragSource = ref<TransferList | null>(null)
+const draggedItems = ref<any[]>([])
+const activeDropzone = ref<TransferList | null>(null)
+
+function getComparableValue(item: any): any {
+  const valueKey = optionValueKey.value
+  return valueKey && typeof item === 'object' ? item?.[valueKey] : item
+}
+
+function isSameOption(left: any, right: any): boolean {
+  return getComparableValue(left) === getComparableValue(right)
+}
+
+function getUniqueItems(items: any[]): any[] {
+  return items.filter((item, index) => items.findIndex(candidate => isSameOption(candidate, item)) === index)
+}
+
+function mergeUniqueItems(base: any[], toAdd: any[]): any[] {
+  return [...base, ...toAdd.filter(item => !base.some(candidate => isSameOption(candidate, item)))]
+}
+
+function getDraggableItems(origin: TransferList, option: any): any[] {
+  const selection = origin === 'source' ? sourceSelection.value : targetSelection.value
+  if (!selection.length)
+    return [option]
+
+  const hasOptionSelected = selection.some(item => isSameOption(item, option))
+  return hasOptionSelected ? getUniqueItems(selection) : [option]
+}
+
+function clearDragState() {
+  dragSource.value = null
+  draggedItems.value = []
+  activeDropzone.value = null
+}
+
+function canDropInto(target: TransferList): boolean {
+  return transferDragDrop.value
+    && !props.context.disabled
+    && !!dragSource.value
+    && dragSource.value !== target
+    && draggedItems.value.length > 0
+}
+
+function handleOptionDragStart(origin: TransferList, option: any, event: DragEvent) {
+  if (!transferDragDrop.value || props.context.disabled)
+    return
+
+  draggedItems.value = getDraggableItems(origin, option)
+  dragSource.value = origin
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', 'formkit-primevue-transfer')
+  }
+}
+
+function handleOptionDragEnd() {
+  clearDragState()
+}
+
+function handleDropzoneDragOver(target: TransferList, event: DragEvent) {
+  if (!canDropInto(target))
+    return
+
+  event.preventDefault()
+  activeDropzone.value = target
+  if (event.dataTransfer)
+    event.dataTransfer.dropEffect = 'move'
+}
+
+function handleDropzoneDragLeave(target: TransferList) {
+  if (activeDropzone.value === target)
+    activeDropzone.value = null
+}
+
+function handleDropzoneDrop(target: TransferList, event: DragEvent) {
+  if (!canDropInto(target)) {
+    clearDragState()
+    return
+  }
+
+  event.preventDefault()
+  if (target === 'target') {
+    targetItems.value = mergeUniqueItems(targetItems.value, draggedItems.value)
+    sourceSelection.value = []
+  }
+  else {
+    targetItems.value = targetItems.value.filter(item => !draggedItems.value.some(dragged => isSameOption(dragged, item)))
+    targetSelection.value = []
+  }
+
+  clearDragState()
+}
+
+function resolveOptionDisabled(option: any): boolean {
+  const optionDisabled = props.context.optionDisabled
+  if (!optionDisabled)
+    return false
+  if (typeof optionDisabled === 'function')
+    return !!optionDisabled(option)
+  if (typeof optionDisabled === 'string')
+    return !!option?.[optionDisabled]
+  return !!optionDisabled
+}
+
+function resolveOptionLabel(option: any): string {
+  if (!props.context.optionLabel)
+    return String(option)
+  if (typeof props.context.optionLabel === 'function')
+    return String(props.context.optionLabel(option))
+  return String(option?.[props.context.optionLabel] ?? option)
+}
+
 function transferSelected() {
   if (sourceSelection.value.length === 0)
     return
@@ -216,7 +340,12 @@ watch(() => modelValue.value, (newVal) => {
     :class="transferContainerClass"
   >
     <!-- Source List -->
-    <div :class="transferListContainerClass">
+    <div
+      :class="[transferListContainerClass, { 'p-formkit-transfer-dropzone-active': activeDropzone === 'source' }]"
+      @dragover="handleDropzoneDragOver('source', $event)"
+      @dragleave="handleDropzoneDragLeave('source')"
+      @drop="handleDropzoneDrop('source', $event)"
+    >
       <span
         v-if="context.transferLeftHeaderText"
         :class="transferHeaderClass"
@@ -254,7 +383,23 @@ watch(() => modelValue.value, (newVal) => {
         :unstyled="unstyled"
         @blur="handleBlur"
       >
-        <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <template #option="slotProps">
+          <div
+            :draggable="transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option)"
+            class="p-formkit-transfer-option"
+            :class="{ 'p-formkit-transfer-option-draggable': transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option) }"
+            @dragstart="handleOptionDragStart('source', slotProps.option, $event)"
+            @dragend="handleOptionDragEnd"
+          >
+            <component
+              :is="context?.slots.option"
+              v-if="context?.slots?.option"
+              v-bind="{ ...context, ...slotProps }"
+            />
+            <span v-else>{{ resolveOptionLabel(slotProps.option) }}</span>
+          </div>
+        </template>
+        <template v-for="slotName in transferSlotNames" :key="slotName" #[slotName]="slotProps">
           <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
         </template>
       </Listbox>
@@ -303,7 +448,12 @@ watch(() => modelValue.value, (newVal) => {
     </div>
 
     <!-- Target List -->
-    <div :class="transferListContainerClass">
+    <div
+      :class="[transferListContainerClass, { 'p-formkit-transfer-dropzone-active': activeDropzone === 'target' }]"
+      @dragover="handleDropzoneDragOver('target', $event)"
+      @dragleave="handleDropzoneDragLeave('target')"
+      @drop="handleDropzoneDrop('target', $event)"
+    >
       <span
         v-if="context.transferRightHeaderText"
         :class="transferHeaderClass"
@@ -341,7 +491,23 @@ watch(() => modelValue.value, (newVal) => {
         :unstyled="unstyled"
         @blur="handleBlur"
       >
-        <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <template #option="slotProps">
+          <div
+            :draggable="transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option)"
+            class="p-formkit-transfer-option"
+            :class="{ 'p-formkit-transfer-option-draggable': transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option) }"
+            @dragstart="handleOptionDragStart('target', slotProps.option, $event)"
+            @dragend="handleOptionDragEnd"
+          >
+            <component
+              :is="context?.slots.option"
+              v-if="context?.slots?.option"
+              v-bind="{ ...context, ...slotProps }"
+            />
+            <span v-else>{{ resolveOptionLabel(slotProps.option) }}</span>
+          </div>
+        </template>
+        <template v-for="slotName in transferSlotNames" :key="slotName" #[slotName]="slotProps">
           <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
         </template>
       </Listbox>
@@ -350,10 +516,6 @@ watch(() => modelValue.value, (newVal) => {
 </template>
 
 <style scoped>
-.p-formkit-transfer {
-  min-width: 600px;
-}
-
 .p-formkit-transfer :deep(.p-listbox) {
   width: 100%;
   height: 100%;
@@ -362,4 +524,9 @@ watch(() => modelValue.value, (newVal) => {
 .p-formkit-transfer :deep(.p-listbox-list-container) {
   max-height: none;
 }
+
+.p-formkit-transfer-dropzone-active :deep(.p-listbox) {
+  outline: 2px dashed var(--p-primary-color);
+  outline-offset: 2px;
+}
 </style>

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

@@ -35,6 +35,7 @@ export interface FormKitPrimeListboxProps {
     transferContainerClass?: string;
     transferListContainerClass?: string;
     transferButtonClass?: string;
+    transferDragDrop?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/definitions/input.js

@@ -73,7 +73,7 @@ const primeMultiSelectDefinition = exports.primeMultiSelectDefinition = (0, _vue
   family: "PrimeInput"
 });
 const primeListboxDefinition = exports.primeListboxDefinition = (0, _vue.createInput)(_PrimeListbox.default, {
-  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll"],
+  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll", "transferButtonSeverity", "transferContainerClass", "transferListContainerClass", "transferButtonClass", "transferDragDrop"],
   family: "PrimeInput"
 });
 const primeDatePickerDefinition = exports.primeDatePickerDefinition = (0, _vue.createInput)(_PrimeDatePicker.default, {

package/dist/definitions/input.mjs

@@ -66,7 +66,7 @@ export const primeMultiSelectDefinition = createInput(PrimeMultiSelect, {
   family: "PrimeInput"
 });
 export const primeListboxDefinition = createInput(PrimeListbox, {
-  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll"],
+  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll", "transferButtonSeverity", "transferContainerClass", "transferListContainerClass", "transferButtonClass", "transferDragDrop"],
   family: "PrimeInput"
 });
 export const primeDatePickerDefinition = createInput(PrimeDatePicker, {

package/dist/definitions/repeater.js

@@ -50,8 +50,9 @@ function addDragHandle(handleClass = "", iconClass = "", render = "true") {
 const primeRepeaterDefinition = exports.primeRepeaterDefinition = (0, _vue.createInput)(addElement("div", [addList("$listName", [addInsertButton("$insertButtonLabel", "pi pi-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"), addListGroup([addElement("div", [addDragHandle("$internalDragHandleClass", "$dragHandleIconClass", "$renderDragHandle"), {
   children: "$slots.default"
 }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")], {
+  id: "$getListItemId($index)",
   class: "$getListItemClass($index)",
-  draggable: "$renderDragHandle",
+  draggable: "$draggable",
   onDragstart: "$dragNodeStart($node.parent, $index)",
   onDragover: "$dragNodeOver($index)",
   onDragleave: "$dragNodeLeave($index)",
@@ -61,7 +62,7 @@ const primeRepeaterDefinition = exports.primeRepeaterDefinition = (0, _vue.creat
   class: "$internalListClass",
   id: "$internalListId"
 }, true), {
-  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "dragHandleClass", "dragHandleIconClass"],
+  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
   features: [addRepeaterHandler]
 });
 function addRepeaterHandler(node) {
@@ -69,6 +70,7 @@ function addRepeaterHandler(node) {
     array.splice(index2, 0, array.splice(index1, 1)[0]);
     return array;
   };
+  const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
   node.on("created", () => {
     if (node.context) {
       let dragStartIndex = null;
@@ -79,16 +81,20 @@ function addRepeaterHandler(node) {
       node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
       node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "";
       node.context.renderMoveButtons = !node.context.hideMoveButtons;
+      node.context.draggable = !!node.context.draggable;
       node.context.renderDragHandle = !!node.context.displayDragHandle;
       node.context.dragHandleIconClass = node.context.dragHandleIconClass || "pi pi-bars";
       node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
       node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
       node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
-      node.context.internalListId = `formkit-prime-repeater-${String(node.props.id || node.name || "list").replace(/[^\w-]/g, "-")}`;
+      node.context.internalListId = `formkit-items-${uuid}`;
       node.context.getListItemClass = index => {
         if (dragOverIndex === index && dragStartIndex !== index) return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
         return node.context?.internalListItemClass?.toString() ?? "";
       };
+      node.context.getListItemId = index => {
+        return `formkit-item-${index}-${uuid}`;
+      };
       node.context.insertNode = parentNode => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const newArray = [{

package/dist/definitions/repeater.mjs

@@ -36,8 +36,9 @@ export const primeRepeaterDefinition = createInput(
           { children: "$slots.default" },
           addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
         ], {
+          id: "$getListItemId($index)",
           class: "$getListItemClass($index)",
-          draggable: "$renderDragHandle",
+          draggable: "$draggable",
           onDragstart: "$dragNodeStart($node.parent, $index)",
           onDragover: "$dragNodeOver($index)",
           onDragleave: "$dragNodeLeave($index)",
@@ -48,7 +49,7 @@ export const primeRepeaterDefinition = createInput(
     ], true, "true")
   ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
-    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "dragHandleClass", "dragHandleIconClass"],
+    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
     features: [addRepeaterHandler]
   }
 );
@@ -57,6 +58,7 @@ function addRepeaterHandler(node) {
     array.splice(index2, 0, array.splice(index1, 1)[0]);
     return array;
   };
+  const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
   node.on("created", () => {
     if (node.context) {
       let dragStartIndex = null;
@@ -67,17 +69,21 @@ function addRepeaterHandler(node) {
       node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
       node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "";
       node.context.renderMoveButtons = !node.context.hideMoveButtons;
+      node.context.draggable = !!node.context.draggable;
       node.context.renderDragHandle = !!node.context.displayDragHandle;
       node.context.dragHandleIconClass = node.context.dragHandleIconClass || "pi pi-bars";
       node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
       node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
       node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
-      node.context.internalListId = `formkit-prime-repeater-${String(node.props.id || node.name || "list").replace(/[^\w-]/g, "-")}`;
+      node.context.internalListId = `formkit-items-${uuid}`;
       node.context.getListItemClass = (index) => {
         if (dragOverIndex === index && dragStartIndex !== index)
           return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
         return node.context?.internalListItemClass?.toString() ?? "";
       };
+      node.context.getListItemId = (index) => {
+        return `formkit-item-${index}-${uuid}`;
+      };
       node.context.insertNode = (parentNode) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const newArray = [{ ...newItem }, ...parentNode.value];

package/dist/sass/formkit-primevue.scss

@@ -333,6 +333,20 @@ $grid-breakpoints: (
   gap: 0.5rem;
 }
 
+.p-formkit-transfer-option {
+  width: 100%;
+}
+
+.p-formkit-transfer-option-draggable {
+  cursor: grab;
+}
+
+.p-formkit-transfer-option-draggable:active {
+  cursor: grabbing;
+}
+
+
+
 
 // Debug
 .p-formkit-data-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}.formkit-form .formkit-repeater-drag-handle{display:inline-flex;align-items:center;cursor:grab;user-select:none}.formkit-form .formkit-item[draggable=true]{cursor:grab}.formkit-form .formkit-item[draggable=true]:active{cursor:grabbing}.formkit-form .formkit-item[draggable=true].formkit-repeater-drop-target{outline:1px dashed var(--p-primary-color, #3b82f6);outline-offset:2px;background:color-mix(in srgb, var(--p-primary-color, #3b82f6) 12%, transparent)}.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}}
+: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}.formkit-form .formkit-repeater-drag-handle{display:inline-flex;align-items:center;cursor:grab;user-select:none}.formkit-form .formkit-item[draggable=true]{cursor:grab}.formkit-form .formkit-item[draggable=true]:active{cursor:grabbing}.formkit-form .formkit-item[draggable=true].formkit-repeater-drop-target{outline:1px dashed var(--p-primary-color, #3b82f6);outline-offset:2px;background:color-mix(in srgb, var(--p-primary-color, #3b82f6) 12%, transparent)}.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-transfer-option{width:100%}.p-formkit-transfer-option-draggable{cursor:grab}.p-formkit-transfer-option-draggable:active{cursor:grabbing}.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.2.1",
+  "version": "4.2.3",
   "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
   "author": {
     "name": "Tom",