make active tab to jut out slightly to indicate that it's active (inspired by winMe)
This commit is contained in:
parent
311d935943
commit
7c947115e2
3 changed files with 60 additions and 3 deletions
51
src/components/roundness_input/roundness_input.vue
Normal file
51
src/components/roundness_input/roundness_input.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div
|
||||
class="roundness-control style-control"
|
||||
:class="{ disabled: !present || disabled }"
|
||||
>
|
||||
<label
|
||||
:for="name"
|
||||
class="label"
|
||||
:class="{ faint: !present || disabled }"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<Checkbox
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
:model-value="present"
|
||||
:disabled="disabled"
|
||||
class="opt"
|
||||
@update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
|
||||
/>
|
||||
<input
|
||||
:id="name"
|
||||
class="input input-number"
|
||||
type="number"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
:class="{ disabled: !present || disabled }"
|
||||
max="999"
|
||||
min="0"
|
||||
step="1"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
export default {
|
||||
components: {
|
||||
Checkbox
|
||||
},
|
||||
props: [
|
||||
'name', 'label', 'modelValue', 'fallback', 'disabled'
|
||||
],
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
present () {
|
||||
return typeof this.modelValue !== 'undefined'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue