@teammodlr/ui-kit 1.0.4 → 1.0.6

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>

package/src/components/select/examples/basic.vue

@@ -0,0 +1,20 @@
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+// make list of options with 1000 items
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+</script>

package/src/components/select/examples/index.stories.ts

@@ -0,0 +1,22 @@
+import MSelect from "../Select.vue";
+import {
+    MSelectBasic,
+    MSelectSearchable,
+    MSelectMultiple,
+} from "./index";
+
+import {
+    createStory, sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MSelect,
+    title: 'Components/Select',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MSelectBasic);
+export const Searchable = createStory(MSelectSearchable);
+export const Multiple = createStory(MSelectMultiple);

package/src/components/select/examples/index.ts

@@ -0,0 +1,3 @@
+export { default as MSelectBasic } from './basic.vue';
+export { default as MSelectSearchable } from './searchable.vue';
+export { default as MSelectMultiple } from './multiple.vue';

package/src/components/select/examples/multiple.vue

@@ -0,0 +1,22 @@
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        multiple
+        searchable
+        />
+        {{ value }}
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref([]);
+</script>

package/src/components/select/examples/searchable.vue

@@ -0,0 +1,20 @@
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        searchable
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+</script>

package/src/components/skeleton/Skeleton.css

@@ -0,0 +1,73 @@
+.m-skeleton {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 100%;
+    --skeleton-width: 100%;
+    position: relative;
+    display: flex;
+    background: linear-gradient(-90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
+    background-size: 400% 400%;
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+    border-radius: var(--skeleton-border-radius);
+    font-weight: 600;
+    user-select: none;
+    width: var(--skeleton-width);
+    height: var(--skeleton-height);
+}
+
+.m-skeleton--thumb {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 128px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--heading {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 32px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--line {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 20px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--circle {
+    --skeleton-border-radius: 50%;
+    --skeleton-height: 40px;
+    --skeleton-width: 40px;
+}
+
+.m-skeleton--block {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 100%;
+    --skeleton-width: 100%;
+}
+
+.m-skeleton--pulse {
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+    -webkit-animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: -135% 0;
+    }
+}
+
+@-webkit-keyframes skeleton-pulse {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: -135% 0;
+    }
+}

package/src/components/skeleton/Skeleton.vue

@@ -0,0 +1,47 @@
+<template>
+    <component 
+        :is="tag"
+        :class="computedClasses"
+    >
+        &nbsp;
+    </component>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+    name: "MSkeleton",
+    props: {
+        tag: {
+            type: String,
+            default: "div"
+        },
+        variant: {
+            type: String,
+            default: "line",
+            validator: (value: string) => {
+                return ["block", "thumb", "heading", "line", "circle"].includes(value);
+            }
+        },
+        animation: {
+            type: String,
+            default: "pulse"
+        }
+    },
+    setup(props) {
+
+        const computedClasses = computed(() => {
+            return {
+                "m-skeleton": true,
+                [`m-skeleton--${props.variant}`]: true,
+                [`m-skeleton--${props.animation}`]: true
+            }
+        });
+
+        return {
+            computedClasses
+        }
+    }
+})
+</script>

package/src/components/skeleton/examples/basic.vue

@@ -0,0 +1,3 @@
+<template>
+    <MSkeleton />
+</template>