vxe-pc-ui 4.9.19 → 4.9.20

package/styles/components/card.scss

@@ -10,13 +10,6 @@
   &.is--shadow {
     box-shadow: var(--vxe-ui-base-popup-box-shadow);
   }
-  &.is--padding {
-    .vxe-card--body-content,
-    .vxe-card--body-left,
-    .vxe-card--body-right {
-      padding: var(--vxe-ui-card-padding);
-    }
-  }
   &.is--border {
     border: 1px solid var(--vxe-ui-input-border-color);
     .vxe-card--header {
@@ -35,10 +28,6 @@
 .vxe-card--header {
   flex-shrink: 0;
 }
-.vxe-card--header,
-.vxe-card--footer {
-  padding: var(--vxe-ui-card-padding);
-}
 .vxe-card--body {
   overflow: hidden;
   flex-grow: 1;
@@ -66,3 +55,68 @@
     white-space: nowrap;
   }
 }
+
+.vxe-card {
+  font-size: var(--vxe-ui-font-size-default);
+  & > .vxe-card--header,
+  & > .vxe-card--footer {
+    padding: var(--vxe-ui-card-padding-default);
+  }
+  &.is--padding {
+    & > .vxe-card--body {
+      .vxe-card--body-content,
+      .vxe-card--body-left,
+      .vxe-card--body-right {
+        padding: var(--vxe-ui-card-padding-default);
+      }
+    }
+  }
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+    & > .vxe-card--header,
+    & > .vxe-card--footer {
+      padding: var(--vxe-ui-card-padding-medium);
+    }
+    &.is--padding {
+      & > .vxe-card--body {
+        .vxe-card--body-content,
+        .vxe-card--body-left,
+        .vxe-card--body-right {
+          padding: var(--vxe-ui-card-padding-medium);
+        }
+      }
+    }
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+    & > .vxe-card--header,
+    & > .vxe-card--footer {
+      padding: var(--vxe-ui-card-padding-small);
+    }
+    &.is--padding {
+      & > .vxe-card--body {
+        .vxe-card--body-content,
+        .vxe-card--body-left,
+        .vxe-card--body-right {
+          padding: var(--vxe-ui-card-padding-small);
+        }
+      }
+    }
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+    & > .vxe-card--header,
+    & > .vxe-card--footer {
+      padding: var(--vxe-ui-card-padding-mini);
+    }
+    &.is--padding {
+      & > .vxe-card--body {
+        .vxe-card--body-content,
+        .vxe-card--body-left,
+        .vxe-card--body-right {
+          padding: var(--vxe-ui-card-padding-mini);
+        }
+      }
+    }
+  }
+}

package/styles/components/list.scss

@@ -25,4 +25,17 @@
 
 .vxe-list--virtual-wrapper {
   height: 100px;
+}
+
+.vxe-list {
+  font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
 }

package/styles/components/menu.scss

@@ -13,9 +13,7 @@
     min-height: 4em;
   }
 }
-.vxe-menu,
-.vxe-menu--collapse-wrapper {
-  font-size: var(--vxe-ui-font-size-default);
+.vxe-menu {
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   background-color: var(--vxe-ui-layout-background-color);
@@ -45,7 +43,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: var(--vxe-ui-menu-item-height);
   color: var(--vxe-ui-font-color);
   text-decoration: none;
   user-select: none;
@@ -96,10 +93,6 @@
   }
 }
 
-.vxe-menu--item-level3 {
-  font-size: 13px;
-}
-
 .vxe-menu--item-group {
   display: none;
 }
@@ -121,3 +114,37 @@
     }
   }
 }
+
+.vxe-menu--item-level3 {
+  font-size: 13px;
+}
+.vxe-menu--item-link {
+  height: var(--vxe-ui-menu-item-height-default);
+}
+.vxe-menu {
+  font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+    .vxe-menu--item-link {
+      height: var(--vxe-ui-menu-item-height-medium);
+    }
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+    .vxe-menu--item-link {
+      height: var(--vxe-ui-menu-item-height-small);
+    }
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+    .vxe-menu--item-link {
+      height: var(--vxe-ui-menu-item-height-mini);
+    }
+  }
+  &.size--small,
+  &.size--mini {
+    .vxe-menu--item-level3 {
+      font-size: 12px;
+    }
+  }
+}

package/styles/components/select.scss

@@ -121,11 +121,9 @@
 .vxe-select-option--wrapper {
   max-height: 18em;
 }
-
 .vxe-select-option {
   position: relative;
   padding: 0 0.6em;
-  max-width: 600px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/styles/components/split.scss

@@ -299,4 +299,17 @@
   & > .vxe-split {
     height: 100%;
   }
+}
+
+.vxe-split {
+  font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
 }

package/styles/components/tabs.scss

@@ -590,7 +590,6 @@ $scrollbarOffsetSize: 20px;
   }
   &.pos--top,
   &.pos--bottom {
-    height: var(--vxe-ui-tabs-header-height-default);
     .vxe-tabs-header--item-wrapper {
       flex-direction: row;
       width: 100%;
@@ -684,21 +683,6 @@ $scrollbarOffsetSize: 20px;
   }
 }
 
-.vxe-tabs {
-  .vxe-tabs-header--item-inner {
-    height: var(--vxe-ui-tabs-header-height-default);
-  }
-  .vxe-tabs-header--active-line {
-    &.type--card {
-      height: var(--vxe-ui-tabs-header-height-default);
-    }
-    &.type--border-card {
-      height: calc(var(--vxe-ui-tabs-header-height-default) + 1px);
-      line-height: calc(var(--vxe-ui-tabs-header-height-default) + 1px);
-    }
-  }
-}
-
 .vxe-tabs--default,
 .vxe-tabs--card,
 .vxe-tabs--border-card,
