@teammodlr/ui-kit 1.0.2

package/src/components/tooltip/Tooltip.css

@@ -0,0 +1,49 @@
+.m-tooltip--wrapper {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.m-tooltip {
+    box-sizing: border-box;
+}
+
+.m-tooltip.m-tooltip--reverse .m-tooltip--content {
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #000;
+}
+
+.m-tooltip .m-tooltip--content {
+    transition: opacity 0.3s ease;
+    font-size: 12px;
+    font-weight: normal;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.75);
+    border-radius: 4px;
+    padding: 5px 10px;
+    pointer-events: none;
+    width: max-content;
+    max-width: 300px;
+}
+
+.m-tooltip .tooltip--arrow {
+    position: absolute;
+    color: rgba(0, 0, 0, 0.75);
+    width: 10px;
+}
+
+.m-tooltip[data-popper-placement^=top] {
+    padding: 5px 0 14px;
+}
+
+.m-tooltip[data-popper-placement^=bottom] {
+    padding: 14px 0 5px;
+}
+
+.m-tooltip[data-popper-placement^=left] {
+    padding: 0 8px 0 5px;
+}
+
+.m-tooltip[data-popper-placement^=right] {
+    padding: 0 5px 0 8px;
+}

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,85 @@
+<template>
+    <span @mouseenter="isOpen = true" @mouseleave="isOpen = false" ref="reference">
+        <slot name="trigger"  />
+        <Teleport :to="'body'">
+            <Transition :name="transitionName">
+                <div ref="popper" v-show="isOpen" :class="computedClasses">
+                    <span class="m-tooltip--content">
+                        <slot />
+                    </span>
+                </div>
+            </Transition>
+        </Teleport>
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, toRef, type PropType, computed, watch } from 'vue';
+import { type Placement, placementWhileList, usePopper } from "../../composables/usePopper";
+
+export default defineComponent({
+    name: "MTooltip",
+    props: {
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'top',
+            validator: (value: Placement) => placementWhileList.includes(value)
+        },
+        transitionName: {
+            type: String,
+            default: 'scale'
+        },
+        reverse: {
+            type: Boolean,
+            default: false
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { emit }) {
+        const placement = ref(props.placement);
+        // @ts-ignore
+        const transfer = toRef(props, 'transfer');
+        const wrapper = ref<HTMLElement | null>(null);
+        const reference = ref<HTMLElement | null>(null);
+        const isOpen = ref(false);
+
+        const { popper, transferTo, updatePopper } = usePopper({
+            placement,
+            transfer,
+            reference,
+            wrapper
+        });
+
+        const transitionName = computed(() => {
+            return `m-transition__${props.transitionName}`;
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                'm-tooltip',
+                {
+                    'm-tooltip--reverse': props.reverse
+                }
+            ]
+        });
+
+        watch(() => isOpen.value, (value) => {
+            if (value) {
+                updatePopper();
+            }
+        });
+
+        return {
+            reference,
+            popper,
+            transferTo,
+            transitionName,
+            isOpen,
+            computedClasses
+        }
+    }
+})
+</script>

package/src/components/virtualscroll/VirtualScroll.css

@@ -0,0 +1,13 @@
+.virtual-scroller {
+    overflow: auto;
+    will-change: transform;
+}
+
+.virtual-scroller>div {
+    overflow: hidden;
+    will-change: transform;
+}
+
+.virtual-scroller>div>div {
+    will-change: transform;
+}

package/src/components/virtualscroll/VirtualScroll.vue

@@ -0,0 +1,61 @@
+<template>
+    <div ref="scroller" class="m-virtual-scroller" @scroll="onScroll">
+        <div :style="{ height: `${totalHeight}px` }">
+            <div :style="{ transform: `translateY(${offsetY}px)` }">
+                <template v-for="item in renderedItems">
+                    <slot :item="item" :height="itemHeight"></slot>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "MVirtualScroller"
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, toRefs } from 'vue';
+const props = defineProps({
+    items: {
+        required: true,
+        type: Array,
+    },
+    itemHeight: {
+        required: true,
+        type: Number,
+        default: 35,
+    },
+    buffer: {
+        default: 10,
+        type: Number,
+    }
+});
+const { items, itemHeight, buffer } = toRefs(props);
+const scroller = ref();
+const scrollerHeight = ref(0);
+const scrollTop = ref(0);
+const totalHeight = computed(() => items.value.length * itemHeight.value);
+const startPosition = computed(() =>
+    Math.max(0, Math.floor(scrollTop.value / itemHeight.value) - buffer.value)
+);
+const offsetY = computed(() => startPosition.value * itemHeight.value);
+const renderedItems = computed(() => {
+    let count =
+        Math.ceil(scrollerHeight.value / itemHeight.value) + 2 * buffer.value;
+    count = Math.min(items.value.length - startPosition.value, count);
+    return items.value.slice(startPosition.value, startPosition.value + count);
+});
+const onScroll = (e: Event) => {
+    requestAnimationFrame(() => (scrollTop.value = (e.target as HTMLElement).scrollTop));
+};
+const observer = new ResizeObserver((entries) =>
+    entries.forEach((el) => (scrollerHeight.value = el.contentRect.height))
+);
+onMounted(() => {
+    observer.observe(scroller.value);
+    scrollerHeight.value = scroller.value.offsetHeight;
+});
+</script>

