Merge pull request #164 from FriedRiceNoodles/feat/tabs

Feat/tabs

.changeset/pre.json

@@ -0,0 +1,10 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@banana-ui/banana": "1.20.1",
+    "@banana/banana-cli": "0.2.0",
+    "@banana-ui/react": "1.20.1"
+  },
+  "changesets": ["gorgeous-queens-clean"]
+}

.dumirc.ts

@@ -95,6 +95,10 @@ export default defineConfig({
               link: 'example/progress',
               title: 'Progress 进度条',
             },
+            {
+              link: 'example/tabs',
+              title: 'Tabs 标签页',
+            },
           ],
         },
         {

docs/example/Tabs/demos/basicUsage.tsx

@@ -0,0 +1,52 @@
+/**
+ * title: 基本使用
+ */
+
+import { Radio, RadioGroup, TabItem, TabPanel, Tabs } from '@banana-ui/react';
+import { useState } from 'react';
+
+export default function BasicUsage() {
+  const [pos, setPos] = useState('top');
+  return (
+    <>
+      <RadioGroup value={pos} onChange={(e) => setPos(e.detail.value)}>
+        <Radio value="top">页标在上</Radio>
+        <Radio value="bottom">页标在下</Radio>
+        <Radio value="left">页标在左</Radio>
+        <Radio value="right">页标在右</Radio>
+      </RadioGroup>
+      <div>
+        <Tabs position={pos}>
+          <TabItem slot="nav" panel="1">
+            Tab1
+          </TabItem>
+          <TabItem slot="nav" panel="2" disabled>
+            LongContentTabItem(disabled)
+          </TabItem>
+          <TabItem slot="nav" panel="3">
+            Tab3
+          </TabItem>
+          <TabItem slot="nav" panel="4">
+            Tab4
+          </TabItem>
+
+          <TabPanel slot="body" name="1">
+            <img
+              src="https://cdn.shopify.com/s/files/1/2710/8782/files/RMLdaYQf_paEjC8LTWqDx.jpg?v=1728612875"
+              width="100%"
+            />
+          </TabPanel>
+          <TabPanel slot="body" name="2">
+            Tab Content 2
+          </TabPanel>
+          <TabPanel slot="body" name="3">
+            Tab Content 3
+          </TabPanel>
+          <TabPanel slot="body" name="4">
+            Tab Content 4
+          </TabPanel>
+        </Tabs>
+      </div>
+    </>
+  );
+}

docs/example/Tabs/demos/extraRender.tsx

@@ -0,0 +1,63 @@
+/**
+ * title: 额外操作元素
+ */
+
+import { Button, TabItem, TabPanel, Tabs } from '@banana-ui/react';
+
+export default function BasicUsage() {
+  return (
+    <div>
+      <Tabs position="top">
+        <TabItem slot="nav" panel="1">
+          Tab1
+        </TabItem>
+        <TabItem slot="nav" panel="2" disabled>
+          LongContentTabItem(disabled)
+        </TabItem>
+        <TabItem slot="nav" panel="3">
+          Tab3
+        </TabItem>
+        <TabItem slot="nav" panel="4">
+          Tab4
+        </TabItem>
+        <TabItem slot="nav" panel="4">
+          Tab4
+        </TabItem>
+        <TabItem slot="nav" panel="4">
+          Tab4
+        </TabItem>
+        <TabItem slot="nav" panel="4">
+          Tab4
+        </TabItem>
+        <TabItem slot="nav" panel="4">
+          Tab4
+        </TabItem>
+        <TabItem slot="nav" panel="4">
+          Tab4
+        </TabItem>
+        <TabItem slot="nav" panel="4">
+          Tab4
+        </TabItem>
+
+        <TabPanel slot="body" name="1">
+          <img
+            src="https://cdn.shopify.com/s/files/1/2710/8782/files/RMLdaYQf_paEjC8LTWqDx.jpg?v=1728612875"
+            width="100%"
+          />
+        </TabPanel>
+        <TabPanel slot="body" name="2">
+          Tab Content 2
+        </TabPanel>
+        <TabPanel slot="body" name="3">
+          Tab Content 3
+        </TabPanel>
+        <TabPanel slot="body" name="4">
+          Tab Content 4
+        </TabPanel>
+
+        <Button slot="left-extra-render">Left Extra Render</Button>
+        <Button slot="right-extra-render">Right Extra Render</Button>
+      </Tabs>
+    </div>
+  );
+}

docs/example/Tabs/index.md

@@ -0,0 +1,64 @@
+---
+debug: true
+group: 组件
+demo:
+  cols: 1
+---
+
+# Tabs tabs 组件
+
+```
+<b-tabs> | Tabs
+```
+
+tabs component
+
+## 代码演示
+
+<code src="./demos/basicUsage.tsx"></code>
+<code src="./demos/extraRender.tsx"></code>
+
+# Tabs
+
+## 属性 - Attributes & Properties
+
+| 属性     | 说明                                          | 类型     | 默认值 |
+| -------- | --------------------------------------------- | -------- | ------ |
+| position | 页签的位置，可选`top` `bottom` `left` `right` | `string` | `top`  |
+| type     | 页签项的类型, 可选`line` `block`              | `string` | `line` |
+
+## 方法 - Methods
+
+| 方法   | 说明              | 参数                      |
+| ------ | ----------------- | ------------------------- |
+| show() | 切换到对应 tab 项 | `panel`对应挂载面板的名称 |
+
+## 事件 - Events
+
+| 事件 | 说明                                                  | Event Detail      |
+| ---- | ----------------------------------------------------- | ----------------- |
+| hide | 切换 tab 时触发, 抛出被隐藏的 tab 上挂的 panel 名称   | `{value: string}` |
+| show | 切换 tab 时触发, 抛出被当前选中 tab 上挂的 panel 名称 | `{value: string}` |
+
+## 插槽 - Slots
+
+| 插槽               | 说明                                                               |
+| ------------------ | ------------------------------------------------------------------ |
+| nav                | tabs 页签栏内容，传入多个`b-tab-item`组件                          |
+| left-extra-render  | 渲染页签左侧的额外元素                                             |
+| right-extra-render | 渲染页签右侧的额外元素                                             |
+| body               | tabs 组件的展示内容，传入多个与`b-tab-item`组件绑定的`b-tab-panel` |
+
+## CSS Parts
+
+| Part   | 说明               |
+| ------ | ------------------ |
+| base   | 包裹组件的容器     |
+| header | 组件的 header 区域 |
+
+## 样式变量
+
+| 变量                         | 说明               | 默认值 |
+| ---------------------------- | ------------------ | ------ |
+| --banana-xxx-title-padding   | 标题的 padding     | 16px   |
+| --banana-xxx-content-padding | 展开区域的 padding | 16px   |

packages/banana-react/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @banana/banana-react
 
+## 1.21.0-next.0
+
+### Minor Changes
+
+- add new tab component
+
+### Patch Changes
+
+- Updated dependencies
+  - @banana-ui/banana@1.21.0-next.0
+
 ## 1.20.1
 
 ### Patch Changes

packages/banana-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banana-ui/react",
-  "version": "1.20.1",
+  "version": "1.21.0-next.0",
   "description": "React components for Banana UI",
   "keywords": [
     "web components",

packages/banana-react/src/index.ts

@@ -20,6 +20,9 @@ import { Rating } from './rating';
 import { Select } from './select';
 import { SelectOption } from './select-option';
 import { Stepper } from './stepper';
+import { TabItem } from './tab-item';
+import { TabPanel } from './tab-panel';
+import { Tabs } from './tabs';
 import { Textarea } from './textarea';
 import { Tooltip } from './tooltip';
 
@@ -46,6 +49,9 @@ export {
   Select,
   SelectOption,
   Stepper,
+  TabItem,
+  TabPanel,
+  Tabs,
   Textarea,
   Tooltip,
 };

packages/banana-react/src/tab-item/index.ts

@@ -0,0 +1,12 @@
+import { BTabItem } from '@banana-ui/banana';
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+
+const events = {};
+
+export const TabItem = createComponent({
+  tagName: 'b-tab-item',
+  react: React,
+  elementClass: BTabItem,
+  events,
+});

packages/banana-react/src/tab-panel/index.ts

@@ -0,0 +1,12 @@
+import { BTabPanel } from '@banana-ui/banana';
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+
+const events = {};
+
+export const TabPanel = createComponent({
+  tagName: 'b-tab-panel',
+  react: React,
+  elementClass: BTabPanel,
+  events,
+});

packages/banana-react/src/tabs/index.ts

@@ -0,0 +1,12 @@
+import { BTabs } from '@banana-ui/banana';
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+
+const events = {};
+
+export const Tabs = createComponent({
+  tagName: 'b-tabs',
+  react: React,
+  elementClass: BTabs,
+  events,
+});

packages/banana/CHANGELOG.md

@@ -1,5 +1,11 @@
 # banana-ui
 
+## 1.21.0-next.0
+
+### Minor Changes
+
+- add new tab component
+
 ## 1.20.1
 
 ### Patch Changes

packages/banana/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banana-ui/banana",
-  "version": "1.20.1",
+  "version": "1.21.0-next.0",
   "description": "An UI library of web components can be used in any framework",
   "keywords": [
     "web components",

packages/banana/src/index.ts

@@ -20,6 +20,9 @@ import BRating from './rating';
 import BSelect from './select';
 import BSelectOption from './select-option';
 import BStepper from './stepper';
+import BTabItem from './tab-item';
+import BTabPanel from './tab-panel';
+import BTabs from './tabs';
 import BTextarea from './textarea';
 import BTooltip from './tooltip';
 
@@ -46,6 +49,9 @@ export {
   BSelect,
   BSelectOption,
   BStepper,
+  BTabItem,
+  BTabPanel,
+  BTabs,
   BTextarea,
   BTooltip,
 };

packages/banana/src/tab-item/index.styles.ts

@@ -0,0 +1,35 @@
+import { css, unsafeCSS } from 'lit';
+import componentStyles from '../../styles/components.styles';
+import { Colors, Variables as Var } from '../../styles/global-variables';
+
+export default [
+  componentStyles,
+  css`
+    :host {
+      line-height: ${unsafeCSS(Var.LineHeightDense)};
+      cursor: pointer;
+      --banana-tab-nav-color: rgba(${unsafeCSS(Colors.Gray9)});
+      --banana-tab-nav-color-hover: rgba(${unsafeCSS(Colors.Blue3)});
+      --banana-tab-nav-color-active: rgba(${unsafeCSS(Colors.Blue3)});
+      --banana-tab-item-vertical-padding: 16px;
+      --banana-tab-item-horizontal-padding: 20px;
+    }
+    .tab-item {
+      display: inline-flex;
+      align-items: center;
+      padding: var(--banana-tab-item-vertical-padding) var(--banana-tab-item-horizontal-padding);
+      color: var(--banana-tab-nav-color);
+      transition: all ease-in-out ${unsafeCSS(Var.TransitionNormal)};
+    }
+    .tab-item:hover:not(.tab-item--disabled) {
+      color: var(--banana-tab-nav-color-hover);
+    }
+    .tab-item--active {
+      color: var(--banana-tab-nav-color-active);
+    }
+    .tab-item--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `,
+];

packages/banana/src/tab-item/index.test.ts

@@ -0,0 +1,9 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import BTab from '.';
+
+describe('b-tab-item', () => {
+  it('accessibility tests', async () => {
+    const element = await fixture<BTab>(html`<b-tab-item></b-tab-item>`);
+    await expect(element).to.be.accessible();
+  });
+});