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

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

@@ -4,71 +4,6 @@
 
 .#{$modalClassPrefix} {
   padding: 0;
-  &.#{$modalClassPrefix}-width-small {
-    width: var($modalParameterPrefix + -width-small) !important;
-  }
-  &.#{$modalClassPrefix}-width-medium {
-    width: var($modalParameterPrefix + -width-medium) !important;
-  }
-  &.#{$modalClassPrefix}-width-large {
-    width: var($modalParameterPrefix + -width-large) !important;
-  }
-
-  &.#{$modalClassPrefix}-width-full {
-    width: 100% !important;
-    max-width: 100%;
-    &.ant-modal {
-      margin: 0;
-    }
-  }
-
-  &.#{$modalClassPrefix}-height-small {
-    .ant-modal-content {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      height: var($modalParameterPrefix + -height-small) !important;
-    }
-  }
-  &.#{$modalClassPrefix}-height-medium {
-    .ant-modal-content {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      height: var($modalParameterPrefix + -height-medium) !important;
-    }
-  }
-  &.#{$modalClassPrefix}-height-large {
-    .ant-modal-content {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      height: var($modalParameterPrefix + -height-large) !important;
-    }
-  }
-
-  &.#{$modalClassPrefix}-height-custom {
-    .ant-modal-content {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      height: var(--oio-modal-custom-height) !important;
-    }
-  }
-
-  &.#{$modalClassPrefix}-height-full {
-    &.ant-modal {
-      top: 0;
-      padding-bottom: 0;
-      margin: 0;
-    }
-
-    .ant-modal-content {
-      display: flex;
-      flex-direction: column;
-      height: calc(100vh);
-    }
-  }
 
   .ant-modal-body {
     flex: 1;
@@ -95,15 +30,20 @@
   }
 
   .ant-modal-content {
-    background: var($parameterPrefix + -background);
+    background-color: var($parameterPrefix + -background);
     border: 1px solid var($parameterPrefix + -border-color);
-    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: var(--oio-box-shadow);
     border-radius: var($parameterPrefix + -border-radius);
   }
 
+  .ant-modal-close {
+    margin: 16px;
+  }
+
   .ant-modal-close-x {
+    width: 24px;
+    height: 24px;
     color: var($parameterPrefix + -text-color);
-    height: 49px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -120,6 +60,26 @@
       color: var($parameterPrefix + -text-color);
       line-height: 24px;
       font-weight: var($parameterPrefix + -font-weight-bold);
+      position: relative;
+
+      .#{$modalClassPrefix}-title-extend {
+        height: 24px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        column-gap: 16px;
+        position: absolute;
+        top: 0;
+        right: 40px;
+
+        .oio-icon {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
     }
   }
 
