vxe-pc-ui 3.17.18 → 3.17.20

package/packages/space/src/space.ts

@@ -0,0 +1,132 @@
+import { CreateElement, VNode, PropType } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, createEvent, globalMixins } from '../../ui'
+import { getPropClass, toCssUnit } from '../../ui/src/dom'
+import { eqEmptyValue } from '../../ui/src/utils'
+
+import type { SpaceReactData, VxeSpaceEmits, VxeSpacePropTypes, ValueOf, VxeComponentSizeType, VxeComponentPermissionInfo, VxeComponentStyleType } from '../../../types'
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeSpace',
+  mixins: [
+    globalMixins.sizeMixin,
+    globalMixins.permissionMixin
+  ],
+  props: {
+    size: {
+      type: String as PropType<VxeSpacePropTypes.Size>,
+      default: () => getConfig().space.size || getConfig().size
+    },
+    wrap: {
+      type: Boolean as PropType<VxeSpacePropTypes.Wrap>,
+      default: () => getConfig().space.wrap
+    },
+    gap: {
+      type: [Number, String, Array, Object] as PropType<VxeSpacePropTypes.Gap>,
+      default: () => getConfig().space.gap
+    },
+    vertical: {
+      type: Boolean as PropType<VxeSpacePropTypes.Vertical>,
+      default: () => getConfig().space.vertical
+    },
+    className: {
+      type: String as PropType<VxeSpacePropTypes.ClassName>,
+      default: () => getConfig().space.className
+    },
+    itemClassName: {
+      type: String as PropType<VxeSpacePropTypes.ItemClassName>,
+      default: () => getConfig().space.itemClassName
+    },
+    separator: {
+      type: String as PropType<VxeSpacePropTypes.Separator>,
+      default: () => getConfig().space.separator
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: SpaceReactData = {
+      activeValue: null
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  computed: {
+    ...({} as {
+      computePermissionInfo(): VxeComponentPermissionInfo
+      computeSize(): VxeComponentSizeType
+    }),
+    computeWrapperStyle () {
+      const $xeSpace = this
+      const props = $xeSpace
+
+      const { gap } = props
+      const stys: VxeComponentStyleType = {}
+      let rowGap: string | number = ''
+      let columGap: string | number = ''
+      if (XEUtils.isNumber(gap) || XEUtils.isString(gap)) {
+        rowGap = gap
+        columGap = gap
+      } else if (gap) {
+        if (XEUtils.isArray(gap)) {
+          rowGap = gap[0]
+          columGap = gap[1]
+        } else {
+          rowGap = gap.rowGap || ''
+          columGap = gap.columGap || ''
+        }
+      }
+      if (!eqEmptyValue(rowGap)) {
+        stys['--vxe-ui-space-current-row-gap'] = toCssUnit(rowGap)
+      }
+      if (!eqEmptyValue(columGap)) {
+        stys['--vxe-ui-space-current-column-gap'] = toCssUnit(columGap)
+      }
+      return stys
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeSpaceEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeSpace = this
+      $xeSpace.$emit(type, createEvent(evnt, { $space: $xeSpace }, params))
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeSpace = this
+      const props = $xeSpace
+      const slots = $xeSpace.$scopedSlots
+
+      const { vertical, wrap, className, itemClassName } = props
+      const wrapperStyle = $xeSpace.computeWrapperStyle
+      const vSize = $xeSpace.computeSize
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-space', getPropClass(className, {}), {
+          [`size--${vSize}`]: vSize,
+          'is--wrap': wrap,
+          'is--vertical': vertical
+        }],
+        style: wrapperStyle
+      }, defaultSlot
+        ? (defaultSlot({}) || []).map((itemVN, index) => {
+            return h('div', {
+              key: index,
+              class: ['vxe-space--item', getPropClass(itemClassName, { index })]
+            }, [itemVN])
+          })
+        : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

package/packages/ui/index.ts

@@ -382,6 +382,7 @@ setConfig({
     max: 100,
     min: 0
   },
+  space: {},
   steps: {},
   switch: {},
   tabPane: {},

package/packages/ui/src/dom.ts

@@ -17,6 +17,10 @@ export function getTpImg () {
   return tpImgEl
 }
 
+export function getPropClass (property: any, params: any) {
+  return property ? (XEUtils.isFunction(property) ? property(params) : property) || '' : ''
+}
+
 const reClsMap: { [key: string]: any } = {}
 
 function getClsRE (cls: any) {

package/styles/all.scss

@@ -70,6 +70,7 @@
 @use './components/split.scss';
 @use './components/split-pane.scss';
 @use './components/slider.scss';
+@use './components/space.scss';
 @use './components/steps.scss';
 @use './components/switch.scss';
 @use './components/tab-pane.scss';

package/styles/components/button.scss

@@ -308,6 +308,13 @@
   @include placement.createPlacementPanel();
 }
 
+.vxe-button.type--button+.vxe-button.type--button,
+.vxe-button.type--button+.vxe-button--dropdown,
+.vxe-button--dropdown+.vxe-button.type--button,
+.vxe-button--dropdown+.vxe-button--dropdown {
+  margin-left: var(--vxe-ui-button-current-margin-left);
+}
+
 .vxe-button--dropdown-wrapper {
   padding: 5px;
   background-color: var(--vxe-ui-layout-background-color);
@@ -332,11 +339,10 @@
       margin-bottom: 0;
     }
   }
-}
-
-.vxe-button.type--button+.vxe-button.type--button,
-.vxe-button.type--button+.vxe-button--dropdown,
-.vxe-button--dropdown+.vxe-button.type--button,
-.vxe-button--dropdown+.vxe-button--dropdown {
-  margin-left: var(--vxe-ui-button-current-margin-left);
+  .vxe-button.type--button+.vxe-button.type--button,
+  .vxe-button.type--button+.vxe-button--dropdown,
+  .vxe-button--dropdown+.vxe-button.type--button,
+  .vxe-button--dropdown+.vxe-button--dropdown {
+    margin-left: 0;
+  }
 }

package/styles/components/space.scss

@@ -0,0 +1,37 @@
+// 局部变量
+.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;
+  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
@@ -26,6 +27,7 @@ export namespace VxeSliderPropTypes {
   export type Step = number | string
   export type Readonly = boolean
   export type Disabled = boolean
+  export type Immediate = boolean
 }
 
 export interface VxeSliderProps {
@@ -39,6 +41,7 @@ export interface VxeSliderProps {
   step?: VxeSliderPropTypes.Step
   readonly?: VxeSliderPropTypes.Readonly
   disabled?: VxeSliderPropTypes.Disabled
+  immediate?: VxeSliderPropTypes.Immediate
 }
 
 export interface SliderPrivateComputed {
@@ -49,6 +52,9 @@ export interface SliderReactData {
   startValue: number
   endValue: number
 }
+export interface SliderInternalData {
+  _isUp?: boolean
+}
 
 export interface SliderMethods {
 }

package/types/components/space.d.ts

@@ -0,0 +1,100 @@
+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 interface VxeSpaceProps {
+  size?: VxeSpacePropTypes.Size
+  /**
+   * 是否自动换行
+   */
+  wrap?: VxeSpacePropTypes.Wrap
+  /**
+   * 自定义间距
+   */
+  gap?: VxeSpacePropTypes.Gap
+  /**
+   * 是否垂直布局
+   */
+  vertical?: VxeSpacePropTypes.Vertical
+  className?: VxeSpacePropTypes.ClassName
+  itemClassName?: VxeSpacePropTypes.ItemClassName
+  /**
+   * 分隔符
+   */
+  separator?: VxeSpacePropTypes.Separator
+}
+
+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