@teammodlr/ui-kit 1.0.4 → 1.0.5

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

@@ -0,0 +1,24 @@
+import { createStory } from "@/__storybook__";
+import MSkeleton from "../Skeleton.vue";
+
+import {
+    MSkeletonBasic,
+    MSkeletonPost
+} from "./index";
+
+export default {
+    component: MSkeleton,
+    title: 'Components/Skeleton',
+    argTypes: {
+        variant: {
+            options: ['thumb', 'line', 'circle', 'block'],
+            control: {
+                type: 'select',
+                
+            }
+        }
+    }
+}
+
+export const Basic = createStory(MSkeletonBasic);
+export const Post = createStory(MSkeletonPost);

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

@@ -0,0 +1,2 @@
+export { default as MSkeletonBasic } from './basic.vue';
+export { default as MSkeletonPost } from './post.vue';

package/src/components/skeleton/examples/post.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>
+        <MSkeleton variant="thumb" style="margin-bottom: 10px;" />
+        <MSkeleton variant="heading" style="margin-bottom: 10px; width: 340px;"  />
+        <MSkeleton variant="line" style="margin-bottom: 6px;" />
+        <MSkeleton variant="line" />
+    </div>
+</template>

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/tab/examples/basic.vue

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

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

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

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

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

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

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

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/examples/basic.vue

@@ -0,0 +1,46 @@
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+        striped
+    >
+        <template #actions="{ item }">
+            <MButton
+                color="blue"
+                secondary
+                size="sm"
+            >
+                Edit - {{ item.name }}
+            </MButton>
+        </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"
+    }
+]);
+
+let items = ref([
+    ...Array.from({ length: 30 }, () => ({
+        name: "John Doe",
+        age: 4
+    }))
+
+]);
+</script>