@guiwzh/small-design 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,215 @@
+import React$1, { ReactNode, FC, InputHTMLAttributes, ReactElement, CSSProperties, PropsWithChildren, RefObject } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ButtonSize = 'lg' | 'sm';
+type ButtonType = 'primary' | 'default' | 'danger' | 'link';
+interface BaseButtonProps {
+    className?: string;
+    disabled?: boolean;
+    size?: ButtonSize;
+    btnType?: ButtonType;
+    href?: string;
+}
+type NativeButtonProps = React$1.ButtonHTMLAttributes<HTMLElement>;
+type AnchorButtonProps = React$1.AnchorHTMLAttributes<HTMLElement>;
+type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps> & BaseButtonProps;
+declare const Button: React$1.FC<ButtonProps>;
+
+type Menumode = "horizontal" | "vertical";
+type SelectCallback = (Index: string, e: React$1.MouseEvent) => void;
+interface MenuProps {
+    defaultIndex?: string; /**默认 active 的菜单项的索引值 */
+    className?: string;
+    mode?: Menumode;
+    style?: React$1.CSSProperties;
+    onSelect?: SelectCallback;
+    children?: React$1.ReactNode;
+    defaultOpenSubMenus?: string[]; /**设置子菜单的默认打开 只在纵向模式下生效 */
+}
+
+interface SubMenuProps {
+    index?: string;
+    /**下拉菜单选项的文字 */
+    title: string;
+    /**下拉菜单选型的扩展类名 */
+    className?: string;
+    children?: ReactNode;
+}
+declare const SubMenu: FC<SubMenuProps>;
+
+interface MenuItemProps {
+    index?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: React$1.CSSProperties;
+    children?: React$1.ReactNode;
+}
+declare const MenuItem: React$1.FC<MenuItemProps>;
+
+type IMenuComponent = FC<MenuProps> & {
+    Item: FC<MenuItemProps>;
+    SubMenu: FC<SubMenuProps>;
+};
+declare const TransMenu: IMenuComponent;
+
+type InputSize = 'lg' | 'sm';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
+    /**是否禁用 Input */
+    disabled?: boolean;
+    /**设置 input 大小，支持 lg 或者是 sm */
+    size?: InputSize;
+    /**添加图标，在右侧悬浮添加一个图标，用于提示 */
+    icon?: IconProp;
+    /**添加前缀 用于配置一些固定组合 */
+    prepend?: string | ReactElement;
+    /**添加后缀 用于配置一些固定组合 */
+    append?: string | ReactElement;
+}
+/**
+ * Input 输入框 通过鼠标或键盘输入内容，是最基础的表单域的包装。
+ *
+ * ~~~js
+ * // 这样引用
+ * import { Input } from 'vikingship'
+ * ~~~
+ *
+ * 支持 HTMLInput 的所有基本属性
+ */
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface DataSourceType {
+    value: string;
+    [key: string]: unknown;
+}
+interface AutoCompletProps extends Omit<InputProps, 'onSelect' | 'onChange' | 'value'> {
+    value?: string;
+    fetchSuggestions: (string: string) => DataSourceType[] | Promise<DataSourceType[]>;
+    onSelect?: (item: DataSourceType) => void;
+    onChange?: (str: string) => void;
+    onEnterDown?: (item: DataSourceType) => void;
+    onError?: (error: unknown) => void;
+    renderOption?: (item: DataSourceType) => ReactElement;
+    debounceTime?: number;
+    expireTime?: number;
+}
+declare const AutoComplete: FC<AutoCompletProps>;
+
+type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
+interface IconProps extends FontAwesomeIconProps {
+    /** 支持框架主题 根据主题显示不同的颜色 */
+    theme?: ThemeProps;
+}
+/**
+ * 提供了一套常用的图标集合 基于 react-fontawesome。
+ *
+ * 支持 react-fontawesome的所有属性 可以在这里查询 https://github.com/FortAwesome/react-fontawesome#basic
+ *
+ * 支持 fontawesome 所有 free-solid-icons，可以在这里查看所有图标 https://fontawesome.com/icons?d=gallery&s=solid&m=free
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { Icon } from 'vikingship'
+ * ~~~
+ */
+declare const Icon: FC<IconProps>;
+
+interface UploadFile {
+    uid: string;
+    size: number;
+    name: string;
+    status?: "ready" | "error" | "success" | "uploading";
+    raw?: File;
+    response?: any;
+    percent?: number;
+    error?: any;
+}
+interface UploadProps {
+    action: string;
+    beforeUpload?: (file: File) => boolean | Promise<File>;
+    onprogress?: (percentage: number, file: UploadFile) => void;
+    onSuccess?: (data: any, file: UploadFile) => void;
+    onError?: (err: any, file: UploadFile) => void;
+    onChange?: (file: UploadFile) => void;
+    onRemove?: (file: UploadFile) => void;
+    onExceed?: (message: string) => void;
+    headers?: Record<string, string>;
+    name?: string;
+    data?: Record<string, string | Blob>;
+    withCredentials?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    children?: ReactNode;
+    drag?: boolean;
+    maxsize?: number;
+    maxnum?: number;
+    failednums?: number;
+    styleDrag?: React.CSSProperties;
+    styleButton?: React.CSSProperties;
+    styleUploadList?: React.CSSProperties;
+    limit?: number;
+}
+declare const Upload: FC<UploadProps>;
+
+interface ProgressProps {
+    percent: number;
+    strokeHeight?: number;
+    showText?: boolean;
+    style?: React$1.CSSProperties;
+    theme?: ThemeProps;
+}
+declare const Progress: FC<ProgressProps>;
+
+interface SignatureProps {
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+    onSave?: (dataUrl: string | undefined) => void;
+}
+declare const Signature: FC<SignatureProps>;
+
+type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right';
+type TransitionProps = CSSTransitionProps & {
+    animation?: AnimationName;
+    wrapper?: boolean;
+    children?: ReactNode;
+};
+declare const Transition: React$1.FC<TransitionProps>;
+
+interface VirtualListProps {
+    containerHeight: number;
+    itemHeight: number;
+    itemCount: number;
+    children: JSX.Element;
+}
+declare const VirtualList: FC<VirtualListProps>;
+
+interface LazyloadProps {
+    className?: string;
+    style?: CSSProperties;
+    placeholder?: ReactNode;
+    offset?: string | number;
+    width?: number | string;
+    height?: string | number;
+    onContentVisible?: () => void;
+    children: ReactNode;
+}
+declare const Lazyload: FC<LazyloadProps>;
+
+interface KeepAliveLayoutProps extends PropsWithChildren {
+    keepPaths: Array<string | RegExp>;
+    keepElements?: Record<string, ReactNode>;
+    dropByPath?: (path: string) => void;
+}
+type KeepAliveContextType = Omit<Required<KeepAliveLayoutProps>, "children">;
+declare const KeepAliveContext: React$1.Context<KeepAliveContextType>;
+declare function useKeepOutlet(): react_jsx_runtime.JSX.Element;
+declare const KeepAliveLayout: FC<KeepAliveLayoutProps>;
+
+declare function useDebounce<T>(value: T, delay?: number): T;
+
+declare function useClickOutside(ref: RefObject<HTMLElement>, handler: (event: MouseEvent) => void): void;
+
+export { type AutoCompletProps, AutoComplete, Button, type ButtonSize, type ButtonType, type DataSourceType, type IMenuComponent, Icon, type IconProps, Input, type InputProps, KeepAliveContext, KeepAliveLayout, Lazyload as LazyLoad, TransMenu as Menu, MenuItem, type MenuItemProps, type MenuProps, Progress, type ProgressProps, Signature, SubMenu, type SubMenuProps, type ThemeProps, Transition, Upload, type UploadFile, type UploadProps, VirtualList, useClickOutside, useDebounce, useKeepOutlet };

