taro-uno-ui 1.0.0 → 1.0.2

package/src/components/layout/Space/Space.tsx

@@ -1,203 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View } from '@tarojs/components';
-import type { ITouchEvent } from '@tarojs/components';
-import { spaceStyles } from './Space.styles';
-import type { SpaceProps, SpaceRef, SpaceDirection, SpaceAlign, SpaceWrap, SpaceSize, SpaceGap } from './Space.types';
-
-/** Space组件 */
-export const SpaceComponent = forwardRef<SpaceRef, SpaceProps>((props, ref) => {
-  const {
-    children,
-    direction = 'horizontal',
-    align = 'center',
-    wrap = 'nowrap',
-    size = 'default',
-    gap,
-    block = false,
-    separator,
-    compact = false,
-    split = false,
-    maxCount,
-    ellipsis,
-    className,
-    style,
-    onClick,
-    onItemClick,
-    responsive,
-  } = props;
-
-  const spaceRef = useRef<any>(null);
-  const [internalDirection, setInternalDirection] = useState<SpaceDirection>(direction);
-  const [internalAlign, setInternalAlign] = useState<SpaceAlign>(align);
-  const [internalWrap, setInternalWrap] = useState<SpaceWrap>(wrap);
-  const [internalSize, setInternalSize] = useState<SpaceSize>(size);
-  const [internalGap, setInternalGap] = useState<SpaceGap>(gap || size);
-  const [visibleItems, setVisibleItems] = useState<number>(maxCount || Infinity);
-
-  // 更新内部状态
-  useEffect(() => {
-    setInternalDirection(direction);
-  }, [direction]);
-
-  useEffect(() => {
-    setInternalAlign(align);
-  }, [align]);
-
-  useEffect(() => {
-    setInternalWrap(wrap);
-  }, [wrap]);
-
-  useEffect(() => {
-    setInternalSize(size);
-  }, [size]);
-
-  useEffect(() => {
-    setInternalGap(gap || size);
-  }, [gap, size]);
-
-  useEffect(() => {
-    if (maxCount) {
-      setVisibleItems(maxCount);
-    }
-  }, [maxCount]);
-
-  // 处理点击事件
-  const handleClick = useCallback(
-    (event: any) => {
-      onClick?.(event);
-    },
-    [onClick],
-  );
-
-  // 处理子元素点击事件
-  const handleItemClick = useCallback(
-    (index: number, event: ITouchEvent) => {
-      onItemClick?.(index, event);
-    },
-    [onItemClick],
-  );
-
-  // 处理子元素悬停事件
-
-  // 渲染子元素
-  const renderChildren = () => {
-    if (!children) return null;
-
-    const childrenArray = React.Children.toArray(children);
-    const visibleChildren = childrenArray.slice(0, visibleItems);
-
-    return visibleChildren.map((child, index) => {
-      const isLast = index === visibleChildren.length - 1;
-      const showSeparator = separator && !isLast && !compact;
-
-      return (
-        <React.Fragment key={index}>
-          <View
-            className="taro-uno-space__item"
-            style={spaceStyles['getItemStyle'](index, visibleChildren.length, split)}
-            onClick={(e: ITouchEvent) => handleItemClick(index, e)}
-          >
-            {child}
-          </View>
-          {showSeparator && (
-            <View className="taro-uno-space__separator" style={spaceStyles['getSeparatorStyle']()}>
-              {separator === true ? '|' : separator}
-            </View>
-          )}
-        </React.Fragment>
-      );
-    });
-  };
-
-  // 渲染省略内容
-  const renderEllipsis = () => {
-    if (!ellipsis || visibleItems >= React.Children.count(children)) return null;
-
-    return (
-      <View className="taro-uno-space__ellipsis" style={spaceStyles['getEllipsisStyle']()}>
-        {ellipsis}
-      </View>
-    );
-  };
-
-  // 计算样式
-  const spaceStyle = spaceStyles['getBaseStyle']({
-    direction: internalDirection,
-    align: internalAlign,
-    wrap: internalWrap,
-    size: internalSize,
-    gap: internalGap,
-    block,
-    compact,
-    split,
-    maxCount,
-    style: style || {},
-  });
-
-  // 计算响应式样式
-  const responsiveStyle = responsive ? spaceStyles['getResponsiveStyle'](responsive) : {};
-
-  // 计算类名
-  const spaceClassName = spaceStyles['getClassName']({
-    direction: internalDirection,
-    align: internalAlign,
-    wrap: internalWrap,
-    size: internalSize,
-    block,
-    compact,
-    split,
-    className: className || '',
-  });
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: spaceRef.current,
-      getDirection: () => internalDirection,
-      getAlign: () => internalAlign,
-      getWrap: () => internalWrap,
-      getGap: () => internalGap,
-      getSize: () => internalSize,
-      setDirection: (newDirection: SpaceDirection) => {
-        setInternalDirection(newDirection);
-      },
-      setAlign: (newAlign: SpaceAlign) => {
-        setInternalAlign(newAlign);
-      },
-      setWrap: (newWrap: SpaceWrap) => {
-        setInternalWrap(newWrap);
-      },
-      setGap: (newGap: SpaceGap) => {
-        setInternalGap(newGap);
-      },
-      setSize: (newSize: SpaceSize) => {
-        setInternalSize(newSize);
-      },
-      scrollIntoView: (options?: ScrollIntoViewOptions) => {
-        // Try to access DOM element if available
-        const element = spaceRef.current;
-        if (element && typeof element.scrollIntoView === 'function') {
-          element.scrollIntoView(options);
-        } else if (element && element.$el) {
-          // Handle Taro component ref
-          element.$el?.scrollIntoView?.(options);
-        }
-      },
-    }),
-    [internalDirection, internalAlign, internalWrap, internalGap, internalSize],
-  );
-
-  return (
-    <View ref={spaceRef} className={spaceClassName} style={{ ...spaceStyle, ...responsiveStyle }} onClick={handleClick}>
-      {renderChildren()}
-      {renderEllipsis()}
-    </View>
-  );
-});
-
-/** Space组件显示名称 */
-SpaceComponent.displayName = 'Space';
-
-/** 导出Space组件 */
-export const Space = SpaceComponent;

