@teammodlr/ui-kit 2.1.41 → 2.1.44

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,198 +1,198 @@
-<template>
-    <div
-        :class="wrapperComputedClasses"
-    >
-        <table
-            :class="tableComputedClasses"
-        >
-            <TableHeadRow>
-                <TableHead
-                    v-if="modelValue"
-                    scope="col"
-                    :width="20"
-                >
-                    <MCheckbox 
-                        :checked="indeterminate || selected.length === items.length" 
-                        :indeterminate="indeterminate"
-                        @change="onChange"
-                    />
-                </TableHead>
-                <TableHead
-                    v-for="(header, index) in headers"
-                    :key="index"
-                    :width="header.width"
-                    :style="{textAlign: header.align}"
-                >
-                    <slot :name="`${header.key}-header`">
-                        {{ header.name }}
-                    </slot>
-                </TableHead>
-            </TableHeadRow>
-            <TableBody>
-                <TableRow
-                    v-for="(item, index) in items"
-                    v-if="items.length > 0"
-                    :key="index"
-                    #default="{ onHover }"
-                >
-                    <TableCell
-                        v-if="modelValue"
-                        >
-                        <MCheckbox 
-                            v-model="selected"
-                            :value="item"
-                            @click.stop
-                        />
-                    </TableCell>
-                    <TableCell
-                        v-for="(header, index) in headers"
-                        :key="index"
-                        :style="{ textAlign: header.align}"
-                    >
-                        <slot :name="header.key" :item="item" :onHover="onHover">
-                            {{//@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, toRaw } 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 MCheckbox from '../checkbox/Checkbox.vue';
-
-import * as style from "./style";
-import { indeterminate } from '../checkbox/style';
-
-export default defineComponent({
-    name: "Table",
-    components: {
-        TableHeadRow,
-        TableHead,
-        TableBody,
-        TableRow,
-        TableCell,
-        MCheckbox
-    },
-    emits: [
-        'update:modelValue',
-    ],
-    props: {
-        modelValue: {
-            type: Array,
-            default: null
-        },
-        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, { emit, attrs }) {
-
-        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,
-                }
-            ]
-        });
-
-        const selected = computed({
-            get() {
-                return props.modelValue;
-            }, 
-            set(value) {
-                emit('update:modelValue', value);
-            }
-        });
-
-        const indeterminate = computed(() => {
-            return selected.value && selected.value.length > 0 && selected.value.length < props.items.length;
-        });
-
-        function compare (a: any, z: any) {
-            return a === z;
-        }
-
-        function onSelect (row: any) {
-            
-            if (!attrs.onSelect) {
-                selected.value.push(row);
-                return;
-            }
-
-            // @ts-ignore
-            attrs.onSelect(row);
-        }
-
-        function selectAllRows() {
-            props.items.forEach((row: any) => {
-                if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) {
-                    return
-                }
-
-                onSelect(row);
-            });
-        }
-
-        function onChange (event: any) {
-            if (event.target.checked) {
-                selectAllRows();
-            } else {
-                selected.value = [];
-            }
-        }
-
-        return {
-            wrapperComputedClasses,
-            tableComputedClasses,
-            selected,
-            indeterminate,
-            onChange,
-            onSelect
-        }
-    }
-})
-</script>
+<template>
+    <div
+        :class="wrapperComputedClasses"
+    >
+        <table
+            :class="tableComputedClasses"
+        >
+            <TableHeadRow>
+                <TableHead
+                    v-if="modelValue"
+                    scope="col"
+                    :width="20"
+                >
+                    <MCheckbox 
+                        :checked="indeterminate || selected.length === items.length" 
+                        :indeterminate="indeterminate"
+                        @change="onChange"
+                    />
+                </TableHead>
+                <TableHead
+                    v-for="(header, index) in headers"
+                    :key="index"
+                    :width="header.width"
+                    :style="{textAlign: header.align}"
+                >
+                    <slot :name="`${header.key}-header`">
+                        {{ header.name }}
+                    </slot>
+                </TableHead>
+            </TableHeadRow>
+            <TableBody>
+                <TableRow
+                    v-for="(item, index) in items"
+                    v-if="items.length > 0"
+                    :key="index"
+                    #default="{ onHover }"
+                >
+                    <TableCell
+                        v-if="modelValue"
+                        >
+                        <MCheckbox 
+                            v-model="selected"
+                            :value="item"
+                            @click.stop
+                        />
+                    </TableCell>
+                    <TableCell
+                        v-for="(header, index) in headers"
+                        :key="index"
+                        :style="{ textAlign: header.align}"
+                    >
+                        <slot :name="header.key" :item="item" :onHover="onHover">
+                            {{//@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, toRaw } 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 MCheckbox from '../checkbox/Checkbox.vue';
+
+import * as style from "./style";
+import { indeterminate } from '../checkbox/style';
+
+export default defineComponent({
+    name: "Table",
+    components: {
+        TableHeadRow,
+        TableHead,
+        TableBody,
+        TableRow,
+        TableCell,
+        MCheckbox
+    },
+    emits: [
+        'update:modelValue',
+    ],
+    props: {
+        modelValue: {
+            type: Array,
+            default: null
+        },
+        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, { emit, attrs }) {
+
+        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,
+                }
+            ]
+        });
+
+        const selected = computed({
+            get() {
+                return props.modelValue;
+            }, 
+            set(value) {
+                emit('update:modelValue', value);
+            }
+        });
+
+        const indeterminate = computed(() => {
+            return selected.value && selected.value.length > 0 && selected.value.length < props.items.length;
+        });
+
+        function compare (a: any, z: any) {
+            return a === z;
+        }
+
+        function onSelect (row: any) {
+            
+            if (!attrs.onSelect) {
+                selected.value.push(row);
+                return;
+            }
+
+            // @ts-ignore
+            attrs.onSelect(row);
+        }
+
+        function selectAllRows() {
+            props.items.forEach((row: any) => {
+                if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) {
+                    return
+                }
+
+                onSelect(row);
+            });
+        }
+
+        function onChange (event: any) {
+            if (event.target.checked) {
+                selectAllRows();
+            } else {
+                selected.value = [];
+            }
+        }
+
+        return {
+            wrapperComputedClasses,
+            tableComputedClasses,
+            selected,
+            indeterminate,
+            onChange,
+            onSelect
+        }
+    }
+})
+</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,19 +1,19 @@
-<template>
-    <tr @mouseenter="hover = true" @mouseleave="hover = false">
-        <slot :onHover="hover" />
-    </tr>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-
-export default defineComponent({
-    name: "TableRow",
-    setup(props) {
-        const hover = ref(false);
-        return {
-            hover
-        }
-    }
-});
-</script>
+<template>
+    <tr @mouseenter="hover = true" @mouseleave="hover = false">
+        <slot :onHover="hover" />
+    </tr>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+    name: "TableRow",
+    setup(props) {
+        const hover = ref(false);
+        return {
+            hover
+        }
+    }
+});
+</script>