@visactor/vrender-components 0.13.2 → 0.13.3-alpha.1

package/cjs/poptip/theme.js

@@ -2,25 +2,31 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.theme = void 0, exports.theme = {
-    poptip: {
+}), exports.theme = exports.DEFAULT_THEME = void 0;
+
+const vutils_1 = require("@visactor/vutils");
+
+exports.DEFAULT_THEME = {
+    visible: !0,
+    position: "auto",
+    titleStyle: {
+        fontSize: 16,
+        fill: "#08979c"
+    },
+    contentStyle: {
+        fontSize: 12,
+        fill: "green"
+    },
+    panel: {
         visible: !0,
-        position: "top",
-        titleStyle: {
-            fontSize: 16,
-            fill: "#08979c"
-        },
-        contentStyle: {
-            fontSize: 12,
-            fill: "green"
-        },
-        panel: {
-            visible: !0,
-            fill: "#e6fffb",
-            stroke: "#87e8de",
-            lineWidth: 1,
-            cornerRadius: 4
-        }
+        fill: "#e6fffb",
+        size: 12,
+        space: 0,
+        stroke: "#87e8de",
+        lineWidth: 1,
+        cornerRadius: 4
     }
+}, exports.theme = {
+    poptip: (0, vutils_1.merge)({}, exports.DEFAULT_THEME)
 };
 //# sourceMappingURL=theme.js.map

package/cjs/poptip/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["poptip/theme.ts"],"names":[],"mappings":";;;AAEa,QAAA,KAAK,GAAiC;IACjD,MAAM,EAAE;QACN,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,KAAK;QACf,UAAU,EAAE;YACV,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,OAAO;SACd;QACD,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YAEb,IAAI,EAAE,SAAS;YAEf,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,YAAY,EAAE,CAAC;SAChB;KACF;CACF,CAAC","file":"theme.js","sourcesContent":["import type { PopTipAttributes } from './type';\n\nexport const theme: { poptip: PopTipAttributes } = {\n  poptip: {\n    visible: true,\n    position: 'top',\n    titleStyle: {\n      fontSize: 16,\n      fill: '#08979c'\n    },\n    contentStyle: {\n      fontSize: 12,\n      fill: 'green'\n    },\n    panel: {\n      visible: true,\n\n      fill: '#e6fffb',\n\n      stroke: '#87e8de',\n      lineWidth: 1,\n      cornerRadius: 4\n    }\n  }\n};\n"]}
+{"version":3,"sources":["poptip/theme.ts"],"names":[],"mappings":";;;AAAA,6CAAyC;AAG5B,QAAA,aAAa,GAAqB;IAC7C,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,IAAI,EAAE,SAAS;KAChB;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,EAAE;QACZ,IAAI,EAAE,OAAO;KACd;IACD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QAEb,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;CACF,CAAC;AAEW,QAAA,KAAK,GAAiC;IACjD,MAAM,EAAE,IAAA,cAAK,EAAC,EAAE,EAAE,qBAAa,CAAC;CACjC,CAAC","file":"theme.js","sourcesContent":["import { merge } from '@visactor/vutils';\nimport type { PopTipAttributes } from './type';\n\nexport const DEFAULT_THEME: PopTipAttributes = {\n  visible: true,\n  position: 'auto',\n  titleStyle: {\n    fontSize: 16,\n    fill: '#08979c'\n  },\n  contentStyle: {\n    fontSize: 12,\n    fill: 'green'\n  },\n  panel: {\n    visible: true,\n\n    fill: '#e6fffb',\n    size: 12,\n    space: 0,\n    stroke: '#87e8de',\n    lineWidth: 1,\n    cornerRadius: 4\n  }\n};\n\nexport const theme: { poptip: PopTipAttributes } = {\n  poptip: merge({}, DEFAULT_THEME)\n};\n"]}

package/cjs/poptip/type.d.ts

