@bifrostui/react 1.3.1-beta.1 → 1.3.3

package/es/Picker/PickerPanel.js

@@ -33,31 +33,25 @@ import "./PickerPanel.css";
 const prefixCls = "bui-picker-panel";
 const PickerPanel = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
-    var _b;
     const _a = props, {
       options = [],
       defaultValue,
       onSelect,
-      columnIndex,
-      pickerStyle
+      columnIndex
     } = _a, others = __objRest(_a, [
       "options",
       "defaultValue",
       "onSelect",
-      "columnIndex",
-      "pickerStyle"
+      "columnIndex"
     ]);
     const touch = useTouch();
     let timer;
     const INERTIA_TIME = 200;
     const INERTIA_DISTANCE = 15;
     const DEFAULT_DURATION = 200;
+    const LINE_SPACING = 36;
     const ROTATION = 20;
     const TOUCH_END = "end";
-    const DEFAULT_LINE_SPACING = 36;
-    const LINE_SPACING_STR = (_b = ((pickerStyle == null ? void 0 : pickerStyle["--option-height"]) ? `${pickerStyle == null ? void 0 : pickerStyle["--option-height"]}` : `${DEFAULT_LINE_SPACING}`).match(/\d+/)) == null ? void 0 : _b[0];
-    const LINE_SPACING = parseInt(LINE_SPACING_STR, 10);
-    const INDICATOR_OFFSET = LINE_SPACING * 108 / DEFAULT_LINE_SPACING;
     const [startY, setStartY] = useState(0);
     const [currIndex, setCurrIndex] = useState(1);
     const [startTime, setStartTime] = useState(0);
