feat(PrimeAutoComplete): default use commas as separator on paste, add support for multiple custom separators in paste handling,

sfxcode · sfxcode · commit 2de6dca879c1 · 2025-07-13T09:52:54.000+02:00
diff --git a/dev/pages/inputs/AutoComplete.vue b/dev/pages/inputs/AutoComplete.vue
@@ -55,6 +55,15 @@ const schema
       typeahead: false,
       label: 'Chips Replacement',
     },
+    {
+      $formkit: 'primeAutoComplete',
+      id: 'chips',
+      name: 'chips',
+      multiple: true,
+      typeahead: false,
+      label: 'Chips - Paste separated values by comma or semicolon',
+      separators: [',', ';'],
+    },
   ]
 
 const data = { id: { id: '1', name: 'Tom', value: '123' } }
diff --git a/src/components/PrimeAutoComplete.vue b/src/components/PrimeAutoComplete.vue
@@ -19,6 +19,7 @@ export interface FormKitPrimeAutoCompleteProps {
   minLength?: AutoCompleteProps['minLength']
   placeholder?: AutoCompleteProps['placeholder']
   fluid?: AutoCompleteProps['fluid']
+  separators?: string[] | []
 }
 
 const props = defineProps({
@@ -34,6 +35,12 @@ const suggestions = ref(['', {}])
 suggestions.value = []
 const loading = ref(false)
 
+/**
+ * Searches for suggestions based on the input query.
+ * If options and optionLabel are provided, it filters the options.
+ * Otherwise, it calls the complete function from the context to fetch suggestions.
+ * @param event - The AutoCompleteCompleteEvent containing the query.
+ */
 async function search(event: AutoCompleteCompleteEvent) {
   if (props.context?.options && props.context?.optionLabel) {
     suggestions.value = props.context.options.filter((option) => {
@@ -54,6 +61,38 @@ async function search(event: AutoCompleteCompleteEvent) {
     }
   }
 }
+
+/**
+ * Handles paste event to transform a string separated by any of the provided separators into multiple items.
+ * @param event - The paste event from the input.
+ */
+function handlePaste(event: ClipboardEvent) {
+  if (!props.context?.multiple)
+    return
+  const clipboardData = event.clipboardData
+  if (!clipboardData)
+    return
+  const pastedText = clipboardData.getData('text')
+  const separators = Array.isArray(props.context?.separators) && props.context.separators.length > 0
+    ? props.context.separators
+    : [',']
+  // Create a regex to split by any separator, escaping special regex characters
+  const regex = new RegExp(`[${separators.map(s => s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')).join('')}]`)
+  if (pastedText && regex.test(pastedText)) {
+    event.preventDefault()
+    const items = pastedText
+      .split(regex)
+      .map(item => item.trim())
+      .filter(item => item.length > 0)
+    if (Array.isArray(props.context._value)) {
+      props.context._value.push(...items)
+    }
+    else {
+      props.context._value = items
+    }
+    props.context?.node?.input?.(props.context?._value)
+  }
+}
 </script>
 
 <template>
@@ -85,6 +124,7 @@ async function search(event: AutoCompleteCompleteEvent) {
       @complete="search"
       @change="handleInput"
       @blur="handleBlur"
+      @paste="handlePaste"
     >
       <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
         <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
diff --git a/src/definitions/input.ts b/src/definitions/input.ts
@@ -26,7 +26,7 @@ import PrimeToggleSwitch from '../components/PrimeToggleSwitch.vue'
 import PrimeTreeSelect from '../components/PrimeTreeSelect.vue'
 
 export const primeAutoCompleteDefinition: FormKitTypeDefinition = createInput(PrimeAutoComplete, {
-  props: ['pt', 'ptOptions', 'unstyled', 'Select', 'multiple', 'typeahead', 'optionLabel', 'options', 'size', 'minLength', 'placeholder', 'fluid'],
+  props: ['pt', 'ptOptions', 'unstyled', 'Select', 'multiple', 'typeahead', 'optionLabel', 'options', 'size', 'minLength', 'placeholder', 'fluid', 'separators'],
 })
 export const primeInputTextDefinition: FormKitTypeDefinition = createInput(PrimeInputText, {
   props: ['pt', 'ptOptions', 'unstyled', 'placeholder', 'iconPrefix', 'iconSuffix', 'size', 'inputType'],
