@mi-avalon/libs 0.0.17 → 0.0.19

package/dist/components/ItemsRow/index.d.ts

@@ -0,0 +1,42 @@
+import { ButtonProps } from 'antd';
+import * as React from 'react';
+/**
+ * 默认配置按钮，也可以通过render() 渲染其他组件
+ */
+export interface IRowItem {
+    /**
+     * 按钮名称
+     */
+    label?: string;
+    /**
+     * 按钮类型
+     */
+    type?: ButtonProps['type'];
+    /**
+     * 如果没有指定Render，则是按钮的onClick
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 其他按钮属性
+     */
+    btnProps?: ButtonProps;
+    /**
+     * item 的className
+     */
+    className?: string;
+    /**
+     * 自定义渲染
+     */
+    render?: () => React.ReactNode;
+}
+export interface IItemRowProps {
+    route?: Array<{
+        name: string;
+        url?: string;
+    }>;
+    items?: IRowItem[];
+    style?: React.CSSProperties;
+    className?: string;
+    offsetTop?: number;
+}
+export declare const ItemsRow: (props: IItemRowProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ItemsRow/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from 'antd';
+import { CompThemeProvider } from '../ThemeContext';
+import { getClassName } from '../utils';
+const classname = (n = '') => {
+    const cn = 'items-row';
+    return getClassName(cn, n);
+};
+export const ItemsRow = (props) => {
+    if (!props.items) {
+        return null;
+    }
+    return (_jsx(CompThemeProvider, { children: _jsx("div", { className: `${classname()} ${props.className || ''}`, style: props.style, children: (props.items || []).map((item, index) => {
+                const className = `${classname('item')} ${item.className}`;
+                if (item.render) {
+                    return (_jsx("span", { className: className, children: item.render() }, index));
+                }
+                return (_jsx(Button, { className: className, ...item.btnProps, type: item.type || 'primary', onClick: item.onClick, children: item.label }, item.label));
+            }) }) }));
+};

package/dist/components/MDescriptions/index.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+export interface IMDescriptionItem {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    span?: number;
+}
+export interface IMDescriptionProps {
+    /**
+     * 描述列表的数据[{label: '', value: '',}, ...]
+     */
+    data: IMDescriptionItem[];
+    /**
+     * 标题
+     */
+    title?: React.ReactNode;
+    /**
+     * 需要显示的列数
+     * @default 3
+     */
+    column?: 1 | 2 | 3 | 4;
+    /**
+     * 行高
+     */
+    lineHeight?: number;
+    /**
+     * 标签对齐方式
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * 标签和值的布局配置
+     */
+    itemLayout?: {
+        label?: number | undefined;
+        value?: number | undefined;
+    };
+    /**
+     * 是否显示冒号
+     * @default true
+     */
+    colon?: boolean;
+    /**
+     * 是否显示边框
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 标签样式
+     */
+    labelStyle?: React.CSSProperties;
+    /**
+     * 内容样式
+     */
+    contentStyle?: React.CSSProperties;
+}
+declare const MDescriptions: React.FC<IMDescriptionProps>;
+export { MDescriptions };

package/dist/components/MDescriptions/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 详情描述列表组件
+ * 用于展示对象的详细信息，如用户信息、产品详情等
+ */
+import { Descriptions } from 'antd';
+import { CompThemeProvider } from '../ThemeContext';
+const MDescriptions = props => {
+    const { data, title, column = 3, lineHeight, align = 'left', itemLayout, colon = true, bordered = false, style, className, labelStyle, contentStyle, } = props;
+    // 合并样式
+    const mergedLabelStyle = {
+        ...(lineHeight ? { lineHeight: `${lineHeight}px` } : {}),
+        textAlign: align,
+        ...(itemLayout?.label ? { width: `${itemLayout.label}px` } : {}),
+        ...labelStyle,
+    };
+    const mergedContentStyle = {
+        ...(lineHeight ? { lineHeight: `${lineHeight}px` } : {}),
+        ...(itemLayout?.value ? { width: `${itemLayout.value}px` } : {}),
+        ...contentStyle,
+    };
+    return (_jsx(CompThemeProvider, { children: _jsx(Descriptions, { title: title, column: column, colon: colon, bordered: bordered, style: style, className: className, labelStyle: mergedLabelStyle, contentStyle: mergedContentStyle, children: data.map((item, index) => (_jsx(Descriptions.Item, { label: item.label, span: item.span, children: item.value || '-' }, item.label?.toString() || index))) }) }));
+};
+MDescriptions.displayName = 'MDescriptions';
+export { MDescriptions };

package/dist/components/ThemeContext/index.d.ts

@@ -0,0 +1,11 @@
+import { ThemeConfig } from 'antd';
+interface ThemeContextType {
+    theme?: ThemeConfig;
+}
+export declare const MiThemeProvider: import("react").Provider<ThemeContextType>;
+export declare function useMiThemeConfig(): ThemeContextType;
+interface IProps {
+    children: React.ReactNode;
+}
+export declare function CompThemeProvider(props: IProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ThemeContext/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfigProvider, theme } from 'antd';
+import { createContext, useContext } from 'react';
+const ThemeContext = createContext({
+    theme: {
+        cssVar: true,
+        algorithm: [theme.defaultAlgorithm],
+    },
+});
+export const MiThemeProvider = ThemeContext.Provider;
+export function useMiThemeConfig() {
+    return useContext(ThemeContext);
+}
+export function CompThemeProvider(props) {
+    const { theme } = useMiThemeConfig();
+    return _jsx(ConfigProvider, { theme: theme, children: props.children });
+}

package/dist/components/index.d.ts

@@ -1 +1,2 @@
+export * from './MDescriptions';
 export { default as MyButton } from './MyButton';

package/dist/components/index.js

@@ -1,6 +1,6 @@
 // export { default as ItemRow } from './ItemsRow';
 // export { default as MBreadcrumb } from './MBreadcrumb';
-// export { default as MDescriptions } from './MDescriptions';
+export * from './MDescriptions';
 // export * from './MForm';
 // export { default as MForm } from './MForm';
 // export * from './MiModal';
@@ -8,4 +8,3 @@
 // export { default as MTable } from './MTable';
 export { default as MyButton } from './MyButton';
 // export * from './ThemeContext';
-// export { default as CompThemeProvider } from './ThemeContext/CompThemeProvider';

package/dist/components/utils.d.ts

@@ -0,0 +1 @@
+export declare const getClassName: (key1: string, key2: string) => string;

package/dist/components/utils.js

@@ -0,0 +1,16 @@
+// 生成类名
+export const getClassName = (key1, key2) => {
+    const cn = key1;
+    let str = key1;
+    if (key2.includes(' ')) {
+        str = '';
+        const nArr = key2?.split(' ');
+        for (const i of nArr) {
+            str += ` ${cn}-${i}`;
+        }
+    }
+    else if (key2) {
+        str = `${key1}-${key2}`;
+    }
+    return str;
+};