@teammodlr/ui-kit 2.1.41 → 2.1.43

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

@@ -1,61 +1,61 @@
-<template>
-    <MTable 
-        :headers="headers"
-        :items="items"
-        @onClick="handleClick"
-    >
-        <template #actions="{ item, onHover }">
-            {{ onHover }}
-            <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: "ID",
-        key: "id",
-        width: 50
-    },
-    {
-        name: "Name",
-        key: "name",
-        width: 200
-    },
-    {
-        name: "Age",
-        key: "age",
-    },
-    {
-        name: "Actions",
-        key: "actions",
-        align: "right"
-    }
-]);
-
-let items = [
-    ...Array.from({ length: 30 }, (v, i) => ({
-        id: i,
-        name: "John Doe",
-        age: 4
-    }))
-];
-
-const handleClick = (item: any) => {
-    console.log(item);
-}
-</script>
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+        @onClick="handleClick"
+    >
+        <template #actions="{ item, onHover }">
+            {{ onHover }}
+            <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: "ID",
+        key: "id",
+        width: 50
+    },
+    {
+        name: "Name",
+        key: "name",
+        width: 200
+    },
+    {
+        name: "Age",
+        key: "age",
+    },
+    {
+        name: "Actions",
+        key: "actions",
+        align: "right"
+    }
+]);
+
+let items = [
+    ...Array.from({ length: 30 }, (v, i) => ({
+        id: i,
+        name: "John Doe",
+        age: 4
+    }))
+];
+
+const handleClick = (item: any) => {
+    console.log(item);
+}
+</script>

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.ts

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

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

@@ -1,68 +1,68 @@
-<template>
-    <MTable 
-        :headers="headers"
-        :items="items"
-        @onClick="handleClick"
-        v-model="selected"
-    >
-        <template #name-header="{ item }">
-            Custom header slot if need be
-        </template>
-        <template #actions="{ item, onHover }">
-            {{ onHover }}
-            <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: "ID",
-        key: "id",
-        width: 50
-    },
-    {
-        name: "Name",
-        key: "name",
-        width: 200
-    },
-    {
-        name: "Age",
-        key: "age",
-    },
-    {
-        name: "Actions",
-        key: "actions",
-        align: "right"
-    }
-]);
-
-let items = [
-    ...Array.from({ length: 30 }, (v, i) => ({
-        id: i,
-        name: "John Doe",
-        age: 4
-    }))
-];
-
-let selected = ref([items[0]]);
-
-const handleClick = (item: any) => {
-    console.log(item);
-}
-
-</script>
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+        @onClick="handleClick"
+        v-model="selected"
+    >
+        <template #name-header="{ item }">
+            Custom header slot if need be
+        </template>
+        <template #actions="{ item, onHover }">
+            {{ onHover }}
+            <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: "ID",
+        key: "id",
+        width: 50
+    },
+    {
+        name: "Name",
+        key: "name",
+        width: 200
+    },
+    {
+        name: "Age",
+        key: "age",
+    },
+    {
+        name: "Actions",
+        key: "actions",
+        align: "right"
+    }
+]);
+
+let items = [
+    ...Array.from({ length: 30 }, (v, i) => ({
+        id: i,
+        name: "John Doe",
+        age: 4
+    }))
+];
+
+let selected = ref([items[0]]);
+
+const handleClick = (item: any) => {
+    console.log(item);
+}
+
+</script>

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

@@ -1,62 +1,62 @@
-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[75]
-});
-
-globalStyle(`${table} th`, {
-    height: vars.headerHeight,
-    padding: vars.cellPadding,
-    textAlign: 'left',
-    backgroundColor: themeVars.color.gray[100],
-    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
-    color: themeVars.color.gray[600],
-    fontWeight: 500,
-    fontSize: themeVars.fontSize.base,
-    marginBottom: '5px'
-});
-
-globalStyle(`${table} td`, {
-    padding: vars.cellPadding,
-    textAlign: 'left',
-    color: themeVars.color.gray[900],
-    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
-    fontWeight: 400,
-    transition: `background-color 0.2s ${themeVars.transition.default}`
-});
-
-globalStyle(`${hoverable} tr:hover td`, {
-    backgroundColor: themeVars.color.gray[100]
-});
+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[75]
+});
+
+globalStyle(`${table} th`, {
+    height: vars.headerHeight,
+    padding: vars.cellPadding,
+    textAlign: 'left',
+    backgroundColor: themeVars.color.gray[100],
+    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
+    color: themeVars.color.gray[600],
+    fontWeight: 500,
+    fontSize: themeVars.fontSize.base,
+    marginBottom: '5px'
+});
+
+globalStyle(`${table} td`, {
+    padding: vars.cellPadding,
+    textAlign: 'left',
+    color: themeVars.color.gray[900],
+    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
+    fontWeight: 400,
+    transition: `background-color 0.2s ${themeVars.transition.default}`
+});
+
+globalStyle(`${hoverable} tr:hover td`, {
+    backgroundColor: themeVars.color.gray[100]
+});

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

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

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,72 +1,72 @@
-<template>
-    <div :class="computedClasses">
-        <span>
-            <slot />
-        </span>
-        <button
-            v-if="closeable"
-            @mousedown.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: (event: MouseEvent) => true
-    },
-    setup(props, { emit }) {
-        const computedClasses = computed(() => {
-            return [style.base];
-        });
-
-        const close = (event: MouseEvent) => {
-            emit('close', event);
-        };
-
-        return {
-            computedClasses,
-            close,
-            style
-        };
-    }
-});
-</script>
+<template>
+    <div :class="computedClasses">
+        <span>
+            <slot />
+        </span>
+        <button
+            v-if="closeable"
+            @mousedown.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: (event: MouseEvent) => true
+    },
+    setup(props, { emit }) {
+        const computedClasses = computed(() => {
+            return [style.base];
+        });
+
+        const close = (event: MouseEvent) => {
+            emit('close', event);
+        };
+
+        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.ts

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