@teammodlr/ui-kit 1.0.6 → 2.0.0

package/src/components/select/style/Select.css.ts

@@ -0,0 +1,254 @@
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts } from "../../../styles/typography.css";
+
+const sizes = {
+    xs: '26px',
+    sm: '30px',
+    md: '38px',
+    lg: '42px',
+    xl: '48px',
+};
+
+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(),
+    cursor: createVar(),
+    optionColor: createVar(),
+    optionBackgroundColor: createVar(),
+}
+
+export const wrapper = style({
+    position: 'relative',
+    outline: 'none',
+
+});
+
+export const base = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: borderRadiuses.md,
+        [vars.paddingX]: themeVars.space[2],
+        [vars.paddingY]: themeVars.space[0],
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: themeVars.color.gray[900],
+        [vars.backgroundColor]: '#FFFFFF',
+        [vars.cursor]: 'text',
+    },
+    height: vars.height,
+    minHeight: vars.height,
+    width: '100%',
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: vars.borderColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    fontSize: themeVars.fontSize.base,
+    display: 'block',
+    textAlign: 'left',
+    appearance: 'none',
+    lineHeight: vars.height,
+    boxSizing: 'border-box',
+    resize: 'none',
+    boxShadow: 'none',
+    transition: `color .3s ${themeVars.transition.default},
+        background-color .3s ${themeVars.transition.default},
+        box-shadow .3s ${themeVars.transition.default},
+        border-color .3s ${themeVars.transition.default}`,
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[400],
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[500],
+        },
+        outline: 'none',
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+    }
+});
+
+export const selectedTags = style({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: themeVars.space[1],
+});
+
+export const block = style({
+    width: '100%',
+});
+
+export const disabled = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.gray[200],
+        [vars.color]: themeVars.color.gray[500],
+        [vars.backgroundColor]: themeVars.color.gray[50],
+        [vars.cursor]: 'not-allowed',
+    },
+    ':focus': {
+        boxShadow: 'none',
+    },
+    ':hover': {
+        cursor: 'not-allowed',
+    }
+});
+
+export const label = style({
+    fontVariationSettings: `"wght" ${fonts.INTER.wghts[500]}`,
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer',
+    marginBottom: themeVars.space[1],
+});
+
+export const description = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray[600],
+    lineHeight: themeVars.fontSize.large,
+    wordBreak: 'break-word',
+    marginBottom: themeVars.space[1.5],
+});
+
+export const errorMessage = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.red[600],
+    wordBreak: 'break-word',
+    marginTop: themeVars.space[1.5],
+});
+
+export const error = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.red[500],
+    },
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+    ':focus': {
+        boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+});
+
+export const rightIcon = style({
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "2.25rem",
+    color: themeVars.color.gray[400],
+});
+
+export const hasRightIcon = style({
+    paddingRight: "2.25rem",
+});
+
+export const menu = style({
+    backgroundColor: "#FFFFFF",
+    borderRadius: "4px",
+    zIndex: 4000,
+    border: `1px solid ${themeVars.color.gray[200]}`,
+    boxShadow: themeVars.shadow.md,
+    maxHeight: "230px",
+    overflowY: "auto",
+});
+
+export const placeholder = style({
+    userSelect: "none",
+    color: themeVars.color.gray[500],
+})
+
+export const search = style({
+    padding: `${themeVars.space[1]} ${themeVars.space[1]} 0`,
+    backgroundColor: '#FFFFFF',
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
+});
+
+export const options = style({
+    padding: themeVars.space[1],
+    display: 'flex',
+    flexDirection: 'column',
+    gap: themeVars.space[0.5],
+});
+
+export const option = style({
+    vars: {
+        [vars.optionColor]: themeVars.color.gray[800],
+        [vars.optionBackgroundColor]: '#FFFFFF',
+    },
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    minHeight: "36px",
+    fontSize: themeVars.fontSize.base,
+    paddingBlock: themeVars.space['1.5'],
+    paddingInline: themeVars.space['3'],
+    gap: themeVars.space[2],
+    color: vars.optionColor,
+    transition: "background-color 0.05s ease-in-out",
+    backgroundColor: vars.optionBackgroundColor,
+    borderRadius: borderRadiuses.md,
+    ':hover': {
+        vars: {
+            [vars.optionColor]: themeVars.color.gray[800],
+            [vars.optionBackgroundColor]: themeVars.color.gray[100],
+        },
+    }
+});
+
+export const optionFocused = style({
+    vars: {
+        [vars.optionColor]: themeVars.color.gray[800],
+        [vars.optionBackgroundColor]: themeVars.color.gray[100],
+    },
+    ':hover': {
+        vars: {
+            [vars.optionColor]: themeVars.color.gray[800],
+            [vars.optionBackgroundColor]: themeVars.color.gray[100],
+        },
+    }
+});
+
+export const optionSelected = style({
+    vars: {
+        [vars.optionColor]: themeVars.color.blue[50],
+        [vars.optionBackgroundColor]: themeVars.color.blue[500],
+    },
+    ':hover': {
+        vars: {
+            [vars.optionColor]: themeVars.color.blue[50],
+            [vars.optionBackgroundColor]: themeVars.color.blue[600],
+        },
+    }
+});

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

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

