feat(ui): add component matedata

packages/ui/src/components/affix/Affix.tsx

@@ -13,7 +13,7 @@ import {
   useContentRefConfig,
   useValueChange,
 } from '../../hooks';
-import { getClassName, toPx, mergeStyle } from '../../utils';
+import { getClassName, toPx, mergeStyle, generateComponentMate } from '../../utils';
 
 export interface DAffixRef {
   el: HTMLDivElement | null;
@@ -28,6 +28,7 @@ export interface DAffixProps extends React.HTMLAttributes<HTMLDivElement> {
   onFixedChange?: (fixed: boolean) => void;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DAffix');
 const Affix: React.ForwardRefRenderFunction<DAffixRef, DAffixProps> = (props, ref) => {
   const {
     dTarget,
@@ -39,7 +40,7 @@ const Affix: React.ForwardRefRenderFunction<DAffixRef, DAffixProps> = (props, re
     style,
     children,
     ...restProps
-  } = useComponentConfig(DAffix.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/anchor/Anchor.tsx

@@ -14,7 +14,7 @@ import {
   useContentRefConfig,
   useValueChange,
 } from '../../hooks';
-import { getClassName, CustomScroll } from '../../utils';
+import { getClassName, CustomScroll, generateComponentMate } from '../../utils';
 
 export interface DAnchorContextData {
   updateLinks: (identity: string, href: string | undefined, el: HTMLLIElement | null) => void;
@@ -35,6 +35,7 @@ export interface DAnchorProps extends React.HTMLAttributes<HTMLUListElement> {
 const DOT_INDICATOR = Symbol('dot');
 const LINE_INDICATOR = Symbol('line');
 
+const { COMPONENT_NAME } = generateComponentMate('DAnchor');
 export const DAnchor = (props: DAnchorProps) => {
   const {
     dDistance = 0,
@@ -45,7 +46,7 @@ export const DAnchor = (props: DAnchorProps) => {
     className,
     children,
     ...restProps
-  } = useComponentConfig(DAnchor.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/anchor/AnchorLink.tsx

@@ -1,16 +1,17 @@
 import React, { useCallback } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useCustomContext, useRefCallback, useStateBackflow } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 import { DAnchorContext } from './Anchor';
 
 export interface DAnchorLinkProps extends React.LiHTMLAttributes<HTMLLIElement> {
   dLevel?: number;
   href?: string;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DAnchorLink');
 export function DAnchorLink(props: DAnchorLinkProps) {
-  const { dLevel = 0, href, className, children, onClick, ...restProps } = useComponentConfig(DAnchorLink.name, props);
+  const { dLevel = 0, href, className, children, onClick, ...restProps } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/button/Button.tsx

@@ -10,7 +10,7 @@ import {
   useDCollapseTransition,
   useRefCallback,
 } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 import { DIcon } from '../icon';
 import { DButtonGroupContext } from './ButtonGroup';
 
@@ -27,6 +27,7 @@ export interface DButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
   dIconRight?: boolean;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DButton');
 const Button: React.ForwardRefRenderFunction<DButtonRef, DButtonProps> = (props, ref) => {
   const {
     dType = 'primary',
@@ -43,7 +44,7 @@ const Button: React.ForwardRefRenderFunction<DButtonRef, DButtonProps> = (props,
     children,
     onClick,
     ...restProps
-  } = useComponentConfig(DButton.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/button/ButtonGroup.tsx

@@ -4,7 +4,7 @@ import type { DButtonProps } from './Button';
 import React, { useMemo } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useGeneralState, DGeneralStateContext } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 
 export interface DButtonGroupContextData {
   buttonGroupType: DButtonProps['dType'];
@@ -20,6 +20,7 @@ export interface DButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>
   dDisabled?: boolean;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DButtonGroup');
 export function DButtonGroup(props: DButtonGroupProps) {
   const {
     dType = 'secondary',
@@ -29,7 +30,7 @@ export function DButtonGroup(props: DButtonGroupProps) {
     className,
     children,
     ...restProps
-  } = useComponentConfig(DButtonGroup.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import type { Updater } from '../../hooks/two-way-binding';
 import React, { useCallback, useId } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useCustomContext, useTwoWayBinding, useGeneralState, useStateBackflow } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 import { DCheckboxGroupContext } from './CheckboxGroup';
 
 export interface DCheckboxProps extends React.HTMLAttributes<HTMLElement> {
@@ -18,6 +18,7 @@ export interface DCheckboxProps extends React.HTMLAttributes<HTMLElement> {
   onModelChange?: (checked: boolean) => void;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DCheckbox');
 export function DCheckbox(props: DCheckboxProps) {
   const {
     dModel,
@@ -31,7 +32,7 @@ export function DCheckbox(props: DCheckboxProps) {
     className,
     children,
     ...restProps
-  } = useComponentConfig(DCheckbox.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/checkbox/CheckboxGroup.tsx

@@ -5,7 +5,7 @@ import type { Updater } from '../../hooks/two-way-binding';
 import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useTwoWayBinding, useGeneralState, DGeneralStateContext, useImmer } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 import { DCheckbox } from './Checkbox';
 
 export interface DCheckboxGroupContextData {
@@ -26,6 +26,7 @@ export interface DCheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement
   onModelChange?: (values: any[]) => void;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DCheckboxGroup');
 export function DCheckboxGroup(props: DCheckboxGroupProps) {
   const {
     dModel,
@@ -38,7 +39,7 @@ export function DCheckboxGroup(props: DCheckboxGroupProps) {
     className,
     children,
     ...restProps
-  } = useComponentConfig(DCheckboxGroup.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/compose/Compose.tsx

@@ -3,15 +3,16 @@ import type { DGeneralStateContextData } from '../../hooks/general-state';
 import React, { useMemo } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useGeneralState, DGeneralStateContext } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 
 export interface DComposeProps extends React.HTMLAttributes<HTMLDivElement> {
   dSize?: 'smaller' | 'larger';
   dDisabled?: boolean;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DCompose');
 export function DCompose(props: DComposeProps) {
-  const { dSize, dDisabled = false, className, children, ...restProps } = useComponentConfig(DCompose.name, props);
+  const { dSize, dDisabled = false, className, children, ...restProps } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/compose/ComposeItem.tsx

@@ -1,12 +1,13 @@
 import { usePrefixConfig, useComponentConfig, useGeneralState } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 
 export interface DComposeItemProps extends React.HTMLAttributes<HTMLDivElement> {
   dGray?: boolean;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DComposeItem');
 export function DComposeItem(props: DComposeItemProps) {
-  const { dGray = false, className, children, ...restProps } = useComponentConfig(DComposeItem.name, props);
+  const { dGray = false, className, children, ...restProps } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/drag-drop/Drag.tsx

@@ -13,6 +13,7 @@ import {
   useImmer,
   useStateBackflow,
 } from '../../hooks';
+import { generateComponentMate } from '../../utils';
 import { DDropContext } from './Drop';
 
 export interface DDragProps {
@@ -24,8 +25,9 @@ export interface DDragProps {
   onDragEnd?: () => void;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DDrag');
 export function DDrag(props: DDragProps) {
-  const { dId, dPlaceholder, dZIndex, children, onDragStart, onDragEnd } = useComponentConfig(DDrag.name, props);
+  const { dId, dPlaceholder, dZIndex, children, onDragStart, onDragEnd } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/drag-drop/DragPlaceholder.tsx

@@ -1,11 +1,12 @@
 import { useCustomContext, useComponentConfig, usePrefixConfig } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 import { DDropContext } from './Drop';
 
 export type DDragPlaceholderProps = React.HTMLAttributes<HTMLDivElement>;
 
+const { COMPONENT_NAME } = generateComponentMate('DDragPlaceholder');
 export function DDragPlaceholder(props: DDragPlaceholderProps) {
-  const { className, ...restProps } = useComponentConfig(DDragPlaceholder.name, props);
+  const { className, ...restProps } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/drag-drop/Drop.tsx

@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import { useMemo } from 'react';
 
 import { useComponentConfig, useRefSelector, useImmer, useTwoWayBinding } from '../../hooks';
+import { generateComponentMate } from '../../utils';
 import { DDrag } from './Drag';
 
 export interface DDropContextData {
@@ -32,6 +33,7 @@ export interface DDropProps<T> {
   onDragEnd?: (id: string) => void;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DDrop');
 export function DDrop<T>(props: DDropProps<T>) {
   const {
     dList,
@@ -43,7 +45,7 @@ export function DDrop<T>(props: DDropProps<T>) {
     onListChange,
     onDragStart,
     onDragEnd,
-  } = useComponentConfig(DDrop.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   const [isOuter, setIsOuter] = useState(false);
 

packages/ui/src/components/drawer/Drawer.tsx

@@ -15,7 +15,7 @@ import {
   useDTransition,
   useMaxIndex,
 } from '../../hooks';
-import { getClassName, mergeStyle } from '../../utils';
+import { generateComponentMate, getClassName, mergeStyle } from '../../utils';
 import { DDialog } from '../_dialog';
 
 export interface DDrawerContextData {
@@ -44,6 +44,7 @@ export interface DDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
   __zIndex?: number | string;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DDrawer');
 export function DDrawer(props: DDrawerProps) {
   const {
     dVisible,
@@ -67,7 +68,7 @@ export function DDrawer(props: DDrawerProps) {
     style,
     children,
     ...restProps
-  } = useComponentConfig(DDrawer.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/drawer/DrawerFooter.tsx

@@ -4,7 +4,7 @@ import { isBoolean } from 'lodash';
 import { useCallback, useMemo, useState } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useCustomContext } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 import { DFooter } from '../_footer';
 import { DDrawerContext } from './Drawer';
 
@@ -13,9 +13,10 @@ export interface DDrawerFooterProps extends DFooterProps {
   onCancelClick?: () => void | boolean | Promise<void | boolean>;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DDrawerFooter');
 export function DDrawerFooter(props: DDrawerFooterProps) {
   const { className, dOkButtonProps, dCancelButtonProps, onOkClick, onCancelClick, ...restProps } = useComponentConfig(
-    DDrawerFooter.name,
+    COMPONENT_NAME,
     props
   );
 

packages/ui/src/components/drawer/DrawerHeader.tsx

@@ -3,14 +3,15 @@ import type { DHeaderProps } from '../_header';
 import { useCallback } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useCustomContext } from '../../hooks';
-import { getClassName } from '../../utils';
+import { generateComponentMate, getClassName } from '../../utils';
 import { DHeader } from '../_header';
 import { DDrawerContext } from './Drawer';
 
 export type DDrawerHeaderProps = Omit<DHeaderProps, 'onClose'>;
 
+const { COMPONENT_NAME } = generateComponentMate('DDrawerHeader');
 export function DDrawerHeader(props: DDrawerHeaderProps) {
-  const { className, ...restProps } = useComponentConfig(DDrawerHeader.name, props);
+  const { className, ...restProps } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import type { DDropdownItemProps } from './DropdownItem';
 import React, { useId, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useImmer, useRefCallback, useTwoWayBinding, useAsync, useTranslation } from '../../hooks';
-import { getClassName, getVerticalSideStyle } from '../../utils';
+import { generateComponentMate, getClassName, getVerticalSideStyle } from '../../utils';
 import { DPopup } from '../_popup';
 
 export interface DDropdownContextData {
@@ -32,6 +32,7 @@ export interface DDropdownProps extends React.HTMLAttributes<HTMLElement> {
   onItemClick?: (id: string) => void;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DDropdown');
 export function DDropdown(props: DDropdownProps) {
   const {
     dTriggerNode,
@@ -49,7 +50,7 @@ export function DDropdown(props: DDropdownProps) {
     className,
     children,
     ...restProps
-  } = useComponentConfig(DDropdown.name, props);
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();

packages/ui/src/components/dropdown/DropdownGroup.tsx

@@ -3,15 +3,16 @@ import type { DDropdownItemProps } from './DropdownItem';
 import React, { useMemo } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useTranslation } from '../../hooks';
-import { getClassName, mergeStyle } from '../../utils';
+import { generateComponentMate, getClassName, mergeStyle } from '../../utils';
 
 export interface DDropdownGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {
   dTitle: React.ReactNode;
   __level?: number;
 }
 
+const { COMPONENT_NAME } = generateComponentMate('DDropdownGroup');
 export function DDropdownGroup(props: DDropdownGroupProps) {
-  const { dTitle, __level = 0, className, style, children, ...restProps } = useComponentConfig(DDropdownGroup.name, props);
+  const { dTitle, __level = 0, className, style, children, ...restProps } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const dPrefix = usePrefixConfig();