@teammodlr/ui-kit 2.0.28 → 2.0.30

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,72 @@
-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(),
+    startColor: createVar(),
+    endColor: createVar(),
+};
+
+export const base = style({
+    vars: {
+        [vars.width]: '100%',
+        [vars.height]: '1em',
+        [vars.marginBottom]: themeVars.space[2],
+        [vars.radius]: borderRadiuses.md,
+        [vars.startColor]: themeVars.color.gray[200],
+        [vars.endColor]: themeVars.color.gray[100],
+    },
+    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, {
+    '0%': {
+        background: themeVars.color.gray[200],
+    },
+    '40%': {
+        background: themeVars.color.gray[100],
+    },
+    '80%': {
+        background: themeVars.color.gray[200],
+    },
+    '100%': {
+        background: themeVars.color.gray[200],
+    }
+});
+
+export const loading = style({
+    selectors: {
+        ['&::after']: {
+            content: '',
+            position: 'absolute',
+            pointerEvents: 'none',
+            inset: '0',
+            
+            // backgroundImage: `linear-gradient(to right,transparent 25%,${themeVars.color.gray[100]} 37%,transparent 63%)`,
+            backgroundColor: themeVars.color.gray[100],
+            transition: `${vars.startColor} .3s ease-in-out,
+                          ${vars.endColor} .3s ease-in-out,
+                          background-color .3s ease-in-out`,
+            animation: `${shineAnimation} 1.5s cubic-bezier(0.36, 0, 0.64, 1) 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';

package/src/components/{toggle/Toggle.vue → switch/Switch.vue}

@@ -1,132 +1,132 @@
-<template>
-    <label :class="style.base" @click.prevent="toggle">
-        <input v-model="checked" type="checkbox" :aria-checked="checked ? 'true' : 'false'"
-            :aria-disabled="(disabled || loading) ? 'true' : 'false'" :aria-labelledby="`${id}-label`"
-            :disabled="disabled || loading" :name="name" :id="id" :class="style.input" v-bind="$attrs"
-            v-on="inputListeners" />
-
-        <span :class="classes">            
-        </span>
-
-        <span :class="style.label" :id="`${id}-label`">
-            <template v-if="hasSlot">
-                <slot />
-            </template>
-            <template v-else>
-                {{ label }}
-            </template>
-        </span>
-
-    </label>
-</template>
-
-
-<script lang="ts">
-import { computed, defineComponent, defineExpose, type PropType, ref, toRef, watch } from 'vue';
-import { useInput } from '../../composables/useInput';
-import { useInteractive } from "../../composables/useInteractive";
-import type { Size } from '../../types/props';
-import * as style from './style';
-
-export default defineComponent({
-    name: "Toggle",
-    emits: useInput.emits(),
-    props: {
-        ...useInput.props(),
-        ...useInteractive.props(),
-        label: {
-            type: String
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md',
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props, { slots, emit }) {
-        const toggleRef = ref<HTMLElement | null>(null);
-
-        const { focus, blur } = useInteractive(toggleRef);
-
-        const {
-            id,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            formError,
-            formDisabled,
-            formLoading,
-            inputListeners
-        } = useInput(props, { focus, emit });
-
-        const disabled = computed(() => formDisabled || props.disabled || props.loading);
-        const name = toRef(props, 'name');
-        const checked = ref(false);
-        const hasSlot = computed(() => !!(slots.default));
-
-        const classes = computed(() => {
-            return [
-                style.toggle,
-                [style.size[props.size]],
-                {
-                    [style.disabled]: disabled.value,
-                    [style.checked]: checked.value
-                }
-            ]
-        });
-
-        const inputError = computed(() => {
-            return formError.value || props.error;
-        });
-
-        watch(() => props.modelValue, (value) => {
-            checked.value = !!value;
-        }, { immediate: true });
-
-        watch(() => checked.value, (value) => {
-            emit('update:modelValue', value);
-        });
-
-        function toggle() {
-            if (disabled.value) {
-                return;
-            }
-            checked.value = !checked.value;
-        }
-
-        defineExpose({
-            focus,
-            blur,
-        })
-
-        return {
-            id,
-            formError,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            disabled,
-            name,
-            checked,
-            toggleRef,
-            inputError,
-            toggle,
-            style,
-            classes,
-            hasSlot,
-            inputListeners,
-            focus,
-            blur
-        }
-    }
-})
-</script>
+<template>
+    <label :class="style.base" @click.prevent="toggle">
+        <input v-model="checked" type="checkbox" :aria-checked="checked ? 'true' : 'false'"
+            :aria-disabled="(disabled || loading) ? 'true' : 'false'" :aria-labelledby="`${id}-label`"
+            :disabled="disabled || loading" :name="name" :id="id" :class="style.input" v-bind="$attrs"
+            v-on="inputListeners" />
+
+        <span :class="classes">            
+        </span>
+
+        <span :class="style.label" :id="`${id}-label`">
+            <template v-if="hasSlot">
+                <slot />
+            </template>
+            <template v-else>
+                {{ label }}
+            </template>
+        </span>
+
+    </label>
+</template>
+
+
+<script lang="ts">
+import { computed, defineComponent, defineExpose, type PropType, ref, toRef, watch } from 'vue';
+import { useInput } from '../../composables/useInput';
+import { useInteractive } from "../../composables/useInteractive";
+import type { Size } from '../../types/props';
+import * as style from './style';
+
+export default defineComponent({
+    name: "Switch",
+    emits: useInput.emits(),
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { slots, emit }) {
+        const toggleRef = ref<HTMLElement | null>(null);
+
+        const { focus, blur } = useInteractive(toggleRef);
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading,
+            inputListeners
+        } = useInput(props, { focus, emit });
+
+        const disabled = computed(() => formDisabled || props.disabled || props.loading);
+        const name = toRef(props, 'name');
+        const checked = ref(false);
+        const hasSlot = computed(() => !!(slots.default));
+
+        const classes = computed(() => {
+            return [
+                style.toggle,
+                [style.size[props.size]],
+                {
+                    [style.disabled]: disabled.value,
+                    [style.checked]: checked.value
+                }
+            ]
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        watch(() => props.modelValue, (value) => {
+            checked.value = !!value;
+        }, { immediate: true });
+
+        watch(() => checked.value, (value) => {
+            emit('update:modelValue', value);
+        });
+
+        function toggle() {
+            if (disabled.value) {
+                return;
+            }
+            checked.value = !checked.value;
+        }
+
+        defineExpose({
+            focus,
+            blur,
+        })
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            name,
+            checked,
+            toggleRef,
+            inputError,
+            toggle,
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur
+        }
+    }
+})
+</script>