package/src/components/skeleton/Skeleton.vue

@@ -1,47 +1,55 @@
-<template>
-    <component 
-        :is="tag"
-        :class="computedClasses"
-    >
-        &nbsp;
-    </component>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-
-export default defineComponent({
-    name: "MSkeleton",
-    props: {
-        tag: {
-            type: String,
-            default: "div"
-        },
-        variant: {
-            type: String,
-            default: "line",
-            validator: (value: string) => {
-                return ["block", "thumb", "heading", "line", "circle"].includes(value);
-            }
-        },
-        animation: {
-            type: String,
-            default: "pulse"
-        }
-    },
-    setup(props) {
-
-        const computedClasses = computed(() => {
-            return {
-                "m-skeleton": true,
-                [`m-skeleton--${props.variant}`]: true,
-                [`m-skeleton--${props.animation}`]: true
-            }
-        });
-
-        return {
-            computedClasses
-        }
-    }
-})
-</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/index.stories.ts

@@ -1,4 +1,4 @@
-import { createStory } from "@/__storybook__";
+import { createStory } from "../../../__storybook__";
 import MSkeleton from "../Skeleton.vue";
 
 import {
@@ -10,13 +10,6 @@ export default {
     component: MSkeleton,
     title: 'Components/Skeleton',
     argTypes: {
-        variant: {
-            options: ['thumb', 'line', 'circle', 'block'],
-            control: {
-                type: 'select',
-                
-            }
-        }
     }
 }
 

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

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

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

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

package/src/components/slider/Slider.vue

@@ -0,0 +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>

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

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

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

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

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

@@ -8,7 +8,7 @@ import {
 import {
     createStory,
     sizeArgType
-} from "@/__storybook__";
+} from "../../../__storybook__";
 
 export default {
     component: MTabGroup,

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

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

package/src/components/tag/Tag.vue

@@ -0,0 +1,66 @@
+<template>
+    <div :class="computedClasses">
+        <span>
+            <slot />
+        </span>
+        <button v-if="closeable" @click.stop="close" :class="style.close" tabindex="0">
+            <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width: 1em; height: 1em;">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g fill="currentColor" fill-rule="nonzero">
+                        <path
+                            d="M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z">
+                        </path>
+                    </g>
+                </g>
+            </svg>
+
+        </button>
+    </div>
+</template>
+
+<script lang="ts">
+import type { Color, Size } from "../../types/props";
+import { computed, defineComponent, type PropType } from "vue";
+import * as style from "./style";
+
+export default defineComponent({
+    name: "MTag",
+    props: {
+        color: {
+            type: String as PropType<Color>,
+            default: "primary",
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: "md",
+        },
+        closeable: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ['close'],
+    setup(props, { emit }) {
+        const computedClasses = computed(() => {
+            return [
+                style.base
+            ];
+            return {
+                "m-tag": true,
+                [`m-tag--${props.color}`]: true,
+                [`m-tag--${props.size}`]: true,
+            };
+        });
+
+        const close = () => {
+            emit('close')
+        }
+
+        return {
+            computedClasses,
+            close,
+            style
+        };
+    }
+})
+</script>

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

@@ -0,0 +1,5 @@
+<template>
+    <MTag>
+        hi
+    </MTag>
+</template>

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

@@ -0,0 +1,22 @@
+import MTag from "../Tag.vue";
+
+import {
+    MTagBasic,
+} from "./index";
+
+import {
+    colorArgType,
+    createStory,
+    sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MTag,
+    title: 'Components/Tag',
+    argTypes: {
+        ...colorArgType(),
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MTagBasic);

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

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