@qsxy/element-plus-react 1.0.3 → 2.0.0

package/dist/Segmented/Segmented.js

@@ -0,0 +1,208 @@
+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 isObject from 'lodash/isObject';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useClassNames, useControlled, useDisabled, useSize } from "../hooks";
+import { useResizeObserver } from "../hooks/useResizeObserver";
+import { defaultProps as defaultAliasProps } from "./typings";
+var Segmented = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    size = props.size,
+    disabled = props.disabled,
+    options = props.options,
+    block = props.block,
+    id = props.id,
+    nameProp = props.name,
+    ariaLabel = props.ariaLabel,
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    children = props.children;
+  var ns = useClassNames('segmented');
+  var segmentedSize = useSize(size);
+  var _disabled = useDisabled(disabled);
+  var segmentedRef = useRef(null);
+  var _useState = useState({
+      isInit: false,
+      width: 0,
+      height: 0,
+      translateX: 0,
+      translateY: 0,
+      focusVisible: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    indicator = _useState2[0],
+    setIndicator = _useState2[1];
+  var _useControlled = useControlled(props.value, props.defaultValue),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    value = _useControlled2[0],
+    setValue = _useControlled2[1];
+  var aliasProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, defaultAliasProps), props.props);
+  }, [props.props]);
+  var getValue = useCallback(function (item) {
+    return isObject(item) ? item[aliasProps.value] : item;
+  }, [aliasProps.value]);
+  var getLabel = useCallback(function (item) {
+    return isObject(item) ? item[aliasProps.label] : item;
+  }, [aliasProps.label]);
+  var getDisabled = useCallback(function (item) {
+    return !!(_disabled || (isObject(item) ? item[aliasProps.disabled] : false));
+  }, [_disabled, aliasProps.disabled]);
+  var getSelected = useCallback(function (item) {
+    return value === getValue(item);
+  }, [value, getValue]);
+  var getOption = useCallback(function (val) {
+    return options.find(function (item) {
+      return getValue(item) === val;
+    });
+  }, [options, getValue]);
+  var updateSelect = useCallback(function () {
+    if (!segmentedRef.current) {
+      return;
+    }
+    var selectedItem = segmentedRef.current.querySelector('.is-selected');
+    var selectedItemInput = segmentedRef.current.querySelector('.is-selected input');
+    if (!selectedItem || !selectedItemInput) {
+      setIndicator(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          width: 0,
+          height: 0,
+          translateX: 0,
+          translateY: 0,
+          focusVisible: false
+        });
+      });
+      return;
+    }
+    setIndicator(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        isInit: true
+      });
+    });
+    var focusVisible = false;
+    try {
+      focusVisible = selectedItemInput.matches(':focus-visible');
+    } catch (_unused) {
+      //
+    }
+    if (direction === 'vertical') {
+      setIndicator(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          height: selectedItem.offsetHeight,
+          translateY: selectedItem.offsetTop,
+          focusVisible: focusVisible
+        });
+      });
+    } else {
+      setIndicator(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          width: selectedItem.offsetWidth,
+          translateX: selectedItem.offsetLeft
+        });
+      });
+    }
+  }, [direction]);
+  var handleChange = useCallback(function (evt, item) {
+    var newValue = getValue(item);
+    setValue(newValue);
+    onChange === null || onChange === void 0 || onChange(newValue);
+    evt.target.checked = value === newValue;
+  }, [getValue, setValue, onChange, value]);
+  var selectedStyle = useMemo(function () {
+    if (direction === 'vertical') {
+      return {
+        width: '100%',
+        height: "".concat(indicator.height, "px"),
+        transform: "translateY(".concat(indicator.translateY, "px)"),
+        display: indicator.isInit ? 'block' : 'none'
+      };
+    }
+    return {
+      width: "".concat(indicator.width, "px"),
+      height: '100%',
+      transform: "translateX(".concat(indicator.translateX, "px)"),
+      display: indicator.isInit ? 'block' : 'none'
+    };
+  }, [direction, indicator]);
+  var segmentedCls = classNames(ns.b(), ns.m(segmentedSize), ns.is({
+    block: block
+  }), className);
+  var selectedCls = classNames(ns.e('item-selected'), ns.is({
+    disabled: getDisabled(getOption(value))
+  }), ns.is({
+    'focus-visible': indicator.focusVisible
+  }));
+  var name = nameProp || id;
+  var domId = id;
+  useResizeObserver(segmentedRef, updateSelect);
+  useEffect(function () {
+    updateSelect();
+  }, [options]);
+  useEffect(function () {
+    updateSelect();
+  }, [value]);
+  useImperativeHandle(ref, function () {
+    return {
+      updateSelect: updateSelect
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: domId,
+    ref: segmentedRef,
+    className: segmentedCls,
+    role: "radiogroup",
+    "aria-label": ariaLabel || 'segmented',
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(ns.e('group'), ns.m(direction))
+  }, /*#__PURE__*/React.createElement("div", {
+    style: selectedStyle,
+    className: selectedCls
+  }), options.map(function (item, index) {
+    var value = getValue(item);
+    var label = getLabel(item);
+    if (children) {
+      if (children && typeof children === 'function') {
+        label = children(item);
+      } else {
+        label = children;
+      }
+    }
+    var isDisabled = getDisabled(item);
+    var isSelected = getSelected(item);
+    var itemCls = classNames(ns.e('item'), ns.is({
+      selected: isSelected,
+      disabled: isDisabled
+    }));
+    return /*#__PURE__*/React.createElement("label", {
+      key: index,
+      className: itemCls
+    }, /*#__PURE__*/React.createElement("input", {
+      className: ns.e('item-input'),
+      type: "radio",
+      name: name,
+      disabled: isDisabled,
+      checked: isSelected,
+      onChange: function onChange(e) {
+        return handleChange(e, item);
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ns.e('item-label')
+    }, label));
+  })));
+}));
+Segmented.displayName = 'ElSegmented';
+export default Segmented;

