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

Started to refactor input components

This commit is contained in:
Julien Nahum 2023-10-28 11:17:50 +01:00
parent 7eb546703f
commit 8e8bad3754
17 changed files with 271 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/app.js vendored
View File

@ -22,7 +22,7 @@ registerComponents(app)
configureCompat({ configureCompat({
// default everything to Vue 2 behavior // default everything to Vue 2 behavior
MODE: 2, MODE: 2,
GLOBAL_MOUNT: false, // GLOBAL_MOUNT: false,
COMPONENT_V_MODEL: false, COMPONENT_V_MODEL: false,
INSTANCE_SET: false, INSTANCE_SET: false,
INSTANCE_DELETE: false INSTANCE_DELETE: false

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

@ -1,34 +1,56 @@
<template> <template>
<div :class="wrapperClass"> <input-wrapper v-bind="$props">
<small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1"> <template #label>
<slot name="help"><span class="field-help" v-html="help" /></slot> <span />
</small> </template>
<v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)">
<v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name">
<slot name="label"> <slot name="label">
{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span> {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
</slot> </slot>
</v-checkbox> </v-checkbox>
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
<slot name="help"><span class="field-help" v-html="help" /></slot> <template #help>
</small> <slot name="help" />
<has-error v-if="hasValidation" :form="form" :field="name" /> </template>
</div>
<template #error>
<slot name="error" />
</template>
</input-wrapper>
</template> </template>
<script> <script>
import inputMixin from '~/mixins/forms/input.js' import { inputProps, useFormInput } from './useFormInput.js'
import VCheckbox from './components/VCheckbox.vue' import VCheckbox from './components/VCheckbox.vue'
import InputWrapper from './components/InputWrapper.vue'
export default { export default {
name: 'CheckboxInput', name: 'CheckboxInput',
components: { VCheckbox }, components: { InputWrapper, VCheckbox },
mixins: [inputMixin], props: {
props: {}, ...inputProps
},
setup (props, context) {
const {
compVal,
inputStyle,
hasValidation,
hasError
} = useFormInput(props, context)
return {
compVal,
inputStyle,
hasValidation,
hasError
}
},
mounted () { mounted () {
this.compVal = !!this.compVal this.compVal = !!this.compVal
this.$emit('input', !!this.compVal)
} }
} }
</script> </script>

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

@ -1,13 +1,18 @@
<template> <template>
<div :class="wrapperClass"> <input-wrapper
<label v-if="label" :for="id?id:name" v-bind="$props"
:class="[theme.CodeInput.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]" >
> <template #label>
{{ label }} <slot name="label" />
<span v-if="required" class="text-red-500 required-dot">*</span> </template>
</label>
<div :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"> <template #help>
<slot name="help" />
</template>
<div
:class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
>
<codemirror :id="id?id:name" v-model="compVal" :disabled="disabled" <codemirror :id="id?id:name" v-model="compVal" :disabled="disabled"
:options="cmOptions" :options="cmOptions"
:style="inputStyle" :name="name" :style="inputStyle" :name="name"
@ -15,11 +20,10 @@
/> />
</div> </div>
<small v-if="help" :class="theme.CodeInput.help"> <template #error>
<slot name="help"><span class="field-help" v-html="help" /></slot> <slot name="error" />
</small> </template>
<has-error v-if="hasValidation" :form="form" :field="name" /> </input-wrapper>
</div>
</template> </template>
<script> <script>
@ -28,13 +32,32 @@ import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/htmlmixed/htmlmixed.js' import 'codemirror/mode/htmlmixed/htmlmixed.js'
import inputMixin from '~/mixins/forms/input.js' import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'
export default { export default {
name: 'CodeInput', name: 'CodeInput',
components: { codemirror }, components: { InputWrapper, codemirror },
mixins: [inputMixin], props: {
...inputProps
},
setup (props, context) {
const {
compVal,
inputStyle,
hasValidation,
hasError
} = useFormInput(props, context)
return {
compVal,
inputStyle,
hasValidation,
hasError
}
},
data () { data () {
return { return {
@ -47,8 +70,6 @@ export default {
line: true line: true
} }
} }
}, }
methods: {}
} }
</script> </script>

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

@ -1,25 +1,50 @@
<template> <template>
<div :class="wrapperClass"> <input-wrapper v-bind="$props">
<input :id="id?id:name" v-model="compVal" :disabled="disabled" <template #label>
type="color" <span />
:name="name" </template>
>
<label v-if="label" :for="id?id:name" class="text-gray-700 dark:text-gray-300"> <div class="flex items-center">
{{ label }} <input :id="id?id:name" v-model="compVal" :disabled="disabled"
<span v-if="required" class="text-red-500 required-dot">*</span> type="color" class="mr-2"
</label> :name="name"
<small v-if="help" :class="theme.default.help"> >
<slot name="help"><span class="field-help" v-html="help" /></slot> <slot name="label">
</small> <span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
<has-error v-if="hasValidation" :form="form" :field="name" /> </slot>
</div> </div>
<template #help>
<slot name="help" />
</template>
<template #error>
<slot name="error" />
</template>
</input-wrapper>
</template> </template>
<script> <script>
import inputMixin from '~/mixins/forms/input.js' import InputWrapper from './components/InputWrapper.vue'
import { inputProps, useFormInput } from './useFormInput.js'
export default { export default {
name: 'ColorInput', name: 'ColorInput',
mixins: [inputMixin] components: { InputWrapper },
props: {
...inputProps
},
setup (props, context) {
const { compVal, inputStyle, hasValidation, hasError } = useFormInput(props, context)
return {
compVal,
inputStyle,
hasValidation,
hasError
}
}
} }
</script> </script>

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

@ -7,32 +7,35 @@
<span v-if="required" class="text-red-500 required-dot">*</span> <span v-if="required" class="text-red-500 required-dot">*</span>
</label> </label>
<small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1"> <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> <slot name="help"><span class="field-help" v-html="help"/></slot>
</small> </small>
<div class="flex" v-if="!dateRange"> <div class="flex" v-if="!dateRange">
<input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :class="inputClasses" :disabled="disabled" <input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :class="inputClasses"
:style="inputStyle" :name="name" data-date-format="YYYY-MM-DD" :disabled="disabled"
:min="setMinDate" :max="setMaxDate" :style="inputStyle" :name="name" data-date-format="YYYY-MM-DD"
:min="setMinDate" :max="setMaxDate"
/> />
</div> </div>
<div :class="inputClasses" v-else> <div :class="inputClasses" v-else>
<div class="flex -mx-2"> <div class="flex -mx-2">
<p class="text-gray-900 px-4">From</p> <p class="text-gray-900 px-4">From</p>
<input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :disabled="disabled" <input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :disabled="disabled"
:style="inputStyle" :name="name" data-date-format="YYYY-MM-DD" class="flex-grow border-transparent focus:outline-none " :style="inputStyle" :name="name" data-date-format="YYYY-MM-DD"
:min="setMinDate" :max="setMaxDate" class="flex-grow border-transparent focus:outline-none "
/> :min="setMinDate" :max="setMaxDate"
<p class="text-gray-900 px-4">To</p> />
<input v-if="dateRange" :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="toDate" :disabled="disabled" <p class="text-gray-900 px-4">To</p>
:style="inputStyle" :name="name" class="flex-grow border-transparent focus:outline-none" <input v-if="dateRange" :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="toDate"
:min="setMinDate" :max="setMaxDate" :disabled="disabled"
/> :style="inputStyle" :name="name" class="flex-grow border-transparent focus:outline-none"
:min="setMinDate" :max="setMaxDate"
/>
</div> </div>
</div> </div>
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help"> <small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
<slot name="help"><span class="field-help" v-html="help" /></slot> <slot name="help"><span class="field-help" v-html="help"/></slot>
</small> </small>
<has-error v-if="hasValidation" :form="form" :field="name"/> <has-error v-if="hasValidation" :form="form" :field="name"/>
</div> </div>
@ -53,13 +56,13 @@ export default {
}, },
data: () => ({ data: () => ({
fixedClasses: fixedClasses, fixedClasses: null,
fromDate: null, fromDate: null,
toDate: null toDate: null
}), }),
computed: { computed: {
inputClasses (){ inputClasses() {
let str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700' let str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700'
str += this.dateRange ? ' w-50' : ' w-full' str += this.dateRange ? ' w-50' : ' w-full'
str += this.disabled ? ' !cursor-not-allowed !bg-gray-200' : '' str += this.disabled ? ' !cursor-not-allowed !bg-gray-200' : ''
@ -68,13 +71,13 @@ export default {
useTime() { useTime() {
return this.withTime && !this.dateRange return this.withTime && !this.dateRange
}, },
setMinDate () { setMinDate() {
if (this.disablePastDates) { if (this.disablePastDates) {
return new Date().toISOString().split('T')[0] return new Date().toISOString().split('T')[0]
} }
return false return false
}, },
setMaxDate () { setMaxDate() {
if (this.disableFutureDates) { if (this.disableFutureDates) {
return new Date().toISOString().split('T')[0] return new Date().toISOString().split('T')[0]
} }
@ -91,12 +94,12 @@ export default {
}, },
fromDate: { fromDate: {
handler(val) { handler(val) {
if(this.dateRange){ if (this.dateRange) {
if(!Array.isArray(this.compVal)){ if (!Array.isArray(this.compVal)) {
this.compVal = []; this.compVal = [];
} }
this.compVal[0] = this.dateToUTC(val) this.compVal[0] = this.dateToUTC(val)
}else{ } else {
this.compVal = this.dateToUTC(val) this.compVal = this.dateToUTC(val)
} }
}, },
@ -104,12 +107,12 @@ export default {
}, },
toDate: { toDate: {
handler(val) { handler(val) {
if(this.dateRange){ if (this.dateRange) {
if(!Array.isArray(this.compVal)){ if (!Array.isArray(this.compVal)) {
this.compVal = [null]; this.compVal = [null];
} }
this.compVal[1] = this.dateToUTC(val) this.compVal[1] = this.dateToUTC(val)
}else{ } else {
this.compVal = null this.compVal = null
} }
}, },
@ -118,16 +121,16 @@ export default {
}, },
mounted() { mounted() {
if(this.compVal){ if (this.compVal) {
if(Array.isArray(this.compVal)){ if (Array.isArray(this.compVal)) {
this.fromDate = this.compVal[0] ?? null this.fromDate = this.compVal[0] ?? null
this.toDate = this.compVal[1] ?? null this.toDate = this.compVal[1] ?? null
}else{ } else {
this.fromDate = this.dateToLocal(this.compVal) this.fromDate = this.dateToLocal(this.compVal)
} }
} }
fixedClasses.input = this.theme.default.input this.fixedClasses.input = this.theme.default.input
this.setInputColor() this.setInputColor()
}, },
@ -147,26 +150,26 @@ export default {
dateInput.style.setProperty('--tw-ring-color', this.color) dateInput.style.setProperty('--tw-ring-color', this.color)
} }
}, },
dateToUTC(val){ dateToUTC(val) {
if(!val){ if (!val) {
return null return null
} }
if(!this.useTime){ if (!this.useTime) {
return val return val
} }
return new Date(val).toISOString() return new Date(val).toISOString()
}, },
dateToLocal(val){ dateToLocal(val) {
if(!val){ if (!val) {
return null return null
} }
const dateObj = new Date(val) const dateObj = new Date(val)
let dateStr = dateObj.getFullYear() + '-' + let dateStr = dateObj.getFullYear() + '-' +
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' + String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
String(dateObj.getDate()).padStart(2, '0') String(dateObj.getDate()).padStart(2, '0')
if(this.useTime){ if (this.useTime) {
dateStr += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' + dateStr += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
String(dateObj.getMinutes()).padStart(2, '0'); String(dateObj.getMinutes()).padStart(2, '0');
} }
return dateStr return dateStr
} }

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

@ -5,9 +5,6 @@
<template #label> <template #label>
<slot name="label" /> <slot name="label" />
</template> </template>
<template v-if="helpPosition==='above_input'" #help>
<slot name="help" />
</template>
<input :id="id?id:name" v-model="compVal" :disabled="disabled" <input :id="id?id:name" v-model="compVal" :disabled="disabled"
:type="nativeType" :type="nativeType"
@ -19,17 +16,11 @@
@change="onChange" @keydown.enter.prevent="onEnterPress" @change="onChange" @keydown.enter.prevent="onEnterPress"
> >
<!-- TODO: fix this in the case of below input there's something off --> <template v-if="maxCharLimit && showCharLimit" #bottom_after_help>
<!-- <input-help v-if="helpPosition==='below_input' || showCharLimit" :help="help" :theme="theme">--> <small :class="theme.default.help">
<!-- <template #help>--> {{ charCount }}/{{ maxCharLimit }}
<!-- <slot name="help" />--> </small>
<!-- </template>--> </template>
<!-- <template v-if="showCharLimit" #after-help>-->
<!-- <small v-if="showCharLimit && maxCharLimit" :class="theme.default.help">-->
<!-- {{ charCount }}/{{ maxCharLimit }}-->
<!-- </small>-->
<!-- </template>-->
<!-- </input-help>-->
<template #error> <template #error>
<slot name="error" /> <slot name="error" />

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

@ -1,33 +1,34 @@
<template> <template>
<div :class="wrapperClass"> <input-wrapper v-bind="$props">
<input-help v-if="help && helpPosition=='above_input'" :help="help" :theme="theme"> <template #label>
<template #help> <span />
<slot name="help" /> </template>
</template>
</input-help>
<div class="flex"> <div class="flex">
<v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled" /> <v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled" />
<slot name="label"> <slot name="label">
<span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span> <span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
</slot> </slot>
</div> </div>
<input-help v-if="help && helpPosition=='below_input'" :help="help" :theme="theme">
<template #help> <template #help>
<slot name="help" /> <slot name="help" />
</template> </template>
</input-help>
<has-error v-if="hasValidation" :form="form" :field="name" /> <template #error>
</div> <slot name="error" />
</template>
</input-wrapper>
</template> </template>
<script> <script>
import { inputProps, useFormInput } from './useFormInput.js' import { inputProps, useFormInput } from './useFormInput.js'
import InputHelp from './components/InputHelp.vue'
import VSwitch from './components/VSwitch.vue' import VSwitch from './components/VSwitch.vue'
import InputWrapper from './components/InputWrapper.vue'
export default { export default {
name: 'ToggleSwitchInput', name: 'ToggleSwitchInput',
components: { InputHelp, VSwitch }, components: { InputWrapper, VSwitch },
props: { props: {
...inputProps ...inputProps
}, },

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

@ -4,7 +4,7 @@
<slot name="help"><span class="field-help" v-html="help" /></slot> <slot name="help"><span class="field-help" v-html="help" /></slot>
</small> </small>
<slot name="after-help"> <slot name="after-help">
<small class="flex-grow" /> <small class="flex-grow" />
</slot> </slot>
</div> </div>
</template> </template>

19
resources/js/components/forms/components/InputWrapper.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div :class="wrapperClass" :style="inputStyle"> <div :class="wrapperClass" :style="inputStyle">
<slot name="label"> <slot name="label">
<input-label v-if="label" <input-label v-if="label && !hideFieldName"
:label="label" :label="label"
:theme="theme" :theme="theme"
:required="true" :required="required"
:native-for="id?id:name" :native-for="id?id:name"
:uppercase-labels="uppercaseLabels" :uppercase-labels="uppercaseLabels"
/> />
@ -13,8 +13,13 @@
<input-help :help="help" :theme="theme" /> <input-help :help="help" :theme="theme" />
</slot> </slot>
<slot /> <slot />
<slot v-if="help && helpPosition==='below_input'" name="help">
<input-help :help="help" :theme="theme" /> <slot v-if="(help && helpPosition==='below_input') || $slots.bottom_after_help" name="help">
<input-help :help="help" :theme="theme">
<template #after-help>
<slot name="bottom_after_help" />
</template>
</input-help>
</slot> </slot>
<slot name="error"> <slot name="error">
<has-error v-if="hasValidation" :form="form" :field="name" /> <has-error v-if="hasValidation" :form="form" :field="name" />
@ -34,14 +39,16 @@ export default {
id: { type: String, required: false }, id: { type: String, required: false },
name: { type: String, required: false }, name: { type: String, required: false },
theme: { type: Object, required: true }, theme: { type: Object, required: true },
form: { type: Object, required: false },
wrapperClass: { type: String, required: false }, wrapperClass: { type: String, required: false },
inputStyle: { type: Object, required: false }, inputStyle: { type: Object, required: false },
help: { type: String, required: false }, help: { type: String, required: false },
label: { type: String, required: false }, label: { type: String, required: false },
helpPosition: { type: String, default: 'below_input' }, helpPosition: { type: String, default: 'below_input' },
uppercaseLabels: { type: Boolean, default: true }, uppercaseLabels: { type: Boolean, default: true },
hasValidation: { type: Boolean, default: true }, hideFieldName: { type: Boolean, default: true },
form: { type: Object, required: false } required: { type: Boolean, default: false },
hasValidation: { type: Boolean, default: true }
} }
} }
</script> </script>

87
resources/js/components/forms/components/VCheckbox.vue
View File

@ -16,64 +16,57 @@
</div> </div>
</template> </template>
<script> <script setup>
export default { import { ref, watch, onMounted, defineProps, defineEmits, defineOptions } from 'vue'
name: 'VCheckbox',
props: { defineOptions({
id: { type: String, default: null }, name: 'VCheckbox'
name: { type: String, default: 'checkbox' }, })
value: { type: [Boolean, String], default: false },
checked: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
sizeClasses: { type: String, default: 'w-4 h-4' }
},
data: () => ({ const props = defineProps({
internalValue: false id: { type: String, default: null },
}), name: { type: String, default: 'checkbox' },
modelValue: { type: [Boolean, String], default: false },
checked: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
sizeClasses: { type: String, default: 'w-4 h-4' }
})
watch: { const emit = defineEmits(['update:modelValue', 'click'])
value (val) {
this.internalValue = val
},
checked (val) { const internalValue = ref(props.modelValue)
this.internalValue = val
},
internalValue (val, oldVal) { watch(() => props.modelValue, val => {
// Support form data string checkbox (string 1 or 0) internalValue.value = val
if (val === 0 || val === '0') val = false })
if (val === 1 || val === '1') val = true
if (val !== oldVal) { watch(() => props.checked, val => {
this.$emit('input', val) internalValue.value = val
} })
}
},
created () { watch(() => internalValue.value, (val, oldVal) => {
this.internalValue = this.value if (val === 0 || val === '0') val = false
if (val === 1 || val === '1') val = true
if ('checked' in this.$options.propsData) { if (val !== oldVal) {
this.internalValue = this.checked emit('update:modelValue', val)
} }
}, })
mounted () { if ('checked' in props) {
this.$emit('input', this.internalValue) internalValue.value = props.checked
}, }
methods: { onMounted(() => {
handleClick (e) { emit('update:modelValue', internalValue.value)
this.$emit('click', e) })
if (!e.isPropagationStopped) { const handleClick = (e) => {
this.internalValue = e.target.checked emit('click', e)
this.$emit('input', this.internalValue)
} if (!e.isPropagationStopped) {
} internalValue.value = e.target.checked
emit('update:modelValue', internalValue.value)
} }
} }
</script> </script>

1
resources/js/components/forms/components/VSwitch.vue
View File

@ -17,7 +17,6 @@ const emit = defineEmits(['update:modelValue'])
const onClick = () => { const onClick = () => {
if (disabled) return if (disabled) return
console.log('ok emiting', !modelValue)
emit('update:modelValue', !modelValue) emit('update:modelValue', !modelValue)
} }
</script> </script>

2
resources/js/components/forms/index.js vendored
View File

@ -34,7 +34,7 @@ export function registerComponents (app) {
FlatSelectInput, FlatSelectInput,
ToggleSwitchInput ToggleSwitchInput
].forEach(Component => { ].forEach(Component => {
app.component(Component.name, Component) Component.name ? app.component(Component.name, Component) : app.component(Component.name, Component)
}) })
// Register async components // Register async components

3
resources/js/components/forms/useFormInput.js vendored
View File

@ -11,6 +11,7 @@ export const inputProps = {
disabled: { type: Boolean, default: false }, disabled: { type: Boolean, default: false },
placeholder: { type: String, default: null }, placeholder: { type: String, default: null },
uppercaseLabels: { type: Boolean, default: false }, uppercaseLabels: { type: Boolean, default: false },
hideFieldName: { type: Boolean, default: false },
help: { type: String, default: null }, help: { type: String, default: null },
helpPosition: { type: String, default: 'below_input' }, helpPosition: { type: String, default: 'below_input' },
theme: { type: Object, default: () => themes.default }, theme: { type: Object, default: () => themes.default },
@ -32,7 +33,7 @@ export function useFormInput (props, context, formPrefixKey = null) {
}) })
const hasError = computed(() => { const hasError = computed(() => {
return hasValidation && props.form?.errors.has(name) return hasValidation && props.form?.errors?.has(name)
}) })
const compVal = computed({ const compVal = computed({

2
resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
View File

@ -36,7 +36,7 @@
</p> </p>
<v-checkbox v-model="field.hidden" class="mb-3" <v-checkbox v-model="field.hidden" class="mb-3"
:name="field.id+'_hidden'" :name="field.id+'_hidden'"
@input="onFieldHiddenChange" @update:model-value="onFieldHiddenChange"
> >
Hidden Hidden
</v-checkbox> </v-checkbox>

28
resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
View File

@ -47,19 +47,19 @@
</p> </p>
<v-checkbox v-model="field.hidden" class="mb-3" <v-checkbox v-model="field.hidden" class="mb-3"
:name="field.id+'_hidden'" :name="field.id+'_hidden'"
@input="onFieldHiddenChange" @update:model-value="onFieldHiddenChange"
> >
Hidden Hidden
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.required" class="mb-3" <v-checkbox v-model="field.required" class="mb-3"
:name="field.id+'_required'" :name="field.id+'_required'"
@input="onFieldRequiredChange" @update:model-value="onFieldRequiredChange"
> >
Required Required
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.disabled" class="mb-3" <v-checkbox v-model="field.disabled" class="mb-3"
:name="field.id+'_disabled'" :name="field.id+'_disabled'"
@input="onFieldDisabledChange" @update:model-value="onFieldDisabledChange"
> >
Disabled Disabled
</v-checkbox> </v-checkbox>
@ -105,7 +105,7 @@
Number Options Number Options
</h3> </h3>
<v-checkbox v-model="field.is_rating" class="mt-4" <v-checkbox v-model="field.is_rating" class="mt-4"
:name="field.id+'_is_rating'" @input="initRating" :name="field.id+'_is_rating'" @update:model-value="initRating"
> >
Rating Rating
</v-checkbox> </v-checkbox>
@ -142,7 +142,7 @@
</h3> </h3>
<v-checkbox v-model="field.date_range" class="mt-4" <v-checkbox v-model="field.date_range" class="mt-4"
:name="field.id+'_date_range'" :name="field.id+'_date_range'"
@input="onFieldDateRangeChange" @update:model-value="onFieldDateRangeChange"
> >
Date Range Date Range
</v-checkbox> </v-checkbox>
@ -151,7 +151,7 @@
</p> </p>
<v-checkbox v-model="field.with_time" <v-checkbox v-model="field.with_time"
:name="field.id+'_with_time'" :name="field.id+'_with_time'"
@input="onFieldWithTimeChange" @update:model-value="onFieldWithTimeChange"
> >
Date with time Date with time
</v-checkbox> </v-checkbox>
@ -166,7 +166,7 @@
/> />
<v-checkbox v-model="field.prefill_today" <v-checkbox v-model="field.prefill_today"
name="prefill_today" name="prefill_today"
@input="onFieldPrefillTodayChange" @update:model-value="onFieldPrefillTodayChange"
> >
Prefill with 'today' Prefill with 'today'
</v-checkbox> </v-checkbox>
@ -176,14 +176,14 @@
<v-checkbox v-model="field.disable_past_dates" <v-checkbox v-model="field.disable_past_dates"
name="disable_past_dates" class="mb-3" name="disable_past_dates" class="mb-3"
@input="onFieldDisablePastDatesChange" @update:model-value="onFieldDisablePastDatesChange"
> >
Disable past dates Disable past dates
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.disable_future_dates" <v-checkbox v-model="field.disable_future_dates"
name="disable_future_dates" class="mb-3" name="disable_future_dates" class="mb-3"
@input="onFieldDisableFutureDatesChange" @update:model-value="onFieldDisableFutureDatesChange"
> >
Disable future dates Disable future dates
</v-checkbox> </v-checkbox>
@ -203,12 +203,12 @@
@input="onFieldOptionsChange" @input="onFieldOptionsChange"
/> />
<v-checkbox v-model="field.allow_creation" <v-checkbox v-model="field.allow_creation"
name="allow_creation" help="" @input="onFieldAllowCreationChange" name="allow_creation" help="" @update:model-value="onFieldAllowCreationChange"
> >
Allow respondent to create new options Allow respondent to create new options
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.without_dropdown" class="mt-4" <v-checkbox v-model="field.without_dropdown" class="mt-4"
name="without_dropdown" help="" @input="onFieldWithoutDropdownChange" name="without_dropdown" help="" @update:model-value="onFieldWithoutDropdownChange"
> >
Always show all select options Always show all select options
</v-checkbox> </v-checkbox>
@ -241,7 +241,7 @@
<!-- Pre-fill depends on type --> <!-- Pre-fill depends on type -->
<v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-4" <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-4"
:name="field.id+'_prefill'" :name="field.id+'_prefill'"
@input="field.prefill = $event" @update:model-value="field.prefill = $event"
> >
Pre-filled value Pre-filled value
</v-checkbox> </v-checkbox>
@ -327,7 +327,7 @@
<v-checkbox v-model="field.generates_uuid" <v-checkbox v-model="field.generates_uuid"
:name="field.id+'_generates_uuid'" :name="field.id+'_generates_uuid'"
@input="onFieldGenUIdChange" @update:model-value="onFieldGenUIdChange"
> >
Generates a unique id on submission Generates a unique id on submission
</v-checkbox> </v-checkbox>
@ -337,7 +337,7 @@
<v-checkbox v-model="field.generates_auto_increment_id" <v-checkbox v-model="field.generates_auto_increment_id"
:name="field.id+'_generates_auto_increment_id'" :name="field.id+'_generates_auto_increment_id'"
@input="onFieldGenAutoIdChange" @update:model-value="onFieldGenAutoIdChange"
> >
Generates an auto-incremented id on submission Generates an auto-incremented id on submission
</v-checkbox> </v-checkbox>

2
resources/js/components/open/forms/fields/components/BlockOptions.vue
View File

@ -10,7 +10,7 @@
</p> </p>
<v-checkbox v-model="field.hidden" class="mb-3" <v-checkbox v-model="field.hidden" class="mb-3"
:name="field.id+'_hidden'" :name="field.id+'_hidden'"
@input="onFieldHiddenChange" @update:model-value="onFieldHiddenChange"
> >
Hidden Hidden
</v-checkbox> </v-checkbox>

33
resources/js/components/open/forms/fields/components/FieldOptions.vue
View File

@ -10,19 +10,19 @@
</p> </p>
<v-checkbox v-model="field.hidden" class="mb-3" <v-checkbox v-model="field.hidden" class="mb-3"
:name="field.id+'_hidden'" :name="field.id+'_hidden'"
@input="onFieldHiddenChange" @update:model-value="onFieldHiddenChange"
> >
Hidden Hidden
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.required" class="mb-3" <v-checkbox v-model="field.required" class="mb-3"
:name="field.id+'_required'" :name="field.id+'_required'"
@input="onFieldRequiredChange" @update:model-value="onFieldRequiredChange"
> >
Required Required
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.disabled" class="mb-3" <v-checkbox v-model="field.disabled" class="mb-3"
:name="field.id+'_disabled'" :name="field.id+'_disabled'"
@input="onFieldDisabledChange" @update:model-value="onFieldDisabledChange"
> >
Disabled Disabled
</v-checkbox> </v-checkbox>
@ -68,7 +68,7 @@
Number Options Number Options
</h3> </h3>
<v-checkbox v-model="field.is_rating" class="mt-3" <v-checkbox v-model="field.is_rating" class="mt-3"
:name="field.id+'_is_rating'" @input="initRating" :name="field.id+'_is_rating'" @update:model-value="initRating"
> >
Rating Rating
</v-checkbox> </v-checkbox>
@ -92,7 +92,7 @@
</p> </p>
<v-checkbox v-model="field.multi_lines" class="mb-2" <v-checkbox v-model="field.multi_lines" class="mb-2"
:name="field.id+'_multi_lines'" :name="field.id+'_multi_lines'"
@input="field.multi_lines = $event" @update:model-value="field.multi_lines = $event"
> >
Multi-lines input Multi-lines input
</v-checkbox> </v-checkbox>
@ -105,7 +105,7 @@
</h3> </h3>
<v-checkbox v-model="field.date_range" class="mt-3" <v-checkbox v-model="field.date_range" class="mt-3"
:name="field.id+'_date_range'" :name="field.id+'_date_range'"
@input="onFieldDateRangeChange" @update:model-value="onFieldDateRangeChange"
> >
Date Range Date Range
</v-checkbox> </v-checkbox>
@ -114,7 +114,7 @@
</p> </p>
<v-checkbox v-model="field.with_time" <v-checkbox v-model="field.with_time"
:name="field.id+'_with_time'" :name="field.id+'_with_time'"
@input="onFieldWithTimeChange" @update:model-value="onFieldWithTimeChange"
> >
Date with time Date with time
</v-checkbox> </v-checkbox>
@ -129,7 +129,7 @@
/> />
<v-checkbox v-model="field.prefill_today" <v-checkbox v-model="field.prefill_today"
name="prefill_today" name="prefill_today"
@input="onFieldPrefillTodayChange" @update:model-value="onFieldPrefillTodayChange"
> >
Prefill with 'today' Prefill with 'today'
</v-checkbox> </v-checkbox>
@ -139,14 +139,14 @@
<v-checkbox v-model="field.disable_past_dates" <v-checkbox v-model="field.disable_past_dates"
name="disable_past_dates" class="mb-3" name="disable_past_dates" class="mb-3"
@input="onFieldDisablePastDatesChange" @update:model-value="onFieldDisablePastDatesChange"
> >
Disable past dates Disable past dates
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.disable_future_dates" <v-checkbox v-model="field.disable_future_dates"
name="disable_future_dates" class="mb-3" name="disable_future_dates" class="mb-3"
@input="onFieldDisableFutureDatesChange" @update:model-value="onFieldDisableFutureDatesChange"
> >
Disable future dates Disable future dates
</v-checkbox> </v-checkbox>
@ -166,12 +166,12 @@
@input="onFieldOptionsChange" @input="onFieldOptionsChange"
/> />
<v-checkbox v-model="field.allow_creation" <v-checkbox v-model="field.allow_creation"
name="allow_creation" help="" @input="onFieldAllowCreationChange" name="allow_creation" help="" @update:model-value="onFieldAllowCreationChange"
> >
Allow respondent to create new options Allow respondent to create new options
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.without_dropdown" class="mt-3" <v-checkbox v-model="field.without_dropdown" class="mt-3"
name="without_dropdown" help="" @input="onFieldWithoutDropdownChange" name="without_dropdown" help="" @update:model-value="onFieldWithoutDropdownChange"
> >
Always show all select options Always show all select options
</v-checkbox> </v-checkbox>
@ -243,7 +243,7 @@
<!-- Pre-fill depends on type --> <!-- Pre-fill depends on type -->
<v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3" <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
:name="field.id+'_prefill'" :name="field.id+'_prefill'"
@input="field.prefill =$event" @update:model-value="field.prefill =$event"
> >
Pre-filled value Pre-filled value
</v-checkbox> </v-checkbox>
@ -270,7 +270,6 @@
<text-input v-else-if="field.type!=='files'" name="prefill" class="mt-3" <text-input v-else-if="field.type!=='files'" name="prefill" class="mt-3"
:form="field" :form="field"
label="Pre-filled value" label="Pre-filled value"
:disabled="field.type==='date' && field.prefill_today===true"
/> />
<div v-if="['select','multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500"> <div v-if="['select','multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
<small> <small>
@ -314,7 +313,7 @@
/> />
<template v-if="['text','number','url','email'].includes(field.type)"> <template v-if="['text','number','url','email'].includes(field.type)">
<text-input v-model="field.max_char_limit" name="max_char_limit" native-type="number" :min="1" :max="2000" <text-input name="max_char_limit" native-type="number" :min="1" :max="2000"
:form="field" :form="field"
label="Max character limit" label="Max character limit"
help="Maximum character limit of 2000" help="Maximum character limit of 2000"
@ -334,7 +333,7 @@
<v-checkbox v-model="field.generates_uuid" <v-checkbox v-model="field.generates_uuid"
:name="field.id+'_generates_uuid'" :name="field.id+'_generates_uuid'"
@input="onFieldGenUIdChange" @update:model-value="onFieldGenUIdChange"
> >
Generates a unique id Generates a unique id
</v-checkbox> </v-checkbox>
@ -345,7 +344,7 @@
<v-checkbox v-model="field.generates_auto_increment_id" <v-checkbox v-model="field.generates_auto_increment_id"
:name="field.id+'_generates_auto_increment_id'" :name="field.id+'_generates_auto_increment_id'"
@input="onFieldGenAutoIdChange" @update:model-value="onFieldGenAutoIdChange"
> >
Generates an auto-incremented id Generates an auto-incremented id
</v-checkbox> </v-checkbox>