@eturnity/eturnity_reusable_components 1.1.36 → 1.1.39

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/tableDropdown/index.vue +100 -75
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "1.1.36",
3
+ "version": "1.1.39",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
package/src/components/tableDropdown/index.vue CHANGED
@@ -37,7 +37,7 @@
37
37
  {{ $gettext("No main component template") }}
38
38
  </no-template>
39
39
  <input-container
40
- v-else-if="item.type === 'input'"
40
+ v-if="item.type === 'input'"
41
41
  @click.stop="onInputClick()"
42
42
  >
43
43
  <input-text
@@ -49,85 +49,92 @@
49
49
  @input-change="onCustomInputChange($event)"
50
50
  />
51
51
  </input-container>
52
- <span v-else> {{ item.value }}</span>
52
+ <text-container v-else>
53
+ <span> {{ item.value }}</span>
54
+ </text-container>
53
55
  </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
56
  <arrow-container class="arrow-container">
62
- <arrow-down
63
- @click.native.stop="toggleOpen"
64
- v-if="!isOpen"
65
- class="arrow-dropdown"
66
- :src="require('../../assets/icons/collapse_arrow_icon.svg')"
67
- />
68
- <arrow-up
69
- @click.native.stop="toggleOpen"
70
- v-else
71
- :src="require('../../assets/icons/collapse_arrow_icon.svg')"
72
- />
73
- </arrow-container>
74
- </component-container>
75
- <options-container
76
- v-if="isOpen"
77
- :top="getItemLocation('top')"
78
- :left="getItemLocation('left')"
79
- ref="optionsContainer"
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"
57
+ <arrow-wrapper :showArchived="showArchived">
58
+ <et-popover
59
+ v-if="showArchived"
60
+ button-class="error"
61
+ :text="
62
+ $gettext(`Component has been archived and shouldn't be used`)
63
+ "
64
+ triggerType="hover"
65
+ ></et-popover>
66
+ <arrow-down
67
+ @click.native.stop="toggleOpen"
68
+ v-if="!isOpen"
69
+ class="arrow-dropdown"
70
+ :src="require('../../assets/icons/collapse_arrow_icon.svg')"
89
71
  />
90
- </search-container>
91
- <spinner v-if="optionsLoading" />
92
- <empty-text v-else-if="!optionsLoading && !optionItems.length">
93
- {{ emptyText ? emptyText : $gettext("No components found.") }}
94
- </empty-text>
95
- <options-item
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)"
72
+ <arrow-up
73
+ @click.native.stop="toggleOpen"
74
+ v-else
75
+ :src="require('../../assets/icons/collapse_arrow_icon.svg')"
76
+ />
77
+ </arrow-wrapper>
78
+ <options-container
79
+ v-if="isOpen"
80
+ :top="getItemLocation('top')"
81
+ :left="getItemLocation('left')"
82
+ ref="optionsContainer"
103
83
  >
104
- <template v-for="(option, idx) in optionsDisplay">
105
- <span v-if="option !== 'template'" :key="idx">
106
- {{ item[option] }}
107
- </span>
108
- <template-button
109
- @click.stop="onTemplateClick(item)"
110
- v-else-if="option === 'template' && item.has_template"
111
- :key="idx"
112
- >{{ $gettext("Use template...") }}</template-button
84
+ <options-wrapper @click.prevent.stop>
85
+ <search-container @click.prevent.stop>
86
+ <search-input
87
+ :value="inputText"
88
+ :placeholder="$gettext('Keyword') + '...'"
89
+ @click.prevent.stop
90
+ @on-change="onSearch($event)"
91
+ ref="searchInput"
92
+ />
93
+ </search-container>
94
+ <spinner v-if="optionsLoading" />
95
+ <empty-text v-else-if="!optionsLoading && !optionItems.length">
96
+ {{ emptyText ? emptyText : $gettext("No components found.") }}
97
+ </empty-text>
98
+ <options-item
99
+ v-else
100
+ :colSpan="colSpan - 1"
101
+ v-for="(item, index) in optionItems"
102
+ :key="index"
103
+ @click="onItemClick(item)"
104
+ :tabindex="0"
105
+ @keyup.enter.native="onItemClick(item)"
113
106
  >
