@teammodlr/ui-kit 2.0.29 → 2.0.31

package/src/components/tag/Tag.vue

@@ -1,66 +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>
+<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

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

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

@@ -1,22 +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);
+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

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

package/src/components/tag/style/Tag.css.ts

@@ -1,79 +1,79 @@
-import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-import { fonts } from "../../../styles/typography.css";
-
-const sizes = {
-    xs: '18px',
-    sm: '22px',
-    md: '26px',
-    lg: '30px',
-    xl: '34px',
-};
-
-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(),
-};
-
-export const base = style({
-    vars: {
-        [vars.height]: sizes.md,
-        [vars.radius]: borderRadiuses.md,
-        [vars.paddingX]: themeVars.space[1.5],
-        [vars.paddingY]: themeVars.space[0],
-        [vars.borderColor]: themeVars.color.gray[100],
-        [vars.color]: themeVars.color.gray[700],
-        [vars.backgroundColor]: themeVars.color.gray[100],
-    },
-    height: vars.height,
-    minHeight: vars.height,
-    lineHeight: vars.height,
-    borderRadius: vars.radius,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    color: vars.color,
-    borderColor: vars.borderColor,
-    backgroundColor: vars.backgroundColor,
-    padding: `${vars.paddingY} ${vars.paddingX}`,
-    wordBreak: 'break-word',
-    fontSize: themeVars.fontSize.base,
-    display: 'inline-flex',
-    alignItems: 'center',
-});
-
-export const close = style({
-    marginLeft: themeVars.space[1],
-    appearance: 'none',
-    outline: 'none',
-    border: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    backgroundColor: 'transparent',
-    padding: '3px',
-    position: 'relative',
-    right: '-2px',
-    color: themeVars.color.gray[500],
-    borderRadius: '50%',
-    ':hover': {
-        backgroundColor: themeVars.color.gray[200],
-        color: themeVars.color.gray[700],
-    },
-    ':focus': {
-        outline: 'none'
-    }
-})
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts } from "../../../styles/typography.css";
+
+const sizes = {
+    xs: '18px',
+    sm: '22px',
+    md: '26px',
+    lg: '30px',
+    xl: '34px',
+};
+
+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(),
+};
+
+export const base = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: borderRadiuses.md,
+        [vars.paddingX]: themeVars.space[1.5],
+        [vars.paddingY]: themeVars.space[0],
+        [vars.borderColor]: themeVars.color.gray[100],
+        [vars.color]: themeVars.color.gray[700],
+        [vars.backgroundColor]: themeVars.color.gray[100],
+    },
+    height: vars.height,
+    minHeight: vars.height,
+    lineHeight: vars.height,
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    color: vars.color,
+    borderColor: vars.borderColor,
+    backgroundColor: vars.backgroundColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    wordBreak: 'break-word',
+    fontSize: themeVars.fontSize.base,
+    display: 'inline-flex',
+    alignItems: 'center',
+});
+
+export const close = style({
+    marginLeft: themeVars.space[1],
+    appearance: 'none',
+    outline: 'none',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    padding: '3px',
+    position: 'relative',
+    right: '-2px',
+    color: themeVars.color.gray[500],
+    borderRadius: '50%',
+    ':hover': {
+        backgroundColor: themeVars.color.gray[200],
+        color: themeVars.color.gray[700],
+    },
+    ':focus': {
+        outline: 'none'
+    }
+})

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

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