@teammodlr/ui-kit 2.3.12 → 2.3.14

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.stories.ts

@@ -1,11 +1,11 @@
-import MVirtualScroll from '../VirtualScroll.vue';
-import { MVirtualScrollBasic } from './index';
-
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MVirtualScroll,
-    title: 'Components/VirtualScroll'
-};
-
-export const Basic = createStory(MVirtualScrollBasic);
+import MVirtualScroll from '../VirtualScroll.vue';
+import { MVirtualScrollBasic } from './index';
+
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MVirtualScroll,
+    title: 'Components/VirtualScroll'
+};
+
+export const Basic = createStory(MVirtualScrollBasic);

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,5 +1,5 @@
-export { useMessage } from '../components/messageprovider/useMessage';
-export { useDialog } from '../components/dialogprovider/useDialog';
-export { useConfirm } from '../components/confirm/useConfirm';
-export { usePopper } from './usePopper';
-export { useZIndex } from './useZIndex';
+export { useMessage } from '../components/messageprovider/useMessage';
+export { useDialog } from '../components/dialogprovider/useDialog';
+export { useConfirm } from '../components/confirm/useConfirm';
+export { usePopper } from './usePopper';
+export { useZIndex } from './useZIndex';

package/src/composables/useCachedUid.ts

@@ -1,15 +1,15 @@
-import { injectConfigProviderContext } from '../components/configprovider/ConfigProvider.vue';
-
-let count = 0
-
-export function useId(deterministicId?: string | null | undefined, prefix = 'ui') {
-    if (deterministicId) {
-        return deterministicId;
-    }
-    const { useId } = injectConfigProviderContext({ useId: undefined })
-    if (useId && typeof useId === 'function') {
-        return `${prefix}-${useId()}`;
-    }
-
-    return `${prefix}-${count++}`;
-}
+import { injectConfigProviderContext } from '../components/configprovider/ConfigProvider.vue';
+
+let count = 0
+
+export function useId(deterministicId?: string | null | undefined, prefix = 'ui') {
+    if (deterministicId) {
+        return deterministicId;
+    }
+    const { useId } = injectConfigProviderContext({ useId: undefined })
+    if (useId && typeof useId === 'function') {
+        return `${prefix}-${useId()}`;
+    }
+
+    return `${prefix}-${count++}`;
+}

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)
+        );
+    });
+}