@bifrostui/react 1.4.5-beta.3 → 1.4.6

package/dist/Steps/Steps.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StepsProps } from './Steps.types';
 import './Steps.less';
+import { StepsProps } from './Steps.types';
 declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Steps;

package/dist/Steps/Steps.js

@@ -59,65 +59,68 @@ module.exports = __toCommonJS(Steps_exports);
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_Steps = require("./Steps.css");
 var import_StepsContext = require("./StepsContext");
-var import_Steps2 = require("./Steps.css");
 const prefixCls = "bui-steps";
-const Steps = (0, import_react.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      children,
-      direction = "vertical",
-      current = 0,
-      labelPlacement = "horizontal",
-      onChange
-    } = _b, others = __objRest(_b, [
-      "className",
-      "children",
-      "direction",
-      "current",
-      "labelPlacement",
-      "onChange"
-    ]);
-    const renderStep = () => {
-      return (0, import_utils.toArray)(children).map((child, index) => {
-        const childProps = __spreadValues({
-          key: index
-        }, child.props);
-        if (!child.props.status) {
-          if (index === current) {
-            childProps.status = "active";
-          } else if (index < current) {
-            childProps.status = "finish";
-          } else {
-            childProps.status = "wait";
-          }
+const Steps = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, {
+    className,
+    children,
+    direction,
+    current,
+    labelPlacement,
+    onChange
+  } = _a, others = __objRest(_a, [
+    "className",
+    "children",
+    "direction",
+    "current",
+    "labelPlacement",
+    "onChange"
+  ]);
+  const renderStep = () => {
+    return (0, import_utils.toArray)(children).map((child, index) => {
+      const childProps = __spreadValues({
+        key: index
+      }, child.props);
+      if (!child.props.status) {
+        if (index === current) {
+          childProps.status = "active";
+        } else if (index < current) {
+          childProps.status = "finish";
+        } else {
+          childProps.status = "wait";
         }
-        return (0, import_react.cloneElement)(child, childProps);
-      });
-    };
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_StepsContext.StepsContextProvider,
-      {
-        value: {
-          direction,
-          current,
-          labelPlacement,
-          onChange
-        }
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        __spreadValues({
-          className: (0, import_clsx.default)(prefixCls, className, {
-            [`${prefixCls}-${direction}`]: direction
-          }),
-          ref
-        }, others),
-        renderStep()
-      )
-    );
-  }
-);
+      }
+      return (0, import_react.cloneElement)(child, childProps);
+    });
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_StepsContext.StepsContextProvider,
+    {
+      value: {
+        direction,
+        current,
+        labelPlacement,
+        onChange
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadValues({
+        className: (0, import_clsx.default)(prefixCls, className, {
+          [`${prefixCls}-${direction}`]: direction
+        }),
+        ref
+      }, others),
+      renderStep()
+    )
+  );
+});
 Steps.displayName = "Steps";
+Steps.defaultProps = {
+  current: 0,
+  direction: "vertical",
+  labelPlacement: "horizontal"
+};
 var Steps_default = Steps;

package/dist/Switch/Switch.js

@@ -64,80 +64,83 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Switch2 = require("./Switch.css");
 const prefixCls = "bui-switch";
