From 39bbdf1bee10584e97937551d8bf9cf0388f086d Mon Sep 17 00:00:00 2001
From: Christopher <jazielquine@gmail.com>
Date: Thu, 6 Jun 2024 18:17:58 -0500
Subject: [PATCH 1/2] feat: Format

---
 src/components/products/product-in-car.vue    | 630 ++++++++++--------
 .../shared/buttons/quantity-button.vue        |  88 ++-
 2 files changed, 408 insertions(+), 310 deletions(-)

diff --git a/src/components/products/product-in-car.vue b/src/components/products/product-in-car.vue
index 7be36f90..c95cb1d1 100644
--- a/src/components/products/product-in-car.vue
+++ b/src/components/products/product-in-car.vue
@@ -1,33 +1,47 @@
 <template>
 	<div class="product-container">
-		<trash-component v-if="stepOne" class="action" @click="deleteProduct"/>
+		<trash-component v-if="stepOne" class="action" @click="deleteProduct" />
 		<section v-if="stepOne" class="grid-areas">
 			<img
 				@click="goToProduct(product)"
-				:src="product.urlImage || product.productImage || product.imagePresentation || (product.images ? (product.images.length > 0 ? product.images[0].urlImage : ''):'')"
+				:src="
+					product.urlImage ||
+						product.productImage ||
+						product.imagePresentation ||
+						(product.images
+							? product.images.length > 0
+								? product.images[0].urlImage
+								: ''
+							: '')
+				"
 				alt="imagen del producto"
 				class="product-img image"
-			>
+			/>
 			<div class="description">
-				<p
-					:style="`color: ${globalColors.primary};`"
-					class="product-name">{{product.name || product.productName}}</p>
-				<p
-					:style="`color: ${globalColors.subtitle};`"
-					class="product-content">{{product.description}}</p>
-				<p class="product-brand">{{product.unit ? product.unit.name : null}}</p>
+				<p :style="`color: ${globalColors.primary};`" class="product-name">
+					{{ product.name || product.productName }}
+				</p>
+				<p :style="`color: ${globalColors.subtitle};`" class="product-content">
+					{{ product.description }}
+				</p>
+				<p class="product-brand">
+					{{ product.unit ? product.unit.name : null }}
+				</p>
 				<p
 					v-if="showUnity"
 					:style="`color: ${globalColors.primary};`"
-					class="product-title"> Disponibilidad: <span class="product-price">
+					class="product-title"
+				>
+					Disponibilidad:
+					<span class="product-price">
 						{{ stockAvaible }}
 					</span>
 				</p>
 			</div>
 			<div class="price">
-				<p
-					:style="`color: ${globalColors.primary};`"
-					class="product-title">P.U.</p>
+				<p :style="`color: ${globalColors.primary};`" class="product-title">
+					P.U.
+				</p>
 				<!-- <p class="product-price">{{getCurrencySymbol}} {{ (product.priceDiscount || product.salePrice || product.price) | currencyFormat }}</p> -->
 				<!-- <p class="product-price" v-if="product.wholeSalePrice && product.wholeSalePrice.length > 0 &&
 					product.wholeSalePrice[0].price !== 0 &&
@@ -36,27 +50,30 @@
 					{{getCurrencySymbol}} {{ product.wholeSalePrice[0].price | currencyFormat }}
 				</p>
 				<p class="product-price" v-else>{{getCurrencySymbol}} {{ product.priceDiscount | currencyFormat }}</p> -->
-				<p class="product-price">{{getCurrencySymbol}} {{ product.priceDiscount | currencyFormat }}</p>
-
+				<p class="product-price">
+					{{ getCurrencySymbol }} {{ product.priceDiscount | currencyFormat }}
+				</p>
 			</div>
 			<div class="quantity">
-				<p
-					:style="`color: ${globalColors.primary};`"
-					class="product-title">Cantidad</p>
+				<p :style="`color: ${globalColors.primary};`" class="product-title">
+					Cantidad
+				</p>
 				<div v-if="stepOne" class="quantity-button-container">
 					<quantityButton
 						class="continer-quantity-button"
 						:number="product.quantity"
