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

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/Carousel/Carousel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CarouselProps, CarouselRef } from './typings';
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;
+export default Carousel;

package/dist/Carousel/Carousel.js

@@ -0,0 +1,168 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Carousel/Carousel.tsx
+var Carousel_exports = {};
+__export(Carousel_exports, {
+  default: () => Carousel_default
+});
+module.exports = __toCommonJS(Carousel_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_Icon = require("../Icon");
+var import_Transition = require("../Transition");
+var import_Util = require("../Util");
+var import_hooks = require("../hooks");
+var import_prefix = require("../hooks/prefix");
+var import_CarouselContext = require("./CarouselContext");
+var import_useCarousel = require("./hooks/useCarousel");
+var Carousel = (0, import_react.memo)(
+  (0, import_react.forwardRef)((props, ref) => {
+    props = (0, import_Util.mergeDefaultProps)(
+      {
+        trigger: "hover",
+        autoplay: true,
+        interval: 3e3,
+        initialIndex: 0,
+        arrow: "hover",
+        cardScale: 0.83,
+        loop: true,
+        direction: "horizontal",
+        pauseOnHover: true,
+        motionBlur: false,
+        classPrefix: "carousel"
+      },
+      props
+    );
+    const { indicatorPosition, arrow = "hover", cardScale = 0.83, loop = true, direction = "horizontal", motionBlur = false, classPrefix = "carousel", children } = props;
+    const { b, e, m, em, is } = (0, import_hooks.useClassNames)(classPrefix);
+    const {
+      items,
+      addItem,
+      removeItem,
+      setContainerHeight,
+      root,
+      activeIndex,
+      hasLabel,
+      hover,
+      isCardType,
+      isTransitioning,
+      isVertical,
+      containerStyle,
+      handleButtonEnter,
+      handleButtonLeave,
+      handleIndicatorClick,
+      handleMouseEnter,
+      handleMouseLeave,
+      handleTransitionEnd,
+      setActiveItem,
+      isTwoLengthShow,
+      throttledArrowClick,
+      throttledIndicatorHover,
+      prev,
+      next
+    } = (0, import_useCarousel.useCarousel)(props);
+    const buttonLeft = (0, import_react.useRef)();
+    const buttonRight = (0, import_react.useRef)();
+    const carouselContainer = (0, import_react.useMemo)(() => {
+      const classes = [e`container`];
+      if (motionBlur && isTransitioning && items.length > 1) {
+        classes.push(isVertical ? `${import_prefix.namespace}-transitioning-vertical` : `${import_prefix.namespace}-transitioning`);
+      }
+      return (0, import_classnames.default)(classes);
+    }, [e, isTransitioning, isVertical, items.length, motionBlur]);
+    const indicatorsClasses = (0, import_react.useMemo)(() => {
+      const classes = [e("indicators"), em("indicators", direction)];
+      if (hasLabel) {
+        classes.push(em("indicators", "labels"));
+      }
+      if (indicatorPosition === "outside") {
+        classes.push(em("indicators", "outside"));
+      }
+      if (isVertical) {
+        classes.push(em("indicators", "right"));
+      }
+      return (0, import_classnames.default)(classes);
+    }, [direction, e, em, hasLabel, indicatorPosition, isVertical]);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      activeIndex,
+      setActiveItem,
+      prev,
+      next
+    }));
+    return /* @__PURE__ */ import_react.default.createElement(import_CarouselContext.CarouselContext.Provider, { value: { root, isCardType, isVertical, items, addItem, removeItem, loop, cardScale, setActiveItem, setContainerHeight } }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: root,
+        className: (0, import_classnames.default)(b(), m(direction), { [m`card`]: isCardType }, props.className),
+        style: props.style,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef: buttonLeft, visible: (arrow === "always" || hover) && (loop || activeIndex > 0), name: "carousel-arrow-left" }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          ref: buttonLeft,
+          type: "button",
+          className: (0, import_classnames.default)(e`arrow`, em("arrow", "left")),
+          onMouseEnter: () => handleButtonEnter("left"),
+          onMouseLeave: handleButtonLeave,
+          onClick: () => throttledArrowClick(activeIndex - 1)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-left", prefix: "far" })
+      )),
+      /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef: buttonRight, visible: (arrow === "always" || hover) && (loop || activeIndex < items.length - 1), name: "carousel-arrow-right" }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          ref: buttonRight,
+          type: "button",
+          className: (0, import_classnames.default)(e`arrow`, em("arrow", "right")),
+          onMouseEnter: () => handleButtonEnter("right"),
+          onMouseLeave: handleButtonLeave,
+          onClick: () => throttledArrowClick(activeIndex + 1)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right", prefix: "far" })
+      )),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: carouselContainer, style: containerStyle, onTransitionEnd: handleTransitionEnd }, children),
+      indicatorPosition !== "none" && /* @__PURE__ */ import_react.default.createElement("ul", { className: indicatorsClasses }, items.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+        "li",
+        {
+          key: index,
+          className: (0, import_classnames.default)(e`indicator`, em("indicator", direction), is({ active: index === activeIndex })),
+          style: { display: isTwoLengthShow(index) ? "" : "none" },
+          onMouseEnter: () => throttledIndicatorHover(index),
+          onClick: () => handleIndicatorClick(index)
+        },
+        /* @__PURE__ */ import_react.default.createElement("button", { className: e`button` }, hasLabel && /* @__PURE__ */ import_react.default.createElement("span", null, item.props.label))
+      ))),
+      motionBlur && /* @__PURE__ */ import_react.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", style: { display: "none" } }, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("filter", { id: "elCarouselHorizontal" }, /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "12,0" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "elCarouselVertical" }, /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0,10" }))))
+    ));
+  })
+);
+Carousel.displayName = "ElCarousel";
+var Carousel_default = Carousel;

