initial

layers/ui/components/tabs/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="cn.b()">
+    <UiTabsOption
+      v-for="(option, index) in options"
+      :key="index"
+      :size="size"
+      v-bind="option"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiTabsOption from './option.vue'
+import type { ModelValue, Props } from './types'
+import { tabsContextKey } from './constants'
+
+defineOptions({
+  name: 'UiTabs',
+})
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:modelValue': [state: ModelValue]
+}>()
+
+const cn = useClassname('ui-tabs')
+
+function handleOptionClick(value: ModelValue) {
+  emit('update:modelValue', value)
+}
+
+provide(tabsContextKey, {
+  modelValue: toRef(props, 'modelValue'),
+  handleOptionClick,
+})
+</script>
+
+<style lang="scss">
+@use 'styles';
+</style>