package/dist/Segmented/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Segmented } from './Segmented';
+export type { Option, SegmentedComponentProps, SegmentedProps } from './typings';

package/dist/Segmented/index.js

@@ -0,0 +1 @@
+export { default as Segmented } from "./Segmented";

package/dist/Segmented/typings.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { BaseProps, FormControlBaseProps, NativeProps } from '../types/common';
+export type Option = Record<string, any> | string | number | boolean;
+export interface SegmentedProps {
+    label?: string;
+    value?: string;
+    disabled?: string;
+}
+export declare const defaultProps: Required<SegmentedProps>;
+export interface SegmentedComponentProps<T extends Option = Option> extends BaseProps<ReactElement | ReactElement[] | ((data: T) => ReactElement | ReactElement[])>, NativeProps<'--el-segmented-color' | '--el-segmented-bg-color' | '--el-segmented-padding' | '--el-segmented-item-selected-color' | '--el-segmented-item-selected-bg-color' | '--el-segmented-item-selected-disabled-bg-color' | '--el-segmented-item-hover-color' | '--el-segmented-item-hover-bg-color' | '--el-segmented-item-active-bg-color' | '--el-segmented-item-disabled-color'>, FormControlBaseProps<string | number | boolean> {
+    direction?: 'vertical' | 'horizontal';
+    options?: T[];
+    props?: SegmentedProps;
+    block?: boolean;
+    validateEvent?: boolean;
+    id?: string;
+    name?: string;
+    ariaLabel?: string;
+    onChange?: (val: string | number | boolean) => void;
+}

package/dist/Segmented/typings.js

@@ -0,0 +1,5 @@
+export var defaultProps = {
+  label: 'label',
+  value: 'value',
+  disabled: 'disabled'
+};

package/dist/Select/SelectCore.js

@@ -1,20 +1,24 @@
 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, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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, { forwardRef, useImperativeHandle } from 'react';
+import React, { Children, forwardRef, useImperativeHandle, useMemo } from 'react';
 import Icon from "../Icon/Icon";
 import Popper from "../Popper/Popper";
 import Tag from "../Tag/Tag";
 import Tooltip from "../Tooltip/Tooltip";
 import { isEmpty, isNotEmpty } from "../Util";
+import { ValidateComponentsMap } from "../Util/icons";
+import { useClassNames } from "../hooks";
 import { useCalcInputWidth } from "../hooks/useCalcInputWidth";
+import Option from "./Option";
+import OptionGroup from "./OptionGroup";
 import SelectDropdown from "./SelectDropdown";
 import useSelect from "./useSelect";
 var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -74,14 +78,53 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     handleCompositionUpdate = _props.handleCompositionUpdate,
     handleCompositionEnd = _props.handleCompositionEnd,
     tag = _props.tag,
-    cachedOptions = _props.cachedOptions;
+    cachedOptions = _props.cachedOptions,
+    aliasProps = _props.aliasProps,
+    options = _props.options,
+    validateIcon = _props.validateIcon,
+    statusIcon = _props.statusIcon,
+    validateState = _props.validateState;
   var b = nsSelect.b,
     e = nsSelect.e,
     m = nsSelect.m,
     is = nsSelect.is;
