@tiddh/brave-vue 1.93.1 → 1.93.2

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.
Files changed (7) hide show
  1. package/dist/src/Navigation/Tabs.stories.js +97 -55
  2. package/dist/src/Navigation/TabsLine.vue +204 -0
  3. package/dist/src/Tabs.stories.js +97 -55
  4. package/dist/src/TabsLine.vue +204 -0
  5. package/dist/src/components/Navigation/Tabs.stories.js +97 -55
  6. package/dist/src/components/Navigation/TabsLine.vue +204 -0
  7. package/package.json +1 -1
package/dist/src/Navigation/Tabs.stories.js CHANGED
@@ -1,69 +1,69 @@
1
- import { action } from '@storybook/addon-actions';
2
- import { linkTo } from '@storybook/addon-links';
3
- import { withKnobs, text, object } from '@storybook/addon-knobs';
1
+ import { action } from "@storybook/addon-actions";
2
+ import { linkTo } from "@storybook/addon-links";
3
+ import { withKnobs, text, object } from "@storybook/addon-knobs";
4
4
 
5
- import Tabs from './Tabs';
5
+ import Tabs from "./Tabs";
6
+ import TabsLine from "./TabsLine";
6
7
 
7
8
  export default {
8
- title: 'Navigation/Tabs',
9
- decorators: [withKnobs],
10
- component: Tabs
9
+ title: "Navigation/Tabs",
10
+ decorators: [withKnobs],
11
+ component: [Tabs, TabsLine],
11
12
  };
12
13
 
13
14
  const optionsList0 = {
14
- value1: {key: 'v1', value: 'value 1'}
15
- }
16
-
15
+ value1: { key: "v1", value: "value 1" },
16
+ };
17
17
 
18
18
  const optionsList1 = {
19
- value1: {key: 'v1', value: 'value 1'},
20
- value2: {key: 'v2', value: 'value 2'},
21
- }
19
+ value1: { key: "v1", value: "value 1" },
20
+ value2: { key: "v2", value: "value 2" },
21
+ };
22
22
 
23
23
  const optionsList2 = {
24
- value1: {key: 'v1', value: 'value 1'},
25
- value2: {key: 'v2', value: 'value 2'},
26
- value3: {key: 'v3', value: 'value 3'},
27
- }
24
+ value1: { key: "v1", value: "value 1" },
25
+ value2: { key: "v2", value: "value 2" },
26
+ value3: { key: "v3", value: "value 3" },
27
+ };
28
28
 
29
29
  const optionsList3 = {
30
- value1: {key: 'v1', value: 'value 1'},
31
- value2: {key: 'v2', value: 'value 2'},
32
- value3: {key: 'v3', value: 'value 3'},
33
- value4: {key: 'v4', value: 'value 4'},
34
- }
30
+ value1: { key: "v1", value: "value 1" },
31
+ value2: { key: "v2", value: "value 2" },
32
+ value3: { key: "v3", value: "value 3" },
33
+ value4: { key: "v4", value: "value 4" },
34
+ };
35
35
 
36
36
  const colorsList = {
37
- text: '#AFA2BA',
38
- textActive: '#FFFFFF',
39
- color: '#FFFFFF',
40
- colorHover: '#F8F6FF',
41
- colorActive: '#923FDA'
42
- }
37
+ text: "#AFA2BA",
38
+ textActive: "#FFFFFF",
39
+ color: "#FFFFFF",
40
+ colorHover: "#F8F6FF",
41
+ colorActive: "#923FDA",
42
+ };
43
43
 
