@meta-1/design 0.0.179 → 0.0.181

package/package.json

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

package/src/components/uix/combo-select/index.tsx

@@ -16,8 +16,10 @@ import { cn } from "@meta-1/design/lib";
 import type { ButtonProps } from "../button";
 import { Checkbox } from "../checkbox";
 
+export type ComboSelectValueType = string | number;
+
 export interface ComboSelectOptionProps<Data> {
-  value: string;
+  value: ComboSelectValueType;
   label: ReactNode;
   raw?: Data;
 }
@@ -30,8 +32,8 @@ export interface ComboSelectProps<Data = unknown> {
   searchPlaceholder?: string;
   empty?: ReactNode;
   className?: string;
-  onChange?: (value: string | string[]) => void;
-  value?: string | string[];
+  onChange?: (value: ComboSelectValueType | ComboSelectValueType[]) => void;
+  value?: ComboSelectValueType | ComboSelectValueType[];
   loading?: boolean;
   filter?: (value: string, search: string, option?: ComboSelectOptionProps<Data>) => boolean;
   multiple?: boolean;
@@ -58,7 +60,7 @@ function SelectedLabels({
       <>
         {selectedValues.map((v) => {
           // biome-ignore lint/suspicious/noExplicitAny: <options>
-          const label = options.find((option: any) => option.value === v)?.label || v;
+          const label = options.find((option: any) => String(option.value) === v)?.label || v;
           return label ? (
             <div className="my-0.5 mr-1 rounded bg-secondary px-2 py-[3px] text-sm" key={v}>
               {label}
@@ -76,7 +78,7 @@ function SelectedLabels({
   );
 }
 
-function handleSelect(
+function handleSelect<Data>(
   optionValue: string,
   multiple: boolean,
   isSelected: boolean,
@@ -84,8 +86,9 @@ function handleSelect(
   limit: number,
   setSelectedValues: (v: string[]) => void,
   setValueState: (v: string) => void,
-  onChange: (v: string | string[]) => void,
+  onChange: (v: ComboSelectValueType | ComboSelectValueType[]) => void,
   setOpen: (v: boolean) => void,
+  options: ComboSelectOptionProps<Data>[],
 ) {
   if (multiple) {
     if (isSelected) {
@@ -96,13 +99,20 @@ function handleSelect(
       }
       selectedValues.push(optionValue);
     }
-    const v = cloneDeep(selectedValues);
-    setSelectedValues(v);
-    onChange?.(v);
+    const stringValues = cloneDeep(selectedValues);
+    setSelectedValues(stringValues);
+    // 转换回原始类型
+    const originalValues = stringValues
+      .map((v) => options.find((opt) => String(opt.value) === v)?.value)
+      .filter((v) => v !== undefined) as ComboSelectValueType[];
+    onChange?.(originalValues);
   } else {
-    const v = optionValue;
-    setValueState(v);
-    onChange?.(v);
+    setValueState(optionValue);
+    // 转换回原始类型
+    const option = options.find((opt) => String(opt.value) === optionValue);
+    if (option) {
+      onChange?.(option.value);
+    }
     setOpen(false);
   }
 }
@@ -126,7 +136,7 @@ function ComboSelectCommandList<Data>({
   limit: number;
   setSelectedValues: (v: string[]) => void;
   setValueState: (v: string) => void;
-  onChange?: (v: string | string[]) => void;
+  onChange?: (v: ComboSelectValueType | ComboSelectValueType[]) => void;
   onSearch?: (v: string) => void;
   value: string | string[];
   setOpen: (v: boolean) => void;
@@ -135,15 +145,15 @@ function ComboSelectCommandList<Data>({
     <CommandList>
       {loading
         ? null
-        : // biome-ignore lint/suspicious/noExplicitAny: <options>
-          options.map((option: any) => {
-            const isSelected = selectedValues.includes(option.value);
+        : options.map((option) => {
+            const optionValueStr = String(option.value);
+            const isSelected = selectedValues.includes(optionValueStr);
             return (
               <CommandItem
                 key={option.value}
                 onSelect={() =>
                   handleSelect(
-                    option.value,
+                    optionValueStr,
                     multiple,
                     isSelected,
                     selectedValues,
@@ -152,14 +162,17 @@ function ComboSelectCommandList<Data>({
                     setValueState,
                     onChange!,
                     setOpen,
+                    options,
                   )
                 }
-                value={option.value}
+                value={optionValueStr}
               >
                 {multiple ? <Checkbox checked={isSelected} /> : null}
                 {option.label}
                 {multiple ? null : (
-                  <CheckIcon className={cn("ml-auto h-4 w-4", value === option.value ? "opacity-100" : "opacity-0")} />
+                  <CheckIcon
+                    className={cn("ml-auto h-4 w-4", value === optionValueStr ? "opacity-100" : "opacity-0")}
+                  />
                 )}
               </CommandItem>
             );
@@ -174,12 +187,12 @@ type ComboSelectButtonProps<Data> = {
   className?: string;
   placeholderDom: ReactNode;
   options: ComboSelectOptionProps<Data>[];
-  valueState?: string | string[];
+  valueState?: string;
   loading: boolean;
   showClear: boolean;
   setSelectedValues: (v: string[]) => void;
   setValueState: (v: string) => void;
-  onChange?: (v: string | string[]) => void;
+  onChange?: (v: ComboSelectValueType | ComboSelectValueType[]) => void;
   onSearch?: (v: string) => void;
   initLoading: boolean;
 } & Omit<ButtonProps, "onChange">;
@@ -224,7 +237,9 @@ const ComboSelectButton = forwardRef(
             <SelectedLabels options={options} placeholderDom={placeholderDom} selectedValues={selectedValues} />
           ) : (
             <span>
-              {valueState ? options.find((option) => option.value === valueState)?.label || valueState : placeholderDom}
+              {valueState
+                ? options.find((option) => String(option.value) === valueState)?.label || valueState
+                : placeholderDom}
             </span>
           )}
         </div>
@@ -279,19 +294,26 @@ export function ComboSelect<Data = unknown>(props: ComboSelectProps<Data>) {
 
   const [open, setOpen] = useState(false);
   const containerRef = useRef(null);
-  const [valueState, setValueState] = useState<string | string[] | undefined>(value);
+  // 内部统一使用 string 类型
+  const [valueState, setValueState] = useState<string | undefined>(
+    value !== undefined && !Array.isArray(value) ? String(value) : undefined,
+  );
   const [selectedValues, setSelectedValues] = useState<string[]>(
-    multiple ? ((value || []) as string[]).map((v: string) => `${v || ""}`) : value ? [`${value || ""}`] : [],
+    multiple && Array.isArray(value)
+      ? value.map((v) => String(v))
+      : !multiple && value !== undefined
+        ? [String(value)]
+        : [],
   );
   const size = useSize(containerRef);
 
   useEffect(() => {
-    if (multiple) {
-      setSelectedValues(
-        multiple ? ((value || []) as string[]).map((v: string) => `${v || ""}`) : value ? [`${value || ""}`] : [],
-      );
-    } else {
-      setValueState(value);
+    if (multiple && Array.isArray(value)) {
+      setSelectedValues(value.map((v) => String(v)));
+    } else if (!multiple && value !== undefined && !Array.isArray(value)) {
+      setValueState(String(value));
+    } else if (!multiple && (value === undefined || value === null)) {
+      setValueState(undefined);
     }
   }, [value, multiple]);
 
@@ -328,7 +350,7 @@ export function ComboSelect<Data = unknown>(props: ComboSelectProps<Data>) {
             filter(
               value,
               search,
-              options.find((option) => option.value === value),
+              options.find((option) => String(option.value) === value),
             )
               ? 1
               : 0
@@ -355,7 +377,7 @@ export function ComboSelect<Data = unknown>(props: ComboSelectProps<Data>) {
             setOpen={setOpen}
             setSelectedValues={setSelectedValues}
             setValueState={setValueState}
-            value={value || ""}
+            value={valueState || selectedValues}
           />
         </Command>
       </PopoverContent>

package/src/components/uix/select/index.tsx

@@ -5,17 +5,19 @@ import { Empty } from "@meta-1/design/components/uix/empty";
 import { cn } from "@meta-1/design/lib";
 import { SelectContent, SelectItem, SelectTrigger, SelectValue, Select as UISelect } from "../../ui/select";
 
+export type SelectValueType = string | number;
+
 export interface SelectOptionProps {
-  value: string;
+  value: SelectValueType;
   label: ReactNode;
   disabled?: boolean;
 }
 
 export interface SelectProps {
   options: SelectOptionProps[];
-  value?: string;
+  value?: SelectValueType;
   defaultValue?: string;
-  onChange?: (value: string) => void;
+  onChange?: (value: SelectValueType) => void;
   placeholder?: string;
   className?: string;
   side?: "top" | "right" | "bottom" | "left";
@@ -51,7 +53,11 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) =
 
   const handleChange = (val: string) => {
     if (onChange) {
-      onChange(val);
+      // 尝试找到原始选项,返回原始类型的 value
+      const option = options.find((opt) => String(opt.value) === val);
+      if (option) {
+        onChange(option.value);
+      }
     }
     if (!isControlled) {
       setInnerValue(val);
@@ -70,7 +76,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) =
       onOpenChange={onOpenChange}
       onValueChange={handleChange}
       open={open}
-      value={currentValue}
+      value={currentValue !== undefined ? String(currentValue) : undefined}
     >
       <div className={cn("relative inline-block", allowClear && currentValue ? "group" : "", className)}>
         <SelectTrigger className={cn("flex w-full", triggerClassName)}>
@@ -93,7 +99,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) =
       >
         {options?.length
           ? options.map((option) => (
-              <SelectItem disabled={option.disabled} key={option.value} value={option.value}>
+              <SelectItem disabled={option.disabled} key={option.value} value={String(option.value)}>
                 {option.label}
               </SelectItem>
             ))

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

@@ -45,13 +45,14 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState("");
   const [tags, setTags] = useState<string[]>(value || defaultValue);
+  const [isComposing, setIsComposing] = useState(false);
 
   const isControlled = value !== undefined;
-  const currentTags = isControlled ? value : tags;
+  const currentTags = isControlled ? value || [] : tags;
 
   useEffect(() => {
     if (isControlled) {
-      setTags(value);
+      setTags(value || []);
     }
   }, [value, isControlled]);
 
@@ -93,7 +94,8 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
     const target = e.target as HTMLInputElement;
     const value = target.value;
 
-    // Enter 或分隔符键
+    if (isComposing) return;
+
     if (e.key === "Enter" || (typeof separator === "string" && e.key === separator)) {
       e.preventDefault();
       if (value) {
@@ -102,7 +104,6 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
       return;
     }
 
-    // Backspace 删除最后一个标签
     if (e.key === "Backspace" && !value && currentTags.length > 0) {
       e.preventDefault();
       removeTag(currentTags.length - 1);
@@ -199,6 +200,8 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
         disabled={disabled || (maxTags !== undefined && currentTags.length >= maxTags)}
         onBlur={handleBlur}
         onChange={handleInputChange}
+        onCompositionEnd={() => setIsComposing(false)}
+        onCompositionStart={() => setIsComposing(true)}
         onKeyDown={handleKeyDown}
         placeholder={currentTags.length === 0 ? placeholder : undefined}
         ref={inputRef}