@teammodlr/ui-kit 1.0.2

package/src/components/select/Select.css

@@ -0,0 +1,226 @@
+.m-select__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.m-select__container:focus {
+    outline: none;
+}
+
+.m-select {
+    --select-height: 40px;
+    --select-padding: 0 8px;
+    --select-font-size: 15px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+    --select-background-color: var(--white);
+    --select-border-color: var(--gray-200);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: var(--select-height);
+    font-size: var(--select-font-size);
+    background-color: var(--select-background-color);
+    border: 1px solid var(--select-border-color);
+    box-shadow: none;
+    border-radius: var(--select-border-radius);
+    outline: 0;
+    cursor: text;
+    width: 100%;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-select:not(.m-select--disabled):not(.m-select--focused):hover {
+    --select-border-color: var(--gray-400);
+}
+
+.m-select:not(.m-select--disabled):focus,
+.m-select:not(.m-select--disabled):focus-within,
+.m-select:not(.m-select--disabled).m-select--focused {
+    --select-border-color: var(--blue);
+    box-shadow: 0 0 0 2px var(--blue-outline);
+    outline: none;
+}
+
+.m-select.m-select--disabled {
+    --select-border-color: var(--gray-300);
+    --select-background-color: var(--gray-100);
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.m-select__clearable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+}
+
+.m-select .m-select__clearable i.m-icon--close {
+    cursor: pointer;
+    width: var(--select-clear-size);
+    height: var(--select-clear-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    color: var(--gray-500);
+    background-color: transparent;
+    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-select .m-select__clearable i.m-icon--close:hover {
+    color: var(--gray-500);
+    background-color: var(--gray-150);
+}
+
+.m-select i.m-icon--close::before {
+    --close-icon-size: 16px;
+    background-color: currentColor;
+    content: "";
+    width: var(--close-icon-size);
+    height: var(--close-icon-size);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    -webkit-mask-position: center center;
+    mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
+    mask-size: var(--close-icon-size) var(--close-icon-size);
+}
+
+.m-select--xs {
+    --select-height: 32px;
+    --select-padding: 0 8px;
+    --select-font-size: 13px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select--sm {
+    --select-height: 36px;
+    --select-padding: 0 8px;
+    --select-font-size: 14px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select--md {
+    --select-height: 40px;
+    --select-padding: 0 8px;
+    --select-font-size: 15px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select--lg {
+    --select-height: 42px;
+    --select-padding: 0 8px;
+    --select-font-size: 16px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select--xl {
+    --select-height: 46px;
+    --select-padding: 0 8px;
+    --select-font-size: 18px;
+    --select-border-radius: 6px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select__label {
+    margin-bottom: 5px;
+    color: var(--gray-600);
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.m-select__input {
+    padding: var(--select-padding);
+    font-size: 15px;
+    color: var(--gray-600);
+}
+
+.m-select__help {
+    margin-top: 4px;
+    color: var(--gray-500);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-select__error {
+    margin: 4px 0 8px 0;
+    color: var(--red);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-form .m-select__form {
+    margin-bottom: 16px;
+}
+
+.m-form .m-select__form .m-select__error {
+    margin: 4px 0 0 0;
+}
+
+.m-select__dropdown {
+    z-index: 100;
+    max-height: 400px;
+    min-width: 200px;
+    overflow-y: auto;
+    border-radius: 4px;
+    background-color: var(--white);
+    box-shadow: 0 0 0 1px var(--gray-200), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.m-select__dropdown[data-popper-placement^="bottom-"] {
+    margin-top: 5px!important;
+}
+
+.m-select__dropdown[data-popper-placement^="top-"] {
+    margin-bottom: 5px!important;
+}
+
+.m-select__search {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--white);
+    padding: 6px 6px 0;
+}
+
+.m-select__options {
+    padding: 4px 0;
+}
+
+.m-select__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 8px;
+    margin: 0 4px;
+    font-size: 15px;
+    color: var(--gray-600);
+    cursor: pointer;
+    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 4px;
+}
+
+.m-select__option--selected {
+    color: var(--blue)!important;
+}
+
+.m-select__option--focused {
+    background-color: var(--gray-100);
+}
+
+.m-select__placeholder-text {
+    color: var(--gray-500);
+}

package/src/components/select/Select.vue

@@ -0,0 +1,474 @@
+<template>
+    <div :class="containerComputedClasses" ref="selectRef" tabindex="0">
+        <label v-if="label" :for="id" class="m-select__label" v-on="listeners" :id="`${id}-label`">
+            {{ label }}
+        </label>
+
+        <div :class="selectComputedClasses" :id="id" ref="container" @click="openSelect" :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`">
+            <div class="m-select__wrapper">
+                <div class="m-select__input">
+                    <div class="m-select__input-wrapper">
+                        <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
+                            <span 
+                                v-for="value in selected"
+                                :key="value"
+                                class="m-select__tag">
+                                {{ getSelectedLabel(value) }}
+                            </span>
+                        </template>
+                        <template v-else-if="!multiple && selected">
+                            {{ getSelectedLabel(selected) }}
+                        </template>
+                        <template v-else>
+                            <span class="m-select__placeholder-text">{{ placeholder }}</span>
+                        </template>
+                    </div>
+                </div>
+                <Teleport :to="'body'">
+                    <Transition :name="transitionName">
+                        <div class="m-select__dropdown" v-if="open" ref="popper" :style="computedConsistentWidth" :aria-hidden="open ? 'false' : 'true'">
+                            <div v-if="searchable" class="m-select__search">
+                                <MInput v-model="search" placeholder="Search" size="sm" ref="searchRef" />
+                            </div>
+                            <div class="m-select__options">
+                                <div v-for="option, index in computedOptions" :key="index" ref="optionsRef"
+                                    class="m-select__option" :class="{
+                                        'm-select__option--selected': option.active,
+                                        'm-select__option--focused': selectedIndex === index
+                                    }" 
+                                    @click="option.onClick" 
+                                    @mouseover="selectedIndex = index">
+                                    {{ option.label }}
+                                </div>
+                            </div>
+                        </div>
+                    </Transition>
+                </Teleport>
+            </div>
+        </div>
+        <p v-if="inputError" class="m-select__error">
+            {{ inputError }}
+        </p>
+    </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 { MInput } from "..";
+
+export default defineComponent({
+    name: 'MSelect',
+    emits: useInput.emits(),
+    props: {
+        ...useInput.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',
+        },
+        help: {
+            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
+        },
+    },
+    setup(props, { emit }) {
+        const container = ref<HTMLDivElement>();
+        const wrapper = ref<HTMLDivElement>();
+        const optionsRef = ref<HTMLDivElement[]>();
+        const searchRef = ref<HTMLDivElement>();
+        const selectRef = ref<HTMLDivElement>();
+        const selectedIndex = ref<number | undefined>(0);
+        const open = 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 = () => { };
+
+        // TODO: Add debounce on keyboard movement (hover flicks it back up)
+        const {
+            id,
+            insideForm,
+            listeners,
+            formError,
+            formDisabled,
+            formLoading
+        } = useInput(props, { focus, emit, withListeners: false });
+
+        const { popper } = usePopper({
+            placement,
+            transfer,
+            reference: container,
+            wrapper
+        });
+
+        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)
+                    }
+                })
+            }
+
+            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)
+                }
+            })
+        });
+
+        function openSelect() {
+            if (disabled.value || loading.value) {
+                return;
+            }
+
+            open.value = !open.value;
+        }
+
+        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 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 '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 selectComputedClasses = computed(() => {
+            return [
+                'm-select',
+                {
+                    [`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;
+        });
+
+        return {
+            container,
+            optionsRef,
+            searchRef,
+            selectRef,
+            popper,
+
+            id,
+            open,
+            selected,
+            computedOptions,
+            selectedIndex,
+            search,
+
+            containerComputedClasses,
+            selectComputedClasses,
+            computedConsistentWidth,
+
+            getSelectedLabel,
+            openSelect,
+            inputError,
+            transitionName,
+            listeners
+        }
+    }
+});
+</script>