package/src/composables/element.ts

@@ -0,0 +1,13 @@
+import type { Ref } from "vue";
+
+export function getElement(ref: Ref) {
+    if(ref === null) {
+        return null;
+    }
+
+    if(ref.value === null) {
+        return null;
+    }
+
+    return "$el" in ref.value ? ref.value.$el : ref.value;
+}

package/src/composables/useCachedUid.ts

@@ -0,0 +1,48 @@
+// https://github.com/liip/chusho/blob/main/packages/chusho/lib/composables/useCachedUid.ts#L20-L41 - Legend :D
+import { onMounted, readonly, ref } from 'vue';
+import { getElement } from './element';
+import type { ComponentPublicInstance, Ref } from 'vue';
+
+const UID_CACHE_ATTR = 'data-modlr-ssr-uid';
+
+// @ts-nocheck
+type CacheElement = HTMLElement | SVGElement | ComponentPublicInstance | null;
+
+export function uid(prefix: string = ''): string {
+    const id = Date.now().toString(36) + Math.random().toString(36).substring(2);
+    return prefix ? `${prefix}-${id}` : id;
+}
+
+export interface IUseCacheUid {
+    id: Readonly<Ref<string>>;
+    cacheAttrs: {
+        ref: Ref<CacheElement>;
+        [UID_CACHE_ATTR]?: string;
+    };
+}
+
+export function useCachedUid(prefix?: string): IUseCacheUid {
+    let id = ref(uid(prefix));
+    const cacheElement = ref<CacheElement>(null);
+
+    onMounted(() => {
+        if(cacheElement.value) {
+            const element = getElement(cacheElement);
+            const serverId = element?.getAttribute(UID_CACHE_ATTR);
+
+            if(serverId) {
+                id.value = serverId;
+            }
+
+            element?.removeAttribute(UID_CACHE_ATTR);
+        }
+    });
+
+    return {
+        id: readonly(id),
+        cacheAttrs: {
+            ref: cacheElement,
+            [UID_CACHE_ATTR]: typeof window === undefined ? id.value : undefined
+        }
+    }
+}

package/src/composables/useEventListener.ts

@@ -0,0 +1,14 @@
+import { watchEffect } from "vue";
+
+export function useEventListener<T extends EventTarget | HTMLElement, E extends EventListener>(element: T, type: string, listener: E, options: boolean) {
+    if(typeof window === undefined) {
+        return;
+    }
+
+    watchEffect((onInvalidate) => {
+        element = element ?? window;
+
+        element.addEventListener(type, listener, options);
+        onInvalidate(() => element.removeEventListener(type, listener, options));
+    })
+}

package/src/composables/useInput.ts

