input component updates
This commit is contained in:
Forms Dev
parent
ee4cb7a0d3
commit
387a110820
|
|
@ -35,7 +35,7 @@
|
|||
"vue-meta": "^3.0.0-alpha.2",
|
||||
"vue-notion": "^3.0.0-beta.1",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-signature-pad": "^2.0.5",
|
||||
"vue-signature-pad": "^3.0.2",
|
||||
"vue2-editor": "^2.10.3",
|
||||
"vue3-vt-notifications": "^1.0.0",
|
||||
"vuedraggable": "^4.1.0",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
<template>
|
||||
<div :class="wrapperClass">
|
||||
<label v-if="label" :for="id?id:name"
|
||||
:class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
|
||||
>
|
||||
{{ 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>
|
||||
<input-wrapper
|
||||
v-bind="$props"
|
||||
>
|
||||
<template #label>
|
||||
<slot name="label" />
|
||||
</template>
|
||||
|
||||
<div class="flex" v-if="!dateRange">
|
||||
<input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :class="inputClasses"
|
||||
|
|
@ -34,28 +30,49 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<template #help>
|
||||
<slot name="help" />
|
||||
</template>
|
||||
<template #error>
|
||||
<slot name="error" />
|
||||
</template>
|
||||
</input-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inputProps, useFormInput } from './useFormInput.js'
|
||||
import InputWrapper from './components/InputWrapper.vue'
|
||||
import {fixedClasses} from '../../plugins/config/vue-tailwind/datePicker.js'
|
||||
import inputMixin from '~/mixins/forms/input.js'
|
||||
|
||||
export default {
|
||||
name: 'DateInput',
|
||||
mixins: [inputMixin],
|
||||
components: { InputWrapper },
|
||||
mixins: [],
|
||||
|
||||
props: {
|
||||
...inputProps,
|
||||
withTime: {type: Boolean, default: false},
|
||||
dateRange: {type: Boolean, default: false},
|
||||
disablePastDates: {type: Boolean, default: false},
|
||||
disableFutureDates: {type: Boolean, default: false}
|
||||
},
|
||||
|
||||
setup (props, context) {
|
||||
const {
|
||||
compVal,
|
||||
inputStyle,
|
||||
hasValidation,
|
||||
hasError
|
||||
} = useFormInput(props, context)
|
||||
|
||||
return {
|
||||
compVal,
|
||||
inputStyle,
|
||||
hasValidation,
|
||||
hasError
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
fixedClasses: fixedClasses,
|
||||
fromDate: null,
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
<template>
|
||||
<div :class="wrapperClass">
|
||||
<label v-if="label" :for="id?id:name"
|
||||
:class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
|
||||
>
|
||||
{{ 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="block mb-1">
|
||||
<slot name="help"><span class="field-help" v-html="help" /></slot>
|
||||
</small>
|
||||
<input-wrapper
|
||||
v-bind="$props"
|
||||
>
|
||||
<template #label>
|
||||
<slot name="label" />
|
||||
</template>
|
||||
|
||||
<loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
<div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
|
||||
|
|
@ -25,24 +21,28 @@
|
|||
</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 #help>
|
||||
<slot name="help" />
|
||||
</template>
|
||||
<template #error>
|
||||
<slot name="error" />
|
||||
</template>
|
||||
</input-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import inputMixin from '~/mixins/forms/input.js'
|
||||
import { inputProps, useFormInput } from './useFormInput.js'
|
||||
import InputWrapper from './components/InputWrapper.vue'
|
||||
|
||||
/**
|
||||
* Options: {name,value} objects
|
||||
*/
|
||||
export default {
|
||||
name: 'FlatSelectInput',
|
||||
mixins: [inputMixin],
|
||||
components: { InputWrapper },
|
||||
|
||||
props: {
|
||||
...inputProps,
|
||||
options: { type: Array, required: true },
|
||||
optionKey: { type: String, default: 'value' },
|
||||
emitKey: { type: String, default: 'value' },
|
||||
|
|
@ -50,6 +50,21 @@ export default {
|
|||
loading: { type: Boolean, default: false },
|
||||
multiple: { type: Boolean, default: false }
|
||||
},
|
||||
setup (props, context) {
|
||||
const {
|
||||
compVal,
|
||||
inputStyle,
|
||||
hasValidation,
|
||||
hasError
|
||||
} = useFormInput(props, context)
|
||||
|
||||
return {
|
||||
compVal,
|
||||
inputStyle,
|
||||
hasValidation,
|
||||
hasError
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
<template>
|
||||
<div :class="wrapperClass">
|
||||
<label v-if="label" :for="id?id:name"
|
||||
:class="[theme.CodeInput.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
|
||||
>
|
||||
{{ 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>
|
||||
<input-wrapper
|
||||
v-bind="$props"
|
||||
>
|
||||
<template #label>
|
||||
<slot name="label" />
|
||||
</template>
|
||||
|
||||
<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"
|
||||
|
|
@ -19,30 +13,48 @@
|
|||
/>
|
||||
|
||||
<div 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 :class="theme.default.help">
|
||||
<a :class="theme.default.help" href="#" @click.prevent="clear">Clear</a>
|
||||
</small>
|
||||
</div>
|
||||
<has-error v-if="hasValidation" :form="form" :field="name" />
|
||||
</div>
|
||||
|
||||
<template #help>
|
||||
<slot name="help" />
|
||||
</template>
|
||||
<template #error>
|
||||
<slot name="error" />
|
||||
</template>
|
||||
</input-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { inputProps, useFormInput } from './useFormInput.js'
|
||||
import InputWrapper from './components/InputWrapper.vue'
|
||||
import VueSignaturePad from 'vue-signature-pad'
|
||||
import inputMixin from '~/mixins/forms/input.js'
|
||||
|
||||
Vue.use(VueSignaturePad)
|
||||
|
||||
export default {
|
||||
name: 'SignatureInput',
|
||||
components: {InputWrapper, VueSignaturePad},
|
||||
|
||||
components: {},
|
||||
mixins: [inputMixin],
|
||||
props: {
|
||||
...inputProps,
|
||||
},
|
||||
|
||||
setup (props, context) {
|
||||
const {
|
||||
compVal,
|
||||
inputStyle,
|
||||
hasValidation,
|
||||
hasError
|
||||
} = useFormInput(props, context)
|
||||
|
||||
return {
|
||||
compVal,
|
||||
inputStyle,
|
||||
hasValidation,
|
||||
hasError
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
clear () {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,11 @@
|
|||
<template>
|
||||
<div :class="wrapperClass">
|
||||
<label v-if="label" :for="id?id:name"
|
||||
:class="[theme.default.label, {'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
|
||||
>
|
||||
{{ 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>
|
||||
<input-wrapper
|
||||
v-bind="$props"
|
||||
>
|
||||
<template #label>
|
||||
<slot name="label" />
|
||||
</template>
|
||||
|
||||
<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"
|
||||
|
|
@ -18,30 +13,48 @@
|
|||
:placeholder="placeholder"
|
||||
:maxlength="maxCharLimit"
|
||||
/>
|
||||
<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">
|
||||
|
||||
<template v-if="maxCharLimit && showCharLimit" #bottom_after_help>
|
||||
<small :class="theme.default.help">
|
||||
{{ charCount }}/{{ maxCharLimit }}
|
||||
</small>
|
||||
</div>
|
||||
<has-error v-if="hasValidation" :form="form" :field="name" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #error>
|
||||
<slot name="error" />
|
||||
</template>
|
||||
</input-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import inputMixin from '~/mixins/forms/input.js'
|
||||
import { inputProps, useFormInput } from './useFormInput.js'
|
||||
import InputWrapper from './components/InputWrapper.vue'
|
||||
|
||||
export default {
|
||||
name: 'TextAreaInput',
|
||||
mixins: [inputMixin],
|
||||
components: { InputWrapper },
|
||||
mixins: [],
|
||||
|
||||
props: {
|
||||
...inputProps,
|
||||
maxCharLimit: { type: Number, required: false, default: null },
|
||||
showCharLimit: { type: Boolean, required: false, default: false },
|
||||
},
|
||||
setup (props, context) {
|
||||
const {
|
||||
compVal,
|
||||
inputStyle,
|
||||
hasValidation,
|
||||
hasError
|
||||
} = useFormInput(props, context)
|
||||
|
||||
return {
|
||||
compVal,
|
||||
inputStyle,
|
||||
hasValidation,
|
||||
hasError
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
charCount() {
|
||||
return (this.compVal) ? this.compVal.length : 0
|
||||
|
|
|
|||
Loading…
Reference in New Issue