@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Select/useSelect.js

@@ -21,12 +21,14 @@ import ensureArray from 'lodash/castArray';
 import filter from 'lodash/filter';
 import max from 'lodash/max';
 import min from 'lodash/min';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import { isEmpty, isNotEmpty, isUndefined, mergeDefaultProps } from "../Util";
-import { partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, useChildrenInstance, useClassNames, useControlled, useDisabled, useSize } from "../hooks";
+import { ValidateComponentsMap } from "../Util/icons";
+import { partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, useChildrenInstance, useClassNames, useControlled, useDisabled, useSize, useStatusIcon } from "../hooks";
 import { useComposition } from "../hooks/useComposition";
+import { useResizeObserver } from "../hooks/useResizeObserver";
 var useSelect = function useSelect(props) {
   var _useConfigProvider = useConfigProvider(),
     locale = _useConfigProvider.locale;
@@ -48,8 +50,6 @@ var useSelect = function useSelect(props) {
     showArrow: true,
     clearable: false,
     filterable: false,
-    error: false,
-    required: false,
     disabled: false,
     maxWidth: 500,
     collapseTagsTooltip: true,
@@ -57,8 +57,17 @@ var useSelect = function useSelect(props) {
     tagType: 'info',
     tagEffect: 'light',
     suffixIcon: 'angle-down',
-    clearIcon: 'circle-xmark'
+    clearIcon: 'circle-xmark',
+    props: {},
+    options: []
   }, props);
+  var aliasProps = mergeDefaultProps({
+    value: 'value',
+    label: 'label',
+    disabled: 'disabled',
+    data: 'data',
+    options: 'options'
+  }, props.props);
   var nsSelect = useClassNames('select');
   var be = nsSelect.be,
     is = nsSelect.is;
@@ -106,31 +115,35 @@ var useSelect = function useSelect(props) {
     setValue = _useControlled2[1];
   var disabled = useDisabled(props.disabled);
   var size = useSize(props.size);
+  var _useStatusIcon = useStatusIcon(),
+    statusIcon = _useStatusIcon.statusIcon,
+    validateState = _useStatusIcon.validateState;
+  var validateIcon = useMemo(function () {
+    return validateState && ValidateComponentsMap[validateState];
+  }, [validateState]);
 
   // 单选框显示文本
-  var _useState = useState(null),
+  // const [selected, setSelected] = useState<OptionData | OptionData[]>(null);
+
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useState3 = useState(false),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
-    visible = _useState4[0],
-    setVisible = _useState4[1];
-  var _useState5 = useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    popperStyle = _useState6[0],
-    setPopperStyle = _useState6[1];
+    popperStyle = _useState4[0],
+    setPopperStyle = _useState4[1];
   // 多选时input框高度
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    inputValue = _useState8[0],
-    setInputValue = _useState8[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputValue = _useState6[0],
+    setInputValue = _useState6[1];
   var cachedOptions = useRef(new Map());
 
   /** 获取所有的option组件 */
   var getOptionInstance = useChildrenInstance('ElOption', 'ElOptionGroup');
   var optionData = useMemo(function () {
-    if (props.children) {
+    if (Children.count(props.children) > 0) {
       var componentChildren = getOptionInstance(props.children);
       return componentChildren.map(function (node) {
         var _node$props$label, _node$props$label2, _node$props;
@@ -145,9 +158,29 @@ var useSelect = function useSelect(props) {
           data: node.props.data
         };
       });
+    } else if (props.options.length > 0) {
+      return props.options.reduce(function (acc, node) {
+        var _node$aliasProps$opti;
+        if (((_node$aliasProps$opti = node[aliasProps.options]) === null || _node$aliasProps$opti === void 0 ? void 0 : _node$aliasProps$opti.length) > 0) {
+          return [].concat(_toConsumableArray(acc), [node], _toConsumableArray(node[aliasProps.options]));
+        }
+        return [].concat(_toConsumableArray(acc), [node]);
+      }, []).map(function (node) {
+        var _node$aliasProps$labe, _node$aliasProps$labe2;
+        cachedOptions.current.set(node[aliasProps.value], {
+          label: (_node$aliasProps$labe = node[aliasProps.label]) !== null && _node$aliasProps$labe !== void 0 ? _node$aliasProps$labe : node[aliasProps.value],
+          value: node[aliasProps.value],
+          data: node[aliasProps.data]
+        });
+        return {
+          label: (_node$aliasProps$labe2 = node[aliasProps.label]) !== null && _node$aliasProps$labe2 !== void 0 ? _node$aliasProps$labe2 : node[aliasProps.value],
+          value: node[aliasProps.value],
+          data: node[aliasProps.data]
+        };
+      });
     }
     return [];
-  }, [getOptionInstance, props.children]);
+  }, [aliasProps.data, aliasProps.label, aliasProps.options, aliasProps.value, getOptionInstance, props.children, props.options]);
 
   // 多选框值
   var multiValue = useMemo(function () {
@@ -172,6 +205,15 @@ var useSelect = function useSelect(props) {
     }
     return [];
   }, [multiValue, multiple, optionData]);
+  var selected = useMemo(function () {
+    if (multiple) {
+      return multiOptionData;
+    } else {
+      return [].concat(_toConsumableArray(optionData), _toConsumableArray(Array.from(cachedOptions.current.values()))).find(function (item) {
+        return item.value === value;
+      });
+    }
+  }, [multiple, multiOptionData, optionData, value]);
   var label = useMemo(function () {
     if (!multiple && selected && !Array.isArray(selected)) {
       var _selected$label;
@@ -191,7 +233,7 @@ var useSelect = function useSelect(props) {
         lng: locale
       });
     }
-    if (!_placeholder) {
+    if (props.placeholder) {
       _placeholder = props.placeholder;
     }
     return multiple || isEmpty(label) ? _placeholder : label;
@@ -313,7 +355,7 @@ var useSelect = function useSelect(props) {
    * @returns
    */
   var toggleMenu = useCallback(function (event) {
-    event.preventDefault();
+    event === null || event === void 0 || event.preventDefault();
     event === null || event === void 0 || event.stopPropagation();
     if (disabled) {
       setVisible(false);
@@ -347,7 +389,7 @@ var useSelect = function useSelect(props) {
     event.stopPropagation();
     event.preventDefault();
     setValue(multiple ? [] : '');
-    setSelected(null);
+    // setSelected(null);
     (_selectDropdownRef$cu3 = selectDropdownRef.current) === null || _selectDropdownRef$cu3 === void 0 || _selectDropdownRef$cu3.hover('');
     onChange === null || onChange === void 0 || onChange(multiple ? [] : '');
     onClearProp === null || onClearProp === void 0 || onClearProp();
@@ -358,7 +400,7 @@ var useSelect = function useSelect(props) {
 
   /** 选中项回调 */
   var onChoose = useCallback(function (val, data, event) {
-    event.preventDefault();
+    event === null || event === void 0 || event.preventDefault();
     if (isNotEmpty(val)) {
       var result = val;
       var multiData = [];
@@ -374,9 +416,10 @@ var useSelect = function useSelect(props) {
           result = [].concat(_toConsumableArray(multiValue), [val]);
           multiData = [].concat(_toConsumableArray(multiOptionData), [data]);
         }
-        setSelected(multiData);
+        // setSelected(multiData);
       } else {
-        setSelected(data);
+        setInputValue('');
+        // setSelected(data);
       }
       if (allowCreate && isNotEmpty(inputValue)) {
         var _inputRef$current;
@@ -395,6 +438,7 @@ var useSelect = function useSelect(props) {
       setValue(result);
       onChange === null || onChange === void 0 || onChange(result, multiple ? multiData : data);
       !multiple && toggleMenu(event);
+      return result;
     } else {
       setVisible(false);
     }
@@ -439,23 +483,29 @@ var useSelect = function useSelect(props) {
       return;
     }
     if (multiple && Array.isArray(value)) {
-      setSelected(multiOptionData.filter(function (item) {
-        return value.includes(item.value);
-      }));
+      // setSelected(multiOptionData.filter(item => value.includes(item.value)));
       initedRef.current = true;
     } else {
       if (isNotEmpty(value)) {
         var data = optionData.find(function (item) {
           return item.value === value;
         });
-        setSelected(data);
+        // setSelected(data);
         initedRef.current = true;
       } else {
-        setSelected(null);
+        // setSelected(null);
         initedRef.current = true;
       }
     }
   }, [value]);
+  useResizeObserver(wrapperRef, function (entries) {
+    var _entries = _slicedToArray(entries, 1),
+      entry = _entries[0];
+    if (entry) {
+      var _popperInstRef$curren3;
+      (_popperInstRef$curren3 = popperInstRef.current) === null || _popperInstRef$curren3 === void 0 || _popperInstRef$curren3.update();
+    }
+  });
   return _objectSpread(_objectSpread({}, rest), {}, {
     nsSelect: nsSelect,
     containerRef: containerRef,
@@ -510,7 +560,12 @@ var useSelect = function useSelect(props) {
     remote: remote,
     handleCompositionStart: handleCompositionStart,
     handleCompositionUpdate: handleCompositionUpdate,
-    handleCompositionEnd: handleCompositionEnd
+    handleCompositionEnd: handleCompositionEnd,
+    cachedOptions: cachedOptions,
+    aliasProps: aliasProps,
+    validateIcon: validateIcon,
+    statusIcon: statusIcon,
+    validateState: validateState
   });
 };
 export default useSelect;

package/dist/Skeleton/typings.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { BaseProps, NativeProps } from '../types/common';
-export interface SkeletonProps extends BaseProps, NativeProps {
+export interface SkeletonProps extends BaseProps, NativeProps<'--el-skeleton-color' | '--el-skeleton-to-color'> {
     /** 是否显示骨架屏（可控） */
     visible?: boolean;
     /** 默认是否显示骨架屏 */

package/dist/Slider/Button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SliderButtonProps, SliderButtonRef } from './typings';
+declare const SliderButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<SliderButtonProps & React.RefAttributes<SliderButtonRef>>>;
+export default SliderButton;

package/dist/Slider/Button.js

@@ -0,0 +1,96 @@
+var _templateObject, _templateObject2;
+var _excluded = ["value", "vertical", "tooltipClass", "placement", "id", "onChange"];
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import classNames from 'classnames';
+import React, { forwardRef, memo, useContext, useImperativeHandle } from 'react';
+import { useClassNames } from "../hooks";
+import Tooltip from "../Tooltip/Tooltip";
+import { useSliderButton } from "./hooks/useSliderButton";
+import { SliderContext } from "./SliderContext";
+var SliderButton = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context$disabled;
+  var value = props.value,
+    vertical = props.vertical,
+    tooltipClass = props.tooltipClass,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'top' : _props$placement,
+    id = props.id,
+    onChange = props.onChange,
+    ariaProps = _objectWithoutProperties(props, _excluded);
+  var ns = useClassNames('slider');
+  var context = useContext(SliderContext);
+  var disabled = (_context$disabled = context === null || context === void 0 ? void 0 : context.disabled) !== null && _context$disabled !== void 0 ? _context$disabled : false;
+  var _useSliderButton = useSliderButton(value, props, onChange),
+    tooltipRef = _useSliderButton.tooltipRef,
+    initData = _useSliderButton.initData,
+    buttonRef = _useSliderButton.buttonRef,
+    tooltipVisible = _useSliderButton.tooltipVisible,
+    showTooltip = _useSliderButton.showTooltip,
+    wrapperStyle = _useSliderButton.wrapperStyle,
+    formatValue = _useSliderButton.formatValue,
+    hovering = _useSliderButton.hovering,
+    dragging = _useSliderButton.dragging,
+    handleMouseEnter = _useSliderButton.handleMouseEnter,
+    handleMouseLeave = _useSliderButton.handleMouseLeave,
+    onButtonDown = _useSliderButton.onButtonDown,
+    _onKeyDown = _useSliderButton.onKeyDown,
+    _setPosition = _useSliderButton.setPosition;
+  useImperativeHandle(ref, function () {
+    return {
+      onButtonDown: onButtonDown,
+      onKeyDown: function onKeyDown(event) {
+        _onKeyDown(event);
+      },
+      setPosition: function setPosition(newPosition) {
+        _setPosition(newPosition);
+      },
+      hovering: hovering,
+      dragging: dragging
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: buttonRef,
+    id: id,
+    className: classNames(ns.e(_templateObject || (_templateObject = _taggedTemplateLiteral(["button-wrapper"]))), {
+      hover: hovering,
+      dragging: dragging
+    }),
+    style: wrapperStyle,
+    tabIndex: disabled ? -1 : 0,
+    role: ariaProps.role,
+    "aria-label": ariaProps['aria-label'],
+    "aria-labelledby": ariaProps['aria-labelledby'],
+    "aria-valuemin": ariaProps['aria-valuemin'],
+    "aria-valuemax": ariaProps['aria-valuemax'],
+    "aria-valuenow": ariaProps['aria-valuenow'],
+    "aria-valuetext": ariaProps['aria-valuetext'],
+    "aria-orientation": ariaProps['aria-orientation'],
+    "aria-disabled": ariaProps['aria-disabled'],
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onMouseDown: onButtonDown,
+    onTouchStart: onButtonDown,
+    onFocus: handleMouseEnter,
+    onBlur: handleMouseLeave,
+    onKeyDown: _onKeyDown,
+    onTouchStartCapture: onButtonDown
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    ref: tooltipRef,
+    visible: tooltipVisible,
+    placement: placement,
+    fallbackPlacements: ['top', 'bottom', 'right', 'left'],
+    disabled: !showTooltip,
+    popperClass: tooltipClass,
+    content: /*#__PURE__*/React.createElement("span", null, String(formatValue)),
+    trigger: "hover"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(ns.e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["button"]))), {
+      hover: hovering,
+      dragging: dragging
+    })
+  })));
+}));
+SliderButton.displayName = 'ElSliderButton';
+export default SliderButton;

package/dist/Slider/Marker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SliderMarkerProps } from './typings';
+declare const SliderMarker: React.NamedExoticComponent<SliderMarkerProps>;
+export default SliderMarker;

package/dist/Slider/Marker.js

@@ -0,0 +1,31 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import classNames from 'classnames';
+import React, { memo, useMemo } from 'react';
+import { useClassNames } from "../hooks";
+var SliderMarker = /*#__PURE__*/memo(function (props) {
+  var mark = props.mark,
+    style = props.style,
+    onMousedown = props.onMousedown;
+  var _useClassNames = useClassNames('slider'),
+    e = _useClassNames.e;
+  var label = useMemo(function () {
+    return typeof mark === 'string' ? mark : mark === null || mark === void 0 ? void 0 : mark.label;
+  }, [mark]);
+  var markStyle = useMemo(function () {
+    return typeof mark === 'string' ? undefined : mark === null || mark === void 0 ? void 0 : mark.style;
+  }, [mark]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["marks-text"])))),
+    style: _objectSpread(_objectSpread({}, style), markStyle),
+    onMouseDown: onMousedown
+  }, label);
+});
+SliderMarker.displayName = 'ElSliderMarker';
+export default SliderMarker;

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SliderProps, SliderRef } from './typings';
+declare const Slider: React.MemoExoticComponent<React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>>;
+export default Slider;

