taro-uno-ui 0.9.0 → 1.0.0

package/dist/components/navigation/Menu/Menu.styles.d.ts

@@ -0,0 +1,143 @@
+import type { CSSProperties } from 'react';
+import type { MenuItemStyles } from './Menu.types';
+/** Menu组件样式配置接口 */
+interface MenuStyleConfig {
+    /** 基础样式 */
+    container: CSSProperties;
+    /** 水平菜单容器 */
+    horizontalContainer: CSSProperties;
+    /** 菜单项基础样式 */
+    item: CSSProperties;
+    /** 选中状态 */
+    selected: CSSProperties;
+    /** 禁用状态 */
+    disabled: CSSProperties;
+    /** 悬停状态 */
+    hover: CSSProperties;
+    /** 危险操作 */
+    danger: CSSProperties;
+    /** 危险操作悬停 */
+    dangerHover: CSSProperties;
+    /** 子菜单样式 */
+    subMenu: CSSProperties;
+    /** 子菜单标题 */
+    subMenuTitle: CSSProperties;
+    /** 子菜单内容 */
+    subMenuContent: CSSProperties;
+    /** 分组标题 */
+    groupTitle: CSSProperties;
+    /** 图标样式 */
+    icon: CSSProperties;
+    /** 标签样式 */
+    label: CSSProperties;
+    /** 额外信息样式 */
+    extra: CSSProperties;
+    /** 徽章样式 */
+    badge: CSSProperties;
+    /** 展开图标样式 */
+    expandIcon: CSSProperties;
+    /** 展开图标打开状态 */
+    expandIconOpen: CSSProperties;
+    /** 折叠按钮样式 */
+    collapseButton: CSSProperties;
+    /** 折叠按钮悬停 */
+    collapseButtonHover: CSSProperties;
+    /** 分隔线 */
+    divider: CSSProperties;
+    /** 暗色主题 */
+    dark: {
+        container: CSSProperties;
+        item: CSSProperties;
+        selected: CSSProperties;
+        hover: CSSProperties;
+        groupTitle: CSSProperties;
+        subMenuContent: CSSProperties;
+    };
+    /** 尺寸变体 */
+    sizes: {
+        small: {
+            item: CSSProperties;
+            label: CSSProperties;
+            icon: CSSProperties;
+            badge: CSSProperties;
+        };
+        medium: {
+            item: CSSProperties;
+            label: CSSProperties;
+            icon: CSSProperties;
+            badge: CSSProperties;
+        };
+        large: {
+            item: CSSProperties;
+            label: CSSProperties;
+            icon: CSSProperties;
+            badge: CSSProperties;
+        };
+    };
+}
+/** 样式函数接口 */
+interface MenuStyleFunctions {
+    /** 获取尺寸样式 */
+    getSizeStyles: (size: 'small' | 'medium' | 'large') => MenuItemStyles;
+    /** 获取主题样式 */
+    getThemeStyles: (theme: 'light' | 'dark') => MenuItemStyles;
+    /** 获取模式样式 */
+    getModeStyles: (mode: 'vertical' | 'horizontal' | 'inline') => MenuItemStyles;
+    /** 获取菜单项样式 */
+    getItemStyle: (props: {
+        size?: 'small' | 'medium' | 'large';
+        theme?: 'light' | 'dark';
+        mode?: 'vertical' | 'horizontal' | 'inline';
+        selected?: boolean;
+        disabled?: boolean;
+        danger?: boolean;
+        isSubMenu?: boolean;
+        isGroup?: boolean;
+        level?: number;
+        collapsed?: boolean;
+    }) => CSSProperties;
+    /** 获取子菜单样式 */
+    getSubMenuStyle: (props: {
+        size?: 'small' | 'medium' | 'large';
+        theme?: 'light' | 'dark';
+        mode?: 'vertical' | 'horizontal' | 'inline';
+        open?: boolean;
+        level?: number;
+        collapsed?: boolean;
+    }) => CSSProperties;
+    /** 获取容器样式 */
+    getContainerStyle: (props: {
+        mode?: 'vertical' | 'horizontal' | 'inline';
+        theme?: 'light' | 'dark';
+        size?: 'small' | 'medium' | 'large';
+        collapsed?: boolean;
+        style?: CSSProperties;
+    }) => CSSProperties;
+    /** 获取图标样式 */
+    getIconStyle: (props: {
+        size?: 'small' | 'medium' | 'large';
+        selected?: boolean;
+        disabled?: boolean;
+    }) => CSSProperties;
+    /** 获取标签样式 */
+    getLabelStyle: (props: {
+        size?: 'small' | 'medium' | 'large';
+        selected?: boolean;
+        disabled?: boolean;
+        danger?: boolean;
+    }) => CSSProperties;
+    /** 获取徽章样式 */
+    getBadgeStyle: (props: {
+        size?: 'small' | 'medium' | 'large';
+        theme?: 'light' | 'dark';
+    }) => CSSProperties;
+    /** 获取折叠按钮样式 */
+    getCollapseButtonStyle: (props: {
+        size?: 'small' | 'medium' | 'large';
+        theme?: 'light' | 'dark';
+        collapsed?: boolean;
+    }) => CSSProperties;
+}
+/** Menu组件样式 */
+export type { MenuStyleConfig, MenuStyleFunctions };
+export declare const menuStyles: MenuStyleConfig & MenuStyleFunctions;

package/dist/components/navigation/Menu/Menu.types.d.ts

@@ -0,0 +1,210 @@
+import type { ReactNode } from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+/** 菜单项类型 */
+export interface MenuItem {
+    /** 菜单项唯一标识 */
+    key: string;
+    /** 菜单项标题 */
+    label: ReactNode;
+    /** 菜单项图标 */
+    icon?: ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 子菜单 */
+    children?: MenuItem[];
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 路由路径 */
+    path?: string;
+    /** 外部链接 */
+    href?: string;
+    /** 目标窗口 */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** 是否危险操作 */
+    danger?: boolean;
+    /** 是否分组标题 */
+    isGroup?: boolean;
+    /** 工具提示 */
+    tooltip?: string;
+    /** 额外信息 */
+    extra?: ReactNode;
+    /** 徽章 */
+    badge?: number | string;
+    /** 是否选中 */
+    selected?: boolean;
+    /** 是否展开 */
+    expanded?: boolean;
+}
+/** 菜单模式 */
+export type MenuMode = 'vertical' | 'horizontal' | 'inline';
+/** 菜单主题 */
+export type MenuTheme = 'light' | 'dark';
+/** 菜单尺寸 */
+export type MenuSize = 'small' | 'medium' | 'large';
+/** 触发方式 */
+export type MenuTrigger = 'hover' | 'click';
+/** 菜单组件属性 */
+export interface MenuProps {
+    /** 菜单项数据 */
+    items: MenuItem[];
+    /** 当前选中的菜单项 */
+    selectedKeys?: string[];
+    /** 默认选中的菜单项 */
+    defaultSelectedKeys?: string[];
+    /** 展开的子菜单 */
+    openKeys?: string[];
+    /** 默认展开的子菜单 */
+    defaultOpenKeys?: string[];
+    /** 菜单模式 */
+    mode?: MenuMode;
+    /** 菜单主题 */
+    theme?: MenuTheme;
+    /** 菜单尺寸 */
+    size?: MenuSize;
+    /** 子菜单触发方式 */
+    trigger?: MenuTrigger;
+    /** 是否只展开一个父级菜单 */
+    accordion?: boolean;
+    /** 是否内联缩进 */
+    inlineIndent?: number;
+    /** 是否可折叠 */
+    collapsible?: boolean;
+    /** 是否折叠 */
+    collapsed?: boolean;
+    /** 折叠图标 */
+    _collapsedIcon?: ReactNode;
+    /** 展开图标 */
+    expandIcon?: ReactNode | ((_props: {
+        isOpen: boolean;
+        isSubMenu: boolean;
+    }) => ReactNode);
+    /** 是否显示右键菜单 */
+    contextMenu?: boolean;
+    /** 菜单项点击事件 */
+    onClick?: (_key: string, item: MenuItem, event: ITouchEvent) => void;
+    /** 菜单项选中变化事件 */
+    onSelect?: (_selectedKeys: string[], item: MenuItem | null) => void;
+    /** 子菜单展开/收起事件 */
+    onOpenChange?: (_openKeys: string[]) => void;
+    /** 折叠状态变化事件 */
+    onCollapse?: (_collapsed: boolean) => void;
+    /** 右键菜单事件 */
+    onContextMenu?: (_key: string, item: MenuItem, event: ITouchEvent) => void;
+    /** 自定义渲染菜单项 */
+    itemRender?: (_item: MenuItem) => ReactNode;
+    /** 自定义渲染子菜单标题 */
+    subMenuTitleRender?: (_item: MenuItem) => ReactNode;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 无障碍支持 */
+    accessible?: boolean;
+    /** 无障碍标签 */
+    accessibilityLabel?: string;
+    /** 无障碍角色 */
+    accessibilityRole?: 'navigation' | 'menu' | 'menubar';
+    /** 无障碍状态 */
+    accessibilityState?: {
+        disabled?: boolean;
+        selected?: boolean;
+        expanded?: boolean;
+        busy?: boolean;
+        checked?: boolean;
+    };
+}
+/** 菜单引用接口 */
+export interface MenuRef {
+    /** 获取当前选中的菜单项 */
+    getSelectedKeys: () => string[];
+    /** 设置选中的菜单项 */
+    setSelectedKeys: (_keys: string[]) => void;
+    /** 获取展开的子菜单 */
+    getOpenKeys: () => string[];
+    /** 设置展开的子菜单 */
+    setOpenKeys: (_keys: string[]) => void;
+    /** 折叠/展开菜单 */
+    setCollapsed: (_collapsed: boolean) => void;
+    /** 获取菜单项数据 */
+    getItem: (_key: string) => MenuItem | null;
+    /** 添加菜单项 */
+    addItem: (_item: MenuItem, parentKey?: string) => void;
+    /** 删除菜单项 */
+    removeItem: (_key: string) => void;
+    /** 更新菜单项 */
+    updateItem: (_key: string, newItem: Partial<MenuItem>) => void;
+    /** 展开所有 */
+    expandAll: () => void;
+    /** 折叠所有 */
+    collapseAll: () => void;
+    /** 获取菜单元素 */
+    element: any;
+    /** 聚焦菜单 */
+    focus: () => void;
+    /** 失焦菜单 */
+    blur: () => void;
+}
+/** 菜单配置接口 */
+export interface MenuConfig {
+    /** 默认菜单模式 */
+    defaultMode?: MenuMode;
+    /** 默认菜单主题 */
+    defaultTheme?: MenuTheme;
+    /** 默认菜单尺寸 */
+    defaultSize?: MenuSize;
+    /** 默认触发方式 */
+    defaultTrigger?: MenuTrigger;
+    /** 默认内联缩进 */
+    defaultInlineIndent?: number;
+    /** 是否默认可折叠 */
+    defaultCollapsible?: boolean;
+    /** 是否默认手风琴模式 */
+    defaultAccordion?: boolean;
+    /** 动画持续时间 */
+    animationDuration?: number;
+    /** 响应式断点 */
+    responsiveBreakpoint?: number;
+    /** 最大展开深度 */
+    maxExpandDepth?: number;
+}
+/** 默认菜单配置 */
+export declare const DEFAULT_MENU_CONFIG: MenuConfig;
+/** 菜单项样式类型 */
+export interface MenuItemStyles {
+    /** 容器样式 */
+    container: React.CSSProperties;
+    /** 菜单项样式 */
+    item: React.CSSProperties;
+    /** 选中样式 */
+    selected: React.CSSProperties;
+    /** 禁用样式 */
+    disabled: React.CSSProperties;
+    /** 悬停样式 */
+    hover: React.CSSProperties;
+    /** 危险样式 */
+    danger: React.CSSProperties;
+    /** 子菜单样式 */
+    subMenu: React.CSSProperties;
+    /** 分组标题样式 */
+    groupTitle: React.CSSProperties;
+    /** 图标样式 */
+    icon: React.CSSProperties;
+    /** 标签样式 */
+    label: React.CSSProperties;
+    /** 额外信息样式 */
+    extra: React.CSSProperties;
+    /** 徽章样式 */
+    badge: React.CSSProperties;
+    /** 折叠按钮样式 */
+    collapseButton: React.CSSProperties;
+    /** 响应式样式 */
+    responsive: React.CSSProperties;
+}
+/** 菜单尺寸样式映射 */
+export type MenuSizeStyles = Record<MenuSize, Partial<MenuItemStyles>>;
+/** 菜单主题样式映射 */
+export type MenuThemeStyles = Record<MenuTheme, Partial<MenuItemStyles>>;
+/** 菜单模式样式映射 */
+export type MenuModeStyles = Record<MenuMode, Partial<MenuItemStyles>>;