@@ -0,0 +1,134 @@
+// inspired by indielayer ui
+import type { PropType } from 'vue';
+import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
+import { useCachedUid } from './useCachedUid';
+
+export interface FormInput {
+    focus: () => void;
+    validate: (value: any) => void;
+    setError: (value: string) => void;
+}
+
+export const useInput = (props: any, { focus, emit, withListeners = true }: {
+    focus: () => void,
+    emit: any,
+    withListeners?: boolean
+}) => {
+    const isFirstValidation = ref(true);
+    const formError = ref(props.error);
+
+    const { id } = useCachedUid('input');
+    const name = props.name ? props.name : id.value;
+    const _name = ref(name);
+    
+    watch(() => props.error, (value) => formError.value = value);
+    watch(() => props.name, (value) => name.value = value);
+
+    const form = inject('m-form', {
+        add: (inputName: string, methods: FormInput) => {},
+        remove: (inputName: string) => {},
+        insideForm: false,
+        disabled: false,
+        loading: false
+    });
+
+    const reset = () => {
+        formError.value = '';
+        isFirstValidation.value = true;
+        emit('update:modelValue', '');
+    };
+
+    const setError  = (value: string) => {
+        formError.value = value;
+    };
+
+    const validate = (value: any): boolean => {
+        value = value || props.modelValue;
+
+        isFirstValidation.value = false;
+
+        for (let i = 0; i < props.rules.length; i++) {
+            const item = props.rules[i];
+
+            let valid = true;
+
+            if (typeof item === 'function') {
+                valid = item(value);
+            } else if(Array.isArray(item) && item.length === 2) {
+                const { 0: rule, 1: options } = item;
+                valid = rule(value, options);
+            } else {
+                const rule = item.fn;
+                const { options } = item;
+
+                valid = rule(value, options);
+            }
+
+            if (valid !== true) {
+                formError.value = valid;
+                return false;
+            }
+        }
+
+        formError.value = '';
+        return true;
+    };
+
+    const listeners = withListeners ? computed(() => {
+        return {
+            blur: (event: Event) => emit('blur', event),
+            focus: (event: Event) => emit('focus', event),
+            input: (event: Event) => {
+                emit('update:modelValue', (event.target as HTMLInputElement).value);
+            },
+            change: (event: Event) => emit('change', event)
+        }
+    }) : {};
+
+    onMounted(() => {
+        form.add(_name.value,
+            focus,
+            // @ts-ignore
+            validate,
+            // @ts-ignore
+            setError
+        );
+    })
+
+    onUnmounted(() => {
+        form.remove(_name.value);
+    });
+
+    return {
+        id,
+        isFirstValidation,
+        formError,
+        insideForm: form.insideForm,
+        listeners,
+        reset,
+        validate,
+        setError,
+        //@ts-ignore
+        formDisabled: form.disabled.value,
+        //@ts-ignore
+        formLoading: form.loading.value
+    }
+};
+
+useInput.emits = (withListeners: boolean = true): string[] => {
+    return withListeners ?
+        ['update:modelValue', 'blur', 'focus', 'input', 'change'] :
+        ['update:modelValue'];
+}
+
+useInput.props = () => ({
+    modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+    name: String,
+    readonly: Boolean,
+    required: Boolean,
+    error: String,
+    rules: {
+        type: Array,
+        default: () => [],
+    }
+} as const);

package/src/composables/useIsServer.ts

@@ -0,0 +1,7 @@
+import { ref } from 'vue';
+
+export function useIsServer() {
+    const isServer = ref(typeof window === 'undefined');
+
+    return isServer;
+}

package/src/composables/useMount.ts

@@ -0,0 +1,43 @@
+import { createVNode, render } from "vue";
+import type { App, Component } from "vue";
+
+export function mount(
+    component: Component,
+    {
+        props,
+        children,
+        element,
+        app
+    }: {
+        props?: Record<string, unknown>,
+        children?: unknown,
+        app?: App,
+        element?: HTMLElement
+    } = {}
+) {
+    let el = element;
+
+    const vNode = createVNode(component, props, children);
+
+    if (app && app._context) {
+        vNode.appContext = app._context;
+    }
+
+    if (el) {
+        render(vNode, el);
+    } else if(typeof document !== 'undefined') {
+        render(vNode, (el = document.createElement('div')))
+    }
+
+    const destroy = () => {
+        if (el) {
+            render(null, el);
+        }
+    }
+
+    return {
+        el,
+        vNode,
+        destroy,
+    }
+}

package/src/composables/usePopper.ts

