@teammodlr/ui-kit 2.0.29 → 2.0.31

package/src/components/table/TableHead.vue

@@ -1,46 +1,46 @@
-<template>
-    <th :style="computedStyles">
-        <slot />
-    </th>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from "vue";
-
-export default defineComponent({
-    name: "TableHead",
-    props: {
-        sort: {
-            type: Number
-        },
-        sortable: {
-            type: Boolean,
-            default: false
-        },
-        width: {
-            type: [Number, String]
-        },
-    },
-    setup(props) {
-
-        const computedWidth = computed(() => {
-            if (isNaN(Number(props.width))) {
-                return props.width;
-            }
-
-            return `${props.width}px`;
-        });
-
-        const computedStyles = computed(() => {
-            // if string is passed, return it
-            return {
-                width: computedWidth.value
-            }            
-        });
-
-        return {
-            computedStyles
-        }
-    }
-});
-</script>
+<template>
+    <th :style="computedStyles">
+        <slot />
+    </th>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+export default defineComponent({
+    name: "TableHead",
+    props: {
+        sort: {
+            type: Number
+        },
+        sortable: {
+            type: Boolean,
+            default: false
+        },
+        width: {
+            type: [Number, String]
+        },
+    },
+    setup(props) {
+
+        const computedWidth = computed(() => {
+            if (isNaN(Number(props.width))) {
+                return props.width;
+            }
+
+            return `${props.width}px`;
+        });
+
+        const computedStyles = computed(() => {
+            // if string is passed, return it
+            return {
+                width: computedWidth.value
+            }            
+        });
+
+        return {
+            computedStyles
+        }
+    }
+});
+</script>

package/src/components/table/TableHeadRow.vue

@@ -1,15 +1,15 @@
-<template>
-    <thead>
-        <tr>
-            <slot />
-        </tr>
-    </thead>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-    name: "TableHeadRow"
-});
-</script>
+<template>
+    <thead>
+        <tr>
+            <slot />
+        </tr>
+    </thead>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "TableHeadRow"
+});
+</script>

package/src/components/table/TableRow.vue

@@ -1,13 +1,13 @@
-<template>
-    <tr>
-        <slot />
-    </tr>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-    name: "TableRow"
-});
-</script>
+<template>
+    <tr>
+        <slot />
+    </tr>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "TableRow"
+});
+</script>

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

@@ -1,55 +1,55 @@
-<template>
-    <MTable 
-        :headers="headers"
-        :items="items"
-        @onClick="handleClick"
-    >
-        <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: 200
-    },
-    {
-        name: "Age",
-        key: "age",
-    },
-    {
-        name: "Actions",
-        key: "actions",
-        align: "right"
-    }
-]);
-
-let items = ref([
-    ...Array.from({ length: 30 }, () => ({
-        name: "John Doe",
-        age: 4
-    }))
-
-]);
-
-const handleClick = (item: any) => {
-    console.log(item);
-}
-</script>
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+        @onClick="handleClick"
+    >
+        <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: 200
+    },
+    {
+        name: "Age",
+        key: "age",
+    },
+    {
+        name: "Actions",
+        key: "actions",
+        align: "right"
+    }
+]);
+
+let items = ref([
+    ...Array.from({ length: 30 }, () => ({
+        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.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,57 @@
-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[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/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';
+}