@bifrostui/react 1.3.2 → 1.4.0-beta.1

package/es/Popover/Popover.js

@@ -0,0 +1,186 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 clsx from "clsx";
+import React, { useState, useRef, useEffect } from "react";
+import {
+  getStylesAndLocation,
+  triggerEventTransform,
+  useUniqueId
+} from "@bifrostui/utils";
+import Portal from "../Portal";
+import "./Popover.css";
+const prefixCls = "bui-popover";
+const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    children,
+    title,
+    content,
+    defaultOpen,
+    placement = "top",
+    trigger = "click",
+    onOpenChange,
+    open,
+    hideArrow,
+    PortalProps
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "children",
+    "title",
+    "content",
+    "defaultOpen",
+    "placement",
+    "trigger",
+    "onOpenChange",
+    "open",
+    "hideArrow",
+    "PortalProps"
+  ]);
+  const controlByUser = typeof open !== "undefined";
+  const positionArr = placement.split(/([A-Z])/);
+  const direction = positionArr[0];
+  let location;
+  if (positionArr.length > 1) {
+    positionArr.splice(0, 1);
+    location = positionArr.join("").toLowerCase();
+  } else {
+    location = "center";
+  }
+  const childrenRef = useRef();
+  const [openStatus, setOpenStatus] = useState(defaultOpen);
+  const [arrowDirection, setArrowDirection] = useState(direction);
+  const [arrowLocation, setArrowLocation] = useState(location);
+  const [tooltyles, setTooltyles] = useState({});
+  const ttId = useUniqueId();
+  const changeOpenStatus = (event, status) => {
+    if (controlByUser)
+      return;
+    setOpenStatus(status);
+    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
+  };
+  const triggerClick = (event) => {
+    event.stopPropagation();
+    const targetStatus = !openStatus;
+    changeOpenStatus(event, targetStatus);
+  };
+  const hidePopover = (event) => {
+    changeOpenStatus(event, false);
+  };
+  const showPopover = (event) => {
+    changeOpenStatus(event, true);
+  };
+  useEffect(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open);
+  }, [open]);
+  const clickEventHandler = (event) => {
+    if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
+      return;
+    hidePopover(event);
+  };
+  useEffect(() => {
+    if (controlByUser)
+      return;
+    document.addEventListener("click", clickEventHandler);
+    return () => {
+      document.removeEventListener("click", clickEventHandler);
+    };
+  }, []);
+  const onRootElementMouted = () => {
+    const result = getStylesAndLocation({
+      childrenRef,
+      arrowDirection,
+      arrowLocation,
+      selector: `[data-id="tt_${ttId}"]`
+    });
+    if (!result)
+      return;
+    const { styles, newArrowDirection, newArrowLocation } = result;
+    if (newArrowDirection !== arrowDirection) {
+      setArrowDirection(newArrowDirection);
+    }
+    if (newArrowLocation !== arrowLocation) {
+      setArrowLocation(newArrowLocation);
+    }
+    setTooltyles(styles);
+  };
+  if (!title && !content)
+    return null;
+  let triggerEventOption;
+  if (!controlByUser) {
+    triggerEventOption = triggerEventTransform({
+      trigger,
+      click: triggerClick,
+      show: showPopover,
+      hide: hidePopover
+    });
+  }
+  const childrenOptions = __spreadValues({
+    ref: childrenRef
+  }, triggerEventOption);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(
+    Portal,
+    __spreadProps(__spreadValues({
+      onRootElementMouted
+    }, PortalProps), {
+      ref
+    }),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: clsx(prefixCls, className, `popover-${arrowDirection}`, {
+          "bui-popover-arrow-hide": hideArrow
+        }),
+        "data-id": `tt_${ttId}`,
+        style: __spreadValues(__spreadValues({}, style), tooltyles)
+      }, others),
+      !hideArrow ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            "bui-popover-arrow",
+            `location-${arrowLocation}`
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ React.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
+    )
+  ) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
+});
+Popover.displayName = "BuiPopover";
+var Popover_default = Popover;
+export {
+  Popover_default as default
+};

package/es/Popover/Popover.types.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { PortalCoreProps } from '../Portal/Portal.types';
+type triggerType = 'click' | 'hover';
+export type PopoverProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 默认是否显隐
+         * @default false
+         */
+        defaultOpen?: boolean;
+        /**
+         * 用于手动控制浮层显隐
+         */
+        open?: boolean;
+        /**
+         * 浮层的标题
+         */
+        title?: React.ReactNode;
+        /**
+         * 浮层的内容
+         */
+        content?: React.ReactNode;
+        /**
+         * 是否展示箭头
+         * @default false
+         */
+        hideArrow?: boolean;
+        /**
+         * 气泡框位置
+         * @default 'top'
+         */
+        placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+        /**
+         * 触发行为
+         * - click: 点击触发
+         * - hover: hover触发
+         * - 或者是他们的数组
+         * @default 'click'
+         */
+        trigger?: triggerType | triggerType[];
+        /**
+         * Portal组件的属性
+         */
+        PortalProps?: PortalCoreProps;
+        /**
+         * 点击事件回调方法
+         * - event 触发事件
+         * - data.open 浮层显隐状态
+         * @returns
+         */
+        onOpenChange?: (event: React.SyntheticEvent, data: {
+            open: boolean;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export {};

package/es/Popover/Popover.types.js

@@ -0,0 +1 @@
+export {};

package/es/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popover, default } from './Popover';
+export * from './Popover.types';

package/es/Popover/index.js

@@ -0,0 +1,6 @@
+import { default as default2, default as default3 } from "./Popover";
+export * from "./Popover.types";
+export {
+  default2 as Popover,
+  default3 as default
+};

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

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

package/es/Portal/PortalCore.js

@@ -6,7 +6,13 @@ function getContainer(container) {
 }
 const PortalCore = /* @__PURE__ */ React.forwardRef(
   function Portal(props, ref) {
-    const { children, container, disablePortal = false, rootElement } = props;
+    const {
+      children,
+      container,
+      disablePortal = false,
+      rootElement,
+      onRootElementMouted
+    } = props;
     const [mountNode, setMountNode] = React.useState(null);
     const handleRef = useForkRef(
       // @ts-expect-error will upstream fix
@@ -21,6 +27,7 @@ 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,22 +1,24 @@
 .bui-progress {
-  --fill-color: var(--bui-color-primary);
-  --trail-color: rgba(156, 156, 165, 0.2);
-  --stroke-width: 8px;
-  width: 100%;
+  --fill-color: var(--bui-progress-fill-color, --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);
   font-family: var(--bui-font-family);
 }
 .bui-progress-inner {
   position: relative;
   display: inline-block;
-  width: 100%;
+  width: var(--width);
   overflow: hidden;
   vertical-align: middle;
   background-color: var(--trail-color);
-  border-radius: 100px;
+  border-radius: var(--border-radius);
 }
 .bui-progress-bg {
   position: relative;
-  border-radius: 100px;
+  border-radius: var(--border-radius);
   background-color: var(--fill-color);
   height: var(--stroke-width);
 }

package/es/Radio/Radio.css

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

package/es/Rating/Rating.css

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

package/es/Select/Select.css

@@ -1,9 +1,19 @@
 .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: 27px;
-  min-width: 100px;
-  font-size: var(--bui-title-size-3);
+  height: var(--height);
+  min-width: var(--mini-width);
+  font-size: var(--font-size);
   border-radius: 5px;
   background-color: var(--bui-color-bg-view);
   font-family: var(--bui-font-family);
@@ -15,7 +25,7 @@
 .bui-select-selector-container {
   display: flex;
   align-items: center;
-  padding: 0 14px;
+  padding: var(--padding);
   height: 100%;
 }
 .bui-select-input {
@@ -32,7 +42,7 @@
   justify-content: space-between;
   align-items: center;
   flex: 1;
-  height: 27px;
+  height: var(--bui-select-height);
   background-color: transparent;
   outline: none;
   border: 0;
@@ -47,24 +57,25 @@
   left: 0;
   width: 100%;
   z-index: var(--bui-z-index-dropdown);
-  margin-top: 6px;
+  margin-top: var(--option-container-margin-top);
+  border-radius: 3px;
   background-color: var(--bui-color-bg-view);
   padding: 2px;
   overflow: hidden;
 }
 .bui-select-option-main {
   border-radius: 3px;
-  padding: 3px 0;
+  padding: var(--option-container-padding);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
   overflow: hidden;
 }
 .bui-select-option {
   display: flex;
   align-items: center;
-  height: 27px;
-  padding: 0 14px;
+  height: var(--option-height);
+  padding: var(--option-padding);
   border-radius: 5px;
-  margin: 0 3px;
+  margin: var(--option-margin);
 }
 .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]
+    [selectValue, onChange, setRenderValue]
   );
   useEffect(() => {
     if (open !== void 0)

package/es/Select/SelectOption.js

@@ -42,6 +42,9 @@ 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,5 +1,5 @@
 .bui-skeleton {
-  --border-radius: var(--bui-shape-radius-label);
+  --height: var(--bui-skeleton-height, 1.2em);
   display: block;
 }
 .bui-skeleton-animation-wave {
@@ -20,17 +20,17 @@
   height: auto;
   transform-origin: 0 55%;
   transform: scale(1, 0.6);
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-shape-radius-label);
 }
 .bui-skeleton-text::before {
   content: "\a0";
 }
 .bui-skeleton-rectangular {
-  height: 1.2em;
+  height: var(--height);
 }
 .bui-skeleton-rounded {
-  height: 1.2em;
-  border-radius: var(--border-radius);
+  height: var(--height);
+  border-radius: var(--bui-shape-radius-label);
 }
 .bui-skeleton-circular {
   border-radius: 50%;

package/es/Slider/Slider.css

@@ -1,13 +1,24 @@
 .bui-slider {
-  --line-color: var(--bui-color-primary);
-  --line-bg-color: var(--bui-color-border-default);
-  --tooltip-font-size: var(--bui-text-size-3);
-  --tooltip-color: var(--bui-color-white);
-  --tooltip-bg-color: var(--line-color);
+  --line-color: var(--bui-slider-line-color, --bui-color-primary);
+  --line-bg-color: var(--bui-slider-line-bg-color, --bui-color-border-default);
+  --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);
+  --tooltip-font-size: var(--bui-tooltip-font-size, --bui-text-size-3);
+  --tooltip-color: var(--bui-tooltip-color, --bui-color-white);
+  --tooltip-bg-color: var(--bui-tooltip-bg-color, --line-color);
   position: relative;
-  width: 100%;
-  height: 2px;
-  padding: 19px 0;
+  width: var(--width);
+  height: var(--height);
+  padding: var(--padding);
   box-sizing: border-box;
   font-family: var(--bui-font-family);
 }
@@ -19,7 +30,7 @@
   position: absolute;
   top: 50%;
   left: 0;
-  height: 2px;
+  height: var(--height);
   transform: translateY(-50%);
   background-color: var(--line-color);
 }
@@ -28,7 +39,7 @@
   top: 50%;
   left: 0;
   width: 100%;
-  height: 2px;
+  height: var(---height);
   transform: translateY(-50%);
   background-color: var(--line-bg-color);
 }
@@ -37,11 +48,11 @@
   position: absolute;
   justify-content: center;
   align-items: center;
-  width: 26px;
-  height: 26px;
-  background-color: #fff;
+  width: var(--button-width);
+  height: var(--button-height);
+  background-color: var(--bui-color-white);
   box-shadow: #ddd 0 0 10px;
-  border-radius: 50%;
+  border-radius: var(--button-border-radius);
   transform: translate(-50%, -50%);
   font-size: var(--bui-title-size-3);
   cursor: grab;
@@ -67,11 +78,11 @@
 .bui-slider-tooltip {
   position: absolute;
   top: -14px;
-  width: 46px;
-  height: 24px;
-  line-height: 24px;
+  width: var(--tooltip-width);
+  height: var(--tooltip-height);
+  line-height: var(--tooltip-line-height);
   font-size: var(--tooltip-font-size);
-  border-radius: 24px;
+  border-radius: var(--tooltip-border-radius);
   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: 1.8;
+  line-height: var(--step-label-horizontal-line-height);
 }
 .bui-step:last-child .bui-step-line::after {
   display: none;
@@ -13,8 +13,8 @@
 .bui-step-line {
   position: absolute;
   top: 0;
-  width: 1px;
-  height: 100%;
+  width: var(--step-line-width);
+  height: var(--step-line-height);
   box-sizing: border-box;
   left: 13px;
   padding: var(--step-line-padding);
@@ -22,8 +22,8 @@
 .bui-step-line::after {
   display: inline-block;
   content: "";
-  width: 1px;
-  border-left-width: 1px;
+  width: var(--step-line-width);
+  border-left-width: var(--step-line-width);
   border-left-style: dotted;
   height: calc(100% + 11px);
 }
@@ -41,14 +41,14 @@
 }
 .bui-step-icon {
   flex-shrink: 0;
-  width: 28px;
+  width: var(--step-icon-width);
   text-align: center;
   margin: var(--step-icon-margin);
-  font-size: var(--bui-title-size-4);
+  font-size: var(--step-icon-font-size);
 }
 .bui-step-icon-active {
-  width: 12px;
-  height: 12px;
+  width: var(--step-icon-active-width);
+  height: var(--step-icon-active-height);
   position: relative;
   background-color: var(--bui-color-primary);
   border-radius: 50%;
@@ -56,7 +56,7 @@
   display: inline-block;
 }
 .bui-step-content {
-  padding: 3px 0;
+  padding: var(--step-content-padding);
   box-sizing: border-box;
   flex: 1 0 0;
   overflow: hidden;
@@ -71,8 +71,8 @@
   align-items: flex-start;
 }
 .bui-step-title {
-  font-size: var(--title-font-size);
-  font-weight: var(--title-font-weight);
+  font-size: var(--bui-title-size-4);
+  font-weight: var(--bui-font-weight-medium);
   width: auto;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -128,7 +128,7 @@
 }
 .bui-step-horizontal .bui-step-line {
   display: none;
-  padding: 28px 0 6px;
+  padding: var(--step-horizontal-line-padding);
 }
 .bui-step-horizontal .bui-step-icon {
   margin-right: 0;