chore: improve multiselect hover types

when hovering over props you can only see comments if written with JSDoc
This commit is contained in:
Dominik Pschenitschni 2022-10-28 18:49:09 +02:00
parent 1101fcb3ff
commit caa29c152d
Signed by untrusted user: dpschen
GPG Key ID: B257AC0149F43A77
1 changed files with 49 additions and 17 deletions

View File

@ -100,38 +100,52 @@ function elementInResults(elem: string | any, label: string, query: string): boo
} }
const props = defineProps({ const props = defineProps({
// When true, shows a loading spinner /**
* When true, shows a loading spinner
*/
loading: { loading: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// The placeholder of the search input /**
* The placeholder of the search input
*/
placeholder: { placeholder: {
type: String, type: String,
default: '', default: '',
}, },
// The search results where the @search listener needs to put the results into /**
* The search results where the @search listener needs to put the results into
*/
searchResults: { searchResults: {
type: Array as PropType<{[id: string]: any}>, type: Array as PropType<{[id: string]: any}>,
default: () => [], default: () => [],
}, },
// The name of the property of the searched object to show the user. /**
// If empty the component will show all raw data of an entry. * The name of the property of the searched object to show the user.
* If empty the component will show all raw data of an entry.
*/
label: { label: {
type: String, type: String,
default: '', default: '',
}, },
// The object with the value, updated every time an entry is selected. /**
* The object with the value, updated every time an entry is selected.
*/
modelValue: { modelValue: {
type: [] as PropType<{[key: string]: any}>, type: [] as PropType<{[key: string]: any}>,
default: null, default: null,
}, },
// If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it. /**
* If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
*/
creatable: { creatable: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// The text shown next to the new value option. /**
* The text shown next to the new value option.
*/
createPlaceholder: { createPlaceholder: {
type: String, type: String,
default() { default() {
@ -139,7 +153,9 @@ const props = defineProps({
return t('input.multiselect.createPlaceholder') return t('input.multiselect.createPlaceholder')
}, },
}, },
// The text shown next to an option. /**
* The text shown next to an option.
*/
selectPlaceholder: { selectPlaceholder: {
type: String, type: String,
default() { default() {
@ -147,22 +163,30 @@ const props = defineProps({
return t('input.multiselect.selectPlaceholder') return t('input.multiselect.selectPlaceholder')
}, },
}, },
// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case. /**
* If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
*/
multiple: { multiple: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// If true, displays the search results inline instead of using a dropdown. /**
* If true, displays the search results inline instead of using a dropdown.
*/
inline: { inline: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// If true, shows search results when no query is specified. /**
* If true, shows search results when no query is specified.
*/
showEmpty: { showEmpty: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
// The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke. /**
* The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
*/
searchDelay: { searchDelay: {
type: Number, type: Number,
default: 200, default: 200,
@ -175,13 +199,21 @@ const props = defineProps({
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:modelValue', value: null): void (e: 'update:modelValue', value: null): void
// @search: Triggered every time the search query input changes /**
* Triggered every time the search query input changes
*/
(e: 'search', query: string): void (e: 'search', query: string): void
// @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model. /**
* Triggered every time an option from the search results is selected. Also triggers a change in v-model.
*/
(e: 'select', value: {[key: string]: any}): void (e: 'select', value: {[key: string]: any}): void
// @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query. /**
* If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
*/
(e: 'create', query: string): void (e: 'create', query: string): void
// @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items. /**
* If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
*/
(e: 'remove', value: null): void (e: 'remove', value: null): void
}>() }>()