+  var nsInput = useClassNames('input');
   var _useCalcInputWidth = useCalcInputWidth(),
     calculatorRef = _useCalcInputWidth.calculatorRef,
     inputStyle = _useCalcInputWidth.inputStyle;
+  var optionChilds = useMemo(function () {
+    if (Children.count(props.children) > 0) {
+      return props.children;
+    }
+    if (options.length > 0) {
+      var radios = options.map(function (item) {
+        var _item$aliasProps$opti;
+        if (((_item$aliasProps$opti = item[aliasProps.options]) === null || _item$aliasProps$opti === void 0 ? void 0 : _item$aliasProps$opti.length) > 0) {
+          return /*#__PURE__*/React.createElement(OptionGroup, {
+            key: item[aliasProps.value],
+            label: item[aliasProps.label],
+            disabled: item[aliasProps.disabled]
+          }, item[aliasProps.options].map(function (child) {
+            return /*#__PURE__*/React.createElement(Option, {
+              key: child[aliasProps.value],
+              value: child[aliasProps.value],
+              label: child[aliasProps.label],
+              disabled: child[aliasProps.disabled],
+              data: child[aliasProps.data]
+            });
+          }));
+        }
+        return /*#__PURE__*/React.createElement(Option, {
+          key: item[aliasProps.value],
+          value: item[aliasProps.value],
+          label: item[aliasProps.label],
+          disabled: item[aliasProps.disabled],
+          data: item[aliasProps.data]
+        });
+      });
+      return radios;
+    }
+  }, [options, props.children, aliasProps.data, aliasProps.disabled, aliasProps.label, aliasProps.options, aliasProps.value]);
   useImperativeHandle(ref, function () {
     return {
       popperInstRef: popperInstRef,
@@ -208,8 +251,6 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     onBlur: function onBlur() {
       return setIsFocused(false);
     }
-    // error={error}
-    // warning={warning}
     // style={multiple ? { height: inputHeight } : {}}
     // suffix={<Icon prefix="fal" name="angle-down" rotate={visible ? 180 : null} onClick={toggleMenu} />}
   }), filterable ? /*#__PURE__*/React.createElement("span", {
@@ -232,10 +273,12 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     name: clearIcon,
     className: classNames(e(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["caret"]))), e(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["icon"]))), e(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["clear"])))),
     onClick: onClear
-  }) : null)), /*#__PURE__*/React.createElement(Popper, _extends({
+  }) : null, validateState && validateIcon && statusIcon && /*#__PURE__*/React.createElement(Icon, _extends({}, ValidateComponentsMap[validateState], {
+    className: classNames(nsInput.e('icon'), nsInput.e('validateIcon'), is('loading', validateState === 'validating'))
+  })))), /*#__PURE__*/React.createElement(Popper, _extends({
     referenceElement: containerRef,
     visible: visible,
-    popperClass: e(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["popper"]))),
+    popperClass: classNames(e(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["popper"]))), is(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["pure"])))),
     popperInstRef: popperInstRef,
     popperStyle: _objectSpread(_objectSpread({}, popperStyle), {}, {
       visibility: filterable && remote && isEmpty(inputValue) ? 'hidden' : 'visible'
@@ -262,7 +305,7 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
   }, _props, {
     onClear: props.onClear,
     cachedOptions: cachedOptions
-  }), props.children)));
+  }), optionChilds)));
 });
 SelectCore.displayName = 'SelectCore';
 export default SelectCore;

package/dist/Select/typings.d.ts

@@ -14,7 +14,7 @@ export type SelectRef = {
     onChoose: <T = any>(val: string, data: OptionData<T>, event?: any) => ValueType;
 };
 type Child = React.ReactElement<SelectOptionGroupProps | SelectOptionProps> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps>[];
-export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<Child | Child[]>, NativeProps, AnimationEventProps, PopperOptions {
+export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<Child | Child[]>, NativeProps<'--el-select-border-color-hover' | '--el-select-disabled-color' | '--el-select-disabled-border' | '--el-select-font-size' | '--el-select-close-hover-color' | '--el-select-input-color' | '--el-select-multiple-input-color' | '--el-select-input-focus-border-color' | '--el-select-input-font-size' | '--el-select-width'>, AnimationEventProps, PopperOptions {
     /** 是否多选 */
     multiple?: boolean;
     /** 是否禁用 */
@@ -42,15 +42,9 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     /** 远程加载时显示的图标 */
     loadingIcon?: React.ReactElement;
     /**  */
-    max?: boolean;
     /** 下拉菜单的内容是否有箭头 */
     showArrow?: boolean;
     /**  */
-    required?: boolean;
-    /** 表单校验错误提示 */
-    error?: boolean;
-    /** 表单校验警告提示 */
-    warning?: boolean;
     /** 下拉项最大宽度 */
     maxWidth?: number;
     /** 多选时是否将选中值按文字的形式展示 */
@@ -95,7 +89,6 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     /** 可清空的单选模式下用户点击清空按钮时触发  */
     onClear?: () => void;
     /** 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 */
-    automaticDropdown?: boolean;
     /** 下拉列表顶部的内容 */
     header?: React.ReactElement;
     /** 下拉列表底部的内容 */
@@ -107,6 +100,18 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
         deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData<T>) => void;
     }) => React.ReactElement;
     unmountOnExit?: boolean;
