@wzyjs/uis 0.3.29 → 0.3.30

package/dist/inputs/IconSelect/index.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileTextOutlined, ApartmentOutlined, AppstoreOutlined, BookOutlined, BulbOutlined, CalendarOutlined, DatabaseOutlined, DeleteOutlined, DownOutlined, EditOutlined, EyeOutlined, FolderAddOutlined, HomeOutlined, MinusOutlined, PlusOutlined, QuestionOutlined, SendOutlined, ShoppingOutlined, StarOutlined, UserOutlined, } from '@ant-design/icons';
+import { Select, Space } from 'antd';
+export const iconSelectOptions = [
+    { value: 'home', label: 'Home', icon: _jsx(HomeOutlined, {}) },
+    { value: 'calendar', label: 'Calendar', icon: _jsx(CalendarOutlined, {}) },
+    { value: 'appstore', label: 'Appstore', icon: _jsx(AppstoreOutlined, {}) },
+    { value: 'fileText', label: 'FileText', icon: _jsx(FileTextOutlined, {}) },
+    { value: 'bulb', label: 'Bulb', icon: _jsx(BulbOutlined, {}) },
+    { value: 'user', label: 'User', icon: _jsx(UserOutlined, {}) },
+    { value: 'shopping', label: 'Shopping', icon: _jsx(ShoppingOutlined, {}) },
+    { value: 'book', label: 'Book', icon: _jsx(BookOutlined, {}) },
+    { value: 'database', label: 'Database', icon: _jsx(DatabaseOutlined, {}) },
+    { value: 'apartment', label: 'Apartment', icon: _jsx(ApartmentOutlined, {}) },
+    { value: 'folderAdd', label: 'FolderAdd', icon: _jsx(FolderAddOutlined, {}) },
+    { value: 'send', label: 'Send', icon: _jsx(SendOutlined, {}) },
+    { value: 'plus', label: 'Plus', icon: _jsx(PlusOutlined, {}) },
+    { value: 'minus', label: 'Minus', icon: _jsx(MinusOutlined, {}) },
+    { value: 'eye', label: 'Eye', icon: _jsx(EyeOutlined, {}) },
+    { value: 'edit', label: 'Edit', icon: _jsx(EditOutlined, {}) },
+    { value: 'delete', label: 'Delete', icon: _jsx(DeleteOutlined, {}) },
+    { value: 'star', label: 'Star', icon: _jsx(StarOutlined, {}) },
+    { value: 'down', label: 'Down', icon: _jsx(DownOutlined, {}) },
+    { value: 'question', label: 'Question', icon: _jsx(QuestionOutlined, {}) },
+];
+const iconNodeByValue = iconSelectOptions.reduce((acc, item) => {
+    acc[item.value] = item.icon;
+    return acc;
+}, {});
+export const getIconNode = (value) => {
+    if (!value) {
+        return null;
+    }
+    const key = value;
+    return iconNodeByValue[key] ?? null;
+};
+export const IconSelect = (props) => {
+    const { value, onChange } = props;
+    const options = iconSelectOptions.map(item => ({
+        value: item.value,
+        rawLabel: item.label,
+        label: (_jsxs(Space, { size: 8, children: [_jsx("span", { className: 'text-base leading-none', children: getIconNode(item.value) }), _jsx("span", { children: item.label })] })),
+    }));
+    return (_jsx(Select, { allowClear: true, placeholder: '\u8BF7\u9009\u62E9\u56FE\u6807', value: typeof value === 'string' ? value : undefined, onChange: (nextValue) => {
+            onChange?.(typeof nextValue === 'string' ? nextValue : undefined);
+        }, options: options, showSearch: true, filterOption: (input, option) => {
+            const opt = option;
+            const raw = (opt?.rawLabel ?? '').toLowerCase();
+            const val = String(opt?.value ?? '').toLowerCase();
+            const keyword = input.toLowerCase();
+            return raw.includes(keyword) || val.includes(keyword);
+        } }));
+};

package/dist/inputs/ImageUploader/index.d.ts

