@teammodlr/ui-kit 2.0.29 → 2.0.31

package/src/components/select/Select.vue

@@ -1,569 +1,570 @@
-<template>
-    <div ref="selectRef" tabindex="-1">
-        <label v-if="label" :for="id" :class="style.label" :id="`${id}-label`">
-            {{ label }}
-        </label>
-        <div v-if="description" :class="style.description">
-            {{ description }}
-        </div>
-
-        <div :class="computedWrapperClasses" v-on="inputListeners" :id="id" ref="container"
-             :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`" tabindex="0"
-             @focusin="focusSelect">
-
-            <div :class="selectComputedClasses">
-                <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
-                    <MTag
-                        v-for="value in selected"
-                        :key="value"
-                        :closeable="true"
-                        @close="removeSelected(value)"
-                        :size="size"
-                    >
-                        {{ getSelectedLabel(value) }}
-                    </MTag>
-                </template>
-                <template v-else-if="!multiple && selected">
-                    {{ getSelectedLabel(selected) }}
-                </template>
-                <template v-else>
-                    <div :class="style.placeholder">{{ placeholder }}</div>
-                </template>
-            </div>
-
-            <Teleport :to="'body'">
-                <Transition :name="transitionName">
-                    <div :class="style.menu" v-if="isOpen" ref="popper" :style="computedConsistentWidth"
-                         :aria-hidden="isOpen ? 'false' : 'true'">
-                        <div v-if="searchable" :class="style.search">
-                            <MInput v-model="search" placeholder="Search" size="sm" ref="searchRef"/>
-                        </div>
-                        <div :class="style.options">
-                            <div v-for="(option, index) in computedOptions" :key="index" ref="optionsRef"
-                                 :class="{
-                                        [style.option]: true,
-                                        [style.optionSelected]: option.active,
-                                        [style.optionFocused]: selectedIndex === index
-                                    }"
-                                 @click="option.onClick"
-                                 @hover="selectedIndex = index">
-                                {{ option.label }}
-                            </div>
-                        </div>
-                    </div>
-                </Transition>
-            </Teleport>
-        </div>
-        <div v-if="inputError" :class="style.errorMessage">
-            {{ inputError }}
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import {useInput} from "../../composables/useInput";
-import {usePopper, type Placement} from "../../composables/usePopper";
-import type {Size} from "../../types/props";
-import {onClickOutside, useEventListener} from '@vueuse/core';
-import {
-    computed,
-    defineComponent,
-    nextTick,
-    ref,
-    watch,
-    watchEffect,
-    defineExpose,
-    type PropType
-} from "vue";
-import {MInput, MTag} from "..";
-import * as style from "./style";
-import {useInteractive} from "../../composables/useInteractive";
-
-export default defineComponent({
-    name: 'MSelect',
-    emits: useInput.emits(),
-    props: {
-        ...useInput.props(),
-        ...useInteractive.props(),
-        label: {
-            type: String
-        },
-        placeholder: {
-            type: String,
-            default: 'Select an option'
-        },
-        options: {
-            type: Array as PropType<Array<any>>,
-            required: true
-        },
-        searchable: {
-            type: Boolean,
-            default: false
-        },
-        multiple: {
-            type: Boolean,
-            default: false
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md',
-        },
-        description: {
-            type: String,
-            default: ''
-        },
-        optionValue: {
-            type: String,
-            default: 'value'
-        },
-        optionLabel: {
-            type: String,
-            default: 'label'
-        },
-        transitionName: {
-            type: String,
-            default: 'fade'
-        },
-        consistentWidth: {
-            type: Boolean,
-            default: true
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        error: {
-            type: String,
-        },
-    },
-    components: {
-        MInput,
-        MTag
-    },
-    setup(props, {emit}) {
-        const container = ref<HTMLElement | null>(null);
-        const wrapper = ref<HTMLElement>();
-        const optionsRef = ref<HTMLElement[]>();
-        const searchRef = ref<HTMLElement>();
-        const selectRef = ref<HTMLElement>();
-        const selectedIndex = ref<number | undefined>(0);
-        const open = ref<boolean>(false);
-        const focused = ref<boolean>(false);
-        const search = ref<string>('');
-        const placement = ref<Placement>("bottom-start");
-        const transfer = ref(false);
-        const width = ref<number>(0);
-        const keyboardNavigation = ref<boolean>(false);
-
-
-        const {focus, blur} = useInteractive(container);
-        // TODO: Add debounce on keyboard movement (hover flicks it back up)
-        const {
-            id,
-            insideForm,
-            inputListeners,
-            formError,
-            formDisabled,
-            formLoading
-        } = useInput(props, {focus, emit, withListeners: false});
-
-        const {popper} = usePopper({
-            placement,
-            transfer,
-            reference: container,
-            wrapper,
-            offset: [0, 5]
-        });
-
-        const disabled = computed(() => formDisabled || props.disabled);
-        const loading = computed(() => formLoading || props.loading);
-
-        const selected = computed<any | any[]>({
-            get() {
-                if (props.multiple) {
-                    if (!props.modelValue) {
-                        return [];
-                    }
-
-                    if (Array.isArray(props.modelValue)) {
-                        return props.modelValue;
-                    }
-
-                    return [props.modelValue];
-                }
-
-                return props.modelValue || null;
-            },
-            set(value: string | number | []) {
-                emit('update:modelValue', value);
-            }
-        });
-
-        const computedConsistentWidth = computed(() => {
-            if (props.consistentWidth) {
-                return {
-                    width: width.value + 'px'
-                }
-            }
-
-            return {};
-        });
-
-        const computedOptions = computed(() => {
-            if (!props.options || props.options.length == 0) {
-                return [];
-            }
-
-            // Filter options by search
-            if (props.searchable && search.value) {
-                return props.options.filter((option) => {
-                    return option[props.optionLabel].toLowerCase().includes(search.value.toLowerCase());
-                }).map((option) => {
-                    if (option[props.optionValue] === undefined) {
-                        throw new Error('Option value is undefined');
-                    }
-
-                    if (option[props.optionLabel] === undefined) {
-                        throw new Error('Option label is undefined');
-                    }
-
-                    let value = option[props.optionValue];
-                    let active = false;
-                    if (props.multiple && Array.isArray(selected.value)) {
-                        active = selected.value.includes(value);
-                    } else {
-                        active = selected.value === value;
-                    }
-
-                    return {
-                        value: value,
-                        label: option[props.optionLabel],
-                        active: active,
-                        onClick: () => handleOptionClick(value)
-                    }
-                }).filter((option) => {
-                    if (props.multiple && Array.isArray(selected.value)) {
-                        // Filter out selected options
-                        return !selected.value.includes(option.value);
-                    }
-
-                    return true;
-                });
-            }
-
-            return props.options.map((option) => {
-                if (option[props.optionValue] === undefined) {
-                    throw new Error('Option value is undefined');
-                }
-
-                if (option[props.optionLabel] === undefined) {
-                    throw new Error('Option label is undefined');
-                }
-
-                let value = option[props.optionValue];
-                let active = false;
-                if (props.multiple && Array.isArray(selected.value)) {
-                    active = selected.value.includes(value);
-                } else {
-                    active = selected.value === value;
-                }
-
-                return {
-                    value: value,
-                    label: option[props.optionLabel],
-                    active: active,
-                    onClick: () => handleOptionClick(value)
-                }
-            }).filter((option) => {
-                if (props.multiple && Array.isArray(selected.value)) {
-                    // Filter out selected options
-                    return !selected.value.includes(option.value);
-                }
-
-                return true;
-            });
-        });
-
-        function openSelect() {
-            if (disabled.value || loading.value) {
-                return;
-            }
-
-            open.value = true;
-        }
-
-        function getSelectedIndex(start: number | undefined, direction = 'down') {
-            if (typeof start === 'undefined') {
-                start = direction === 'down' ? -1 : 1;
-            }
-
-            if (direction === 'down') {
-                let next = start + 1;
-
-                if (next > computedOptions.value.length - 1) {
-                    next = 0;
-                }
-
-                selectedIndex.value = next;
-            } else {
-                let next = start - 1;
-
-                if (next < 0) {
-                    next = computedOptions.value.length - 1;
-                }
-
-                selectedIndex.value = next;
-            }
-        }
-
-        function handleOptionClick(value: string | number) {
-            const option = computedOptions.value.find((item) => item.value === value);
-            if (!option) {
-                return;
-            }
-
-            if (props.multiple) {
-                if (Array.isArray(selected.value)) {
-                    const index = selected.value.indexOf(value);
-
-                    if (index !== -1) {
-                        selected.value.splice(index, 1);
-                    } else {
-                        selected.value.push(value);
-                        emit('update:modelValue', selected.value);
-                    }
-                } else {
-                    selected.value = [value];
-                }
-            } else {
-                selected.value = value;
-                open.value = false;
-            }
-        }
-
-        function removeSelected(value: string | number) {
-            if (!props.multiple) {
-                return;
-            }
-
-            if (Array.isArray(selected.value)) {
-                const index = selected.value.indexOf(value);
-
-                if (index !== -1) {
-                    selected.value.splice(index, 1);
-                }
-            }
-        }
-
-        function handleKeyDown(e: Event) {
-            if (computedOptions.value.length === 0) {
-                return;
-            }
-
-            if (props.disabled) {
-                return;
-            }
-
-            keyboardNavigation.value = true;
-
-            const event: KeyboardEvent = e as KeyboardEvent;
-
-            switch (event.code) {
-                case 'Tab':
-                    if (open.value) {
-                        open.value = false;
-                    }
-                    break;
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (!open.value) {
-                        open.value = true;
-                        return;
-                    }
-
-                    getSelectedIndex(selectedIndex.value, 'down');
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    if (!open.value) {
-                        return;
-                    }
-
-                    getSelectedIndex(selectedIndex.value, 'up');
-                    break;
-                case 'Enter':
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    if (!open.value) {
-                        open.value = true;
-                        return;
-                    }
-
-                    if (typeof selectedIndex.value !== 'undefined') {
-                        handleOptionClick(computedOptions.value[selectedIndex.value].value);
-                        if (!props.multiple) {
-                            open.value = false;
-                        }
-                    }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    if (!open.value) {
-                        return;
-                    }
-
-                    open.value = false;
-                    break;
-            }
-        }
-
-        function focusOut(e: Event) {
-            console.log(e);
-
-        }
-
-        const transitionName = computed(() => {
-            return `m-transition__${props.transitionName}`;
-        });
-
-        const containerComputedClasses = computed(() => {
-            return [
-                'm-select__container',
-                {
-                    'm-form__input': insideForm
-                }
-            ]
-        });
-
-        const computedWrapperClasses = computed(() => {
-            return [
-                style.wrapper,
-                {
-                    [style.focused]: focused.value,
-                }
-            ]
-        });
-
-        const selectComputedClasses = computed(() => {
-            return [
-                style.base,
-                {
-                    [style.selectedTags]: props.multiple,
-                    [style.focused]: open.value,
-                    // [`m-select--${props.size}`]: props.size,
-                    'm-select--disabled': disabled.value || loading.value,
-                    'm-select--focused': open.value,
-                    'm-select--multiple': props.multiple,
-                    'm-select--error': formError.value
-                }
-            ]
-        });
-
-        function getSelectedLabel(value: string | number | []) {
-            const option = props.options.find((i) => i[props.optionValue] === value)
-            if (!option) {
-                return null;
-            }
-
-            return option[props.optionLabel];
-        }
-
-        useEventListener(selectRef, 'keydown', handleKeyDown)
-        useEventListener(searchRef, 'keydown', handleKeyDown)
-
-        onClickOutside(container, () => {
-            open.value = false;
-        }, {ignore: [searchRef, popper]});
-
-        watchEffect(() => {
-            if (container.value && open.value) {
-                width.value = container.value.offsetWidth;
-            }
-        });
-
-        watch(selectedIndex, (index: number | undefined) => {
-            if (!keyboardNavigation.value) {
-                return;
-            }
-            if (typeof index !== 'undefined' && optionsRef.value) {
-                optionsRef.value[index].scrollIntoView({block: 'nearest', inline: 'nearest'});
-            }
-        })
-
-        watch(open, (value: boolean) => {
-            nextTick(() => {
-                if (value && optionsRef.value) {
-                    const index = computedOptions.value.findIndex((i) => i.value === selected.value);
-                    if (index !== -1) {
-                        optionsRef.value[index].scrollIntoView({block: 'center', inline: 'nearest'});
-                        selectedIndex.value = index;
-                    }
-                }
-
-                keyboardNavigation.value = false;
-            });
-        });
-
-        const inputError = computed(() => {
-            return formError.value || props.error;
-        });
-
-        const isOpen = computed(() => {
-            if (props.multiple && computedOptions.value.length == 0 && !search.value) {
-                return false;
-            }
-            return open.value;
-        });
-
-        const focusSelect = () => {
-            if (selectRef.value) {
-                openSelect();
-            }
-        }
-
-        defineExpose({
-            focus,
-            blur,
-        })
-
-        return {
-            container,
-            optionsRef,
-            searchRef,
-            selectRef,
-            popper,
-            focusSelect,
-            focusOut,
-
-            id,
-            isOpen,
-            open,
-            selected,
-            computedOptions,
-            selectedIndex,
-            search,
-
-            containerComputedClasses,
-            selectComputedClasses,
-            computedWrapperClasses,
-            computedConsistentWidth,
-
-            getSelectedLabel,
-            openSelect,
-            removeSelected,
-            inputError,
-            transitionName,
-            inputListeners,
-            style,
-            focused
-        }
-    }
-});
-</script>
+<template>
+    <div ref="selectRef" tabindex="-1">
+        <label v-if="label" :for="id" :class="style.label" :id="`${id}-label`">
+            {{ label }}
+        </label>
+        <div v-if="description" :class="style.description">
+            {{ description }}
+        </div>
+
+        <div :class="computedWrapperClasses" v-on="inputListeners" :id="id" ref="container"
+             :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`" tabindex="0"
+             @focusin="focusSelect">
+
+            <div :class="selectComputedClasses">
+                <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
+                    <MTag
+                        v-for="value in selected"
+                        :key="value"
+                        :closeable="true"
+                        @close="removeSelected(value)"
+                        :size="size"
+                    >
+                        {{ getSelectedLabel(value) }}
+                    </MTag>
+                </template>
+                <template v-else-if="!multiple && selected">
+                    {{ getSelectedLabel(selected) }}
+                </template>
+                <template v-else>
+                    <div :class="style.placeholder">{{ placeholder }}</div>
+                </template>
+            </div>
+
+            <Teleport :to="'body'">
+                <Transition :name="transitionName">
+                    <div :class="style.menu" v-if="isOpen" ref="popper" :style="computedConsistentWidth"
+                         :aria-hidden="isOpen ? 'false' : 'true'">
+                        <div v-if="searchable" :class="style.search">
+                            <MInput v-model="search" placeholder="Search" size="sm" ref="searchRef"/>
+                        </div>
+                        <div :class="style.options">
+                            <div v-for="(option, index) in computedOptions" :key="index" ref="optionsRef"
+                                 :class="{
+                                        [style.option]: true,
+                                        [style.optionSelected]: option.active,
+                                        [style.optionFocused]: selectedIndex === index
+                                    }"
+                                 @click="option.onClick"
+                                 @hover="selectedIndex = index">
+                                {{ option.label }}
+                            </div>
+                        </div>
+                    </div>
+                </Transition>
+            </Teleport>
+        </div>
+        <div v-if="inputError" :class="style.errorMessage">
+            {{ inputError }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {useInput} from "../../composables/useInput";
+import {usePopper, type Placement} from "../../composables/usePopper";
+import type {Size} from "../../types/props";
+import {onClickOutside, useEventListener} from '@vueuse/core';
+import {
+    computed,
+    defineComponent,
+    nextTick,
+    ref,
+    watch,
+    watchEffect,
+    defineExpose,
+    type PropType
+} from "vue";
+import MInput from "../input/Input.vue";
+import MTag from "../tag/Tag.vue";
+import * as style from "./style";
+import {useInteractive} from "../../composables/useInteractive";
+
+export default defineComponent({
+    name: 'MSelect',
+    emits: useInput.emits(),
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        label: {
+            type: String
+        },
+        placeholder: {
+            type: String,
+            default: 'Select an option'
+        },
+        options: {
+            type: Array as PropType<Array<any>>,
+            required: true
+        },
+        searchable: {
+            type: Boolean,
+            default: false
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        description: {
+            type: String,
+            default: ''
+        },
+        optionValue: {
+            type: String,
+            default: 'value'
+        },
+        optionLabel: {
+            type: String,
+            default: 'label'
+        },
+        transitionName: {
+            type: String,
+            default: 'fade'
+        },
+        consistentWidth: {
+            type: Boolean,
+            default: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        error: {
+            type: String,
+        },
+    },
+    components: {
+        MInput,
+        MTag
+    },
+    setup(props, {emit}) {
+        const container = ref<HTMLElement | null>(null);
+        const wrapper = ref<HTMLElement>();
+        const optionsRef = ref<HTMLElement[]>();
+        const searchRef = ref<HTMLElement>();
+        const selectRef = ref<HTMLElement>();
+        const selectedIndex = ref<number | undefined>(0);
+        const open = ref<boolean>(false);
+        const focused = ref<boolean>(false);
+        const search = ref<string>('');
+        const placement = ref<Placement>("bottom-start");
+        const transfer = ref(false);
+        const width = ref<number>(0);
+        const keyboardNavigation = ref<boolean>(false);
+
+
+        const {focus, blur} = useInteractive(container);
+        // TODO: Add debounce on keyboard movement (hover flicks it back up)
+        const {
+            id,
+            insideForm,
+            inputListeners,
+            formError,
+            formDisabled,
+            formLoading
+        } = useInput(props, {focus, emit, withListeners: false});
+
+        const {popper} = usePopper({
+            placement,
+            transfer,
+            reference: container,
+            wrapper,
+            offset: [0, 5]
+        });
+
+        const disabled = computed(() => formDisabled || props.disabled);
+        const loading = computed(() => formLoading || props.loading);
+
+        const selected = computed<any | any[]>({
+            get() {
+                if (props.multiple) {
+                    if (!props.modelValue) {
+                        return [];
+                    }
+
+                    if (Array.isArray(props.modelValue)) {
+                        return props.modelValue;
+                    }
+
+                    return [props.modelValue];
+                }
+
+                return props.modelValue || null;
+            },
+            set(value: string | number | []) {
+                emit('update:modelValue', value);
+            }
+        });
+
+        const computedConsistentWidth = computed(() => {
+            if (props.consistentWidth) {
+                return {
+                    width: width.value + 'px'
+                }
+            }
+
+            return {};
+        });
+
+        const computedOptions = computed(() => {
+            if (!props.options || props.options.length == 0) {
+                return [];
+            }
+
+            // Filter options by search
+            if (props.searchable && search.value) {
+                return props.options.filter((option) => {
+                    return option[props.optionLabel].toLowerCase().includes(search.value.toLowerCase());
+                }).map((option) => {
+                    if (option[props.optionValue] === undefined) {
+                        throw new Error('Option value is undefined');
+                    }
+
+                    if (option[props.optionLabel] === undefined) {
+                        throw new Error('Option label is undefined');
+                    }
+
+                    let value = option[props.optionValue];
+                    let active = false;
+                    if (props.multiple && Array.isArray(selected.value)) {
+                        active = selected.value.includes(value);
+                    } else {
+                        active = selected.value === value;
+                    }
+
+                    return {
+                        value: value,
+                        label: option[props.optionLabel],
+                        active: active,
+                        onClick: () => handleOptionClick(value)
+                    }
+                }).filter((option) => {
+                    if (props.multiple && Array.isArray(selected.value)) {
+                        // Filter out selected options
+                        return !selected.value.includes(option.value);
+                    }
+
+                    return true;
+                });
+            }
+
+            return props.options.map((option) => {
+                if (option[props.optionValue] === undefined) {
+                    throw new Error('Option value is undefined');
+                }
+
+                if (option[props.optionLabel] === undefined) {
+                    throw new Error('Option label is undefined');
+                }
+
+                let value = option[props.optionValue];
+                let active = false;
+                if (props.multiple && Array.isArray(selected.value)) {
+                    active = selected.value.includes(value);
+                } else {
+                    active = selected.value === value;
+                }
+
+                return {
+                    value: value,
+                    label: option[props.optionLabel],
+                    active: active,
+                    onClick: () => handleOptionClick(value)
+                }
+            }).filter((option) => {
+                if (props.multiple && Array.isArray(selected.value)) {
+                    // Filter out selected options
+                    return !selected.value.includes(option.value);
+                }
+
+                return true;
+            });
+        });
+
+        function openSelect() {
+            if (disabled.value || loading.value) {
+                return;
+            }
+
+            open.value = true;
+        }
+
+        function getSelectedIndex(start: number | undefined, direction = 'down') {
+            if (typeof start === 'undefined') {
+                start = direction === 'down' ? -1 : 1;
+            }
+
+            if (direction === 'down') {
+                let next = start + 1;
+
+                if (next > computedOptions.value.length - 1) {
+                    next = 0;
+                }
+
+                selectedIndex.value = next;
+            } else {
+                let next = start - 1;
+
+                if (next < 0) {
+                    next = computedOptions.value.length - 1;
+                }
+
+                selectedIndex.value = next;
+            }
+        }
+
+        function handleOptionClick(value: string | number) {
+            const option = computedOptions.value.find((item) => item.value === value);
+            if (!option) {
+                return;
+            }
+
+            if (props.multiple) {
+                if (Array.isArray(selected.value)) {
+                    const index = selected.value.indexOf(value);
+
+                    if (index !== -1) {
+                        selected.value.splice(index, 1);
+                    } else {
+                        selected.value.push(value);
+                        emit('update:modelValue', selected.value);
+                    }
+                } else {
+                    selected.value = [value];
+                }
+            } else {
+                selected.value = value;
+                open.value = false;
+            }
+        }
+
+        function removeSelected(value: string | number) {
+            if (!props.multiple) {
+                return;
+            }
+
+            if (Array.isArray(selected.value)) {
+                const index = selected.value.indexOf(value);
+
+                if (index !== -1) {
+                    selected.value.splice(index, 1);
+                }
+            }
+        }
+
+        function handleKeyDown(e: Event) {
+            if (computedOptions.value.length === 0) {
+                return;
+            }
+
+            if (props.disabled) {
+                return;
+            }
+
+            keyboardNavigation.value = true;
+
+            const event: KeyboardEvent = e as KeyboardEvent;
+
+            switch (event.code) {
+                case 'Tab':
+                    if (open.value) {
+                        open.value = false;
+                    }
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!open.value) {
+                        open.value = true;
+                        return;
+                    }
+
+                    getSelectedIndex(selectedIndex.value, 'down');
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!open.value) {
+                        return;
+                    }
+
+                    getSelectedIndex(selectedIndex.value, 'up');
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (!open.value) {
+                        open.value = true;
+                        return;
+                    }
+
+                    if (typeof selectedIndex.value !== 'undefined') {
+                        handleOptionClick(computedOptions.value[selectedIndex.value].value);
+                        if (!props.multiple) {
+                            open.value = false;
+                        }
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (!open.value) {
+                        return;
+                    }
+
+                    open.value = false;
+                    break;
+            }
+        }
+
+        function focusOut(e: Event) {
+            console.log(e);
+
+        }
+
+        const transitionName = computed(() => {
+            return `m-transition__${props.transitionName}`;
+        });
+
+        const containerComputedClasses = computed(() => {
+            return [
+                'm-select__container',
+                {
+                    'm-form__input': insideForm
+                }
+            ]
+        });
+
+        const computedWrapperClasses = computed(() => {
+            return [
+                style.wrapper,
+                {
+                    [style.focused]: focused.value,
+                }
+            ]
+        });
+
+        const selectComputedClasses = computed(() => {
+            return [
+                style.base,
+                {
+                    [style.selectedTags]: props.multiple,
+                    [style.focused]: open.value,
+                    // [`m-select--${props.size}`]: props.size,
+                    'm-select--disabled': disabled.value || loading.value,
+                    'm-select--focused': open.value,
+                    'm-select--multiple': props.multiple,
+                    'm-select--error': formError.value
+                }
+            ]
+        });
+
+        function getSelectedLabel(value: string | number | []) {
+            const option = props.options.find((i) => i[props.optionValue] === value)
+            if (!option) {
+                return null;
+            }
+
+            return option[props.optionLabel];
+        }
+
+        useEventListener(selectRef, 'keydown', handleKeyDown)
+        useEventListener(searchRef, 'keydown', handleKeyDown)
+
+        onClickOutside(container, () => {
+            open.value = false;
+        }, {ignore: [searchRef, popper]});
+
+        watchEffect(() => {
+            if (container.value && open.value) {
+                width.value = container.value.offsetWidth;
+            }
+        });
+
+        watch(selectedIndex, (index: number | undefined) => {
+            if (!keyboardNavigation.value) {
+                return;
+            }
+            if (typeof index !== 'undefined' && optionsRef.value) {
+                optionsRef.value[index].scrollIntoView({block: 'nearest', inline: 'nearest'});
+            }
+        })
+
+        watch(open, (value: boolean) => {
+            nextTick(() => {
+                if (value && optionsRef.value) {
+                    const index = computedOptions.value.findIndex((i) => i.value === selected.value);
+                    if (index !== -1) {
+                        optionsRef.value[index].scrollIntoView({block: 'center', inline: 'nearest'});
+                        selectedIndex.value = index;
+                    }
+                }
+
+                keyboardNavigation.value = false;
+            });
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        const isOpen = computed(() => {
+            if (props.multiple && computedOptions.value.length == 0 && !search.value) {
+                return false;
+            }
+            return open.value;
+        });
+
+        const focusSelect = () => {
+            if (selectRef.value) {
+                openSelect();
+            }
+        }
+
+        defineExpose({
+            focus,
+            blur,
+        })
+
+        return {
+            container,
+            optionsRef,
+            searchRef,
+            selectRef,
+            popper,
+            focusSelect,
+            focusOut,
+
+            id,
+            isOpen,
+            open,
+            selected,
+            computedOptions,
+            selectedIndex,
+            search,
+
+            containerComputedClasses,
+            selectComputedClasses,
+            computedWrapperClasses,
+            computedConsistentWidth,
+
+            getSelectedLabel,
+            openSelect,
+            removeSelected,
+            inputError,
+            transitionName,
+            inputListeners,
+            style,
+            focused
+        }
+    }
+});
+</script>