package/dist/components/navigation/Menu/Menu.utils.d.ts

@@ -0,0 +1,54 @@
+import type { MenuItem } from './Menu.types';
+/**
+ * 菜单工具函数
+ */
+export declare class MenuUtils {
+    /**
+     * 查找菜单项
+     */
+    static findItem(items: MenuItem[], key: string): MenuItem | null;
+    /**
+     * 查找父级菜单项
+     */
+    static findParentItem(items: MenuItem[], key: string): MenuItem | null;
+    /**
+     * 获取菜单项路径
+     */
+    static getItemPath(items: MenuItem[], key: string): MenuItem[];
+    /**
+     * 展开菜单项的所有父级
+     */
+    static expandParents(items: MenuItem[], key: string): string[];
+    /**
+     * 扁平化菜单项
+     */
+    static flattenItems(items: MenuItem[], parentKey?: string): MenuItem[];
+    /**
+     * 过滤菜单项
+     */
+    static filterItems(items: MenuItem[], keyword: string): MenuItem[];
+    /**
+     * 排序菜单项
+     */
+    static sortItems(items: MenuItem[], sortBy?: string): MenuItem[];
+    /**
+     * 验证菜单项
+     */
+    static validateItem(item: MenuItem): boolean;
+    /**
+     * 生成唯一键
+     */
+    static generateKey(item: MenuItem): string;
+    /**
+     * 格式化菜单数据
+     */
+    static formatMenuData(data: any[]): MenuItem[];
+    /**
+     * 处理菜单项点击 - 适配Taro环境
+     */
+    static handleItemClick(item: MenuItem, event: any, onClick?: (key: string, item: MenuItem, event: any) => void): void;
+    /**
+     * 安全地处理外部链接跳转 - 适配Taro环境
+     */
+    static handleExternalLink(item: MenuItem): void;
+}