package/dist/Slider/Slider.js

@@ -0,0 +1,263 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
+import InputNumber from "../InputNumber/InputNumber";
+import { mergeDefaultProps } from "../Util";
+import { useClassNames, useControlled, useSize } from "../hooks";
+import SliderButton from "./Button";
+import SliderMarker from "./Marker";
+import { SliderContext } from "./SliderContext";
+import { useMarks, useSlider, useStops, useWatch } from "./hooks";
+import { useLifecycle } from "./hooks/useLifecycle";
+var Slider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  props = mergeDefaultProps({
+    min: 0,
+    max: 100,
+    step: 1,
+    showInputControls: true,
+    showInput: false,
+    showStops: false,
+    showTooltip: true
+  }, props);
+  var _props = props,
+    minProp = _props.min,
+    maxProp = _props.max,
+    step = _props.step,
+    showInput = _props.showInput,
+    showInputControls = _props.showInputControls,
+    size = _props.size,
+    inputSize = _props.inputSize,
+    showStops = _props.showStops,
+    formatTooltip = _props.formatTooltip,
+    range = _props.range,
+    vertical = _props.vertical,
+    rangeStartLabel = _props.rangeStartLabel,
+    rangeEndLabel = _props.rangeEndLabel,
+    formatValueText = _props.formatValueText,
+    tooltipClass = _props.tooltipClass,
+    _props$placement = _props.placement,
+    placement = _props$placement === void 0 ? 'top' : _props$placement,
+    ariaLabel = _props.ariaLabel,
+    onChange = _props.onChange,
+    onInput = _props.onInput,
+    className = _props.className,
+    style = _props.style;
+  var ns = useClassNames('slider');
+  var _useControlled = useControlled(props.value, props.defaultValue),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    value = _useControlled2[0],
+    setValue = _useControlled2[1];
+  var emit = useCallback(function (event, val) {
+    switch (event) {
+      case 'input':
+        onInput === null || onInput === void 0 || onInput(val);
+        break;
+      case 'change':
+        setValue(val);
+        onChange === null || onChange === void 0 || onChange(val);
+        break;
+    }
+  }, [setValue, onInput, onChange]);
+  var _useSlider = useSlider(value, props, emit),
+    sliderRef = _useSlider.sliderRef,
+    firstButtonRef = _useSlider.firstButtonRef,
+    secondButtonRef = _useSlider.secondButtonRef,
+    sliderDisabled = _useSlider.sliderDisabled,
+    minValue = _useSlider.minValue,
+    maxValue = _useSlider.maxValue,
+    runwayStyle = _useSlider.runwayStyle,
+    barStyle = _useSlider.barStyle,
+    resetSize = _useSlider.resetSize,
+    emitChange = _useSlider.emitChange,
+    onSliderWrapperPrevent = _useSlider.onSliderWrapperPrevent,
+    _onSliderClick = _useSlider.onSliderClick,
+    onSliderDown = _useSlider.onSliderDown,
+    onSliderMarkerDown = _useSlider.onSliderMarkerDown,
+    setFirstValue = _useSlider.setFirstValue,
+    setSecondValue = _useSlider.setSecondValue,
+    initData = _useSlider.initData,
+    setInitData = _useSlider.setInitData,
+    updateDragging = _useSlider.updateDragging;
+  var markList = useMarks(props);
+  var _useStops = useStops(props, initData, minValue, maxValue),
+    stops = _useStops.stops,
+    getStopStyle = _useStops.getStopStyle;
+  var sliderWrapperSize = useSize(size);
+  var sliderInputSize = useMemo(function () {
+    return inputSize || size;
+  }, [inputSize, size]);
+  var firstValue = initData.firstValue,
+    secondValue = initData.secondValue,
+    sliderSize = initData.sliderSize;
+  var renderInput = useMemo(function () {
+    return showInput && !range && step !== 'mark';
+  }, [showInput, range, step]);
+  useWatch(value, props, initData, setInitData, minValue, maxValue, emit);
+  var precision = useMemo(function () {
+    var stepValue = typeof step === 'number' ? step : 1;
+    var precisions = [minProp, maxProp, stepValue].map(function (item) {
+      var decimal = "".concat(item).split('.')[1];
+      return decimal ? decimal.length : 0;
+    });
+    return Math.max.apply(null, precisions);
+  }, [minProp, maxProp, step]);
+  var sliderInputStep = useMemo(function () {
+    return typeof step === 'number' ? step : 1;
+  }, [step]);
+  var _useLifecycle = useLifecycle(value, props, initData, resetSize),
+    sliderWrapper = _useLifecycle.sliderWrapper;
+  useEffect(function () {
+    var wrapper = sliderWrapper.current;
+    if (wrapper) {
+      wrapper.addEventListener('touchstart', onSliderWrapperPrevent, {
+        passive: false
+      });
+      wrapper.addEventListener('touchmove', onSliderWrapperPrevent, {
+        passive: false
+      });
+      return function () {
+        wrapper.removeEventListener('touchstart', onSliderWrapperPrevent);
+        wrapper.removeEventListener('touchmove', onSliderWrapperPrevent);
+      };
+    }
+  }, []);
+  var contextValue = useMemo(function () {
+    return _objectSpread(_objectSpread({}, props), {}, {
+      sliderSize: sliderSize,
+      disabled: sliderDisabled,
+      precision: precision,
+      markList: markList,
+      formatTooltip: formatTooltip,
+      emitChange: emitChange,
+      resetSize: resetSize,
+      updateDragging: updateDragging
+    });
+  }, [props, sliderSize, sliderDisabled, precision, markList, formatTooltip, emitChange, resetSize, updateDragging]);
+  var sliderKls = classNames(ns.b(), ns.m(sliderWrapperSize), ns.is({
+    vertical: vertical
+  }), _defineProperty({}, ns.m('with-input'), renderInput), className);
+  useImperativeHandle(ref, function () {
+    return {
+      onSliderClick: function onSliderClick(event) {
+        _onSliderClick(event);
+      }
+    };
+  });
+  var firstValueText = formatValueText ? formatValueText(firstValue) : "".concat(firstValue);
+  var secondValueText = formatValueText ? formatValueText(secondValue) : "".concat(secondValue);
+  return /*#__PURE__*/React.createElement(SliderContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: sliderWrapper,
+    className: sliderKls,
+    role: range ? 'group' : undefined,
+    "aria-label": range ? ariaLabel : undefined,
+    style: style,
+    onTouchStart: function onTouchStart(e) {
+      onSliderWrapperPrevent(e.nativeEvent);
+    },
+    onTouchMove: function onTouchMove(e) {
+      onSliderWrapperPrevent(e.nativeEvent);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: sliderRef,
+    className: classNames(ns.e('runway'), {
+      'show-input': renderInput
+    }, ns.is({
+      disabled: sliderDisabled
+    })),
+    style: runwayStyle,
+    onMouseDown: function onMouseDown(e) {
+      return onSliderDown(e);
+    },
+    onTouchStart: function onTouchStart(e) {
+      return onSliderDown(e);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ns.e('bar'),
+    style: barStyle
+  }), /*#__PURE__*/React.createElement(SliderButton, {
+    ref: firstButtonRef,
+    value: firstValue,
+    vertical: vertical,
+    tooltipClass: tooltipClass,
+    placement: placement,
+    role: "slider",
+    "aria-label": range ? rangeStartLabel : ariaLabel,
+    "aria-valuemin": minProp,
+    "aria-valuemax": range ? secondValue : maxProp,
+    "aria-valuenow": firstValue,
+    "aria-valuetext": firstValueText,
+    "aria-orientation": vertical ? 'vertical' : 'horizontal',
+    "aria-disabled": sliderDisabled,
+    onChange: setFirstValue
+  }), range && /*#__PURE__*/React.createElement(SliderButton, {
+    ref: secondButtonRef,
+    value: secondValue,
+    vertical: vertical,
+    tooltipClass: tooltipClass,
+    placement: placement,
+    role: "slider",
+    "aria-label": rangeEndLabel,
+    "aria-valuemin": firstValue,
+    "aria-valuemax": maxProp,
+    "aria-valuenow": secondValue,
+    "aria-valuetext": secondValueText,
+    "aria-orientation": vertical ? 'vertical' : 'horizontal',
+    "aria-disabled": sliderDisabled,
+    onChange: setSecondValue
+  }), showStops && /*#__PURE__*/React.createElement("div", null, stops.map(function (item, key) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: ns.e('stop'),
+      style: getStopStyle(item)
+    });
+  })), markList.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, markList.map(function (item, key) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      style: getStopStyle(item.position),
+      className: classNames(ns.e('stop'), ns.e('marks-stop'))
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ns.e('marks')
+  }, markList.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(SliderMarker, {
+      key: key,
+      mark: item.mark,
+      style: getStopStyle(item.position),
+      onMousedown: function onMousedown(e) {
+        e.stopPropagation();
+        onSliderMarkerDown(item.position);
+      }
+    });
+  })))), renderInput && /*#__PURE__*/React.createElement(InputNumber, {
+    value: firstValue,
+    className: ns.e('input'),
+    step: sliderInputStep,
+    disabled: sliderDisabled,
+    controls: showInputControls,
+    min: minProp,
+    max: maxProp,
+    precision: precision,
+    size: sliderInputSize,
+    onChange: function onChange(val) {
+      if (!Number.isNaN(val)) {
+        setFirstValue(val);
+        emitChange();
+      }
+    }
+  })));
+}));
+Slider.displayName = 'ElSlider';
+export default Slider;

package/dist/Slider/SliderContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SliderContextValue } from './typings';
+export declare const SliderContext: import("react").Context<SliderContextValue>;