@farm-investimentos/front-mfe-components 14.2.0 → 14.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/front-mfe-components.common.js +106 -103
- package/dist/front-mfe-components.common.js.map +1 -1
- package/dist/front-mfe-components.css +1 -1
- package/dist/front-mfe-components.umd.js +106 -103
- package/dist/front-mfe-components.umd.js.map +1 -1
- package/dist/front-mfe-components.umd.min.js +1 -1
- package/dist/front-mfe-components.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/DataTableHeader/DataTableHeader.scss +5 -3
- package/src/components/DataTableHeader/DataTableHeader.vue +2 -1
- package/src/components/ListItem/ListItem.stories.js +24 -13
- package/src/scss/Sticky-table.scss +15 -2
package/package.json
CHANGED
|
@@ -19,8 +19,6 @@
|
|
|
19
19
|
|
|
20
20
|
th.sortable {
|
|
21
21
|
cursor: pointer;
|
|
22
|
-
|
|
23
|
-
|
|
24
22
|
&:not(.active) {
|
|
25
23
|
&:hover {
|
|
26
24
|
.farm-icon::before {
|
|
@@ -38,7 +36,7 @@ th.sortable {
|
|
|
38
36
|
th span.span-checkbox {
|
|
39
37
|
display: flex;
|
|
40
38
|
justify-content: flex-start;
|
|
41
|
-
padding-left:
|
|
39
|
+
padding-left: 0;
|
|
42
40
|
}
|
|
43
41
|
|
|
44
42
|
thead {
|
|
@@ -51,6 +49,10 @@ th {
|
|
|
51
49
|
font-weight: 700;
|
|
52
50
|
text-transform: uppercase;
|
|
53
51
|
box-shadow: 0px -1px 0px var(--farm-gray-lighten), 0px 1px 0px var(--farm-gray-lighten);
|
|
52
|
+
&.checkbox-container {
|
|
53
|
+
width: 60px !important;
|
|
54
|
+
min-width: 60px !important;
|
|
55
|
+
}
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
:deep(.mdi-sort-descending)::before {
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
item.sortable ? 'sortable' : '',
|
|
9
9
|
sortClick[$index].clicked ? 'active' : '',
|
|
10
10
|
item.sortable ? (sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC') : '',
|
|
11
|
+
showCheckbox && $index == 0 ? 'checkbox-container' : ''
|
|
11
12
|
]"
|
|
12
13
|
v-bind:style="{
|
|
13
14
|
textAlign: item.align ? item.align : '',
|
|
@@ -36,7 +37,7 @@
|
|
|
36
37
|
|
|
37
38
|
<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
|
|
38
39
|
<farm-checkbox
|
|
39
|
-
size="
|
|
40
|
+
size="sm"
|
|
40
41
|
v-model="inputVal"
|
|
41
42
|
:value="true"
|
|
42
43
|
:indeterminate="headerProps.someItems && !headerProps.everyItem"
|
|
@@ -23,7 +23,9 @@ export default {
|
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
export const Primary = () => ({
|
|
26
|
-
template:
|
|
26
|
+
template: `<farm-listitem>
|
|
27
|
+
Item
|
|
28
|
+
</farm-listitem>`,
|
|
27
29
|
});
|
|
28
30
|
|
|
29
31
|
export const HoverColors = () => ({
|
|
@@ -33,8 +35,16 @@ export const HoverColors = () => ({
|
|
|
33
35
|
variations,
|
|
34
36
|
};
|
|
35
37
|
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
methods: {
|
|
39
|
+
getIconVariation(variation) {
|
|
40
|
+
if (variation === 'base' || variation === 'lighten') {
|
|
41
|
+
return 'darken';
|
|
42
|
+
}
|
|
43
|
+
return 'base';
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
template: `<farm-row>
|
|
47
|
+
<farm-col v-for="color in colors" :key="color" cols="12" md="4" class="mb-4">
|
|
38
48
|
<h4>{{ color }}</h4>
|
|
39
49
|
<farm-listitem
|
|
40
50
|
v-for="variation in variations"
|
|
@@ -42,24 +52,25 @@ export const HoverColors = () => ({
|
|
|
42
52
|
:hoverColor="color"
|
|
43
53
|
:hoverColorVariation="variation"
|
|
44
54
|
>
|
|
55
|
+
<farm-icon
|
|
56
|
+
:color="color"
|
|
57
|
+
:variation="getIconVariation(variation)"
|
|
58
|
+
>
|
|
59
|
+
book
|
|
60
|
+
</farm-icon>
|
|
45
61
|
{{ color }} {{ variation }}
|
|
46
62
|
</farm-listitem>
|
|
47
|
-
</
|
|
48
|
-
</
|
|
63
|
+
</farm-col>
|
|
64
|
+
</farm-row>`,
|
|
49
65
|
});
|
|
50
66
|
|
|
51
|
-
export const
|
|
52
|
-
template: '<farm-listitem clickable>Clickable cursor</farm-listitem>',
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
export const ClickListener = () => ({
|
|
67
|
+
export const Clickable = () => ({
|
|
56
68
|
methods: {
|
|
57
69
|
onClick() {
|
|
58
70
|
alert('Clicked');
|
|
59
|
-
}
|
|
71
|
+
},
|
|
60
72
|
},
|
|
61
|
-
template:
|
|
62
|
-
`<farm-listitem
|
|
73
|
+
template: `<farm-listitem
|
|
63
74
|
clickable
|
|
64
75
|
hoverColor="error"
|
|
65
76
|
hoverColorVariation="lighten"
|
|
@@ -30,6 +30,11 @@ $defaultLefts: 0, 4rem, 4rem;
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
&.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:first-child,
|
|
34
|
+
&.v-data-table > .v-data-table__wrapper > table > thead > tr > th:first-child {
|
|
35
|
+
padding-left: 24px;
|
|
36
|
+
}
|
|
37
|
+
|
|
33
38
|
@if $columns > 0 {
|
|
34
39
|
@for $i from 1 through $columns {
|
|
35
40
|
tr td:nth-child(#{$i}),
|
|
@@ -81,6 +86,7 @@ $defaultLefts: 0, 4rem, 4rem;
|
|
|
81
86
|
|
|
82
87
|
th[role='columnheader']:has(> .v-data-table__checkbox) {
|
|
83
88
|
max-width: 71px !important;
|
|
89
|
+
padding-left: 24px;
|
|
84
90
|
}
|
|
85
91
|
|
|
86
92
|
.v-data-table-header tr th {
|
|
@@ -95,8 +101,15 @@ $defaultLefts: 0, 4rem, 4rem;
|
|
|
95
101
|
}
|
|
96
102
|
|
|
97
103
|
.v-data-table__checkbox .mdi {
|
|
98
|
-
margin-left:
|
|
99
|
-
font-size:
|
|
104
|
+
margin-left: 0;
|
|
105
|
+
font-size: 20px;
|
|
106
|
+
margin-left: -2px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.v-input--selection-controls__input {
|
|
110
|
+
width: 20px;
|
|
111
|
+
height: 20px;
|
|
112
|
+
margin-right: 0 !important;
|
|
100
113
|
}
|
|
101
114
|
}
|
|
102
115
|
}
|