-const Switch = (0, import_react.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      checked,
-      defaultChecked,
-      inputProps,
-      inputRef,
-      name,
-      checkedChildren,
-      unCheckedChildren,
-      disabled = false,
-      size = "medium",
-      color = "primary",
-      onChange
-    } = _b, others = __objRest(_b, [
-      "className",
-      "checked",
-      "defaultChecked",
-      "inputProps",
-      "inputRef",
-      "name",
-      "checkedChildren",
-      "unCheckedChildren",
-      "disabled",
-      "size",
-      "color",
-      "onChange"
-    ]);
-    const [switchChecked, triggerChange] = (0, import_utils.useValue)({
-      value: checked,
-      defaultValue: !!defaultChecked
-    });
-    const changeAction = (e, isChecked) => {
-      triggerChange(e, isChecked);
-      onChange == null ? void 0 : onChange(e, { checked: isChecked });
-    };
-    const handleChange = (e) => {
-      var _a2;
-      const isChecked = !switchChecked;
-      changeAction(e, isChecked);
-      (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
-    };
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      __spreadValues({
-        ref,
-        className: (0, import_clsx.default)(
-          `${prefixCls}`,
-          `${prefixCls}-${size}`,
-          `${prefixCls}-${color}`,
-          {
-            [`${prefixCls}-checked`]: switchChecked,
-            [`${prefixCls}-disabled`]: disabled
-          },
-          className
-        )
-      }, others),
-      /* @__PURE__ */ import_react.default.createElement(
-        "input",
-        __spreadProps(__spreadValues({
-          ref: inputRef,
-          type: "checkbox",
-          name,
-          checked: switchChecked,
-          disabled
-        }, inputProps), {
-          onChange: handleChange,
-          className: (0, import_clsx.default)(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
-        })
-      ),
-      (checkedChildren || unCheckedChildren) && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-inner` }, switchChecked ? checkedChildren : unCheckedChildren)
-    );
-  }
-);
+const Switch = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, {
+    className,
+    checked,
+    defaultChecked,
+    inputProps,
+    inputRef,
+    name,
+    checkedChildren,
+    unCheckedChildren,
+    disabled,
+    size,
+    color,
+    onChange
+  } = _a, others = __objRest(_a, [
+    "className",
+    "checked",
+    "defaultChecked",
+    "inputProps",
+    "inputRef",
+    "name",
+    "checkedChildren",
+    "unCheckedChildren",
+    "disabled",
+    "size",
+    "color",
+    "onChange"
+  ]);
+  const [switchChecked, triggerChange] = (0, import_utils.useValue)({
+    value: checked,
+    defaultValue: !!defaultChecked
+  });
+  const changeAction = (e, isChecked) => {
+    triggerChange(e, isChecked);
+    onChange == null ? void 0 : onChange(e, { checked: isChecked });
+  };
+  const handleChange = (e) => {
+    var _a2;
+    const isChecked = !switchChecked;
+    changeAction(e, isChecked);
+    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    __spreadValues({
+      ref,
+      className: (0, import_clsx.default)(
+        `${prefixCls}`,
+        `${prefixCls}-${size}`,
+        `${prefixCls}-${color}`,
+        {
+          [`${prefixCls}-checked`]: switchChecked,
+          [`${prefixCls}-disabled`]: disabled
+        },
+        className
+      )
+    }, others),
+    /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      __spreadProps(__spreadValues({
+        ref: inputRef,
+        type: "checkbox",
+        name,
+        checked: switchChecked,
+        disabled
+      }, inputProps), {
+        onChange: handleChange,
+        className: (0, import_clsx.default)(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
+      })
+    ),
+    (checkedChildren || unCheckedChildren) && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-inner` }, switchChecked ? checkedChildren : unCheckedChildren)
+  );
+});
 Switch.displayName = "BuiSwitch";
+Switch.defaultProps = {
+  disabled: false,
+  size: "medium",
+  color: "primary"
+};
 var Switch_default = Switch;

package/dist/TabBar/TabBar.js

@@ -63,9 +63,9 @@ var import_TabBar = require("./TabBar.css");
 const prefixCls = "bui-tab-bar";
 const TabBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props || {}, {
-    current = 0,
-    activeColor = "primary",
-    color = "default",
+    current,
+    activeColor,
+    color,
     children,
     className,
     onChange
@@ -97,4 +97,9 @@ const TabBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   );
 });
 TabBar.displayName = "BuiTabBar";
+TabBar.defaultProps = {
+  activeColor: "primary",
+  color: "default",
+  current: 0
+};
 var TabBar_default = TabBar;

package/dist/Tabs/Tab.css

@@ -4,25 +4,31 @@
   justify-content: center;
   white-space: nowrap;
   width: min-content;
-  height: 100%;
+  height: var(--tab-height);
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  font-size: var(--bui-tabs-font-size);
+  font-size: var(--font-size);
   line-height: var(--bui-line-height);
-  color: var(--bui-tabs-color);
-  padding: var(--bui-tab-padding);
-  font-family: var(--bui-tabs-font-family);
+  color: var(--color);
+  padding: var(--tab-padding);
+  font-family: var(--bui-font-family);
 }
 .bui-tab-active {
-  --bui-tabs-font-family: var(--bui-font-family-accent, inherit);
-  --bui-tabs-color: var(--bui-color-fg-default);
-  font-weight: 600;
+  font-size: var(--font-size);
+  line-height: var(--bui-line-height);
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--active-color);
+}
+.bui-tab-center {
+  flex: 1 0 0;
+  margin: 0 auto;
 }
 .bui-tab-miniapp-active {
-  --bui-tabs-color: var(--bui-color-fg-default);
+  font-size: var(--font-size);
   line-height: 1.5;
   font-weight: var(--bui-font-weight-medium);
+  color: var(--active-color);
   position: relative;
 }
 .bui-tab-miniapp-active-line {
@@ -40,7 +46,7 @@
   opacity: 0.5;
   pointer-events: none;
 }
