@antv/infographic 0.2.11 → 0.2.13

package/esm/designs/components/Btn.js

@@ -1,7 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Rect } from '../../jsx/index.js';
 export const BtnAdd = (props) => {
-    const { indexes, ...restProps } = props;
+    const { indexes } = props, restProps = __rest(props, ["indexes"]);
     const defaultProps = {
         fill: '#B9EBCA',
         fillOpacity: 0.3,
@@ -10,10 +21,10 @@ export const BtnAdd = (props) => {
         'data-indexes': indexes,
         'data-element-type': "btn-add" /* ElementTypeEnum.BtnAdd */,
     };
-    return _jsx(Rect, { ...defaultProps, ...restProps });
+    return _jsx(Rect, Object.assign({}, defaultProps, restProps));
 };
 export const BtnRemove = (props) => {
-    const { indexes, ...restProps } = props;
+    const { indexes } = props, restProps = __rest(props, ["indexes"]);
     const defaultProps = {
         fill: '#F9C0C0',
         fillOpacity: 0.3,
@@ -22,5 +33,5 @@ export const BtnRemove = (props) => {
         'data-indexes': indexes,
         'data-element-type': "btn-remove" /* ElementTypeEnum.BtnRemove */,
     };
-    return _jsx(Rect, { ...defaultProps, ...restProps });
+    return _jsx(Rect, Object.assign({}, defaultProps, restProps));
 };

package/esm/designs/components/BtnsGroup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Group } from '../../jsx/index.js';
 export const BtnsGroup = (props) => {
-    return (_jsx(Group, { "data-element-type": "btns-group" /* ElementTypeEnum.BtnsGroup */, width: 0, height: 0, ...props, display: "none" }));
+    return (_jsx(Group, Object.assign({ "data-element-type": "btns-group" /* ElementTypeEnum.BtnsGroup */, width: 0, height: 0 }, props, { display: "none" })));
 };

package/esm/designs/components/Illus.js

@@ -1,10 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Rect } from '../../jsx/index.js';
-export const Illus = ({ indexes, ...props }) => {
+export const Illus = (_a) => {
+    var { indexes } = _a, props = __rest(_a, ["indexes"]);
     const defaultProps = {
         fill: 'lightgray',
     };
-    const finalProps = { ...defaultProps, ...props };
+    const finalProps = Object.assign(Object.assign({}, defaultProps), props);
     if (indexes) {
         finalProps['data-indexes'] = indexes;
         finalProps['data-element-type'] = "item-illus" /* ElementTypeEnum.ItemIllus */;
@@ -12,5 +24,5 @@ export const Illus = ({ indexes, ...props }) => {
     else {
         finalProps['data-element-type'] = "illus" /* ElementTypeEnum.Illus */;
     }
-    return _jsx(Rect, { ...finalProps });
+    return _jsx(Rect, Object.assign({}, finalProps));
 };

package/esm/designs/components/ItemDesc.js

@@ -1,16 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Text } from '../../jsx/index.js';
-export const ItemDesc = ({ indexes, lineNumber = 2, children, ...props }) => {
+export const ItemDesc = (_a) => {
+    var _b;
+    var { indexes, lineNumber = 2, children } = _a, props = __rest(_a, ["indexes", "lineNumber", "children"]);
     if (!children)
         return null;
-    const finalProps = {
-        fontSize: 14,
-        fill: '#666',
-        wordWrap: true,
-        lineHeight: 1.4,
-        children,
-        ...props,
-    };
-    finalProps.height ?? (finalProps.height = Math.ceil(lineNumber * +finalProps.lineHeight * +finalProps.fontSize));
-    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-desc" /* ElementTypeEnum.ItemDesc */ }));
+    const finalProps = Object.assign({ fontSize: 14, fill: '#666', wordWrap: true, lineHeight: 1.4, children }, props);
+    (_b = finalProps.height) !== null && _b !== void 0 ? _b : (finalProps.height = Math.ceil(lineNumber * +finalProps.lineHeight * +finalProps.fontSize));
+    return (_jsx(Text, Object.assign({}, finalProps, { "data-indexes": indexes, "data-element-type": "item-desc" /* ElementTypeEnum.ItemDesc */ })));
 };

package/esm/designs/components/ItemIcon.js

@@ -1,27 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "../../jsx-runtime.js";
 import { Ellipse, Group, Rect } from '../../jsx/index.js';
 export const ItemIcon = (props) => {
-    const { indexes, size = 32, ...restProps } = props;
-    const finalProps = {
-        fill: 'lightgray',
-        width: size,
-        height: size,
-        ...restProps,
-    };
-    return (_jsx(Rect, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-icon" }));
+    const { indexes, size = 32 } = props, restProps = __rest(props, ["indexes", "size"]);
+    const finalProps = Object.assign({ fill: 'lightgray', width: size, height: size }, restProps);
+    return (_jsx(Rect, Object.assign({}, finalProps, { "data-indexes": indexes, "data-element-type": "item-icon" })));
 };
 export const ItemIconCircle = (props) => {
-    const { indexes, size = 50, fill, colorBg = 'white', ...restProps } = props;
+    const { indexes, size = 50, fill, colorBg = 'white' } = props, restProps = __rest(props, ["indexes", "size", "fill", "colorBg"]);
     // 圆形内最大内切正方形的边长 = 圆的直径 / √2
     const innerSize = (size / Math.SQRT2) * 0.9;
     const offset = (size - innerSize) / 2;
-    const iconProps = {
-        fill: colorBg,
-        ...restProps,
-        x: offset,
-        y: offset,
-        width: innerSize,
-        height: innerSize,
-    };
-    return (_jsxs(Group, { ...restProps, width: size, height: size, "data-element-type": "item-icon-group" /* ElementTypeEnum.ItemIconGroup */, children: [_jsx(Ellipse, { width: size, height: size, fill: fill, "data-element-type": "shape" }), _jsx(Rect, { ...iconProps, "data-indexes": indexes, "data-element-type": "item-icon" /* ElementTypeEnum.ItemIcon */ })] }));
+    const iconProps = Object.assign(Object.assign({ fill: colorBg }, restProps), { x: offset, y: offset, width: innerSize, height: innerSize });
+    return (_jsxs(Group, Object.assign({}, restProps, { width: size, height: size, "data-element-type": "item-icon-group" /* ElementTypeEnum.ItemIconGroup */, children: [_jsx(Ellipse, { width: size, height: size, fill: fill, "data-element-type": "shape" }), _jsx(Rect, Object.assign({}, iconProps, { "data-indexes": indexes, "data-element-type": "item-icon" /* ElementTypeEnum.ItemIcon */ }))] })));
 };

package/esm/designs/components/ItemLabel.js

@@ -1,14 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Text } from '../../jsx/index.js';
-export const ItemLabel = ({ indexes, children, ...props }) => {
-    const finalProps = {
-        fontSize: 18,
-        fontWeight: 'bold',
-        fill: '#252525',
-        lineHeight: 1.4,
-        children,
-        ...props,
-    };
-    finalProps.height ?? (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
-    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-label" /* ElementTypeEnum.ItemLabel */ }));
+export const ItemLabel = (_a) => {
+    var _b;
+    var { indexes, children } = _a, props = __rest(_a, ["indexes", "children"]);
+    const finalProps = Object.assign({ fontSize: 18, fontWeight: 'bold', fill: '#252525', lineHeight: 1.4, children }, props);
+    (_b = finalProps.height) !== null && _b !== void 0 ? _b : (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
+    return (_jsx(Text, Object.assign({}, finalProps, { "data-indexes": indexes, "data-element-type": "item-label" /* ElementTypeEnum.ItemLabel */ })));
 };

package/esm/designs/components/ItemValue.js

@@ -1,15 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Text } from '../../jsx/index.js';
-export const ItemValue = ({ indexes, value, formatter = (v) => String(v), ...props }) => {
-    const finalProps = {
-        fontSize: 14,
-        fill: '#666',
-        wordWrap: true,
-        lineHeight: 1.4,
-        children: formatter(value),
-        'data-value': value,
-        ...props,
-    };
-    finalProps.height ?? (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
-    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-value" /* ElementTypeEnum.ItemValue */ }));
+export const ItemValue = (_a) => {
+    var _b;
+    var { indexes, value, formatter = (v) => String(v) } = _a, props = __rest(_a, ["indexes", "value", "formatter"]);
+    const finalProps = Object.assign({ fontSize: 14, fill: '#666', wordWrap: true, lineHeight: 1.4, children: formatter(value), 'data-value': value }, props);
+    (_b = finalProps.height) !== null && _b !== void 0 ? _b : (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
+    return (_jsx(Text, Object.assign({}, finalProps, { "data-indexes": indexes, "data-element-type": "item-value" /* ElementTypeEnum.ItemValue */ })));
 };

package/esm/designs/components/ItemsGroup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Group } from '../../jsx/index.js';
 export const ItemsGroup = (props) => {
-    return _jsx(Group, { "data-element-type": "items-group" /* ElementTypeEnum.ItemsGroup */, ...props });
+    return _jsx(Group, Object.assign({ "data-element-type": "items-group" /* ElementTypeEnum.ItemsGroup */ }, props));
 };

package/esm/designs/components/ShapesGroup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Group } from '../../jsx/index.js';
 export const ShapesGroup = (props) => {
-    return _jsx(Group, { "data-element-type": "shapes-group", ...props });
+    return _jsx(Group, Object.assign({ "data-element-type": "shapes-group" }, props));
 };

package/esm/designs/components/Title.js

@@ -10,7 +10,7 @@ export const Title = (props) => {
             lineHeight: 1.4,
             alignHorizontal,
         };
-        return (_jsx(Text, { ...defaultProps, ...props, "data-element-type": "title", children: title }));
+        return (_jsx(Text, Object.assign({}, defaultProps, props, { "data-element-type": "title", children: title })));
     };
     const Desc = (props) => {
         const defaultProps = {
@@ -20,7 +20,7 @@ export const Title = (props) => {
             lineHeight: 1.4,
             height: subTitleLineNumber * 24,
         };
-        return (_jsx(Text, { ...defaultProps, ...props, "data-element-type": "desc", children: desc }));
+        return (_jsx(Text, Object.assign({}, defaultProps, props, { "data-element-type": "desc", children: desc })));
     };
     if (!title && !desc)
         return null;

package/esm/designs/decorations/simple-arrow.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../jsx-runtime.js";
 import { Defs, Polygon } from '../../jsx/index.js';
-export const SimpleArrow = ({ width = 25, height = 25, colorPrimary = '#6699FF', rotation = 0, ...rest }) => {
+export const SimpleArrow = (_a) => {
+    var { width = 25, height = 25, colorPrimary = '#6699FF', rotation = 0 } = _a, rest = __rest(_a, ["width", "height", "colorPrimary", "rotation"]);
     const strokeId = `gradient-arrow-stroke-${colorPrimary.replace('#', '')}`;
     const fillId = `gradient-arrow-fill-${colorPrimary.replace('#', '')}`;
     const shaftWidth = Math.round(width * 0.515);
@@ -18,5 +30,5 @@ export const SimpleArrow = ({ width = 25, height = 25, colorPrimary = '#6699FF',
     const centerX = width / 2;
     const centerY = height / 2;
     const transform = `rotate(${rotation} ${centerX} ${centerY})`;
-    return (_jsxs(_Fragment, { children: [_jsx(Polygon, { ...rest, width: width, height: height, points: points, fill: `url(#${fillId})`, stroke: `url(#${strokeId})`, transform: transform, "data-element-type": "shape" }), _jsxs(Defs, { children: [_jsxs("linearGradient", { id: fillId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [_jsx("stop", { offset: "0%", "stop-color": colorPrimary, "stop-opacity": "0.36" }), _jsx("stop", { offset: "100%", "stop-color": colorPrimary, "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: strokeId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [_jsx("stop", { offset: "0%", "stop-color": colorPrimary }), _jsx("stop", { offset: "58%", "stop-color": colorPrimary, "stop-opacity": "0" })] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Polygon, Object.assign({}, rest, { width: width, height: height, points: points, fill: `url(#${fillId})`, stroke: `url(#${strokeId})`, transform: transform, "data-element-type": "shape" })), _jsxs(Defs, { children: [_jsxs("linearGradient", { id: fillId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [_jsx("stop", { offset: "0%", "stop-color": colorPrimary, "stop-opacity": "0.36" }), _jsx("stop", { offset: "100%", "stop-color": colorPrimary, "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: strokeId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [_jsx("stop", { offset: "0%", "stop-color": colorPrimary }), _jsx("stop", { offset: "58%", "stop-color": colorPrimary, "stop-opacity": "0" })] })] })] }));
 };

package/esm/designs/decorations/triangle.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { Polygon } from '../../jsx/index.js';
-export const Triangle = ({ width = 25, height = 25, colorPrimary = '#6699FF', rotation = 0, strokeWidth = 4, ...rest }) => {
+export const Triangle = (_a) => {
+    var { width = 25, height = 25, colorPrimary = '#6699FF', rotation = 0, strokeWidth = 4 } = _a, rest = __rest(_a, ["width", "height", "colorPrimary", "rotation", "strokeWidth"]);
     // 定义三角形的三个顶点
     const points = [
         { x: width / 2, y: 0 }, // 顶点
@@ -10,5 +22,5 @@ export const Triangle = ({ width = 25, height = 25, colorPrimary = '#6699FF', ro
     const centerX = width / 2;
     const centerY = height / 2;
     const transform = `rotate(${rotation} ${centerX} ${centerY})`;
-    return (_jsx(Polygon, { ...rest, width: width, height: height, points: points, fill: colorPrimary, stroke: colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", transform: transform }));
+    return (_jsx(Polygon, Object.assign({}, rest, { width: width, height: height, points: points, fill: colorPrimary, stroke: colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", transform: transform })));
 };

package/esm/designs/defs/DropShadow.js

@@ -1,5 +1,16 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 export const DropShadow = (props) => {
-    const { color = 'black', opacity = 0.8, ...restProps } = props;
-    return (_jsx("filter", { id: "drop-shadow", x: "-25%", y: "-25%", width: "200%", height: "200%", ...restProps, children: _jsx("feDropShadow", { dx: "4", dy: "4", stdDeviation: "4", "flood-color": color, "flood-opacity": opacity }) }));
+    const { color = 'black', opacity = 0.8 } = props, restProps = __rest(props, ["color", "opacity"]);
+    return (_jsx("filter", Object.assign({ id: "drop-shadow", x: "-25%", y: "-25%", width: "200%", height: "200%" }, restProps, { children: _jsx("feDropShadow", { dx: "4", dy: "4", stdDeviation: "4", "flood-color": color, "flood-opacity": opacity }) })));
 };

package/esm/designs/defs/LinearGradient.js

@@ -7,5 +7,5 @@ export const LinearGradient = (props) => {
         'top-bottom': { x1: '0%', y1: '0%', x2: '0%', y2: '100%' },
         'bottom-top': { x1: '0%', y1: '100%', x2: '0%', y2: '0%' },
     };
-    return (_jsxs("linearGradient", { id: id, ...directionMap[direction], children: [_jsx("stop", { offset: "0%", stopColor: startColor }), _jsx("stop", { offset: "100%", stopColor: stopColor })] }));
+    return (_jsxs("linearGradient", Object.assign({ id: id }, directionMap[direction], { children: [_jsx("stop", { offset: "0%", stopColor: startColor }), _jsx("stop", { offset: "100%", stopColor: stopColor })] })));
 };

package/esm/designs/items/BadgeCard.js

@@ -32,9 +32,9 @@ export const BadgeCard = (props) => {
         : positionH === 'flipped'
             ? 'right'
             : 'left';
-    return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsx(Defs, { children: _jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor(themeColors.colorPrimary)
+    return (_jsxs(Group, Object.assign({}, restProps, { width: width, height: height, children: [_jsx(Defs, { children: _jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor(themeColors.colorPrimary)
                                 .darken(20)
-                                .toHexString() })] }) }), _jsx(Rect, { "data-element-type": "shape", x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimaryBg, rx: 8, ry: 8 }), hasIcon && (_jsxs(_Fragment, { children: [_jsx(Ellipse, { x: badgeX, y: badgeY, width: badgeSize, height: badgeSize, fill: `url(#${gradientId})` }), _jsx(ItemIcon, { indexes: indexes, x: badgeX + (badgeSize - iconSize) / 2, y: badgeY + (badgeSize - iconSize) / 2, size: iconSize, fill: themeColors.colorWhite })] })), _jsxs(FlexLayout, { flexDirection: "column", x: contentStartX, y: contentY, width: contentWidth, height: !hasValue && !hasDesc ? undefined : contentAreaHeight, alignItems: "center", justifyContent: "center", children: [_jsx(ItemLabel, { indexes: indexes, width: contentWidth, alignHorizontal: textAlign, alignVertical: "middle", fontSize: 14, fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "middle", fontSize: 18, lineHeight: 1, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), hasDesc && (_jsx(ItemDesc, { indexes: indexes, x: gap, y: descY, width: fullWidth, alignHorizontal: textAlign, fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: 2, lineHeight: 1.2, wordWrap: true, children: datum.desc }))] }));
+                                .toHexString() })] }) }), _jsx(Rect, { "data-element-type": "shape", x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimaryBg, rx: 8, ry: 8 }), hasIcon && (_jsxs(_Fragment, { children: [_jsx(Ellipse, { x: badgeX, y: badgeY, width: badgeSize, height: badgeSize, fill: `url(#${gradientId})` }), _jsx(ItemIcon, { indexes: indexes, x: badgeX + (badgeSize - iconSize) / 2, y: badgeY + (badgeSize - iconSize) / 2, size: iconSize, fill: themeColors.colorWhite })] })), _jsxs(FlexLayout, { flexDirection: "column", x: contentStartX, y: contentY, width: contentWidth, height: !hasValue && !hasDesc ? undefined : contentAreaHeight, alignItems: "center", justifyContent: "center", children: [_jsx(ItemLabel, { indexes: indexes, width: contentWidth, alignHorizontal: textAlign, alignVertical: "middle", fontSize: 14, fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "middle", fontSize: 18, lineHeight: 1, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), hasDesc && (_jsx(ItemDesc, { indexes: indexes, x: gap, y: descY, width: fullWidth, alignHorizontal: textAlign, fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: 2, lineHeight: 1.2, wordWrap: true, children: datum.desc }))] })));
 };
 registerItem('badge-card', {
     component: BadgeCard,

package/esm/designs/items/CandyCardLite.js

@@ -5,7 +5,7 @@ import { getItemProps } from '../utils/index.js';
 import { registerItem } from './registry.js';
 export const CandyCardLite = (props) => {
     const [{ indexes, datum, width = 280, height = 140, themeColors }, restProps,] = getItemProps(props, ['width', 'height']);
-    return (_jsxs(Group, { ...restProps, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, rx: 22, ry: 22, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, "data-element-type": "shape" }), _jsx(Path, { x: width - 85, y: 0.5, width: 85, height: 65, d: "M0 0H62.4495C74.9557 0 85.4549 10.8574 84.4557 23.1875V60.1875L77.8772 62.5839C64.3776 67.6876 48.51 64.6893 37.8662 53.7441L10.2361 25.3312C4.91402 19.8571 1.65356 13.1736 0.435652 6.21819L0 0Z", fill: themeColors.colorBg, "data-element-type": "shape" }), _jsx(ItemLabel, { indexes: indexes, x: 20, y: 24, width: 200, alignHorizontal: "left", alignVertical: "middle", fill: themeColors.colorText, children: datum.label }), _jsx(ItemDesc, { indexes: indexes, x: 20, y: 58, width: 220, height: 70, fill: themeColors.colorTextSecondary, alignHorizontal: "left", alignVertical: "top", children: datum.desc }), _jsx(ItemIcon, { indexes: indexes, x: width - 48, y: 12, width: 32, height: 32, fill: themeColors.colorPrimary })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, rx: 22, ry: 22, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, "data-element-type": "shape" }), _jsx(Path, { x: width - 85, y: 0.5, width: 85, height: 65, d: "M0 0H62.4495C74.9557 0 85.4549 10.8574 84.4557 23.1875V60.1875L77.8772 62.5839C64.3776 67.6876 48.51 64.6893 37.8662 53.7441L10.2361 25.3312C4.91402 19.8571 1.65356 13.1736 0.435652 6.21819L0 0Z", fill: themeColors.colorBg, "data-element-type": "shape" }), _jsx(ItemLabel, { indexes: indexes, x: 20, y: 24, width: 200, alignHorizontal: "left", alignVertical: "middle", fill: themeColors.colorText, children: datum.label }), _jsx(ItemDesc, { indexes: indexes, x: 20, y: 58, width: 220, height: 70, fill: themeColors.colorTextSecondary, alignHorizontal: "left", alignVertical: "top", children: datum.desc }), _jsx(ItemIcon, { indexes: indexes, x: width - 48, y: 12, width: 32, height: 32, fill: themeColors.colorPrimary })] })));
 };
 registerItem('candy-card-lite', {
     component: CandyCardLite,

package/esm/designs/items/CapsuleItem.js

@@ -26,7 +26,7 @@ export const CapsuleItem = (props) => {
         fill: themeColors.colorWhite,
     };
     // Get label bounds to calculate layout
-    const labelBounds = getElementBounds(_jsx(ItemLabel, { ...labelProps, children: datum.label }));
+    const labelBounds = getElementBounds(_jsx(ItemLabel, Object.assign({}, labelProps, { children: datum.label })));
     const descProps = {
         indexes,
         width: textWidth,
@@ -37,7 +37,7 @@ export const CapsuleItem = (props) => {
         fill: themeColors.colorWhite,
     };
     // Get desc bounds to calculate layout
-    const descBounds = getElementBounds(datum.desc ? _jsx(ItemDesc, { ...descProps, children: datum.desc }) : null);
+    const descBounds = getElementBounds(datum.desc ? _jsx(ItemDesc, Object.assign({}, descProps, { children: datum.desc })) : null);
     // Calculate vertical positions for text elements
     const textGap = 4;
     const totalTextHeight = labelBounds.height + textGap + descBounds.height;
@@ -47,7 +47,7 @@ export const CapsuleItem = (props) => {
     // Calculate icon position (centered in the circle area with padding)
     const iconX = isFlipped ? width - height + iconPadding : iconPadding;
     const iconY = iconPadding;
-    return (_jsxs(Group, { ...restProps, children: [_jsx(Defs, { children: _jsx(DropShadow, {}) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimary, rx: borderRadius, ry: borderRadius, "data-element-type": "shape" }), datum.icon && (_jsxs(_Fragment, { children: [_jsx(Ellipse, { x: iconX, y: iconY, width: iconSize, height: iconSize, fillOpacity: 0.5, fill: themeColors.colorBg, filter: "url(#drop-shadow)" }), _jsx(ItemIconCircle, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorBg, colorBg: themeColors.colorPrimary })] })), datum.label && (_jsx(ItemLabel, { x: textX, y: labelY, ...labelProps, children: datum.label })), datum.desc && (_jsx(ItemDesc, { x: textX, y: descY, ...descProps, children: datum.desc }))] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx(Defs, { children: _jsx(DropShadow, {}) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimary, rx: borderRadius, ry: borderRadius, "data-element-type": "shape" }), datum.icon && (_jsxs(_Fragment, { children: [_jsx(Ellipse, { x: iconX, y: iconY, width: iconSize, height: iconSize, fillOpacity: 0.5, fill: themeColors.colorBg, filter: "url(#drop-shadow)" }), _jsx(ItemIconCircle, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorBg, colorBg: themeColors.colorPrimary })] })), datum.label && (_jsx(ItemLabel, Object.assign({ x: textX, y: labelY }, labelProps, { children: datum.label }))), datum.desc && (_jsx(ItemDesc, Object.assign({ x: textX, y: descY }, descProps, { children: datum.desc })))] })));
 };
 registerItem('capsule-item', {
     component: CapsuleItem,

package/esm/designs/items/CircleNode.js

@@ -22,7 +22,7 @@ export const CircleNode = (props) => {
     const gradientDirection = positionH === 'flipped'
         ? { x1: '0%', y1: '0%', x2: '100%', y2: '0%' }
         : { x1: '100%', y1: '0%', x2: '0%', y2: '0%' };
-    return (_jsxs(Group, { ...restProps, children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: outerGradientId, ...gradientDirection, children: [_jsx("stop", { offset: "0%", stopColor: colorOuterStart }), _jsx("stop", { offset: "100%", stopColor: colorOuterEnd })] }), _jsxs("linearGradient", { id: innerGradientId, ...gradientDirection, children: [_jsx("stop", { offset: "0%", stopColor: colorInnerStart }), _jsx("stop", { offset: "100%", stopColor: colorInnerEnd })] })] }), _jsx(Ellipse, { width: size, height: size, fill: `url(#${outerGradientId})`, "data-element-type": "shape" }), _jsx(Ellipse, { x: innerCircleOffset, y: innerCircleOffset, width: innerCircleSize, height: innerCircleSize, fill: `url(#${innerGradientId})`, stroke: "#FFFFFF", strokeWidth: 1, "data-element-type": "shape" }), _jsx(ItemLabel, { indexes: indexes, x: labelOffset, y: labelOffset, width: labelSize, height: labelSize, lineHeight: 1.1, alignHorizontal: "center", alignVertical: "middle", fill: colorText, fontWeight: "500", children: datum.label })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsxs(Defs, { children: [_jsxs("linearGradient", Object.assign({ id: outerGradientId }, gradientDirection, { children: [_jsx("stop", { offset: "0%", stopColor: colorOuterStart }), _jsx("stop", { offset: "100%", stopColor: colorOuterEnd })] })), _jsxs("linearGradient", Object.assign({ id: innerGradientId }, gradientDirection, { children: [_jsx("stop", { offset: "0%", stopColor: colorInnerStart }), _jsx("stop", { offset: "100%", stopColor: colorInnerEnd })] }))] }), _jsx(Ellipse, { width: size, height: size, fill: `url(#${outerGradientId})`, "data-element-type": "shape" }), _jsx(Ellipse, { x: innerCircleOffset, y: innerCircleOffset, width: innerCircleSize, height: innerCircleSize, fill: `url(#${innerGradientId})`, stroke: "#FFFFFF", strokeWidth: 1, "data-element-type": "shape" }), _jsx(ItemLabel, { indexes: indexes, x: labelOffset, y: labelOffset, width: labelSize, height: labelSize, lineHeight: 1.1, alignHorizontal: "center", alignVertical: "middle", fill: colorText, fontWeight: "500", children: datum.label })] })));
 };
 registerItem('circle-node', {
     component: CircleNode,

package/esm/designs/items/CircularProgress.js

@@ -4,8 +4,9 @@ import { ItemLabel, ItemValue } from '../components/index.js';
 import { getItemProps } from '../utils/index.js';
 import { registerItem } from './registry.js';
 export const CircularProgress = (props) => {
+    var _a;
     const [{ datum, indexes, size = 120, strokeWidth = 12, gap = 8, themeColors, valueFormatter = (value) => `${Math.round(value)}%`, }, restProps,] = getItemProps(props, ['size', 'strokeWidth', 'gap']);
-    const value = datum.value ?? 0;
+    const value = (_a = datum.value) !== null && _a !== void 0 ? _a : 0;
     const maxValue = 100;
     const percentage = Math.min(Math.max(value / maxValue, 0), 1);
     const radius = (size - strokeWidth) / 2;
@@ -16,7 +17,7 @@ export const CircularProgress = (props) => {
     const angle = percentage * 360;
     const pathData = describeArc(center, center, radius, 0, angle);
     const bounds = { x: start, y: start, width: d, height: d };
-    return (_jsxs(Group, { ...restProps, width: size, height: size + gap + 20, children: [_jsx(Rect, { width: size, height: size, fill: "none" }), _jsx(Ellipse, { ...bounds, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth, "data-element-type": "shape" }), isFullCircle ? (_jsx(Ellipse, { ...bounds, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, "data-element-type": "shape" })) : (_jsx(Path, { d: pathData, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", "data-element-type": "shape" })), _jsx(ItemValue, { indexes: indexes, x: strokeWidth, y: strokeWidth, width: d - strokeWidth, height: d - strokeWidth, fontSize: 24, fontWeight: "bold", fill: themeColors.colorPrimary, alignHorizontal: "center", alignVertical: "middle", value: value, formatter: valueFormatter }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorTextSecondary, children: datum.label })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { width: size, height: size + gap + 20, children: [_jsx(Rect, { width: size, height: size, fill: "none" }), _jsx(Ellipse, Object.assign({}, bounds, { fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth, "data-element-type": "shape" })), isFullCircle ? (_jsx(Ellipse, Object.assign({}, bounds, { fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, "data-element-type": "shape" }))) : (_jsx(Path, { d: pathData, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", "data-element-type": "shape" })), _jsx(ItemValue, { indexes: indexes, x: strokeWidth, y: strokeWidth, width: d - strokeWidth, height: d - strokeWidth, fontSize: 24, fontWeight: "bold", fill: themeColors.colorPrimary, alignHorizontal: "center", alignVertical: "middle", value: value, formatter: valueFormatter }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorTextSecondary, children: datum.label })] })));
 };
 function describeArc(x, y, radius, startAngle, endAngle) {
     const start = polarToCartesian(x, y, radius, endAngle);

package/esm/designs/items/CompactCard.js

@@ -15,7 +15,7 @@ export const CompactCard = (props) => {
     // 为 Label 和 Value 分配空间
     const labelWidth = hasValue ? textWidth * 0.8 : textWidth;
     const valueWidth = hasValue ? textWidth * 0.2 : 0;
-    return (_jsxs(Group, { ...restProps, children: [_jsx(Defs, { children: _jsx("filter", { id: shadowId, children: _jsx("feDropShadow", { dx: "0", dy: "2", stdDeviation: "2", floodOpacity: "0.15" }) }) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorBgElevated, strokeWidth: 1, rx: 6, ry: 6, filter: `url(#${shadowId})`, "data-element-type": "shape" }), _jsx(Rect, { x: positionH === 'flipped' ? width - 3 : 0, y: 0, width: 3, height: height, fill: themeColors.colorPrimary, rx: 1.5, ry: 1.5, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: (height - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimary }), _jsxs(FlexLayout, { x: textStartX, y: gap, width: textWidth, height: height - gap * 2, flexDirection: "column", justifyContent: "center", alignItems: "flex-start", children: [_jsxs(FlexLayout, { width: textWidth, flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(ItemLabel, { indexes: indexes, width: labelWidth, alignHorizontal: "left", fontSize: 12, fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, width: valueWidth, alignHorizontal: "right", fontSize: 12, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), _jsx(ItemDesc, { indexes: indexes, width: textWidth, alignHorizontal: "left", alignVertical: "middle", fontSize: 10, fill: themeColors.colorTextSecondary, lineNumber: 2, wordWrap: true, children: datum.desc })] })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx(Defs, { children: _jsx("filter", { id: shadowId, children: _jsx("feDropShadow", { dx: "0", dy: "2", stdDeviation: "2", floodOpacity: "0.15" }) }) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorBgElevated, strokeWidth: 1, rx: 6, ry: 6, filter: `url(#${shadowId})`, "data-element-type": "shape" }), _jsx(Rect, { x: positionH === 'flipped' ? width - 3 : 0, y: 0, width: 3, height: height, fill: themeColors.colorPrimary, rx: 1.5, ry: 1.5, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: (height - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimary }), _jsxs(FlexLayout, { x: textStartX, y: gap, width: textWidth, height: height - gap * 2, flexDirection: "column", justifyContent: "center", alignItems: "flex-start", children: [_jsxs(FlexLayout, { width: textWidth, flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(ItemLabel, { indexes: indexes, width: labelWidth, alignHorizontal: "left", fontSize: 12, fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, width: valueWidth, alignHorizontal: "right", fontSize: 12, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), _jsx(ItemDesc, { indexes: indexes, width: textWidth, alignHorizontal: "left", alignVertical: "middle", fontSize: 10, fill: themeColors.colorTextSecondary, lineNumber: 2, wordWrap: true, children: datum.desc })] })] })));
 };
 registerItem('compact-card', {
     component: CompactCard,

package/esm/designs/items/DoneList.js

@@ -11,7 +11,7 @@ export const DoneList = (props) => {
         : positionV === 'flipped'
             ? height - iconSize
             : 0;
-    return (_jsxs(Group, { ...restProps, children: [_jsx(Path, { "data-element-type": "shape", x: positionH === 'flipped' ? textWidth + gap : 0, y: shapeY, fill: themeColors.colorPrimary, width: iconSize, height: iconSize, d: "M14.7273 30C6.54538 30 0 22.9077 0 14.7269C0 6.54617 6.54538 0 14.7273 0C22.9092 0 30 6.54617 30 14.7269C30 22.9077 22.9092 30 14.7273 30ZM24.5454 10.9077C22.9092 9.27307 22.9092 9.27307 22.9092 9.27307C22.3638 8.72692 22.3638 8.7269 21.8181 8.7269C21.2727 8.7269 21.2727 8.72692 20.7273 9.27307C13.0908 16.9077 13.0908 16.9077 13.0908 16.9077C8.72731 12.5461 8.72731 12.5462 8.72731 12.5462C8.18193 12.5462 8.18193 12 7.63654 12L7.09077 12.5462C4.90923 14.1808 4.90923 14.1808 4.90923 14.1808C4.90923 14.7269 4.90923 14.7269 4.90923 15.2731C4.90923 15.8192 4.90923 15.8192 4.90923 16.3654C12 23.4539 12 23.4538 12 23.4538C12.5454 23.4538 12.5454 23.4538 13.0908 23.4538C13.6365 23.4538 13.6365 23.4538 14.1819 23.4538C24.5454 12.5461 24.5454 12.5462 24.5454 12.5462L25.0908 12C25.0908 11.4538 24.5454 10.9077 24.5454 10.9077Z" }), _jsx(ItemLabel, { indexes: indexes, x: positionH === 'flipped' ? 0 : iconSize + gap, width: textWidth, height: height, fontWeight: "normal", alignVertical: "middle", wordWrap: false, fill: "#666", children: datum.label || datum.desc })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx(Path, { "data-element-type": "shape", x: positionH === 'flipped' ? textWidth + gap : 0, y: shapeY, fill: themeColors.colorPrimary, width: iconSize, height: iconSize, d: "M14.7273 30C6.54538 30 0 22.9077 0 14.7269C0 6.54617 6.54538 0 14.7273 0C22.9092 0 30 6.54617 30 14.7269C30 22.9077 22.9092 30 14.7273 30ZM24.5454 10.9077C22.9092 9.27307 22.9092 9.27307 22.9092 9.27307C22.3638 8.72692 22.3638 8.7269 21.8181 8.7269C21.2727 8.7269 21.2727 8.72692 20.7273 9.27307C13.0908 16.9077 13.0908 16.9077 13.0908 16.9077C8.72731 12.5461 8.72731 12.5462 8.72731 12.5462C8.18193 12.5462 8.18193 12 7.63654 12L7.09077 12.5462C4.90923 14.1808 4.90923 14.1808 4.90923 14.1808C4.90923 14.7269 4.90923 14.7269 4.90923 15.2731C4.90923 15.8192 4.90923 15.8192 4.90923 16.3654C12 23.4539 12 23.4538 12 23.4538C12.5454 23.4538 12.5454 23.4538 13.0908 23.4538C13.6365 23.4538 13.6365 23.4538 14.1819 23.4538C24.5454 12.5461 24.5454 12.5462 24.5454 12.5462L25.0908 12C25.0908 11.4538 24.5454 10.9077 24.5454 10.9077Z" }), _jsx(ItemLabel, { indexes: indexes, x: positionH === 'flipped' ? 0 : iconSize + gap, width: textWidth, height: height, fontWeight: "normal", alignVertical: "middle", wordWrap: false, fill: "#666", children: datum.label || datum.desc })] })));
 };
 registerItem('done-list', {
     component: DoneList,

package/esm/designs/items/HorizontalIconArrow.js

@@ -32,11 +32,11 @@ export const HorizontalIconArrow = (props) => {
         dotLineGap +
         labelBounds.height +
         descBounds.height;
-    return (_jsx(Group, { width: width, height: totalHeight, ...restProps, children: _jsxs(FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? (_jsxs(_Fragment, { children: [desc, label, _jsx(Gap, { height: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: fixedGap }), icon, _jsx(Gap, { height: iconGap })] })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", width: width, height: arrowHeight, children: [_jsx(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), _jsx(Text, { width: width, height: arrowHeight, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
+    return (_jsx(Group, Object.assign({ width: width, height: totalHeight }, restProps, { children: _jsxs(FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? (_jsxs(_Fragment, { children: [desc, label, _jsx(Gap, { height: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: fixedGap }), icon, _jsx(Gap, { height: iconGap })] })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", width: width, height: arrowHeight, children: [_jsx(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), _jsx(Text, { width: width, height: arrowHeight, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
                                 ? datum.time
                                 : String(indexes[0] + 1)
                                     .padStart(2, '0')
-                                    .slice(-2) })] }), !isVNormal ? (_jsxs(_Fragment, { children: [dotLine, _jsx(Gap, { height: dotLineGap }), label, desc] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: iconGap }), icon] }))] }) }));
+                                    .slice(-2) })] }), !isVNormal ? (_jsxs(_Fragment, { children: [dotLine, _jsx(Gap, { height: dotLineGap }), label, desc] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: iconGap }), icon] }))] }) })));
 };
 const HorizontalArrow = (props) => {
     const { x = 0, y = 0, width = 100, height = 40, fill = '#FF356A', size = 10, } = props;

package/esm/designs/items/HorizontalIconLine.js

@@ -29,9 +29,9 @@ export const HorizontalIconLine = (props) => {
     const topBalance = iconSideHeight > textSideHeight ? heightDiff : 0;
     const bottomBalance = textSideHeight > iconSideHeight ? heightDiff : 0;
     if (positionV === 'flipped') {
-        return (_jsxs(FlexLayout, { ...restProps, flexDirection: "column", alignItems: "center", children: [_jsx(Gap, { height: bottomBalance }), time, icon, _jsx(Gap, { height: 5 }), line, label, desc, _jsx(Gap, { height: topBalance })] }));
+        return (_jsxs(FlexLayout, Object.assign({}, restProps, { flexDirection: "column", alignItems: "center", children: [_jsx(Gap, { height: bottomBalance }), time, icon, _jsx(Gap, { height: 5 }), line, label, desc, _jsx(Gap, { height: topBalance })] })));
     }
-    return (_jsxs(FlexLayout, { ...restProps, flexDirection: "column", alignItems: "center", children: [_jsx(Gap, { height: topBalance }), label, desc, line, _jsx(Gap, { height: 5 }), icon, time, _jsx(Gap, { height: bottomBalance })] }));
+    return (_jsxs(FlexLayout, Object.assign({}, restProps, { flexDirection: "column", alignItems: "center", children: [_jsx(Gap, { height: topBalance }), label, desc, line, _jsx(Gap, { height: 5 }), icon, time, _jsx(Gap, { height: bottomBalance })] })));
 };
 registerItem('horizontal-icon-line', {
     component: HorizontalIconLine,

package/esm/designs/items/IconBadge.js

@@ -5,13 +5,14 @@ import { ItemIcon, ItemLabel } from '../components/index.js';
 import { getItemProps } from '../utils/index.js';
 import { registerItem } from './registry.js';
 export const IconBadge = (props) => {
+    var _a;
     const [{ datum, indexes, size = 80, iconSize = 28, badgeSize = 24, gap = 8, themeColors, width = 84, height = 105, }, restProps,] = getItemProps(props, ['size', 'iconSize', 'badgeSize', 'gap']);
-    const value = datum.value ?? 0;
+    const value = (_a = datum.value) !== null && _a !== void 0 ? _a : 0;
     const gradientId = `${themeColors.colorPrimary}-icon`;
     const badgeGradientId = '#ff6b6b-badge';
-    return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsxs(Defs, { children: [_jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "30%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: tinycolor(themeColors.colorPrimary)
+    return (_jsxs(Group, Object.assign({}, restProps, { width: width, height: height, children: [_jsxs(Defs, { children: [_jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "30%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: tinycolor(themeColors.colorPrimary)
                                     .lighten(30)
-                                    .toHexString() }), _jsx("stop", { offset: "100%", stopColor: themeColors.colorPrimary })] }), _jsxs("linearGradient", { id: badgeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#ff6b6b" }), _jsx("stop", { offset: "100%", stopColor: "#ee5a52" })] })] }), _jsx(Ellipse, { x: 0, y: 0, width: size, height: size, fill: `url(#${gradientId})`, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: (size - iconSize) / 2, y: (size - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimaryText }), _jsx(Ellipse, { x: size - badgeSize + 4, width: badgeSize, height: badgeSize, fill: `url(#${badgeGradientId})` }), _jsx(Text, { x: size - badgeSize + 4, width: badgeSize, height: badgeSize, fontSize: 10, fontWeight: "bold", fill: themeColors.colorWhite, alignHorizontal: "center", alignVertical: "middle", children: value > 99 ? '99+' : Math.round(value) }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorText, children: datum.label })] }));
+                                    .toHexString() }), _jsx("stop", { offset: "100%", stopColor: themeColors.colorPrimary })] }), _jsxs("linearGradient", { id: badgeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#ff6b6b" }), _jsx("stop", { offset: "100%", stopColor: "#ee5a52" })] })] }), _jsx(Ellipse, { x: 0, y: 0, width: size, height: size, fill: `url(#${gradientId})`, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: (size - iconSize) / 2, y: (size - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimaryText }), _jsx(Ellipse, { x: size - badgeSize + 4, width: badgeSize, height: badgeSize, fill: `url(#${badgeGradientId})` }), _jsx(Text, { x: size - badgeSize + 4, width: badgeSize, height: badgeSize, fontSize: 10, fontWeight: "bold", fill: themeColors.colorWhite, alignHorizontal: "center", alignVertical: "middle", children: value > 99 ? '99+' : Math.round(value) }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorText, children: datum.label })] })));
 };
 registerItem('icon-badge', {
     component: IconBadge,

package/esm/designs/items/IndexedCard.js

@@ -53,7 +53,7 @@ export const IndexedCard = (props) => {
         (showDesc ? gap : 0) + // 分隔线后间距
         descBounds.height; // 描述高度
     // 4. 组件结构
-    return (_jsxs(Group, { ...restProps, width: width, height: contentHeight, children: [_jsx(Rect, { x: 0, y: 0, width: width, height: contentHeight, rx: borderRadius, ry: borderRadius, fill: cardBgColor, stroke: tinycolor(cardBgColor).darken(5).toHexString(), strokeWidth: 0.5, "data-element-type": "shape" }), _jsxs(Group, { x: padding, y: padding, children: [_jsxs(Group, { x: 0, y: 0, children: [_jsx(Text, { x: 0, y: 0, fontSize: indexFontSize, fontWeight: "bold", fill: themeColors.colorPrimary, alignVertical: "top", children: indexStr }), showLabel && (_jsx(ItemLabel, { indexes: indexes, x: indexFontSize + gap, y: 0, width: labelAvailableWidth, fontSize: labelFontSize, fontWeight: "bold", fill: themeColors.colorTextSecondary, alignVertical: "top", children: datum.label }))] }), _jsx(Rect, { x: 0, y: titleRowHeight + gap, width: contentWidth, height: separatorHeight, fill: separatorColor, "data-element-type": "shape" }), showDesc && (_jsx(ItemDesc, { indexes: indexes, x: 0, y: titleRowHeight + gap + separatorHeight + gap, width: contentWidth, fontSize: 14, lineHeight: 1.5, wordWrap: true, fill: themeColors.colorTextSecondary, children: datum.desc }))] })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { width: width, height: contentHeight, children: [_jsx(Rect, { x: 0, y: 0, width: width, height: contentHeight, rx: borderRadius, ry: borderRadius, fill: cardBgColor, stroke: tinycolor(cardBgColor).darken(5).toHexString(), strokeWidth: 0.5, "data-element-type": "shape" }), _jsxs(Group, { x: padding, y: padding, children: [_jsxs(Group, { x: 0, y: 0, children: [_jsx(Text, { x: 0, y: 0, fontSize: indexFontSize, fontWeight: "bold", fill: themeColors.colorPrimary, alignVertical: "top", children: indexStr }), showLabel && (_jsx(ItemLabel, { indexes: indexes, x: indexFontSize + gap, y: 0, width: labelAvailableWidth, fontSize: labelFontSize, fontWeight: "bold", fill: themeColors.colorTextSecondary, alignVertical: "top", children: datum.label }))] }), _jsx(Rect, { x: 0, y: titleRowHeight + gap, width: contentWidth, height: separatorHeight, fill: separatorColor, "data-element-type": "shape" }), showDesc && (_jsx(ItemDesc, { indexes: indexes, x: 0, y: titleRowHeight + gap + separatorHeight + gap, width: contentWidth, fontSize: 14, lineHeight: 1.5, wordWrap: true, fill: themeColors.colorTextSecondary, children: datum.desc }))] })] })));
 };
 registerItem('indexed-card', {
     component: IndexedCard,

package/esm/designs/items/LCornerCard.js

@@ -31,7 +31,7 @@ export const LCornerCard = (props) => {
     const x1 = lx1 + halfStroke;
     const y1 = ly1 + halfStroke;
     const gap = 8;
-    return (_jsxs(Group, { ...restProps, children: [_jsx(ItemDesc, { indexes: indexes, x: descX, width: descWidth, height: descHeight, fontSize: 12, alignHorizontal: "left", alignVertical: "bottom", fill: themeColors.colorTextSecondary, children: desc }), _jsx(Polygon, { points: arrowVertices, fill: themeColors.colorPrimary, opacity: 0.9, width: arrowSize, height: arrowSize, "data-element-type": "shape" }), _jsx(Path, { d: d, stroke: themeColors.colorPrimary, strokeWidth: lStroke, fill: "none", "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: x1 + innerWidth / 2 - iconSize / 2, y: y1 + gap, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: x1, y: y1 + iconSize + gap * 2, width: innerWidth, fontSize: 14, fontWeight: "bold", alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorText, children: label })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx(ItemDesc, { indexes: indexes, x: descX, width: descWidth, height: descHeight, fontSize: 12, alignHorizontal: "left", alignVertical: "bottom", fill: themeColors.colorTextSecondary, children: desc }), _jsx(Polygon, { points: arrowVertices, fill: themeColors.colorPrimary, opacity: 0.9, width: arrowSize, height: arrowSize, "data-element-type": "shape" }), _jsx(Path, { d: d, stroke: themeColors.colorPrimary, strokeWidth: lStroke, fill: "none", "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: x1 + innerWidth / 2 - iconSize / 2, y: y1 + gap, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: x1, y: y1 + iconSize + gap * 2, width: innerWidth, fontSize: 14, fontWeight: "bold", alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorText, children: label })] })));
 };
 registerItem('l-corner-card', {
     component: LCornerCard,