@farm-investimentos/front-mfe-components-vue3 0.5.1 → 0.6.0

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -54,5 +54,6 @@ export const IndeterminateAnimation = () => ({
 			val: 35,
 		};
 	},
-	template: '<farm-progressbar indeterminate :value="val" background-color="#FFFF00" value-color="#00FF00" />',
+	template:
+		'<farm-progressbar indeterminate :value="val" background-color="#FFFF00" value-color="#00FF00" />',
 });

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

@@ -32,7 +32,8 @@ export const CustomTitle = () => ({
 			model: false,
 		};
 	},
-	template: '<div style="max-width: 320px"><farm-promptusertoconfirm title="Custom"  v-model="model" /></div>',
+	template:
+		'<div style="max-width: 320px"><farm-promptusertoconfirm title="Custom"  v-model="model" /></div>',
 });
 
 export const CustomMatchInput = () => ({

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

@@ -63,11 +63,11 @@ export const Reset = () => ({
 	},
 	methods: {
 		click() {
-			this.$refs.datepickerExemple.clear();
+			this.$refs.datepickerExample.clear();
 		},
 	},
 	template: `<div style="width: 480px">
-	<farm-input-rangedatepicker ref="datepickerExemple" inputId="input-custom-id" v-model="date" />
+	<farm-input-rangedatepicker ref="datepickerExample" inputId="input-custom-id" v-model="date" />
 	date: {{ date }}
 		<farm-btn @click="click">
 			reset

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -3,6 +3,12 @@
 .farm-textfield {
 	height: 64px;
 
+	&--ellipsed {
+		input {
+			text-overflow: ellipsis;
+		}
+	}
+
 	&--hiddendetails {
 		height: 40px;
 	}

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -39,13 +39,15 @@ export const Primary = () => ({
 			v: 'input text',
 		};
 	},
-	template: `<div style="width: 480px;">
+	template: `<farm-row>
+		<farm-col md="4">
 		<farm-label for="input-primary">
 			label
 		</farm-label>
 		<farm-textfield-v2 id="input-primary" v-model="v" />
 		v-model: {{ v }}
-	</div>`,
+		<farm-col>
+	</farm-row>`,
 });
 
 export const Disabled = () => ({
@@ -252,11 +254,23 @@ export const Uppercase = () => ({
 			v: 'value',
 		};
 	},
-	template: `<div style="width: 480px;">
-		<farm-label for="input-uppercase">
-			label
-		</farm-label>
+	template: `<farm-row>
+	<farm-col md="4">
 		<farm-textfield-v2 id="input-uppercase" v-model="v" uppercase/>
-	</div>`,
+	<farm-col>
+	</farm-row>`,
 });
 
+export const Ellipsed = () => ({
+	data() {
+		return {
+			v: 'very long text inside the input field',
+		};
+	},
+	template: `<farm-row>
+		<farm-col md="2">
+		<farm-textfield-v2 id="input-primary-ellipsed" v-model="v" ellipsed />
+		v-model: {{ v }}
+		<farm-col>
+	</farm-row>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -11,6 +11,7 @@
 			'farm-textfield--disabled': disabled,
 			'farm-textfield--hiddendetails': hideDetails,
 			'farm-textfield--uppercase': isUppercase,
+			'farm-textfield--ellipsed': ellipsed,
 		}"
 		:id="customId"
 	>
@@ -164,7 +165,6 @@ export default {
 			type: String,
 			default: '',
 		},
-
 		/**
 		 * uppercase
 		 * leaves only the text in the input in uppercase does not affect the value of the v-model
@@ -182,6 +182,13 @@ export default {
 			// eslint-disable-next-line
 			default: (event: Event) => {},
 		},
+		/**
+		 * Hide overflow content using ellipsis
+		 */
+		ellipsed: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);

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

@@ -4,7 +4,6 @@ import baseThemeColors from '../../configurations/_theme-colors-base.module.scss
 import bwThemeColors from '../../configurations/_theme-colors-bw.module.scss';
 import sizes from '../../configurations/sizes';
 
-
 const colors = Object.keys(baseThemeColors);
 
 export default {

package/src/components/layout/Box/Box.stories.js

@@ -2,7 +2,6 @@ import Box from './Box.vue';
 
 import gutters from '../../../configurations/gutters';
 
-
 export default {
 	title: 'Layout/Box',
 	component: Box,

package/src/components/layout/Col/Col.stories.js

@@ -2,7 +2,6 @@ import Col from './Col.vue';
 
 import { aligns } from '../../../configurations/flexVariables';
 
-
 export default {
 	title: 'Layout/Col',
 	component: Col,
@@ -41,7 +40,7 @@ export const Cols = () => ({
 	data() {
 		return {
 			style,
-			items
+			items,
 		};
 	},
 	template: `<farm-row>
@@ -53,7 +52,7 @@ export const Xl = () => ({
 	data() {
 		return {
 			style,
-			items
+			items,
 		};
 	},
 	template: `<farm-row>
@@ -65,7 +64,7 @@ export const Lg = () => ({
 	data() {
 		return {
 			style,
-			items
+			items,
 		};
 	},
 	template: `<farm-row>
@@ -77,7 +76,7 @@ export const Md = () => ({
 	data() {
 		return {
 			style,
-			items
+			items,
 		};
 	},
 	template: `<farm-row>
@@ -89,7 +88,7 @@ export const Sm = () => ({
 	data() {
 		return {
 			style,
-			items
+			items,
 		};
 	},
 	template: `<farm-row>
@@ -101,7 +100,7 @@ export const Xs = () => ({
 	data() {
 		return {
 			style,
-			items
+			items,
 		};
 	},
 	template: `<farm-row>
@@ -149,7 +148,7 @@ export const Offsets = () => ({
 	data() {
 		return {
 			style,
-			items
+			items,
 		};
 	},
 	template: `<farm-box>
@@ -173,4 +172,4 @@ export const Offsets = () => ({
 			<farm-col :style="style" md="1" offset="1" offset-md="0">offset md 0</farm-col>
 		</farm-row>
 	</farm-box>`,
-});
+});

package/src/components/layout/DisplayBreakpoints.mdx

@@ -0,0 +1,111 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Layout/Display Breakpoints" />
+
+# Display Breakpoints
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>Device</th>
+      <th>Code</th>
+      <th>Type</th>
+      <th>Range</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>
+        <span>
+          <i className="mdi mdi-cellphone" />
+
+            Extra small
+        </span>
+      </td>
+
+      <td>
+        <strong>xs</strong>
+      </td>
+
+      <td>Small to large phone</td>
+      <td>\< 600px</td>
+    </tr>
+
+    <tr>
+      <td>
+        <i className="mdi mdi-tablet" />
+
+         
+        <span>Small</span>
+      </td>
+
+      <td>
+        <strong>sm</strong>
+      </td>
+
+      <td>Small to medium tablet</td>
+      <td>600px > \< 960px</td>
+    </tr>
+
+    <tr>
+      <td>
+        <i className="mdi mdi-laptop" />
+
+         
+        <span>Medium</span>
+      </td>
+
+      <td>
+        <strong>md</strong>
+      </td>
+
+      <td>Large tablet to laptop</td>
+      <td>960px > \< 1264px\*</td>
+    </tr>
+
+    <tr>
+      <td>
+        <i className="mdi mdi-monitor" />
+
+         
+        <span>Large</span>
+      </td>
+
+      <td>
+        <strong>lg</strong>
+      </td>
+
+      <td>Desktop</td>
+      <td>1264px > \< 1904px\*</td>
+    </tr>
+
+    <tr>
+      <td>
+        <i className="mdi mdi-television" />
+
+         
+        <span>Extra large</span>
+      </td>
+
+      <td>
+        <strong>xl</strong>
+      </td>
+
+      <td>4k and ultra-wide</td>
+      <td>> 1904px\*</td>
+    </tr>
+  </tbody>
+
+  <tfoot>
+    <tr>
+      <td colSpan="4">
+        <em> \* -16px on desktop for browser scrollbar</em>
+      </td>
+    </tr>
+  </tfoot>
+</table>
+
+## SCSS Helpers
+
+The \_mixins.scss contains mixins for media query, to abstract the breakpoints and create queries for different breakpoints.

package/src/components/layout/GridSystem.stories.js

@@ -134,5 +134,3 @@ export const Xs = () => ({
 		<farm-col xs="2" :style="style">6 of 6</farm-col>
 	</farm-row>`,
 });
-
-

package/src/components/layout/{PropsValues.stories.mdx → PropsValues.mdx}

@@ -1,17 +1,23 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Layout/Props Values" />
 
 # About
+
 Many components have props that accepts strings as values instead of passa a numeric values.
 Example:
+
 <code>
-&#x3C;my-component some-prop=&#x22;md&#x22; /&#x3E;<br />
-//"md" will be used as 12px in the CSS
+  \<my-component some-prop="md" /><br />
+  //"md" will be used as 12px in the CSS
 </code>
-<br /><br />
+
+<br />
+
+<br />
 
 ## Gutter
+
 * none: 0
 * xs: 4px
 * sm: 8px
@@ -22,6 +28,7 @@ Example:
 * default: 24px
 
 ## Font Size
+
 * xs: 8px
 * sm: 12px
 * md: 14px

package/src/components/layout/Row/Row.stories.js

@@ -2,7 +2,6 @@ import Row from './Row.vue';
 
 import { justifications } from '../../../configurations/flexVariables';
 
-
 export default {
 	title: 'Layout/Row',
 	component: Row,
@@ -93,7 +92,6 @@ export const DefaultGrid = () => ({
 	</div>`,
 });
 
-
 export const yGridGutters = () => ({
 	template: `<div>
 		<farm-row y-grid-gutters>

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">

package/src/examples/Dialog.stories.js

@@ -131,29 +131,33 @@ export const CustomHtml = () => ({
 export const OpenTwice = () => ({
 	methods: {
 		openDialog() {
-			this.$dialog.confirm(
-				{
-					title: 'Dialog title',
-					body: 'Dialog content',
-				},
-				{
-					html: true,
-					okText: 'OK',
-					cancelText: 'Cancel',
-				}
-			).finally( () => {});
-
-			setTimeout(() => {
-				this.$dialog.alert(
+			this.$dialog
+				.confirm(
 					{
 						title: 'Dialog title',
 						body: 'Dialog content',
 					},
 					{
 						html: true,
-						okText: 'Cancel',
+						okText: 'OK',
+						cancelText: 'Cancel',
 					}
-				).finally( () => {});
+				)
+				.finally(() => {});
+
+			setTimeout(() => {
+				this.$dialog
+					.alert(
+						{
+							title: 'Dialog title',
+							body: 'Dialog content',
+						},
+						{
+							html: true,
+							okText: 'Cancel',
+						}
+					)
+					.finally(() => {});
 			}, 2000);
 		},
 	},

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/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/stories/Introduction.mdx

@@ -0,0 +1,118 @@
+import { Meta } from '@storybook/blocks';
+import imageFile from './assets/logo_farmtech.svg';
+
+<Meta title="Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+    
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+
+    
+    `}
+</style>
+
+# Welcome to Farmtech Storybook
+
+<img src={imageFile} />
+
+Here you can find the components from the Farmtech's Design System on the top of Vue 3.
+
+Currrent version: {VERSION}