@@ -7,14 +7,16 @@ type StateStyle = {
     panel?: State<Partial<IRectGraphicAttribute>>;
 };
 export type PopTipAttributes = {
-    position?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+    position?: 'auto' | 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
     title?: string | string[] | number | number[];
     titleStyle?: Partial<ITextGraphicAttribute>;
     content?: string | string[] | number | number[];
     contentStyle?: Partial<ITextGraphicAttribute>;
     space?: number;
     padding?: Padding;
-    panel?: BackgroundAttributes & ISymbolGraphicAttribute;
+    panel?: BackgroundAttributes & ISymbolGraphicAttribute & {
+        space?: number;
+    };
     minWidth?: number;
     maxWidth?: number;
     visible?: boolean;

package/cjs/poptip/type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["poptip/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type {\n  IGraphic,\n  IGroupGraphicAttribute,\n  IRectGraphicAttribute,\n  ISymbolGraphicAttribute,\n  ITextGraphicAttribute\n} from '@visactor/vrender';\nimport type { Padding, State } from '../core/type';\nimport type { BackgroundAttributes } from '../interface';\n\ntype StateStyle = {\n  /**\n   * title 文本的状态配置\n   */\n  title?: State<Partial<ITextGraphicAttribute>>;\n  /**\n   * content 文本的状态配置\n   */\n  content?: State<Partial<ITextGraphicAttribute>>;\n  /**\n   * panel 背景的状态配置ß\n   */\n  panel?: State<Partial<IRectGraphicAttribute>>;\n};\n\nexport type PopTipAttributes = {\n  /** 位置，参考arco design */\n  position?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';\n  /**\n   * 标题内容，如果需要进行换行，则使用数组形式，如 ['abc', '123']\n   */\n  title?: string | string[] | number | number[];\n  /** 标题样式 */\n  titleStyle?: Partial<ITextGraphicAttribute>;\n  /**\n   * 内容文本，如果需要进行换行，则使用数组形式，如 ['abc', '123']\n   */\n  content?: string | string[] | number | number[];\n  /** 内容文本样式 */\n  contentStyle?: Partial<ITextGraphicAttribute>;\n  /**\n   * 标题与内容的间距\n   */\n  space?: number;\n  /**\n   * 内部边距\n   */\n  padding?: Padding;\n  /**\n   * 标签的背景面板配置, TODO: 支持symbol形状\n   */\n  panel?: BackgroundAttributes & ISymbolGraphicAttribute;\n\n  /**\n   * 最小宽度，像素值\n   * @default 30\n   */\n  minWidth?: number;\n  /**\n   * 最大宽度，像素值。当文字超过最大宽度时，会自动省略。\n   */\n  maxWidth?: number;\n\n  visible?: boolean;\n  visibleFunc?: (graphic: IGraphic) => boolean;\n  state?: StateStyle;\n  dx?: number;\n  dy?: number;\n} & Omit<IGroupGraphicAttribute, 'background'>;\n\nexport type PoptipShapeAttributes = {\n  /**\n   * 是否展示 shape\n   */\n  visible: boolean;\n} & Partial<ISymbolGraphicAttribute>;\n"]}
+{"version":3,"sources":["poptip/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type {\n  IGraphic,\n  IGroupGraphicAttribute,\n  IRectGraphicAttribute,\n  ISymbolGraphicAttribute,\n  ITextGraphicAttribute\n} from '@visactor/vrender';\nimport type { Padding, State } from '../core/type';\nimport type { BackgroundAttributes } from '../interface';\n\ntype StateStyle = {\n  /**\n   * title 文本的状态配置\n   */\n  title?: State<Partial<ITextGraphicAttribute>>;\n  /**\n   * content 文本的状态配置\n   */\n  content?: State<Partial<ITextGraphicAttribute>>;\n  /**\n   * panel 背景的状态配置ß\n   */\n  panel?: State<Partial<IRectGraphicAttribute>>;\n};\n\nexport type PopTipAttributes = {\n  /** 位置，参考arco design */\n  position?: 'auto' | 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';\n  /**\n   * 标题内容，如果需要进行换行，则使用数组形式，如 ['abc', '123']\n   */\n  title?: string | string[] | number | number[];\n  /** 标题样式 */\n  titleStyle?: Partial<ITextGraphicAttribute>;\n  /**\n   * 内容文本，如果需要进行换行，则使用数组形式，如 ['abc', '123']\n   */\n  content?: string | string[] | number | number[];\n  /** 内容文本样式 */\n  contentStyle?: Partial<ITextGraphicAttribute>;\n  /**\n   * 标题与内容的间距\n   */\n  space?: number;\n  /**\n   * 内部边距\n   */\n  padding?: Padding;\n  /**\n   * 标签的背景面板配置, TODO: 支持symbol形状\n   */\n  panel?: BackgroundAttributes & ISymbolGraphicAttribute & { space?: number };\n\n  /**\n   * 最小宽度，像素值\n   * @default 30\n   */\n  minWidth?: number;\n  /**\n   * 最大宽度，像素值。当文字超过最大宽度时，会自动省略。\n   */\n  maxWidth?: number;\n\n  visible?: boolean;\n  visibleFunc?: (graphic: IGraphic) => boolean;\n  state?: StateStyle;\n  dx?: number;\n  dy?: number;\n} & Omit<IGroupGraphicAttribute, 'background'>;\n\nexport type PoptipShapeAttributes = {\n  /**\n   * 是否展示 shape\n   */\n  visible: boolean;\n} & Partial<ISymbolGraphicAttribute>;\n"]}

