@teammodlr/ui-kit 1.0.2 → 1.0.4

package/src/components/skeleton/Skeleton.css

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

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

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

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

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

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

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

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

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

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