@@ -0,0 +1,12 @@
+interface ImageUploaderProps {
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    maxImages?: number;
+    enablePreview?: boolean;
+    enableDragDrop?: boolean;
+    enableFileSelect?: boolean;
+    enablePaste?: boolean;
+    enablePasteTip?: boolean;
+}
+export declare const ImageUploader: (props: ImageUploaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/ImageUploader/index.js

@@ -0,0 +1,192 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Alert, Button, Modal, Popover, Space, Typography } from 'antd';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+export const ImageUploader = (props) => {
+    const { value = [], onChange, maxImages = 10, enablePreview = false, enableDragDrop = false, enableFileSelect = false, enablePaste = true, enablePasteTip = false, } = props;
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef(null);
+    useEffect(() => {
+        if (!enablePaste)
+            return;
+        const handlePaste = (event) => {
+            if (event.clipboardData && event.clipboardData.items) {
+                const items = event.clipboardData.items;
+                for (let i = 0; i < items.length; i++) {
+                    const item = items[i];
+                    if (item && item.type.indexOf('image') !== -1) {
+                        const file = item.getAsFile();
+                        if (file) {
+                            convertToBase64(file);
+                        }
+                    }
+                }
+            }
+        };
+        document.addEventListener('paste', handlePaste);
+        return () => {
+            document.removeEventListener('paste', handlePaste);
+        };
+    }, [value, enablePaste]);
+    const handleDragOver = (e) => {
+        if (!enableDragDrop)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        if (!enableDragDrop)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleDrop = (e) => {
+        if (!enableDragDrop)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const fileList = Array.from(e.dataTransfer.files);
+            fileList.forEach((file) => {
+                if (file.type.match('image.*')) {
+                    convertToBase64(file);
+                }
+            });
+        }
+    };
+    const handleClick = () => {
+        if (!enableFileSelect)
+            return;
+        fileInputRef.current?.click();
+    };
+    const handleFileChange = (e) => {
+        if (!enableFileSelect)
+            return;
+        if (e.target.files && e.target.files.length > 0) {
+            const fileList = Array.from(e.target.files);
+            fileList.forEach((file) => {
+                if (file.type.match('image.*')) {
+                    convertToBase64(file);
+                }
+            });
+        }
+    };
+    const handlePasteButton = () => {
+        if (!enablePaste)
+            return;
+        navigator.clipboard.read().then((clipboardItems) => {
+            for (const clipboardItem of clipboardItems) {
+                for (const type of clipboardItem.types) {
+                    if (type.startsWith('image/')) {
+                        clipboardItem.getType(type).then((blob) => {
+                            convertToBase64(blob);
+                        });
+                    }
+                }
+            }
+        }).catch(error => {
+            console.error('读取剪贴板失败:', error);
+            alert('读取剪贴板失败。请尝试使用 Ctrl+V 粘贴或手动上传图片。');
+        });
+    };
+    const convertToBase64 = (file) => {
+        if (value.length >= maxImages) {
+            alert(`最多允许上传 ${maxImages} 张图片。`);
+            return;
+        }
+        compressImage(file).then(compressedFile => {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = reader.result;
+                if (!value.includes(base64String)) {
+                    onChange?.([...value, base64String]);
+                }
+            };
+            reader.readAsDataURL(compressedFile);
+        });
+    };
+    const compressImage = (file) => {
+        return new Promise((resolve) => {
+            const originalSize = file.size / 1024;
+            const img = new Image();
+            img.src = URL.createObjectURL(file);
+            img.onload = () => {
+                URL.revokeObjectURL(img.src);
+                const canvas = document.createElement('canvas');
+                let width = img.width;
+                let height = img.height;
+                // 计算压缩比例，保持宽高比
+                const maxWidth = 1200;
+                const maxHeight = 1200;
+                if (width > maxWidth || height > maxHeight) {
+                    const ratio = Math.min(maxWidth / width, maxHeight / height);
+                    width = width * ratio;
+                    height = height * ratio;
+                }
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    resolve(file);
+                    return;
+                }
+                ctx.drawImage(img, 0, 0, width, height);
+                // 转换为blob，压缩质量为0.8
+                canvas.toBlob((blob) => {
+                    if (!blob) {
+                        resolve(file);
+                        return;
+                    }
+                    // 获取压缩后的图片大小
+                    const compressedSize = blob.size / 1024;
+                    console.log(`原始图片: ${originalSize.toFixed(2)} KB => ${compressedSize.toFixed(2)} KB`);
+                    console.log(`压缩到了: ${((compressedSize / originalSize) * 100).toFixed(2)}%`);
+                    resolve(blob);
+                }, 'image/jpeg', 0.8);
+            };
+        });
+    };
+    const handleRemoveImage = (index) => {
+        Modal.confirm({
+            title: '确认删除',
+            content: '您确定要删除这张图片吗？',
+            okText: '确定',
+            cancelText: '取消',
+            onOk: () => {
+                const newImages = [...value];
+                newImages.splice(index, 1);
+                onChange?.(newImages);
+            },
+        });
+    };
+    return (_jsxs("div", { className: 'w-full space-y-4', children: [_jsxs("div", { className: 'flex flex-wrap gap-3', children: [value.map((image, index) => {
+                        const imageNode = (_jsxs("div", { className: 'rounded border overflow-hidden relative group bg-white', style: { maxWidth: 200 }, children: [_jsx("img", { src: image, alt: `图片 ${index + 1}`, className: 'object-contain', style: { maxWidth: '100%', height: 'auto', display: 'block' } }), _jsx(Button, { type: 'text', icon: _jsx(DeleteOutlined, {}), onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleRemoveImage(index);
+                                    }, style: { position: 'absolute', top: 0, right: 0 }, className: 'absolute top-0 right-0 bg-black/40 text-white border-none hover:bg-black/60', size: 'small' })] }));
+                        if (!enablePreview) {
+                            return (_jsx("div", { className: 'relative', children: imageNode }, index));
+                        }
+                        return (_jsx("div", { className: 'relative', children: _jsx(Popover, { trigger: 'hover', placement: 'top', content: (_jsx("img", { src: image, alt: `预览图片 ${index + 1}`, style: {
+                                        maxWidth: '400px',
+                                        height: 'auto',
+                                        objectFit: 'contain',
+                                    } })), children: imageNode }) }, index));
+                    }), value.length < maxImages && (_jsxs(Space, { style: { width: '100%' }, children: [enableFileSelect && (_jsxs("div", { className: `border-2 border-dashed rounded flex flex-col items-center justify-center cursor-pointer transition-colors ${isDragging && enableDragDrop ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'}`, onDragOver: enableDragDrop ? handleDragOver : undefined, onDragLeave: enableDragDrop ? handleDragLeave : undefined, onDrop: enableDragDrop ? handleDrop : undefined, onClick: handleClick, style: { width: '50px', height: '50px' }, children: [_jsx(PlusOutlined, { style: { fontSize: '24px', color: '#8c8c8c' } }), _jsx(Typography.Text, { type: 'secondary', className: 'm-2', children: "\u4E0A\u4F20" })] })), enablePaste && (_jsxs("div", { style: { width: '50px', height: '50px' }, className: `border-2 border-dashed rounded flex flex-col items-center justify-center cursor-pointer transition-colors ${isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'}`, onClick: handlePasteButton, children: [_jsx(PlusOutlined, { style: { fontSize: '24px', color: '#8c8c8c' } }), _jsx(Typography.Text, { type: 'secondary', className: 'm-2', children: "\u7C98\u8D34" })] }))] }))] }), enableFileSelect && (_jsx("input", { type: 'file', ref: fileInputRef, onChange: handleFileChange, accept: 'image/*', multiple: true, style: { display: 'none' } })), (enablePasteTip && enablePaste) && (_jsx(Alert, { type: 'info', showIcon: true, title: _jsxs(Typography.Text, { type: 'secondary', children: ["\u63D0\u793A\uFF1A\u60A8\u4E5F\u53EF\u4EE5\u5728\u4EFB\u610F\u4F4D\u7F6E\u6309\u4E0B ", _jsx("kbd", { style: {
+                                padding: '0.1rem 0.4rem',
+                                background: '#f5f5f5',
+                                border: '1px solid #d9d9d9',
+                                borderRadius: '3px',
+                                fontSize: '12px',
+                            }, children: "Ctrl" }), " + ", _jsx("kbd", { style: {
+                                padding: '0.1rem 0.4rem',
+                                background: '#f5f5f5',
+                                border: '1px solid #d9d9d9',
+                                borderRadius: '3px',
+                                fontSize: '12px',
+                            }, children: "V" }), " \u4ECE\u526A\u8D34\u677F\u7C98\u8D34\u56FE\u7247"] }) }))] }));
+};

