@eturnity/eturnity_reusable_components 6.37.0-3d-qa-6.38.0 → 6.37.0-3d-qa-6.38.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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/App.vue +11 -2
  3. package/src/assets/svgIcons/opacity.svg +1 -1
  4. package/src/components/icon/index.vue +28 -1
  5. package/src/components/iconWrapper/index.vue +16 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "6.37.0-3d-qa-6.38.0",
3
+ "version": "6.37.0-3d-qa-6.38.1",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
package/src/App.vue CHANGED
@@ -60,7 +60,14 @@
60
60
  fontColor="black"
61
61
  :disabled="false"
62
62
  />
63
-
63
+ <icon
64
+ name="opacity"
65
+ color="red"
66
+ hoveredColor="blue"
67
+ size="60px"
68
+ cursor="default"
69
+ isStriked = "true"
70
+ />
64
71
  <Select
65
72
  :value="value"
66
73
  selectWidth="100%"
@@ -104,6 +111,7 @@ import Option from '@/components/inputs/select/option'
104
111
  import iconCollection from '@/components/icon/iconCollection'
105
112
  import dropdownComponent from '@/components/dropdown'
106
113
  import videoThumbnail from '@/components/videoThumbnail'
114
+ import icon from '@/components/icon'
107
115
  // import TableDropdown from "@/components/tableDropdown"
108
116
 
109
117
  const PageContainer = styled.div`
@@ -127,7 +135,8 @@ export default {
127
135
  SwitchField,
128
136
  iconCollection,
129
137
  dropdownComponent,
130
- videoThumbnail
138
+ videoThumbnail,
139
+ icon
131
140
  },
132
141
  data() {
133
142
  return {
package/src/assets/svgIcons/opacity.svg CHANGED
@@ -1 +1 @@
1
- <svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z" /></svg>
1
+ <svg class="svg-icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z" /></svg>
package/src/components/icon/index.vue CHANGED
@@ -9,6 +9,7 @@
9
9
  require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
10
10
  "
11
11
  ></icon-image>
12
+ <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
12
13
  </Wrapper>
13
14
  </template>
14
15
 
@@ -21,6 +22,7 @@
21
22
  // hoveredColor="blue"
22
23
  // size="60px" by default, this is 30px
23
24
  // cursor="default"
25
+ // isStriked = "true"
24
26
  // />
25
27
 
26
28
  import styled from 'vue-styled-components'
@@ -28,6 +30,7 @@ import styled from 'vue-styled-components'
28
30
  const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
29
31
  const Wrapper = styled('div', wrapperAttrs)`
30
32
  display: flex;
33
+ position:relative
31
34
  align-content: center;
32
35
  justify-content: center;
33
36
  width: ${(props) => props.size};
@@ -37,6 +40,22 @@ const Wrapper = styled('div', wrapperAttrs)`
37
40
  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
38
41
  line-height: 0;
39
42
  `
43
+ const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
44
+ const strikedLine = styled('div', strikedAttrs)`
45
+ display: flex;
46
+ position: absolute;
47
+ bottom:0;
48
+ left:0;
49
+ align-content: center;
50
+ justify-content: center;
51
+ width: 143%;
52
+ height:8%;
53
+ background-color: ${(props)=>props.theme.colors[props.color] || props.color};
54
+ min-height: 0;
55
+ line-height: 0;
56
+ transform-origin: 0% 100%;
57
+ transform: rotate(-45deg);
58
+ `
40
59
  const IconImageProps = { color: String, hoveredColor: String, size: String }
41
60
  const IconImage = styled('div', IconImageProps)`
42
61
  svg {
@@ -50,13 +69,17 @@ const IconImage = styled('div', IconImageProps)`
50
69
  &:hover > svg path {
51
70
  ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
52
71
  }
72
+ &:hover + div {
73
+ background-color: ${(props)=>props.hoveredColor};
74
+ }
53
75
  `
54
76
 
55
77
  export default {
56
78
  name: 'icon',
57
79
  components: {
58
80
  IconImage,
59
- Wrapper
81
+ Wrapper,
82
+ strikedLine
60
83
  },
61
84
  props: {
62
85
  disabled: {
@@ -79,6 +102,10 @@ export default {
79
102
  cursor: {
80
103
  required: false,
81
104
  default: null
105
+ },
106
+ isStriked: {
107
+ required: false,
108
+ default: false
82
109
  }
83
110
  },
84
111
  data() {
package/src/components/iconWrapper/index.vue CHANGED
@@ -4,6 +4,8 @@
4
4
  :size="size"
5
5
  :backgroundColor="backgroundColor"
6
6
  :borderRadius="borderRadius"
7
+ :hasBorder="hasBorder"
8
+ :color="iconColor"
7
9
  :hoveredBackgroundColor="hoveredBackgroundColor"
8
10
  :isHovered="isHovered"
9
11
  >
@@ -11,7 +13,10 @@
11
13
  :size="iconSize"
12
14
  :name="name"
13
15
  :color="iconColor"
14
- :hoveredColor="hoveredIconColor" />
16
+ :hoveredColor="hoveredIconColor"
17
+ :isStriked="isStriked"
18
+ />
19
+
15
20
  <caret v-if="hasCaret">
16
21
  <iconWrapper :disabled="disabled"
17
22
  size="10px"
@@ -36,12 +41,13 @@
36
41
 
37
42
  import styled from 'vue-styled-components'
38
43
  import icon from '../icon'
39
- const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
44
+ const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
40
45
  const Wrapper = styled('div', wrapperAttrs)`
41
46
  position:relative;
42
47
  display: inline-flex;
43
48
  width: ${(props) => props.size};
44
49
  height: ${(props) => props.size};
50
+ border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
45
51
  justify-content:center;
46
52
  align-items:center;
47
53
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
@@ -84,6 +90,9 @@
84
90
  backgroundColor: {
85
91
  required: false,
86
92
  },
93
+ hasBorder: {
94
+ required: false,
95
+ },
87
96
  hoveredBackgroundColor: {
88
97
  required: false,
89
98
  default:"transparentWhite1"
@@ -102,11 +111,15 @@
102
111
  },
103
112
  borderRadius:{
104
113
  required:false,
105
- default:'6px'
114
+ default:'4px'
106
115
  },
107
116
  isHovered:{
108
117
  required:false,
109
118
  default:false
119
+ },
120
+ isStriked:{
121
+ required:false,
122
+ default:false
110
123
  }
111
124
  },
112
125
  data() {