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

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

@@ -1,9 +1,18 @@
 <script lang="ts">
 import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
-import { OioCloseIcon, OioDrawerProps, PropRecordHelper, StyleHelper, useDrawer } from '@oinone/kunlun-vue-ui-common';
+import {
+  OioCloseIcon,
+  OioDrawerProps,
+  OioIcon,
+  PopupDisplayAs,
+  PropRecordHelper,
+  useDrawer,
+  useInjectOioDefaultFormContext,
+  useProviderOioDefaultFormContext
+} from '@oinone/kunlun-vue-ui-common';
 import { Drawer as ADrawer } from 'ant-design-vue';
 import { isBoolean } from 'lodash-es';
-import { createVNode, defineComponent } from 'vue';
+import { createVNode, defineComponent, withModifiers } from 'vue';
 import { DEFAULT_PREFIX } from '../../theme';
 import { OioButton } from '../oio-button';
 import { OioSpin } from '../oio-spin';
@@ -14,15 +23,25 @@ export default defineComponent({
   components: {
     ADrawer,
     OioButton,
-    OioSpin
+    OioSpin,
+    OioIcon
   },
   inheritAttrs: false,
   props: {
     ...OioDrawerProps
   },
   slots: ['default', 'title', 'header', 'footer', 'closeIcon'],
-  emits: ['update:visible'],
+  emits: ['update:visible', 'update:displayAs'],
   setup(props, context) {
+    const formContext = useInjectOioDefaultFormContext();
+
+    useProviderOioDefaultFormContext({
+      ...formContext,
+      getTriggerContainer() {
+        return document.body;
+      }
+    });
+
     return {
       ...useDrawer(props, context)
     };
@@ -59,23 +78,63 @@ export default defineComponent({
     }
     const isOverrideTitle = !!slots.header;
     if (!isOverrideTitle) {
-      let titleSlot = slots.title;
-      if (!titleSlot) {
-        titleSlot = () => [createVNode('span', {}, this.title || OioDrawerProps.title.default)];
-      }
-      if (this.help) {
-        const titleChildren = titleSlot();
-        titleSlot = () => {
-          return [createVNode('span', {}, titleChildren), createVNode(OioTooltipHelp, { content: this.help })];
-        };
-      }
-      slots.title = titleSlot;
+      const originalTitleSlot = slots.title;
+
+      // 默认标题插槽
+      const createDefaultTitle = () => [createVNode('span', {}, this.$translate(this.title || '抽屉'))];
+
+      slots.title = () => {
+        // 获取原始或默认的标题插槽
+        const originalSlot = [...(originalTitleSlot?.() || createDefaultTitle())];
+
+        if (this.help) {
+          originalSlot.push(
+            createVNode(OioTooltipHelp, {
+              content: this.help
+            })
+          );
+        }
+
+        // 控制图标
+        const controlIcons = [
+          this.showPopupToggle &&
+            !this.isFullScreen &&
+            createVNode(OioIcon, {
+              style: { cursor: 'pointer' },
+              icon: this.displayAs === PopupDisplayAs.drawer ? 'oinone-dialog' : 'oinone-drawer',
+              size: 16,
+              onClick: withModifiers(this.onDisplayAsSwitch, ['stop'])
+            }),
+          this.enabledFullScreen &&
+            createVNode(OioIcon, {
+              style: { cursor: 'pointer' },
+              icon: this.isFullScreen ? 'oinone-suoxiao1' : 'oinone-fangda2',
+              size: 16,
+              onClick: withModifiers(this.onFullSwitch, ['stop'])
+            })
+        ].filter(Boolean);
+
+        // 包装控制区域
+        if (controlIcons.length > 0) {
+          originalSlot.push(
+            createVNode(
+              'div',
+              {
+                class: `${mainClassName}-title-extend`
+              },
+              controlIcons
+            )
+          );
+        }
+
+        return originalSlot;
+      };
     }
     if (!slots.closeIcon) {
       slots.closeIcon = () => [createVNode(OioCloseIcon)];
     }
 
-    const classNames = [mainClassName, `${mainClassName}-wrapper`];
+    const classNames = [mainClassName, `${mainClassName}-wrapper`, ...this.modalDrawerClassName];
     if (this.widthClassSuffix) {
       classNames.push(`${mainClassName}-width-${this.widthClassSuffix}`);
     }
@@ -97,8 +156,8 @@ export default defineComponent({
           this.wrapperProps?.style
         ),
         placement: this.placement,
-        width: StyleHelper.px(this.width),
-        height: StyleHelper.px(this.height),
+        width: this.width,
+        height: this.height,
         mask: this.mask,
         maskClosable: this.maskClosable,
         zIndex: this.zIndex,

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

@@ -16,27 +16,45 @@ $footerHeight: 73px;
       display: none;
     }
   }
+
+  .ant-drawer-content {
+    background: var(--oio-background);
+  }
+
   &.no-mask {
-    width: 100% !important;
+    width: 100%;
   }
 
   &.#{$drawerClassPrefix}-width-small .ant-drawer-content-wrapper {
-    width: var($drawerParameterPrefix + -width-small) !important;
+    width: var($drawerParameterPrefix + -width-small);
   }
+
   &.#{$drawerClassPrefix}-width-medium .ant-drawer-content-wrapper {
-    width: var($drawerParameterPrefix + -width-medium) !important;
+    width: var($drawerParameterPrefix + -width-medium);
   }
+
   &.#{$drawerClassPrefix}-width-large .ant-drawer-content-wrapper {
-    width: var($drawerParameterPrefix + -width-large) !important;
+    width: var($drawerParameterPrefix + -width-large);
+  }
+
+  &.#{$drawerClassPrefix}-width-full .ant-drawer-content-wrapper {
+    width: 100vw;
   }
