mm
This commit is contained in:
@@ -115,7 +115,7 @@ function generateIndexFile(dirPath: string): void {
|
||||
// 生成索引文件内容(模板字符串格式化)
|
||||
const indexContent = `
|
||||
|
||||
import './index.scss';
|
||||
import './index.css';
|
||||
|
||||
${exportStatements.join("\n")}
|
||||
`;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { mergeProps } from "@base-ui/react";
|
||||
import * as React from "react";
|
||||
import { cn } from "tailwind-variants";
|
||||
|
||||
@@ -6,43 +7,25 @@ export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
||||
}
|
||||
|
||||
export const Slot = React.forwardRef<HTMLElement, SlotProps>(
|
||||
(
|
||||
{
|
||||
children,
|
||||
onClick: externalOnClick,
|
||||
style: styleProp,
|
||||
className: classNameProp,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
if (!React.isValidElement(children)) return null;
|
||||
({ children, className: externalClassName, ...restProps }, ref) => {
|
||||
if (!React.isValidElement(children)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const child = children as React.ReactElement<Record<string, unknown>>;
|
||||
const childProps = child.props || {};
|
||||
|
||||
const mergedClassName = cn(child.props.className as string, classNameProp);
|
||||
const mergedClassName = cn(
|
||||
childProps.className as string | undefined,
|
||||
externalClassName,
|
||||
);
|
||||
|
||||
const mergedStyle = {
|
||||
...(child.props.style ?? {}),
|
||||
...(styleProp ?? {}),
|
||||
} as React.CSSProperties;
|
||||
|
||||
const childOnClick = child.props.onClick as
|
||||
| ((e: React.MouseEvent<HTMLElement>) => void)
|
||||
| undefined;
|
||||
|
||||
const mergedOnClick = (e: React.MouseEvent<HTMLElement>) => {
|
||||
childOnClick?.(e);
|
||||
externalOnClick?.(e);
|
||||
};
|
||||
const otherMergedProps = mergeProps(childProps, restProps);
|
||||
|
||||
return React.cloneElement(child, {
|
||||
...child.props,
|
||||
...props,
|
||||
ref,
|
||||
style: mergedStyle,
|
||||
...otherMergedProps,
|
||||
className: mergedClassName,
|
||||
onClick: mergedOnClick,
|
||||
ref,
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
@@ -6,6 +6,7 @@ import { itemRootRecipe } from "@/styles/recipe/ItemRoot.recipe";
|
||||
import { variantRecipe } from "@/styles/recipe/variant.recipe";
|
||||
import type { ReactNode } from "react";
|
||||
import { inlineRootRecipe } from "@/styles/recipe/IinlineRoot.recipe";
|
||||
import { Slot } from "@/common/Slot";
|
||||
|
||||
type ButtonProps = CommonProps & {
|
||||
size?: "md" | "lg" | "xl";
|
||||
@@ -26,7 +27,7 @@ export const Button = (props: ButtonProps) => {
|
||||
disabled,
|
||||
icon,
|
||||
iconOnly,
|
||||
hideIcon,
|
||||
hideIcon = false,
|
||||
} = props;
|
||||
|
||||
const buttonCls = cn(
|
||||
@@ -39,6 +40,12 @@ export const Button = (props: ButtonProps) => {
|
||||
|
||||
return (
|
||||
<BUI.Button className={buttonCls} disabled={loading || disabled}>
|
||||
{!hideIcon &&
|
||||
(iconOnly ? (
|
||||
<span className={iconCls}></span>
|
||||
) : (
|
||||
<Slot className={iconCls}>{icon}</Slot>
|
||||
))}
|
||||
{children}
|
||||
</BUI.Button>
|
||||
);
|
||||
|
||||
@@ -3,12 +3,10 @@
|
||||
@import './styles/theme/theme-variant.css';
|
||||
@import './styles/utility/brand.css';
|
||||
@import './styles/utility/gap.css';
|
||||
@import './styles/utility/height-inline.css';
|
||||
@import './styles/utility/height.css';
|
||||
@import './styles/utility/loading.css';
|
||||
@import './styles/utility/margin-right.css';
|
||||
@import './styles/utility/margin.css';
|
||||
@import './styles/utility/padding.css';
|
||||
@import './styles/utility/skin.css';
|
||||
@import './styles/utility/variant.css';
|
||||
@import './styles/utility/width-inline.css';
|
||||
@import './styles/utility/width.css';
|
||||
@@ -1,52 +1,34 @@
|
||||
|
||||
|
||||
import './index.scss';
|
||||
import './index.css';
|
||||
|
||||
export * from './assets/svg/CheckIndicatorOutlineSvg.tsx';
|
||||
export * from './assets/svg/CheckIndicatorSvg.tsx';
|
||||
export * from './assets/svg/ChevronRightSvg.tsx';
|
||||
export * from './assets/svg/CutSvg.tsx';
|
||||
export * from './assets/svg/DownloadSvg.tsx';
|
||||
export * from './assets/svg/FileSvg.tsx';
|
||||
export * from './assets/svg/KeySvg.tsx';
|
||||
export * from './assets/svg/MoonSvg.tsx';
|
||||
export * from './assets/svg/PasteSvg.tsx';
|
||||
export * from './assets/svg/RadioIndicatorOutlineSvg.tsx';
|
||||
export * from './assets/svg/RadioIndicatorSvg.tsx';
|
||||
export * from './assets/svg/SearchSvg.tsx';
|
||||
export * from './assets/svg/SettingSvg.tsx';
|
||||
export * from './assets/svg/SpinnerSvg.tsx';
|
||||
export * from './assets/svg/SunSvg.tsx';
|
||||
export * from './assets/svg/UserSvg.tsx';
|
||||
export * from './assets/svg/VolumeHighSvg.tsx';
|
||||
export * from './assets/svg/VolumeLowSvg.tsx';
|
||||
export * from './assets/svg/VolumeMediumSvg.tsx';
|
||||
export * from './assets/svg/VolumeMuteSvg.tsx';
|
||||
export * from './common/CommonProps.ts';
|
||||
export * from './common/Box.tsx';
|
||||
export * from './lv1-fundamental/Slot/Slot.tsx';
|
||||
export * from './common/ThemeProvider/ThemeContext.ts';
|
||||
export * from './common/ThemeProvider/ThemeProvider.tsx';
|
||||
export * from './common/ThemeProvider/useThemeContext.ts';
|
||||
export * from './lv2-sized/Root/RootInline.recipe';
|
||||
export * from './lv2-sized/Root/RootInline.ts';
|
||||
export * from './styles/recipe/ItemRoot.recipe.ts';
|
||||
export * from './lv2-sized/ItemRoot/ItemRoot.tsx';
|
||||
export * from './lv2-sized/Section/Section.recipe.ts';
|
||||
export * from './lv2-sized/Section/Section.tsx';
|
||||
export * from './lv3-partial/Icon/Icon.recipe.ts';
|
||||
export * from './lv3-partial/Icon/Icon.tsx';
|
||||
export * from './lv3-partial/Indicator/Indicator.recipe.ts';
|
||||
export * from './lv3-partial/Indicator/Indicator.tsx';
|
||||
export * from './lv3-partial/Label/Label.style.ts';
|
||||
export * from './lv3-partial/Label/Label.tsx';
|
||||
export * from './lv3-partial/Tooltip/Tooltip.tsx';
|
||||
export * from './lv4-normal/Button/Button.recipe.ts';
|
||||
export * from './lv4-normal/Button/Button.tsx';
|
||||
export * from './lv4-normal/Checkbox/Checkbox.recipe.ts';
|
||||
export * from './lv4-normal/Checkbox/Checkbox.tsx';
|
||||
export * from './lv4-normal/Radio/Radio.recipe.ts';
|
||||
export * from './lv4-normal/Radio/Radio.tsx';
|
||||
export * from './lv4-normal/Radio/RadioGroup.recipe.ts';
|
||||
export * from './lv4-normal/Radio/RadioGroup.tsx';
|
||||
export * from './lv4-normal/Radio/RadioGroupContext.ts';
|
||||
export * from './assets/svg/CheckIndicatorOutlineSvg';
|
||||
export * from './assets/svg/CheckIndicatorSvg';
|
||||
export * from './assets/svg/ChevronRightSvg';
|
||||
export * from './assets/svg/CutSvg';
|
||||
export * from './assets/svg/DownloadSvg';
|
||||
export * from './assets/svg/FileSvg';
|
||||
export * from './assets/svg/KeySvg';
|
||||
export * from './assets/svg/MoonSvg';
|
||||
export * from './assets/svg/PasteSvg';
|
||||
export * from './assets/svg/RadioIndicatorOutlineSvg';
|
||||
export * from './assets/svg/RadioIndicatorSvg';
|
||||
export * from './assets/svg/SearchSvg';
|
||||
export * from './assets/svg/SettingSvg';
|
||||
export * from './assets/svg/SpinnerSvg';
|
||||
export * from './assets/svg/SunSvg';
|
||||
export * from './assets/svg/UserSvg';
|
||||
export * from './assets/svg/VolumeHighSvg';
|
||||
export * from './assets/svg/VolumeLowSvg';
|
||||
export * from './assets/svg/VolumeMediumSvg';
|
||||
export * from './assets/svg/VolumeMuteSvg';
|
||||
export * from './common/Box';
|
||||
export * from './common/CommonProps';
|
||||
export * from './common/Slot';
|
||||
export * from './common/ThemeProvider/ThemeContext';
|
||||
export * from './common/ThemeProvider/ThemeProvider';
|
||||
export * from './common/ThemeProvider/useThemeContext';
|
||||
export * from './component/button/Button';
|
||||
export * from './styles/recipe/IinlineRoot.recipe';
|
||||
export * from './styles/recipe/ItemRoot.recipe';
|
||||
export * from './styles/recipe/variant.recipe';
|
||||
|
||||
Reference in New Issue
Block a user