package/dist/inputs/RadioButton/index.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+interface FilterButtonProps<V> {
+    options: {
+        label: string;
+        value: V;
+    }[];
+    value?: V;
+    buttonStyle?: 'outline' | 'solid';
+    onChange?: (value: V) => void;
+    style?: CSSProperties;
+    disabled?: boolean;
+    allowClear?: boolean;
+}
+export declare const RadioButton: <V = string | number | boolean | null>(props: FilterButtonProps<V>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/RadioButton/index.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio } from 'antd';
+export const RadioButton = (props) => {
+    const { value, options, buttonStyle = 'outline', disabled, style, allowClear, onChange } = props;
+    return (_jsx(Radio.Group, { optionType: 'button', buttonStyle: buttonStyle, value: value, style: style, disabled: disabled, onChange: e => onChange?.(e.target.value), children: options.filter(item => item.label).map(item => (_jsx(Radio, { value: item.value, onClick: () => {
+                if (allowClear && value === item.value) {
+                    onChange?.(undefined);
+                }
+            }, children: item.label }, String(item.value)))) }));
+};

package/dist/inputs/RangeInput/index.d.ts

@@ -0,0 +1,8 @@
+import { InputNumberProps } from 'antd';
+export interface RangeInputProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
+    value?: number[];
+    min?: number;
+    max?: number;
+    onChange?: (numbers: number[]) => void;
+}
+export declare const RangeInput: (props: RangeInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/inputs/RangeInput/index.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputNumber, Space } from 'antd';
+import { _ } from '@wzyjs/utils/web';
+// 最小值 最大值 的输入框
+export const RangeInput = (props) => {
+    const { value = [], min, max, onChange } = props;
+    const onNumberChange = (index, v) => {
+        if (Number.isNaN(v) || v === null) {
+            return;
+        }
+        const numbers = _.cloneDeep(value) || [];
+        numbers[index] = v;
+        onChange?.(numbers);
+    };
+    return (_jsxs(Space, { children: [_jsx(InputNumber, { min: min, max: max, value: value[0], onChange: (v) => onNumberChange(0, v) }), _jsx("span", { style: { margin: '0 3px' }, children: " - " }), _jsx(InputNumber, { min: min, max: max, value: value[1], onChange: (v) => onNumberChange(1, v) })] }));
+};

package/dist/inputs/TextInput/index.d.ts

@@ -0,0 +1,6 @@
+interface TextInputProps {
+    value: string;
+    onChange?: (value: string) => void;
+}
+export declare const TextInput: (props: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/TextInput/index.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Input } from 'antd';
+import { useBoolean } from '@wzyjs/hooks/web';
+export const TextInput = (props) => {
+    const { value, onChange } = props;
+    const [text, setText] = useState(value);
+    const [isEditing, { setTrue, setFalse }] = useBoolean(false);
+    const onSubmit = () => {
+        if (!text.trim()) {
+            return;
+        }
+        if (text === value) {
+            setFalse();
+            return;
+        }
+        onChange?.(text.trim());
+        setFalse();
+    };
+    const onBlur = () => {
+        onSubmit();
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            onSubmit();
+        }
+    };
+    return (_jsx("div", { onDoubleClick: setTrue, children: !isEditing ? (_jsx("span", { children: text })) : (_jsx(Input, { value: text, onChange: ev => setText(ev.target.value), onBlur: onBlur, onKeyDown: onKeyDown, autoFocus: true, size: 'small', style: { width: 200 } })) }));
+};

package/dist/inputs/index.d.ts

@@ -0,0 +1,9 @@
+export * from './TextInput';
+export * from './RangeInput';
+export * from './DateSwitcher';
+export * from './ImageUploader';
+export * from './FileUploader';
+export * from './CheckboxButton';
+export * from './RadioButton';
+export * from './FetchSelect';
+export * from './IconSelect';