+						:product="product"
+						@input="inputQuantity"
 						@click="clickQuantity"
 						:max-quantity="maxQuantity"
 					/>
 				</div>
-				<p class="product-quantity" v-else>{{product.quantity}}</p>
+				<p class="product-quantity" v-else>{{ product.quantity }}</p>
 			</div>
 			<div class="total text-xs-center">
-				<p
-					:style="`color: ${globalColors.primary};`"
-					class="product-title">Total</p>
+				<p :style="`color: ${globalColors.primary};`" class="product-title">
+					Total
+				</p>
 				<!-- <p class="product-total"
 				v-if="product.wholeSalePrice && product.wholeSalePrice.length > 0 &&
 					Number(product.quantity) >= product.wholeSalePrice[0].from &&
@@ -65,8 +82,9 @@
 					{{getCurrencySymbol}}{{Number(product.quantity) * Number(product.wholeSalePrice[0].price) | currencyFormat}}
 				</p>	
 				<p class="product-total" v-else>{{getCurrencySymbol}} {{product.total | currencyFormat}}</p> -->
-				<p class="product-total">{{getCurrencySymbol}} {{product.total | currencyFormat}}</p>
-
+				<p class="product-total">
+					{{ getCurrencySymbol }} {{ product.total | currencyFormat }}
+				</p>
 			</div>
 			<!-- <div class="comments">
 				<text-area
@@ -76,29 +94,51 @@
 				/>
 			</div> -->
 		</section>
-		
+
 		<div v-else class="grid-product">
-			<img class="img-pro" height="75" width="80" 
-			:src="product.urlImage || product.productImage || product.imagePresentation || (product.images ? (product.images.length > 0 ? product.images[0].urlImage : ''):'')"
-			alt="Imagen">
-			<div
-				:class="[
-					'product-info'
-				]"
-			>
+			<img
+				class="img-pro"
+				height="75"
+				width="80"
+				:src="
+					product.urlImage ||
+						product.productImage ||
+						product.imagePresentation ||
+						(product.images
+							? product.images.length > 0
+								? product.images[0].urlImage
+								: ''
+							: '')
+				"
+				alt="Imagen"
+			/>
+			<div :class="['product-info']">
 				<h3 class="product-name">
-					{{ (product.productName ? product.productName.toLowerCase(): product.productName) || (product.name ? product.name.toLowerCase(): product.name)}}
+					{{
+						(product.productName
+							? product.productName.toLowerCase()
+							: product.productName) ||
+							(product.name ? product.name.toLowerCase() : product.name)
+					}}
 				</h3>
-				<span class="product-description">{{product.unit ? product.unit.name.toLowerCase() : product.unit.name}}</span>
+				<span class="product-description">{{
+					product.unit ? product.unit.name.toLowerCase() : product.unit.name
+				}}</span>
 			</div>
-			<h3 class="product-quantity">Cantidad: {{product.quantity}} 
-				<span class="product-unity">/ {{product.unit ? product.unit.name.toLowerCase(): product.unit}}</span>
+			<h3 class="product-quantity">
+				Cantidad: {{ product.quantity }}
+				<span class="product-unity"
+					>/
+					{{
+						product.unit ? product.unit.name.toLowerCase() : product.unit
+					}}</span
+				>
+			</h3>
+			<h3 class="product-total">
+				Total: {{ getCurrencySymbol }}. {{ product.total | currencyFormat }}
 			</h3>
-			<h3
-				class="product-total"
-			>Total: {{getCurrencySymbol}}. {{product.total | currencyFormat}}</h3>
 		</div>
-				
+
 		<!-- <section class="actions">
 			<comments-component class="action" @click="showComments"/>
 			<trash-component class="action" @click="deleteProduct"/>
@@ -112,7 +152,6 @@ import trashComponent from '@/components/shared/icons/trash-component';
 import quantityButton from '@/components/shared/buttons/quantity-button';
 import { mapGetters } from 'vuex';
 
