@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/IconButton/IconButton.css

@@ -1,152 +0,0 @@
-.bui-icon-btn {
-  --bg-color: var(--bui-icon-btn-bg-color, var(--bui-color-neutral-5));
-  --color: var(--bui-icon-btn-color, var(--bui-color-fg-muted));
-  --icon-size: var(--bui-icon-btn-font-size, 17px);
-  --user-area: var(--bui-icon-btn-padding, 5px);
-  --large-font-size: var(--bui-icon-btn-large-font-size, 23px);
-  --disabled-opacity: var(--bui-icon-btn-disabled-opacity, 0.5);
-  position: relative;
-  display: inline-flex;
-  height: auto;
-  margin: 0;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color);
-  cursor: pointer;
-  font-family: var(--bui-font-family);
-  font-size: var(--icon-size);
-  padding: var(--user-area);
-}
-.bui-icon-btn::before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  background-color: var(--bui-color-black);
-  border: inherit;
-  border-color: var(--bui-color-black);
-  border-radius: inherit;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-  content: " ";
-}
-.bui-icon-btn:active::before {
-  opacity: 0.04;
-}
-.bui-icon-btn::after {
-  border: 0;
-}
-.bui-icon-btn-small {
-  font-size: var(--bui-text-size-4);
-  padding: var(--bui-spacing-xs);
-}
-.bui-icon-btn-small.bui-icon-btn-outlined,
-.bui-icon-btn-small.bui-icon-btn-contained {
-  padding: var(--bui-spacing-xs);
-}
-.bui-icon-btn-medium.bui-icon-btn-outlined,
-.bui-icon-btn-medium.bui-icon-btn-contained {
-  padding: var(--user-area);
-}
-.bui-icon-btn-large {
-  font-size: var(--large-font-size);
-  padding: var(--bui-spacing-sm);
-}
-.bui-icon-btn-large.bui-icon-btn-outlined,
-.bui-icon-btn-large.bui-icon-btn-contained {
-  padding: var(--bui-spacing-sm);
-}
-.bui-icon-btn-disabled {
-  pointer-events: none;
-  opacity: var(--disabled-opacity);
-}
-.bui-icon-btn-circular {
-  border-radius: 100%;
-}
-.bui-icon-btn-rounded {
-  border-radius: var(--bui-shape-radius-default);
-}
-.bui-icon-btn-square {
-  border-radius: 0;
-}
-.bui-icon-btn-default.bui-icon-btn-primary {
-  color: var(--bui-color-primary);
-}
-.bui-icon-btn-default.bui-icon-btn-success {
-  color: var(--bui-color-success);
-}
-.bui-icon-btn-default.bui-icon-btn-info {
-  color: var(--bui-color-info);
-}
-.bui-icon-btn-default.bui-icon-btn-warning {
-  color: var(--bui-color-warning);
-}
-.bui-icon-btn-outlined {
-  border: solid 1px;
-}
-.bui-icon-btn-outlined.bui-icon-btn-primary {
-  color: var(--bui-color-primary);
-  border-color: var(--bui-color-primary);
-}
-.bui-icon-btn-outlined.bui-icon-btn-success {
-  color: var(--bui-color-success);
-  border-color: var(--bui-color-success);
-}
-.bui-icon-btn-outlined.bui-icon-btn-info {
-  color: var(--bui-color-info);
-  border-color: var(--bui-color-info);
-}
-.bui-icon-btn-outlined.bui-icon-btn-warning {
-  color: var(--bui-color-warning);
-  border-color: var(--bui-color-warning);
-}
-.bui-icon-btn-outlined.bui-icon-btn-danger {
-  color: var(--bui-color-danger);
-  border-color: var(--bui-color-danger);
-}
-.bui-icon-btn-contained {
-  background-color: var(--bg-color);
-}
-.bui-icon-btn-contained.bui-icon-btn-primary {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-primary-start) 0%,
-      var(--bui-color-primary-end) 100%);
-}
-.bui-icon-btn-contained.bui-icon-btn-success {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-success-start) 0%,
-      var(--bui-color-success-end) 100%);
-}
-.bui-icon-btn-contained.bui-icon-btn-info {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-info-start) 0%,
-      var(--bui-color-info-end) 100%);
-}
-.bui-icon-btn-contained.bui-icon-btn-warning {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-warning-start) 0%,
-      var(--bui-color-warning-end) 100%);
-}
-.bui-icon-btn-contained.bui-icon-btn-danger {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-danger-start) 0%,
-      var(--bui-color-danger-end) 100%);
-}

