@teammodlr/ui-kit 2.0.25 → 2.0.28

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

@@ -1,25 +1,25 @@
-import MTabGroup from "../TabGroup.vue";
-import MTab from "../Tab.vue";
-import {
-    MTabsBasic,
-    MTabsVertical
-} from "./index";
-
-import {
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MTabGroup,
-    subcomponents: {
-        MTab
-    },
-    title: 'Components/Tabs',
-    argTypes: {
-        ...sizeArgType()
-    }
-}
-
-export const Basic = createStory(MTabsBasic);
-export const Vertical = createStory(MTabsVertical);
+import MTabGroup from "../TabGroup.vue";
+import MTab from "../Tab.vue";
+import {
+    MTabsBasic,
+    MTabsVertical
+} from "./index";
+
+import {
+    createStory,
+    sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MTabGroup,
+    subcomponents: {
+        MTab
+    },
+    title: 'Components/Tabs',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MTabsBasic);
+export const Vertical = createStory(MTabsVertical);

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

@@ -1,2 +1,2 @@
-export { default as MTabsBasic } from './basic.vue';
-export { default as MTabsVertical } from './vertical.vue';
+export { default as MTabsBasic } from './basic.vue';
+export { default as MTabsVertical } from './vertical.vue';

package/src/components/tab/examples/vertical.vue

@@ -1,19 +1,19 @@
-<template>
-    <MTabGroup v-model="active" vertical>
-        <MTab value="one" label="One">
-            Hello Worlddsd
-        </MTab>
-        <MTab value="two" label="Two" disabled>
-            Hello World Two
-        </MTab>
-        <MTab value="three" label="Third">
-            Hello World Two dfndjfn
-        </MTab>
-    </MTabGroup>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-const active = ref("one");
-</script>
+<template>
+    <MTabGroup v-model="active" vertical>
+        <MTab value="one" label="One">
+            Hello Worlddsd
+        </MTab>
+        <MTab value="two" label="Two" disabled>
+            Hello World Two
+        </MTab>
+        <MTab value="three" label="Third">
+            Hello World Two dfndjfn
+        </MTab>
+    </MTabGroup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const active = ref("one");
+</script>

package/src/components/table/Table.vue

@@ -1,119 +1,119 @@
-<template>
-    <div
-        :class="wrapperComputedClasses"
-    >
-        <table
-            :class="tableComputedClasses"
-        >
-            <TableHeadRow>
-                <TableHead
-                    v-for="(header, index) in headers"
-                    :key="index"
-                    :width="header.width"
-                    :style="{ textAlign: header.align} "
-                >
-                    {{ header.name }}
-                </TableHead>
-            </TableHeadRow>
-            <TableBody>
-                <TableRow
-                    v-for="(item, index) in items"
-                    v-if="items.length > 0"
-                    :key="index"
-                >
-                    <TableCell
-                        v-for="(header, index) in headers"
-                        :key="index"
-                        :style="{ textAlign: header.align}"
-                        @click.self="$emit('onClick', item)"
-                    >
-                        <slot :name="header.key" :item="item">
-                            {{//@ts-ignore
-                            item[header.key] }}
-                        </slot>
-                    </TableCell>
-                </TableRow>
-                <tr v-if="items.length === 0">
-                    <td :colspan="headers.length">
-                        <slot name="empty" />
-                    </td>
-                </tr>
-            </TableBody>
-        </table>
-    </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue';
-import type { TableHeadItem } from './types';
-import TableHeadRow from './TableHeadRow.vue';
-import TableHead from './TableHead.vue';
-import TableBody from './TableBody.vue';
-import TableRow from './TableRow.vue';
-import TableCell from './TableCell.vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "Table",
-    components: {
-        TableHeadRow,
-        TableHead,
-        TableBody,
-        TableRow,
-        TableCell
-    },
-    emits: [
-        'update:sort',
-        'onClick'
-    ],
-    props: {
-        headers: {
-            type: Array as PropType<Array<TableHeadItem>>,
-            default: () => [],
-        },
-        items: {
-            type: Array,
-            default: () => []
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        striped: {
-            type: Boolean,
-            default: false
-        },
-        hover: {
-            type: Boolean,
-            default: false
-        },
-    },
-    setup(props) {
-
-        const wrapperComputedClasses = computed(() => {
-            return [
-                style.wrapper,
-                'm-table__wrapper',
-                {
-                    'm-table__wrapper--loading': props.loading
-                }
-            ]
-        });
-
-        const tableComputedClasses = computed(() => {
-            return [
-                style.table,
-                {
-                    [style.hoverable]: props.hover,
-                    [style.striped]: props.striped,
-                }
-            ]
-        });
-
-        return {
-            wrapperComputedClasses,
-            tableComputedClasses
-        }
-    }
-})
-</script>
+<template>
+    <div
+        :class="wrapperComputedClasses"
+    >
+        <table
+            :class="tableComputedClasses"
+        >
+            <TableHeadRow>
+                <TableHead
+                    v-for="(header, index) in headers"
+                    :key="index"
+                    :width="header.width"
+                    :style="{ textAlign: header.align} "
+                >
+                    {{ header.name }}
+                </TableHead>
+            </TableHeadRow>
+            <TableBody>
+                <TableRow
+                    v-for="(item, index) in items"
+                    v-if="items.length > 0"
+                    :key="index"
+                >
+                    <TableCell
+                        v-for="(header, index) in headers"
+                        :key="index"
+                        :style="{ textAlign: header.align}"
+                        @click.self="$emit('onClick', item)"
+                    >
+                        <slot :name="header.key" :item="item">
+                            {{//@ts-ignore
+                            item[header.key] }}
+                        </slot>
+                    </TableCell>
+                </TableRow>
+                <tr v-if="items.length === 0">
+                    <td :colspan="headers.length">
+                        <slot name="empty" />
+                    </td>
+                </tr>
+            </TableBody>
+        </table>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue';
+import type { TableHeadItem } from './types';
+import TableHeadRow from './TableHeadRow.vue';
+import TableHead from './TableHead.vue';
+import TableBody from './TableBody.vue';
+import TableRow from './TableRow.vue';
+import TableCell from './TableCell.vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "Table",
+    components: {
+        TableHeadRow,
+        TableHead,
+        TableBody,
+        TableRow,
+        TableCell
+    },
+    emits: [
+        'update:sort',
+        'onClick'
+    ],
+    props: {
+        headers: {
+            type: Array as PropType<Array<TableHeadItem>>,
+            default: () => [],
+        },
+        items: {
+            type: Array,
+            default: () => []
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        striped: {
+            type: Boolean,
+            default: false
+        },
+        hover: {
+            type: Boolean,
+            default: false
+        },
+    },
+    setup(props) {
+
+        const wrapperComputedClasses = computed(() => {
+            return [
+                style.wrapper,
+                'm-table__wrapper',
+                {
+                    'm-table__wrapper--loading': props.loading
+                }
+            ]
+        });
+
+        const tableComputedClasses = computed(() => {
+            return [
+                style.table,
+                {
+                    [style.hoverable]: props.hover,
+                    [style.striped]: props.striped,
+                }
+            ]
+        });
+
+        return {
+            wrapperComputedClasses,
+            tableComputedClasses
+        }
+    }
+})
+</script>

package/src/components/table/TableBody.vue

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

package/src/components/table/TableCell.vue

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

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>