@eturnity/eturnity_reusable_components 6.48.0-EPDM-8599.0 → 6.48.0-EPGM-7260.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
|
@@ -114,7 +114,6 @@ import iconCollection from '@/components/icon/iconCollection'
|
|
|
114
114
|
import dropdownComponent from '@/components/dropdown'
|
|
115
115
|
import videoThumbnail from '@/components/videoThumbnail'
|
|
116
116
|
import icon from '@/components/icon'
|
|
117
|
-
import infoCard from '@/components/infoCard'
|
|
118
117
|
// import TableDropdown from "@/components/tableDropdown"
|
|
119
118
|
|
|
120
119
|
const PageContainer = styled.div`
|
|
@@ -139,8 +138,7 @@ export default {
|
|
|
139
138
|
iconCollection,
|
|
140
139
|
dropdownComponent,
|
|
141
140
|
videoThumbnail,
|
|
142
|
-
icon
|
|
143
|
-
infoCard
|
|
141
|
+
icon
|
|
144
142
|
},
|
|
145
143
|
data() {
|
|
146
144
|
return {
|
|
@@ -10,8 +10,6 @@
|
|
|
10
10
|
v-if="label && labelAlign === 'left'"
|
|
11
11
|
:hasInfoMessage="!!infoTextMessage"
|
|
12
12
|
:colorMode="colorMode"
|
|
13
|
-
:primaryColor="primaryColor"
|
|
14
|
-
:secondaryColor="secondaryColor"
|
|
15
13
|
>
|
|
16
14
|
<label-text :size="size">{{ label }}</label-text>
|
|
17
15
|
<info-text
|
|
@@ -101,12 +99,10 @@ const toggleAttrs = {
|
|
|
101
99
|
fontColor: String,
|
|
102
100
|
disabled: Boolean,
|
|
103
101
|
backgroundColor: String,
|
|
104
|
-
isChecked: Boolean
|
|
105
|
-
secondaryColor: String,
|
|
106
|
-
primaryColor: String,
|
|
102
|
+
isChecked: Boolean
|
|
107
103
|
}
|
|
108
104
|
const LabelText = styled('div', toggleAttrs)`
|
|
109
|
-
color:
|
|
105
|
+
color: white;
|
|
110
106
|
font-size: 13px;
|
|
111
107
|
font-weight: 700;
|
|
112
108
|
`
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<page-container>
|
|
3
|
+
<box-container>
|
|
4
|
+
<selected-container
|
|
5
|
+
>{{ numberSelected }} {{ $gettext('selected') }}</selected-container
|
|
6
|
+
>
|
|
7
|
+
<list-container>
|
|
8
|
+
<list-item
|
|
9
|
+
v-for="item in optionsList"
|
|
10
|
+
:key="item.type"
|
|
11
|
+
:hoverColor="item.hoverColor"
|
|
12
|
+
@click="$emit('on-' + item.type)"
|
|
13
|
+
>
|
|
14
|
+
{{ item.name }}
|
|
15
|
+
</list-item>
|
|
16
|
+
</list-container>
|
|
17
|
+
<icon-container @click="$emit('on-close')">
|
|
18
|
+
<icon
|
|
19
|
+
name="close_for_modals,_tool_tips"
|
|
20
|
+
color="white"
|
|
21
|
+
size="14px"
|
|
22
|
+
cursor="pointer"
|
|
23
|
+
/>
|
|
24
|
+
</icon-container>
|
|
25
|
+
</box-container>
|
|
26
|
+
</page-container>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
|
|
31
|
+
// optionsList = [
|
|
32
|
+
// {
|
|
33
|
+
// type: 'export',
|
|
34
|
+
// name: 'Export'
|
|
35
|
+
// },
|
|
36
|
+
// {
|
|
37
|
+
// type: 'delete',
|
|
38
|
+
// name: 'Delete',
|
|
39
|
+
// hoverColor: 'red' // default is green
|
|
40
|
+
// }
|
|
41
|
+
// ]
|
|
42
|
+
// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
|
|
43
|
+
// <selected-options :optionsList="optionsList" @on-close="onCloseFunction()" @on-export="function()" @on-delete="function()" />
|
|
44
|
+
import styled from 'vue-styled-components'
|
|
45
|
+
import Icon from '../icon'
|
|
46
|
+
|
|
47
|
+
const PageContainer = styled.div`
|
|
48
|
+
position: fixed;
|
|
49
|
+
bottom: 30px;
|
|
50
|
+
left: 50%;
|
|
51
|
+
transform: translateX(-50%);
|
|
52
|
+
`
|
|
53
|
+
|
|
54
|
+
const SelectedContainer = styled.div`
|
|
55
|
+
display: grid;
|
|
56
|
+
align-items: center;
|
|
57
|
+
height: 100%;
|
|
58
|
+
padding-right: 20px;
|
|
59
|
+
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
|
60
|
+
`
|
|
61
|
+
|
|
62
|
+
const BoxContainer = styled.div`
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
background-color: ${(props) => props.theme.colors.black};
|
|
66
|
+
opacity: 90%;
|
|
67
|
+
color: ${(props) => props.theme.colors.white};
|
|
68
|
+
border-radius: 4px;
|
|
69
|
+
padding: 8px 10px 8px 20px;
|
|
70
|
+
font-size: 14px;
|
|
71
|
+
height: 40px;
|
|
72
|
+
`
|
|
73
|
+
|
|
74
|
+
const ListContainer = styled.div`
|
|
75
|
+
padding: 0 20px;
|
|
76
|
+
display: flex;
|
|
77
|
+
gap: 20px;
|
|
78
|
+
color: ${(props) => props.theme.colors.white};
|
|
79
|
+
`
|
|
80
|
+
|
|
81
|
+
const ListAttrs = {
|
|
82
|
+
hoverColor: String
|
|
83
|
+
}
|
|
84
|
+
const ListItem = styled('div', ListAttrs)`
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
&:hover {
|
|
87
|
+
color: ${(props) =>
|
|
88
|
+
props.hoverColor
|
|
89
|
+
? props.theme.colors[props.hoverColor]
|
|
90
|
+
: props.theme.colors.green};
|
|
91
|
+
}
|
|
92
|
+
`
|
|
93
|
+
|
|
94
|
+
const IconContainer = styled.div`
|
|
95
|
+
display: grid;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-items: center;
|
|
98
|
+
height: 30px;
|
|
99
|
+
width: 30px;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
margin-left: 20px;
|
|
102
|
+
|
|
103
|
+
&:hover {
|
|
104
|
+
background: rgba(255, 255, 255, 0.1);
|
|
105
|
+
border-radius: 4px;
|
|
106
|
+
}
|
|
107
|
+
`
|
|
108
|
+
|
|
109
|
+
export default {
|
|
110
|
+
name: 'selected-options',
|
|
111
|
+
components: {
|
|
112
|
+
PageContainer,
|
|
113
|
+
BoxContainer,
|
|
114
|
+
SelectedContainer,
|
|
115
|
+
ListContainer,
|
|
116
|
+
ListItem,
|
|
117
|
+
Icon,
|
|
118
|
+
IconContainer
|
|
119
|
+
},
|
|
120
|
+
props: {
|
|
121
|
+
optionsList: {
|
|
122
|
+
required: true
|
|
123
|
+
},
|
|
124
|
+
numberSelected: {
|
|
125
|
+
required: true,
|
|
126
|
+
default: 0
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
</script>
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<info-container>
|
|
3
|
-
<icon name="info" size="24px" />
|
|
4
|
-
<InfoTextContainer>
|
|
5
|
-
<slot />
|
|
6
|
-
</InfoTextContainer>
|
|
7
|
-
</info-container>
|
|
8
|
-
</template>
|
|
9
|
-
|
|
10
|
-
<script>
|
|
11
|
-
import styled from 'vue-styled-components'
|
|
12
|
-
import icon from '../icon'
|
|
13
|
-
const InfoContainer = styled('div')`
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: flex-start;
|
|
16
|
-
gap: 15px;
|
|
17
|
-
padding: 20px;
|
|
18
|
-
width: 500px;
|
|
19
|
-
min-width: 450px;
|
|
20
|
-
border: 1px dashed #dee2eb;
|
|
21
|
-
border-radius: 4px;
|
|
22
|
-
margin:20px 0;
|
|
23
|
-
`
|
|
24
|
-
|
|
25
|
-
const InfoTextContainer = styled('div')`
|
|
26
|
-
font-size: 13px;
|
|
27
|
-
`
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
export default {
|
|
31
|
-
components:{
|
|
32
|
-
icon,
|
|
33
|
-
InfoTextContainer,
|
|
34
|
-
InfoContainer
|
|
35
|
-
},
|
|
36
|
-
props:[]
|
|
37
|
-
}
|
|
38
|
-
</script>
|