@teammodlr/ui-kit 2.0.28 → 2.0.30

package/src/components/tab/TabGroup.vue

@@ -1,90 +1,90 @@
-<template>
-    <div
-        :class="computedWrapperClasses"
-    >
-        <div
-            ref="wrapperRef"
-            
-        >
-            <ul
-                ref="tabsRef"
-                :class="computedTabsClasses"
-            >
-                <slot />
-            </ul>
-        </div>
-        <div ref="tabsContentRef" class="m-tab-group__content"></div>
-    </div>
-</template>
-
-<script lang="ts">
-import type { Size } from '../../types/props';
-import { computed, defineComponent, provide, reactive, ref, watchEffect, type PropType } from 'vue';
-
-export default defineComponent({
-    name: "TabGroup",
-    props: {
-        modelValue: {
-            type: [String, Number],
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        vertical: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emit: [
-        'update:modelValue'
-    ],
-    setup(props, { emit }) {
-        const wrapperRef = ref<HTMLElement>();
-        const tabsContentRef = ref<HTMLElement>();
-        const contentRef = ref<HTMLElement>();
-        const active = ref();
-
-        watchEffect(() => {
-            active.value = props.modelValue;
-        });
-
-        const state = reactive({
-            active: computed(() => active.value)
-        });
-
-        const computedWrapperClasses = computed(() => {
-            return {
-                'm-tab-group': true,
-                'm-tab-group--vertical': props.vertical,
-                [`m-tab-group--${props.size}`]: true
-            }
-        });
-
-        const computedTabsClasses = computed(() => {
-            return {
-                'm-tab-group__tabs': true,
-            }
-        });
-
-        function selectTab(tab: string | number) {
-            active.value = tab;
-            emit('update:modelValue', tab);
-        }
-
-        provide("tabs", {
-            tabsContentRef,
-            selectTab,
-            state
-        })
-
-        return {
-            wrapperRef,
-            tabsContentRef,
-            contentRef,
-            computedWrapperClasses,
-            computedTabsClasses
-        }
-    }
-})
-</script>
+<template>
+    <div
+        :class="computedWrapperClasses"
+    >
+        <div
+            ref="wrapperRef"
+            
+        >
+            <ul
+                ref="tabsRef"
+                :class="computedTabsClasses"
+            >
+                <slot />
+            </ul>
+        </div>
+        <div ref="tabsContentRef" class="m-tab-group__content"></div>
+    </div>
+</template>
+
+<script lang="ts">
+import type { Size } from '../../types/props';
+import { computed, defineComponent, provide, reactive, ref, watchEffect, type PropType } from 'vue';
+
+export default defineComponent({
+    name: "TabGroup",
+    props: {
+        modelValue: {
+            type: [String, Number],
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        vertical: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emit: [
+        'update:modelValue'
+    ],
+    setup(props, { emit }) {
+        const wrapperRef = ref<HTMLElement>();
+        const tabsContentRef = ref<HTMLElement>();
+        const contentRef = ref<HTMLElement>();
+        const active = ref();
+
+        watchEffect(() => {
+            active.value = props.modelValue;
+        });
+
+        const state = reactive({
+            active: computed(() => active.value)
+        });
+
+        const computedWrapperClasses = computed(() => {
+            return {
+                'm-tab-group': true,
+                'm-tab-group--vertical': props.vertical,
+                [`m-tab-group--${props.size}`]: true
+            }
+        });
+
+        const computedTabsClasses = computed(() => {
+            return {
+                'm-tab-group__tabs': true,
+            }
+        });
+
+        function selectTab(tab: string | number) {
+            active.value = tab;
+            emit('update:modelValue', tab);
+        }
+
+        provide("tabs", {
+            tabsContentRef,
+            selectTab,
+            state
+        })
+
+        return {
+            wrapperRef,
+            tabsContentRef,
+            contentRef,
+            computedWrapperClasses,
+            computedTabsClasses
+        }
+    }
+})
+</script>

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

@@ -1,19 +1,19 @@
-<template>
-    <MTabGroup v-model="active">
-        <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">
+        <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/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>