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