@teammodlr/ui-kit 2.1.41 → 2.1.43

package/src/components/virtualscroll/VirtualScroll.vue

@@ -1,167 +1,167 @@
-<template>
-  <div
-    ref="scroller"
-    :class="style.container"
-    @scroll.passive="onScroll"
-  >
-    <div
-      ref="contentWrapper"
-      :style="{ width: `${totalWidth}px`, height: `${totalHeight}px` }"
-    >
-      <div
-        :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
-      >
-        <template v-for="(row, rowIndex) in renderedItems" :key="rowIndex">
-          <div
-            :style="{ display: 'flex' }"
-          >
-            <template v-for="(item, colIndex) in row" :key="colIndex">
-              <div
-                :style="{ width: `${itemWidth}px`, height: `${itemHeight}px` }"
-              >
-                <slot name="item" :item="item" />
-              </div>
-            </template>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {defineComponent, computed, onMounted, ref, watchEffect, toRef} from 'vue';
-import * as style from "./style";
-export default defineComponent({
-    name: "VirtualScroll",
-    props: {
-        items: {
-            type: Array,
-            default: () => []
-        },
-        itemHeight: {
-            type: Number,
-            default: 30
-        },
-        itemWidth: {
-            type: Number,
-            default: 140
-        },
-        buffer: {
-            type: Number,
-            default: 5
-        },
-        delay: {
-            type: Number,
-            default: 15
-        }
-    },
-    setup(props, {emit}) {
-        const contentWrapper = ref();
-        const scroller = ref();
-        const scrollerHeight = ref(0);
-        const scrollerWidth = ref(0);
-        const scrollTop = ref(0);
-        const scrollLeft = ref(0);
-        const totalHeight = computed(() => props.items.length * props.itemHeight);
-        // @ts-ignore
-        const totalWidth = computed(() => props.items[0].length * props.itemWidth);
-
-        const startPosition = computed(() => {
-            const row = Math.max(
-                0,
-                Math.floor(scrollTop.value / props.itemHeight) - 2 * props.buffer
-            );
-            const col = Math.max(
-                0,
-                Math.floor(scrollLeft.value / props.itemWidth) - 2 * props.buffer
-            );
-            return { row, col };
-        });
-
-        const endPosition = computed(() => {
-            const row = Math.min(
-                props.items.length,
-                Math.ceil(
-                    (scrollTop.value + scrollerHeight.value) / props.itemHeight
-                ) + 2 * props.buffer
-            );
-            const col = Math.min(
-                // @ts-ignore
-                props.items[0].length,
-                Math.ceil(
-                    (scrollLeft.value + scrollerWidth.value) / props.itemWidth
-                ) + 2 * props.buffer
-            );
-            return { row, col };
-        });
-
-        const offsetX = computed(() => {
-            return startPosition.value.col * props.itemWidth;
-        });
-
-        const offsetY = computed(() => {
-            return startPosition.value.row * props.itemHeight;
-        });
-
-        const visibleRows = computed(() =>
-            Math.ceil(scrollerHeight.value / props.itemHeight)
-        );
-        const visibleCols = computed(() =>
-            Math.ceil(scrollerWidth.value / props.itemWidth)
-        );
-
-        const renderedItems = ref([]);
-
-        const onScroll = () => {
-            scrollTop.value = scroller.value.scrollTop;
-            scrollLeft.value = scroller.value.scrollLeft;
-        };
-
-        watchEffect(() => {
-            const numRows = Math.min(
-                props.items.length - startPosition.value.row,
-                visibleRows.value + 2 * Math.round(props.buffer + props.buffer / 2)
-            );
-            const numCols = Math.min(
-                // @ts-ignore
-                props.items[0].length - startPosition.value.col,
-                visibleCols.value + 2 * Math.round(props.buffer + props.buffer / 2)
-            );
-            const rows = props.items.slice(
-                startPosition.value.row,
-                startPosition.value.row + numRows
-            );
-            const slicedRows = rows.map((row) =>
-                // @ts-ignore
-                row.slice(startPosition.value.col, startPosition.value.col + numCols)
-            );
-            // @ts-ignore
-            renderedItems.value = slicedRows;
-        });
-
-        onMounted(() => {
-            scrollerHeight.value = scroller.value.clientHeight;
-            scrollerWidth.value = scroller.value.clientWidth;
-        });
-
-        return {
-            contentWrapper,
-            scroller,
-            scrollerHeight,
-            scrollerWidth,
-            scrollTop,
-            scrollLeft,
-            totalHeight,
-            totalWidth,
-            startPosition,
-            endPosition,
-            renderedItems,
-            offsetX,
-            offsetY,
-            onScroll,
-            style
-        }
-    }
-});
+<template>
+  <div
+    ref="scroller"
+    :class="style.container"
+    @scroll.passive="onScroll"
+  >
+    <div
+      ref="contentWrapper"
+      :style="{ width: `${totalWidth}px`, height: `${totalHeight}px` }"
+    >
+      <div
+        :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
+      >
+        <template v-for="(row, rowIndex) in renderedItems" :key="rowIndex">
+          <div
+            :style="{ display: 'flex' }"
+          >
+            <template v-for="(item, colIndex) in row" :key="colIndex">
+              <div
+                :style="{ width: `${itemWidth}px`, height: `${itemHeight}px` }"
+              >
+                <slot name="item" :item="item" />
+              </div>
+            </template>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, computed, onMounted, ref, watchEffect, toRef} from 'vue';
+import * as style from "./style";
+export default defineComponent({
+    name: "VirtualScroll",
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        },
+        itemHeight: {
+            type: Number,
+            default: 30
+        },
+        itemWidth: {
+            type: Number,
+            default: 140
+        },
+        buffer: {
+            type: Number,
+            default: 5
+        },
+        delay: {
+            type: Number,
+            default: 15
+        }
+    },
+    setup(props, {emit}) {
+        const contentWrapper = ref();
+        const scroller = ref();
+        const scrollerHeight = ref(0);
+        const scrollerWidth = ref(0);
+        const scrollTop = ref(0);
+        const scrollLeft = ref(0);
+        const totalHeight = computed(() => props.items.length * props.itemHeight);
+        // @ts-ignore
+        const totalWidth = computed(() => props.items[0].length * props.itemWidth);
+
+        const startPosition = computed(() => {
+            const row = Math.max(
+                0,
+                Math.floor(scrollTop.value / props.itemHeight) - 2 * props.buffer
+            );
+            const col = Math.max(
+                0,
+                Math.floor(scrollLeft.value / props.itemWidth) - 2 * props.buffer
+            );
+            return { row, col };
+        });
+
+        const endPosition = computed(() => {
+            const row = Math.min(
+                props.items.length,
+                Math.ceil(
+                    (scrollTop.value + scrollerHeight.value) / props.itemHeight
+                ) + 2 * props.buffer
+            );
+            const col = Math.min(
+                // @ts-ignore
+                props.items[0].length,
+                Math.ceil(
+                    (scrollLeft.value + scrollerWidth.value) / props.itemWidth
+                ) + 2 * props.buffer
+            );
+            return { row, col };
+        });
+
+        const offsetX = computed(() => {
+            return startPosition.value.col * props.itemWidth;
+        });
+
+        const offsetY = computed(() => {
+            return startPosition.value.row * props.itemHeight;
+        });
+
+        const visibleRows = computed(() =>
+            Math.ceil(scrollerHeight.value / props.itemHeight)
+        );
+        const visibleCols = computed(() =>
+            Math.ceil(scrollerWidth.value / props.itemWidth)
+        );
+
+        const renderedItems = ref([]);
+
+        const onScroll = () => {
+            scrollTop.value = scroller.value.scrollTop;
+            scrollLeft.value = scroller.value.scrollLeft;
+        };
+
+        watchEffect(() => {
+            const numRows = Math.min(
+                props.items.length - startPosition.value.row,
+                visibleRows.value + 2 * Math.round(props.buffer + props.buffer / 2)
+            );
+            const numCols = Math.min(
+                // @ts-ignore
+                props.items[0].length - startPosition.value.col,
+                visibleCols.value + 2 * Math.round(props.buffer + props.buffer / 2)
+            );
+            const rows = props.items.slice(
+                startPosition.value.row,
+                startPosition.value.row + numRows
+            );
+            const slicedRows = rows.map((row) =>
+                // @ts-ignore
+                row.slice(startPosition.value.col, startPosition.value.col + numCols)
+            );
+            // @ts-ignore
+            renderedItems.value = slicedRows;
+        });
+
+        onMounted(() => {
+            scrollerHeight.value = scroller.value.clientHeight;
+            scrollerWidth.value = scroller.value.clientWidth;
+        });
+
+        return {
+            contentWrapper,
+            scroller,
+            scrollerHeight,
+            scrollerWidth,
+            scrollTop,
+            scrollLeft,
+            totalHeight,
+            totalWidth,
+            startPosition,
+            endPosition,
+            renderedItems,
+            offsetX,
+            offsetY,
+            onScroll,
+            style
+        }
+    }
+});
 </script>

