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

Added select input, v-click-outside for vselect

This commit is contained in:
Julien Nahum 2023-11-17 12:18:40 +01:00
parent 5bc4b866c4
commit 81a6d33681
4 changed files with 743 additions and 716 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

985
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
resources/js/components/common/Dropdown.vue
View File

@ -21,6 +21,9 @@ import { vOnClickOutside } from '@vueuse/components'
export default { export default {
name: 'Dropdown', name: 'Dropdown',
directives: {
onClickOutside: vOnClickOutside
},
props: { props: {
dropdownClass: { dropdownClass: {
type: String, type: String,

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

@ -1,5 +1,11 @@
<template> <template>
<div :class="wrapperClass"> <input-wrapper
v-bind="$props"
>
<template #label>
<slot name="label" />
</template>
<v-select v-model="compVal" <v-select v-model="compVal"
:dusk="name" :dusk="name"
:data="finalOptions" :data="finalOptions"
@ -15,7 +21,7 @@
:uppercase-labels="uppercaseLabels" :uppercase-labels="uppercaseLabels"
:theme="theme" :theme="theme"
:has-error="hasValidation && form.errors.has(name)" :has-error="hasValidation && form.errors.has(name)"
:allowCreation="allowCreation" :allow-creation="allowCreation"
:disabled="disabled" :disabled="disabled"
:help="help" :help="help"
:help-position="helpPosition" :help-position="helpPosition"
@ -58,21 +64,29 @@
</template> </template>
</v-select> </v-select>
<has-error v-if="hasValidation" :form="form" :field="name" /> <template #help>
</div> <slot name="help" />
</template>
<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 InputWrapper from './components/InputWrapper.vue'
/** /**
* Options: {name,value} objects * Options: {name,value} objects
*/ */
export default { export default {
name: 'SelectInput', name: 'SelectInput',
mixins: [inputMixin], components: { InputWrapper },
props: { props: {
...inputProps,
options: { type: Array, required: true }, options: { type: Array, required: true },
optionKey: { type: String, default: 'value' }, optionKey: { type: String, default: 'value' },
emitKey: { type: String, default: 'value' }, emitKey: { type: String, default: 'value' },
@ -82,13 +96,30 @@ export default {
searchable: { type: Boolean, default: false }, searchable: { type: Boolean, default: false },
allowCreation: { type: Boolean, default: false } allowCreation: { type: Boolean, default: false }
}, },
setup (props, context) {
const {
compVal,
inputStyle,
hasValidation,
hasError
} = useFormInput(props, context)
return {
compVal,
inputStyle,
hasValidation,
hasError
}
},
data () { data () {
return { return {
additionalOptions: [] additionalOptions: []
} }
}, },
computed: { computed: {
finalOptions(){ finalOptions () {
return this.options.concat(this.additionalOptions) return this.options.concat(this.additionalOptions)
} }
}, },
@ -100,8 +131,8 @@ export default {
if (option) return option[this.displayKey] if (option) return option[this.displayKey]
return null return null
}, },
updateOptions(newItem) { updateOptions (newItem) {
if(newItem){ if (newItem) {
this.additionalOptions.push(newItem) this.additionalOptions.push(newItem)
} }
} }

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

@ -1,31 +1,23 @@
<template> <template>
<div class="v-select"> <div v-on-click-outside="closeDropdown" class="v-select relative">
<label v-if="label"
:class="[theme.SelectInput.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="flex mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<div class="relative">
<span class="inline-block w-full rounded-md"> <span class="inline-block w-full rounded-md">
<button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
class="cursor-pointer" class="cursor-pointer"
:style="inputStyle" :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]" :style="inputStyle"
:class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
@click="openDropdown" @click="openDropdown"
> >
<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="modelValue" key="modelValue" class="flex" :class="{'min-h-8': multiple}"> <div v-else-if="modelValue" key="value" class="flex" :class="{'min-h-8': multiple}">
<slot name="selected" :option="modelValue" /> <slot name="selected" :option="modelValue" />
</div> </div>
<div v-else key="placeholder"> <div v-else key="placeholder">
<slot name="placeholder"> <slot name="placeholder">
<div class="text-gray-400 dark:text-gray-500 w-full text-left" :class="{'py-1': multiple && !loading}"> <div class="text-gray-400 dark:text-gray-500 w-full text-left"
:class="{'py-1': multiple && !loading}"
>
{{ placeholder }} {{ placeholder }}
</div> </div>
</slot> </slot>
@ -48,7 +40,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.value" name="search" :color="color" :theme="theme" <text-input v-model="searchTerm" name="search" :color="color" :theme="theme"
placeholder="Search..." placeholder="Search..."
/> />
</div> </div>
@ -77,33 +69,26 @@
</ul> </ul>
</div> </div>
</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> </template>
<script setup> <script>
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'
import debounce from 'debounce' import debounce from 'debounce'
export default {
defineOptions({ name: 'VSelect',
name: 'VSelect' components: { TextInput },
}) directives: {
onClickOutside: vOnClickOutside
const props = defineProps({ },
props: {
data: Array, data: Array,
modelValue: { 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 },
dusk: { type: String, default: null },
loading: { type: Boolean, default: false }, loading: { type: Boolean, default: false },
required: { type: Boolean, default: false }, required: { type: Boolean, default: false },
multiple: { type: Boolean, default: false }, multiple: { type: Boolean, default: false },
@ -118,132 +103,121 @@ const props = defineProps({
uppercaseLabels: { type: Boolean, default: true }, uppercaseLabels: { type: Boolean, default: true },
theme: { type: Object, default: () => themes.default }, theme: { type: Object, default: () => themes.default },
allowCreation: { type: Boolean, default: false }, 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 () {
})
const emit = defineEmits(['update:modelValue', 'update-options'])
const defaultValue = ref(props.modelValue)
let searchTerm = ref('')
let isOpen = ref(false)
const optionStyle = computed(() => {
return { return {
'--bg-form-color': props.color isOpen: false,
searchTerm: '',
defaultValue: this.modelValue ?? null
} }
}) },
computed: {
const inputStyle = computed(() => { optionStyle () {
return { return {
'--tw-ring-color': props.color '--bg-form-color': this.color
} }
}) },
inputStyle () {
const debouncedRemote = computed(() => { return {
if (props.remote) { '--tw-ring-color': this.color
return debounce(props.remote, 300) }
},
debouncedRemote () {
if (this.remote) {
return debounce(this.remote, 300)
} }
return null return null
}) },
filteredOptions () {
const filteredOptions = computed(() => { if (!this.data) return []
if (!props.data) return [] if (!this.searchable || this.remote || this.searchTerm === '') {
if (!props.searchable || props.remote || searchTerm.value === '') { return this.data
return props.data
} }
// Fuse search // Fuse search
const fuzeOptions = { const fuzeOptions = {
keys: props.searchKeys keys: this.searchKeys
} }
const fuse = new Fuse(props.data, fuzeOptions) const fuse = new Fuse(this.data, fuzeOptions)
return fuse.search(searchTerm.value).map((res) => { return fuse.search(this.searchTerm).map((res) => {
return res.item return res.item
}) })
}) },
isSearchable () {
const isSearchable = computed(() => { return this.searchable || this.remote !== null || this.allowCreation
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)
} }
}) },
watch: {
searchTerm (val) {
if (!this.debouncedRemote) return
if ((this.remote && val) || (val === '' && !this.modelValue) || (val === '' && this.isOpen)) {
return this.debouncedRemote(val)
}
}
},
methods: {
isSelected (value) {
if (!this.modelValue) return false
if (this.emitKey && value[this.emitKey]) {
const isSelected = (value) => { value = value[this.emitKey]
if (!props.modelValue) return false
if (props.emitKey && value[props.emitKey]) {
value = value[props.emitKey]
} }
if (props.multiple) { if (this.multiple) {
return props.modelValue.includes(value) return this.modelValue.includes(value)
} }
return props.modelValue === value return this.modelValue === value
} },
closeDropdown () {
const closeDropdown = () => { this.isOpen = false
isOpen.value = false this.searchTerm = ''
searchTerm.value = '' },
} openDropdown () {
const openDropdown = () => { this.isOpen = this.disabled ? false : !this.isOpen
isOpen.value = props.disabled ? false : !isOpen.value },
} select (value) {
const select = (value) => { if (!this.multiple) {
if (!props.multiple) { this.closeDropdown()
closeDropdown()
} }
if (props.emitKey) { if (this.emitKey) {
value = value[props.emitKey] value = value[this.emitKey]
} }
if (props.multiple) { if (this.multiple) {
const emitValue = Array.isArray(props.modelValue) ? [...props.modelValue] : [] const emitValue = Array.isArray(this.modelValue) ? [...this.modelValue] : []
if (isSelected(value)) { if (this.isSelected(value)) {
emit('update:modelValue', emitValue.filter((item) => { this.$emit('update:modelValue', emitValue.filter((item) => {
if (props.emitKey) { if (this.emitKey) {
return item !== value return item !== value
} }
return item[props.optionKey] !== value && item[props.optionKey] !== value[props.optionKey] return item[this.optionKey] !== value && item[this.optionKey] !== value[this.optionKey]
})) }))
return return
} }
emitValue.push(value) emitValue.push(value)
emit('update:modelValue', emitValue) this.$emit('update:modelValue', emitValue)
} else { } else {
if (props.modelValue === value) { if (this.modelValue === value) {
emit('update:modelValue', defaultValue ?? null) this.$emit('update:modelValue', this.defaultValue ?? null)
} else { } else {
emit('update:modelValue', value) this.$emit('update:modelValue', value)
} }
} }
} },
const createOption = (newOption) => { createOption (newOption) {
if (newOption) { if (newOption) {
const newItem = { const newItem = {
name: newOption, name: newOption,
value: newOption value: newOption
} }
emit('update-options', newItem) this.$emit('update-options', newItem)
select(newItem) this.select(newItem)
}
}
} }
} }
// export default {
// components: { TextInput },
// directives: {
// onClickaway: vOnClickOutside
// }
// }
</script> </script>