@@ -0,0 +1,194 @@
+import { ref, watch, nextTick, onMounted, onBeforeUnmount, watchEffect } from "vue";
+import { createPopper as createInternalPopper } from '@popperjs/core';
+
+import type { Ref, WatchStopHandle } from "vue";
+import type { Placement, Modifier, Instance, Rect, VirtualElement } from '@popperjs/core';
+
+type OffsetsFunction = (options: {
+    popper: Rect,
+    reference: Rect,
+    placement: Placement
+}) => [number?, number?];
+
+interface UsePopperOptions {
+    placement: Ref<Placement>,
+    transfer: Ref<boolean | string>,
+    wrapper: Ref<HTMLElement | null | undefined>,
+    isDrop?: boolean,
+    reference?: Ref<HTMLElement | VirtualElement | null | undefined>,
+    popper?: Ref<HTMLElement | null | undefined>,
+    offset?: OffsetsFunction | [number?, number?]
+}
+
+export type { Placement, VirtualElement };
+
+export const placementWhileList = Object.freeze([
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+    'right',
+    'right-start',
+    'right-end'
+] as Placement[])
+
+export interface TransferNode extends Node {
+    __transferNode?: Node;
+    __transferElement?: Node;
+}
+
+export function usePopper(initialOptions: UsePopperOptions) {
+    const { placement, transfer, wrapper, isDrop = false } = initialOptions;
+
+    const reference: Ref<HTMLElement | null | undefined> = (initialOptions.reference as any) ?? ref(null);
+    const popper: Ref<HTMLElement | null | undefined> = initialOptions.popper ?? ref(null);
+    const transferTo: Ref<String> = ref('');
+
+    const options: {
+        placement: Placement,
+        modifiers: Partial<Modifier<any, any>>[]
+    } = {
+        placement: placement.value,
+        modifiers: [
+            {
+                name: 'computeStyles',
+                options: {
+                    gpuAcceleration: false
+                }
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    rootBoundary: 'window'
+                }
+            }
+        ]
+    };
+
+    if (isDrop) {
+        options.modifiers.push({
+            name: 'setTransformOrigin',
+            enabled: true,
+            phase: 'afterWrite',
+            fn({ state }) {
+                const origin = setPopperDropOrigin(state.placement);
+
+                if (origin) {
+                    state.elements.popper.style.transformOrigin = origin;
+                }
+            }
+        })
+    }
+
+    if (initialOptions.offset) {
+        options.modifiers.push({
+            name: 'offset',
+            options: {
+                offset: initialOptions.offset
+            }
+        })
+    }
+
+    let popperInstance: Instance | null = null;
+
+    watch(placement, value => {
+        options.placement = value;
+        popperInstance && popperInstance?.setOptions({ placement: value });
+    });
+
+    let parentWidth = ref(0);
+
+    watchEffect(() => {
+        if (wrapper.value && popper.value) {
+            (wrapper.value as TransferNode).__transferElement = popper.value;
+        }
+    });
+
+    let stopWatchPopper: WatchStopHandle | null = null;
+
+    if (transfer) {
+        watch(transfer, value => {
+            setTransformTo(value);
+            updatePopper();
+        })
+    }
+
+    onMounted(() => {
+        nextTick(createPopper);
+    });
+
+    onBeforeUnmount(destroyPopper);
+
+    function updatePopper() {
+        nextTick(() => {
+            popperInstance && popperInstance.forceUpdate()
+            if(wrapper.value) {
+                parentWidth.value = wrapper.value.clientWidth;
+            }
+        })
+    }
+
+    function createPopper() {
+        destroyPopper();
+        popperInstance && popperInstance.destroy();
+        createPopperInstance();
+
+        const cancelWatchReference = watch(reference, createPopperInstance);
+        const cancelWatchPopper = watch(popper, createPopperInstance);
+
+        stopWatchPopper = () => {
+            cancelWatchReference()
+            cancelWatchPopper()
+        }
+    }
+
+    function setTransformTo(value: boolean | string) {
+        transferTo.value = typeof value === 'boolean' ? (value ? 'body' : '') : value;
+    }
+
+    function createPopperInstance() {
+        if (reference.value && popper.value) {
+            popperInstance && popperInstance.destroy()
+            popperInstance = createInternalPopper(reference.value, popper.value as HTMLElement, options);
+            updatePopper();
+        }
+    }
+
+    function destroyPopper() {
+        popperInstance && popperInstance.destroy();
+        popperInstance = null;
+
+        if (typeof stopWatchPopper === 'function') {
+            stopWatchPopper();
+            stopWatchPopper = null;
+        }
+    }
+
+    return {
+        reference,
+        popper,
+        transferTo,
+        updatePopper,
+        createPopper,
+        destroyPopper,
+        width: parentWidth
+    };
+}
+
+function setPopperDropOrigin(placement: Placement) {
+    if (placement !== 'left' && placement !== 'right') {
+        const [placementStart, placementEnd] = placement.split('-')
+
+        return placementStart === 'bottom' || (placementStart !== 'top' && placementEnd === 'start')
+            ? 'center top'
+            : 'center bottom'
+    }
+}

package/src/create.ts

@@ -0,0 +1,34 @@
+import type { App } from 'vue';
+
+export type ModlrUIOptions = {
+    prefix?: string;
+    components?: any;
+}
+
+const defaultOptions: ModlrUIOptions = {
+    prefix: 'M'
+};
+
+const create = (createOptions: ModlrUIOptions = {}) => {
+    const install = (app: App, installOptions: ModlrUIOptions = {}) => {
+        const options = {
+            ...defaultOptions,
+            ...createOptions,
+            ...installOptions
+        };
+
+        if (options.components) {
+            options.components.forEach((component: any) => {
+                const name = component.name.startsWith('M') ? component.name.slice(1) : component.name
+
+                app.component(`${options.prefix}${name}`, component)
+            });
+        }
+    };
+
+    return {
+        install
+    }
+}
+
+export default create;