@teammodlr/ui-kit 1.0.2

package/src/components/skeleton/Skeleton.css

@@ -0,0 +1,73 @@
+.m-skeleton {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 100%;
+    --skeleton-width: 100%;
+    position: relative;
+    display: flex;
+    background: linear-gradient(-90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
+    background-size: 400% 400%;
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+    border-radius: var(--skeleton-border-radius);
+    font-weight: 600;
+    user-select: none;
+    width: var(--skeleton-width);
+    height: var(--skeleton-height);
+}
+
+.m-skeleton--thumb {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 128px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--heading {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 32px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--line {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 20px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--circle {
+    --skeleton-border-radius: 50%;
+    --skeleton-height: 40px;
+    --skeleton-width: 40px;
+}
+
+.m-skeleton--block {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 100%;
+    --skeleton-width: 100%;
+}
+
+.m-skeleton--pulse {
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+    -webkit-animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: -135% 0;
+    }
+}
+
+@-webkit-keyframes skeleton-pulse {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: -135% 0;
+    }
+}

package/src/components/skeleton/Skeleton.vue

@@ -0,0 +1,47 @@
+<template>
+    <component 
+        :is="tag"
+        :class="computedClasses"
+    >
+        &nbsp;
+    </component>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+    name: "MSkeleton",
+    props: {
+        tag: {
+            type: String,
+            default: "div"
+        },
+        variant: {
+            type: String,
+            default: "line",
+            validator: (value: string) => {
+                return ["block", "thumb", "heading", "line", "circle"].includes(value);
+            }
+        },
+        animation: {
+            type: String,
+            default: "pulse"
+        }
+    },
+    setup(props) {
+
+        const computedClasses = computed(() => {
+            return {
+                "m-skeleton": true,
+                [`m-skeleton--${props.variant}`]: true,
+                [`m-skeleton--${props.animation}`]: true
+            }
+        });
+
+        return {
+            computedClasses
+        }
+    }
+})
+</script>

package/src/components/tab/Tab.css

@@ -0,0 +1,113 @@
+.m-tab-group {
+    --tabs-gap: 14px;
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+    --tabs-border: 1px solid var(--gray-200);
+
+    --tab-background: var(transparent);
+    --tab-color: var(--gray-600);
+    --tab-font-size: 15px;
+    --tab-padding: 12px 8px;
+    --tab-border-radius: 0px;
+    --tab-font-weight: 500;
+    --tab-box-shadow: none;
+}
+
+.m-tab-group__tabs {
+    background: var(--tabs-background);
+    border-radius: var(--tabs-border-radius);
+    position: relative;
+    border-bottom: var(--tabs-border);
+    display: flex;
+    min-width: 100%;
+    width: fit-content;
+    list-style: none;
+    padding: var(--tabs-padding);
+    margin: 0;
+    gap: var(--tabs-gap);
+}
+
+.m-tab-group__tabs .m-tab {
+
+}
+
+.m-tab-group__tabs .m-tab .m-tabs__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--tab-font-size);
+    font-weight: var(--tab-font-weight);
+    color: var(--tab-color);
+    background-color: var(--tab-background);
+    padding: var(--tab-padding);
+    border-radius: var(--tab-border-radius);
+    box-shadow: var(--tab-box-shadow);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out; 
+    border: none;  
+}
+
+.m-tab-group__tabs .m-tab:not(.m-tab--disabled) .m-tabs__button:hover {
+    --tab-background: var(transparent);
+    --tab-color: var(--blue);
+}
+
+.m-tab-group__tabs .m-tab.m-tab--active .m-tabs__button {
+    --tab-background: var(--white);
+    --tab-color: var(--blue);
+    --tab-box-shadow: inset 0px -2px 0px var(--blue);
+}
+
+.m-tab-group__tabs .m-tab.m-tab--disabled .m-tabs__button {
+    --tab-color: var(--gray-400);
+    cursor: not-allowed;
+}
+
+.m-tab-group.m-tab-group--xs {
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+    --tabs-gap: 8px;
+
+    --tab-font-size: 12px;
+    --tab-padding: 10px 6px;
+}
+
+.m-tab-group.m-tab-group--sm {
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+    --tabs-gap: 10px;
+    
+    --tab-font-size: 13px;
+    --tab-padding: 13px 6px;
+}
+
+.m-tab-group.m-tab-group--lg {
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+
+    --tab-font-size: 16px;
+    --tab-padding: 20px 12px;
+}
+
+.m-tab-group.m-tab-group--xl {
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+
+    --tab-font-size: 18px;
+    --tab-padding: 24px 16px;
+}
+
+.m-tab-group.m-tab-group--vertical {
+    flex-direction: column;
+}
+
+.m-tab-group.m-tab-group--vertical .m-tab-group__tabs {
+    flex-direction: column;
+    gap: 0;
+    width: 200px;
+}

package/src/components/tab/Tab.vue

