@teammodlr/ui-kit 2.1.75 → 2.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.1.75",
+  "version": "2.1.77",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/tab/Tab.vue

@@ -7,7 +7,7 @@
 
         </div>
         <div v-if="closable">
-            <button role="button" :class="close" @click="$emit('onClose', { value, label })"></button>
+            <button role="button" :class="close" @click.prevent="$emit('onClose', { value, label })"></button>
         </div>
 
         <teleport v-if="selected && teleportTo" :to="teleportTo">

package/src/components/tab/TabGroup.vue

@@ -13,12 +13,16 @@
 import type { Size } from '../../types/props';
 import { computed, defineComponent, provide, reactive, ref, watchEffect, type PropType } from 'vue';
 import { tabs, tabContent, tabsEvenly } from './style';
+
 export default defineComponent({
     name: "TabGroup",
     props: {
         modelValue: {
             type: [String, Number],
         },
+        selected: {
+            type: [String, Number],
+        },
         size: {
             type: String as PropType<Size>,
             default: 'md'
@@ -38,20 +42,32 @@ export default defineComponent({
         }
     },
     emit: [
-        'update:modelValue'
+        'update:modelValue',
+        'update:selected'
     ],
     setup(props, { emit }) {
         const wrapperRef = ref<HTMLElement>();
         const tabsContentRef = ref<HTMLElement>();
         const contentRef = ref<HTMLElement>();
         const active = ref();
+        const selectedActive = ref();
+
+        // Watch for changes in modelValue
+        watchEffect(() => {
+            if (props.modelValue !== undefined) {
+                active.value = props.modelValue;
+            }
+        });
 
+        // Watch for changes in selected
         watchEffect(() => {
-            active.value = props.modelValue;
+            if (props.selected !== undefined) {
+                selectedActive.value = props.selected;
+            }
         });
 
         const state = reactive({
-            active: computed(() => active.value),
+            active: computed(() => active.value ?? selectedActive.value),
             type: computed(() => props.type)
         });
 
@@ -66,7 +82,6 @@ export default defineComponent({
             return {
                 [tabs[props.type as keyof typeof tabs]]: true,
                 [tabsEvenly]: props.evenly
-
             }
         });
 
@@ -74,18 +89,26 @@ export default defineComponent({
             return {
                 [tabContent]: true
             }
-        })
+        });
 
         function selectTab(tab: string | number) {
-            active.value = tab;
-            emit('update:modelValue', tab);
+            // Update both modelValue and selected if they exist
+            if (props.modelValue !== undefined) {
+                active.value = tab;
+                emit('update:modelValue', tab);
+            }
+
+            if (props.selected !== undefined) {
+                selectedActive.value = tab;
+                emit('update:selected', tab);
+            }
         }
 
         provide("tabs", {
             tabsContentRef,
             selectTab,
             state
-        })
+        });
 
         return {
             wrapperRef,

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

@@ -1,23 +1,23 @@
-<template>
-    <MTabGroup v-model="active">
-        <MTab value="one" label="OneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOne" closable @on-close="close">
-            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");
-
-function close(tab: any) {
-    console.log('hi', tab);
-}
-</script>
+<template>
+    <MTabGroup v-model="active">
+        <MTab value="one" label="OneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOne" closable @on-close="close">
+            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");
+
+function close(tab: any) {
+    console.log('hi', tab);
+}
+</script>