@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.2 → 6.37.0-EPDM-8148.3

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/iconWrapper/index.vue +141 -118
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "6.37.0-EPDM-8148.2",
3
+ "version": "6.37.0-EPDM-8148.3",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
package/src/components/iconWrapper/index.vue CHANGED
@@ -1,129 +1,152 @@
1
1
  <template>
2
- <Wrapper
3
- :disabled="disabled"
4
- :size="size"
5
- :backgroundColor="backgroundColor"
2
+ <Wrapper
3
+ :disabled="disabled"
4
+ :size="size"
5
+ :backgroundColor="backgroundColor"
6
6
  :borderRadius="borderRadius"
7
7
  :hasBorder="hasBorder"
8
8
  :color="iconColor"
9
9
  :hoveredBackgroundColor="hoveredBackgroundColor"
10
10
  :isHovered="isHovered"
11
- >
12
- <icon :disabled="disabled"
13
- :size="iconSize"
14
- :name="name"
15
- :color="iconColor"
16
- :hoveredColor="hoveredIconColor"
17
- :isStriked="isStriked"
18
- />
19
-
20
- <caret v-if="hasCaret">
21
- <iconWrapper :disabled="disabled"
22
- size="10px"
23
- name="arrow_down"
24
- :iconColor="iconColor"
25
- :hoveredBackgroundColor="hoveredIconColor"
26
- borderRadius="1px"
27
- />
28
- </caret>
29
- </Wrapper>
30
- </template>
31
-
32
- <script>
33
- // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
34
- // How to use:
35
- //<icon
36
- // name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
37
- // color="red"
38
- // hoveredColor="blue"
39
- // size="60px" by default, this is 30px
40
- // />
41
-
42
- import styled from 'vue-styled-components'
43
- import icon from '../icon'
44
- const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
45
- const Wrapper = styled('div', wrapperAttrs)`
46
- position:relative;
47
- display: inline-flex;
48
- width: ${(props) => props.size};
49
- height: ${(props) => props.size};
50
- border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
51
- justify-content:center;
52
- align-items:center;
53
- cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
54
- background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
55
- border-radius: ${(props) => props.borderRadius};
56
- ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
57
- &:hover{
58
- background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
59
- }
60
- `
61
- const caret=styled.div`
62
- position:absolute;
63
- bottom:3px;
64
- right:2px;
65
- height:10px;
66
- `
11
+ >
12
+ <icon
13
+ :disabled="disabled"
14
+ :size="iconSize"
15
+ :name="name"
16
+ :color="iconColor"
17
+ :hoveredColor="hoveredIconColor"
18
+ :isStriked="isStriked"
19
+ />
20
+
21
+ <caret v-if="hasCaret">
22
+ <iconWrapper
23
+ :disabled="disabled"
24
+ size="10px"
25
+ name="arrow_down"
26
+ :iconColor="iconColor"
27
+ :hoveredBackgroundColor="hoveredIconColor"
28
+ borderRadius="1px"
29
+ />
30
+ </caret>
31
+ </Wrapper>
32
+ </template>
33
+
34
+ <script>
35
+ // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
36
+ // How to use:
37
+ //<icon
38
+ // name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
39
+ // color="red"
40
+ // hoveredColor="blue"
41
+ // size="60px" by default, this is 30px
42
+ // />
43
+
44
+ import styled from 'vue-styled-components'
45
+ import icon from '../icon'
46
+ const wrapperAttrs = {
47
+ color: String,
48
+ isHovered: Boolean,
49
+ borderRadius: String,
50
+ disabled: Boolean,
51
+ size: String,
52
+ backgroundColor: String,
53
+ hoveredBackgroundColor: String,
54
+ hasBorder: Boolean
55
+ }
56
+ const Wrapper = styled('div', wrapperAttrs)`
57
+ position: relative;
58
+ display: inline-flex;
59
+ width: ${(props) => props.size};
60
+ height: ${(props) => props.size};
61
+ border: ${(props) =>
62
+ props.hasBorder
63
+ ? 'solid 1px ' + props.theme.colors[props.color] || props.color
64
+ : ''};
65
+ justify-content: center;
66
+ align-items: center;
67
+ cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
68
+ background-color: ${(props) =>
69
+ props.theme.colors[props.backgroundColor] || props.backgroundColor};
70
+ border-radius: ${(props) => props.borderRadius};
71
+ ${(props) =>
72
+ props.isHovered
73
+ ? 'background-color:' +
74
+ props.theme.colors[props.hoveredBackgroundColor] ||
75
+ props.hoveredBackgroundColor
76
+ : ''};
77
+ &:hover {
78
+ background-color: ${(props) =>
79
+ props.theme.colors[props.hoveredBackgroundColor] ||
80
+ props.hoveredBackgroundColor};
81
+ }
82
+ `
83
+ const caret = styled.div`
84
+ position: absolute;
85
+ bottom: 3px;
86
+ right: 2px;
87
+ height: 10px;
88
+ `
67
89
 
68
- export default {
69
- name: 'iconWrapper',
70
- components: {
71
- Wrapper,
72
- icon,
73
- caret
90
+ export default {
91
+ name: 'iconWrapper',
92
+ components: {
93
+ Wrapper,
94
+ icon,
95
+ caret
96
+ },
97
+ props: {
98
+ disabled: {
99
+ required: false,
100
+ default: false
101
+ },
102
+ name: {
103
+ required: true
104
+ },
105
+ iconColor: {
106
+ required: false,
107
+ default: 'white'
108
+ },
109
+ hoveredIconColor: {
110
+ required: false
111
+ },
112
+ backgroundColor: {
113
+ required: false
114
+ },
115
+ hasBorder: {
116
+ required: false,
117
+ default: false
118
+ },
119
+ hoveredBackgroundColor: {
120
+ required: false,
121
+ default: 'transparentWhite1'
122
+ },
123
+ size: {
124
+ required: false,
125
+ default: '32px'
126
+ },
127
+ iconSize: {
128
+ required: false,
129
+ default: '18px'
130
+ },
131
+ hasCaret: {
132
+ required: false,
133
+ default: false
134
+ },
135
+ borderRadius: {
136
+ required: false,
137
+ default: '4px'
74
138
  },
75
- props: {
76
- disabled: {
77
- required: false,
78
- default: false
79
- },
80
- name: {
81
- required: true
82
- },
83
- iconColor: {
84
- required: false,
85
- default: 'white'
86
- },
87
- hoveredIconColor: {
88
- required: false
89
- },
90
- backgroundColor: {
91
- required: false,
92
- },
93
- hasBorder: {
94
- required: false,
95
- },
96
- hoveredBackgroundColor: {
97
- required: false,
98
- default:"transparentWhite1"
99
- },
100
- size: {
101
- required: false,
102
- default: '32px'
103
- },
104
- iconSize:{
105
- required: false,
106
- default:'18px'
107
- },
108
- hasCaret:{
109
- required: false,
110
- default: false
111
- },
112
- borderRadius:{
113
- required:false,
114
- default:'4px'
115
- },
116
- isHovered:{
117
- required:false,
118
- default:false
119
- },
120
- isStriked:{
121
- required:false,
122
- default:false
123
- }
139
+ isHovered: {
140
+ required: false,
141
+ default: false
124
142
  },
125
- data() {
126
- return {}
143
+ isStriked: {
144
+ required: false,
145
+ default: false
127
146
  }
147
+ },
148
+ data() {
149
+ return {}
128
150
  }
129
- </script>
151
+ }
152
+ </script>