@teammodlr/ui-kit 2.1.41 → 2.1.44

package/src/components/select/Select.vue

@@ -1,781 +1,781 @@
-<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"
-            @mousedown.prevent="onSelectClick"
-            @focusin.stop="focusSelect">
-            <div :class="selectComputedClasses">
-                <template
-                    v-if="
-                        multiple &&
-                        Array.isArray(selected) &&
-                        selected.length > 0
-                    ">
-                    <MTag
-                        v-for="value in selectedMax"
-                        :key="value"
-                        :closeable="true"
-                        @close="event => removeSelected(event, value)"
-                        :size="size">
-                        {{ getSelectedLabel(value) }}
-                    </MTag>
-                    <template v-if="selectedCountNotShown > 0">
-                        <MTag :size="size">
-                            +{{ selectedCountNotShown }} more
-                        </MTag>
-                    </template>
-                </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
-                    :enter-active-class="scale.enterActive"
-                    :leave-active-class="scale.leaveActive"
-                    :enter-from-class="scale.enterFrom"
-                    :leave-to-class="scale.leaveTo">
-                    <div
-                        :class="style.menu"
-                        v-if="isOpen"
-                        ref="popper"
-                        :style="computedConsistentWidth"
-                        :aria-hidden="isOpen ? 'false' : 'true'">
-                        <div
-                            v-if="searchable || (multiple && selectAll)"
-                            :class="style.search">
-                            <div
-                                v-if="multiple && selectAll"
-                                :class="style.checkAll">
-                                <button
-                                    role="button"
-                                    type="button"
-                                    :class="{
-                                        [style.checkAllButton]: true,
-                                        [style.checkAllButtonActive]:
-                                            computedOptions.length > 0 &&
-                                            computedOptions.length ===
-                                                selected.length
-                                    }"
-                                    @click.prevent="toggleAllItems"
-                                    aria-description="Select all items">
-                                    <svg
-                                        v-if="
-                                            computedOptions.length > 0 &&
-                                            computedOptions.length ===
-                                                selected.length
-                                        "
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 20 20"
-                                        fill="currentColor"
-                                        aria-hidden="true">
-                                        <path
-                                            fill-rule="evenodd"
-                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-                                            clip-rule="evenodd"></path>
-                                    </svg>
-                                </button>
-                            </div>
-                            <input
-                                v-if="searchable"
-                                type="text"
-                                ref="searchRef"
-                                v-model="search"
-                                placeholder="Search"
-                                :class="style.searchInput" />
-                        </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.prevent="option.onClick"
-                                @hover="selectedIndex = index">
-                                <span :class="style.optionIcon">
-                                    <svg
-                                        v-if="option.active"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 20 20"
-                                        fill="currentColor"
-                                        aria-hidden="true">
-                                        <path
-                                            fill-rule="evenodd"
-                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-                                            clip-rule="evenodd"></path>
-                                    </svg>
-                                </span>
-                                <span :class="style.optionLabel">{{
-                                    option.label
-                                }}</span>
-                            </div>
-                            <template v-if="computedOptions.length === 0">
-                                <div :class="style.noResults">No results</div>
-                            </template>
-                        </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,
-    type PropType
-} from 'vue';
-import MTag from '../tag/Tag.vue';
-import * as style from './style';
-import { scale } from '../../styles/transitions.css';
-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
-        },
-        allowBlank: {
-            type: Boolean,
-            default: false
-        },
-        selectAll: {
-            type: Boolean,
-            default: false
-        },
-        max: {
-            type: Number,
-            default: 5
-        }
-    },
-    components: {
-        MTag
-    },
-    setup(props, { emit, expose }) {
-        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, updatePopper } = 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 selectedMax = computed(() => {
-            if (props.max <= 0) {
-                return selected.value;
-            }
-
-            if (
-                props.multiple &&
-                Array.isArray(selected.value) &&
-                selected.value.length > props.max
-            ) {
-                return selected.value.slice(0, props.max);
-            }
-
-            return selected.value;
-        });
-
-        const selectedCountNotShown = computed(() => {
-            if (
-                props.multiple &&
-                Array.isArray(selected.value) &&
-                props.max > 0
-            ) {
-                return selected.value.length - props.max;
-            }
-
-            return 0;
-        });
-
-        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) {
-                let options = 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: boolean;
-                        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)
-                        };
-                    });
-
-                if (props.allowBlank) {
-                    options.unshift({
-                        value: '',
-                        label: '',
-                        active: false,
-                        onClick: () => handleOptionClick('')
-                    });
-                }
-
-                return options;
-            }
-
-            let options = 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: boolean;
-                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)
-                };
-            });
-
-            if (props.allowBlank) {
-                options.unshift({
-                    value: '',
-                    label: '',
-                    active: false,
-                    onClick: () => handleOptionClick('')
-                });
-            }
-
-            return options;
-        });
-
-        function toggleAllItems() {
-            if (!props.multiple) {
-                return;
-            }
-
-            if (computedOptions.value.length === 0) {
-                return;
-            }
-
-            if (Array.isArray(selected.value)) {
-                if (selected.value.length === computedOptions.value.length) {
-                    selected.value = [];
-                } else {
-                    selected.value = computedOptions.value.map(
-                        option => option.value
-                    );
-                }
-            } else {
-                selected.value = [];
-            }
-        }
-
-        function openSelect() {
-            if (disabled.value || loading.value) {
-                return;
-            }
-
-            if (open.value) {
-                open.value = false;
-                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];
-                }
-
-                updatePopper();
-            } else {
-                selected.value = value;
-                open.value = false;
-            }
-        }
-
-        function removeSelected(event: MouseEvent, value: string | number) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (!props.multiple) {
-                return;
-            }
-
-            if (Array.isArray(selected.value)) {
-                const index = selected.value.indexOf(value);
-
-                if (index !== -1) {
-                    selected.value.splice(index, 1);
-                }
-
-                updatePopper();
-            }
-        }
-
-        useEventListener('resize', () => {
-            open.value = false;
-        });
-
-        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;
-            }
-        }
-
-        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 &&
-                        Array.isArray(selected.value) &&
-                        selected.value.length > 0,
-                    [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) {
-                    search.value = '';
-                }
-
-                if (props.searchable && searchRef.value) {
-                    searchRef.value.focus();
-                }
-                if (value && optionsRef.value) {
-                    const index = computedOptions.value.findIndex(
-                        i => i.value === selected.value
-                    );
-                    if (index !== -1) {
-                        optionsRef.value[index].scrollIntoView({
-                            block: '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 = (event: FocusEvent) => {
-            setTimeout(() => {
-                if (selectRef.value && !open.value) {
-                    openSelect();
-                }
-            }, 10);
-        };
-
-        const onSelectClick = (event: MouseEvent) => {
-            event.preventDefault();
-            event.stopPropagation();
-            openSelect();
-        };
-
-        expose({
-            focus,
-            blur
-        });
-
-        return {
-            container,
-            optionsRef,
-            searchRef,
-            selectRef,
-            popper,
-            focusSelect,
-            onSelectClick,
-
-            id,
-            isOpen,
-            open,
-            selected,
-            selectedMax,
-            selectedCountNotShown,
-            computedOptions,
-            selectedIndex,
-            search,
-
-            containerComputedClasses,
-            selectComputedClasses,
-            computedWrapperClasses,
-            computedConsistentWidth,
-
-            getSelectedLabel,
-            openSelect,
-            removeSelected,
-            inputError,
-            transitionName,
-            inputListeners,
-            style,
-            focused,
-            scale,
-            toggleAllItems
-        };
-    }
-});
-</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"
+            @mousedown.prevent="onSelectClick"
+            @focusin.stop="focusSelect">
+            <div :class="selectComputedClasses">
+                <template
+                    v-if="
+                        multiple &&
+                        Array.isArray(selected) &&
+                        selected.length > 0
+                    ">
+                    <MTag
+                        v-for="value in selectedMax"
+                        :key="value"
+                        :closeable="true"
+                        @close="event => removeSelected(event, value)"
+                        :size="size">
+                        {{ getSelectedLabel(value) }}
+                    </MTag>
+                    <template v-if="selectedCountNotShown > 0">
+                        <MTag :size="size">
+                            +{{ selectedCountNotShown }} more
+                        </MTag>
+                    </template>
+                </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
+                    :enter-active-class="scale.enterActive"
+                    :leave-active-class="scale.leaveActive"
+                    :enter-from-class="scale.enterFrom"
+                    :leave-to-class="scale.leaveTo">
+                    <div
+                        :class="style.menu"
+                        v-if="isOpen"
+                        ref="popper"
+                        :style="computedConsistentWidth"
+                        :aria-hidden="isOpen ? 'false' : 'true'">
+                        <div
+                            v-if="searchable || (multiple && selectAll)"
+                            :class="style.search">
+                            <div
+                                v-if="multiple && selectAll"
+                                :class="style.checkAll">
+                                <button
+                                    role="button"
+                                    type="button"
+                                    :class="{
+                                        [style.checkAllButton]: true,
+                                        [style.checkAllButtonActive]:
+                                            computedOptions.length > 0 &&
+                                            computedOptions.length ===
+                                                selected.length
+                                    }"
+                                    @click.prevent="toggleAllItems"
+                                    aria-description="Select all items">
+                                    <svg
+                                        v-if="
+                                            computedOptions.length > 0 &&
+                                            computedOptions.length ===
+                                                selected.length
+                                        "
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                        aria-hidden="true">
+                                        <path
+                                            fill-rule="evenodd"
+                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+                                            clip-rule="evenodd"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                            <input
+                                v-if="searchable"
+                                type="text"
+                                ref="searchRef"
+                                v-model="search"
+                                placeholder="Search"
+                                :class="style.searchInput" />
+                        </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.prevent="option.onClick"
+                                @hover="selectedIndex = index">
+                                <span :class="style.optionIcon">
+                                    <svg
+                                        v-if="option.active"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                        aria-hidden="true">
+                                        <path
+                                            fill-rule="evenodd"
+                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+                                            clip-rule="evenodd"></path>
+                                    </svg>
+                                </span>
+                                <span :class="style.optionLabel">{{
+                                    option.label
+                                }}</span>
+                            </div>
+                            <template v-if="computedOptions.length === 0">
+                                <div :class="style.noResults">No results</div>
+                            </template>
+                        </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,
+    type PropType
+} from 'vue';
+import MTag from '../tag/Tag.vue';
+import * as style from './style';
+import { scale } from '../../styles/transitions.css';
+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
+        },
+        allowBlank: {
+            type: Boolean,
+            default: false
+        },
+        selectAll: {
+            type: Boolean,
+            default: false
+        },
+        max: {
+            type: Number,
+            default: 5
+        }
+    },
+    components: {
+        MTag
+    },
+    setup(props, { emit, expose }) {
+        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, updatePopper } = 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 selectedMax = computed(() => {
+            if (props.max <= 0) {
+                return selected.value;
+            }
+
+            if (
+                props.multiple &&
+                Array.isArray(selected.value) &&
+                selected.value.length > props.max
+            ) {
+                return selected.value.slice(0, props.max);
+            }
+
+            return selected.value;
+        });
+
+        const selectedCountNotShown = computed(() => {
+            if (
+                props.multiple &&
+                Array.isArray(selected.value) &&
+                props.max > 0
+            ) {
+                return selected.value.length - props.max;
+            }
+
+            return 0;
+        });
+
+        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) {
+                let options = 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: boolean;
+                        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)
+                        };
+                    });
+
+                if (props.allowBlank) {
+                    options.unshift({
+                        value: '',
+                        label: '',
+                        active: false,
+                        onClick: () => handleOptionClick('')
+                    });
+                }
+
+                return options;
+            }
+
+            let options = 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: boolean;
+                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)
+                };
+            });
+
+            if (props.allowBlank) {
+                options.unshift({
+                    value: '',
+                    label: '',
+                    active: false,
+                    onClick: () => handleOptionClick('')
+                });
+            }
+
+            return options;
+        });
+
+        function toggleAllItems() {
+            if (!props.multiple) {
+                return;
+            }
+
+            if (computedOptions.value.length === 0) {
+                return;
+            }
+
+            if (Array.isArray(selected.value)) {
+                if (selected.value.length === computedOptions.value.length) {
+                    selected.value = [];
+                } else {
+                    selected.value = computedOptions.value.map(
+                        option => option.value
+                    );
+                }
+            } else {
+                selected.value = [];
+            }
+        }
+
+        function openSelect() {
+            if (disabled.value || loading.value) {
+                return;
+            }
+
+            if (open.value) {
+                open.value = false;
+                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];
+                }
+
+                updatePopper();
+            } else {
+                selected.value = value;
+                open.value = false;
+            }
+        }
+
+        function removeSelected(event: MouseEvent, value: string | number) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!props.multiple) {
+                return;
+            }
+
+            if (Array.isArray(selected.value)) {
+                const index = selected.value.indexOf(value);
+
+                if (index !== -1) {
+                    selected.value.splice(index, 1);
+                }
+
+                updatePopper();
+            }
+        }
+
+        useEventListener('resize', () => {
+            open.value = false;
+        });
+
+        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;
+            }
+        }
+
+        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 &&
+                        Array.isArray(selected.value) &&
+                        selected.value.length > 0,
+                    [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) {
+                    search.value = '';
+                }
+
+                if (props.searchable && searchRef.value) {
+                    searchRef.value.focus();
+                }
+                if (value && optionsRef.value) {
+                    const index = computedOptions.value.findIndex(
+                        i => i.value === selected.value
+                    );
+                    if (index !== -1) {
+                        optionsRef.value[index].scrollIntoView({
+                            block: '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 = (event: FocusEvent) => {
+            setTimeout(() => {
+                if (selectRef.value && !open.value) {
+                    openSelect();
+                }
+            }, 10);
+        };
+
+        const onSelectClick = (event: MouseEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            openSelect();
+        };
+
+        expose({
+            focus,
+            blur
+        });
+
+        return {
+            container,
+            optionsRef,
+            searchRef,
+            selectRef,
+            popper,
+            focusSelect,
+            onSelectClick,
+
+            id,
+            isOpen,
+            open,
+            selected,
+            selectedMax,
+            selectedCountNotShown,
+            computedOptions,
+            selectedIndex,
+            search,
+
+            containerComputedClasses,
+            selectComputedClasses,
+            computedWrapperClasses,
+            computedConsistentWidth,
+
+            getSelectedLabel,
+            openSelect,
+            removeSelected,
+            inputError,
+            transitionName,
+            inputListeners,
+            style,
+            focused,
+            scale,
+            toggleAllItems
+        };
+    }
+});
+</script>