From c4200daa259f930b740e1afba1594d941c0ba593 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 6 Mar 2023 22:18:02 +0800
Subject: [PATCH 1/5] =?UTF-8?q?button=20=E7=A6=81=E7=94=A8=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/button/__demo__/BtnBasic.vue   | 20 ++--
 .../src/components/button/style/index.scss    |  7 +-
 .../src/components/button/style/var.scss      | 93 +++++++++----------
 3 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
index 48e282c20..e2c34eb27 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
@@ -9,12 +9,12 @@ import { OButton } from '../index';
       <div class="block">
         <div class="row">
           <OButton variant="outline">Outline Button</OButton>
-          <OButton variant="solid">Fill Button</OButton>
+          <OButton variant="solid">Solid Button</OButton>
           <OButton variant="text">Text Button</OButton>
         </div>
         <div class="row">
           <OButton variant="outline" disabled>Outline Button</OButton>
-          <OButton variant="solid" disabled>Fill Button</OButton>
+          <OButton variant="solid" disabled>Solid Button</OButton>
           <OButton variant="text" disabled>Text Button</OButton>
         </div>
       </div>
@@ -24,12 +24,12 @@ import { OButton } from '../index';
       <div class="block">
         <div class="row">
           <OButton variant="outline" color="primary">Outline Button</OButton>
-          <OButton variant="solid" color="primary">Fill Button</OButton>
+          <OButton variant="solid" color="primary">Solid Button</OButton>
           <OButton variant="text" color="primary">Text Button</OButton>
         </div>
         <div class="row">
           <OButton variant="outline" color="primary" disabled>Outline Button</OButton>
-          <OButton variant="solid" color="primary" disabled>Fill Button</OButton>
+          <OButton variant="solid" color="primary" disabled>Solid Button</OButton>
           <OButton variant="text" color="primary" disabled>Text Button</OButton>
         </div>
       </div>
@@ -39,12 +39,12 @@ import { OButton } from '../index';
       <div class="block">
         <div class="row">
           <OButton variant="outline" color="success">Outline Button</OButton>
-          <OButton variant="solid" color="success">Fill Button</OButton>
+          <OButton variant="solid" color="success">Solid Button</OButton>
           <OButton variant="text" color="success">Text Button</OButton>
         </div>
         <div class="row">
           <OButton variant="outline" color="success" disabled>Outline Button</OButton>
-          <OButton variant="solid" color="success" disabled>Fill Button</OButton>
+          <OButton variant="solid" color="success" disabled>Solid Button</OButton>
           <OButton variant="text" color="success" disabled>Text Button</OButton>
         </div>
       </div>
@@ -54,12 +54,12 @@ import { OButton } from '../index';
       <div class="block">
         <div class="row">
           <OButton variant="outline" color="warning">Outline Button</OButton>
-          <OButton variant="solid" color="warning">Fill Button</OButton>
+          <OButton variant="solid" color="warning">Solid Button</OButton>
           <OButton variant="text" color="warning">Text Button</OButton>
         </div>
         <div class="row">
           <OButton variant="outline" color="warning" disabled>Outline Button</OButton>
-          <OButton variant="solid" color="warning" disabled>Fill Button</OButton>
+          <OButton variant="solid" color="warning" disabled>Solid Button</OButton>
           <OButton variant="text" color="warning" disabled>Text Button</OButton>
         </div>
       </div>
@@ -69,12 +69,12 @@ import { OButton } from '../index';
       <div class="block">
         <div class="row">
           <OButton variant="outline" color="danger">Outline Button</OButton>
-          <OButton variant="solid" color="danger">Fill Button</OButton>
+          <OButton variant="solid" color="danger">Solid Button</OButton>
           <OButton variant="text" color="danger">Text Button</OButton>
         </div>
         <div class="row">
           <OButton variant="outline" color="danger" disabled>Outline Button</OButton>
-          <OButton variant="solid" color="danger" disabled>Fill Button</OButton>
+          <OButton variant="solid" color="danger" disabled>Solid Button</OButton>
           <OButton variant="text" color="danger" disabled>Text Button</OButton>
         </div>
       </div>
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index 5a9c33677..d31d993a1 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -19,7 +19,6 @@
     cursor: not-allowed;
   }
 }
-
 .o-btn-outline {
   color: var(--btn-color);
   border: 1px solid var(--btn-bd-color);
@@ -77,6 +76,12 @@
   }
 }
 