package/src/components/layout/Space/Space.types.ts

@@ -1,92 +0,0 @@
-import { ReactNode } from 'react';
-import type { ITouchEvent } from '@tarojs/components';
-import { BaseComponentProps, Size, CSSUnit } from '../../../types';
-
-/** Space组件方向 */
-export type SpaceDirection = 'horizontal' | 'vertical';
-
-/** Space组件对齐方式 */
-export type SpaceAlign = 'start' | 'center' | 'end' | 'stretch';
-
-/** Space组件换行方式 */
-export type SpaceWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-
-/** Space组件尺寸 */
-export type SpaceSize = Size | number | `${number}${CSSUnit}`;
-
-/** Space组件间距 */
-export type SpaceGap = SpaceSize | [SpaceSize, SpaceSize];
-
-/** Space组件分隔符 */
-export type SpaceSeparator = ReactNode | boolean;
-
-/** Space组件引用 */
-export interface SpaceRef {
-  /** 获取元素引用 */
-  element: any | null;
-  /** 获取当前方向 */
-  getDirection: () => SpaceDirection;
-  /** 获取当前对齐方式 */
-  getAlign: () => SpaceAlign;
-  /** 获取当前换行方式 */
-  getWrap: () => SpaceWrap;
-  /** 获取当前间距 */
-  getGap: () => SpaceGap;
-  /** 获取当前尺寸 */
-  getSize: () => SpaceSize;
-  /** 设置方向 */
-  setDirection: (_direction: SpaceDirection) => void;
-  /** 设置对齐方式 */
-  setAlign: (_align: SpaceAlign) => void;
-  /** 设置换行方式 */
-  setWrap: (_wrap: SpaceWrap) => void;
-  /** 设置间距 */
-  setGap: (_gap: SpaceGap) => void;
-  /** 设置尺寸 */
-  setSize: (_size: SpaceSize) => void;
-  /** 滚动到视图 */
-  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
-}
-
-/** Space组件属性 */
-export interface SpaceProps extends BaseComponentProps {
-  /** 子元素 */
-  children?: ReactNode;
-  /** 间距方向 */
-  direction?: SpaceDirection;
-  /** 对齐方式 */
-  align?: SpaceAlign;
-  /** 换行方式 */
-  wrap?: SpaceWrap;
-  /** 间距大小 */
-  size?: SpaceSize;
-  /** 间距 */
-  gap?: SpaceGap;
-  /** 是否自动换行 */
-  block?: boolean;
-  /** 分隔符 */
-  separator?: SpaceSeparator;
-  /** 是否紧凑 */
-  compact?: boolean;
-  /** 是否等分 */
-  split?: boolean;
-  /** 最大行数（垂直方向）或列数（水平方向） */
-  maxCount?: number;
-  /** 超出最大行数/列数时显示的省略内容 */
-  ellipsis?: ReactNode;
-  /** 点击事件 */
-  onClick?: (_event: React.MouseEvent) => void;
-  /** 子元素点击事件 */
-  _onItemHover?: (_index: number, event: React.MouseEvent) => void;
-  /** 子元素点击事件 */
-  onItemClick?: (_index: number, event: ITouchEvent) => void;
-  /** 响应式断点 */
-  responsive?: {
-    xs?: Partial<SpaceProps>;
-    sm?: Partial<SpaceProps>;
-    md?: Partial<SpaceProps>;
-    lg?: Partial<SpaceProps>;
-    xl?: Partial<SpaceProps>;
-    xxl?: Partial<SpaceProps>;
-  };
-}

