@zjpcy/simple-design 1.2.2 → 1.2.10

package/dist/types/components/Progress/types.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export type ProgressType = 'line' | 'circle' | 'dashboard';
+export type ProgressStatus = 'success' | 'exception' | 'active' | 'normal';
+export interface ProgressProps {
+    /** 百分比 */
+    percent?: number;
+    /** 类型 */
+    type?: ProgressType;
+    /** 状态 */
+    status?: ProgressStatus;
+    /** 是否显示百分比文字 */
+    showInfo?: boolean;
+    /** 自定义显示文字 */
+    format?: (percent?: number, successPercent?: number) => ReactNode;
+    /** 成功进度条颜色 */
+    strokeColor?: string;
+    /** 背景颜色 */
+    trailColor?: string;
+    /** 线条粗细 */
+    strokeWidth?: number;
+    /** 线条宽度，type=line 时生效 */
+    size?: 'small' | 'default' | 'large';
+    /** 是否开启动画 */
+    transition?: boolean;
+    /** 是否开启仪表盘样式 */
+    gapDegree?: number;
+    /** 仪表盘缺口位置 */
+    gapPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** 前缀图标 */
+    icon?: ReactNode;
+    /** 前缀文字 */
+    prefix?: string;
+    /** 后缀文字 */
+    suffix?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export default ProgressProps;

package/dist/types/components/Table/SortableRow.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Column } from './index';
+interface SortableRowProps {
+    id: string;
+    record: any;
+    rowIndex: number;
+    columns: Column[];
+    columnWidths: number[];
+    fixedLeftColumns: Column[];
+    fixedRightColumns: Column[];
+    normalColumns: Column[];
+    allColumns: Column[];
+    editingCell: {
+        rowIndex: number;
+        colKey: string;
+    } | null;
+    editingValue: string;
+    handleEdit: (rowIndex: number, colKey: string, value: any) => void;
+    handleSave: (record: any, column: Column) => void;
+    handleCancel: () => void;
+    setEditingValue: (value: string) => void;
+    renderTableCell: (column: Column, record: any, rowIndex: number, colIndex: number, colGroup: Column[]) => React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const SortableRow: React.FC<SortableRowProps>;
+export default SortableRow;

package/dist/types/components/Table/index.d.ts

@@ -44,6 +44,10 @@ interface TableProps {
     loadingText?: ReactNode;
     /** 加载延迟时间（毫秒），设置后loading状态会在指定时间后自动取消 */
     loadingDelay?: number;
+    /** 是否开启行拖拽功能 */
+    draggable?: boolean;
+    /** 拖拽结束时的回调函数，返回新的数据顺序 */
+    onDragEnd?: (newData: any[]) => void;
 }
-declare const Table: ({ dataSource, columns, bordered, scroll, rowKey, className, pagination, empty, loading, loadingText, loadingDelay }: TableProps) => import("react/jsx-runtime").JSX.Element;
+declare const Table: ({ dataSource, columns, bordered, scroll, rowKey, className, pagination, empty, loading, loadingText, loadingDelay, draggable, onDragEnd, }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export default Table;

package/dist/types/components/Tag/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TagProps } from './types';
+import './Tag.css';
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export default Tag;
+export type { TagProps, TagSize } from './types';

package/dist/types/components/Tag/styles.d.ts

@@ -0,0 +1,52 @@
+import { CSSProperties } from 'react';
+import { TagSize } from './types';
+/**
+ * 获取标签尺寸对应的样式
+ */
+export declare const getTagSizeStyle: (size: TagSize) => CSSProperties;
+/**
+ * 获取标签颜色样式
+ */
+export declare const getTagColorStyle: (backgroundColor?: string, color?: string) => CSSProperties;
+/**
+ * 预设标签颜色
+ */
+export declare const presetTagColors: {
+    readonly red: {
+        readonly backgroundColor: "#fff2f0";
+        readonly color: "#ff4d4f";
+    };
+    readonly orange: {
+        readonly backgroundColor: "#fff7e6";
+        readonly color: "#fa8c16";
+    };
+    readonly gold: {
+        readonly backgroundColor: "#fffbe6";
+        readonly color: "#faad14";
+    };
+    readonly green: {
+        readonly backgroundColor: "#f6ffed";
+        readonly color: "#52c41a";
+    };
+    readonly cyan: {
+        readonly backgroundColor: "#e6fffb";
+        readonly color: "#13c2c2";
+    };
+    readonly blue: {
+        readonly backgroundColor: "#e6f7ff";
+        readonly color: "#1890ff";
+    };
+    readonly purple: {
+        readonly backgroundColor: "#f9f0ff";
+        readonly color: "#722ed1";
+    };
+    readonly pink: {
+        readonly backgroundColor: "#fff0f6";
+        readonly color: "#eb2f96";
+    };
+    readonly gray: {
+        readonly backgroundColor: "#f5f5f5";
+        readonly color: "#666";
+    };
+};
+export type PresetTagColor = keyof typeof presetTagColors;

package/dist/types/components/Tag/types.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export type TagSize = 'small' | 'medium' | 'large';
+export interface TagProps {
+    /**
+     * 标签内容
+     */
+    children?: React.ReactNode;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 标签尺寸
+     * @default 'medium'
+     */
+    size?: TagSize;
+    /**
+     * 自定义背景色
+     */
+    backgroundColor?: string;
+    /**
+     * 自定义字体颜色
+     */
+    color?: string;
+    /**
+     * 前缀图标，可以是 Icon 组件的 type 字符串或自定义 React 节点
+     */
+    icon?: string | React.ReactNode;
+    /**
+     * 是否可关闭
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * 关闭时的回调
+     */
+    onClose?: (e: React.MouseEvent) => void;
+    /**
+     * 点击标签时的回调
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}

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

@@ -7,7 +7,7 @@ export { default as Divider } from './Divider';
 export { default as Empty } from './Empty';
 export { default as Flex } from './Flex';
 export { default as Icon } from './Icon';
-export { default as Input } from './Input';
+export { default as Input, Textarea } from './Input';
 export { default as Marquee } from './Marquee';
 export { default as Message, MessageProvider, useMessage, message } from './Message';
 export { default as Modal } from './Modal';
@@ -27,7 +27,6 @@ export { default as i18n } from '../i18n/index';
 export { default as Dropdown } from './Dropdown';
 export { default as Menu } from './Menu';
 export { default as Pagination } from './Pagination';
-export { default as Navigation } from './Navigation';
 export { default as Rate } from './Rate';
 export { default as Slider } from './Slider';
 export { default as Steps } from './Steps';
@@ -35,5 +34,16 @@ export { default as Switch } from './Switch';
 export { default as Tabs } from './Tabs';
 export { default as Transfer } from './Transfer';
 export { default as Label } from './Label';
+export { default as Layout } from './Layout';
 export { default as Tooltip } from './Tooltip';
 export { default as Form } from './Form';
+export { default as Grid, Row, Col } from './Grid';
+export { default as Drawer } from './Drawer';
+export type { DrawerProps, DrawerPlacement } from './Drawer';
+export { default as Checkbox } from './Checkbox';
+export { default as Tag } from './Tag';
+export type { TagProps, TagSize } from './Tag';
+export { default as Popconfirm } from './Popconfirm';
+export type { PopconfirmProps, PopconfirmPlacement } from './Popconfirm';
+export { default as Progress } from './Progress';
+export type { ProgressProps, ProgressType, ProgressStatus } from './Progress';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjpcy/simple-design",
-  "version": "1.2.02",
+  "version": "1.2.10",
   "description": "IDP Studio Design System - React Component Library",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/dist/es/Navigation/index.js

@@ -1 +0,0 @@
-import{__assign as n,__spreadArray as e}from"../node_modules/tslib/tslib.es6.js";import{jsxs as i,jsx as t,Fragment as o}from"react/jsx-runtime";import a,{useCallback as r,useState as c,useRef as l,useMemo as d,useEffect as s,startTransition as u}from"react";import v from"../Input/index.js";import h from"../Button/Button.js";var m=a.memo(function(n){var e,a=n.item,c=n.level,l=n.collapsed,d=n.mode,s=n.openKeySet,u=n.selectedKey,v=n.onItemClick,h=n.onToggleOpen,p=!!a.childrens&&a.childrens.length>0,f=s.has(a.key),g=u===a.key,y="horizontal"===d,k=0===c,N=r(function(n){n.stopPropagation(),v(a,a.key),!p||l&&!y||h(a.key,k)},[a,v,h,p,l,y,k]),w=y&&k||l?12:12+16*c,C=f&&(!l||y);return i("div",{className:"navigation-item-wrapper",children:[t("div",{className:"navigation-item ".concat(g?"selected":""," ").concat(a.disabled?"disabled":""),style:{paddingLeft:w},title:l?a.name:void 0,onClick:N,children:i("div",{className:"navigation-item-content",children:[a.icon&&t("span",{className:"navigation-item-icon",children:a.icon}),!l&&i(o,{children:[t("span",{className:"navigation-item-name",children:a.name}),a.description&&t("span",{className:"navigation-item-description",children:a.description})]}),p&&!l&&(!y||!k)&&t("span",{className:"navigation-item-arrow ".concat(C?"open":""),children:"▼"}),p&&y&&k&&t("span",{className:"navigation-item-arrow horizontal ".concat(C?"open":""),children:"▼"})]})}),p&&!l&&C&&t("div",{className:"navigation-children open".concat(y&&k?" horizontal":""),children:null===(e=a.childrens)||void 0===e?void 0:e.map(function(n){return t(m,{item:n,level:c+1,collapsed:l,mode:d,openKeySet:s,selectedKey:u,onItemClick:v,onToggleOpen:h},n.key)})})]})}),p=function(a){var p=a.items,f=a.selectedKey,g=a.collapsed,y=a.defaultOpenKeys,k=void 0===y?[]:y,N=a.mode,w=void 0===N?"vertical":N,C=a.closeOnOutsideClick,K=void 0===C||C,b=a.header,I=a.footer,L=a.onChange,S=a.onCollapseChange,D=a.className,M=void 0===D?"":D,O=a.style,z=a.width,j=void 0===z?280:z,E=a.collapsedWidth,P=void 0===E?48:E,x=a.animationDuration,T=void 0===x?300:x,B=c(k),A=B[0],W=B[1],_=c(""),q=_[0],F=_[1],G=c(null!=g&&g),H=G[0],J=G[1],Q=c(""),R=Q[0],U=Q[1],V=l(""),X=l(null),Y="horizontal"===w,Z=r(function(e,i){if(!i.trim())return e;var t=i.toLowerCase();return e.reduce(function(e,o){var a,r,c=o.key.toLowerCase().includes(t),l=o.name.toLowerCase().includes(t),d=null===(a=o.description)||void 0===a?void 0:a.toLowerCase().includes(t);return o.childrens&&o.childrens.length>0&&(r=Z(o.childrens,i)),(c||l||d||r&&r.length>0)&&e.push(n(n({},o),{childrens:r})),e},[])},[]),$=d(function(){return Z(p,R)},[p,R,Z]),nn=d(function(){var n=new Map,i=new Map,t=function(o,a){void 0===a&&(a=[]),o.forEach(function(o){var r=e(e([],a,!0),[o.key],!1);i.set(o.key,r),n.set(o.key,r[0]),o.childrens&&o.childrens.length>0&&t(o.childrens,r)})};return t(p),{rootMap:n,pathMap:i}},[p]),en=nn.rootMap,tn=nn.pathMap;s(function(){void 0!==f&&(V.current=f,F(f))},[f]),s(function(){void 0!==g&&J(g)},[g]);var on=r(function(n){return en.get(n)||n},[en]),an=d(function(){return!Y&&(void 0!==g?g:H)},[g,H,Y]),rn=d(function(){return new Set(A)},[A]),cn=d(function(){return(void 0!==f?f:q)||V.current},[f,q]),ln=d(function(){return cn?an?on(cn):cn:""},[an,on,cn]),dn=d(function(){if(!cn)return[];var n=tn.get(cn);return n?n.slice(0,-1):[]},[tn,cn]);s(function(){!cn||an||Y||W(function(n){var e=!1,i=new Set(n);return dn.forEach(function(n){i.has(n)||(i.add(n),e=!0)}),e?Array.from(i):n})},[cn,an,dn,Y]);var sn=r(function(n,i){u(function(){W(function(t){return Y&&i?t.includes(n)?[]:[n]:t.includes(n)?t.filter(function(e){return e!==n}):e(e([],t,!0),[n],!1)})})},[Y]),un=r(function(){var n=!an;void 0===g&&J(n),null==S||S(n)},[an,g,S]),vn=r(function(n){if(!n.disabled){V.current=n.key;var e=!!n.childrens&&n.childrens.length>0;Y&&!e&&W([]),void 0===f?(u(function(){F(n.key)}),null==L||L(n,n.key)):null==L||L(n,n.key)}},[f,L,Y,tn]),hn=d(function(){return Y?"100%":an?P:j},[an,j,P,Y]);return s(function(){if(Y&&K){var n=function(n){var e=n.target;X.current&&e&&!X.current.contains(e)&&W([])};return document.addEventListener("mousedown",n),function(){document.removeEventListener("mousedown",n)}}},[Y,K]),i("div",{ref:X,className:"idp-navigation ".concat(M," ").concat(an?"collapsed":""," ").concat(Y?"horizontal":""),style:n({width:hn,transition:"width ".concat(T,"ms ease")},O),children:[!Y&&null!==b&&!1!==b&&t("div",{className:"navigation-header",children:null!=b?b:t(o,{children:an?t(h,{onClick:un,className:"navigation-collapse-button",variant:"secondary",children:"→"}):i(o,{children:[i("div",{className:"navigation-header-row",children:[t("h2",{className:"navigation-title",children:"IDP Design"}),t(h,{onClick:un,className:"navigation-collapse-button",variant:"secondary",children:"←"})]}),t("div",{className:"navigation-search",children:t(v.Search,{placeholder:"搜索组件...",value:R,onChange:function(n){return U(n.target.value)},clear:!0})})]})})}),t("div",{className:"navigation-list",children:$.length>0?$.map(function(n){return t(m,{item:n,level:0,collapsed:an,mode:w,openKeySet:rn,selectedKey:ln,onItemClick:vn,onToggleOpen:sn},n.key)}):t("div",{className:"navigation-empty",children:t("span",{children:"未找到匹配的组件"})})}),!an&&!Y&&null!==I&&!1!==I&&t("div",{className:"navigation-footer",children:null!=I?I:i(o,{children:[t("p",{children:"IDP Design v1.0.0"}),t("p",{children:"IDP Studio"})]})})]})};export{p as default};

package/dist/types/components/Navigation/index.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { NavigationProps } from './types';
-import './Navigation.css';
-declare const Navigation: React.FC<NavigationProps>;
-export default Navigation;

package/dist/types/components/Navigation/types.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-export interface NavigationItem {
-    key: string;
-    name: string;
-    description?: string;
-    icon?: React.ReactNode;
-    childrens?: NavigationItem[];
-    disabled?: boolean;
-}
-export type NavigationMode = 'vertical' | 'horizontal';
-export interface NavigationProps {
-    items: NavigationItem[];
-    selectedKey?: string;
-    collapsed?: boolean;
-    defaultOpenKeys?: string[];
-    mode?: NavigationMode;
-    closeOnOutsideClick?: boolean;
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
-    onChange?: (item: NavigationItem, key: string) => void;
-    onCollapseChange?: (collapsed: boolean) => void;
-    className?: string;
-    style?: React.CSSProperties;
-    width?: number;
-    collapsedWidth?: number;
-    animationDuration?: number;
-}
-export interface NavigationState {
-    openKeys: string[];
-    selectedKey: string;
-    collapsed: boolean;
-}
-export interface NavigationContextType {
-    openKeys: string[];
-    selectedKey: string;
-    collapsed: boolean;
-    keyRef: React.RefObject<string>;
-    clickNodeRef: React.RefObject<NavigationItem | null>;
-    toggleOpenKey: (key: string) => void;
-    setSelectedKey: (key: string) => void;
-    toggleCollapsed: () => void;
-}
-export {};