@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.1

package/src/view/popup/drawer/style/index.scss

@@ -1,11 +1,41 @@
 @import '../../../../style/global-parameters.scss';
 
-.default-drawer,
-.default-drawer.oio.drawer {
+.default-drawer {
+  .ant-drawer-body {
+    .oio-form {
+      & > .oio-row > .oio-col > .oio-default-group {
+        & > .oio-group-title-wrapper {
+          padding: var(--oio-padding) 0 0 0;
+        }
+
+        & > .oio-group-content {
+          padding: var(--oio-padding) 0;
+        }
+      }
+    }
+  }
+
   .ant-drawer-content .ant-drawer-wrapper-body {
+    .ant-drawer-body {
+      padding-bottom: 24px;
+    }
+
     .ant-drawer-footer {
       padding: 0;
 
+      .default-drawer-pre-next-switch-footer {
+        display: flex;
+        align-items: center;
+
+        .oio-simple-pagination {
+          padding-left: var($parameterPrefix + -margin-md);
+        }
+
+        .action-bar {
+          flex: 1;
+        }
+      }
+
       .action-bar {
         height: unset;
         padding: var($parameterPrefix + -margin-md);
@@ -38,3 +68,154 @@
     width: 100%;
   }
 }
+
+/**
+ * workflow drawer style
+ */
+.flowDrawerWrap {
+  .ant-drawer-content {
+    background: var(--oio-background);
+
+    .ant-drawer-header {
+      background: var(--oio-background);
+      border-color: var(--oio-border-color);
+      padding: 16px;
+
+      .ant-drawer-header-title {
+        flex-direction: row-reverse;
+      }
+
+      .ant-drawer-close {
+        color: var(--oio-icon-color);
+        margin-right: 0;
+      }
+
+      .ant-drawer-title {
+        color: var(--oio-text-color);
+      }
+    }
+
+    .ant-drawer-wrapper-body {
+      .ant-drawer-body {
+        padding: 16px 16px 70px 16px;
+
+        .oio-form {
+          .oio-group {
+            border: none;
+            box-shadow: none;
+          }
+
+          .oio-group-title-wrapper {
+            padding: 24px 0 16px 0;
+            height: inherit;
+          }
+
+          .oio-group-content {
+            padding: 0 0 24px 0;
+
+            .oio-group-title-wrapper {
+              padding-top: 0;
+            }
+
+            .oio-group-title {
+              font-size: 14px;
+
+              &:before {
+                border-left: none;
+                margin-right: 0;
+              }
+            }
+
+            .oio-group-content {
+              border-bottom: none;
+              padding: 0;
+            }
+          }
+
+          .oio-tabs .oio-tab > .oio-tab-content > .oio-row > .oio-col,
+          & > .oio-row > .oio-col {
+            & > .oio-default-group > .oio-group-title-wrapper {
+              padding-top: 0;
+            }
+
+            &:last-child > .oio-default-group > .oio-group-content {
+              padding-bottom: 0;
+              border-bottom: none;
+            }
+          }
+
+          &.ant-form-vertical {
+            .oio-form-item-horizontal {
+              .ant-form-item-label {
+                flex-basis: unset;
+                height: 32px;
+                text-align: left;
+
+                & > label {
+                  height: 32px;
+                }
+              }
+
+              .ant-form-item-control {
+                max-width: unset;
+
+                .form-bool-switch {
+                  height: 32px;
+                  justify-content: flex-start;
+                }
+              }
+            }
+          }
+        }
+
+        .widget-container {
+          font-size: 14px;
+        }
+      }
+
+      .footer-btn {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        border-top: 1px solid var(--oio-border-color);
+        background: var(--oio-background);
+        text-align: right;
+        z-index: 1;
+        height: 71.5px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 0 16px;
+        box-sizing: border-box;
+
+        button {
+          padding: 9px 16px;
+          height: auto;
+          font-size: 14px;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .drawer-container {
+    .ant-drawer-header {
+      .ant-drawer-title {
+        .ant-drawer-close {
+          .oio-drawer-close-icon {
+            font-weight: normal;
+          }
+        }
+      }
+
+      .ant-drawer-header-title {
+        flex-direction: row-reverse;
+      }
+
+      > .ant-drawer-close {
+        opacity: 0;
+      }
+    }
+  }
+}

package/src/view/popup/inner/DefaultInnerPopup.vue

@@ -1,9 +1,15 @@
 <script lang="ts">
-import { ButtonType, OioButton, OioInnerPopup, StringHelper } from '@oinone/kunlun-vue-ui-antd';
-import { DrawerPlacement, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { ViewType } from '@oinone/kunlun-meta';
+import {
+  ButtonType,
+  DrawerPlacement,
+  OioButton,
+  OioInnerPopup,
+  PropRecordHelper,
+  StringHelper
+} from '@oinone/kunlun-vue-ui-antd';
 import { onAllMounted } from '@oinone/kunlun-vue-widget';
 import { computed, createVNode, defineComponent, PropType, Slot, VNode } from 'vue';
-import { ViewType } from '@oinone/kunlun-meta';
 
 export default defineComponent({
   name: 'DefaultInnerPopup',
@@ -79,10 +85,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    onAllMounted(() => {
-      props.allMounted?.();
-    });
-
     const teleportTarget = computed<HTMLElement>(() => {
       const handle = props.teleportHandle;
       if (!handle) {
@@ -91,6 +93,10 @@ export default defineComponent({
       return document.getElementById(handle) || document.body;
     });
 
+    onAllMounted(() => {
+      props.allMounted?.();
+    });
+
     return {
       teleportTarget
     };
@@ -147,14 +153,13 @@ export default defineComponent({
           }
           return footerChildren;
         }
-      }
+      },
+      'header',
+      'extraToolbar'
     ]);
 
     const componentProps: Record<string, unknown> = {
-      class: StringHelper.append(
-        [`default-inner-popup default-inner-popup-${viewType?.toLowerCase()}`],
-        this.class
-      ),
+      class: StringHelper.append([`default-inner-popup default-inner-popup-${viewType?.toLowerCase()}`], this.class),
       style: {
         height
       },

package/src/view/popup/inner/InnerPopupWidget.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
 import { ROOT_HANDLE, RuntimeContext } from '@oinone/kunlun-engine';
 import { BooleanHelper, Optional } from '@oinone/kunlun-shared';
-import { DrawerHeight, DrawerPlacement, InnerPopupSize, OioDrawerProps, StyleHelper } from '@oinone/kunlun-vue-ui-common';
+import { DrawerHeight, DrawerPlacement, InnerPopupSize, StyleHelper } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { PopupScene } from '../../../typing';
 import { PopupWidget } from '../PopupWidget';
@@ -36,7 +36,7 @@ export class InnerPopupWidget extends PopupWidget {
 
   @Widget.Reactive()
   private get title() {
-    return this.getDsl().title || OioDrawerProps.title.default;
+    return this.getDsl().title;
   }
 
   @Widget.Reactive()
@@ -44,11 +44,6 @@ export class InnerPopupWidget extends PopupWidget {
     return this.getDsl().help;
   }
 
-  @Widget.Reactive()
-  protected get class(): string | undefined {
-    return this.getDsl()?.class;
-  }
-
   @Widget.Reactive()
   protected get size() {
     return this.getDsl().size?.toLowerCase?.() || InnerPopupSize.small;