package/src/components/layout/Space/index.tsx

@@ -1,12 +0,0 @@
-export { Space, SpaceComponent } from './Space';
-export type {
-  SpaceProps,
-  SpaceRef,
-  SpaceDirection,
-  SpaceAlign,
-  SpaceWrap,
-  SpaceSize,
-  SpaceGap,
-  SpaceSeparator,
-} from './Space.types';
-export { spaceStyles } from './Space.styles';

package/src/components/layout/index.tsx

@@ -1,78 +0,0 @@
-/**
- * Taro-Uno 布局组件库
- * 提供用于页面布局的 UI 组件，包括网格、行列、容器、间距等
- */
-
-// 导出 Grid 组件
-export { Grid } from './Grid';
-export type { GridProps, GridRef, GridAlign, GridJustify, GridGap, GridCols } from './Grid/Grid.types';
-export { gridStyles } from './Grid/Grid.styles';
-
-// 导出 Layout 组件
-export { Layout } from './Layout';
-export type { LayoutProps, LayoutRef } from './Layout/Layout.types';
-export { layoutStyles } from './Layout/Layout.styles';
-
-// 导出 Space 组件
-export { Space } from './Space';
-export type {
-  SpaceProps,
-  SpaceRef,
-  SpaceDirection,
-  SpaceAlign,
-  SpaceWrap,
-  SpaceSize,
-  SpaceGap,
-  SpaceSeparator,
-} from './Space/Space.types';
-export { spaceStyles } from './Space/Space.styles';
-
-// 导出 Affix 组件
-export { Affix } from './Affix';
-export type { AffixProps, AffixRef, AffixOffset, AffixTarget } from './Affix/Affix.types';
-export { affixStyles } from './Affix/Affix.styles';
-
-// 导出 Row 组件
-export { Row } from './Row';
-export type { RowProps, RowRef, RowAlign, RowJustify, RowGutter } from './Row/Row.types';
-export { rowStyles } from './Row/Row.styles';
-
-// 导出 Col 组件
-export { Col } from './Col';
-export type { ColProps, ColRef, ColSpan, ColOffset, ColOrder } from './Col/Col.types';
-export { colStyles } from './Col/Col.styles';
-
-// 导出 Container 组件
-export { Container } from './Container';
-export type { ContainerProps, ContainerRef, ContainerSize, ContainerAlign } from './Container/Container.types';
-export { containerStyles } from './Container/Container.styles';
-
-// 布局组件工具函数
-export const LayoutUtils = {
-  /**
-   * 计算响应式断点
-   */
-  getBreakpoint: (width: number): string => {
-    if (width < 640) return 'xs';
-    if (width < 768) return 'sm';
-    if (width < 1024) return 'md';
-    if (width < 1280) return 'lg';
-    if (width < 1536) return 'xl';
-    return 'xxl';
-  },
-
-  /**
-   * 计算网格列数
-   */
-  calculateGridCols: (containerWidth: number, itemWidth: number): number => {
-    return Math.floor(containerWidth / itemWidth);
-  },
-
-  /**
-   * 计算间距
-   */
-  calculateSpacing: (size: string | number): string => {
-    if (typeof size === 'number') return `${size}px`;
-    return size;
-  },
-};

