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 --> <!-- Field name and type -->
<div class="flex flex-col flex-grow truncate"> <div class="flex flex-col flex-grow truncate">
<editable-div class="truncate" :value="field.name" @input="onChangeName(field, $event)"> <editable-div class="max-w-full flex items-center" :value="field.name" @input="onChangeName(field, $event)">
<label class="cursor-pointer truncate w-full"> <div class="cursor-pointer max-w-full truncate">
{{ field.name }} {{ field.name }}
</label> </div>
<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>
</editable-div> </editable-div>
<p class="text-xs text-gray-400 w-full truncate pl-2"> <p class="text-xs text-gray-400 w-full truncate pl-2">
@ -69,13 +60,15 @@
<template v-if="removing == field.id"> <template v-if="removing == field.id">
<div class="flex text-sm items-center"> <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> </div>
</template> </template>
<template v-else> <template v-else>
<button v-if="!field.type.startsWith('nf-')" <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="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
:class="{'text-blue-500': !field.hidden, 'text-gray-500': field.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)" @click="toggleHidden(field)"
> >
<template v-if="!field.hidden"> <template v-if="!field.hidden">
@ -104,8 +97,8 @@
</template> </template>
</button> </button>
<button v-if="!field.type.startsWith('nf-')" <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" class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
@click="toggleRequired(field)" @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" <div class="w-4 h-4 text-center font-bold text-3xl"
:class="{'text-red-500': field.required, 'text-gray-500': !field.required}" :class="{'text-red-500': field.required, 'text-gray-500': !field.required}"
@ -155,7 +148,8 @@
<v-button <v-button
class="w-full mt-4" color="light-gray" class="w-full mt-4" color="light-gray"
@click="showAddBlock=true"> @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" <path d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
stroke-linecap="round" stroke-linejoin="round"/> stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>