@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/es/SwipeAction/SwipeActionItem.js

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useContext } from "react";
+import clsx from "clsx";
+import BuiSwipeActionContext from "./SwipeActionContext";
+import "./SwipeActionItem.css";
+const prefixCls = "bui-swipe-action-item";
+const SwipeActionItem = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      children,
+      onClick,
+      color = "primary",
+      id = ""
+    } = _a, others = __objRest(_a, [
+      "className",
+      "children",
+      "onClick",
+      "color",
+      "id"
+    ]);
+    const { closeOnClickActionItem, close } = useContext(BuiSwipeActionContext);
+    const onClickHandle = (e) => {
+      e.stopPropagation();
+      if (closeOnClickActionItem) {
+        close == null ? void 0 : close();
+      }
+      onClick == null ? void 0 : onClick(e, {
+        color,
+        id,
+        text: children
+      });
+    };
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: clsx(prefixCls, className, {
+          [`${prefixCls}-${color}`]: color
+        }),
+        ref,
+        onClick: onClickHandle
+      }, others),
+      children
+    );
+  }
+);
+SwipeActionItem.displayName = "SwipeActionItem";
+var SwipeActionItem_default = SwipeActionItem;
+export {
+  SwipeActionItem_default as default
+};

package/es/SwipeAction/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum SideTypeEnum {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum DragPhaseEnum {
+    START = 1,
+    MOVE = 2,
+    END = 3
+}

package/es/SwipeAction/constants.js

@@ -0,0 +1,15 @@
+var SideTypeEnum = /* @__PURE__ */ ((SideTypeEnum2) => {
+  SideTypeEnum2["LEFT"] = "left";
+  SideTypeEnum2["RIGHT"] = "right";
+  return SideTypeEnum2;
+})(SideTypeEnum || {});
+var DragPhaseEnum = /* @__PURE__ */ ((DragPhaseEnum2) => {
+  DragPhaseEnum2[DragPhaseEnum2["START"] = 1] = "START";
+  DragPhaseEnum2[DragPhaseEnum2["MOVE"] = 2] = "MOVE";
+  DragPhaseEnum2[DragPhaseEnum2["END"] = 3] = "END";
+  return DragPhaseEnum2;
+})(DragPhaseEnum || {});
+export {
+  DragPhaseEnum,
+  SideTypeEnum
+};

package/es/SwipeAction/index.css

@@ -0,0 +1,110 @@
+:root,
+page,
+xhs-page {
+  --bui-swipe-action-container-padding: 10px;
+  --bui-swipe-action-container-color: var(--bui-color-black);
+}
+.bui-swipe-action {
+  background: var(--bui-color-bg-view);
+  font-family: var(--bui-font-family);
+  overflow: hidden;
+  touch-action: pan-x;
+}
+.bui-swipe-action-track {
+  position: relative;
+  transition: transform 200ms ease;
+}
+.bui-swipe-action-actions {
+  position: absolute;
+  top: 0;
+  display: flex;
+  width: auto;
+  white-space: nowrap;
+}
+.bui-swipe-action-actions-right {
+  left: 100%;
+  height: 100%;
+  cursor: pointer;
+  margin-left: 1px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+}
+.bui-swipe-action-actions-left {
+  margin-right: 1px;
+  right: 100%;
+  height: 100%;
+  cursor: pointer;
+  box-sizing: content-box;
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+.bui-swipe-action-button {
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  color: #fff;
+  box-sizing: content-box;
+  white-space: nowrap;
+}
+.bui-swipe-action-content-container {
+  overflow: hidden;
+  position: relative;
+  cursor: grab;
+  user-select: none;
+  padding: var(--bui-swipe-action-container-padding);
+  color: var(--bui-swipe-action-container-color);
+}
+.bui-swipe-action-content-container:active {
+  cursor: grabbing;
+}
+.bui-swipe-action-content-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.bui-swipe-action-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  height: 100%;
+}
+.bui-swipe-action-item {
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background: var(--background-button-color);
+  color: #fff;
+  box-sizing: content-box;
+  white-space: nowrap;
+  font-family: var(--bui-font-family);
+}
+.bui-swipe-action-item-primary {
+  background-color: var(--bui-color-primary);
+}
+.bui-swipe-action-item-vip {
+  background-color: var(--bui-color-vip);
+}
+.bui-swipe-action-item-success {
+  background-color: var(--bui-color-success);
+}
+.bui-swipe-action-item-info {
+  background-color: var(--bui-color-info);
+}
+.bui-swipe-action-item-warning {
+  background-color: var(--bui-color-warning);
+}
+.bui-swipe-action-item-danger {
+  background-color: var(--bui-color-danger);
+}

package/es/SwipeAction/index.d.ts

@@ -0,0 +1,5 @@
+export * from './SwipeAction.types';
+export { default } from './SwipeAction';
+export { default as SwipeAction } from './SwipeAction';
+export { default as SwipeActionItem } from './SwipeActionItem';
+export { SideTypeEnum, DragPhaseEnum } from './constants';

package/es/SwipeAction/index.js

@@ -0,0 +1,12 @@
+export * from "./SwipeAction.types";
+import { default as default2 } from "./SwipeAction";
+import { default as default3 } from "./SwipeAction";
+import { default as default4 } from "./SwipeActionItem";
+import { SideTypeEnum, DragPhaseEnum } from "./constants";
+export {
+  DragPhaseEnum,
+  SideTypeEnum,
+  default3 as SwipeAction,
+  default4 as SwipeActionItem,
+  default2 as default
+};

package/es/Swiper/Swiper.js

@@ -91,19 +91,33 @@ const Swiper = forwardRef((props, ref) => {
   const swiperInstance = useRef();
   const isInit = useRef(true);
   useEffect(() => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
     if (isInit.current) {
       isInit.current = false;
       return;
     }
-    (_b = (_a2 = swiperInstance == null ? void 0 : swiperInstance.current) == null ? void 0 : _a2.slideTo) == null ? void 0 : _b.call(_a2, current);
-  }, [current]);
+    if (circular) {
+      (_b = (_a2 = swiperInstance == null ? void 0 : swiperInstance.current) == null ? void 0 : _a2.slideToLoop) == null ? void 0 : _b.call(_a2, current);
+    } else {
+      (_d = (_c = swiperInstance == null ? void 0 : swiperInstance.current) == null ? void 0 : _c.slideTo) == null ? void 0 : _d.call(_c, current);
+    }
+  }, [current, circular]);
+  useEffect(() => {
+    var _a2, _b;
+    if (swiperInstance == null ? void 0 : swiperInstance.current) {
+      if (autoplay) {
+        (_a2 = swiperInstance == null ? void 0 : swiperInstance.current) == null ? void 0 : _a2.autoplay.start();
+      } else {
+        (_b = swiperInstance == null ? void 0 : swiperInstance.current) == null ? void 0 : _b.autoplay.stop();
+      }
+    }
+  }, [autoplay]);
   return /* @__PURE__ */ React.createElement(
     SwiperReact,
     __spreadProps(__spreadValues({
       modules: [Pagination, Autoplay, EffectFade],
       loop: circular,
-      autoplay: autoplay ? { delay: interval, disableOnInteraction: false } : false,
+      autoplay: { delay: interval, disableOnInteraction: false },
       speed: duration,
       slidesPerView: displayMultipleItems,
       direction: vertical ? "vertical" : "horizontal",

package/es/Switch/Switch.js

@@ -38,8 +38,8 @@ const Switch = forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
-      checked,
-      defaultChecked,
+      checked = false,
+      defaultChecked = false,
       inputProps,
       inputRef,
       name,
@@ -63,6 +63,7 @@ const Switch = forwardRef(
       "color",
       "onChange"
     ]);
+    const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
     const [switchChecked, triggerChange] = useValue({
       value: checked,
       defaultValue: !!defaultChecked
@@ -94,13 +95,13 @@ const Switch = forwardRef(
       }, others),
       /* @__PURE__ */ React.createElement(
         "input",
-        __spreadProps(__spreadValues({
+        __spreadProps(__spreadValues(__spreadValues({
           ref: inputRef,
           type: "checkbox",
           name,
           checked: switchChecked,
           disabled
-        }, inputProps), {
+        }, ariaProps), inputProps), {
           onChange: handleChange,
           className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
         })

package/es/Switch/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * 自定义 Switch 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicSwitchDemo: () => React.JSX.Element;
+export declare const disabledSwitchDemo: () => React.JSX.Element;
+export declare const ariaLabelSwitchDemo: () => React.JSX.Element;
+declare const _default: {
+    basicSwitchDemo: () => React.JSX.Element;
+    disabledSwitchDemo: () => React.JSX.Element;
+    ariaLabelSwitchDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/Switch/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Switch from "../../Switch";
+const basicSwitchDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Switch, null), "Switch"));
+};
+const disabledSwitchDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Switch, { disabled: true }), "Switch"));
+};
+const ariaLabelSwitchDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Switch, { inputProps: { "aria-label": "\u5F00\u5173" } }, "Switch"));
+};
+var A11yDemos_default = {
+  basicSwitchDemo,
+  disabledSwitchDemo,
+  ariaLabelSwitchDemo
+};
+export {
+  ariaLabelSwitchDemo,
+  basicSwitchDemo,
+  A11yDemos_default as default,
+  disabledSwitchDemo
+};

