@teammodlr/ui-kit 2.0.24 → 2.0.27

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

@@ -1,91 +1,91 @@
-import {createVar, globalKeyframes, style} from '@vanilla-extract/css';
-import { themeVars } from "../../../styles/theme.css";
-
-
-export const vars = {
-    backgroundColor: createVar(),
-    color: createVar(),
-}
-
-export const wrapper = style({
-    position: 'relative',
-    display: 'inline-flex'
-});
-
-export const container = style({
-    zIndex: 50,
-});
-
-export const tooltip = style({
-    vars: {
-        [vars.backgroundColor]: themeVars.color.gray[900],
-        [vars.color]: themeVars.color.gray[100],
-    },
-    zIndex: 50,
-    transition: 'opacity 0.3s, ease',
-    position: 'fixed',
-    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],
-    }
-});
-
-const fadeOutAnimation = "fade-out-animation";
-globalKeyframes(fadeOutAnimation, {
-    'from': {
-        opacity: 1,
-    },
-    'to': {
-        opacity: 0,
-    }
-});
-
-const fadeInAnimation = "fade-in-animation";
-globalKeyframes(fadeInAnimation, {
-    '0%': {
-        opacity: 0,
-    },
-    '100%': {
-        opacity: 1,
-    }
-});
-
-export const fadeEnter = style({
-    animationName: fadeInAnimation,
-    animationDuration: '0.125s',
-    animationTimingFunction: 'ease-in-out',
-    transition: themeVars.transition.default,
-})
-
-export const fadeLeave = style({
-    animationName: fadeOutAnimation,
-    animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out',
-})
+import {createVar, globalKeyframes, style} from '@vanilla-extract/css';
+import { themeVars } from "../../../styles/theme.css";
+
+
+export const vars = {
+    backgroundColor: createVar(),
+    color: createVar(),
+}
+
+export const wrapper = style({
+    position: 'relative',
+    display: 'inline-flex'
+});
+
+export const container = style({
+    zIndex: 50,
+});
+
+export const tooltip = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.gray[900],
+        [vars.color]: themeVars.color.gray[100],
+    },
+    zIndex: 50,
+    transition: 'opacity 0.3s, ease',
+    position: 'fixed',
+    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],
+    }
+});
+
+const fadeOutAnimation = "fade-out-animation";
+globalKeyframes(fadeOutAnimation, {
+    'from': {
+        opacity: 1,
+    },
+    'to': {
+        opacity: 0,
+    }
+});
+
+const fadeInAnimation = "fade-in-animation";
+globalKeyframes(fadeInAnimation, {
+    '0%': {
+        opacity: 0,
+    },
+    '100%': {
+        opacity: 1,
+    }
+});
+
+export const fadeEnter = style({
+    animationName: fadeInAnimation,
+    animationDuration: '0.125s',
+    animationTimingFunction: 'ease-in-out',
+    transition: themeVars.transition.default,
+})
+
+export const fadeLeave = style({
+    animationName: fadeOutAnimation,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out',
+})

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

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

package/src/components/transfer/Transfer.vue

