@teammodlr/ui-kit 1.0.2 → 1.0.4

package/src/components/tooltip/Tooltip.css

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

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

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

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

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

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

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

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

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

package/src/composables/useMount.ts

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

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

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