package/dist/index.d.ts

@@ -0,0 +1,215 @@
+import React$1, { ReactNode, FC, InputHTMLAttributes, ReactElement, CSSProperties, PropsWithChildren, RefObject } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ButtonSize = 'lg' | 'sm';
+type ButtonType = 'primary' | 'default' | 'danger' | 'link';
+interface BaseButtonProps {
+    className?: string;
+    disabled?: boolean;
+    size?: ButtonSize;
+    btnType?: ButtonType;
+    href?: string;
+}
+type NativeButtonProps = React$1.ButtonHTMLAttributes<HTMLElement>;
+type AnchorButtonProps = React$1.AnchorHTMLAttributes<HTMLElement>;
+type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps> & BaseButtonProps;
+declare const Button: React$1.FC<ButtonProps>;
+
+type Menumode = "horizontal" | "vertical";
+type SelectCallback = (Index: string, e: React$1.MouseEvent) => void;
+interface MenuProps {
+    defaultIndex?: string; /**默认 active 的菜单项的索引值 */
+    className?: string;
+    mode?: Menumode;
+    style?: React$1.CSSProperties;
+    onSelect?: SelectCallback;
+    children?: React$1.ReactNode;
+    defaultOpenSubMenus?: string[]; /**设置子菜单的默认打开 只在纵向模式下生效 */
+}
+
+interface SubMenuProps {
+    index?: string;
+    /**下拉菜单选项的文字 */
+    title: string;
+    /**下拉菜单选型的扩展类名 */
+    className?: string;
+    children?: ReactNode;
+}
+declare const SubMenu: FC<SubMenuProps>;
+
+interface MenuItemProps {
+    index?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: React$1.CSSProperties;
+    children?: React$1.ReactNode;
+}
+declare const MenuItem: React$1.FC<MenuItemProps>;
+
+type IMenuComponent = FC<MenuProps> & {
+    Item: FC<MenuItemProps>;
+    SubMenu: FC<SubMenuProps>;
+};
+declare const TransMenu: IMenuComponent;
+
+type InputSize = 'lg' | 'sm';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
+    /**是否禁用 Input */
+    disabled?: boolean;
+    /**设置 input 大小，支持 lg 或者是 sm */
+    size?: InputSize;
+    /**添加图标，在右侧悬浮添加一个图标，用于提示 */
+    icon?: IconProp;
+    /**添加前缀 用于配置一些固定组合 */
+    prepend?: string | ReactElement;
+    /**添加后缀 用于配置一些固定组合 */
+    append?: string | ReactElement;
+}
+/**
+ * Input 输入框 通过鼠标或键盘输入内容，是最基础的表单域的包装。
+ *
+ * ~~~js
+ * // 这样引用
+ * import { Input } from 'vikingship'
+ * ~~~
+ *
+ * 支持 HTMLInput 的所有基本属性
+ */
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface DataSourceType {
+    value: string;
+    [key: string]: unknown;
+}
+interface AutoCompletProps extends Omit<InputProps, 'onSelect' | 'onChange' | 'value'> {
+    value?: string;
+    fetchSuggestions: (string: string) => DataSourceType[] | Promise<DataSourceType[]>;
+    onSelect?: (item: DataSourceType) => void;
+    onChange?: (str: string) => void;
+    onEnterDown?: (item: DataSourceType) => void;
+    onError?: (error: unknown) => void;
+    renderOption?: (item: DataSourceType) => ReactElement;
+    debounceTime?: number;
+    expireTime?: number;
+}
+declare const AutoComplete: FC<AutoCompletProps>;
+
+type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
+interface IconProps extends FontAwesomeIconProps {
+    /** 支持框架主题 根据主题显示不同的颜色 */
+    theme?: ThemeProps;
+}
+/**
+ * 提供了一套常用的图标集合 基于 react-fontawesome。
+ *
+ * 支持 react-fontawesome的所有属性 可以在这里查询 https://github.com/FortAwesome/react-fontawesome#basic
+ *
+ * 支持 fontawesome 所有 free-solid-icons，可以在这里查看所有图标 https://fontawesome.com/icons?d=gallery&s=solid&m=free
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { Icon } from 'vikingship'
+ * ~~~
+ */
+declare const Icon: FC<IconProps>;
+
+interface UploadFile {
+    uid: string;
+    size: number;
+    name: string;
+    status?: "ready" | "error" | "success" | "uploading";
+    raw?: File;
+    response?: any;
+    percent?: number;
+    error?: any;
+}
+interface UploadProps {
+    action: string;
+    beforeUpload?: (file: File) => boolean | Promise<File>;
+    onprogress?: (percentage: number, file: UploadFile) => void;
+    onSuccess?: (data: any, file: UploadFile) => void;
+    onError?: (err: any, file: UploadFile) => void;
+    onChange?: (file: UploadFile) => void;
+    onRemove?: (file: UploadFile) => void;
+    onExceed?: (message: string) => void;
+    headers?: Record<string, string>;
+    name?: string;
+    data?: Record<string, string | Blob>;
+    withCredentials?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    children?: ReactNode;
+    drag?: boolean;
+    maxsize?: number;
+    maxnum?: number;
+    failednums?: number;
+    styleDrag?: React.CSSProperties;
+    styleButton?: React.CSSProperties;
+    styleUploadList?: React.CSSProperties;
+    limit?: number;
+}
+declare const Upload: FC<UploadProps>;
+
+interface ProgressProps {
+    percent: number;
+    strokeHeight?: number;
+    showText?: boolean;
+    style?: React$1.CSSProperties;
+    theme?: ThemeProps;
+}
+declare const Progress: FC<ProgressProps>;
+
+interface SignatureProps {
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+    onSave?: (dataUrl: string | undefined) => void;
+}
+declare const Signature: FC<SignatureProps>;
+
+type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right';
+type TransitionProps = CSSTransitionProps & {
+    animation?: AnimationName;
+    wrapper?: boolean;
+    children?: ReactNode;
+};
+declare const Transition: React$1.FC<TransitionProps>;
+
+interface VirtualListProps {
+    containerHeight: number;
+    itemHeight: number;
+    itemCount: number;
+    children: JSX.Element;
+}
+declare const VirtualList: FC<VirtualListProps>;
+
+interface LazyloadProps {
+    className?: string;
+    style?: CSSProperties;
+    placeholder?: ReactNode;
+    offset?: string | number;
+    width?: number | string;
+    height?: string | number;
+    onContentVisible?: () => void;
+    children: ReactNode;
+}
+declare const Lazyload: FC<LazyloadProps>;
+
+interface KeepAliveLayoutProps extends PropsWithChildren {
+    keepPaths: Array<string | RegExp>;
+    keepElements?: Record<string, ReactNode>;
+    dropByPath?: (path: string) => void;
+}
+type KeepAliveContextType = Omit<Required<KeepAliveLayoutProps>, "children">;
+declare const KeepAliveContext: React$1.Context<KeepAliveContextType>;
+declare function useKeepOutlet(): react_jsx_runtime.JSX.Element;
+declare const KeepAliveLayout: FC<KeepAliveLayoutProps>;
+
+declare function useDebounce<T>(value: T, delay?: number): T;
+
+declare function useClickOutside(ref: RefObject<HTMLElement>, handler: (event: MouseEvent) => void): void;
+
+export { type AutoCompletProps, AutoComplete, Button, type ButtonSize, type ButtonType, type DataSourceType, type IMenuComponent, Icon, type IconProps, Input, type InputProps, KeepAliveContext, KeepAliveLayout, Lazyload as LazyLoad, TransMenu as Menu, MenuItem, type MenuItemProps, type MenuProps, Progress, type ProgressProps, Signature, SubMenu, type SubMenuProps, type ThemeProps, Transition, Upload, type UploadFile, type UploadProps, VirtualList, useClickOutside, useDebounce, useKeepOutlet };