package/src/components/virtualscroll/examples/basic.vue

@@ -1,31 +1,31 @@
-<script lang="ts" setup>
-import {ref} from "vue";
-
-const items = ref(
-    Array.from({ length: 1000 }, (_, i) =>
-        Array.from({ length: 1000 }, (_, j) => i + j + 1)
-    )
-);
-</script>
-
-<template>
-    <div>
-        <MVirtualScroll 
-            :items="items"
-            :item-size="[50, 100]"
-            autoSize
-            orientation="both"
-            style="width: 970px; height: 600px; overflow: auto"
-        >
-            <template v-slot:item="{ item }">
-                {{ item }}
-            </template>
-        </MVirtualScroll>
-    </div>
-</template>
-
-<style>
-.odd {
-    background-color: #f5f5f5;
-}
-</style>
+<script lang="ts" setup>
+import {ref} from "vue";
+
+const items = ref(
+    Array.from({ length: 1000 }, (_, i) =>
+        Array.from({ length: 1000 }, (_, j) => i + j + 1)
+    )
+);
+</script>
+
+<template>
+    <div>
+        <MVirtualScroll 
+            :items="items"
+            :item-size="[50, 100]"
+            autoSize
+            orientation="both"
+            style="width: 970px; height: 600px; overflow: auto"
+        >
+            <template v-slot:item="{ item }">
+                {{ item }}
+            </template>
+        </MVirtualScroll>
+    </div>
+</template>
+
+<style>
+.odd {
+    background-color: #f5f5f5;
+}
+</style>

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

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

