@teammodlr/ui-kit 1.0.7 → 2.0.1

package/src/components/tag/style/Tag.css.ts

@@ -0,0 +1,79 @@
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts } from "../../../styles/typography.css";
+
+const sizes = {
+    xs: '18px',
+    sm: '22px',
+    md: '26px',
+    lg: '30px',
+    xl: '34px',
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    paddingX: createVar(),
+    paddingY: createVar(),
+    borderColor: createVar(),
+    backgroundColor: createVar(),
+    color: createVar(),
+};
+
+export const base = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: borderRadiuses.md,
+        [vars.paddingX]: themeVars.space[1.5],
+        [vars.paddingY]: themeVars.space[0],
+        [vars.borderColor]: themeVars.color.gray[100],
+        [vars.color]: themeVars.color.gray[700],
+        [vars.backgroundColor]: themeVars.color.gray[100],
+    },
+    height: vars.height,
+    minHeight: vars.height,
+    lineHeight: vars.height,
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    color: vars.color,
+    borderColor: vars.borderColor,
+    backgroundColor: vars.backgroundColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    wordBreak: 'break-word',
+    fontSize: themeVars.fontSize.base,
+    display: 'inline-flex',
+    alignItems: 'center',
+});
+
+export const close = style({
+    marginLeft: themeVars.space[1],
+    appearance: 'none',
+    outline: 'none',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    padding: '3px',
+    position: 'relative',
+    right: '-2px',
+    color: themeVars.color.gray[500],
+    borderRadius: '50%',
+    ':hover': {
+        backgroundColor: themeVars.color.gray[200],
+        color: themeVars.color.gray[700],
+    },
+    ':focus': {
+        outline: 'none'
+    }
+})

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

@@ -0,0 +1 @@
+export * from './Tag.css';

package/src/components/tooltip/Tooltip.css

@@ -26,12 +26,6 @@
     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;
 }

package/src/components/tooltip/Tooltip.vue

@@ -1,14 +1,23 @@
 <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>
+    <span
+        v-bind="$attrs"
+        @mouseenter="() => { isOpen = true }"
+        @mouseleave="() => { isOpen = false }"
+        ref="wrapper"
+    >
+        <span ref="reference">
+            <slot />
+        </span>
+
+        <Teleport :to="transferTo">
+            <div role="tooltip" :class="computedClasses" ref="popper" v-if="isOpen" :style="{zIndex: zIndex}">
+                <slot
+                    :text="text"
+                    name="content"
+                >
+                    {{ text }}
+                </slot>
+            </div>
         </Teleport>
     </span>
 </template>
@@ -16,10 +25,16 @@
 <script lang="ts">
 import { defineComponent, ref, toRef, type PropType, computed, watch } from 'vue';
 import { type Placement, placementWhileList, usePopper } from "../../composables/usePopper";
