-
+
{{ option[optionLabel] }}
@@ -153,23 +160,33 @@
import { computed, defineComponent, onMounted, ref, onUnmounted, nextTick, onBeforeUpdate } from 'vue';
import { isEqual as _isEqual, cloneDeep } from 'lodash-es';
import type { PropType } from 'vue';
-import { placeholder, autofocus, clearable, disabled, label, name, error, large } from '@/shared-props';
+import {
+ placeholder,
+ autofocus,
+ clearable,
+ disabled,
+ label,
+ name,
+ error,
+ large,
+ loading
+} from '@/shared-props';
import { useVModel } from 'composables/reactivity';
import { getIcon, wrap } from '@/helpers';
import type { MaybeArray } from 'types/utilities';
import clickAway from '@/directives/click-away';
import UIFadeTransition from 'components/transitions/UIFadeTransition.vue';
import UIExpandTransition from 'components/transitions/UIExpandTransition.vue';
+import UISpinnerLoader from 'components/loader-spinner/UISpinnerLoader.vue';
-type OptionObject = Record
;
-type Option = OptionObject | string;
+type Option = Record;
export default defineComponent({
name: 'UISelect',
directives: { clickAway },
- components: { UIFadeTransition, UIExpandTransition },
+ components: { UIFadeTransition, UIExpandTransition, UISpinnerLoader },
props: {
modelValue: {
@@ -180,7 +197,7 @@ export default defineComponent({
* Array of option objects.
*/
options: {
- type: Array as PropType,
+ type: Array as PropType<(Option | string)[]>,
required: true
},
@@ -231,7 +248,7 @@ export default defineComponent({
* Function to use when evaluating a search term.
*/
searchClosure: {
- type: Function as PropType<(o: OptionObject, term: string) => boolean>
+ type: Function as PropType<(o: Option, term: string) => boolean>
},
/**
@@ -261,7 +278,8 @@ export default defineComponent({
disabled,
name,
large,
- error
+ error,
+ loading
},
emits: ['update:modelValue'],
@@ -284,7 +302,7 @@ export default defineComponent({
return options.map(option => typeof option === 'string' ? option : option[props.optionLabel]).join(', ');
});
- const filteredOptions = computed(() => {
+ const filteredOptions = computed(() => {
const formattedOptions = props.options.map(option =>
typeof option === 'string' ? { [props.optionKey]: option, [props.optionLabel]: option } : option
);
@@ -293,7 +311,7 @@ export default defineComponent({
return formattedOptions;
}
- let selectedOptions = (selected.value ? wrap(cloneDeep(selected.value)) : []).map(option =>
+ const selectedOptions = (selected.value ? wrap(cloneDeep(selected.value)) : []).map(option =>
typeof option === 'string' ? { [props.optionKey]: option, [props.optionLabel]: option } : option
);
@@ -326,7 +344,7 @@ export default defineComponent({
await nextTick();
open.value = false;
search.value = '';
- window.removeEventListener('resize', setPosition);
+ globalThis?.window.removeEventListener('resize', setPosition);
};
const openList = async () => {
if (props.disabled) return;
@@ -335,29 +353,29 @@ export default defineComponent({
await nextTick();
setPosition();
searchInput.value?.focus({ preventScroll: true });
- window.addEventListener('resize', setPosition);
+ globalThis?.window.addEventListener('resize', setPosition);
};
- const clearSelection = (option?: OptionObject) => {
+ const clearSelection = (option?: Option) => {
if (
// nothing to clear
selectionCount.value === 0
// or not clearable single select
|| !props.clearable && !props.multi
// or not clearable multi-select with only one value
- || !props.clearable && props.multi && (selected.value as Option[]).length === 1
+ || !props.clearable && props.multi && (selected.value as Option[] | string[]).length === 1
) {
return;
}
if (option && props.multi) {
- selected.value = (selected.value as Option[]).filter(opt => !isEqual(opt, option));
+ selected.value = (selected.value as (Option | string)[]).filter(opt => !isEqual(opt, option));
return;
}
selected.value = props.multi ? [] : null;
};
- const isEqual = (previous: Option, next: Option): boolean => {
+ const isEqual = (previous: Option | string, next: Option | string): boolean => {
// Compare as strings options (checking type of previous/next to satisfy TS).
if (typeof previous === 'string' || typeof next === 'string') {
const previousString: string = typeof previous === 'string' ? previous : previous[props.optionKey];
@@ -371,12 +389,12 @@ export default defineComponent({
? _isEqual(previous, next)
: _isEqual(previous[props.optionKey], next[props.optionKey]);
};
- const isSelected = (option: OptionObject) => {
+ const isSelected = (option: Option) => {
const values = selected.value ? wrap(cloneDeep(selected.value)) : [];
return values.findIndex(selectedOption => isEqual(selectedOption, option)) !== -1;
};
- const select = async (option: OptionObject) => {
+ const select = async (option: Option) => {
if (isSelected(option)) {
return;
}
@@ -418,6 +436,11 @@ export default defineComponent({
zIndex: '9999',
top: `${fitsOnTheBottom ? below : above}px`
};
+
+ if (!fitsOnTheBottom && selectRect.top - offset <= listRect.height) {
+ style.value.height = `${selectRect.top - offset}px`;
+ style.value.top = '0px';
+ }
};
onMounted(async () => {
@@ -432,7 +455,7 @@ export default defineComponent({
onUnmounted(() => {
// in case it's unmounted while open
- window.removeEventListener('resize', setPosition);
+ globalThis?.window.removeEventListener('resize', setPosition);
});
return {
diff --git a/src/components/select/__snapshots__/UISelect.test.ts.snap b/src/components/select/__snapshots__/UISelect.test.ts.snap
index 01e5f037..801a020a 100644
--- a/src/components/select/__snapshots__/UISelect.test.ts.snap
+++ b/src/components/select/__snapshots__/UISelect.test.ts.snap
@@ -17,9 +17,10 @@ exports[`UISelect display should display correctly 1`] = `