@nutui/nutui-react-taro 2.0.0-alpha.8 → 2.0.0-beta.1

package/dist/esm/searchbar.taro-450d361d.js

@@ -0,0 +1,122 @@
+import React, { useRef, useState, useEffect } from "react";
+import { Search, CircleClose } from "@nutui/icons-react-taro";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  placeholder: "",
+  shape: "square",
+  disabled: false,
+  maxLength: 9999,
+  clearable: true,
+  readOnly: false,
+  autoFocus: false,
+  left: "",
+  right: "",
+  rightIn: "",
+  leftIn: React.createElement(Search, { size: "12" })
+};
+const SearchBar = (props) => {
+  const classPrefix = "nut-searchbar";
+  const { locale } = useConfig();
+  const searchRef = useRef(null);
+  const [value, setValue] = useState(() => props.value);
+  const { placeholder, shape, className, disabled, maxLength, clearable, readOnly, autoFocus, right, left, leftIn, rightIn, onChange, onFocus, onBlur, onClear, onSearch, onClickInput } = {
+    ...defaultProps,
+    ...props
+  };
+  const forceFocus = () => {
+    const searchSelf = searchRef.current;
+    searchSelf && searchSelf.focus();
+  };
+  const change = (event) => {
+    const { value: value2 } = event.target;
+    onChange && (onChange == null ? void 0 : onChange(value2, event));
+    setValue(value2);
+    value2 === "" && forceFocus();
+  };
+  const focus = (event) => {
+    const { value: value2 } = event.target;
+    onFocus && (onFocus == null ? void 0 : onFocus(value2, event));
+  };
+  const blur = (event) => {
+    const searchSelf = searchRef.current;
+    searchSelf && searchSelf.blur();
+    const { value: value2 } = event.target;
+    onBlur && (onBlur == null ? void 0 : onBlur(value2, event));
+  };
+  useEffect(() => {
+    setValue(props.value);
+  }, [props.value]);
+  useEffect(() => {
+    autoFocus && forceFocus();
+  }, [autoFocus]);
+  const renderField = () => {
+    return React.createElement("input", { className: `${classPrefix}__input ${clearable ? `${classPrefix}__input-clear` : ""}`, ref: searchRef, style: { ...props.style }, value: value || "", placeholder: placeholder || locale.placeholder, disabled, readOnly, maxLength, onKeyPress: onKeypress, onChange: (e) => change(e), onFocus: (e) => focus(e), onBlur: (e) => blur(e), onClick: (e) => clickInput(e) });
+  };
+  const clickInput = (e) => {
+    onClickInput && onClickInput(e);
+  };
+  const renderLeftIn = () => {
+    if (!leftIn)
+      return null;
+    return React.createElement("div", { className: `${classPrefix}__leftin ${classPrefix}__icon` }, leftIn);
+  };
+  const renderLeft = () => {
+    if (!left)
+      return null;
+    return React.createElement("div", { className: `${classPrefix}__left` }, left);
+  };
+  const renderRightIn = () => {
+    if (!rightIn)
+      return null;
+    return React.createElement("div", { className: `${classPrefix}__rightin ${classPrefix}__icon` }, rightIn);
+  };
+  const renderRight = () => {
+    if (!right)
+      return null;
+    return React.createElement("div", { className: `${classPrefix}__right` }, right);
+  };
+  const handleClear = () => {
+    return React.createElement(
+      "div",
+      { className: `${classPrefix}__clear ${rightIn ? "pos-right" : ""}`, onClick: (e) => clearaVal(e) },
+      React.createElement(CircleClose, { color: "#555", size: 12 })
+    );
+  };
+  const clearaVal = (event) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setValue("");
+    onClear && onClear(event);
+    forceFocus();
+  };
+  const onKeypress = (e) => {
+    if (e.keyCode === 13) {
+      if (typeof e.cancelable !== "boolean" || e.cancelable) {
+        e.preventDefault();
+      }
+      onSearch && onSearch(value);
+    }
+  };
+  return React.createElement(
+    "div",
+    { className: `${classPrefix} ${disabled ? `${classPrefix}__disabled` : ""}  ${className || ""}`, style: { ...props.style } },
+    renderLeft(),
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__content ${shape === "round" ? `${classPrefix}__round` : ""}` },
+      renderLeftIn(),
+      React.createElement("div", { className: "nut-searchbar__input-box" }, renderField()),
+      renderRightIn(),
+      clearable && value && handleClear()
+    ),
+    renderRight()
+  );
+};
+SearchBar.defaultProps = defaultProps;
+SearchBar.displayName = "NutSearchBar";
+export {
+  SearchBar as S
+};

package/dist/esm/shortpassword.taro-ac22a29e.js

@@ -0,0 +1,90 @@
+import React, { useMemo, useEffect } from "react";
+import { Tips } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { P as Popup } from "./popup.taro-23f882b0.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  value: "",
+  visible: false,
+  plain: false,
+  hideFooter: true,
+  length: 6,
+  autoFocus: false
+};
+const ShortPassword = (props) => {
+  const { locale } = useConfig();
+  const { title, description, tips, visible, value, error, hideFooter, length, plain, style, className, closeable, autoFocus, onFocus, onChange, onConfirm, onTips, onCancel, onClose, onComplete, onClickOverlay, onClickCloseIcon, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-shortpassword";
+  const comLen = useMemo(() => {
+    return Math.min(Math.max(4, length || 4), 6);
+  }, [length]);
+  const format = (val) => {
+    return val.slice(0, comLen);
+  };
+  const [inputValue, setInputValue] = usePropsValue({ value, onChange });
+  useEffect(() => {
+    if (visible && autoFocus) {
+      onFocus && onFocus();
+    }
+  }, [visible]);
+  useEffect(() => {
+    const val = format(value);
+    if (val.length >= comLen) {
+      onComplete && onComplete(val);
+    }
+    setInputValue(format(value));
+  }, [value]);
+  const sure = () => {
+    onConfirm && onConfirm(inputValue);
+  };
+  return React.createElement(
+    Popup,
+    { style: {
+      padding: "32px 24px 28px 24px",
+      borderRadius: "12px",
+      textAlign: "center"
+    }, visible, closeable: true, onClickOverlay: onClose, onClickCloseIcon: onClose, ...rest },
+    React.createElement(
+      "div",
+      { className: classNames(className, classPrefix), style },
+      React.createElement("div", { className: `${classPrefix}__title` }, title || locale.shortpassword.title),
+      React.createElement("div", { className: `${classPrefix}__description` }, description || locale.shortpassword.description),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__input`, onClick: onFocus },
+        React.createElement("div", { className: `${classPrefix}__input-site` }),
+        React.createElement("div", { className: `${classPrefix}__input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
+          return React.createElement("div", { className: `${classPrefix}__input-fake__li`, key: index }, inputValue.length > index && React.createElement(React.Fragment, null, plain ? inputValue[index] : React.createElement("div", { className: `${classPrefix}__input-fake__li__icon` })));
+        }))
+      ),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__message` },
+        React.createElement("div", { className: `${classPrefix}__message__error` }, error),
+        React.createElement("div", { className: `${classPrefix}__message__forget`, onClick: onTips }, tips || React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(Tips, { width: 11, height: 11, style: { marginRight: "3px" } }),
+          locale.shortpassword.tips
+        ))
+      ),
+      !hideFooter && React.createElement(
+        "div",
+        { className: `${classPrefix}__footer` },
+        React.createElement("div", { className: `${classPrefix}__footer__cancel`, onClick: onCancel }, locale.cancel),
+        React.createElement("div", { className: `${classPrefix}__footer__sure`, onClick: sure }, locale.confirm)
+      )
+    )
+  );
+};
+ShortPassword.defaultProps = defaultProps;
+ShortPassword.displayName = "NutShortPassword";
+export {
+  ShortPassword as S
+};

