vxe-pc-ui 4.17.19 → 4.17.21

package/packages/slider/src/slider.ts

@@ -1,14 +1,30 @@
-import { ref, h, reactive, PropType, watch, computed, inject, onMounted } from 'vue'
+import { ref, h, reactive, PropType, watch, computed, inject, onMounted, onBeforeUnmount } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, renderEmptyElement, useSize } from '../../ui'
 
-import type { SliderReactData, VxeSliderEmits, VxeSliderPropTypes, SliderMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, SliderPrivateMethods, ValueOf, SliderPrivateRef, VxeSliderPrivateComputed, VxeSliderConstructor, VxeSliderPrivateMethods } from '../../../types'
+import type { SliderReactData, SliderInternalData, VxeSliderEmits, VxeSliderPropTypes, SliderMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, SliderPrivateMethods, ValueOf, SliderPrivateRef, VxeSliderPrivateComputed, VxeSliderConstructor, VxeSliderPrivateMethods } from '../../../types'
+
+function createInternalData (): SliderInternalData {
+  return {
+    // _isUp: false,
+    currValue: 0,
+    startValue: 0,
+    endValue: 0
+  }
+}
+
+function createReactData (): SliderReactData {
+  return {
+  }
+}
 
 export default defineVxeComponent({
   name: 'VxeSlider',
   props: {
     modelValue: [String, Number, Array] as PropType<VxeSliderPropTypes.ModelValue>,
+    startValue: [String, Number] as PropType<VxeSliderPropTypes.StartValue>,
+    endValue: [String, Number] as PropType<VxeSliderPropTypes.EndValue>,
     vertical: Boolean as PropType<VxeSliderPropTypes.Vertical>,
     max: {
       type: [String, Number] as PropType<VxeSliderPropTypes.Max>,
@@ -37,10 +53,16 @@ export default defineVxeComponent({
     disabled: {
       type: Boolean as PropType<VxeSliderPropTypes.Disabled>,
       default: null
+    },
+    immediate: {
+      type: Boolean as PropType<VxeSliderPropTypes.Immediate>,
+      default: () => getConfig().slider.immediate
     }
   },
   emits: [
     'update:modelValue',
+    'update:startValue',
+    'update:endValue',
     'change',
     'track-dragstart',
     'track-dragover',
@@ -62,10 +84,8 @@ export default defineVxeComponent({
     const refStartBtnElem = ref<HTMLDivElement>()
     const refEndBtnElem = ref<HTMLDivElement>()
 
-    const reactData = reactive<SliderReactData>({
-      startValue: 0,
-      endValue: 0
-    })
+    const reactData = reactive(createReactData())
+    const internalData = createInternalData()
 
     const refMaps: SliderPrivateRef = {
       refElem
@@ -101,6 +121,11 @@ export default defineVxeComponent({
       return XEUtils.toNumber(props.min || 0)
     })
 
+    const computeMVal = computed(() => {
+      const { range, startValue, endValue } = props
+      return range ? `${startValue || ''}${endValue || ''}` : ''
+    })
+
     const computeMaps: VxeSliderPrivateComputed = {
     }
 
@@ -115,6 +140,7 @@ export default defineVxeComponent({
     } as unknown as VxeSliderConstructor & VxeSliderPrivateMethods
 
     const emitModel = (value: any) => {
+      internalData._isUp = true
       emit('update:modelValue', value)
     }
 
@@ -126,63 +152,121 @@ export default defineVxeComponent({
       dispatchEvent
     }
 
-    const getStartPercent = (startValue: number) => {
-      const { range } = props
+    const getBarPercent = (currValue: number) => {
       const maxNum = computeMaxNum.value
       const minNum = computeMinNum.value
-      return range ? XEUtils.floor((startValue - minNum) / XEUtils.toNumber(maxNum - minNum) * 100) : 0
+      if (maxNum === minNum) {
+        return 0
+      }
+      if (currValue < minNum) {
+        currValue = minNum
+      }
+      if (currValue > maxNum) {
+        currValue = maxNum
+      }
+      return ((currValue - minNum) / (maxNum - minNum)) * 100
     }
 
-    const getEndPercent = (startValue: number, endValue: number) => {
-      const { range } = props
-      const maxNum = computeMaxNum.value
-      const minNum = computeMinNum.value
-      return XEUtils.floor((endValue - (range ? startValue : 0) - minNum) / XEUtils.toNumber(maxNum - minNum) * 100)
+    const parseFields = (startValue?: VxeSliderPropTypes.StartValue, endValue?: VxeSliderPropTypes.EndValue) => {
+      const [sVal, eVal] = XEUtils.orderBy([XEUtils.toNumber(startValue), XEUtils.toNumber(endValue)])
+      const currValue = XEUtils.floor(XEUtils.toNumber(sVal || 0))
+      internalData.currValue = currValue
+      internalData.startValue = currValue
+      internalData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0))
     }
 
-    const updateModel = () => {
-      const { modelValue } = props
-      if (XEUtils.isArray(modelValue)) {
-        const [sVal, eVal] = XEUtils.clone(modelValue, true).sort()
-        reactData.startValue = XEUtils.floor(XEUtils.toNumber(sVal || 0))
-        reactData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0))
+    const parseArrs = (arrVals: number[]) => {
+      const [sVal, eVal] = XEUtils.orderBy(arrVals)
+      const currValue = XEUtils.floor(XEUtils.toNumber(sVal || 0))
+      internalData.currValue = currValue
+      internalData.startValue = currValue
+      internalData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0))
+    }
+
+    const parseNum = (val: VxeSliderPropTypes.ModelValue | undefined) => {
+      const currValue = XEUtils.floor(XEUtils.toNumber(val || 0))
+      internalData.currValue = currValue
+      internalData.startValue = 0
+      internalData.endValue = currValue
+    }
+
+    const updateModelValue = (umType?: 1 | 2) => {
+      const { range, modelValue, startValue, endValue } = props
+      if (!umType) {
+        if (range) {
+          if (XEUtils.eqNull(modelValue)) {
+            if (startValue || endValue) {
+              parseFields(startValue, endValue)
+            }
+          } else {
+            if (XEUtils.isArray(modelValue)) {
+              parseArrs(modelValue.map(num => XEUtils.toNumber(num)))
+            } else {
+              parseNum(modelValue)
+            }
+          }
+        } else {
+          parseNum(modelValue)
+        }
+      } else if (range && umType === 2) {
+        parseFields(startValue, endValue)
       } else {
-        reactData.startValue = 0
-        reactData.endValue = XEUtils.floor(XEUtils.toNumber(modelValue || 0))
+        if (XEUtils.isArray(modelValue)) {
+          parseArrs(modelValue.map(num => XEUtils.toNumber(num)))
+        } else {
+          parseNum(modelValue)
+        }
       }
+      updateBarStyle()
+      updateTrackStyle()
     }
 
     const updateBarStyle = () => {
-      const { startValue, endValue } = reactData
-      const trackElem = refTrackElem.value
+      const { range } = props
+      const { currValue, startValue, endValue } = internalData
       const startBtnElem = refStartBtnElem.value
       const endBtnElem = refEndBtnElem.value
-      let startPercent = 0
-      let endPercent = 0
-      if (startValue > endValue) {
-        startPercent = getStartPercent(endValue)
-        endPercent = getEndPercent(endValue, startValue)
+      if (range) {
+        const [sVal, eVal] = XEUtils.orderBy([startValue, endValue])
+        if (startBtnElem) {
+          startBtnElem.style.left = getBarPercent(sVal) + '%'
+        }
+        if (endBtnElem) {
+          endBtnElem.style.left = getBarPercent(eVal) + '%'
+        }
       } else {
-        startPercent = getStartPercent(startValue)
-        endPercent = getEndPercent(startValue, endValue)
+        if (endBtnElem) {
+          endBtnElem.style.left = getBarPercent(currValue) + '%'
+        }
       }
+    }
+
+    const updateTrackStyle = () => {
+      const { range } = props
+      const { currValue, startValue, endValue } = internalData
+      const trackElem = refTrackElem.value
       if (trackElem) {
-        trackElem.style.left = `${startPercent}%`
-        trackElem.style.width = `${endPercent}%`
-      }
-      if (startBtnElem) {
-        startBtnElem.style.left = `${startPercent}%`
-      }
-      if (endBtnElem) {
-        endBtnElem.style.left = `${XEUtils.floor(startPercent + endPercent)}%`
+        if (range) {
+          const [sVal, eVal] = XEUtils.orderBy([startValue, endValue])
+          trackElem.style.left = getBarPercent(sVal) + '%'
+          trackElem.style.width = getBarPercent(eVal - sVal) + '%'
+        } else {
+          trackElem.style.left = '0'
+          trackElem.style.width = getBarPercent(currValue) + '%'
+        }
       }
     }
 
     const changeEvent = (evnt: MouseEvent) => {
       const { range } = props
-      const { startValue, endValue } = reactData
-      const value = range ? [startValue, endValue].sort() : endValue
+      const { currValue, startValue, endValue } = internalData
+      const vals = range ? XEUtils.orderBy([startValue, endValue]) : []
+      const value = range ? vals : currValue
       emitModel(value)
+      if (range) {
+        emit('update:startValue', vals[0] || 0)
+        emit('update:endValue', vals[1] || 0)
+      }
       dispatchEvent('change', { value }, evnt)
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {
@@ -190,11 +274,23 @@ export default defineVxeComponent({
       }
     }
 
-    const handleMousedownEvent = (evnt: MouseEvent, isEnd: boolean) => {
-      const formReadonly = computeFormReadonly.value
-      const isDisabled = computeIsDisabled.value
+    const getValueByLeft = (offsetLeft: number, barWidth: number) => {
       const maxNum = computeMaxNum.value
       const minNum = computeMinNum.value
+      if (barWidth === 0) {
+        return minNum
+      }
+      const clamped = Math.max(0, Math.min(barWidth, offsetLeft))
+      const ratio = clamped / barWidth
+      const raw = minNum + ratio * (maxNum - minNum)
+      return Math.floor(raw)
+    }
+
+    const handleBtnMousedownEvent = (evnt: MouseEvent) => {
+      const { range, immediate } = props
+      const btnElem = evnt.currentTarget as HTMLDivElement
+      const formReadonly = computeFormReadonly.value
+      const isDisabled = computeIsDisabled.value
       if (!(formReadonly || isDisabled)) {
         evnt.preventDefault()
         document.onmousemove = evnt => {
@@ -202,40 +298,50 @@ export default defineVxeComponent({
           const el = refElem.value
           const barElem = refBarElem.value
           if (el && barElem) {
+            const btnType = btnElem.getAttribute('data-type')
             const barRect = barElem.getBoundingClientRect()
-            const trackWidth = (evnt.clientX - barRect.left) / barRect.width
-            if (isEnd) {
-              reactData.endValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)))
-            } else {
-              reactData.startValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum))))
+            const barWidth = barRect.width
+            const offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - barRect.left))
+            const currValue = getValueByLeft(offsetLeft, barWidth)
+            if (range) {
+              if (btnType === '1') {
+                internalData.startValue = currValue
+              } else {
+                internalData.endValue = currValue
+              }
             }
-            dispatchEvent('track-dragover', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt)
+            internalData.currValue = currValue
+            btnElem.style.left = getBarPercent(currValue) + '%'
+            dispatchEvent('track-dragover', {
+              currentValue: internalData.currValue,
+              startValue: internalData.startValue,
+              endValue: internalData.endValue
+            }, evnt)
           }
-          updateBarStyle()
+          if (immediate) {
+            changeEvent(evnt)
+          }
+          updateTrackStyle()
         }
         document.onmouseup = (evnt: MouseEvent) => {
           document.onmousemove = null
           document.onmouseup = null
-          dispatchEvent('track-dragend', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt)
+          dispatchEvent('track-dragend', {
+            currentValue: internalData.currValue,
+            startValue: internalData.startValue,
+            endValue: internalData.endValue
+          }, evnt)
           changeEvent(evnt)
-          updateBarStyle()
+          updateTrackStyle()
         }
-        dispatchEvent('track-dragstart', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt)
+        dispatchEvent('track-dragstart', {
+          currentValue: internalData.currValue,
+          startValue: internalData.startValue,
+          endValue: internalData.endValue
+        }, evnt)
       }
     }
 
-    const handleStartMousedownEvent = (evnt: MouseEvent) => {
-      const endBtnElem = refEndBtnElem.value
-      const startBtnElem = evnt.currentTarget as HTMLDivElement
-      handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false)
-    }
-
-    const handleEndMousedownEvent = (evnt: MouseEvent) => {
-      const startBtnElem = refStartBtnElem.value
-      const endBtnElem = evnt.currentTarget as HTMLDivElement
-      handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true)
-    }
-
     const collapsePanePrivateMethods: SliderPrivateMethods = {
     }
 
@@ -270,29 +376,44 @@ export default defineVxeComponent({
             ? renderEmptyElement($xeSlider)
             : h('div', {
               ref: refStartBtnElem,
-              class: 'vxe-slider--bar-btn vxe-slider--start-btn',
-              onMousedown: handleStartMousedownEvent
+              class: 'vxe-slider--bar-btn',
+              'data-type': '1',
+              onMousedown: handleBtnMousedownEvent
             }),
           formReadonly
             ? renderEmptyElement($xeSlider)
             : h('div', {
               ref: refEndBtnElem,
-              class: 'vxe-slider--bar-btn vxe-slider--end-btn',
-              onMousedown: handleEndMousedownEvent
+              class: 'vxe-slider--bar-btn',
+              'data-type': '2',
+              onMousedown: handleBtnMousedownEvent
             })
         ])
       ])
     }
 
     watch(() => props.modelValue, () => {
-      updateModel()
+      if (!internalData._isUp) {
+        updateModelValue(1)
+      }
+      internalData._isUp = false
+    })
+
+    watch(computeMVal, () => {
+      if (!internalData._isUp) {
+        updateModelValue(2)
+      }
+      internalData._isUp = false
     })
 
     onMounted(() => {
-      updateBarStyle()
+      updateModelValue()
     })
 
-    updateModel()
+    onBeforeUnmount(() => {
+      XEUtils.assign(reactData, createReactData())
+      XEUtils.assign(internalData, createInternalData())
+    })
 
     $xeSlider.renderVN = renderVN
 

package/packages/space/index.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeSpaceComponent from './src/space'
+import { dynamicApp } from '../dynamics'
+
+export const VxeSpace = Object.assign({}, VxeSpaceComponent, {
+  install (app: App) {
+    app.component(VxeSpaceComponent.name as string, VxeSpaceComponent)
+  }
+})
+
+dynamicApp.use(VxeSpace)
+VxeUI.component(VxeSpaceComponent)
+
+export const Space = VxeSpace
+export default VxeSpace

package/packages/space/src/space.ts

@@ -0,0 +1,167 @@
+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'
+import { getPropClass, toCssUnit } from '../../ui/src/dom'
+import { eqEmptyValue } from '../../ui/src/utils'
+
+import type { SpaceReactData, VxeSpaceEmits, SpaceMethods, VxeSpacePropTypes, SpacePrivateMethods, ValueOf, SpacePrivateRef, VxeSpacePrivateComputed, VxeSpaceConstructor, VxeSpacePrivateMethods, VxeComponentStyleType } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeSpace',
+  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
+    },
+    align: {
+      type: String as PropType<VxeSpacePropTypes.Align>,
+      default: () => getConfig().space.align
+    }
+  },
+  emits: [] as VxeSpaceEmits,
+  setup (props, context) {
+    const { emit, slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const { computeSize } = useSize(props)
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<SpaceReactData>({
+      activeValue: null
+    })
+
+    const refMaps: SpacePrivateRef = {
+      refElem
+    }
+
+    const computeWrapperStyle = computed(() => {
+      const { align, 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 (align) {
+        stys['align-items'] = align
+      }
+      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
+    })
+
+    const computeMaps: VxeSpacePrivateComputed = {
+    }
+
+    const $xeSpace = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeSpaceConstructor & VxeSpacePrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeSpaceEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $space: $xeSpace }, params))
+    }
+
+    const spaceMethods: SpaceMethods = {
+      dispatchEvent
+    }
+
+    const spacePrivateMethods: SpacePrivateMethods = {
+    }
+
+    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 } = props
+      const wrapperStyle = computeWrapperStyle.value
+      const vSize = computeSize.value
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-space', getPropClass(className, {}), {
+          [`size--${vSize}`]: vSize,
+          'is--wrap': wrap,
+          'is--vertical': vertical
+        }],
+        style: wrapperStyle
+      }, renderItems())
+    }
+
+    $xeSpace.renderVN = renderVN
+
+    return $xeSpace
+  },
+  render () {
+    return this.renderVN()
+  }
+})

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/packages/watermark/src/watermark.ts

@@ -83,7 +83,7 @@ export default defineVxeComponent({
       emit(type, createEvent(evnt, { $watermark: $xeWatermark }, params))
     }
 
-    const collapsePaneMethods: WatermarkMethods = {
+    const watermarkMethods: WatermarkMethods = {
       dispatchEvent
     }
 
@@ -105,10 +105,10 @@ export default defineVxeComponent({
       }
     }
 
-    const collapsePanePrivateMethods: WatermarkPrivateMethods = {
+    const watermarkPrivateMethods: WatermarkPrivateMethods = {
     }
 
-    Object.assign($xeWatermark, collapsePaneMethods, collapsePanePrivateMethods)
+    Object.assign($xeWatermark, watermarkMethods, watermarkPrivateMethods)
 
     const renderVN = () => {
       const wrapperStyle = computeWrapperStyle.value

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/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;
 }