@teammodlr/ui-kit 2.0.29 → 2.0.31

package/src/components/transfer/style/Transfer.css.ts

@@ -1,68 +1,68 @@
-import { createVar, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-
-export const vars = {
-
-}
-
-
-export const wrapper = style({
-    display: "flex",
-    flexWrap: "nowrap",
-    wordBreak: "break-word",
-    fontSize: themeVars.fontSize.base,
-    width: "100%",
-    height: "300px",
-    border: `1px solid ${themeVars.color.gray[300]}`,
-    borderRadius: themeVars.rounded.default,
-    overflow: "hidden"
-});
-
-export const list = style({
-    flex: 1,
-    minWidth: 0,
-    height: "inherit",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto"
-});
-
-export const listHeader = style({
-    minHeight: "40px",
-    boxSizing: "border-box",
-    display: "flex",
-    padding: `${themeVars.space["4"]}`,
-    alignItems: "center",
-    position: "sticky",
-    top: 0,
-    backgroundColor: "#FFF",
-    zIndex: 1,
-});
-
-export const listBody = style({
-    flexBasis: 0,
-    flexGrow: 1,
-    boxSizing: "border-box",
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-});
-
-export const listContainer = style({
-    flex: 1,
-    position: "relative",
-    overflow: "auto",
-});
-
-export const transferItem = style({
-    padding: `0 ${themeVars.space["4"]}`,
-    minHeight: "35px",
-    display: "flex",
-    alignItems: "center",
-    color: themeVars.color.font.default,
-    cursor: "pointer",
-    userSelect: "none",
-    ':hover': {
-        backgroundColor: themeVars.color.gray[150]
-    }
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+export const vars = {
+
+}
+
+
+export const wrapper = style({
+    display: "flex",
+    flexWrap: "nowrap",
+    wordBreak: "break-word",
+    fontSize: themeVars.fontSize.base,
+    width: "100%",
+    height: "300px",
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    borderRadius: themeVars.rounded.default,
+    overflow: "hidden"
+});
+
+export const list = style({
+    flex: 1,
+    minWidth: 0,
+    height: "inherit",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto"
+});
+
+export const listHeader = style({
+    minHeight: "40px",
+    boxSizing: "border-box",
+    display: "flex",
+    padding: `${themeVars.space["4"]}`,
+    alignItems: "center",
+    position: "sticky",
+    top: 0,
+    backgroundColor: "#FFF",
+    zIndex: 1,
+});
+
+export const listBody = style({
+    flexBasis: 0,
+    flexGrow: 1,
+    boxSizing: "border-box",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+});
+
+export const listContainer = style({
+    flex: 1,
+    position: "relative",
+    overflow: "auto",
+});
+
+export const transferItem = style({
+    padding: `0 ${themeVars.space["4"]}`,
+    minHeight: "35px",
+    display: "flex",
+    alignItems: "center",
+    color: themeVars.color.font.default,
+    cursor: "pointer",
+    userSelect: "none",
+    ':hover': {
+        backgroundColor: themeVars.color.gray[150]
+    }
 })

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

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

package/src/components/virtualscroll/VirtualScroll.css

@@ -1,13 +1,13 @@
-.virtual-scroller {
-    overflow: auto;
-    will-change: transform;
-}
-
-.virtual-scroller>div {
-    overflow: hidden;
-    will-change: transform;
-}
-
-.virtual-scroller>div>div {
-    will-change: transform;
-}
+.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,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,15 +1,15 @@
-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,18 +1,18 @@
-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,3 +1,3 @@
-export { useMessage } from '../components/messageprovider/useMessage';
-export { usePopper } from './usePopper';
+export { useMessage } from '../components/messageprovider/useMessage';
+export { usePopper } from './usePopper';
 export { useZIndex } from './useZIndex';