Merge pull request #1013 from Sysvale/feat/fluid-card

feat: adiciona comportamento fluido ao card e refatora para composition api

Author: IhGori

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.143.0",
+	"version": "3.144.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/Card.vue

@@ -1,9 +1,10 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-	<cds-box
+	<CdsBox
 		padding="0"
 		:clickable="clickable"
-		@boxClick="handleClick"
+		:fluid="fluid"
+		@box-click="handleClick"
 	>
 		<div class="card__extra-container">
 			<div class="card__extra">
@@ -12,7 +13,7 @@
 			</div>
 		</div>
 
-		<div :class="{'card--horizontal': this.horizontal}">
+		<div :class="{'card--horizontal': horizontal}">
 			<div
 				v-if="hasSlot($slots, 'image')"
 			>
@@ -24,9 +25,9 @@
 				v-else-if="imageSrc"
 				class="card__image"
 			>
-				<cds-image
+				<CdsImage
 					:src="imageSrc"
-					:width="imageWidth"
+					:width="imageWidthResolver"
 					:height="imageHeight"
 					:alt="imageAlt"
 				/>
@@ -51,8 +52,10 @@
 					<slot name="header" />
 				</div>
 
-				<div v-else="title">
-					<p class="card__header">{{ title }}</p>
+				<div v-else>
+					<p class="card__header">
+						{{ title }}
+					</p>
 				</div>
 
 				<div
@@ -63,8 +66,10 @@
 					<slot name="body" />
 				</div>
 
-				<div v-else="content">
-					<p class="card__body">{{ content }}</p>
+				<div v-else>
+					<p class="card__body">
+						{{ content }}
+					</p>
 				</div>
 
 				<div
@@ -76,111 +81,121 @@
 				</div>
 			</div>
 		</div>
-	</cds-box>
+	</CdsBox>
 </template>
 
-<script>
+<script setup>
+import { computed, defineProps } from 'vue';
+import hasSlot from '../utils/methods/hasSlot';
 import CdsBox from './Box.vue';
 import CdsImage from './Image.vue';
 
-import hasSlot from '../utils/methods/hasSlot';
-
-export default {
-	components: {
-		CdsBox,
-		CdsImage,
+const props = defineProps({
+	/**
+	* Especifica o título do card. Quando conteúdo é enviado para o slot `Header` o conteúdo dessa prop não é exibido.
+	*/
+	title: {
+		type: String,
+		default: '',
 	},
-
-	props: {
-		/**
-		* Especifica o título do card. Quando conteúdo é enviado para o slot `Header` o conteúdo dessa prop não é exibido.
-		*/
-		title: {
-			type: String,
-			default: '',
-		},
-		/**
-		* Especifica texto do Card. Quando conteúdo é enviado para o slot `Body` o conteúdo dessa prop não é exibido.
-		*/
-		content: {
-			type: String,
-			default: '',
-		},
-		/**
-		* Caminho da imagem que vai ser renderizada. Quando conteúdo é enviado para o slot `Image` o conteúdo dessa prop não é exibido.
-		*/
-		imageSrc: {
-			type: String,
-			default: '',
-		},
-		/**
-		* Descrição em texto da imagem.
-		*/
-		imageAlt: {
-			type: String,
-			default: 'imagem do card',
-		},
-		/**
-		* Largura da imagem do card.
-		*/
-		imageWidth: {
-			type: [String, Number],
-			default: 300,
-		},
-		/**
-		* Altura da imagem do card.
-		*/
-		imageHeight: {
-			type: [String, Number],
-			default: 180,
-		},
-		/**
-		* Largura do conteúdo do card.
-		*/
-		bodyWidth: {
-			type: [String, Number],
-			default: 300,
-		},
-		/**
-		* Torna o alinhamento do Card horizontal.
-		*/
-		horizontal: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		* Ativa ou desativa o clique no componente
-		*/
-		clickable: {
-			type: Boolean,
-			default: false,
-		},
+	/**
+	* Especifica texto do Card. Quando conteúdo é enviado para o slot `Body` o conteúdo dessa prop não é exibido.
+	*/
+	content: {
+		type: String,
+		default: '',
+	},
+	/**
+	* Caminho da imagem que vai ser renderizada. Quando conteúdo é enviado para
+	o slot `Image` o conteúdo dessa prop não é exibido.
+	*/
+	imageSrc: {
+		type: String,
+		default: '',
+	},
+	/**
+	* Descrição em texto da imagem.
+	*/
+	imageAlt: {
+		type: String,
+		default: 'imagem do card',
+	},
+	/**
+	* Largura da imagem do card. Tem comportamento sobrescrito quando o card é vertical
+	e a prop `fluid` está ativa.
+	*/
+	imageWidth: {
+		type: [String, Number],
+		default: 300,
+	},
+	/**
+	* Altura da imagem do card.
+	*/
+	imageHeight: {
+		type: [String, Number],
+		default: 180,
+	},
+	/**
+	* Largura do conteúdo do card.
+	*/
+	bodyWidth: {
+		type: [String, Number],
+		default: 300,
+	},
+	/**
+	* Torna o alinhamento do Card horizontal.
+	*/
+	horizontal: {
+		type: Boolean,
+		default: false,
 	},
+	/**
+	* Ativa ou desativa o clique no componente
+	*/
+	clickable: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	* Ativa ou desativa o comportamento fluido do Card
+	*/
+	fluid: {
+		type: Boolean,
+		default: false
+	}
+})
 
-	computed: {
-		imageWidthResolver() {
-			return this.horizontal ? 'fit-content' :  `${this.imageWidth}px`;
-		},
+const emits = defineEmits([
+	/**
+	 * Evento que indica se o card foi clicado.
+	 * @event cardClick
+	 * @type {Event}
+	 */
+	'cardClick'
+]);
 
-		bodyWidthResolver() {
-			return `${this.bodyWidth}px`;
-		},
-	},
+const cardSpacerMaxWidthResolver = computed(() => {
+	if (props.fluid) {
+		return '100%';
+	}
 
-	methods: {
-		hasSlot,
+	return props.horizontal ? 'fit-content' :  `${props.imageWidth}px`;
+});
 
-		handleClick() {
-			if (this.clickable) {
-				/**
-				* Evento que indica se o card foi clicado.
-				* @event cardClick
-				* @type {Event}
-				*/
-				this.$emit('cardClick', true);
-			}
-		},
-	},
+const bodyWidthResolver = computed(() => {
+	return `${props.bodyWidth}px`;
+})
+
+const imageWidthResolver = computed(() => {
+	if (props.fluid && !props.horizontal) return '100%';
+
+	return props.imageWidth
+})
+
+function handleClick() {
+	if (props.clickable) {
+		emits('cardClick', true);
+	}
 }
 </script>
 
@@ -228,7 +243,7 @@ export default {
 	
 	&__spacer {
 		padding: tokens.pa(5);
-		max-width: v-bind(imageWidthResolver);
+		max-width: v-bind(cardSpacerMaxWidthResolver);
 	}
 	
 	&__footer {