@sfxcode/formkit-primevue 2.4.17 → 2.4.19

package/dist/components/FormKitDataEdit.vue

@@ -62,7 +62,8 @@ function handleSave() {
       }"
       @submit="handleSave"
     >
-      <FormKitSchema :schema="formSchema" :data="formData" />
+      <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
+      <slot />
     </FormKit>
     <FormKitDebug v-if="debugData" :data="formData" header="Data" />
     <FormKitDebug v-if="debugSchema" :data="formSchema" header="Schema" />

package/dist/components/FormKitDataView.vue

@@ -38,7 +38,8 @@ const formData = ref(props.data)
       :form-class="formClass"
       :actions="false"
     >
-      <FormKitSchema :schema="formSchema" :data="formData" />
+      <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
+      <slot />
     </FormKit>
     <FormKitDebug v-if="debugData" :data="formData" header="Data" />
     <FormKitDebug v-if="debugSchema" :data="formSchema" header="Schema" />

package/dist/components/PrimeAutoComplete.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const suggestions = ref([])
 
@@ -53,6 +53,10 @@ function search(event: AutoCompleteCompleteEvent) {
       @complete="search"
       @change="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </AutoComplete>
   </div>
 </template>

package/dist/components/PrimeCascadeSelect.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -52,6 +52,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
       :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </CascadeSelect>
   </div>
 </template>

package/dist/components/PrimeCheckbox.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 
 const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const generatedId = generateId()
 </script>
@@ -57,7 +57,11 @@ const generatedId = generateId()
       :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Checkbox>
     <label v-if="hasSuffix" :for="generatedId" class="formkit-suffix">
       {{ context?.suffix }}
     </label>

package/dist/components/PrimeDatePicker.vue

@@ -59,7 +59,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -92,10 +92,10 @@ function handleClearClick() {
       :select-other-months="context?.selectOtherMonths ?? false"
       :icon="context?.icon"
       :show-icon="context.showIcon"
-      :previous-icon="context?.previousIcon ?? 'pi pi-chevron-left'"
-      :next-icon="context?.nextIcon ?? 'pi pi-chevron-right'"
-      :increment-icon="context?.incrementIcon ?? 'pi pi-chevron-up'"
-      :decrement-icon="context?.decrementIcon ?? 'pi pi-chevron-down'"
+      :previous-icon="context?.previousIcon"
+      :next-icon="context?.nextIcon"
+      :increment-icon="context?.incrementIcon"
+      :decrement-icon="context?.decrementIcon"
       :number-of-months="context?.numberOfMonths ?? 1"
       :responsive-options="context?.responsiveOptions"
       :view="context?.view ?? 'date'"
@@ -132,6 +132,10 @@ function handleClearClick() {
       @input="handleInput"
       @blur="handleBlur"
       @clear-click="handleClearClick"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </DatePicker>
   </div>
 </template>

package/dist/components/PrimeInputNumber.vue

@@ -34,7 +34,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid } = useFormKitInput(props.context)
 
 function handleBlur(e: InputNumberBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -99,6 +99,10 @@ watch(
       :unstyled="unstyled"
       @input="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </InputNumber>
   </div>
 </template>

package/dist/components/PrimeInputOtp.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -49,6 +49,10 @@ const { unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.c
       :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </InputOtp>
   </div>
 </template>

package/dist/components/PrimeListbox.vue

@@ -30,7 +30,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -63,6 +63,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
       :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Listbox>
   </div>
 </template>

package/dist/components/PrimeMultiSelect.vue

@@ -51,7 +51,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -105,6 +105,10 @@ const { unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.
       :unstyled="unstyled"
       @change="handleChange"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </MultiSelect>
   </div>
 </template>

package/dist/components/PrimePassword.vue

@@ -30,7 +30,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -54,8 +54,8 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
       :weak-label="context.weakLabel"
       :medium-label="context.mediumLabel"
       :strong-label="context.strongLabel"
-      :mask-icon="context.maskIcon ?? 'pi pi-eye-slash'"
-      :unmask-icon="context.unmaskIcon ?? 'pi pi-eye'"
+      :mask-icon="context.maskIcon"
+      :unmask-icon="context.unmaskIcon"
       :feedback="context.feedback ?? false"
       :toggle-mask="context.toggleMask ?? false"
       :pt="context.pt"
@@ -63,6 +63,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
       :unstyled="unstyled"
       @input="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Password>
   </div>
 </template>

package/dist/components/PrimeRating.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -40,13 +40,17 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"
       :stars="context.stars ?? 5"
-      :on-icon="context.onIcon ?? 'pi pi-star-fill'"
-      :off-icon="context.offIcon ?? 'pi pi-star'"
+      :on-icon="context.onIcon"
+      :off-icon="context.offIcon"
       :pt="context.pt"
       :pt-options="context.ptOptions"
       :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Rating>
   </div>
 </template>

package/dist/components/PrimeSelect.vue

@@ -47,7 +47,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -102,6 +102,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
       :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Select>
   </div>
 </template>

package/dist/components/PrimeSelectButton.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -53,6 +53,10 @@ const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.
       :unstyled="unstyled"
       @change="handleChange"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </SelectButton>
   </div>
 </template>

package/dist/components/PrimeToggleButton.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -43,14 +43,18 @@ const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.
       :aria-labelledby="context?.attrs.ariaLabelledby"
       :on-label="context.onLabel ?? 'Yes'"
       :off-label="context.offLabel ?? 'No'"
-      :on-icon="context.onIcon ?? 'pi pi-check'"
-      :off-icon="context.offIcon ?? 'pi pi-times'"
-      :icon-pos="context.iconPos ?? 'left'"
+      :on-icon="context.onIcon"
+      :off-icon="context.offIcon"
+      :icon-pos="context.iconPos"
       :pt="context.pt"
       :pt-options="context.ptOptions"
       :unstyled="unstyled"
       @change="handleChange"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </ToggleButton>
   </div>
 </template>

package/dist/components/PrimeTreeSelect.vue

@@ -29,7 +29,7 @@ const props = defineProps({
   },
 })
 
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -61,6 +61,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
       :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
-    />
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </TreeSelect>
   </div>
 </template>

package/dist/composables/useFormKitInput.d.ts

@@ -1,5 +1,6 @@
 export declare function useFormKitInput(context: any): {
     isInvalid: import("vue").ComputedRef<any>;
+    validSlotNames: import("vue").ComputedRef<string[]>;
     styleClass: import("vue").ComputedRef<any>;
     unstyled: import("vue").ComputedRef<any>;
     handleBlur: (event: Event) => void;

package/dist/composables/useFormKitInput.js

@@ -24,6 +24,8 @@ function useFormKitInput(context) {
   const unstyled = (0, _vue.computed)(() => {
     return context?.unstyled ?? isGlobalUnstyledMode();
   });
+  const formKitCreateInputSlots = /* @__PURE__ */new Set(["label", "help", "messages", "message", "input"]);
+  const validSlotNames = (0, _vue.computed)(() => Object.keys(context?.slots).filter(slotName => !formKitCreateInputSlots.has(slotName)));
   function handleBlur(event) {
     context?.handlers.blur(event);
   }
@@ -38,6 +40,7 @@ function useFormKitInput(context) {
   }
   return {
     isInvalid,
+    validSlotNames,
     styleClass,
     unstyled,
     handleBlur,

package/dist/composables/useFormKitInput.mjs

@@ -19,6 +19,10 @@ export function useFormKitInput(context) {
   const unstyled = computed(() => {
     return context?.unstyled ?? isGlobalUnstyledMode();
   });
+  const formKitCreateInputSlots = /* @__PURE__ */ new Set(["label", "help", "messages", "message", "input"]);
+  const validSlotNames = computed(
+    () => Object.keys(context?.slots).filter((slotName) => !formKitCreateInputSlots.has(slotName))
+  );
   function handleBlur(event) {
     context?.handlers.blur(event);
   }
@@ -31,5 +35,5 @@ export function useFormKitInput(context) {
   function handleSelect(e) {
     context?.node.input(e);
   }
-  return { isInvalid, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect };
+  return { isInvalid, validSlotNames, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect };
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.4.17",
-  "packageManager": "pnpm@9.9.0+sha256.7a4261e50d9a44d9240baf6c9d6e10089dcf0a79d0007f2a26985a6927324177",
+  "version": "2.4.19",
+  "packageManager": "pnpm@9.11.0+sha256.1c0e33f70e5df9eede84a357bdfa0b1f9dba6e58194628d48a1055756f553754",
   "author": {
     "name": "Tom",
     "email": "tom@sfxcode.com"
@@ -93,21 +93,22 @@
     "@formkit/vue": "^1.6.7",
     "primeicons": "^7.0.0",
     "primevue": "4.0.7",
+    "quill": "^2.0.2",
     "uuid": "^10.0.0",
-    "vue-i18n": "9.14.0"
+    "vue-i18n": "10.0.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "3.6.2",
+    "@antfu/eslint-config": "3.7.3",
     "@formkit/core": "^1.6.7",
     "@primevue/themes": "4.0.7",
-    "@types/node": "^22.7.0",
-    "@unocss/preset-icons": "0.62.4",
-    "@unocss/preset-uno": "0.62.4",
+    "@types/node": "^22.7.4",
+    "@unocss/preset-icons": "^0.63.0",
+    "@unocss/preset-uno": "^0.63.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitest/coverage-v8": "^2.1.1",
     "@vitest/ui": "^2.1.1",
-    "@vue/compiler-sfc": "3.5.6",
-    "@vue/server-renderer": "^3.5.8",
+    "@vue/compiler-sfc": "^3.5.10",
+    "@vue/server-renderer": "^3.5.10",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "@vuedx/typecheck": "~0.7.6",
@@ -119,25 +120,25 @@
     "consola": "^3.2.3",
     "eslint": "^9.11.1",
     "happy-dom": "^15.7.4",
-    "json-editor-vue": "^0.16.0",
+    "json-editor-vue": "^0.17.0",
     "mkdist": "^1.5.9",
     "quill": "^2.0.2",
     "sass": "1.78.0",
     "tslib": "^2.7.0",
     "typescript": "^5.6.2",
-    "unbuild": "3.0.0-rc.7",
-    "unocss": "0.62.4",
+    "unbuild": "3.0.0-rc.8",
+    "unocss": "^0.63.0",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
-    "vanilla-jsoneditor": "^0.23.8",
+    "vanilla-jsoneditor": "^1.0.4",
     "vite": "^5.4.8",
-    "vite-plugin-dts": "4.2.1",
+    "vite-plugin-dts": "4.2.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-pages": "^0.32.3",
     "vite-ssg": "^0.23.8",
-    "vitepress": "1.3.4",
+    "vitepress": "^1.3.4",
     "vitest": "^2.1.1",
-    "vue": "3.5.6",
+    "vue": "^3.5.10",
     "vue-demi": "^0.14.10",
     "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.6"