@xinghunm/compass-ui 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -177,6 +177,145 @@ interface TreeNodeProps extends Omit<DataNode, 'children'> {
177
177
 
178
178
  declare const Tree: React$1.FC<TreeProps>;
179
179
 
180
+ type SelectValue = string | number | (string | number)[];
181
+ interface SelectOption {
182
+ label: React__default.ReactNode;
183
+ value: string | number;
184
+ disabled?: boolean;
185
+ [key: string]: unknown;
186
+ }
187
+ interface SelectProps {
188
+ /**
189
+ * Selected value(s)
190
+ */
191
+ value?: SelectValue;
192
+ /**
193
+ * Default selected value(s)
194
+ */
195
+ defaultValue?: SelectValue;
196
+ /**
197
+ * Callback when value changes
198
+ */
199
+ onChange?: (value: SelectValue, option?: SelectOption | SelectOption[]) => void;
200
+ /**
201
+ * Options for data-driven rendering
202
+ */
203
+ options?: SelectOption[];
204
+ /**
205
+ * Whether to allow multiple selection
206
+ */
207
+ multiple?: boolean;
208
+ /**
209
+ * Used for setting specific mode, e.g. 'tags' (combined with multiple)
210
+ */
211
+ mode?: 'multiple' | 'tags';
212
+ /**
213
+ * Whether the select is disabled
214
+ */
215
+ disabled?: boolean;
216
+ /**
217
+ * Whether the select is loading
218
+ */
219
+ loading?: boolean;
220
+ /**
221
+ * Whether to show search input
222
+ */
223
+ showSearch?: boolean;
224
+ /**
225
+ * Placeholder text
226
+ */
227
+ placeholder?: string;
228
+ /**
229
+ * Whether to allow clearing the selection
230
+ */
231
+ allowClear?: boolean;
232
+ /**
233
+ * Custom class name
234
+ */
235
+ className?: string;
236
+ /**
237
+ * Custom style
238
+ */
239
+ style?: React__default.CSSProperties;
240
+ /**
241
+ * Size of the select input
242
+ * @default 'medium'
243
+ */
244
+ size?: 'small' | 'medium' | 'large';
245
+ /**
246
+ * Status of the select input
247
+ */
248
+ status?: 'error' | 'warning';
249
+ /**
250
+ * Custom dropdown width
251
+ */
252
+ dropdownStyle?: React__default.CSSProperties;
253
+ /**
254
+ * Custom dropdown class name
255
+ */
256
+ dropdownClassName?: string;
257
+ /**
258
+ * Children for declarative usage
259
+ */
260
+ children?: React__default.ReactNode;
261
+ /**
262
+ * Trigger mode
263
+ * @default 'click'
264
+ */
265
+ trigger?: 'click' | 'hover';
266
+ }
267
+ interface OptionProps {
268
+ value: string | number;
269
+ children?: React__default.ReactNode;
270
+ disabled?: boolean;
271
+ className?: string;
272
+ style?: React__default.CSSProperties;
273
+ /**
274
+ * Internal prop to pass label if children is complex
275
+ */
276
+ label?: React__default.ReactNode;
277
+ }
278
+
279
+ declare const Option: React__default.FC<OptionProps>;
280
+
281
+ declare const Select: React__default.FC<SelectProps> & {
282
+ Option: typeof Option;
283
+ };
284
+
285
+ interface TreeSelectProps extends Omit<SelectProps, 'options' | 'onChange'> {
286
+ /**
287
+ * Tree data
288
+ */
289
+ treeData?: DataNode[];
290
+ /**
291
+ * Whether to show checkboxes
292
+ */
293
+ treeCheckable?: boolean;
294
+ /**
295
+ * Whether treeNodes are selectable
296
+ * @default true
297
+ */
298
+ treeSelectable?: boolean;
299
+ /**
300
+ * Default expanded keys
301
+ */
302
+ treeDefaultExpandedKeys?: (string | number)[];
303
+ /**
304
+ * Default expand all
305
+ */
306
+ treeDefaultExpandAll?: boolean;
307
+ /**
308
+ * Callback when value changes
309
+ */
310
+ onChange?: (value: SelectValue, label: React__default.ReactNode | React__default.ReactNode[], extra?: unknown) => void;
311
+ /**
312
+ * Custom icon for selected tree node
313
+ */
314
+ treeSelectedIcon?: React__default.ReactNode;
315
+ }
316
+
317
+ declare const TreeSelect: React__default.FC<TreeSelectProps>;
318
+
180
319
  interface ItemType {
181
320
  /**
182
321
  * Unique key
@@ -232,6 +371,18 @@ interface MenuProps {
232
371
  * Menu click handler
233
372
  */
234
373
  onClick?: (e: React__default.MouseEvent, key?: string | number) => void;
374
+ /**
375
+ * Selected keys (controlled)
376
+ */
377
+ selectedKeys?: (string | number)[];
378
+ /**
379
+ * Default selected keys (uncontrolled)
380
+ */
381
+ defaultSelectedKeys?: (string | number)[];
382
+ /**
383
+ * Select handler
384
+ */
385
+ onSelect?: (keys: (string | number)[]) => void;
235
386
  }
236
387
  interface MenuItemProps {
237
388
  /**
@@ -262,12 +413,16 @@ interface MenuItemProps {
262
413
  * Custom style
263
414
  */
264
415
  style?: React__default.CSSProperties;
416
+ /**
417
+ * Unique key for event handling
418
+ */
419
+ eventKey?: string | number;
265
420
  }
266
421
 
267
- declare const MenuItem: React__default.FC<MenuItemProps>;
268
422
  declare const Menu: React__default.FC<MenuProps> & {
269
423
  Item: typeof MenuItem;
270
424
  };
425
+ declare const MenuItem: React__default.FC<MenuItemProps>;
271
426
 
272
427
  interface DropdownProps {
273
428
  /**
@@ -312,6 +467,11 @@ interface DropdownProps {
312
467
  * Custom style
313
468
  */
314
469
  style?: React__default.CSSProperties;
470
+ /**
471
+ * Whether to close the dropdown when a menu item is selected
472
+ * @default true
473
+ */
474
+ closeOnSelect?: boolean;
315
475
  }
316
476
 
317
477
  declare const Dropdown: React__default.FC<DropdownProps>;
@@ -399,7 +559,7 @@ interface MessageInstance {
399
559
  destroy(key?: string): void;
400
560
  }
401
561
 
402
- declare const _default: {
562
+ declare const _default$1: {
403
563
  info: (content: React__default.ReactNode | MessageProps, duration?: number, onClose?: () => void) => void;
404
564
  success: (content: React__default.ReactNode | MessageProps, duration?: number, onClose?: () => void) => void;
405
565
  error: (content: React__default.ReactNode | MessageProps, duration?: number, onClose?: () => void) => void;
@@ -411,7 +571,7 @@ declare const _default: {
411
571
 
412
572
  declare function useMessage(): [MessageInstance, React__default.ReactElement];
413
573
 
414
- type MessageType = typeof _default & {
574
+ type MessageType = typeof _default$1 & {
415
575
  useMessage: typeof useMessage;
416
576
  };
417
577
  declare const messageWithHook: MessageType;
@@ -554,111 +714,6 @@ interface ProgressProps {
554
714
  */
555
715
  declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
556
716
 
557
- type SelectValue = string | number | (string | number)[];
558
- interface SelectOption {
559
- label: React__default.ReactNode;
560
- value: string | number;
561
- disabled?: boolean;
562
- [key: string]: unknown;
563
- }
564
- interface SelectProps {
565
- /**
566
- * Selected value(s)
567
- */
568
- value?: SelectValue;
569
- /**
570
- * Default selected value(s)
571
- */
572
- defaultValue?: SelectValue;
573
- /**
574
- * Callback when value changes
575
- */
576
- onChange?: (value: SelectValue, option?: SelectOption | SelectOption[]) => void;
577
- /**
578
- * Options for data-driven rendering
579
- */
580
- options?: SelectOption[];
581
- /**
582
- * Whether to allow multiple selection
583
- */
584
- multiple?: boolean;
585
- /**
586
- * Used for setting specific mode, e.g. 'tags' (combined with multiple)
587
- */
588
- mode?: 'multiple' | 'tags';
589
- /**
590
- * Whether the select is disabled
591
- */
592
- disabled?: boolean;
593
- /**
594
- * Whether the select is loading
595
- */
596
- loading?: boolean;
597
- /**
598
- * Whether to show search input
599
- */
600
- showSearch?: boolean;
601
- /**
602
- * Placeholder text
603
- */
604
- placeholder?: string;
605
- /**
606
- * Whether to allow clearing the selection
607
- */
608
- allowClear?: boolean;
609
- /**
610
- * Custom class name
611
- */
612
- className?: string;
613
- /**
614
- * Custom style
615
- */
616
- style?: React__default.CSSProperties;
617
- /**
618
- * Size of the select input
619
- * @default 'medium'
620
- */
621
- size?: 'small' | 'medium' | 'large';
622
- /**
623
- * Status of the select input
624
- */
625
- status?: 'error' | 'warning';
626
- /**
627
- * Custom dropdown width
628
- */
629
- dropdownStyle?: React__default.CSSProperties;
630
- /**
631
- * Custom dropdown class name
632
- */
633
- dropdownClassName?: string;
634
- /**
635
- * Children for declarative usage
636
- */
637
- children?: React__default.ReactNode;
638
- /**
639
- * Trigger mode
640
- * @default 'click'
641
- */
642
- trigger?: 'click' | 'hover';
643
- }
644
- interface OptionProps {
645
- value: string | number;
646
- children?: React__default.ReactNode;
647
- disabled?: boolean;
648
- className?: string;
649
- style?: React__default.CSSProperties;
650
- /**
651
- * Internal prop to pass label if children is complex
652
- */
653
- label?: React__default.ReactNode;
654
- }
655
-
656
- declare const Option: React__default.FC<OptionProps>;
657
-
658
- declare const Select: React__default.FC<SelectProps> & {
659
- Option: typeof Option;
660
- };
661
-
662
717
  interface PaginationProps {
663
718
  /** Current page number */
664
719
  current?: number;
@@ -847,6 +902,7 @@ interface Theme {
847
902
  pagination: PaginationTheme;
848
903
  tree: TreeTheme;
849
904
  form: FormTheme;
905
+ tabs: TabsTheme;
850
906
  };
851
907
  }
852
908
  interface FormTheme {
@@ -859,6 +915,21 @@ interface FormTheme {
859
915
  errorMarginTop: string;
860
916
  errorMarginBottom: string;
861
917
  }
918
+ interface TabsTheme {
919
+ tabBarBorderColor: string;
920
+ tabBarBorderWidth: string;
921
+ tabBarBackgroundColor: string;
922
+ tabItemColor: string;
923
+ tabItemActiveColor: string;
924
+ tabItemHoverColor: string;
925
+ tabItemDisabledColor: string;
926
+ tabItemFontSize: string;
927
+ tabItemPadding: string;
928
+ tabItemHorizontalGutter: string;
929
+ tabItemVerticalGutter: string;
930
+ inkBarColor: string;
931
+ inkBarHeight: string;
932
+ }
862
933
  interface TreeTheme {
863
934
  nodeSelectedBg: string;
864
935
  nodeHoverBg: string;
@@ -928,6 +999,7 @@ interface PaginationTheme {
928
999
  }
929
1000
  interface MenuTheme {
930
1001
  itemHoverBg: string;
1002
+ itemSelectedBg: string;
931
1003
  itemColor: string;
932
1004
  itemHeight: string;
933
1005
  itemPadding: string;
@@ -1168,18 +1240,24 @@ interface FieldData {
1168
1240
  */
1169
1241
  interface FieldEntity {
1170
1242
  onStoreChange: () => void;
1171
- validateRules: () => Promise<string[] | null>;
1243
+ validateRules: (options?: {
1244
+ triggerName?: string;
1245
+ }) => Promise<string[] | null>;
1172
1246
  getName: () => string;
1173
1247
  getErrors: () => string[];
1248
+ isFieldValidating: () => boolean;
1249
+ isFieldTouched: () => boolean;
1174
1250
  props: {
1175
1251
  name?: string;
1176
1252
  rules?: RuleItem[];
1177
1253
  dependencies?: string[];
1178
1254
  initialValue?: unknown;
1179
1255
  };
1256
+ setErrors: (errors: string[]) => void;
1180
1257
  }
1181
1258
  interface Callbacks<Values = Record<string, unknown>> {
1182
1259
  onValuesChange?: (changedValues: Store, values: Values) => void;
1260
+ onFieldsChange?: (changedFields: FieldData[], allFields: FieldData[]) => void;
1183
1261
  onFinish?: (values: Values) => void;
1184
1262
  onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
1185
1263
  }
@@ -1193,10 +1271,12 @@ interface ValidateErrorEntity<Values = Record<string, unknown>> {
1193
1271
  }
1194
1272
  interface InternalHooks {
1195
1273
  registerField: (entity: FieldEntity) => () => void;
1274
+ registerWatch: (callback: (name: string) => void) => () => void;
1196
1275
  setInitialValues: (values: Store, init: boolean) => void;
1197
1276
  setCallbacks: (callbacks: Callbacks) => void;
1198
1277
  dispatch: (action: ReducerAction) => void;
1199
1278
  getFieldValue: (name: string) => StoreValue;
1279
+ notifyFieldChange: (name: string) => void;
1200
1280
  }
1201
1281
  interface FormInstance<Values = Record<string, unknown>> {
1202
1282
  getFieldValue: (name: string) => StoreValue;
@@ -1228,10 +1308,11 @@ interface FormProps<Values = Record<string, unknown>> {
1228
1308
  onFinish?: (values: Values) => void;
1229
1309
  onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
1230
1310
  onValuesChange?: (changedValues: Store, values: Values) => void;
1311
+ onFieldsChange?: (changedFields: FieldData[], allFields: FieldData[]) => void;
1231
1312
  className?: string;
1232
1313
  style?: React__default.CSSProperties;
1233
1314
  }
1234
- declare const Form$1: <Values extends Record<string, unknown> = Record<string, unknown>>({ form, initialValues, children, onFinish, onFinishFailed, onValuesChange, className, style, }: FormProps<Values>) => react_jsx_runtime.JSX.Element;
1315
+ declare const Form$1: <Values extends Record<string, unknown> = Record<string, unknown>>({ form, initialValues, children, onFinish, onFinishFailed, onValuesChange, onFieldsChange, className, style, }: FormProps<Values>) => react_jsx_runtime.JSX.Element;
1235
1316
 
1236
1317
  interface FormItemProps {
1237
1318
  name?: string;
@@ -1247,14 +1328,77 @@ declare const FormItem: React__default.FC<FormItemProps>;
1247
1328
 
1248
1329
  declare const useForm: <Values extends Record<string, unknown> = Record<string, unknown>>(form?: FormInstance<Values>) => [FormInstance<Values>];
1249
1330
 
1331
+ declare const useWatch: <T = unknown>(name: string | string[], form?: FormInstance) => T;
1332
+
1250
1333
  type InternalFormType = typeof Form$1;
1251
1334
  interface FormInterface extends InternalFormType {
1252
1335
  Item: typeof FormItem;
1253
1336
  useForm: typeof useForm;
1337
+ useWatch: typeof useWatch;
1254
1338
  }
1255
1339
  declare const Form: FormInterface & {
1256
1340
  Item: typeof FormItem;
1257
1341
  useForm: typeof useForm;
1342
+ useWatch: typeof useWatch;
1343
+ };
1344
+
1345
+ interface TabsProps {
1346
+ /** Current active tab key */
1347
+ activeKey?: string;
1348
+ /** Default active tab key */
1349
+ defaultActiveKey?: string;
1350
+ /** Callback when active tab changes */
1351
+ onChange?: (activeKey: string) => void;
1352
+ /** Tab items */
1353
+ items?: TabItem[];
1354
+ /** Tab bar extra content */
1355
+ tabBarExtraContent?: React__default.ReactNode;
1356
+ /** Tab position */
1357
+ tabPosition?: 'top' | 'right' | 'bottom' | 'left';
1358
+ /** Tab type */
1359
+ type?: 'line' | 'card' | 'editable-card';
1360
+ /** Tab size */
1361
+ size?: 'small' | 'default' | 'large';
1362
+ /** Custom className */
1363
+ className?: string;
1364
+ /** Custom style */
1365
+ style?: React__default.CSSProperties;
1366
+ /** Children (TabPane components) */
1367
+ children?: React__default.ReactNode;
1368
+ /** Callback when tab is edited */
1369
+ onEdit?: (targetKey: string, action: 'add' | 'remove') => void;
1370
+ }
1371
+ interface TabItem {
1372
+ key: string;
1373
+ label: React__default.ReactNode;
1374
+ children?: React__default.ReactNode;
1375
+ disabled?: boolean;
1376
+ closable?: boolean;
1377
+ icon?: React__default.ReactNode;
1378
+ }
1379
+ interface TabPaneProps {
1380
+ /** Key of the tab pane */
1381
+ key?: string;
1382
+ /** Label of the tab pane */
1383
+ tab: React__default.ReactNode;
1384
+ /** Content of the tab pane */
1385
+ children?: React__default.ReactNode;
1386
+ /** Whether the tab pane is disabled */
1387
+ disabled?: boolean;
1388
+ /** Whether the tab pane is active (internal use) */
1389
+ active?: boolean;
1390
+ /** Custom className */
1391
+ className?: string;
1392
+ /** Custom style */
1393
+ style?: React__default.CSSProperties;
1394
+ }
1395
+
1396
+ declare const TabPane: React__default.ForwardRefExoticComponent<TabPaneProps & React__default.RefAttributes<HTMLDivElement>>;
1397
+
1398
+ declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__default.RefAttributes<HTMLDivElement>>;
1399
+ type TabsComponent = typeof Tabs & {
1400
+ TabPane: typeof TabPane;
1258
1401
  };
1402
+ declare const _default: TabsComponent;
1259
1403
 
1260
- export { Button, type ButtonProps, ConfigProvider, type ConfigProviderProps, type DataNode, DatePicker, type DatePickerProps, type DateRangePickerProps, Dropdown, type DropdownProps, type FieldData, Form, type FormInstance, type FormItemProps, type FormProps, InputField, type InputFieldProps, InputNumber, type InputNumberProps, type ItemType, Menu, type MenuItemProps, type MenuProps, messageWithHook as Message, type MessageProps, ModalWithStatics as Modal, type ModalBaseProps as ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Select, type SelectOption, type SelectProps, type SelectValue, Steps, type StepsProps, Tree, type TreeNodeProps, type TreeProps, type ValidateErrorEntity };
1404
+ export { Button, type ButtonProps, ConfigProvider, type ConfigProviderProps, type DataNode, DatePicker, type DatePickerProps, type DateRangePickerProps, Dropdown, type DropdownProps, type FieldData, Form, type FormInstance, type FormItemProps, type FormProps, InputField, type InputFieldProps, InputNumber, type InputNumberProps, type ItemType, Menu, type MenuItemProps, type MenuProps, messageWithHook as Message, type MessageProps, ModalWithStatics as Modal, type ModalBaseProps as ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Select, type SelectOption, type SelectProps, type SelectValue, Steps, type StepsProps, type TabItem, type TabPaneProps, _default as Tabs, type TabsProps, Tree, type TreeNodeProps, type TreeProps, TreeSelect, type TreeSelectProps, type ValidateErrorEntity };