@teammodlr/ui-kit 2.0.25 → 2.0.27

package/src/components/table/examples/empty.vue

@@ -1,44 +1,44 @@
-<template>
-    <MTable 
-        :headers="headers"
-        :items="items"
-    >
-        <template #actions="{ item }">
-            <MButton
-                color="blue"
-                secondary
-                size="sm"
-            >
-                Edit - {{ item.name }}
-            </MButton>
-        </template>
-
-        <template #empty>
-            Nothing here
-        </template>
-    </MTable>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import type { TableHeadItem } from "../types";
-
-let headers = ref<TableHeadItem[]>([
-    {
-        name: "Name",
-        key: "name",
-        width: 500
-    },
-    {
-        name: "Age",
-        key: "age",
-    },
-    {
-        name: "Actions",
-        key: "actions",
-        align: "right"
-    }
-]);
-
-let items = ref([]);
-</script>
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+    >
+        <template #actions="{ item }">
+            <MButton
+                color="blue"
+                secondary
+                size="sm"
+            >
+                Edit - {{ item.name }}
+            </MButton>
+        </template>
+
+        <template #empty>
+            Nothing here
+        </template>
+    </MTable>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { TableHeadItem } from "../types";
+
+let headers = ref<TableHeadItem[]>([
+    {
+        name: "Name",
+        key: "name",
+        width: 500
+    },
+    {
+        name: "Age",
+        key: "age",
+    },
+    {
+        name: "Actions",
+        key: "actions",
+        align: "right"
+    }
+]);
+
+let items = ref([]);
+</script>

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

@@ -1,20 +1,20 @@
-import MTable from "../Table.vue";
-import MButton from "../../button/Button.vue";
-import {
-    MTableBasic, MTableEmpty
-} from "./index";
-
-import {
-    createStory
-} from "../../../__storybook__";
-
-export default {
-    component: MTable,
-    subcomponents: {
-        MButton
-    },
-    title: 'Components/Table',
-}
-
-export const Basic = createStory(MTableBasic);
-export const Empty = createStory(MTableEmpty);
+import MTable from "../Table.vue";
+import MButton from "../../button/Button.vue";
+import {
+    MTableBasic, MTableEmpty
+} from "./index";
+
+import {
+    createStory
+} from "../../../__storybook__";
+
+export default {
+    component: MTable,
+    subcomponents: {
+        MButton
+    },
+    title: 'Components/Table',
+}
+
+export const Basic = createStory(MTableBasic);
+export const Empty = createStory(MTableEmpty);

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

@@ -1,2 +1,2 @@
-export { default as MTableBasic } from './basic.vue';
-export { default as MTableEmpty } from './empty.vue';
+export { default as MTableBasic } from './basic.vue';
+export { default as MTableEmpty } from './empty.vue';

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/table/types/index.ts

@@ -1,6 +1,6 @@
-export type TableHeadItem = {
-    key: string;
-    name?: string;
-    width?: string | number;
-    align?: 'left' | 'center' | 'right';
-}
+export type TableHeadItem = {
+    key: string;
+    name?: string;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+}

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';