diff options
author | dartcafe <github@dartcafe.de> | 2021-02-11 10:17:37 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2021-02-11 10:17:37 +0300 |
commit | fca945331bf545c90ea330d445672b773e7c350c (patch) | |
tree | 4e3d7b7f1cfdf908188abc20a1086c96db94d9c9 /src/js/components/Base | |
parent | 9257f66959c2dae10dfa6b0c99d8cbc49a9c5e2a (diff) |
Enhance InputDiv with numeric function (+/-)
Diffstat (limited to 'src/js/components/Base')
-rw-r--r-- | src/js/components/Base/InputDiv.vue | 68 |
1 files changed, 57 insertions, 11 deletions
diff --git a/src/js/components/Base/InputDiv.vue b/src/js/components/Base/InputDiv.vue index 4cae5558..1f419e07 100644 --- a/src/js/components/Base/InputDiv.vue +++ b/src/js/components/Base/InputDiv.vue @@ -21,52 +21,98 @@ --> <template lang="html"> - <div class="input-div"> + <div :class="['input-div', { numeric: useNumModifiers }]"> + <div v-if="useNumModifiers" class="modifyer substract icon icon-polls-minus" @click="$emit('substract')" /> <input ref="input" :value="value" :placeholder="placeholder" class="input" @keyup.enter="$emit('input', $event.target.value)"> - <button class="submit icon-confirm" - @click="$emit('input', $refs.input.value)" /> + <ButtonDiv v-if="!useNumModifiers && !noSubmit" submit @click="$emit('input', $refs.input.value)" /> + <div v-if="useNumModifiers" class="modifyer add icon icon-add" @click="$emit('add')" /> </div> </template> <script> + +import ButtonDiv from '../Base/ButtonDiv' + export default { name: 'InputDiv', + + components: { + ButtonDiv, + }, + props: { value: { - type: String, + type: [String, Number], required: true, }, placeholder: { type: String, default: '', }, + useNumModifiers: { + type: Boolean, + default: false, + }, + noSubmit: { + type: Boolean, + default: false, + }, }, } + </script> <style lang="scss" scoped> .input-div { + position: relative; display: flex; } - .input { - flex: 1; + .input-div.numeric { + min-width: 100px; + width: 110px; + display: block; + } + + .numeric input { + text-align: center; + } + + input { + width: 100%; &:empty:before { color: grey; } } - .submit { - width: 30px; - background-color: transparent; - border: none; - opacity: 0.3; + .add { + right: 0; + border-left: solid 1px; + border-radius: 0 var(--border-radius) var(--border-radius) 0; + } + + .substract { + left: 0; + border-right: solid 1px; + border-radius: var(--border-radius) 0 0 var(--border-radius); + } + + .modifyer { + position: absolute; + top: 0; + height: 32px; + margin: 4px 1px; + padding: 0 14px; + border-color: var(--color-border-dark); cursor: pointer; + &:hover { + background-color: var(--color-background-hover) + } } </style> |