@eturnity/eturnity_reusable_components 6.37.0-EPDM-2198.0 → 6.38.0-EPDM-8508.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 (9) hide show
  1. package/package.json +2 -2
  2. package/src/App.vue +11 -2
  3. package/src/assets/svgIcons/opacity.svg +1 -1
  4. package/src/components/icon/index.vue +29 -8
  5. package/src/components/iconWrapper/index.vue +16 -3
  6. package/src/helpers/numberConverter.js +2 -1
  7. package/src/assets/svgIcons/charger_icon_white.svg +0 -44
  8. package/src/assets/svgIcons/energy_meter.svg +0 -12
  9. package/src/components/card/index.vue +0 -95
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "6.37.0-EPDM-2198.0",
3
+ "version": "6.38.0-EPDM-8508.0",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
@@ -60,4 +60,4 @@
60
60
  "author": "Aaron Enser",
61
61
  "license": "ISC",
62
62
  "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
63
- }
63
+ }
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
@@ -5,11 +5,11 @@
5
5
  :size="size"
6
6
  :color="color"
7
7
  :hoveredColor="hoveredColor"
8
- :backgroundColor="backgroundColor"
9
8
  v-html="
10
9
  require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
11
10
  "
12
11
  ></icon-image>
12
+ <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
13
13
  </Wrapper>
14
14
  </template>
15
15
 
@@ -22,6 +22,7 @@
22
22
  // hoveredColor="blue"
23
23
  // size="60px" by default, this is 30px
24
24
  // cursor="default"
25
+ // isStriked = "true"
25
26
  // />
26
27
 
27
28
  import styled from 'vue-styled-components'
@@ -29,6 +30,7 @@ import styled from 'vue-styled-components'
29
30
  const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
30
31
  const Wrapper = styled('div', wrapperAttrs)`
31
32
  display: flex;
33
+ position:relative
32
34
  align-content: center;
33
35
  justify-content: center;
34
36
  width: ${(props) => props.size};
@@ -38,13 +40,27 @@ const Wrapper = styled('div', wrapperAttrs)`
38
40
  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
39
41
  line-height: 0;
40
42
  `
41
- const IconImageProps = { color: String, hoveredColor: String, size: String, backgroundColor: String}
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
+ `
59
+ const IconImageProps = { color: String, hoveredColor: String, size: String }
42
60
  const IconImage = styled('div', IconImageProps)`
43
61
  svg {
44
62
  width: 100%;
45
63
  height: 100%;
46
- background-color: ${(props) => props.backgroundColor};
47
- padding: ${(props) => props.backgroundColor ? '3px' : '0'};
48
64
  }
49
65
  svg path {
50
66
  ${(props) =>
@@ -53,13 +69,17 @@ const IconImage = styled('div', IconImageProps)`
53
69
  &:hover > svg path {
54
70
  ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
55
71
  }
