@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Steps/Steps.css

@@ -1,19 +1,23 @@
+: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 {
-  --font-size: var(--bui-steps-font-size, var(--bui-title-size-3));
-  --subtitle-font-size: var(--bui-step-subtitle-font-size, var(--bui-text-size-2));
-  --step-line-padding: var(--bui-step-line-padding, 20px 0 3px 0);
-  --step-line-width: var(--bui-step-line-width, 1px);
-  --step-line-height: var(--bui-step-line-height, 100%);
-  --step-label-horizontal-line-height: var(--bui-step-label-horizontal-line-height, 1.8);
-  --step-icon-width: var(--bui-step-icon-width, 28px);
-  --step-icon-active-width: var(--bui-step-icon-active-width, 12px);
-  --step-icon-active-height: var(--bui-step-icon-active-height, 12px);
-  --step-icon-font-size: var(--bui-step-icon-font-size, var(--bui-title-size-4));
-  --step-icon-margin: var(--bui-step-icon-margin, var(--bui-spacing-xs) var(--bui-spacing-xs) 0 0);
-  --step-content-padding: var(--bui-step-content-padding, 3px 0);
-  --step-horizontal-line-padding: var(--bui-step-horizontal-line-padding, 28px 0 6px);
   display: flex;
-  font-size: var(--font-size);
+  font-size: var(--bui-steps-font-size);
   font-family: var(--bui-font-family);
 }
 .bui-steps-vertical {

package/es/Steps/Steps.js

@@ -29,70 +29,67 @@ var __objRest = (source, exclude) => {
 import { toArray } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { cloneElement, forwardRef } from "react";
-import "./Steps.css";
 import { StepsContextProvider } from "./StepsContext";
+import "./Steps.css";
 const prefixCls = "bui-steps";
-const Steps = forwardRef((props, ref) => {
-  const _a = props, {
-    className,
-    children,
-    direction,
-    current,
-    labelPlacement,
-    onChange
-  } = _a, others = __objRest(_a, [
-    "className",
-    "children",
-    "direction",
-    "current",
-    "labelPlacement",
-    "onChange"
-  ]);
-  const renderStep = () => {
-    return toArray(children).map((child, index) => {
-      const childProps = __spreadValues({
-        key: index
-      }, child.props);
-      if (!child.props.status) {
-        if (index === current) {
-          childProps.status = "active";
-        } else if (index < current) {
-          childProps.status = "finish";
-        } else {
-          childProps.status = "wait";
+const Steps = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      direction = "vertical",
+      current = 0,
+      labelPlacement = "horizontal",
+      onChange
+    } = _b, others = __objRest(_b, [
+      "className",
+      "children",
+      "direction",
+      "current",
+      "labelPlacement",
+      "onChange"
+    ]);
+    const renderStep = () => {
+      return toArray(children).map((child, index) => {
+        const childProps = __spreadValues({
+          key: index
+        }, child.props);
+        if (!child.props.status) {
+          if (index === current) {
+            childProps.status = "active";
+          } else if (index < current) {
+            childProps.status = "finish";
+          } else {
+            childProps.status = "wait";
+          }
         }
-      }
-      return cloneElement(child, childProps);
-    });
-  };
-  return /* @__PURE__ */ React.createElement(
-    StepsContextProvider,
-    {
-      value: {
-        direction,
-        current,
-        labelPlacement,
-        onChange
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      __spreadValues({
-        className: clsx(prefixCls, className, {
-          [`${prefixCls}-${direction}`]: direction
-        }),
-        ref
-      }, others),
-      renderStep()
-    )
-  );
-});
+        return cloneElement(child, childProps);
+      });
+    };
+    return /* @__PURE__ */ React.createElement(
+      StepsContextProvider,
+      {
+        value: {
+          direction,
+          current,
+          labelPlacement,
+          onChange
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        __spreadValues({
+          className: clsx(prefixCls, className, {
+            [`${prefixCls}-${direction}`]: direction
+          }),
+          ref
+        }, others),
+        renderStep()
+      )
+    );
+  }
+);
 Steps.displayName = "Steps";
-Steps.defaultProps = {
-  current: 0,
-  direction: "vertical",
-  labelPlacement: "horizontal"
-};
 var Steps_default = Steps;
 export {
   Steps_default as default

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

@@ -37,7 +37,7 @@ import "swiper/css/autoplay";
 import "swiper/css/pagination";
 import "swiper/css/effect-fade";
 import { Swiper as SwiperReact } from "swiper/react";
-import "./Swiper.css";
+import "./index.css";
 const Swiper = forwardRef((props, ref) => {
   const _a = props, {
     autoplay = false,
@@ -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/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);
+}