This commit is contained in:
Forms Dev 2023-11-17 16:25:10 +05:30
parent 8e8bad3754
commit 5bc4b866c4
4 changed files with 170 additions and 159 deletions

View File

@ -42,6 +42,7 @@
</template> </template>
<script> <script>
import {fixedClasses} from '../../plugins/config/vue-tailwind/datePicker.js'
import inputMixin from '~/mixins/forms/input.js' import inputMixin from '~/mixins/forms/input.js'
export default { export default {
@ -56,7 +57,7 @@ export default {
}, },
data: () => ({ data: () => ({
fixedClasses: null, fixedClasses: fixedClasses,
fromDate: null, fromDate: null,
toDate: null toDate: null
}), }),

View File

@ -1,14 +1,9 @@
<template> <template>
<div :class="wrapperClass"> <input-wrapper v-bind="$props">
<label v-if="label" <template #label>
:class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]" <slot name="label" />
> </template>
{{ 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"> <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" <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" role="button"
class="cursor-pointer relative flex" class="cursor-pointer relative flex"
@ -63,10 +58,14 @@
</template> </template>
</button> </button>
</span> </span>
<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>
<template #error>
<slot name="error" />
</template>
<!-- Modal --> <!-- Modal -->
<modal :portal-order="2" :show="showUploadModal" @close="showUploadModal=false"> <modal :portal-order="2" :show="showUploadModal" @close="showUploadModal=false">
@ -151,23 +150,25 @@
</div> </div>
</div> </div>
</modal> </modal>
</div> </input-wrapper>
</template> </template>
<script> <script>
import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'
import Modal from '../Modal.vue' import Modal from '../Modal.vue'
import inputMixin from '~/mixins/forms/input.js' import inputMixin from '~/mixins/forms/input.js'
export default { export default {
name: 'FileInput', name: 'FileInput',
components: { InputWrapper, Modal },
components: { Modal },
mixins: [inputMixin],
props: { props: {
...inputProps,
multiple: { type: Boolean, default: true }, multiple: { type: Boolean, default: true },
mbLimit: { type: Number, default: 5 }, mbLimit: { type: Number, default: 5 },
accept: { type: String, default: '' } accept: { type: String, default: '' }
}, },
mixins: [inputMixin],
data: () => ({ data: () => ({
showUploadModal: false, showUploadModal: false,

View File

@ -20,8 +20,8 @@
<div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}"> <div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" /> <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
<div v-else-if="value" key="value" class="flex" :class="{'min-h-8': multiple}"> <div v-else-if="modelValue" key="modelValue" class="flex" :class="{'min-h-8': multiple}">
<slot name="selected" :option="value" /> <slot name="selected" :option="modelValue" />
</div> </div>
<div v-else key="placeholder"> <div v-else key="placeholder">
<slot name="placeholder"> <slot name="placeholder">
@ -48,7 +48,7 @@
:class="{'max-h-42 py-1': !isSearchable,'max-h-48 pb-1': isSearchable}" :class="{'max-h-42 py-1': !isSearchable,'max-h-48 pb-1': isSearchable}"
> >
<div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10"> <div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10">
<text-input v-model="searchTerm" name="search" :color="color" :theme="theme" <text-input v-model="searchTerm.value" name="search" :color="color" :theme="theme"
placeholder="Search..." placeholder="Search..."
/> />
</div> </div>
@ -84,22 +84,22 @@
</div> </div>
</template> </template>
<script> <script setup>
import { ref, watch, onMounted, defineProps, defineEmits, defineOptions, computed } from 'vue'
import { vOnClickOutside } from '@vueuse/components' import { vOnClickOutside } from '@vueuse/components'
import TextInput from '../TextInput.vue' import TextInput from '../TextInput.vue'
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import { themes } from '~/config/form-themes.js' import { themes } from '~/config/form-themes.js'
import debounce from 'debounce' import debounce from 'debounce'
export default {
name: 'VSelect', defineOptions({
components: { TextInput }, name: 'VSelect'
directives: { })
onClickaway: vOnClickOutside
}, const props = defineProps({
props: {
data: Array, data: Array,
value: { default: null }, modelValue: { default: null },
inputClass: { type: String, default: null }, inputClass: { type: String, default: null },
dropdownClass: { type: String, default: 'w-full' }, dropdownClass: { type: String, default: 'w-full' },
label: { type: String, default: null }, label: { type: String, default: null },
@ -121,120 +121,129 @@ export default {
disabled: { type: Boolean, default: false }, disabled: { 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' }
}, })
data () {
const emit = defineEmits(['update:modelValue', 'update-options'])
const defaultValue = ref(props.modelValue)
let searchTerm = ref('')
let isOpen = ref(false)
const optionStyle = computed(() => {
return { return {
isOpen: false, '--bg-form-color': props.color
searchTerm: '',
defaultValue: this.value ?? null
} }
}, })
computed: {
optionStyle () { const inputStyle = computed(() => {
return { return {
'--bg-form-color': this.color '--tw-ring-color': props.color
} }
}, })
inputStyle () {
return { const debouncedRemote = computed(() => {
'--tw-ring-color': this.color if (props.remote) {
} return debounce(props.remote, 300)
},
debouncedRemote () {
if (this.remote) {
return debounce(this.remote, 300)
} }
return null return null
}, })
filteredOptions () {
if (!this.data) return [] const filteredOptions = computed(() => {
if (!this.searchable || this.remote || this.searchTerm === '') { if (!props.data) return []
return this.data if (!props.searchable || props.remote || searchTerm.value === '') {
return props.data
} }
// Fuse search // Fuse search
const fuzeOptions = { const fuzeOptions = {
keys: this.searchKeys keys: props.searchKeys
} }
const fuse = new Fuse(this.data, fuzeOptions) const fuse = new Fuse(props.data, fuzeOptions)
return fuse.search(this.searchTerm).map((res) => { return fuse.search(searchTerm.value).map((res) => {
return res.item return res.item
}) })
}, })
isSearchable () {
return this.searchable || this.remote !== null || this.allowCreation
}
},
watch: {
searchTerm (val) {
if (!this.debouncedRemote) return
if ((this.remote && val) || (val === '' && !this.value) || (val === '' && this.isOpen)) {
return this.debouncedRemote(val)
}
}
},
methods: {
isSelected (value) {
if (!this.value) return false
if (this.emitKey && value[this.emitKey]) { const isSearchable = computed(() => {
value = value[this.emitKey] return props.searchable || props.remote !== null || props.allowCreation
})
watch(() => searchTerm, val => {
if (!props.debouncedRemote) return
if ((props.remote && val) || (val === '' && !props.modelValue) || (val === '' && isOpen)) {
return props.debouncedRemote(val)
}
})
const isSelected = (value) => {
if (!props.modelValue) return false
if (props.emitKey && value[props.emitKey]) {
value = value[props.emitKey]
} }
if (this.multiple) { if (props.multiple) {
return this.value.includes(value) return props.modelValue.includes(value)
} }
return this.value === value return props.modelValue === value
}, }
closeDropdown () {
this.isOpen = false const closeDropdown = () => {
this.searchTerm = '' isOpen.value = false
}, searchTerm.value = ''
openDropdown () { }
this.isOpen = this.disabled ? false : !this.isOpen const openDropdown = () => {
}, isOpen.value = props.disabled ? false : !isOpen.value
select (value) { }
if (!this.multiple) { const select = (value) => {
this.closeDropdown() if (!props.multiple) {
closeDropdown()
} }
if (this.emitKey) { if (props.emitKey) {
value = value[this.emitKey] value = value[props.emitKey]
} }
if (this.multiple) { if (props.multiple) {
const emitValue = Array.isArray(this.value) ? [...this.value] : [] const emitValue = Array.isArray(props.modelValue) ? [...props.modelValue] : []
if (this.isSelected(value)) { if (isSelected(value)) {
this.$emit('input', emitValue.filter((item) => { emit('update:modelValue', emitValue.filter((item) => {
if (this.emitKey) { if (props.emitKey) {
return item !== value return item !== value
} }
return item[this.optionKey] !== value && item[this.optionKey] !== value[this.optionKey] return item[props.optionKey] !== value && item[props.optionKey] !== value[props.optionKey]
})) }))
return return
} }
emitValue.push(value) emitValue.push(value)
this.$emit('input', emitValue) emit('update:modelValue', emitValue)
} else { } else {
if (this.value === value) { if (props.modelValue === value) {
this.$emit('input', this.defaultValue ?? null) emit('update:modelValue', defaultValue ?? null)
} else { } else {
this.$emit('input', value) emit('update:modelValue', value)
} }
} }
}, }
createOption (newOption) { const createOption = (newOption) => {
if (newOption) { if (newOption) {
const newItem = { const newItem = {
name: newOption, name: newOption,
value: newOption value: newOption
} }
this.$emit('update-options', newItem) emit('update-options', newItem)
this.select(newItem) select(newItem)
}
}
} }
} }
// export default {
// components: { TextInput },
// directives: {
// onClickaway: vOnClickOutside
// }
// }
</script> </script>

View File

@ -21,7 +21,7 @@ export default {
}, },
computed: { computed: {
errorMessage () { errorMessage () {
if (!this.form.errors || !this.form.errors.any()) return null if (!this.form || !this.form.errors || !this.form.errors.any()) return null
const subErrorsKeys = Object.keys(this.form.errors.all()).filter((key) => { const subErrorsKeys = Object.keys(this.form.errors.all()).filter((key) => {
return key.startsWith(this.field) && key !== this.field return key.startsWith(this.field) && key !== this.field
}) })