@sfxcode/formkit-primevue 2.3.10 → 2.4.0

package/dist/components/FormKitDebug.vue

@@ -15,8 +15,8 @@ defineProps({
   <div class="p-formkit-data-debug">
     <h3>{{ header }}</h3>
     <slot />
-    <pre v-if="data" class="text-xs">{{ data }}</pre>
-    <span v-else class="text-xs">No Data available</span>
+    <pre v-if="data">{{ data }}</pre>
+    <span v-else>No Data available</span>
   </div>
 </template>
 

package/dist/components/PrimeCheckbox.vue

@@ -23,20 +23,22 @@ const props = defineProps({
   },
 })
 
-const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
+const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
 
 const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+
+const generatedId = generateId()
 </script>
 
 <template>
   <div class="p-formkit">
-    <span v-if="hasPrefix" class="formkit-prefix">
+    <label v-if="hasPrefix" :for="generatedId" class="formkit-prefix">
       {{ context?.prefix }}
-    </span>
+    </label>
     <Checkbox
       v-model="context._value"
       v-bind="context?.attrs"
-      :input-id="context.id"
+      :input-id="generatedId"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
@@ -55,8 +57,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       @change="handleInput"
       @blur="handleBlur"
     />
-    <span v-if="hasSuffix" class="formkit-suffix">
+    <label v-if="hasSuffix" :for="generatedId" class="formkit-suffix">
       {{ context?.suffix }}
-    </span>
+    </label>
   </div>
 </template>

package/dist/components/PrimeInputMask.vue

@@ -3,7 +3,9 @@ import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { InputMaskProps } from 'primevue/inputmask'
-import { useFormKitInput } from '../composables'
+import InputIcon from 'primevue/inputicon'
+import IconField from 'primevue/iconfield'
+import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeInputMaskProps {
   mask?: InputMaskProps['mask']
@@ -15,9 +17,6 @@ export interface FormKitPrimeInputMaskProps {
   unstyled?: InputMaskProps['unstyled']
   invalid?: InputMaskProps['invalid']
   variant?: InputMaskProps['variant']
-  iconLeft?: string
-  iconRight?: string
-
 }
 
 const props = defineProps({
@@ -27,35 +26,15 @@ const props = defineProps({
   },
 })
 
-const { styleClass } = useFormKitInput(props.context)
-
-function handleInput(e: FocusEvent) {
-  props.context?.node.input(props.context?._value)
-  props.context?.handlers.blur(e)
-}
-
-function hasLeftIcon() {
-  return props.context?.iconLeft && props.context?.iconLeft.length > 0
-}
-
-function hasRightIcon() {
-  return props.context?.iconRight && props.context?.iconRight.length > 0
-}
-
-function spanClass() {
-  let result = ''
-  if (hasLeftIcon())
-    result = `${result}p-input-icon-left `
-  if (hasRightIcon())
-    result = `${result}p-input-icon-right `
-  return result
-}
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
-    <span :class="spanClass()">
-      <i v-if="hasLeftIcon()" :class="context.iconLeft" />  <InputMask
+    <IconField>
+      <InputIcon v-if="hasPrefixIcon" :class="context?.iconPrefix" />
+      <InputMask
         :id="context.id"
         v-model="context._value"
         v-bind="context?.attrs"
@@ -74,8 +53,10 @@ function spanClass() {
         :variant="context.variant"
         :pt-options="context.ptOptions"
         :unstyled="context.unstyled ?? false"
-        @blur="handleInput"
-      />  <i v-if="hasRightIcon" :class="context.iconRight" />
-    </span>
+        @input="handleInput"
+        @blur="handleBlur"
+      />
+      <InputIcon v-if="hasSuffixIcon" :class="context?.iconSuffix" />
+    </IconField>
   </div>
 </template>

package/dist/components/PrimeInputText.vue

@@ -12,8 +12,6 @@ export interface FormKitPrimeInputTextProps {
   ptOptions?: InputTextProps['ptOptions']
   unstyled?: InputTextProps['unstyled']
   placeholder?: InputTextProps['placeholder']
-  icon?: string
-
 }
 
 const props = defineProps({
@@ -30,7 +28,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 <template>
   <div class="p-formkit">
     <IconField>
-      <InputIcon v-if="hasPrefixIcon" :class="context?.prefixIcon" />
+      <InputIcon v-if="hasPrefixIcon" :class="context?.iconPrefix" />
       <InputText
         :id="context.id"
         v-model="context._value"
@@ -49,7 +47,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         @input="handleInput"
         @blur="handleBlur"
       />
-      <InputIcon v-if="hasSuffixIcon" :class="context?.suffixIcon" />
+      <InputIcon v-if="hasSuffixIcon" :class="context?.iconSuffix" />
     </IconField>
   </div>
 </template>

package/dist/components/PrimeOutputBoolean.vue

@@ -25,7 +25,7 @@ const translated = computed(() => {
 
 <template>
   <div class="p-formkit p-output-boolean">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.prefix }}
     </span>
@@ -35,6 +35,6 @@ const translated = computed(() => {
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>

package/dist/components/PrimeOutputDate.vue

@@ -34,7 +34,7 @@ const converted = computed(() => {
 
 <template>
   <div class="p-formkit p-output-date">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -44,6 +44,6 @@ const converted = computed(() => {
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>

package/dist/components/PrimeOutputDuration.vue

@@ -16,7 +16,7 @@ const { formattedDuration } = useOutputDuration()
 
 <template>
   <div class="p-formkit p-output-duration">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -26,6 +26,6 @@ const { formattedDuration } = useOutputDuration()
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>

package/dist/components/PrimeOutputLink.vue

@@ -17,7 +17,7 @@ const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.co
 
 <template>
   <div class="p-formkit p-output-link">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -33,6 +33,6 @@ const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.co
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>

package/dist/components/PrimeOutputList.vue

@@ -23,7 +23,7 @@ function listValue(index: number, value: string): string {
 
 <template>
   <div class="p-formkit p-output-list">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -35,6 +35,6 @@ function listValue(index: number, value: string): string {
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>

package/dist/components/PrimeOutputNumber.vue

@@ -42,7 +42,7 @@ const converted = computed(() => {
 
 <template>
   <div class="p-formkit p-output-number">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -52,6 +52,6 @@ const converted = computed(() => {
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>

package/dist/components/PrimeOutputText.vue

@@ -15,7 +15,7 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
 
 <template>
   <div class="p-formkit p-output-text">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -29,6 +29,6 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>

package/dist/composables/useFormKitSection.d.ts

@@ -1,4 +1,5 @@
 export declare function useFormKitSection(context: any): {
+    generateId: () => any;
     hasPrefix: import("vue").ComputedRef<any>;
     hasPrefixIcon: import("vue").ComputedRef<any>;
     hasSuffix: import("vue").ComputedRef<any>;

package/dist/composables/useFormKitSection.js

@@ -5,20 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFormKitSection = useFormKitSection;
 var _vue = require("vue");
+var _uuid = require("uuid");
 function useFormKitSection(context) {
   const hasPrefix = (0, _vue.computed)(() => {
     return context?.prefix && context?.prefix.length > 0;
   });
   const hasPrefixIcon = (0, _vue.computed)(() => {
-    return context?.prefixIcon && context?.prefixIcon.length > 0;
+    return context?.iconPrefix && context?.iconPrefix.length > 0;
   });
   const hasSuffixIcon = (0, _vue.computed)(() => {
-    return context?.suffixIcon && context?.suffixIcon.length > 0;
+    return context?.iconSuffix && context?.iconSuffix.length > 0;
   });
   const hasSuffix = (0, _vue.computed)(() => {
     return context?.suffix && context?.suffix.length > 0;
   });
+  function generateId() {
+    return (0, _uuid.v4)();
+  }
   return {
+    generateId,
     hasPrefix,
     hasPrefixIcon,
     hasSuffix,

package/dist/composables/useFormKitSection.mjs

@@ -1,16 +1,20 @@
 import { computed } from "vue";
+import { v4 as uuidv4 } from "uuid";
 export function useFormKitSection(context) {
   const hasPrefix = computed(() => {
     return context?.prefix && context?.prefix.length > 0;
   });
   const hasPrefixIcon = computed(() => {
-    return context?.prefixIcon && context?.prefixIcon.length > 0;
+    return context?.iconPrefix && context?.iconPrefix.length > 0;
   });
   const hasSuffixIcon = computed(() => {
-    return context?.suffixIcon && context?.suffixIcon.length > 0;
+    return context?.iconSuffix && context?.iconSuffix.length > 0;
   });
   const hasSuffix = computed(() => {
     return context?.suffix && context?.suffix.length > 0;
   });
-  return { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
+  function generateId() {
+    return uuidv4();
+  }
+  return { generateId, hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
 }

package/dist/composables/useInputEditor.d.ts

@@ -1,7 +1,6 @@
 export declare function useInputEditor(): {
     primeInputNames: string[];
     primeOutputNames: string[];
-    generateSchemaItemId: () => string;
     editorDataToSchema: (data: any) => any;
     editorDataToJson: (data: any) => string;
     editorDataToCode: (data: any) => string;

package/dist/composables/useInputEditor.js

@@ -8,9 +8,6 @@ function useInputEditor() {
   const primeInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
   const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
   const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputText"];
-  function generateSchemaItemId() {
-    return `id-${Math.random().toString(36).substring(2, 15)}`;
-  }
   function editorDataToSchema(data) {
     if (!data) return {};
     const formkitInput = data?._dollar_formkit;
@@ -35,8 +32,8 @@ function useInputEditor() {
       preserve: preserveValue
     };
     let outerClass = "";
-    if (data.outerClassGrid && data.outerClassGrid !== "col-12") outerClass = `${outerClass} ${data.outerClassGrid}`;
-    if (data.outerClass) outerClass = outerClass + data.outerClass;
+    if (data.outerClassGrid && data.outerClassGrid !== "col-12") outerClass = data.outerClassGrid;
+    if (data.outerClass) outerClass = `${outerClass} ${data.outerClass}`;
     if (outerClass.trim().length === 0) outerClass = void 0;
     const undefinedObject = {
       prime: void 0,
@@ -109,7 +106,6 @@ function useInputEditor() {
   return {
     primeInputNames,
     primeOutputNames,
-    generateSchemaItemId,
     editorDataToSchema,
     editorDataToJson,
     editorDataToCode: editorDataToObject,

package/dist/composables/useInputEditor.mjs

@@ -2,9 +2,6 @@ export function useInputEditor() {
   const primeInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
   const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
   const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputText"];
-  function generateSchemaItemId() {
-    return `id-${Math.random().toString(36).substring(2, 15)}`;
-  }
   function editorDataToSchema(data) {
     if (!data)
       return {};
@@ -26,9 +23,9 @@ export function useInputEditor() {
     const defaultObject = { readonly: readonlyValue, disabled: disabledValue, preserve: preserveValue };
     let outerClass = "";
     if (data.outerClassGrid && data.outerClassGrid !== "col-12")
-      outerClass = `${outerClass} ${data.outerClassGrid}`;
+      outerClass = data.outerClassGrid;
     if (data.outerClass)
-      outerClass = outerClass + data.outerClass;
+      outerClass = `${outerClass} ${data.outerClass}`;
     if (outerClass.trim().length === 0)
       outerClass = void 0;
     const undefinedObject = { prime: void 0, schemaResultFormKey: void 0, _dollar_formkit: void 0, slots: void 0, selectButton: void 0, outerClassGrid: void 0 };
@@ -72,5 +69,5 @@ export function useInputEditor() {
     const formkitInput = schema?.$formkit;
     return { ...schema, _dollar_formkit: formkitInput };
   }
-  return { primeInputNames, primeOutputNames, generateSchemaItemId, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData };
+  return { primeInputNames, primeOutputNames, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData };
 }

package/dist/composables/useInputEditorSchema.js

@@ -221,7 +221,7 @@ function useInputEditorSchema() {
     }, {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showDisplay'",
-      name: "prefixIcon",
+      name: "iconPrefix",
       label: "Prefix Icon",
       key: "schema_prefix_icon",
       outerClass: "col-6",
@@ -245,7 +245,7 @@ function useInputEditorSchema() {
     }, {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showDisplay'",
-      name: "suffixIcon",
+      name: "iconSuffix",
       label: "Suffix Icon",
       key: "schema_suffix_icon",
       outerClass: "col-6",

package/dist/composables/useInputEditorSchema.mjs

@@ -177,7 +177,7 @@ export function useInputEditorSchema() {
       {
         $formkit: "primeInputText",
         if: "$get(selectButton).value === 'showDisplay'",
-        name: "prefixIcon",
+        name: "iconPrefix",
         label: "Prefix Icon",
         key: "schema_prefix_icon",
         outerClass: "col-6",
@@ -204,7 +204,7 @@ export function useInputEditorSchema() {
       {
         $formkit: "primeInputText",
         if: "$get(selectButton).value === 'showDisplay'",
-        name: "suffixIcon",
+        name: "iconSuffix",
         label: "Suffix Icon",
         key: "schema_suffix_icon",
         outerClass: "col-6",

package/dist/definitions/input.js

@@ -33,13 +33,13 @@ const primeAutoCompleteDefinition = exports.primeAutoCompleteDefinition = (0, _v
   props: ["pt", "ptOptions", "unstyled", "Select", "multiple", "typeahead"]
 });
 const primeInputTextDefinition = exports.primeInputTextDefinition = (0, _vue.createInput)(_PrimeInputText.default, {
-  props: ["pt", "ptOptions", "unstyled", "placeholder", "icon"]
+  props: ["pt", "ptOptions", "unstyled", "placeholder", "iconPrefix", "iconSuffix"]
 });
 const primeInputNumberDefinition = exports.primeInputNumberDefinition = (0, _vue.createInput)(_PrimeInputNumber.default, {
   props: ["useGrouping", "min", "max", "minFractionDigits", "maxFractionDigits", "locale", "mode", "currency", "prefix", "suffix", "showButtons", "buttonLayout", "step", "pt", "ptOptions", "unstyled", "placeholder"]
 });
 const primeInputMaskDefinition = exports.primeInputMaskDefinition = (0, _vue.createInput)(_PrimeInputMask.default, {
-  props: ["mask", "slotChar", "autoClear", "unmask", "pt", "ptOptions", "unstyled", "invalid", "variant", "iconLeft", "iconRight"]
+  props: ["mask", "slotChar", "autoClear", "unmask", "pt", "ptOptions", "unstyled", "invalid", "variant", "iconPrefix", "iconSuffix"]
 });
 const primePasswordDefinition = exports.primePasswordDefinition = (0, _vue.createInput)(_PrimePassword.default, {
   props: ["mediumRegex", "strongRegex", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "hideIcon", "showIcon", "pt", "ptOptions", "unstyled", "placeholder", "feedback", "toggleMask"]

package/dist/definitions/input.mjs

@@ -38,7 +38,8 @@ export const primeInputTextDefinition = createInput(PrimeInputText, {
     "ptOptions",
     "unstyled",
     "placeholder",
-    "icon"
+    "iconPrefix",
+    "iconSuffix"
   ]
 });
 export const primeInputNumberDefinition = createInput(PrimeInputNumber, {
@@ -73,8 +74,8 @@ export const primeInputMaskDefinition = createInput(PrimeInputMask, {
     "unstyled",
     "invalid",
     "variant",
-    "iconLeft",
-    "iconRight"
+    "iconPrefix",
+    "iconSuffix"
   ]
 });
 export const primePasswordDefinition = createInput(PrimePassword, {

package/dist/definitions/output.js

@@ -14,23 +14,23 @@ var _PrimeOutputDuration = _interopRequireDefault(require("../components/PrimeOu
 var _PrimeOutputList = _interopRequireDefault(require("../components/PrimeOutputList.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const primeOutputTextDefinition = exports.primeOutputTextDefinition = (0, _vue.createInput)(_PrimeOutputText.default, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 const primeOutputDateDefinition = exports.primeOutputDateDefinition = (0, _vue.createInput)(_PrimeOutputDate.default, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 const primeOutputNumberDefinition = exports.primeOutputNumberDefinition = (0, _vue.createInput)(_PrimeOutputNumber.default, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 const primeOutputLinkDefinition = exports.primeOutputLinkDefinition = (0, _vue.createInput)(_PrimeOutputLink.default, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 const primeOutputBooleanDefinition = exports.primeOutputBooleanDefinition = (0, _vue.createInput)(_PrimeOutputBoolean.default, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 const primeOutputDurationDefinition = exports.primeOutputDurationDefinition = (0, _vue.createInput)(_PrimeOutputDuration.default, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 const primeOutputListDefinition = exports.primeOutputListDefinition = (0, _vue.createInput)(_PrimeOutputList.default, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });

package/dist/definitions/output.mjs

@@ -7,23 +7,23 @@ import PrimeOutputBoolean from "../components/PrimeOutputBoolean.vue";
 import PrimeOutputDuration from "../components/PrimeOutputDuration.vue";
 import PrimeOutputList from "../components/PrimeOutputList.vue";
 export const primeOutputTextDefinition = createInput(PrimeOutputText, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 export const primeOutputDateDefinition = createInput(PrimeOutputDate, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 export const primeOutputNumberDefinition = createInput(PrimeOutputNumber, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 export const primeOutputLinkDefinition = createInput(PrimeOutputLink, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 export const primeOutputBooleanDefinition = createInput(PrimeOutputBoolean, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 export const primeOutputDurationDefinition = createInput(PrimeOutputDuration, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 export const primeOutputListDefinition = createInput(PrimeOutputList, {
-  props: ["prefix", "suffix", "prefixIcon", "suffixIcon"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });

package/dist/sass/formkit-primevue.scss

@@ -142,14 +142,6 @@ $grid-breakpoints: (
     padding-top: 0.5rem;
   }
 
-  // Debug
-  .p-formkit-data-debug {
-    pre, span {
-      font-size: 0.75rem;
-      line-height: 1rem;
-    }
-  }
-
   .p-action-buttons  {
     margin-top: 0.25rem;
     .p-button {
@@ -161,6 +153,14 @@ $grid-breakpoints: (
   }
 }
 
+// Debug
+.p-formkit-data-debug {
+  pre, span {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
 // Change column behaviour in larger views
 @include media-breakpoint-up(lg) {
   .formkit-form {

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-formkit-data-debug pre,.formkit-form .p-formkit-data-debug span{font-size:.75rem;line-height:1rem}.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}@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%}}
+: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}.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%}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.3.10",
+  "version": "2.4.0",
   "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
   "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,13 +93,14 @@
     "@formkit/vue": "^1.6.5",
     "primeicons": "^7.0.0",
     "primevue": "4.0.2",
+    "uuid": "^10.0.0",
     "vue-i18n": "9.13.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.23.2",
     "@formkit/core": "^1.6.5",
     "@primevue/themes": "4.0.2",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.13",
     "@unocss/preset-icons": "0.61.6",
     "@unocss/preset-uno": "0.61.6",
     "@vitejs/plugin-vue": "^5.1.1",