package/dist/inputs/index.js

@@ -0,0 +1,9 @@
+export * from './TextInput';
+export * from './RangeInput';
+export * from './DateSwitcher';
+export * from './ImageUploader';
+export * from './FileUploader';
+export * from './CheckboxButton';
+export * from './RadioButton';
+export * from './FetchSelect';
+export * from './IconSelect';

package/dist/layout/DragSort/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type OnDragEndResponder, type DraggableProvided } from '@hello-pangea/dnd';
+interface DragSortProps<T> {
+    direction?: 'vertical' | 'horizontal';
+    droppableId?: string;
+    list?: T[];
+    children: (item: T, provided: DraggableProvided) => React.ReactNode;
+    lastChildren?: React.ReactNode;
+    onDragEnd?: OnDragEndResponder;
+    hasContext?: boolean;
+    dropType?: string;
+}
+export { type DropResult, type DraggableProvided } from '@hello-pangea/dnd';
+export declare const DragSort: <T extends {
+    id: string;
+}>(props: DragSortProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/layout/DragSort/index.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Space } from 'antd';
+import { DragDropContext, Draggable, Droppable, } from '@hello-pangea/dnd';
+export const DragSort = (props) => {
+    const { dropType, direction = 'vertical', droppableId = 'list', list, children, hasContext = true, lastChildren, onDragEnd = () => undefined, } = props;
+    const content = (_jsx(Droppable, { type: dropType, droppableId: droppableId, direction: direction, isDropDisabled: false, isCombineEnabled: false, ignoreContainerClipping: true, children: provided => (_jsx("div", { ref: provided.innerRef, ...provided.droppableProps, children: _jsxs(Space, { orientation: direction, wrap: true, style: { width: '100%' }, children: [list?.map((item, index) => (_jsx(Draggable, { disableInteractiveElementBlocking: true, draggableId: item.id.toString(), index: index, children: provided => (_jsx("div", { ref: provided.innerRef, ...provided.draggableProps, children: children(item, provided) })) }, item.id))), provided.placeholder, lastChildren] }) })) }));
+    if (!hasContext) {
+        return content;
+    }
+    return (_jsx(DragDropContext, { onDragEnd: onDragEnd, children: content }));
+};

package/dist/layout/FoldCard/index.d.ts

@@ -0,0 +1,9 @@
+import React, { CSSProperties } from 'react';
+import { CardProps } from 'antd';
+export interface FoldCardProps extends CardProps {
+    max?: number;
+    buttonStyle?: CSSProperties;
+    defaultCollapsed?: boolean;
+    showButtonOnHover?: boolean;
+}
+export declare const FoldCard: React.ForwardRefExoticComponent<FoldCardProps & React.RefAttributes<unknown>>;

