Skip to content

Commit b711f5c

Browse files
Chartman123Chartman123
committed
move insert-menu to question slot
Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
1 parent 0cc3402 commit b711f5c

12 files changed

Lines changed: 302 additions & 216 deletions

‎src/components/Questions/Question.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@
157157

158158
<!-- Question content -->
159159
<slot />
160+
<!-- Insert question menu -->
161+
<slot name="insert" />
160162
</li>
161163
</template>
162164

‎src/components/Questions/QuestionColor.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@
3535
</NcButton>
3636
</div>
3737
</div>
38+
<template #insert>
39+
<slot name="insert" />
40+
</template>
3841
</Question>
3942
</template>
4043

‎src/components/Questions/QuestionDate.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,9 @@
9898
rangeSeparator=" - "
9999
@update:modelValue="onValueChange" />
100100
</div>
101+
<template #insert>
102+
<slot name="insert" />
103+
</template>
101104
</Question>
102105
</template>
103106

‎src/components/Questions/QuestionDropdown.vue‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -50,45 +50,53 @@
5050
v-else
5151
v-model="choices"
5252
class="question__content"
53-
:animation="200"
53+
:animation="300"
5454
direction="vertical"
5555
handle=".option__drag-handle"
5656
invertSwap
57-
tag="transition-group"
58-
:componentData="{
59-
name: isDragging
60-
? 'no-external-transition-on-drag'
61-
: 'options-list-transition',
62-
}"
57+
target=".sort-target"
6358
@change="saveOptionsOrder('choice')"
6459
@start="isDragging = true"
6560
@end="isDragging = false">
66-
<AnswerInput
67-
v-for="(answer, index) in choices"
68-
:key="answer.local ? 'option-local' : answer.id"
69-
ref="input"
70-
:answer="answer"
71-
:formId="formId"
72-
isDropdown
73-
:index="index"
74-
:isUnique="!isMultiple"
75-
:maxIndex="options.length - 1"
76-
:maxOptionLength="maxStringLengths.optionText"
77-
optionType="choice"
78-
@createAnswer="onCreateAnswer"
79-
@update:answer="updateAnswer"
80-
@delete="deleteOption"
81-
@focusNext="focusNextInput"
82-
@moveUp="onOptionMoveUp(index, OptionType.Choice)"
83-
@moveDown="onOptionMoveDown(index, OptionType.Choice)"
84-
@tabbedOut="checkValidOption" />
61+
<TransitionGroup
62+
type="transition"
63+
tag="ul"
64+
:name="
65+
isDragging
66+
? 'no-external-transition-on-drag'
67+
: 'options-list-transition'
68+
"
69+
class="sort-target">
70+
<AnswerInput
71+
v-for="(answer, index) in choices"
72+
:key="answer.local ? 'option-local' : answer.id"
73+
ref="input"
74+
:answer="answer"
75+
:formId="formId"
76+
isDropdown
77+
:index="index"
78+
:isUnique="!isMultiple"
79+
:maxIndex="options.length - 1"
80+
:maxOptionLength="maxStringLengths.optionText"
81+
optionType="choice"
82+
@createAnswer="onCreateAnswer"
83+
@update:answer="updateAnswer"
84+
@delete="deleteOption"
85+
@focusNext="focusNextInput"
86+
@moveUp="onOptionMoveUp(index, OptionType.Choice)"
87+
@moveDown="onOptionMoveDown(index, OptionType.Choice)"
88+
@tabbedOut="checkValidOption" />
89+
</TransitionGroup>
8590
</Draggable>
8691
</template>
8792

8893
<!-- Add multiple options modal -->
8994
<OptionInputDialog
9095
v-model:open="isOptionDialogShown"
9196
@multipleAnswers="handleMultipleOptions" />
97+
<template #insert>
98+
<slot name="insert" />
99+
</template>
92100
</Question>
93101
</template>
94102

‎src/components/Questions/QuestionFile.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,9 @@
141141
</li>
142142
</ul>
143143
</div>
144+
<template #insert>
145+
<slot name="insert" />
146+
</template>
144147
</Question>
145148
</template>
146149

‎src/components/Questions/QuestionGrid.vue‎

