@oinone/kunlun-vue-ui-antd 6.3.9 → 6.4.0

package/src/component/oio-tabs/style/index.scss

@@ -139,6 +139,49 @@
     }
   }
 
+  &.ant-tabs-card.ant-tabs-bottom > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+  &.ant-tabs-card.ant-tabs-bottom > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+  &.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+  &.ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
+    margin-left: calc(var(--oio-margin-sm) / 2);
+    border-radius: var(--oio-border-radius-sm) var(--oio-border-radius-sm) 0 0;
+  }
+
+  &.ant-tabs-card.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+  &.ant-tabs-card.ant-tabs-left > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+  &.ant-tabs-card.ant-tabs-right > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+  &.ant-tabs-card.ant-tabs-right > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
+    margin-top: calc(var(--oio-margin-sm) / 2);
+  }
+
+  &.ant-tabs-left {
+    .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active {
+      border-right-color: transparent;
+    }
+  }
+
+  &.ant-tabs-top {
+    &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
+  &.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
+    border-color: var(--oio-border-color);
+    background: var(--oio-tabs-card-tab-background);
+    &.ant-tabs-tab-active {
+      background: var(--oio-tabs-card-tab-active-background);
+      .ant-tabs-tab-btn {
+        color: var(--oio-tabs-active-text-color);
+      }
+    }
+
+    &:hover {
+      color: var(--oio-tabs-active-text-color);
+    }
+  }
+
   &.ant-tabs-card {
     & > .ant-tabs-nav .ant-tabs-tab,
     & > div > .ant-tabs-nav .ant-tabs-tab {
@@ -150,6 +193,27 @@
     }
   }
 
+  &.#{$tabsClassPrefix}-accent-card {
+    &.ant-tabs-top {
+      .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active {
+        box-shadow: inset 0px 2px 0px 0 var(--oio-primary-color);
+      }
+    }
+
+    &.ant-tabs-left {
+      .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active {
+        box-shadow: inset -2px 0px 0 0 var(--oio-primary-color);
+      }
+    }
+
+    &.ant-tabs-card.ant-tabs-bottom > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+    &.ant-tabs-card.ant-tabs-bottom > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+    &.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
+    &.ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
+      border-radius: 0;
+    }
+  }
+
   .ant-tabs-content {
     border: none;
     padding: 0;

package/src/component/oio-tabs/use-tab-bar.ts

@@ -1,18 +1,12 @@
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { DEFAULT_TAB_TITLE, TabHTMLNode } from '@oinone/kunlun-vue-ui-common';
+import { Tooltip as ATooltip } from 'ant-design-vue';
 import { createVNode, Ref, unref, VNode } from 'vue';
 import { DEFAULT_PREFIX } from '../../theme';
-import { Tooltip as ATooltip } from 'ant-design-vue';
-import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 
 export function useTabBar(title: string | Ref<string>, help?: string | Ref<string>): VNode {
   const titleValue = unref(title) || DEFAULT_TAB_TITLE;
-  const vnodes = [
-    createVNode(
-      'span',
-      { class: 'oio-tab-title', title: titleValue },
-      titleValue
-    )
-  ]
+  const vnodes = [createVNode('span', { class: 'oio-tab-title', title: titleValue }, titleValue)];
   const helpValue = unref(help) || '';
   if (helpValue && helpValue !== '') {
     vnodes.push(
@@ -24,7 +18,12 @@ export function useTabBar(title: string | Ref<string>, help?: string | Ref<strin
             return [createVNode('span', {}, helpValue)];
           },
           default: () => {
-            return [createVNode(QuestionCircleOutlined, { class: 'oio-question-icon', style: { marginLeft: '5px' } as CSSStyleDeclaration })];
+            return [
+              createVNode(QuestionCircleOutlined, {
+                class: 'oio-question-icon',
+                style: { marginLeft: '5px' } as CSSStyleDeclaration
+              })
+            ];
           }
         }
       )

package/src/component/oio-tooltip/oio-tooltip-help.vue

@@ -13,8 +13,7 @@ export default defineComponent({
   },
   props: {
     content: {
-      type: String,
-      required: true
+      type: String
     }
   },
   slots: ['default', 'title'],

package/src/component/oio-tree/oio-tree.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
-import { StringHelper } from '@oinone/kunlun-shared';
+import { OioTreeNode, StringHelper } from '@oinone/kunlun-shared';
 import {
-  OioTreeNode,
   OioTreeProps,
   PropRecordHelper,
   TreeNodeCheckedEvent,

package/src/component/oio-tree/style/index.scss

@@ -28,6 +28,10 @@
   .anticon {
     color: var(--oio-icon-color);
   }
+
+  & > .ant-tree-treenode[aria-hidden="true"] {
+    padding: 0;
+  }
 }
 
 .ant-tree-checkbox-checked .ant-tree-checkbox-inner {

package/src/index.ts

@@ -1,3 +1,4 @@
 import './style/index.scss';
 
 export * from './component';
+export * from './vc-component/use-max-tag-placeholder';

package/src/style/index.scss

@@ -11,6 +11,7 @@
 @import '../component/oio-group/style/index.scss';
 @import '../component/oio-inner-popup/style/index.scss';
 @import '../component/oio-input/style/index.scss';
+@import '../component/oio-list/style/index.scss';
 @import '../component/oio-modal/style/index.scss';
 @import '../component/oio-notification/style/index.scss';
 @import '../component/oio-pagination/style/index.scss';