44
44
  export const Basic = () => ({
45
- components: { Tabs },
46
- props: {
47
- selected: {
48
- default: text('Selected', 'v1')
49
- },
50
- colors: {
51
- default: object('Colors', colorsList)
52
- },
53
- options0: {
54
- default: object('Options 0', optionsList0)
55
- },
56
- options1: {
57
- default: object('Options 1', optionsList1)
58
- },
59
- options2: {
60
- default: object('Options 2', optionsList2)
61
- },
62
- options3: {
63
- default: object('Options 3', optionsList3)
64
- },
65
- },
66
- template: `<div>
45
+ components: { Tabs },
46
+ props: {
47
+ selected: {
48
+ default: text("Selected", "v1"),
49
+ },
50
+ colors: {
51
+ default: object("Colors", colorsList),
52
+ },
53
+ options0: {
54
+ default: object("Options 0", optionsList0),
55
+ },
56
+ options1: {
57
+ default: object("Options 1", optionsList1),
58
+ },
59
+ options2: {
60
+ default: object("Options 2", optionsList2),
61
+ },
62
+ options3: {
63
+ default: object("Options 3", optionsList3),
64
+ },
65
+ },
66
+ template: `<div>
67
67
  <div class="storybook-18">
68
68
  <Tabs :colors="colors" :selected="selected" name="nome" :options="options1" @change="updateData" size="md"/>
69
69
  </div>
@@ -76,9 +76,51 @@ export const Basic = () => ({
76
76
  <Tabs :colors="colors" :selected="selected" name="nome" :options="options0" @change="updateData" size="sm"/>
77
77
  </div>
78
78
  </div>`,
79
- methods: {
80
- updateData(payload) {
81
- console.log(payload)
82
- }
83
- },
79
+ methods: {
80
+ updateData(payload) {
81
+ console.log(payload);
82
+ },
83
+ },
84
+ });
85
+
86
+ export const Line = () => ({
87
+ components: { TabsLine },
88
+ props: {
89
+ selected: {
90
+ default: text("Selected", "v1"),
91
+ },
92
+ colors: {
93
+ default: object("Colors", colorsList),
94
+ },
95
+ options0: {
96
+ default: object("Options 0", optionsList0),
97
+ },
98
+ options1: {
99
+ default: object("Options 1", optionsList1),
100
+ },
101
+ options2: {
102
+ default: object("Options 2", optionsList2),
103
+ },
104
+ options3: {
105
+ default: object("Options 3", optionsList3),
106
+ },
107
+ },
108
+ template: `<div>
109
+ <div class="storybook-18">
110
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options1" @change="updateData" size="md"/>
111
+ </div>
112
+ <br>
113
+ <div class="storybook-18">
114
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options2" @change="updateData" size="sm"/>
115
+ </div>
116
+ <br>
117
+ <div class="storybook-18">
118
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options0" @change="updateData" size="sm"/>
119
+ </div>
120
+ </div>`,
121
+ methods: {
122
+ updateData(payload) {
123
+ console.log(payload);
124
+ },
125
+ },
84
126
  });
package/dist/src/Navigation/TabsLine.vue ADDED
@@ -0,0 +1,204 @@
1
+ <template>
2
+ <div class="tabs-group" :style="colorsVar" v-bind="$attrs" v-on="$listeners">
3
+ <div :name="name" class="tabs">
4
+ <button
5
+ class="tab"
6
+ :class="[
7
+ 'size-' + size,
8
+ option.key === selected ? 'is-selected' : null,
9
+ ]"
10
+ v-for="(option, index) in options"
11
+ :key="index + 1"
12
+ @click="onChange(option.key, option.value)"
13
+ >
14
+ {{ option.value }}
15
+ </button>
16
+ </div>
17
+ </div>
18
+ </template>
19
+
20
+ <script>
21
+ export default {
22
+ name: "TabsLine",
23
+ props: {
24
+ /**
25
+ * Nome do campo, utilizado no callback do evento<br>
26
+ * Example: `Name`
27
+ * */
28
+ name: {
29
+ type: String,
30
+ },
31
+ /**
32
+ * Objeto com até 4 opções<br>
33
+ * Example: `{ value1: {key: 'v1', value: 'value 1'}, value2: {key: 'v2', value: 'value 2'} }`
34
+ * */
35
+ options: {
36
+ type: Object,
37
+ },
38
+ /**
39
+ * Key do valor selecionado<br>
40
+ * Example: `v1`
41
+ * */
42
+ selected: {
43
+ type: String,
44
+ },
45
+ /**
46
+ * Objeto com as cores do Tab<br>
47
+ * Example: `{ "text": "#AFA2BA", "textActive": "#FFFFFF", "color": "#FFFFFF", "colorHover": "#F8F6FF", "colorActive": "#923FDA" }`
48
+ * */
49
+ colors: {
50
+ type: Object,
51
+ },
52
+ /**
53
+ * Tamanho do botão. Não interfere em botões `primary`<br>
54
+ * Values: `md` `sm`
55
+ */
56
+ size: {
57
+ type: String,
58
+ default: "md",
59
+ },
60
+ },
61
+ data() {
62
+ return {};
63
+ },
64
+ computed: {
65
+ colorsVar() {
66
+ return {
67
+ "--color-active": this.colors.colorActive,
68
+ "--color-hover": this.colors.colorHover,
69
+ "--color": this.colors.color,
70
+ "--text-active": this.colors.textActive,
71
+ "--text": this.colors.text,
72
+ };
73
+ },
74
+ },
75
+ methods: {
76
+ onChange(key, value) {
77
+ const payload = {
78
+ target: this.name,
79
+ key: key,
80
+ value: value,
81
+ };
82
+
83
+ /**
84
+ * Evento disparado sempre que o valor for alterado.<br>
85
+ * Retorna um objeto com target (name do campo), key ativo e value ativo.
86
+ */
87
+ this.$emit("change", payload);
88
+ },
89
+ },
90
+ };
91
+ </script>
92
+ <style lang="scss" scoped>
93
+ @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
94
+ .tabs-group {
95
+ transition: all 0.3s;
96
+
97
+ display: flex;
98
+ flex-direction: column;
99
+ width: 100%;
100
+
101
+ .tabs {
102
+ display: flex;
103
+
104
+ .tab {
105
+ flex: 1;
106
+ background: $color-neutral-lightest;
107
+
108
+ //SHAPE
109
+ border: none;
110
+
111
+ //TEXT
112
+ font-family: $font-family-comp-02;
113
+ color: var(--text);
114
+
115
+ &.size-md {
116
+ //SHAPE
117
+ height: px-size("lg", 64px);
118
+ padding: px-size("lg", $spacing-stack-md) 0;
119
+ @include media-breakpoint-down("sm") {
120
+ padding: px-size("sm", $spacing-stack-sm) 0;
121
+ height: px-size("sm", 64px);
122
+ }
123
+
124
+ //TEXT
125
+ font-size: px-size("lg", $font-size-xs);
126
+ line-height: 0;
127
+ @include media-breakpoint-down("sm") {
128
+ font-size: px-size("sm", $font-size-xxs);
129
+ }
130
+ }
131
+
132
+ &.size-sm {
133
+ //SHAPE
134
+ height: px-size("lg", 46px);
135
+ padding: px-size("lg", $spacing-stack-sm) 0;
136
+ @include media-breakpoint-down("sm") {
137
+ padding: px-size("sm", $spacing-stack-sm) 0;
138
+ height: px-size("sm", 46px);
139
+ }
140
+
141
+ //TEXT
142
+ font-size: px-size("lg", $font-size-xxs);
143
+ line-height: 0;
144
+ @include media-breakpoint-down("sm") {
145
+ font-size: px-size("sm", $font-size-xxs);
146
+ }
147
+ }
148
+
149
+ &:not(:first-child) {
150
+ margin-left: -2px;
151
+ }
152
+ &:not(:last-child) {
153
+ border-right-color: transparent;
154
+ }
155
+ &:first-child {
156
+ border-top-left-radius: px-size("lg", $border-radius-md);
157
+ border-bottom-left-radius: px-size("lg", $border-radius-md);
158
+ }
159
+ &:last-child {
160
+ border-top-right-radius: px-size("lg", $border-radius-md);
161
+ border-bottom-right-radius: px-size("lg", $border-radius-md);
162
+ }
163
+
164
+ &:hover {
165
+ outline: none;
166
+
167
+ //SHAPE
168
+ //background: var(--color-hover);
169
+ //border-color: var(--color-active);
170
+ z-index: 5;
171
+ cursor: pointer;
172
+
173
+ //TEXT
174
+ color: var(--color-active);
175
+ }
176
+
177
+ &:focus,
178
+ &:active,
179
+ &.is-selected {
180
+ outline: none;
181
+
182
+ //SHAPE
183
+ //background-color: var(--color-active);
184
+ z-index: 10;
185
+ position: relative;
186
+
187
+ &:after {
188
+ content: "";
189
+ position: absolute;
190
+ bottom: 0px;
191
+ height: 4px;
192
+ background-color: var(--color-active);
193
+ width: 100%;
194
+ left: 0px;
195
+ border-radius: 8px 8px 0px 0px;
196
+ }
197
+
198
+ //TEXT
199
+ color: var(--color-active);
200
+ }
201
+ }
202
+ }
203
+ }
204
+ </style>
package/dist/src/Tabs.stories.js CHANGED
@@ -1,69 +1,69 @@
1
- import { action } from '@storybook/addon-actions';
2
- import { linkTo } from '@storybook/addon-links';
3
- import { withKnobs, text, object } from '@storybook/addon-knobs';
1
+ import { action } from "@storybook/addon-actions";
2
+ import { linkTo } from "@storybook/addon-links";
3
+ import { withKnobs, text, object } from "@storybook/addon-knobs";
4
4
 
5
- import Tabs from './Tabs';
5
+ import Tabs from "./Tabs";
6
+ import TabsLine from "./TabsLine";
6
7
 
7
8
  export default {
8
- title: 'Navigation/Tabs',
9
- decorators: [withKnobs],
10
- component: Tabs
9
+ title: "Navigation/Tabs",
10
+ decorators: [withKnobs],
11
+ component: [Tabs, TabsLine],
11
12
  };
12
13
 
13
14
  const optionsList0 = {
14
- value1: {key: 'v1', value: 'value 1'}
15
- }
16
-
15
+ value1: { key: "v1", value: "value 1" },
16
+ };
17
17
 
18
18
  const optionsList1 = {
19
- value1: {key: 'v1', value: 'value 1'},
20
- value2: {key: 'v2', value: 'value 2'},
21
- }
19
+ value1: { key: "v1", value: "value 1" },
20
+ value2: { key: "v2", value: "value 2" },
21
+ };
22
22
 
23
23
  const optionsList2 = {
24
- value1: {key: 'v1', value: 'value 1'},
25
- value2: {key: 'v2', value: 'value 2'},
26
- value3: {key: 'v3', value: 'value 3'},
27
- }
24
+ value1: { key: "v1", value: "value 1" },
25
+ value2: { key: "v2", value: "value 2" },
26
+ value3: { key: "v3", value: "value 3" },
27
+ };
28
28
 
29
29
  const optionsList3 = {
30
- value1: {key: 'v1', value: 'value 1'},
31
- value2: {key: 'v2', value: 'value 2'},
32
- value3: {key: 'v3', value: 'value 3'},
33
- value4: {key: 'v4', value: 'value 4'},
34
- }
30
+ value1: { key: "v1", value: "value 1" },
31
+ value2: { key: "v2", value: "value 2" },
32
+ value3: { key: "v3", value: "value 3" },
33
+ value4: { key: "v4", value: "value 4" },
34
+ };
35
35
 
36
36
  const colorsList = {
37
- text: '#AFA2BA',
38
- textActive: '#FFFFFF',
39
- color: '#FFFFFF',
40
- colorHover: '#F8F6FF',
41
- colorActive: '#923FDA'
42
- }
37
+ text: "#AFA2BA",
38
+ textActive: "#FFFFFF",
39
+ color: "#FFFFFF",
40
+ colorHover: "#F8F6FF",
41
+ colorActive: "#923FDA",
42
+ };
43
43
 
44
44
  export const Basic = () => ({
45
- components: { Tabs },
46
- props: {
47
- selected: {
48
- default: text('Selected', 'v1')
49
- },
50
- colors: {
51
- default: object('Colors', colorsList)
52
- },
53
- options0: {
54
- default: object('Options 0', optionsList0)
55
- },
56
- options1: {
57
- default: object('Options 1', optionsList1)
58
- },
59
- options2: {
60
- default: object('Options 2', optionsList2)
61
- },
62
- options3: {
63
- default: object('Options 3', optionsList3)
64
- },
65
- },
66
- template: `<div>
45
+ components: { Tabs },
46
+ props: {
47
+ selected: {
48
+ default: text("Selected", "v1"),
49
+ },
50
+ colors: {
51
+ default: object("Colors", colorsList),
52
+ },
53
+ options0: {
54
+ default: object("Options 0", optionsList0),
55
+ },
56
+ options1: {
57
+ default: object("Options 1", optionsList1),
58
+ },
59
+ options2: {
60
+ default: object("Options 2", optionsList2),
61
+ },
62
+ options3: {
63
+ default: object("Options 3", optionsList3),
64
+ },
65
+ },
66
+ template: `<div>
67
67
  <div class="storybook-18">
68
68
  <Tabs :colors="colors" :selected="selected" name="nome" :options="options1" @change="updateData" size="md"/>
69
69
  </div>
@@ -76,9 +76,51 @@ export const Basic = () => ({
76
76
  <Tabs :colors="colors" :selected="selected" name="nome" :options="options0" @change="updateData" size="sm"/>
77
77
  </div>
78
78
  </div>`,
79
- methods: {
80
- updateData(payload) {
81
- console.log(payload)
82
- }
83
- },
79
+ methods: {
80
+ updateData(payload) {
81
+ console.log(payload);
82
+ },
83
+ },
84
+ });
85
+
86
+ export const Line = () => ({
87
+ components: { TabsLine },
88
+ props: {
89
+ selected: {
90
+ default: text("Selected", "v1"),
91
+ },
92
+ colors: {
93
+ default: object("Colors", colorsList),
94
+ },
95
+ options0: {
96
+ default: object("Options 0", optionsList0),
97
+ },
98
+ options1: {
99
+ default: object("Options 1", optionsList1),
100
+ },
101
+ options2: {
102
+ default: object("Options 2", optionsList2),
103
+ },
104
+ options3: {
105
+ default: object("Options 3", optionsList3),
106
+ },
107
+ },
108
+ template: `<div>
109
+ <div class="storybook-18">
110
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options1" @change="updateData" size="md"/>
111
+ </div>
112
+ <br>
113
+ <div class="storybook-18">
114
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options2" @change="updateData" size="sm"/>
115
+ </div>
116
+ <br>
117
+ <div class="storybook-18">
118
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options0" @change="updateData" size="sm"/>
119
+ </div>
120
+ </div>`,
121
+ methods: {
122
+ updateData(payload) {
123
+ console.log(payload);
124
+ },
125
+ },
84
126
  });
package/dist/src/TabsLine.vue ADDED
@@ -0,0 +1,204 @@
1
+ <template>
2
+ <div class="tabs-group" :style="colorsVar" v-bind="$attrs" v-on="$listeners">
3
+ <div :name="name" class="tabs">
4
+ <button
5
+ class="tab"
6
+ :class="[
7
+ 'size-' + size,
8
+ option.key === selected ? 'is-selected' : null,
9
+ ]"
10
+ v-for="(option, index) in options"
11
+ :key="index + 1"
12
+ @click="onChange(option.key, option.value)"
13
+ >
14
+ {{ option.value }}
15
+ </button>
16
+ </div>
17
+ </div>
18
+ </template>
19
+
20
+ <script>
21
+ export default {
22
+ name: "TabsLine",
23
+ props: {
24
+ /**
25
+ * Nome do campo, utilizado no callback do evento<br>
26
+ * Example: `Name`
27
+ * */
28
+ name: {
29
+ type: String,
30
+ },
31
+ /**
32
+ * Objeto com até 4 opções<br>
33
+ * Example: `{ value1: {key: 'v1', value: 'value 1'}, value2: {key: 'v2', value: 'value 2'} }`
34
+ * */
35
+ options: {
36
+ type: Object,
37
+ },
38
+ /**
39
+ * Key do valor selecionado<br>
40
+ * Example: `v1`
41
+ * */
42
+ selected: {
43
+ type: String,
44
+ },
45
+ /**
46
+ * Objeto com as cores do Tab<br>
47
+ * Example: `{ "text": "#AFA2BA", "textActive": "#FFFFFF", "color": "#FFFFFF", "colorHover": "#F8F6FF", "colorActive": "#923FDA" }`
48
+ * */
49
+ colors: {
50
+ type: Object,
51
+ },
52
+ /**
53
+ * Tamanho do botão. Não interfere em botões `primary`<br>
54
+ * Values: `md` `sm`
55
+ */
56
+ size: {
57
+ type: String,
58
+ default: "md",
59
+ },
60
+ },
61
+ data() {
62
+ return {};
63
+ },
64
+ computed: {
65
+ colorsVar() {
66
+ return {
67
+ "--color-active": this.colors.colorActive,
68
+ "--color-hover": this.colors.colorHover,
69
+ "--color": this.colors.color,
70
+ "--text-active": this.colors.textActive,
71
+ "--text": this.colors.text,
72
+ };
73
+ },
74
+ },
75
+ methods: {
76
+ onChange(key, value) {
77
+ const payload = {
78
+ target: this.name,
79
+ key: key,
80
+ value: value,
81
+ };
82
+
83
+ /**
84
+ * Evento disparado sempre que o valor for alterado.<br>
85
+ * Retorna um objeto com target (name do campo), key ativo e value ativo.
86
+ */
87
+ this.$emit("change", payload);
88
+ },
89
+ },
90
+ };
91
+ </script>
92
+ <style lang="scss" scoped>
93
+ @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
94
+ .tabs-group {
95
+ transition: all 0.3s;
96
+
97
+ display: flex;
98
+ flex-direction: column;
99
+ width: 100%;
100
+
101
+ .tabs {
102
+ display: flex;
103
+
104
+ .tab {
105
+ flex: 1;
106
+ background: $color-neutral-lightest;
107
+
108
+ //SHAPE
109
+ border: none;
110
+
111
+ //TEXT
112
+ font-family: $font-family-comp-02;
113
+ color: var(--text);
114
+
115
+ &.size-md {
116
+ //SHAPE
117
+ height: px-size("lg", 64px);
118
+ padding: px-size("lg", $spacing-stack-md) 0;
119
+ @include media-breakpoint-down("sm") {
120
+ padding: px-size("sm", $spacing-stack-sm) 0;
121
+ height: px-size("sm", 64px);
122
+ }
123
+
124
+ //TEXT
125
+ font-size: px-size("lg", $font-size-xs);
126
+ line-height: 0;
127
+ @include media-breakpoint-down("sm") {
128
+ font-size: px-size("sm", $font-size-xxs);
129
+ }
130
+ }
131
+
132
+ &.size-sm {
133
+ //SHAPE
134
+ height: px-size("lg", 46px);
135
+ padding: px-size("lg", $spacing-stack-sm) 0;
136
+ @include media-breakpoint-down("sm") {
137
+ padding: px-size("sm", $spacing-stack-sm) 0;
138
+ height: px-size("sm", 46px);
139
+ }
140
+
141
+ //TEXT
142
+ font-size: px-size("lg", $font-size-xxs);
143
+ line-height: 0;
144
+ @include media-breakpoint-down("sm") {
145
+ font-size: px-size("sm", $font-size-xxs);
146
+ }
147
+ }
148
+
149
+ &:not(:first-child) {
150
+ margin-left: -2px;
151
+ }
152
+ &:not(:last-child) {
153
+ border-right-color: transparent;
154
+ }
155
+ &:first-child {
156
+ border-top-left-radius: px-size("lg", $border-radius-md);
157
+ border-bottom-left-radius: px-size("lg", $border-radius-md);
158
+ }
159
+ &:last-child {
160
+ border-top-right-radius: px-size("lg", $border-radius-md);
161
+ border-bottom-right-radius: px-size("lg", $border-radius-md);
162
+ }
163
+
164
+ &:hover {
165
+ outline: none;
166
+
167
+ //SHAPE
168
+ //background: var(--color-hover);
169
+ //border-color: var(--color-active);
170
+ z-index: 5;
171
+ cursor: pointer;
172
+
173
+ //TEXT
174
+ color: var(--color-active);
175
+ }
176
+
177
+ &:focus,
178
+ &:active,
179
+ &.is-selected {
180
+ outline: none;
181
+
182
+ //SHAPE
183
+ //background-color: var(--color-active);
184
+ z-index: 10;
185
+ position: relative;
186
+
187
+ &:after {
188
+ content: "";
189
+ position: absolute;
190
+ bottom: 0px;
191
+ height: 4px;
192
+ background-color: var(--color-active);
193
+ width: 100%;
194
+ left: 0px;
195
+ border-radius: 8px 8px 0px 0px;
196
+ }
197
+
198
+ //TEXT
199
+ color: var(--color-active);
200
+ }
201
+ }
202
+ }
203
+ }
204
+ </style>
package/dist/src/components/Navigation/Tabs.stories.js CHANGED
@@ -1,69 +1,69 @@
1
- import { action } from '@storybook/addon-actions';
2
- import { linkTo } from '@storybook/addon-links';
3
- import { withKnobs, text, object } from '@storybook/addon-knobs';
1
+ import { action } from "@storybook/addon-actions";
2
+ import { linkTo } from "@storybook/addon-links";
3
+ import { withKnobs, text, object } from "@storybook/addon-knobs";
4
4
 
5
- import Tabs from './Tabs';
5
+ import Tabs from "./Tabs";
6
+ import TabsLine from "./TabsLine";
6
7
 
7
8
  export default {
8
- title: 'Navigation/Tabs',
9
- decorators: [withKnobs],
10
- component: Tabs
9
+ title: "Navigation/Tabs",
10
+ decorators: [withKnobs],
11
+ component: [Tabs, TabsLine],
11
12
  };
12
13
 
13
14
  const optionsList0 = {
14
- value1: {key: 'v1', value: 'value 1'}
15
- }
16
-
15
+ value1: { key: "v1", value: "value 1" },
16
+ };
17
17
 
