@farm-investimentos/front-mfe-components-vue3 0.0.4 → 0.0.5

package/package.json

@@ -1,91 +1,91 @@
 {
-  "name": "@farm-investimentos/front-mfe-components-vue3",
-  "version": "0.0.4",
-  "author": "farm investimentos",
-  "private": false,
-  "main": "./dist/front-mfe-components.common.js",
-  "unpkg": "dist/front-mfe-components.umd.min.js",
-  "jsdelivr": "dist/front-mfe-components.umd.min.js",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "npm run build:components",
-    "build:components": "vue-cli-service build --target lib --name front-mfe-components src/main.ts",
-    "lint": "vue-cli-service lint --fix",
-    "test:unit": "jest --updateSnapshot",
-    "test:coverage": "jest --updateSnapshot --coverage",
-    "prepare": "husky install",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "files": [
-    "dist/*",
-    "src/*"
-  ],
-  "dependencies": {
-    "@vuepic/vue-datepicker": "7.1.0",
-    "core-js": "^3.6.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "vue": "3.3.4",
-    "vuetify": "3.3.20",
-    "webpack": "^4.39.3"
-  },
-  "devDependencies": {
-    "@babel/core": "7.17.9",
-    "@babel/generator": "7.17.9",
-    "@farm-investimentos/front-mfe-libs-ts": "^1.0.9",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/cli": "^7.0.6",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/vue3": "^7.0.6",
-    "@storybook/vue3-webpack5": "^7.0.6",
-    "@types/jest": "^29.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "^4.5.12",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "^29.2.3",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^29.5.0",
-    "babel-loader": "^8.3.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.1.0",
-    "husky": "^8.0.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "promise-polyfill": "^8.3.0",
-    "sass": "~1.32.0",
-    "sass-loader": "^10.0.0",
-    "storybook": "^7.0.6",
-    "text-mask-addons": "^3.8.0",
-    "ts-jest": "^29.0.0",
-    "typescript": "~4.1.5",
-    "v-mask": "^2.3.0",
-    "vue-loader": "^16.8.3"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/Farm-Investimentos/front-mfe-components-vue3.git"
-  },
-  "publishConfig": {
-    "@farm-investimentos:registry": "https://registry.npmjs.org"
-  },
-  "engines": {
-    "node": ">=18.0.0 <20.0.0"
-  }
+	"name": "@farm-investimentos/front-mfe-components-vue3",
+	"version": "0.0.5",
+	"private": false,
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/Farm-Investimentos/front-mfe-components-vue3.git"
+	},
+	"author": "farm investimentos",
+	"main": "./dist/front-mfe-components.common.js",
+	"jsdelivr": "dist/front-mfe-components.umd.min.js",
+	"unpkg": "dist/front-mfe-components.umd.min.js",
+	"files": [
+		"dist/*",
+		"src/*"
+	],
+	"scripts": {
+		"build": "npm run build:components",
+		"build-storybook": "storybook build",
+		"build:components": "vue-cli-service build --target lib --name front-mfe-components src/main.ts",
+		"lint": "vue-cli-service lint --fix",
+		"serve": "vue-cli-service serve",
+		"storybook": "storybook dev -p 6006",
+		"test:coverage": "jest --updateSnapshot --coverage",
+		"test:unit": "jest --updateSnapshot"
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not dead"
+	],
+	"dependencies": {
+		"@farm-investimentos/front-mfe-libs-ts": "^2.5.0",
+		"@vuepic/vue-datepicker": "^7.2.0",
+		"core-js": "^3.6.5",
+		"text-mask-addons": "^3.8.0",
+		"v-mask": "^2.3.0",
+		"vue": "3.3.4",
+		"vuetify": "^3.3.22",
+		"webpack": "^4.39.3"
+	},
+	"devDependencies": {
+		"@babel/core": "7.17.9",
+		"@babel/generator": "7.17.9",
+		"@storybook/addon-essentials": "^7.5.0",
+		"@storybook/addon-interactions": "^7.5.0",
+		"@storybook/addon-links": "^7.5.0",
+		"@storybook/blocks": "^7.5.0",
+		"@storybook/testing-library": "^0.2.2",
+		"@storybook/vue3": "^7.5.0",
+		"@storybook/vue3-vite": "^7.5.0",
+		"@tsconfig/node18": "^18.2.2",
+		"@types/jest": "^29.0.0",
+		"@types/node": "^18.17.17",
+		"@typescript-eslint/eslint-plugin": "^4.18.0",
+		"@typescript-eslint/parser": "^4.18.0",
+		"@vitejs/plugin-vue": "^4.3.4",
+		"@vue/cli-plugin-babel": "~4.5.0",
+		"@vue/cli-plugin-eslint": "~4.5.0",
+		"@vue/cli-plugin-typescript": "~4.5.0",
+		"@vue/cli-plugin-unit-jest": "^4.5.12",
+		"@vue/cli-service": "^4.5.13",
+		"@vue/compiler-sfc": "^3.0.0",
+		"@vue/eslint-config-typescript": "^7.0.0",
+		"@vue/test-utils": "^2.3.2",
+		"@vue/tsconfig": "^0.4.0",
+		"@vue/vue3-jest": "^29.2.3",
+		"babel-eslint": "^10.1.0",
+		"babel-jest": "^29.5.0",
+		"babel-loader": "^8.3.0",
+		"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+		"eslint": "^6.7.2",
+		"eslint-plugin-vue": "^7.1.0",
+		"npm-run-all2": "^6.0.6",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"sass": "~1.32.0",
+		"sass-loader": "^10.0.0",
+		"storybook": "^7.5.0",
+		"typescript": "~4.1.5",
+		"vite": "^4.4.9",
+		"vue-loader": "^16.8.3",
+		"vue-tsc": "^1.8.11"
+	},
+	"engines": {
+		"node": ">=18.0.0 <20.0.0"
+	},
+	"publishConfig": {
+		"@farm-investimentos:registry": "https://registry.npmjs.org"
+	}
 }

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