package/dist/components/navigation/Menu/MenuItem.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+import type { MenuItem } from './Menu.types';
+interface MenuItemProps {
+    /** 菜单项数据 */
+    item: MenuItem;
+    /** 菜单项层级 */
+    level: number;
+    /** 菜单模式 */
+    mode: 'vertical' | 'horizontal' | 'inline';
+    /** 菜单主题 */
+    theme: 'light' | 'dark';
+    /** 菜单尺寸 */
+    size: 'small' | 'medium' | 'large';
+    /** 是否选中 */
+    selected: boolean;
+    /** 触发方式 */
+    trigger: 'hover' | 'click';
+    /** 是否折叠 */
+    collapsed: boolean;
+    /** 内联缩进 */
+    inlineIndent: number;
+    /** 点击事件 */
+    onItemClick: (key: string, event: ITouchEvent) => void;
+    /** 自定义渲染 */
+    itemRender?: (item: MenuItem) => React.ReactNode;
+}
+/**
+ * 菜单项组件
+ */
+export declare const MenuItemComponent: React.FC<MenuItemProps>;
+export {};

package/dist/components/navigation/Menu/SubMenu.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+import type { MenuItem } from './Menu.types';
+interface SubMenuProps {
+    /** 子菜单项数据 */
+    item: MenuItem;
+    /** 菜单项层级 */
+    level: number;
+    /** 菜单模式 */
+    mode: 'vertical' | 'horizontal' | 'inline';
+    /** 菜单主题 */
+    theme: 'light' | 'dark';
+    /** 菜单尺寸 */
+    size: 'small' | 'medium' | 'large';
+    /** 是否展开 */
+    open: boolean;
+    /** 触发方式 */
+    trigger: 'hover' | 'click';
+    /** 是否折叠 */
+    collapsed: boolean;
+    /** 内联缩进 */
+    inlineIndent: number;
+    /** 切换展开状态 */
+    onToggle: (key: string) => void;
+    /** 点击事件 */
+    onItemClick: (key: string, event: ITouchEvent) => void;
+    /** 展开图标 */
+    expandIcon?: React.ReactNode | ((props: {
+        isOpen: boolean;
+        isSubMenu: boolean;
+    }) => React.ReactNode);
+    /** 自定义渲染子菜单标题 */
+    subMenuTitleRender?: (item: MenuItem) => React.ReactNode;
+    /** 自定义渲染菜单项 */
+    itemRender?: (item: MenuItem) => React.ReactNode;
+}
+/**
+ * 子菜单组件
+ */
+export declare const SubMenuComponent: React.FC<SubMenuProps>;
+export {};

