From 580ef36c5bf1c1f639e3f8c6cf7b4f9b781bccde Mon Sep 17 00:00:00 2001
From: chizukicn <chizukicn@outlook.com>
Date: Fri, 10 Nov 2023 17:29:24 +0800
Subject: [PATCH] feat(components): add tabs component

---
 packages/components/components.ts             |  2 +
 .../core/src/config-provider/component.ts     |  4 +-
 packages/core/src/item/component.ts           |  3 +-
 packages/core/src/item/index.ts               | 17 +++++---
 packages/core/src/tab-pane/component.ts       | 21 ++++++++++
 packages/core/src/tabs/component.ts           | 42 +++++++++++++++++++
 playground/src/app.vue                        | 20 ++++++++-
 7 files changed, 99 insertions(+), 10 deletions(-)
 create mode 100644 packages/core/src/tab-pane/component.ts
 create mode 100644 packages/core/src/tabs/component.ts

diff --git a/packages/components/components.ts b/packages/components/components.ts
index 873f7fd..ca75aca 100644
--- a/packages/components/components.ts
+++ b/packages/components/components.ts
@@ -4,3 +4,5 @@ export * from "../core/src/item/component";
 export * from "../core/src/icon/component";
 export * from "../core/src/switch/component";
 export * from "../core/src/config-provider/component";
