@teammodlr/ui-kit 1.0.2 → 1.0.4

package/src/components/select/Select.css

@@ -1,226 +0,0 @@
-.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

@@ -1,474 +0,0 @@
-<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>