18
18
  const optionsList1 = {
19
- value1: {key: 'v1', value: 'value 1'},
20
- value2: {key: 'v2', value: 'value 2'},
21
- }
19
+ value1: { key: "v1", value: "value 1" },
20
+ value2: { key: "v2", value: "value 2" },
21
+ };
22
22
 
23
23
  const optionsList2 = {
24
- value1: {key: 'v1', value: 'value 1'},
25
- value2: {key: 'v2', value: 'value 2'},
26
- value3: {key: 'v3', value: 'value 3'},
27
- }
24
+ value1: { key: "v1", value: "value 1" },
25
+ value2: { key: "v2", value: "value 2" },
26
+ value3: { key: "v3", value: "value 3" },
27
+ };
28
28
 
29
29
  const optionsList3 = {
30
- value1: {key: 'v1', value: 'value 1'},
31
- value2: {key: 'v2', value: 'value 2'},
32
- value3: {key: 'v3', value: 'value 3'},
33
- value4: {key: 'v4', value: 'value 4'},
34
- }
30
+ value1: { key: "v1", value: "value 1" },
31
+ value2: { key: "v2", value: "value 2" },
32
+ value3: { key: "v3", value: "value 3" },
33
+ value4: { key: "v4", value: "value 4" },
34
+ };
35
35
 
