vxe-pc-ui 3.17.20 → 3.17.21

package/packages/space/src/space.ts

@@ -41,6 +41,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     separator: {
       type: String as PropType<VxeSpacePropTypes.Separator>,
       default: () => getConfig().space.separator
+    },
+    align: {
+      type: String as PropType<VxeSpacePropTypes.Align>,
+      default: () => getConfig().space.align
     }
   },
   data () {
@@ -62,7 +66,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeSpace = this
       const props = $xeSpace
 
-      const { gap } = props
+      const { align, gap } = props
       const stys: VxeComponentStyleType = {}
       let rowGap: string | number = ''
       let columGap: string | number = ''
@@ -78,6 +82,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
           columGap = gap.columGap || ''
         }
       }
+      if (align) {
+        stys['align-items'] = align
+      }
       if (!eqEmptyValue(rowGap)) {
         stys['--vxe-ui-space-current-row-gap'] = toCssUnit(rowGap)
       }
@@ -99,15 +106,42 @@ export default /* define-vxe-component start */ defineVxeComponent({
     //
     // Render
     //
-    renderVN (h: CreateElement): VNode {
+    renderItems (h: CreateElement) {
       const $xeSpace = this
       const props = $xeSpace
       const slots = $xeSpace.$scopedSlots
 
-      const { vertical, wrap, className, itemClassName } = props
+      const { separator, itemClassName } = props
+      const itemVNs: VNode[] = []
+      const defaultSlot = slots.default
+      const separatorSlot = slots.separator
+      if (defaultSlot) {
+        XEUtils.each(defaultSlot({}), (itemVN, index, items) => {
+          itemVNs.push(
+            h('div', {
+              key: 'i' + index,
+              class: ['vxe-space--item', getPropClass(itemClassName, { index })]
+            }, [itemVN])
+          )
+          if ((separator || separatorSlot) && index < items.length - 1) {
+            itemVNs.push(
+              h('div', {
+                key: 's' + index,
+                class: 'vxe-space--separator'
+              }, separatorSlot ? separatorSlot({}) : ('' + separator))
+            )
+          }
+        })
+      }
+      return itemVNs
+    },
+    renderVN (h: CreateElement): VNode {
+      const $xeSpace = this
+      const props = $xeSpace
+
+      const { vertical, wrap, className } = props
       const wrapperStyle = $xeSpace.computeWrapperStyle
       const vSize = $xeSpace.computeSize
-      const defaultSlot = slots.default
       return h('div', {
         ref: 'refElem',
         class: ['vxe-space', getPropClass(className, {}), {
@@ -116,14 +150,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'is--vertical': vertical
         }],
         style: wrapperStyle
-      }, defaultSlot
-        ? (defaultSlot({}) || []).map((itemVN, index) => {
-            return h('div', {
-              key: index,
-              class: ['vxe-space--item', getPropClass(itemClassName, { index })]
-            }, [itemVN])
-          })
-        : [])
+      }, $xeSpace.renderItems(h))
     }
   },
   render (this: any, h) {

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

@@ -27,6 +27,7 @@
 .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;

package/types/components/slider.d.ts

@@ -19,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
@@ -33,6 +35,8 @@ export namespace VxeSliderPropTypes {
 export interface VxeSliderProps {
   size?: VxeSliderPropTypes.Size
   value?: VxeSliderPropTypes.ModelValue
+  startValue?: VxeSliderPropTypes.StartValue
+  endValue?: VxeSliderPropTypes.EndValue
   max?: VxeSliderPropTypes.Max
   min?: VxeSliderPropTypes.Min
   vertical?: VxeSliderPropTypes.Vertical
@@ -49,11 +53,12 @@ export interface SliderPrivateComputed {
 export interface VxeSliderPrivateComputed extends SliderPrivateComputed { }
 
 export interface SliderReactData {
-  startValue: number
-  endValue: number
 }
 export interface SliderInternalData {
   _isUp?: boolean
+  currValue: number
+  startValue: number
+  endValue: number
 }
 
 export interface SliderMethods {
@@ -65,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

@@ -23,6 +23,7 @@ export namespace VxeSpacePropTypes {
   export type ClassName = string
   export type ItemClassName = string
   export type Separator = string
+  export type Align = 'stretch' | 'start' | 'end' | 'center' | 'baseline' | '' | null
 }
 
 export interface VxeSpaceProps {
@@ -45,6 +46,7 @@ export interface VxeSpaceProps {
    * 分隔符
    */
   separator?: VxeSpacePropTypes.Separator
+  align?: VxeSpacePropTypes.Align
 }
 
 export interface SpacePrivateComputed {