@teammodlr/ui-kit 2.0.24 → 2.0.27

package/src/components/tab/Tab.css

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