feat(projects): 1.0 beta

packages/materials/src/libs/page-tab/button-tab.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    :class="[
+      ':soy: relative inline-flex justify-center items-center gap-12px px-12px py-4px border-1px border-solid rounded-4px cursor-pointer whitespace-nowrap',
+      style['button-tab'],
+      { [style['button-tab_dark']]: darkMode },
+      { [style['button-tab_active']]: active },
+      { [style['button-tab_active_dark']]: active && darkMode }
+    ]"
+  >
+    <slot name="prefix"></slot>
+    <slot></slot>
+    <slot name="suffix"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import style from './index.module.css';
+import type { PageTabProps } from '../../types';
+
+defineOptions({
+  name: 'ButtonTab'
+});
+
+defineProps<PageTabProps>();
+
+type SlotFn = (props?: Record<string, unknown>) => any;
+
+type Slots = {
+  /**
+   * slot
+   * @description the center content of the tab
+   */
+  default?: SlotFn;
+  /**
+   * slot
+   * @description the left content of the tab
+   */
+  prefix?: SlotFn;
+  /**
+   * slot
+   * @description the right content of the tab
+   */
+  suffix?: SlotFn;
+};
+defineSlots<Slots>();
+</script>
+
+<style scoped></style>