114
- <no-template
115
- v-else-if="option === 'template' && !item.has_template"
116
- :key="idx"
107
+ <template v-for="(option, idx) in optionsDisplay">
108
+ <span v-if="option !== 'template'" :key="idx">
109
+ {{ item[option] }}
110
+ </span>
111
+ <template-button
112
+ @click.stop="onTemplateClick(item)"
113
+ v-else-if="option === 'template' && item.has_template"
114
+ :key="idx"
115
+ >{{ $gettext("Use template...") }}</template-button
116
+ >
117
+ <no-template
118
+ v-else-if="option === 'template' && !item.has_template"
119
+ :key="idx"
120
+ >
121
+ {{ $gettext("No main component template") }}
122
+ </no-template>
123
+ </template>
124
+ </options-item>
125
+ </options-wrapper>
126
+ <custom-container
127
+ v-if="inputText.length && allowFreeInputs"
128
+ @click="onCustomNameClick()"
129
+ >
130
+ <custom-name>{{ getCustomName }}</custom-name>
131
+ <custom-subtext
132
+ >({{ $gettext("custom_component") }})</custom-subtext
117
133
  >
118
- {{ $gettext("No main component template") }}
119
- </no-template>
120
- </template>
121
- </options-item>
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>
134
+ </custom-container>
135
+ </options-container>
136
+ </arrow-container>
137
+ </component-container>
131
138
  </dropdown-row>
132
139
  </template>
133
140
 
@@ -214,6 +221,15 @@ const ArrowContainer = styled.td`
214
221
  }
215
222
  `
216
223
 
224
+ const arrowAttrs = { showArchived: Boolean }
225
+ const ArrowWrapper = styled("div", arrowAttrs)`
226
+ display: grid;
227
+ grid-template-columns: ${(props) =>
228
+ props.showArchived ? "auto auto" : "auto"};
229
+ align-items: center;
230
+ justify-items: center;
231
+ `
232
+
217
233
  const optionsAttrs = { top: Number, left: Number }
218
234
  const OptionsContainer = styled("div", optionsAttrs)`
219
235
  position: absolute;
@@ -247,7 +263,7 @@ const OptionsWrapper = styled.div`
247
263
  font-size: 14px;
248
264
  grid-template-rows: max-content;
249
265
  height: max-content;
250
- min-width: 350px;
266
+ min-width: 400px; // kind of an arbitrary number until we know all use cases
251
267
  `
252
268
 
253
269
  const OptionsItem = styled("div", containerAttrs)`
@@ -259,6 +275,7 @@ const OptionsItem = styled("div", containerAttrs)`
259
275
  grid-gap: 30px;
260
276
  padding: 10px;
261
277
  height: max-content;
278
+ justify-items: flex-start;
262
279
 
263
280
  span {
264
281
  overflow: hidden;
@@ -330,6 +347,12 @@ const CustomSubtext = styled.div`
330
347
  color: ${(props) => props.theme.colors.grey3};
331
348
  `
332
349
 
350
+ const TextContainer = styled.div`
351
+ height: 100%;
352
+ display: grid;
353
+ align-items: center;
354
+ `
355
+
333
356
  export default {
334
357
  name: "table-dropdown",
335
358
  components: {
@@ -342,6 +365,7 @@ export default {
342
365
  Spinner,
343
366
  EmptyText,
344
367
  SearchInput,
368
+ ArrowWrapper,
345
369
  OptionsWrapper,
346
370
  OptionsItem,
347
371
  SearchContainer,
@@ -354,6 +378,7 @@ export default {
354
378
  CustomName,
355
379
  CustomSubtext,
356
380
  ArrowContainer,
381
+ TextContainer,
357
382
  },
358
383
  props: {
359
384
  colSpan: {