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

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.6",
+	"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/Form/Form.stories.js

@@ -1,4 +1,5 @@
 import Form from './Form.vue';
+import { getCurrentInstance, ref } from 'vue';
 
 export default {
 	title: 'Form/Form',
@@ -16,16 +17,6 @@ export default {
 	},
 };
 
-const styles = {
-	vForm: {
-		maxWidth: '480px',
-	},
-	footer: {
-		display: 'flex',
-		justifyContent: 'end',
-	},
-};
-
 export const Primary = () => ({
 	data() {
 		return {
@@ -33,7 +24,7 @@ export const Primary = () => ({
 				document: 'Document',
 				name: '',
 				checkbox: '2',
-				birthDate: new Date('1980/09/20').toISOString(),
+				birthDate: '1980-09-20',
 				selectId: 1,
 				rangeDate: [],
 				cityName: null,
@@ -48,49 +39,137 @@ export const Primary = () => ({
 				{ value: 1, text: 'label 1' },
 				{ value: 2, text: 'label 2' },
 			],
-			styles,
 		};
 	},
 	template: `
-        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form" autocomplete="off">
+	<farm-row>
+		<farm-col md="3">
+			<farm-form v-model="validForm" ref="form" autocomplete="off">
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
+				</div>
+				<farm-label :required="true">Nome</farm-label>
+				<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" hint="Seu nome igual ao do RG" />
+
+				<farm-label :required="true">True/false</farm-label>
+				<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
+				
+				<farm-label :required="true">Select</farm-label>
+				<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
+
+				<farm-label :required="true">Birthdate:</farm-label>
+				<farm-input-datepicker
+					ref="birthDate"
+					inputId="form-pf-birthDate"
+					v-model="form.birthDate"
+					:readonly="true"
+					:required="true"
+				/>
+
+				<farm-label :required="true">Range date:</farm-label>
+				<farm-input-rangedatepicker
+					ref="rangeDate"
+					inputId="form-pf-rangeDate"
+					v-model="form.rangeDate"
+					:required="true"
+				/>
+				<div class="footer">
+					<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+					<farm-btn :disabled="!validForm">Salvar</farm-btn>
+				</div>
+				form: {{ form }}
+			</farm-form>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const CompositionAPI = () => ({
+	setup() {
+		const formValues = ref({ name: '' });
+		const validForm = ref(false);
+		const formEl = (ref < HTMLDivElement) | (null > null);
+
+		const rules = { required: value => !!value || 'Campo obrigatório' };
+
+		const internalInstance = getCurrentInstance().proxy;
+
+		const onReset = () => {
+			internalInstance.formEl.reset();
+		};
+
+		return {
+			formEl,
+			formValues,
+			validForm,
+			rules,
+			onReset,
+		};
+	},
+	template: `<div>
+			<farm-form v-model="validForm" ref="formEl" autocomplete="off">
+				<farm-box>
+					<farm-row>
+						<farm-col md="4">
+							<farm-label :required="true">Documento</farm-label>
+							<farm-textfield-v2 v-model="formValues.name" :rules=[rules.required] />
+						</farm-col>
+					</farm-row>
+				</farm-box>
+			</farm-form>
+			<farm-btn outlined @click="onReset" class="mr-3">Reset</farm-btn>
+			form: {{ formValues }} {{ validForm }}
+		</div>
+    `,
+});
+
+export const RestartValidation = () => ({
+	data() {
+		return {
+			form: {
+				document: null,
+				name: null,
+				checkbox: null,
+				birthDate: '',
+				selectId: null,
+				rangeDate: [],
+			},
+			validForm: true,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+				checked: value => !!value || 'Deve estar marcado',
+			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" ref="form">
+			Is valid form: {{ validForm }}
+
+			<farm-label :required="true">Nome</farm-label>
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
+			
 			<div>
 				<farm-label :required="true">Documento</farm-label>
 				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
 			</div>
-			<farm-label :required="true">Nome</farm-label>
-			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" hint="Seu nome igual ao do RG" />
-
+		
+			
 			<farm-label :required="true">True/false</farm-label>
 			<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
 			
 			<farm-label :required="true">Select</farm-label>
 			<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
-
-			<farm-label :required="true">Birthdate:</farm-label>
-			<farm-input-datepicker
-				ref="birthDate"
-				inputId="form-pf-birthDate"
-				class="mt-4"
-				v-model="form.birthDate"
-				:readonly="true"
-				:required="true"
-			/>
-
-			<farm-label :required="true">Range date:</farm-label>
-			<farm-input-rangedatepicker
-				ref="rangeDate"
-				inputId="form-pf-rangeDate"
-				class="mt-4"
-				v-model="form.rangeDate"
-				:required="true"
-			/>
 			
-			
-            <div class="footer" :style="[styles.footer]">
+            <div class="footer">
+			<farm-btn outlined @click="$refs.form.restartValidation()" class="mr-3">Restart Validation</farm-btn>
 				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
 				<farm-btn :disabled="!validForm">Salvar</farm-btn>
             </div>
-			form: {{ form }}
         </farm-form>
     `,
 });
@@ -238,77 +317,6 @@ export const Grid = () => ({
     `,
 });
 
-export const MigrateTextVieldV2 = () => ({
-	data() {
-		return {
-			form: {
-				document: 'Document',
-				name: 'Name',
-			},
-			validForm: false,
-			rules: {
-				required: value => !!value || 'Campo obrigatório',
-			},
-			items: [
-				{ value: null, text: '' },
-				{ value: 1, text: 'label 1' },
-				{ value: 2, text: 'label 2' },
-			],
-			styles,
-		};
-	},
-	template: `
-        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
-			<div>
-				<farm-label :required="true">Documento</farm-label>
-				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
-			</div>
-			<farm-label :required="true">Nome</farm-label>
-			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
-			
-            <div class="footer" :style="[styles.footer]">
-				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
-				<farm-btn :disabled="!validForm">Salvar</farm-btn>
-            </div>
-			form: {{ form }}
-        </farm-form>
-    `,
-});
-
-export const MigrateSelectV2 = () => ({
-	data() {
-		return {
-			form: {
-				document: '',
-			},
-			validForm: false,
-			rules: {
-				required: value => !!value || 'Campo obrigatório',
-			},
-			items: [
-				{ value: null, text: '' },
-				{ value: 1, text: 'label 1' },
-				{ value: 2, text: 'label 2' },
-			],
-			styles,
-		};
-	},
-	template: `
-        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
-			<div>
-				<farm-label :required="true">Documento</farm-label>
-				<farm-select v-model="form.document" :items="items" :rules="[rules.required]" />
-			</div>
-			
-            <div class="footer" :style="[styles.footer]">
-				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
-				<farm-btn :disabled="!validForm">Salvar</farm-btn>
-            </div>
-			form: {{ form }}
-        </farm-form>
-    `,
-});
-
 export const ValidateRadioGroup = () => ({
 	data() {
 		return {
@@ -336,55 +344,5 @@ export const ValidateRadioGroup = () => ({
     `,
 });
 
-export const RestartValidation = () => ({
-	data() {
-		return {
-			form: {
-				document: null,
-				name: null,
-				checkbox: null,
-				birthDate: '',
-				selectId: null,
-				rangeDate: [],
-			},
-			validForm: true,
-			rules: {
-				required: value => !!value || 'Campo obrigatório',
-				checked: value => !!value || 'Deve estar marcado',
-			},
-			items: [
-				{ value: null, text: '' },
-				{ value: 1, text: 'label 1' },
-				{ value: 2, text: 'label 2' },
-			],
-			styles,
-		};
-	},
-	template: `
-        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
-			Is valid form: {{ validForm }}
 
-			<farm-label :required="true">Nome</farm-label>
-			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
-			
-			<div>
-				<farm-label :required="true">Documento</farm-label>
-				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
-			</div>
-		
-			
-			<farm-label :required="true">True/false</farm-label>
-			<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
-			
-			<farm-label :required="true">Select</farm-label>
-			<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
-			
-            <div class="footer" :style="[styles.footer]">
-			<farm-btn outlined @click="$refs.form.restartValidation()" class="mr-3">Restart Validation</farm-btn>
-				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
-				<farm-btn :disabled="!validForm">Salvar</farm-btn>
-            </div>
-        </farm-form>
-    `,
-});
 */