feat: Tabs

preset.js → preset.cjs

@@ -1,5 +1,5 @@
-import colors from 'tailwindcss/colors'
-import forms from '@tailwindcss/forms'
+const colors = require('tailwindcss/colors')
+const forms = require('@tailwindcss/forms')
 
 /**
  *
@@ -19,7 +19,7 @@ function extractColorVars(colorObj, scope = '') {
 }
 
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   theme: {
     extend: {
       colors: {

site/.vitepress/config.ts

@@ -2,14 +2,14 @@ import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { defineConfigWithTheme } from 'vitepress'
 import jsx from '@vitejs/plugin-vue-jsx'
-import typography from '@tailwindcss/typography'
 import nesting from 'tailwindcss/nesting'
 import autoprefixer from 'autoprefixer'
 import tailwindcss from 'tailwindcss'
 import atImport from 'postcss-import'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import type { ThemeConfig } from './theme/theme'
 import { demo } from './plugins/demo'
+
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 // https://vitepress.dev/reference/site-config
@@ -44,7 +44,10 @@ export default defineConfigWithTheme<ThemeConfig>({
         { title: 'Select', link: '/components/select' },
         { title: 'Switch', link: '/components/switch' },
       ],
-      展示: [{ title: 'Menu', link: '/components/menu' }],
+      展示: [
+        { title: 'Menu', link: '/components/menu' },
+        { title: 'Tab', link: '/components/tab' },
+      ],
       反馈: [
         { title: 'Popover', link: '/components/popover' },
         { title: 'Tooltip', link: '/components/tooltip' },

site/components/tab.md

@@ -0,0 +1,58 @@
+# Tab
+
+## 基础用法
+
+```vue demo
+<script setup>
+import { ref } from 'vue'
+
+const items = [
+  {
+    key: '1',
+    label: 'Tab 1',
+  },
+  {
+    key: '2',
+    label: 'Tab 2',
+  },
+  {
+    key: '3',
+    label: 'Tab 3',
+  },
+]
+
+const current = ref('1')
+</script>
+<template>
+  <Tabs :items="items" @change="current = $event"></Tabs>
+  current: Tab {{ current }}
+</template>
+```
+
+## 内容插槽
+
+```vue demo
+<script setup>
+const items = [
+  {
+    key: '1',
+    label: 'Tab 1',
+  },
+  {
+    key: '2',
+    label: 'Tab 2',
+  },
+  {
+    key: '3',
+    label: 'Tab 3',
+  },
+]
+</script>
+<template>
+  <Tabs :items="items">
+    <template #default="{ current }">
+      <div>current: Tab {{ current }}</div>
+    </template>
+  </Tabs>
+</template>
+```

src/Base/IndentList/IndentList.vue

@@ -2,7 +2,7 @@
 import { ref, computed, type PropType } from 'vue'
 import type { IIndentItem } from './types'
 
-defineOptions({ name: 'TIndentList' })
+defineOptions({ name: 'IndentList' })
 defineProps({
   items: Array as PropType<IIndentItem<T>[]>,
   deep: { type: Number, default: 0 },
@@ -13,11 +13,11 @@ const slots = defineSlots<{ item(props: { item: IIndentItem<T>; deep: number }):
   <ul>
     <li v-for="item in items" :key="item.key">
       <slot name="item" :item="item" :deep="deep"></slot>
-      <TIndentList v-if="item.children && item.children.length > 0" :items="item.children" :deep="deep + 1">
+      <IndentList v-if="item.children && item.children.length > 0" :items="item.children" :deep="deep + 1">
         <template #item="props">
           <slot name="item" v-bind="props" />
         </template>
-      </TIndentList>
+      </IndentList>
     </li>
   </ul>
 </template>

src/Base/Popper/Popper.vue

@@ -10,7 +10,7 @@ import {
 } from './core'
 import { useModelValue } from '../../use/useModelValue'
 
-defineOptions({ name: 'Popover' })
+defineOptions({ name: 'Popper' })
 
 const props = defineProps({
   open: { type: Boolean, default: undefined },

src/Space/SpaceCompact.vue

@@ -6,7 +6,7 @@ const props = defineProps({})
 </script>
 <template>
   <div
-    class="t-space-compact flex items-center *:-me-[1px] *:rounded-none [&>:last-child]:rounded-r-md [&>:first-child]:rounded-l-md"
+    class="t-space-compact flex items-center *:-me-[1px] *:rounded-none [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md"
   >
     <slot />
   </div>

src/Tab/Tabs.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref, computed, type PropType } from 'vue'
+
+defineOptions({ name: 'Tabs' })
+const emit = defineEmits<{ change: [key: string] }>()
+const slots = defineSlots<{ default?(props: { current: string }): any }>()
+const props = defineProps({
+  current: { type: String, default: '' },
+  items: {
+    type: Array as PropType<
+      {
+        key: string
+        label: string
+      }[]
+    >,
+    default: () => [],
+  },
+})
+
+const keys = computed(() => props.items.map(item => item.key))
+
+const currentKey = ref(keys.value.includes(props.current) ? props.current : keys.value[0])
+
+const clickHandler = (key: string) => {
+  if (currentKey.value !== key) {
+    currentKey.value = key
+    emit('change', key)
+  }
+}
+</script>
+<template>
+  <div v-if="items.length > 0" class="border-b border-slate-200 dark:border-slate-700">
+    <nav class="flex space-x-1">
+      <button
+        v-for="item in props.items"
+        type="button"
+        :data-active="currentKey === item.key"
+        class="inline-flex items-center gap-x-2 whitespace-nowrap border-b-2 border-transparent px-1 py-2 text-sm text-slate-500 hover:text-primary-500 focus:text-primary-500 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active='true']:border-primary-500 data-[active='true']:font-semibold data-[active='true']:text-primary-500 dark:text-slate-400 dark:data-[active='true']:text-primary-500"
+        role="tab"
+        @click="clickHandler(item.key)"
+      >
+        {{ item.label }}
+      </button>
+    </nav>
+    <div>
+      <template v-if="keys.includes(currentKey)">
+        <slot name="default" :current="currentKey" />
+      </template>
+    </div>
+  </div>
+</template>

src/Tab/index.ts

@@ -0,0 +1 @@
+export { default as Tabs } from './Tabs.vue'

src/index.ts

@@ -12,6 +12,7 @@ import { Menu, type MenuItemRawType, type MenuItemType, type MenuItemTitleType,
 import { default as Popover } from './Popover/index.vue'
 import { default as Tooltip } from './Tooltip/index.vue'
 import { default as SpaceCompact } from './Space/SpaceCompact.vue'
+import { Tabs } from './Tab'
 
 export {
   // components
@@ -29,6 +30,7 @@ export {
   Popover,
   Tooltip,
   SpaceCompact,
+  Tabs,
   // use
   useAnchor,
 }
@@ -50,5 +52,6 @@ export const plugin: Plugin = {
     app.component(Popover.name!, Popover)
     app.component(Tooltip.name!, Tooltip)
     app.component(SpaceCompact.name!, SpaceCompact)
+    app.component(Tabs.name!, Tabs)
   },
 }

tailwind.config.js

@@ -1,7 +1,6 @@
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import typography from '@tailwindcss/typography'
-import preset from './preset'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
@@ -29,7 +28,7 @@ export default {
       }),
     },
   },
-  presets: [preset],
+  presets: [require('./preset.cjs')],
   plugins: [typography()],
   blocklist: ['container'],
 }

tsconfig.node.json

@@ -6,11 +6,5 @@
     "allowJs": true,
     "types": ["node"]
   },
-  "include": [
-    "./vite.config.ts",
-    "./site/.vitepress/config.ts",
-    "./prettier.config.js",
-    "./eslint.config.js",
-    "./preset.js"
-  ]
+  "include": ["./vite.config.ts", "./prettier.config.js", "./eslint.config.js"]
 }

tsconfig.src.json

@@ -8,6 +8,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["./site/.vitepress/**/*", "./src/**/*"],
-  "exclude": ["./site/.vitepress/cache", "./site/.vitepress/config.ts"]
+  "include": ["./env.d.ts", "./site/.vitepress/**/*", "./src/**/*"],
+  "exclude": ["./site/.vitepress/cache"]
 }