@teammodlr/ui-kit 2.0.21 → 2.0.23

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/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/table/Table.vue

@@ -33,9 +33,12 @@
                         </slot>
                     </TableCell>
                 </TableRow>
-                <tr :colspan="headers.length" v-if="items.length === 0">
+                <tr v-if="items.length === 0" :colspan="headers.length">
                     <slot name="empty" />
                 </tr>
+                <tr v-if="loading" :colspan="headers.length">
+                    <slot name="loading" />
+                </tr>
             </TableBody>
         </table>
     </div>

package/src/components/table/style/Table.css.ts

@@ -1,81 +1,81 @@
-import { createVar, globalKeyframes, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-
-export const wrapper = style({
-    width: "100%",
-    overflow: "auto",
-});
-
-const vars = {
-    headerHeight: createVar(),
-    cellPadding: createVar(),
-    fontSize: createVar()
-}
-
-export const table = style({
-    vars: {
-        [vars.headerHeight]: "44px",
-        [vars.cellPadding]: "8px 14px",
-        [vars.fontSize]: themeVars.fontSize.base,
-    },
-    width: "100%",
-    borderCollapse: "collapse",
-    fontSize: vars.fontSize
-});
-
-export const hoverable = style({});
-export const striped = style({});
-
-globalStyle(`${striped} tbody tr:nth-child(even)`, {
-    backgroundColor: themeVars.color.gray[100],
-});
-
-globalStyle(`${table} tbody:before`, {
-    content:"@",
-    display:"block",
-    lineHeight:"5px",
-    textIndent:"-99999px"
-});
-
-globalStyle(`${table} th`, {
-    height: vars.headerHeight,
-    padding: vars.cellPadding,
-    textAlign: "left",
-    backgroundColor: themeVars.color.gray[200],
-    color: themeVars.color.gray[700],
-    fontWeight: 500,
-    fontSize: themeVars.fontSize.base,
-    marginBottom: "5px"
-});
-
-// round first and last cells
-globalStyle(`${table} th:first-child`, {
-    borderTopLeftRadius: themeVars.rounded.medium,
-    borderBottomLeftRadius: themeVars.rounded.medium,
-});
-
-globalStyle(`${table} th:last-child`, {
-    borderTopRightRadius: themeVars.rounded.medium,
-    borderBottomRightRadius: themeVars.rounded.medium,
-});
-
-globalStyle(`${table} td:first-child`, {
-    borderTopLeftRadius: themeVars.rounded.medium,
-    borderBottomLeftRadius: themeVars.rounded.medium,
-});
-
-globalStyle(`${table} td:last-child`, {
-    borderTopRightRadius: themeVars.rounded.medium,
-    borderBottomRightRadius: themeVars.rounded.medium,
-});
-
-globalStyle(`${table} td`, {
-    padding: vars.cellPadding,
-    textAlign: "left",
-    color: themeVars.color.gray[900],
-    fontWeight: 400,
-});
-
-globalStyle(`${hoverable} tr:hover td`, {
-    backgroundColor: themeVars.color.gray[150],
+import { createVar, globalKeyframes, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+export const wrapper = style({
+    width: "100%",
+    overflow: "auto",
+});
+
+const vars = {
+    headerHeight: createVar(),
+    cellPadding: createVar(),
+    fontSize: createVar()
+}
+
+export const table = style({
+    vars: {
+        [vars.headerHeight]: "44px",
+        [vars.cellPadding]: "8px 14px",
+        [vars.fontSize]: themeVars.fontSize.base,
+    },
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: vars.fontSize
+});
+
+export const hoverable = style({});
+export const striped = style({});
+
+globalStyle(`${striped} tbody tr:nth-child(even)`, {
+    backgroundColor: themeVars.color.gray[100],
+});
+
+globalStyle(`${table} tbody:before`, {
+    content:"@",
+    display:"block",
+    lineHeight:"5px",
+    textIndent:"-99999px"
+});
+
+globalStyle(`${table} th`, {
+    height: vars.headerHeight,
+    padding: vars.cellPadding,
+    textAlign: "left",
+    backgroundColor: themeVars.color.gray[200],
+    color: themeVars.color.gray[700],
+    fontWeight: 500,
+    fontSize: themeVars.fontSize.base,
+    marginBottom: "5px"
+});
+
+// round first and last cells
+globalStyle(`${table} th:first-child`, {
+    borderTopLeftRadius: themeVars.rounded.medium,
+    borderBottomLeftRadius: themeVars.rounded.medium,
+});
+
+globalStyle(`${table} th:last-child`, {
+    borderTopRightRadius: themeVars.rounded.medium,
+    borderBottomRightRadius: themeVars.rounded.medium,
+});
+
+globalStyle(`${table} td:first-child`, {
+    borderTopLeftRadius: themeVars.rounded.medium,
+    borderBottomLeftRadius: themeVars.rounded.medium,
+});
+
+globalStyle(`${table} td:last-child`, {
+    borderTopRightRadius: themeVars.rounded.medium,
+    borderBottomRightRadius: themeVars.rounded.medium,
+});
+
+globalStyle(`${table} td`, {
+    padding: vars.cellPadding,
+    textAlign: "left",
+    color: themeVars.color.gray[900],
+    fontWeight: 400,
+});
+
+globalStyle(`${hoverable} tr:hover td`, {
+    backgroundColor: themeVars.color.gray[150],
 });

package/src/components/textarea/TextArea.css

@@ -0,0 +1,173 @@
+.m-textarea__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.m-textarea {
+    --textarea-height: 40px;
+    --textarea-padding: 0 8px;
+    --textarea-font-size: 15px;
+    --textarea-border-radius: 4px;
+    --textarea-clear-size: 1.2rem;
+    --textarea-background-color: var(--white);
+    --textarea-border-color: var(--gray-200);
+
+    position: relative;
+    display: block;
+    align-items: center;
+    height: var(--textarea-height);
+    font-size: var(--textarea-font-size);
+    background-color: var(--textarea-background-color);
+    border: 1px solid var(--textarea-border-color);
+    box-shadow: none;
+    border-radius: var(--textarea-border-radius);
+    outline: 0;
+    cursor: text;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-textarea.m-textarea--disabled {
+    --textarea-border-color: var(--gray-300);
+    --textarea-background-color: var(--gray-100);
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.m-textarea.m-textarea--disabled textarea {
+    cursor: not-allowed;
+}
+
+.m-textarea:not(.m-textarea--disabled):focus-within {
+    --textarea-border-color: var(--blue);
+    box-shadow: 0 0 0 2px var(--blue-outline);
+}
+
+.m-textarea:not(.m-textarea--disabled):not(:focus-within):hover {
+    --textarea-border-color: var(--gray-400);
+}
+
+.m-textarea textarea {
+    flex: 1 0 0;
+    min-width: 0;
+    height: 100%;
+    padding: var(--textarea-padding);
+    font-size: inherit;
+    color: var(--gray-600);
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    border-radius: var(--textarea-border-radius);
+}
+
+.m-textarea__clearable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+}
+
+.m-textarea .m-textarea__clearable i.m-icon--close {
+    cursor: pointer;
+    width: var(--textarea-clear-size);
+    height: var(--textarea-clear-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    color: var(--gray-500);
+    background-color: transparent;
+    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-textarea .m-textarea__clearable i.m-icon--close:hover {
+    color: var(--gray-500);
+    background-color: var(--gray-150);
+}
+
+.m-textarea i.m-icon--close::before {
+    --close-icon-size: 16px;
+    background-color: currentColor;
+    content: "";
+    width: var(--close-icon-size);
+    height: var(--close-icon-size);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    -webkit-mask-position: center center;
+    mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
+    mask-size: var(--close-icon-size) var(--close-icon-size);
+}
+
+.m-textarea--xs {
+    --textarea-height: 32px;
+    --textarea-padding: 0 8px;
+    --textarea-font-size: 13px;
+    --textarea-border-radius: 4px;
+    --textarea-clear-size: 1.2rem;
+}
+
+.m-textarea--sm {
+    --textarea-height: 36px;
+    --textarea-padding: 0 8px;
+    --textarea-font-size: 14px;
+    --textarea-border-radius: 4px;
+    --textarea-clear-size: 1.2rem;
+}
+
+.m-textarea--md {
+    --textarea-height: 40px;
+    --textarea-padding: 0 8px;
+    --textarea-font-size: 15px;
+    --textarea-border-radius: 4px;
+    --textarea-clear-size: 1.2rem;
+}
+
+.m-textarea--lg {
+    --textarea-height: 42px;
+    --textarea-padding: 0 8px;
+    --textarea-font-size: 16px;
+    --textarea-border-radius: 4px;
+    --textarea-clear-size: 1.2rem;
+}
+
+.m-textarea--xl {
+    --textarea-height: 46px;
+    --textarea-padding: 0 8px;
+    --textarea-font-size: 18px;
+    --textarea-border-radius: 6px;
+    --textarea-clear-size: 1.2rem;
+}
+
+.m-textarea__label {
+    margin-bottom: 5px;
+    color: var(--gray-600);
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.m-textarea__help {
+    margin-top: 4px;
+    color: var(--gray-500);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-textarea__error {
+    margin: 4px 0 8px 0;
+    color: var(--red);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-form .m-form__textarea {
+    margin-bottom: 16px;
+}
+
+.m-form .m-form__textarea .m-textarea__error {
+    margin: 4px 0 0 0;
+}
+