defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor input components

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-05 09:17:07 +07:00
parent c8f3dc9562
commit 748b981e63
2 changed files with 19 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Form/InputNumber.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ref, watch } from 'vue';
defineProps({
const props = defineProps({
placeholder: {
type: String,
default: ''
@@ -17,6 +17,10 @@ defineProps({
value: {
type: Number,
default: 1
},
class: {
type: String,
default: ''
}
})
@@ -29,19 +33,11 @@ watch(timeValue, (newValue) => {
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
v-model="timeValue"
autocomplete="off"
type="number"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
<div class="relative w-full overflow-hidden bg-gray-200 rounded-lg" :class="[props.class]">
<input v-model="timeValue" autocomplete="off" type="number" :placeholder="placeholder" :disabled="disabled"
:readonly="readonly" inputmode="numeric" pattern="[0-9.]*"
onblur="this.value = parseInt(this.value) ? this.value : 1"
oninput="this.value = parseInt(this.value) ? this.value.replace(/[^0-9.]/g, '') : 1"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
/>
class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0" />
</div>
</template>

24
src/components/Form/InputWithSuffix.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ref, watch } from 'vue';
const props = defineProps({
placeholder: {
@@ -17,6 +17,10 @@ const props = defineProps({
value: {
type: String,
default: '1 Menit'
},
class: {
type: String,
default: ''
}
})
@@ -45,20 +49,10 @@ watch(text, (val) => {
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
v-model="text"
autocomplete="off"
type="text"
:placeholder="placeholder"
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
:disabled="disabled"
@input="handleInput($event)"
@blur="handleBlur($event)"
<div class="relative w-full overflow-hidden bg-gray-200 rounded-lg" :class="[props.class]">
<input v-model="text" autocomplete="off" type="text" :placeholder="placeholder" :readonly="readonly"
inputmode="numeric" pattern="[0-9.]*" :disabled="disabled" @input="handleInput($event)" @blur="handleBlur($event)"
@focus="handleFocus($event)"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
/>
class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0" />
</div>
</template>