village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clearer required/hidden field hint

This commit is contained in:
Julien Nahum 2023-01-04 14:25:55 +01:00
parent 771e3b01c5
commit 4fb75ccb59
1 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/components/open/forms/components/FormFieldsEditor.vue
View File

@ -37,19 +37,10 @@
<!-- Field name and type -->
<div class="flex flex-col flex-grow truncate">
<editable-div class="truncate" :value="field.name" @input="onChangeName(field, $event)">
<label class="cursor-pointer truncate w-full">
<editable-div class="max-w-full flex items-center" :value="field.name" @input="onChangeName(field, $event)">
<div class="cursor-pointer max-w-full truncate">
{{ field.name }}
</label>
<span v-if="field.required" class="text-red-500 required-dot">*</span>
<svg v-if="field.hidden" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
/>
</svg>
</div>
</editable-div>
<p class="text-xs text-gray-400 w-full truncate pl-2">
@ -69,13 +60,15 @@
<template v-if="removing == field.id">
<div class="flex text-sm items-center">
Remove block? <v-button class="inline ml-1" color="red" size="small" @click="removeBlock(index)">Yes</v-button> <v-button @click="removing=false" class="inline ml-1" color="light-gray" size="small">No</v-button>
Remove block?
<v-button class="inline ml-1" color="red" size="small" @click="removeBlock(index)">Yes</v-button>
<v-button @click="removing=false" class="inline ml-1" color="light-gray" size="small">No</v-button>
</div>
</template>
<template v-else>
<button v-if="!field.type.startsWith('nf-')"
class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden group-hover:md:block"
:class="{'text-blue-500': !field.hidden, 'text-gray-500': field.hidden}"
class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
:class="{'text-blue-500': !field.hidden, 'text-gray-500': field.hidden, 'group-hover:md:block': !field.hidden, 'md:block':field.hidden}"
@click="toggleHidden(field)"
>
<template v-if="!field.hidden">
@ -104,8 +97,8 @@
</template>
</button>
<button v-if="!field.type.startsWith('nf-')"
class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden md:group-hover:block"
@click="toggleRequired(field)"
class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
@click="toggleRequired(field)" :class="{'group-hover:md:block': !field.required, 'md:block':field.required}"
>
<div class="w-4 h-4 text-center font-bold text-3xl"
:class="{'text-red-500': field.required, 'text-gray-500': !field.required}"
@ -155,7 +148,8 @@
<v-button
class="w-full mt-4" color="light-gray"
@click="showAddBlock=true">
<svg class="w-4 h-4 text-nt-blue inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg class="w-4 h-4 text-nt-blue inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>