@eturnity/eturnity_reusable_components 8.7.6 → 8.10.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.
Files changed (26) hide show
  1. package/package.json +3 -2
  2. package/src/Test.vue +12 -76
  3. package/src/assets/svgIcons/checkmark_white.svg +4 -0
  4. package/src/assets/svgIcons/clenergy.svg +4 -0
  5. package/src/assets/svgIcons/clickable_info.svg +2 -2
  6. package/src/assets/svgIcons/clickable_info_white.svg +5 -0
  7. package/src/assets/svgIcons/erase_white.svg +4 -0
  8. package/src/assets/svgIcons/module.svg +2 -2
  9. package/src/assets/svgIcons/optimizer.svg +2 -5
  10. package/src/assets/svgIcons/question_mark.svg +3 -0
  11. package/src/assets/svgIcons/question_mark_white.svg +4 -0
  12. package/src/assets/svgIcons/reorder_string.svg +3 -0
  13. package/src/assets/svgIcons/switch_polarity.svg +5 -0
  14. package/src/assets/svgIcons/transparent_warning.svg +4 -0
  15. package/src/assets/svgIcons/warning_triangle.svg +3 -0
  16. package/src/assets/svgIcons/warning_triangle_white.svg +5 -0
  17. package/src/components/buttons/buttonIcon/index.vue +31 -6
  18. package/src/components/infoLabel/index.vue +63 -0
  19. package/src/components/infoText/index.vue +168 -38
  20. package/src/components/inputs/checkbox/index.vue +11 -2
  21. package/src/components/inputs/select/index.vue +8 -58
  22. package/src/components/modals/modal/index.vue +1 -0
  23. package/src/components/panelRangeInfo/index.vue +196 -0
  24. package/src/components/tabsHeader/index.vue +71 -59
  25. package/src/components/stringDesign/DropdownMenu/index.vue +0 -1009
  26. /package/src/assets/svgIcons/{close_for_modals,_tool_tips.svg → close.svg} +0 -0
package/src/components/tabsHeader/index.vue CHANGED
@@ -7,77 +7,89 @@
7
7
  :is-active="activeTab === item.id"
8
8
  @click="onTabClick({ id: item.id })"
9
9
  >
10
- {{ item.text }}
10
+ <div>{{ item.text }}</div>
11
+ <RCIcon v-if="item.hasError" name="warning" size="14px" />
11
12
  </TabItem>
12
13
  </TabsContainer>
13
14
  </PageContainer>
14
15
  </template>
15
16
 
16
17
  <script>
17
- // import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
18
- // To use:
19
- // <RCTabsHeader
20
- // :activeTab="activeTabIndex" // should match the 'id'
21
- // :tabsData="[
22
- // {
23
- // text: 'Tab 1',
24
- // id: 0
25
- // },
26
- // {
27
- // text: 'Tab 1',
28
- // id: 1
29
- // }
30
- // ]"
31
- // />
32
- import styled from 'vue3-styled-components'
18
+ // import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
19
+ // To use:
20
+ // <RCTabsHeader
21
+ // :activeTab="activeTabIndex" // should match the 'id'
22
+ // :tabsData="[
23
+ // {
24
+ // text: 'Tab 1',
25
+ // id: 0,
26
+ // hasError: true // optional
27
+ // },
28
+ // {
29
+ // text: 'Tab 1',
30
+ // id: 1,
31
+ // hasError: false // optional
32
+ // }
33
+ // ]"
34
+ // />
35
+ import styled from 'vue3-styled-components'
36
+ import RCIcon from '../icon'
33
37
 
34
- const PageContainer = styled.div``
38
+ const PageContainer = styled.div``
35
39
 
36
- const TabsContainer = styled.div`
37
- display: flex;
38
- cursor: pointer;
39
- width: 100%;
40
- `
40
+ const TabsContainer = styled.div`
41
+ display: flex;
42
+ cursor: pointer;
43
+ width: 100%;
44
+ `
41
45
 
42
- const TabAttrs = { isActive: Boolean }
43
- const TabItem = styled('div', TabAttrs)`
44
- padding: 10px 20px;
45
- font-size: 14px;
46
- font-weight: 700;
47
- background-color: ${(props) =>
48
- props.isActive ? props.theme.colors.grey5 : props.theme.colors.white};
49
- border-top: 3px solid
50
- ${(props) =>
46
+ const TabAttrs = { isActive: Boolean }
47
+ const TabItem = styled('div', TabAttrs)`
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ gap: 8px;
52
+ padding: 10px 20px;
53
+ font-size: 14px;
54
+ font-weight: 600;
55
+ background-color: ${(props) =>
56
+ props.isActive ? props.theme.colors.secondary : props.theme.colors.white};
57
+ color: ${(props) =>
51
58
  props.isActive
52
59
  ? props.theme.colors.brightBlue
53
- : props.theme.colors.grey4};
54
- flex-grow: 1;
55
- `
60
+ : props.theme.colors.black};
61
+ border-bottom: ${(props) =>
62
+ props.isActive
63
+ ? '4px solid' + props.theme.colors.brightBlue
64
+ : '1px solid' + props.theme.colors.grey4};
65
+ flex-grow: 1;
66
+ `
56
67
 
57
- export default {
58
- name: 'RCTabsHeader',
59
- components: {
60
- PageContainer,
61
- TabsContainer,
62
- TabItem
63
- },
64
- props: {
65
- tabsData: {
66
- required: true,
67
- type: Array
68
+ export default {
69
+ name: 'RCTabsHeader',
70
+ components: {
71
+ PageContainer,
72
+ TabsContainer,
73
+ TabItem,
74
+ RCIcon,
75
+ },
76
+ props: {
77
+ tabsData: {
78
+ required: true,
79
+ type: Array,
80
+ },
81
+ activeTab: {
82
+ required: true,
83
+ type: Number,
84
+ },
85
+ },
86
+ methods: {
87
+ onTabClick({ id }) {
88
+ if (id === this.activeTab) {
89
+ return
90
+ }
91
+ this.$emit('on-tab-change', id)
92
+ },
68
93
  },
69
- activeTab: {
70
- required: true,
71
- type: Number
72
- }
73
- },
74
- methods: {
75
- onTabClick({ id }) {
76
- if (id === this.activeTab) {
77
- return
78
- }
79
- this.$emit('on-tab-change', id)
80
- }
81
94
  }
82
- }
83
95
  </script>