@guiwzh/small-design 0.1.0

package/dist/index.js

@@ -0,0 +1,1193 @@
+"use strict";
+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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AutoComplete: () => autoComplete_default,
+  Button: () => button_default,
+  Icon: () => icon_default,
+  Input: () => input_default,
+  KeepAliveContext: () => KeepAliveContext,
+  KeepAliveLayout: () => Keepalive_default,
+  LazyLoad: () => lazyLoad_default,
+  Menu: () => Menu_default,
+  MenuItem: () => menuItem_default,
+  Progress: () => progress_default,
+  Signature: () => signature_default,
+  SubMenu: () => subMenu_default,
+  Transition: () => transition_default,
+  Upload: () => upload_default,
+  VirtualList: () => virtualList_default,
+  useClickOutside: () => useClickOutside_default,
+  useDebounce: () => useDebounce_default,
+  useKeepOutlet: () => useKeepOutlet
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/button.tsx
+var import_classnames = __toESM(require("classnames"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (props) => {
+  const { className, disabled = false, size, btnType = "default", href, children, ...restProps } = props;
+  const classes = (0, import_classnames.default)("btn", className, {
+    [`btn-${btnType}`]: btnType,
+    [`btn-${size}`]: size,
+    "disabled": disabled
+  });
+  if (btnType === "link" && href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: classes, href, ...restProps, children });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: classes, disabled, ...restProps, children });
+  }
+};
+Button.displayName = "Button";
+var button_default = Button;
+
+// src/components/Menu/menu.tsx
+var import_react = __toESM(require("react"));
+var import_classnames2 = __toESM(require("classnames"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MenuContext = (0, import_react.createContext)({ index: "0" });
+var Menu = (props) => {
+  const { className, mode = "horizontal", style, children, defaultIndex = "0", onSelect, defaultOpenSubMenus = [] } = props;
+  const [currentActive, setActive] = (0, import_react.useState)(defaultIndex);
+  const handleClick = (index, e) => {
+    setActive(index);
+    if (onSelect) {
+      onSelect(index, e);
+    }
+  };
+  const passedContext = {
+    index: currentActive,
+    onSelect: handleClick,
+    mode,
+    defaultOpenSubMenus
+  };
+  const renderChildren = () => {
+    return import_react.Children.map(children, (child, index) => {
+      var _a;
+      const childElement = child;
+      if (typeof child !== "object" || child === null) {
+        console.error("Warning: Menu has a child which is not a MenuItem component");
+        return null;
+      }
+      const displayName = (_a = childElement.type) == null ? void 0 : _a.displayName;
+      if (displayName === "MenuItem" || displayName === "SubMenu") {
+        return import_react.default.cloneElement(childElement, {
+          index: index.toString()
+        });
+      } else {
+        console.error("Warning: Menu has a child which is not a MenuItem component");
+      }
+    });
+  };
+  const classes = (0, import_classnames2.default)("viking-menu", className, {
+    "menu-vertical": mode === "vertical",
+    "menu-horizontal": mode !== "vertical"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: classes, style, role: "menubar", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuContext.Provider, { value: passedContext, children: renderChildren() }) });
+};
+var menu_default = Menu;
+
+// src/components/Menu/subMenu.tsx
+var import_react2 = __toESM(require("react"));
+var import_classnames4 = __toESM(require("classnames"));
+
+// src/components/Icon/icon.tsx
+var import_classnames3 = __toESM(require("classnames"));
+var import_react_fontawesome = require("@fortawesome/react-fontawesome");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Icon = (props) => {
+  const { className, theme, ...restProps } = props;
+  const classes = (0, import_classnames3.default)("viking-icon", className, {
+    [`icon-${theme}`]: theme
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_fontawesome.FontAwesomeIcon, { className: classes, ...restProps });
+};
+var icon_default = Icon;
+
+// src/components/Transition/transition.tsx
+var import_react_transition_group = require("react-transition-group");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Transition = (props) => {
+  const {
+    children,
+    classNames: classNames9,
+    animation,
+    wrapper,
+    unmountOnExit = true,
+    //该属性可以根据in属性的true和false实现子节点的挂载与卸载，从而无需自行添加display:none与block的转换
+    appear = true,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_transition_group.CSSTransition,
+    {
+      classNames: classNames9 ? classNames9 : animation,
+      unmountOnExit,
+      appear,
+      ...restProps,
+      children: wrapper ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children }) : children
+    }
+  );
+};
+var transition_default = Transition;
+
+// src/components/Menu/subMenu.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SubMenu = ({ index, title, children, className }) => {
+  const context = (0, import_react2.useContext)(MenuContext);
+  const openedSubMenus = context.defaultOpenSubMenus;
+  const isOpend = index && context.mode === "vertical" ? openedSubMenus.includes(index) : false;
+  const [menuOpen, setOpen] = (0, import_react2.useState)(isOpend);
+  const classes = (0, import_classnames4.default)("menu-item submenu-item", className, {
+    "is-active": context.index === index,
+    "is-opened": menuOpen,
+    "is-vertical": context.mode === "vertical"
+  });
+  const handleClick = (e) => {
+    e.preventDefault();
+    setOpen(!menuOpen);
+  };
+  const timer = (0, import_react2.useRef)();
+  const handleMouse = (e, toggle) => {
+    clearTimeout(timer.current);
+    e.preventDefault();
+    timer.current = setTimeout(() => {
+      setOpen(toggle);
+    }, 300);
+  };
+  const clickEvents = context.mode === "vertical" ? {
+    onClick: handleClick
+  } : {};
+  const hoverEvents = context.mode !== "vertical" ? {
+    onMouseEnter: (e) => {
+      handleMouse(e, true);
+    },
+    onMouseLeave: (e) => {
+      handleMouse(e, false);
+    }
+  } : {};
+  const renderChildren = () => {
+    const childrenComponent = import_react2.default.Children.map(children, (child, i) => {
+      const childElement = child;
+      if (childElement.type.displayName === "MenuItem" || childElement.type.displayName === "SubMenu") {
+        return import_react2.default.cloneElement(childElement, {
+          index: `${index}-${i}`
+        });
+      } else {
+        console.error("Warning: SubMenu has a child which is not a MenuItem component");
+      }
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      transition_default,
+      {
+        in: menuOpen,
+        timeout: 300,
+        animation: "zoom-in-top",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "viking-submenu", children: childrenComponent })
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: classes, ...hoverEvents, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "submenu-title", ...clickEvents, children: [
+      title,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(icon_default, { icon: "angle-down", className: "arrow-icon" })
+    ] }),
+    renderChildren()
+  ] }, index);
+};
+SubMenu.displayName = "SubMenu";
+var subMenu_default = SubMenu;
+
+// src/components/Menu/menuItem.tsx
+var import_react3 = require("react");
+var import_classnames5 = __toESM(require("classnames"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MenuItem = (props) => {
+  const { index, disabled, className, style, children } = props;
+  const context = (0, import_react3.useContext)(MenuContext);
+  const classes = (0, import_classnames5.default)("menu-item", className, {
+    "is-disabled": disabled,
+    "is-active": context.index === index
+  });
+  const handleClick = (e) => {
+    if (context.onSelect && !disabled && index) {
+      context.onSelect(index, e);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (context.onSelect && !disabled && index) {
+        context.onSelect(index, e);
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "li",
+    {
+      className: classes,
+      style,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled,
+      children
+    }
+  );
+};
+MenuItem.displayName = "MenuItem";
+var menuItem_default = MenuItem;
+
+// src/components/Menu/index.tsx
+var TransMenu = menu_default;
+TransMenu.Item = menuItem_default;
+TransMenu.SubMenu = subMenu_default;
+var Menu_default = TransMenu;
+
+// src/components/AutoComplete/autoComplete.tsx
+var import_react7 = require("react");
+
+// src/components/Input/input.tsx
+var import_react4 = require("react");
+var import_classnames6 = __toESM(require("classnames"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Input = (0, import_react4.forwardRef)((props, ref) => {
+  const {
+    disabled,
+    size,
+    icon,
+    prepend,
+    append,
+    style,
+    ...restProps
+  } = props;
+  const cnames = (0, import_classnames6.default)("viking-input-wrapper", {
+    [`input-size-${size}`]: size,
+    "is-disabled": disabled,
+    "input-group": prepend || append,
+    "input-group-append": !!append,
+    "input-group-prepend": !!prepend
+  });
+  const fixControlledValue = (value) => {
+    if (typeof value === "undefined" || value === null) {
+      return "";
+    }
+    return value;
+  };
+  if ("value" in props) {
+    delete restProps.defaultValue;
+    restProps.value = fixControlledValue(props.value);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cnames, style, children: [
+    prepend && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "viking-input-group-prepend", children: prepend }),
+    icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(icon_default, { icon, title: `title-${icon}` }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        ref,
+        className: "viking-input-inner",
+        disabled,
+        ...restProps
+      }
+    ),
+    append && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "viking-input-group-append", children: append })
+  ] });
+});
+var input_default = Input;
+
+// src/hooks/useDebounce.tsx
+var import_react5 = require("react");
+function useDebounce(value, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react5.useState)(value);
+  (0, import_react5.useEffect)(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+var useDebounce_default = useDebounce;
+
+// src/components/AutoComplete/autoComplete.tsx
+var import_classnames7 = __toESM(require("classnames"));
+
+// src/hooks/useClickOutside.tsx
+var import_react6 = require("react");
+function useClickOutside(ref, handler) {
+  (0, import_react6.useEffect)(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("click", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, handler]);
+}
+var useClickOutside_default = useClickOutside;
+
+// src/components/AutoComplete/autoComplete.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var AutoComplete = (props) => {
+  const { value, fetchSuggestions, onSelect, onChange, onEnterDown, onError, renderOption, style, debounceTime = 300, expireTime = 36e5, ...restprops } = props;
+  const [inputValue, setInputValue] = (0, import_react7.useState)(value || "");
+  const [suggestions, setSuggestions] = (0, import_react7.useState)([]);
+  const [loading, setloading] = (0, import_react7.useState)(false);
+  const [highlightIndex, sethighlightIndex] = (0, import_react7.useState)(-1);
+  const [isFocus, setisFocus] = (0, import_react7.useState)(true);
+  const componentRef = (0, import_react7.useRef)(null);
+  const triggerSearch = (0, import_react7.useRef)(false);
+  const fetchId = (0, import_react7.useRef)(0);
+  const intialInputvalue = (0, import_react7.useRef)(value || "");
+  const debouncedValue = useDebounce_default(inputValue, debounceTime);
+  useClickOutside_default(componentRef, () => {
+    setisFocus(false);
+  });
+  (0, import_react7.useEffect)(() => {
+    function getData() {
+      async function fetchData() {
+        fetchId.current++;
+        if (debouncedValue) {
+          const Id = fetchId.current;
+          setloading(true);
+          setSuggestions([]);
+          try {
+            const results = await fetchSuggestions(debouncedValue);
+            if (Id === fetchId.current && results) {
+              setloading(false);
+              setSuggestions(results);
+              const item = {
+                value: results,
+                // 实际数据
+                expiry: Date.now() + expireTime
+                // 当前时间加上1小时的过期时间 (单位毫秒)
+              };
+              localStorage.setItem(debouncedValue, JSON.stringify(item));
+            }
+          } catch (e) {
+            onError == null ? void 0 : onError(e);
+            setloading(false);
+            setSuggestions([]);
+          }
+        } else {
+          setloading(false);
+          setSuggestions([]);
+        }
+      }
+      if (triggerSearch.current) {
+        if (localStorage.getItem(debouncedValue)) {
+          const item = JSON.parse(localStorage.getItem(debouncedValue));
+          if (item.expiry > (/* @__PURE__ */ new Date()).getTime()) {
+            fetchId.current++;
+            setloading(false);
+            setSuggestions(item.value);
+          } else {
+            localStorage.removeItem(debouncedValue);
+            fetchData();
+          }
+        } else {
+          fetchData();
+        }
+        sethighlightIndex(-1);
+      }
+    }
+    getData();
+  }, [debouncedValue, fetchSuggestions, expireTime, onError]);
+  const handleChange = (e) => {
+    const value2 = e.target.value.trim();
+    setInputValue(value2);
+    onChange == null ? void 0 : onChange(value2);
+    intialInputvalue.current = value2;
+    triggerSearch.current = true;
+  };
+  const handleSelect = (item) => {
+    setInputValue(item.value);
+    intialInputvalue.current = item.value;
+    setSuggestions([]);
+    onSelect == null ? void 0 : onSelect(item);
+    triggerSearch.current = false;
+  };
+  const handleUpDown = (item) => {
+    setInputValue(item.value);
+    triggerSearch.current = false;
+  };
+  const handleArrowDown = () => {
+    if (highlightIndex + 1 > suggestions.length - 1) {
+      sethighlightIndex(-1);
+      setInputValue(intialInputvalue.current);
+      triggerSearch.current = false;
+    } else {
+      sethighlightIndex(highlightIndex + 1);
+      if (suggestions[highlightIndex + 1]) handleUpDown(suggestions[highlightIndex + 1]);
+    }
+  };
+  const handleArrowUp = () => {
+    if (highlightIndex - 1 === -1) {
+      sethighlightIndex(highlightIndex - 1);
+      setInputValue(intialInputvalue.current);
+      triggerSearch.current = false;
+    } else if (highlightIndex - 1 < -1) {
+      sethighlightIndex(suggestions.length - 1);
+      if (suggestions[suggestions.length - 1]) handleUpDown(suggestions[suggestions.length - 1]);
+    } else {
+      sethighlightIndex(highlightIndex - 1);
+      handleUpDown(suggestions[highlightIndex - 1]);
+    }
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter":
+        if (suggestions[highlightIndex]) {
+          handleSelect(suggestions[highlightIndex]);
+          onEnterDown == null ? void 0 : onEnterDown(suggestions[highlightIndex]);
+        } else {
+          onEnterDown == null ? void 0 : onEnterDown({ value: intialInputvalue.current });
+        }
+        break;
+      case "ArrowDown":
+        handleArrowDown();
+        break;
+      case "ArrowUp":
+        handleArrowUp();
+        break;
+      case "Escape":
+        setisFocus(false);
+        break;
+      default:
+        break;
+    }
+  };
+  const handleClick = (e) => {
+    setisFocus(true);
+  };
+  const generateDropdown = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "viking-suggestion-list", role: "listbox", id: "suggestion-listbox", children: suggestions.map(
+      (item, index) => {
+        const cnames = (0, import_classnames7.default)("suggestion-item", {
+          "item-highlighted": index === highlightIndex
+        });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "li",
+          {
+            onClick: () => handleSelect(item),
+            className: cnames,
+            role: "option",
+            id: `suggestion-item-${index}`,
+            "aria-selected": index === highlightIndex,
+            children: renderOption ? renderOption(item) : item.value
+          },
+          index
+        );
+      }
+    ) });
+  };
+  const showSuggestions = isFocus && suggestions.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "viking-auto-complete", style, ref: componentRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      input_default,
+      {
+        value: inputValue,
+        onChange: handleChange,
+        ...restprops,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        "aria-expanded": showSuggestions,
+        "aria-autocomplete": "list",
+        "aria-controls": showSuggestions ? "suggestion-listbox" : void 0,
+        "aria-activedescendant": highlightIndex >= 0 ? `suggestion-item-${highlightIndex}` : void 0,
+        role: "combobox"
+      }
+    ),
+    isFocus && loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(icon_default, { icon: "spinner", spin: true }),
+      "loading..."
+    ] }),
+    showSuggestions && generateDropdown()
+  ] });
+};
+var autoComplete_default = AutoComplete;
+
+// src/components/Upload/upload.tsx
+var import_react9 = require("react");
+var import_axios = __toESM(require("axios"));
+
+// src/components/Progress/progress.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Progress = (props) => {
+  const {
+    percent,
+    strokeHeight = 15,
+    showText = true,
+    style,
+    theme = "primary"
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "viking-progress-bar", style, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "viking-progress-bar-outer", style: { height: `${strokeHeight}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: `viking-progress-bar-inner color-${theme}`,
+      style: { width: `${percent}%` },
+      children: showText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inner-text", children: `${percent}%` })
+    }
+  ) }) });
+};
+var progress_default = Progress;
+
+// src/components/Upload/uploadList.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var UploadList = (props) => {
+  const {
+    fileList,
+    onRemove,
+    style
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "viking-upload-list", style, children: fileList.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "viking-upload-list-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: `file-name file-name-${item.status}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(icon_default, { icon: "file-alt", theme: "secondary" }),
+        item.name
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "file-status", children: [
+        (item.status === "uploading" || item.status === "ready") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(icon_default, { icon: "spinner", spin: true, theme: "primary" }),
+        item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(icon_default, { icon: "check-circle", theme: "success" }),
+        item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(icon_default, { icon: "times-circle", theme: "danger" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "file-actions", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(icon_default, { icon: "times", onClick: () => {
+        onRemove(item);
+      } }) }),
+      item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        progress_default,
+        {
+          percent: item.percent || 0
+        }
+      )
+    ] }, item.uid);
+  }) });
+};
+var uploadList_default = UploadList;
+
+// src/components/Upload/dragger.tsx
+var import_react8 = require("react");
+var import_classnames8 = __toESM(require("classnames"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Dragger = (props) => {
+  const { onFile, children, style } = props;
+  const [dragOver, setDragOver] = (0, import_react8.useState)(false);
+  const fileInput = (0, import_react8.useRef)(null);
+  const klass = (0, import_classnames8.default)("viking-uploader-dragger", {
+    "is-dragover": dragOver
+  });
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    onFile(e.dataTransfer.files);
+  };
+  const handleDrag = (e, over) => {
+    e.preventDefault();
+    setDragOver(over);
+  };
+  const handleKeyDown = (e) => {
+    var _a;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      (_a = fileInput.current) == null ? void 0 : _a.click();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: klass,
+      onDragOver: (e) => {
+        handleDrag(e, true);
+      },
+      onDragLeave: (e) => {
+        handleDrag(e, false);
+      },
+      onDrop: handleDrop,
+      style,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      "aria-label": "\u62D6\u62FD\u4E0A\u4F20\u533A\u57DF",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "input",
+          {
+            type: "file",
+            ref: fileInput,
+            style: { display: "none" },
+            onChange: (e) => {
+              if (e.target.files) {
+                onFile(e.target.files);
+                e.target.value = "";
+              }
+            }
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var dragger_default = Dragger;
+
+// src/components/Upload/upload.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Upload = (props) => {
+  const {
+    action,
+    beforeUpload,
+    onprogress,
+    onSuccess,
+    onError,
+    onChange,
+    onRemove,
+    onExceed,
+    name = "file",
+    headers,
+    data,
+    withCredentials,
+    accept,
+    multiple,
+    children,
+    drag,
+    maxsize,
+    maxnum,
+    styleButton,
+    styleDrag,
+    styleUploadList,
+    failednums = 0,
+    limit = Infinity
+  } = props;
+  const fileInput = (0, import_react9.useRef)(null);
+  const abortRecord = (0, import_react9.useRef)({});
+  const FileRecord = (0, import_react9.useRef)(/* @__PURE__ */ new Set());
+  const [fileList, setFileList] = (0, import_react9.useState)([]);
+  const handleClick = () => {
+    var _a;
+    (_a = fileInput.current) == null ? void 0 : _a.click();
+  };
+  const uploadFiles = (files) => {
+    if (maxnum && files.length > maxnum) {
+      onExceed == null ? void 0 : onExceed(`\u6587\u4EF6\u6570\u91CF\u4E0D\u80FD\u8D85\u8FC7${maxnum}`);
+      return;
+    }
+    let concurrency = 0;
+    const queue = [];
+    function AskTask(task) {
+      return new Promise(() => {
+        const executeRequest = () => {
+          concurrency++;
+          task[0]().then(() => {
+            concurrency--;
+            nextTask();
+          });
+        };
+        if (concurrency < limit) {
+          executeRequest();
+        } else {
+          queue.push([executeRequest, task[1]]);
+        }
+      });
+    }
+    function nextTask() {
+      if (concurrency < limit && queue.length > 0) {
+        while (queue.length > 0) {
+          const [task, fileName] = queue.shift();
+          if (FileRecord.current.has(fileName)) {
+            task();
+            break;
+          }
+        }
+      }
+    }
+    let uidCounter = 0;
+    function dealFile(file) {
+      let _file = {
+        uid: `upload-file-${Date.now()}-${uidCounter++}`,
+        size: file.size,
+        name: file.name,
+        percent: 0,
+        status: "ready",
+        raw: file
+      };
+      setFileList((prevList) => {
+        let isSame = false;
+        for (let i = 0; i < prevList.length; i++) {
+          if (prevList[i].name === _file.name) {
+            prevList[i] = _file;
+            isSame = true;
+          }
+        }
+        if (isSame) return prevList;
+        return [_file, ...prevList];
+      });
+      const formData = new FormData();
+      formData.append(name || "file", file);
+      data && Object.keys(data).forEach((key) => formData.append(key, data[key]));
+      const controller = new AbortController();
+      abortRecord.current = { ...abortRecord.current, [_file.uid]: controller };
+      return [_file, formData, controller];
+    }
+    const post = (_file, formData, controller, try_nums) => {
+      return new Promise((resolve) => {
+        import_axios.default.post(action, formData, {
+          headers: {
+            ...headers,
+            "Content-Type": "multipart/form-data"
+          },
+          withCredentials,
+          signal: controller.signal,
+          onUploadProgress: (e) => {
+            let percentage = Math.floor(e.loaded * 100 / e.total || 0);
+            if (percentage < 100) {
+              updateFileList(_file, {
+                percent: percentage,
+                status: "uploading"
+              });
+              _file.status = "uploading";
+              _file.percent = percentage;
+              onprogress == null ? void 0 : onprogress(percentage, _file);
+            }
+          }
+        }).then((res) => {
+          updateFileList(_file, { status: "success", response: res.data });
+          _file.status = "success";
+          _file.response = res.data;
+          onSuccess == null ? void 0 : onSuccess(res.data, _file);
+          onChange == null ? void 0 : onChange(_file);
+          resolve("success");
+        }).catch((err) => {
+          if (import_axios.default.isCancel(err)) {
+            resolve("cancel");
+          } else {
+            if (try_nums < failednums) {
+              const [_file_new, formData2, controller2] = dealFile(_file.raw);
+              AskTask([
+                () => post(_file_new, formData2, controller2, try_nums + 1),
+                _file.name
+              ]);
+            }
+            updateFileList(_file, { status: "error", error: err });
+            _file.status = "error";
+            _file.error = err;
+            onError == null ? void 0 : onError(err, _file);
+            onChange == null ? void 0 : onChange(_file);
+            resolve("failed");
+          }
+        });
+      });
+    };
+    let postFiles = Array.from(files);
+    postFiles.forEach((file) => {
+      if (maxsize && file.size > maxsize * 1024 * 1024) {
+        onExceed == null ? void 0 : onExceed(`\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7${maxsize}Mb`);
+        return;
+      }
+      FileRecord.current.add(file.name);
+      if (!beforeUpload) {
+        const [_file, formData, source] = dealFile(file);
+        AskTask([() => post(_file, formData, source, 0), file.name]);
+      } else {
+        const result = beforeUpload(file);
+        if (result && result instanceof Promise) {
+          result.then((processedFile) => {
+            const [_file, formData, source] = dealFile(file);
+            AskTask([() => post(_file, formData, source, 0), file.name]);
+          });
+        } else if (result) {
+          const [_file, formData, source] = dealFile(file);
+          AskTask([() => post(_file, formData, source, 0), file.name]);
+        }
+      }
+    });
+  };
+  const updateFileList = (updateFile, uploadobj) => {
+    setFileList((prevList) => {
+      return prevList.map(
+        (file) => file.uid === updateFile.uid ? { ...file, ...uploadobj } : file
+      );
+    });
+  };
+  const handleFileChange = (e) => {
+    const files = e.target.files;
+    if (files) {
+      uploadFiles(files);
+      if (fileInput.current) {
+        fileInput.current.value = "";
+      }
+    }
+  };
+  const handleRemove = (file) => {
+    var _a;
+    setFileList((prevList) => {
+      return prevList.filter((item) => item.uid !== file.uid);
+    });
+    (_a = abortRecord.current[file.uid]) == null ? void 0 : _a.abort();
+    delete abortRecord.current[file.uid];
+    FileRecord.current.delete(file.name);
+    onRemove == null ? void 0 : onRemove(file);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "viking-upload-component", children: [
+    drag ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      dragger_default,
+      {
+        style: styleDrag,
+        onFile: (files) => {
+          uploadFiles(files);
+        },
+        children
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(button_default, { btnType: "default", onClick: handleClick, style: styleButton, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "input",
+      {
+        type: "file",
+        className: "viking-file-input",
+        style: { display: "none" },
+        ref: fileInput,
+        onChange: handleFileChange,
+        accept,
+        multiple
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      uploadList_default,
+      {
+        style: styleUploadList,
+        fileList,
+        onRemove: handleRemove
+      }
+    )
+  ] });
+};
+var upload_default = Upload;
+
+// src/components/Signature/signature.tsx
+var import_react10 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Signature = ({
+  width = 400,
+  height = 200,
+  style,
+  onSave
+}) => {
+  const [isDrawing, setIsDrawing] = (0, import_react10.useState)(false);
+  const [strokeStyle, setStrokeStyle] = (0, import_react10.useState)("pen");
+  const [points, setPoints] = (0, import_react10.useState)({
+    x: 0,
+    y: 0
+  });
+  const canvas = (0, import_react10.useRef)(null);
+  const ctx = (0, import_react10.useRef)();
+  (0, import_react10.useEffect)(() => {
+    var _a;
+    ctx.current = (_a = canvas.current) == null ? void 0 : _a.getContext("2d");
+  }, []);
+  (0, import_react10.useEffect)(() => {
+    if (!ctx.current) return;
+    if (strokeStyle === "pen") {
+      ctx.current.lineWidth = 2;
+      ctx.current.lineCap = "round";
+    } else if (strokeStyle === "brush") {
+      ctx.current.lineWidth = 5;
+      ctx.current.lineCap = "round";
+    }
+  }, [strokeStyle]);
+  const startDrawing = (e) => {
+    var _a, _b;
+    setIsDrawing(true);
+    (_a = ctx.current) == null ? void 0 : _a.beginPath();
+    const { offsetX, offsetY } = getEventPosition(e);
+    setPoints({ x: offsetX, y: offsetY });
+    (_b = ctx.current) == null ? void 0 : _b.moveTo(offsetX, offsetY);
+  };
+  const draw = (e) => {
+    var _a, _b;
+    if (!isDrawing) return;
+    const { offsetX, offsetY } = getEventPosition(e);
+    (_a = ctx.current) == null ? void 0 : _a.quadraticCurveTo(
+      points["x"],
+      points["y"],
+      (points["x"] + offsetX) / 2,
+      (points["y"] + offsetY) / 2
+    );
+    (_b = ctx.current) == null ? void 0 : _b.stroke();
+    setPoints({ x: offsetX, y: offsetY });
+  };
+  const stopDrawing = (e) => {
+    setIsDrawing(false);
+  };
+  const getEventPosition = (e) => {
+    var _a, _b;
+    const offsetX = (_a = e.nativeEvent.offsetX) != null ? _a : e.touches[0].clientX - canvas.current.offsetLeft;
+    const offsetY = (_b = e.nativeEvent.offsetY) != null ? _b : e.touches[0].clientY - canvas.current.offsetTop;
+    return { offsetX, offsetY };
+  };
+  const handleStrokeStyle = (e) => {
+    setStrokeStyle(e.target.value);
+  };
+  const handleSave = () => {
+    var _a;
+    const dataURL = (_a = canvas.current) == null ? void 0 : _a.toDataURL();
+    onSave == null ? void 0 : onSave(dataURL);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "canvas",
+      {
+        ref: canvas,
+        onMouseDown: startDrawing,
+        onMouseUp: stopDrawing,
+        onMouseMove: draw,
+        onMouseOut: stopDrawing,
+        onTouchStart: startDrawing,
+        onTouchEnd: stopDrawing,
+        onTouchMove: draw,
+        onTouchCancel: stopDrawing,
+        style: { border: "1px solid black", ...style },
+        width,
+        height,
+        className: "viking-signature",
+        "aria-label": "\u7B7E\u540D\u753B\u5E03",
+        role: "img"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "controls", style: { width }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: "stroke-style-select", children: "\u7B14\u89E6\u6837\u5F0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("select", { id: "stroke-style-select", onChange: handleStrokeStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "pen", children: "\u94A2\u7B14" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "brush", children: "\u6BDB\u7B14" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => ctx.current.clearRect(
+            0,
+            0,
+            canvas.current.width,
+            canvas.current.height
+          ),
+          children: "\u6E05\u7A7A"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: handleSave, children: "\u4FDD\u5B58" })
+    ] })
+  ] });
+};
+var signature_default = Signature;
+
+// src/components/VirtualList/virtualList.tsx
+var import_react11 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var VirtualList = ({
+  containerHeight,
+  itemHeight,
+  itemCount,
+  children
+}) => {
+  if (import_react11.Children.count(children) > 1) {
+    throw new Error("VirtualList only accept one child");
+  }
+  const contentHeight = itemHeight * itemCount;
+  const [scrollTop, setScrollTop] = (0, import_react11.useState)(0);
+  let startIdx = Math.floor(scrollTop / itemHeight);
+  let endIdx = Math.floor((scrollTop + containerHeight) / itemHeight);
+  const paddingCount = 2;
+  startIdx = Math.max(startIdx - paddingCount, 0);
+  endIdx = Math.min(endIdx + paddingCount, itemCount - 1);
+  const top = itemHeight * startIdx;
+  const items = [];
+  for (let i = startIdx; i <= endIdx; i++) {
+    items.push(
+      (0, import_react11.cloneElement)(children, {
+        index: i,
+        style: { height: itemHeight }
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      style: { height: containerHeight, overflow: "auto" },
+      onScroll: (e) => {
+        setScrollTop(e.target.scrollTop);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { height: contentHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { transform: `translate3d(0px, ${top}px, 0` }, children: items }) })
+    }
+  );
+};
+var virtualList_default = VirtualList;
+
+// src/components/LazyLoad/lazyLoad.tsx
+var import_react12 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Lazyload = (props) => {
+  const {
+    className = "",
+    style,
+    offset = 0,
+    width,
+    onContentVisible,
+    placeholder,
+    height,
+    children
+  } = props;
+  const containerRef = (0, import_react12.useRef)(null);
+  const [visible, setVisible] = (0, import_react12.useState)(false);
+  const elementObserver = (0, import_react12.useRef)();
+  (0, import_react12.useEffect)(() => {
+    function lazyLoadHandler(entries) {
+      var _a;
+      const [entry] = entries;
+      const { isIntersecting } = entry;
+      if (isIntersecting) {
+        setVisible(true);
+        onContentVisible == null ? void 0 : onContentVisible();
+        const node2 = containerRef.current;
+        if (node2 && node2 instanceof HTMLElement) {
+          (_a = elementObserver.current) == null ? void 0 : _a.unobserve(node2);
+        }
+      }
+    }
+    const options = {
+      rootMargin: typeof offset === "number" ? `${offset}px` : offset || "0px",
+      threshold: 0
+    };
+    elementObserver.current = new IntersectionObserver(
+      lazyLoadHandler,
+      options
+    );
+    const node = containerRef.current;
+    if (node instanceof HTMLElement) {
+      elementObserver.current.observe(node);
+    }
+    return () => {
+      var _a;
+      if (node && node instanceof HTMLElement) {
+        (_a = elementObserver.current) == null ? void 0 : _a.unobserve(node);
+      }
+    };
+  }, [offset, onContentVisible]);
+  const styles = { height, width, ...style };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, className, style: styles, children: visible ? children : placeholder });
+};
+var lazyLoad_default = Lazyload;
+
+// src/components/Keepalive/Keepalive.tsx
+var import_react13 = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var KeepAliveContext = (0, import_react13.createContext)({
+  keepPaths: [],
+  keepElements: {},
+  dropByPath() {
+  }
+});
+var isKeepPath = (keepPaths, path) => {
+  for (let i = 0; i < keepPaths.length; i++) {
+    let item = keepPaths[i];
+    if (item === path) return true;
+    if (item instanceof RegExp && item.test(path)) return true;
+    if (typeof item === "string" && item.toLowerCase() === path) return true;
+  }
+  return false;
+};
+function useKeepOutlet() {
+  const location = (0, import_react_router_dom.useLocation)();
+  const element = (0, import_react_router_dom.useOutlet)();
+  const { keepElements, keepPaths } = (0, import_react13.useContext)(KeepAliveContext);
+  const isKeep = isKeepPath(keepPaths, location.pathname);
+  const keepElementsRef = (0, import_react13.useRef)(keepElements);
+  keepElementsRef.current = keepElements;
+  (0, import_react13.useEffect)(() => {
+    if (isKeep && element) {
+      keepElementsRef.current[location.pathname] = element;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    Object.entries(keepElements).map(([pathname, el]) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        style: {
+          height: "100%",
+          width: "100%",
+          position: "relative",
+          overflow: "hidden auto"
+        },
+        className: "keep-alive-page",
+        hidden: !(0, import_react_router_dom.matchPath)(location.pathname, pathname),
+        children: el
+      },
+      pathname
+    )),
+    !isKeep && element
+  ] });
+}
+var KeepAliveLayout = (props) => {
+  const { keepPaths, children } = props;
+  const [keepElements] = (0, import_react13.useState)({});
+  const dropByPath = (path) => {
+    delete keepElements[path];
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KeepAliveContext.Provider, { value: { keepPaths, keepElements, dropByPath }, children });
+};
+var Keepalive_default = KeepAliveLayout;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoComplete,
+  Button,
+  Icon,
+  Input,
+  KeepAliveContext,
+  KeepAliveLayout,
+  LazyLoad,
+  Menu,
+  MenuItem,
+  Progress,
+  Signature,
+  SubMenu,
+  Transition,
+  Upload,
+  VirtualList,
+  useClickOutside,
+  useDebounce,
+  useKeepOutlet
+});
+//# sourceMappingURL=index.js.map