@@ -129,9 +89,10 @@
   }
 
   .ant-modal-body {
-    padding: var($parameterPrefix + -margin-md);
     @include oio-scrollbar();
 
+    padding: var($parameterPrefix + -margin-md);
+
     .ant-modal-confirm-body-wrapper {
       .ant-modal-confirm-btns {
         button {
@@ -142,18 +103,18 @@
   }
 
   .ant-modal-footer {
+    @include oio-scrollbar();
+
     padding: var($parameterPrefix + -margin-md);
     border-top: 1px solid var($parameterPrefix + -border-color);
     overflow: auto hidden;
-    @include oio-scrollbar();
 
     button {
       @import '../../oio-button/style/a-button.scss';
 
       &.ant-btn {
         height: var($parameterPrefix + -height);
-        margin: var($parameterPrefix + -margin-xxs) 0 var($parameterPrefix + -margin-xxs)
-          var($parameterPrefix + -margin-md);
+        margin: var($parameterPrefix + -margin-xxs) 0 var($parameterPrefix + -margin-xxs) var($parameterPrefix + -margin-md);
 
         & + .ant-btn {
           margin-left: var($parameterPrefix + -margin-md);
@@ -161,7 +122,102 @@
       }
     }
   }
+
   .ant-modal-confirm-btns .ant-btn + .ant-btn {
     margin-left: 12px;
   }
+
+  &.#{$modalClassPrefix}-width-small {
+    width: var($modalParameterPrefix + -width-small);
+  }
+
+  &.#{$modalClassPrefix}-width-medium {
+    width: var($modalParameterPrefix + -width-medium);
+  }
+
+  &.#{$modalClassPrefix}-width-large {
+    width: var($modalParameterPrefix + -width-large);
+  }
+
+  &.#{$modalClassPrefix}-width-full {
+    width: 100%;
+    max-width: 100%;
+
+    &.ant-modal {
+      margin: 0;
+    }
+  }
+
+  &.#{$modalClassPrefix}-height-small {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: var($modalParameterPrefix + -height-small);
+    }
+  }
+
+  &.#{$modalClassPrefix}-height-medium {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: var($modalParameterPrefix + -height-medium);
+    }
+  }
+
+  &.#{$modalClassPrefix}-height-large {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: var($modalParameterPrefix + -height-large);
+    }
+  }
+
+  &.#{$modalClassPrefix}-height-full {
+    &.ant-modal {
+      top: 0;
+    }
+
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+
+  &.#{$modalClassPrefix}-height-custom {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: var(--oio-modal-custom-height);
+    }
+  }
+}
+
+.#{$modalClassPrefix}-wrapper.#{$modalClassPrefix}-drawer-mode {
+  display: flex;
+  justify-content: flex-end;
+
+  .#{$modalClassPrefix} {
+    &.#{$modalClassPrefix}-width-small {
+      width: var($drawerParameterPrefix + -width-small);
+    }
+
+    &.#{$modalClassPrefix}-width-medium {
+      width: var($drawerParameterPrefix + -width-medium);
+    }
+
+    &.#{$modalClassPrefix}-width-large {
+      width: var($drawerParameterPrefix + -width-large);
+    }
+
+    &.#{$modalClassPrefix}-height-full {
+      &.ant-modal {
+        right: 0;
+        margin: 0;
+      }
+    }
+  }
 }

package/src/component/oio-modal/style/parameters.scss

@@ -3,3 +3,7 @@
 $modalPrefix: $prefix + -modal;
 $modalParameterPrefix: $parameterPrefix + -modal;
 $modalClassPrefix: $modalPrefix;
+
+$drawerPrefix: $prefix + -drawer;
+$drawerParameterPrefix: $parameterPrefix + -drawer;
+$drawerClassPrefix: $drawerPrefix;

package/src/component/oio-notification/index.ts

@@ -23,7 +23,12 @@ export enum NotificationType {
   /**
    * 错误
    */
-  error = 'error'
+  error = 'error',
+
+  /**
+   * 二次确认
+   */
+  confirm = 'confirm'
 }
 
 const getIconVNode = (icon: string, color: string, size = '21') =>
@@ -127,7 +132,7 @@ class Notification {
       message: title ? createVNode('div', { class: `${DEFAULT_PREFIX}-notification-message-title` }, title) : '',
       description: message,
       icon: genNotificationIcon(type),
-      closeIcon: createVNode(OioCloseIcon, { volume: '16', size: '6' }),
+      closeIcon: createVNode(OioCloseIcon, { volume: '18', size: '10' }),
       class: StringHelper.append(
         [`${DEFAULT_PREFIX}-notification ${DEFAULT_PREFIX}-notification-${type}`],
         options?.class
@@ -174,6 +179,16 @@ class Notification {
   public error(title: string, message?: string, options?: OioNotificationOptions) {
     this.open(NotificationType.error, title, message, options);
   }
+
+  /**
+   * 打开【二次确认】类型的消息通知框 {@link NotificationType.confirm}
+   * @param title 消息标题
+   * @param content 消息内容
+   * @param options 可选项
+   */
+  public confirm(title: string, content: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.confirm, title, content, options);
+  }
 }
 
 /**

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

@@ -62,30 +62,30 @@
   .ant-pagination-next .ant-pagination-item-link,
   .ant-pagination-item {
     border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style)
-      var($parameterPrefix + -border-color);
+      var($paginationParameterPrefix + -border-color);
     border-radius: var($parameterPrefix + -border-radius);
 
     a {
-      color: var($parameterPrefix + -text-color);
+      color: var($paginationParameterPrefix + -text-color);
     }
 
     &:hover {
-      background-color: var($parameterPrefix + -primary-color-hover);
-      border-color: var($parameterPrefix + -primary-color-hover);
-      color: #ffffff;
+      background-color: var($paginationParameterPrefix + -background-hover);
+      border-color: var($paginationParameterPrefix + -border-color-hover);
+      color: var($paginationParameterPrefix + -text-color-hover);
 
       a {
-        color: #ffffff;
+        color: var($paginationParameterPrefix + -text-color-hover);
       }
     }
   }
 
   .ant-pagination-item-active {
-    background-color: var($parameterPrefix + -primary-color);
-    border-color: var($parameterPrefix + -primary-color);
+    background-color: var($paginationParameterPrefix + -background-active);
+    border-color: var($paginationParameterPrefix + -border-color-active);
 
     a {
-      color: #ffffff;
+      color: var($paginationParameterPrefix + -text-color-active);
     }
   }
 
@@ -162,8 +162,9 @@
   }
 
   .ant-pagination-item-active {
-    background-color: var(--oio-primary-color);
-    border-color: var(--oio-primary-color);
+    background-color: var($paginationParameterPrefix + -background-active);
+    border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style)
+      var($paginationParameterPrefix + -border-color-active);
   }
 
   .ant-pagination-options-quick-jumper {

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

@@ -1,5 +1,42 @@
 @import './parameters.scss';
 
+.#{$radioClassPrefix} {
+  .ant-radio-inner {
+    background-color: var(--oio-background);
+    border: 1px solid var(--oio-border-color);
+  }
+
+  .ant-radio-inner:after {
+    background-color: var(--oio-primary-color, #035dff);
+  }
+
+  .ant-radio-checked .ant-radio-inner {
+    border-color: var(--oio-primary-color, #035dff);
+  }
+
+  .ant-radio-input:focus + .ant-radio-inner,
+  .ant-radio-wrapper:hover .ant-radio,
+  .ant-radio:hover .ant-radio-inner {
+    border-color: var(--oio-primary-color, #035dff);
+  }
+
+  .ant-radio-input:focus + .ant-radio-inner {
+    box-shadow: 0 0 0 3px var(--oio-primary-color-10, #e6efff);
+  }
+}
+
+.#{$radioClassPrefix}-group {
+  .ant-radio-button-wrapper {
+    background-color: var(--oio-background);
+    border-color: var(--oio-border-color);
+    color: var(--oio-text-color);
+  }
+
+  .ant-radio-button-wrapper:not(:first-child):before {
+    background-color: var(--oio-border-color);
+  }
+}
+
 .ant-radio {
   .ant-radio-inner {
     background-color: var(--oio-background);
@@ -7,7 +44,7 @@
   }
 
   .ant-radio-checked .ant-radio-inner {
-    border-color: var(--oio-primary-color, #606cee);
+    border-color: var(--oio-primary-color, #035dff);
   }
 }
 

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

@@ -5,8 +5,8 @@ import {
   fillSelectItemProperties,
   OioSelectProps,
   PropRecordHelper,
-  SelectProperties,
-  SelectItem
+  SelectItem,
+  SelectProperties
 } from '@oinone/kunlun-vue-ui-common';
 import { Select as ASelect } from 'ant-design-vue';
 import { isString } from 'lodash-es';
@@ -23,8 +23,8 @@ export default defineComponent({
     ...OioSelectProps
   },
   slots: ['dropdownRender', 'removeIcon', 'clearIcon', 'suffixIcon', 'menuItemSelectedIcon'],
-  emits: ['update:value'],
-  setup(props) {
+  emits: ['update:value', 'update:dropdown-visible'],
+  setup(props, { emit }) {
     const internalProperties = computed<SelectProperties>(() => {
       return {
         ...defaultSelectProperties,
@@ -57,18 +57,29 @@ export default defineComponent({
       return value;
     });
 
+    const onUpdateValue = (val: boolean) => {
+      emit('update:value', val);
+    };
+
+    const onUpdateDropdownVisible = (val: boolean) => {
+      emit('update:dropdown-visible', val);
+    };
+
     return {
       internalProperties,
       internalOptions,
-      internalValue
+      internalValue,
+      onUpdateValue,
+      onUpdateDropdownVisible
     };
   },
   render() {
+    const { internalOptions, internalValue, onUpdateValue, onUpdateDropdownVisible } = this;
     return createVNode(
       ASelect,
       {
-        value: this.internalValue,
-        options: this.internalOptions,
+        value: internalValue,
+        options: internalOptions,
         filterOption: this.filterOption,
         autofocus: this.autofocus,
         placeholder: this.placeholder,
@@ -80,15 +91,17 @@ export default defineComponent({
         showSearch: this.showSearch,
         mode: this.mode,
         ...this.$attrs,
+        open: this.dropdownVisible,
         optionFilterProp: defaultSelectProperties.filterProp,
         optionLabelProp: defaultSelectProperties.labelProp,
-        'onUpdate:value': (val) => this.$emit('update:value', val),
-        class: StringHelper.append([`${DEFAULT_PREFIX}-select`], CastHelper.cast(this.$attrs.class)),
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-select`]),
         dropdownClassName: StringHelper.append(
           [`${DEFAULT_PREFIX}-select-dropdown`],
           CastHelper.cast(this.dropdownClassName)
         ).join(' '),
-        getPopupContainer: this.getTriggerContainer
+        getPopupContainer: this.getTriggerContainer,
+        'onUpdate:value': onUpdateValue,
+        onDropdownVisibleChange: onUpdateDropdownVisible
       },
       PropRecordHelper.collectionSlots(this.$slots, [
         'default',

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

@@ -23,7 +23,7 @@
   }
 
   .ant-select-arrow {
-    color: var($selectParameterPrefix + -counter-color);
+    color: var($selectParameterPrefix + -icon-color);
   }
 
   &.ant-select-single {

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

@@ -59,41 +59,58 @@ $tagRemoveLineHeight: $tagHeight - 4px;
   background: var(--oio-select-dropdown-background);
   box-shadow: var(--oio-select-dropdown-box-shadow);
 
+  .oio-input {
+    border: 0;
+    box-shadow: none;
+    border-radius: 0;
+    border-bottom: 1px solid var(--oio-border-color);
+
+    &:hover,
+    &:focus,
+    &.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):not(.oio-input-readonly) {
+      border: 0;
+      border-bottom: 1px solid var(--oio-border-color);
+      border-color: var(--oio-border-color);
+      box-shadow: none;
+    }
+  }
+
   .ant-select-item {
-    color: var(--oio-select-dropdown-color) !important;
+    color: var(--oio-select-dropdown-color);
 
     &:hover {
-      background: var(--oio-select-dropdown-selected) !important;
-      color: var(--oio-select-dropdown-selected-color) !important;
+      color: var(--oio-select-dropdown-hover-color);
+      background-color: var(--oio-select-dropdown-hover-background);
     }
 
     &.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-      background: var(--oio-select-dropdown-selected) !important;
+      background-color: var(--oio-select-dropdown-selected);
 
       .ant-select-item-option-content {
-        color: var(--oio-select-dropdown-selected-color) !important;
+        color: var(--oio-select-dropdown-selected-color);
       }
     }
 
     &.ant-select-item-option-disabled,
     &.ant-select-item.ant-select-item-option-selected.ant-select-item-option-disabled {
-      color: var(--oio-disabled-color) !important;
-      background: transparent !important;
+      color: var(--oio-disabled-color);
+      background: transparent;
       text-decoration-line: line-through;
+
       &:hover {
-        background: transparent !important;
-        color: var(--oio-disabled-color) !important;
+        background: transparent;
+        color: var(--oio-disabled-color);
       }
     }
   }
 
   .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
     color: var($parameterPrefix + -primary-color);
-    background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+    background-color: var(--oio-select-dropdown-selected);
   }
 
   .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-    background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+    background-color: var(--oio-select-dropdown-selected);
   }
 
   .ant-select-item-option-state {

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

@@ -6,6 +6,7 @@ $largeSize: 1.6em;
 
 .#{$spinClassPrefix} {
   background: var(--oio-spin-background);
+
   &-small {
     .#{$spinClassPrefix}-loading {
       width: $smallSize;
@@ -40,9 +41,3 @@ $largeSize: 1.6em;
     }
   }
 }
-
-.ant-spin-nested-loading > div > .ant-spin {
-  &.#{$spinClassPrefix} {
-    max-height: inherit;
-  }
-}

package/src/component/oio-tabs/oio-tab.vue

@@ -86,7 +86,7 @@ export default defineComponent({
             createVNode('div', { class: 'oio-tab' }, [
               createVNode(
                 'div',
-                { class: ['oio-tab-content', `oio-tab-${this.tabPosition}-content`] },
+                { class: ['oio-tab-content', `oio-tab-${this.tabPosition}-content`, 'oio-scrollbar'] },
                 { default: () => slots.default() }
               )
             ])

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

@@ -3,7 +3,9 @@ import { BooleanHelper, CSSStyle, uniqueKeyGenerator } from '@oinone/kunlun-shar
 import {
   CleanableEvent,
   OioTabPosition,
+  OioTabsBizStyle,
   OioTabsProps,
+  OioTabsType,
   PropRecordHelper,
   StyleHelper,
   TabHTMLNode,
@@ -107,6 +109,18 @@ export default defineComponent({
       }
     });
 
+    const currentType = computed(() => {
+      if (props.bizStyle && [OioTabsBizStyle.Card, OioTabsBizStyle.AccentCard].includes(props.bizStyle)) {
+        if (props.type === OioTabsType['editable-card']) {
+          return OioTabsType['editable-card'];
+        }
+
+        return OioTabsType.card;
+      }
+
+      return props.type;
+    });
+
     onUnmounted(() => {
       moreButtonMousemove?.remove();
     });
@@ -121,6 +135,7 @@ export default defineComponent({
     return {
       id,
       origin,
+      currentType,
       onUpdateActiveKey
     };
   },
@@ -135,7 +150,8 @@ export default defineComponent({
       tabPosition,
       verticalHeight,
       destroyInactiveTabPane,
-      type
+      currentType,
+      bizStyle
     } = this;
 
     const style = {} as CSSStyle;
@@ -150,6 +166,10 @@ export default defineComponent({
       classNames.push(`${DEFAULT_PREFIX}-tabs-disabled`);
     }
 
+    if (bizStyle === OioTabsBizStyle.AccentCard) {
+      classNames.push(`${DEFAULT_PREFIX}-tabs-accent-card`);
+    }
+
     return withDirectives(
       createVNode(
         ATabs,
@@ -163,7 +183,7 @@ export default defineComponent({
           tabPosition,
           verticalHeight,
           destroyInactiveTabPane,
-          type,
+          type: currentType,
           'onUpdate:activeKey': this.onUpdateActiveKey
         },
         PropRecordHelper.collectionSlots(this.$slots, [