From 6a8f6297a73c352641781449071271eada0e2b9b Mon Sep 17 00:00:00 2001
From: yunxia <plato_ccxx@163.com>
Date: Thu, 25 Jan 2024 15:30:22 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20tabs=E6=96=B0=E5=A2=9E=E6=94=B6?=
 =?UTF-8?q?=E7=BC=A9=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                      |  2 +-
 packages/quarkd/src/tab/demo.scss          |  4 ++++
 packages/quarkd/src/tab/demo.vue           | 20 ++++++++++++++++++++
 packages/quarkd/src/tab/doc-react.en-US.md | 22 ++++++++++++++++++++++
 packages/quarkd/src/tab/doc-react.zh-CN.md | 22 ++++++++++++++++++++++
 packages/quarkd/src/tab/doc.en-US.md       | 22 ++++++++++++++++++++++
 packages/quarkd/src/tab/doc.zh-CN.md       | 22 ++++++++++++++++++++++
 packages/quarkd/src/tab/index.tsx          | 21 ++++++++++++++++++++-
 packages/quarkd/src/tab/tab-style.css      |  8 ++++++++
 packages/quarkd/src/tab/tabs-style.css     |  2 +-
 10 files changed, 142 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0c7b7e85..21c7616c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
     "editor.codeActionsOnSave": {
-      "source.fixAll": true
+      "source.fixAll": "explicit"
     },
     "files.associations": {
       "*.vue": "html"
diff --git a/packages/quarkd/src/tab/demo.scss b/packages/quarkd/src/tab/demo.scss
index 87f95de3..9ceba0c7 100644
--- a/packages/quarkd/src/tab/demo.scss
+++ b/packages/quarkd/src/tab/demo.scss
@@ -26,3 +26,7 @@
     height: 700px;
   }
 }
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
diff --git a/packages/quarkd/src/tab/demo.vue b/packages/quarkd/src/tab/demo.vue
index 1137cb4f..b559ff4c 100644
--- a/packages/quarkd/src/tab/demo.vue
+++ b/packages/quarkd/src/tab/demo.vue
@@ -111,6 +111,24 @@
       </quark-tabs>
     </div>
 
+    <h2>{{ translate("title.shrink") }}</h2>
+    <div class="demo-item">
+      <quark-tabs shrink>
+        <quark-tab-content :label="translate('tab')[0]">
+          {{ translate("tabs")[0] }}
+        </quark-tab-content>
+        <quark-tab-content :label="translate('tab')[1]">
+          {{ translate("tabs")[1] }}
+        </quark-tab-content>
+        <quark-tab-content :label="translate('tab')[2]">
+          {{ translate("tabs")[2] }}
+        </quark-tab-content>
+        <quark-tab-content :label="translate('tab')[3]">
+          {{ translate("tabs")[3] }}
+        </quark-tab-content>
+      </quark-tabs>
+    </div>
+
     <h2>{{ translate("title.sticky") }}</h2>
     <div class="demo-item">
       <quark-tabs sticky offsettop="17vw">
