@teammodlr/ui-kit 1.0.4 → 1.0.5

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

@@ -0,0 +1,19 @@
+import MTable from "../Table.vue";
+import MButton from "../../button/Button.vue";
+import {
+    MTableBasic
+} from "./index";
+
+import {
+    createStory
+} from "@/__storybook__";
+
+export default {
+    component: MTable,
+    subcomponents: {
+        MButton
+    },
+    title: 'Components/Table',
+}
+
+export const Basic = createStory(MTableBasic);

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

@@ -0,0 +1 @@
+export { default as MTableBasic } from './basic.vue';

package/src/components/table/types/index.ts

@@ -0,0 +1,5 @@
+export type TableHeadItem = {
+    key: string;
+    name?: string;
+    width?: string | number;
+}

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/tooltip/examples/basic.vue

@@ -0,0 +1,8 @@
+<template>
+    <MTooltip>
+        <template #trigger>
+            <MButton>Top</MButton>
+        </template>
+        The top textdsfsdfsdf
+    </MTooltip>
+</template>

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

@@ -0,0 +1,21 @@
+import MTooltip from "../Tooltip.vue";
+import MButton from "@/components/button/Button.vue";
+import {
+    MTooltipBasic
+} from "./index";
+
+import {
+    createStory,
+    popperPositionArgType
+} from "@/__storybook__";
+
+export default {
+    component: MTooltip,
+    subcomponents: { MButton },
+    title: 'Components/Tooltip',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+}
+
+export const Basic = createStory(MTooltipBasic);

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

@@ -0,0 +1 @@
+export { default as MTooltipBasic } from "./basic.vue";

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/components/virtualscroll/examples/basic.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () => []
+    },
+    itemHeight: {
+        type: Number,
+        default: 50
+    },
+    buffer: {
+        type: Number,
+        default: 3
+    },
+    pageHeight: {
+        type: Number,
+        default: 400
+    }
+})
+</script>
+
+<template>
+    <div>
+        <MVirtualScroll 
+            v-slot="{ item, height }" 
+            v-bind="props"
+            :style="{
+                height: `${props.pageHeight}px`,
+                overflow: 'auto'
+            }"
+        >
+            <div :key="item.id" :style="{height: `${height}px`}">
+                {{ item.name }}
+            </div>
+        </MVirtualScroll>
+    </div>
+</template>

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

@@ -0,0 +1,31 @@
+import MVirtualScroll from "../VirtualScroll.vue";
+import {
+    MVirtualScrollBasic
+} from "./index";
+
+import {
+    createStory
+} from "@/__storybook__";
+
+export default {
+    component: MVirtualScroll,
+    title: 'Components/VirtualScroll'
+}
+
+const items = [] as any[];
+
+for (let i = 0; i < 1000; i++) {
+    items.push({
+        id: i + 1,
+        name: 'Some name here ' + (i + 1),
+    });
+}
+
+export const Basic = createStory(MVirtualScrollBasic).bind({});
+// @ts-ignore
+Basic.args = {
+    items: items,
+    itemHeight: 50,
+    buffer: 3,
+    pageHeight: 500,
+};

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

@@ -0,0 +1 @@
+export { default as MVirtualScrollBasic } from './basic.vue';

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,
+    }
+}