feat: Tabs Component

packages/core/src/components/Tabs.ts

@@ -0,0 +1,156 @@
+import {
+  defineComponent,
+  h,
+  computed,
+  Comment,
+  Fragment,
+} from '@vue/runtime-core'
+import { ForegroundColor } from 'chalk'
+import type { PropType, VNode } from '@vue/runtime-core'
+import type { LiteralUnion } from '../utils'
+import { TuiBox } from './Box'
+import { TuiText } from './Text'
+import { Styles } from '../renderer/styles'
+import { onKeyData } from '../composables/keyboard'
+
+export const TuiTabs = defineComponent({
+  props: {
+    modelValue: {
+      type: [String, Number],
+      required: true,
+    },
+    flexDirection: {
+      type: String as PropType<Styles['flexDirection']>,
+      default: 'row',
+    },
+    color: {
+      type: String as PropType<LiteralUnion<ForegroundColor, string>>,
+      default: 'white',
+    },
+    bgColor: {
+      type: String as PropType<LiteralUnion<ForegroundColor, string>>,
+      default: 'black',
+    },
+    activeColor: {
+      type: String as PropType<LiteralUnion<ForegroundColor, string>>,
+      default: 'white',
+    },
+    activeBgColor: {
+      type: String as PropType<LiteralUnion<ForegroundColor, string>>,
+      default: 'blue',
+    },
+    useTab: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['onChange', 'update:modelValue'],
+  setup(props, { emit, slots }) {
+    const isColumn = computed(
+      () =>
+        props.flexDirection === 'column' ||
+        props.flexDirection === 'column-reverse'
+    )
+
+    const keyMap = computed(() => ({
+      previous: isColumn.value ? 'ArrowUp' : 'ArrowLeft',
+      next: isColumn.value ? 'ArrowDown' : 'ArrowRight',
+    }))
+
+    const children = computed(() => {
+      const defaultSlots = slots.default?.()
+      const children = defaultSlots
+        ?.filter((child) => child.type !== Comment)
+        ?.reduce(
+          (nodeList: VNode[], node: VNode) =>
+            node.type === Fragment
+              ? [...nodeList, ...(node.children as VNode[])]
+              : [...nodeList, node],
+          []
+        )
+
+      return children ?? []
+    })
+
+    function toggleTab(index: number) {
+      emit('update:modelValue', index)
+      emit('onChange', index)
+    }
+
+    onKeyData(
+      [
+        keyMap.value.previous,
+        keyMap.value.next,
+        ...(props.useTab ? ['Tab'] : []),
+      ],
+      ({ key }) => {
+        const step = {
+          [keyMap.value.previous]: -1,
+          [keyMap.value.next]: 1,
+          Tab: 1,
+        }[key]
+        const index = +props.modelValue + step
+        const toggleIndex =
+          index < 0
+            ? children.value.length - 1
+            : index > children.value.length - 1
+            ? 0
+            : index
+        toggleTab(toggleIndex)
+      }
+    )
+
+    function normalizeChild() {
+      return children.value.map((child, index) => {
+        const isActive = +props.modelValue === index
+        return h(
+          TuiBox,
+          {
+            flexGrow: 1,
+          },
+          {
+            default: () =>
+              h(
+                TuiText,
+                {
+                  color: isActive ? props.activeColor : props.color,
+                  bgColor: isActive ? props.activeBgColor : props.bgColor,
+                },
+                { default: () => child }
+              ),
+          }
+        )
+      })
+    }
+
+    return () => {
+      return h(
+        TuiBox,
+        {
+          flexDirection: props.flexDirection,
+          width: '100%',
+          height: '100%',
+        },
+        { default: normalizeChild }
+      )
+    }
+  },
+})
+
+export const TuiTab = defineComponent({
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { slots }) {
+    return () => {
+      return h(Fragment, {}, [
+        h('tui:text', {}, ' '),
+        h('tui:text', {}, slots?.default?.() ?? props.name),
+        h('tui:text', {}, ' '),
+      ])
+    }
+  },
+})

packages/core/src/components/index.ts

@@ -5,4 +5,5 @@ export { TuiApp } from './App'
 export { TuiBox } from './Box'
 
 export { TuiLink } from './Link'
+export { TuiTabs, TuiTab } from './Tabs'
 // export { default as TuiInput } from './Input.vue'

packages/playground/components.d.ts

@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     Div: typeof import('vue-termui')['TuiBox']
     Link: typeof import('vue-termui')['TuiLink']
     Span: typeof import('vue-termui')['TuiText']
+    Tab: typeof import('vue-termui')['TuiTab']
     Text: typeof import('vue-termui')['TuiText']
   }
 }

packages/playground/src/Tabs.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+  TuiBox as Box,
+  TuiText as Text,
+  TuiTabs as Tabs,
+  TuiTab as Tab,
+  ref,
+  computed,
+} from 'vue-termui'
+
+const tabIndex = ref(2)
+const tabs = ['Vue', 'Vite', 'Pinia', 'VueUse', 'VueTermui']
+const selected = computed(() => tabs[tabIndex.value])
+function onChange(index: number) {}
+</script>
+
+<template>
+  <Box
+    width="30"
+    justifyContent="center"
+    alignItems="center"
+    borderStyle="double"
+  >
+    <Text>
+      Selected:
+      <Text color="yellow">{{ selected }}</Text>
+    </Text>
+  </Box>
+  <Box
+    width="30"
+    justifyContent="center"
+    alignItems="center"
+    borderStyle="round"
+  >
+    <Tabs v-model="tabIndex" @on-change="onChange">
+      <Tab v-for="(tab, index) in tabs" :key="index">{{ tab }}</Tab>
+    </Tabs>
+  </Box>
+</template>

packages/playground/src/main.ts

@@ -1,12 +1,13 @@
 // import devtools from '@vue/devtools'
 // import devtools from '@vue/devtools/node'
 import { createApp } from 'vue-termui'
-import App from './Focusables.vue'
+// import App from './Focusables.vue'
 // import App from './Fragments.vue'
 // import App from './CenteredDemo.vue'
 // import App from './App.vue'
 // import App from './Counter.vue'
 // import App from './Borders.vue'
+import App from './Tabs.vue'
 
 createApp(App, {
   // swapScreens: true,

packages/vite-plugin-vue-termui/src/index.ts

@@ -169,6 +169,9 @@ export const VueTuiComponents = new Map<string, ModuleExports>([
   ['a', 'TuiLink'],
   ['link', 'TuiLink'],
 
+  ['tabs', 'TuiTabs'],
+  ['tab', 'TuiTab'],
+
   ['div', 'TuiBox'],
   ['box', 'TuiBox'],