@sfxcode/formkit-primevue 2.4.18 → 2.5.0

package/dist/components/FormKitDataEdit.vue

@@ -1,9 +1,13 @@
 <script setup lang='ts'>
-import { FormKit, FormKitSchema } from '@formkit/vue'
+import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
 import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({
+  id: {
+    type: String,
+    default: 'form',
+  },
   data: {
     type: Object,
     default: null,
@@ -28,6 +32,10 @@ const props = defineProps({
     type: String,
     default: 'Save',
   },
+  cancelLabel: {
+    type: String,
+    default: 'Cancel',
+  },
   actionsClass: {
     type: String,
     default: '',
@@ -51,18 +59,23 @@ function handleSave() {
 <template>
   <div class="p-formkit-data-edit">
     <FormKit
-      id="form"
+      :id="id"
       v-model="formData"
       :form-class="formClass"
       :actions-class="actionsClass"
       type="form"
-      :submit-label="submitLabel"
-      :submit-attrs="{
-        inputClass,
-      }"
       @submit="handleSave"
     >
-      <FormKitSchema :schema="formSchema" :data="formData" />
+      <template #default>
+        <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
+        <slot />
+      </template>
+      <template #messages>
+        <FormKitMessages class="p-formkit-data-edit-messages" />
+      </template>
+      <template #submit>
+        <Button type="submit" :label="submitLabel" @submit="handleSave" />
+      </template>
     </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)
@@ -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/PrimeOutputText.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import type { FormKitFrameworkContext } from '@formkit/core'
 import type { PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
@@ -10,6 +11,20 @@ const props = defineProps({
   },
 })
 
+const textValue = computed(() => {
+  const value = props.context?._value
+  const { t } = useI18n()
+  if (value) {
+    if (props.context?.isTranslationKey)
+      return t(value)
+    else
+      return value
+  }
+  else {
+    return ''
+  }
+})
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -24,8 +39,8 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
       :style="context?.attrs?.style"
       :class="context?.attrs?.class"
     >
-      <span v-if="context?.html" v-html="context?._value" />
-      <span v-else v-text="context?._value" />
+      <span v-if="context?.html" v-html="textValue" />
+      <span v-else v-text="textValue" />
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.suffix }}

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>
@@ -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>
@@ -47,6 +47,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>
+    </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>
@@ -51,6 +51,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>
+    </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/dist/definitions/output.js

@@ -15,7 +15,7 @@ var _PrimeOutputReference = _interopRequireDefault(require("../components/PrimeO
 var _PrimeOutputText = _interopRequireDefault(require("../components/PrimeOutputText.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const primeOutputTextDefinition = exports.primeOutputTextDefinition = (0, _vue.createInput)(_PrimeOutputText.default, {
-  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "html"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html"]
 });
 const primeOutputDateDefinition = exports.primeOutputDateDefinition = (0, _vue.createInput)(_PrimeOutputDate.default, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]

package/dist/definitions/output.mjs

@@ -8,7 +8,7 @@ import PrimeOutputNumber from "../components/PrimeOutputNumber.vue";
 import PrimeOutputReference from "../components/PrimeOutputReference.vue";
 import PrimeOutputText from "../components/PrimeOutputText.vue";
 export const primeOutputTextDefinition = createInput(PrimeOutputText, {
-  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "html"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html"]
 });
 export const primeOutputDateDefinition = createInput(PrimeOutputDate, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]

package/dist/sass/formkit-primevue.scss

@@ -35,8 +35,8 @@ $grid-breakpoints: (
   // General message item styling
   .formkit-messages {
     margin: 0.125rem 0;
-    padding-top: 0.25rem;
-    padding-left: 0;
+    padding-top: 0.5rem;
+    padding-left: 0.5rem;
   }
 
   .formkit-message {
@@ -51,6 +51,12 @@ $grid-breakpoints: (
   .formkit-outer {
     padding-bottom: 0.8rem;
 
+    .formkit-messages {
+      margin: 0.125rem 0;
+      padding-top: 0.25rem;
+      padding-left: 0;
+    }
+
     .formkit-inner {
       .p-formkit {
         .p-formkit-icon {
@@ -163,6 +169,110 @@ $grid-breakpoints: (
   }
 }
 
+// data view only
+.p-formkit-data-view {
+  .formkit-form {
+    .formkit-outer {
+      padding-bottom: 0;
+    }
+
+    .formkit-help {
+      margin: 0;
+    }
+  }
+}
+
+// data edit only
+.p-formkit-data-edit {
+
+  .formkit-form {
+    .formkit-label {
+      //font-weight: normal;
+    }
+
+    // specific checkbox stylings
+    .formkit-outer[data-type="primeCheckbox"] {
+      //padding-left: 0;
+
+      .formkit-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+
+        .formkit-inner {
+          width: auto !important;
+        }
+
+        label {
+          width: auto;
+          order: 2;
+          padding: 0.125rem 0;
+
+          &:after {
+            content: "";
+          }
+
+          // styling of output when label is used in schema
+          + .formkit-inner {
+            margin-left: 0 !important;
+            order: 1;
+            flex-basis: 2rem;
+            flex-grow: 0;
+            flex-shrink: 0;
+            overflow: hidden;
+            // styling of suffix when suffix is used in addition to label
+            &:has( label) {
+              flex-grow: 1;
+              flex-basis: 100%;
+            }
+          }
+        }
+
+        // styling when both prefix and suffix are used in schema
+        label:first-child:nth-last-child(3), label:first-child:nth-last-child(3) ~ label {
+          width: auto;
+        }
+
+        label:first-child:nth-last-child(3) {
+          order: 1;
+
+          + div.p-checkbox {
+            order: 2;
+            width: auto;
+          }
+        }
+
+        label:first-child:nth-last-child(3) ~ label {
+          order: 3
+        }
+
+        // end styling when both prefix and suffix are used in schema
+
+
+        // styling of output when only suffix is used in schema
+        .formkit-inner:first-child {
+          margin-left: 0 !important;
+
+          .p-formkit {
+            display: flex;
+          }
+        }
+
+        .p-checkbox:not(:only-child) {
+          width: 2rem;
+          overflow: hidden;
+        }
+      }
+
+      .formkit-help {
+        width: auto !important;
+        //padding-left: 2rem;
+      }
+    }
+  }
+}
+
+
+
 // Debug
 .p-formkit-data-debug {
   pre, span {

package/dist/style.css

@@ -1 +1 @@
-:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.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-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}.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}.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:":"}.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{@apply w-4/12;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{@apply w-8/12}.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{@apply w-8/12;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}.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}.p-formkit-data-view .formkit-form .formkit-outer{padding-bottom:0}.p-formkit-data-view .formkit-form .formkit-help{margin:0}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper{display:flex;flex-wrap:wrap}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner{width:auto !important}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label{width:auto;order:2;padding:.125rem 0}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:after{content:""}.p-formkit-data-edit .formkit-form .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-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner:has(label){flex-grow:1;flex-basis:100%}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3),.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{width:auto}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3){order:1}.p-formkit-data-edit .formkit-form .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-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{order:3}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child{margin-left:0 !important}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child .p-formkit{display:flex}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .p-checkbox:not(:only-child){width:2rem;overflow:hidden}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-help{width:auto !important}.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:":"}.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{@apply w-4/12;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{@apply w-8/12}.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{@apply w-8/12;margin-left:auto}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.4.18",
+  "version": "2.5.0",
   "packageManager": "pnpm@9.11.0+sha256.1c0e33f70e5df9eede84a357bdfa0b1f9dba6e58194628d48a1055756f553754",
   "author": {
     "name": "Tom",
@@ -72,7 +72,7 @@
     "dev": "vite serve dev",
     "dev:build": "vite build dev",
     "dev:preview": "vite preview dev",
-    "release": "npm run lint && npm run build && changelogen --patch --release  && npm publish --access public && git push --follow-tags",
+    "release": "npm run lint && npm run build && changelogen --minor --release  && npm publish --access public && git push --follow-tags",
     "lint": "eslint ./src",
     "lint:fix": "eslint . --fix",
     "prepublishOnly": "pnpm build",
@@ -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.3",
-    "@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.9",
-    "@vue/server-renderer": "^3.5.9",
+    "@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.8",
-    "unocss": "^0.62.4",
+    "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",
     "vitest": "^2.1.1",
-    "vue": "^3.5.9",
+    "vue": "^3.5.10",
     "vue-demi": "^0.14.10",
     "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.6"