package/es/IconButton/IconButton.d.ts

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

package/es/IconButton/IconButton.types.d.ts

@@ -1,40 +0,0 @@
-import { OverrideProps, ThemeColor, ButtonOpenType } from '@bifrostui/types';
-import React from 'react';
-export type IconButtonProps<D extends React.ElementType = 'button', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * - small: 小按钮
-         * - medium: 中号按钮，默认按钮
-         * - large: 大按钮
-         * @default 'medium'
-         */
-        size?: 'small' | 'medium' | 'large';
-        /** 按钮颜色
-         */
-        color?: ThemeColor | 'default';
-        /**
-         * - default: 图标按钮
-         * - contained: 实心填充按钮
-         * - outlined: 描边按钮
-         * @default 'default'
-         */
-        variant?: 'default' | 'contained' | 'outlined';
-        /**
-         * - circular: 圆形
-         * - square: 正方形
-         * - rounded: 圆角
-         * @default 'circular'
-         */
-        shape?: 'circular' | 'square' | 'rounded';
-        /**
-         * 是否禁用
-         * @default false
-         */
-        disabled?: boolean;
-        /**
-         * 仅微信小程序支持的button开放能力
-         */
-        openType?: ButtonOpenType;
-    };
-    defaultComponent: D;
-}, D>;

package/es/Input/Input.css

@@ -1,64 +0,0 @@
-.bui-input {
-  --height: var(--bui-input-height, 32px);
-  --padding: var(--bui-input-padding, 4px 10px);
-  --border-radius: var(--bui-input-border-radius, var(--bui-shape-radius-default));
-  --icon-start-margin-right: var(--bui-input-icon-start-margin-right, 3px);
-  --icon-end-margin-left: var(--bui-input-icon-end-margin-left, 3px);
-  --background-color: var(--bui-input-background-color, transparent);
-  --disabled-background-color: var(--bui-input-disabled-background-color, rgba(0, 0, 0, 0.04));
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: var(--height);
-  padding: var(--padding);
-  box-sizing: border-box;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--bui-color-border-default);
-  font-family: var(--bui-font-family);
-}
-.bui-input-icon {
-  display: flex;
-  align-items: center;
-  color: var(--bui-color-fg-subtle);
-  font-size: var(--bui-title-size-3);
-}
-.bui-input-icon-start {
-  margin-right: var(--icon-start-margin-right);
-}
-.bui-input-icon-end {
-  margin-left: var(--icon-end-margin-left);
-}
-.bui-input-input {
-  flex: 1;
-  min-width: 0;
-  padding: 0;
-  height: 100%;
-  color: var(--bui-color-fg-default);
-  border: none;
-  outline: none;
-  background-color: var(--background-color);
-  font-size: var(--bui-text-size-2);
-}
-.bui-input-input::placeholder {
-  color: var(--bui-color-fg-subtle);
-}
-.bui-input-disabled {
-  background-color: var(--disabled-background-color);
-}
-.bui-input-disabled .bui-input-input {
-  color: var(--bui-color-fg-disabled);
-}
-.bui-input-disabled .bui-input-input::placeholder {
-  color: var(--bui-color-fg-disabled);
-}
-.bui-input-clear {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  color: var(--bui-color-fg-disabled);
-  height: 100%;
-  font-size: var(--bui-title-size-3);
-}
-.bui-input .bui-mini-placeholder {
-  width: auto;
-}

package/es/Input/Input.d.ts

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

package/es/ItemSelector/ItemSelector.miniapp.d.ts

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

package/es/ItemSelector/ItemSelector.types.d.ts

@@ -1,40 +0,0 @@
-/// <reference types="react" />
-import { OverrideProps } from '@bifrostui/types';
-export type itemType = {
-    /** Item名 */
-    name: string;
-};
-export type ItemGroup = {
-    /** Item列表 */
-    items: itemType[];
-    /** 组名 */
-    groupName?: string;
-    /** 索引字母 */
-    indexName?: string;
-    /** 索引Code */
-    indexCode?: string;
-    /** 是否平铺 */
-    isFlat?: boolean;
-};
-export type ItemSelectorProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /** Item列表 */
-        items: ItemGroup[];
-        /** 禁用展示索引 默认false 即展示索引 */
-        disableIndex?: boolean;
-        /** 头部标题 */
-        title?: string;
-        /** 选择Item回调 */
-        onSelect: (e: React.SyntheticEvent, data: {
-            item: itemType;
-            group: ItemGroup;
-        }) => void;
-        /** 和title配合使用，头部右侧的关闭回调 */
-        onClose?: (e: React.SyntheticEvent) => void;
-    };
-    defaultComponent: D;
-}, D>;
-export type ItemSelectorCoreProps = ItemSelectorProps & {
-    touchHandler: any;
-    height?: string;
-};

package/es/ItemSelector/ItemSelectorCore.d.ts

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

package/es/ItemSelector/miniapp.css

@@ -1,4 +0,0 @@
-.bui-item-scroll-view-container {
-  height: 100%;
-  display: block;
-}

package/es/Loading/Loading.css

@@ -1,33 +0,0 @@
-.bui-loading {
-  --icon-font-size: var(--bui-loading-icon-font-size, 30px);
-  --text-padding: var(--bui-loading-text-padding, 10px);
-  --animation-duration: var(--bui-loading-animation-duration, 1.6s);
-  width: fit-content;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--bui-spacing-md);
-  font-family: var(--bui-font-family);
-}
-.bui-loading-icon {
-  font-size: var(--icon-font-size);
-  animation: loading var(--animation-duration) linear infinite;
-}
-.bui-loading-text {
-  padding: var(--text-padding);
-  font-size: var(--bui-title-size-3);
-}
-.bui-loading-vertical {
-  flex-direction: row;
-}
-.bui-loading-horizontal {
-  flex-direction: column;
-}
-@keyframes loading {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/es/Loading/Loading.d.ts

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

package/es/Modal/Modal.css

@@ -1,15 +0,0 @@
-.bui-modal {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  top: 0;
-  z-index: var(--bui-z-index-modal);
-  font-family: var(--bui-font-family);
-}
-.bui-modal-exited {
-  visibility: hidden;
-}
-.bui-modal-backdrop {
-  z-index: -1;
-}

package/es/Modal/Modal.d.ts

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

package/es/Modal/Modal.miniapp.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { ViewProps } from '@tarojs/components';
-import './Modal.less';
-declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
-    open?: boolean;
-    container?: Element | (() => Element);
-    hideBackdrop?: boolean;
-    BackdropProps?: Partial<import("../Backdrop").BackdropProps<"div", {}>>;
-    onClose?: (e: React.SyntheticEvent<Element, Event>, detail: import("./Modal.types").CloseDetail) => void;
-    disableScrollLock?: boolean;
-    disablePortal?: boolean;
-    keepMounted?: boolean;
-} & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: React.Ref<HTMLDivElement>;
-}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default Modal;

package/es/Modal/Modal.types.d.ts

@@ -1,20 +0,0 @@
-import { OverrideProps } from '@bifrostui/types';
-import React, { SyntheticEvent } from 'react';
-import { BackdropProps } from '../Backdrop/Backdrop.types';
-import { PortalProps } from '../Portal/Portal.types';
-export type CloseDetail = {
-    from?: string;
-};
-export type ModalProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        open?: boolean;
-        container?: PortalProps['container'];
-        hideBackdrop?: boolean;
-        BackdropProps?: Partial<BackdropProps>;
-        onClose?: (e: SyntheticEvent, detail: CloseDetail) => void;
-        disableScrollLock?: boolean;
-        disablePortal?: PortalProps['disablePortal'];
-        keepMounted?: boolean;
-    };
-    defaultComponent: D;
-}, D>;

package/es/Modal/index.d.ts

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

package/es/NavBar/NavBar.css

@@ -1,61 +0,0 @@
-.bui-navbar {
-  --width: var(--bui-navbar-width, 100%);
-  --height: var(--bui-navbar-height, 45px);
-  --padding: var(--bui-navbar-padding, 0 8px);
-  --icon-size: var(--bui-navbar-icon-size, 24px);
-  --icon-font-size: var(--bui-navbar-icon-font-size, var(--bui-title-size-3));
-  --background-color: var(--bui-navbar-background-color, var(--bui-color-white));
-  --border-bottom: var(--bui-navbar-border-bottom, none);
-  --z-index: var(--bui-navbar-z-index, auto);
-  --title-max-width: var(--bui-navbar-title-max-width, 60%);
-  position: relative;
-  width: var(--width);
-  height: var(--height);
-  box-sizing: border-box;
-  padding: var(--padding);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--background-color);
-  border-bottom: var(--border-bottom);
-  user-select: none;
-  z-index: var(--z-index);
-  font-family: var(--bui-font-family);
-}
-.bui-navbar-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.bui-navbar-title {
-  max-width: var(--title-max-width);
-  padding: var(--padding);
-  font-size: var(--bui-title-size-2);
-  width: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.bui-navbar-left,
-.bui-navbar-right {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  font-size: var(--icon-font-size);
-}
-.bui-navbar-left {
-  justify-content: flex-start;
-  text-align: left;
-}
-.bui-navbar-right {
-  justify-content: flex-end;
-  text-align: right;
-  align-self: stretch;
-}
-.bui-navbar-icon {
-  font-size: var(--icon-size);
-}
-.bui-navbar-placeholder {
-  width: 100%;
-}

package/es/NavBar/NavBar.d.ts

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

package/es/Picker/Picker.types.d.ts

@@ -1,121 +0,0 @@
-import React from 'react';
-import { OverrideProps } from '@bifrostui/types';
-import { DrawerProps } from '../Drawer/Drawer.types';
-export interface IPickerOptionItem {
-    /**
-     * 选项的文字内容
-     */
-    label?: string | number;
-    /**
-     * 选项对应唯一的值
-     */
-    value: string | number;
-    /**
-     * 是否禁用
-     */
-    disabled?: boolean;
-}
-export type ICascadePickerChildOptionItem = IPickerOptionItem & {
-    /**
-     * 用于级联选项，子节点可能没有children属性
-     */
-    children?: ICascadePickerChildOptionItem[];
-};
-export type ICascadePickerOptionItem = IPickerOptionItem & {
-    /**
-     * 用于级联选项，根节点必须含有children属性
-     */
-    children: ICascadePickerChildOptionItem[];
-};
-export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> = OverrideProps<{
-    props: P & {
-        /**
-         * 是否展示选择器
-         * @default false
-         */
-        open?: boolean;
-        /**
-         * 标题
-         */
-        title?: string;
-        /**
-         * 确认文本内容
-         */
-        confirmText?: string;
-        /**
-         * 取消文本内容
-         */
-        cancelText?: string;
-        /**
-         * 列表数据
-         * @default []
-         */
-        options?: IPickerOptionItem[][] | ICascadePickerOptionItem[];
-        /**
-         * 选中的值
-         */
-        value?: (string | number)[];
-        /**
-         * 内部内容DOM节点上的Props
-         */
-        contentProps?: React.HTMLAttributes<HTMLDivElement>;
-        /**
-         * 点击确认按钮时候回调
-         */
-        onConfirm?: (e: React.MouseEvent<HTMLDivElement>, data: {
-            value: (string | number)[];
-            options: ICascadePickerChildOptionItem[][];
-        }) => void;
-        /**
-         * 选项值变更时的回调
-         */
-        onOptionChange?: (e: React.TransitionEvent<HTMLDivElement>, data: {
-            value: (string | number)[];
-            options: ICascadePickerChildOptionItem[][];
-            currentOption: ICascadePickerChildOptionItem;
-            columnIndex: number;
-        }) => void;
-        /**
-         * 点击取消按钮时候回调
-         */
-        onCancel?: (e: React.MouseEvent<HTMLDivElement>) => void;
-        /**
-         * 关闭选择器时执行
-         */
-        onClose?: (e: React.MouseEvent<HTMLDivElement>, data: {
-            from: string;
-            value: (string | number)[];
-            options: ICascadePickerChildOptionItem[][];
-        }) => void;
-    };
-    defaultComponent: D;
-}, D>;
-export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 单列面板的列表数据
-         * @default []
-         */
-        options?: ICascadePickerChildOptionItem[];
-        /**
-         * 选中值
-         */
-        value?: string | number;
-        /**
-         * 列索引
-         */
-        columnIndex?: number;
-        /**
-         * Piker组件的样式，PickerPanel的主题定制与css变量传入的Tokens有关，需要透传计算
-         */
-        pickerStyle?: React.CSSProperties;
-        /**
-         * 选择选项时的回调
-         */
-        onSelect?: (e: React.TransitionEvent<HTMLDivElement>, data: {
-            columnOption: ICascadePickerChildOptionItem;
-            columnIndex: number;
-        }) => void;
-    };
-    defaultComponent: D;
-}, D>;

package/es/Picker/utils.d.ts

@@ -1,29 +0,0 @@
-import { ICascadePickerOptionItem, ICascadePickerChildOptionItem } from './Picker.types';
-/**
- * 根据第一列数据判断选择器类型
- */
-export declare const pickerPanelType: (options?: any[]) => "multiple" | "single" | "cascade";
-/**
- * 格式化级联模式数据
- */
-export declare const formatCascade: (columns: ICascadePickerOptionItem[], values?: (number | string)[]) => ICascadePickerChildOptionItem[][];
-/**
- * 统一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[];
-};