vxe-pc-ui 3.17.19 → 3.17.21

package/styles/components/slider.scss

@@ -50,7 +50,7 @@ $sliderThemeList: (
 .vxe-slider {
   position: relative;
   display: block;
-  padding: 0.5em 1em;
+  padding: 0.8em;
   @for $index from 0 to list.length($sliderThemeList) {
     $item: list.nth($sliderThemeList, $index + 1);
     &.theme--#{map.get($item, name)} {
@@ -80,10 +80,10 @@ $sliderThemeList: (
     }
     .vxe-slider--bar-btn {
       &:hover {
-        transform: scale(1.2);
+        transform: translate(-50%, -50%) scale(1.2);
       }
       &:active {
-        transform: scale(1.1);
+        transform: translate(-50%, -50%) scale(1.1);
       }
     }
   }
@@ -122,19 +122,14 @@ $sliderThemeList: (
 
 .vxe-slider--bar-btn {
   position: absolute;
-  width: 0.9em;
-  height: 0.9em;
-  top: -0.3em;
+  width: 1.2em;
+  height: 1.2em;
+  top: 50%;
+  transform: translate(-50%, -50%);
   border-radius: 50%;
-  border: 0.15em solid  var(--vxe-ui-font-primary-color);
+  border: 2px solid  var(--vxe-ui-font-primary-color);
   background-color: #fff;
   cursor: pointer;
   z-index: 1;
   @include baseMixin.createAnimationTransition(transform, 0.1s);
-}
-.vxe-slider--start-btn {
-  left: -0.45em;
-}
-.vxe-slider--end-btn {
-  right: -0.45em;
 }

package/styles/components/space.scss

@@ -0,0 +1,38 @@
+// 局部变量
+.vxe-space {
+  --vxe-ui-space-current-row-gap: var(--vxe-ui-space-row-gap-default);
+  --vxe-ui-space-current-column-gap: var(--vxe-ui-space-column-gap-default);
+  &.size--xlarge {
+    --vxe-ui-space-current-row-gap: var(--vxe-ui-space-row-gap-xlarge);
+    --vxe-ui-space-current-column-gap: var(--vxe-ui-space-column-gap-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-space-current-row-gap: var(--vxe-ui-space-row-gap-large);
+    --vxe-ui-space-current-column-gap: var(--vxe-ui-space-column-gap-large);
+  }
+  &.size--medium {
+    --vxe-ui-space-current-row-gap: var(--vxe-ui-space-row-gap-medium);
+    --vxe-ui-space-current-column-gap: var(--vxe-ui-space-column-gap-medium);
+  }
+  &.size--small {
+    --vxe-ui-space-current-row-gap: var(--vxe-ui-space-row-gap-small);
+    --vxe-ui-space-current-column-gap: var(--vxe-ui-space-column-gap-small);
+  }
+  &.size--mini {
+    --vxe-ui-space-current-row-gap: var(--vxe-ui-space-row-gap-mini);
+    --vxe-ui-space-current-column-gap: var(--vxe-ui-space-column-gap-mini);
+  }
+}
+
+.vxe-space {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--vxe-ui-space-current-row-gap) var(--vxe-ui-space-current-column-gap);
+  &.is--wrap {
+    flex-wrap: wrap;
+  }
+  &.is--vertical {
+    flex-direction: column;
+  }
+}

package/styles/theme/base.scss

@@ -125,12 +125,12 @@
   --vxe-ui-tooltip-dark-background-color: #303133;
 
   /*form*/
-  --vxe-ui-form-item-min-height-xlarge: 64px;
-  --vxe-ui-form-item-min-height-large: 60px;
-  --vxe-ui-form-item-min-height-default: 56px;
-  --vxe-ui-form-item-min-height-medium: 52px;
-  --vxe-ui-form-item-min-height-small: 48px;
-  --vxe-ui-form-item-min-height-mini: 44px;
+  --vxe-ui-space-margin-xlarge: 64px;
+  --vxe-ui-space-margin-large: 60px;
+  --vxe-ui-space-margin-default: 56px;
+  --vxe-ui-space-margin-medium: 52px;
+  --vxe-ui-space-margin-small: 48px;
+  --vxe-ui-space-margin-mini: 44px;
   --vxe-ui-form-validate-error-color: var(--vxe-ui-status-error-color);
   --vxe-ui-form-item-padding-xlarge: 10px;
   --vxe-ui-form-item-padding-large: 9px;
@@ -289,4 +289,18 @@
 
   /*icon-picker*/
   --vxe-ui-icon-picker-panel-icon-font-size: 1.4em;
+
+  /*space*/
+  --vxe-ui-space-row-gap-xlarge: 16px;
+  --vxe-ui-space-row-gap-large: 14px;
+  --vxe-ui-space-row-gap-default: 12px;
+  --vxe-ui-space-row-gap-medium: 10px;
+  --vxe-ui-space-row-gap-small: 8px;
+  --vxe-ui-space-row-gap-mini: 6px;
+  --vxe-ui-space-column-gap-xlarge: var(--vxe-ui-space-row-gap-xlarge);
+  --vxe-ui-space-column-gap-large: var(--vxe-ui-space-row-gap-large);
+  --vxe-ui-space-column-gap-default: var(--vxe-ui-space-row-gap-default);
+  --vxe-ui-space-column-gap-medium: var(--vxe-ui-space-row-gap-medium);
+  --vxe-ui-space-column-gap-small: var(--vxe-ui-space-row-gap-small);
+  --vxe-ui-space-column-gap-mini: var(--vxe-ui-space-row-gap-mini);
 }

package/types/all.d.ts

@@ -73,6 +73,7 @@ import VxeSplitterPanel from './components/splitter-panel'
 import VxeSplit from './components/split'
 import VxeSplitPane from './components/split-pane'
 import VxeSlider from './components/slider'
+import VxeSpace from './components/space'
 import VxeSteps from './components/steps'
 import VxeSwitch from './components/switch'
 import VxeTabPane from './components/tab-pane'
@@ -350,6 +351,7 @@ interface UIComponents {
   VxeSplit: typeof VxeSplit
   VxeSplitPane: typeof VxeSplitPane
   VxeSlider: typeof VxeSlider
+  VxeSpace: typeof VxeSpace
   VxeSteps: typeof VxeSteps
   VxeSwitch: typeof VxeSwitch
   VxeTabPane: typeof VxeTabPane
@@ -519,6 +521,7 @@ export * from './components/splitter-panel'
 export * from './components/split'
 export * from './components/split-pane'
 export * from './components/slider'
+export * from './components/space'
 export * from './components/steps'
 export * from './components/switch'
 export * from './components/tab-pane'

package/types/components/slider.d.ts

@@ -7,6 +7,7 @@ export type VxeSliderComponent = DefineVxeComponentOptions<VxeSliderProps>
 
 export type VxeSliderInstance = DefineVxeComponentInstance<{
   reactData: SliderReactData
+  internalData: SliderInternalData
 }, VxeSliderProps, VxeSliderPrivateComputed, VxeSliderMethods>
 
 export type VxeSliderConstructor = VxeSliderInstance
@@ -18,6 +19,8 @@ export interface VxeSliderPrivateRef extends SliderPrivateRef { }
 export namespace VxeSliderPropTypes {
   export type Size = VxeComponentSizeType
   export type ModelValue = number | string | null | (number | string | null)[]
+  export type StartValue = number | string | null
+  export type EndValue = number | string | null
   export type Max = number | string
   export type Min = number | string
   export type Vertical = boolean
@@ -26,11 +29,14 @@ export namespace VxeSliderPropTypes {
   export type Step = number | string
   export type Readonly = boolean
   export type Disabled = boolean
+  export type Immediate = boolean
 }
 
 export interface VxeSliderProps {
   size?: VxeSliderPropTypes.Size
   value?: VxeSliderPropTypes.ModelValue
+  startValue?: VxeSliderPropTypes.StartValue
+  endValue?: VxeSliderPropTypes.EndValue
   max?: VxeSliderPropTypes.Max
   min?: VxeSliderPropTypes.Min
   vertical?: VxeSliderPropTypes.Vertical
@@ -39,6 +45,7 @@ export interface VxeSliderProps {
   step?: VxeSliderPropTypes.Step
   readonly?: VxeSliderPropTypes.Readonly
   disabled?: VxeSliderPropTypes.Disabled
+  immediate?: VxeSliderPropTypes.Immediate
 }
 
 export interface SliderPrivateComputed {
@@ -46,6 +53,10 @@ export interface SliderPrivateComputed {
 export interface VxeSliderPrivateComputed extends SliderPrivateComputed { }
 
 export interface SliderReactData {
+}
+export interface SliderInternalData {
+  _isUp?: boolean
+  currValue: number
   startValue: number
   endValue: number
 }
@@ -59,6 +70,8 @@ export interface VxeSliderPrivateMethods extends SliderPrivateMethods { }
 
 export type VxeSliderEmits = [
   'modelValue',
+  'update:startValue',
+  'update:endValue',
   'change',
   'track-dragstart',
   'track-dragover',

package/types/components/space.d.ts

@@ -0,0 +1,102 @@
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType } from '@vxe-ui/core'
+
+/* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeSpace: DefineVxeComponentApp<VxeSpaceProps, VxeSpaceEventProps, VxeSpaceSlots, VxeSpaceMethods>
+export type VxeSpaceComponent = DefineVxeComponentOptions<VxeSpaceProps>
+
+export type VxeSpaceInstance = DefineVxeComponentInstance<{
+  reactData: SpaceReactData
+}, VxeSpaceProps, VxeSpacePrivateComputed, VxeSpaceMethods>
+
+export type VxeSpaceConstructor = VxeSpaceInstance
+
+export interface SpacePrivateRef {
+}
+export interface VxeSpacePrivateRef extends SpacePrivateRef { }
+
+export namespace VxeSpacePropTypes {
+  export type Size = VxeComponentSizeType
+  export type Wrap = boolean
+  export type Gap = number | string | number[] | VxeSpaceDefines.GapObj
+  export type Vertical = boolean
+  export type ClassName = string
+  export type ItemClassName = string
+  export type Separator = string
+  export type Align = 'stretch' | 'start' | 'end' | 'center' | 'baseline' | '' | null
+}
+
+export interface VxeSpaceProps {
+  size?: VxeSpacePropTypes.Size
+  /**
+   * 是否自动换行
+   */
+  wrap?: VxeSpacePropTypes.Wrap
+  /**
+   * 自定义间距
+   */
+  gap?: VxeSpacePropTypes.Gap
+  /**
+   * 是否垂直布局
+   */
+  vertical?: VxeSpacePropTypes.Vertical
+  className?: VxeSpacePropTypes.ClassName
+  itemClassName?: VxeSpacePropTypes.ItemClassName
+  /**
+   * 分隔符
+   */
+  separator?: VxeSpacePropTypes.Separator
+  align?: VxeSpacePropTypes.Align
+}
+
+export interface SpacePrivateComputed {
+}
+export interface VxeSpacePrivateComputed extends SpacePrivateComputed { }
+
+export interface SpaceReactData {
+}
+
+export interface SpaceMethods {
+}
+export interface VxeSpaceMethods extends SpaceMethods { }
+
+export interface SpacePrivateMethods { }
+export interface VxeSpacePrivateMethods extends SpacePrivateMethods { }
+
+export type VxeSpaceEmits = [
+]
+
+export namespace VxeSpaceDefines {
+  export interface GapObj {
+    /**
+     * 行间距
+     */
+    rowGap?: number | string
+    /**
+     * 列间距
+     */
+    columGap?: number | string
+  }
+  export interface SpaceEventParams extends VxeComponentEventParams {
+    $space: VxeSpaceConstructor
+  }
+}
+
+export type VxeSpaceEventProps = {}
+
+export interface VxeSpaceListeners { }
+
+export namespace VxeSpaceEvents { }
+
+export namespace VxeSpaceSlotTypes {
+  export interface DefaultSlotParams {}
+  export interface SeparatorSlotParams {}
+}
+
+export interface VxeSpaceSlots {
+  default?: (params: VxeSpaceSlotTypes.DefaultSlotParams) => any
+  separator?: (params: VxeSpaceSlotTypes.SeparatorSlotParams) => any
+}
+
+export const Space: typeof VxeSpace
+export default VxeSpace

package/types/ui/global-config.d.ts

@@ -71,6 +71,7 @@ import { VxeSplitterPanelProps } from '../components/splitter-panel'
 import { VxeSplitProps } from '../components/split'
 import { VxeSplitPaneProps } from '../components/split-pane'
 import { VxeSliderProps } from '../components/slider'
+import { VxeSpaceProps } from '../components/space'
 import { VxeStepsProps } from '../components/steps'
 import { VxeSwitchProps } from '../components/switch'
 import { VxeTabPaneProps } from '../components/tab-pane'
@@ -184,6 +185,7 @@ declare module '@vxe-ui/core' {
     split?: VxeSplitProps
     splitPane?: VxeSplitPaneProps
     slider?: VxeSliderProps
+    space?: VxeSpaceProps
     steps?: VxeStepsProps
     switch?: VxeSwitchProps
     tabPane?: VxeTabPaneProps