@farm-investimentos/front-mfe-components-vue3 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.5.0",
+	"version": "0.5.2",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -35,20 +35,22 @@
 		"text-mask-addons": "^3.8.0",
 		"v-mask": "2.3.0",
 		"v-money3": "^3.24.0",
-		"vuetify": "3.4.0",
+		"vuetify": "3.5.7",
 		"webpack": "5.89.0"
 	},
 	"devDependencies": {
 		"@babel/core": "7.17.9",
 		"@babel/generator": "7.17.9",
 		"@farm-investimentos/front-mfe-libs-ts": "3.0.5",
-		"@storybook/addon-essentials": "7.6.3",
-		"@storybook/addon-interactions": "7.6.3",
-		"@storybook/addon-links": "7.6.3",
-		"@storybook/blocks": "7.6.3",
+		"@storybook/addon-essentials": "7.6.17",
+		"@storybook/addon-interactions": "7.6.17",
+		"@storybook/addon-links": "7.6.17",
+		"@storybook/blocks": "7.6.17",
+		"@storybook/manager-api": "^7.6.17",
 		"@storybook/testing-library": "^0.2.2",
-		"@storybook/vue3": "7.6.3",
-		"@storybook/vue3-vite": "7.6.3",
+		"@storybook/theming": "^7.6.17",
+		"@storybook/vue3": "7.6.17",
+		"@storybook/vue3-vite": "7.6.17",
 		"@tsconfig/node18": "^18.2.2",
 		"@types/jest": "^29.0.0",
 		"@types/node": "^18.17.17",
@@ -78,18 +80,18 @@
 		"react-dom": "^18.2.0",
 		"sass": "~1.32.0",
 		"sass-loader": "10.4.1",
-		"storybook": "^7.6.3",
+		"storybook": "^7.6.17",
 		"style-loader": "^3.3.3",
 		"ts-jest": "^29.0.0",
 		"typescript": "~4.1.5",
 		"vite": "^4.4.9",
-		"vue": "3.4.10",
+		"vue": "3.4.21",
 		"vue-loader": "^16.8.3",
 		"vue-tsc": "^1.8.11",
 		"webpack-cli": "^5.1.4"
 	},
 	"engines": {
-		"node": ">20.0.0"
+		"node": "~20"
 	},
 	"publishConfig": {
 		"@farm-investimentos:registry": "https://registry.npmjs.org"

package/src/components/{InputMoney/InputMoney.scss → InputDecimalFormatter/InputDecimalFormatter.scss}

@@ -1,6 +1,6 @@
 @import '../../configurations/mixins';
 
-.farm-input-money {
+.farm-input-decimal-formatter {
 	height: 64px;
 
 	&--hiddendetails {
@@ -39,7 +39,7 @@
 		width: 100%;
 	}
 
-	&--focused .farm-input-money--input {
+	&--focused .farm-input-decimal-formatter--input {
 		border-color: var(--farm-bw-black-30);
 	}
 
@@ -63,9 +63,9 @@
 	}
 }
 
-.farm-input-money--touched.farm-input-money--blured.farm-input-money--validatable {
-	&.farm-input-money--error {
-		.farm-input-money {
+.farm-input-decimal-formatter--touched.farm-input-decimal-formatter--blured.farm-input-decimal-formatter--validatable {
+	&.farm-input-decimal-formatter--error {
+		.farm-input-decimal-formatter {
 			&--input {
 				border-color: var(--farm-error-base);
 
@@ -81,8 +81,8 @@
 	}
 }
 
-.farm-input-money--blured.farm-input-money--validatable:not(.farm-input-money--error) {
-	.farm-input-money--input {
+.farm-input-decimal-formatter--blured.farm-input-decimal-formatter--validatable:not(.farm-input-decimal-formatter--error) {
+	.farm-input-decimal-formatter--input {
 		border-color: var(--farm-primary-base);
 
 		&>input {

package/src/components/{InputMoney/InputMoney.stories.js → InputDecimalFormatter/InputDecimalFormatter.stories.js}

@@ -1,16 +1,16 @@
 
-import InputMoney from './InputMoney.vue';
+import InputDecimalFormatter from './InputDecimalFormatter.vue';
 
 
 export default {
-	title: 'Form/InputMoney',
-	component: InputMoney,
+	title: 'Form/InputDecimalFormatter',
+	component: InputDecimalFormatter,
 	// decorators: [withDesign],
 	parameters: {
 		docs: {
 			description: {
 				component: `Input Money<br />
-				selector: <em>farm-input-money</em><br />
+				selector: <em>farm-input-decimal-formatter</em><br />
 				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
@@ -33,7 +33,7 @@ export const Default = () => ({
 		<farm-label for="input-money">
 			label
 		</farm-label>
-		<farm-input-money id="input-money-default" v-model="v" />
+		<farm-input-decimal-formatter id="input-money-default" v-model="v" />
 		<span>{{v}}</span>
 	</div>`,
 });
@@ -49,7 +49,7 @@ export const Prefix = () => ({
 		<farm-label for="input-money">
 			label
 		</farm-label>
-		<farm-input-money prefix="R$ " id="input-money-prefix" v-model="v" />
+		<farm-input-decimal-formatter prefix="R$ " id="input-money-prefix" v-model="v" />
 		<span>{{v}}</span>
 	</div>`,
 });
@@ -65,7 +65,7 @@ export const Sufix = () => ({
 		<farm-label for="input-money">
 			label
 		</farm-label>
-		<farm-input-money suffix="%" id="input-money-prefix" v-model="v" />
+		<farm-input-decimal-formatter suffix="%" id="input-money-prefix" v-model="v" />
 		<span>{{v}}</span>
 	</div>`,
 });
@@ -81,7 +81,7 @@ export const Precision = () => ({
 		<farm-label for="input-money">
 			label
 		</farm-label>
-		<farm-input-money :precision="20" id="input-money-prefix" v-model="v" />
+		<farm-input-decimal-formatter :precision="20" id="input-money-prefix" v-model="v" />
 		<span>{{v}}</span>
 	</div>`,
 });
@@ -97,7 +97,7 @@ export const Icon = () => ({
 		<farm-label for="input-money">
 			label
 		</farm-label>
-		<farm-input-money id="input-money" v-model="v" icon="currency-usd" />
+		<farm-input-decimal-formatter id="input-money" v-model="v" icon="currency-usd" />
 		<span>{{v}}</span>
 	</div>`,
 });
@@ -116,7 +116,7 @@ export const Required = () => ({
 		<farm-label for="input-money">
 			label
 		</farm-label>
-		<farm-input-money id="input-money" v-model="v" :rules="[rules.required]" />
+		<farm-input-decimal-formatter id="input-money" v-model="v" :rules="[rules.required]" />
 		<span>{{v}}</span>
 	</div>`,
 });

package/src/components/{InputMoney/InputMoney.vue → InputDecimalFormatter/InputDecimalFormatter.vue}

@@ -1,22 +1,22 @@
 <template>
 	<div
-		class="farm-input-money"
+		class="farm-input-decimal-formatter"
 		:class="{
-			'farm-input-money': true,
-			'farm-input-money--validatable': rules.length > 0,
-			'farm-input-money--touched': isTouched,
-			'farm-input-money--blured': isBlured,
-			'farm-input-money--error': hasError,
-			'farm-input-money--focused': isFocus && !readonly,
-			'farm-input-money--disabled': disabled,
-			'farm-input-money--hiddendetails': hideDetails,
+			'farm-input-decimal-formatter': true,
+			'farm-input-decimal-formatter--validatable': rules.length > 0,
+			'farm-input-decimal-formatter--touched': isTouched,
+			'farm-input-decimal-formatter--blured': isBlured,
+			'farm-input-decimal-formatter--error': hasError,
+			'farm-input-decimal-formatter--focused': isFocus && !readonly,
+			'farm-input-decimal-formatter--disabled': disabled,
+			'farm-input-decimal-formatter--hiddendetails': hideDetails,
 		}"
 		:id="customId"
 	>
 		<div
 			:class="{
-				'farm-input-money--input': true,
-				'farm-input-money--input--iconed': icon,
+				'farm-input-decimal-formatter--input': true,
+				'farm-input-decimal-formatter--input--iconed': icon,
 			}"
 		>
 			<button
@@ -72,9 +72,9 @@
 		</farm-caption>
 		<farm-caption
 			v-if="!hideDetails && hint && !showErrorText"
-			class="farm-input-money__hint-text"
+			class="farm-input-decimal-formatter__hint-text"
 			:class="{
-				'farm-input-money__hint-text--show': persistentHint || isFocus,
+				'farm-input-decimal-formatter__hint-text--show': persistentHint || isFocus,
 			}"
 			color="gray"
 			variation="regular"
@@ -94,7 +94,7 @@ import validateFormStateBuilder from '../../composition/validateFormStateBuilder
 import randomId from '../../helpers/randomId';
 
 export default {
-	name: 'farm-input-money',
+	name: 'farm-input-decimal-formatter',
 	inheritAttrs: false,
 	props: {
 		/**
@@ -225,7 +225,7 @@ export default {
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
 		});
-		const customId = 'farm-input-money-' + (props.id || randomId(2));
+		const customId = 'farm-input-decimal-formatter-' + (props.id || randomId(2));
 
 		const showErrorText = computed(() => hasError.value && isTouched.value && isBlured.value);
 
@@ -312,5 +312,5 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import 'InputMoney';
+@import 'InputDecimalFormatter';
 </style>

package/src/components/{InputMoney → InputDecimalFormatter}/__tests__/InputMoney.spec.js

@@ -1,13 +1,13 @@
 import { shallowMount } from '@vue/test-utils';
 
-import InputMoney from '../InputMoney';
+import InputDecimalFormatter from '../InputDecimalFormatter';
 
-describe('InputMoney component', () => {
+describe('InputDecimalFormatter component', () => {
 	let wrapper;
 	let component;
 
 	beforeEach(() => {
-		wrapper = shallowMount(InputMoney, {
+		wrapper = shallowMount(InputDecimalFormatter, {
 			directives: {
 				mask: () => { },
 			},

package/src/components/InputDecimalFormatter/index.ts

@@ -0,0 +1,4 @@
+import InputDecimalFormatter from './InputDecimalFormatter.vue';
+
+export { InputDecimalFormatter };
+export default InputDecimalFormatter;

package/src/examples/Table.stories.js

@@ -162,7 +162,21 @@ export const TableSampleDataWithFarmCheckbox = () => ({
 	components: { 'v-data-table': VDataTable },
 	data() {
 		return {
-			headers,
+			headers: [
+				{
+					title: 'ID',
+					sortable: false,
+					key: 'id',
+					width: 80,
+					align: 'center',
+				},
+				{
+					title: 'Name',
+					sortable: false,
+					key: 'name',
+					align: 'end',
+				},
+			],
 			items: [
 				{ id: 1, name: 'name 1' },
 				{ id: 2, name: 'name 2' },
@@ -173,7 +187,6 @@ export const TableSampleDataWithFarmCheckbox = () => ({
 	},
 	methods: {
 		onSelect({ item }) {
-			console.log(item);
 			if (item.id === 2)
 				this.selectedItems = [...this.selectedItems].filter(
 					innerItem => innerItem.id !== 2
@@ -197,7 +210,6 @@ export const TableSampleDataWithFarmCheckbox = () => ({
 	show-select
 		id="v-data-table--default"
 		v-model="selectedItems"
-		
 		:headers="headers"
         :items="items"
 		@item-selected="onSelect"

package/src/main.ts

@@ -78,7 +78,7 @@ export * from './components/Switcher';
 export * from './components/Tabs';
 export * from './components/TextArea';
 export * from './components/TextFieldV2';
-export * from './components/InputMoney';
+export * from './components/InputDecimalFormatter';
 export * from './components/Tooltip';
 export * from './components/Typography';
 export * from './components/ValueCaption';

package/src/scss/Sticky-table.scss

@@ -84,10 +84,13 @@ $defaultLefts: 0, 4rem, 4rem;
 		thead {
 			height: 51px;
 		}
-
-		th[role='columnheader']:has(> .v-data-table__checkbox) {
-			max-width: 71px !important;
-			padding-left: 24px;
+		&.v-data-table--show-select {
+			th:first-child, td:first-child {
+				padding-left: 0;
+			}
+			td:first-child .farm-checkbox__container {
+				margin-left: 12px;
+			} 
 		}
 
 		.v-data-table-header__icon {

package/src/scss/utils.scss

@@ -33,11 +33,11 @@ body.body--has-footer {
 }
 
 //temporary solution for v-data-table checkboxes
-.v-data-table__checkbox.v-simple-checkbox {
+.v-selection-control.v-checkbox-btn {
 	.v-icon.v-icon {
 		font-size: 22px;
-		color: var(--farm-neutral-farken);
-		;
+		color: var(--farm-neutral-darken);
+		opacity: 1;
 
 		&.mdi-checkbox-marked,
 		&.mdi-minus-box {
@@ -45,7 +45,7 @@ body.body--has-footer {
 		}
 	}
 
-	.v-input--selection-controls__ripple {
+	.v-ripple__container {
 		display: none;
 	}
 }

package/src/components/InputMoney/index.ts

@@ -1,4 +0,0 @@
-import InputMoney from './InputMoney.vue';
-
-export { InputMoney };
-export default InputMoney;