@teammodlr/ui-kit 1.0.2 → 1.0.4

package/src/components/checkbox/Checkbox.vue

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

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

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

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

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

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

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