Block hide, width, align (#109)
This commit is contained in:
Chirag Chhatrala
GitHub
parent
abb2bbbaf7
commit
9784e873f2
|
|
@ -87,6 +87,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
|
|||
'properties.*.multiple' => 'boolean|nullable',
|
||||
'properties.*.timezone' => 'sometimes|nullable',
|
||||
'properties.*.width' => ['sometimes', Rule::in(['full','1/2','1/3','2/3','1/3','3/4','1/4'])],
|
||||
'properties.*.align' => ['sometimes', Rule::in(['left', 'center', 'right', 'justify'])],
|
||||
'properties.*.allowed_file_types' => 'sometimes|nullable',
|
||||
'properties.*.use_toggle_switch' => 'boolean|nullable',
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@ export default {
|
|||
return [
|
||||
[{ header: 1 }, { header: 2 }],
|
||||
['bold', 'italic', 'underline', 'link'],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }]
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
[{color: []}]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,18 +16,18 @@
|
|||
/>
|
||||
<template v-else>
|
||||
<div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
|
||||
class="nf-text w-full px-2 mb-3"
|
||||
class="nf-text w-full px-2 mb-3" :class="[getFieldClasses(field), getFieldAlignClasses(field)]"
|
||||
v-html="field.content"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id"
|
||||
class="nf-code w-full px-2 mb-3"
|
||||
class="nf-code w-full px-2 mb-3" :class="getFieldClasses(field)"
|
||||
v-html="field.content"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id"
|
||||
class="border-b my-4 w-full mx-2"
|
||||
class="border-b my-4 w-full mx-2" :class="getFieldClasses(field)"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id"
|
||||
:key="field.id" class="my-4 w-full px-2"
|
||||
:key="field.id" class="my-4 w-full px-2" :class="[getFieldClasses(field), getFieldAlignClasses(field)]"
|
||||
>
|
||||
<div v-if="!field.image_block" class="p-4 border border-dashed">
|
||||
Open <b>{{ field.name }}'s</b> block settings to upload image.
|
||||
|
|
@ -440,6 +440,16 @@ export default {
|
|||
return 'w-full sm:w-3/4 px-2'
|
||||
}
|
||||
},
|
||||
getFieldAlignClasses (field) {
|
||||
if (!field.align || field.align === 'left') return 'text-left'
|
||||
else if (field.align === 'right') {
|
||||
return 'text-right'
|
||||
} else if (field.align === 'center') {
|
||||
return 'text-center'
|
||||
} else if (field.align === 'justify') {
|
||||
return 'text-justify'
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Get the right input component options for the field/options
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -66,19 +66,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
class="hover:bg-red-50 text-gray-500 hover:text-red-600 rounded transition-colors cursor-pointer p-2 hidden md:group-hover:block"
|
||||
@click="removing=field.id"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<button v-if="!field.type.startsWith('nf-')"
|
||||
class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
|
||||
<button 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)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -110,7 +110,11 @@ export default {
|
|||
},
|
||||
actionOptions() {
|
||||
if (['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image'].includes(this.field.type)) {
|
||||
return [{name: 'Hide Block', value: 'hide-block'}]
|
||||
if (this.field.hidden) {
|
||||
return [{ name: 'Show Block', value: 'show-block' }]
|
||||
}else{
|
||||
return [{ name: 'Hide Block', value: 'hide-block' }]
|
||||
}
|
||||
}
|
||||
|
||||
if (this.field.hidden) {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,44 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
||||
<div class="-mx-4 sm:-mx-6 px-5 pt-0">
|
||||
<h3 class="font-semibold block text-lg">
|
||||
General
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-5">
|
||||
Exclude this field or make it required.
|
||||
</p>
|
||||
<v-checkbox v-model="field.hidden" class="mb-3"
|
||||
:name="field.id+'_hidden'"
|
||||
@input="onFieldHiddenChange"
|
||||
>
|
||||
Hidden
|
||||
</v-checkbox>
|
||||
<select-input name="width" class="mt-4"
|
||||
:options="[
|
||||
{name:'Full',value:'full'},
|
||||
{name:'1/2 (half width)',value:'1/2'},
|
||||
{name:'1/3 (a third of the width)',value:'1/3'},
|
||||
{name:'2/3 (two thirds of the width)',value:'2/3'},
|
||||
{name:'1/4 (a quarter of the width)',value:'1/4'},
|
||||
{name:'3/4 (three quarters of the width)',value:'3/4'}
|
||||
]"
|
||||
:form="field" label="Field Width"
|
||||
/>
|
||||
<select-input v-if="['nf-text','nf-image'].includes(field.type)" name="align" class="mt-4"
|
||||
:options="[
|
||||
{name:'Left',value:'left'},
|
||||
{name:'Center',value:'center'},
|
||||
{name:'Right',value:'right'},
|
||||
{name:'Justify',value:'justify'}
|
||||
]"
|
||||
:form="field" label="Field Alignment"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="field.type == 'nf-text'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
||||
<rich-text-area-input name="content"
|
||||
:form="field"
|
||||
|
|
@ -45,61 +83,6 @@
|
|||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="field.type == 'nf-page-body-input'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
||||
<div class="-mx-4 sm:-mx-6 p-5 pt-0 border-b">
|
||||
<h3 class="font-semibold block text-lg">
|
||||
General
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-5">
|
||||
Exclude this field or make it required.
|
||||
</p>
|
||||
<v-checkbox v-model="field.hidden" class="mb-3"
|
||||
:name="field.id+'_hidden'"
|
||||
@input="onFieldHiddenChange"
|
||||
>
|
||||
Hidden
|
||||
</v-checkbox>
|
||||
<v-checkbox v-model="field.required"
|
||||
:name="field.id+'_required'"
|
||||
@input="onFieldRequiredChange"
|
||||
>
|
||||
Required
|
||||
</v-checkbox>
|
||||
</div>
|
||||
<div class="-mx-4 sm:-mx-6 p-5">
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Customization
|
||||
<pro-tag/>
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-400 mb-5">
|
||||
Change your form field name, pre-fill a value, add hints.
|
||||
</p>
|
||||
|
||||
<text-input name="name" class="mt-4"
|
||||
:form="field" :required="true"
|
||||
label="Field Name"
|
||||
/>
|
||||
<text-area-input name="prefill" class="mt-4"
|
||||
:form="field"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
|
||||
<!-- Placeholder -->
|
||||
<text-input name="placeholder" class="mt-4"
|
||||
:form="field"
|
||||
label="Empty Input Text (Placeholder)"
|
||||
/>
|
||||
|
||||
<!-- Help -->
|
||||
<text-input name="help" class="mt-4"
|
||||
:form="field"
|
||||
label="Field Help"
|
||||
|
||||
help="Your field help will be shown below the field, just like this message."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="field.type == 'nf-divider'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
||||
<text-input name="name" class="mt-4"
|
||||
:form="field" :required="true"
|
||||
|
|
@ -184,12 +167,6 @@ export default {
|
|||
this.close()
|
||||
this.$emit('duplicate-block', this.field)
|
||||
},
|
||||
onFieldRequiredChange(val) {
|
||||
this.$set(this.field, 'required', val)
|
||||
if (this.field.required) {
|
||||
this.$set(this.field, 'hidden', false)
|
||||
}
|
||||
},
|
||||
onFieldHiddenChange(val) {
|
||||
this.$set(this.field, 'hidden', val)
|
||||
if (this.field.hidden) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue