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

package/dist/types/src/component/oio-tabs/oio-tabs.vue.d.ts

@@ -1,4 +1,4 @@
-import { OioTabPosition } from '@oinone/kunlun-vue-ui-common';
+import { OioTabPosition, OioTabsBizStyle, OioTabsType } from '@oinone/kunlun-vue-ui-common';
 declare const _default: import("vue").DefineComponent<{
     id: {
         type: StringConstructor;
@@ -18,7 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: import("vue").PropType<"line" | "card" | "editable-card" | import("@oinone/kunlun-vue-ui-common").OioTabsType>;
+        type: import("vue").PropType<"line" | "card" | "editable-card" | OioTabsType>;
+    };
+    bizStyle: {
+        type: import("vue").PropType<OioTabsBizStyle>;
     };
     layout: {
         type: import("vue").PropType<import("@oinone/kunlun-vue-ui-common").FormLayout | "horizontal" | "vertical" | "inline">;
@@ -41,6 +44,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     id: string;
     origin: import("vue").Ref<any>;
+    currentType: import("vue").ComputedRef<"line" | "card" | "editable-card" | OioTabsType | undefined>;
     onUpdateActiveKey: (val: any) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:active-key"[], "update:active-key", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
@@ -61,7 +65,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: import("vue").PropType<"line" | "card" | "editable-card" | import("@oinone/kunlun-vue-ui-common").OioTabsType>;
+        type: import("vue").PropType<"line" | "card" | "editable-card" | OioTabsType>;
+    };
+    bizStyle: {
+        type: import("vue").PropType<OioTabsBizStyle>;
     };
     layout: {
         type: import("vue").PropType<import("@oinone/kunlun-vue-ui-common").FormLayout | "horizontal" | "vertical" | "inline">;

package/dist/types/src/component/oio-tooltip/oio-tooltip-help.vue.d.ts

@@ -1,12 +1,10 @@
 declare const _default: import("vue").DefineComponent<{
     content: {
         type: StringConstructor;
-        required: true;
     };
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     content: {
         type: StringConstructor;
-        required: true;
     };
 }>>, {}>;
 export default _default;

package/dist/types/src/component/oio-tree/oio-tree.vue.d.ts

@@ -1,4 +1,4 @@
-import { OioTreeNode } from '@oinone/kunlun-vue-ui-common';
+import { OioTreeNode } from '@oinone/kunlun-shared';
 declare const _default: import("vue").DefineComponent<{
     blockNode: {
         type: BooleanConstructor;

package/dist/types/src/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oinone/kunlun-vue-ui-antd",
-  "version": "6.3.9",
+  "version": "6.4.0",
   "main": "index.ts",
   "scripts": {
     "prebuild": "rimraf dist",
@@ -13,10 +13,10 @@
     "doc": "typedoc --out docs src/index.ts"
   },
   "dependencies": {
-    "@oinone/kunlun-vue-ui-common": "6.3.9"
+    "@oinone/kunlun-vue-ui-common": "6.4.0"
   },
   "devDependencies": {
-    "@oinone/kunlun-shared": "~6.3.0",
+    "@oinone/kunlun-shared": "~6.4.0",
     "@types/lodash": "4.14.182",
     "@types/lodash-es": "4.17.6",
     "ant-design-vue": "3.2.14",

package/src/component/index.ts

@@ -17,6 +17,7 @@ export * from './oio-gallery';
 export * from './oio-group';
 export * from './oio-inner-popup';
 export * from './oio-input';
+export * from './oio-list';
 export * from './oio-modal';
 export * from './oio-notification';
 export * from './oio-pagination';

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

@@ -92,7 +92,7 @@ export default defineComponent({
     };
   },
   render() {
-    const { type, htmlType, block, href, target, internalLoading, disabled, onClick, selected } = this;
+    const { type, htmlType, block, href, target, internalLoading, disabled, onClick, selected, iconColor } = this;
     const slots = PropRecordHelper.collectionSlots(this.$slots, [
       {
         origin: 'default',
@@ -101,7 +101,7 @@ export default defineComponent({
       'icon'
     ]);
     if (!slots.icon && this.icon) {
-      slots.icon = () => [createVNode(OioIcon, { icon: this.icon })];
+      slots.icon = () => [createVNode(OioIcon, { icon: this.icon, color: iconColor })];
     }
     const buttonClassList = [`${DEFAULT_PREFIX}-button`, `${DEFAULT_PREFIX}-button-${this.type}`];
     if (this.bizStyle) {

package/src/component/oio-button/style/a-button.scss

@@ -20,33 +20,41 @@
 }
 
 @mixin biz-type-style($prefix: $buttonParameterPrefix) {
-  $dangerPrefix: $prefix + -danger;
-
-  &.#{$buttonClassPrefix}-biz-type-danger {
-    @include oio-appearance($dangerPrefix);
-    @include event-style($dangerPrefix);
-  }
+  &.#{$buttonClassPrefix}-biz-type-info {
+    $infoPrefix: $prefix + -info;
 
-  $infoPrefix: $prefix + -info;
+    --oio-icon-color: var(#{$infoPrefix + -text-color});
 
-  &.#{$buttonClassPrefix}-biz-type-info {
     @include oio-appearance($infoPrefix);
     @include event-style($infoPrefix);
   }
 
-  $warningPrefix: $prefix + -warning;
-
   &.#{$buttonClassPrefix}-biz-type-warning {
+    $warningPrefix: $prefix + -warning;
+
+    --oio-icon-color: var(#{$warningPrefix + -text-color});
+
     @include oio-appearance($warningPrefix);
     @include event-style($warningPrefix);
   }
 
-  $successPrefix: $prefix + -success;
-
   &.#{$buttonClassPrefix}-biz-type-success {
+    $successPrefix: $prefix + -success;
+
+    --oio-icon-color: var(#{$successPrefix + -text-color});
+
     @include oio-appearance($successPrefix);
     @include event-style($successPrefix);
   }
+
+  $dangerPrefix: $prefix + -danger;
+
+  &.#{$buttonClassPrefix}-biz-type-danger {
+    --oio-icon-color: var(#{$dangerPrefix + -text-color});
+
+    @include oio-appearance($dangerPrefix);
+    @include event-style($dangerPrefix);
+  }
 }
 
 &.ant-btn {
@@ -147,7 +155,7 @@ $primaryParameterPrefix: $buttonParameterPrefix + -primary;
   @include event-style($primaryParameterPrefix);
   @include biz-type-style($primaryParameterPrefix);
 
-  .oio-icon {
+  .#{$iconClassPrefix} {
     color: #ffffff;
   }
 }
@@ -208,3 +216,84 @@ $linkParameterPrefix: $buttonParameterPrefix + -link;
     }
   }
 }
+
+&.ant-btn-text {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    --oio-icon-color: var(#{$buttonParameterPrefix + -text-color-hover});
+
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &[disabled] {
+    background-color: transparent;
+    border-color: transparent;
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &.#{$buttonClassPrefix}-biz-type-info {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+      --oio-icon-color: var(#{$buttonParameterPrefix + -default-info-text-color});
+
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &.#{$buttonClassPrefix}-biz-type-warning {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+      --oio-icon-color: var(#{$buttonParameterPrefix + -default-warning-text-color});
+
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &.#{$buttonClassPrefix}-biz-type-success {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+      --oio-icon-color: var(#{$buttonParameterPrefix + -default-success-text-color});
+
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &.#{$buttonClassPrefix}-biz-type-danger {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+      --oio-icon-color: var(#{$buttonParameterPrefix + -default-danger-text-color});
+
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+}

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

@@ -1,8 +1,28 @@
 @import './parameters.scss';
 
 .#{$checkboxClassPrefix} {
-  .ant-checkbox-inner {
+  .ant-checkbox-inner,
+  .ant-checkbox-indeterminate .ant-checkbox-inner {
     background-color: var(--oio-background);
     border: 1px solid var(--oio-border-color);
   }
+
+  .ant-checkbox-checked .ant-checkbox-inner {
+    background-color: var(--oio-primary-color, #035dff);
+    border-color: var(--oio-primary-color, #035dff);
+  }
+
+  .ant-checkbox-input:focus + .ant-checkbox-inner,
+  .ant-checkbox-wrapper:hover .ant-checkbox-inner,
+  .ant-checkbox:hover .ant-checkbox-inner {
+    border-color: var(--oio-primary-color, #035dff);
+  }
+
+  .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after {
+    border-color: #f5f5f5;
+  }
+
+  .ant-checkbox-indeterminate .ant-checkbox-inner:after {
+    background-color: var(--oio-primary-color, #035dff);
+  }
 }

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

@@ -8,6 +8,7 @@
 
     & > .ant-collapse-item {
       border-color: var(--oio-border-color);
+      border-bottom: 1px solid var(--oio-border-color);
     }
 
     .ant-collapse-header {
@@ -49,7 +50,7 @@
   }
 
   &.#{$collapseClassPrefix}-stripe.ant-collapse {
-    background-color: #fafafa;
+    background-color: var(--oio-stripe-color);
   }
 
   .ant-collapse-item-disabled > .ant-collapse-header,

package/src/component/oio-date-time-picker/style/index.scss

@@ -10,13 +10,14 @@
     @include oio-appearance($inputParameterPrefix);
     height: var($parameterPrefix + -height);
     line-height: var($inputParameterPrefix + -line-height);
-    font-size: var(--oio-font-size);
+    font-size: var($parameterPrefix + -font-size);
     padding: 12px;
 
     &:hover {
       @include oio-hover($inputParameterPrefix);
     }
 
+    &.ant-picker-focused,
     &:focus {
       @include oio-focus($inputParameterPrefix);
     }
@@ -40,15 +41,15 @@
   }
 
   .ant-picker-input > input {
-    color: var(--oio-text-color);
+    color: var($parameterPrefix + -text-color);
 
     &[disabled] {
-      color: var(--oio-disabled-color);
+      color: var($parameterPrefix + -disabled-color);
     }
   }
 
   .ant-picker-suffix {
-    color: var(--oio-icon-color) !important;
+    color: var($parameterPrefix + -icon-color) !important;
   }
 
   .ant-picker-clear {
@@ -91,7 +92,7 @@
     &.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single),
     &.ant-picker-cell-in-range {
       &:before {
-        background-color: rgba(var(--oio-primary-color-rgb), 0.1);
+        background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
       }
     }
   }
@@ -102,16 +103,16 @@
   }
 
   .ant-picker-panel-container {
-    background: var(--oio-background);
+    background: var($parameterPrefix + -background);
   }
 
   .ant-picker-footer-extra {
-    border-bottom-color: var(--oio-border-color);
+    border-bottom-color: var($parameterPrefix + -border-color);
   }
 
   .ant-picker-header {
-    color: var(--oio-text-color);
-    border-bottom-color: var(--oio-border-color);
+    color: var($parameterPrefix + -text-color);
+    border-bottom-color: var($parameterPrefix + -border-color);
   }
 
   .ant-picker-datetime-panel .ant-picker-time-panel,
@@ -119,7 +120,7 @@
   .ant-picker-panel .ant-picker-footer,
   .ant-picker-panel .ant-picker-footer,
   .ant-picker-panel {
-    border-color: var(--oio-border-color);
+    border-color: var($parameterPrefix + -border-color);
     border-bottom: 0;
   }
 
@@ -141,7 +142,7 @@
 
   .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
   .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
-    .ant-picker-cell-inner {
+  .ant-picker-cell-inner {
     background: var($parameterPrefix + -menu-hover-background-color);
     color: var($parameterPrefix + -text-color);
   }
@@ -154,21 +155,21 @@
     .ant-picker-cell.ant-picker-cell-in-view {
       .ant-picker-cell-inner {
         color: var($parameterPrefix + -text-color);
-        font-size: var(--oio-font-size);
+        font-size: var($parameterPrefix + -font-size);
         text-align: center;
       }
 
       &:active:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
         .ant-picker-cell-inner {
-          color: #ffffff;
+          color: var($parameterPrefix + -datetime-cell-internal-text-color-hover);
           background-color: var($parameterPrefix + -primary-color-active);
         }
       }
 
       &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
         .ant-picker-cell-inner {
-          color: #ffffff;
-          background-color: var($parameterPrefix + -primary-color-hover);
+          color: var($parameterPrefix + -datetime-cell-internal-text-color-hover);
+          background-color: var($parameterPrefix + -datetime-background-hover);
         }
       }
 
@@ -191,13 +192,13 @@
             position: relative;
 
             &:active {
-              color: #ffffff;
+              color: var($parameterPrefix + -datetime-text-color-active);
               background-color: var($parameterPrefix + -primary-color-active);
             }
 
             &:hover {
-              color: #ffffff;
-              background-color: var($parameterPrefix + -primary-color-hover);
+              color: var($parameterPrefix + -datetime-cell-internal-text-color-hover);
+              background-color: var($parameterPrefix + -datetime-background-hover);
             }
           }
         }
@@ -205,7 +206,7 @@
 
       &.ant-picker-cell-selected {
         .ant-picker-cell-inner {
-          color: #ffffff;
+          color: var($parameterPrefix + -datetime-text-color-selected);
           background-color: var($parameterPrefix + -primary-color);
           border-radius: 2px;
         }
@@ -217,22 +218,22 @@
     .ant-picker-time-panel-cell {
       .ant-picker-time-panel-cell-inner {
         color: var($parameterPrefix + -text-color);
-        font-size: var(--oio-font-size);
+        font-size: var($parameterPrefix + -font-size);
 
         &:active {
-          color: #ffffff;
+          color: var($parameterPrefix + -datetime-text-color-active);
           background-color: var($parameterPrefix + -primary-color-active);
         }
 
         &:hover {
-          color: #ffffff;
-          background-color: var($parameterPrefix + -primary-color-hover);
+          color: var($parameterPrefix + -datetime-cell-internal-text-color-hover);
+          background-color: var($parameterPrefix + -datetime-background-hover);
         }
       }
 
       &.ant-picker-time-panel-cell-selected {
         .ant-picker-time-panel-cell-inner {
-          color: #ffffff;
+          color: var($parameterPrefix + -datetime-text-color-selected);
           background-color: var($parameterPrefix + -primary-color);
         }
       }
@@ -243,27 +244,27 @@
     .ant-picker-cell.ant-picker-cell-in-view {
       .ant-picker-cell-inner {
         color: var($parameterPrefix + -text-color);
-        font-size: var(--oio-font-size);
+        font-size: var($parameterPrefix + -font-size);
         text-align: center;
       }
 
       &:active:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
         .ant-picker-cell-inner {
-          color: #ffffff;
+          color: var($parameterPrefix + -datetime-cell-internal-text-color-hover);
           background-color: var($parameterPrefix + -primary-color-active);
         }
       }
 
       &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
         .ant-picker-cell-inner {
-          color: #ffffff;
-          background-color: var($parameterPrefix + -primary-color-hover);
+          color: var($parameterPrefix + -datetime-cell-internal-text-color-hover);
+          background-color: var($parameterPrefix + -datetime-background-hover);
         }
       }
 
       &.ant-picker-cell-selected {
         .ant-picker-cell-inner {
-          color: #ffffff;
+          color: var($parameterPrefix + -datetime-text-color-selected);
           background-color: var($parameterPrefix + -primary-color);
           border-radius: 2px;
         }
@@ -291,7 +292,7 @@
       @include oio-appearance($buttonParameterPrefix + -primary);
 
       .oio-icon {
-        color: #ffffff;
+        color: var($parameterPrefix + -datetime-cell-internal-text-color-hover);
       }
 
       &:active {
@@ -312,37 +313,37 @@
     }
 
     .ant-picker-ranges .ant-picker-preset > .ant-tag-blue {
-      background-color: rgba(var(--oio-primary-color-rgb), 0.1);
-      border-color: var(--oio-primary-color);
-      color: var(--oio-primary-color);
+      background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+      border-color: var($parameterPrefix + -primary-color);
+      color: var($parameterPrefix + -primary-color);
     }
   }
 }
 
 .el-color-dropdown {
-  background: var(--oio-addon-color-pick-dropdown-background) !important;
-  border-color: var(--oio-addon-color-pick-dropdown-border-color) !important;
+  background: var($parameterPrefix + -addon-color-pick-dropdown-background) !important;
+  border-color: var($parameterPrefix + -addon-color-pick-dropdown-border-color) !important;
 
   .el-input__wrapper {
-    background: var(--oio-input-background);
-    box-shadow: 0 0 0 1px var(--oio-input-border-color, var(--el-border-color)) inset;
+    background: var($parameterPrefix + -input-background);
+    box-shadow: 0 0 0 1px var($parameterPrefix + -input-border-color, var(--el-border-color)) inset;
 
     .el-input__inner {
-      color: var(--oio-input-text-color);
+      color: var($parameterPrefix + -input-text-color);
     }
   }
 }
 
 .ant-picker-header-view button:hover {
-  color: var(--oio-primary-color);
+  color: var($parameterPrefix + -primary-color);
 }
 
 .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner,
 .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
 .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
-  background: var(--oio-primary-color);
+  background: var($parameterPrefix + -primary-color);
 }
 
 .ant-picker-today-btn {
-  color: var(--oio-primary-color);
+  color: var($parameterPrefix + -primary-color);
 }

package/src/component/oio-date-time-range-picker/style/index.scss

@@ -119,7 +119,7 @@
 
         &.ant-picker-cell-selected {
           .ant-picker-cell-inner {
-            color: #ffffff;
+            color: var(--oio-datetime-text-color-selected);
             background-color: var($parameterPrefix + -primary-color);
             border-radius: 2px;
           }
@@ -189,19 +189,19 @@
         font-size: var(--oio-font-size);
 
         &:active {
-          color: #ffffff;
+          color: var(--oio-datetime-text-color-active);
           background-color: var($parameterPrefix + -primary-color-active);
         }
 
         &:hover {
-          color: #ffffff;
+          color: var(--oio-datetime-cell-internal-text-color-hover);
           background-color: var($parameterPrefix + -primary-color-hover);
         }
       }
 
       &.ant-picker-time-panel-cell-selected {
         .ant-picker-time-panel-cell-inner {
-          color: #ffffff;
+          color: var(--oio-datetime-text-color-selected);
           background-color: var($parameterPrefix + -primary-color);
         }
       }
@@ -216,7 +216,7 @@
 
         &.ant-picker-cell-selected {
           .ant-picker-cell-inner {
-            color: #ffffff;
+            color: var(--oio-datetime-text-color-selected);
             background-color: var($parameterPrefix + -primary-color);
             border-radius: 2px;
           }