package/src/components/navigation/Menu/Menu.constants.ts

@@ -1,69 +0,0 @@
-import { MenuUtils } from './Menu.utils';
-import type { MenuItem } from './Menu.types';
-
-// 菜单组件版本
-export const MENU_VERSION = '1.0.0';
-
-// 菜单组件配置
-export const MENU_CONFIG = {
-  version: MENU_VERSION,
-  platform: 'taro',
-  features: {
-    multiple: true,
-    accordion: true,
-    collapsible: true,
-    contextMenu: true,
-    accessibility: true,
-    theme: true,
-    responsive: true,
-    typescript: true,
-  },
-};
-
-// 菜单组件工具函数
-export const MenuLibraryUtils = {
-  /**
-   * 获取菜单组件版本
-   */
-  getVersion: (): string => MENU_VERSION,
-
-  /**
-   * 获取菜单组件配置
-   */
-  getConfig: () => MENU_CONFIG,
-
-  /**
-   * 格式化菜单数据
-   */
-  formatMenuData: (data: any[]) => {
-    return MenuUtils.formatMenuData(data);
-  },
-
-  /**
-   * 查找菜单项
-   */
-  findMenuItem: (items: MenuItem[], key: string) => {
-    return MenuUtils.findItem(items, key);
-  },
-
-  /**
-   * 获取菜单项路径
-   */
-  getMenuItemPath: (items: MenuItem[], key: string) => {
-    return MenuUtils.getItemPath(items, key);
-  },
-
-  /**
-   * 展开菜单项的所有父级
-   */
-  expandParentKeys: (items: MenuItem[], key: string) => {
-    return MenuUtils.expandParents(items, key);
-  },
-
-  /**
-   * 验证菜单项
-   */
-  validateMenuItem: (item: MenuItem) => {
-    return MenuUtils.validateItem(item);
-  },
-};

package/src/components/navigation/Menu/Menu.stories.tsx

@@ -1,107 +0,0 @@
-import { Menu } from './Menu';
-
-export default {
-  title: 'Navigation/Menu',
-  component: Menu,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Menu 组件是一个功能强大的导航菜单组件，支持多种模式、主题和交互功能。',
-      },
-    },
-  },
-  argTypes: {
-    mode: {
-      control: 'select',
-      options: ['vertical', 'horizontal', 'inline'],
-    },
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-    },
-    trigger: {
-      control: 'select',
-      options: ['hover', 'click'],
-    },
-    accordion: {
-      control: 'boolean',
-    },
-    collapsible: {
-      control: 'boolean',
-    },
-    collapsed: {
-      control: 'boolean',
-    },
-  },
-};
-
-const menuItems = [
-  { key: '1', title: '首页', icon: 'home', path: '/home' },
-  {
-    key: '2',
-    title: '产品',
-    icon: 'product',
-    children: [
-      { key: '2-1', title: '产品列表', path: '/products/list' },
-      { key: '2-2', title: '产品详情', path: '/products/detail' },
-      { key: '2-3', title: '新增产品', path: '/products/add' },
-    ],
-  },
-  {
-    key: '3',
-    title: '服务',
-    icon: 'service',
-    children: [
-      { key: '3-1', title: '服务1', path: '/services/1' },
-      { key: '3-2', title: '服务2', path: '/services/2' },
-    ],
-  },
-  { key: '4', title: '关于我们', icon: 'about', path: '/about' },
-];
-
-export const Basic = {
-  args: {
-    items: menuItems,
-    defaultActiveKey: '1',
-    defaultOpenKeys: ['2'],
-  },
-};
-
-export const Horizontal = {
-  args: {
-    items: menuItems,
-    mode: 'horizontal',
-    defaultActiveKey: '1',
-  },
-};
-
-export const DarkTheme = {
-  args: {
-    items: menuItems,
-    theme: 'dark',
-    defaultActiveKey: '1',
-    defaultOpenKeys: ['2'],
-  },
-};
-
-export const Collapsible = {
-  args: {
-    items: menuItems,
-    collapsible: true,
-    defaultActiveKey: '1',
-    defaultOpenKeys: ['2'],
-  },
-};
-
-export const Accordion = {
-  args: {
-    items: menuItems,
-    accordion: true,
-    defaultActiveKey: '1',
-    defaultOpenKeys: ['2'],
-  },
-};