@eturnity/eturnity_reusable_components 6.33.0 → 6.33.1-EDPM-8208.0

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/flatten.svg +11 -11
  4. package/src/assets/svgIcons/opacity.svg +1 -1
  5. package/src/components/icon/index.vue +28 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "6.33.0",
3
+ "version": "6.33.1-EDPM-8208.0",
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/flatten.svg CHANGED
@@ -1,12 +1,12 @@
1
1
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <rect x="2.98828" y="6" width="3" height="1.6" transform="rotate(90 2.98828 6)" fill="white"/>
3
- <path d="M2.21317 10.8279L4.35603 8.32892H0.0703125L2.21317 10.8279Z" fill="white"/>
4
- <path fill-rule="evenodd" clip-rule="evenodd" d="M2.18945 6C2.74174 6 3.18945 5.55228 3.18945 5C3.18945 4.44772 2.74174 4 2.18945 4C1.63717 4 1.18945 4.44772 1.18945 5C1.18945 5.55228 1.63717 6 2.18945 6ZM2.18945 7C3.29402 7 4.18945 6.10457 4.18945 5C4.18945 3.89543 3.29402 3 2.18945 3C1.08488 3 0.189453 3.89543 0.189453 5C0.189453 6.10457 1.08488 7 2.18945 7Z" fill="white"/>
5
- <rect x="7.77344" y="3" width="6" height="1.6" transform="rotate(90 7.77344 3)" fill="white"/>
6
- <path d="M6.99833 10.8279L9.14118 8.32892H4.85547L6.99833 10.8279Z" fill="white"/>
7
- <path fill-rule="evenodd" clip-rule="evenodd" d="M6.97461 3C7.52689 3 7.97461 2.55228 7.97461 2C7.97461 1.44772 7.52689 1 6.97461 1C6.42232 1 5.97461 1.44772 5.97461 2C5.97461 2.55228 6.42232 3 6.97461 3ZM6.97461 4C8.07918 4 8.97461 3.10457 8.97461 2C8.97461 0.895431 8.07918 0 6.97461 0C5.87004 0 4.97461 0.895431 4.97461 2C4.97461 3.10457 5.87004 4 6.97461 4Z" fill="white"/>
8
- <rect x="12.5605" y="5" width="4" height="1.6" transform="rotate(90 12.5605 5)" fill="white"/>
9
- <path d="M11.7854 10.8279L13.9283 8.32892H9.64258L11.7854 10.8279Z" fill="white"/>
10
- <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7617 5C12.314 5 12.7617 4.55228 12.7617 4C12.7617 3.44772 12.314 3 11.7617 3C11.2094 3 10.7617 3.44772 10.7617 4C10.7617 4.55228 11.2094 5 11.7617 5ZM11.7617 6C12.8663 6 13.7617 5.10457 13.7617 4C13.7617 2.89543 12.8663 2 11.7617 2C10.6571 2 9.76172 2.89543 9.76172 4C9.76172 5.10457 10.6571 6 11.7617 6Z" fill="white"/>
11
- <rect x="14" y="14" width="14" height="1.6" transform="rotate(-180 14 14)" fill="white"/>
12
- </svg>
2
+ <path transform="rotate(90 2.98828 6)" fill="white" d="M2.9883 6h3v1.6H2.9883Z" />
3
+ <path d="M2.21317 10.8279L4.35603 8.32892H0.0703125L2.21317 10.8279Z" fill="white" />
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M2.18945 6C2.74174 6 3.18945 5.55228 3.18945 5C3.18945 4.44772 2.74174 4 2.18945 4C1.63717 4 1.18945 4.44772 1.18945 5C1.18945 5.55228 1.63717 6 2.18945 6ZM2.18945 7C3.29402 7 4.18945 6.10457 4.18945 5C4.18945 3.89543 3.29402 3 2.18945 3C1.08488 3 0.189453 3.89543 0.189453 5C0.189453 6.10457 1.08488 7 2.18945 7Z" fill="white" />
5
+ <path transform="rotate(90 7.77344 3)" fill="white" d="M7.7734 3h6v1.6H7.7734Z" />
6
+ <path d="M6.99833 10.8279L9.14118 8.32892H4.85547L6.99833 10.8279Z" fill="white" />
7
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M6.97461 3C7.52689 3 7.97461 2.55228 7.97461 2C7.97461 1.44772 7.52689 1 6.97461 1C6.42232 1 5.97461 1.44772 5.97461 2C5.97461 2.55228 6.42232 3 6.97461 3ZM6.97461 4C8.07918 4 8.97461 3.10457 8.97461 2C8.97461 0.895431 8.07918 0 6.97461 0C5.87004 0 4.97461 0.895431 4.97461 2C4.97461 3.10457 5.87004 4 6.97461 4Z" fill="white" />
8
+ <path transform="rotate(90 12.5605 5)" fill="white" d="M12.5605 5h4v1.6H12.5605Z" />
9
+ <path d="M11.7854 10.8279L13.9283 8.32892H9.64258L11.7854 10.8279Z" fill="white" />
10
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7617 5C12.314 5 12.7617 4.55228 12.7617 4C12.7617 3.44772 12.314 3 11.7617 3C11.2094 3 10.7617 3.44772 10.7617 4C10.7617 4.55228 11.2094 5 11.7617 5ZM11.7617 6C12.8663 6 13.7617 5.10457 13.7617 4C13.7617 2.89543 12.8663 2 11.7617 2C10.6571 2 9.76172 2.89543 9.76172 4C9.76172 5.10457 10.6571 6 11.7617 6Z" fill="white" />
11
+ <path transform="rotate(-180 14 14)" fill="white" d="M14 14h14v1.6H14Z" />
12
+ </svg>
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() {