@@ -712,9 +696,44 @@ $scrollbarOffsetSize: 20px;
     border-bottom: 2px solid transparent;
   }
 }
-.vxe-tabs--card,
-.vxe-tabs--round-card {
+
+@mixin getTabsSizeStyle ($fontSize, $headHeight) {
+  font-size: $fontSize;
   .vxe-tabs-header--item-inner {
-    height: calc(var(--vxe-ui-tabs-header-height-default) - 1px);
+    height: $headHeight;
+  }
+  .vxe-tabs-header--active-line {
+    &.type--card {
+      height: $headHeight;
+    }
+    &.type--border-card {
+      height: calc($headHeight + 1px);
+      line-height: calc($headHeight + 1px);
+    }
+  }
+  .vxe-tabs-header--wrapper {
+    &.pos--top,
+    &.pos--bottom {
+      height: $headHeight;
+    }
+  }
+  .vxe-tabs--card,
+  .vxe-tabs--round-card {
+    .vxe-tabs-header--item-inner {
+      height: calc($headHeight - 1px);
+    }
+  }
+}
+
+.vxe-tabs {
+  @include getTabsSizeStyle(var(--vxe-ui-font-size-default), var(--vxe-ui-tabs-header-height-default));
+  &.size--medium {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-medium), var(--vxe-ui-tabs-header-height-medium));
+  }
+  &.size--small {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-small), var(--vxe-ui-tabs-header-height-small));
+  }
+  &.size--mini {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-mini), var(--vxe-ui-tabs-header-height-mini));
   }
 }

package/styles/theme/base.scss

@@ -30,7 +30,10 @@
   --vxe-ui-layout-aside-collapse-width: 60px;
 
   /*menu*/
-  --vxe-ui-menu-item-height: 44px;
+  --vxe-ui-menu-item-height-default: 44px;
+  --vxe-ui-menu-item-height-medium: 40px;
+  --vxe-ui-menu-item-height-small: 36px;
+  --vxe-ui-menu-item-height-mini: 32px;
   --vxe-ui-menu-icon-width: 1.5em;
 
   /*button*/
@@ -160,7 +163,10 @@
   --vxe-ui-upload-image-wh-mini: 72px;
 
   /*card*/
-  --vxe-ui-card-padding: 12px;
+  --vxe-ui-card-padding-default: 12px;
+  --vxe-ui-card-padding-medium: 10px;
+  --vxe-ui-card-padding-small: 8px;
+  --vxe-ui-card-padding-mini: 6px;
 
   /*tree*/
   --vxe-ui-tree-node-height: 2em;
@@ -181,7 +187,7 @@
   --vxe-ui-calendar-notice-selected-background-color: var(--vxe-ui-calendar-selected-color);
 
   /*split*/
-  --vxe-ui-split-handle-bar-horizontal-width: 10px;
+  --vxe-ui-split-handle-bar-horizontal-width: 0.68em;
   --vxe-ui-split-handle-bar-horizontal-height: 6.8em;
   --vxe-ui-split-handle-bar-vertical-width: var(--vxe-ui-split-handle-bar-horizontal-height);
   --vxe-ui-split-handle-bar-vertical-height: var(--vxe-ui-split-handle-bar-horizontal-width);

package/types/components/card.d.ts

@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -31,6 +31,7 @@ export namespace VxeCardPropTypes {
   export type Loading = boolean
   export type Shadow = boolean
   export type Padding = boolean
+  export type Size = VxeComponentSizeType
 }
 
 export type VxeCardProps = {
@@ -42,6 +43,7 @@ export type VxeCardProps = {
   loading?: VxeCardPropTypes.Loading
   shadow?: VxeCardPropTypes.Shadow
   padding?: VxeCardPropTypes.Padding
+  size?: VxeCardPropTypes.Size
 }
 
 export interface CardPrivateComputed {

package/types/components/split.d.ts

@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref, ComputedRef } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeSplitPaneProps, VxeSplitPanePropTypes } from './split-pane'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -24,6 +24,7 @@ export interface SplitPrivateRef {
 export interface VxeSplitPrivateRef extends SplitPrivateRef { }
 
 export namespace VxeSplitPropTypes {
+  export type Size = VxeComponentSizeType
   export type Height = string | number
   export type Width = string | number
   export type Padding = boolean
@@ -85,6 +86,7 @@ export namespace VxeSplitPropTypes {
 }
 
 export type VxeSplitProps = {
+  size?: VxeSplitPropTypes.Size
   /**
    * 高度
    */

package/types/components/tabs.d.ts

@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeTabPaneProps, VxeTabPaneDefines, VxeTabPanePropTypes } from './tab-pane'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -25,6 +25,7 @@ export interface VxeTabsPrivateRef extends TabsPrivateRef { }
 
 export namespace VxeTabsPropTypes {
   export type ModelValue = undefined | null | VxeTabPanePropTypes.Name
+  export type Size = VxeComponentSizeType
   export type Options = VxeTabPaneProps[]
   export type DestroyOnClose = boolean
   export type Width = string | number
@@ -115,6 +116,7 @@ export namespace VxeTabsPropTypes {
 
 export type VxeTabsProps = {
   modelValue?: VxeTabsPropTypes.ModelValue
+  size?: VxeTabsPropTypes.Size
   options?: VxeTabsPropTypes.Options
   destroyOnClose?: VxeTabsPropTypes.DestroyOnClose
   width?: VxeTabsPropTypes.Width