+
   &.#{$drawerClassPrefix}-height-small .ant-drawer-content-wrapper {
-    height: var($drawerParameterPrefix + -height-small) !important;
+    height: var($parameterPrefix + -modal-height-small);
   }
+
   &.#{$drawerClassPrefix}-height-medium .ant-drawer-content-wrapper {
-    height: var($drawerParameterPrefix + -height-medium) !important;
+    height: var($parameterPrefix + -modal-height-medium);
   }
+
   &.#{$drawerClassPrefix}-height-large .ant-drawer-content-wrapper {
-    height: var($drawerParameterPrefix + -height-large) !important;
+    height: var($parameterPrefix + -modal-height-large);
+  }
+
+  &.#{$drawerClassPrefix}-height-full .ant-drawer-content-wrapper {
+    height: 100vh;
   }
 
   & > .ant-drawer-content-wrapper {
@@ -54,7 +72,7 @@ $footerHeight: 73px;
       @include oio-scrollbar();
 
       height: calc(100% - #{$titleHeight});
-      padding: 16px;
+      padding: var($parameterPrefix + -margin-md);
       overflow: auto;
 
       & > .ant-spin-nested-loading {
@@ -66,8 +84,47 @@ $footerHeight: 73px;
       }
     }
 
+    .ant-drawer-header {
+      background-color: var(--oio-background);
+      border-color: var(--oio-border-color);
+      padding: 16px;
+    }
+
+    .ant-drawer-header-title {
+      flex-direction: row-reverse;
+    }
+
+    .ant-drawer-title {
+      opacity: 0.85;
+      font-size: var($parameterPrefix + -font-size-lg);
+      color: var($parameterPrefix + -text-color);
+      line-height: 24px;
+      font-weight: var($parameterPrefix + -font-weight-bold);
+      position: relative;
+
+      .#{$drawerClassPrefix}-title-extend {
+        height: 24px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        column-gap: 16px;
+        position: absolute;
+        top: 0;
+        right: 16px;
+
+        .oio-icon {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+
     .ant-drawer-close {
       padding: 0;
+      margin-right: 0;
     }
 
     .ant-drawer-footer {
@@ -84,10 +141,72 @@ $footerHeight: 73px;
 
         &.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);
         }
       }
     }
   }
