@eturnity/eturnity_reusable_components 1.2.0-beta.0 → 1.2.0-beta.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.
package/package.json
CHANGED
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
:class="{ visible: isOpen, hidden: !isOpen }"
|
|
5
5
|
@click.native="onOutsideClose()"
|
|
6
6
|
:backdrop="backdrop"
|
|
7
|
+
:fullwidthSpinner="fullwidthSpinner"
|
|
7
8
|
>
|
|
8
9
|
<modal-container @click.stop>
|
|
9
|
-
<spinner v-if="isLoading" size="50px" :fullWidth="
|
|
10
|
+
<spinner v-if="isLoading" size="50px" :fullWidth="fullwidthSpinner" />
|
|
10
11
|
<content-container :visible="!isLoading">
|
|
11
12
|
<slot />
|
|
12
13
|
</content-container>
|
|
@@ -33,7 +34,7 @@ import Spinner from '../../spinner'
|
|
|
33
34
|
|
|
34
35
|
const contentAttrs = { visible: Boolean }
|
|
35
36
|
const ContentContainer = styled('div', contentAttrs)`
|
|
36
|
-
visibility: ${(props) => (props.visible ? '
|
|
37
|
+
visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
|
|
37
38
|
`
|
|
38
39
|
|
|
39
40
|
const pageAttrs = { isOpen: Boolean, backdrop: String }
|
|
@@ -110,7 +111,7 @@ export default {
|
|
|
110
111
|
ModalContainer,
|
|
111
112
|
CloseButton,
|
|
112
113
|
Spinner,
|
|
113
|
-
ContentContainer
|
|
114
|
+
ContentContainer
|
|
114
115
|
},
|
|
115
116
|
props: {
|
|
116
117
|
isOpen: {
|
|
@@ -127,12 +128,16 @@ export default {
|
|
|
127
128
|
},
|
|
128
129
|
hideClose: {
|
|
129
130
|
required: false,
|
|
130
|
-
default: false
|
|
131
|
+
default: false
|
|
131
132
|
},
|
|
132
133
|
backdrop: {
|
|
133
134
|
required: false,
|
|
134
|
-
default: 'white'
|
|
135
|
+
default: 'white'
|
|
135
136
|
},
|
|
137
|
+
fullwidthSpinner: {
|
|
138
|
+
required: false,
|
|
139
|
+
default: true
|
|
140
|
+
}
|
|
136
141
|
},
|
|
137
142
|
methods: {
|
|
138
143
|
onCloseModal() {
|
|
@@ -151,4 +156,4 @@ export default {
|
|
|
151
156
|
}
|
|
152
157
|
}
|
|
153
158
|
}
|
|
154
|
-
</script>
|
|
159
|
+
</script>
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<script>
|
|
19
19
|
// import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
|
|
20
20
|
// <spinner size="30px" />
|
|
21
|
-
import styled from
|
|
21
|
+
import styled from 'vue-styled-components'
|
|
22
22
|
|
|
23
23
|
const SpinnerContainer = styled.div`
|
|
24
24
|
position: fixed;
|
|
@@ -37,29 +37,32 @@ const Container = styled.div`
|
|
|
37
37
|
display: grid;
|
|
38
38
|
align-items: center;
|
|
39
39
|
justify-items: center;
|
|
40
|
+
position: absolute;
|
|
41
|
+
width: 100%;
|
|
42
|
+
height: 100%;
|
|
40
43
|
`
|
|
41
44
|
|
|
42
45
|
const spinnerAttrs = { size: String }
|
|
43
|
-
const SpinnerWrapper = styled(
|
|
44
|
-
width: ${(props) => (props.size ? props.size :
|
|
46
|
+
const SpinnerWrapper = styled('img', spinnerAttrs)`
|
|
47
|
+
width: ${(props) => (props.size ? props.size : '60px')};
|
|
45
48
|
`
|
|
46
49
|
|
|
47
50
|
export default {
|
|
48
|
-
name:
|
|
51
|
+
name: 'spinner',
|
|
49
52
|
components: {
|
|
50
53
|
Container,
|
|
51
54
|
SpinnerWrapper,
|
|
52
|
-
SpinnerContainer
|
|
55
|
+
SpinnerContainer
|
|
53
56
|
},
|
|
54
57
|
props: {
|
|
55
58
|
fullWidth: {
|
|
56
59
|
required: false,
|
|
57
|
-
default: false
|
|
60
|
+
default: false
|
|
58
61
|
},
|
|
59
62
|
size: {
|
|
60
63
|
required: false,
|
|
61
|
-
default: null
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
+
default: null
|
|
65
|
+
}
|
|
66
|
+
}
|
|
64
67
|
}
|
|
65
|
-
</script>
|
|
68
|
+
</script>
|