mohadese namavar
41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<template>
|
|
<div class="cart-quantity">
|
|
<div>
|
|
<Button icon="isax isax-add" text severity="secondary" @click="count++" :disabled="count >= range.max" />
|
|
<b>{{ count }}</b>
|
|
<Button icon="isax isax-minus" text severity="secondary" @click="count--" :disabled="count <= range.min" />
|
|
</div>
|
|
<Button icon="isax isax-trash" text severity="danger" @click="count = 0" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
range: { type: Object, default: { min: 1, max: 1000 } }
|
|
})
|
|
const count = defineModel({ default: 1 })
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cart-quantity {
|
|
@apply flex items-center gap-3 lg:gap-4;
|
|
|
|
div {
|
|
@apply flex border border-[#E5E5E5] rounded-lg;
|
|
|
|
b {
|
|
@apply flex items-center justify-center text-primary-600;
|
|
@apply w-10 h-10 text-base lg:w-12 lg:h-12 lg:text-xl lg:pb-1;
|
|
}
|
|
|
|
button {
|
|
@apply rounded-lg text-primary-600 w-10 h-10 text-base lg:w-12 lg:h-12 lg:text-[1.8em] #{!important};
|
|
}
|
|
}
|
|
|
|
&>button {
|
|
@apply rounded-lg border border-[#E5E5E5] w-10 h-10 text-base lg:w-12 lg:h-12 lg:text-xl #{!important};
|
|
}
|
|
}
|
|
</style>
|