72
+ &:hover + div {
73
+ background-color: ${(props)=>props.hoveredColor};
74
+ }
56
75
  `
57
76
 
58
77
  export default {
59
78
  name: 'icon',
60
79
  components: {
61
80
  IconImage,
62
- Wrapper
81
+ Wrapper,
82
+ strikedLine
63
83
  },
64
84
  props: {
65
85
  disabled: {
@@ -72,9 +92,6 @@ export default {
72
92
  color: {
73
93
  required: false
74
94
  },
75
- backgroundColor: {
76
- required: false
77
- },
78
95
  hoveredColor: {
79
96
  required: false
80
97
  },
@@ -85,6 +102,10 @@ export default {
85
102
  cursor: {
86
103
  required: false,
87
104
  default: null
105
+ },
106
+ isStriked: {
107
+ required: false,
108
+ default: false
88
109
  }
89
110
  },
90
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() {
package/src/helpers/numberConverter.js CHANGED
@@ -9,7 +9,7 @@ export const stringToNumber = ({
9
9
  }
10
10
  let newVal = value.toString()
11
11
  const selectedLang = localStorage.getItem('lang')
12
- // The first replace will replace not allowed characters with a blank
12
+ // The first replace will replace not allowed characters with a blank
13
13
  if (
14
14
  selectedLang === 'de-DE' ||
15
15
  selectedLang === 'de-de' ||
@@ -21,6 +21,7 @@ export const stringToNumber = ({
21
21
  selectedLang === 'es-es' ||
22
22
  selectedLang === 'de' ||
23
23
  selectedLang === 'it' ||
24
+ selectedLang === 'it-it' ||
24
25
  selectedLang === 'nl-nl' ||
25
26
  selectedLang === 'nl-be'
26
27
  ) {
package/src/assets/svgIcons/charger_icon_white.svg DELETED
@@ -1,44 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
5
- <style type="text/css">
6
- .st0{display:none;}
7
- .st1{display:inline;}
8
- .st2{fill:#FFFFFF;}
9
- </style>
10
- <g class="st0">
11
- <g class="st1">
12
- <rect x="-312.013" y="-258.339" class="st2" width="2" height="16"/>
13
- </g>
14
- <g class="st1">
15
- <polygon class="st2" points="-303.346,-242.339 -303.346,-248.339 -312.013,-248.426 -312.013,-242.339 "/>
16
- </g>
17
- <g class="st1">
18
- <rect x="-311.673" y="-258.339" class="st2" width="8" height="2"/>
19
- </g>
20
- <g class="st1">
21
- <path class="st2" d="M-294.833-255.839v-2.5h-7v2.5c0,1.933,1.567,3.5,3.5,3.5l0,0
22
- C-296.4-252.339-294.833-253.906-294.833-255.839z"/>
23
- </g>
24
- <g class="st1">
25
- <rect x="-305.346" y="-258.339" class="st2" width="2" height="16"/>
26
- </g>
27
- <g class="st1">
28
- <rect x="-299.333" y="-258.339" class="st2" width="2" height="12"/>
29
- </g>
30
- <g class="st1">
31
- <rect x="-303.346" y="-248.339" class="st2" width="6" height="2"/>
32
- </g>
33
- <g class="st1">
34
- <rect x="-301.346" y="-260.339" class="st2" width="2" height="2"/>
35
- </g>
36
- <g class="st1">
37
- <rect x="-297.346" y="-260.339" class="st2" width="2" height="2"/>
38
- </g>
39
- </g>
40
- <g>
41
- <path class="st2" d="M15.777,8.974h3v-2h-3V6h-1c-1.857,0-3.404,1.272-3.855,2.987H8.889V3V1h-2H3.223h-2v2v14v2h2h5.667v-1v-1
42
- v-6.013h2.025C11.356,12.716,12.911,14,14.777,14h1v-1.026h3v-2h-3V8.987V8.974z M6.889,17H3.223V3h3.667v5.987v2V17z"/>
43
- </g>
44
- </svg>
package/src/assets/svgIcons/energy_meter.svg DELETED
@@ -1,12 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
- <!-- Creator: CorelDRAW 2021 (64-Bit) -->
4
- <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="462px" height="512px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
5
- viewBox="0 0 462 511.93"
6
- xmlns:xlink="http://www.w3.org/1999/xlink"
7
- xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
8
- <g id="Layer_x0020_1">
9
- <metadata id="CorelCorpID_0Corel-Layer"/>
10
- <path fill="white" d="M22.37 0l417.26 0c12.31,0 22.37,10.06 22.37,22.37l0 400.73c0,12.3 -10.06,22.37 -22.37,22.37l-32.27 0 0 19.01c0,6.2 -5.06,11.27 -11.26,11.27l-25.1 0 0 32.03c0,2.28 -1.87,4.15 -4.15,4.15l-32.33 0c-4.56,0 -8.29,-3.73 -8.29,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -25.76 0c-6.2,0 -11.26,-5.07 -11.26,-11.27l0 -19.01 -32.27 0c-12.31,0 -22.37,-10.07 -22.37,-22.37l0 -400.73c0,-12.31 10.06,-22.37 22.37,-22.37zm61.36 103.62l294.54 0c3.34,0 6.38,1.38 8.57,3.57 2.19,2.19 3.56,5.23 3.56,8.57l0 53.77c0,3.33 -1.37,6.37 -3.56,8.56 -2.2,2.2 -5.23,3.57 -8.57,3.57l-294.54 0c-3.34,0 -6.38,-1.37 -8.57,-3.57 -2.19,-2.19 -3.56,-5.23 -3.56,-8.56l0 -53.77c0,-3.34 1.36,-6.37 3.56,-8.57 2.2,-2.21 5.23,-3.57 8.57,-3.57zm159 210.98l15.79 0c2.29,0.01 4.15,1.87 4.15,4.16 0,0.83 -0.25,1.63 -0.7,2.32l-37.64 64.27c-0.75,1.23 -2.09,1.98 -3.53,1.98 -2.29,0 -4.15,-1.86 -4.15,-4.14 0,-0.28 0.02,-0.55 0.08,-0.81l5.55 -39.45 -18.73 0.32c-0.02,0 -0.05,0 -0.08,0 -2.25,0 -4.09,-1.81 -4.13,-4.06 0,-0.01 0,-0.01 0,-0.02 0,-0.75 0.2,-1.5 0.58,-2.15l37.06 -64.26c0.75,-1.24 2.1,-2 3.55,-2 2.29,0 4.15,1.85 4.15,4.15 0,0.18 -0.02,0.36 -0.04,0.54l-1.91 39.15zm151.34 -255.93c5.79,0 10.49,4.95 10.49,11.06 0,6.1 -4.7,11.05 -10.49,11.05 -5.8,0 -10.5,-4.95 -10.5,-11.05 0,-6.11 4.7,-11.06 10.5,-11.06zm-326.13 0c5.8,0 10.5,4.95 10.5,11.06 0,6.1 -4.7,11.05 -10.5,11.05 -5.8,0 -10.5,-4.95 -10.5,-11.05 0,-6.11 4.7,-11.06 10.5,-11.06zm0 307.96c5.8,0 10.5,4.96 10.5,11.06 0,6.11 -4.7,11.06 -10.5,11.06 -5.8,0 -10.5,-4.95 -10.5,-11.06 0,-6.1 4.7,-11.06 10.5,-11.06zm326.13 0c5.79,0 10.49,4.96 10.49,11.06 0,6.11 -4.7,11.06 -10.49,11.06 -5.8,0 -10.5,-4.95 -10.5,-11.06 0,-6.1 4.7,-11.06 10.5,-11.06zm-38.94 -206.03c-3.07,0 -5.53,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.86,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.78,4.44 2.78,7.59l0 14.98c0,3.14 -0.93,5.67 -2.78,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.08,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.34,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.34,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.18,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.12 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.78,-4.45 -2.78,-7.59l0 -14.98c0,-3.15 0.93,-5.67 2.78,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.07,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.34,0.53 0.82,0.79 1.41,0.79zm-63.81 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.54,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.86,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.33 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.16 7.1c-3.08,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.78,-4.45 -2.78,-7.59l0 -14.98c0,-3.15 0.93,-5.67 2.78,-7.59 1.85,-1.92 4.31,-2.88 7.39,-2.88 3.07,0 5.54,0.96 7.39,2.88 1.85,1.92 2.78,4.44 2.78,7.59l0 14.98c0,3.14 -0.93,5.67 -2.78,7.59 -1.85,1.92 -4.32,2.88 -7.39,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.41,-0.79 0.35,-0.53 0.53,-1.22 0.53,-2.08l0 -15.98c0,-0.86 -0.18,-1.56 -0.53,-2.09 -0.34,-0.52 -0.81,-0.79 -1.41,-0.79 -0.6,0 -1.07,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.34,0.53 0.81,0.79 1.41,0.79zm58.85 102.29c-4.25,0 -7.69,-3.45 -7.69,-7.69 0,-4.24 3.44,-7.68 7.69,-7.68l128.88 0c4.25,0 7.69,3.44 7.69,7.68 0,4.24 -3.44,7.69 -7.69,7.69l-128.88 0zm-50.58 -38.85c-4.24,0 -7.69,-3.44 -7.69,-7.68 0,-4.24 3.45,-7.69 7.69,-7.69l230.04 0c4.24,0 7.68,3.45 7.68,7.69 0,4.24 -3.44,7.68 -7.68,7.68l-230.04 0zm212.57 -103.71l0 58.82 49.72 0c0.69,0 1.32,-0.29 1.78,-0.75 0.46,-0.45 0.75,-1.09 0.75,-1.77l0 -53.77c0,-0.69 -0.29,-1.33 -0.75,-1.79 -0.45,-0.45 -1.09,-0.74 -1.78,-0.74l-49.72 0zm-9.61 58.82l0 -58.82 -52.26 0 0 58.82 52.26 0zm-61.87 0l0 -58.82 -52.14 0 0 58.82 52.14 0zm-61.75 0l0 -58.82 -52.3 0 0 58.82 52.3 0zm-61.91 0l0 -58.82 -49.68 0c-0.7,0 -1.33,0.29 -1.79,0.74 -0.45,0.46 -0.74,1.09 -0.74,1.79l0 53.77c0,0.69 0.29,1.32 0.74,1.77 0.46,0.46 1.1,0.75 1.79,0.75l49.68 0zm-74.08 -133.14l343.34 0c12.31,0 22.37,10.07 22.37,22.37l0 324.85c0,12.3 -10.07,22.37 -22.37,22.37l-343.34 0c-12.3,0 -22.37,-10.06 -22.37,-22.37l0 -324.85c0,-12.31 10.06,-22.37 22.37,-22.37z"/>
11
- </g>
12
- </svg>
package/src/components/card/index.vue DELETED
@@ -1,95 +0,0 @@
1
- <template>
2
- <Wrapper
3
- v-show="!isLoading"
4
- :class="viewCardClass"
5
- :width="width"
6
- :minWidth="minWidth"
7
- >
8
- <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
9
- <CardWrapper v-else>
10
- <CardTitle :class="titleClass" >
11
- {{ $gettext(title) }}
12
- <et-popover
13
- v-if="showPopover && popoverText !== ''"
14
- :text="popoverText"
15
- ></et-popover>
16
- </CardTitle>
17
- <slot></slot>
18
- </CardWrapper>
19
- </Wrapper>
20
- </template>
21
-
22
- <script>
23
- import styled from 'vue-styled-components'
24
- import Spinner from '../spinner'
25
-
26
- const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
27
- const Wrapper = styled('div', WrapperProps)`
28
- max-width: ${(props) => props.width};
29
- min-width: ${(props) => props.minWidth};
30
- padding: 20px;
31
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
32
- border-radius: 4px;
33
- background-color: ${props => props.theme.colors.white};
34
- height: 100%;
35
- `
36
-
37
- const CardWrapper = styled('div')`
38
- height: 100%;
39
- width: auto;
40
- `
41
-
42
- const CardTitle = styled('p')`
43
- font-size: 14px;
44
- line-height: 1;
45
- color: ${props => props.theme.colors.black};
46
- font-weight: 700;
47
- margin-bottom: 10px;
48
- `
49
-
50
- export default {
51
- name: 'Card',
52
- props: {
53
- title: {
54
- type: String,
55
- default: ''
56
- },
57
- width: {
58
- type: [Number, String],
59
- required: false,
60
- default: '400px'
61
- },
62
- minWidth: {
63
- type: [Number, String],
64
- required: false,
65
- default: null
66
- },
67
- titleClass: {
68
- type: String,
69
- default: ''
70
- },
71
- showPopover: {
72
- type: Boolean,
73
- default: false
74
- },
75
- viewCardClass: {
76
- type: String,
77
- default: ''
78
- },
79
- popoverText: {
80
- type: String,
81
- default: ''
82
- },
83
- isLoading: {
84
- type: Boolean,
85
- default: false
86
- }
87
- },
88
- components: {
89
- Spinner,
90
- Wrapper,
91
- CardTitle,
92
- CardWrapper,
93
- }
94
- }
95
- </script>