@eturnity/eturnity_reusable_components 6.48.0-EPGM-7260.0 → 6.48.2
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
|
@@ -16,12 +16,13 @@
|
|
|
16
16
|
<label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
|
|
17
17
|
{{ labelText }}
|
|
18
18
|
</label-text>
|
|
19
|
+
|
|
19
20
|
<info-text
|
|
20
21
|
v-if="labelInfoText"
|
|
21
22
|
:text="labelInfoText"
|
|
22
23
|
borderColor="#ccc"
|
|
23
24
|
size="14px"
|
|
24
|
-
:
|
|
25
|
+
:alignArrow="labelInfoAlign"
|
|
25
26
|
/>
|
|
26
27
|
</label-wrapper>
|
|
27
28
|
<input-wrapper>
|
|
@@ -1,130 +0,0 @@
|
|
|
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>
|