@farm-investimentos/front-mfe-components-vue3 0.3.4 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.3.4",
+	"version": "0.4.1",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -82,7 +82,7 @@
 		"ts-jest": "^29.0.0",
 		"typescript": "~4.1.5",
 		"vite": "^4.4.9",
-		"vue": "3.3.10",
+		"vue": "3.4.10",
 		"vue-loader": "^16.8.3",
 		"vue-tsc": "^1.8.11",
 		"webpack-cli": "^5.1.4"

package/src/components/AlertBox/AlertBox.stories.js

@@ -1,8 +1,11 @@
+import AlertBox from './AlertBox.vue';
+
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Feedback/AlertBox',
+	component: AlertBox,
 	parameters: {
 		docs: {
 			description: {

package/src/components/AlertBox/AlertBox.vue

@@ -39,89 +39,80 @@
 				:color="color"
 				@click="close"
 			>
-				<farm-icon variation="darken" size="md" :color="color">close</farm-icon>
+				<farm-icon
+					variation="darken"
+					size="md"
+					:color="color"
+				>
+					close
+				</farm-icon>
 			</farm-btn>
 		</div>
 	</transition>
 </template>
 
-<script lang="ts">
-import { ref, PropType } from 'vue';
-
-import valueWatcher from './valueWatcher';
+<script lang="ts" setup>
+import { PropType } from 'vue';
 
-export default {
+defineOptions({
 	name: 'farm-alertbox',
-	props: {
-		/**
-		 * Left Icon?
-		 */
-		icon: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * Close icon and option to close AlertBox?
-		 */
-		dismissable: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Dense?
-		 */
-		dense: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Color
-		 */
-		color: {
-			type: String as PropType<
-				| 'primary'
-				| 'secondary'
-				| 'secondary-green'
-				| 'secondary-golden'
-				| 'neutral'
-				| 'info'
-				| 'success'
-				| 'error'
-				| 'warning'
-				| 'success'
-				| 'extra-1'
-				| 'extra-2'
-			>,
-			default: 'primary',
-		},
-		modelValue: {
-			type: Boolean,
-			default: true,
-		},
-		/**
-		 * Html tag (will be forwarded to farm-typography)
-		 */
-		tag: {
-			type: String,
-			default: 'p',
-		},
+});
+defineProps({
+	/**
+	 * Left Icon?
+	 */
+	icon: {
+		type: String,
+		default: null,
 	},
-	setup(props, { emit }) {
-		const visible = ref(true);
-
-		function close() {
-			visible.value = false;
-			emit('update:modelValue', false);
-		}
+	/**
+	 * Close icon and option to close AlertBox?
+	 */
+	dismissable: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Dense?
+	 */
+	dense: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Color
+	 */
+	color: {
+		type: String as PropType<
+			| 'primary'
+			| 'secondary'
+			| 'secondary-green'
+			| 'secondary-golden'
+			| 'neutral'
+			| 'info'
+			| 'success'
+			| 'error'
+			| 'warning'
+			| 'success'
+			| 'extra-1'
+			| 'extra-2'
+		>,
+		default: 'primary',
+	},
+	/**
+	 * Html tag (will be forwarded to farm-typography)
+	 */
+	tag: {
+		type: String,
+		default: 'p',
+	},
+});
 
-		valueWatcher(props, visible);
+const visible = defineModel({ type: Boolean, default: true });
 
-		return {
-			visible,
-			close,
-		};
-	},
-};
+function close() {
+	visible.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import './AlertBox';

package/src/components/DatePicker/DatePicker.stories.js

@@ -143,4 +143,16 @@ export const RequiredMessage = () => ({
         <farm-input-datepicker inputId="input-custom-id-10" v-model="date" requiredMessage="Preencha a data de forma correta." :required="true" />
 		date: {{ date }}
     </div>`,
+});
+
+export const InvalidMessage = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker invalidMessage="Data inválida, use o formato DD/MM/AAAA." inputId="input-custom-id-10" v-model="date" requiredMessage="Preencha a data de forma correta." :required="true" />
+		date: {{ date }}
+    </div>`,
 });

package/src/components/DatePicker/DatePicker.vue

@@ -139,8 +139,12 @@ export default {
 		},
 		requiredMessage: {
 			type: String,
-			default: 'Campo obrigatório'
-		}
+			default: 'Campo obrigatório',
+		},
+		invalidMessage: {
+			type: String,
+			default: 'Data inválida',
+		},
 	},
 	data() {
 		return {
@@ -150,7 +154,7 @@ export default {
 			fieldRange: revertDate(this.modelValue),
 			checkDateValid: value => {
 				if (value.length > 0) {
-					return checkDateValid(value) ? true : 'Data inválida';
+					return checkDateValid(value) ? true : this.invalidMessage;
 				}
 				return true;
 			},

package/src/components/Label/Label.vue

@@ -6,21 +6,19 @@
 		<slot></slot>
 	</label>
 </template>
-<script lang="ts">
-
-
-export default {
+<script lang="ts" setup>
+defineOptions({
 	name: 'farm-label',
-	props: {
-		/**
-		 * Show required indicator
-		 */
-		required: {
-			type: Boolean,
-			default: false,
-		},
+});
+defineProps({
+	/**
+	 * Show required indicator
+	 */
+	required: {
+		type: Boolean,
+		default: false,
 	},
-};
+});
 </script>
 <style lang="scss" scoped>
 @import 'Label';

package/src/components/ProgressBar/ProgressBar.scss

@@ -1,10 +1,10 @@
 @import '../../configurations/variables';
 
-$radius: 5px;
+$radius: 8px;
 
 .farm-progressbar {
     width: 100%;
-    height: 5px;
+    height: 8px;
     border-radius: $radius;
     overflow: hidden;
 

package/src/components/layout/Row/Row.scss

@@ -34,8 +34,7 @@
     &--extra-decrease {
         margin: 0 -#{2 * gutter('vuetify')};
     }
-
-    &--y-grid-gutters > .farm-col {
+    &--y-grid-gutters > :deep(.farm-col) {
         margin-top: 12px;
         margin-bottom: 12px;
     }

package/src/components/AlertBox/__tests__/valueWatcher.spec.js

@@ -1,16 +0,0 @@
-import { ref, reactive } from 'vue';
-
-import valueWatcher from '../valueWatcher';
-
-describe('valueWatcher', () => {
-	it('Should change value for visible', done => {
-		const visible = ref(false);
-		const mockProps = reactive({ value: false });
-		valueWatcher(mockProps, visible);
-		mockProps.value = true;
-		setTimeout(() => {
-			expect(visible.value).toBeTruthy();
-			done();
-		});
-	});
-});