@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Steps/index.css

@@ -0,0 +1,199 @@
+:root,
+page,
+xhs-page {
+  --bui-steps-font-size: var(--bui-title-size-3);
+  --bui-step-subtitle-font-size: var(--bui-text-size-2);
+  --bui-step-line-padding: 20px 0 3px 0;
+  --bui-step-line-width: 1px;
+  --bui-step-line-height: 100%;
+  --bui-step-label-horizontal-line-height: 1.8;
+  --bui-step-icon-width: 28px;
+  --bui-step-icon-active-width: 12px;
+  --bui-step-icon-active-height: 12px;
+  --bui-step-icon-font-size: var(--bui-title-size-4);
+  --bui-step-icon-margin: var(--bui-spacing-xs) var(--bui-spacing-xs) 0 0;
+  --bui-step-content-padding: 3px 0;
+  --bui-step-horizontal-line-padding: 28px 0 6px;
+}
+.bui-steps {
+  display: flex;
+  font-size: var(--bui-steps-font-size);
+  font-family: var(--bui-font-family);
+}
+.bui-steps-vertical {
+  flex-direction: column;
+}
+.bui-step {
+  display: flex;
+  position: relative;
+  line-height: var(--bui-line-height);
+  font-family: var(--bui-font-family);
+}
+.bui-step-label-horizontal {
+  line-height: var(--bui-step-label-horizontal-line-height);
+}
+.bui-step:last-child .bui-step-line::after {
+  display: none;
+}
+.bui-step-line {
+  position: absolute;
+  top: 0;
+  width: var(--bui-step-line-width);
+  height: var(--bui-step-line-height);
+  box-sizing: border-box;
+  left: 13px;
+  padding: var(--bui-step-line-padding);
+}
+.bui-step-line::after {
+  display: inline-block;
+  content: "";
+  width: var(--bui-step-line-width);
+  border-left-width: var(--bui-step-line-width);
+  border-left-style: dotted;
+  height: calc(100% + 11px);
+}
+.bui-step-line-active::after {
+  border-left-color: var(--bui-color-primary);
+}
+.bui-step-line-wait::after {
+  border-left-color: var(--bui-color-fg-disabled);
+}
+.bui-step-line-finish::after {
+  border-left-color: var(--bui-color-primary);
+}
+.bui-step-line-error::after {
+  border-left-color: var(--bui-color-primary);
+}
+.bui-step-icon {
+  flex-shrink: 0;
+  width: var(--bui-step-icon-width);
+  text-align: center;
+  margin: var(--bui-step-icon-margin);
+  font-size: var(--bui-step-icon-font-size);
+}
+.bui-step-icon-active {
+  width: var(--bui-step-icon-active-width);
+  height: var(--bui-step-icon-active-height);
+  position: relative;
+  background-color: var(--bui-color-primary);
+  border-radius: 50%;
+  margin-top: 2px;
+  display: inline-block;
+}
+.bui-step-content {
+  padding: var(--bui-step-content-padding);
+  box-sizing: border-box;
+  flex: 1 0 0;
+  overflow: hidden;
+}
+.bui-step-title-wrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.bui-step-title-wrapper-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.bui-step-title {
+  font-size: var(--bui-title-size-4);
+  font-weight: var(--bui-font-weight-medium);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bui-step-title-active {
+  color: var(--bui-color-primary);
+}
+.bui-step-title-wait {
+  color: var(--bui-color-fg-subtle);
+}
+.bui-step-title-finish {
+  color: var(--bui-color-primary);
+}
+.bui-step-title-error {
+  color: var(--bui-color-primary);
+}
+.bui-step-title-horizontal {
+  margin-right: 4px;
+  max-width: 64%;
+}
+.bui-step-title-vertical {
+  width: 100%;
+}
+.bui-step-subtitle {
+  font-size: var(--bui-step-subtitle-font-size);
+  color: var(--bui-color-fg-subtle);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bui-step-subtitle-horizontal {
+  flex: 1;
+}
+.bui-step-subtitle-vertical {
+  width: 100%;
+}
+.bui-step-desc {
+  font-size: var(--bui-text-size-3);
+  color: var(--bui-color-fg-subtle);
+  margin-right: var(--bui-spacing-lg);
+}
+.bui-step-horizontal {
+  flex: 1;
+  padding-left: var(--bui-spacing-sm);
+}
+.bui-step-horizontal:first-child {
+  padding-left: 0;
+}
+.bui-step-horizontal:last-child .bui-step-title-wrapper::after {
+  display: none;
+}
+.bui-step-horizontal .bui-step-line {
+  display: none;
+  padding: var(--bui-step-horizontal-line-padding);
+}
+.bui-step-horizontal .bui-step-icon {
+  margin-right: 0;
+}
+.bui-step-horizontal .bui-step-title-wrapper {
+  width: fit-content;
+  position: relative;
+}
+.bui-step-horizontal .bui-step-title-wrapper::after {
+  position: absolute;
+  width: 9999px;
+  height: 1px;
+  content: "";
+  left: 100%;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+.bui-step-horizontal .bui-step-title-wrapper-line-active::after {
+  background: var(--bui-color-fg-disabled);
+}
+.bui-step-horizontal .bui-step-title-wrapper-line-wait::after {
+  background: var(--bui-color-fg-disabled);
+}
+.bui-step-horizontal .bui-step-title-wrapper-line-finish::after {
+  background: var(--bui-color-primary);
+}
+.bui-step-horizontal .bui-step-title-wrapper-line-error::after {
+  background: var(--bui-color-primary);
+}
+.bui-step-horizontal .bui-step-title {
+  padding-right: var(--bui-spacing-sm);
+  margin-right: 0;
+  max-width: unset;
+}
+.bui-step-horizontal .bui-step-subtitle {
+  padding-right: var(--bui-spacing-sm);
+  margin-right: 0;
+}
+.bui-step-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}

package/dist/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/dist/Swiper/Swiper.js

@@ -67,7 +67,7 @@ var import_autoplay = require("swiper/css/autoplay");
 var import_pagination = require("swiper/css/pagination");
 var import_effect_fade = require("swiper/css/effect-fade");
 var import_react2 = require("swiper/react");
-var import_Swiper = require("./Swiper.css");
+var import_index = require("./index.css");
 const Swiper = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     autoplay = false,
@@ -121,19 +121,33 @@ const Swiper = (0, import_react.forwardRef)((props, ref) => {
   const swiperInstance = (0, import_react.useRef)();
   const isInit = (0, import_react.useRef)(true);
   (0, import_react.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]);
+  (0, import_react.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__ */ import_react.default.createElement(
     import_react2.Swiper,
     __spreadProps(__spreadValues({
       modules: [import_swiper.Pagination, import_swiper.Autoplay, import_swiper.EffectFade],
       loop: circular,
-      autoplay: autoplay ? { delay: interval, disableOnInteraction: false } : false,
+      autoplay: { delay: interval, disableOnInteraction: false },
       speed: duration,
       slidesPerView: displayMultipleItems,
       direction: vertical ? "vertical" : "horizontal",

package/dist/Swiper/index.css

@@ -0,0 +1,25 @@
+:root,
+page,
+xhs-page {
+  --bui-swiper-height: 150px;
+}
+.bui-swiper {
+  font-family: var(--bui-font-family);
+}
+.bui-swiper .swiper-container-wrapper {
+  height: var(--bui-swiper-height);
+}
+.bui-swiper .swiper-container {
+  height: 100%;
+}
+.bui-swiper .swiper-pagination {
+  font-size: 0;
+}
+.bui-swiper .swiper-pagination-bullet {
+  opacity: 1;
+  background: var(--indicator-color);
+}
+.bui-swiper .swiper-pagination-bullet-active {
+  opacity: 1;
+  background: var(--indicator-color-active);
+}

package/dist/Switch/Switch.js

@@ -62,85 +62,83 @@ module.exports = __toCommonJS(Switch_exports);
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Switch2 = require("./Switch.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-switch";
-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)
-  );
-});
+const Switch = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      checked = false,
+      defaultChecked = false,
+      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 ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
+    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(__spreadValues({
+          ref: inputRef,
+          type: "checkbox",
+          name,
+          checked: switchChecked,
+          disabled
+        }, ariaProps), 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/Switch/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,57 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  ariaLabelSwitchDemo: () => ariaLabelSwitchDemo,
+  basicSwitchDemo: () => basicSwitchDemo,
+  default: () => A11yDemos_default,
+  disabledSwitchDemo: () => disabledSwitchDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Switch = __toESM(require("../../Switch"));
+const basicSwitchDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Switch.default, null), "Switch"));
+};
+const disabledSwitchDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Switch.default, { disabled: true }), "Switch"));
+};
+const ariaLabelSwitchDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Switch.default, { inputProps: { "aria-label": "\u5F00\u5173" } }, "Switch"));
+};
+var A11yDemos_default = {
+  basicSwitchDemo,
+  disabledSwitchDemo,
+  ariaLabelSwitchDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelSwitchDemo,
+  basicSwitchDemo,
+  disabledSwitchDemo
+});