@teammodlr/ui-kit 2.3.12 → 2.3.14

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

@@ -1,17 +1,17 @@
-import MTable from '../Table.vue';
-import MButton from '../../button/Button.vue';
-import { MTableBasic, MTableEmpty, MTableSelected } 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);
-export const Selected = createStory(MTableSelected);
+import MTable from '../Table.vue';
+import MButton from '../../button/Button.vue';
+import { MTableBasic, MTableEmpty, MTableSelected } 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);
+export const Selected = createStory(MTableSelected);

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