package/es/Tabs/Tab.js

@@ -29,9 +29,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { isMini } from "@bifrostui/utils";
-import clsx from "clsx";
 import React from "react";
+import clsx from "clsx";
+import { isMini } from "@bifrostui/utils";
 import TabsContext from "./TabsContext";
 import "./Tab.css";
 const prefixCls = "bui-tab";
@@ -41,44 +41,59 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
     children,
     index,
     disabled = false,
-    onClick
+    onClick,
+    role = "tab",
+    tabIndex,
+    "aria-selected": ariaSelected,
+    "aria-disabled": ariaDisabled
   } = _a, others = __objRest(_a, [
     "className",
     "children",
     "index",
     "disabled",
-    "onClick"
+    "onClick",
+    "role",
+    "tabIndex",
+    "aria-selected",
+    "aria-disabled"
   ]);
   const tabsContext = React.useContext(TabsContext);
   const { value, triggerChange } = tabsContext;
+  const isActive = index === value;
+  const rootCls = clsx(
+    prefixCls,
+    {
+      [`${prefixCls}-active`]: !isMini && isActive,
+      [`${prefixCls}-miniapp-active`]: isMini && isActive,
+      [`${prefixCls}-disabled`]: disabled
+    },
+    className
+  );
+  const handleClick = (e) => {
+    if (disabled)
+      return;
+    e.preventDefault();
+    triggerChange(e, { index });
+    onClick == null ? void 0 : onClick(e, { index });
+  };
   return /* @__PURE__ */ React.createElement(
     "div",
     __spreadProps(__spreadValues({
+      role,
+      "aria-selected": ariaSelected != null ? ariaSelected : isActive,
+      "aria-disabled": ariaDisabled != null ? ariaDisabled : disabled,
+      tabIndex: tabIndex != null ? tabIndex : disabled ? -1 : 0,
       ref,
-      className: clsx(
-        prefixCls,
-        {
-          [`${prefixCls}-active`]: !isMini && index === value,
-          [`${prefixCls}-miniapp-active`]: isMini && index === value,
-          [`${prefixCls}-disabled`]: disabled
-        },
-        className
-      )
+      className: rootCls
     }, others), {
-      onClick: (e) => {
-        if (disabled)
-          return;
-        e.preventDefault();
-        triggerChange(e, { index });
-        onClick == null ? void 0 : onClick(e, { index });
-      }
+      onClick: handleClick
     }),
     children,
     isMini && /* @__PURE__ */ React.createElement(
       "div",
       {
         className: clsx(`${prefixCls}-miniapp-active-line`, {
-          "bui-indicator-invisible": index !== value
+          "bui-indicator-invisible": !isActive
         })
       }
     )

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

@@ -1,5 +1,5 @@
-import { OverrideProps } from '@bifrostui/types';
 import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
 import { ITabItem, TabChangeEvent } from './Tabs.types';
 export type TabProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & Partial<Omit<ITabItem, 'title'>> & {

package/es/Tabs/TabPanel.d.ts

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

package/es/Tabs/TabPanel.js

@@ -26,8 +26,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import clsx from "clsx";
 import React, { forwardRef } from "react";
+import clsx from "clsx";
 import "./TabPanel.css";
 const prefixCls = "bui-tabpanel";
 const TabPanel = forwardRef((props, ref) => {
@@ -44,17 +44,21 @@ const TabPanel = forwardRef((props, ref) => {
     "index",
     "keepMounted"
   ]);
+  const isActive = value === index;
   const keepActiveDom = keepMounted ? children : null;
   return /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
+      role: "tabpanel",
+      "aria-hidden": !isActive,
+      tabIndex: 0,
       ref,
       className: clsx(prefixCls, className, {
-        [`${prefixCls}-active`]: value === index,
-        [`${prefixCls}-inactive`]: value !== index
+        [`${prefixCls}-active`]: isActive,
+        [`${prefixCls}-inactive`]: !isActive
       })
     }, others),
-    value === index ? children : keepActiveDom
+    isActive ? children : keepActiveDom
   );
 });
 TabPanel.displayName = "BuiTabPanel";

package/es/Tabs/Tabs.css

@@ -3,7 +3,7 @@ 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-bg: var(--bui-color-primary);
   --bui-tabs-indicator-height: 3PX;
   --bui-tabs-indicator-width: 24px;
   --bui-tabs-indicator-border-radius: 3px 3px 0 0;
@@ -42,7 +42,7 @@ xhs-page {
   bottom: var(--bui-tabs-indicator-bottom);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
-  background: var(--bui-tabs-indicator-background);
+  background: var(--bui-tabs-indicator-bg);
   border-radius: var(--bui-tabs-indicator-border-radius);
   box-shadow: var(--bui-tabs-indicator-box-shadow);
 }