65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<template>
|
|
<div class="number-input">
|
|
<label>
|
|
<span class="label">{{label}}:</span>
|
|
<input type="number"
|
|
v-bind:value="value | format"
|
|
v-on:input="$emit('input', $event)"
|
|
v-on:keydown="$event.stopPropagation()"
|
|
>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "NumberInput",
|
|
props: {
|
|
label: String,
|
|
value: Number
|
|
},
|
|
filters: {
|
|
format(value) {
|
|
return Math.floor(value);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.number-input {
|
|
pointer-events: auto;
|
|
|
|
background-color: var(--theme-bg);
|
|
color: var(--theme-fg);
|
|
|
|
min-height: 2em;
|
|
|
|
.label {
|
|
display: inline-block;
|
|
width: 1em;
|
|
padding: 0 0.5em 0 0.5em;
|
|
|
|
color: var(--theme-fg-light);
|
|
}
|
|
|
|
input {
|
|
height: 100%;
|
|
line-height: 100%;
|
|
width: calc(100% - 2em);
|
|
|
|
background-color: inherit;
|
|
color: inherit;
|
|
|
|
// remove number spinner firefox
|
|
-moz-appearance: textfield;
|
|
|
|
// remove number spinner webkit
|
|
&::-webkit-inner-spin-button,
|
|
&::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |