@baishuyun/ui-base 2.2.0 → 2.2.2

package/dist/components/Editor/ToolbarPlugin/context/TextFormatsContext.d.ts

@@ -0,0 +1,17 @@
+export type TextFormatType = 'bold' | 'italic' | 'underline' | 'fontSize' | 'fontColor' | 'backgroundColor' | 'align';
+export type TextFormatsState = {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    fontSize: string;
+    fontColor: string;
+    backgroundColor: string;
+    align: 'left' | 'center' | 'right';
+    link?: {
+        link?: string;
+        linkText?: string;
+        newBlank?: boolean;
+    };
+};
+declare const TextFormatsContext: import('react').Context<TextFormatsState | null>;
+export default TextFormatsContext;

package/dist/components/Editor/ToolbarPlugin/context/useTextFormatsContext.d.ts

@@ -0,0 +1 @@
+export declare const useTextFormatsContext: () => import('./TextFormatsContext').TextFormatsState;

package/dist/components/Editor/ToolbarPlugin/interface.d.ts

@@ -0,0 +1,32 @@
+import { ButtonType } from './Buttons/index';
+
+
+export interface ToolbarButtonProps {
+  /**
+   * @description 根据外部配置传入你想要渲染的 toolbar 按钮
+   * @description 如果数组为空，则会渲染默认的 toolbar 按钮
+   */
+  config?: Array<{
+    /**
+     * @description 分组的唯一标识
+     */
+    key: string;
+    /**
+     * @description 按钮组名称
+     */
+    buttons: Array<
+      | ButtonType
+      | {
+          name: ButtonType;
+          /**
+           * @description 各个 button 组件的 props
+           */
+          props?: Record<string, any>;
+        }
+    >;
+  }>;
+  /**
+   * @description 自定义样式
+   */
+  style?: React.CSSProperties;
+}

package/dist/components/Editor/commands/ImageCommands.d.ts

@@ -0,0 +1,8 @@
+import { LexicalCommand } from 'lexical';
+export interface InsertImagePayload {
+    src: string;
+    altText?: string;
+    width?: number;
+    height?: number;
+}
+export declare const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;

package/dist/components/Editor/constants/index.d.ts

@@ -0,0 +1,41 @@
+export declare const FONT_SIZES: readonly [{
+    readonly label: "12";
+    readonly value: "12px";
+}, {
+    readonly label: "14";
+    readonly value: "14px";
+}, {
+    readonly label: "16";
+    readonly value: "16px";
+}, {
+    readonly label: "18";
+    readonly value: "18px";
+}, {
+    readonly label: "20";
+    readonly value: "20px";
+}, {
+    readonly label: "22";
+    readonly value: "22px";
+}, {
+    readonly label: "24";
+    readonly value: "24px";
+}, {
+    readonly label: "28";
+    readonly value: "28px";
+}, {
+    readonly label: "32";
+    readonly value: "32px";
+}, {
+    readonly label: "36";
+    readonly value: "36px";
+}, {
+    readonly label: "64";
+    readonly value: "64px";
+}, {
+    readonly label: "128";
+    readonly value: "128px";
+}];
+export declare const DEFAULT_FONT_SIZE = "16px";
+export declare const DEFAULT_FONT_COLOR = "#000";
+export declare const DEFAULT_BACKGROUND_COLOR = "transparent";
+export type FontSize = (typeof FONT_SIZES)[number]['value'];

package/dist/components/Editor/hooks/useTextFormatsState.d.ts

@@ -0,0 +1,2 @@
+import { TextFormatsState } from '../ToolbarPlugin/context/TextFormatsContext';
+export declare function useTextFormatsState(): TextFormatsState;

package/dist/components/Editor/index.d.ts

@@ -0,0 +1,2 @@
+export { Editor as default } from './Editor';
+export type { EditorProps } from './interface';

package/dist/components/Editor/interface.d.ts

@@ -0,0 +1,62 @@
+import { EditorState } from 'lexical';
+import { ToolbarButtonProps } from './ToolbarPlugin/interface.d';
+
+
+export type EditorProps = {
+  /**
+   * 编辑器容器高度
+   */
+  height?: number;
+  /**
+   * 编辑器内容变化回调
+   */
+  onChange: (
+    { text, html }: { text: string; html: string | null },
+    editorState: EditorState
+  ) => void;
+
+  toolbar?: {
+    /**
+     * toolbar 配置
+     */
+    config?: ToolbarButtonProps['config'];
+
+    style?: React.CSSProperties;
+  };
+
+  /**
+   * 编辑器受控内容
+   */
+  value?: string | null;
+
+  /**
+   * @description 占位符文本
+   * @todo 待实现
+   */
+  placeholder?: string;
+
+  /**
+   * @description 是否自动聚焦，默认为 false
+   */
+  autoFocus?: boolean;
+  /**
+   * @description 是否禁用
+   * @todo 待实现
+   */
+  disabled?: boolean;
+  /**
+   * @description 错误处理回调
+   * @todo 待实现
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * @description 图片上传配置
+   * @todo 待实现
+   */
+  imageUpload?: {
+    maxSize?: number; // 最大文件大小
+    accept?: string[]; // 支持的文件类型
+    customUpload?: (file: File) => Promise<string>; // 自定义上传函数
+  };
+};

package/dist/components/Editor/nodes/ExtendedTextNode.d.ts

@@ -0,0 +1,11 @@
+import { DOMConversionMap, NodeKey, TextNode, SerializedTextNode, LexicalNode } from 'lexical';
+export declare class ExtendedTextNode extends TextNode {
+    constructor(text: string, key?: NodeKey);
+    static getType(): string;
+    static clone(node: ExtendedTextNode): ExtendedTextNode;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedTextNode): TextNode;
+    isSimpleText(): boolean;
+}
+export declare function $createExtendedTextNode(text?: string): ExtendedTextNode;
+export declare function $isExtendedTextNode(node: LexicalNode | null | undefined): node is ExtendedTextNode;

package/dist/components/Editor/nodes/ImageComponent.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { NodeKey } from 'lexical';
+interface ImageComponentProps {
+    src: string;
+    altText: string;
+    width?: number;
+    height?: number;
+    nodeKey: NodeKey;
+}
+declare const ImageComponent: React.FC<ImageComponentProps>;
+export default ImageComponent;

package/dist/components/Editor/nodes/ImageNode.d.ts

@@ -0,0 +1,50 @@
+import { DecoratorNode, NodeKey, LexicalNode, SerializedLexicalNode, Spread, DOMConversionOutput } from 'lexical';
+import { ReactNode } from 'react';
+export interface ImagePayload {
+    src: string;
+    altText?: string;
+    width?: number;
+    height?: number;
+    key?: NodeKey;
+}
+export type SerializedImageNode = Spread<{
+    src: string;
+    altText?: string;
+    width?: number;
+    height?: number;
+}, SerializedLexicalNode>;
+export declare class ImageNode extends DecoratorNode<ReactNode> {
+    __src: string;
+    __altText: string;
+    __width?: number;
+    __height?: number;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    constructor(src: string, altText?: string, width?: number, height?: number, key?: NodeKey);
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    exportDOM(): {
+        element: HTMLImageElement;
+    };
+    getSrc(): string;
+    getAltText(): string;
+    getWidth(): number | undefined;
+    getHeight(): number | undefined;
+    setSrc(src: string): void;
+    setAltText(altText: string): void;
+    setWidthAndHeight(width: number, height: number): void;
+    decorate(): ReactNode;
+    static importDOM(): {
+        img: () => {
+            conversion: typeof convertImageElement;
+            priority: 0;
+        };
+    };
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    exportJSON(): SerializedImageNode;
+    isInline(): boolean;
+}
+export declare function $createImageNode({ src, altText, width, height, key }: ImagePayload): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
+declare function convertImageElement(domNode: Node): null | DOMConversionOutput;
+export {};

package/dist/components/Editor/plugins/EnterKeyPlugin.d.ts

@@ -0,0 +1 @@
+export default function EnterKeyPlugin(): null;

package/dist/components/Editor/plugins/ImagePlugin.d.ts

@@ -0,0 +1 @@
+export default function ImagePlugin(): null;

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,5 @@
+interface LoadingProps {
+    tip?: string;
+}
+declare const Loading: ({ tip }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
+export { Loading };

package/dist/components/Loading/index.d.ts

@@ -0,0 +1 @@
+export { Loading as default } from './Loading';

package/dist/components/Select/context/SelectContext.d.ts

@@ -16,6 +16,18 @@ export interface SelectStateContextType {
      * 设置是否打开浮层面板
      */
     setIsOpen: (isOpen: boolean) => void;
+    /**
+     * 根据 value 获取已选缓存的 option（当当前 options 不包含该项时用于回显兜底）
+     */
+    getCachedOptionByValue?: (value: string | number) => DefaultOptionType | undefined;
+    /**
+     * 下拉面板内的搜索值（上移至顶层以便在面板隐藏后仍保留）
+     */
+    searchValue?: string;
+    /**
+     * 设置搜索值
+     */
+    setSearchValue?: (value: string) => void;
 }
 declare const SelectStateContext: import('react').Context<SelectStateContextType>;
 export interface SelectConfigContextType {

package/dist/components/Tabs/Tab/Tab.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TabsProps } from '../interface';
+interface TabProps extends Pick<TabsProps, 'color' | 'type'> {
+    label: React.ReactNode;
+    active?: boolean;
+    onClick?: (key: string) => void;
+    tabKey: string;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/dist/components/Tabs/TabList/TabList.d.ts

@@ -0,0 +1,4 @@
+import { default as React, PropsWithChildren } from 'react';
+import { TabsProps } from '../interface';
+declare const TabList: React.FC<PropsWithChildren & Pick<TabsProps, 'activeKey' | 'className' | 'style' | 'items'>>;
+export default TabList;

package/dist/components/Tabs/TabList/useTabIndicator.d.ts

@@ -0,0 +1,19 @@
+import { TabsProps } from '../interface';
+interface IndicatorStyle {
+    width: number;
+    left: number;
+    ready: boolean;
+}
+interface UseTabIndicatorProps {
+    activeKey?: string;
+    showIndicator: boolean;
+    type: string;
+    wrapperRef: React.RefObject<HTMLDivElement>;
+    items?: TabsProps['items'];
+}
+interface UseTabIndicatorReturn {
+    indicatorStyle: IndicatorStyle;
+    handleTabClick: (tabElement: HTMLElement) => void;
+}
+export declare const useTabIndicator: ({ activeKey, type, showIndicator, wrapperRef, items, }: UseTabIndicatorProps) => UseTabIndicatorReturn;
+export {};

package/dist/components/Tabs/TabList/useTabScroll.d.ts

@@ -0,0 +1,16 @@
+interface UseTabScrollProps {
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+interface UseTabScrollReturn {
+    listRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLDivElement>;
+    showControls: boolean;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    translateX: number;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+}
+export declare const useTabScroll: ({ disabled, children }: UseTabScrollProps) => UseTabScrollReturn;
+export {};

package/dist/components/Tabs/TabPanel/TabPanel.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { TabsProps } from '../interface';
+interface TabPanelProps {
+    items: NonNullable<TabsProps['items']>;
+    activeKey?: string;
+    className?: string;
+}
+declare const TabPanel: React.FC<TabPanelProps>;
+export default TabPanel;

package/dist/components/Tabs/TabSelect/TabSelect.d.ts

@@ -0,0 +1,3 @@
+import { TabSelectProps } from './interface';
+declare const TabSelect: React.FC<TabSelectProps>;
+export default TabSelect;

package/dist/components/Tabs/TabSelect/interface.d.ts

@@ -0,0 +1,26 @@
+import { TabType } from '../constants';
+
+
+type TabSelectProps = {
+  /**
+   * @description 下拉选中的 tab 类型
+   */
+  value?: TabType;
+
+  /**
+   * @description 切换 tab 类型的回调
+   */
+  onChange?: (value: TabType) => void;
+
+  /**
+   * @description 初始化选中 tab 类型，如果没有设置 value，则默认选中第一个
+   */
+  defaultValue?: TabType;
+
+  /**
+   * @description 主题色
+   */
+  color?: string;
+};
+
+export type { TabSelectProps };

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,3 @@
+import { TabsProps } from './interface';
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/components/Tabs/constants.d.ts

@@ -0,0 +1,9 @@
+declare const TABS_TYPE: {
+    readonly LINE: "line";
+    readonly CARD: "card";
+    readonly FILLED_CARD: "filled-card";
+    readonly BADGE_CARD: "badge-card";
+};
+type TabType = (typeof TABS_TYPE)[keyof typeof TABS_TYPE];
+export type { TabType };
+export { TABS_TYPE };

package/dist/components/Tabs/context/TabContext.d.ts

@@ -0,0 +1,7 @@
+import { TabType } from '../constants';
+declare const TabContext: import('react').Context<{
+    color?: string;
+    type?: TabType;
+    disabled?: boolean;
+}>;
+export default TabContext;

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Tabs';
+export { default as TabSelect } from './TabSelect/TabSelect';
+export { default as TabPanel } from './TabPanel/TabPanel';
+export { TABS_TYPE, type TabType } from './constants';

package/dist/components/Tabs/interface.d.ts

@@ -0,0 +1,61 @@
+import { TabType } from './constants';
+
+
+interface TabsProps {
+  items?: {
+    /**
+     * @description 页签的唯一标识
+     */
+    key: string;
+    /**
+     * @description 页签的标签
+     */
+    label: React.ReactNode;
+    /**
+     * @description 页签的内容
+     */
+    children?: React.ReactNode;
+  }[];
+
+  /**
+   * @description 当前激活的页签的唯一标识
+   */
+  activeKey?: string;
+
+  /**
+   * @description 初始化选中面板的 key，如果没有设置 activeKey，则默认选中第一个
+   */
+  defaultActiveKey?: string;
+
+  /**
+   * @description 切换页签的回调
+   */
+  onChange?: (key: string) => void;
+
+  /**
+   * @description 主题色
+   */
+  color?: string;
+
+  /**
+   * @description 页签的基本样式，可选 line、card 、 filled-card、 badge-card 类型
+   */
+  type?: TabType;
+
+  /**
+   * 禁止卡片交互效果
+   */
+  disabled?: boolean;
+
+  /**
+   * @description 自定义样式类
+   */
+  className?: string;
+
+  /**
+   * @description 自定义样式
+   */
+  style?: React.CSSProperties;
+}
+
+export type { TabsProps };

package/dist/components/index.d.ts

@@ -8,3 +8,9 @@ export { Select } from './Select';
 export { Tree } from './Tree';
 export { default as Checkbox } from './CheckBox';
 export { default as Ratio } from './Radio';
+export { default as Tabs } from './Tabs';
+export { default as DropDown } from './DropDown';
+export { default as Loading } from './Loading';
+export { NotFoundContent } from './NotFoundContent';
+export { default as TabSelect } from './Tabs/TabSelect/TabSelect';
+export { default as InputTag } from './InputTag';

package/dist/index.js

@@ -1,71 +1,82 @@
-import { I as W } from "./Icon/Icon-BlkVlKDd.js";
+import { I as W } from "./Icon/Icon-CkHAU1fA.js";
 import { jsx as p } from "react/jsx-runtime";
 import { useMemo as a, useCallback as u } from "react";
-import { z as s, L as f } from "./vendors/index-ByQkttKA.js";
-import { C as Y } from "./Card/Card-CXULQNHa.js";
-import { M as _ } from "./Modal/Modal-BZTEGGa0.js";
-import { C as te } from "./ColorPicker/ColorPicker-CwFsihkL.js";
+import { z as i, L as f } from "./vendors/useLocale-DgqW9M3h.js";
+import { C as Y } from "./Card/Card-DHOMkrEE.js";
+import { M as _ } from "./Modal/Modal-oRJ-Almn.js";
+import { C as oe } from "./ColorPicker/ColorPicker-049kyJn6.js";
 import { S as ae } from "./Segmented/Segmented-UgzW78Ey.js";
-import { S as re } from "./Select/Select-C3abXG27.js";
-import { T as ie } from "./vendors/Tree-CCY2gtpG.js";
+import { S as re } from "./Select/Select-7KGHOKs6.js";
+import { T as se } from "./vendors/Tree-C-8x1jXV.js";
 import { default as ce } from "./CheckBox/index.js";
 import { default as de } from "./Radio/index.js";
-const C = "Please select", U = "search", I = "No search data", S = "Select All", k = "Please enter the content", L = "No Data", h = "No Data Found", x = "Data Searching...", A = "Select All by Search", P = "Left Align", y = "Center Align", N = "Right Align", R = "Underline", F = "Link", v = "Hyper Link", z = "Show Content", b = "Link Address", w = "Open in New Tab", D = "Confirm", M = "Cancel", T = "Cancel Link", E = "preset color", O = { linkTip: "Support https://link or @form alias", bold: "Bold", italic: "Italic", fontSize: "Font Size", fontColor: "Font Color", fill: "fill", alignment: "Alignment", centerAlign: "Center Align", rightAlign: "Right Align", uploadImage: "Upload Image", imageUrl: "Image URL", imageUrlPlaceholder: "Please enter image URL", imageUrlRequired: "Please enter image URL", imageUrlInvalid: "Please enter a valid image URL", imageUrlNote: "Note: Enter image URL to insert image", inputImageUrl: "Enter Image URL", uploadImageNote: "Note: Single image size cannot exceed 1MB", uploadImageText: "Click or drag to upload image", previewImage: "Preview Image", underline: "Underline", imageFormatOnly: "Only image formats are supported", uploadImageFirst: "Please upload image first", imageAddSuccess: "Image added successfully", operationFailed: "Operation failed", onlyImageFormatsSupported: "Only image formats are supported", pleaseUploadImageFirst: "Please upload image first", imageSizeNote: "Image size cannot exceed 1MB", clickOrDragToUpload: "Click or drag to upload image", enterImageUrl: "Enter image URL", pleaseEnterImageUrl: "Please enter image URL", pleaseEnterValidImageUrl: "Please enter a valid image URL", linkAddressEmpty: "Link address cannot be empty" }, B = "Picture", V = "Custom Color", j = "Add Picture", q = {
+import { a as pe, T as ue } from "./Tabs/TabSelect-bKB0Qe9F.js";
+import { D as Ce } from "./DropDown/DropDown-BkTY-3y0.js";
+import { L as Ie } from "./Loading/Loading-CEB4PLUE.js";
+import { N as Le } from "./NotFoundContent/NotFoundContent-h0-oIXlk.js";
+import { I as ke } from "./InputTag/InputTag-S9hHXsyQ.js";
+const C = "Please select", U = "search", I = "No search data", x = "Select All", L = "Please enter the content", S = "No Data", k = "No Data Found", h = "Data Searching...", A = "Select All by Search", P = "Left Align", y = "Center Align", N = "Right Align", R = "Underline", F = "Link", T = "Hyper Link", D = "Show Content", b = "Link Address", v = "Open in New Tab", z = "Confirm", w = "Cancel", M = "Cancel Link", E = "preset color", O = { linkTip: "Support https://link or @form alias", bold: "Bold", italic: "Italic", fontSize: "Font Size", fontColor: "Font Color", fill: "fill", alignment: "Alignment", centerAlign: "Center Align", rightAlign: "Right Align", uploadImage: "Upload Image", imageUrl: "Image URL", imageUrlPlaceholder: "Please enter image URL", imageUrlRequired: "Please enter image URL", imageUrlInvalid: "Please enter a valid image URL", imageUrlNote: "Note: Enter image URL to insert image", inputImageUrl: "Enter Image URL", uploadImageNote: "Note: Single image size cannot exceed 1MB", uploadImageText: "Click or drag to upload image", previewImage: "Preview Image", underline: "Underline", imageFormatOnly: "Only image formats are supported", uploadImageFirst: "Please upload image first", imageAddSuccess: "Image added successfully", operationFailed: "Operation failed", onlyImageFormatsSupported: "Only image formats are supported", pleaseUploadImageFirst: "Please upload image first", imageSizeNote: "Image size cannot exceed 1MB", clickOrDragToUpload: "Click or drag to upload image", enterImageUrl: "Enter image URL", pleaseEnterImageUrl: "Please enter image URL", pleaseEnterValidImageUrl: "Please enter a valid image URL", linkAddressEmpty: "Link address cannot be empty" }, B = "Picture", V = "Custom Color", j = "Add Picture", q = {
   select: C,
   search: U,
   noFindData: I,
-  allSelect: S,
-  context: k,
-  noData: L,
-  noDataFound: h,
-  dataSearching: x,
+  allSelect: x,
+  context: L,
+  noData: S,
+  noDataFound: k,
+  dataSearching: h,
   allSelectedBySearch: A,
   leftAlign: P,
   centerAlign: y,
   rightAlign: N,
   underline: R,
   link: F,
-  hyperLink: v,
-  showContent: z,
+  hyperLink: T,
+  showContent: D,
   linkAddress: b,
-  openInNewTab: w,
-  confirm: D,
-  cancel: M,
-  cancelLink: T,
+  openInNewTab: v,
+  confirm: z,
+  cancel: w,
+  cancelLink: M,
   presetColors: E,
   editor: O,
   picture: B,
   customColor: V,
   addPicture: j
-}, J = ({ children: c, locale: t = "zh-CN", messages: n = {} }) => {
-  const r = a(() => ({ "zh-CN": s, "en-US": q, ...n }), [n]), l = a(() => r[t] || s, [t, r]), i = u(
-    (o) => {
-      const d = o.split(".");
+}, J = ({ children: c, locale: o = "zh-CN", messages: n = {} }) => {
+  const r = a(() => ({ "zh-CN": i, "en-US": q, ...n }), [n]), l = a(() => r[o] || i, [o, r]), s = u(
+    (t) => {
+      const d = t.split(".");
       let e = l;
       for (const g of d)
         if (e = e[g], !e)
-          return console.warn(`[LocaleProvider] Cannot find translation for key: ${o}`), o;
-      return typeof e == "string" ? e : o;
+          return console.warn(`[LocaleProvider] Cannot find translation for key: ${t}`), t;
+      return typeof e == "string" ? e : t;
     },
     [l]
   ), m = a(
     () => ({
-      locale: t,
-      t: i
+      locale: o,
+      t: s
     }),
-    [t, i]
+    [o, s]
   );
   return /* @__PURE__ */ p(f.Provider, { value: m, children: c });
 };
 export {
   Y as Card,
   ce as Checkbox,
-  te as ColorPicker,
+  oe as ColorPicker,
+  Ce as DropDown,
   W as Icon,
+  ke as InputTag,
+  Ie as Loading,
   J as LocaleProvider,
   _ as Modal,
+  Le as NotFoundContent,
   de as Ratio,
   ae as Segmented,
   re as Select,
-  ie as Tree
+  pe as TabSelect,
+  ue as Tabs,
+  se as Tree
 };