package/dist/Carousel/CarouselContext.d.ts

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

package/dist/Carousel/CarouselContext.js

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Carousel/CarouselContext.ts
+var CarouselContext_exports = {};
+__export(CarouselContext_exports, {
+  CarouselContext: () => CarouselContext,
+  useCarouselContext: () => useCarouselContext
+});
+module.exports = __toCommonJS(CarouselContext_exports);
+var import_react = require("react");
+var CarouselContext = (0, import_react.createContext)({
+  root: void 0,
+  isCardType: false,
+  isVertical: false,
+  items: [],
+  loop: false,
+  cardScale: 0,
+  addItem: function() {
+    throw new Error("Function not implemented.");
+  },
+  removeItem: function() {
+    throw new Error("Function not implemented.");
+  },
+  setActiveItem: function() {
+    throw new Error("Function not implemented.");
+  },
+  setContainerHeight: function() {
+    throw new Error("Function not implemented.");
+  }
+});
+var useCarouselContext = () => (0, import_react.useContext)(CarouselContext);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CarouselContext,
+  useCarouselContext
+});

package/dist/Carousel/CarouselItem.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CarouselItemProps } from './typings';
+declare const CarouselItem: FC<CarouselItemProps>;
+export default CarouselItem;

package/dist/Carousel/CarouselItem.js

@@ -0,0 +1,75 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Carousel/CarouselItem.tsx
+var CarouselItem_exports = {};
+__export(CarouselItem_exports, {
+  default: () => CarouselItem_default
+});
+module.exports = __toCommonJS(CarouselItem_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_hooks = require("../hooks");
+var import_CarouselContext = require("./CarouselContext");
+var import_useCarouselItem = require("./hooks/useCarouselItem");
+var CarouselItem = (0, import_react.memo)((props) => {
+  const { classPrefix = "carousel", children } = props;
+  const { e, em, is } = (0, import_hooks.useClassNames)(classPrefix);
+  const { isCardType, isVertical } = (0, import_CarouselContext.useCarouselContext)();
+  const { carouselItemRef, state, handleItemClick } = (0, import_useCarouselItem.useCarouselItem)(props);
+  const itemStyle = (0, import_react.useMemo)(() => {
+    const translateType = `translate${isVertical ? "Y" : "X"}`;
+    const _translate = `${translateType}(${state.translate}px)`;
+    const _scale = `scale(${state.scale})`;
+    const transform = [_translate, _scale].join(" ");
+    return {
+      transform
+    };
+  }, [isVertical, state.scale, state.translate]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: carouselItemRef,
+      className: (0, import_classnames.default)(
+        e`item`,
+        is({ active: state.active, "in-stage": state.inStage, hover: state.hover, animating: state.animating }),
+        {
+          [em("item", "card")]: isCardType,
+          [em("item", "card-vertical")]: isCardType && isVertical
+        },
+        props.className
+      ),
+      style: { ...itemStyle, display: state.ready ? "" : "none", ...props.style ?? {} },
+      onClick: handleItemClick
+    },
+    isCardType && /* @__PURE__ */ import_react.default.createElement("div", { className: e`mask`, style: { display: !state.active ? "" : "none" } }),
+    children
+  );
+});
+CarouselItem.displayName = "ElCarouselItem";
+var CarouselItem_default = CarouselItem;

package/dist/Carousel/hooks/useCarousel.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+/// <reference types="lodash" />
+import { CarouselItemContext, CarouselProps } from '../typings';
+export declare const useCarousel: (props: CarouselProps) => {
+    items: CarouselItemContext[];
+    addItem: (item: CarouselItemContext) => void;
+    removeItem: (uid: string) => void;
+    setContainerHeight: (_height: string | number) => void;
+    root: import("react").MutableRefObject<HTMLDivElement>;
+    activeIndex: number;
+    arrowDisplay: boolean;
+    hasLabel: boolean;
+    hover: boolean;
+    isCardType: boolean;
+    isTransitioning: boolean;
+    isVertical: boolean;
+    containerStyle: {
+        height: string | number;
+        overflow?: undefined;
+    } | {
+        height: number;
+        overflow: string;
+    };
+    isItemsTwoLength: import("react").MutableRefObject<boolean>;
+    handleButtonEnter: (_arrow: 'left' | 'right') => void;
+    handleTransitionEnd: () => void;
+    handleButtonLeave: () => void;
+    handleIndicatorClick: (index: number) => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    setActiveItem: (index: number | string) => void;
+    prev: () => void;
+    next: () => void;
+    isTwoLengthShow: (index: number) => boolean;
+    throttledArrowClick: import("lodash").DebouncedFuncLeading<(index: number) => void>;
+    throttledIndicatorHover: import("lodash").DebouncedFuncLeading<(index: number) => void>;
+};