|
|
|
@ -129,6 +129,7 @@ watch(inputs, () => {
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div class="w-full"> |
|
|
|
|
<div class="max-h-[250px] overflow-x-auto scrollbar-thin-dull pr-3"> |
|
|
|
|
<Draggable :list="options" item-key="id" handle=".nc-child-draggable-icon"> |
|
|
|
|
<template #item="{ element, index }"> |
|
|
|
|
<div class="flex py-1 items-center nc-select-option"> |
|
|
|
@ -145,26 +146,30 @@ watch(inputs, () => {
|
|
|
|
|
@update:model-value="colorMenus[index] = false" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
<MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" /> |
|
|
|
|
<MdiArrowDownDropCircle |
|
|
|
|
class="mr-2 text-[1.5em] outline-0 hover:!text-[1.75em]" |
|
|
|
|
:class="{ 'text-[1.75em]': colorMenus[index] }" |
|
|
|
|
:style="{ color: element.color }" |
|
|
|
|
/> |
|
|
|
|
</a-dropdown> |
|
|
|
|
|
|
|
|
|
<a-input ref="inputs" v-model:value="element.title" class="caption" @change="optionChanged(element.id)" /> |
|
|
|
|
|
|
|
|
|
<MdiClose class="ml-2" :style="{ color: 'red' }" @click="removeOption(index)" /> |
|
|
|
|
<MdiClose class="ml-2 hover:!text-black" :style="{ color: 'red' }" @click="removeOption(index)" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template #footer> |
|
|
|
|
<div v-if="validateInfos?.['colOptions.options']?.help?.[0]?.[0]" class="text-error text-[10px] my-2"> |
|
|
|
|
{{ validateInfos['colOptions.options'].help[0][0] }} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
</Draggable> |
|
|
|
|
</div> |
|
|
|
|
<a-button type="dashed" class="w-full caption mt-2" @click="addNewOption()"> |
|
|
|
|
<div class="flex items-center"> |
|
|
|
|
<MdiPlus /> |
|
|
|
|
<span class="flex-auto">Add option</span> |
|
|
|
|
</div> |
|
|
|
|
</a-button> |
|
|
|
|
</template> |
|
|
|
|
</Draggable> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|