@eturnity/eturnity_reusable_components 6.43.4 → 6.43.6

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 +2 -2
  2. package/src/components/iconWrapper/index.vue +57 -71
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "6.43.4",
3
+ "version": "6.43.6",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
@@ -18,7 +18,7 @@
18
18
  "vue-styled-components": "1.6.0",
19
19
  "vue2-datepicker": "3.11.1",
20
20
  "vuedraggable": "2.24.3",
21
- "core-js": "3.31.1"
21
+ "core-js": "^3.31.1"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@storybook/addon-actions": "6.2.8",
package/src/components/iconWrapper/index.vue CHANGED
@@ -8,77 +8,63 @@
8
8
  :color="iconColor"
9
9
  :hoveredBackgroundColor="hoveredBackgroundColor"
10
10
  :isHovered="isHovered"
11
- >
12
- <icon
13
- :disabled="disabled"
14
- :size="iconSize"
15
- :name="name"
16
- :color="iconColor"
17
- :hoveredColor="hoveredIconColor"
18
- />
19
- <caret v-if="hasCaret">
20
- <iconWrapper
21
- :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 = {
45
- isHovered: Boolean,
46
- borderRadius: String,
47
- disabled: Boolean,
48
- size: String,
49
- backgroundColor: String,
50
- hoveredBackgroundColor: String
51
- }
52
- const Wrapper = styled('div', wrapperAttrs)`
53
- position: relative;
54
- display: inline-flex;
55
- width: ${(props) => props.size};
56
- height: ${(props) => props.size};
57
- justify-content: center;
58
- align-items: center;
59
- cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
60
- background-color: ${(props) =>
61
- props.theme.colors[props.backgroundColor] || props.backgroundColor};
62
- border-radius: ${(props) => props.borderRadius};
63
- ${(props) =>
64
- props.isHovered
65
- ? 'background-color:' +
66
- props.theme.colors[props.hoveredBackgroundColor] ||
67
- props.hoveredBackgroundColor
68
- : ''};
69
- &:hover {
70
- background-color: ${(props) =>
71
- props.theme.colors[props.hoveredBackgroundColor] ||
72
- props.hoveredBackgroundColor};
73
- }
74
- `
75
- const caret = styled.div`
76
- position: absolute;
77
- bottom: 3px;
78
- right: 2px;
79
- height: 10px;
80
- `
81
-
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
+ `
67
+
82
68
  export default {
83
69
  name: 'iconWrapper',
84
70
  components: {