feat: add icon left right on input mask

Author: Kevin Szymura

src/components/PrimeInputMask.vue

@@ -13,6 +13,8 @@ export type FormKitPrimeInputMaskProps = {
   unstyled?: InputMaskProps['unstyled'];
   invalid?: InputMaskProps['invalid'];
   variant?: InputMaskProps['variant'];
+  iconLeft?: string;
+  iconRight?: string;
 }
 
 const props = defineProps({
@@ -26,30 +28,54 @@ function handleInput(e: Event) {
   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 = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
   <div class="p-formkit">
-    <InputMask
-      :id="context.id"
-      v-model="context._value"
-      :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
-      :class="styleClass"
-      :tabindex="context?.attrs.tabindex"
-      :aria-label="context?.attrs.ariaLabel"
-      :aria-labelledby="context?.attrs.ariaLabelledby"
-      :mask="context.mask ?? undefined"
-      :slot-char="context.slotChar ?? '_'"
-      :auto-clear="context.autoClear ?? true"
-      :unmask="context.unmask ?? false"
-      :pt="context.pt"
-      :invalid="context.invalid"
-      :variant="context.variant"
-      :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
-      @blur="handleInput"
-    />
+    <span :class="spanClass()">
+      <i v-if="hasLeftIcon()" :class="context.iconLeft" />
+
+      <InputMask
+        :id="context.id"
+        v-model="context._value"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs._readonly ?? false"
+        :class="styleClass"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :mask="context.mask ?? undefined"
+        :slot-char="context.slotChar ?? '_'"
+        :auto-clear="context.autoClear ?? true"
+        :unmask="context.unmask ?? false"
+        :pt="context.pt"
+        :invalid="context.invalid"
+        :variant="context.variant"
+        :pt-options="context.ptOptions"
+        :unstyled="context.unstyled ?? false"
+        @blur="handleInput"
+      />
+
+      <i v-if="hasRightIcon" :class="context.iconRight" />
+    </span>
   </div>
 </template>

src/index.ts

@@ -87,6 +87,8 @@ export const primeInputMaskDefinition: FormKitTypeDefinition = createInput(Prime
     'unstyled',
     'invalid',
     'variant',
+    'iconLeft',
+    'iconRight',
   ],
 })