Skip to content

Commit 47dee6d

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

12 files changed

Lines changed: 267 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: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -50,45 +50,48 @@
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+
tag="ul"
63+
:name="isDragging ? undefined : 'options-list-transition'"
64+
class="sort-target">
65+
<AnswerInput
66+
v-for="(answer, index) in choices"
67+
:key="answer.local ? 'option-local' : answer.id"
68+
ref="input"
69+
:answer="answer"
70+
:formId="formId"
71+
isDropdown
72+
:index="index"
73+
:isUnique="!isMultiple"
74+
:maxIndex="options.length - 1"
75+
:maxOptionLength="maxStringLengths.optionText"
76+
optionType="choice"
77+
@createAnswer="onCreateAnswer"
78+
@update:answer="updateAnswer"
79+
@delete="deleteOption"
80+
@focusNext="focusNextInput"
81+
@moveUp="onOptionMoveUp(index, OptionType.Choice)"
82+
@moveDown="onOptionMoveDown(index, OptionType.Choice)"
83+
@tabbedOut="checkValidOption" />
84+
</TransitionGroup>
8585
</Draggable>
8686
</template>
8787

8888
<!-- Add multiple options modal -->
8989
<OptionInputDialog
9090
v-model:open="isOptionDialogShown"
9191
@multipleAnswers="handleMultipleOptions" />
92+
<template #insert>
93+
<slot name="insert" />
94+
</template>
9295
</Question>
9396
</template>
9497

‎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: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -96,79 +96,82 @@
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+
tag="ul"
110+
:name="isDragging ? undefined : 'options-list-transition'"
111+
class="sort-target">
112+
<AnswerInput
113+
v-for="(answer, index) in columns"
114+
:key="answer.local ? 'option-local' : answer.id"
115+
ref="input"
116+
:answer="answer"
117+
:formId="formId"
118+
:index="index"
119+
:isUnique="isUnique"
120+
:maxIndex="columns.length - 2"
121+
:maxOptionLength="maxStringLengths.optionText"
122+
optionType="column"
123+
@createAnswer="onCreateAnswer"
124+
@update:answer="updateAnswer"
125+
@delete="deleteOption"
126+
@focusNext="focusNextInput"
127+
@moveUp="onOptionMoveUp(index, 'column')"
128+
@moveDown="onOptionMoveDown(index, 'column')"
129+
@tabbedOut="checkValidOption('column')" />
130+
</TransitionGroup>
131131
</Draggable>
132132

133133
<div>{{ t('forms', 'Rows') }}</div>
134134
<Draggable
135135
v-model="rows"
136136
class="question__content"
137-
:animation="200"
137+
:animation="300"
138138
direction="vertical"
139139
handle=".option__drag-handle"
140140
invertSwap
141-
tag="transition-group"
142-
:componentData="{
143-
name: isDragging
144-
? 'no-external-transition-on-drag'
145-
: 'options-list-transition',
146-
}"
141+
target=".sort-target"
147142
@change="saveOptionsOrder('row')"
148143
@start="isDragging = true"
149144
@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')" />
145+
<TransitionGroup
146+
tag="ul"
147+
:name="isDragging ? undefined : 'options-list-transition'"
148+
class="sort-target">
149+
<!-- Row input edit -->
150+
<AnswerInput
151+
v-for="(answer, index) in rows"
152+
:key="answer.local ? 'option-local' : answer.id"
153+
ref="input"
154+
:answer="answer"
155+
:formId="formId"
156+
:index="index"
157+
:isUnique="isUnique"
158+
:maxIndex="rows.length - 2"
159+
:maxOptionLength="maxStringLengths.optionText"
160+
optionType="row"
161+
@createAnswer="onCreateAnswer"
162+
@update:answer="updateAnswer"
163+
@delete="deleteOption"
164+
@focusNext="focusNextInput"
165+
@moveUp="onOptionMoveUp(index, 'row')"
166+
@moveDown="onOptionMoveDown(index, 'row')"
167+
@tabbedOut="checkValidOption('row')" />
168+
</TransitionGroup>
169169
</Draggable>
170170
</template>
171171
</template>
172+
<template #insert>
173+
<slot name="insert" />
174+
</template>
172175
</Question>
173176
</template>
174177

‎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: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -121,37 +121,37 @@
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+
tag="ul"
134+
:name="isDragging ? undefined : 'options-list-transition'"
135+
class="sort-target">
136+
<AnswerInput
137+
v-for="(answer, index) in choices"
138+
:key="answer.local ? 'option-local' : answer.id"
139+
ref="input"
140+
:answer="answer"
141+
:formId="formId"
142+
:index="index"
143+
:isUnique="isUnique"
144+
:maxIndex="options.length - 1"
145+
:maxOptionLength="maxStringLengths.optionText"
146+
optionType="choice"
147+
@createAnswer="onCreateAnswer"
148+
@update:answer="updateAnswer"
149+
@delete="deleteOption"
150+
@focusNext="focusNextInput"
151+
@moveUp="onOptionMoveUp(index, OptionType.Choice)"
152+
@moveDown="onOptionMoveDown(index, OptionType.Choice)"
153+
@tabbedOut="checkValidOption" />
154+
</TransitionGroup>
155155
</Draggable>
156156
<li
157157
v-if="allowOtherAnswer"
@@ -176,6 +176,9 @@
176176
<OptionInputDialog
177177
v-model:open="isOptionDialogShown"
178178
@multipleAnswers="handleMultipleOptions" />
179+
<template #insert>
180+
<slot name="insert" />
181+
</template>
179182
</Question>
180183
</template>
181184

0 commit comments

Comments
 (0)