@teammodlr/ui-kit 2.0.25 → 2.0.27

package/src/components/skeleton/Skeleton.vue

@@ -1,55 +1,55 @@
-<template>
-    <div
-            :class="computedClasses"
-            :style="computedStyles"
-    ></div>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent} from 'vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "MSkeleton",
-    props: {
-        width: {
-            type: String
-        },
-        height: {
-            type: String
-        },
-        loading: {
-            type: Boolean,
-            default: true
-        }
-    },
-    setup(props) {
-        const computedClasses = computed(() => {
-            return [
-                style.base,
-                {
-                    [style.loading]: props.loading
-                }
-            ]
-        });
-
-        const computedStyles = computed(() => {
-            let styles = {} as Record<string, string>;
-            if (props.width) {
-                styles[style.vars.width] = props.width;
-            }
-
-            if (props.height) {
-                styles[style.vars.height] = props.height;
-            }
-
-            return style.assignInlineVars(styles);
-        });
-
-        return {
-            computedClasses,
-            computedStyles
-        }
-    }
-})
-</script>
+<template>
+    <div
+            :class="computedClasses"
+            :style="computedStyles"
+    ></div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent} from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "MSkeleton",
+    props: {
+        width: {
+            type: String
+        },
+        height: {
+            type: String
+        },
+        loading: {
+            type: Boolean,
+            default: true
+        }
+    },
+    setup(props) {
+        const computedClasses = computed(() => {
+            return [
+                style.base,
+                {
+                    [style.loading]: props.loading
+                }
+            ]
+        });
+
+        const computedStyles = computed(() => {
+            let styles = {} as Record<string, string>;
+            if (props.width) {
+                styles[style.vars.width] = props.width;
+            }
+
+            if (props.height) {
+                styles[style.vars.height] = props.height;
+            }
+
+            return style.assignInlineVars(styles);
+        });
+
+        return {
+            computedClasses,
+            computedStyles
+        }
+    }
+})
+</script>

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

@@ -1,3 +1,3 @@
-<template>
-    <MSkeleton />
-</template>
+<template>
+    <MSkeleton />
+</template>

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

@@ -1,17 +1,17 @@
-import { createStory } from "../../../__storybook__";
-import MSkeleton from "../Skeleton.vue";
-
-import {
-    MSkeletonBasic,
-    MSkeletonPost
-} from "./index";
-
-export default {
-    component: MSkeleton,
-    title: 'Components/Skeleton',
-    argTypes: {
-    }
-}
-
-export const Basic = createStory(MSkeletonBasic);
-export const Post = createStory(MSkeletonPost);
+import { createStory } from "../../../__storybook__";
+import MSkeleton from "../Skeleton.vue";
+
+import {
+    MSkeletonBasic,
+    MSkeletonPost
+} from "./index";
+
+export default {
+    component: MSkeleton,
+    title: 'Components/Skeleton',
+    argTypes: {
+    }
+}
+
+export const Basic = createStory(MSkeletonBasic);
+export const Post = createStory(MSkeletonPost);

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

@@ -1,2 +1,2 @@
-export { default as MSkeletonBasic } from './basic.vue';
-export { default as MSkeletonPost } from './post.vue';
+export { default as MSkeletonBasic } from './basic.vue';
+export { default as MSkeletonPost } from './post.vue';

package/src/components/skeleton/examples/post.vue

@@ -1,8 +1,8 @@
-<template>
-    <div>
-        <MSkeleton variant="thumb" style="margin-bottom: 10px;" />
-        <MSkeleton variant="heading" style="margin-bottom: 10px; width: 340px;"  />
-        <MSkeleton variant="line" style="margin-bottom: 6px;" />
-        <MSkeleton variant="line" />
-    </div>
-</template>
+<template>
+    <div>
+        <MSkeleton variant="thumb" style="margin-bottom: 10px;" />
+        <MSkeleton variant="heading" style="margin-bottom: 10px; width: 340px;"  />
+        <MSkeleton variant="line" style="margin-bottom: 6px;" />
+        <MSkeleton variant="line" />
+    </div>
+</template>

package/src/components/skeleton/style/Skeleton.css.ts

