@farm-investimentos/front-mfe-components-vue3 0.3.3 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.3.3",
+	"version": "0.4.0",
 	"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"
@@ -93,4 +93,4 @@
 	"publishConfig": {
 		"@farm-investimentos:registry": "https://registry.npmjs.org"
 	}
-}
+}

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.scss

@@ -1,3 +1,4 @@
+
 .datepicker :deep(.v-btn--active) {
 	background: var(--farm-primary-base);
 }

package/src/components/DatePicker/customDatePicker.scss

@@ -1,18 +1,24 @@
 .dp__main {
-    font-family: inherit;
+    font-family: 'Manrope', sans-serif !important;
     justify-content: center;
 
     :deep(.dp__calendar_row,) {
         width: calc( 35px * 7);
     }
 
+    :deep(.dp__month_year_row){
+        font-family: 'Manrope', sans-serif !important;
+    }
+
     :deep(.dp__calendar_header) {
         width: calc( 35px * 7);
+        
     }
 
     :deep(.dp__cell_inner) {
         font-size: 12px;
         font-weight: 500;
+        font-family: 'Manrope', sans-serif !important;
         color: var(--farm-neutral-darken);
         padding: 0;
         width: 35px;
@@ -60,6 +66,7 @@
     :deep(.dp__calendar_header) {
         color: var(--farm-neutral-darken);
         font-size: 16px;
+        font-family: 'Manrope', sans-serif !important;
         font-weight: 700;
         margin-top: 16px;
     }

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/examples/Colors.stories.js

@@ -76,7 +76,7 @@ export const CssVariables = () => ({
 			bwThemeColorsKeys: Object.keys(bwThemeColors),
 			bwThemeColors: { ...bwThemeColors },
 			backgroundThemeColorsKeys: Object.keys(backgroundThemeColors),
-			backgroundThemeColors: { ...backgroundThemeColors },
+			backgroundThemeColors: { ...backgroundThemeColors },	
 		};
 	},
 	template: `<div class="palette-container">
@@ -84,36 +84,36 @@ export const CssVariables = () => ({
             v-for="key in keys"
             :key="key"
         >
-		<farm-heading :type="5">{{ key }}</farm-heading>
+			<farm-heading :type="5">{{ key }}</farm-heading>
 			<span :style="{ backgroundColor: baseThemeColors[key] }">Base <span>--farm-{{ key }}-base</span></span>
 			<span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten<span>--farm-{{ key }}-lighten</span></span>
 			<span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken: <span>--farm-{{ key }}-darken</span></span>
 		</div>
 
 		<div>
-		<farm-heading :type="5">Text</farm-heading>
-			<span :style="{ color: textThemeColors['text-primary'] }">Primary <span>--farm-text-primary</span></span></span>
+			<farm-heading :type="5">Text</farm-heading>
+			<span :style="{ color: textThemeColors['text-primary'] }">Primary <span>--farm-text-primary</span></span>
 			<span :style="{ color: textThemeColors['text-secondary'] }">Secondary <span>--farm-text-secondary</span></span>
 			<span :style="{ color: textThemeColors['text-disabled'] }">Disabled <span>--farm-text-disabled</span></span>
-		</div>
+        </div>
 
 		<div>
 			<farm-heading :type="5">Stroke</farm-heading>
-			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>--farm-stroke-base</span></span></span>
+			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>--farm-stroke-base</span></span>
 			<span :style="{ color: strokeThemeColors['stroke-disabled'] }">Disabled <span>--farm-stroke-disabled</span></span>
 			<span :style="{ color: strokeThemeColors['stroke-divider'] }">Divider <span>--farm-stroke-divider</span></span>
-        </div>
-
+		</div>
+		
 		<div>
 			<farm-heading :type="5">Black & White</farm-heading>
-			<span v-for="bw in bwThemeColorsKeys" :key="'bw_var_' + bw" :style="{ color: bw !== 'white' ? bwThemeColors[bw] : 'black' }">
+			<span v-for="bw in bwThemeColorsKeys" :key="'bw_var1_' + bw" :style="{ color: bw !== 'white' ? bwThemeColors[bw] : 'black' }">
 				{{ bw }} <span>--farm-bw-{{ bw }}</span>
 			</span>
 		</div>
 
 		<div>
 			<farm-heading :type="5">Background</farm-heading>
-			<span v-for="bw in backgroundThemeColorsKeys" :key="'bw_var_' + bw" :style="{ backgroundColor: backgroundThemeColors[bw], }">
+			<span v-for="bw in backgroundThemeColorsKeys" :key="'bw_var2_' + bw" :style="{ backgroundColor: backgroundThemeColors[bw] }">
 				{{ bw }} <span>--farm-background-{{ bw }}</span>
 			</span>
 		</div>

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();
-		});
-	});
-});