Lines changed: 64 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -96,79 +96,92 @@
9696
<Draggable
9797
v-model="columns"
9898
class="question__content"
99-
:animation="200"
99+
:animation="300"
100100
direction="vertical"
101101
handle=".option__drag-handle"
102102
invertSwap
103-
tag="transition-group"
104-
:componentData="{
105-
name: isDragging
106-
? 'no-external-transition-on-drag'
107-
: 'options-list-transition',
108-
}"
103+
target=".sort-target"
109104
@change="saveOptionsOrder('column')"
110105
@start="isDragging = true"
111106
@end="isDragging = false">
112107
<!-- Column input edit -->
113-
<AnswerInput
114-
v-for="(answer, index) in columns"
115-
:key="answer.local ? 'option-local' : answer.id"
116-
ref="input"
117-
:answer="answer"
118-
:formId="formId"
119-
:index="index"
120-
:isUnique="isUnique"
121-
:maxIndex="columns.length - 2"
122-
:maxOptionLength="maxStringLengths.optionText"
123-
optionType="column"
124-
@createAnswer="onCreateAnswer"
125-
@update:answer="updateAnswer"
126-
@delete="deleteOption"
127-
@focusNext="focusNextInput"
128-
@moveUp="onOptionMoveUp(index, 'column')"
129-
@moveDown="onOptionMoveDown(index, 'column')"
130-
@tabbedOut="checkValidOption('column')" />
108+
<TransitionGroup
109+
type="transition"
110+
tag="ul"
111+
:name="
112+
isDragging
113+
? 'no-external-transition-on-drag'
114+
: 'options-list-transition'
115+
"
116+
class="sort-target">
117+
<AnswerInput
118+
v-for="(answer, index) in columns"
119+
:key="answer.local ? 'option-local' : answer.id"
120+
ref="input"
121+
:answer="answer"
122+
:formId="formId"
123+
:index="index"
124+
:isUnique="isUnique"
125+
:maxIndex="columns.length - 2"
126+
:maxOptionLength="maxStringLengths.optionText"
127+
optionType="column"
128+
@createAnswer="onCreateAnswer"
129+
@update:answer="updateAnswer"
130+
@delete="deleteOption"
131+
@focusNext="focusNextInput"
132+
@moveUp="onOptionMoveUp(index, 'column')"
133+
@moveDown="onOptionMoveDown(index, 'column')"
134+
@tabbedOut="checkValidOption('column')" />
135+
</TransitionGroup>
131136
</Draggable>
132137

133138
<div>{{ t('forms', 'Rows') }}</div>
134139
<Draggable
135140
v-model="rows"
136141
class="question__content"
137-
:animation="200"
142+
:animation="300"
138143
direction="vertical"
139144
handle=".option__drag-handle"
140145
invertSwap
141-
tag="transition-group"
142-
:componentData="{
143-
name: isDragging
144-
? 'no-external-transition-on-drag'
145-
: 'options-list-transition',
146-
}"
146+
target=".sort-target"
147147
@change="saveOptionsOrder('row')"
148148
@start="isDragging = true"
149149
@end="isDragging = false">
150-
<!-- Row input edit -->
151-
<AnswerInput
152-
v-for="(answer, index) in rows"
153-
:key="answer.local ? 'option-local' : answer.id"
154-
ref="input"
155-
:answer="answer"
156-
:formId="formId"
157-
:index="index"
158-
:isUnique="isUnique"
159-
:maxIndex="rows.length - 2"
160-
:maxOptionLength="maxStringLengths.optionText"
161-
optionType="row"
162-
@createAnswer="onCreateAnswer"
163-
@update:answer="updateAnswer"
164-
@delete="deleteOption"
165-
@focusNext="focusNextInput"
166-
@moveUp="onOptionMoveUp(index, 'row')"
167-
@moveDown="onOptionMoveDown(index, 'row')"
168-
@tabbedOut="checkValidOption('row')" />
150+
<TransitionGroup
151+
type="transition"
152+
tag="ul"
153+
:name="
154+
isDragging
155+
? 'no-external-transition-on-drag'
156+
: 'options-list-transition'
157+
"
158+
class="sort-target">
159+
<!-- Row input edit -->
160+
<AnswerInput
161+
v-for="(answer, index) in rows"
162+
:key="answer.local ? 'option-local' : answer.id"
163+
ref="input"
164+
:answer="answer"
165+
:formId="formId"
166+
:index="index"
167+
:isUnique="isUnique"
168+
:maxIndex="rows.length - 2"
169+
:maxOptionLength="maxStringLengths.optionText"
170+
optionType="row"
171+
@createAnswer="onCreateAnswer"
172+
@update:answer="updateAnswer"
173+
@delete="deleteOption"
174+
@focusNext="focusNextInput"
175+
@moveUp="onOptionMoveUp(index, 'row')"
176+
@moveDown="onOptionMoveDown(index, 'row')"
177+
@tabbedOut="checkValidOption('row')" />
178+
</TransitionGroup>
169179
</Draggable>
170180
</template>
171181
</template>
182+
<template #insert>
183+
<slot name="insert" />
184+
</template>
172185
</Question>
173186
</template>
174187

