@meta-1/design 0.0.167 → 0.0.169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.167",
+  "version": "0.0.169",
   "keywords": [
     "easykit",
     "design",

package/src/components/uix/data-table/index.tsx

@@ -57,6 +57,7 @@ export interface DataTableProps<TData> {
   showColumnVisibility?: boolean;
   stickyColumns?: StickyColumnProps[];
   checkbox?: boolean;
+  onRowSelectionChange?: (selectedRows: TData[]) => void;
   rowActions?: DropdownMenuItemProps[] | ((cell: TData) => DropdownMenuItemProps[]);
   onRowActionClick?: (item: DropdownMenuItemProps, row: Row<TData>) => void;
   loading?: boolean;
@@ -161,6 +162,7 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     showColumnVisibility = true,
     rowActions,
     checkbox = false,
+    onRowSelectionChange,
     stickyColumns = [],
     onRowActionClick,
     filter,
@@ -284,6 +286,14 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     },
   });
 
+  // 当行选中状态改变时，通知外部
+  useEffect(() => {
+    if (checkbox && onRowSelectionChange) {
+      const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
+      onRowSelectionChange(selectedRows);
+    }
+  }, [rowSelection, checkbox, onRowSelectionChange, table]);
+
   const leftStickyColumns = useMemo<StickyColumnProps[]>(() => {
     const columns: StickyColumnProps[] = [];
     if (checkbox) {

package/src/components/uix/tags-input/README.md

@@ -0,0 +1,136 @@
+# TagsInput 组件
+
+一个功能丰富的标签输入组件，支持添加、删除标签，带有验证、最大数量限制等特性。
+
+## 功能特性
+
+- ✅ 受控/非受控模式
+- ✅ 键盘操作（Enter 添加，Backspace 删除）
+- ✅ 自定义分隔符（默认逗号）
+- ✅ 标签验证
+- ✅ 最大标签数量限制
+- ✅ 最大标签长度限制
+- ✅ 禁止重复标签
+- ✅ 自定义标签渲染
+- ✅ 完整的事件回调
+- ✅ 禁用状态
+- ✅ 自定义样式
+
+## 基础用法
+
+```tsx
+import { TagsInput } from "@meta-1/design";
+
+function App() {
+  const [tags, setTags] = useState<string[]>([]);
+
+  return (
+    <TagsInput
+      value={tags}
+      onChange={setTags}
+      placeholder="输入标签后按 Enter..."
+    />
+  );
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| value | `string[]` | - | 受控模式的标签值 |
+| defaultValue | `string[]` | `[]` | 非受控模式的默认值 |
+| onChange | `(value: string[]) => void` | - | 标签变化回调 |
+| placeholder | `string` | - | 输入框占位符 |
+| className | `string` | - | 容器类名 |
+| inputClassName | `string` | - | 输入框类名 |
+| tagClassName | `string` | - | 标签类名 |
+| maxTags | `number` | - | 最大标签数量 |
+| maxLength | `number` | - | 单个标签最大长度 |
+| allowDuplicates | `boolean` | `false` | 是否允许重复标签 |
+| separator | `string \| RegExp` | `","` | 分隔符 |
+| validate | `(tag: string) => boolean` | - | 标签验证函数 |
+| disabled | `boolean` | `false` | 是否禁用 |
+| onTagAdd | `(tag: string) => void` | - | 添加标签回调 |
+| onTagRemove | `(tag: string) => void` | - | 删除标签回调 |
+| renderTag | `(tag: string, index: number, remove: () => void) => ReactNode` | - | 自定义标签渲染 |
+
+## 使用示例
+
+### 最大数量限制
+
+```tsx
+<TagsInput
+  maxTags={5}
+  value={tags}
+  onChange={setTags}
+  placeholder="最多 5 个标签"
+/>
+```
+
+### 自定义验证
+
+```tsx
+<TagsInput
+  validate={(tag) => /^[a-zA-Z0-9]+$/.test(tag)}
+  value={tags}
+  onChange={setTags}
+  placeholder="只允许字母和数字"
+/>
+```
+
+### 禁止重复
+
+```tsx
+<TagsInput
+  allowDuplicates={false}
+  value={tags}
+  onChange={setTags}
+  placeholder="不允许重复标签"
+/>
+```
+
+### 自定义标签渲染
+
+```tsx
+<TagsInput
+  renderTag={(tag, index, remove) => (
+    <div className="custom-tag">
+      #{tag}
+      <button onClick={remove}>×</button>
+    </div>
+  )}
+  value={tags}
+  onChange={setTags}
+/>
+```
+
+### 事件回调
+
+```tsx
+<TagsInput
+  onTagAdd={(tag) => console.log("添加:", tag)}
+  onTagRemove={(tag) => console.log("删除:", tag)}
+  value={tags}
+  onChange={setTags}
+/>
+```
+
+## 键盘操作
+
+- **Enter**: 添加当前输入的标签
+- **Backspace**: 当输入框为空时，删除最后一个标签
+- **分隔符** (默认逗号): 添加标签
+
+## 样式自定义
+
+组件支持通过 `className`、`inputClassName` 和 `tagClassName` 来自定义样式：
+
+```tsx
+<TagsInput
+  className="border-primary"
+  tagClassName="bg-primary text-primary-foreground"
+  inputClassName="text-lg"
+/>
+```
+

package/src/components/uix/tags-input/index.tsx

@@ -0,0 +1,212 @@
+import { forwardRef, type KeyboardEvent, useEffect, useRef, useState } from "react";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@meta-1/design/lib";
+
+export interface TagsInputProps {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  tagClassName?: string;
+  maxTags?: number;
+  maxLength?: number;
+  allowDuplicates?: boolean;
+  separator?: string | RegExp;
+  validate?: (tag: string) => boolean;
+  disabled?: boolean;
+  onTagAdd?: (tag: string) => void;
+  onTagRemove?: (tag: string) => void;
+  renderTag?: (tag: string, index: number, remove: () => void) => React.ReactNode;
+}
+
+export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref) => {
+  const {
+    value,
+    defaultValue = [],
+    onChange,
+    placeholder,
+    className,
+    inputClassName,
+    tagClassName,
+    maxTags,
+    maxLength,
+    allowDuplicates = false,
+    separator = ",",
+    validate,
+    disabled = false,
+    onTagAdd,
+    onTagRemove,
+    renderTag,
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [inputValue, setInputValue] = useState("");
+  const [tags, setTags] = useState<string[]>(value || defaultValue);
+
+  const isControlled = value !== undefined;
+  const currentTags = isControlled ? value : tags;
+
+  useEffect(() => {
+    if (isControlled) {
+      setTags(value);
+    }
+  }, [value, isControlled]);
+
+  const handleChange = (newTags: string[]) => {
+    if (!isControlled) {
+      setTags(newTags);
+    }
+    onChange?.(newTags);
+  };
+
+  const addTag = (tag: string) => {
+    const trimmedTag = tag.trim();
+
+    if (!trimmedTag) return;
+
+    // 验证标签
+    if (validate && !validate(trimmedTag)) return;
+
+    // 检查最大数量
+    if (maxTags && currentTags.length >= maxTags) return;
+
+    // 检查重复
+    if (!allowDuplicates && currentTags.includes(trimmedTag)) return;
+
+    const newTags = [...currentTags, trimmedTag];
+    handleChange(newTags);
+    onTagAdd?.(trimmedTag);
+    setInputValue("");
+  };
+
+  const removeTag = (index: number) => {
+    const tag = currentTags[index];
+    const newTags = currentTags.filter((_, i) => i !== index);
+    handleChange(newTags);
+    onTagRemove?.(tag);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+
+    // Enter 或分隔符键
+    if (e.key === "Enter" || (typeof separator === "string" && e.key === separator)) {
+      e.preventDefault();
+      if (value) {
+        addTag(value);
+      }
+      return;
+    }
+
+    // Backspace 删除最后一个标签
+    if (e.key === "Backspace" && !value && currentTags.length > 0) {
+      e.preventDefault();
+      removeTag(currentTags.length - 1);
+      return;
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+
+    // 检查是否包含分隔符
+    if (separator) {
+      const parts = typeof separator === "string" ? value.split(separator) : value.split(separator);
+
+      if (parts.length > 1) {
+        // 添加所有非空部分（除了最后一个）
+        parts.slice(0, -1).forEach((part) => {
+          if (part.trim()) {
+            addTag(part);
+          }
+        });
+        // 保留最后一部分作为输入值
+        setInputValue(parts[parts.length - 1]);
+        return;
+      }
+    }
+
+    // 检查最大长度
+    if (maxLength && value.length > maxLength) return;
+
+    setInputValue(value);
+  };
+
+  const handleBlur = () => {
+    if (inputValue.trim()) {
+      addTag(inputValue);
+    }
+  };
+
+  const handleContainerClick = () => {
+    inputRef.current?.focus();
+  };
+
+  const defaultRenderTag = (tag: string, index: number, remove: () => void) => (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-sm transition-colors",
+        "hover:bg-secondary/80",
+        disabled && "pointer-events-none opacity-50",
+        tagClassName,
+      )}
+      key={`${tag}-${index}`}
+    >
+      <span className="max-w-[200px] truncate">{tag}</span>
+      {!disabled && (
+        <button
+          className="inline-flex items-center justify-center rounded-sm opacity-70 hover:opacity-100 focus:outline-none"
+          onClick={(e) => {
+            e.stopPropagation();
+            remove();
+          }}
+          type="button"
+        >
+          <XIcon className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-9 w-full flex-wrap gap-1.5 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow]",
+        "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        "dark:bg-input/30",
+        className,
+      )}
+      onClick={handleContainerClick}
+      ref={ref}
+    >
+      {currentTags.map((tag, index) =>
+        renderTag
+          ? renderTag(tag, index, () => removeTag(index))
+          : defaultRenderTag(tag, index, () => removeTag(index)),
+      )}
+
+      <input
+        className={cn(
+          "min-w-[120px] flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+          "disabled:pointer-events-none disabled:cursor-not-allowed",
+          inputClassName,
+        )}
+        disabled={disabled || (maxTags !== undefined && currentTags.length >= maxTags)}
+        onBlur={handleBlur}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder={currentTags.length === 0 ? placeholder : undefined}
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+      />
+    </div>
+  );
+});
+
+TagsInput.displayName = "TagsInput";

package/src/index.ts

@@ -158,6 +158,8 @@ export type { StepsItemProps, StepsProps } from "./components/uix/steps";
 export { Steps, StepsItem } from "./components/uix/steps";
 export type { SwitchProps } from "./components/uix/switch";
 export { Switch } from "./components/uix/switch";
+export type { TagsInputProps } from "./components/uix/tags-input";
+export { TagsInput } from "./components/uix/tags-input";
 export type { TooltipProps } from "./components/uix/tooltip";
 export { Tooltip } from "./components/uix/tooltip";
 export type { TreeData, TreeProps } from "./components/uix/tree";