package/dist/index.js

@@ -743,44 +743,65 @@
             const poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
             const { visible: bgVisible, ...backgroundStyle } = panel;
             const symbolSize = backgroundStyle.size ?? 12;
+            const spaceSize = vutils.isArray(symbolSize)
+                ? [symbolSize[0] + (backgroundStyle.space ?? 0), symbolSize[1] + (backgroundStyle.space ?? 0)]
+                : symbolSize + (backgroundStyle.space ?? 0);
             const lineWidth = backgroundStyle.lineWidth ?? 1;
-            const { angle, offset, rectOffset } = this.getAngleAndOffset(position, popTipWidth, poptipHeight, vutils.isArray(symbolSize) ? symbolSize : [symbolSize, symbolSize - lineWidth]);
-            if (vutils.isBoolean(bgVisible)) {
-                const offsetX = (vutils.isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
-                const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', {
-                    ...backgroundStyle,
-                    visible: bgVisible && (contentVisible || titleVisible),
-                    x: offsetX,
-                    y: 0,
-                    anchor: [0, 0],
-                    symbolType: 'arrow2Left',
-                    angle: angle,
-                    dx: offset[0],
-                    dy: offset[1],
-                    size: symbolSize,
-                    zIndex: -9
-                }, 'symbol');
-                if (!vutils.isEmpty(state?.panel)) {
-                    bgSymbol.states = state.panel;
+            const range = this.stage
+                ? [this.stage.width, this.stage.height]
+                : undefined;
+            const layout = position === 'auto';
+            for (let i = 0; i < this.positionList.length; i++) {
+                const p = layout ? this.positionList[i] : position;
+                const { angle, offset, rectOffset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, vutils.isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth]);
+                if (vutils.isBoolean(bgVisible)) {
+                    const offsetX = (vutils.isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
+                    const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', {
+                        ...backgroundStyle,
+                        visible: bgVisible && (contentVisible || titleVisible),
+                        x: offsetX,
+                        y: 0,
+                        anchor: [0, 0],
+                        symbolType: 'arrow2Left',
+                        angle: angle,
+                        dx: offset[0],
+                        dy: offset[1],
+                        size: symbolSize,
+                        zIndex: -9
+                    }, 'symbol');
+                    if (!vutils.isEmpty(state?.panel)) {
+                        bgSymbol.states = state.panel;
+                    }
+                    const bgRect = group.createOrUpdateChild('poptip-rect-panel', {
+                        ...backgroundStyle,
+                        visible: bgVisible && (contentVisible || titleVisible),
+                        x: 0,
+                        y: 0,
+                        width: popTipWidth,
+                        height: poptipHeight,
+                        zIndex: -10
+                    }, 'rect');
+                    if (!vutils.isEmpty(state?.panel)) {
+                        bgRect.states = state.panel;
+                    }
                 }