package/dist/components/navigation/Menu/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Taro-Uno Menu Component
+ * 导航菜单组件统一导出文件
+ */
+export { Menu } from './Menu';
+export { MenuItemComponent } from './MenuItem';
+export { SubMenuComponent } from './SubMenu';
+export { MenuUtils } from './Menu.utils';
+export type { MenuProps, MenuRef, MenuItem, MenuMode, MenuTheme, MenuSize, MenuTrigger, MenuConfig, MenuItemStyles, MenuSizeStyles, MenuThemeStyles, MenuModeStyles, } from './Menu.types';
+export { menuStyles } from './Menu.styles';
+export { DEFAULT_MENU_CONFIG } from './Menu.types';
+export { MENU_VERSION, MENU_CONFIG, MenuLibraryUtils } from './Menu.constants';
+declare const _default: {
+    Menu: () => null;
+    Utils: {
+        getVersion: () => string;
+        getConfig: () => {
+            version: string;
+            platform: string;
+            features: {
+                multiple: boolean;
+                accordion: boolean;
+                collapsible: boolean;
+                contextMenu: boolean;
+                accessibility: boolean;
+                theme: boolean;
+                responsive: boolean;
+                typescript: boolean;
+            };
+        };
+        formatMenuData: (data: any[]) => import("./Menu.types").MenuItem[];
+        findMenuItem: (items: import("./Menu.types").MenuItem[], key: string) => import("./Menu.types").MenuItem | null;
+        getMenuItemPath: (items: import("./Menu.types").MenuItem[], key: string) => import("./Menu.types").MenuItem[];
+        expandParentKeys: (items: import("./Menu.types").MenuItem[], key: string) => string[];
+        validateMenuItem: (item: import("./Menu.types").MenuItem) => boolean;
+    };
+    Styles: import("./Menu.styles").MenuStyleConfig & import("./Menu.styles").MenuStyleFunctions;
+    CONFIG: {
+        version: string;
+        platform: string;
+        features: {
+            multiple: boolean;
+            accordion: boolean;
+            collapsible: boolean;
+            contextMenu: boolean;
+            accessibility: boolean;
+            theme: boolean;
+            responsive: boolean;
+            typescript: boolean;
+        };
+    };
+    VERSION: string;
+};
+export default _default;

