@qsxy/element-plus-react 1.0.1 → 1.0.2

package/dist/Input/useComposition.js

@@ -0,0 +1,63 @@
+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 { useRef, useState } from 'react';
+/**
+ * Handle input text like Chinese
+ * chrome： compositionstart -> onChange -> compositionend
+ * other browser: compositionstart -> compositionend -> onChange
+ */
+export function useComposition(_ref) {
+  var value = _ref.value,
+    maxLength = _ref.maxLength,
+    onChange = _ref.onChange,
+    onKeyDown = _ref.onKeyDown,
+    onPressEnter = _ref.onPressEnter;
+  var refIsComposition = useRef(false);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    compositionValue = _useState2[0],
+    setCompositionValue = _useState2[1];
+  var triggerValueChange = function triggerValueChange(newValue, e) {
+    if (onChange &&
+    // Prevents onchange from being triggered twice
+    newValue !== value && (maxLength === undefined || newValue.length <= maxLength)) {
+      onChange(newValue, e);
+    }
+  };
+  return {
+    compositionValue: compositionValue,
+    triggerValueChange: triggerValueChange,
+    handleCompositionStart: function handleCompositionStart() {
+      refIsComposition.current = true;
+    },
+    handleCompositionEnd: function handleCompositionEnd(e) {
+      setCompositionValue(undefined);
+      triggerValueChange(e.target.value, e);
+    },
+    handleValueChange: function handleValueChange(e) {
+      var newValue = e.target.value;
+      if (!refIsComposition.current) {
+        // if e.type is compositionend event, the following content will trigger
+        compositionValue && setCompositionValue(undefined);
+        triggerValueChange(newValue, e);
+      } else {
+        refIsComposition.current = false;
+        setCompositionValue(newValue);
+      }
+    },
+    handleKeyDown: function handleKeyDown(e) {
+      var keyCode = e.key;
+      if (!refIsComposition.current) {
+        onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+        if (keyCode === 'Enter') {
+          onPressEnter === null || onPressEnter === void 0 || onPressEnter(e);
+          // normalizeHandler && triggerValueChange(normalizeHandler('onPressEnter')(e.target.value), e);
+        }
+      }
+    }
+  };
+}

package/dist/Input/utils.d.ts

@@ -0,0 +1,6 @@
+type TextAreaHeight = {
+    height: string;
+    minHeight?: string;
+};
+export declare function calcTextareaHeight(targetElement: HTMLTextAreaElement, minRows?: number, maxRows?: number): TextAreaHeight;
+export {};

package/dist/Input/utils.js

@@ -0,0 +1,91 @@
+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 { isNumber } from "../Util/base";
+var hiddenTextarea = undefined;
+var HIDDEN_STYLE = {
+  height: '0',
+  visibility: 'hidden',
+  overflow: /firefox/i.test(window.navigator.userAgent) ? '' : 'hidden',
+  position: 'absolute',
+  'z-index': '-1000',
+  top: '0',
+  right: '0'
+};
+var CONTEXT_STYLE = ['letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing', 'word-break'];
+function calculateNodeStyling(targetElement) {
+  var style = window.getComputedStyle(targetElement);
+  var boxSizing = style.getPropertyValue('box-sizing');
+  var paddingSize = Number.parseFloat(style.getPropertyValue('padding-bottom')) + Number.parseFloat(style.getPropertyValue('padding-top'));
+  var borderSize = Number.parseFloat(style.getPropertyValue('border-bottom-width')) + Number.parseFloat(style.getPropertyValue('border-top-width'));
+  var contextStyle = CONTEXT_STYLE.map(function (name) {
+    return [name, style.getPropertyValue(name)];
+  });
+  return {
+    contextStyle: contextStyle,
+    paddingSize: paddingSize,
+    borderSize: borderSize,
+    boxSizing: boxSizing
+  };
+}
+export function calcTextareaHeight(targetElement) {
+  var _hiddenTextarea$paren;
+  var minRows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var maxRows = arguments.length > 2 ? arguments[2] : undefined;
+  if (!hiddenTextarea) {
+    var _targetElement$parent;
+    hiddenTextarea = document.createElement('textarea');
+    ((_targetElement$parent = targetElement.parentNode) !== null && _targetElement$parent !== void 0 ? _targetElement$parent : document.body).appendChild(hiddenTextarea);
+  }
+  var _calculateNodeStyling = calculateNodeStyling(targetElement),
+    paddingSize = _calculateNodeStyling.paddingSize,
+    borderSize = _calculateNodeStyling.borderSize,
+    boxSizing = _calculateNodeStyling.boxSizing,
+    contextStyle = _calculateNodeStyling.contextStyle;
+  contextStyle.forEach(function (_ref) {
+    var _hiddenTextarea;
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return (_hiddenTextarea = hiddenTextarea) === null || _hiddenTextarea === void 0 ? void 0 : _hiddenTextarea.style.setProperty(key, value);
+  });
+  Object.entries(HIDDEN_STYLE).forEach(function (_ref3) {
+    var _hiddenTextarea2;
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    return (_hiddenTextarea2 = hiddenTextarea) === null || _hiddenTextarea2 === void 0 ? void 0 : _hiddenTextarea2.style.setProperty(key, value, 'important');
+  });
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
+  var height = hiddenTextarea.scrollHeight;
+  var result = {};
+  if (boxSizing === 'border-box') {
+    height = height + borderSize;
+  } else if (boxSizing === 'content-box') {
+    height = height - paddingSize;
+  }
+  hiddenTextarea.value = '';
+  var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+  if (isNumber(minRows)) {
+    var minHeight = singleRowHeight * minRows;
+    if (boxSizing === 'border-box') {
+      minHeight = minHeight + paddingSize + borderSize;
+    }
+    height = Math.max(minHeight, height);
+    result.minHeight = "".concat(minHeight, "px");
+  }
+  if (isNumber(maxRows)) {
+    var maxHeight = singleRowHeight * maxRows;
+    if (boxSizing === 'border-box') {
+      maxHeight = maxHeight + paddingSize + borderSize;
+    }
+    height = Math.min(maxHeight, height);
+  }
+  result.height = "".concat(height, "px");
+  (_hiddenTextarea$paren = hiddenTextarea.parentNode) === null || _hiddenTextarea$paren === void 0 || _hiddenTextarea$paren.removeChild(hiddenTextarea);
+  hiddenTextarea = undefined;
+  return result;
+}

