@sfxcode/formkit-primevue 2.3.11 → 2.4.1

package/dist/components/FormKitDataEdit.vue

@@ -1,5 +1,6 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
+import { FormKit, FormKitSchema } from '@formkit/vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({

package/dist/components/FormKitDataView.vue

@@ -1,5 +1,6 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
+import { FormKit, FormKitSchema } from '@formkit/vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({

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.js

@@ -11,10 +11,10 @@ function useFormKitSection(context) {
     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;

package/dist/composables/useFormKitSection.mjs

@@ -5,10 +5,10 @@ export function useFormKitSection(context) {
     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;

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.3.11",
+  "version": "2.4.1",
   "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
   "author": {
     "name": "Tom",