-                const bgRect = group.createOrUpdateChild('poptip-rect-panel', {
-                    ...backgroundStyle,
-                    visible: bgVisible && (contentVisible || titleVisible),
-                    x: 0,
-                    y: 0,
-                    width: popTipWidth,
-                    height: poptipHeight,
-                    zIndex: -10
-                }, 'rect');
-                if (!vutils.isEmpty(state?.panel)) {
-                    bgRect.states = state.panel;
+                group.setAttributes({
+                    x: -offset[0] + dx,
+                    y: -offset[1] + dy
+                });
+                if (layout && range) {
+                    const b = this.AABBBounds;
+                    const stageBounds = new vutils.Bounds().setValue(0, 0, range[0], range[1]);
+                    if (vutils.rectInsideAnotherRect(b, stageBounds, false)) {
+                        break;
+                    }
+                }
+                else {
+                    break;
                 }
             }
-            group.setAttributes({
-                x: -offset[0] + dx,
-                y: -offset[1] + dy
-            });
         }
+        positionList = ['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'];
         getAngleAndOffset(position, width, height, size) {
             const sizeH = size[1] / 2;
             switch (position) {
@@ -875,27 +896,30 @@
       return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    const theme = {
-        poptip: {
+    const DEFAULT_THEME = {
+        visible: true,
+        position: 'auto',
+        titleStyle: {
+            fontSize: 16,
+            fill: '#08979c'
+        },
+        contentStyle: {
+            fontSize: 12,
+            fill: 'green'
+        },
+        panel: {
             visible: true,
-            position: 'top',
-            titleStyle: {
-                fontSize: 16,
-                fill: '#08979c'
-            },
-            contentStyle: {
-                fontSize: 12,
-                fill: 'green'
-            },
-            panel: {
-                visible: true,
-                fill: '#e6fffb',
-                stroke: '#87e8de',
-                lineWidth: 1,
-                cornerRadius: 4
-            }
+            fill: '#e6fffb',
+            size: 12,
+            space: 0,
+            stroke: '#87e8de',
+            lineWidth: 1,
+            cornerRadius: 4
         }
     };
+    const theme = {
+        poptip: vutils.merge({}, DEFAULT_THEME)
+    };
 
     function wrapPoptip(target, source) {
         vutils.merge(target, theme.poptip, source);
@@ -1050,7 +1074,7 @@
         injectable()
     ], PopTipForClipedTextPlugin);
 
-    const module = new ContainerModule(bind => {
+    const popTipModule = new ContainerModule(bind => {
         bind(PopTipRenderContribution).toSelf().inSingletonScope();
         bind(vrender.InteractiveSubRenderContribution).toService(PopTipRenderContribution);
         bind(PopTipPlugin).toSelf().inSingletonScope();
@@ -1060,7 +1084,10 @@
     });
     function loadPoptip(defaultPoptipTheme) {
         vutils.merge(theme.poptip, defaultPoptipTheme);
-        vrender.container.load(module);
+        vrender.container.load(popTipModule);
+    }
+    function setPoptipTheme(defaultPoptipTheme) {
+        vutils.merge(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
     }
 
     class CrosshairBase extends AbstractComponent {
@@ -2734,16 +2761,25 @@
             tickLineGroup.name = exports.AXIS_ELEMENT_NAME.tickContainer;
             tickLineGroup.id = this._getNodeId('tick-container');
             container.add(tickLineGroup);
-            const tickLineState = vutils.isEmpty(this.attribute.tick?.state)
-                ? null
-                : vutils.merge({}, DEFAULT_STATES$2, this.attribute.tick.state);
             tickLineItems.forEach((item, index) => {
                 const line = vrender.createLine({
                     ...this._getTickLineAttribute('tick', item, index, tickLineItems)
                 });
                 line.name = exports.AXIS_ELEMENT_NAME.tick;
                 line.id = this._getNodeId(item.id);
-                line.states = tickLineState;
+                if (vutils.isEmpty(this.attribute.tick?.state)) {
+                    line.states = null;
+                }
+                else {
+                    const data = this.data[index];
+                    const tickLineState = vutils.merge({}, DEFAULT_STATES$2, this.attribute.tick.state);
+                    Object.keys(tickLineState).forEach(key => {
+                        if (vutils.isFunction(tickLineState[key])) {
+                            tickLineState[key] = tickLineState[key](data.rawValue, index, data, this.data);
+                        }
+                    });
+                    line.states = tickLineState;
+                }
                 tickLineGroup.add(line);
             });
             this.tickLineItems = tickLineItems;
@@ -2751,14 +2787,24 @@
             if (subTick?.visible) {
                 const subTickLineItems = this.getSubTickLineItems();
                 if (subTickLineItems.length) {
-                    const subTickLineState = vutils.isEmpty(subTick.state) ? null : vutils.merge({}, DEFAULT_STATES$2, subTick.state);
                     subTickLineItems.forEach((item, index) => {
                         const line = vrender.createLine({
                             ...this._getTickLineAttribute('subTick', item, index, tickLineItems)
                         });
                         line.name = exports.AXIS_ELEMENT_NAME.subTick;
                         line.id = this._getNodeId(`${index}`);
-                        line.states = subTickLineState;
+                        if (vutils.isEmpty(subTick.state)) {
+                            line.states = null;
+                        }
+                        else {
+                            const subTickLineState = vutils.merge({}, DEFAULT_STATES$2, subTick.state);
+                            Object.keys(subTickLineState).forEach(key => {
+                                if (vutils.isFunction(subTickLineState[key])) {
+                                    subTickLineState[key] = subTickLineState[key](item.value, index, item, tickLineItems);
+                                }
+                            });
+                            line.states = subTickLineState;
+                        }
                         tickLineGroup.add(line);
                     });
                 }
@@ -2779,15 +2825,23 @@
             let maxTextHeight = 0;
             let textAlign = 'center';
             let textBaseline = 'middle';
-            const labelState = vutils.isEmpty(this.attribute.label?.state)
-                ? null
-                : vutils.merge({}, DEFAULT_STATES$2, this.attribute.label.state);
             data.forEach((item, index) => {
                 const labelStyle = this._getLabelAttribute(item, index, data, layer);
                 const text = vrender.createText(labelStyle);
                 text.name = exports.AXIS_ELEMENT_NAME.label;
                 text.id = this._getNodeId(`layer${layer}-label-${item.id}`);
-                text.states = labelState;
+                if (vutils.isEmpty(this.attribute.label?.state)) {
+                    text.states = null;
+                }
+                else {
+                    const labelState = vutils.merge({}, DEFAULT_STATES$2, this.attribute.label.state);
+                    Object.keys(labelState).forEach(key => {
+                        if (vutils.isFunction(labelState[key])) {
+                            labelState[key] = labelState[key](item, index, data, layer);
+                        }
+                    });
+                    text.states = labelState;
+                }
                 labelGroup.add(text);
                 const angle = labelStyle.angle ?? 0;
                 maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width());
@@ -3228,7 +3282,7 @@
                     : limitLength
                 : limitLength / Math.sin(label.attribute.angle);
             label.setAttributes({
-                maxLineWidth: limitLabelLength,
+                maxLineWidth: Math.abs(limitLabelLength),
                 ellipsis
             });
         });
@@ -5976,7 +6030,7 @@
                     item.id = item.label;
                 }
                 item.index = index;
-                const itemGroup = this._renderEachItem(item, vutils.isEmpty(defaultSelected) ? true : defaultSelected?.includes(item.label), index);
+                const itemGroup = this._renderEachItem(item, vutils.isEmpty(defaultSelected) ? true : defaultSelected?.includes(item.label), index, legendItems);
                 const itemWidth = itemGroup.attribute.width;
                 const itemHeight = itemGroup.attribute.height;
                 this._itemHeight = Math.max(this._itemHeight, itemHeight);
@@ -6049,16 +6103,21 @@
                 this._itemsContainer.addEventListener('pointerdown', this._onClick);
             }
         }
-        _renderEachItem(item, isSelected, index) {
+        _renderEachItem(item, isSelected, index, items) {
             const { id, label, value, shape } = item;
-            const { shape: shapeAttr = {}, label: labelAttr = {}, value: valueAttr = {}, padding = 0, background, focus, focusIconStyle = {} } = this.attribute.item;
+            const { padding = 0, focus, focusIconStyle = {} } = this.attribute.item;
+            let { shape: shapeAttr = {}, label: labelAttr = {}, value: valueAttr = {}, background = {} } = this.attribute.item;
+            shapeAttr = this._handleStyle(shapeAttr, item, isSelected, index, items);
+            labelAttr = this._handleStyle(labelAttr, item, isSelected, index, items);
+            valueAttr = this._handleStyle(valueAttr, item, isSelected, index, items);
+            background = this._handleStyle(background, item, isSelected, index, items);
             const parsedPadding = vutils.normalizePadding(padding);
             let itemGroup;
             if (background.visible === false) {
                 itemGroup = vrender.createGroup({
                     x: 0,
                     y: 0,
-                    cursor: background?.style.cursor
+                    cursor: (background?.style).cursor
                 });
                 this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup);
             }
@@ -6089,7 +6148,8 @@
                 ...shapeAttr.style
             });
             Object.keys(shapeAttr.state || {}).forEach(key => {
-                const color = shapeAttr.state[key].fill || shapeAttr.state[key].stroke;
+                const color = shapeAttr.state[key].fill ||
+                    shapeAttr.state[key].stroke;
                 if (shape.fill && vutils.isNil(shapeAttr.state[key].fill) && color) {
                     shapeAttr.state[key].fill = color;
                 }
@@ -6121,7 +6181,7 @@
                 y: 0,
                 textAlign: 'start',
                 textBaseline: 'middle',
-                lineHeight: labelAttr?.style.fontSize,
+                lineHeight: (labelAttr?.style).fontSize,
                 ...labelAttr?.style,
                 text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label
             });
@@ -6137,7 +6197,7 @@
                     y: 0,
                     textAlign: 'start',
                     textBaseline: 'middle',
-                    lineHeight: valueAttr?.style.fontSize,
+                    lineHeight: (valueAttr?.style).fontSize,
                     ...valueAttr?.style,
                     text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value
                 });
@@ -6470,6 +6530,20 @@
             changeEvent.manager = this.stage?.eventSystem.manager;
             this.dispatchEvent(changeEvent);
         }
+        _handleStyle(config, item, isSelected, index, items) {
+            const newConfig = vutils.merge({}, config);
+            if (config.style && vutils.isFunction(config.style)) {
+                newConfig.style = config.style(item, isSelected, index, items);
+            }
+            if (config.state) {
+                Object.keys(config.state).forEach(key => {
+                    if (config.state[key] && vutils.isFunction(config.state[key])) {
+                        newConfig.state[key] = config.state[key](item, isSelected, index, items);
+                    }
+                });
+            }
+            return newConfig;
+        }
     }
 
     exports.SLIDER_ELEMENT_NAME = void 0;
@@ -9427,7 +9501,7 @@
         }
     }
 
-    const version = "0.13.2";
+    const version = "0.13.3-alpha.1";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;
@@ -9480,7 +9554,8 @@
     exports.getSizeHandlerPath = getSizeHandlerPath;
     exports.getVerticalPath = getVerticalPath;
     exports.loadPoptip = loadPoptip;
-    exports.module = module;
+    exports.popTipModule = popTipModule;
+    exports.setPoptipTheme = setPoptipTheme;
     exports.version = version;
 
 }));