@bifrostui/react 1.4.5-beta.2 → 1.4.5

package/es/Tabs/Tabs.css

@@ -1,44 +1,39 @@
 .bui-tabs {
-  --bui-tabs-font-family: var(--bui-font-family);
-  --bui-tabs-font-size: var(--bui-text-size-1);
-  --bui-tabs-height: 39px;
-  --bui-tabs-color: var(--bui-color-fg-subtle);
-  --bui-tabs-font-weight: var(--bui-font-weight-medium);
-  --bui-tabs-indicator-bg: var(--bui-color-primary);
-  --bui-tabs-indicator-height: 3px;
-  --bui-tabs-indicator-width: 18px;
-  --bui-tabs-indicator-border-radius: 3px;
-  --bui-tabs-indicator-bottom: 0;
-  --bui-tabs-indicator-box-shadow: none;
-  --bui-tabs-mask-width: 12px;
-  --bui-tabs-mask-height: 100%;
-  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --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-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;
   align-items: center;
   position: relative;
   overflow-x: scroll;
-  font-weight: var(--bui-tabs-font-weight);
   scrollbar-width: none;
 }
 .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);
@@ -48,8 +43,8 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  width: var(--bui-tabs-mask-width);
-  height: var(--bui-tabs-mask-height);
+  width: var(--mask-width);
+  height: var(--mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {
@@ -68,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/es/Tabs/Tabs.js

@@ -45,11 +45,8 @@ import { TabsContextProvider } from "./TabsContext";
 import bound from "./utils/bound";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
-const defaultProps = {
-  tabs: []
-};
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = __spreadValues(__spreadValues({}, defaultProps), 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] = useState("");
   const tabsRef = useRef(null);
   const activeLineRef = useRef(null);
@@ -114,6 +111,25 @@ 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(
       () => {
@@ -136,25 +152,6 @@ 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();
   }, []);
@@ -173,8 +170,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     }
   };
   const providerValue = useMemo(() => {
-    return { value, triggerChange: handleClick };
-  }, [value, children, handleClick]);
+    return { value, align, triggerChange: handleClick };
+  }, [value, align, children, handleClick]);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -195,11 +192,11 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "div",
     {
       ref: activeLineRef,
-      className: clsx(`${prefixCls}-indicator`, {
-        "bui-indicator-invisible": isMini || !lineData.hasActiveTab
+      className: clsx(`${prefixCls}-tabline`, {
+        "bui-tabline-invisible": isMini || !lineData.hasActiveTab
       }),
       style: {
-        transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
+        transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
         transform: `translate3d(${lineData.x}px, 0px, 0px)`
       }
     }
@@ -216,6 +213,10 @@ 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,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/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-primary);
+  color: var(--bui-color-red);
   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);
-  --location-position: var(--bui-tooltip-location-position, 8PX);
+  --localtion-position: var(--bui-tooltip-localtion-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(--location-position);
+  left: var(--localtion-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-right {
-  right: var(--location-position);
+  right: var(--localtion-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-top {
-  top: var(--location-position);
+  top: var(--localtion-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-bottom {
-  bottom: var(--location-position);
+  bottom: var(--localtion-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.5-beta.2",
+  "version": "1.4.5",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -30,13 +30,13 @@
     "glob": "11.0.0"
   },
   "dependencies": {
-    "clsx": "^2.1.1",
+    "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.4.5-beta.2",
-    "@bifrostui/styles": "1.4.5-beta.2",
-    "@bifrostui/types": "1.4.5-beta.2",
-    "@bifrostui/utils": "1.4.5-beta.2"
+    "@bifrostui/utils": "1.4.5",
+    "@bifrostui/icons": "1.4.5",
+    "@bifrostui/styles": "1.4.5",
+    "@bifrostui/types": "1.4.5"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",