|
Lines 1-5
Link Here
|
| 1 |
<template> |
1 |
<template> |
|
|
2 |
<span v-if="clearable" class="input-group"> |
| 3 |
<input |
| 4 |
:id="id" |
| 5 |
inputmode="numeric" |
| 6 |
v-model="model" |
| 7 |
:placeholder="placeholder" |
| 8 |
:required="required" |
| 9 |
:size="size" |
| 10 |
class="input-with-clear" |
| 11 |
/> |
| 12 |
<button |
| 13 |
v-if="model !== null && model !== undefined && model !== ''" |
| 14 |
type="button" |
| 15 |
class="clear-button" |
| 16 |
@click="clearInput" |
| 17 |
:aria-label="$__('Clear')" |
| 18 |
tabindex="-1" |
| 19 |
> |
| 20 |
<i class="fa fa-times"></i> |
| 21 |
</button> |
| 22 |
</span> |
| 2 |
<input |
23 |
<input |
|
|
24 |
v-else |
| 3 |
:id="id" |
25 |
:id="id" |
| 4 |
inputmode="numeric" |
26 |
inputmode="numeric" |
| 5 |
v-model="model" |
27 |
v-model="model" |
|
Lines 12-17
Link Here
|
| 12 |
|
34 |
|
| 13 |
<script> |
35 |
<script> |
| 14 |
import { computed } from "vue"; |
36 |
import { computed } from "vue"; |
|
|
37 |
import { $__ } from "@koha-vue/i18n"; |
| 15 |
export default { |
38 |
export default { |
| 16 |
props: { |
39 |
props: { |
| 17 |
id: String, |
40 |
id: String, |
|
Lines 20-25
export default {
Link Here
|
| 20 |
required: Boolean, |
43 |
required: Boolean, |
| 21 |
size: Number | null, |
44 |
size: Number | null, |
| 22 |
maxlength: Number | null, |
45 |
maxlength: Number | null, |
|
|
46 |
clearable: { |
| 47 |
type: Boolean, |
| 48 |
default: true, |
| 49 |
}, |
| 23 |
}, |
50 |
}, |
| 24 |
emits: ["update:modelValue"], |
51 |
emits: ["update:modelValue"], |
| 25 |
setup(props, { emit }) { |
52 |
setup(props, { emit }) { |
|
Lines 35-44
export default {
Link Here
|
| 35 |
emit("update:modelValue", value); |
62 |
emit("update:modelValue", value); |
| 36 |
}, |
63 |
}, |
| 37 |
}); |
64 |
}); |
| 38 |
return { model }; |
65 |
|
|
|
66 |
const clearInput = () => { |
| 67 |
model.value = ""; |
| 68 |
}; |
| 69 |
|
| 70 |
return { model, clearInput, $__ }; |
| 39 |
}, |
71 |
}, |
| 40 |
name: "InputNumber", |
72 |
name: "InputNumber", |
| 41 |
}; |
73 |
}; |
| 42 |
</script> |
74 |
</script> |
| 43 |
|
75 |
|
| 44 |
<style></style> |
76 |
<style scoped> |
|
|
77 |
.input-group { |
| 78 |
position: relative; |
| 79 |
display: inline; |
| 80 |
} |
| 81 |
|
| 82 |
/* Input with clear button gets padding for the button */ |
| 83 |
input.input-with-clear { |
| 84 |
padding-right: 2rem; |
| 85 |
} |
| 86 |
|
| 87 |
.clear-button { |
| 88 |
position: absolute; |
| 89 |
right: 0.25rem; |
| 90 |
top: 50%; |
| 91 |
transform: translateY(-50%); |
| 92 |
background: transparent; |
| 93 |
border: none; |
| 94 |
color: #999; |
| 95 |
cursor: pointer; |
| 96 |
padding: 0.25rem 0.5rem; |
| 97 |
line-height: 1; |
| 98 |
transition: color 0.15s ease-in-out; |
| 99 |
z-index: 10; |
| 100 |
height: 1.5rem; |
| 101 |
display: flex; |
| 102 |
align-items: center; |
| 103 |
justify-content: center; |
| 104 |
margin: 0; |
| 105 |
} |
| 106 |
|
| 107 |
.clear-button:hover { |
| 108 |
color: #333; |
| 109 |
} |
| 110 |
|
| 111 |
.clear-button:focus { |
| 112 |
outline: 2px solid #007bff; |
| 113 |
outline-offset: 2px; |
| 114 |
border-radius: 2px; |
| 115 |
} |
| 116 |
|
| 117 |
.clear-button i { |
| 118 |
font-size: 1rem; |
| 119 |
} |
| 120 |
</style> |