+
+  &.#{$drawerClassPrefix}-modal-mode {
+    @include oio-scrollbar();
+
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    outline: 0;
+    overflow: auto;
+
+    .ant-drawer-mask {
+      height: 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 1000;
+    }
+
+    .ant-drawer-content {
+      height: unset;
+    }
+
+    .ant-drawer-content-wrapper {
+      position: relative;
+      height: unset;
+      top: 100px;
+      z-index: 1000;
+      margin: 0 auto;
+
+      .ant-drawer-content {
+        background-color: var(--oio-background);
+        border: 1px solid var(--oio-border-color);
+        box-shadow: var(--oio-box-shadow);
+        border-radius: var(--oio-border-radius);
+      }
+    }
+
+    & > .ant-drawer-content-wrapper {
+      opacity: 0;
+      transition: none;
+    }
+
+    &.ant-drawer-open > .ant-drawer-content-wrapper {
+      opacity: 1;
+      transition: none;
+    }
+
+    &.#{$drawerClassPrefix}-width-small .ant-drawer-content-wrapper {
+      width: var($modalParameterPrefix + -width-small);
+    }
+
+    &.#{$drawerClassPrefix}-width-medium .ant-drawer-content-wrapper {
+      width: var($modalParameterPrefix + -width-medium);
+    }
+
+    &.#{$drawerClassPrefix}-width-large .ant-drawer-content-wrapper {
+      width: var($modalParameterPrefix + -width-large);
+    }
+  }
 }

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

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

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

