@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Popover/Popover.css

@@ -1,95 +0,0 @@
-.bui-popover {
-  --arrow-size: var(--bui-popover-arrow-size, 8PX);
-  --localtion-position: var(--bui-popover-localtion-position, 8PX);
-  --max-width: var(--bui-popover-max-width, 350px);
-  --content-min-width: var(--bui-popover-content-min-width, 30px);
-  --content-padding: var(--bui-popover-content-padding, 6px 8px);
-  max-width: var(--max-width);
-  font-size: var(--bui-text-size-1);
-  position: absolute;
-  visibility: hidden;
-  z-index: var(--bui-z-index-tooltip);
-}
-.bui-popover .bui-popover-arrow {
-  width: 0;
-  height: 0;
-  position: absolute;
-}
-.bui-popover .bui-popover-arrow.location-left {
-  left: var(--localtion-position);
-}
-.bui-popover .bui-popover-arrow.location-right {
-  right: var(--localtion-position);
-}
-.bui-popover .bui-popover-arrow.location-top {
-  top: var(--localtion-position);
-}
-.bui-popover .bui-popover-arrow.location-bottom {
-  bottom: var(--localtion-position);
-}
-.bui-popover.popover-top .location-center,
-.bui-popover.popover-bottom .location-center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.bui-popover.popover-left .location-center,
-.bui-popover.popover-right .location-center {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.bui-popover.popover-top {
-  padding-bottom: var(--arrow-size);
-}
-.bui-popover.popover-top .bui-popover-arrow {
-  border-left: var(--arrow-size) solid transparent;
-  border-right: var(--arrow-size) solid transparent;
-  border-top: var(--arrow-size) solid var(--bui-color-bg-view);
-  bottom: 0;
-}
-.bui-popover.popover-bottom {
-  padding-top: var(--arrow-size);
-}
-.bui-popover.popover-bottom .bui-popover-arrow {
-  border-left: var(--arrow-size) solid transparent;
-  border-right: var(--arrow-size) solid transparent;
-  border-bottom: var(--arrow-size) solid var(--bui-color-bg-view);
-  top: 0;
-}
-.bui-popover.popover-left {
-  padding-right: var(--arrow-size);
-}
-.bui-popover.popover-left .bui-popover-arrow {
-  border-top: var(--arrow-size) solid transparent;
-  border-bottom: var(--arrow-size) solid transparent;
-  border-left: var(--arrow-size) solid var(--bui-color-bg-view);
-  right: 0;
-}
-.bui-popover.popover-right {
-  padding-left: var(--arrow-size);
-}
-.bui-popover.popover-right .bui-popover-arrow {
-  border-top: var(--arrow-size) solid transparent;
-  border-bottom: var(--arrow-size) solid transparent;
-  border-right: var(--arrow-size) solid var(--bui-color-bg-view);
-  left: 0;
-}
-.bui-popover .bui-popover-title {
-  font-weight: var(--bui-font-weight-bold);
-}
-.bui-popover .bui-popover-content {
-  min-width: var(--content-min-width);
-  color: var(--bui-color-fg-muted);
-  padding: var(--content-padding);
-  text-align: left;
-  text-decoration: none;
-  word-wrap: break-word;
-  background-color: var(--bui-color-bg-popover);
-  border-radius: var(--bui-shape-radius-poster);
-  box-shadow:
-    0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.bui-popover .bui-popover-content .bui-popover-title + .bui-popover-inner-content {
-  margin-top: var(--bui-spacing-md);
-}

package/es/Popover/Popover.d.ts

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

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import { OverrideProps } from '@bifrostui/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;
-        /**
-         * 用于控制浮层和目标元素偏移量
-         */
-        offsetSpacing?: number;
-        /**
-         * 气泡框位置
-         * @default 'top'
-         */
-        placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
-        /**
-         * 触发行为
-         * - click: 点击触发
-         * - hover: hover触发
-         * - 或者是他们的数组
-         * @default 'click'
-         */
-        trigger?: triggerType | triggerType[];
-        /**
-         * 点击事件回调方法
-         * - event 触发事件
-         * - data.open 浮层显隐状态
-         * @returns
-         */
-        onOpenChange?: (event: React.SyntheticEvent, data: {
-            open: boolean;
-        }) => void;
-    };
-    defaultComponent: D;
-}, D>;
-export {};

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