package/dist/InputNumber/InputNumber.js

@@ -249,7 +249,7 @@ var InputNumber = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, re
       isCtrlKey.current = false;
     }, []),
     ref: inputRef
-  }, omit(htmlInputProps, ['disabled', 'size', 'onInput', 'onKeyDown', 'onKeyUp', 'size', 'onChange', 'style', 'className', 'type', 'name', 'prefix', 'readOnly', 'maxLength', 'minLength']))));
+  }, omit(htmlInputProps, ['value', 'defaultValue', 'disabled', 'size', 'onInput', 'onKeyDown', 'onKeyUp', 'size', 'onChange', 'style', 'className', 'type', 'name', 'prefix', 'readOnly', 'maxLength', 'minLength']))));
 }));
 InputNumber.displayName = 'ElInputNumber';
 export default InputNumber;

package/dist/InputNumber/typings.d.ts

@@ -3,7 +3,7 @@ import { InputRef } from '../Input/typings';
 import { BaseProps, FormControlBaseProps, NativeProps } from '../types/common';
 export type LiteralUnion<T extends U, U> = T | (U & {});
 export type ValueType = number | string;
-export interface InputNumberProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<HTMLDivElement>, NativeProps, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'value' | 'ref' | 'className' | 'readOnly' | 'disabled' | 'name' | 'children'> {
+export interface InputNumberProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<HTMLDivElement>, NativeProps, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'value' | 'ref' | 'className' | 'readOnly' | 'disabled' | 'name' | 'children'> {
     /** 设置计数器允许的最大值 */
     max?: number;
     /** 设置计数器允许的最小值 */

package/dist/Select/Option.js

@@ -14,7 +14,9 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     hoverValue = _useContext.hover,
     setHover = _useContext.setHover,
     multiple = _useContext.multiple;
-  var label = props.label,
+  var value = props.value,
+    label = props.label,
+    data = props.data,
     disabled = props.disabled,
     onClick = props.onClick;
 
@@ -22,31 +24,45 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
   var handleOnClick = useCallback(function (event) {
     event.stopPropagation();
     if (!disabled) {
-      onChoose(props.value, label || props.value + '', event);
-      onClick === null || onClick === void 0 || onClick(props.value, label || props.value.toString(), event);
+      onChoose(value, {
+        value: value,
+        label: label,
+        data: data
+      }, event);
+      onClick === null || onClick === void 0 || onClick(value, {
+        value: value,
+        label: label,
+        data: data
+      });
     }
-  }, [disabled, onChoose, props.value, label, onClick]);
+  }, [disabled, onChoose, value, label, data, onClick]);
 
   /** 是否已选中 */
   var selected = useMemo(function () {
     if (multiple && selectedValue instanceof Array) {
-      return selectedValue.includes(props.value);
+      return selectedValue.includes(value);
     }
-    return props.value === selectedValue;
-  }, [multiple, props.value, selectedValue]);
+    return value === selectedValue;
+  }, [multiple, value, selectedValue]);
+
+  // useEffect(() => {
+  //     onOptionCreate?.(value, { value, label, data });
+  //     return () => {
+  //         onOptionDestroy?.(value);
+  //     };
+  // }, []);
+
   return /*#__PURE__*/React.createElement("li", {
     className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["item"]))), is({
-      disabled: disabled
-    }), {
+      disabled: disabled,
       selected: selected,
-      hover: props.value === hoverValue
-    }, props.className),
+      hovering: value === hoverValue
+    }), props.className),
     style: props.style,
-    title: label,
-    key: props.value,
+    title: label + '',
     onClick: handleOnClick,
     onMouseEnter: function onMouseEnter() {
-      return setHover(props.value);
+      return setHover(value);
     },
     onMouseLeave: function onMouseLeave() {
       return setHover(selectedValue);

package/dist/Select/SelectContext.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import { ValueType } from './typings';
-interface SelectContextProps {
+import { OptionData, OptionValue, ValueType } from './typings';
+export interface SelectContextProps {
     value: ValueType;
     hover: ValueType;
     setHover: (value: ValueType) => void;
-    onChoose: (value: string | number, label: string, e: any) => void;
+    onChoose: (value: OptionValue, data: OptionData, e: any) => void;
     multiple: boolean;
 }
 export declare const SelectContext: import("react").Context<SelectContextProps>;
-export {};

package/dist/Select/SelectCore.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SelectProps, SelectRef, ValueType } from './typings';
-declare const SelectCore: React.ForwardRefExoticComponent<SelectProps<ValueType> & React.RefAttributes<SelectRef>>;
+import { SelectProps, SelectRef } from './typings';
+declare const SelectCore: React.ForwardRefExoticComponent<SelectProps<import("./typings").ValueType> & React.RefAttributes<SelectRef>>;
 export default SelectCore;