@sfxcode/formkit-primevue 2.9.7 → 2.9.9

package/dist/components/PrimeAutoComplete.vue

@@ -1,9 +1,8 @@
 <script setup lang='ts'>
 import type { FormKitFrameworkContext } from '@formkit/core'
 import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
-
 import type { PropType } from 'vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeAutoCompleteProps {
@@ -19,6 +18,7 @@ export interface FormKitPrimeAutoCompleteProps {
   minLength?: AutoCompleteProps['minLength']
   placeholder?: AutoCompleteProps['placeholder']
   fluid?: AutoCompleteProps['fluid']
+  separators?: string[] | []
 }
 
 const props = defineProps({
@@ -34,6 +34,31 @@ 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.
+ */
 async function search(event: AutoCompleteCompleteEvent) {
   if (props.context?.options && props.context?.optionLabel) {
     suggestions.value = props.context.options.filter((option) => {
@@ -54,13 +79,55 @@ async function search(event: AutoCompleteCompleteEvent) {
     }
   }
 }
+
+/**
+ * Handles paste event to transform a string separated by any of the provided separators into multiple items.
+ */
+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
+    : [',']
+  const regex = new RegExp(`[${separators.map(s => s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')).join('')}]`)
+  // If separators are provided, split the pasted text by them
+  if (pastedText && regex.test(pastedText)) {
+    event.preventDefault()
+    const items = pastedText
+      .split(regex)
+      .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]
+    }
+    else {
+      localValue.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()]
+    }
+    else {
+      localValue.value = [pastedText.trim()]
+    }
+  }
+}
 </script>
 
 <template>
   <div class="p-formkit">
     <AutoComplete
       :id="context.id"
-      v-model="context._value"
+      v-model="localValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :class="context?.attrs?.class"
@@ -85,6 +152,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 }" />

package/dist/composables/useFormKitRepeater.js

@@ -21,8 +21,11 @@ function useFormKitRepeater() {
   }
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {
     const swapElements = (array, index1, index2) => {
-      array[index1] = array.splice(index2, 1, array[index1])[0];
-      return array;
+      const newArray = [...array];
+      const temp = newArray[index1];
+      newArray[index1] = newArray[index2];
+      newArray[index2] = temp;
+      return newArray;
     };
     data.addNode = parentNode => () => {
       const newArray = [...parentNode.value, addNodeDefaultObject];

package/dist/composables/useFormKitRepeater.mjs

@@ -8,8 +8,11 @@ export function useFormKitRepeater() {
   }
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {
     const swapElements = (array, index1, index2) => {
-      array[index1] = array.splice(index2, 1, array[index1])[0];
-      return array;
+      const newArray = [...array];
+      const temp = newArray[index1];
+      newArray[index1] = newArray[index2];
+      newArray[index2] = temp;
+      return newArray;
     };
     data.addNode = (parentNode) => () => {
       const newArray = [...parentNode.value, addNodeDefaultObject];

package/dist/definitions/input.js

@@ -30,7 +30,7 @@ var _PrimeToggleSwitch = _interopRequireDefault(require("../components/PrimeTogg
 var _PrimeTreeSelect = _interopRequireDefault(require("../components/PrimeTreeSelect.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const primeAutoCompleteDefinition = exports.primeAutoCompleteDefinition = (0, _vue.createInput)(_PrimeAutoComplete.default, {
-  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"]
 });
 const primeInputTextDefinition = exports.primeInputTextDefinition = (0, _vue.createInput)(_PrimeInputText.default, {
   props: ["pt", "ptOptions", "unstyled", "placeholder", "iconPrefix", "iconSuffix", "size", "inputType"]

package/dist/definitions/input.mjs

@@ -23,7 +23,7 @@ import PrimeToggleButton from "../components/PrimeToggleButton.vue";
 import PrimeToggleSwitch from "../components/PrimeToggleSwitch.vue";
 import PrimeTreeSelect from "../components/PrimeTreeSelect.vue";
 export const primeAutoCompleteDefinition = 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 = createInput(PrimeInputText, {
   props: ["pt", "ptOptions", "unstyled", "placeholder", "iconPrefix", "iconSuffix", "size", "inputType"]

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.9.7",
-  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
+  "version": "2.9.9",
+  "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad",
   "author": {
     "name": "Tom",
     "email": "tom@sfxcode.com"
@@ -91,56 +91,56 @@
     "@formkit/i18n": "^1.6.9",
     "@formkit/inputs": "^1.6.9",
     "@formkit/vue": "^1.6.9",
-    "@intlify/core": "^11.1.6",
+    "@intlify/core": "^11.1.9",
     "primeicons": "^7.0.0",
-    "primevue": "^4.3.5",
-    "vue-i18n": "^11.1.6"
+    "primevue": "^4.3.6",
+    "vue-i18n": "^11.1.9"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.14.1",
+    "@antfu/eslint-config": "^4.16.2",
     "@formkit/core": "^1.6.9",
     "@formkit/drag-and-drop": "^0.5.3",
-    "@primeuix/themes": "^1.1.2",
-    "@types/node": "^24.0.3",
+    "@primeuix/themes": "^1.2.1",
+    "@types/node": "^24.0.13",
     "@types/uuid": "^10.0.0",
-    "@unocss/preset-icons": "66.2.3",
-    "@unocss/preset-uno": "66.2.3",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@unocss/preset-icons": "66.3.3",
+    "@unocss/preset-uno": "66.3.3",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "@vue/compiler-sfc": "^3.5.17",
     "@vue/server-renderer": "^3.5.17",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueuse/core": "^13.3.0",
+    "@vueuse/core": "^13.5.0",
     "@vueuse/head": "^2.0.0",
-    "changelogen": "^0.6.1",
+    "changelogen": "^0.6.2",
     "chart.js": "^4.5.0",
     "consola": "^3.4.2",
     "cookie": "^1.0.2",
-    "esbuild": "^0.25.5",
-    "eslint": "^9.29.0",
+    "esbuild": "^0.25.6",
+    "eslint": "^9.31.0",
     "happy-dom": "^18.0.1",
     "json-editor-vue": "^0.18.1",
     "mkdist": "^2.3.0",
-    "quill": "^2.0.3",
+    "quill": "1.3.7",
     "sass": "^1.89.2",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
     "unbuild": "^3.5.0",
-    "unocss": "66.2.3",
+    "unocss": "66.3.3",
     "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.7.0",
-    "vite": "^6.3.5",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-pages": "^0.33.0",
-    "vite-ssg": "^27.0.1",
+    "vite-plugin-pages": "^0.33.1",
+    "vite-ssg": "^28.0.0",
     "vitepress": "^1.6.3",
     "vitest": "^3.2.4",
     "vue": "^3.5.17",
     "vue-demi": "^0.14.10",
     "vue-router": "^4.5.1",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.1"
   }
 }