initial

layers/ui/components/tabs/option.vue

@@ -0,0 +1,27 @@
+<template>
+  <UiButton
+    :class="cn.b()"
+    :type="active ? 'filled' : 'ghost'"
+    :color="active ? 'primary' : 'secondary'"
+    :icon="icon"
+    :size="size"
+    @click="tabs.handleOptionClick(value)"
+  >
+    <template v-if="label">
+      {{ label }}
+    </template>
+  </UiButton>
+</template>
+
+<script setup lang="ts">
+import type { OptionProps } from './types.js'
+import { tabsContextKey } from './constants'
+
+const props = defineProps<OptionProps>()
+
+const tabs = inject(tabsContextKey)!
+
+const cn = useClassname('ui-tabs-option')
+
+const active = computed(() => tabs.modelValue.value === props.value)
+</script>