77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<template>
|
|
<div class="number-input">
|
|
<label>Quantity (Max: {{ max }})</label>
|
|
|
|
<div class="input-wrap">
|
|
<button @click="decrement">-</button>
|
|
|
|
<input
|
|
v-model="model"
|
|
:id="ID"
|
|
type="number"
|
|
:min="min"
|
|
:max="max"
|
|
/>
|
|
|
|
<button @click="increment">+</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const ID = Math.random().toString(36).substring(2)
|
|
|
|
const props = defineProps({
|
|
min: {
|
|
type: Number,
|
|
default: () => 1,
|
|
},
|
|
max: {
|
|
type: Number,
|
|
default: () => 10,
|
|
},
|
|
})
|
|
|
|
const model = defineModel()
|
|
|
|
const increment = () => {
|
|
if (model.value < props.max) {
|
|
model.value++
|
|
}
|
|
}
|
|
const decrement = () => {
|
|
if (model.value > props.min) {
|
|
model.value--
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.number-input {
|
|
label {
|
|
display: block;
|
|
margin-bottom: desktop-vw(20px);
|
|
}
|
|
|
|
.input-wrap {
|
|
grid-template-columns: auto 1fr auto;
|
|
display: grid;
|
|
width: 100%;
|
|
border: 1px solid var(--theme-fg);
|
|
|
|
button {
|
|
background: var(--theme-fg);
|
|
color: var(--theme-bg);
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
input {
|
|
pointer-events: none;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|