@bifrostui/react 1.4.4-beta.0 → 1.4.5-beta.0

package/es/Tabs/Tab.js

@@ -35,8 +35,11 @@ import React from "react";
 import TabsContext from "./TabsContext";
 import "./Tab.css";
 const prefixCls = "bui-tab";
+const defaultProps = {
+  disabled: false
+};
 const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
+  const _a = __spreadValues(__spreadValues({}, defaultProps), props), { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
   const tabsContext = React.useContext(TabsContext);
   const { value, align, triggerChange } = tabsContext;
   return /* @__PURE__ */ React.createElement(
@@ -74,9 +77,6 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
   );
 });
 Tab.displayName = "BuiTab";
-Tab.defaultProps = {
-  disabled: false
-};
 var Tab_default = Tab;
 export {
   Tab_default as default

package/es/Tabs/Tabs.css

@@ -1,20 +1,25 @@
 .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));
+  --bui-tabs-height: 39px;
+  --bui-tabs-color: var(--bui-color-fg-subtle);
+  --bui-tabs-active-color: var(--bui-color-fg-default);
+  --bui-tabs-line-color: var(--bui-color-primary);
+  --bui-tabs-line-height: 3px;
+  --bui-tabs-line-width: 18px;
+  --bui-tabs-line-border-radius: 3px;
+  --bui-tabs-line-bottom: 0;
+  --bui-tabs-line-box-shadow: none;
+  --bui-tabs-mask-width: 12px;
+  --bui-tabs-mask-height: 100%;
+  --bui-tab-height: 100%;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --bui-tab-font-size: var(--bui-text-size-1);
+  --bui-tab-active-font-size: var(--bui-text-size-1);
+  --bui-tabs-active-font-weight: var(--bui-font-weight-medium);
   position: relative;
   font-family: var(--bui-font-family);
 }
 .bui-tabs-tabs {
-  height: var(--height);
+  height: var(--bui-tabs-height);
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -28,12 +33,13 @@
 }
 .bui-tabs-tabline {
   position: absolute;
-  width: var(--line-width);
-  bottom: 0;
-  height: var(--line-height);
+  width: var(--bui-tabs-line-width);
+  bottom: var(--bui-tabs-line-bottom);
+  height: var(--bui-tabs-line-height);
   color: var(--bui-color-primary);
-  background: var(--line-color);
-  border-radius: var(--bui-shape-radius-label);
+  background: var(--bui-tabs-line-color);
+  border-radius: var(--bui-tabs-line-border-radius);
+  box-shadow: var(--bui-tabs-line-box-shadow);
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -43,8 +49,8 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  width: var(--mask-width);
-  height: var(--mask-height);
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {

package/es/Tabs/Tabs.js

@@ -45,14 +45,19 @@ import { TabsContextProvider } from "./TabsContext";
 import bound from "./utils/bound";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
+const defaultProps = {
+  align: "center",
+  tabs: []
+};
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
+  const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
   const [active, setActive] = useState("");
   const tabsRef = useRef(null);
   const activeLineRef = useRef(null);
   const [lineData, setLineData] = useState({
     x: 0,
-    transitionInUse: false
+    transitionInUse: false,
+    hasActiveTab: false
   });
   const [maskData, setMaskData] = useState({
     leftMaskOpacity: 0,
@@ -95,7 +100,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     }
     setLineData({
       x,
-      transitionInUse
+      transitionInUse,
+      hasActiveTab: !!activeTab
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0 || !activeTab)
@@ -109,25 +115,6 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       tabsRef.current.scrollLeft = nextScrollLeft;
     }
   };
-  useEffect(() => {
-    setActive(value);
-  }, [value]);
-  useLayoutEffect(() => {
-    animate({ transitionInUse: false });
-  }, []);
-  useEffect(() => {
-    const handleResize = debounce(() => {
-      animate({ transitionInUse: true });
-      updateMask();
-    }, 100);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [active]);
-  useDidMountEffect(() => {
-    animate({ transitionInUse: true });
-  }, [active, tabs, children]);
   const updateMask = useMemo(
     () => throttle(
       () => {
@@ -150,6 +137,25 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     ),
     []
   );
+  useEffect(() => {
+    setActive(value);
+  }, [value]);
+  useLayoutEffect(() => {
+    animate({ transitionInUse: false });
+  }, []);
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      animate({ transitionInUse: true });
+      updateMask();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [active]);
+  useDidMountEffect(() => {
+    animate({ transitionInUse: true });
+  }, [active, tabs, children]);
   useLayoutEffect(() => {
     updateMask();
   }, []);
@@ -191,10 +197,10 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     {
       ref: activeLineRef,
       className: clsx(`${prefixCls}-tabline`, {
-        "bui-tabline-invisible": isMini || !lineData.x
+        "bui-tabline-invisible": isMini || !lineData.hasActiveTab
       }),
       style: {
-        transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
+        transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
         transform: `translate3d(${lineData.x}px, 0px, 0px)`
       }
     }
@@ -211,10 +217,6 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   }), children)));
 });
 Tabs.displayName = "BuiTabs";
-Tabs.defaultProps = {
-  align: "center",
-  tabs: []
-};
 var Tabs_default = Tabs;
 export {
   Tabs_default as default

package/es/Tabs/Tabs.types.d.ts

@@ -3,9 +3,6 @@ import React, { SyntheticEvent } from 'react';
 export interface TabHeaderItem {
     title: React.ReactNode;
     index: string;
-    /**
-     * 是否禁止点击
-     */
     disabled?: boolean;
 }
 export interface ITabsChangeData {
@@ -14,11 +11,8 @@ 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';

package/es/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-red);
+  color: var(--bui-color-primary);
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {

package/es/Tooltip/Tooltip.css

@@ -1,6 +1,6 @@
 .bui-tooltip {
   --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
-  --localtion-position: var(--bui-tooltip-localtion-position, 8PX);
+  --location-position: var(--bui-tooltip-location-position, 8PX);
   --max-width: var(--bui-tooltip-max-width, 350px);
   --content-min-width: var(--bui-tooltip-content-min-width, 30px);
   --content-min-height: var(--bui-tooltip-content-min-height, 32px);
@@ -17,16 +17,16 @@
   position: absolute;
 }
 .bui-tooltip .bui-tooltip-arrow.location-left {
-  left: var(--localtion-position);
+  left: var(--location-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-right {
-  right: var(--localtion-position);
+  right: var(--location-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-top {
-  top: var(--localtion-position);
+  top: var(--location-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-bottom {
-  bottom: var(--localtion-position);
+  bottom: var(--location-position);
 }
 .bui-tooltip.tooltip-top .location-center,
 .bui-tooltip.tooltip-bottom .location-center {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.4.4-beta.0",
+  "version": "1.4.5-beta.0",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -30,13 +30,13 @@
     "glob": "11.0.0"
   },
   "dependencies": {
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.4.4-beta.0",
-    "@bifrostui/styles": "1.4.4-beta.0",
-    "@bifrostui/utils": "1.4.4-beta.0",
-    "@bifrostui/types": "1.4.4-beta.0"
+    "@bifrostui/icons": "1.4.5-beta.0",
+    "@bifrostui/types": "1.4.5-beta.0",
+    "@bifrostui/utils": "1.4.5-beta.0",
+    "@bifrostui/styles": "1.4.5-beta.0"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",