@eturnity/eturnity_reusable_components 1.1.34 → 1.1.37
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
|
@@ -3,11 +3,18 @@
|
|
|
3
3
|
:colspan="colSpan"
|
|
4
4
|
:isOpen="isOpen"
|
|
5
5
|
@click="toggleOpen"
|
|
6
|
-
ref="dropdownItem"
|
|
7
6
|
:disabled="disabled"
|
|
8
7
|
>
|
|
9
8
|
<component-container :colSpan="colSpan - 1" class="table-dropdown">
|
|
10
|
-
<component-item
|
|
9
|
+
<component-item
|
|
10
|
+
v-for="(item, index) in tableItems"
|
|
11
|
+
:key="index"
|
|
12
|
+
ref="dropdownItem"
|
|
13
|
+
:class="{
|
|
14
|
+
'table-dropdown-item':
|
|
15
|
+
item.type !== 'no-template' && item.type !== 'input',
|
|
16
|
+
}"
|
|
17
|
+
>
|
|
11
18
|
<template-button
|
|
12
19
|
@click.stop="onTemplateClick(item.row)"
|
|
13
20
|
v-if="item.type && item.type === 'template' && item.value === ''"
|
|
@@ -26,96 +33,106 @@
|
|
|
26
33
|
/>
|
|
27
34
|
<div>{{ item.value }}</div>
|
|
28
35
|
</template-link>
|
|
29
|
-
<no-template v-
|
|
36
|
+
<no-template v-if="item.type && item.type === 'no-template'">
|
|
30
37
|
{{ $gettext("No main component template") }}
|
|
31
38
|
</no-template>
|
|
32
39
|
<input-container
|
|
33
|
-
v-
|
|
40
|
+
v-if="item.type === 'input'"
|
|
34
41
|
@click.stop="onInputClick()"
|
|
35
42
|
>
|
|
36
43
|
<input-text
|
|
37
44
|
class="inputField"
|
|
38
45
|
:value="item.value"
|
|
39
46
|
:noBorder="true"
|
|
47
|
+
:minWidth="item.value.length + 'ch'"
|
|
40
48
|
:disabled="customInputDisabled"
|
|
41
49
|
@input-change="onCustomInputChange($event)"
|
|
42
50
|
/>
|
|
43
51
|
</input-container>
|
|
44
52
|
<span v-else> {{ item.value }}</span>
|
|
45
53
|
</component-item>
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
:width="getItemLocation('width')"
|
|
67
|
-
ref="optionsContainer"
|
|
68
|
-
>
|
|
69
|
-
<options-wrapper @click.prevent.stop>
|
|
70
|
-
<search-container @click.prevent.stop>
|
|
71
|
-
<search-input
|
|
72
|
-
:value="inputText"
|
|
73
|
-
:placeholder="$gettext('Keyword') + '...'"
|
|
74
|
-
@click.prevent.stop
|
|
75
|
-
@on-change="onSearch($event)"
|
|
76
|
-
ref="searchInput"
|
|
54
|
+
<arrow-container class="arrow-container">
|
|
55
|
+
<arrow-wrapper :showArchived="showArchived">
|
|
56
|
+
<et-popover
|
|
57
|
+
v-if="showArchived"
|
|
58
|
+
button-class="error"
|
|
59
|
+
:text="
|
|
60
|
+
$gettext(`Component has been archived and shouldn't be used`)
|
|
61
|
+
"
|
|
62
|
+
triggerType="hover"
|
|
63
|
+
></et-popover>
|
|
64
|
+
<arrow-down
|
|
65
|
+
@click.native.stop="toggleOpen"
|
|
66
|
+
v-if="!isOpen"
|
|
67
|
+
class="arrow-dropdown"
|
|
68
|
+
:src="require('../../assets/icons/collapse_arrow_icon.svg')"
|
|
69
|
+
/>
|
|
70
|
+
<arrow-up
|
|
71
|
+
@click.native.stop="toggleOpen"
|
|
72
|
+
v-else
|
|
73
|
+
:src="require('../../assets/icons/collapse_arrow_icon.svg')"
|
|
77
74
|
/>
|
|
78
|
-
</
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
v-else
|
|
85
|
-
:colSpan="colSpan"
|
|
86
|
-
v-for="(item, index) in optionItems"
|
|
87
|
-
:key="index"
|
|
88
|
-
@click="onItemClick(item)"
|
|
89
|
-
:tabindex="0"
|
|
90
|
-
@keyup.enter.native="onItemClick(item)"
|
|
75
|
+
</arrow-wrapper>
|
|
76
|
+
<options-container
|
|
77
|
+
v-if="isOpen"
|
|
78
|
+
:top="getItemLocation('top')"
|
|
79
|
+
:left="getItemLocation('left')"
|
|
80
|
+
ref="optionsContainer"
|
|
91
81
|
>
|
|
92
|
-
<
|
|
93
|
-
<
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
82
|
+
<options-wrapper @click.prevent.stop>
|
|
83
|
+
<search-container @click.prevent.stop>
|
|
84
|
+
<search-input
|
|
85
|
+
:value="inputText"
|
|
86
|
+
:placeholder="$gettext('Keyword') + '...'"
|
|
87
|
+
@click.prevent.stop
|
|
88
|
+
@on-change="onSearch($event)"
|
|
89
|
+
ref="searchInput"
|
|
90
|
+
/>
|
|
91
|
+
</search-container>
|
|
92
|
+
<spinner v-if="optionsLoading" />
|
|
93
|
+
<empty-text v-else-if="!optionsLoading && !optionItems.length">
|
|
94
|
+
{{ emptyText ? emptyText : $gettext("No components found.") }}
|
|
95
|
+
</empty-text>
|
|
96
|
+
<options-item
|
|
97
|
+
v-else
|
|
98
|
+
:colSpan="colSpan - 1"
|
|
99
|
+
v-for="(item, index) in optionItems"
|
|
100
|
+
:key="index"
|
|
101
|
+
@click="onItemClick(item)"
|
|
102
|
+
:tabindex="0"
|
|
103
|
+
@keyup.enter.native="onItemClick(item)"
|
|
101
104
|
>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
+
<template v-for="(option, idx) in optionsDisplay">
|
|
106
|
+
<span v-if="option !== 'template'" :key="idx">
|
|
107
|
+
{{ item[option] }}
|
|
108
|
+
</span>
|
|
109
|
+
<template-button
|
|
110
|
+
@click.stop="onTemplateClick(item)"
|
|
111
|
+
v-else-if="option === 'template' && item.has_template"
|
|
112
|
+
:key="idx"
|
|
113
|
+
>{{ $gettext("Use template...") }}</template-button
|
|
114
|
+
>
|
|
115
|
+
<no-template
|
|
116
|
+
v-else-if="option === 'template' && !item.has_template"
|
|
117
|
+
:key="idx"
|
|
118
|
+
>
|
|
119
|
+
{{ $gettext("No main component template") }}
|
|
120
|
+
</no-template>
|
|
121
|
+
</template>
|
|
122
|
+
</options-item>
|
|
123
|
+
</options-wrapper>
|
|
124
|
+
<custom-container
|
|
125
|
+
v-if="inputText.length && allowFreeInputs"
|
|
126
|
+
@click="onCustomNameClick()"
|
|
127
|
+
>
|
|
128
|
+
<custom-name>{{ getCustomName }}</custom-name>
|
|
129
|
+
<custom-subtext
|
|
130
|
+
>({{ $gettext("custom_component") }})</custom-subtext
|
|
105
131
|
>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
</options-wrapper>
|
|
111
|
-
<custom-container
|
|
112
|
-
v-if="inputText.length && allowFreeInputs"
|
|
113
|
-
@click="onCustomNameClick()"
|
|
114
|
-
>
|
|
115
|
-
<custom-name>{{ getCustomName }}</custom-name>
|
|
116
|
-
<custom-subtext>({{ $gettext("custom_component") }})</custom-subtext>
|
|
117
|
-
</custom-container>
|
|
118
|
-
</options-container>
|
|
132
|
+
</custom-container>
|
|
133
|
+
</options-container>
|
|
134
|
+
</arrow-container>
|
|
135
|
+
</component-container>
|
|
119
136
|
</dropdown-row>
|
|
120
137
|
</template>
|
|
121
138
|
|
|
@@ -145,24 +162,34 @@ import SearchInput from "@eturnity/eturnity_reusable_components/src/components/i
|
|
|
145
162
|
import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
|
|
146
163
|
|
|
147
164
|
const rowAttrs = { disabled: Boolean, isOpen: Boolean }
|
|
148
|
-
const DropdownRow = styled("
|
|
165
|
+
const DropdownRow = styled("div", rowAttrs)`
|
|
149
166
|
cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
|
|
167
|
+
display: contents;
|
|
150
168
|
|
|
151
169
|
input {
|
|
152
170
|
cursor: ${(props) => (!props.isOpen ? "pointer !important" : "inherit")};
|
|
153
171
|
}
|
|
154
172
|
`
|
|
155
173
|
|
|
156
|
-
const ComponentItem = styled.
|
|
174
|
+
const ComponentItem = styled.td`
|
|
157
175
|
overflow: hidden;
|
|
158
176
|
text-overflow: ellipsis;
|
|
177
|
+
padding-right: 0 !important;
|
|
178
|
+
|
|
179
|
+
&.table-dropdown-item {
|
|
180
|
+
background-clip: content-box;
|
|
181
|
+
padding: 8px 0 7px 0 !important;
|
|
182
|
+
|
|
183
|
+
span {
|
|
184
|
+
padding-left: 15px;
|
|
185
|
+
vertical-align: middle;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
159
188
|
`
|
|
160
189
|
|
|
161
190
|
const containerAttrs = { colSpan: Number }
|
|
162
191
|
const ComponentContainer = styled("div", containerAttrs)`
|
|
163
|
-
display:
|
|
164
|
-
grid-template-columns: 1fr repeat(${(props) => props.colSpan}, auto) auto;
|
|
165
|
-
grid-gap: 12px;
|
|
192
|
+
display: contents;
|
|
166
193
|
align-items: center;
|
|
167
194
|
background-color: ${(props) => props.theme.colors.white};
|
|
168
195
|
border-radius: 4px;
|
|
@@ -181,13 +208,35 @@ const ArrowUp = styled.img`
|
|
|
181
208
|
transition: transform 150ms ease;
|
|
182
209
|
`
|
|
183
210
|
|
|
184
|
-
const
|
|
211
|
+
const ArrowContainer = styled.td`
|
|
212
|
+
border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
|
|
213
|
+
background-clip: content-box;
|
|
214
|
+
padding: 8px 0 7px 0 !important;
|
|
215
|
+
border-radius: 0 4px 4px 0;
|
|
216
|
+
|
|
217
|
+
.arrow-dropdown {
|
|
218
|
+
vertical-align: middle;
|
|
219
|
+
margin-left: 11px;
|
|
220
|
+
}
|
|
221
|
+
`
|
|
222
|
+
|
|
223
|
+
const arrowAttrs = { showArchived: Boolean }
|
|
224
|
+
const ArrowWrapper = styled("div", arrowAttrs)`
|
|
225
|
+
display: grid;
|
|
226
|
+
grid-template-columns: ${(props) =>
|
|
227
|
+
props.showArchived ? "auto auto" : "auto"};
|
|
228
|
+
align-items: center;
|
|
229
|
+
justify-items: center;
|
|
230
|
+
`
|
|
231
|
+
|
|
232
|
+
const optionsAttrs = { top: Number, left: Number }
|
|
185
233
|
const OptionsContainer = styled("div", optionsAttrs)`
|
|
186
234
|
position: absolute;
|
|
187
235
|
display: grid;
|
|
188
236
|
grid-template-rows: 1fr auto;
|
|
189
237
|
top: ${(props) => props.top + "px"};
|
|
190
|
-
|
|
238
|
+
left: ${(props) => props.left + "px"};
|
|
239
|
+
width: auto;
|
|
191
240
|
max-height: 360px;
|
|
192
241
|
min-height: 200px;
|
|
193
242
|
overflow: auto;
|
|
@@ -213,14 +262,19 @@ const OptionsWrapper = styled.div`
|
|
|
213
262
|
font-size: 14px;
|
|
214
263
|
grid-template-rows: max-content;
|
|
215
264
|
height: max-content;
|
|
265
|
+
min-width: 400px; // kind of an arbitrary number until we know all use cases
|
|
216
266
|
`
|
|
217
267
|
|
|
218
268
|
const OptionsItem = styled("div", containerAttrs)`
|
|
219
269
|
display: grid;
|
|
220
|
-
grid-template-columns: 1fr repeat(
|
|
221
|
-
|
|
270
|
+
grid-template-columns: 1fr repeat(
|
|
271
|
+
${(props) => props.colSpan},
|
|
272
|
+
minmax(50px, auto)
|
|
273
|
+
);
|
|
274
|
+
grid-gap: 30px;
|
|
222
275
|
padding: 10px;
|
|
223
276
|
height: max-content;
|
|
277
|
+
justify-items: flex-start;
|
|
224
278
|
|
|
225
279
|
span {
|
|
226
280
|
overflow: hidden;
|
|
@@ -267,15 +321,7 @@ const TemplateLink = styled.div`
|
|
|
267
321
|
|
|
268
322
|
const InputContainer = styled.div`
|
|
269
323
|
.inputField input {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
&:focus {
|
|
273
|
-
padding: 5px 0px;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
&:hover {
|
|
277
|
-
padding: 0px 0 !important;
|
|
278
|
-
}
|
|
324
|
+
border-radius: 4px 0 0 4px;
|
|
279
325
|
}
|
|
280
326
|
`
|
|
281
327
|
|
|
@@ -312,6 +358,7 @@ export default {
|
|
|
312
358
|
Spinner,
|
|
313
359
|
EmptyText,
|
|
314
360
|
SearchInput,
|
|
361
|
+
ArrowWrapper,
|
|
315
362
|
OptionsWrapper,
|
|
316
363
|
OptionsItem,
|
|
317
364
|
SearchContainer,
|
|
@@ -323,6 +370,7 @@ export default {
|
|
|
323
370
|
CustomContainer,
|
|
324
371
|
CustomName,
|
|
325
372
|
CustomSubtext,
|
|
373
|
+
ArrowContainer,
|
|
326
374
|
},
|
|
327
375
|
props: {
|
|
328
376
|
colSpan: {
|
|
@@ -426,7 +474,7 @@ export default {
|
|
|
426
474
|
this.$emit("dropdown-search", value)
|
|
427
475
|
},
|
|
428
476
|
getItemLocation(value) {
|
|
429
|
-
let ref = this.$refs.dropdownItem
|
|
477
|
+
let ref = this.$refs.dropdownItem[0]
|
|
430
478
|
let location = ref.$el.getBoundingClientRect()[value]
|
|
431
479
|
if (value === "top") {
|
|
432
480
|
location = location + window.scrollY + 40
|