@bifrostui/react 1.4.8-beta.0 → 2.0.0-alpha.0

package/es/TabBar/index.css

@@ -0,0 +1,59 @@
+:root,
+page,
+xhs-page {
+  --bui-tab-bar-width: 100%;
+  --bui-tab-bar-height: 50px;
+  --bui-tab-bar-padding: 6px 0;
+  --bui-tab-bar-color: var(--bui-color-fg-default);
+}
+.bui-tab-bar {
+  display: flex;
+  width: var(--bui-tab-bar-width);
+  height: var(--bui-tab-bar-height);
+  padding: var(--bui-tab-bar-padding);
+  background: var(--bui-color-bg-view);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-bar-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  flex: 1;
+  color: var(--bui-tab-bar-color);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-bar-item-primary {
+  color: var(--bui-color-primary);
+}
+.bui-tab-bar-item-success {
+  color: var(--bui-color-success);
+}
+.bui-tab-bar-item-info {
+  color: var(--bui-color-info);
+}
+.bui-tab-bar-item-warning {
+  color: var(--bui-color-warning);
+}
+.bui-tab-bar-item-danger {
+  color: var(--bui-color-danger);
+}
+.bui-tab-bar-item-light {
+  color: var(--bui-color-fg-default);
+}
+.bui-tab-bar-item-dark {
+  color: var(--bui-color-bg-view);
+}
+.bui-tab-bar-item-vip {
+  color: var(--bui-color-vip);
+}
+.bui-tab-bar-item .bui-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.bui-tab-bar-item .bui-badge-position .bui-badge-contained,
+.bui-tab-bar-item .bui-badge-position .bui-badge-outlined {
+  top: 0;
+}

package/es/TabBar/index.types.d.ts

@@ -10,14 +10,14 @@ export type TabBarProps<D extends React.ElementType = 'div', P = {}> = OverrideP
         current?: number;
         /**
          * 默认文案颜色
-         * @default 'default'
+         * @default 'neutral'
          */
-        color?: ThemeColor | 'default' | 'vip';
+        color?: ThemeColor | 'vip';
         /**
          * 选中文案颜色
          * @default 'primary'
          */
-        activeColor?: ThemeColor | 'default' | 'vip';
+        activeColor?: ThemeColor | 'vip';
         /**
          * 变化时回调函数
          */

package/es/Tabs/Tab.css

@@ -4,31 +4,25 @@
   justify-content: center;
   white-space: nowrap;
   width: min-content;
-  height: var(--tab-height);
+  height: var(--bui-tab-height);
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  font-size: var(--font-size);
+  font-size: var(--bui-tab-font-size);
   line-height: var(--bui-line-height);
-  color: var(--color);
-  padding: var(--tab-padding);
+  color: var(--bui-tab-color);
+  padding: var(--bui-tab-padding);
   font-family: var(--bui-font-family);
 }
 .bui-tab-active {
-  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;
+  color: var(--bui-tab-active-color);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-tab-active-font-family);
 }
 .bui-tab-miniapp-active {
-  font-size: var(--font-size);
+  color: var(--bui-tab-active-color);
   line-height: 1.5;
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--active-color);
+  font-weight: var(--bui-font-weight-bold);
   position: relative;
 }
 .bui-tab-miniapp-active-line {
@@ -46,7 +40,7 @@
   opacity: 0.5;
   pointer-events: none;
 }
-.bui-tabline-invisible {
+.bui-indicator-invisible {
   visibility: hidden;
   background-color: transparent;
 }

package/es/Tabs/Tab.js

@@ -50,14 +50,13 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "onClick"
   ]);
   const tabsContext = React.useContext(TabsContext);
-  const { value, align, triggerChange } = tabsContext;
+  const { value, triggerChange } = tabsContext;
   return /* @__PURE__ */ React.createElement(
     "div",
     __spreadProps(__spreadValues({
       ref,
       className: clsx(
         prefixCls,
-        align !== "start" && `${prefixCls}-${align}`,
         {
           [`${prefixCls}-active`]: !isMini && index === value,
           [`${prefixCls}-miniapp-active`]: isMini && index === value,
@@ -79,7 +78,7 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
       "div",
       {
         className: clsx(`${prefixCls}-miniapp-active-line`, {
-          "bui-tabline-invisible": index !== value
+          "bui-indicator-invisible": index !== value
         })
       }
     )

package/es/Tabs/Tabs.css

@@ -1,20 +1,30 @@
+:root,
+page,
+xhs-page {
+  --bui-tabs-height: 39px;
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-background: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3PX;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tabs-mask-width: 12px;
+  --bui-tabs-mask-height: 100%;
+  --bui-tab-font-size: var(--bui-text-size-1);
+  --bui-tab-color: var(--bui-color-fg-subtle);
+  --bui-tab-height: 100%;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --bui-tab-active-color: var(--bui-color-fg-default);
+  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
+}
 .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-font-family);
+  font-weight: var(--bui-tabs-font-weight);
 }
 .bui-tabs-tabs {
-  height: var(--height);
+  height: var(--bui-tabs-height);
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -26,14 +36,15 @@
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
-.bui-tabs-tabline {
+.bui-tabs-indicator {
   position: absolute;
-  width: var(--line-width);
-  bottom: 0;
-  height: var(--line-height);
+  width: var(--bui-tabs-indicator-width);
+  bottom: var(--bui-tabs-indicator-bottom);
+  height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
-  background: var(--line-color);
-  border-radius: var(--bui-shape-radius-label);
+  background: var(--bui-tabs-indicator-background);
+  border-radius: var(--bui-tabs-indicator-border-radius);
+  box-shadow: var(--bui-tabs-indicator-box-shadow);
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -43,8 +54,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 {
@@ -63,7 +74,7 @@
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-tabline-invisible {
+.bui-indicator-invisible {
   visibility: hidden;
   background-color: transparent;
 }

package/es/Tabs/Tabs.js

@@ -26,45 +26,34 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import {
-  debounce,
-  isMini,
-  throttle,
-  useDidMountEffect
-} from "@bifrostui/utils";
+import { debounce, isMini, throttle, useEventCallback } from "@bifrostui/utils";
 import clsx from "clsx";
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import Tab from "./Tab";
 import { TabsContextProvider } from "./TabsContext";
-import scrollLeftTo from "./utils/scroll";
+import bound from "./utils/bound";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
-const duration = 300;
 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 [active, setActive] = useState("");
+  const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
   const tabsRef = useRef(null);
   const activeLineRef = useRef(null);
-  const [lineData, setLineData] = useState({
+  const [indicatorData, setIndicatorData] = useState({
     x: 0,
-    transitionInUse: false,
     hasActiveTab: false
   });
   const [maskData, setMaskData] = useState({
     leftMaskOpacity: 0,
     rightMaskOpacity: 0
   });
-  const getActiveTabElement = () => {
+  const animate = useEventCallback(() => {
     const container = tabsRef.current;
     if (!container)
-      return void 0;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
+      return;
+    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === value);
+    const activeLine = activeLineRef.current;
+    if (!activeLine)
+      return;
     let activeTab;
     if (tabs.length) {
       activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
@@ -78,25 +67,6 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
         return [...child.classList].includes("bui-tab-active");
       });
     }
-    return activeTab;
-  };
-  const scrollIntoView = () => {
-    const tabsContainer = tabsRef.current;
-    const activeTab = getActiveTabElement();
-    if (!tabsContainer || !activeTab) {
-      return;
-    }
-    const to = activeTab.offsetLeft - (tabsContainer.offsetWidth - activeTab.offsetWidth) / 2;
-    scrollLeftTo(tabsContainer, to, duration);
-  };
-  const animate = ({ transitionInUse }) => {
-    const container = tabsRef.current;
-    if (!container)
-      return;
-    const activeLine = activeLineRef.current;
-    if (!activeLine)
-      return;
-    const activeTab = getActiveTabElement();
     let activeTabLeft = 0;
     let activeTabWidth = 0;
     let containerWidth = 0;
@@ -111,37 +81,22 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       activeLineWidth = activeLine.offsetWidth;
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
-    setLineData({
+    setIndicatorData({
       x,
-      transitionInUse,
       hasActiveTab: !!activeTab
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0 || !activeTab)
       return;
-    if (!isMini) {
-      scrollIntoView();
+    const nextScrollLeft = bound(
+      activeTabLeft - (containerWidth - activeTabWidth) / 2,
+      0,
+      containerScrollWidth - containerWidth
+    );
+    if (tabsRef.current) {
+      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,10 +105,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
           return;
         const scrollLeft = container == null ? void 0 : container.scrollLeft;
         const showLeftMask = scrollLeft > 0;
-        const rightRange = Math.abs(
-          container.scrollWidth - (scrollLeft + container.offsetWidth)
-        );
-        const showRightMask = rightRange > 1;
+        const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
         setMaskData({
           leftMaskOpacity: showLeftMask ? 1 : 0,
           rightMaskOpacity: showRightMask ? 1 : 0
@@ -167,7 +119,20 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     ),
     []
   );
-  useLayoutEffect(() => {
+  useEffect(() => {
+    animate();
+  }, [value, tabs.length, React.Children.toArray(children).length]);
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      animate();
+      updateMask();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  useEffect(() => {
     updateMask();
   }, []);
   const handleClick = (e, item) => {
@@ -177,16 +142,13 @@ const Tabs = /* @__PURE__ */ React.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 = useMemo(() => {
-    return { value, align, triggerChange: handleClick };
-  }, [value, align, children, handleClick]);
+    return { value, triggerChange: handleClick };
+  }, [value, children, handleClick]);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -207,12 +169,12 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "div",
     {
       ref: activeLineRef,
-      className: clsx(`${prefixCls}-tabline`, {
-        "bui-tabline-invisible": isMini || !lineData.hasActiveTab
+      className: clsx(`${prefixCls}-indicator`, {
+        "bui-indicator-invisible": isMini || !indicatorData.hasActiveTab
       }),
       style: {
-        transition: lineData.transitionInUse ? `transform ${duration / 1e3}s ease` : void 0,
-        transform: `translate3d(${lineData.x}px, 0px, 0px)`
+        transition: "transform 0.3s ease-in-out",
+        transform: `translate(${indicatorData.x}px, 0px)`
       }
     }
   ), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {
@@ -228,10 +190,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';
@@ -32,10 +26,6 @@ export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverridePro
          * 切换面板的数据
          */
         tabs?: ITabItem[];
-        /**
-         * 对齐方式，默认为center
-         */
-        align?: ITabAlign;
         /**
          * 切换面板的回调
          */

package/es/Tabs/index.css

@@ -0,0 +1,135 @@
+:root,
+page,
+xhs-page {
+  --bui-tabs-height: 39px;
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-background: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3PX;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tabs-mask-width: 12px;
+  --bui-tabs-mask-height: 100%;
+  --bui-tab-font-size: var(--bui-text-size-1);
+  --bui-tab-color: var(--bui-color-fg-subtle);
+  --bui-tab-height: 100%;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --bui-tab-active-color: var(--bui-color-fg-default);
+  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
+}
+.bui-tabs {
+  position: relative;
+  font-family: var(--bui-font-family);
+  font-weight: var(--bui-tabs-font-weight);
+}
+.bui-tabs-tabs {
+  height: var(--bui-tabs-height);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.bui-tabs-tabs::-webkit-scrollbar {
+  display: none;
+}
+.bui-tabs-indicator {
+  position: absolute;
+  width: var(--bui-tabs-indicator-width);
+  bottom: var(--bui-tabs-indicator-bottom);
+  height: var(--bui-tabs-indicator-height);
+  color: var(--bui-color-primary);
+  background: var(--bui-tabs-indicator-background);
+  border-radius: var(--bui-tabs-indicator-border-radius);
+  box-shadow: var(--bui-tabs-indicator-box-shadow);
+}
+.bui-tabs-content {
+  padding: var(--bui-spacing-lg);
+}
+.bui-tabs-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
+  pointer-events: none;
+}
+.bui-tabs-mask-left {
+  left: 0;
+  background:
+    linear-gradient(
+      to right,
+      var(--bui-color-bg-view),
+      rgba(255, 255, 255, 0));
+}
+.bui-tabs-mask-right {
+  right: 0;
+  background:
+    linear-gradient(
+      to left,
+      var(--bui-color-bg-view),
+      rgba(255, 255, 255, 0));
+}
+.bui-indicator-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}
+.bui-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  width: min-content;
+  height: var(--bui-tab-height);
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  font-size: var(--bui-tab-font-size);
+  line-height: var(--bui-line-height);
+  color: var(--bui-tab-color);
+  padding: var(--bui-tab-padding);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-active {
+  color: var(--bui-tab-active-color);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-tab-active-font-family);
+}
+.bui-tab-miniapp-active {
+  color: var(--bui-tab-active-color);
+  line-height: 1.5;
+  font-weight: var(--bui-font-weight-bold);
+  position: relative;
+}
+.bui-tab-miniapp-active-line {
+  position: absolute;
+  bottom: 0;
+  left: -12px;
+  right: -12px;
+  margin: 0 auto !important;
+  width: 18px;
+  height: 2px;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: var(--bui-color-primary);
+}
+.bui-tab-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.bui-indicator-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}
+.bui-tabpanel {
+  font-family: var(--bui-font-family);
+}
+.bui-tabpanel-active {
+  display: block;
+}
+.bui-tabpanel-inactive {
+  display: none;
+}

package/es/Tabs/utils/bound.d.ts

@@ -0,0 +1 @@
+export default function bound(position: number, min: number | undefined, max: number | undefined): number;

package/es/Tabs/utils/bound.js

@@ -0,0 +1,13 @@
+function bound(position, min, max) {
+  let ret = position;
+  if (min !== void 0) {
+    ret = Math.max(position, min);
+  }
+  if (max !== void 0) {
+    ret = Math.min(ret, max);
+  }
+  return ret;
+}
+export {
+  bound as default
+};