@@ -156,6 +174,7 @@ export default createDemo({
             scroll: "横向滚动",
             click: "切换事件",
             sticky: "吸顶效果",
+            shrink: "收缩布局",
           },
           selected: "当前选择：",
           tab: [
@@ -191,6 +210,7 @@ export default createDemo({
             scroll: "Horizontal Scrolling",
             click: "Click Event",
             sticky: "Sticky Effect",
+            shrink: "Shrink",
           },
           selected: "Currently Selected: ",
           tab: [
diff --git a/packages/quarkd/src/tab/doc-react.en-US.md b/packages/quarkd/src/tab/doc-react.en-US.md
index 3cb10d15..67b0f2d3 100644
--- a/packages/quarkd/src/tab/doc-react.en-US.md
+++ b/packages/quarkd/src/tab/doc-react.en-US.md
@@ -95,6 +95,26 @@ export default () => {
 };
 ```
 
+### Shrink
+
+In shrink mode, the tabs will be shrinked to the left.
+
+```html
+<Tabs shrink>
+  <TabContent label="tab1"> tab1 content </TabContent>
+  <TabContent label="tab2"> tab2 content </TabContent>
+  <TabContent label="tab3"> tab3 content </TabContent>
+  <TabContent label="tab4"> tab4 content </TabContent>
+</Tabs>
+```
+
+```css
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
+```
+
 ### Sticky
 
 In sticky mode, the nav-item will be fixed to top when scroll to top.
@@ -144,3 +164,5 @@ The component provides the following[CSS variables](https://developer.mozilla.or
 | `--tab-active-line-color`     | `tab-item` active state `underline` color                                     | `#0088ff`                        |
 | `--tabs-background-color`     | tabs Background color                                                         | `#ffffff`                        |
 | `--tab-item-background-color` | `tab-item` Background color                                                   | `#ffffff`                        |
+| `--tab-item-shrink-width`     | In shrink mode `tab-item` width                                               | `auto`                           |
+| `--tab-item-shrink-padding`   | In shrink mode `tab-item` horizontal `padding`                                | `0`                              |
diff --git a/packages/quarkd/src/tab/doc-react.zh-CN.md b/packages/quarkd/src/tab/doc-react.zh-CN.md
index 55878ff1..e1aa65a7 100644
--- a/packages/quarkd/src/tab/doc-react.zh-CN.md
+++ b/packages/quarkd/src/tab/doc-react.zh-CN.md
@@ -95,6 +95,26 @@ export default () => {
 };
 ```
 
+### 收缩布局
+
+通过 shrink 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。
+
+```html
+<Tabs shrink>
+  <TabContent label="tab1"> tab1 content </TabContent>
+  <TabContent label="tab2"> tab2 content </TabContent>
+  <TabContent label="tab3"> tab3 content </TabContent>
+  <TabContent label="tab4"> tab4 content </TabContent>
+</Tabs>
+```
+
+```css
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
+```
+
 ### 吸顶效果
 
 nav-item 在滚动时固定在屏幕上方
@@ -144,3 +164,5 @@ nav-item 在滚动时固定在屏幕上方
 | `--tab-active-line-color`     | `tab-item` 激活态`下划线`颜色             | `#0088ff `                |
 | `--tabs-background-color`     | tabs 背景色                               | `#ffffff`                 |
 | `--tab-item-background-color` | `tab-item` 背景色                         | `#ffffff `                |
+| `--tab-item-shrink-width`     | 收缩布局下`tab-item`宽度                  | `auto`                    |
+| `--tab-item-shrink-padding`   | 收缩布局下`tab-item`左右`padding`         | `0`                       |
diff --git a/packages/quarkd/src/tab/doc.en-US.md b/packages/quarkd/src/tab/doc.en-US.md
index c5771644..b6fa3290 100644
--- a/packages/quarkd/src/tab/doc.en-US.md
+++ b/packages/quarkd/src/tab/doc.en-US.md
@@ -109,6 +109,26 @@ methods: {
 }
 ```
 
+### Shrink
+
+In shrink mode, the tabs will be shrinked to the left.
+
+```html
+<quark-tabs shrink>
+  <quark-tab-content label="tab1" name="a"> tab1 content </quark-tab-content>
+  <quark-tab-content label="tab2" name="b"> tab2 content </quark-tab-content>
+  <quark-tab-content label="tab3" name="c"> tab3 content </quark-tab-content>
+  <quark-tab-content label="tab4" name="d"> tab4 content </quark-tab-content>
+</quark-tabs>
+```
+
+```css
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
+```
+
 ### Sticky
 
 In sticky mode, the nav-item will be fixed to top when scroll to top.
@@ -163,3 +183,5 @@ The component provides the following[CSS variables](https://developer.mozilla.or
 | `--tab-active-line-color`     | `tab-item` active state `underline` color                                     | `#0088ff`                        |
 | `--tabs-background-color`     | tabs Background color                                                         | `#ffffff`                        |
 | `--tab-item-background-color` | `tab-item` Background color                                                   | `#ffffff`                        |
+| `--tab-item-shrink-width`     | In shrink mode `tab-item` width                                               | `auto`                           |
+| `--tab-item-shrink-padding`   | In shrink mode `tab-item` horizontal `padding`                                | `0`                              |
diff --git a/packages/quarkd/src/tab/doc.zh-CN.md b/packages/quarkd/src/tab/doc.zh-CN.md
index 6ab96cc4..34a011ef 100644
--- a/packages/quarkd/src/tab/doc.zh-CN.md
+++ b/packages/quarkd/src/tab/doc.zh-CN.md
@@ -109,6 +109,26 @@ methods: {
 }
 ```
 
+### 收缩布局
+
+通过 shrink 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。
+
+```html
+<quark-tabs shrink>
+  <quark-tab-content label="tab1" name="a"> tab1 content </quark-tab-content>
+  <quark-tab-content label="tab2" name="b"> tab2 content </quark-tab-content>
+  <quark-tab-content label="tab3" name="c"> tab3 content </quark-tab-content>
+  <quark-tab-content label="tab4" name="d"> tab4 content </quark-tab-content>
+</quark-tabs>
+```
+
+```css
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
+```
+
 ### 吸顶效果
 
 nav-item 在滚动时固定在屏幕上方
@@ -163,3 +183,5 @@ nav-item 在滚动时固定在屏幕上方
 | `--tab-active-line-color`     | `tab-item` 激活态`下划线`颜色             | `#0088ff `                |
 | `--tabs-background-color`     | tabs 背景色                               | `#ffffff`                 |
 | `--tab-item-background-color` | `tab-item` 背景色                         | `#ffffff `                |
+| `--tab-item-shrink-width`     | 收缩布局下`tab-item`宽度                  | `auto`                    |
+| `--tab-item-shrink-padding`   | 收缩布局下`tab-item`左右`padding`         | `0`                       |
diff --git a/packages/quarkd/src/tab/index.tsx b/packages/quarkd/src/tab/index.tsx
index 62a0831e..1222975d 100644
--- a/packages/quarkd/src/tab/index.tsx
+++ b/packages/quarkd/src/tab/index.tsx
@@ -9,6 +9,7 @@ import { slotAssignedElements } from "../../utils/public";
 import "../sticky";
 import tabs from "./tabs-style.css";
 import tab from "./tab-style.css";
+
 export interface ContentProps {
   label: string;
   disabled?: boolean;
@@ -19,6 +20,8 @@ export interface Props {
   sticky?: boolean;
   offsettop?: number;
   linewidth?: number;
+  shrink?: boolean;
+  dark?: boolean;
 }
 export interface CustomEvent {
   change: (e: { detail: { label: string; name: string } }) => void;
@@ -62,6 +65,11 @@ class QuarkTabs extends QuarkElement {
   })
   dark = false;
 
+  @property({
+    type: Boolean,
+  })
+  shrink = false;
+
   @state()
   init = false;
 
@@ -341,11 +349,17 @@ class QuarkTabs extends QuarkElement {
   renderTabNav = () => {
     return (
       <div class="quark-tab-nav-con">
-        <div class="quark-tab-nav" ref={this.navRef}>
+        <div
+          class={`quark-tab-nav ${
+            this.shrink ? "quark-tab-nav__shrink" : "quark-tab-nav__flex"
+          }`}
+          ref={this.navRef}
+        >
           {this.tabNavs.map((item) => (
             <quark-tab-nav
               active={item.name === this.activekey}
               disabled={item.disabled}
+              shrink={this.shrink}
               dark={item.dark}
               name={item.name}
               onClick={(e: any) => this.handleClick(e, item)}
@@ -405,6 +419,11 @@ class QuarkTabNav extends QuarkElement {
   })
   dark = false;
 
+  @property({
+    type: Boolean,
+  })
+  shrink = false;
+
   @property()
   name: string | number = 0;
 
diff --git a/packages/quarkd/src/tab/tab-style.css b/packages/quarkd/src/tab/tab-style.css
index 61833295..86ac90df 100644
--- a/packages/quarkd/src/tab/tab-style.css
+++ b/packages/quarkd/src/tab/tab-style.css
@@ -11,6 +11,12 @@
   background-color: var(--tab-item-background-color, #fff);
 }
 
+:host([shrink]) {
+  min-width: auto;
+  width: var(--tab-item-shrink-width, auto);
+  padding: 0 var(--tab-item-shrink-padding, 0);
+}
+
 :host([active]) {
   font-weight: 500;
   color: var(--tab-item-active-color, #333333);
@@ -21,6 +27,7 @@
   color: var(--tab-item-disabled-color, quark-formDisabledColor);
   pointer-events: none;
 }
+
 :host([disabled]) .quark-tab-nav {
   cursor: not-allowed;
 }
@@ -38,4 +45,5 @@
   width: 100%;
   text-align: center;
   cursor: pointer;
+  background-color: transparent;
 }
\ No newline at end of file
diff --git a/packages/quarkd/src/tab/tabs-style.css b/packages/quarkd/src/tab/tabs-style.css
index 741a5163..4038be93 100644
--- a/packages/quarkd/src/tab/tabs-style.css
+++ b/packages/quarkd/src/tab/tabs-style.css
@@ -18,7 +18,7 @@
   scroll-behavior: smooth;
 }
 
-.quark-tab-nav {
+.quark-tab-nav__flex {
   display: flex;
 }
 

From 2cf81dc84963ce4ba91c939e08099daeea7a6d56 Mon Sep 17 00:00:00 2001
From: yunxia <plato_ccxx@163.com>
Date: Thu, 25 Jan 2024 15:40:56 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=96=87=E5=AD=97=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E8=AE=BE=E7=BD=AE=E8=83=8C=E6=99=AF=E8=89=B2=E9=80=8F?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/quarkd/src/tab/tab-style.css  | 3 +--
 packages/quarkd/src/tab/tabs-style.css | 4 ++++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/quarkd/src/tab/tab-style.css b/packages/quarkd/src/tab/tab-style.css
index 86ac90df..da847251 100644
--- a/packages/quarkd/src/tab/tab-style.css
+++ b/packages/quarkd/src/tab/tab-style.css
@@ -45,5 +45,4 @@
   width: 100%;
   text-align: center;
   cursor: pointer;
-  background-color: transparent;
-}
\ No newline at end of file
+}
diff --git a/packages/quarkd/src/tab/tabs-style.css b/packages/quarkd/src/tab/tabs-style.css
index 4038be93..a361991e 100644
--- a/packages/quarkd/src/tab/tabs-style.css
+++ b/packages/quarkd/src/tab/tabs-style.css
@@ -73,4 +73,8 @@
 
 :host([dark][active]) .quark-tab-line {
   color: #fff;
+}
+
+::selection {
+  background: transparent;
 }
\ No newline at end of file