@eturnity/eturnity_reusable_components 6.37.0-EPDM-2198.0 → 6.38.0-EDPM-8545.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.
- package/package.json +2 -2
- package/src/App.vue +11 -2
- package/src/assets/svgIcons/opacity.svg +1 -1
- package/src/components/buttons/mainButton/index.vue +7 -1
- package/src/components/icon/index.vue +29 -8
- package/src/components/iconWrapper/index.vue +16 -3
- package/src/assets/svgIcons/charger_icon_white.svg +0 -44
- package/src/assets/svgIcons/energy_meter.svg +0 -12
- 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.
|
3
|
+
"version": "6.38.0-EDPM-8545.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 {
|
@@ -1 +1 @@
|
|
1
|
-
<svg class="svg-icon" style="
|
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>
|
@@ -5,6 +5,7 @@
|
|
5
5
|
:minWidth="minWidth"
|
6
6
|
:isDisabled="isDisabled"
|
7
7
|
:customColor="customColor"
|
8
|
+
:wrap="wrap"
|
8
9
|
>
|
9
10
|
{{ text }}
|
10
11
|
</button-container>
|
@@ -26,7 +27,7 @@ import styled from "vue-styled-components"
|
|
26
27
|
|
27
28
|
const PageContainer = styled.div``
|
28
29
|
|
29
|
-
const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
|
30
|
+
const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, wrap: Boolean }
|
30
31
|
const ButtonContainer = styled("div", ButtonAttrs)`
|
31
32
|
padding: 7px 15px;
|
32
33
|
font-size: 13px;
|
@@ -48,6 +49,7 @@ const ButtonContainer = styled("div", ButtonAttrs)`
|
|
48
49
|
cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
|
49
50
|
user-select: none;
|
50
51
|
${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
|
52
|
+
${(props) => (props.wrap ? `white-space: nowrap;` : '')};
|
51
53
|
|
52
54
|
&:hover {
|
53
55
|
opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
|
@@ -80,6 +82,10 @@ export default {
|
|
80
82
|
required: false,
|
81
83
|
default: null,
|
82
84
|
},
|
85
|
+
wrap: {
|
86
|
+
required: false,
|
87
|
+
default: false
|
88
|
+
},
|
83
89
|
minWidth: {
|
84
90
|
required: false,
|
85
91
|
default: null
|
@@ -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
|
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() {
|
@@ -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:'
|
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() {
|
@@ -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>
|
@@ -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>
|
@@ -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>
|