@@ -1,26 +0,0 @@
-import React from 'react';
-export interface PortalCoreProps {
-    /**
-     * container中渲染的元素
-     */
-    children?: React.ReactNode;
-    /**
-     * children内容将会被append到container中
-     * 默认是页面的根节点
-     */
-    container?: Element | (() => Element | null) | null;
-    /**
-     * 禁止Portal，children将被渲染在父节点中
-     * @default false
-     */
-    disablePortal?: boolean;
-    /**
-     * 页面根节点
-     */
-    rootElement?: Element;
-    /**
-     * 挂载成功的回调方法
-     */
-    onRootElementMouted?: (e: Element) => void;
-}
-export type PortalProps = Omit<PortalCoreProps, 'rootElement'>;

package/es/Progress/Progress.css

@@ -1,24 +0,0 @@
-.bui-progress {
-  --fill-color: var(--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);
-  font-family: var(--bui-font-family);
-}
-.bui-progress-inner {
-  position: relative;
-  display: inline-block;
-  width: var(--width);
-  overflow: hidden;
-  vertical-align: middle;
-  background-color: var(--trail-color);
-  border-radius: var(--border-radius);
-}
-.bui-progress-bg {
-  position: relative;
-  border-radius: var(--border-radius);
-  background-color: var(--fill-color);
-  height: var(--stroke-width);
-}

package/es/Progress/Progress.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ProgressGradient, ProgressProps } from './Progress.types';
-import './Progress.less';
-export declare const handleGradient: (strokeColor: ProgressGradient) => {
-    backgroundImage: string;
-};
-declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default Progress;

package/es/Progress/Progress.types.d.ts

@@ -1,28 +0,0 @@
-import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
-export type ProgressStringGradients = {
-    [percentage: string]: string;
-};
-type ProgressFromToGradients = {
-    from: string;
-    to: string;
-};
-export type ProgressGradient = {
-    direction?: string;
-} & (ProgressStringGradients | ProgressFromToGradients);
-export type ProgressProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /** 百分比 */
-        percent?: number;
-        /**
-         * - 进度条的色彩，传入 object 时为渐变
-         */
-        strokeColor?: string | ProgressGradient;
-        /** 未填充进度条的色彩 */
-        trailColor?: string;
-        /** 进度条线的宽度，单位 */
-        strokeWidth?: number | string;
-    };
-    defaultComponent: D;
-}, D>;
-export {};

package/es/Radio/Radio.css

@@ -1,66 +0,0 @@
-.bui-radio {
-  --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
-  --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
-  --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
-  --icon-padding: var(--bui-radio-icon-padding, 5px);
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  font-family: var(--bui-font-family);
-}
-.bui-radio-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-.bui-radio-label-left {
-  flex-direction: row-reverse;
-}
-.bui-radio-label-top {
-  flex-direction: column-reverse;
-}
-.bui-radio-label-bottom {
-  flex-direction: column;
-}
-.bui-radio-input {
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: pointer;
-  z-index: 1;
-}
-.bui-radio-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  padding: var(--icon-padding);
-  box-sizing: border-box;
-}
-.bui-radio-label {
-  font-size: var(--label-font-size);
-  color: var(--label-color);
-}
-.bui-radio-btn-icon {
-  position: relative;
-  display: flex;
-}
-.bui-radio-btn-icon .bui-svg-icon {
-  font-size: var(--icon-font-size);
-}
-.bui-radio-btn-icon-outline {
-  transform: scale(1);
-  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-}
-.bui-radio-btn-icon-contained {
-  position: absolute;
-  left: 0;
-  transform: scale(0);
-  transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
-}
-.bui-radio-btn-icon-checked .bui-radio-btn-icon-contained {
-  transform: scale(1);
-  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}

package/es/Radio/Radio.d.ts

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

package/es/Radio/RadioGroup.d.ts

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

package/es/Rating/Rating.css

