feat(InputText): add a prop to set the underlying input type #67

Author: sfxcode

dev/pages/inputs/InputText.vue

@@ -8,10 +8,16 @@ const schema
       $formkit: 'primeInputText',
       name: 'name',
       label: 'Basic',
-      help: 'Required.',
       validation: 'required',
 
     },
+    {
+      $formkit: 'primeInputText',
+      name: 'telephone',
+      help: 'Input Type: tel',
+      label: 'Telephone',
+      inputType: 'tel',
+    },
     {
       $formkit: 'primeInputText',
       id: 'icon',

src/components/PrimeInputText.vue

@@ -13,6 +13,7 @@ export interface FormKitPrimeInputTextProps {
   unstyled?: InputTextProps['unstyled']
   placeholder?: InputTextProps['placeholder']
   size?: InputTextProps['size']
+  inputType?: string | undefined
 }
 
 const props = defineProps({
@@ -34,9 +35,10 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         :id="context.id"
         v-model="context._value"
         v-bind="context?.attrs"
+        :type="context?.attrs?.inputType ?? 'text'"
         :disabled="!!context?.disabled"
         :readonly="context?.attrs.readonly ?? false"
-        :style="context?.attrs.style"
+        :style="context?.attrs?.style"
         :class="context?.attrs?.class"
         :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
@@ -57,6 +59,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
       :id="context.id"
       v-model="context._value"
       v-bind="context?.attrs"
+      :type="context?.inputType ?? 'text'"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"

src/definitions/input.ts

@@ -29,7 +29,7 @@ export const primeAutoCompleteDefinition: FormKitTypeDefinition = createInput(Pr
   props: ['pt', 'ptOptions', 'unstyled', 'Select', 'multiple', 'typeahead', 'optionLabel', 'options', 'size'],
 })
 export const primeInputTextDefinition: FormKitTypeDefinition = createInput(PrimeInputText, {
-  props: ['pt', 'ptOptions', 'unstyled', 'placeholder', 'iconPrefix', 'iconSuffix', 'size'],
+  props: ['pt', 'ptOptions', 'unstyled', 'placeholder', 'iconPrefix', 'iconSuffix', 'size', 'inputType'],
 })
 
 export const primeInputNumberDefinition: FormKitTypeDefinition = createInput(PrimeInputNumber, {