+    /** 选项的数据源， value 的 key 和 label 和  disabled可以通过 props自定义. */
+    options?: Array<{
+        [key: string]: any;
+    }>;
+    /** options 的配置 */
+    props?: {
+        value?: string;
+        label?: string;
+        disabled?: string;
+        options?: string;
+        data?: string;
+    };
 }
 export interface SelectOptionProps extends BaseProps, NativeProps {
     /** 选项的值 */

package/dist/Select/useSelect.d.ts

@@ -72,6 +72,16 @@ declare const useSelect: (props: SelectProps) => {
     handleCompositionUpdate: (event: React.CompositionEvent<HTMLInputElement>) => void;
     handleCompositionEnd: (event: React.CompositionEvent<HTMLInputElement>) => void;
     cachedOptions: React.MutableRefObject<Map<OptionValue, OptionData<any>>>;
+    aliasProps: {
+        value?: string;
+        label?: string;
+        disabled?: string;
+        options?: string;
+        data?: string;
+    };
+    validateIcon: import("..").IconProps;
+    statusIcon: boolean;
+    validateState: "" | "error" | "success" | "validating";
     valueKey?: string;
     filterMethod?: (searchText: string) => void;
     noDataText?: string;
@@ -79,11 +89,7 @@ declare const useSelect: (props: SelectProps) => {
     loading?: boolean;
     loadingText?: string;
     loadingIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    max?: boolean;
     showArrow?: boolean;
-    required?: boolean;
-    error?: boolean;
-    warning?: boolean;
     maxWidth?: number;
     collapseTags?: boolean;
     maxCollapseTags?: number;
@@ -95,9 +101,7 @@ declare const useSelect: (props: SelectProps) => {
     appendToBody?: boolean;
     remoteMethod?: (searchText: string) => void;
     tagType?: import("..").TypeAttributes.Appearance;
-    tagEffect?: "light" | "dark" | "plain";
-    /** 获取所有的option组件 */
-    automaticDropdown?: boolean;
+    tagEffect?: "dark" | "light" | "plain";
     header?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     footer?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     tag?: <T_1 = any>(params: {
@@ -106,13 +110,23 @@ declare const useSelect: (props: SelectProps) => {
         deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData<T_1>) => void;
     }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     unmountOnExit?: boolean;
-    name?: string;
+    options?: {
+        [key: string]: any;
+    }[];
+    props?: {
+        value?: string;
+        label?: string;
+        disabled?: string;
+        options?: string;
+        data?: string;
+    };
     readOnly?: boolean;
+    name?: string;
     defaultValue?: ValueType;
     classPrefix?: string;
     children?: (React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>>[]) | (React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>>[])[];
     className?: string;
-    style?: React.CSSProperties & Partial<Record<never, string>>;
+    style?: React.CSSProperties & Partial<Record<"--el-select-border-color-hover" | "--el-select-disabled-color" | "--el-select-disabled-border" | "--el-select-font-size" | "--el-select-close-hover-color" | "--el-select-input-color" | "--el-select-multiple-input-color" | "--el-select-input-focus-border-color" | "--el-select-input-font-size" | "--el-select-width", string>>;
     beforeEnter?: (node?: HTMLElement | Text) => void;
     afterEnter?: (node?: HTMLElement | Text) => void;
     beforeLeave?: (node?: HTMLElement | Text) => void;

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,6 +115,12 @@ 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]);
 
   // 单选框显示文本
   // const [selected, setSelected] = useState<OptionData | OptionData[]>(null);
@@ -128,7 +143,7 @@ var useSelect = function useSelect(props) {
   /** 获取所有的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;
@@ -143,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 () {
@@ -463,6 +498,14 @@ var useSelect = function useSelect(props) {
       }
     }
   }, [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,
@@ -518,7 +561,11 @@ var useSelect = function useSelect(props) {
     handleCompositionStart: handleCompositionStart,
     handleCompositionUpdate: handleCompositionUpdate,
     handleCompositionEnd: handleCompositionEnd,
-    cachedOptions: cachedOptions
+    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;