@@ -1,56 +0,0 @@
-.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);
-}
-.bui-rating-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-.bui-rating-container {
-  position: relative;
-  display: flex;
-}
-.bui-rating-container:last-child {
-  margin-right: 0;
-}
-.bui-rating-container-xsmall {
-  font-size: var(--bui-text-size-5);
-}
-.bui-rating-container-small {
-  font-size: var(--bui-text-size-1);
-  margin-right: var(--small-margin-right);
-}
-.bui-rating-container-medium {
-  font-size: var(--bui-title-size-3);
-  margin-right: var(--medium-margin-right);
-}
-.bui-rating-container-large {
-  font-size: var(--large-font-size);
-  margin-right: var(--large-margin-right);
-}
-.bui-rating-item {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  cursor: pointer;
-  color: var(--bui-color-fg-disabled);
-}
-.bui-rating-item-input {
-  display: none;
-}
-.bui-rating-item-half {
-  position: absolute;
-  top: 0;
-  width: 50%;
-}
-.bui-rating-item-readonly {
-  cursor: unset;
-}
-.bui-rating-item-active {
-  color: var(--bui-color-warning);
-}

package/es/Rating/Rating.d.ts

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

package/es/ScrollView/ScrollView.d.ts

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

package/es/ScrollView/ScrollView.types.d.ts

@@ -1,257 +0,0 @@
-import React from 'react';
-import { OverrideProps } from '@bifrostui/types';
-interface ScrollViewScrollEvent extends Event {
-    detail?: {
-        scrollLeft: number;
-        scrollTop: number;
-        scrollHeight: number;
-        scrollWidth: number;
-        deltaX?: number;
-        deltaY?: number;
-        isDrag?: boolean;
-    };
-}
-interface ScrollViewDragEvent extends Event {
-    detail?: {
-        /** 横向滚动条位置 */
-        scrollLeft?: number;
-        /** 竖向滚动条位置 */
-        scrollTop?: number;
-        /** 滚动速度 */
-        velocity?: number;
-    };
-}
-export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 允许横向滚动
-         * @default false
-         * @type {boolean}
-         */
-        scrollX?: boolean;
-        /**
-         * 允许纵向滚动
-         * @default false
-         * @type {boolean}
-         */
-        scrollY?: boolean;
-        /**
-         * 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
-         * @default 50
-         * @type {number}
-         */
-        upperThreshold?: number;
-        /**
-         * 距底部/右边多远时（单位px），触发 scrolltolower 事件
-         * @default 50
-         * @type {number}
-         */
-        lowerThreshold?: number;
-        /**
-         * 设置竖向滚动条位置
-         * @type {number}
-         */
-        scrollTop?: number;
-        /**
-         * 设置横向滚动条位置
-         * @type {number}
-         */
-        scrollLeft?: number;
-        /**
-         * 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
-         * @type {string}
-         */
-        scrollIntoView?: string;
-        /**
-         * 在设置滚动条位置时使用动画过渡
-         * @default false
-         * @type {boolean}
-         */
-        scrollWithAnimation?: boolean;
-        /** 指定 scroll-into-view 目标节点在视口内的位置。
-         * start - 目标节点显示在视口开始处
-         * center - 目标节点显示在视口中间
-         * end - 目标节点显示在视口结束处
-         * nearest - 目标节点在就近的视口边缘显示，若节点已在视口内则不触发滚动
-         * @default 'start'
-         */
-        scrollIntoViewAlignment?: ScrollLogicalPosition;
-        /**
-         * 滚动条返回顶部，只支持竖向
-         * @default false
-         * @type {boolean}
-         */
-        enableBackToTop?: boolean;
-        /** 启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。
-         * 仅小程序可用
-         * @default false
-         */
-        enableFlex?: boolean;
-        /** 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。
-         * 仅小程序可用
-         * @default false
-         */
-        scrollAnchoring?: boolean;
-        /** 开启自定义下拉刷新
-         * 仅小程序可用
-         * @default false
-         */
-        refresherEnabled?: boolean;
-        /** 设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式
-         * 仅小程序可用
-         * @default 'black'
-         */
-        refresherDefaultStyle?: string;
-        /** 设置自定义下拉刷新区域背景颜色
-         * 仅小程序可用
-         * @default '#FFF'
-         */
-        refresherBackground?: string;
-        /** 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
-         * 仅小程序可用
-         * @default false
-         */
-        refresherTriggered?: boolean;
-        /** 启用 scroll-view 增强特性
-         * 仅小程序可用
-         * @default false
-         */
-        enhanced?: boolean;
-        /** iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         * @default true
-         */
-        bounces?: boolean;
-        /** 滚动条显隐控制 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         * @default true
-         */
-        showScrollbar?: boolean;
-        /** 分页滑动效果 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         * @default false
-         */
-        pagingEnabled?: boolean;
-        /** boolean	false	滑动减速速率控制 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         * @default false
-         */
-        fastDeceleration?: boolean;
-        /** 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
-         */
-        scrollAnimationDuration?: number;
-        /** 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。
-         * 仅小程序可用
-         * @default false
-         */
-        trapScroll?: string;
-        /** 发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。
-         * 仅小程序可用
-         */
-        disableLowerScroll?: string;
-        /** 发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。
-         * 仅小程序可用
-         */
-        disableUpperScroll?: string;
-        /** 无障碍访问，（属性）元素的额外描述
-         * 仅小程序可用
-         */
-        ariaLabel?: string;
-        /** 开启 passive 特性，能优化一定的滚动性能
-         * 仅小程序可用
-         * @default false
-         */
-        enablePassive?: string;
-        /** 渲染模式
-         * list - 列表模式。只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化
-         * custom - 自定义模式。只会渲染在屏节点，子节点可以是 sticky-section list-view grid-view 等组件
-         * 仅小程序可用
-         * @default 'list'
-         */
-        type?: 'list' | 'custom';
-        /** 是否反向滚动。一般初始滚动位置是在顶部，反向滚动则是在底部。
-         * 仅小程序可用
-         * @default false
-         */
-        reverse?: boolean;
-        /** 指定视口外渲染区域的距离，默认情况下视口外节点不渲染。指定 cache-extent 可优化滚动体验和加载速度，但会提高内存占用且影响首屏速度，可按需启用。
-         * 仅小程序可用
-         */
-        cacheExtent?: number;
-        /** 只 scroll-into-view 到 cacheExtent 以内的目标节点，性能更佳
-         * 仅小程序可用
-         * @default false
-         */
-        scrollIntoViewWithinExtent?: boolean;
-        /**
-         * 滚动到顶部/左边，会触发 scrolltoupper 事件
-         */
-        onScrollToUpper?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /**
-         * 滚动到底部/右边，会触发 scrolltolower 事件
-         */
-        onScrollToLower?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /**
-         * 滚动时触发
-         */
-        onScroll?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
-        /**
-         * 触摸后移动
-         */
-        onTouchMove?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
-        /** 滚动开始事件
-         * 仅小程序可用
-         */
-        onScrollStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
-        /** 滚动结束事件
-         * 仅小程序可用
-         */
-        onScrollEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
-        /** 自定义下拉刷新控件被下拉
-         * 仅小程序可用
-         */
-        onRefresherPulling?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 自定义下拉刷新被触发
-         * 仅小程序可用
-         */
-        onRefresherRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 自定义下拉刷新被复位
-         * 仅小程序可用
-         */
-        onRefresherRestore?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 自定义下拉刷新被中止
-         * 仅小程序可用
-         */
-        onRefresherAbort?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 自定义下拉刷新即将触发刷新（拖动超过 refresher-threshold 时）的事件
-         * 仅小程序可用
-         */
-        onRefresherWillRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 滑动开始事件 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         */
-        onDragStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
-        /** 滑动事件 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         */
-        onDragging?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
-        /** 滑动结束事件 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         */
-        onDragEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
-        /** 触摸动作开始。
-         * 仅小程序可用
-         */
-        onTouchStart?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
-        /** 触摸动作结束。
-         * 仅小程序可用
-         */
-        onTouchEnd?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
-        /** 触摸动作被打断，如来电提醒、弹窗。
-         * 仅小程序可用
-         */
-        onTouchCancel?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
-    };
-    defaultComponent: D;
-}, D>;
-export {};