@@ -173,17 +167,17 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
       }, 0);
     };
     useEffect(() => {
-      var _a2, _b2, _c;
+      var _a2, _b, _c;
       (_a2 = PickerPanelRef.current) == null ? void 0 : _a2.addEventListener("touchstart", panelTouchStart);
-      (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.addEventListener("touchmove", panelTouchMove);
+      (_b = PickerPanelRef.current) == null ? void 0 : _b.addEventListener("touchmove", panelTouchMove);
       (_c = PickerPanelRef.current) == null ? void 0 : _c.addEventListener("touchend", panelTouchEnd);
       return () => {
-        var _a3, _b3, _c2;
+        var _a3, _b2, _c2;
         (_a3 = PickerPanelRef.current) == null ? void 0 : _a3.removeEventListener(
           "touchstart",
           panelTouchStart
         );
-        (_b3 = PickerPanelRef.current) == null ? void 0 : _b3.removeEventListener(
+        (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.removeEventListener(
           "touchmove",
           panelTouchMove
         );
@@ -229,7 +223,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {
-              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${INDICATOR_OFFSET}px)`
+              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, 104px)`
             }
           },
           item == null ? void 0 : item.label

package/es/Picker/utils.d.ts

@@ -11,19 +11,3 @@ export declare const formatCascade: (columns: ICascadePickerOptionItem[], values
  * 统一options数据格式
  */
 export declare const formatOptions: (internalValue: any, options?: any[]) => any[];
-/**
- * 在格式化后的数据源中是否存在等长子项的value
- */
-export declare const existSameLengthValue: (value: any, formatted: any) => any;
-/**
- * 关闭选择器时，纠正value和格式化数据
- * 取决于formatted后的options有几列，若value为格式化后数据源（formatted）的等长子集，则取value，否则执行纠正逻辑
- */
-export declare const safeData: ({ value, formatted, options }: {
-    value: any;
-    formatted: any;
-    options: any;
-}) => {
-    safeValue: any[];
-    safeFormatted: any[];
-};

package/es/Picker/utils.js

@@ -39,36 +39,8 @@ const formatOptions = (internalValue, options = []) => {
       return options;
   }
 };
-const existSameLengthValue = (value, formatted) => {
-  const result = formatted.every(
-    (item, idx) => item.some((i) => (value == null ? void 0 : value[idx]) === (i == null ? void 0 : i.value))
-  );
-  return result;
-};
-const safeData = ({ value, formatted, options }) => {
-  let safeValue = [];
-  let safeFormatted = [];
-  const existValidChildren = existSameLengthValue(value, formatted);
-  if (existValidChildren) {
-    safeValue = value;
-    safeFormatted = formatted;
-  } else {
-    formatted.forEach((item, index) => {
-      var _a, _b;
-      const childIndex = item.findIndex((i) => i.value === value[index]);
-      safeValue[index] = ((_a = item == null ? void 0 : item[childIndex]) == null ? void 0 : _a.value) || ((_b = item == null ? void 0 : item[0]) == null ? void 0 : _b.value);
-    });
-    safeFormatted = formatOptions(safeValue, options);
-  }
-  return {
-    safeValue,
-    safeFormatted
-  };
-};
 export {
-  existSameLengthValue,
   formatCascade,
   formatOptions,
-  pickerPanelType,
-  safeData
+  pickerPanelType
 };

package/es/Portal/Portal.types.d.ts

@@ -18,9 +18,5 @@ export interface PortalCoreProps {
      * 页面跟节点
      */
     rootElement?: Element;
-    /**
-     * 挂载成功的回调方法
-     */
-    onRootElementMouted?: (e: Element) => void;
 }
 export type PortalProps = Omit<PortalCoreProps, 'rootElement'>;

package/es/Portal/PortalCore.js

@@ -6,13 +6,7 @@ function getContainer(container) {
 }
 const PortalCore = /* @__PURE__ */ React.forwardRef(
   function Portal(props, ref) {
-    const {
-      children,
-      container,
-      disablePortal = false,
-      rootElement,
-      onRootElementMouted
-    } = props;
+    const { children, container, disablePortal = false, rootElement } = props;
     const [mountNode, setMountNode] = React.useState(null);
     const handleRef = useForkRef(
       // @ts-expect-error will upstream fix
@@ -27,7 +21,6 @@ const PortalCore = /* @__PURE__ */ React.forwardRef(
     useLayoutEffect(() => {
       if (mountNode && !disablePortal) {
         setRef(ref, mountNode);
-        onRootElementMouted == null ? void 0 : onRootElementMouted(mountNode);
         return () => {
           setRef(ref, null);
         };

package/es/Progress/Progress.css

@@ -1,24 +1,22 @@
 .bui-progress {
   --fill-color: var(--bui-color-primary);
-  --trail-color: var(--bui-progress-trail-color, rgba(156, 156, 165, 0.2));
-  --stroke-width: var(--bui-progress-stroke-width, 8px);
-  --width: var(--bui-progress-width, 100%);
-  --border-radius: var(--bui-progress-border-radius, 100px);
-  width: var(--width);
+  --trail-color: rgba(156, 156, 165, 0.2);
+  --stroke-width: 8px;
+  width: 100%;
   font-family: var(--bui-font-family);
 }
 .bui-progress-inner {
   position: relative;
   display: inline-block;
-  width: var(--width);
+  width: 100%;
   overflow: hidden;
   vertical-align: middle;
   background-color: var(--trail-color);
-  border-radius: var(--border-radius);
+  border-radius: 100px;
 }
 .bui-progress-bg {
   position: relative;
-  border-radius: var(--border-radius);
+  border-radius: 100px;
   background-color: var(--fill-color);
   height: var(--stroke-width);
 }

package/es/Radio/Radio.css

@@ -2,7 +2,6 @@
   --label-color: var(--bui-color-fg-default);
   --label-font-size: var(--bui-text-size-1);
   --icon-font-size: var(--bui-title-size-2);
-  --icon-padding: var(--bui-radio-icon-padding, 5px);
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -36,7 +35,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  padding: var(--icon-padding);
+  padding: 5px;
   box-sizing: border-box;
 }
 .bui-radio-label {

package/es/Rating/Rating.css

@@ -1,8 +1,4 @@
 .bui-rating {
-  --small-margin-right: var(--bui-rating-small-margin-right, 0.5px);
-  --medium-margin-right: var(--bui-rating-medium-margin-right, 1px);
-  --large-margin-right: var(--bui-rating-large-margin-right, 2px);
-  --large-font-size: var(--bui-rating-large-font-size, 22px);
   display: flex;
   flex-wrap: wrap;
   font-family: var(--bui-font-family);
@@ -23,15 +19,15 @@
 }
 .bui-rating-container-small {
   font-size: var(--bui-text-size-1);
-  margin-right: var(--small-margin-right);
+  margin-right: 0.5px;
 }
 .bui-rating-container-medium {
   font-size: var(--bui-title-size-3);
-  margin-right: var(--small-medium-right);
+  margin-right: 1px;
 }
 .bui-rating-container-large {
-  font-size: var(--large-font-size);
-  margin-right: var(--large-margin-right);
+  font-size: 22px;
+  margin-right: 2px;
 }
 .bui-rating-item {
   display: flex;

package/es/Select/Select.css

@@ -1,19 +1,9 @@
 .bui-select {
-  --height: var(--bui-select-height, 27px);
-  --mini-width: var(--bui-select-min-width, 100px);
-  --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
-  --padding: var(--bui-select-selector-container, 0 14px);
-  --option-container-padding: var(--bui-select-option-container-padding, 3px 0);
-  --option-margin-top: var(--bui-select-option-margin-top, 6px);
-  --option-padding: var(--bui-select-option-padding, 0 14px);
-  --option-margin: var(--bui-select-option-margin, 0 3px);
-  --option-height: var(--bui-select-option-height, 27px);
-  --option-active-font-weight: var(--bui-select-option-active-font-weight, 500);
   position: relative;
   cursor: pointer;
-  height: var(--height);
-  min-width: var(--mini-width);
-  font-size: var(--font-size);
+  height: 27px;
+  min-width: 100px;
+  font-size: var(--bui-title-size-3);
   border-radius: 5px;
   background-color: var(--bui-color-bg-view);
   font-family: var(--bui-font-family);
@@ -25,7 +15,7 @@
 .bui-select-selector-container {
   display: flex;
   align-items: center;
-  padding: var(--padding);
+  padding: 0 14px;
   height: 100%;
 }
 .bui-select-input {
@@ -42,7 +32,7 @@
   justify-content: space-between;
   align-items: center;
   flex: 1;
-  height: var(--bui-select-height);
+  height: 27px;
   background-color: transparent;
   outline: none;
   border: 0;
@@ -57,25 +47,24 @@
   left: 0;
   width: 100%;
   z-index: var(--bui-z-index-dropdown);
-  margin-top: var(--option-container-margin-top);
-  border-radius: 3px;
+  margin-top: 6px;
   background-color: var(--bui-color-bg-view);
   padding: 2px;
   overflow: hidden;
 }
 .bui-select-option-main {
   border-radius: 3px;
-  padding: var(--option-container-padding);
+  padding: 3px 0;
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
   overflow: hidden;
 }
 .bui-select-option {
   display: flex;
   align-items: center;
-  height: var(--option-height);
-  padding: var(--option-padding);
+  height: 27px;
+  padding: 0 14px;
   border-radius: 5px;
-  margin: var(--option-margin);
+  margin: 0 3px;
 }
 .bui-select-option:hover {
   background-color: var(---bui-select-options-active-bg, #fff2f0);

package/es/Select/Select.js

@@ -112,7 +112,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
   };
   const selectContext = useMemo(
     () => ({ selectValue, setRenderValue, handleOptionClick }),
-    [selectValue, onChange, setRenderValue]
+    [selectValue]
   );
   useEffect(() => {
     if (open !== void 0)

package/es/Select/SelectOption.js

@@ -42,9 +42,6 @@ const SelectOption = /* @__PURE__ */ React.forwardRef(
       if (value === selectValue) {
         setRenderValue(label);
       }
-      return () => {
-        setRenderValue("");
-      };
     }, [selectValue, label, value]);
     return /* @__PURE__ */ React.createElement(
       "div",

package/es/Skeleton/Skeleton.css

@@ -1,6 +1,5 @@
 .bui-skeleton {
   --border-radius: var(--bui-shape-radius-label);
-  --height: var(--bui-skeleton-height, 1.2em);
   display: block;
 }
 .bui-skeleton-animation-wave {
@@ -27,10 +26,10 @@
   content: "\a0";
 }
 .bui-skeleton-rectangular {
-  height: var(--height);
+  height: 1.2em;
 }
 .bui-skeleton-rounded {
-  height: var(--height);
+  height: 1.2em;
   border-radius: var(--border-radius);
 }
 .bui-skeleton-circular {

package/es/Slider/Slider.css

@@ -4,21 +4,10 @@
   --tooltip-font-size: var(--bui-text-size-3);
   --tooltip-color: var(--bui-color-white);
   --tooltip-bg-color: var(--line-color);
-  --width: var(--bui-slider-width, 100%);
-  --height: var(--bui-slider-height, 2px);
-  --padding: var(--bui-slider-padding, 19px 0);
-  --button-width: var(--bui-slider-button-width, 26px);
-  --button-height: var(--bui-slider-button-height, 26px);
-  --button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
-  --button-border-radius: var(--bui--slider-button-border-radius, 50%);
-  --tooltip-width: var(--bui-slider-tooltip-width, 46px);
-  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
-  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
-  --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
   position: relative;
-  width: var(--width);
-  height: var(--height);
-  padding: var(--padding);
+  width: 100%;
+  height: 2px;
+  padding: 19px 0;
   box-sizing: border-box;
   font-family: var(--bui-font-family);
 }
@@ -30,7 +19,7 @@
   position: absolute;
   top: 50%;
   left: 0;
-  height: var(--height);
+  height: 2px;
   transform: translateY(-50%);
   background-color: var(--line-color);
 }
@@ -39,7 +28,7 @@
   top: 50%;
   left: 0;
   width: 100%;
-  height: var(---height);
+  height: 2px;
   transform: translateY(-50%);
   background-color: var(--line-bg-color);
 }
@@ -48,11 +37,11 @@
   position: absolute;
   justify-content: center;
   align-items: center;
-  width: var(--button-width);
-  height: var(--button-height);
-  background-color: var(--bui-color-white);
+  width: 26px;
+  height: 26px;
+  background-color: #fff;
   box-shadow: #ddd 0 0 10px;
-  border-radius: var(--button-border-radius);
+  border-radius: 50%;
   transform: translate(-50%, -50%);
   font-size: var(--bui-title-size-3);
   cursor: grab;
@@ -78,11 +67,11 @@
 .bui-slider-tooltip {
   position: absolute;
   top: -14px;
-  width: var(--tooltip-width);
-  height: var(--tooltip-height);
-  line-height: var(--tooltip-line-height);
+  width: 46px;
+  height: 24px;
+  line-height: 24px;
   font-size: var(--tooltip-font-size);
-  border-radius: var(--tooltip-border-radius);
+  border-radius: 24px;
   color: var(--tooltip-color);
   text-align: center;
   background-color: var(--tooltip-bg-color);

package/es/Steps/Step.css

@@ -5,7 +5,7 @@
   font-family: var(--bui-font-family);
 }
 .bui-step-label-horizontal {
-  line-height: var(--step-label-horizontal-line-height);
+  line-height: 1.8;
 }
 .bui-step:last-child .bui-step-line::after {
   display: none;
@@ -13,8 +13,8 @@
 .bui-step-line {
   position: absolute;
   top: 0;
-  width: var(--step-line-width);
-  height: var(--step-line-height);
+  width: 1px;
+  height: 100%;
   box-sizing: border-box;
   left: 13px;
   padding: var(--step-line-padding);
@@ -22,8 +22,8 @@
 .bui-step-line::after {
   display: inline-block;
   content: "";
-  width: var(--step-line-width);
-  border-left-width: var(--step-line-width);
+  width: 1px;
+  border-left-width: 1px;
   border-left-style: dotted;
   height: calc(100% + 11px);
 }
@@ -41,14 +41,14 @@
 }
 .bui-step-icon {
   flex-shrink: 0;
-  width: var(--step-icon-width);
+  width: 28px;
   text-align: center;
   margin: var(--step-icon-margin);
-  font-size: var(--step-icon-font-size);
+  font-size: var(--bui-title-size-4);
 }
 .bui-step-icon-active {
-  width: var(--step-icon-active-width);
-  height: var(--step-icon-active-height);
+  width: 12px;
+  height: 12px;
   position: relative;
   background-color: var(--bui-color-primary);
   border-radius: 50%;
@@ -56,7 +56,7 @@
   display: inline-block;
 }
 .bui-step-content {
-  padding: var(--step-content-padding);
+  padding: 3px 0;
   box-sizing: border-box;
   flex: 1 0 0;
   overflow: hidden;
@@ -128,7 +128,7 @@
 }
 .bui-step-horizontal .bui-step-line {
   display: none;
-  padding: var(--step-horizontal-line-padding);
+  padding: 28px 0 6px;
 }
 .bui-step-horizontal .bui-step-icon {
   margin-right: 0;

package/es/Steps/Steps.css

@@ -1,21 +1,12 @@
 .bui-steps {
-  --font-size: var(--bui-steps-font-size, var(--bui-title-size-3));
   --title-font-size: var(--bui-title-size-4);
   --title-font-weight: var(--bui-font-weight-medium);
-  --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);
+  --subtitle-font-size: var(--bui-text-size-2);
+  --description-font-size: var(--bui-text-size-3);
+  --step-icon-margin: var(--bui-spacing-xs) var(--bui-spacing-xs) 0 0;
+  --step-line-padding: 20px 0 3px 0;
   display: flex;
-  font-size: var(--font-size);
+  font-size: var(--bui-title-size-3);
   font-family: var(--bui-font-family);
 }
 .bui-steps-vertical {

package/es/Swiper/Swiper.css

@@ -1,9 +1,8 @@
 .bui-swiper {
-  --height: var(--bui-swiper-height, 150px);
   font-family: var(--bui-font-family);
 }
 .bui-swiper .swiper-container-wrapper {
-  height: var(--height);
+  height: 150px;
 }
 .bui-swiper .swiper-container {
   height: 100%;

package/es/Switch/Switch.css

@@ -1,26 +1,11 @@
 .bui-switch {
-  --bg-color: var(--bui-switch-bg-color, #ccc);
-  --padding: var(--bui-switch-padding, 0);
-  --border-radius: var(--bui-switch-border-radius, 15px);
-  --small-width: var(--bui-switch-small-width, 24px);
-  --small-height: var(--bui-switch-small-height, 16px);
-  --small-font-size: var(--bui-switch-small-font-size, 9px);
-  --controller-small-width: var(--bui-switch-controller-small-width, 12px);
-  --controller-small-height: var(--bui-switch-controller-small-height, 12px);
-  --medium-width: var(--bui-switch-medium-width, 44px);
-  --medium-height: var(--bui-switch-medium-height, 22px);
-  --controller-medium-width: var(--bui-switch-controller-medium-width, 18px);
-  --controller-medium-height: var(--bui-switch-controller-medium-height, 18px);
-  --large-width: var(--bui-switch-large-width, 51px);
-  --large-height: var(--bui-switch-large-height, 30px);
-  --controller-large-width: var(--bui-switch-controller-large-width, 24px);
-  --controller-large-height: var(--bui-switch-controller-large-height, 24px);
+  --bg-color: #ccc;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  padding: var(--padding);
+  padding: 0;
   vertical-align: middle;
-  border-radius: var(--border-radius);
+  border-radius: 15px;
   background-color: var(--bg-color);
   transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
   font-family: var(--bui-font-family);
@@ -42,16 +27,16 @@
   outline: none;
 }
 .bui-switch-small {
-  width: var(--small-width);
-  height: var(--small-height);
+  width: 24px;
+  height: 16px;
 }
 .bui-switch-small .bui-switch-inner {
   left: calc(100% - 10px);
-  font-size: var(--font-size-smal);
+  font-size: 9px;
 }
 .bui-switch-small::after {
-  width: var(--controller-small-width);
-  height: var(--controller-small-height);
+  width: 12px;
+  height: 12px;
   left: 2px;
   top: 2px;
 }
@@ -62,12 +47,12 @@
   left: 2px;
 }
 .bui-switch-medium {
-  width: var(--medium-width);
-  height: var(--medium-height);
+  width: 44px;
+  height: 22px;
 }
 .bui-switch-medium::after {
-  width: var(--controller-medium-width);
-  height: var(--controller-medium-height);
+  width: 18px;
+  height: 18px;
 }
 .bui-switch-medium.bui-switch-checked::after {
   left: calc(100% - 20px);
@@ -76,15 +61,15 @@
   left: var(--bui-spacing-sm);
 }
 .bui-switch-large {
-  width: var(--large-width);
-  height: var(--large-height);
+  width: 51px;
+  height: 30px;
 }
 .bui-switch-large .bui-switch-inner {
   left: calc(100% - 22px);
 }
 .bui-switch-large::after {
-  width: var(--controller-large-width);
-  height: var(--controller-large-height);
+  width: 24px;
+  height: 24px;
   left: 3px;
   top: 3px;
 }

package/es/TabBar/TabBar.css

@@ -1,12 +1,8 @@
 .bui-tab-bar {
-  --width: var(--bui-tab-bar-width, 100%);
-  --height: var(--bui-tab-bar-height, 50px);
-  --padding: var(--bui-tab-bar-padding, 6px 0);
-  --bui-tab-bar-color: var(--bui-tab-bar-default-color, var(--bui-color-fg-default));
   display: flex;
-  width: var(--width);
-  height: var(--height);
-  padding: var(--padding);
+  width: 100%;
+  height: 50px;
+  padding: 6px 0;
   background: var(--bui-color-white);
   font-family: var(--bui-font-family);
 }

package/es/TabBar/TabBarItem.css

@@ -1,4 +1,5 @@
 .bui-tab-bar-item {
+  --bui-tab-bar-color: var(--bui-tab-bar-default-color, var(--bui-color-fg-default));
   display: flex;
   align-items: center;
   justify-content: center;

package/es/Tabs/Tab.css

@@ -4,16 +4,20 @@
   justify-content: center;
   white-space: nowrap;
   width: min-content;
-  height: var(--tab-height);
+  height: 100%;
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
   font-size: var(--font-size);
   line-height: var(--bui-line-height);
   color: var(--color);
-  padding: var(--tab-padding);
+  padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
   font-family: var(--bui-font-family);
 }
+.bui-tab-center {
+  flex: 1 0 auto;
+  margin: 0 auto;
+}
 .bui-tab-active {
   font-size: var(--font-size);
   line-height: var(--bui-line-height);