feat(BaseTabSlider)!: rename selected prop to modelValue to allow v-m…

…odel

.playground/pages/tests/content/shapes.vue

@@ -435,6 +435,7 @@ const app = useAppConfig()
         ></BaseTabSlider>
         <BaseTabSlider
           shape="rounded"
+          :model-value="'rounded2'"
           :tabs="[{ value: 'rounded' }, { value: 'rounded2' }]"
         ></BaseTabSlider>
         <BaseTabSlider

components/base/BaseTabSlider.vue

@@ -13,7 +13,7 @@ const props = withDefaults(
     /**
      * The value of the currently selected tab.
      */
-    selected?: string
+    modelValue?: string
     /**
      * Controls the alignment of the tabs. Can be 'start', 'center', or 'end'.
      */
@@ -32,14 +32,14 @@ const props = withDefaults(
     condensed?: boolean
   }>(),
   {
-    selected: undefined,
+    modelValue: undefined,
     justify: undefined,
     size: 'md',
     shape: undefined,
   },
 )
 const emit = defineEmits<{
-  (event: 'update:selected', value?: string): void
+  (event: 'update:modelValue', value?: string): void
 }>()
 const appConfig = useAppConfig()
 const shape = computed(
@@ -69,21 +69,21 @@ const lengthStyle = computed(() =>
 )
 
 const activeValue = ref<string | undefined>(
-  props.selected ?? props.tabs[0]?.value,
+  props.modelValue ?? props.tabs[0]?.value,
 )
 
 function toggle(value: string) {
   activeValue.value = value
 }
 
 watch(
-  () => props.selected,
+  () => props.modelValue,
   (value) => {
     activeValue.value = value
   },
 )
 watch(activeValue, (value) => {
-  emit('update:selected', value)
+  emit('update:modelValue', value)
 })
 </script>