36
36
  const colorsList = {
37
- text: '#AFA2BA',
38
- textActive: '#FFFFFF',
39
- color: '#FFFFFF',
40
- colorHover: '#F8F6FF',
41
- colorActive: '#923FDA'
42
- }
37
+ text: "#AFA2BA",
38
+ textActive: "#FFFFFF",
39
+ color: "#FFFFFF",
40
+ colorHover: "#F8F6FF",
41
+ colorActive: "#923FDA",
42
+ };
43
43
 
44
44
  export const Basic = () => ({
45
- components: { Tabs },
46
- props: {
47
- selected: {
48
- default: text('Selected', 'v1')
49
- },
50
- colors: {
51
- default: object('Colors', colorsList)
52
- },
53
- options0: {
54
- default: object('Options 0', optionsList0)
55
- },
56
- options1: {
57
- default: object('Options 1', optionsList1)
58
- },
59
- options2: {
60
- default: object('Options 2', optionsList2)
61
- },
62
- options3: {
63
- default: object('Options 3', optionsList3)
64
- },
65
- },
66
- template: `<div>
45
+ components: { Tabs },
46
+ props: {
47
+ selected: {
48
+ default: text("Selected", "v1"),
49
+ },
50
+ colors: {
51
+ default: object("Colors", colorsList),
52
+ },
53
+ options0: {
54
+ default: object("Options 0", optionsList0),
55
+ },
56
+ options1: {
57
+ default: object("Options 1", optionsList1),
58
+ },
59
+ options2: {
60
+ default: object("Options 2", optionsList2),
61
+ },
62
+ options3: {
63
+ default: object("Options 3", optionsList3),
64
+ },
65
+ },
66
+ template: `<div>
67
67
  <div class="storybook-18">
68
68
  <Tabs :colors="colors" :selected="selected" name="nome" :options="options1" @change="updateData" size="md"/>
69
69
  </div>
@@ -76,9 +76,51 @@ export const Basic = () => ({
76
76
  <Tabs :colors="colors" :selected="selected" name="nome" :options="options0" @change="updateData" size="sm"/>
77
77
  </div>
78
78
  </div>`,
79
- methods: {
80
- updateData(payload) {
81
- console.log(payload)
82
- }
83
- },
79
+ methods: {
80
+ updateData(payload) {
81
+ console.log(payload);
82
+ },
83
+ },
84
+ });
85
+
86
+ export const Line = () => ({
87
+ components: { TabsLine },
88
+ props: {
89
+ selected: {
90
+ default: text("Selected", "v1"),
91
+ },
92
+ colors: {
93
+ default: object("Colors", colorsList),
94
+ },
95
+ options0: {
96
+ default: object("Options 0", optionsList0),
97
+ },
98
+ options1: {
99
+ default: object("Options 1", optionsList1),
100
+ },
101
+ options2: {
102
+ default: object("Options 2", optionsList2),
103
+ },
104
+ options3: {
105
+ default: object("Options 3", optionsList3),
106
+ },
107
+ },
108
+ template: `<div>
109
+ <div class="storybook-18">
110
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options1" @change="updateData" size="md"/>
111
+ </div>
112
+ <br>
113
+ <div class="storybook-18">
114
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options2" @change="updateData" size="sm"/>
115
+ </div>
116
+ <br>
117
+ <div class="storybook-18">
118
+ <TabsLine :colors="colors" :selected="selected" name="nome" :options="options0" @change="updateData" size="sm"/>
119
+ </div>
120
+ </div>`,
121
+ methods: {
122
+ updateData(payload) {
123
+ console.log(payload);
124
+ },
125
+ },
84
126
  });
package/dist/src/components/Navigation/TabsLine.vue ADDED
@@ -0,0 +1,204 @@
1
+ <template>
2
+ <div class="tabs-group" :style="colorsVar" v-bind="$attrs" v-on="$listeners">
3
+ <div :name="name" class="tabs">
4
+ <button
5
+ class="tab"
6
+ :class="[
7
+ 'size-' + size,
8
+ option.key === selected ? 'is-selected' : null,
9
+ ]"
10
+ v-for="(option, index) in options"
11
+ :key="index + 1"
12
+ @click="onChange(option.key, option.value)"
13
+ >
14
+ {{ option.value }}
15
+ </button>
16
+ </div>
17
+ </div>
18
+ </template>
19
+
20
+ <script>
21
+ export default {
22
+ name: "TabsLine",
23
+ props: {
24
+ /**
25
+ * Nome do campo, utilizado no callback do evento<br>
26
+ * Example: `Name`
27
+ * */
28
+ name: {
29
+ type: String,
30
+ },
31
+ /**
32
+ * Objeto com até 4 opções<br>
33
+ * Example: `{ value1: {key: 'v1', value: 'value 1'}, value2: {key: 'v2', value: 'value 2'} }`
34
+ * */
35
+ options: {
36
+ type: Object,
37
+ },
38
+ /**
39
+ * Key do valor selecionado<br>
40
+ * Example: `v1`
41
+ * */
42
+ selected: {
43
+ type: String,
44
+ },
45
+ /**
46
+ * Objeto com as cores do Tab<br>
47
+ * Example: `{ "text": "#AFA2BA", "textActive": "#FFFFFF", "color": "#FFFFFF", "colorHover": "#F8F6FF", "colorActive": "#923FDA" }`
48
+ * */
49
+ colors: {
50
+ type: Object,
51
+ },
52
+ /**
53
+ * Tamanho do botão. Não interfere em botões `primary`<br>
54
+ * Values: `md` `sm`
55
+ */
56
+ size: {
57
+ type: String,
58
+ default: "md",
59
+ },
60
+ },
61
+ data() {
62
+ return {};
63
+ },
64
+ computed: {
65
+ colorsVar() {
66
+ return {
67
+ "--color-active": this.colors.colorActive,
68
+ "--color-hover": this.colors.colorHover,
69
+ "--color": this.colors.color,
70
+ "--text-active": this.colors.textActive,
71
+ "--text": this.colors.text,
72
+ };
73
+ },
74
+ },
75
+ methods: {
76
+ onChange(key, value) {
77
+ const payload = {
78
+ target: this.name,
79
+ key: key,
80
+ value: value,
81
+ };
82
+
83
+ /**
84
+ * Evento disparado sempre que o valor for alterado.<br>
85
+ * Retorna um objeto com target (name do campo), key ativo e value ativo.
86
+ */
87
+ this.$emit("change", payload);
88
+ },
89
+ },
90
+ };
91
+ </script>
92
+ <style lang="scss" scoped>
93
+ @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
94
+ .tabs-group {
95
+ transition: all 0.3s;
96
+
97
+ display: flex;
98
+ flex-direction: column;
99
+ width: 100%;
100
+
101
+ .tabs {
102
+ display: flex;
103
+
104
+ .tab {
105
+ flex: 1;
106
+ background: $color-neutral-lightest;
107
+
108
+ //SHAPE
109
+ border: none;
110
+
111
+ //TEXT
112
+ font-family: $font-family-comp-02;
113
+ color: var(--text);
114
+
115
+ &.size-md {
116
+ //SHAPE
117
+ height: px-size("lg", 64px);
118
+ padding: px-size("lg", $spacing-stack-md) 0;
119
+ @include media-breakpoint-down("sm") {
120
+ padding: px-size("sm", $spacing-stack-sm) 0;
121
+ height: px-size("sm", 64px);
122
+ }
123
+
124
+ //TEXT
125
+ font-size: px-size("lg", $font-size-xs);
126
+ line-height: 0;
127
+ @include media-breakpoint-down("sm") {
128
+ font-size: px-size("sm", $font-size-xxs);
129
+ }
130
+ }
131
+
132
+ &.size-sm {
133
+ //SHAPE
134
+ height: px-size("lg", 46px);
135
+ padding: px-size("lg", $spacing-stack-sm) 0;
136
+ @include media-breakpoint-down("sm") {
137
+ padding: px-size("sm", $spacing-stack-sm) 0;
138
+ height: px-size("sm", 46px);
139
+ }
140
+
141
+ //TEXT
142
+ font-size: px-size("lg", $font-size-xxs);
143
+ line-height: 0;
144
+ @include media-breakpoint-down("sm") {
145
+ font-size: px-size("sm", $font-size-xxs);
146
+ }
147
+ }
148
+
149
+ &:not(:first-child) {
150
+ margin-left: -2px;
151
+ }
152
+ &:not(:last-child) {
153
+ border-right-color: transparent;
154
+ }
155
+ &:first-child {
156
+ border-top-left-radius: px-size("lg", $border-radius-md);
157
+ border-bottom-left-radius: px-size("lg", $border-radius-md);
158
+ }
159
+ &:last-child {
160
+ border-top-right-radius: px-size("lg", $border-radius-md);
161
+ border-bottom-right-radius: px-size("lg", $border-radius-md);
162
+ }
163
+
164
+ &:hover {
165
+ outline: none;
166
+
167
+ //SHAPE
168
+ //background: var(--color-hover);
169
+ //border-color: var(--color-active);
170
+ z-index: 5;
171
+ cursor: pointer;
172
+
173
+ //TEXT
174
+ color: var(--color-active);
175
+ }
176
+
177
+ &:focus,
178
+ &:active,
179
+ &.is-selected {
180
+ outline: none;
181
+
182
+ //SHAPE
183
+ //background-color: var(--color-active);
184
+ z-index: 10;
185
+ position: relative;
186
+
187
+ &:after {
188
+ content: "";
189
+ position: absolute;
190
+ bottom: 0px;
191
+ height: 4px;
192
+ background-color: var(--color-active);
193
+ width: 100%;
194
+ left: 0px;
195
+ border-radius: 8px 8px 0px 0px;
196
+ }
197
+
198
+ //TEXT
199
+ color: var(--color-active);
200
+ }
201
+ }
202
+ }
203
+ }
204
+ </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tiddh/brave-vue",
3
- "version": "1.93.1",
3
+ "version": "1.93.2",
4
4
  "private": false,
5
5
  "main": "dist/brave-vue.ssr.js",
6
6
  "browser": "dist/brave-vue.esm.js",