-.bui-indicator-invisible {
+.bui-tabline-invisible {
   visibility: hidden;
   background-color: transparent;
 }

package/dist/Tabs/Tab.js

@@ -66,27 +66,16 @@ var import_TabsContext = __toESM(require("./TabsContext"));
 var import_Tab2 = require("./Tab.css");
 const prefixCls = "bui-tab";
 const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, {
-    className,
-    children,
-    index,
-    disabled = false,
-    onClick
-  } = _a, others = __objRest(_a, [
-    "className",
-    "children",
-    "index",
-    "disabled",
-    "onClick"
-  ]);
+  const _a = props, { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
   const tabsContext = import_react.default.useContext(import_TabsContext.default);
-  const { value, triggerChange } = tabsContext;
+  const { value, align, triggerChange } = tabsContext;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({
       ref,
       className: (0, import_clsx.default)(
         prefixCls,
+        align !== "start" && `${prefixCls}-${align}`,
         {
           [`${prefixCls}-active`]: !import_utils.isMini && index === value,
           [`${prefixCls}-miniapp-active`]: import_utils.isMini && index === value,
@@ -108,11 +97,14 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       "div",
       {
         className: (0, import_clsx.default)(`${prefixCls}-miniapp-active-line`, {
-          "bui-indicator-invisible": index !== value
+          "bui-tabline-invisible": index !== value
         })
       }
     )
   );
 });
 Tab.displayName = "BuiTab";
+Tab.defaultProps = {
+  disabled: false
+};
 var Tab_default = Tab;

package/dist/Tabs/Tabs.css

@@ -1,10 +1,20 @@
 .bui-tabs {
+  --height: var(--bui-tabs-height, 39px);
+  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
+  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
+  --line-color: var(--bui-tabs-line-color, var(--bui-color-primary));
+  --line-height: var(--bui-tabs-line-height, 3PX);
+  --line-width: var(--bui-tabs-line-width, 18px);
+  --mask-width: var(--bui-tabs-mask-width, 12px);
+  --mask-height: var(--bui-tabs-mask-height, 100%);
+  --tab-height: var(--bui-tab-height, 100%);
+  --tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
+  --font-size: var(--bui-tab-font-size, var(--bui-text-size-1));
   position: relative;
-  font-family: var(--bui-tabs-font-family);
-  font-weight: var(--bui-tabs-font-weight);
+  font-family: var(--bui-font-family);
 }
 .bui-tabs-tabs {
-  height: var(--bui-tabs-height);
+  height: var(--height);
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -16,15 +26,14 @@
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
-.bui-tabs-indicator {
+.bui-tabs-tabline {
   position: absolute;
-  width: var(--bui-tabs-indicator-width);
-  bottom: var(--bui-tabs-indicator-bottom);
-  height: var(--bui-tabs-indicator-height);
+  width: var(--line-width);
+  bottom: 0;
+  height: var(--line-height);
   color: var(--bui-color-primary);
-  background: var(--bui-tabs-indicator-bg);
-  border-radius: var(--bui-tabs-indicator-border-radius);
-  box-shadow: var(--bui-tabs-indicator-box-shadow);
+  background: var(--line-color);
+  border-radius: var(--bui-shape-radius-label);
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -34,8 +43,8 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  width: 12px;
-  height: 100%;
+  width: var(--mask-width);
+  height: var(--mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {
@@ -54,7 +63,7 @@
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-indicator-invisible {
+.bui-tabline-invisible {
   visibility: hidden;
   background-color: transparent;
 }

package/dist/Tabs/Tabs.js

@@ -65,22 +65,24 @@ var import_bound = __toESM(require("./utils/bound"));
 var import_Tabs2 = require("./Tabs.css");
 const prefixCls = "bui-tabs";
 const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
+  const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
+  const [active, setActive] = (0, import_react.useState)("");
   const tabsRef = (0, import_react.useRef)(null);
   const activeLineRef = (0, import_react.useRef)(null);
-  const [indicatorData, setIndicatorData] = (0, import_react.useState)({
+  const [lineData, setLineData] = (0, import_react.useState)({
     x: 0,
+    transitionInUse: false,
     hasActiveTab: false
   });
   const [maskData, setMaskData] = (0, import_react.useState)({
     leftMaskOpacity: 0,
     rightMaskOpacity: 0
   });
-  const animate = (0, import_utils.useEventCallback)(() => {
+  const animate = ({ transitionInUse }) => {
     const container = tabsRef.current;
     if (!container)
       return;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === value);
+    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
     const activeLine = activeLineRef.current;
     if (!activeLine)
       return;
@@ -111,8 +113,9 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       activeLineWidth = activeLine.offsetWidth;
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
-    setIndicatorData({
+    setLineData({
       x,
+      transitionInUse,
       hasActiveTab: !!activeTab
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
@@ -126,7 +129,26 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     if (tabsRef.current) {
       tabsRef.current.scrollLeft = nextScrollLeft;
     }
-  });
+  };
+  (0, import_react.useEffect)(() => {
+    setActive(value);
+  }, [value]);
+  (0, import_react.useLayoutEffect)(() => {
+    animate({ transitionInUse: false });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const handleResize = (0, import_utils.debounce)(() => {
+      animate({ transitionInUse: true });
+      updateMask();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [active]);
+  (0, import_utils.useDidMountEffect)(() => {
+    animate({ transitionInUse: true });
+  }, [active, tabs, children]);
   const updateMask = (0, import_react.useMemo)(
     () => (0, import_utils.throttle)(
       () => {
@@ -149,20 +171,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     ),
     []
   );
-  (0, import_react.useEffect)(() => {
-    animate();
-  }, [value]);
-  (0, import_react.useEffect)(() => {
-    const handleResize = (0, import_utils.debounce)(() => {
-      animate();
-      updateMask();
-    }, 100);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react.useLayoutEffect)(() => {
     updateMask();
   }, []);
   const handleClick = (e, item) => {
@@ -172,13 +181,16 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     if (index === void 0 || index === null) {
       return;
     }
+    if (active !== value) {
+      setActive(index);
+    }
     if (index !== value) {
       onChange == null ? void 0 : onChange(e, { index });
     }
   };
   const providerValue = (0, import_react.useMemo)(() => {
-    return { value, triggerChange: handleClick };
-  }, [value, children, handleClick]);
+    return { value, align, triggerChange: handleClick };
+  }, [value, align, children, handleClick]);
   return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -199,12 +211,12 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "div",
     {
       ref: activeLineRef,
-      className: (0, import_clsx.default)(`${prefixCls}-indicator`, {
-        "bui-indicator-invisible": import_utils.isMini || !indicatorData.hasActiveTab
+      className: (0, import_clsx.default)(`${prefixCls}-tabline`, {
+        "bui-tabline-invisible": import_utils.isMini || !lineData.hasActiveTab
       }),
       style: {
-        transition: "transform 0.3s ease-in-out",
-        transform: `translate3d(${indicatorData.x}px, 0px, 0px)`
+        transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
+        transform: `translate3d(${lineData.x}px, 0px, 0px)`
       }
     }
   ), /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {
@@ -220,4 +232,8 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   }), children)));
 });
 Tabs.displayName = "BuiTabs";
+Tabs.defaultProps = {
+  align: "center",
+  tabs: []
+};
 var Tabs_default = Tabs;

package/dist/Tabs/Tabs.types.d.ts

@@ -3,6 +3,9 @@ import React, { SyntheticEvent } from 'react';
 export interface TabHeaderItem {
     title: React.ReactNode;
     index: string;
+    /**
+     * 是否禁止点击
+     */
     disabled?: boolean;
 }
 export interface ITabsChangeData {
@@ -11,8 +14,11 @@ export interface ITabsChangeData {
 }
 export type TabChangeEvent = (e?: SyntheticEvent, data?: ITabsChangeData) => void;
 export interface ITabItem {
+    /** 面板标题 */
     title: React.ReactNode;
+    /** 面板的索引值 */
     index: string;
+    /** 面板是否禁用 */
     disabled?: boolean;
 }
 export type ITabAlign = 'start' | 'center';
@@ -26,6 +32,10 @@ export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverridePro
          * 切换面板的数据
          */
         tabs?: ITabItem[];
+        /**
+         * 对齐方式，默认为center
+         */
+        align?: ITabAlign;
         /**
          * 切换面板的回调
          */

package/dist/Tag/Tag.css

@@ -47,7 +47,7 @@
   border: 1px solid var(--bui-color-border-danger);
 }
 .bui-tag-outlined.bui-tag-vip {
-  color: var(--bui-color-primary);
+  color: var(--bui-color-red);
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {