@eturnity/eturnity_reusable_components 7.20.0--EPDM-5518.6 → 7.20.0--EPDM-10564.5
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 +1 -1
- package/src/components/filter/filterSettings.vue +0 -17
- package/src/components/filter/index.vue +0 -11
- package/src/components/inputs/checkbox/index.vue +5 -12
- package/src/components/inputs/inputText/index.vue +1 -1
- package/src/components/inputs/select/index.vue +5 -3
- package/src/components/inputs/textAreaInput/index.vue +1 -1
- package/src/components/pagination/index.vue +4 -5
- package/src/components/projectMarker/index.vue +1 -1
- package/src/assets/svgIcons/clock_full.svg +0 -3
- package/src/components/selectedOptions/index.vue +0 -145
package/package.json
CHANGED
@@ -270,12 +270,6 @@
|
|
270
270
|
:text="buttonText.cancel"
|
271
271
|
@click="$emit('on-cancel-view')"
|
272
272
|
/>
|
273
|
-
<reset-container v-if="!filterViews || !filterViews.length">
|
274
|
-
<reset-button @click="$emit('on-reset-filters')">
|
275
|
-
<icon :name="'update'" size="14px" :color="theme.colors.blue" />
|
276
|
-
<div>{{ $gettext('reset_filters') }}</div>
|
277
|
-
</reset-button>
|
278
|
-
</reset-container>
|
279
273
|
</button-container>
|
280
274
|
</container-wrapper>
|
281
275
|
</template>
|
@@ -337,16 +331,6 @@ const ButtonContainer = styled.div`
|
|
337
331
|
padding: 15px;
|
338
332
|
`
|
339
333
|
|
340
|
-
const ResetContainer = styled.div`
|
341
|
-
display: grid;
|
342
|
-
align-content: center;
|
343
|
-
margin-left: auto;
|
344
|
-
div {
|
345
|
-
margin-top: 0;
|
346
|
-
align-self: center;
|
347
|
-
}
|
348
|
-
`
|
349
|
-
|
350
334
|
const ColumnContainer = styled.div``
|
351
335
|
|
352
336
|
const DragContainer = styled.div`
|
@@ -473,7 +457,6 @@ export default {
|
|
473
457
|
DeleteIcon,
|
474
458
|
UpperContainer,
|
475
459
|
ResetButton,
|
476
|
-
ResetContainer,
|
477
460
|
VueDatePicker
|
478
461
|
},
|
479
462
|
props: {
|
@@ -70,9 +70,6 @@ export default {
|
|
70
70
|
},
|
71
71
|
settingsTranslations: {
|
72
72
|
required: false
|
73
|
-
},
|
74
|
-
closeDropdown: {
|
75
|
-
required: false
|
76
73
|
}
|
77
74
|
},
|
78
75
|
data() {
|
@@ -125,7 +122,6 @@ export default {
|
|
125
122
|
this.$emit('on-filter-view-select', item)
|
126
123
|
},
|
127
124
|
onViewDelete(item) {
|
128
|
-
this.onToggleDropdown()
|
129
125
|
this.$emit('on-filter-view-delete', item)
|
130
126
|
},
|
131
127
|
onApplyCurrentView() {
|
@@ -142,13 +138,6 @@ export default {
|
|
142
138
|
},
|
143
139
|
beforeDestroy() {
|
144
140
|
document.removeEventListener('click', this.clickOutside)
|
145
|
-
},
|
146
|
-
watch: {
|
147
|
-
closeDropdown(newVal) {
|
148
|
-
if (newVal) {
|
149
|
-
this.isDropdownOpen = false
|
150
|
-
}
|
151
|
-
}
|
152
141
|
}
|
153
142
|
}
|
154
143
|
</script>
|
@@ -3,11 +3,10 @@
|
|
3
3
|
<container
|
4
4
|
:checkColor="checkColor"
|
5
5
|
:size="size"
|
6
|
-
:hasLabel="
|
6
|
+
:hasLabel="hasLabel"
|
7
7
|
:backgroundColor="backgroundColor"
|
8
8
|
:isChecked="isChecked"
|
9
9
|
:isDisabled="isDisabled"
|
10
|
-
:cursorType="cursorType"
|
11
10
|
>
|
12
11
|
<input-checkbox
|
13
12
|
type="checkbox"
|
@@ -18,7 +17,7 @@
|
|
18
17
|
<check-wrapper :hasLabel="hasLabel">
|
19
18
|
<span class="checkmark"></span>
|
20
19
|
</check-wrapper>
|
21
|
-
<label-text v-if="
|
20
|
+
<label-text v-if="hasLabel">{{ label }}</label-text>
|
22
21
|
</container>
|
23
22
|
</component-wrapper>
|
24
23
|
</template>
|
@@ -34,7 +33,6 @@
|
|
34
33
|
// size="small"
|
35
34
|
// backgroundColor="red"
|
36
35
|
// :isDisabled="true"
|
37
|
-
// cursorType="default"
|
38
36
|
// />
|
39
37
|
import styled from 'vue3-styled-components'
|
40
38
|
|
@@ -57,8 +55,7 @@ const containerAttrs = {
|
|
57
55
|
hasLabel: Boolean,
|
58
56
|
backgroundColor: String,
|
59
57
|
isChecked: Boolean,
|
60
|
-
isDisabled: Boolean
|
61
|
-
cursorType: String
|
58
|
+
isDisabled: Boolean
|
62
59
|
}
|
63
60
|
const Container = styled('label', containerAttrs)`
|
64
61
|
display: grid;
|
@@ -67,7 +64,7 @@ const Container = styled('label', containerAttrs)`
|
|
67
64
|
align-content: center;
|
68
65
|
color: ${(props) => props.theme.colors.black};
|
69
66
|
position: relative;
|
70
|
-
cursor: ${(props) => (props.isDisabled ? 'not-allowed' :
|
67
|
+
cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
|
71
68
|
font-size: 16px;
|
72
69
|
user-select: none;
|
73
70
|
|
@@ -92,7 +89,7 @@ const Container = styled('label', containerAttrs)`
|
|
92
89
|
: props.theme.colors.green
|
93
90
|
: props.isDisabled
|
94
91
|
? props.theme.colors.lightGray
|
95
|
-
:
|
92
|
+
: '#fff'};
|
96
93
|
border-radius: 4px;
|
97
94
|
border: 1px solid
|
98
95
|
${(props) =>
|
@@ -186,10 +183,6 @@ export default {
|
|
186
183
|
dataId: {
|
187
184
|
type: String,
|
188
185
|
default: ''
|
189
|
-
},
|
190
|
-
cursorType: {
|
191
|
-
type: String,
|
192
|
-
default: 'pointer'
|
193
186
|
}
|
194
187
|
},
|
195
188
|
computed: {
|
@@ -268,10 +268,12 @@ const selectButton = styled('div', selectButtonAttrs)`
|
|
268
268
|
props.isSearchBarVisible
|
269
269
|
? ''
|
270
270
|
: `padding-left: ${
|
271
|
-
props.
|
271
|
+
props.hasNoPadding
|
272
|
+
? '0'
|
273
|
+
: props.tablePaddingLeft
|
274
|
+
? props.tablePaddingLeft
|
275
|
+
: props.paddingLeft
|
272
276
|
}`};
|
273
|
-
${(props) =>
|
274
|
-
props.hasNoPadding ? '' : `padding-left: ${props.paddingLeft}`};
|
275
277
|
text-align: left;
|
276
278
|
min-height: ${(props) =>
|
277
279
|
props.selectHeight
|
@@ -81,6 +81,8 @@ const paginationWrapper = styled.nav`
|
|
81
81
|
flex-wrap: wrap;
|
82
82
|
justify-content: flex-end;
|
83
83
|
align-items: center;
|
84
|
+
margin-bottom: 2px;
|
85
|
+
margin-top: 10px;
|
84
86
|
`
|
85
87
|
const paginationLink = styled.div`
|
86
88
|
display: flex;
|
@@ -90,18 +92,15 @@ const paginationLink = styled.div`
|
|
90
92
|
border-radius: 3px;
|
91
93
|
white-space: nowrap;
|
92
94
|
cursor: pointer;
|
93
|
-
color: ${(props) => props.theme.colors.brightBlue};
|
94
95
|
|
95
96
|
&.active {
|
96
|
-
color:
|
97
|
+
color: #fff;
|
97
98
|
background-color: ${(props) => props.theme.colors.brightBlue};
|
98
99
|
padding: 7px 12px;
|
99
100
|
border-radius: 4px;
|
100
101
|
}
|
101
102
|
`
|
102
|
-
const arrowText = styled.div
|
103
|
-
color: ${(props) => props.theme.colors.brightBlue};
|
104
|
-
`
|
103
|
+
const arrowText = styled.div``
|
105
104
|
const arrowIconContainer = styled.div`
|
106
105
|
margin: 0 10px;
|
107
106
|
display: flex;
|
@@ -69,7 +69,7 @@
|
|
69
69
|
</template>
|
70
70
|
|
71
71
|
<script>
|
72
|
-
// import
|
72
|
+
// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
|
73
73
|
// To use:
|
74
74
|
// <project-marker
|
75
75
|
// :activeLanguage="'en-us'"
|
@@ -1,3 +0,0 @@
|
|
1
|
-
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
2
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM5.875 5.05243V2.125H4.125V5.92743L6.19061 7.47663L7.24061 6.07663L5.875 5.05243Z" fill="white"/>
|
3
|
-
</svg>
|
@@ -1,145 +0,0 @@
|
|
1
|
-
<template>
|
2
|
-
<page-container>
|
3
|
-
<box-container>
|
4
|
-
<selected-container
|
5
|
-
>{{ numberSelected }} {{ $gettext('selected') }}</selected-container
|
6
|
-
>
|
7
|
-
<list-container v-if="optionsList.length">
|
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
|
-
<empty-text v-if="!optionsList.length">
|
18
|
-
{{ $gettext('no_batch_actions_available') }}
|
19
|
-
</empty-text>
|
20
|
-
<icon-container @click="$emit('on-close')">
|
21
|
-
<icon
|
22
|
-
name="close_for_modals,_tool_tips"
|
23
|
-
color="white"
|
24
|
-
size="14px"
|
25
|
-
cursor="pointer"
|
26
|
-
/>
|
27
|
-
</icon-container>
|
28
|
-
</box-container>
|
29
|
-
</page-container>
|
30
|
-
</template>
|
31
|
-
|
32
|
-
<script>
|
33
|
-
// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
|
34
|
-
// optionsList = [
|
35
|
-
// {
|
36
|
-
// type: 'export',
|
37
|
-
// name: 'Export'
|
38
|
-
// },
|
39
|
-
// {
|
40
|
-
// type: 'delete',
|
41
|
-
// name: 'Delete',
|
42
|
-
// hoverColor: 'red' // default is green
|
43
|
-
// }
|
44
|
-
// ]
|
45
|
-
// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
|
46
|
-
// <selected-options
|
47
|
-
// :numberSelected="numberSelected"
|
48
|
-
// :optionsList="optionsList"
|
49
|
-
// @on-close="onCloseFunction()"
|
50
|
-
// @on-export="function()" @on-delete="function()"
|
51
|
-
// />
|
52
|
-
import styled from 'vue3-styled-components'
|
53
|
-
import Icon from '../icon'
|
54
|
-
|
55
|
-
const PageContainer = styled.div`
|
56
|
-
position: fixed;
|
57
|
-
bottom: 30px;
|
58
|
-
left: 50%;
|
59
|
-
transform: translateX(-50%);
|
60
|
-
`
|
61
|
-
|
62
|
-
const SelectedContainer = styled.div`
|
63
|
-
display: grid;
|
64
|
-
align-items: center;
|
65
|
-
height: 100%;
|
66
|
-
padding-right: 20px;
|
67
|
-
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
68
|
-
`
|
69
|
-
|
70
|
-
const BoxContainer = styled.div`
|
71
|
-
display: flex;
|
72
|
-
align-items: center;
|
73
|
-
background-color: ${(props) => props.theme.colors.black};
|
74
|
-
opacity: 90%;
|
75
|
-
color: ${(props) => props.theme.colors.white};
|
76
|
-
border-radius: 4px;
|
77
|
-
padding: 8px 10px 8px 20px;
|
78
|
-
font-size: 14px;
|
79
|
-
height: 40px;
|
80
|
-
`
|
81
|
-
|
82
|
-
const ListContainer = styled.div`
|
83
|
-
padding: 0 20px;
|
84
|
-
display: flex;
|
85
|
-
gap: 20px;
|
86
|
-
color: ${(props) => props.theme.colors.white};
|
87
|
-
`
|
88
|
-
|
89
|
-
const ListAttrs = {
|
90
|
-
hoverColor: String
|
91
|
-
}
|
92
|
-
const ListItem = styled('div', ListAttrs)`
|
93
|
-
cursor: pointer;
|
94
|
-
&:hover {
|
95
|
-
color: ${(props) =>
|
96
|
-
props.hoverColor
|
97
|
-
? props.theme.colors[props.hoverColor]
|
98
|
-
: props.theme.colors.green};
|
99
|
-
}
|
100
|
-
`
|
101
|
-
|
102
|
-
const IconContainer = styled.div`
|
103
|
-
display: grid;
|
104
|
-
align-items: center;
|
105
|
-
justify-items: center;
|
106
|
-
height: 30px;
|
107
|
-
width: 30px;
|
108
|
-
cursor: pointer;
|
109
|
-
margin-left: 20px;
|
110
|
-
|
111
|
-
&:hover {
|
112
|
-
background: rgba(255, 255, 255, 0.1);
|
113
|
-
border-radius: 4px;
|
114
|
-
}
|
115
|
-
`
|
116
|
-
|
117
|
-
const EmptyText = styled.div`
|
118
|
-
color: ${(props) => props.theme.colors.white};
|
119
|
-
font-size: 13px;
|
120
|
-
padding-left: 16px;
|
121
|
-
`
|
122
|
-
|
123
|
-
export default {
|
124
|
-
name: 'selected-options',
|
125
|
-
components: {
|
126
|
-
PageContainer,
|
127
|
-
BoxContainer,
|
128
|
-
SelectedContainer,
|
129
|
-
ListContainer,
|
130
|
-
ListItem,
|
131
|
-
Icon,
|
132
|
-
IconContainer,
|
133
|
-
EmptyText
|
134
|
-
},
|
135
|
-
props: {
|
136
|
-
optionsList: {
|
137
|
-
required: true
|
138
|
-
},
|
139
|
-
numberSelected: {
|
140
|
-
required: true,
|
141
|
-
default: 0
|
142
|
-
}
|
143
|
-
}
|
144
|
-
}
|
145
|
-
</script>
|