@@ -49,8 +49,8 @@
 
       & > label {
         font-size: var($parameterPrefix + -font-size);
-        color: var($parameterPrefix + -text-color);
-        font-weight: var($parameterPrefix + -font-weight);
+        color: var($parameterPrefix + -form-item-label-color);
+        font-weight: var($parameterPrefix + -form-item-label-weight);
         height: var($parameterPrefix + -height);
         line-height: var($parameterPrefix + -height);
         vertical-align: top;
@@ -78,6 +78,7 @@
         line-height: 18px;
         flex-basis: var(--oio-label-height);
         padding: 0;
+        width: 100%;
         margin-bottom: var($parameterPrefix + -margin-xs);
         white-space: nowrap;
         text-overflow: ellipsis;

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

@@ -63,13 +63,9 @@ export default defineComponent({
       style.maxWidth = defaultWidth;
       if (isObject(props.itemStyle)) {
         const hasWidth = !isNil(props.itemStyle?.width);
-        const hasMinWidth = !isNil(props.itemStyle?.minWidth);
-        const hasMaxWidth = !isNil(props.itemStyle?.maxWidth);
         if (hasWidth) {
           style.minWidth = CastHelper.cast(null);
           style.maxWidth = CastHelper.cast(null);
-        } else if (hasMaxWidth && !hasMinWidth) {
-          style.minWidth = CastHelper.cast(null);
         }
         style = {
           ...style,
@@ -80,7 +76,9 @@ export default defineComponent({
     });
 
     return {
+      cols,
       gutter,
+      flexBasic,
       flex,
       rowStyle,
       colStyle

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

@@ -1,2 +1,3 @@
+export * from './typing';
 export { default as OioGroup } from './oio-group.vue';
 export { default as OioGroupHelp } from './oio-group-help.vue';

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

@@ -4,6 +4,7 @@ import { OioGroupProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
 import { createVNode, defineComponent, VNode } from 'vue';
 import { DEFAULT_PREFIX } from '../../theme';
 import OioGroupHelp from './oio-group-help.vue';
+import { GroupStyle } from './typing';
 
 export default defineComponent({
   name: 'OioGroup',
@@ -29,7 +30,8 @@ export default defineComponent({
       helpIconColor,
       helpPlacement,
       helpBgColor,
-      helpAdjustOverflow
+      helpAdjustOverflow,
+      bizStyle
     } = this;
     const slots = PropRecordHelper.collectionSlots($slots, [
       { origin: 'default', isNotNull: true },
@@ -40,6 +42,9 @@ export default defineComponent({
     if (border) {
       classList.push(`${DEFAULT_PREFIX}-group-border`);
     }
+
+    classList.push(`${DEFAULT_PREFIX}-group-${bizStyle || GroupStyle.style1}`);
+
     let hiddenTitle = title === false;
     let titleVNodes: VNode[] | undefined;
     if (slots.title) {
@@ -113,6 +118,7 @@ export default defineComponent({
         )
       ];
       titleClassList.push(`${DEFAULT_PREFIX}-group-title-flex-end`);
+      classList.push(`${DEFAULT_PREFIX}-group-toolbar-flex-end`);
       titleVNodes = [createVNode('div', { class: titleClassList }, titleVNodes)];
     } else {
       hiddenTitle = true;

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

@@ -2,7 +2,7 @@
 
 .#{$groupClassPrefix} {
   width: 100%;
-  background: var(--oio-background);
+  background-color: var(--oio-background);
 
   &-border {
     border: var($parameterPrefix + -border-width) var(--oio-group-border-width) var($parameterPrefix + -border-color);
@@ -58,7 +58,7 @@
     text-overflow: ellipsis;
 
     & + .#{$groupClassPrefix}-description {
-      margin-left: 12px;
+      margin-left: 8px;
     }
   }
 
@@ -73,15 +73,28 @@
   }
 
   &-description {
-    color: var(--oio-text-color-secondary);
+    color: var(--oio-placeholder-color);
     font-size: var(--oio-font-size-sm);
-    line-height: var(--oio-line-height-lg);
     max-width: 400px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
+  &-style1 {
+    .#{$groupClassPrefix}-title-wrapper:not(.#{$groupClassPrefix}-title-space-between),
+    .#{$groupClassPrefix}-title-space-between > .#{$groupClassPrefix}-title-content {
+      &::before {
+        content: '';
+        width: 3px;
+        height: var(--oio-font-size-lg);
+        display: block;
+        background-color: var(--oio-primary-color);
+        margin-right: 8px;
+      }
+    }
+  }
+
   &-content {
     padding: var(--oio-padding);
   }

package/src/component/oio-group/typing.ts

@@ -0,0 +1,10 @@
+export enum GroupStyle {
+  /**
+   * 标题带竖线
+   */
+  style1 = 'style1',
+  /**
+   * 简约
+   */
+  style2 = 'style2'
+}

package/src/component/oio-inner-popup/oio-inner-popup.vue

@@ -2,11 +2,13 @@
 import {
   ButtonType,
   DrawerPlacement,
+  OioCloseIcon,
   OioIcon,
   OioInnerPopupProps,
   PropRecordHelper,
-  useResizableHandle,
-  OioCloseIcon
+  useInjectOioDefaultFormContext,
+  useProviderOioDefaultFormContext,
+  useResizableHandle
 } from '@oinone/kunlun-vue-ui-common';
 import { isFunction, isString } from 'lodash-es';
 import {
@@ -48,7 +50,7 @@ function createHeader(children: VNode[]) {
 }
 
 function createBody(children: VNode[]) {
-  return createVNode('div', { class: `${CLASS_NAME}-body` }, children);
+  return createVNode('div', { class: `${CLASS_NAME}-body oio-scrollbar` }, children);
 }
 
 function createFooter(children: VNode[]) {
@@ -69,6 +71,8 @@ export default defineComponent({
     ...OioInnerPopupProps
   },
   setup(props) {
+    const formContext = useInjectOioDefaultFormContext();
+
     const popupRef = ref<HTMLElement>();
 
     const resizable = computed(() => {
@@ -133,6 +137,13 @@ export default defineComponent({
       { immediate: true }
     );
 
+    useProviderOioDefaultFormContext({
+      ...formContext,
+      getTriggerContainer() {
+        return document.body;
+      }
+    });
+
     return {
       popupRef,
 
@@ -144,7 +155,8 @@ export default defineComponent({
       default: defaultSlot,
       title: titleSlot,
       header: headerSlot,
-      footer: footerSlot
+      footer: footerSlot,
+      extraToolbar: extraToolbarSlot
     } = PropRecordHelper.collectionSlots(this.$slots, [
       {
         origin: 'default',
@@ -152,7 +164,8 @@ export default defineComponent({
       },
       'title',
       'header',
-      'footer'
+      'footer',
+      'extraToolbar'
     ]);
 
     const finalHeaderSlot: Slot | null | undefined = headerSlot || this.header;
@@ -166,7 +179,7 @@ export default defineComponent({
       let finalTitleSlot = titleSlot;
       if (!finalTitleSlot) {
         finalTitleSlot = () => [
-          createVNode('span', { class: `${CLASS_NAME}-title` }, this.title || OioInnerPopupProps.title.default)
+          createVNode('span', { class: `${CLASS_NAME}-title` }, this.$translate(this.title || '标题'))
         ];
       }
       if (this.help) {
@@ -179,12 +192,10 @@ export default defineComponent({
       if (this.closable) {
         headerChildren.push(
           createVNode('div', { class: `${CLASS_NAME}-title-toolbar` }, [
-            createVNode(
-              OioCloseIcon,
-              {
-                onClick: this.cancelCallback
-              },
-            )
+            ...(extraToolbarSlot?.() || []),
+            createVNode(OioCloseIcon, {
+              onClick: this.cancelCallback
+            })
           ])
         );
       }

package/src/component/oio-inner-popup/style/index.scss

@@ -22,8 +22,7 @@ $innerPopupSmallWidth: 400px;
   display: flex;
   flex-direction: column;
   background-color: var(--oio-background);
-  border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style)
-    var($parameterPrefix + -border-color);
+  border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style) var($parameterPrefix + -border-color);
   border-radius: var($parameterPrefix + -border-radius, 4px);
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.05);
 
@@ -53,19 +52,8 @@ $innerPopupSmallWidth: 400px;
       align-items: center;
       column-gap: 8px;
 
-      .#{$innerPopupClassPrefix}-title-icon-button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50%;
-        width: 24px;
-        height: 24px;
-        background-color: var(--oio-icon-color);
+      .oio-close-icon {
         cursor: pointer;
-
-        .oio-icon {
-          font-size: 10px;
-        }
       }
     }
 
@@ -77,7 +65,7 @@ $innerPopupSmallWidth: 400px;
   .#{$innerPopupClassPrefix}-body {
     padding: 16px;
     flex: 1 1px;
-    overflow: scroll;
+    overflow: auto;
 
     & + .#{$innerPopupClassPrefix}-footer {
       border-top: 1px solid var(--oio-border-color);
@@ -108,11 +96,11 @@ $innerPopupSmallWidth: 400px;
 
     .#{$innerPopupClassPrefix} {
       @include mediaResponsive(
-        flex-basis,
-        $innerPopupDefaultWidth,
-        $innerPopupLargeWidth,
-        $innerPopupMediumWidth,
-        $innerPopupSmallWidth
+          flex-basis,
+          $innerPopupDefaultWidth,
+          $innerPopupLargeWidth,
+          $innerPopupMediumWidth,
+          $innerPopupSmallWidth
       );
     }
   }
@@ -136,11 +124,11 @@ $innerPopupSmallWidth: 400px;
 
     .#{$innerPopupClassPrefix} {
       @include mediaResponsive(
-        flex-basis,
-        $innerPopupDefaultWidth,
-        $innerPopupLargeWidth,
-        $innerPopupMediumWidth,
-        $innerPopupSmallWidth
+          flex-basis,
+          $innerPopupDefaultWidth,
+          $innerPopupLargeWidth,
+          $innerPopupMediumWidth,
+          $innerPopupSmallWidth
       );
     }
   }

package/src/component/oio-input/oio-input-group.vue

@@ -33,7 +33,7 @@ export default defineComponent({
         ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-input-group`]),
         compact: this.compact
       },
-      this.$slots.default?.() || []
+      this.$slots
     );
   }
 });

package/src/component/oio-input/oio-input-number.vue

@@ -25,7 +25,7 @@ export default defineComponent({
     ...OioInputNumberProps
   },
   slots: ['prepend', 'append', 'prefix', 'suffix'],
-  emits: ['update:value', 'focus', 'blur'],
+  emits: ['update:value', 'change', 'focus', 'blur'],
   setup(props, context) {
     const origin = ref();
     const realValue = computed<BigNumber | undefined>(() => {
@@ -68,11 +68,13 @@ export default defineComponent({
           return false;
         }
         context.emit('update:value', val);
+        context.emit('change', val);
         return true;
       }
       let newVal = val.toString();
       if (newVal.endsWith('.') || newVal.endsWith('0')) {
         context.emit('update:value', newVal);
+        context.emit('change', newVal);
         return true;
       }
       const newNumberVal = new BigNumber(newVal);
@@ -84,6 +86,7 @@ export default defineComponent({
         return false;
       }
       context.emit('update:value', newVal);
+      context.emit('change', newVal);
       return true;
     };
 

package/src/component/oio-input/oio-input-search.vue

@@ -1,6 +1,11 @@
 <script lang="ts">
 import { BooleanHelper, CastHelper } from '@oinone/kunlun-shared';
-import { AInputSearchProps, InputSearchEvent, OioInputSearchProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import {
+  AInputSearchProps,
+  InputSearchEvent,
+  OioInputSearchProps,
+  PropRecordHelper
+} from '@oinone/kunlun-vue-ui-common';
 import { InputSearch as AInputSearch } from 'ant-design-vue';
 import { isBoolean, isEmpty } from 'lodash-es';
 import { computed, createVNode, defineComponent, ref } from 'vue';