@teammodlr/ui-kit 1.0.2

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,140 @@
+<template>
+    <div ref="checkboxRef" :class="wrapperComputedClasses">
+        <div :class="checkboxComputedClass" @click.prevent="toggle">
+            <input 
+                v-model="checked"
+                type="checkbox"
+                :aria-checked="checked ? 'true' : 'false'"
+                :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+                :disabled="disabled || loading"
+                :name="name"
+                :id="id"
+                />
+            <span></span>
+            <div class="m-checkbox__label" :id="`${id}-label`">
+                <template v-if="hasSlot">
+                    <slot />
+                </template>
+                <template v-else>
+                    {{ label }}
+                </template>
+            </div>
+        </div>
+        <p v-if="inputError" class="m-input__error">
+            {{ inputError }}
+        </p>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRef, ref, type PropType, watch, computed } from 'vue';
+import { useInput } from '@/composables/useInput';
+import type { Size, Color } from '@/types/props';
+
+export default defineComponent({
+    name: "Checkbox",
+    emits: useInput.emits(),
+    props: {
+        ...useInput.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        color: {
+            type: String as PropType<Color>,
+            default: 'blue',
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { slots, emit }) {
+        const focus = () => { };
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading
+        } = useInput(props, { focus, emit, withListeners: false });
+
+        const disabled = computed(() => formDisabled || props.disabled);
+        const loading = computed(() => formLoading || props.loading);
+        const name = toRef(props, 'name');
+        const checked = ref(false);
+        const checkboxRef = ref<HTMLElement | null>(null);
+        const hasSlot = computed(() => !!(slots.default));
+
+        const wrapperComputedClasses = computed(() => {
+            return [
+                'm-checkbox__container',
+                {
+                    'm-form__input': insideForm
+                }
+            ]
+        });
+
+        const checkboxComputedClass = computed(() => {
+            return {
+                'm-checkbox': true,
+                'm-checkbox--checked': checked.value,
+                'm-checkbox--disabled': disabled.value || loading.value,
+                'm-checkbox--error': formError.value,
+                [`m-checkbox--${props.size}`]: true,
+                [`m-checkbox--${props.color}`]: true,
+            }
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        watch(() => props.modelValue, (value) => {
+            checked.value = !!value;
+        }, { immediate: true });
+
+        watch(() => checked.value, (value) => {
+            emit('update:modelValue', value);
+        });
+
+        function toggle() {
+            if (disabled.value) return;
+            checked.value = !checked.value;
+        }
+
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            loading,
+            name,
+            checked,
+            checkboxRef,
+            inputError,
+            toggle,
+
+            wrapperComputedClasses,
+            checkboxComputedClass,
+            hasSlot
+        }
+    }
+})
+</script>

package/src/components/dropdown/Dropdown.css

@@ -0,0 +1,68 @@
+.m-dropdown {
+    position: relative;
+}
+
+.m-dropdown-menu {
+    --dropdown-menu-width: 200px;
+    --dropdown-menu-padding: 6px;
+    --dropdown-menu-background-color: var(--white);
+    --dropdown-menu-box-shadow: 0px 4px 10px 1px rgb(154 161 171 / 20%);
+    --dropdown-menu-border-radius: 4px;
+    --dropdown-menu-border: 1px solid var(--gray-200);
+
+    --dropdown-menu-item-font-size: 15px;
+    --dropdown-menu-item-height: 34px;
+    --dropdown-menu-item-line-height: 34px;
+    --dropdown-menu-item-color: var(--gray-600);
+    --dropdown-menu-item-background-color: var(--white);
+    --dropdown-menu-item-border-radius: 4px;
+    --dropdown-menu-item-padding: 0px 8px;
+    --dropdown-menu-gap: 4px;
+
+    position: relative;
+    background-color: var(--dropdown-menu-background-color);
+    box-shadow: var(--dropdown-menu-box-shadow);
+    border-radius: var(--dropdown-menu-border-radius);
+    min-width: var(--dropdown-menu-width);
+    padding: var(--dropdown-menu-padding);
+    border: var(--dropdown-menu-border);
+}
+
+.m-dropdown-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.m-dropdown-menu ul .m-dropdown-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    font-size: var(--dropdown-menu-item-font-size);
+    height: var(--dropdown-menu-item-height);
+    line-height: var(--dropdown-menu-item-line-height);
+    color: var(--dropdown-menu-item-color);
+    background-color: var(--dropdown-menu-item-background-color);
+    border-radius: var(--dropdown-menu-item-border-radius);
+    padding: var(--dropdown-menu-item-padding);
+    gap: var(--dropdown-menu-gap);
+}
+
+.m-dropdown-menu ul .m-dropdown-item .m-dropdown__text {
+    white-space: nowrap;
+    flex: 1;
+    z-index: 1;
+}
+
+.m-dropdown-menu ul .m-dropdown-item:hover {
+    --dropdown-menu-item-color: var(--blue);
+    --dropdown-menu-item-background-color: var(--gray-100);
+}
+
+.m-dropdown__icon-right,
+.m-dropdown__icon-left {
+    display: flex;
+    align-items: center;
+}