-
 function goToProduct({ slug, id }) {
 	const params = { id: slug || id };
 	this.goTo('detail-product', { params });
@@ -126,27 +165,50 @@ function showComments() {
 	this.show = !this.show;
 }
 
+function inputQuantity(value) {
+	this.product.quantity = Number(value);
+}
+
 function clickQuantity(val) {
 	let { quantity } = this.product;
 	const { unit } = this.product;
-	const opt = {
-		more: 1,
-		less: -1,
-	};
-	quantity += opt[val];
-	quantity = quantity < 1 ? 1 : quantity;
+	if (this.product.category.type === 2) {
+		this.opt = {
+			more: 0.1,
+			less: -0.1,
+		};
+		quantity += this.opt[val];
+		quantity = +quantity.toFixed(2);
+		quantity = quantity < 0.1 ? 0.1 : quantity;
+	} else {
+		this.opt = {
+			more: 1,
+			less: -1,
+		};
+		quantity += this.opt[val];
+		quantity = quantity < 1 ? 1 : quantity;
+	}
 	this.quantityStock = parseInt(unit.quantity * quantity, 10);
 	if (this.showUnity) {
 		if (quantity >= this.stockAvaible && !this.$allowOrderStockNegative) {
 			this.maxQuantity = true;
-			this.showNotification('No cuenta con la disponibilidad de stock del producto', 'warning');
+			this.showNotification(
+				'No cuenta con la disponibilidad de stock del producto',
+				'warning',
+			);
 		} else {
 			this.maxQuantity = false;
 		}
 	}
 	// this.product.priceDiscountOrigin = this.product.priceDiscount;
-	if (this.quantityStock > this.product.stockWarehouse && !this.$allowOrderStockNegative) {
-		this.showNotification(`El producto ${this.product.name} no cuenta con más stock en la presentación: ${unit.name}.`, 'warning');
+	if (
+		this.quantityStock > this.product.stockWarehouse &&
+		!this.$allowOrderStockNegative
+	) {
+		this.showNotification(
+			`El producto ${this.product.name} no cuenta con más stock en la presentación: ${unit.name}.`,
+			'warning',
+		);
 	} else {
 		// const rangeApply = [wholeSalePrice].find(ur => quantity >= ur.from && quantity <= ur.to);
 		// if (rangeApply) {
@@ -156,7 +218,10 @@ function clickQuantity(val) {
 		// }
 		this.$set(this.product, 'quantity', quantity);
 		this.$forceUpdate();
-		this.$store.commit('UPDATE_PRODUCTS_TO_BUY', { product: this.product, context: this });
+		this.$store.commit('UPDATE_PRODUCTS_TO_BUY', {
+			product: this.product,
+			context: this,
+		});
 	}
 }
 
@@ -173,6 +238,7 @@ function data() {
 	return {
 		comments: '',
 		show: false,
+		opt: {},
 		maxQuantity: false,
 	};
 }
@@ -186,11 +252,7 @@ export default {
 		quantityButton,
 	},
 	computed: {
-		...mapGetters([
-			'getCurrencySymbol',
-			'stockAvaible',
-			'getWholeSalePrice',
-		]),
+		...mapGetters(['getCurrencySymbol', 'stockAvaible', 'getWholeSalePrice']),
 		stepOne,
 	},
 	data,
@@ -200,6 +262,7 @@ export default {
 		deleteProduct,
 		showComments,
 		goToProduct,
+		inputQuantity,
 	},
 	props: {
 		product: {
@@ -214,278 +277,277 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-	.product-container {
-		background-color: color(background);
-		border-radius: 20px;
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
-		margin-bottom: 10px;
-		padding: 10px;
-		position: relative;
-	}
+.product-container {
+	background-color: color(background);
+	border-radius: 20px;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
+	margin-bottom: 10px;
+	padding: 10px;
+	position: relative;
+}
 
-	.grid-areas {
-		display: grid;
+.grid-areas {
+	display: grid;
+	grid-template-areas:
+		'image image description description'
+		'price quantity quantity total';
+	grid-template-columns: repeat(4, 1fr);
+	grid-template-rows: 1fr 0.2fr;
+	padding-bottom: 8px;
+
+	@media (min-width: 800px) {
+		grid-gap: 10px;
+		grid-template-columns: 0.5fr 0.5fr 1fr 0.5fr;
+		grid-template-rows: 0fr 0fr;
 		grid-template-areas:
-			"image image description description"
-			"price quantity quantity total";
-		grid-template-columns: repeat(4, 1fr);
-		grid-template-rows: 1fr 0.2fr;
-		padding-bottom: 8px;
-
-		@media (min-width: 800px) {
-			grid-gap: 10px;
-			grid-template-columns: 0.5fr 0.5fr 1fr 0.5fr;
-			grid-template-rows: 0fr 0fr;
-			grid-template-areas:
-				"image description description description "
-				"image price quantity total";
-			margin-bottom: 0px;
-		}
-
-		@media (min-width: 925px) {
-			grid-gap: 10px;
-			grid-template-columns: 0.5fr 0.5fr 0.5fr 1fr 0.5fr;
-			grid-template-areas:
-				"image image description description description "
-				"image image price quantity total";
-			margin-bottom: 0px;
-		}
+			'image description description description '
+			'image price quantity total';
+		margin-bottom: 0px;
 	}
 
-	.comments {
-		display: none;
-		grid-area: comments;
-		margin-top: 20px;
-		margin: 0;
-
-		@media (min-width: 800px) {
-			display: block;
-		}
+	@media (min-width: 925px) {
+		grid-gap: 10px;
+		grid-template-columns: 0.5fr 0.5fr 0.5fr 1fr 0.5fr;
+		grid-template-areas:
+			'image image description description description '
+			'image image price quantity total';
+		margin-bottom: 0px;
 	}
+}
 
-	.image {
-		grid-area: image;
-	}
+.comments {
+	display: none;
+	grid-area: comments;
+	margin-top: 20px;
+	margin: 0;
 
-	.description {
-		grid-area: description;
-		place-self: flex-start;
-		margin-top: 15px;
-		text-transform: lowercase;
-		width: 100%;
-		@media (min-width: 800px) {
-			margin-top: 0;
-			padding-left: 20px;
-		}
+	@media (min-width: 800px) {
+		display: block;
 	}
+}
 
-	.price {
-		grid-area: price;
-		padding-left: 15px;
-		@media (min-width: 800px) {
-			margin-top: 0;
-			padding-left: 20px;
-		}
-	}
+.image {
+	grid-area: image;
+}
 
-	.quantity {
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-		grid-area: quantity;
-		place-self: stretch;
+.description {
+	grid-area: description;
+	place-self: flex-start;
+	margin-top: 15px;
+	text-transform: lowercase;
+	width: 100%;
+	@media (min-width: 800px) {
+		margin-top: 0;
+		padding-left: 20px;
+	}
+}
 
-		@media (min-width: 800px) {
-			justify-self: center;
-		}
+.price {
+	grid-area: price;
+	padding-left: 15px;
+	@media (min-width: 800px) {
+		margin-top: 0;
+		padding-left: 20px;
 	}
+}
 
-	.total {
-		grid-area: total;
-		place-self: flex-end;
-		padding-right: 10px;
+.quantity {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	grid-area: quantity;
+	place-self: stretch;
 
-		@media (min-width: 800px) {
-			place-self: stretch;
-		}
+	@media (min-width: 800px) {
+		justify-self: center;
 	}
+}
 
-	.product-img {
-		height: 6rem;
-		object-fit: contain;
-		margin: 0 auto;
-		width: 6rem;
+.total {
+	grid-area: total;
+	place-self: flex-end;
+	padding-right: 10px;
 
-		@media (min-width: 800px) {
-			height: 9rem;
-			width: 9rem;
-		}
+	@media (min-width: 800px) {
+		place-self: stretch;
 	}
+}
 
-	.product-title {
-		font-family: font(regular);
-		margin-bottom: 0;
-	}
+.product-img {
+	height: 6rem;
+	object-fit: contain;
+	margin: 0 auto;
+	width: 6rem;
 
-	.product-name {
-		color: color(dark);
-		font-size: size(medium);
-		margin-bottom: 0px;
-		padding-right: 2rem;
-		text-align: left;
-		width: inherit;
-		text-transform: lowercase;
-	}
-	.product-name:first-letter {
-		text-transform: uppercase
-	}
-	.product-content {
-		color: color(dark);
-		font-family: font(regular);
-		font-size: size(medium);
-		font-weight: bold;
-		margin-bottom: 0px;
-		padding-right: 2rem;
-		text-align: left;
-		text-transform: lowercase;
-		width: inherit;
-		@media screen and (max-width: 800px) {
-			display: none;
-		}
+	@media (min-width: 800px) {
+		height: 9rem;
+		width: 9rem;
 	}
+}
 
-	.product-brand {
-		color: color(base);
-		font-size: size(msmall);
-	}
+.product-title {
+	font-family: font(regular);
+	margin-bottom: 0;
+}
 
-	.product-price {
-		color: color(dark);
-		font-family: font(bold);
-		font-size: size(medium);
-		white-space: nowrap;
+.product-name {
+	color: color(dark);
+	font-size: size(medium);
+	margin-bottom: 0px;
+	padding-right: 2rem;
+	text-align: left;
+	width: inherit;
+	text-transform: lowercase;
+}
+.product-name:first-letter {
+	text-transform: uppercase;
+}
+.product-content {
+	color: color(dark);
+	font-family: font(regular);
+	font-size: size(medium);
+	font-weight: bold;
+	margin-bottom: 0px;
+	padding-right: 2rem;
+	text-align: left;
+	text-transform: lowercase;
+	width: inherit;
+	@media screen and (max-width: 800px) {
+		display: none;
 	}
+}
 
-	.product-total {
-		color: color(dark);
-		font-family: font(bold);
-		font-size: size(sbig);
-		white-space: nowrap;
-	}
+.product-brand {
+	color: color(base);
+	font-size: size(msmall);
+}
 
-	.product-quantity {
-		color: color(base);
-		font-family: font(bold);
-		font-size: size(large);
-	}
+.product-price {
+	color: color(dark);
+	font-family: font(bold);
+	font-size: size(medium);
+	white-space: nowrap;
+}
 
-	.actions {
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		margin: auto;
-		flex-direction: row;
-	}
+.product-total {
+	color: color(dark);
+	font-family: font(bold);
+	font-size: size(sbig);
+	white-space: nowrap;
+}
 
-	.action {
-		margin: 5px 15px;
-		position: absolute;
-		right: 10px;
-		top: 10px;
-	}
-	.continer-quantity-button {
-		margin-top: -12px;
-	}
+.product-quantity {
+	color: color(base);
+	font-family: font(bold);
+	font-size: size(large);
+}
 
-	.quantity-button-container {
-		display: flex;
-		justify-content: center;
-		margin-top: 16px;
-	}
+.actions {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	margin: auto;
+	flex-direction: row;
+}
 
+.action {
+	margin: 5px 15px;
+	position: absolute;
+	right: 10px;
+	top: 10px;
+}
+.continer-quantity-button {
+	margin-top: -12px;
+}
 
-	.grid-product {
-		align-items: center;
-		display: grid;
-		grid-column-gap: 14px;
-		grid-template-columns: 0.5fr 1.1fr 0.3fr 0.4fr;
-		transform: translateX(15px);
-		padding: 10px;
+.quantity-button-container {
+	display: flex;
+	justify-content: center;
+	margin-top: 16px;
+}
 
-		@media (max-width: 600px) {
-			grid-column-gap: 0px;
-			grid-row-gap: 10px;
-			transform: translateX(0px);
-		}
+.grid-product {
+	align-items: center;
+	display: grid;
+	grid-column-gap: 14px;
+	grid-template-columns: 0.5fr 1.1fr 0.3fr 0.4fr;
+	transform: translateX(15px);
+	padding: 10px;
+
+	@media (max-width: 600px) {
+		grid-column-gap: 0px;
+		grid-row-gap: 10px;
+		transform: translateX(0px);
 	}
+}
 
-	.product-total {
-		color: color(dark);
-		font-size: 12px;
-		font-family: font(regular);
-		text-align: center;
+.product-total {
+	color: color(dark);
+	font-size: 12px;
+	font-family: font(regular);
+	text-align: center;
 
-		@media (max-width: 600px) {
-			grid-column: 2/5;
-			grid-row: 2;
-			text-align: right;
-		}
+	@media (max-width: 600px) {
+		grid-column: 2/5;
+		grid-row: 2;
+		text-align: right;
 	}
+}
 
-	.img-pro {
-		@media (max-width: 600px) {
-			grid-column: 1/2;
-			grid-row: span 2;
-		}
+.img-pro {
+	@media (max-width: 600px) {
+		grid-column: 1/2;
+		grid-row: span 2;
 	}
+}
 
-	.product-info {
-		max-height: 2rem;
-		transition-duration: 200ms;
-		text-transform:capitalize;
-		@media (max-width: 600px) {
-			grid-column: 2/5;
-			grid-row: 1;
-		}
-		
-		.product-name {
-			color: color(dark);
-			text-transform:capitalize;
-			font-size: 13px;
-		}
-		.product-description {
-			color: color(dark);
-			font-family: font(regular);
-			font-size: size(small);
-			@media (max-width: 550px) {
-				display: none;
-			}
-		}
+.product-info {
+	max-height: 2rem;
+	transition-duration: 200ms;
+	text-transform: capitalize;
+	@media (max-width: 600px) {
+		grid-column: 2/5;
+		grid-row: 1;
 	}
 
-	.product-quantity {
+	.product-name {
 		color: color(dark);
-		font-size: 12px;
-		font-family: font(regular);
-		@media (max-width: 600px) {
-			grid-column: 2/2;
-			grid-row: 2;
-		}
-	}
-	.product-unity{
 		text-transform: capitalize;
-		@media (min-width: 550px) {
+		font-size: 13px;
+	}
+	.product-description {
+		color: color(dark);
+		font-family: font(regular);
+		font-size: size(small);
+		@media (max-width: 550px) {
 			display: none;
 		}
 	}
+}
 
-	.show-description {
-		max-height: 9rem;
+.product-quantity {
+	color: color(dark);
+	font-size: 12px;
+	font-family: font(regular);
+	@media (max-width: 600px) {
+		grid-column: 2/2;
+		grid-row: 2;
 	}
-
-	.more-info-btn {
-		font-family: font(regular);
-		font-size: size(xsmall);
+}
+.product-unity {
+	text-transform: capitalize;
+	@media (min-width: 550px) {
+		display: none;
 	}
-</style>
\ No newline at end of file
+}
+
+.show-description {
+	max-height: 9rem;
+}
+
+.more-info-btn {
+	font-family: font(regular);
+	font-size: size(xsmall);
+}
+</style>
diff --git a/src/components/shared/buttons/quantity-button.vue b/src/components/shared/buttons/quantity-button.vue
index 4c97b8de..bb819132 100644
--- a/src/components/shared/buttons/quantity-button.vue
+++ b/src/components/shared/buttons/quantity-button.vue
@@ -1,11 +1,39 @@
 <template>
 	<div class="quantity-button">
-		<button data-cy="less-quantity" class="item" @click="$emit('click', 'less')">-</button>
-		<div data-cy="quantity-to-buy" class="item item-number" :style="`color:${globalColors.title}`">{{number}}</div>
-		<button data-cy="more-quantity" :disabled="maxQuantity" class="item" @click="$emit('click', 'more')">+</button>
+		<button
+			data-cy="less-quantity"
+			class="item"
+			@click="$emit('click', 'less')"
+		>
+			-
+		</button>
+		<input
+			v-if="product.category.type === 2"
+			class="input-number"
+			type="number"
+			:value="number"
+			@input="$emit('input', $event.target.value )"
+		></input>
+		<div
+			v-else
+			data-cy="quantity-to-buy"
+			class="item item-number"
+			:style="`color:${globalColors.title}`"
+		>
+			{{ number }}
+		</div>
+		<button
+			data-cy="more-quantity"
+			:disabled="maxQuantity"
+			class="item"
+			@click="$emit('click', 'more')"
+		>
+			+
+		</button>
 	</div>
 </template>
 <script>
+
 export default {
 	name: 'quantity-button',
 	props: {
@@ -17,35 +45,43 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		product: {
+			type: Object,
+		},
 	},
 };
 </script>
 <style lang="scss" scoped>
-	.quantity-button {
-		border: 1px solid color(base);
-		border-radius: 5px;
-		color: color(base);
-		display: flex;
-		font-family: font(bold);
-		font-size: size(medium);
-		height: 27px;
-		width: 116px;
+.quantity-button {
+	border: 1px solid color(base);
+	border-radius: 5px;
+	color: color(base);
+	display: flex;
+	font-family: font(bold);
+	font-size: size(medium);
+	height: 27px;
+	width: 116px;
 
-		.item {
-			flex: 1 1 auto;
-		}
+	.item {
+		flex: 1 1 auto;
+	}
 
-		.item-number {
-			align-items: center;
-			border-left: 1px solid color(base);
-			border-right: 1px solid color(base);
-			display: flex;
-			font-family: font(heavy);
-			justify-content: center;
-		}
+	.item-number {
+		align-items: center;
+		border-left: 1px solid color(base);
+		border-right: 1px solid color(base);
+		display: flex;
+		font-family: font(heavy);
+		justify-content: center;
+	}
 
-		button:hover {
-			background-color: color(border);
-		}
+	button:hover {
+		background-color: color(border);
 	}
+}
+
+.input-number {
+	width: 50px;
+	text-align: center;
+}
 </style>

From 1b3cddd6e7adfeb24fa4388506e2a1dc533be637 Mon Sep 17 00:00:00 2001
From: Christopher <jazielquine@gmail.com>
Date: Mon, 10 Jun 2024 12:00:18 -0500
Subject: [PATCH 2/2] feat: Correcciones

---
 .eslintrc.js                                  | 101 +++++++++++-------
 src/components/products/product-in-car.vue    |  33 +++---
 .../shared/buttons/quantity-button.vue        |  13 ++-
 3 files changed, 90 insertions(+), 57 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 253f6a52..f81a262f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,42 +1,69 @@
 // http://eslint.org/docs/user-guide/configuring
 
 module.exports = {
-  root: true,
-  parser: 'babel-eslint',
-  parserOptions: {
-    sourceType: 'module'
-  },
-  env: {
-    browser: true,
-  },
-  extends: 'airbnb-base',
-  // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
-  // check if imports actually resolve
-  'settings': {
-    'import/resolver': {
-      'webpack': {
-        'config': 'build/webpack.base.conf.js'
-      }
-    }
-  },
-  // add your custom rules here
-  'rules': {
-    // don't require .vue extension when importing
-    'import/extensions': ['error', 'always', {
-      'js': 'never',
-      'vue': 'never'
-    }],
-    // allow optionalDependencies
-    "linebreak-style": 0,
-    'import/no-extraneous-dependencies': ['error', {
-      'optionalDependencies': ['test/unit/index.js']
-    }],
-    // allow debugger during development
+	root: true,
+	parser: 'babel-eslint',
+	parserOptions: {
+		sourceType: 'module',
+	},
+	env: {
+		browser: true,
+	},
+	extends: 'airbnb-base',
+	// required to lint *.vue files
+	plugins: ['html'],
+	// check if imports actually resolve
+	settings: {
+		'import/resolver': {
+			webpack: {
+				config: 'build/webpack.base.conf.js',
+			},
+		},
+	},
+	// add your custom rules here
+	rules: {
+		'comma-dangle': 'off',
+		'arrow-parens': ['off', 'off'], // Desactiva la regla o ajusta según tu preferencia
+		'import/no-extraneous-dependencies': 'off', // Desactiva la regla import/no-extraneous-dependencies
+		'no-mixed-operators': 'off', // Activar la regla no-mixed-operators
+		indent: 'off', // Indentación con tabs
+		'no-mixed-spaces-and-tabs': 'off', // Evitar mezcla de espacios y tabs
+		// 'indent': ['error', 'tab'], // Indentación con tabs
+		'max-len': [
+			'error',
+			{
+				code: 120,
+				ignoreStrings: true,
+				ignoreTemplateLiterals: true,
+				ignoreComments: true, // Ignorar longitud de línea en comentarios largos
+				ignoreUrls: true, // Ignorar longitud de línea en URLs largas
+				ignoreRegExpLiterals: true, // Ignorar longitud de línea en expresiones regulares largas
+				ignorePattern: '^[ \t]*<(\\w+)([^>]*)>(.|\n)*?<\\/\\1>', // Ignorar líneas dentro de JSX
+				ignorePattern: '^\\s*\\{', // Ignorar líneas dentro de objetos de configuración largos
+			},
+		],
+		// don't require .vue extension when importing
+		'import/extensions': [
+			'error',
+			'always',
+			{
+				js: 'never',
+				vue: 'never',
+			},
+		],
+		// allow optionalDependencies
+		'import/no-extraneous-dependencies': [
+			'error',
+			{
+				optionalDependencies: ['test/unit/index.js'],
+			},
+		],
+		'linebreak-style': ['error', 'windows'],
+		// allow debugger during development
 		'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
 		'no-tabs': 0,
-		'indent': ['error', 'tab']
-  }
-}
+		// 'indent': 'off',
+		// 'no-mixed-spaces-and-tabs': 'off',
+		'linebreak-style': 0,
+	},
+};
diff --git a/src/components/products/product-in-car.vue b/src/components/products/product-in-car.vue
index 3ea4e757..6b016a02 100644
--- a/src/components/products/product-in-car.vue
+++ b/src/components/products/product-in-car.vue
@@ -167,26 +167,29 @@ function showComments() {
 
 function inputQuantity(value) {
 	this.product.quantity = Number(value);
+	this.clickQuantity();
 }
 
 function clickQuantity(val) {
 	let { quantity } = this.product;
 	const { unit } = this.product;
-	if (this.product.category.type === 2) {
-		this.opt = {
-			more: 0.1,
-			less: -0.1,
-		};
-		quantity += this.opt[val];
-		quantity = +quantity.toFixed(2);
-		quantity = quantity < 0.1 ? 0.1 : quantity;
-	} else {
-		this.opt = {
-			more: 1,
-			less: -1,
-		};
-		quantity += this.opt[val];
-		quantity = quantity < 1 ? 1 : quantity;
+	if (val) {
+		if (this.product.id === 3581799) {
+			this.opt = {
+				more: 0.1,
+				less: -0.1,
+			};
+			quantity += this.opt[val];
+			quantity = +quantity.toFixed(2);
+			quantity = quantity < 0.1 ? 0.1 : quantity;
+		} else {
+			this.opt = {
+				more: 1,
+				less: -1,
+			};
+			quantity += this.opt[val];
+			quantity = quantity < 1 ? 1 : quantity;
+		}
 	}
 	this.quantityStock = parseInt(unit.quantity * quantity, 10);
 	if (this.showUnity) {
diff --git a/src/components/shared/buttons/quantity-button.vue b/src/components/shared/buttons/quantity-button.vue
index bb819132..ab1ff929 100644
--- a/src/components/shared/buttons/quantity-button.vue
+++ b/src/components/shared/buttons/quantity-button.vue
@@ -11,7 +11,7 @@
 			v-if="product.category.type === 2"
 			class="input-number"
 			type="number"
-			:value="number"
+			v-model="number"
 			@input="$emit('input', $event.target.value )"
 		></input>
 		<div
@@ -78,10 +78,13 @@ export default {
 	button:hover {
 		background-color: color(border);
 	}
-}
 
-.input-number {
-	width: 50px;
-	text-align: center;
+	.input-number {
+		width: 50px;
+		text-align: center;
+		border-left: 1px solid color(base);
+		border-right: 1px solid color(base);
+		font-family: font(heavy);
+	}
 }
 </style>