+export * from "../core/src/tabs/component";
+export * from "../core/src/tab-pane/component";
diff --git a/packages/core/src/config-provider/component.ts b/packages/core/src/config-provider/component.ts
index 98f69b8..34dc00c 100644
--- a/packages/core/src/config-provider/component.ts
+++ b/packages/core/src/config-provider/component.ts
@@ -5,10 +5,10 @@ import { provideSharedConfig } from "@hoci/core";
 export const HiConfigProvider = defineComponent({
   props: {
     icon: {
-      type: Object as PropType<SharedConfig["icon"]>
+      type: Object as PropType<Partial<SharedConfig["icon"]>>
     },
     activateEvent: {
-      type: String as PropType<SharedConfig["activateEvent"]>
+      type: String as PropType<Partial<SharedConfig["activateEvent"]>>
     }
   },
   setup(props, context) {
diff --git a/packages/core/src/item/component.ts b/packages/core/src/item/component.ts
index 4435798..db505ae 100644
--- a/packages/core/src/item/component.ts
+++ b/packages/core/src/item/component.ts
@@ -1,5 +1,6 @@
-import { capitalize, defineComponent, h } from "vue";
+import { defineComponent, h } from "vue";
 import { itemProps, useSelectionItem } from "@hoci/core";
+import { capitalize } from "tslx";
 
 export const HiItem = defineComponent({
   name: "HiItem",
diff --git a/packages/core/src/item/index.ts b/packages/core/src/item/index.ts
index ebde7c2..263a9df 100644
--- a/packages/core/src/item/index.ts
+++ b/packages/core/src/item/index.ts
@@ -47,16 +47,20 @@ export const useSelectionItem = defineHookComponent({
       context.changeActive(props.value);
     };
 
+    const label = computed(() => {
+      let label = props.label ?? context.label;
+      if (label && typeof label == "function") {
+        label = label(props.value)!;
+      }
+      return Array.isArray(label) ? label : [label];
+    });
+
     function render() {
       return renderSlot(slots, "default", {
         active: context.isActive(props.value),
         activate
       }, () => {
-        let label = props.label ?? context.label;
-        if (label && typeof label == "function") {
-          label = label(props.value)!;
-        }
-        return Array.isArray(label) ? label : [label];
+        return label.value;
       });
     }
 
@@ -104,7 +108,8 @@ export const useSelectionItem = defineHookComponent({
       isActive,
       isDisabled,
       className,
-      activateEvent
+      activateEvent,
+      label
     };
   }
 });
diff --git a/packages/core/src/tab-pane/component.ts b/packages/core/src/tab-pane/component.ts
new file mode 100644
index 0000000..426cc2e
--- /dev/null
+++ b/packages/core/src/tab-pane/component.ts
@@ -0,0 +1,21 @@
+import { defineComponent, h } from "vue";
+import { capitalize } from "tslx";
+import { itemProps, useSelectionItem } from "../item";
+
+export const HiTabPane = defineComponent({
+  props: {
+    ...itemProps
+  },
+  setup(props, context) {
+    const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
+    return () => {
+      return h("div",
+        {
+          class: className.value,
+          [`on${capitalize(activateEvent.value)}`]: activate,
+          disabled: isDisabled.value
+        }
+        , label.value);
+    };
+  }
+});
diff --git a/packages/core/src/tabs/component.ts b/packages/core/src/tabs/component.ts
new file mode 100644
index 0000000..ef368af
--- /dev/null
+++ b/packages/core/src/tabs/component.ts
@@ -0,0 +1,42 @@
+import { defineComponent, h, renderSlot } from "vue";
+import { classPropType } from "@hoci/shared";
+import { selectionProps, useSelectionList } from "../selection";
+
+export const HiTabs = defineComponent({
+  props: {
+    ...selectionProps,
+    headerClass: {
+      type: classPropType
+    },
+    contentClass: {
+      type: classPropType
+    },
+    as: {
+      type: String,
+      default: "div"
+    },
+    headerAs: {
+      type: String,
+      default: "div"
+    },
+    contentAs: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(props, context) {
+    const selection = useSelectionList(props, context);
+
+    return () => {
+      const content = selection.renderItem();
+      return h(props.as, [
+        h(props.headerAs, {
+          class: props.headerClass
+        }, renderSlot(context.slots, "default")),
+        h(props.contentAs, {
+          class: props.contentClass
+        }, content)
+      ]);
+    };
+  }
+});
diff --git a/playground/src/app.vue b/playground/src/app.vue
index a5366bd..3aaae0b 100644
--- a/playground/src/app.vue
+++ b/playground/src/app.vue
@@ -1,8 +1,14 @@
 <script lang="tsx">
 import { defineComponent, reactive, ref } from "vue";
-import { HiAffix, HiConfigProvider, HiIcon, HiItem, HiSelection, HiSwitch } from "hoci";
+import { HiAffix, HiConfigProvider, HiIcon, HiItem, HiSelection, HiSwitch, HiTabPane, HiTabs } from "hoci";
 import hociSvg from "./assets/hoci.svg";
 
+const Tab1 = defineComponent(() => {
+  return () => <div class="p-4">
+    <HiSwitch as="span" class="cursor-pointer duration-200 select-none" activeClass="text-hex-f00">Tab 1</HiSwitch>
+  </div>;
+});
+
 export default defineComponent(() => {
   const selectedIndex = ref<number[] | number>(2);
   const logs = ref<string[]>([]);
@@ -39,6 +45,18 @@ export default defineComponent(() => {
       <HiConfigProvider icon={{ size: 96 }}>
         <hi-icon class="text-green rounded w-12 h-12" src={hociSvg}/>
         <HiIcon size={0} class="text-green rounded w-12 h-12" src={hociSvg}/>
+        <HiTabs
+          headerClass="flex space-x-3"
+          itemClass="b-1 b-solid px-2 b-gray-3 rounded cursor-pointer"
+          activeClass="b-transparent bg-blue-3 text-white"
+          v-model={selectedIndex.value} class="mt-12">
+          <HiTabPane value={1} label="tab1">
+            <Tab1/>
+          </HiTabPane>
+          <HiTabPane value={2} label="tab2">
+            这是Tab 2
+          </HiTabPane>
+        </HiTabs>
         <HiAffix class="my-1" as="div" offset={30}>
           <div class="inline-block  p-4 bg-blue-200" >
           Offset Top 30px