+.o-btn-disabled {
+  color: var(--btn-color-disabled);
+  border: 1px solid var(--btn-bd-color-disabled);
+  background-color: var(--btn-bg-color-disabled);
+}
+
 .o-btn-small {
   padding: 0 7px;
   height: var(--o-size-s);
diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss
index 2b74b0bab..92a6bd767 100644
--- a/packages/opendesign/src/components/button/style/var.scss
+++ b/packages/opendesign/src/components/button/style/var.scss
@@ -1,76 +1,90 @@
 .o-btn {
-  --btn-color: var(--o-color-info1);
+  --btn-color: var(--o-color-info2);
   --btn-color-hover: var(--o-color-info1);
   --btn-color-active: var(--o-color-info1);
 
   --btn-bd-color: var(--o-color-control1);
   --btn-bd-color-hover: var(--o-color-control2);
   --btn-bd-color-active: var(--o-color-control3);
+  --btn-bd-color-disabled: var(--o-color-control1);
 
   &.o-btn-solid {
+    --btn-color: var(--o-color-info1-inverse);
+    --btn-color-hover: var(--o-color-info1-inverse);
+    --btn-color-active: var(--o-color-info1-inverse);
+    --btn-color-disabled: var(--o-color-info1-inverse);
+
     --btn-bg-color: var(--o-color-control1-light);
     --btn-bg-color-hover: var(--o-color-control2-light);
     --btn-bg-color-active: var(--o-color-control3-light);
+    --btn-bd-color-disabled: var(--o-color-control4-light);
 
     --btn-bd-color: var(--o-color-control1-light);
     --btn-bd-color-hover: var(--o-color-control2-light);
     --btn-bd-color-active: var(--o-color-control3-light);
+    --btn-bg-color-disabled: var(--o-color-control4-light);
   }
 
   &.o-btn-text {
+    --btn-bd-color-disabled: transparent;
     --btn-bg-color-hover: var(--o-color-control1-light);
     --btn-bg-color-active: var(--o-color-control2-light);
   }
-
-  &.o-btn-disabled {
-    --btn-color: var(--o-color-info4);
-    --btn-bg-color: var(--o-color-control4-light);
-    --btn-bd-color: var(--o-color-control4-light);
+}
+.o-btn-normal {
+  --btn-color-disabled: var(--o-color-info4);
+  &.o-btn-solid {
+    --btn-color: var(--o-color-info2);
+    --btn-color-hover: var(--o-color-info2);
+    --btn-color-active: var(--o-color-info2);
+    --btn-color-disabled: var(--o-color-info4);
   }
 }
 .o-btn-primary {
   --btn-color: var(--o-color-primary1);
-  --btn-color-hover: var(--o-color-primary1);
-  --btn-color-active: var(--o-color-primary1);
+  --btn-color-hover: var(--o-color-primary2);
+  --btn-color-active: var(--o-color-primary3);
+  --btn-color-disabled: var(--o-color-primary4);
 
   --btn-bd-color: var(--o-color-primary1);
   --btn-bd-color-hover: var(--o-color-primary2);
   --btn-bd-color-active: var(--o-color-primary3);
+  --btn-bd-color-disabled: var(--o-color-primary4);
 
   &.o-btn-solid {
     --btn-bg-color: var(--o-color-primary1);
     --btn-bg-color-hover: var(--o-color-primary2);
     --btn-bg-color-active: var(--o-color-primary3);
+    --btn-bg-color-disabled: var(--o-color-primary4);
 
     --btn-bd-color: var(--o-color-primary1);
     --btn-bd-color-hover: var(--o-color-primary2);
     --btn-bd-color-active: var(--o-color-primary3);
+    --btn-bd-color-disabled: var(--o-color-primary4-light);
   }
 
   &.o-btn-text {
+    --btn-bd-color-disabled: transparent;
     --btn-bg-color-hover: var(--o-color-primary1-light);
     --btn-bg-color-active: var(--o-color-primary2-light);
   }
-
-  &.o-btn-disabled {
-    --btn-color: var(--o-color-primary4);
-    --btn-bg-color: var(--o-color-primary4);
-    --btn-bd-color: var(--o-color-primary4);
-  }
 }
 .o-btn-success {
   --btn-color: var(--o-color-success1);
-  --btn-color-hover: var(--o-color-success1);
-  --btn-color-active: var(--o-color-success1);
+  --btn-color-hover: var(--o-color-success2);
+  --btn-color-active: var(--o-color-success3);
+  --btn-color-disabled: var(--o-color-success4);
 
   --btn-bd-color: var(--o-color-success1);
   --btn-bd-color-hover: var(--o-color-success2);
   --btn-bd-color-active: var(--o-color-success3);
+  --btn-bd-color-disabled: var(--o-color-success4);
 
   &.o-btn-solid {
     --btn-bg-color: var(--o-color-success1);
     --btn-bg-color-hover: var(--o-color-success2);
     --btn-bg-color-active: var(--o-color-success3);
+    --btn-bg-color-disabled: var(--o-color-success4);
 
     --btn-bd-color: var(--o-color-success1);
     --btn-bd-color-hover: var(--o-color-success2);
@@ -78,29 +92,27 @@
   }
 
   &.o-btn-text {
+    --btn-bd-color-disabled: transparent;
     --btn-bg-color-hover: var(--o-color-success1-light);
     --btn-bg-color-active: var(--o-color-success2-light);
   }
-
-  &.o-btn-disabled {
-    --btn-color: var(--o-color-success4);
-    --btn-bg-color: var(--o-color-success4);
-    --btn-bd-color: var(--o-color-success4);
-  }
 }
 .o-btn-warning {
   --btn-color: var(--o-color-warning1);
-  --btn-color-hover: var(--o-color-warning1);
-  --btn-color-active: var(--o-color-warning1);
+  --btn-color-hover: var(--o-color-warning2);
+  --btn-color-active: var(--o-color-warning3);
+  --btn-color-disabled: var(--o-color-warning4);
 
   --btn-bd-color: var(--o-color-warning1);
   --btn-bd-color-hover: var(--o-color-warning2);
   --btn-bd-color-active: var(--o-color-warning3);
+  --btn-bd-color-disabled: var(--o-color-warning4);
 
   &.o-btn-solid {
     --btn-bg-color: var(--o-color-warning1);
     --btn-bg-color-hover: var(--o-color-warning2);
     --btn-bg-color-active: var(--o-color-warning3);
+    --btn-bg-color-disabled: var(--o-color-warning4);
 
     --btn-bd-color: var(--o-color-warning1);
     --btn-bd-color-hover: var(--o-color-warning2);
@@ -108,6 +120,7 @@
   }
 
   &.o-btn-text {
+    --btn-bd-color-disabled: transparent;
     --btn-bg-color-hover: var(--o-color-warning1-light);
     --btn-bg-color-active: var(--o-color-warning2-light);
   }
@@ -120,17 +133,20 @@
 }
 .o-btn-danger {
   --btn-color: var(--o-color-danger1);
-  --btn-color-hover: var(--o-color-danger1);
-  --btn-color-active: var(--o-color-danger1);
+  --btn-color-hover: var(--o-color-danger2);
+  --btn-color-active: var(--o-color-danger3);
+  --btn-color-disabled: var(--o-color-danger4);
 
   --btn-bd-color: var(--o-color-danger1);
   --btn-bd-color-hover: var(--o-color-danger2);
   --btn-bd-color-active: var(--o-color-danger3);
+  --btn-bd-color-disabled: var(--o-color-danger4);
 
   &.o-btn-solid {
     --btn-bg-color: var(--o-color-danger1);
     --btn-bg-color-hover: var(--o-color-danger2);
     --btn-bg-color-active: var(--o-color-danger3);
+    --btn-bg-color-disabled: var(--o-color-danger4);
 
     --btn-bd-color: var(--o-color-danger1);
     --btn-bd-color-hover: var(--o-color-danger2);
@@ -138,33 +154,10 @@
   }
 
   &.o-btn-text {
+    --btn-bd-color-disabled: transparent;
     --btn-bg-color-hover: var(--o-color-danger1-light);
     --btn-bg-color-active: var(--o-color-danger2-light);
   }
-
-  &.o-btn-disabled {
-    --btn-color: var(--o-color-danger4);
-    --btn-bg-color: var(--o-color-danger4);
-    --btn-bd-color: var(--o-color-danger4);
-  }
-}
-
-.o-btn-solid {
-  --btn-color: var(--o-color-info1-inverse);
-  --btn-color-hover: var(--o-color-info1-inverse);
-  --btn-color-active: var(--o-color-info1-inverse);
-
-  &.o-btn-normal:not(.o-btn-disabled) {
-    --btn-color: var(--o-color-info1);
-    --btn-color-hover: var(--o-color-info1);
-    --btn-color-active: var(--o-color-info1);
-  }
-  &.o-btn-disabled {
-    --btn-color: var(--o-color-info1-inverse);
-    &.o-btn-normal {
-      --btn-color: var(--o-color-info4);
-    }
-  }
 }
 
 .o-btn-round-pill {
-- 
Gitee


From f76a15cc9382d0d5b15c97c2a9d62690602ca736 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 6 Mar 2023 22:27:10 +0800
Subject: [PATCH 2/5] up

---
 packages/opendesign/src/components/input/style/var.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss
index df5605d63..fdf7d2997 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -90,10 +90,6 @@
   --input-prepend-append-bg-color: var(--o-color-control1-light);
 }
 
-.o-input-disabled {
-  --input-color: var(--o-color-info4);
-}
-
 .o-input-size-small {
   --input-height: var(--o-size-s);
   --input-text-size: var(--o-font_size-tip1);
-- 
Gitee


From 183f1f1aa0de47ba450e04a0c5a0850204f6754a Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 7 Mar 2023 14:33:05 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E8=A7=A3=E5=86=B3select=20option=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/select/OSelect.vue  | 15 +++++++++------
 .../components/select/__demo__/SelectBasic.vue    |  2 +-
 .../select/__demo__/SelectPopupposition.vue       |  2 +-
 .../opendesign/src/components/select/types.ts     |  7 -------
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 59eb3cc21..a16c910fe 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -14,13 +14,14 @@ const emits = defineEmits<{
   (e: 'clear', evt: Event): void;
 }>();
 
+const optionsRef = ref<HTMLElement | null>(null);
+
 const round = getRoundClass(props, 'select');
 
-const activeLabel = ref(props.defaultLabel || props.modelValue);
+const activeLabel = ref(props.modelValue);
 const activeVal = ref(props.modelValue);
 
 const isClearable = computed(() => props.clearable && !props.disabled);
-console.log(isClearable.value);
 
 // 清除值
 const clearClick = (e: Event) => {
@@ -78,7 +79,11 @@ provide(selectOptionInjectKey, {
       </span>
       <div v-if="isClearable" class="o-select-clear" @click="clearClick"><IconClose class="o-select-clear-icon" /></div>
     </span>
-
+    <teleport :to="optionsRef" :disabled="!optionsRef">
+      <div v-show="optionsRef" class="o-select-option-wrap">
+        <slot></slot>
+      </div>
+    </teleport>
     <OPopup
       v-if="!props.disabled"
       v-model:visible="showOption"
@@ -91,9 +96,7 @@ provide(selectOptionInjectKey, {
       :adjust-min-width="props.optionWidthMode === 'min-width'"
       :adjust-width="props.optionWidthMode === 'width'"
     >
-      <div class="o-select-options" :class="[`o-select-options-size-${props.size || defaultSize}`, props.optionWrapClass]">
-        <slot></slot>
-      </div>
+      <div ref="optionsRef" class="o-select-options" :class="[`o-select-options-size-${props.size || defaultSize}`, props.optionWrapClass]"></div>
     </OPopup>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectBasic.vue b/packages/opendesign/src/components/select/__demo__/SelectBasic.vue
index dc46b0d3a..7b2accc9e 100644
--- a/packages/opendesign/src/components/select/__demo__/SelectBasic.vue
+++ b/packages/opendesign/src/components/select/__demo__/SelectBasic.vue
@@ -8,7 +8,7 @@ const options = [
   { label: 'option 3', value: 'opt3' },
   { label: 'option 4', value: 'opt4' },
 ];
-const selectVal1 = ref('');
+const selectVal1 = ref('opt1');
 const selectVal2 = ref(options[0].value);
 </script>
 <template>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
index e8cbd05de..55ab60bbf 100644
--- a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
+++ b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { OSelect } from '../index';
 import { OOption } from '../../option';
 
-const selectVal = ref('option 1');
+const selectVal = ref('opt2');
 const selectVal2 = ref('');
 const options = [
   { label: 'option 1', value: 'opt1' },
diff --git a/packages/opendesign/src/components/select/types.ts b/packages/opendesign/src/components/select/types.ts
index dd96d8612..9b2ba2622 100644
--- a/packages/opendesign/src/components/select/types.ts
+++ b/packages/opendesign/src/components/select/types.ts
@@ -98,13 +98,6 @@ export const selectProps = {
     type: Boolean,
     default: true
   },
-  /**
-   * 默认初始值对应的label显示，不传则使用modelValue
-   * 当unmountOnClose为true时，存在初始值对应label无法获取问题，可使用该属性指定初始值
-   */
-  defaultLabel: {
-    type: String,
-  },
   /**
    * 过渡名称
    */
-- 
Gitee


From a6eee1ce2926390ed42c34d8757f5b90f1d9924f Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 7 Mar 2023 17:50:49 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E4=BC=98=E5=8C=96tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/tabs/OTabPane.vue          | 134 ++++++++++++++----
 .../opendesign/src/components/tabs/OTabs.vue  | 117 +++++++--------
 .../src/components/tabs/TabContent.vue        |  83 -----------
 .../opendesign/src/components/tabs/TabNav.vue | 113 ---------------
 .../components/tabs/__demo__/TabsBasic.vue    |  18 ++-
 .../opendesign/src/components/tabs/provide.ts |  21 +--
 .../src/components/tabs/style/index.scss      |  18 ++-
 .../opendesign/src/components/tabs/types.ts   |  18 +--
 8 files changed, 194 insertions(+), 328 deletions(-)
 delete mode 100644 packages/opendesign/src/components/tabs/TabContent.vue
 delete mode 100644 packages/opendesign/src/components/tabs/TabNav.vue

diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
index 9ef0fc946..f59f419b2 100644
--- a/packages/opendesign/src/components/tabs/OTabPane.vue
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -1,35 +1,113 @@
 <script lang="ts">
-import { defineComponent, getCurrentInstance, inject, reactive } from 'vue';
+export default {
+  inheritAttrs: false,
+};
+</script>
+<script setup lang="ts">
+import { computed, getCurrentInstance, inject, onMounted, nextTick, ref, watch } from 'vue';
 import { tabsInjectKey } from './provide';
 import { tabPaneProps } from './types';
+import { IconClose } from '../_shared/icons';
+
+const props = defineProps(tabPaneProps);
+
+const isClosed = ref(false);
+
+const navRef = ref<HTMLElement | null>(null);
+
+const tabsInjection = inject(tabsInjectKey, null);
+
+const { navsRef, activeValue, lazy } = tabsInjection || {};
+console.log(props.transition);
+
+const instance = getCurrentInstance();
+if (!props.value && !props.label) {
+  console.warn('OTabPane is missing prop: value or lable');
+}
+const paneKey = computed(() => {
+  return props.value || props.label || instance?.uid || Math.random();
+});
+
+const isActive = computed(() => paneKey.value === activeValue?.value);
+const hasActived = ref(isActive.value);
+const toMount = computed(() => {
+  if (isActive.value) {
+    return true;
+  }
+  if ((props.lazy || lazy) && !hasActived.value) {
+    return false;
+  }
+  if (props.unmountOnHide) {
+    return false;
+  }
+  return true;
+});
+console.log(toMount.value, props.unmountOnHide);
 
-export default defineComponent({
-  name: 'OTabs',
-  props: tabPaneProps,
-  setup(props, { slots, attrs }) {
-    const tabsInjection = inject(tabsInjectKey, null);
-
-    const instance = getCurrentInstance();
-
-    if (instance?.uid) {
-      const id = props.value || props.label || instance?.uid;
-
-      tabsInjection?.addTabItem(
-        id,
-        reactive({
-          value: id,
-          label: props.label,
-          lazy: tabsInjection.lazy || props.lazy,
-          disabled: props.disabled,
-          closable: props.closable,
-          transition: props.transition,
-          unmountOnHide: props.unmountOnHide,
-          attrs: attrs,
-          slots: slots,
-        })
-      );
+watch(
+  () => isActive.value,
+  (v: boolean) => {
+    if (v) {
+      hasActived.value = true;
+      tabsInjection?.updateValue(paneKey.value, navRef.value);
     }
-    return () => {};
-  },
+  }
+);
+
+const navClick = () => {
+  if (!props.disabled) {
+    tabsInjection?.updateValue(paneKey.value, navRef.value);
+  }
+};
+const navCloseClick = (e: MouseEvent) => {
+  e.stopImmediatePropagation();
+  isClosed.value = true;
+
+  tabsInjection?.onDeletePane(paneKey.value, e);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    tabsInjection?.initValue(paneKey.value, navRef.value);
+  });
 });
 </script>
+<template>
+  <teleport v-if="navsRef && !isClosed" :to="navsRef">
+    <div
+      ref="navRef"
+      :class="[
+        'o-tab-nav',
+        {
+          'is-active': isActive,
+          'is-disabled': props.disabled,
+          'is-closable': props.closable,
+        },
+      ]"
+      @click="navClick"
+    >
+      <div class="o-tab-nav-title">
+        <slot name="nav">{{ props.label || props.value }}</slot>
+      </div>
+      <div v-if="props.closable" class="o-tab-nav-close" @click="navCloseClick"><IconClose /></div>
+    </div>
+  </teleport>
+
+  <transition :name="props.transition">
+    <div
+      v-if="!isClosed && toMount"
+      v-show="isActive"
+      v-bind="$attrs"
+      :class="[
+        'o-tab-pane',
+        {
+          'is-active': isActive,
+          'is-disabled': props.disabled,
+          'is-closable': props.closable,
+        },
+      ]"
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue
index 67012e108..14bd832bb 100644
--- a/packages/opendesign/src/components/tabs/OTabs.vue
+++ b/packages/opendesign/src/components/tabs/OTabs.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { computed, provide, reactive, ref, nextTick } from 'vue';
-import { tabsInjectKey, TabNavData } from './provide';
-import TabNav from './TabNav.vue';
-import TabContent from './TabContent.vue';
+import { provide, ref, nextTick } from 'vue';
+import { tabsInjectKey } from './provide';
 import { IconAdd } from '../_shared/icons';
 import { tabsProps } from './types';
 
@@ -10,7 +8,7 @@ const props = defineProps(tabsProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string | number): void;
-  (e: 'change', value: string | number, oldValue: string | number): void;
+  (e: 'change', value: string | number, oldValue?: string | number): void;
   (e: 'delete', value: string | number): void;
   (e: 'add', evt: MouseEvent): void;
 }>();
@@ -18,42 +16,11 @@ const emits = defineEmits<{
 const activeKey = ref(props.modelValue);
 const archorStyle = ref<Record<string, string>>({});
 
-const tabsMap = reactive(new Map<string | number, TabNavData>());
-const addTabItem = (tabKey: string | number, tabData: TabNavData) => {
-  tabsMap.set(tabKey, tabData);
-};
-const removeTabItem = (tabKey: string | number) => {
-  tabsMap.delete(tabKey);
-};
-// nav构造数据
-const navList = computed(() => {
-  const rlt: TabNavData[] = [];
-  tabsMap.forEach((val) => {
-    rlt.push(val);
-  });
-
-  return rlt;
-});
-
-const navKeys = computed(() => {
-  const keys = navList.value.map((item) => item.value);
-
-  return keys;
-});
+const navsRef = ref<HTMLElement | null>(null);
+const bodyRef = ref<HTMLElement | null>(null);
 
-const activeValue = computed(() => {
-  if (!navKeys.value.includes(activeKey.value)) {
-    emits('update:modelValue', navKeys.value[0]);
+const valueSet: Array<string | number> = [];
 
-    return navKeys.value[0];
-  }
-  return activeKey.value;
-});
-
-provide(tabsInjectKey, {
-  lazy: props.lazy,
-  addTabItem,
-});
 const updateArchor = (el: HTMLElement) => {
   nextTick(() => {
     const { clientWidth, offsetLeft } = el;
@@ -64,38 +31,61 @@ const updateArchor = (el: HTMLElement) => {
   });
 };
 
-let activeEl: HTMLElement | null = null;
-const onNavSelect = (value: string | number, el: HTMLElement) => {
-  if (el) {
-    updateArchor(el);
-    activeEl = el;
-  }
-};
-// nav选择
-const onNavClick = (value: string | number) => {
-  if (activeValue.value !== value) {
-    emits('change', value, activeValue.value);
+// 更新tab当前选中值
+const updateValue = (value: string | number, navEl: HTMLElement | null) => {
+  emits('update:modelValue', value);
+
+  if (activeKey.value !== value) {
+    emits('change', value, activeKey.value);
     activeKey.value = value;
-    emits('update:modelValue', value);
+  }
+
+  if (navEl) {
+    updateArchor(navEl);
   }
 };
 
+// 初始化tab，如果没有选中项，默认第一个
+const initValue = (value: string | number, navEl: HTMLElement | null) => {
+  if (!valueSet.includes(value)) {
+    valueSet.push(value);
+  }
+
+  if (activeKey.value === undefined) {
+    updateValue(value, navEl);
+  }
+
+  if (activeKey.value === value && navEl) {
+    updateArchor(navEl);
+  }
+};
 // 删除页签
-const onDeleteNav = (value: string | number) => {
-  removeTabItem(value);
+const onDeletePane = (value: string | number) => {
   emits('delete', value);
-  if (activeEl) {
-    updateArchor(activeEl);
+  const idx = valueSet.indexOf(value);
+
+  if (activeKey.value === value) {
+    activeKey.value = valueSet[idx > 0 ? idx - 1 : 0];
+    emits('change', activeKey.value, value);
   }
+  valueSet.splice(idx, 1);
 };
 // 添加页签
 const onAddNav = (e: MouseEvent) => {
   emits('add', e);
 };
+provide(tabsInjectKey, {
+  lazy: props.lazy,
+  navsRef,
+  bodyRef,
+  activeValue: activeKey,
+  updateValue,
+  onDeletePane,
+  initValue,
+});
 </script>
 <template>
   <div class="o-tabs">
-    <slot></slot>
     <div
       class="o-tabs-head"
       :class="[
@@ -115,16 +105,7 @@ const onAddNav = (e: MouseEvent) => {
           'justify-content': props.navJustify,
         }"
       >
-        <TabNav
-          v-for="item in navList"
-          :key="item.value"
-          class="o-tabs-nav"
-          :active-value="activeValue"
-          v-bind="item"
-          @click="onNavClick"
-          @select="onNavSelect"
-          @delete="onDeleteNav"
-        />
+        <div ref="navsRef" class="o-tabs-navs-wrap"></div>
         <div v-if="props.variant === 'text'" class="o-tab-nav-archor" :style="archorStyle">
           <slot name="archor">
             <div class="o-tab-nav-archor-line"></div>
@@ -138,8 +119,8 @@ const onAddNav = (e: MouseEvent) => {
         <slot name="suffix"></slot>
       </div>
     </div>
-    <div class="o-tabs-body">
-      <TabContent v-for="item in navList" :key="item.value" class="o-tab-pane" :active-value="activeValue" v-bind="item" />
+    <div ref="bodyRef" class="o-tabs-body">
+      <slot></slot>
     </div>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/tabs/TabContent.vue b/packages/opendesign/src/components/tabs/TabContent.vue
deleted file mode 100644
index afaf74d0e..000000000
--- a/packages/opendesign/src/components/tabs/TabContent.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-import { computed, defineComponent, h, mergeProps, PropType, Transition, vShow, withDirectives, SetupContext, Slots } from 'vue';
-
-export default defineComponent({
-  name: 'TabContent',
-  inheritAttrs: false,
-  props: {
-    /**
-     * tabs选中的key
-     */
-    value: {
-      type: [String, Number],
-      default: undefined,
-    },
-    /**
-     * tabs选中的key
-     */
-    activeValue: {
-      type: [String, Number],
-      default: undefined,
-    },
-    /**
-     * 是否在隐藏时卸载
-     */
-    unmountOnHide: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 过渡动画
-     */
-    transition: {
-      type: String,
-      default: '',
-    },
-    /**
-     * nav插槽
-     */
-    slots: {
-      type: Object as PropType<Slots>,
-      default: undefined,
-    },
-    /**
-     * 过渡动画
-     */
-    attrs: {
-      type: Object as PropType<SetupContext['attrs']>,
-      default: () => {},
-    },
-    lazy: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const active = computed(() => props.activeValue === props.value);
-    const toMount = computed(() => (props.lazy ? active.value : true));
-
-    // content只渲染default 插槽的内容
-    return () => {
-      const p = mergeProps(
-        {
-          class: ['o-tab-content', { active: active.value }],
-        },
-        props.attrs
-      );
-
-      const child = h('div', p, props.slots?.default?.());
-
-      return h(Transition, { name: props.transition }, () => {
-        if (!toMount.value) {
-          return null;
-        }
-        if (props.unmountOnHide) {
-          return active.value ? child : null;
-        } else {
-          return withDirectives(child, [[vShow, active.value]]);
-        }
-      });
-    };
-  },
-});
-</script>
diff --git a/packages/opendesign/src/components/tabs/TabNav.vue b/packages/opendesign/src/components/tabs/TabNav.vue
deleted file mode 100644
index 7a8563dba..000000000
--- a/packages/opendesign/src/components/tabs/TabNav.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script lang="ts">
-import { computed, defineComponent, h, ref, onMounted, PropType, Slots, watch } from 'vue';
-import { IconClose } from '../_shared/icons';
-
-export default defineComponent({
-  name: 'OTabNav',
-  inheritAttrs: false,
-  props: {
-    /**
-     * 该页签key
-     */
-    value: {
-      type: [String, Number],
-      default: undefined,
-    },
-    /**
-     * 页签文本
-     */
-    label: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * tabs选中页签的key
-     */
-    activeValue: {
-      type: [String, Number],
-      default: undefined,
-    },
-    /**
-     * nav插槽
-     */
-    slots: {
-      type: Object as PropType<Slots>,
-      default: undefined,
-    },
-    /**
-     * 是否禁用选中
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 是否可以删除
-     */
-    closable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['click', 'delete', 'select'],
-  setup(props, { emit }) {
-    const navRef = ref<HTMLElement | null>(null);
-    const defaultLabel = props.label || props.value;
-
-    const active = computed(() => props.activeValue === props.value);
-
-    watch(
-      () => active.value,
-      (v: Boolean) => {
-        if (v) {
-          emit('select', props.value, navRef.value);
-        }
-      }
-    );
-
-    const navClick = (e: MouseEvent) => {
-      if (props.disabled || active.value) {
-        return;
-      }
-      emit('click', props.value, e);
-    };
-
-    const navCloseClick = (e: MouseEvent) => {
-      e.stopImmediatePropagation();
-      emit('delete', props.value, e);
-    };
-
-    onMounted(() => {
-      if (active.value && navRef.value) {
-        emit('select', props.value, navRef.value);
-      }
-    });
-
-    // pane只渲染default 插槽的内容
-    return () => {
-      const children = props.slots?.nav?.();
-
-      const titleNode = h('div', { class: 'o-tab-nav-title' }, children || defaultLabel);
-
-      const closeNode = h('div', { class: 'o-tab-nav-close', onClick: navCloseClick }, h(IconClose.value));
-
-      return h(
-        'div',
-        {
-          class: [
-            'o-tab-nav',
-            {
-              active: active.value,
-              'is-disabled': props.disabled,
-              'is-closable': props.closable,
-            },
-          ],
-          onClick: navClick,
-          ref: navRef,
-        },
-        props.closable ? [titleNode, closeNode] : titleNode
-      );
-    };
-  },
-});
-</script>
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
index 84fdca259..31bf2db94 100644
--- a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
+++ b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
@@ -3,7 +3,8 @@ import { ref, reactive } from 'vue';
 import { OTabs, OTabPane } from '../index';
 import { IconSearch } from '../../icons';
 const activeTab = ref('Tab A');
-const tabChange = (val: string | number, oldVal: string | number) => {
+const activeTab2 = ref('1');
+const tabChange = (val: string | number, oldVal?: string | number) => {
   console.log(`active: ${val}, old: ${oldVal}`);
 };
 function getPanelItem(key: string) {
@@ -26,15 +27,18 @@ const tabAdd = () => {
 const tabDelete = (v: string | number) => {
   console.log(v);
 };
+const onChange = (v: string | number, oldv?: string | number) => {
+  console.log('change', v, oldv);
+};
 </script>
 <template>
   <h4>Variant</h4>
   <div class="sec">
     <p>Solid</p>
-    <OTabs variant="solid">
+    <OTabs variant="solid" @change="onChange">
       <OTabPane class="pane" label="Tab 1">pane 1</OTabPane>
       <OTabPane class="pane" label="Tab 2" closable lazy><div style="height: 50px">pane 2</div></OTabPane>
-      <OTabPane class="pane" label="Tab 3" lazy>pane 3</OTabPane>
+      <OTabPane class="pane" label="Tab 3" unmount-on-hide>pane 3</OTabPane>
       <OTabPane class="pane" label="Tab 4" disabled closable>pane 4</OTabPane>
     </OTabs>
     <p>line:false</p>
@@ -62,7 +66,7 @@ const tabDelete = (v: string | number) => {
   </div>
   <h4>Slot & change</h4>
   <div class="sec">
-    <OTabs v-model="activeTab" @change="tabChange">
+    <OTabs v-model="activeTab" addable @change="tabChange">
       <template #prefix>Prefix</template>
       <template #suffix>Suffix</template>
       <OTabPane value="Tab A" class="pane"><template #nav>Nav 1</template>pane 1 </OTabPane>
@@ -73,7 +77,7 @@ const tabDelete = (v: string | number) => {
       <OTabPane value="Tab D" class="pane">pane 4</OTabPane>
     </OTabs>
     <p>center</p>
-    <OTabs v-model="activeTab" nav-justify="center" @change="tabChange">
+    <OTabs v-model="activeTab" nav-justify="center" addable @change="tabChange">
       <template #prefix>Prefix</template>
       <template #suffix>Suffix</template>
       <OTabPane value="Tab A" class="pane"><template #nav>Nav 1</template>pane 1 </OTabPane>
@@ -84,9 +88,9 @@ const tabDelete = (v: string | number) => {
       <OTabPane value="Tab D" class="pane">pane 4</OTabPane>
     </OTabs>
   </div>
-  <h4>Add & Delete</h4>
+  <h4>Add & Lazy</h4>
   <div class="sec">
-    <OTabs v-model="activeTab" lazy addable @change="tabChange" @add="tabAdd" @delete="tabDelete">
+    <OTabs v-model="activeTab2" lazy addable @change="tabChange" @add="tabAdd" @delete="tabDelete">
       <OTabPane v-for="(item, idx) in tabList" :key="item.id" :value="item.id" class="pane" :label="item.label" :closable="idx > 1">
         {{ item.content }}
       </OTabPane>
diff --git a/packages/opendesign/src/components/tabs/provide.ts b/packages/opendesign/src/components/tabs/provide.ts
index 83d284bf1..da5f3b85c 100644
--- a/packages/opendesign/src/components/tabs/provide.ts
+++ b/packages/opendesign/src/components/tabs/provide.ts
@@ -1,20 +1,13 @@
-import { InjectionKey, Ref, Slots, SetupContext } from 'vue';
-
-export interface TabNavData {
-  value: string | number;
-  label?: string;
-  transition?: string,
-  unmountOnHide?: boolean,
-  disabled?: boolean;
-  closable?: boolean;
-  lazy?: boolean;
-  slots?: Slots;
-  attrs?: SetupContext['attrs'],
-}
+import { InjectionKey, Ref } from 'vue';
 
 
 export const tabsInjectKey: InjectionKey<{
   lazy: boolean,
-  addTabItem: (key: string | number, data: TabNavData) => void,
+  navsRef: Ref<HTMLElement | null>,
+  bodyRef: Ref<HTMLElement | null>,
+  activeValue: Ref<string | number | undefined>,
+  initValue: (value: string | number, navEl: HTMLElement | null) => void,
+  updateValue: (value: string | number, navEl: HTMLElement | null) => void,
+  onDeletePane: (value: string | number, evt: MouseEvent) => void,
 }> = Symbol('provide-tabs');
 
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
index 0e38b3ecc..0a4117078 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -26,6 +26,10 @@
     border-bottom: var(--tabs-nav-divider);
   }
 }
+.o-tabs-navs-wrap {
+  display: inline-flex;
+  align-items: center;
+}
 .o-tab-nav {
   display: inline-flex;
   align-items: center;
@@ -36,9 +40,6 @@
   background-color: var(--tabs-nav-bg-color);
   position: relative;
   z-index: 1;
-  + .o-tab-nav {
-    margin-left: 8px;
-  }
 
   &:hover {
     color: var(--tabs-nav-color-hover);
@@ -46,7 +47,7 @@
     background-color: var(--tabs-nav-bg-color-hover);
   }
 
-  &.active {
+  &.is-active {
     color: var(--tabs-nav-color-active);
     border-color: var(--tabs-nav-bd-color-active);
     background-color: var(--tabs-nav-bg-color-active);
@@ -126,11 +127,16 @@
   display: flex;
 }
 
-.o-tab-content {
+.o-tab-pane {
   flex-shrink: 0;
   width: 100%;
   display: none;
-  &.active {
+  &.is-active {
     display: block;
   }
 }
+.o-tabs-solid {
+  .o-tab-nav + .o-tab-nav {
+    margin-left: 8px;
+  }
+}
diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts
index b8c9f73f0..b3ddf43aa 100644
--- a/packages/opendesign/src/components/tabs/types.ts
+++ b/packages/opendesign/src/components/tabs/types.ts
@@ -7,7 +7,7 @@ export const tabsProps = {
    */
   modelValue: {
     type: [String, Number],
-    default: ''
+    default: undefined
   },
   /**
    * VariantT
@@ -61,13 +61,6 @@ export const tabPaneProps = {
     type: String,
     default: undefined,
   },
-  /**
-   * 是否在隐藏时卸载页签内容
-   */
-  unmountOnHide: {
-    type: Boolean,
-    default: false,
-  },
   /**
    * 页签切换时过渡动画
    */
@@ -90,12 +83,19 @@ export const tabPaneProps = {
     default: false,
   },
   /**
-   * 是否页签首次激活时再加载页签内容
+   * 是否页签首次激活前不渲染页签内容
    */
   lazy: {
     type: Boolean,
     default: false,
   },
+  /**
+   * 是否在隐藏时卸载页签内容
+   */
+  unmountOnHide: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export type TabPanePropsT = ExtractPropTypes<typeof tabPaneProps>;
\ No newline at end of file
-- 
Gitee


From f8ad071da3473adc93c87f160259be453daac660 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 7 Mar 2023 17:59:14 +0800
Subject: [PATCH 5/5] fix

---
 .../opendesign/src/components/checkbox-group/OCheckboxGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
index 32e7a3049..95dbdd780 100644
--- a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
@@ -22,7 +22,7 @@ watch(
   }
 );
 
-const isMinimum = computed(() => (isArray(props.min) ? false : realValue.value.length <= props.min));
+const isMinimum = computed(() => (isUndefined(props.min) ? false : realValue.value.length <= props.min));
 
 const isMaximum = computed(() => (isUndefined(props.max) ? false : realValue.value.length >= props.max));
 
-- 
Gitee