@eturnity/eturnity_reusable_components 7.35.1 → 7.35.2-EPDM-11386.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
CHANGED
package/src/App.vue
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<ThemeProvider :style="{ height: '100%' }" :theme="getTheme()"
|
|
3
|
-
<RouterView />
|
|
4
|
-
</ThemeProvider>
|
|
2
|
+
<ThemeProvider :style="{ height: '100%' }" :theme="getTheme()" />
|
|
5
3
|
</template>
|
|
6
4
|
|
|
7
5
|
<script>
|
|
8
6
|
import { ThemeProvider } from 'vue3-styled-components'
|
|
9
7
|
import theme from './assets/theme'
|
|
10
|
-
|
|
11
8
|
export default {
|
|
12
9
|
name: 'App',
|
|
13
10
|
components: {
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="12 12 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 13L27 16.8175L26.0477 18.4379L20 15.1397L13.9523 18.4379L13 16.8175L20 13Z" fill="#263238"/>
|
|
3
|
+
<path d="M17.1006 19.1906L20.0001 17.6078L22.8996 19.1906" stroke="#263238" stroke-width="2"/>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 21.5621L22.6508 23.0078L21.6985 24.6282L20 23.7019L18.3015 24.6282L17.3492 23.0078L20 21.5621ZM16.1269 25.8141L13.9523 27L13 25.3797L15.1746 24.1937L16.1269 25.8141ZM26.0477 27L23.8731 25.8141L24.8254 24.1937L27 25.3797L26.0477 27Z" fill="#263238"/>
|
|
5
|
+
<path d="M20.9662 22.9146H19.0332L19.0332 18.2928H20.9662L20.9662 22.9146Z" fill="#263238"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
3
|
+
<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
4
|
+
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
5
|
+
<g id="copy" fill="none" transform="translate(85.333333, 42.666667)">
|
|
6
|
+
<path d="M341.333333,85.3333333 L341.333333,405.333333 L85.3333333,405.333333 L85.3333333,85.3333333 L341.333333,85.3333333 Z M298.666667,128 L128,128 L128,362.666667 L298.666667,362.666667 L298.666667,128 Z M234.666667,7.10542736e-15 L234.666667,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 L1.42108547e-14,298.666667 L1.42108547e-14,7.10542736e-15 L234.666667,7.10542736e-15 Z">
|
|
7
|
+
</path>
|
|
8
|
+
</g>
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
2
|
+
viewBox="0 0 512 512" xml:space="preserve">
|
|
3
|
+
<path d="M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M224,320
|
|
4
|
+
c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z M352,320
|
|
5
|
+
c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z"/>
|
|
6
|
+
</svg>
|
package/src/assets/theme.js
CHANGED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Container>
|
|
3
|
+
<RoundedTabLeft
|
|
4
|
+
:background-color="backgroundColor"
|
|
5
|
+
:border-radius="borderRadius"
|
|
6
|
+
/>
|
|
7
|
+
<Tab
|
|
8
|
+
:background-color="backgroundColor"
|
|
9
|
+
:border-radius="borderRadius"
|
|
10
|
+
:height="height"
|
|
11
|
+
:width="width"
|
|
12
|
+
>
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</Tab>
|
|
15
|
+
<RoundedTabRight
|
|
16
|
+
:background-color="backgroundColor"
|
|
17
|
+
:border-radius="borderRadius"
|
|
18
|
+
/>
|
|
19
|
+
</Container>
|
|
20
|
+
</template>
|
|
21
|
+
<script>
|
|
22
|
+
import styled from 'vue3-styled-components'
|
|
23
|
+
|
|
24
|
+
const Container = styled.div`
|
|
25
|
+
position: relative;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
`
|
|
30
|
+
const RoundedTabLeft = styled('div', {
|
|
31
|
+
backgroundColor: String,
|
|
32
|
+
borderRadius: String,
|
|
33
|
+
})`
|
|
34
|
+
position:absolute;
|
|
35
|
+
bottom:0;
|
|
36
|
+
left:-${(prop) => prop.borderRadius}
|
|
37
|
+
background-color: ${(prop) => prop.backgroundColor};
|
|
38
|
+
width: ${(prop) => prop.borderRadius};
|
|
39
|
+
height: ${(prop) => prop.borderRadius};
|
|
40
|
+
-webkit-mask-image: radial-gradient(
|
|
41
|
+
circle at top left,
|
|
42
|
+
transparent 71%,
|
|
43
|
+
black 71%
|
|
44
|
+
);
|
|
45
|
+
`
|
|
46
|
+
const RoundedTabRight = styled('div', {
|
|
47
|
+
backgroundColor: String,
|
|
48
|
+
borderRadius: String,
|
|
49
|
+
})`
|
|
50
|
+
position:absolute;
|
|
51
|
+
bottom:0;
|
|
52
|
+
right:-${(prop) => prop.borderRadius}
|
|
53
|
+
background-color: ${(prop) => prop.backgroundColor};
|
|
54
|
+
width: ${(prop) => prop.borderRadius};
|
|
55
|
+
height: ${(prop) => prop.borderRadius};
|
|
56
|
+
-webkit-mask-image: radial-gradient(
|
|
57
|
+
circle at top right,
|
|
58
|
+
transparent 71%,
|
|
59
|
+
black 71%
|
|
60
|
+
);`
|
|
61
|
+
const Tab = styled('div', {
|
|
62
|
+
width: String,
|
|
63
|
+
height: String,
|
|
64
|
+
backgroundColor: String,
|
|
65
|
+
borderRadius: String,
|
|
66
|
+
})`
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
background-color: ${(prop) => prop.backgroundColor};
|
|
71
|
+
width: ${(prop) => prop.width};
|
|
72
|
+
height: ${(prop) => prop.height};
|
|
73
|
+
border-radius: ${(prop) => prop.borderRadius} ${(prop) => prop.borderRadius}
|
|
74
|
+
0 0;
|
|
75
|
+
`
|
|
76
|
+
export default {
|
|
77
|
+
name: 'SelectedOptions',
|
|
78
|
+
components: {
|
|
79
|
+
Container,
|
|
80
|
+
Tab,
|
|
81
|
+
RoundedTabLeft,
|
|
82
|
+
RoundedTabRight,
|
|
83
|
+
},
|
|
84
|
+
props: {
|
|
85
|
+
height: {
|
|
86
|
+
required: false,
|
|
87
|
+
default: '40px',
|
|
88
|
+
},
|
|
89
|
+
width: {
|
|
90
|
+
required: false,
|
|
91
|
+
default: '200px',
|
|
92
|
+
},
|
|
93
|
+
backgroundColor: {
|
|
94
|
+
required: false,
|
|
95
|
+
default: 'blue',
|
|
96
|
+
},
|
|
97
|
+
borderRadius: {
|
|
98
|
+
required: false,
|
|
99
|
+
default: '20px',
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
}
|
|
103
|
+
</script>
|