@qsxy/element-plus-react 1.0.0-next.3 → 1.0.0-next.4

package/README.md

@@ -7,7 +7,11 @@
 
 ## Usage
 
-TODO
+```javascript
+// how to use
+import '@qsxy/element-plus-react/dist/index.css';
+import { ElButton, ElLink } from '@qsxy/element-plus-react';
+```
 
 ## Options
 
@@ -20,12 +24,6 @@ TODO
 $ npm i @qsxy/element-plus-react
 ```
 
-```javascript
-// how to use
-import '@qsxy/element-plus-react/dist/index.css';
-import { ElButton, ElLink } from '@qsxy/element-plus-react';
-```
-
 ## LICENSE
 
 MIT

package/dist/Badge/Badge.js

@@ -50,7 +50,7 @@ var Badge = (0, import_react.forwardRef)((props, ref) => {
     }
     return `${value}`;
   }, [isDot, max, value]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { ref, className: (0, import_classnames.default)(b(), props.className), style: props.style }, props.children, /* @__PURE__ */ import_react.default.createElement(import_Transition.default, { nodeRef, name: "r-zoom-in-center", visible: !hidden && (!!content || isDot) && !(!showZero && value === 0), display: "inline-flex" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref, className: (0, import_classnames.default)(b(), props.className), style: props.style }, props.children, /* @__PURE__ */ import_react.default.createElement(import_Transition.default, { nodeRef, name: b("zoom-in-center", false), visible: !hidden && (!!content || isDot) && !(!showZero && value === 0), display: "inline-flex" }, /* @__PURE__ */ import_react.default.createElement(
     "sup",
     {
       ref: nodeRef,

package/dist/Collapse/CollapseItem.js

@@ -79,7 +79,7 @@ var CollapseItem = (0, import_react.memo)((props) => {
     import_Transition.Transition,
     {
       nodeRef: containerRef,
-      name: "r-menu-collapse",
+      name: b("menu-collapse", false),
       duration: 300,
       visible: active,
       beforeEnter: () => (0, import_CollapseTransition.beforeEnter)(containerRef),

package/dist/DateTimePicker/DateTimePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DateTimePickerRef } from './typings';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").DatePickerProps, "name" | "value" | "type" | "defaultValue" | "onChange"> & {
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").DatePickerProps, "value" | "defaultValue" | "type" | "onChange" | "name"> & {
     name?: string;
     value?: string;
     defaultValue?: string;

package/dist/DateTimePicker/DateTimePicker.js

@@ -71,7 +71,7 @@ var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
     formatter,
     ...rest
   } = props;
-  const { e, is } = (0, import_hooks.useClassNames)(classPrefix);
+  const { b, e, is } = (0, import_hooks.useClassNames)(classPrefix);
   const [value, setValue] = (0, import_hooks.useControlled)(props.value, props.defaultValue);
   const [visible, setVisible] = (0, import_react.useState)(false);
   const [showTime, setShowTime] = (0, import_react.useState)(false);
@@ -129,7 +129,7 @@ var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
       onClick: onActive,
       value,
       onClear: () => handleChange(null, {}),
-      className: (0, import_classnames.default)({ "r-date": readonly }, is({ active: visible })),
+      className: (0, import_classnames.default)({ [b("date", false)]: readonly }, is({ active: visible })),
       style: props.style,
       error,
       warning,
@@ -192,7 +192,7 @@ var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
         {
           nodeRef: () => ({ current: timePanelRef.current.ref }),
           visible: showTime,
-          name: "r-slide-up",
+          name: b("slide-up", false),
           transitionAppear: true,
           unmountOnExit: true,
           display: "",

package/dist/Dialog/typings.d.ts

@@ -3,7 +3,7 @@ import { TransitionProps } from '../Transition';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 export interface DialogProps extends AnimationEventProps, BaseProps, NativeProps, TransitionProps {
     /** 是否显示模态框（可控） */
-    visible?: boolean;
+    visible: boolean;
     /** 默认是否显示模态框 */
     defaultVisible?: boolean;
     /** 是否需要遮罩层 */
@@ -50,7 +50,7 @@ export interface DialogProps extends AnimationEventProps, BaseProps, NativeProps
     /** Dialog 关闭动画结束时的回调 */
     onClosed?: () => void;
     /** 关闭弹窗函数 */
-    close?: () => void;
+    close: () => void;
     /** 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. */
     beforeClose?: DialogBeforeCloseFn;
 }

package/dist/Drawer/Drawer.js

@@ -39,6 +39,7 @@ var import_react_dom = require("react-dom");
 var import_Transition = require("../Transition");
 var import_Util = require("../Util");
 var import_hooks = require("../hooks");
+var import_prefix = require("../hooks/prefix");
 var import_DrawerBody = __toESM(require("./DrawerBody"));
 var import_DrawerContext = require("./DrawerContext");
 var import_DrawerFooter = __toESM(require("./DrawerFooter"));
@@ -76,14 +77,14 @@ function InternalComp(props, ref) {
           setVisible(false);
           onClose == null ? void 0 : onClose();
         } else if (backdrop === "static") {
-          (0, import_dom_lib.addClass)(drawerRef.current, "r-drawer-shake");
+          (0, import_dom_lib.addClass)(drawerRef.current, `${import_prefix.globalKey}-drawer-shake`);
           setTimeout(() => {
-            (0, import_dom_lib.removeClass)(drawerRef.current, "r-drawer-shake");
+            (0, import_dom_lib.removeClass)(drawerRef.current, `${import_prefix.globalKey}-drawer-shake`);
           }, 300);
         }
       });
     }
-  }, [backdrop, onClose, ref, setVisible, visible]);
+  }, [b, backdrop, onClose, ref, setVisible, visible]);
   return /* @__PURE__ */ import_react.default.createElement(import_DrawerContext.DrawerContext.Provider, { value: { backdrop, setVisible, isControlled, onClose } }, backdrop && (0, import_react_dom.createPortal)(
     /* @__PURE__ */ import_react.default.createElement(
       import_Transition.Transition,
@@ -95,12 +96,12 @@ function InternalComp(props, ref) {
         duration: 300,
         onEnter: () => {
           setTimeout(() => {
-            (0, import_dom_lib.addClass)(backdropRef.current, "r-anim-in");
+            (0, import_dom_lib.addClass)(backdropRef.current, `${import_prefix.globalKey}-anim-in`);
           }, 10);
         },
-        beforeLeave: () => (0, import_dom_lib.removeClass)(backdropRef.current, "r-anim-in")
+        beforeLeave: () => (0, import_dom_lib.removeClass)(backdropRef.current, `${import_prefix.globalKey}-anim-in`)
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`backdrop`, "r-anim-fade"), style: { zIndex: import_Util.PopupManager.nextZIndex() }, ref: backdropRef })
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`backdrop`, `${import_prefix.globalKey}-anim-fade`), style: { zIndex: import_Util.PopupManager.nextZIndex() }, ref: backdropRef })
     ),
     document.body
   ), (0, import_react_dom.createPortal)(
@@ -119,15 +120,23 @@ function InternalComp(props, ref) {
         },
         beforeLeave: () => {
           var _a;
-          (0, import_dom_lib.removeClass)(drawerRef.current, "r-anim-slide-in");
-          (0, import_dom_lib.addClass)(drawerRef.current, "r-anim-slide-out");
+          (0, import_dom_lib.removeClass)(drawerRef.current, `${import_prefix.globalKey}-anim-slide-in`);
+          (0, import_dom_lib.addClass)(drawerRef.current, `${import_prefix.globalKey}-anim-slide-out`);
           (_a = props.beforeLeave) == null ? void 0 : _a.call(props);
         },
         onLeave: props.onLeave,
         afterLeave: props.afterLeave,
         duration: 300
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`wrapper`, props.className), style: { ...props.style, zIndex: import_Util.PopupManager.nextZIndex() }, ref: ref || wrapperRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(wb(size, placement), "r-anim-slide-in", `r-anim-${placement}`), style: { display: "block" }, ref: drawerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`dialog` }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`content` }, children))))
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`wrapper`, props.className), style: { ...props.style, zIndex: import_Util.PopupManager.nextZIndex() }, ref: ref || wrapperRef }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(wb(size, placement), `${import_prefix.globalKey}-anim-slide-in`, `${import_prefix.globalKey}-anim-${placement}`),
+          style: { display: "block" },
+          ref: drawerRef
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: b`dialog` }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`content` }, children))
+      ))
     ),
     document.body
   ));

package/dist/Dropdown/Dropdown.js

@@ -86,7 +86,7 @@ var Dropdown = (props) => {
     import_Tooltip.default,
     {
       classPrefix,
-      triggerRef: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children),
+      triggerRef: props.children,
       popperClass: e`popper`,
       disabled,
       enterable: true,

package/dist/Dropdown/typings.d.ts

@@ -3,7 +3,7 @@ import { PopperOptions } from '../Popper';
 import { TransitionProps } from '../Transition';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 /** Dropdown 属性 */
-export interface DropdownProps extends BaseProps, NativeProps, PopperOptions, AnimationEventProps, TransitionProps {
+export interface DropdownProps extends BaseProps<React.ReactElement>, NativeProps, PopperOptions, AnimationEventProps, Omit<TransitionProps, 'children'> {
     menu: React.ReactElement<DropdownMenuProps>;
     /** 触发下拉的行为 */
     trigger?: 'hover' | 'click' | 'contextmenu';

package/dist/Input/Input.js

@@ -316,7 +316,7 @@ function InternalInput(props, ref) {
           }
         }
       ))),
-      suffixSlot && /* @__PURE__ */ import_react.default.createElement("span", { ref: suffixRef, key: "suffixSlot", className: (0, import_classnames.default)(e`suffix`, { "r-click": suffixCanClick }), onClick: onClickSuffix }, /* @__PURE__ */ import_react.default.createElement("span", { className: e`suffix-inner` }, suffixSlot))
+      suffixSlot && /* @__PURE__ */ import_react.default.createElement("span", { ref: suffixRef, key: "suffixSlot", className: (0, import_classnames.default)(e`suffix`, { [b("click", false)]: suffixCanClick }), onClick: onClickSuffix }, /* @__PURE__ */ import_react.default.createElement("span", { className: e`suffix-inner` }, suffixSlot))
     );
   }, [
     type,
@@ -342,6 +342,7 @@ function InternalInput(props, ref) {
     maxLength,
     handelClear,
     suffixSlot,
+    b,
     suffixCanClick,
     onClickSuffix,
     showClear,

package/dist/Popconfirm/Popconfirm.js

@@ -77,7 +77,7 @@ var Popconfirm = (props) => {
       classPrefix,
       popperClass: b("popover", false),
       popperStyle: { minWidth: 200 },
-      triggerRef: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children),
+      triggerRef: props.children,
       enterable: true,
       effect: "light",
       trigger: "click",

package/dist/Popconfirm/typings.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { IconName } from '../Icon';
 import { PopperOptions } from '../Popper';
 import { BaseProps, NativeProps, TypeAttributes } from '../types/common';
-export interface PopconfirmProps extends BaseProps, NativeProps, PopperOptions {
+export interface PopconfirmProps extends BaseProps<React.ReactElement>, NativeProps, PopperOptions {
     classPrefix?: string;
     /** 显示的内容 */
     title: string;

package/dist/Popover/Popover.js

@@ -71,7 +71,7 @@ var Popover = (props) => {
       classPrefix,
       popperClass: (0, import_classnames.default)(b(), { [m`plain`]: plain }),
       popperStyle: { width },
-      triggerRef: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children),
+      triggerRef: props.children,
       enterable: true,
       effect: "light",
       placement,

package/dist/Popover/typings.d.ts

@@ -3,7 +3,7 @@ import { PopperOptions } from '../Popper';
 import { TransitionProps } from '../Transition';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 /** Dropdown 属性 */
-export interface PopoverProps extends BaseProps, NativeProps, PopperOptions, AnimationEventProps, TransitionProps {
+export interface PopoverProps extends BaseProps<React.ReactElement>, NativeProps, PopperOptions, AnimationEventProps, Omit<TransitionProps, 'children'> {
     /** 触发下拉的行为 */
     trigger?: 'hover' | 'click' | 'contextmenu';
     /** 标题 */

package/dist/Table/hooks/useSelection.d.ts

@@ -46,4 +46,4 @@ export declare const activeRow: <T>(payload: T) => Action;
  * @param payload
  * @returns
  */
-export declare const onCheck: <T>(payload: Pick<State<T>, "isIndeterminate" | "selection">) => Action;
+export declare const onCheck: <T>(payload: Pick<State<T>, "selection" | "isIndeterminate">) => Action;

package/dist/Table/util.js

@@ -36,7 +36,7 @@ var import_prefix = require("../hooks/prefix");
 var TableIdManager = {
   tableId: 0,
   columnId: 0,
-  nextTableId: () => `r-table_${++TableIdManager.tableId}`,
+  nextTableId: () => `${import_prefix.globalKey}-table_${++TableIdManager.tableId}`,
   nextColumnId: (start) => `column_${start ? ++start : ++TableIdManager.columnId}`
 };
 var cacheStringFunction = (fn) => {

package/dist/Tabs/Tabs.js

@@ -171,7 +171,7 @@ var Tabs = (0, import_react.forwardRef)((props, ref) => {
     let offset = 0;
     let tabSize = 0;
     const sizeDir = sizeName === "offsetWidth" ? "X" : "Y";
-    (0, import_forEach.default)((_a = elRef.current) == null ? void 0 : _a.querySelectorAll(".r-tabs__item"), (el) => {
+    (0, import_forEach.default)((_a = elRef.current) == null ? void 0 : _a.querySelectorAll("." + e`item`), (el) => {
       var _a2;
       if ((0, import_dom_lib.hasClass)(el, "is-active")) {
         tabSize = el[sizeName === "offsetWidth" ? "clientWidth" : "clientHeight"];

package/dist/TimePicker/TimePicker.js

@@ -199,6 +199,7 @@ var TimePicker = (0, import_react.forwardRef)((props, ref) => {
         setVisible(false);
         setValue(initialValue.current);
       },
+      onEnter: () => timePanelRef.current.adjustSpinners(),
       ...animationInputProps,
       transitionAppear: true,
       unmountOnExit: true

package/dist/TimePicker/TimeSpinnerPanel.js

@@ -186,8 +186,9 @@ var TimeSpinnerPanel = (0, import_react.memo)(
           ),
           type === "hours" ? 23 : 59
         );
-        debouncedResetScroll(type);
         modifyDateField(type, value);
+        debouncedResetScroll(type);
+        isScrolling.current = false;
       },
       [debouncedResetScroll, listRefsMap, modifyDateField, scrollBarHeight, typeItemHeight]
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.0-next.3",
+  "version": "1.0.0-next.4",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",