vxe-pc-ui 3.1.21 → 3.1.22

package/styles/components/slider.scss

@@ -0,0 +1,138 @@
+@import '../helpers/mixin.scss';
+
+$sliderThemeList: (
+  (
+    name: "primary",
+    textColor: var(--vxe-ui-font-primary-color),
+    hoverColor: var(--vxe-ui-font-primary-lighten-color),
+    activeColor: var(--vxe-ui-font-primary-darken-color),
+    disabledColor: var(--vxe-ui-font-primary-disabled-color)
+  ),
+  (
+    name: "success",
+    textColor: var(--vxe-ui-status-success-color),
+    hoverColor: var(--vxe-ui-status-success-lighten-color),
+    activeColor: var(--vxe-ui-status-success-darken-color),
+    disabledColor: var(--vxe-ui-status-success-disabled-color)
+  ),
+  (
+    name: "info",
+    textColor: var(--vxe-ui-status-info-color),
+    hoverColor: var(--vxe-ui-status-info-lighten-color),
+    activeColor: var(--vxe-ui-status-info-darken-color),
+    disabledColor: var(--vxe-ui-status-info-disabled-color)
+  ),
+  (
+    name: "warning",
+    textColor: var(--vxe-ui-status-warning-color),
+    hoverColor: var(--vxe-ui-status-warning-lighten-color),
+    activeColor: var(--vxe-ui-status-warning-darken-color),
+    disabledColor: var(--vxe-ui-status-warning-disabled-color)
+  ),
+  (
+    name: "danger",
+    textColor: var(--vxe-ui-status-danger-color),
+    hoverColor: var(--vxe-ui-status-danger-lighten-color),
+    activeColor: var(--vxe-ui-status-danger-darken-color),
+    disabledColor: var(--vxe-ui-status-danger-disabled-color)
+  ),
+  (
+    name: "error",
+    textColor: var(--vxe-ui-status-error-color),
+    hoverColor: var(--vxe-ui-status-error-lighten-color),
+    activeColor: var(--vxe-ui-status-error-darken-color),
+    disabledColor: var(--vxe-ui-status-error-disabled-color)
+  )
+);
+
+.vxe-slider {
+  position: relative;
+  display: block;
+  padding: 0.5em 1em;
+  @for $index from 0 to length($sliderThemeList) {
+    $item: nth($sliderThemeList, $index + 1);
+    &.theme--#{map-get($item, name)} {
+      .vxe-slider--bar-track {
+        background-color: map-get($item, textColor);
+        &:hover {
+          background-color: map-get($item, hoverColor);
+        }
+        &:hover {
+          background-color: map-get($item, activeColor);
+        }
+      }
+      .vxe-slider--bar-btn {
+        background-color: map-get($item, textColor);
+      }
+    }
+  }
+  &.is--disabled {
+    .vxe-slider--bar-btn {
+      cursor: not-allowed;
+    }
+  }
+  &:not(.is--disabled) {
+    .vxe-slider--bar-wrapper,
+    .vxe-slider--inner {
+      cursor: pointer;
+    }
+    .vxe-slider--bar-btn {
+      &:hover {
+        transform: scale(1.2);
+      }
+      &:active {
+        transform: scale(1.1);
+      }
+    }
+  }
+  &.is--readonly {
+    .vxe-slider--bar-wrapper,
+    .vxe-slider--inner {
+      cursor: default;
+    }
+  }
+}
+.vxe-slider--inner {
+  position: relative;
+}
+
+.vxe-slider--bar-wrapper {
+  background-color: #e4e7ed;
+}
+.vxe-slider--bar-track {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  background-color: var(--vxe-ui-font-primary-color);
+  &:hover {
+    background-color: var(--vxe-ui-font-primary-lighten-color);
+  }
+  &:active {
+    background-color: var(--vxe-ui-font-primary-darken-color);
+  }
+}
+.vxe-slider--bar-wrapper,
+.vxe-slider--bar-track {
+  height: 0.3em;
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-slider--bar-btn {
+  position: absolute;
+  width: 0.9em;
+  height: 0.9em;
+  top: -0.3em;
+  border-radius: 50%;
+  border: 0.15em solid  var(--vxe-ui-font-primary-color);
+  background-color: #fff;
+  cursor: pointer;
+  z-index: 1;
+  @include createAnimationTransition(transform, 0.1s);
+}
+.vxe-slider--start-btn {
+  left: -0.45em;
+}
+.vxe-slider--end-btn {
+  right: -0.45em;
+}

package/types/components/slider.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentStatusType, VxeComponentEventParams } from '@vxe-ui/core'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -16,9 +16,29 @@ export interface SliderPrivateRef {
 export interface VxeSliderPrivateRef extends SliderPrivateRef { }
 
 export namespace VxeSliderPropTypes {
+  export type Size = VxeComponentSizeType
+  export type ModelValue = number | string | null | (number | string | null)[]
+  export type Max = number | string
+  export type Min = number | string
+  export type Vertical = boolean
+  export type Range = boolean
+  export type Status = VxeComponentStatusType
+  export type Step = number | string
+  export type Readonly = boolean
+  export type Disabled = boolean
 }
 
 export interface VxeSliderProps {
+  size?: VxeSliderPropTypes.Size
+  modelValue?: VxeSliderPropTypes.ModelValue
+  max?: VxeSliderPropTypes.Max
+  min?: VxeSliderPropTypes.Min
+  vertical?: VxeSliderPropTypes.Vertical
+  range?: VxeSliderPropTypes.Range
+  status?: VxeSliderPropTypes.Status
+  step?: VxeSliderPropTypes.Step
+  readonly?: VxeSliderPropTypes.Readonly
+  disabled?: VxeSliderPropTypes.Disabled
 }
 
 export interface SliderPrivateComputed {
@@ -26,6 +46,8 @@ export interface SliderPrivateComputed {
 export interface VxeSliderPrivateComputed extends SliderPrivateComputed { }
 
 export interface SliderReactData {
+  startValue: number
+  endValue: number
 }
 
 export interface SliderMethods {
@@ -35,7 +57,10 @@ export interface VxeSliderMethods extends SliderMethods { }
 export interface SliderPrivateMethods { }
 export interface VxeSliderPrivateMethods extends SliderPrivateMethods { }
 
-export type VxeSliderEmits = []
+export type VxeSliderEmits = [
+  'modelValue',
+  'change'
+]
 
 export namespace VxeSliderDefines {
   export interface SliderEventParams extends VxeComponentEventParams {

package/types/components/switch.d.ts

@@ -17,7 +17,7 @@ export interface VxeSwitchPrivateRef extends SwitchPrivateRef { }
 
 export namespace VxeSwitchPropTypes {
   export type Size = VxeComponentSizeType
-  export type ModelValue = string | number | boolean
+  export type ModelValue = string | number | boolean | null
   export type Disabled = boolean
   export type Readonly = boolean
   export type OpenLabel = string