vxe-pc-ui 4.17.19 → 4.17.21

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-column-gap-xlarge: 16px;
+  --vxe-ui-space-column-gap-large: 14px;
+  --vxe-ui-space-column-gap-default: 12px;
+  --vxe-ui-space-column-gap-medium: 10px;
+  --vxe-ui-space-column-gap-small: 8px;
+  --vxe-ui-space-column-gap-mini: 6px;
+  --vxe-ui-space-row-gap-xlarge: var(--vxe-ui-space-column-gap-xlarge);
+  --vxe-ui-space-row-gap-large: var(--vxe-ui-space-column-gap-large);
+  --vxe-ui-space-row-gap-default: var(--vxe-ui-space-column-gap-default);
+  --vxe-ui-space-row-gap-medium: var(--vxe-ui-space-column-gap-medium);
+  --vxe-ui-space-row-gap-small: var(--vxe-ui-space-column-gap-small);
+  --vxe-ui-space-row-gap-mini: var(--vxe-ui-space-column-gap-mini);
 }

package/types/all.d.ts

@@ -72,6 +72,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 VxeRate from './components/rate'
 import VxeSteps from './components/steps'
 import VxeSwitch from './components/switch'
@@ -344,6 +345,7 @@ interface UIComponents {
   VxeSplit: typeof VxeSplit
   VxeSplitPane: typeof VxeSplitPane
   VxeSlider: typeof VxeSlider
+  VxeSpace: typeof VxeSpace
   VxeSteps: typeof VxeSteps
   VxeSwitch: typeof VxeSwitch
   VxeTabPane: typeof VxeTabPane
@@ -518,6 +520,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

@@ -12,6 +12,7 @@ export interface VxeSliderConstructor extends VxeComponentBaseOptions, VxeSlider
   props: VxeSliderProps
   context: SetupContext<VxeSliderEmits>
   reactData: SliderReactData
+  internalData: SliderInternalData
   getRefMaps(): SliderPrivateRef
   getComputeMaps(): SliderPrivateComputed
   renderVN: RenderFunction
@@ -25,6 +26,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
@@ -33,11 +36,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
   modelValue?: VxeSliderPropTypes.ModelValue
+  startValue?: VxeSliderPropTypes.StartValue
+  endValue?: VxeSliderPropTypes.EndValue
   max?: VxeSliderPropTypes.Max
   min?: VxeSliderPropTypes.Min
   vertical?: VxeSliderPropTypes.Vertical
@@ -46,6 +52,7 @@ export interface VxeSliderProps {
   step?: VxeSliderPropTypes.Step
   readonly?: VxeSliderPropTypes.Readonly
   disabled?: VxeSliderPropTypes.Disabled
+  immediate?: VxeSliderPropTypes.Immediate
 }
 
 export interface SliderPrivateComputed {
@@ -53,6 +60,10 @@ export interface SliderPrivateComputed {
 export interface VxeSliderPrivateComputed extends SliderPrivateComputed { }
 
 export interface SliderReactData {
+}
+export interface SliderInternalData {
+  _isUp?: boolean
+  currValue: number
   startValue: number
   endValue: number
 }
@@ -66,6 +77,8 @@ export interface VxeSliderPrivateMethods extends SliderPrivateMethods { }
 
 export type VxeSliderEmits = [
   'update:modelValue',
+  'update:startValue',
+  'update:endValue',
   'change',
   'track-dragstart',
   'track-dragover',

package/types/components/space.d.ts

@@ -0,0 +1,112 @@
+import { RenderFunction, SetupContext, Ref } from 'vue'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentBaseOptions, VxeComponentEventParams } from '@vxe-ui/core'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeSpace: DefineVxeComponentApp<VxeSpaceProps, VxeSpaceEventProps, VxeSpaceSlots, VxeSpaceMethods>
+export type VxeSpaceComponent = DefineVxeComponentOptions<VxeSpaceProps, VxeSpaceEventProps>
+
+export type VxeSpaceInstance = DefineVxeComponentInstance<VxeSpaceProps, VxeSpaceConstructor>
+
+export interface VxeSpaceConstructor extends VxeComponentBaseOptions, VxeSpaceMethods {
+  props: VxeSpaceProps
+  context: SetupContext<VxeSpaceEmits>
+  reactData: SpaceReactData
+  getRefMaps(): SpacePrivateRef
+  getComputeMaps(): SpacePrivateComputed
+  renderVN: RenderFunction
+}
+
+export interface SpacePrivateRef {
+  refElem: Ref<HTMLDivElement | undefined>
+}
+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