package/src/components/dropdown/Dropdown.vue

@@ -0,0 +1,237 @@
+<template>
+    <div ref="wrapper" :class="computedWrapperClasses">
+        <div ref="referenceRef" :class="computedReferenceClasses" @click="toggleDropdown">
+            <slot />
+        </div>
+
+        <DropdownWrapper>
+            <Teleport :disabled="isNested" to="body">
+                <transition :name="transitionName">
+                    <div v-show="isOpen" ref="popper" :class="[
+                        'm-dropdown-menu',
+                        `m-dropdown-menu--${placement}`
+                    ]">
+                        <slot name="menu" />
+                    </div>
+                </transition>
+            </Teleport>
+        </DropdownWrapper>
+    </div>
+</template>
+
+<script lang="ts">
+import { usePopper } from '@/composables/usePopper';
+import type { Placement, VirtualElement } from '@popperjs/core';
+import { defineComponent, inject, ref, type PropType, provide, watch, onMounted, nextTick, computed, Teleport, toRef, onUnmounted } from 'vue';
+import { onClickOutside, useEventListener } from '@vueuse/core';
+import DropdownWrapper from './DropdownWrapper.vue';
+import { useLabel } from './hooks';
+
+export default defineComponent({
+    name: 'Dropdown',
+    components: {
+        DropdownWrapper
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: false
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'bottom-start'
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        },
+        trigger: {
+            type: String as PropType<'click' | 'hover'>,
+            default: 'click'
+        },
+        virtual: {
+            type: [Object],
+            default: null
+        },
+        x: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        label: {
+            default: null,
+            static: true
+        },
+        transitionName: {
+            type: String,
+            default: 'fade'
+        },
+        onSelect: {
+            type: Function as PropType<(labels: any) => void>,
+            default: () => { }
+        }
+    },
+    emits: [
+        'update:open'
+    ],
+    setup(props, { emit }) {
+        const state = inject("dropdown", null);
+
+        const isNested = !!state;
+        const label = toRef(props, 'label')
+        const isOpen = ref(props.open);
+        const placement = ref(props.placement);
+        const transfer = toRef(props, 'transfer');
+        const wrapper = ref(null);
+        const referenceRef = ref(null);
+
+        const reference = computed(() => {
+            if (props.virtual !== null) {
+                const virtual = (props.virtual as any).$el ?? props.virtual;
+                if (virtual) {
+                    if ('getBoundingClientRect' in virtual) {
+                        return virtual as VirtualElement;
+                    }
+
+                    if ('x' in virtual && 'y' in virtual) {
+                        return {
+                            getBoundingClientRect: () => ({
+                                x: virtual.x,
+                                y: virtual.y,
+                                left: virtual.x,
+                                top: virtual.y,
+                                width: 0,
+                                height: 0
+                            })
+                        } as VirtualElement
+                    }
+                }
+            }
+
+            return referenceRef.value;
+        });
+
+        const { popper, transferTo, updatePopper } = usePopper({
+            reference: reference,
+            placement,
+            transfer,
+            wrapper,
+            isDrop: true,
+            offset: isNested ? [-2, 2] : undefined
+        });
+
+        const currentLabel = useLabel(label, referenceRef)
+
+        provide("dropdown-select", null);
+        provide("dropdown", {
+            handleSelect,
+            isOpen: isOpen,
+        });
+
+        watch(() => props.open, (value) => {
+            isOpen.value = value;
+        });
+
+        watch(() => props.placement, (value) => {
+            setPlacement(value);
+        });
+
+        watch(isOpen, (value) => {
+            if (value) {
+                updatePopper();
+            }
+
+            emit('update:open', value);
+        });
+
+        onMounted(() => {
+            nextTick(() => {
+                setPlacement(props.placement)
+            });
+        });
+
+        useEventListener('resize', () => {
+            updatePopper();
+        });
+
+        onClickOutside(wrapper, (e) => {
+            let parent = e.target as HTMLElement;
+
+            // fail safe of 10
+            let i = 0;
+            while (parent) {
+                if (parent.classList.contains('m-dropdown-menu')) {
+                    return;
+                }
+                parent = parent.parentElement as HTMLElement;
+
+                if (i > 10) {
+                    break;
+                }
+                i++;
+            }
+
+            isOpen.value = false;
+        });
+
+        function setPlacement(value: Placement) {
+            const [xPlacement] = value.split('-');
+
+            if (isNested && xPlacement !== 'right' && xPlacement !== 'left') {
+                placement.value = 'right-start';
+            } else {
+                placement.value = value;
+            }
+        }
+
+        function toggleDropdown() {
+            isOpen.value = !isOpen.value;
+        }
+
+        function handleSelect(labels: string[]) {
+            isOpen.value = false;
+            props.onSelect(labels);
+            // @ts-ignore
+            if (typeof state?.handleSelect === 'function') {
+                // @ts-ignore
+                state.handleSelect([currentLabel.value!, ...labels]);
+            }
+        }
+
+        const computedWrapperClasses = computed(() => {
+            return [
+                'm-dropdown',
+                {
+                    'm-dropdown--open': isOpen.value,
+                    'm-dropdown--nested': isNested
+                }
+            ]
+        });
+
+        const computedReferenceClasses = computed(() => {
+
+        });
+
+        const transitionName = computed(() => {
+            return `m-transition__${props.transitionName}`;
+        });
+
+        return {
+            wrapper,
+            referenceRef,
+            popper,
+            transferTo,
+            isOpen,
+            isNested,
+            placement,
+            computedWrapperClasses,
+            computedReferenceClasses,
+            transitionName,
+            toggleDropdown
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownItem.vue

@@ -0,0 +1,118 @@
+<template>
+    <li ref="wrapper" :class="computedWrapperClasses" role="menuitem" tabindex="0" @click="handleSelect">
+        <div v-if="hasIconLeft" class="m-dropdown__icon-left">
+            <slot name="icon-left" />
+        </div>
+        <div class="m-dropdown__text">
+            <slot />
+        </div>
+        <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
+            <template v-for="key in hotkey.split('+')">
+                <kbd>{{ key }}</kbd>
+            </template>
+        </div> -->
+        <div v-if="hasIconRight" class="m-dropdown__icon-right">
+            <slot name="icon-right" />
+        </div>
+    </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, ref, type PropType, computed, toRef, onMounted } from 'vue';
+import { useMagicKeys, whenever } from '@vueuse/core';
+import { useLabel } from './hooks';
+
+export default defineComponent({
+    name: "DropdownItem",
+    props: {
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        reference: {
+            type: Boolean,
+            default: false
+        },
+        onSelect: {
+            type: Function as PropType<(label: string | number) => void>,
+            default: () => { }
+        },
+        hotkey: {
+            type: String,
+            default: null
+        }
+    },
+    emits: [],
+    setup(props, { slots }) {
+        const parentSelect = inject('dropdown-select', null);
+        const state = inject("dropdown", null);
+        // const keys = useMagicKeys({
+        //     passive: false,
+        //     onEventFired: (event) => {
+
+        //         // only fire when the dropdown is open
+        //         if (state?.isOpen.value) {
+        //             event.preventDefault();
+        //         }
+        //     }
+        // });
+
+        const hasIconLeft = computed(() => !!(slots['icon-left']));
+        const hasIconRight = computed(() => !!(slots['icon-right']));
+
+        const wrapper = ref(null);
+        const label = toRef(props, 'label')
+        const isReference = ref(props.reference)
+        const currentLabel = useLabel(label, wrapper)
+        function handleSelect() {
+            if (props.disabled || isReference.value) {
+                return;
+            }
+
+            if (typeof parentSelect === 'function') {
+                // @ts-ignore
+                parentSelect([currentLabel.value!]);
+            }
+
+            props.onSelect(currentLabel.value!);
+        }
+
+        // const isOpen = computed(() => {
+        //     return state?.isOpen.value;
+        // });
+
+        const computedWrapperClasses = computed(() => {
+            return {
+                'm-dropdown-item': true,
+                'm-dropdown-item--disabled': props.disabled,
+                'm-dropdown-item--reference': props.reference
+            }
+        });
+        
+        // onMounted(() => {
+        //     if (props.hotkey) {
+        //         const combination = keys[props.hotkey];
+
+        //         whenever(combination, (v) => {
+        //             if (v && isOpen.value) {
+        //                 handleSelect();
+        //             }
+        //         })
+        //     }
+        // })
+
+
+        return {
+            wrapper,
+            hasIconLeft,
+            hasIconRight,
+            handleSelect,
+            computedWrapperClasses
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownList.vue

@@ -0,0 +1,20 @@
+<template>
+    <ul>
+        <slot />
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: "DropdownList",
+    setup() {
+
+        // computed classes
+        return {
+
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownWrapper.vue

@@ -0,0 +1,17 @@
+<template>
+    <slot />
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, provide } from 'vue';
+
+export default defineComponent({
+    name: 'DropdownWrapper',
+    setup() {
+        const state = inject("dropdown", null);
+
+        // @ts-ignore
+        provide('dropdown-select', state?.handleSelect);
+    }
+})
+</script>

package/src/components/dropdown/hooks.ts

@@ -0,0 +1,30 @@
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+import type { Ref } from 'vue'
+
+export function useLabel(
+  rawLabel: Ref<string | number | null>,
+  element: Ref<HTMLElement | null | undefined>
+) {
+  const label = ref(rawLabel.value)
+
+  function setLabel(value: string | number | null) {
+    if (element.value) {
+      label.value = value ?? element.value.textContent?.trim() ?? null
+    } else {
+      label.value = value
+    }
+  }
+
+  watch(rawLabel, value => {
+    setLabel(value)
+  })
+
+  onMounted(() => {
+    nextTick(() => {
+      setLabel(rawLabel.value)
+    })
+  })
+
+  return label
+}