@@ -1,144 +1,144 @@
-<template>
-    <div
-        :class="style.wrapper"
-        ref="wrapper"
-    >
-        <div :class="[style.list]">
-            <div
-                :class="style.listHeader">
-                {{sourceTitle}}
-            </div>
-            <div
-                :class="style.listBody">
-                <div
-                    :class="style.listContainer">
-                    <div
-                        v-for="option in sourceData"
-                        :key="
-                        // @ts-ignore
-                        option[optionKey]"
-                        @click="handleSourceClick(option)"
-                        :class="style.transferItem"
-                    >
-                        {{
-                            // @ts-ignore
-                            option[optionLabel] }}
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div :class="[style.list]">
-            <div
-                :class="style.listHeader">
-                {{targetTitle}}
-            </div>
-            <div
-                :class="style.listBody">
-                <div
-                    :class="style.listContainer">
-                    <div
-                        v-for="option in targetData"
-                        :key="
-                        // @ts-ignore
-                        option[optionKey]"
-                        @click="handleTargetClick(option)"
-                        :class="style.transferItem"
-                    >
-                        {{
-                            // @ts-ignore
-                            option[optionLabel] }}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-// TODO: Tidy up
-import {computed, defineComponent, ref} from 'vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "Transfer",
-    props: {
-        options: {
-            type: Array,
-            default: () => []
-        },
-        optionKey: {
-            type: String,
-            default: "value"
-        },
-        optionLabel: {
-            type: String,
-            default: "label"
-        },
-        sourceTitle: {
-            type: String,
-            default: "Source"
-        },
-        targetTitle: {
-            type: String,
-            default: "Target"
-        },
-        modelValue: {
-            type: Array,
-            default: () => []
-        },
-    },
-    setup(props, { emit }) {
-        const wrapper = ref<HTMLElement | null>(null);
-
-        const useData = () => {
-            const dataObj = computed(() =>
-                // @ts-ignore
-                props.options.reduce((o, cur) => (o[cur[props.optionKey]] = cur) && o, {})
-            );
-
-            const sourceData = computed(() =>
-                props.options.filter((option: any) => !props.modelValue.includes(option[props.optionKey]))
-            );
-
-            const targetData = computed(() => {
-                return props.modelValue.reduce(
-                    // @ts-ignore
-                    (arr: any, cur: number) => {
-                        // @ts-ignore
-                        const val = dataObj.value[cur];
-                        if (val) {
-                            arr.push(val);
-                        }
-                        return arr;
-                    },
-                    []
-                )
-            });
-
-            return {
-                sourceData,
-                targetData
-            }
-        }
-
-        const { sourceData, targetData } = useData();
-
-        const handleSourceClick = (option: any) => {
-            emit('update:modelValue', [...props.modelValue, option[props.optionKey]]);
-        };
-
-        const handleTargetClick = (option: any) => {
-            emit('update:modelValue', props.modelValue.filter((val: any) => val !== option[props.optionKey]));
-        };
-
-        return {
-            style,
-            sourceData,
-            targetData,
-            wrapper,
-            handleSourceClick,
-            handleTargetClick
-        }
-    }
-})
+<template>
+    <div
+        :class="style.wrapper"
+        ref="wrapper"
+    >
+        <div :class="[style.list]">
+            <div
+                :class="style.listHeader">
+                {{sourceTitle}}
+            </div>
+            <div
+                :class="style.listBody">
+                <div
+                    :class="style.listContainer">
+                    <div
+                        v-for="option in sourceData"
+                        :key="
+                        // @ts-ignore
+                        option[optionKey]"
+                        @click="handleSourceClick(option)"
+                        :class="style.transferItem"
+                    >
+                        {{
+                            // @ts-ignore
+                            option[optionLabel] }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div :class="[style.list]">
+            <div
+                :class="style.listHeader">
+                {{targetTitle}}
+            </div>
+            <div
+                :class="style.listBody">
+                <div
+                    :class="style.listContainer">
+                    <div
+                        v-for="option in targetData"
+                        :key="
+                        // @ts-ignore
+                        option[optionKey]"
+                        @click="handleTargetClick(option)"
+                        :class="style.transferItem"
+                    >
+                        {{
+                            // @ts-ignore
+                            option[optionLabel] }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+// TODO: Tidy up
+import {computed, defineComponent, ref} from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "Transfer",
+    props: {
+        options: {
+            type: Array,
+            default: () => []
+        },
+        optionKey: {
+            type: String,
+            default: "value"
+        },
+        optionLabel: {
+            type: String,
+            default: "label"
+        },
+        sourceTitle: {
+            type: String,
+            default: "Source"
+        },
+        targetTitle: {
+            type: String,
+            default: "Target"
+        },
+        modelValue: {
+            type: Array,
+            default: () => []
+        },
+    },
+    setup(props, { emit }) {
+        const wrapper = ref<HTMLElement | null>(null);
+
+        const useData = () => {
+            const dataObj = computed(() =>
+                // @ts-ignore
+                props.options.reduce((o, cur) => (o[cur[props.optionKey]] = cur) && o, {})
+            );
+
+            const sourceData = computed(() =>
+                props.options.filter((option: any) => !props.modelValue.includes(option[props.optionKey]))
+            );
+
+            const targetData = computed(() => {
+                return props.modelValue.reduce(
+                    // @ts-ignore
+                    (arr: any, cur: number) => {
+                        // @ts-ignore
+                        const val = dataObj.value[cur];
+                        if (val) {
+                            arr.push(val);
+                        }
+                        return arr;
+                    },
+                    []
+                )
+            });
+
+            return {
+                sourceData,
+                targetData
+            }
+        }
+
+        const { sourceData, targetData } = useData();
+
+        const handleSourceClick = (option: any) => {
+            emit('update:modelValue', [...props.modelValue, option[props.optionKey]]);
+        };
+
+        const handleTargetClick = (option: any) => {
+            emit('update:modelValue', props.modelValue.filter((val: any) => val !== option[props.optionKey]));
+        };
+
+        return {
+            style,
+            sourceData,
+            targetData,
+            wrapper,
+            handleSourceClick,
+            handleTargetClick
+        }
+    }
+})
 </script>

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

@@ -1,21 +1,21 @@
-<template>
-    <MTransfer
-        :options="options"
-        v-model="selected"
-    >
-        hi
-    </MTransfer>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-
-function createOptions () {
-    return Array.from({ length: 100 }).map((_,index) => ({
-        label: 'Option ' + index,
-        value: index,
-    }))
-}
-
-const options = ref(createOptions());
-const selected = ref([1, 2, 3, 4, 5]);
+<template>
+    <MTransfer
+        :options="options"
+        v-model="selected"
+    >
+        hi
+    </MTransfer>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+function createOptions () {
+    return Array.from({ length: 100 }).map((_,index) => ({
+        label: 'Option ' + index,
+        value: index,
+    }))
+}
+
+const options = ref(createOptions());
+const selected = ref([1, 2, 3, 4, 5]);
 </script>

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

@@ -1,16 +1,16 @@
-import MTransfer from "../Transfer.vue";
-
-import {
-    MTransferBasic
-} from "./index";
-
-import {
-    createStory,
-} from "../../../__storybook__";
-
-export default {
-    component: MTransfer,
-    title: "Components/Transfer",
-};
-
+import MTransfer from "../Transfer.vue";
+
+import {
+    MTransferBasic
+} from "./index";
+
+import {
+    createStory,
+} from "../../../__storybook__";
+
+export default {
+    component: MTransfer,
+    title: "Components/Transfer",
+};
+
 export const Basic = createStory(MTransferBasic);

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

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