mohadese namavar
60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<template>
|
|
<div class="product-card-quantity">
|
|
<p v-if="count < 0">{{ $t('unavailable') }}</p>
|
|
<template v-else-if="count == 0">
|
|
<Button :label="$t('buy')" icon="isax isax-bag-2" iconPos="right" text @click.prevent="count++" />
|
|
</template>
|
|
|
|
<template v-else>
|
|
<Button text icon="isax isax-add" @click.prevent="count++" :disabled="count >= range.max" />
|
|
<p>{{ count }}</p>
|
|
<Button text icon="isax isax-minus" @click.prevent="count--" :disabled="count <= range.min" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
range: { type: Object, default: { min: 1, max: 1000 } }
|
|
})
|
|
const count = defineModel()
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-card-quantity {
|
|
@apply flex items-center justify-between w-[4.8rem] h-[1.9rem] lg:w-[5.8rem] lg:h-10 rounded-[1.8rem] border border-primary-600 overflow-hidden;
|
|
|
|
p {
|
|
@apply flex w-max items-center text-primary-600 text-[0.7em] lg:text-[1.1em] font-medium font-vazir mx-auto;
|
|
}
|
|
|
|
&:not(:has(button)) {
|
|
@apply border-[#7F7F7F];
|
|
|
|
p {
|
|
@apply text-[#7F7F7F];
|
|
}
|
|
}
|
|
|
|
button {
|
|
@apply rounded-full font-normal font-iran-sans text-[0.7em] lg:text-[1.1em] #{!important};
|
|
|
|
.isax {
|
|
@apply text-xl;
|
|
}
|
|
}
|
|
|
|
button:not(:has(.isax-bag-2)) {
|
|
@apply w-7 h-7 first:mr-1 last:ml-1 #{!important};
|
|
}
|
|
|
|
button:has(.isax-bag-2) {
|
|
@apply w-full h-full #{!important};
|
|
}
|
|
|
|
button[disabled]{
|
|
@apply opacity-20;
|
|
}
|
|
}
|
|
</style>
|