package/dist/components/navigation/NavBar/NavBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { NavBarProps, NavBarRef } from './NavBar.types';
+/** NavBar组件 */
+export declare const NavBarComponent: React.ForwardRefExoticComponent<NavBarProps & React.RefAttributes<NavBarRef>>;
+/** 导出NavBar组件 */
+export declare const NavBar: React.ForwardRefExoticComponent<NavBarProps & React.RefAttributes<NavBarRef>>;
+export default NavBarComponent;

package/dist/components/navigation/NavBar/NavBar.styles.d.ts

@@ -0,0 +1,114 @@
+/**
+ * NavBar样式工具
+ */
+export declare const navBarStyles: {
+    /** 容器样式 */
+    readonly container: {
+        readonly position: "relative";
+        readonly width: "100%";
+        readonly backgroundColor: "#ffffff";
+        readonly transition: "all 0.3s ease";
+    };
+    /** 固定定位样式 */
+    readonly fixed: {
+        readonly position: "fixed";
+        readonly top: 0;
+        readonly left: 0;
+        readonly right: 0;
+        readonly zIndex: 100;
+    };
+    /** 透明背景样式 */
+    readonly transparent: {
+        readonly backgroundColor: "transparent";
+    };
+    /** 边框样式 */
+    readonly border: {
+        readonly borderBottom: "1px solid #f0f0f0";
+    };
+    /** 占位元素样式 */
+    readonly placeholder: {
+        readonly height: "44px";
+        readonly backgroundColor: "transparent";
+    };
+    /** 内容区域样式 */
+    readonly content: {
+        readonly height: "44px";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly padding: "0 16px";
+        readonly boxSizing: "border-box";
+    };
+    /** 安全区域适配样式 */
+    readonly safeArea: {
+        readonly paddingTop: "44px";
+    };
+    /** 左侧区域样式 */
+    readonly left: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly minWidth: "60px";
+        readonly maxWidth: "120px";
+    };
+    /** 右侧区域样式 */
+    readonly right: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "flex-end";
+        readonly minWidth: "60px";
+        readonly maxWidth: "120px";
+    };
+    /** 中间区域样式 */
+    readonly center: {
+        readonly flex: 1;
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly padding: "0 16px";
+        readonly overflow: "hidden";
+    };
+    /** 标题样式 */
+    readonly title: {
+        readonly fontSize: "17px";
+        readonly fontWeight: "600";
+        readonly color: "#000000";
+        readonly textAlign: "center";
+        readonly overflow: "hidden";
+        readonly textOverflow: "ellipsis";
+        readonly whiteSpace: "nowrap";
+    };
+    /** 返回按钮样式 */
+    readonly backArrow: {
+        readonly padding: "8px 12px";
+        readonly backgroundColor: "transparent";
+        readonly border: "none";
+        readonly borderRadius: "4px";
+        readonly cursor: "pointer";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly transition: "background-color 0.3s ease";
+    };
+    /** 返回按钮悬停样式 */
+    readonly backArrowHover: {
+        readonly backgroundColor: "rgba(0, 0, 0, 0.05)";
+    };
+    /** 返回图标样式 */
+    readonly backIcon: {
+        readonly fontSize: "16px";
+        readonly color: "#000000";
+    };
+    /** 暗色主题样式 */
+    readonly dark: {
+        readonly backgroundColor: "#1a1a1a";
+        readonly '& .taro-uno-navbar__title': {
+            readonly color: "#ffffff";
+        };
+        readonly '& .taro-uno-navbar__back-icon': {
+            readonly color: "#ffffff";
+        };
+        readonly '&.taro-uno-navbar--border': {
+            readonly borderBottomColor: "#333333";
+        };
+    };
+};