+import * as style from "./style";
+import {useZIndex} from "../../composables/useZIndex";
 
 export default defineComponent({
     name: "MTooltip",
     props: {
+        text: {
+            type: String,
+            default: ""
+        },
         placement: {
             type: String as PropType<Placement>,
             default: 'top',
@@ -36,37 +51,53 @@ export default defineComponent({
         transfer: {
             type: Boolean,
             default: false
+        },
+        zIndex: {
+            type: Number
         }
     },
-    setup(props, { emit }) {
-        const placement = ref(props.placement);
+    setup(props) {
+        const {nextZIndex} = useZIndex();
+        const placement = toRef(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 zIndex = ref(props.zIndex ?? nextZIndex());
+
+        const offset = computed(() => {
+            switch(placement.value) {
+                case 'top':
+                    return [0, 8];
+                case 'bottom':
+                    return [0, -8];
+                case 'left':
+                    return [8, 0];
+                case 'right':
+                    return [-8, 0];
+            }
+        });
 
         const { popper, transferTo, updatePopper } = usePopper({
             placement,
             transfer,
             reference,
-            wrapper
-        });
-
-        const transitionName = computed(() => {
-            return `m-transition__${props.transitionName}`;
+            wrapper,
+            // @ts-ignore
+            offset: offset.value
         });
 
         const computedClasses = computed(() => {
             return [
-                'm-tooltip',
+                style.tooltip,
                 {
-                    'm-tooltip--reverse': props.reverse
+                    [style.reverse]: props.reverse
                 }
             ]
         });
 
-        watch(() => isOpen.value, (value) => {
+        watch(() => isOpen.value, (value: boolean) => {
             if (value) {
                 updatePopper();
             }
@@ -76,9 +107,9 @@ export default defineComponent({
             reference,
             popper,
             transferTo,
-            transitionName,
             isOpen,
-            computedClasses
+            computedClasses,
+            zIndex
         }
     }
 })

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

@@ -1,8 +1,5 @@
 <template>
-    <MTooltip>
-        <template #trigger>
-            <MButton>Top</MButton>
-        </template>
-        The top textdsfsdfsdf
+    <MTooltip text="Hello World">
+        <MButton>Top</MButton>
     </MTooltip>
 </template>

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

@@ -7,7 +7,7 @@ import {
 import {
     createStory,
     popperPositionArgType
-} from "@/__storybook__";
+} from "../../../__storybook__";
 
 export default {
     component: MTooltip,

package/src/components/tooltip/style/Tooltip.css.ts

@@ -0,0 +1,48 @@
+import {createVar, style} from '@vanilla-extract/css';
+import { themeVars } from "../../../styles/theme.css";
+
+
+export const vars = {
+    backgroundColor: createVar(),
+    color: createVar(),
+}
+
+export const tooltip = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.gray[900],
+        [vars.color]: themeVars.color.gray[100],
+    },
+    zIndex: 50,
+    transition: 'opacity 0.3s, ease',
+    fontSize: "13px",
+    fontWeight: 'normal',
+    color: vars.color,
+    backgroundColor: vars.backgroundColor,
+    borderRadius: themeVars.rounded.default,
+    padding: `${themeVars.space[1.5]} ${themeVars.space[2]}`,
+    pointerEvents: 'none',
+    width: 'max-content',
+    maxWidth: '300px',
+    boxSizing: 'border-box',
+    selectors: {
+        '&[data-popper-placement^="top"]': {
+            margin: `${themeVars.space[1]} 0 ${themeVars.space[3]} 0`,
+        },
+        '&[data-popper-placement^="bottom"]': {
+            margin: `${themeVars.space[3]} 0 ${themeVars.space[1]} 0`,
+        },
+        '&[data-popper-placement^="left"]': {
+            margin: `0 ${themeVars.space[3]} 0 ${themeVars.space[1]}`,
+        },
+        '&[data-popper-placement^="right"]': {
+            margin: `0 ${themeVars.space[1]} 0 ${themeVars.space[3]}`,
+        }
+    }
+});
+
+export const reverse = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.gray[100],
+        [vars.color]: themeVars.color.gray[900],
+    }
+});

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

@@ -0,0 +1 @@
+export * from './Tooltip.css';

package/src/components/virtualscroll/VirtualScroll.vue

@@ -1,61 +1,167 @@
 <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
+    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">
-export default {
-    name: "MVirtualScroller"
-}
-</script>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref, toRefs } from 'vue';
-const props = defineProps({
-    items: {
-        required: true,
-        type: Array,
+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
+        }
     },
-    itemHeight: {
-        required: true,
-        type: Number,
-        default: 35,
-    },
-    buffer: {
-        default: 10,
-        type: Number,
+    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
+        }
     }
 });
-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>
+</script>

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

@@ -1,37 +1,31 @@
 <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
-    }
-})
+import {ref} from "vue";
+
+const items = ref(
+    Array.from({ length: 1000 }, (_, i) =>
+        Array.from({ length: 1000 }, (_, j) => i + j + 1)
+    )
+);
 </script>
 
 <template>
     <div>
         <MVirtualScroll 
-            v-slot="{ item, height }" 
-            v-bind="props"
-            :style="{
-                height: `${props.pageHeight}px`,
-                overflow: 'auto'
-            }"
+            :items="items"
+            :item-size="[50, 100]"
+            autoSize
+            orientation="both"
+            style="width: 970px; height: 600px; overflow: auto"
         >
-            <div :key="item.id" :style="{height: `${height}px`}">
-                {{ item.name }}
-            </div>
+            <template v-slot:item="{ item }">
+                {{ item }}
+            </template>
         </MVirtualScroll>
     </div>
 </template>
+
+<style>
+.odd {
+    background-color: #f5f5f5;
+}
+</style>

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

@@ -5,27 +5,11 @@ import {
 
 import {
     createStory
-} from "@/__storybook__";
+} 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,
-};
+export const Basic = createStory(MVirtualScrollBasic);

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

@@ -0,0 +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'
+});
+

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

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

package/src/composables/useInput.ts

@@ -74,7 +74,7 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
         return true;
     };
 
-    const listeners = withListeners ? computed(() => {
+    const inputListeners = withListeners ? computed(() => {
         return {
             blur: (event: Event) => emit('blur', event),
             focus: (event: Event) => emit('focus', event),
@@ -104,7 +104,7 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
         isFirstValidation,
         formError,
         insideForm: form.insideForm,
-        listeners,
+        inputListeners,
         reset,
         validate,
         setError,

package/src/composables/useInteractive.ts

@@ -0,0 +1,20 @@
+import type { Ref } from "vue";
+
+export interface InteractiveProps {
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+export const useInteractive = (
+    el: Ref<HTMLElement | null>,
+) => {
+    return {
+        focus: () => el.value?.focus?.(),
+        blur: () => el.value?.blur?.(),
+    }
+}
+
+useInteractive.props = () => ({
+    disabled: Boolean,
+    loading: Boolean,
+} as const);

package/src/composables/usePopper.ts

@@ -50,7 +50,7 @@ export function usePopper(initialOptions: UsePopperOptions) {
 
     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 transferTo: Ref<String> = ref('body');
 
     const options: {
         placement: Placement,