[Added] Dynamic inputmode props to component

Author: dipaksarkar

docs/.vuepress/components/BaseSelect.vue

@@ -5,7 +5,15 @@
     class="shadow-sm rounded-md text-base transition-all disabled:cursor-not-allowed disabled:border-gray-300 disabled:text-gray-300 focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50ß"
     @input="$emit('update:modelValue', $event.target.value)"
   >
-    <slot></slot>
+    <slot>
+      <option
+        v-for="item in options"
+        :key="item"
+        :value="item"
+      >
+        {{ item }}
+      </option>
+    </slot>
   </select>
 </template>
 
@@ -14,14 +22,18 @@ export default {
   name: 'BaseInput',
   props: {
     modelValue: {
-      default: undefined,
+      default: undefined
     },
     label: {
       type: String,
-      required: false,
+      required: false
     },
+    options: {
+      type: Array,
+      required: true
+    }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue']
 }
 </script>
 

docs/.vuepress/components/PlayGround.vue

@@ -117,6 +117,13 @@
           v-model.number="config.max"
         />
       </div>
+      <div class="mb-5 min-w-0 grid">
+        <div class="mb-2 font-medium">Input mode</div>
+        <BaseSelect
+          :options="['decimal', 'numeric']"
+          v-model="config.inputmode"
+        />
+      </div>
     </div>
     <div class="mb-8">
       <Checkbox
@@ -150,6 +157,7 @@ export default {
         suffix: '',
         precision: 2,
         nullValue: '',
+        inputmode: 'numeric',
         masked: false,
         reverseFill: false
       }

docs/guide/config.md

@@ -101,3 +101,11 @@ Value of `<input>` element is set to a default when no `value` present
 - Type: `string`
 - Default: `''`
 - Required: `false`
+
+## inputmode
+
+The [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
+
+- Type: `string`
+- Default: `numeric`
+- Required: `false`

src/component.vue

@@ -77,6 +77,10 @@ export default defineComponent({
     suffix: {
       type: String,
       default: () => options.suffix
+    },
+    inputmode: {
+      type: String,
+      default: () => options.inputmode
     }
   },
   emits: ['update:model-value', 'input:model-value'],

src/directive.ts

@@ -7,9 +7,9 @@ export default {
   beforeMount: (el: core.CustomInputElement, { value, modifiers }: DirectiveBinding, vnode: VNode) => {
     el = core.getInputElement(el)
     const options = Object.assign(core.cloneDeep(defaultOptions), value, modifiers)
-    const { reverseFill, precision, decimal } = options
+    const { reverseFill, precision, decimal, inputmode } = options
     el.options = options
-    el.setAttribute('inputmode', 'numeric')
+    el.setAttribute('inputmode', inputmode)
     if (reverseFill && el.value) {
       el.value = parseFloat(new NumberFormat({ ...options, reverseFill: false }).unformat(el.value)).toFixed(precision)
       if (vnode?.props?.value) {

src/options.ts

@@ -3,6 +3,7 @@ export interface Options {
   suffix?: string
   separator?: string
   decimal?: string
+  inputmode?: string
   precision?: number
   minimumFractionDigits?: number
   prefill?: boolean
@@ -17,6 +18,7 @@ export default {
   suffix: '',
   separator: ',',
   decimal: '.',
+  inputmode: 'numeric',
   precision: 2,
   minimumFractionDigits: null,
   prefill: true,