@sfxcode/formkit-primevue 4.1.2 → 4.1.3

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

@@ -26,6 +26,11 @@ export interface FormKitPrimeListboxProps {
     tabindex?: ListboxProps['tabindex'];
     ariaLabel?: ListboxProps['ariaLabel'];
     ariaLabelledby?: ListboxProps['ariaLabelledby'];
+    displayMode?: 'single' | 'transfer';
+    transferLeftHeaderText?: string;
+    transferRightHeaderText?: string;
+    transferHeaderClass?: string;
+    transferAll?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/components/PrimeListbox.vue

@@ -2,6 +2,7 @@
 import type { FormKitFrameworkContext } from '@formkit/core'
 import type { ListboxProps } from 'primevue/listbox'
 import type { PropType } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeListboxProps {
@@ -29,6 +30,11 @@ export interface FormKitPrimeListboxProps {
   tabindex?: ListboxProps['tabindex']
   ariaLabel?: ListboxProps['ariaLabel']
   ariaLabelledby?: ListboxProps['ariaLabelledby']
+  displayMode?: 'single' | 'transfer'
+  transferLeftHeaderText?: string
+  transferRightHeaderText?: string
+  transferHeaderClass?: string
+  transferAll?: boolean
 }
 
 const props = defineProps({
@@ -39,10 +45,97 @@ const props = defineProps({
 })
 
 const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
+
+// Transfer List functionality
+const optionValueKey = computed(() => {
+  const key = props.context.optionValue
+  return typeof key === 'string' ? key : null
+})
+
+// Helper function to convert values to full objects
+function valuesToObjects(values: any[]): any[] {
+  if (!optionValueKey.value)
+    return values
+  const options = props.context?.options || []
+  return values.map((val: any) => {
+    if (typeof val === 'object')
+      return val
+    return options.find((opt: any) => opt[optionValueKey.value!] === val) || val
+  })
+}
+
+// Initialize targetItems by converting any values to full objects
+const initialTargetItems = Array.isArray(modelValue.value) ? valuesToObjects(modelValue.value) : []
+const targetItems = ref<any[]>(initialTargetItems)
+const sourceSelection = ref<any[]>([])
+const targetSelection = ref<any[]>([])
+
+const transferHeaderClass = computed(() => {
+  return props.context.transferHeaderClass || 'text-base font-semibold'
+})
+
+const sourceItems = computed(() => {
+  const options = props.context?.options || []
+  if (!Array.isArray(options))
+    return []
+
+  return options.filter((item: any) => {
+    const itemValue = optionValueKey.value && typeof item === 'object' ? item[optionValueKey.value] : item
+    return !targetItems.value.some((t: any) => {
+      const targetValue = optionValueKey.value && typeof t === 'object' ? t[optionValueKey.value] : t
+      return targetValue === itemValue
+    })
+  })
+})
+
+function transferSelected() {
+  // sourceSelection now contains full objects since we removed optionValue
+  targetItems.value = [...targetItems.value, ...sourceSelection.value]
+  sourceSelection.value = []
+}
+
+function transferAll() {
+  targetItems.value = [...targetItems.value, ...sourceItems.value]
+  sourceSelection.value = []
+}
+
+function removeSelected() {
+  // targetSelection now contains full objects since we removed optionValue
+  targetItems.value = targetItems.value.filter((item: any) => {
+    const itemValue = optionValueKey.value && typeof item === 'object' ? item[optionValueKey.value] : item
+    return !targetSelection.value.some((sel: any) => {
+      const selValue = optionValueKey.value && typeof sel === 'object' ? sel[optionValueKey.value] : sel
+      return selValue === itemValue
+    })
+  })
+  targetSelection.value = []
+}
+
+function removeAll() {
+  targetItems.value = []
+  targetSelection.value = []
+}
+
+watch(targetItems, (newVal) => {
+  modelValue.value = newVal
+  handleInput(newVal)
+}, { deep: true })
+
+// Watch for external changes to modelValue and update targetItems
+watch(() => modelValue.value, (newVal) => {
+  if (props.context.displayMode === 'transfer' && Array.isArray(newVal)) {
+    const converted = valuesToObjects(newVal)
+    // Only update if the values are actually different to avoid infinite loops
+    if (JSON.stringify(converted) !== JSON.stringify(targetItems.value)) {
+      targetItems.value = converted
+    }
+  }
+}, { deep: true })
 </script>
 
 <template>
-  <div class="p-formkit">
+  <!-- Single Mode (default) -->
+  <div v-if="!context.displayMode || context.displayMode === 'single'" class="p-formkit">
     <Listbox
       :id="context.id"
       v-model="modelValue"
@@ -83,4 +176,154 @@ const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue
       </template>
     </Listbox>
   </div>
+
+  <!-- Transfer Mode -->
+  <div
+    v-if="context.displayMode === 'transfer'"
+    class="p-formkit-transfer"
+    style="display: flex; align-items: stretch; gap: 1rem; width: 100%;"
+  >
+    <!-- Source List -->
+    <div style="display: flex; flex-direction: column; flex: 1; gap: 0.5rem; min-width: 0;">
+      <span
+        v-if="context.transferLeftHeaderText"
+        :class="transferHeaderClass"
+      >{{ context.transferLeftHeaderText }}</span>
+      <Listbox
+        :id="`${context.id}-transfer-source`"
+        v-model="sourceSelection"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :list-style="context?.attrs.style"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :options="sourceItems"
+        :option-label="context.optionLabel"
+        :option-disabled="context.optionDisabled"
+        :option-group-label="context.optionGroupLabel"
+        :option-group-children="context.optionGroupChildren"
+        :data-key="context.dataKey"
+        :multiple="true"
+        :filter="context.filter ?? false"
+        :filter-icon="context.filterIcon"
+        :filter-placeholder="context.filterPlaceholder"
+        :filter-locale="context.filterLocale"
+        :filter-match-mode="context.filterMatchMode"
+        :auto-option-focus="context.autoOptionFocus ?? true"
+        :select-on-focus="context.selectOnFocus ?? false"
+        :meta-key-selection="context.metaKeySelection ?? false"
+        :virtual-scroller-options="context.virtualScrollerOptions"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @blur="handleBlur"
+      >
+        <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+          <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+        </template>
+      </Listbox>
+    </div>
+
+    <!-- Transfer Buttons -->
+    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;">
+      <Button
+        icon="pi pi-angle-right"
+        severity="secondary"
+        outlined
+        :disabled="sourceSelection.length === 0"
+        aria-label="Move selected to target"
+        @click="transferSelected"
+      />
+      <Button
+        v-if="context.transferAll"
+        icon="pi pi-angle-double-right"
+        severity="secondary"
+        outlined
+        :disabled="sourceItems.length === 0"
+        aria-label="Move all to target"
+        @click="transferAll"
+      />
+      <Button
+        icon="pi pi-angle-left"
+        severity="secondary"
+        outlined
+        :disabled="targetSelection.length === 0"
+        aria-label="Move selected to source"
+        @click="removeSelected"
+      />
+      <Button
+        v-if="context.transferAll"
+        icon="pi pi-angle-double-left"
+        severity="secondary"
+        outlined
+        :disabled="targetItems.length === 0"
+        aria-label="Move all to source"
+        @click="removeAll"
+      />
+    </div>
+
+    <!-- Target List -->
+    <div style="display: flex; flex-direction: column; flex: 1; gap: 0.5rem; min-width: 0;">
+      <span
+        v-if="context.transferRightHeaderText"
+        :class="transferHeaderClass"
+      >{{ context.transferRightHeaderText }}</span>
+      <Listbox
+        :id="`${context.id}-transfer-target`"
+        v-model="targetSelection"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :list-style="context?.attrs.style"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :options="targetItems"
+        :option-label="context.optionLabel"
+        :option-disabled="context.optionDisabled"
+        :option-group-label="context.optionGroupLabel"
+        :option-group-children="context.optionGroupChildren"
+        :data-key="context.dataKey"
+        :multiple="true"
+        :filter="context.filter ?? false"
+        :filter-icon="context.filterIcon"
+        :filter-placeholder="context.filterPlaceholder"
+        :filter-locale="context.filterLocale"
+        :filter-match-mode="context.filterMatchMode"
+        :auto-option-focus="context.autoOptionFocus ?? true"
+        :select-on-focus="context.selectOnFocus ?? false"
+        :meta-key-selection="context.metaKeySelection ?? false"
+        :virtual-scroller-options="context.virtualScrollerOptions"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @blur="handleBlur"
+      >
+        <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+          <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+        </template>
+      </Listbox>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.p-formkit-transfer {
+  min-width: 600px;
+}
+
+.p-formkit-transfer :deep(.p-listbox) {
+  width: 100%;
+  height: 100%;
+}
+
+.p-formkit-transfer :deep(.p-listbox-list-container) {
+  max-height: none;
+}
+</style>

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

@@ -26,6 +26,11 @@ export interface FormKitPrimeListboxProps {
     tabindex?: ListboxProps['tabindex'];
     ariaLabel?: ListboxProps['ariaLabel'];
     ariaLabelledby?: ListboxProps['ariaLabelledby'];
+    displayMode?: 'single' | 'transfer';
+    transferLeftHeaderText?: string;
+    transferRightHeaderText?: string;
+    transferHeaderClass?: string;
+    transferAll?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/definitions/input.js

@@ -74,7 +74,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"],
+  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"],
   family: "PrimeInput"
 });
 const primeDatePickerDefinition = exports.primeDatePickerDefinition = (0, _vue.createInput)(_PrimeDatePicker.default, {

package/dist/definitions/input.mjs

@@ -67,7 +67,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"],
+  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"],
   family: "PrimeInput"
 });
 export const primeDatePickerDefinition = createInput(PrimeDatePicker, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
   "author": {
     "name": "Tom",