‎src/components/Questions/QuestionLinearScale.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@
107107
{{ optionsLabelHighest }}
108108
</div>
109109
</div>
110+
<template #insert>
111+
<slot name="insert" />
112+
</template>
110113
</Question>
111114
</template>
112115

‎src/components/Questions/QuestionLong.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
@keypress="autoSizeText"
2828
@keydown.ctrl.enter="onKeydownCtrlEnter" />
2929
</div>
30+
<template #insert>
31+
<slot name="insert" />
32+
</template>
3033
</Question>
3134
</template>
3235

‎src/components/Questions/QuestionMultiple.vue‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -121,37 +121,42 @@
121121
v-else
122122
v-model="choices"
123123
class="question__content"
124-
:animation="200"
124+
:animation="300"
125125
direction="vertical"
126126
handle=".option__drag-handle"
127127
invertSwap
128-
tag="transition-group"
129-
:componentData="{
130-
name: isDragging
131-
? 'no-external-transition-on-drag'
132-
: 'options-list-transition',
133-
}"
128+
target=".sort-target"
134129
@change="saveOptionsOrder('choice')"
135130
@start="isDragging = true"
136131
@end="isDragging = false">
137-
<AnswerInput
138-
v-for="(answer, index) in choices"
139-
:key="answer.local ? 'option-local' : answer.id"
140-
ref="input"
141-
:answer="answer"
142-
:formId="formId"
143-
:index="index"
144-
:isUnique="isUnique"
145-
:maxIndex="options.length - 1"
146-
:maxOptionLength="maxStringLengths.optionText"
147-
optionType="choice"
148-
@createAnswer="onCreateAnswer"
149-
@update:answer="updateAnswer"
150-
@delete="deleteOption"
151-
@focusNext="focusNextInput"
152-
@moveUp="onOptionMoveUp(index, OptionType.Choice)"
153-
@moveDown="onOptionMoveDown(index, OptionType.Choice)"
154-
@tabbedOut="checkValidOption" />
132+
<TransitionGroup
133+
type="transition"
134+
tag="ul"
135+
:name="
136+
isDragging
137+
? 'no-external-transition-on-drag'
138+
: 'options-list-transition'
139+
"
140+
class="sort-target">
141+
<AnswerInput
142+
v-for="(answer, index) in choices"
143+
:key="answer.local ? 'option-local' : answer.id"
144+
ref="input"
145+
:answer="answer"
146+
:formId="formId"
147+
:index="index"
148+
:isUnique="isUnique"
149+
:maxIndex="options.length - 1"
150+
:maxOptionLength="maxStringLengths.optionText"
151+
optionType="choice"
152+
@createAnswer="onCreateAnswer"
153+
@update:answer="updateAnswer"
154+
@delete="deleteOption"
155+
@focusNext="focusNextInput"
156+
@moveUp="onOptionMoveUp(index, OptionType.Choice)"
157+
@moveDown="onOptionMoveDown(index, OptionType.Choice)"
158+
@tabbedOut="checkValidOption" />
159+
</TransitionGroup>
155160
</Draggable>
156161
<li
157162
v-if="allowOtherAnswer"
@@ -176,6 +181,9 @@
176181
<OptionInputDialog
177182
v-model:open="isOptionDialogShown"
178183
@multipleAnswers="handleMultipleOptions" />
184+
<template #insert>
185+
<slot name="insert" />
186+
</template>
179187
</Question>
180188
</template>
181189

0 commit comments

Comments
 (0)