@@ -1,57 +1,57 @@
-import {createVar, globalKeyframes, style} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px',
-};
-
-export const vars = {
-    height: createVar(),
-    width: createVar(),
-    marginBottom: createVar(),
-    radius: createVar(),
-};
-
-export const base = style({
-    vars: {
-        [vars.width]: '100%',
-        [vars.height]: '1em',
-        [vars.marginBottom]: themeVars.space[2],
-        [vars.radius]: borderRadiuses.md,
-    },
-    width: vars.width,
-    height: vars.height,
-    marginBottom: vars.marginBottom,
-    borderRadius: vars.radius,
-    position: "relative",
-    display: "inline-block",
-    overflow: "hidden",
-    backgroundColor: themeVars.color.gray[200],
-});
-
-const shineAnimation = "skeleton-shine-animation";
-globalKeyframes(shineAnimation, {
-    'from': {
-        transform: 'translate(-37.5%)',
-    },
-    'to': {
-        transform: 'translate(37.5%)'
-    }
-});
-
-export const loading = style({
-    selectors: {
-        ['&::after']: {
-            content: '',
-            position: 'absolute',
-            pointerEvents: 'none',
-            inset: '0 -150%',
-            backgroundImage: `linear-gradient(to right,transparent 25%,${themeVars.color.gray[100]} 37%,transparent 63%)`,
-            animation: `${shineAnimation} 2s ${themeVars.transition.default} infinite`
-        }
-    }
+import {createVar, globalKeyframes, style} from "@vanilla-extract/css";
+import {themeVars} from "../../../styles/theme.css";
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+export const vars = {
+    height: createVar(),
+    width: createVar(),
+    marginBottom: createVar(),
+    radius: createVar(),
+};
+
+export const base = style({
+    vars: {
+        [vars.width]: '100%',
+        [vars.height]: '1em',
+        [vars.marginBottom]: themeVars.space[2],
+        [vars.radius]: borderRadiuses.md,
+    },
+    width: vars.width,
+    height: vars.height,
+    marginBottom: vars.marginBottom,
+    borderRadius: vars.radius,
+    position: "relative",
+    display: "inline-block",
+    overflow: "hidden",
+    backgroundColor: themeVars.color.gray[200],
+});
+
+const shineAnimation = "skeleton-shine-animation";
+globalKeyframes(shineAnimation, {
+    'from': {
+        transform: 'translate(-37.5%)',
+    },
+    'to': {
+        transform: 'translate(37.5%)'
+    }
+});
+
+export const loading = style({
+    selectors: {
+        ['&::after']: {
+            content: '',
+            position: 'absolute',
+            pointerEvents: 'none',
+            inset: '0 -150%',
+            backgroundImage: `linear-gradient(to right,transparent 25%,${themeVars.color.gray[100]} 37%,transparent 63%)`,
+            animation: `${shineAnimation} 2s ${themeVars.transition.default} infinite`
+        }
+    }
 });

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

@@ -1,2 +1,2 @@
-export {assignInlineVars} from '@vanilla-extract/dynamic';
+export {assignInlineVars} from '@vanilla-extract/dynamic';
 export * from './Skeleton.css';

package/src/components/slider/Slider.vue

@@ -1,76 +1,76 @@
-<template>
-    <div :class="style.slider">
-        <div :class="style.sliderTransparent">
-            <div ref="slider" @mousedown="handleMouseDown" :class="style.sliderBar" :style="{ background: background }">
-            </div>
-        </div>
-        
-        <div style="position: absolute; inset: 0px 9px;"  @mousedown="handleMouseDown">
-            <div draggable :class="style.hueSliderThumb" @mousedown="handleMouseDown" :style="{ left: `${modelValue}%` }"></div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { watch } from "vue";
-import { defineComponent, ref } from 'vue';
-import * as style from './style';
-import { useMouseInElement, useMousePressed } from '@vueuse/core';
-
-export default defineComponent({
-    name: "MSlider",
-    props: {
-        modelValue: {
-            type: Number,
-            required: true
-        },
-        background: {
-            type: String,
-            default: ""
-        }
-    },
-    components: {},
-    emits: ['update:modelValue'],
-    setup(props, { emit }) {
-        const slider = ref<HTMLElement>();
-
-        const { elementX } = useMouseInElement(slider);
-        const { pressed } = useMousePressed();
-
-        watch(() => pressed.value, () => {
-            if (!pressed.value) {
-                dragging.value = false;
-            }
-        });
-
-        watch(() => elementX.value, () => {
-            if (!dragging.value) {
-                return;
-            }
-
-            setThumbPosition();
-        });
-
-
-        const dragging = ref(false);
-
-        const setThumbPosition = () => {
-            emit('update:modelValue',  ((Math.min(Math.max(elementX.value, 0), slider.value?.clientWidth || 0) / (slider.value?.clientWidth || 0)) * 100));
-        };
-
-        const handleMouseDown = () => {
-            dragging.value = true;
-            setThumbPosition();
-        };
-
-        return {
-            setThumbPosition,
-            elementX,
-            pressed,
-            handleMouseDown,
-            slider,
-            style,
-        };
-    }
-})
-</script>
+<template>
+    <div :class="style.slider">
+        <div :class="style.sliderTransparent">
+            <div ref="slider" @mousedown="handleMouseDown" :class="style.sliderBar" :style="{ background: background }">
+            </div>
+        </div>
+        
+        <div style="position: absolute; inset: 0px 9px;"  @mousedown="handleMouseDown">
+            <div draggable :class="style.hueSliderThumb" @mousedown="handleMouseDown" :style="{ left: `${modelValue}%` }"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { watch } from "vue";
+import { defineComponent, ref } from 'vue';
+import * as style from './style';
+import { useMouseInElement, useMousePressed } from '@vueuse/core';
+
+export default defineComponent({
+    name: "MSlider",
+    props: {
+        modelValue: {
+            type: Number,
+            required: true
+        },
+        background: {
+            type: String,
+            default: ""
+        }
+    },
+    components: {},
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+        const slider = ref<HTMLElement>();
+
+        const { elementX } = useMouseInElement(slider);
+        const { pressed } = useMousePressed();
+
+        watch(() => pressed.value, () => {
+            if (!pressed.value) {
+                dragging.value = false;
+            }
+        });
+
+        watch(() => elementX.value, () => {
+            if (!dragging.value) {
+                return;
+            }
+
+            setThumbPosition();
+        });
+
+
+        const dragging = ref(false);
+
+        const setThumbPosition = () => {
+            emit('update:modelValue',  ((Math.min(Math.max(elementX.value, 0), slider.value?.clientWidth || 0) / (slider.value?.clientWidth || 0)) * 100));
+        };
+
+        const handleMouseDown = () => {
+            dragging.value = true;
+            setThumbPosition();
+        };
+
+        return {
+            setThumbPosition,
+            elementX,
+            pressed,
+            handleMouseDown,
+            slider,
+            style,
+        };
+    }
+})
+</script>

package/src/components/slider/style/Slider.css.ts

@@ -1,43 +1,43 @@
-import { createVar, globalKeyframes, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-
-export const slider = style({
-    userSelect: 'none',
-    position: 'relative',
-    height: '14px',
-});
-
-export const sliderTransparent = style({
-    userSelect: 'none',
-    position: 'absolute',
-    height: '14px',
-    backgroundImage: 'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
-    backgroundSize: '14px 14px',
-    backgroundPosition: '0 0, 0 7px, 7px -7px, -7px 0px',
-    overflow: 'hidden',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: '6px'
-});
-
-export const sliderBar = style({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-});
-
-export const hueSliderThumb = style({
-    transform: 'translate(-50%)',
-    position: 'absolute',
-    top: '-2px',
-    width: '18px',
-    height: '18px',
-    borderRadius: '50%',
-    backgroundColor: 'rgba(255,255,255,0.5)',
-    border: '2px solid white',
-    boxShadow: '0 0 3px rgba(0, 0, 0, 1)',
-    cursor: 'e-resize',
+import { createVar, globalKeyframes, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+
+export const slider = style({
+    userSelect: 'none',
+    position: 'relative',
+    height: '14px',
+});
+
+export const sliderTransparent = style({
+    userSelect: 'none',
+    position: 'absolute',
+    height: '14px',
+    backgroundImage: 'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
+    backgroundSize: '14px 14px',
+    backgroundPosition: '0 0, 0 7px, 7px -7px, -7px 0px',
+    overflow: 'hidden',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: '6px'
+});
+
+export const sliderBar = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+});
+
+export const hueSliderThumb = style({
+    transform: 'translate(-50%)',
+    position: 'absolute',
+    top: '-2px',
+    width: '18px',
+    height: '18px',
+    borderRadius: '50%',
+    backgroundColor: 'rgba(255,255,255,0.5)',
+    border: '2px solid white',
+    boxShadow: '0 0 3px rgba(0, 0, 0, 1)',
+    cursor: 'e-resize',
 });

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

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