@eturnity/eturnity_reusable_components 1.1.36 → 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
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
{{ $gettext("No main component template") }}
|
|
38
38
|
</no-template>
|
|
39
39
|
<input-container
|
|
40
|
-
v-
|
|
40
|
+
v-if="item.type === 'input'"
|
|
41
41
|
@click.stop="onInputClick()"
|
|
42
42
|
>
|
|
43
43
|
<input-text
|
|
@@ -51,83 +51,88 @@
|
|
|
51
51
|
</input-container>
|
|
52
52
|
<span v-else> {{ item.value }}</span>
|
|
53
53
|
</component-item>
|
|
54
|
-
<et-popover
|
|
55
|
-
v-if="showArchived"
|
|
56
|
-
style="position: absolute; left: 5px; top: 13px; z-index: 99"
|
|
57
|
-
button-class="error"
|
|
58
|
-
:text="$gettext(`Component has been archived and shouldn't be used`)"
|
|
59
|
-
triggerType="hover"
|
|
60
|
-
></et-popover>
|
|
61
54
|
<arrow-container class="arrow-container">
|
|
62
|
-
<arrow-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<options-wrapper @click.prevent.stop>
|
|
82
|
-
<search-container @click.prevent.stop>
|
|
83
|
-
<search-input
|
|
84
|
-
:value="inputText"
|
|
85
|
-
:placeholder="$gettext('Keyword') + '...'"
|
|
86
|
-
@click.prevent.stop
|
|
87
|
-
@on-change="onSearch($event)"
|
|
88
|
-
ref="searchInput"
|
|
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')"
|
|
89
74
|
/>
|
|
90
|
-
</
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
v-else
|
|
97
|
-
:colSpan="colSpan"
|
|
98
|
-
v-for="(item, index) in optionItems"
|
|
99
|
-
:key="index"
|
|
100
|
-
@click="onItemClick(item)"
|
|
101
|
-
:tabindex="0"
|
|
102
|
-
@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"
|
|
103
81
|
>
|
|
104
|
-
<
|
|
105
|
-
<
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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)"
|
|
113
104
|
>
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
|
117
131
|
>
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
</options-wrapper>
|
|
123
|
-
<custom-container
|
|
124
|
-
v-if="inputText.length && allowFreeInputs"
|
|
125
|
-
@click="onCustomNameClick()"
|
|
126
|
-
>
|
|
127
|
-
<custom-name>{{ getCustomName }}</custom-name>
|
|
128
|
-
<custom-subtext>({{ $gettext("custom_component") }})</custom-subtext>
|
|
129
|
-
</custom-container>
|
|
130
|
-
</options-container>
|
|
132
|
+
</custom-container>
|
|
133
|
+
</options-container>
|
|
134
|
+
</arrow-container>
|
|
135
|
+
</component-container>
|
|
131
136
|
</dropdown-row>
|
|
132
137
|
</template>
|
|
133
138
|
|
|
@@ -177,6 +182,7 @@ const ComponentItem = styled.td`
|
|
|
177
182
|
|
|
178
183
|
span {
|
|
179
184
|
padding-left: 15px;
|
|
185
|
+
vertical-align: middle;
|
|
180
186
|
}
|
|
181
187
|
}
|
|
182
188
|
`
|
|
@@ -214,6 +220,15 @@ const ArrowContainer = styled.td`
|
|
|
214
220
|
}
|
|
215
221
|
`
|
|
216
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
|
+
|
|
217
232
|
const optionsAttrs = { top: Number, left: Number }
|
|
218
233
|
const OptionsContainer = styled("div", optionsAttrs)`
|
|
219
234
|
position: absolute;
|
|
@@ -247,7 +262,7 @@ const OptionsWrapper = styled.div`
|
|
|
247
262
|
font-size: 14px;
|
|
248
263
|
grid-template-rows: max-content;
|
|
249
264
|
height: max-content;
|
|
250
|
-
min-width:
|
|
265
|
+
min-width: 400px; // kind of an arbitrary number until we know all use cases
|
|
251
266
|
`
|
|
252
267
|
|
|
253
268
|
const OptionsItem = styled("div", containerAttrs)`
|
|
@@ -259,6 +274,7 @@ const OptionsItem = styled("div", containerAttrs)`
|
|
|
259
274
|
grid-gap: 30px;
|
|
260
275
|
padding: 10px;
|
|
261
276
|
height: max-content;
|
|
277
|
+
justify-items: flex-start;
|
|
262
278
|
|
|
263
279
|
span {
|
|
264
280
|
overflow: hidden;
|
|
@@ -342,6 +358,7 @@ export default {
|
|
|
342
358
|
Spinner,
|
|
343
359
|
EmptyText,
|
|
344
360
|
SearchInput,
|
|
361
|
+
ArrowWrapper,
|
|
345
362
|
OptionsWrapper,
|
|
346
363
|
OptionsItem,
|
|
347
364
|
SearchContainer,
|