vxe-pc-ui 4.17.20 → 4.17.21

package/packages/space/src/space.ts

@@ -1,4 +1,4 @@
-import { ref, h, PropType, computed, reactive } from 'vue'
+import { ref, h, PropType, computed, reactive, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, useSize } from '../../ui'
@@ -37,6 +37,10 @@ export default defineVxeComponent({
     separator: {
       type: String as PropType<VxeSpacePropTypes.Separator>,
       default: () => getConfig().space.separator
+    },
+    align: {
+      type: String as PropType<VxeSpacePropTypes.Align>,
+      default: () => getConfig().space.align
     }
   },
   emits: [] as VxeSpaceEmits,
@@ -58,7 +62,7 @@ export default defineVxeComponent({
     }
 
     const computeWrapperStyle = computed(() => {
-      const { gap } = props
+      const { align, gap } = props
       const stys: VxeComponentStyleType = {}
       let rowGap: string | number = ''
       let columGap: string | number = ''
@@ -74,6 +78,9 @@ export default defineVxeComponent({
           columGap = gap.columGap || ''
         }
       }
+      if (align) {
+        stys['align-items'] = align
+      }
       if (!eqEmptyValue(rowGap)) {
         stys['--vxe-ui-space-current-row-gap'] = toCssUnit(rowGap)
       }
@@ -109,11 +116,36 @@ export default defineVxeComponent({
 
     Object.assign($xeSpace, spaceMethods, spacePrivateMethods)
 
+    const renderItems = () => {
+      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
+    }
+
     const renderVN = () => {
-      const { vertical, wrap, className, itemClassName } = props
+      const { vertical, wrap, className } = props
       const wrapperStyle = computeWrapperStyle.value
       const vSize = computeSize.value
-      const defaultSlot = slots.default
       return h('div', {
         ref: refElem,
         class: ['vxe-space', getPropClass(className, {}), {
@@ -122,14 +154,7 @@ export default defineVxeComponent({
           'is--vertical': vertical
         }],
         style: wrapperStyle
-      }, defaultSlot
-        ? (defaultSlot({}) || []).map((itemVN, index) => {
-            return h('div', {
-              key: index,
-              class: ['vxe-space--item', getPropClass(itemClassName, { index })]
-            }, [itemVN])
-          })
-        : [])
+      }, renderItems())
     }
 
     $xeSpace.renderVN = renderVN

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

@@ -26,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
@@ -40,6 +42,8 @@ export namespace VxeSliderPropTypes {
 export interface VxeSliderProps {
   size?: VxeSliderPropTypes.Size
   modelValue?: VxeSliderPropTypes.ModelValue
+  startValue?: VxeSliderPropTypes.StartValue
+  endValue?: VxeSliderPropTypes.EndValue
   max?: VxeSliderPropTypes.Max
   min?: VxeSliderPropTypes.Min
   vertical?: VxeSliderPropTypes.Vertical
@@ -56,11 +60,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 {
@@ -72,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

@@ -30,6 +30,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 {
@@ -52,6 +53,7 @@ export interface VxeSpaceProps {
    * 分隔符
    */
   separator?: VxeSpacePropTypes.Separator
+  align?: VxeSpacePropTypes.Align
 }
 
 export interface SpacePrivateComputed {