@qsxy/element-plus-react 1.0.1 → 1.0.3

package/dist/Input/typings.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import { BaseProps, FormControlBaseProps, NativeProps, TypeAttributes } from '../types/common';
 export type LiteralUnion<T extends U, U> = T | (U & {});
-export type ValueType = React.AllHTMLAttributes<HTMLInputElement>['value'];
+export type ValueType = string | number;
+export interface ModelModifiers {
+    trim?: boolean;
+    number?: boolean;
+    lazy?: boolean;
+}
 export type BaseInputRef = {
     /** 获取值 */
     getValue: () => ValueType;
@@ -14,6 +19,8 @@ export type BaseInputRef = {
     focus: () => void;
     /** 使 input 组件失去焦点 */
     blur: () => void;
+    /** 选中所有文本 */
+    select?: () => void;
     showClear?: (value: ValueType) => void;
     hideClear?: () => void;
 };
@@ -24,14 +31,17 @@ export type InputRef = {
 export type TextareaRef = {
     input: HTMLTextAreaElement;
 } & BaseInputRef;
-export interface InputProps extends FormControlBaseProps<ValueType>, BaseProps, NativeProps, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'children'> {
+export interface InputProps extends FormControlBaseProps<string | number>, BaseProps, NativeProps, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'children'> {
     size?: TypeAttributes.Size;
+    value?: string | number;
     /** 初始值 */
-    defaultValue?: ValueType;
+    defaultValue?: string | number;
     /**
      * text，textarea 和其他原生 input 的 type 值
      * ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types */
     type?: LiteralUnion<'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
+    /** 输入框唯一标识 */
+    id?: string;
     /** 输入框头部内容，只对 type="text" 有效 */
     prefix?: React.ReactElement<any> | string | number;
     /** 输入框尾部内容，只对 type="text" 有效 */
@@ -42,6 +52,8 @@ export interface InputProps extends FormControlBaseProps<ValueType>, BaseProps,
     append?: React.ReactElement | string | number;
     /** 是否可清空 */
     clearable?: boolean;
+    /** 指定输入值的格式。(只有当 type 是"text"时才能工作) */
+    formatter?: (value: ValueType) => string;
     /** 是否显示切换密码图标 */
     showPassword?: boolean;
     /** 是否纯文本模式，即无边框 */
@@ -66,12 +78,44 @@ export interface InputProps extends FormControlBaseProps<ValueType>, BaseProps,
     minLength?: number;
     /** 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效	 */
     showWordLimit?: boolean;
+    /** 字数统计的位置，仅当 show-word-limit 为 true 时生效。 */
+    wordLimitPosition?: 'inside' | 'outside';
     /** 是否隐藏值 */
     hiddenValue?: boolean;
+    /** 原生属性 autocomplete */
+    autocomplete?: string;
+    /** 原生属性 tabindex */
+    tabindex?: number;
+    /** 原生属性 aria-label */
+    ariaLabel?: string;
+    /** 原生属性 form */
+    form?: string;
+    /** 原生属性 autofocus */
+    autofocus?: boolean;
+    /** 原生属性 inputmode */
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** 容器的 role 属性 */
+    containerRole?: string;
+    /** 是否触发表单验证 */
+    validateEvent?: boolean;
+    /** 修饰符 */
+    modelModifiers?: ModelModifiers;
     /** 在点击由 clearable 属性生成的清空按钮时触发 */
     onClear?: (e: React.MouseEvent) => void;
     /** 在 Input 值改变时触发 */
     onChange?: (value: ValueType, event?: React.ChangeEvent) => void;
+    /** 在 Input 输入时触发 */
+    onInput?: (value: ValueType) => void;
+    /** 在 Input 获得焦点时触发 */
+    onFocus?: (event: React.FocusEvent) => void;
+    /** 在 Input 失去焦点时触发 */
+    onBlur?: (event: React.FocusEvent) => void;
+    /** 在 Input 按下键盘时触发 */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    /** 鼠标进入时触发 */
+    onMouseEnter?: (event: React.MouseEvent) => void;
+    /** 鼠标离开时触发 */
+    onMouseLeave?: (event: React.MouseEvent) => void;
 }
 export interface InputGroupProps extends BaseProps, NativeProps {
     /** 输入框前置内容，只对 type="text" 有效 */
@@ -79,7 +123,7 @@ export interface InputGroupProps extends BaseProps, NativeProps {
     /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
 }
-export interface TextareaProps extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'children'>, FormControlBaseProps<ValueType>, BaseProps, NativeProps {
+export interface TextareaProps extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'children'>, FormControlBaseProps<ValueType>, BaseProps, NativeProps {
     /** 初始值 */
     defaultValue?: ValueType;
     /** 表单校验错误提示 */
@@ -90,13 +134,20 @@ export interface TextareaProps extends Omit<React.AllHTMLAttributes<HTMLInputEle
     plain?: boolean;
     rows?: number;
     /** input自定义内联样式 */
-    innerStyle?: React.CSSProperties;
+    inputStyle?: React.CSSProperties;
     /** 最大输入长度 */
     maxLength?: number;
     /** 原生属性，最小输入长度 */
     minLength?: number;
     /** 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效	 */
     showWordLimit?: boolean;
+    /** 控制是否能被用户缩放 */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    /** 高度是否自适应，可以接受一个对象，比如: { minRows: 2, maxRows: 6 }	 */
+    autosize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
     /** 在 Input 值改变时触发 */
     onChange?: (value: ValueType, event?: React.ChangeEvent) => void;
 }

package/dist/Input/useComposition.d.ts

@@ -0,0 +1,23 @@
+import { ChangeEventHandler, CompositionEventHandler, KeyboardEventHandler } from 'react';
+import { InputProps, TextareaProps } from './typings';
+interface useCompositionProps {
+    value: string;
+    maxLength: number;
+    onChange: InputProps['onChange'];
+    onKeyDown: InputProps['onKeyDown'] | TextareaProps['onKeyDown'];
+    onPressEnter: InputProps['onProgress'];
+}
+/**
+ * Handle input text like Chinese
+ * chrome： compositionstart -> onChange -> compositionend
+ * other browser: compositionstart -> compositionend -> onChange
+ */
+export declare function useComposition({ value, maxLength, onChange, onKeyDown, onPressEnter }: useCompositionProps): {
+    compositionValue: string;
+    triggerValueChange: typeof onChange;
+    handleCompositionStart: CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    handleCompositionEnd: CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    handleValueChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    handleKeyDown: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+};
+export {};

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,7 @@
+type TextAreaHeight = {
+    height: string;
+    minHeight?: string;
+};
+export declare function calcTextareaHeight(targetElement: HTMLTextAreaElement, minRows?: number, maxRows?: number): TextAreaHeight;
+export declare const looseToNumber: (val: any) => any;
+export {};

package/dist/Input/utils.js

@@ -0,0 +1,95 @@
+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;
+}
+export var looseToNumber = function looseToNumber(val) {
+  var n = Number.parseFloat(val);
+  return Number.isNaN(n) ? val : n;
+};