@@ -0,0 +1,98 @@
+<template>
+    <li
+        :data-value="computedValue"
+        :class="computedTabWrapperClasses"
+    >
+        <button
+            role="button"
+            type="button"
+            ref="tabRef"
+            :class="computedTabClasses"
+            @click.prevent="handleClick"
+            :disabled="disabled"
+        >
+            <slot 
+                name="tab"
+                :label="label"
+                :value="value"
+            >
+                {{ computedLabel }}
+            </slot>
+
+            <teleport v-if="selected && teleportTo" :to="teleportTo">
+                <slot />
+            </teleport>
+        </button>
+    </li>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, reactive, ref } from 'vue';
+
+export default defineComponent({
+    name: "Tab",
+    props: {
+        value: {
+            type: [String, Number]
+        },
+        label: {
+            type: String,
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { emit }) {
+        const computedValue = computed(() => props.value);
+        const computedLabel = computed(() => props.label || props.value);
+        const tabRef = ref<HTMLElement | null>(null);
+        const teleportTo = ref(null);
+
+        const tabs = inject("tabs", {
+            tabsContentRef: ref(null),
+            selectTab: (tab: string | number) => {},
+            state: reactive({
+                active: ""
+            })
+        });
+
+        const computedTabWrapperClasses = computed(() => {
+            return {
+                'm-tab': true,
+                'm-tab--active': selected.value,
+                'm-tab--disabled': props.disabled
+            }
+        });
+
+        const computedTabClasses = computed(() => {
+            return {
+                'm-tabs__button': true,
+            }
+        });
+
+        const selected = computed(() => {
+            return tabs.state.active === computedValue.value;
+        });
+
+        function handleClick() {
+            tabs.selectTab(computedValue.value!);
+        }
+
+        onMounted(() => {
+            teleportTo.value = tabs.tabsContentRef.value;
+        });
+
+        return {
+            computedValue,
+            computedLabel,
+            tabRef,
+            computedTabWrapperClasses,
+            computedTabClasses,
+            handleClick,
+            selected,
+            teleportTo
+        }
+    }
+})
+</script>

package/src/components/tab/TabGroup.vue

@@ -0,0 +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>

package/src/components/table/Table.css

@@ -0,0 +1,45 @@
+.m-table__wrapper {
+    width: 100%;
+    overflow-x: auto;
+}
+
+.m-table {
+    --table-cell-padding: 10px 15px;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.m-table thead tr {
+
+}
+
+.m-table thead tr th {
+    padding: var(--table-cell-padding);
+    text-align: left;
+    font-weight: 500;
+    background-color: var(--gray-150);
+    white-space: nowrap;
+    color: var(--gray-700);
+    font-size: 14px;
+    line-height: 15px;
+}
+
+.m-table tbody tr:first-child td {
+    border-top: none;
+}
+
+.m-table tbody tr td {
+    padding: var(--table-cell-padding);
+    border-top: 1px solid var(--gray-150);
+    font-size: 15px;
+    line-height: 15px;
+    vertical-align: middle;
+}
+
+.m-table.m-table--striped tbody tr:nth-child(even) td {
+    background-color: var(--gray-50);
+}
+
+.m-table.m-table--hover tbody tr:hover td {
+    background-color: var(--gray-50);
+}

package/src/components/table/Table.vue

@@ -0,0 +1,108 @@
+<template>
+    <div
+        :class="wrapperComputedClasses"
+    >
+        <table
+            :class="tableComputedClasses"
+        >
+            <TableHeadRow>
+                <TableHead
+                    v-for="(header, index) in headers"
+                    :key="index"
+                    :width="header.width"
+                >
+                    {{ header.name }}
+                </TableHead>
+            </TableHeadRow>
+            <TableBody>
+                <TableRow
+                    v-for="(item, index) in items"
+                    :key="index"
+                >
+                    <TableCell
+                        v-for="(header, index) in headers"
+                        :key="index"
+                    >
+                        <slot :name="header.key" :item="item">
+                            {{//@ts-ignore
+                            item[header.key] }}
+                        </slot>
+                    </TableCell>
+                </TableRow>
+            </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';
+
+export default defineComponent({
+    name: "Table",
+    components: {
+        TableHeadRow,
+        TableHead,
+        TableBody,
+        TableRow,
+        TableCell
+    },
+    emits: [
+        'update:sort',
+    ],
+    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 [
+                'm-table__wrapper',
+                {
+                    'm-table__wrapper--loading': props.loading
+                }
+            ]
+        });
+
+        const tableComputedClasses = computed(() => {
+            return [
+                'm-table',
+                {
+                    'm-table--loading': props.loading,
+                    'm-table--striped': props.striped,
+                    'm-table--hover': props.hover
+                }
+            ]
+        });
+
+        return {
+            wrapperComputedClasses,
+            tableComputedClasses
+        }
+    }
+})
+</script>

package/src/components/table/TableBody.vue

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

package/src/components/table/TableCell.vue

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

package/src/components/table/TableHead.vue

@@ -0,0 +1,22 @@
+<template>
+    <th>
+        <slot />
+    </th>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "TableHead",
+    props: {
+        sort: {
+            type: Number
+        },
+        sortable: {
+            type: Boolean,
+            default: false
+        }
+    }
+});
+</script>

package/src/components/table/TableHeadRow.vue

@@ -0,0 +1,15 @@
+<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

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

package/src/components/table/types/index.ts

@@ -0,0 +1,5 @@
+export type TableHeadItem = {
+    key: string;
+    name?: string;
+    width?: string | number;
+}