package/src/components/virtualscroll/style/VirtualScroll.css.ts

@@ -1,17 +1,17 @@
-import { globalStyle, style } from '@vanilla-extract/css';
-
-export const container = style({
-    overflow: 'auto',
-    willChange: 'transform',
-    contain: 'strict'
-});
-
-globalStyle(`${container} > div`, {
-    overflow: 'hidden',
-    willChange: 'transform'
-});
-
-globalStyle(`${container} > div > div`, {
-    willChange: 'transform',
-    backfaceVisibility: 'hidden'
-});
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const container = style({
+    overflow: 'auto',
+    willChange: 'transform',
+    contain: 'strict'
+});
+
+globalStyle(`${container} > div`, {
+    overflow: 'hidden',
+    willChange: 'transform'
+});
+
+globalStyle(`${container} > div > div`, {
+    willChange: 'transform',
+    backfaceVisibility: 'hidden'
+});

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

@@ -1 +1 @@
-export * from './VirtualScroll.css';
+export * from './VirtualScroll.css';

package/src/composables/element.ts

@@ -1,13 +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;
-}
+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/index.ts

@@ -1,4 +1,4 @@
-export { useMessage } from '../components/messageprovider/useMessage';
-export { useConfirm } from '../components/confirm/useConfirm';
-export { usePopper } from './usePopper';
-export { useZIndex } from './useZIndex';
+export { useMessage } from '../components/messageprovider/useMessage';
+export { useConfirm } from '../components/confirm/useConfirm';
+export { usePopper } from './usePopper';
+export { useZIndex } from './useZIndex';

package/src/composables/useCachedUid.ts

@@ -1,49 +1,49 @@
-// 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 {
-    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 {
-    const 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
-        }
-    };
-}
+// 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 {
+    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 {
+    const 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,19 +1,19 @@
-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)
-        );
-    });
-}
+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)
+        );
+    });
+}