@@ -1,11 +1,8 @@
-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/AlertReload/AlertReload.stories.js

@@ -1,5 +1,4 @@
 // import { withDesign } from 'storybook-addon-designs';
-import AlertReload from './AlertReload';
 
 export default {
 	title: 'Feedback/AlertReload',
@@ -16,18 +15,12 @@ export default {
 };
 
 export const Primary = () => ({
-	components: {
-		'farm-alert-reload': AlertReload,
-	},
 	template: `<div style="width: 480px;">
     <farm-alert-reload label="Text" />
     </div>`,
 });
 
 export const Vertical = () => ({
-	components: {
-		'farm-alert-reload': AlertReload,
-	},
 	template: `<div style="width: 480px;">
     <farm-alert-reload label="Text" vertical />
     </div>`,

package/src/components/Buttons/ConfirmButton/ConfirmButton.stories.js

@@ -1,8 +1,5 @@
-import ConfirmButton from './ConfirmButton.vue';
-
 export default {
 	title: 'Buttons/Confirm',
-	component: ConfirmButton,
 	parameters: {
 		docs: {
 			description: {
@@ -40,7 +37,6 @@ export const Listener = () => ({
 });
 
 export const Iconed = () => ({
-	components: { ConfirmButton },
 	template: `<div>
 		<ConfirmButton :icon="true">default icon</ConfirmButton>
 		<ConfirmButton :icon="true" customIcon="information-outline">information-outline</ConfirmButton>

package/src/components/Buttons/DangerButton/DangerButton.stories.js

@@ -1,8 +1,5 @@
-import DangerButton from './DangerButton.vue';
-
 export default {
 	title: 'Buttons/DangerButton',
-	component: DangerButton,
 	parameters: {
 		docs: {
 			description: {

package/src/components/Checkbox/Checkbox.stories.js

@@ -1,4 +1,4 @@
-import Checkbox from './Checkbox';
+import Checkbox from './Checkbox.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 import sizes from '../../configurations/sizes';
 const colors = Object.keys(baseThemeColors);

package/src/components/Collapsible/Collapsible.stories.js

@@ -1,4 +1,4 @@
-import Collapsible from './Collapsible';
+import Collapsible from './Collapsible.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 const variations = ['', 'darken', 'lighten'];

package/src/components/ContextMenu/ContextMenu.stories.js

@@ -1,5 +1,5 @@
 // import { withDesign } from 'storybook-addon-designs';
-import ContextMenu from './';
+import ContextMenu from './ContextMenu.vue';
 
 export default {
 	title: 'Interactions/ContextMenu',

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

@@ -1,4 +1,4 @@
-import DatePicker from './DatePicker';
+import DatePicker from './DatePicker.vue';
 
 export default {
 	title: 'Form/DatePicker',

package/src/components/IconBox/IconBox.stories.js

@@ -1,5 +1,5 @@
 // import { withDesign } from 'storybook-addon-designs';
-import IconBox from './IconBox';
+import IconBox from './IconBox.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 import sizes from '../../configurations/sizes';

package/src/components/Logger/Logger.vue

@@ -1,6 +1,7 @@
 <template>
 	<section :class="{ 'logger': true, 'logger--horizontal': !vertical, 'logger--left-aligned': align === 'left' }">
-		<div v-for="(item, index) in items" :key="`logger_item_${index}`">
+		<!-- eslint-disable-next-line vue/no-v-for-template-key -->
+		<template v-for="(item, index) in items" :key="`logger_item_${index}`">
 			<farm-logger-item :item="item" :class="{
 				'logger__item--horizontal': !vertical,
 				'logger__item--left-aligned': align === 'left',
@@ -9,7 +10,7 @@
 				logger__divider: true,
 				[dividerCssClass(index)]: true,
 			}" :key="'divider_' + index"></div>
-		</div>
+		</template>
 	</section>
 </template>
 <script lang="ts">

package/src/components/ManagersList/ManagersList.stories.js

@@ -1,4 +1,4 @@
-import ManagersList from './ManagersList';
+import ManagersList from './ManagersList.vue';
 
 export default {
     title: 'Display/ManagersList',

package/src/components/MultipleSelectShortener/MultipleSelectShortener.stories.js

@@ -1,4 +1,4 @@
-import MultipleSelectShortener from './MultipleSelectShortener';
+import MultipleSelectShortener from './MultipleSelectShortener.vue';
 
 export default {
 	title: 'Display/MultipleSelectShortener',

package/src/components/PromptUserToConfirm/PromptUserToConfirm.stories.js

@@ -1,4 +1,4 @@
-import PromptUserToConfirm from './PromptUserToConfirm';
+import PromptUserToConfirm from './PromptUserToConfirm.vue';
 
 export default {
 	title: 'Interactions/PromptUserToConfirm',

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -1,4 +1,4 @@
-import RadioGroup from './RadioGroup';
+import RadioGroup from './RadioGroup.vue';
 // import { withDesign } from 'storybook-addon-designs';
 
 export default {

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -1,5 +1,5 @@
 // import { withDesign } from 'storybook-addon-designs';
-import RangeDatePicker from './RangeDatePicker';
+import RangeDatePicker from './RangeDatePicker.vue';
 
 export default {
 	title: 'Form/RangeDatePicker',

package/src/components/ResetTableRowSelection/ResetTableRowSelection.stories.js

@@ -1,4 +1,4 @@
-import ResetTableRowSelection from './ResetTableRowSelection';
+import ResetTableRowSelection from './ResetTableRowSelection.vue';
 
 export default {
 	title: 'Interactions/ResetTableRowSelection',

package/src/components/SelectModalOptions/SelectModalOptions.scss

@@ -8,7 +8,7 @@
 	border: 0;
 }
 
-:deep(#v-data-table--default) {
+:deep(#v-table--default) {
 	thead {
 		display: none;
 	}

package/src/components/SelectModalOptions/SelectModalOptions.stories.js

@@ -1,8 +1,5 @@
-import SelectModalOptions from './SelectModalOptions';
-
 export default {
 	title: 'Interactions/SelectModalOptions',
-	component: SelectModalOptions,
 };
 
 export const Primary = () => ({

package/src/components/SelectModalOptions/SelectModalOptions.vue

@@ -50,8 +50,6 @@
 						</fieldset>
 						<v-data-table
 							id="v-data-table--default"
-							hide-default-header
-							hide-default-footer
 							:headers="headers"
 							:items="items"
 							:options.sync="pagination"
@@ -109,7 +107,7 @@
 export default {
 	name: 'farm-select-modal-options',
 	components: {
-	//	'v-data-table': VDataTable,
+		// 'v-data-table': VDataTable,
 	},
 	props: {
 		/**

package/src/components/Switcher/Switcher.stories.js

@@ -1,4 +1,4 @@
-import Switch from './Switcher';
+import Switch from './Switcher.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -1,4 +1,4 @@
-import TableContextMenu from './TableContextMenu';
+import TableContextMenu from './TableContextMenu.vue';
 // import { withDesign } from 'storybook-addon-designs';
 
 export default {

package/src/components/Tooltip/Tooltip.stories.js

@@ -1,11 +1,9 @@
 // import { withDesign } from 'storybook-addon-designs';
-import Tooltip from '.';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Interactions/Tooltip',
-	component: Tooltip,
 	// decorators: [withDesign],
 	parameters: {
 		docs: {
@@ -41,7 +39,7 @@ export const Tooltips = () => ({
 			this is the tooltip for {{ color }}
 			</span>
             <template v-slot:activator="{ on, attrs }">
-                {{ color }}
+                <farm-bodytext :color="color">{{ color }}</farm-bodytext>
             </template>
         </farm-tooltip>
 	</div>`,

package/src/components/Typography/BodyText/BodyText.stories.js

@@ -1,8 +1,5 @@
-import BodyText from './BodyText';
-
 export default {
 	title: 'Typography/BodyText',
-	component: BodyText,
 	parameters: {
 		docs: {
 			description: {

package/src/components/Typography/Caption/Caption.stories.js

@@ -1,4 +1,4 @@
-import Caption from './Caption';
+import Caption from './Caption.vue';
 
 export default {
 	title: 'Typography/Caption',

package/src/components/Typography/Heading/Heading.stories.js

@@ -1,4 +1,4 @@
-import Heading from './Heading';
+import Heading from './Heading.vue';
 
 export default {
 	title: 'Typography/Heading',

package/src/components/Typography/Small/Small.stories.js

@@ -1,8 +1,5 @@
-import Small from './Small';
-
 export default {
 	title: 'Typography/Small',
-	component: Small,
 	parameters: {
 		docs: {
 			description: {

package/src/components/Typography/Subtitle/Subtitle.stories.js

@@ -1,4 +1,4 @@
-import Subtitle from './Subtitle';
+import Subtitle from './Subtitle.vue';
 
 export default {
 	title: 'Typography/Subtitle',

package/src/components/Typography/Typography.stories.js

@@ -1,4 +1,4 @@
-import Typography from './Typography';
+import Typography from './Typography.vue';
 import sizes from '../../configurations/sizes';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 import bwThemeColors from '../../configurations/_theme-colors-bw.module.scss';

package/src/components/ValueCaption/ValueCaption.stories.js

@@ -1,5 +1,5 @@
 // import { withDesign } from 'storybook-addon-designs';
-import ValueCaption from '.';
+import ValueCaption from './ValueCaption.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 

package/src/examples/Dialog.stories.js

@@ -126,35 +126,4 @@ export const CustomHtml = () => ({
             Open
         </farm-btn>
 	</div>`,
-<<<<<<< HEAD
-});
-=======
-});
-
-export const DisabledHtml = () => ({
-	methods: {
-		openDialog() {
-			this.$dialog
-				.confirm(
-					{
-						title: 'Dialog title',
-						body: `This is a text with <strong>html markup</strong> and<br />break line!<br />
-						Also with an <i class="mdi mdi-book"></i>book icon<br />
-						and some <span style="color: var(--farm-warning-base)">color</span>`,
-					},
-					{
-						html: false,
-						okText: 'Button',
-					}
-				)
-				.then(() => {})
-				.catch(() => {});
-		},
-	},
-	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
-        <farm-btn @click="openDialog">
-            Open
-        </farm-btn>
-	</div>`,
-});
->>>>>>> vuejsdialog
+});

package/src/examples/Table.stories.js

@@ -4,7 +4,7 @@ import { VDataTable } from 'vuetify/labs/components';
 const headers = [
 	{
 		title: 'ID',
-		sortable: true,
+		sortable: false,
 		value: 'id',
 		width: 80,
 		align: 'left',
@@ -12,7 +12,7 @@ const headers = [
 	{
 		title: 'Name',
 		sortable: false,
-		value: 'id',
+		value: 'name',
 		width: 160,
 		align: 'left',
 	},

package/src/scss/Sticky-table.scss

@@ -19,7 +19,7 @@ $defaultLefts: 0, 4rem, 4rem;
 			border-bottom: none;
 		}
 
-		.v-data-table__wrapper {
+		.v-table__wrapper {
 			border-top: 1px solid var(--farm-gray-lighten);
 			border-bottom: 1px solid var(--farm-gray-lighten);
 		}
@@ -35,7 +35,7 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 		}
 
-		&.v-data-table>.v-data-table__wrapper>table {
+		&.v-table__wrapper>.v-table__wrapper>table {
 
 			>tbody>tr>td:first-child,
 			>thead>tr>th:first-child {
@@ -68,7 +68,7 @@ $defaultLefts: 0, 4rem, 4rem;
 			padding-left: 24px;
 		}
 
-		th[role='columnheader'] {
+		th {
 			color: var(--farm-secondary-green-darken);
 			font-size: 14px;
 			font-weight: 700;

package/src/scss/utils.scss

@@ -2,7 +2,7 @@
 	max-width: 960px;
 }
 
-tr.v-data-table__empty-wrapper {
+tr.v-data-table-rows-no-data {
 	td {
 		background-color: white !important;
 		cursor: default !important;