matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Field Help as Html text & Help Position (#115)

Browse Source 
* Field Help as Html text & Help Position

* Re-organize field options modal

* put margin for above help
This commit is contained in:
Chirag Chhatrala
2023-04-19 13:43:50 +05:30
committed by GitHub
parent 5e7eb60674
commit 3f2fe352e8
23 changed files with 124 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/components/forms/CheckboxInput.vue
View File

@@ -1,12 +1,15 @@
<template>
<div :class="wrapperClass">
<small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)">
<slot name="label">
{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
</slot>
</v-checkbox>
<small v-if="help" :class="theme.default.help">
<slot name="help">{{ help }}</slot>
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>

2
resources/js/components/forms/CodeInput.vue
View File

@@ -16,7 +16,7 @@
/>
<small v-if="help" :class="theme.CodeInput.help">
<slot name="help">{{ help }}</slot>
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>

2
resources/js/components/forms/ColorInput.vue
View File

@@ -9,7 +9,7 @@
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<small v-if="help" :class="theme.default.help">
<slot name="help">{{ help }}</slot>
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>

7
resources/js/components/forms/DateInput.vue
View File

@@ -6,6 +6,9 @@
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<div class="flex" v-if="!dateRange">
<input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :class="inputClasses" :disabled="disabled"
@@ -28,8 +31,8 @@
</div>
</div>
<small v-if="help" :class="theme.default.help">
<slot name="help">{{ help }}</slot>
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name"/>
</div>

7
resources/js/components/forms/FileInput.vue
View File

@@ -6,6 +6,9 @@
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<span class="inline-block w-full rounded-md shadow-sm">
<button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" role="button"
class="cursor-pointer relative flex"
@@ -60,8 +63,8 @@
</template>
</button>
</span>
<small v-if="help" :class="theme.default.help">
<slot name="help">{{ help }}</slot>
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />

7
resources/js/components/forms/FlatSelectInput.vue
View File

@@ -6,8 +6,8 @@
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<small v-if="help" :class="theme.SelectInput.help" class="block mb-2">
<slot name="help">{{ help }}</slot>
<small v-if="help && helpPosition=='above_input'" :class="theme.SelectInput.help" class="block mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
@@ -25,6 +25,9 @@
</div>
</div>
<small v-if="help && helpPosition=='below_input'" :class="theme.SelectInput.help" class="block">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>
</template>

2
resources/js/components/forms/ImageInput.vue
View File

@@ -36,7 +36,7 @@
</button>
</span>
<small v-if="help" :class="theme.default.help">
<slot name="help">{{ help }}</slot>
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />

7
resources/js/components/forms/RatingInput.vue
View File

@@ -6,6 +6,9 @@
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<div class="stars-outer">
<div v-for="i in numberOfStars" :key="i"
@@ -23,8 +26,8 @@
</div>
</div>
<small v-if="help" :class="theme.default.help">
<slot name="help">{{ help }}</slot>
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>

9
resources/js/components/forms/RichTextAreaInput.vue
View File

@@ -6,14 +6,19 @@
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<div v-if="help && helpPosition=='above_input'" class="flex mb-1">
<small :class="theme.RichTextAreaInput.help" class="grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
</div>
<vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled"
:placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
:editor-toolbar="editorToolbar" class="rich-editor resize-y"
:style="inputStyle"
/>
<small v-if="help" :class="theme.RichTextAreaInput.help">
<slot name="help">{{ help }}</slot>
<small v-if="help && helpPosition=='below_input'" :class="theme.RichTextAreaInput.help">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>

6
resources/js/components/forms/SelectInput.vue
View File

@@ -17,6 +17,8 @@
:has-error="hasValidation && form.errors.has(name)"
:allowCreation="allowCreation"
:disabled="disabled"
:help="help"
:help-position="helpPosition"
@update-options="updateOptions"
>
@@ -55,9 +57,7 @@
</slot>
</template>
</v-select>
<small v-if="help" :class="theme.SelectInput.help">
<slot name="help">{{ help }}</slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>
</template>

7
resources/js/components/forms/SignatureInput.vue
View File

@@ -6,6 +6,11 @@
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<div v-if="help && helpPosition=='above_input'" class="flex mb-1">
<small :class="theme.default.help" class="flex-grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
</div>
<VueSignaturePad ref="signaturePad"
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]" height="150px"
@@ -14,7 +19,7 @@
/>
<div class="flex">
<small v-if="help" :class="theme.default.help" class="flex-grow">
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help" class="flex-grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<small v-else class="flex-grow" />

11
resources/js/components/forms/TextAreaInput.vue
View File

@@ -6,6 +6,11 @@
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<div v-if="help && helpPosition=='above_input'" class="flex mb-1">
<small :class="theme.default.help" class="flex-grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
</div>
<textarea :id="id?id:name" v-model="compVal" :disabled="disabled"
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
class="resize-y"
@@ -13,9 +18,9 @@
:placeholder="placeholder"
:maxlength="maxCharLimit"
/>
<div v-if="help || showCharLimit" class="flex">
<small v-if="help" :class="theme.default.help" class="flex-grow">
<slot name="help">{{ help }}</slot>
<div v-if="(help && helpPosition=='below_input') || showCharLimit" class="flex">
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help" class="flex-grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<small v-else class="flex-grow"></small>
<small v-if="showCharLimit && maxCharLimit" :class="theme.default.help">

11
resources/js/components/forms/TextInput.vue
View File

@@ -8,6 +8,11 @@
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
</slot>
<div v-if="help && helpPosition=='above_input'" class="flex mb-1">
<small :class="theme.default.help" class="grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
</div>
<input :id="id?id:name" v-model="compVal" :disabled="disabled"
:type="nativeType"
:style="inputStyle"
@@ -16,9 +21,9 @@
:placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
@change="onChange" @keydown.enter.prevent="onEnterPress"
>
<div v-if="help || showCharLimit" class="flex">
<small v-if="help" :class="theme.default.help" class="flex-grow">
<slot name="help">{{ help }}</slot>
<div v-if="(help && helpPosition=='below_input') || showCharLimit" class="flex">
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help" class="flex-grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<small v-else class="flex-grow"></small>
<small v-if="showCharLimit && maxCharLimit" :class="theme.default.help">

7
resources/js/components/forms/ToggleSwitchInput.vue
View File

@@ -1,11 +1,14 @@
<template>
<div :class="wrapperClass">
<small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<div class="flex">
<v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled" :name="name" @input="$emit('input',$event)" />
<span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
</div>
<small v-if="help" :class="theme.default.help">
<slot name="help">{{ help }}</slot>
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>

11
resources/js/components/forms/components/VSelect.vue
View File

@@ -6,6 +6,9 @@
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<small v-if="help && helpPosition=='above_input'" :class="theme.SelectInput.help" class="flex mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<div v-on-clickaway="closeDropdown"
class="relative"
@@ -73,6 +76,10 @@
</ul>
</div>
</div>
<small v-if="help && helpPosition=='below_input'" :class="theme.SelectInput.help">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
</div>
</template>
@@ -108,7 +115,9 @@ export default {
uppercaseLabels: { type: Boolean, default: true },
theme: { type: Object, default: () => themes.default },
allowCreation: { type: Boolean, default: false },
disabled: { type: Boolean, default: false }
disabled: { type: Boolean, default: false },
help: { type: String, default: null },
helpPosition: { type: String, default: 'below_input' },
},
data () {
return {