package/dist/layout/FoldCard/index.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, forwardRef } from 'react';
+import { Card, Button } from 'antd';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+export const FoldCard = forwardRef((props, ref) => {
+    const { max, buttonStyle, defaultCollapsed = true, showButtonOnHover = true, children, style, onMouseEnter, onMouseLeave, ...rest } = props;
+    const maxHeight = max ?? 300;
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [hovered, setHovered] = useState(false);
+    const [isOverflow, setIsOverflow] = useState(false);
+    const contentRef = useRef(null);
+    const measureOverflow = () => {
+        const contentEl = contentRef.current;
+        if (!contentEl) {
+            return;
+        }
+        setIsOverflow(contentEl.scrollHeight > maxHeight);
+    };
+    const toggleCollapse = (ev) => {
+        ev.stopPropagation();
+        setCollapsed(value => !value);
+    };
+    useEffect(() => {
+        measureOverflow();
+        const contentEl = contentRef.current;
+        if (!contentEl || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(measureOverflow);
+        observer.observe(contentEl);
+        return () => observer.disconnect();
+    }, [children, maxHeight]);
+    const contentStyle = {
+        maxHeight: collapsed ? maxHeight : undefined,
+        transition: 'max-height 0.3s ease',
+        overflow: collapsed ? 'hidden' : 'visible',
+    };
+    const hoverButtonContainerStyle = {
+        position: 'absolute',
+        bottom: hovered ? 10 : -40,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        transition: 'bottom 0.3s ease, opacity 0.3s ease',
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        pointerEvents: 'none',
+        opacity: hovered && isOverflow ? 1 : 0,
+    };
+    const inlineButtonContainerStyle = {
+        textAlign: 'center',
+        marginTop: 8,
+    };
+    const finalButtonStyle = {
+        pointerEvents: 'auto',
+        border: 'none',
+        boxShadow: showButtonOnHover ? '0 2px 8px rgba(0, 0, 0, 0.15)' : undefined,
+        ...buttonStyle,
+    };
+    const button = (_jsx(Button, { size: 'small', icon: collapsed ? _jsx(DownOutlined, {}) : _jsx(UpOutlined, {}), onClick: toggleCollapse, style: finalButtonStyle }));
+    return (_jsxs(Card, { ref: ref, style: { position: 'relative', overflow: 'hidden', ...style }, onMouseEnter: (ev) => {
+            setHovered(true);
+            onMouseEnter?.(ev);
+        }, onMouseLeave: (ev) => {
+            setHovered(false);
+            onMouseLeave?.(ev);
+        }, ...rest, children: [_jsx("div", { style: contentStyle, ref: contentRef, children: children }), isOverflow && (showButtonOnHover ? (_jsx("div", { style: hoverButtonContainerStyle, children: button })) : (_jsx("div", { style: inlineButtonContainerStyle, children: button })))] }));
+});

package/dist/layout/PageBase/index.d.ts

@@ -0,0 +1,6 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+interface PageBaseProps extends PropsWithChildren {
+    title: ReactNode;
+}
+export declare const PageBase: (props: PageBaseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/layout/PageBase/index.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PageBase = (props) => {
+    const { title, children } = props;
+    return (_jsx("div", { className: 'max-w-7xl mx-auto', children: _jsxs("div", { className: 'p-6', children: [_jsx("h1", { className: 'text-2xl font-medium text-gray-900 mb-6', children: title }), children] }) }));
+};

package/dist/layout/ResizableGridLayout/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Layout } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+export type { Layout as GridLayoutItem } from 'react-grid-layout';
+interface ResizableGridLayoutProps<I> {
+    layout: I[];
+    style?: CSSProperties;
+    onChange?: (layout: I[]) => void;
+    renderItem?: (item: I) => ReactNode;
+}
+export declare const ResizableGridLayout: <I extends Layout>(props: ResizableGridLayoutProps<I>) => import("react/jsx-runtime").JSX.Element;

package/dist/layout/ResizableGridLayout/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import GridLayout from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+export const ResizableGridLayout = (props) => {
+    const { style, layout, onChange, renderItem = item => item.i } = props;
+    const onLayoutChange = (items) => {
+        onChange?.(items.map(item => ({
+            ...layout.find(i => i.i === item.i),
+            ...item,
+        })));
+    };
+    return (_jsx(GridLayout, { layout: layout, cols: 24, rowHeight: 50, width: 1200, useCSSTransforms: false, containerPadding: [0, 0], style: { width: '100%', height: '100%', userSelect: 'none', ...style }, draggableHandle: '.drag-handle', resizeHandles: ['se'], onLayoutChange: onLayoutChange, children: layout.map(item => (_jsx("div", { children: renderItem(item) }, item.i))) }));
+};

package/dist/layout/SideMenu/index.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+export interface SideMenuItem {
+    key: string;
+    title: string;
+    path: string;
+    icon?: string | null;
+}
+export interface SideMenuGroup {
+    group: string;
+    items: SideMenuItem[];
+}
+export interface SideMenuLinkRenderProps {
+    item: SideMenuItem;
+    className: string;
+    children: ReactNode;
+}
+export interface SideMenuProps {
+    items?: SideMenuGroup[];
+    currentPath?: string;
+    title?: ReactNode;
+    footer?: ReactNode;
+    defaultCollapsed?: boolean;
+    className?: string;
+    isActive?: (item: SideMenuItem, currentPath: string) => boolean;
+    renderLink?: (props: SideMenuLinkRenderProps) => ReactNode;
+}
+export declare const SideMenu: (props: SideMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layout/SideMenu/index.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { AppstoreOutlined, MenuFoldOutlined, MenuUnfoldOutlined, } from '@ant-design/icons';
+import { Button } from 'antd';
+import { getIconNode } from '../../inputs/IconSelect';
+const defaultIsActive = (item, currentPath) => {
+    const prefix = item.path.split('/').slice(0, 2).join('/');
+    return currentPath.startsWith(prefix);
+};
+export const SideMenu = (props) => {
+    const { items, currentPath = '', title, footer, defaultCollapsed = false, className = '', isActive = defaultIsActive, renderLink, } = props;
+    const menuRef = useRef(null);
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [menuWidth, setMenuWidth] = useState(0);
+    const shouldShowTitle = menuWidth > 180;
+    useEffect(() => {
+        if (!menuRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                setMenuWidth(entry.contentRect.width);
+            }
+        });
+        resizeObserver.observe(menuRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return (_jsxs("div", { ref: menuRef, className: `bg-gray-100 h-screen flex flex-col transition-all ${collapsed ? 'w-16' : 'w-48'} ${className}`.trim(), children: [_jsxs("div", { className: 'p-4 flex items-center justify-between', children: [shouldShowTitle && title ? _jsx("div", { className: 'text-xl font-bold', children: title }) : null, _jsx(Button, { type: 'text', icon: collapsed ? _jsx(MenuUnfoldOutlined, {}) : _jsx(MenuFoldOutlined, {}), onClick: () => setCollapsed(!collapsed), className: 'flex items-center justify-center' })] }), _jsx("ul", { className: 'flex-1 overflow-y-auto', children: items?.map(group => (_jsxs("div", { children: [shouldShowTitle && !collapsed ? (_jsx("div", { className: 'text-xs text-gray-500 py-2 px-4 font-medium', children: group.group })) : null, group.items.map(item => {
+                            const active = isActive(item, currentPath);
+                            const linkClassName = `flex items-center py-2 text-gray-900 transition-colors justify-center no-underline hover:no-underline ${collapsed ? '' : 'pr-4'} ${active
+                                ? '!bg-blue-500 !text-white'
+                                : 'hover:!bg-gray-200 hover:!text-gray-900'}`;
+                            const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: 'text-lg', children: getIconNode(item.icon) ?? _jsx(AppstoreOutlined, {}) }), shouldShowTitle ? _jsx("span", { className: 'ml-2', children: item.title }) : null] }));
+                            return (_jsx("li", { children: renderLink
+                                    ? renderLink({ item, className: linkClassName, children: content })
+                                    : (_jsx("a", { href: item.path, className: linkClassName, children: content })) }, item.key));
+                        })] }, group.group))) }), _jsx("div", { className: 'border-t border-gray-200 mt-auto', children: !collapsed ? footer : null })] }));
+};

package/dist/layout/TabsPro/index.d.ts

@@ -0,0 +1,9 @@
+import { type TabsProps } from 'antd';
+type SyncMode = 'replace' | 'push';
+export interface TabsProProps extends TabsProps {
+    syncToUrl?: boolean;
+    queryKey?: string;
+    historyMode?: SyncMode;
+}
+export declare const TabsPro: (props: TabsProProps) => import("react/jsx-runtime").JSX.Element;
+export {};