package/dist/esm/{sidenavbar.taro-9f210df4.js → sidenavbar.taro-7bf8d265.js}

@@ -1,17 +1,20 @@
 import React, { useState } from "react";
-import { P as Popup } from "./popup.taro-e756f3fc.js";
-import { O as OffsetContext } from "./offsetContext-f32a9246.js";
+import classNames from "classnames";
+import { P as Popup } from "./popup.taro-23f882b0.js";
+import { O as OffsetContext } from "./context-f32a9246.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
-  showhead: false,
+  ...ComponentDefaults,
   position: "left",
   width: "80%"
 };
 const SideNavBar = (props) => {
-  const { title, visible, width, position, children, className, showhead, onClose, ...rest } = {
+  const classPrefix = "nut-sidenavbar";
+  const { title, visible, width, position, children, className, onClose, ...rest } = {
     ...defaultProps,
     ...props
   };
-  const offset = props.offset ? Number(props.offset) : 20;
+  const indent = props.indent ? Number(props.indent) : 20;
   const [sidenavbarShow, setSidenavbarShow] = useState(true);
   const handleClick = () => {
     setSidenavbarShow(!sidenavbarShow);
@@ -21,23 +24,23 @@ const SideNavBar = (props) => {
     { visible, style: { width, height: "100%" }, position, onClose },
     React.createElement(
       "div",
-      { className: className ? `${className} nut-sidenavbar` : "nut-sidenavbar", ...rest },
+      { className: classNames(className, classPrefix), ...rest },
       React.createElement(
         "div",
-        { className: "nut-sidenavbar__content" },
+        { className: `${classPrefix}__content` },
         React.createElement(
           "div",
-          { className: `nut-sidenavbar__list ${sidenavbarShow ? "nutShow" : "nutHide"}`, onClick: handleClick },
+          { className: `${classPrefix}__list ${sidenavbarShow ? "sidenavbar-show" : "sidenavbar-hide"}`, onClick: handleClick },
           React.createElement(
             "div",
-            { className: "nut-sidenavbar__title border-bt ", style: { paddingLeft: `${offset}px` } },
+            { className: `${classPrefix}__title ${classPrefix}-border-bt`, style: { paddingLeft: `${indent}px` } },
             title,
             React.createElement("i", { className: `arrow-icon ${sidenavbarShow ? "arrow-up" : "arrow-down"}` })
           ),
           React.createElement(
             OffsetContext.Provider,
-            { value: offset },
-            React.createElement("div", { className: "nut-sidenavbar__content" }, children)
+            { value: indent },
+            React.createElement("div", { className: `${classPrefix}__content` }, children)
           )
         )
       )

package/dist/esm/sidenavbaritem.taro-7d805f92.js

@@ -0,0 +1,13 @@
+import React from "react";
+const SideNavBarItem = (props) => {
+  const classPrefix = "nut-subsidenavbar";
+  const { title, value, children, onClick, ...rest } = props;
+  const clickFn = (e) => {
+    e.stopPropagation();
+    onClick && onClick({ title, value });
+  };
+  return React.createElement("div", { className: `${classPrefix}__item ${classPrefix}-border-bt`, onClick: clickFn, ...rest }, title);
+};
+export {
+  SideNavBarItem as S
+};

package/dist/esm/{signature.taro-c57469aa.js → signature.taro-4f68516a.js}

@@ -1,22 +1,19 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useImperativeHandle, useEffect } from "react";
 import { getEnv, nextTick, createSelectorQuery, canvasToTempFilePath } from "@tarojs/taro";
-import { B as Button } from "./button.taro-01eae688.js";
-import { c as cn } from "./bem-cdccae08.js";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
+  ...ComponentDefaults,
   canvasId: "spcanvas",
   type: "png",
   lineWidth: 2,
-  strokeStyle: "#000",
-  className: ""
+  strokeStyle: "#000"
 };
-const Signature = (props) => {
-  const { locale } = useConfig();
-  const { canvasId, type, lineWidth, strokeStyle, unSupportTpl, className, confirm, clear, onConfirm, onClear, ...rest } = {
+const InternalSignature = (props, ref) => {
+  const { canvasId, type, lineWidth, strokeStyle, className, style, onConfirm, onClear, ...rest } = {
     ...defaultProps,
     ...props
   };
-  const b = cn("signature");
+  const classPrefix = `nut-signature`;
   const canvasRef = useRef(null);
   const wrapRef = useRef(null);
   const [canvasHeight, setCanvasHeight] = useState(0);
@@ -54,12 +51,8 @@ const Signature = (props) => {
       ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
       ctx.current.closePath();
     }
-    clear && clear();
     onClear && onClear();
   };
-  const handleConfirmBtn = () => {
-    onSave();
-  };
   const onSave = () => {
     createSelectorQuery().select(`#${canvasId}`).fields({
       node: true,
@@ -71,11 +64,10 @@ const Signature = (props) => {
         canvasId: `${canvasId}`,
         success: (res2) => {
           handleClearBtn();
-          confirm && confirm(res2.tempFilePath);
           onConfirm && onConfirm(res2.tempFilePath);
         },
         fail: (res2) => {
-          console.log("保存失败");
+          console.warn("保存失败");
         }
       });
     });
@@ -95,6 +87,14 @@ const Signature = (props) => {
       ctx.current.strokeStyle = strokeStyle;
     }
   };
+  useImperativeHandle(ref, () => ({
+    confirm: () => {
+      onSave();
+    },
+    clear: () => {
+      handleClearBtn();
+    }
+  }));
   const initCanvas = () => {
     nextTick(() => {
       setTimeout(() => {
@@ -122,8 +122,8 @@ const Signature = (props) => {
   }, []);
   return React.createElement(
     "div",
-    { className: `${b()} ${className}`, ...rest },
-    React.createElement("div", { className: `${b("inner")} spcanvas_WEAPP`, ref: wrapRef }, getEnv() === "WEAPP" || getEnv() === "JD" ? React.createElement("canvas", {
+    { className: `${classPrefix} ${className}`, ...rest },
+    React.createElement("div", { className: `${classPrefix}__inner spcanvas_WEAPP`, ref: wrapRef }, getEnv() === "WEAPP" || getEnv() === "JD" ? React.createElement("canvas", {
       id: canvasId,
       ref: canvasRef,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -134,11 +134,10 @@ const Signature = (props) => {
       onTouchStart: startEventHandler,
       onTouchMove: moveEventHandler,
       onTouchEnd: endEventHandler
-    }) : React.createElement("canvas", { id: canvasId, ref: canvasRef, "canvas-id": canvasId, "disalbe-scroll": disalbeScroll, onTouchStart: startEventHandler, onTouchMove: moveEventHandler, onTouchEnd: endEventHandler, onTouchCancel: endEventHandler })),
-    React.createElement(Button, { className: `${b("btn")}`, type: "default", onClick: () => handleClearBtn() }, locale.signature.reSign),
-    React.createElement(Button, { className: `${b("btn")}`, type: "primary", onClick: () => handleConfirmBtn() }, locale.confirm)
+    }) : React.createElement("canvas", { id: canvasId, ref: canvasRef, "canvas-id": canvasId, "disalbe-scroll": disalbeScroll, onTouchStart: startEventHandler, onTouchMove: moveEventHandler, onTouchEnd: endEventHandler, onTouchCancel: endEventHandler }))
   );
 };
+const Signature = React.forwardRef(InternalSignature);
 Signature.defaultProps = defaultProps;
 Signature.displayName = "NutSignature";
 export {

package/dist/esm/skeleton.taro-79775802.js

@@ -0,0 +1,64 @@
+import React from "react";
+import classNames from "classnames";
+import { A as Avatar } from "./avatar.taro-3f6ebf79.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  rows: 1,
+  animated: false,
+  title: false,
+  avatar: false,
+  avatarSize: "50px",
+  visible: false,
+  avatarShape: "round"
+};
+const Skeleton = (props) => {
+  const { className, animated, rows, title, avatar, avatarSize, visible, children, avatarShape, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-skeleton";
+  const classes = classNames(className, classPrefix);
+  const avatarClass = classNames({
+    avatar: true,
+    [`avatar--${avatarShape}`]: avatarShape
+  });
+  const repeatLines = (num) => {
+    return Array.from({ length: num }, (v, i) => i);
+  };
+  const getStyle = () => {
+    if (avatarSize) {
+      return {
+        width: avatarSize,
+        height: avatarSize
+      };
+    }
+    return {
+      width: "50px",
+      height: "50px"
+    };
+  };
+  return React.createElement(React.Fragment, null, visible ? React.createElement("div", null, children) : React.createElement(
+    "div",
+    { className: classes, ...rest },
+    animated && React.createElement("div", { className: `${classPrefix}__animation` }),
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__content` },
+      avatar && React.createElement(Avatar, { className: avatarClass, background: "rgb(239, 239, 239)", shape: avatarShape, style: getStyle(), icon: "null" }),
+      rows === 1 ? React.createElement("div", { className: `${classPrefix}__block` }) : React.createElement(
+        "div",
+        { className: `${classPrefix}__content-line` },
+        title && React.createElement("div", { className: `${classPrefix}__title` }),
+        repeatLines(rows).map((item, index) => {
+          return React.createElement("div", { className: `${classPrefix}__block`, key: index });
+        })
+      )
+    )
+  ));
+};
+Skeleton.defaultProps = defaultProps;
+Skeleton.displayName = "NutSkeleton";
+export {
+  Skeleton as S
+};

package/dist/esm/step.taro-2f55e4f2.js

@@ -0,0 +1,63 @@
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { D as DataContext } from "./context-ab42ba7f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  title: "",
+  description: "",
+  value: 0,
+  icon: null
+};
+const Step = (props) => {
+  const { children, title, description, value, icon, className, ...restProps } = {
+    ...defaultProps,
+    ...props
+  };
+  const parent = useContext(DataContext);
+  const dot = parent.propSteps.dot;
+  const getCurrentStatus = () => {
+    const index = value;
+    if (index < +parent.propSteps.value)
+      return "finish";
+    return index === +parent.propSteps.value ? "process" : "wait";
+  };
+  const handleClickStep = () => {
+    var _a, _b;
+    ((_a = parent.propSteps) == null ? void 0 : _a.onStepClick) && ((_b = parent.propSteps) == null ? void 0 : _b.onStepClick(value));
+  };
+  const classPrefix = `nut-step`;
+  const classes = classNames({
+    [`${classPrefix}-${getCurrentStatus()}`]: true
+  }, className, classPrefix);
+  const renderIconClass = () => {
+    if (icon) {
+      return `${classPrefix}-icon is-icon`;
+    }
+    if (!dot && !icon) {
+      return `${classPrefix}-icon is-text`;
+    }
+    return `${classPrefix}-icon`;
+  };
+  return React.createElement(
+    "div",
+    { className: classes, ...restProps, onClick: handleClickStep },
+    React.createElement(
+      "div",
+      { className: "nut-step-head" },
+      React.createElement("div", { className: "nut-step-line" }),
+      React.createElement("div", { className: renderIconClass() }, icon || !dot && React.createElement("span", { className: "nut-step-inner" }, value))
+    ),
+    React.createElement(
+      "div",
+      { className: "nut-step-main" },
+      React.createElement("span", { className: "nut-step-title" }, title),
+      description && React.createElement("span", { className: "nut-step-description" }, description)
+    )
+  );
+};
+Step.defaultProps = defaultProps;
+Step.displayName = "NutStep";
+export {
+  Step as S
+};

package/dist/esm/{steps.taro-77e301ab.js → steps.taro-196c1f59.js}

@@ -1,23 +1,24 @@
 import React from "react";
 import classNames from "classnames";
-import { D as DataContext } from "./UserContext-735db09f.js";
-import { c as cn } from "./bem-cdccae08.js";
+import { D as DataContext } from "./context-ab42ba7f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
-  current: 0,
+  ...ComponentDefaults,
+  value: 0,
   direction: "horizontal",
-  progressDot: false
+  dot: false
 };
 const Steps = (props) => {
   const propSteps = { ...defaultProps, ...props };
-  const { children, current, direction, className, progressDot, clickStep, onClickStep, ...restProps } = propSteps;
+  const { children, value, direction, className, dot, onStepClick, ...restProps } = propSteps;
   const parentSteps = {
     propSteps
   };
-  const b = cn("steps");
+  const classPrefix = `nut-steps`;
   const classes = classNames({
-    [`${b("")}-${direction}`]: true,
-    [`${b("")}-dot`]: !!props.progressDot
-  }, className, b(""));
+    [`${classPrefix}-${direction}`]: true,
+    [`${classPrefix}-dot`]: !!props.dot
+  }, className, classPrefix);
   return React.createElement(DataContext.Provider, { value: parentSteps }, React.createElement("div", {
     className: classes,
     ...restProps

package/dist/esm/{sticky.taro-3c03eb0a.js → sticky.taro-6bc62a96.js}

@@ -2,8 +2,8 @@ import React, { useRef, useEffect, useState, useMemo, useCallback } from "react"
 import classNames from "classnames";
 import { getEnv, usePageScroll, getSystemInfoSync } from "@tarojs/taro";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
-import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
-import { g as getScrollParent } from "./get-scroll-parent-8da04f2e.js";
+import { g as getRectByTaro } from "./use-client-rect-2bb6c562.js";
+import { c as canUseDom } from "./can-use-dom-0e539bd3.js";
 function useWatch(dep, callback, config = { immediate: false }) {
   const { immediate } = config;
   const prev = useRef();
@@ -27,6 +27,26 @@ function useWatch(dep, callback, config = { immediate: false }) {
     stop.current = true;
   };
 }
+const defaultRoot = canUseDom ? window : void 0;
+const overflowStylePatterns = ["scroll", "auto", "overlay"];
+function isElement(node) {
+  const ELEMENT_NODE_TYPE = 1;
+  return node.nodeType === ELEMENT_NODE_TYPE;
+}
+function getScrollParent(el, root = defaultRoot) {
+  let node = el;
+  while (node && node !== root && isElement(node)) {
+    if (node === document.body) {
+      return root;
+    }
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowStylePatterns.includes(overflowY) && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return root;
+}
 const defaultProps = {
   ...ComponentDefaults,
   position: "top",
@@ -98,7 +118,7 @@ const Sticky = (props) => {
         setFixed(windowHeight - threshold < curRootRect.bottom);
       }
     } else {
-      console.log("getRectByTaro获取失败", { stickyRect, curRootRect });
+      console.warn("getRectByTaro获取失败", { stickyRect, curRootRect });
     }
   };
   const getElement = useCallback(() => {

package/dist/esm/{subsidenavbar.taro-abe07673.js → subsidenavbar.taro-47bb6e74.js}

@@ -1,10 +1,11 @@
 import React, { useState, useContext, useRef, useCallback, useEffect } from "react";
-import { O as OffsetContext } from "./offsetContext-f32a9246.js";
+import { O as OffsetContext } from "./context-f32a9246.js";
 const defaultProps = {
   open: true
 };
 const SubSideNavBar = (props) => {
-  const { title, key, children, onClick, open, ...rest } = {
+  const classPrefix = "nut-subsidenavbar";
+  const { title, value, children, onClick, open, ...rest } = {
     ...defaultProps,
     ...props
   };
@@ -13,18 +14,18 @@ const SubSideNavBar = (props) => {
   const listRef = useRef(null);
   const setListLevel = useCallback((nodeList, level = 1) => {
     const titleClass = nodeList[0].className;
-    if (titleClass.includes("nut-subsidenavbar__title")) {
+    if (titleClass.includes(`${classPrefix}__title`)) {
       const left = offset * (level + 1);
       nodeList[0].style.paddingLeft = `${left}px`;
     }
     const childNodes = nodeList[1] && nodeList[1].children && Array.from(nodeList[1].children).filter((item) => item.nodeType !== 3 && item.nodeType !== 8);
     childNodes.forEach((item) => {
       const itemClass = item.className;
-      if (itemClass.includes("nut-subsidenavbar__item")) {
+      if (itemClass.includes(`${classPrefix}__item`)) {
         const left = offset * (level + 2);
         item.style.paddingLeft = `${left}px`;
       }
-      if (itemClass.includes("nut-subsidenavbar__list")) {
+      if (itemClass.includes(`${classPrefix}__list`)) {
         let level2 = item.getAttribute("level") ? Number(item.getAttribute("level")) : 1;
         level2 += 1;
         item.setAttribute("level", level2.toString());
@@ -36,7 +37,7 @@ const SubSideNavBar = (props) => {
     e.stopPropagation();
     setSubShow(!subShow);
     const isShow = !subShow;
-    onClick && onClick({ title, key, isShow });
+    onClick && onClick({ title, value, isShow });
   };
   useEffect(() => {
     var _a, _b;
@@ -44,19 +45,19 @@ const SubSideNavBar = (props) => {
     (_b = listRef.current) == null ? void 0 : _b.setAttribute("level", "1");
     childNodes && setListLevel(childNodes);
   }, [setListLevel]);
-  const divClass = subShow ? "nut-subsidenavbar__list  nutShow" : "nut-subsidenavbar__list  nutHide";
+  const divClass = subShow ? `${classPrefix}__list sidenavbar-show` : `${classPrefix}__list sidenavbar-hide`;
   const iconClass = subShow ? "arrow-icon arrow-down" : "arrow-icon arrow-up";
   return React.createElement(
     "div",
     { className: divClass, ref: listRef, onClick: clickFn, ...rest },
     React.createElement(
       "div",
-      { className: "nut-subsidenavbar__title border-bt" },
+      { className: `${classPrefix}__title ${classPrefix}-border-bt` },
       title,
       " ",
       React.createElement("i", { className: iconClass })
     ),
-    React.createElement("div", { className: "nut-subsidenavbar__content" }, children)
+    React.createElement("div", { className: `${classPrefix}__content` }, children)
   );
 };
 export {