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

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

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