@eturnity/eturnity_reusable_components 6.46.5-EPDM-8599.0 → 6.46.5-qa-16-11.27
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/App.vue +1 -3
- package/src/components/filter/filterSettings.vue +8 -6
- package/src/components/inputs/inputNumber/index.vue +10 -1
- package/src/components/inputs/inputText/index.vue +18 -3
- package/src/components/inputs/searchInput/index.vue +6 -0
- package/src/components/inputs/select/index.vue +17 -10
- package/src/components/inputs/textAreaInput/index.vue +12 -1
- package/src/components/infoCard/index.vue +0 -38
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 {
|
@@ -40,7 +40,10 @@
|
|
40
40
|
v-for="(item, idx) in filterData"
|
41
41
|
:key="idx + '_filterdata'"
|
42
42
|
>
|
43
|
-
<column-title
|
43
|
+
<column-title
|
44
|
+
:showBorder="idx + 1 !== filterData.length"
|
45
|
+
:data-id="`filter_label_project_view_file_manager_${item.type}`"
|
46
|
+
>
|
44
47
|
{{ item.columnName }}
|
45
48
|
</column-title>
|
46
49
|
<row-container v-if="item.type === 'columns'">
|
@@ -88,13 +91,12 @@
|
|
88
91
|
selectHeight="36px"
|
89
92
|
fontSize="13px"
|
90
93
|
:label="filter.label"
|
94
|
+
:labelDataId="filter.dataId"
|
91
95
|
alignItems="vertical"
|
92
96
|
:disabled="!filter.choices.length"
|
93
97
|
>
|
94
98
|
<template #selector>
|
95
|
-
<option-title>
|
96
|
-
{{ filter.selectedText }}
|
97
|
-
</option-title>
|
99
|
+
<option-title> {{ filter.selectedText }} </option-title>
|
98
100
|
</template>
|
99
101
|
<template #dropdown>
|
100
102
|
<dropdown-checkbox-container @click.stop>
|
@@ -117,7 +119,7 @@
|
|
117
119
|
</template>
|
118
120
|
</select-component>
|
119
121
|
<section-container v-else-if="isRangeSelector(filter.filter_type)">
|
120
|
-
<row-label>{{ filter.label }}</row-label>
|
122
|
+
<row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
|
121
123
|
<grid-container>
|
122
124
|
<input-number
|
123
125
|
:placeholder="
|
@@ -165,7 +167,7 @@
|
|
165
167
|
v-else-if="isDateSelector(filter.filter_type)"
|
166
168
|
@click.stop
|
167
169
|
>
|
168
|
-
<row-label>{{ filter.label }}</row-label>
|
170
|
+
<row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
|
169
171
|
<grid-container>
|
170
172
|
<date-picker-input
|
171
173
|
:placeholder="$gettext('Date from')"
|
@@ -13,7 +13,7 @@
|
|
13
13
|
</label-slot-wrapper>
|
14
14
|
|
15
15
|
<label-wrapper v-if="labelText">
|
16
|
-
<label-text :labelFontColor="labelFontColor">
|
16
|
+
<label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
|
17
17
|
{{ labelText }}
|
18
18
|
</label-text>
|
19
19
|
<info-text
|
@@ -53,6 +53,7 @@
|
|
53
53
|
:hasLabelSlot="hasLabelSlot"
|
54
54
|
:slotSize="slotSize"
|
55
55
|
:showLinearUnitName="showLinearUnitName"
|
56
|
+
:data-id="inputDataId"
|
56
57
|
/>
|
57
58
|
<slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
|
58
59
|
<slot></slot>
|
@@ -437,6 +438,14 @@ export default {
|
|
437
438
|
focus: {
|
438
439
|
required: false,
|
439
440
|
default: false
|
441
|
+
},
|
442
|
+
labelDataId: {
|
443
|
+
required: false,
|
444
|
+
default: ''
|
445
|
+
},
|
446
|
+
inputDataId: {
|
447
|
+
required: false,
|
448
|
+
default: ''
|
440
449
|
}
|
441
450
|
},
|
442
451
|
computed: {
|
@@ -5,9 +5,15 @@
|
|
5
5
|
:alignItems="alignItems"
|
6
6
|
>
|
7
7
|
<label-wrapper v-if="label">
|
8
|
-
<input-label
|
9
|
-
|
10
|
-
|
8
|
+
<input-label
|
9
|
+
:labelFontColor="labelFontColor"
|
10
|
+
:fontSize="fontSize"
|
11
|
+
:dataId="labelDataId"
|
12
|
+
>{{ label }}
|
13
|
+
<optionalLabel v-if="labelOptional"
|
14
|
+
>({{ $gettext('Optional') }})</optionalLabel
|
15
|
+
></input-label
|
16
|
+
>
|
11
17
|
<info-text
|
12
18
|
v-if="infoTextMessage"
|
13
19
|
:text="infoTextMessage"
|
@@ -38,6 +44,7 @@
|
|
38
44
|
:hasFocus="hasFocus"
|
39
45
|
:backgroundColor="backgroundColor"
|
40
46
|
:disabledBackgroundColor="disabledBackgroundColor"
|
47
|
+
:dataId="inputDataId"
|
41
48
|
/>
|
42
49
|
<icon-wrapper
|
43
50
|
v-if="inputType === 'password' && !isError"
|
@@ -310,6 +317,14 @@ export default {
|
|
310
317
|
},
|
311
318
|
borderColor: {
|
312
319
|
required: false
|
320
|
+
},
|
321
|
+
labelDataId: {
|
322
|
+
required: false,
|
323
|
+
default: ''
|
324
|
+
},
|
325
|
+
inputDataId: {
|
326
|
+
required: false,
|
327
|
+
default: ''
|
313
328
|
}
|
314
329
|
},
|
315
330
|
methods: {
|
@@ -11,6 +11,7 @@
|
|
11
11
|
:inputWidth="inputWidth"
|
12
12
|
:isFilter="isFilter"
|
13
13
|
:hasFocus="hasFocus"
|
14
|
+
:dataId="dataId"
|
14
15
|
/>
|
15
16
|
<img
|
16
17
|
class="search-icn"
|
@@ -30,6 +31,7 @@
|
|
30
31
|
// inputWidth="250px"
|
31
32
|
// @on-change="function($event)"
|
32
33
|
// :isFilter="true" // to set the height at 30px
|
34
|
+
// dataId="test-data-id"
|
33
35
|
// />
|
34
36
|
import styled from 'vue-styled-components'
|
35
37
|
|
@@ -104,6 +106,10 @@ export default {
|
|
104
106
|
hasFocus: {
|
105
107
|
required: false,
|
106
108
|
default: false
|
109
|
+
},
|
110
|
+
dataId: {
|
111
|
+
required: false,
|
112
|
+
default: ''
|
107
113
|
}
|
108
114
|
},
|
109
115
|
methods: {
|
@@ -8,7 +8,7 @@
|
|
8
8
|
:hasLabel="!!label && label.length > 0"
|
9
9
|
:alignItems="alignItems"
|
10
10
|
>
|
11
|
-
<label-wrapper v-if="label">
|
11
|
+
<label-wrapper v-if="label" :data-id="labelDataId">
|
12
12
|
<input-label
|
13
13
|
:fontColor="
|
14
14
|
labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
|
@@ -121,6 +121,7 @@
|
|
121
121
|
// optionWidth="50%"
|
122
122
|
// label="that is a label"
|
123
123
|
// alignItems="vertical"
|
124
|
+
// label-data-id="test-data-id"
|
124
125
|
// >
|
125
126
|
// <template #selector="{selectedValue}">
|
126
127
|
// value selected: {{selectedValue}}
|
@@ -304,6 +305,10 @@ export default {
|
|
304
305
|
required: false,
|
305
306
|
default: false
|
306
307
|
},
|
308
|
+
labelDataId: {
|
309
|
+
required: false,
|
310
|
+
default: ''
|
311
|
+
},
|
307
312
|
infoTextMessage: {
|
308
313
|
required: false
|
309
314
|
},
|
@@ -408,7 +413,7 @@ export default {
|
|
408
413
|
isActive: false,
|
409
414
|
textSearch: '',
|
410
415
|
hoveredIndex: 0,
|
411
|
-
hoveredValue:null,
|
416
|
+
hoveredValue: null,
|
412
417
|
isClickOutsideActive: false
|
413
418
|
}
|
414
419
|
},
|
@@ -447,7 +452,7 @@ export default {
|
|
447
452
|
this.$emit('input-change', e)
|
448
453
|
},
|
449
454
|
optionHovered(e) {
|
450
|
-
this.hoveredValue=e
|
455
|
+
this.hoveredValue = e
|
451
456
|
},
|
452
457
|
mouseEnterHandler() {
|
453
458
|
if (this.hoverDropdown) {
|
@@ -502,14 +507,16 @@ export default {
|
|
502
507
|
},
|
503
508
|
onArrowPress(dir) {
|
504
509
|
let newHoveredElem
|
505
|
-
const currentHoveredElem=this.$refs.dropdown.$el.querySelector(
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
newHoveredElem=currentHoveredElem.
|
510
|
+
const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
|
511
|
+
`[data-value="${this.hoveredValue}"]`
|
512
|
+
)
|
513
|
+
if (currentHoveredElem) {
|
514
|
+
if (dir > 0) {
|
515
|
+
newHoveredElem = currentHoveredElem.nextElementSibling
|
516
|
+
} else {
|
517
|
+
newHoveredElem = currentHoveredElem.previousElementSibling
|
511
518
|
}
|
512
|
-
if(newHoveredElem){
|
519
|
+
if (newHoveredElem) {
|
513
520
|
this.hoveredValue = newHoveredElem.getAttribute('data-value')
|
514
521
|
const topPos = newHoveredElem.offsetTop
|
515
522
|
this.$refs.dropdown.$el.scrollTop = topPos
|
@@ -5,7 +5,9 @@
|
|
5
5
|
:hasLabel="label && label.length > 0"
|
6
6
|
>
|
7
7
|
<label-wrapper v-if="label">
|
8
|
-
<input-label :fontSize="fontSize">{{
|
8
|
+
<input-label :fontSize="fontSize" :data-id="labelDataId">{{
|
9
|
+
label
|
10
|
+
}}</input-label>
|
9
11
|
<info-text
|
10
12
|
v-if="infoTextMessage"
|
11
13
|
:text="infoTextMessage"
|
@@ -27,6 +29,7 @@
|
|
27
29
|
:disabled="isDisabled"
|
28
30
|
@input="onChangeHandler"
|
29
31
|
:resize="resize"
|
32
|
+
:data-id="inputDataId"
|
30
33
|
/>
|
31
34
|
</input-container>
|
32
35
|
</input-wrapper>
|
@@ -181,6 +184,14 @@ export default {
|
|
181
184
|
resize: {
|
182
185
|
required: false,
|
183
186
|
default: 'none'
|
187
|
+
},
|
188
|
+
labelDataId: {
|
189
|
+
required: false,
|
190
|
+
default: ''
|
191
|
+
},
|
192
|
+
inputDataId: {
|
193
|
+
required: false,
|
194
|
+
default: ''
|
184
195
|
}
|
185
196
|
},
|
186
197
|
methods: {
|
@@ -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>
|