initial

layers/ui/components/tabs/constants.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue'
+import type { TabsContext } from './types'
+
+export const tabsContextKey: InjectionKey<TabsContext>
+  = Symbol('UI_TABS')

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>

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>

layers/ui/components/tabs/styles.scss

@@ -0,0 +1,7 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.ui-tabs {
+  display: flex;
+  gap: 8px;
+}

layers/ui/components/tabs/types.ts

@@ -0,0 +1,22 @@
+import type { Props as ButtonProps } from '../button/index.vue'
+import type { UiIcon } from '#build/types/ui/icons'
+
+export type ModelValue = string | number
+
+export interface OptionProps {
+  label?: string
+  icon?: UiIcon
+  value: ModelValue
+  size?: ButtonProps['size']
+}
+
+export interface Props {
+  options: Omit<OptionProps, 'size'>[]
+  modelValue?: ModelValue
+  size?: ButtonProps['size']
+}
+
+export interface TabsContext {
+  modelValue?: ModelValue
+  handleOptionClick: (value: ModelValue) => void
+}