k-react-vtable 1.0.0

package/es/components/checkbox/checkbox.js

@@ -0,0 +1,48 @@
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+import { Checkbox as VCheckbox } from "../vrender-components/checkbox";
+
+import { merge } from "@visactor/vutils";
+
+import React, { useCallback, useEffect } from "react";
+
+const defaultProps = {};
+
+function CheckboxComponent(baseProps, ref) {
+    const props = merge({}, defaultProps, baseProps), {textStyle: textStyle, boxStyle: boxStyle, iconStyle: iconStyle, children: children} = props, rest = __rest(props, [ "textStyle", "boxStyle", "iconStyle", "children" ]);
+    let checkboxRef = React.useRef(null);
+    checkboxRef = ref || checkboxRef;
+    const handleChange = useCallback((event => {
+        props.onChange && props.onChange(event.target.attribute.checked);
+    }), []);
+    return useEffect((() => {
+        var _a;
+        return null === (_a = checkboxRef.current) || void 0 === _a || _a.addEventListener("checkbox_state_change", handleChange), 
+        () => {
+            var _a;
+            null === (_a = checkboxRef.current) || void 0 === _a || _a.removeEventListener("checkbox_state_change", handleChange);
+        };
+    }), []), React.createElement(VCheckbox, Object.assign({
+        ref: checkboxRef,
+        attribute: Object.assign({
+            text: Object.assign(Object.assign({}, textStyle), {
+                text: children
+            }),
+            box: boxStyle,
+            icon: iconStyle
+        }, rest)
+    }, rest));
+}
+
+export const Checkbox = React.forwardRef(CheckboxComponent);
+
+Checkbox.displayName = "Checkbox";
+//# sourceMappingURL=checkbox.js.map

package/es/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/checkbox/checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;AASA,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBtD,MAAM,YAAY,GAAkB,EAAE,CAAC;AAEvC,SAAS,iBAAiB,CAAC,SAAwB,EAAE,GAA+B;IAClF,MAAM,KAAK,GAAkB,KAAK,CAAC,EAAE,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IAChE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA7D,kDAAqD,CAAQ,CAAC;IACpE,IAAI,WAAW,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IACtD,WAAW,GAAG,GAAG,CAAC,CAAC,CAAE,GAAwC,CAAC,CAAC,CAAC,WAAW,CAAC;IAE5E,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAkC,EAAE,EAAE;QACtE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,WAAW,CAAC,OAAO,0CAAE,gBAAgB,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;QAC7E,OAAO,GAAG,EAAE;;YACV,MAAA,WAAW,CAAC,OAAO,0CAAE,mBAAmB,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;QAClF,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,WAAW,EAChB,SAAS,kBACP,IAAI,kCACC,SAAS,KACZ,IAAI,EAAE,QAAQ,KAEhB,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,SAAS,IACZ,IAAI,KAEL,IAAI,EACG,CACd,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAiC,iBAAiB,CAAC,CAAC;AAE5F,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","file":"checkbox.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  CheckBox as VRenderCheckbox,\n  CheckboxAttributes\n} from 'k-vtable/es/vrender';\nimport { Checkbox as VCheckbox } from '../vrender-components/checkbox';\nimport { merge } from '@visactor/vutils';\nimport React, { useCallback, useEffect } from 'react';\n\nexport interface CheckboxProps {\n  children?: string;\n  textStyle?: CheckboxAttributes['text'];\n  boxStyle?: CheckboxAttributes['box'];\n  iconStyle?: CheckboxAttributes['icon'];\n  checked?: boolean;\n  indeterminate?: boolean;\n  interactive?: boolean;\n  disabled?: boolean;\n  disableCursor?: Cursor;\n  spaceBetweenTextAndIcon?: number;\n  visible?: boolean;\n  onChange?: (checked: boolean) => void;\n}\n\nconst defaultProps: CheckboxProps = {};\n\nfunction CheckboxComponent(baseProps: CheckboxProps, ref: React.Ref<VRenderCheckbox>) {\n  const props: CheckboxProps = merge({}, defaultProps, baseProps);\n  const { textStyle, boxStyle, iconStyle, children, ...rest } = props;\n  let checkboxRef = React.useRef<VRenderCheckbox>(null);\n  checkboxRef = ref ? (ref as React.RefObject<VRenderCheckbox>) : checkboxRef;\n\n  const handleChange = useCallback((event: { target: VRenderCheckbox }) => {\n    props.onChange && props.onChange(event.target.attribute.checked);\n  }, []);\n\n  useEffect(() => {\n    checkboxRef.current?.addEventListener('checkbox_state_change', handleChange);\n    return () => {\n      checkboxRef.current?.removeEventListener('checkbox_state_change', handleChange);\n    };\n  }, []);\n\n  return (\n    <VCheckbox\n      ref={checkboxRef}\n      attribute={{\n        text: {\n          ...textStyle,\n          text: children\n        },\n        box: boxStyle,\n        icon: iconStyle,\n        ...rest\n      }}\n      {...rest} // for REACT_TO_CANOPUS_EVENTS\n    ></VCheckbox>\n  );\n}\n\nexport const Checkbox = React.forwardRef<VRenderCheckbox, CheckboxProps>(CheckboxComponent);\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/es/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './button/button';
+export * from './link/link';
+export * from './avatar/avatar';
+export * from './popover/popover';
+export * from './tag/tag';
+export * from './radio/radio';
+export * from './checkbox/checkbox';

package/es/components/index.js

@@ -0,0 +1,14 @@
+export * from "./button/button";
+
+export * from "./link/link";
+
+export * from "./avatar/avatar";
+
+export * from "./popover/popover";
+
+export * from "./tag/tag";
+
+export * from "./radio/radio";
+
+export * from "./checkbox/checkbox";
+//# sourceMappingURL=index.js.map

package/es/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/index.ts"],"names":[],"mappings":"AAGA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","file":"index.js","sourcesContent":["// export * from './vrender-components/tag';\n// export * from './vrender-components/checkbox';\n// export * from './vrender-components/radio';\nexport * from './button/button';\nexport * from './link/link';\nexport * from './avatar/avatar';\nexport * from './popover/popover';\nexport * from './tag/tag';\nexport * from './radio/radio';\nexport * from './checkbox/checkbox';\n"]}

package/es/components/link/link.d.ts

@@ -0,0 +1,30 @@
+import type { BackgroundAttributes, Cursor, IRectGraphicAttribute, ITextGraphicAttribute, Padding } from 'k-vtable/es/vrender';
+import React from 'react';
+interface LinkStateStyle {
+    textStyle?: {
+        hover?: Partial<ITextGraphicAttribute>;
+        disabled?: Partial<ITextGraphicAttribute>;
+    };
+    panelStyle?: {
+        hover?: Partial<IRectGraphicAttribute>;
+        disabled?: Partial<IRectGraphicAttribute>;
+    };
+}
+export interface LinkProps {
+    children?: string;
+    textStyle?: Partial<ITextGraphicAttribute>;
+    padding?: Padding;
+    space?: number;
+    panelStyle?: BackgroundAttributes;
+    minWidth?: number;
+    maxWidth?: number;
+    visible?: boolean;
+    state?: LinkStateStyle;
+    disabled?: boolean;
+    icon?: boolean;
+    cursor?: Cursor;
+    href?: string;
+    onClick?: (e: Event) => void;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<Tag>>;
+export {};

package/es/components/link/link.js

@@ -0,0 +1,96 @@
+import { Tag as VTag } from "../vrender-components/tag";
+
+import { merge } from "@visactor/vutils";
+
+import React, { useEffect } from "react";
+
+const defaultProps = {
+    textStyle: {
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        fill: "rgb(64, 128, 255)"
+    },
+    panelStyle: {
+        visible: !0,
+        opacity: 0,
+        fill: "rgba(242, 243, 245, 0.5)",
+        lineWidth: 1,
+        cornerRadius: 2
+    },
+    padding: 4,
+    space: 6,
+    state: {
+        textStyle: {
+            disabled: {
+                fill: "rgb(148, 191, 255)"
+            }
+        },
+        panelStyle: {
+            hover: {
+                opacity: 1
+            }
+        }
+    }
+};
+
+function LinkComponent(baseProps, ref) {
+    const props = merge({}, defaultProps, baseProps), {disabled: disabled, href: href, onClick: onClick} = props;
+    let linkRef = React.useRef(null);
+    linkRef = ref || linkRef;
+    const handleClick = React.useCallback((event => {
+        disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : (onClick && onClick(event), 
+        href && window.open(href));
+    }), [ disabled, href, onClick ]), attribute = getTagAttribute(props);
+    return useEffect((() => {
+        linkRef.current.addEventListener("mouseenter", (() => {
+            disabled || (linkRef.current.addState("hover", !0, !1), linkRef.current.stage.renderNextFrame());
+        })), linkRef.current.addEventListener("mouseleave", (() => {
+            disabled || (linkRef.current.removeState("hover", !1), linkRef.current.stage.renderNextFrame());
+        }));
+    }), []), useEffect((() => {
+        disabled ? (linkRef.current.removeState("disabled", !1), linkRef.current.addState("disabled", !0, !1)) : linkRef.current.removeState("disabled", !1), 
+        linkRef.current.stage.renderNextFrame();
+    })), React.createElement(VTag, {
+        ref: linkRef,
+        attribute: attribute,
+        onClick: handleClick
+    });
+}
+
+function getTagAttribute(props) {
+    var _a, _b, _c, _d;
+    const {textStyle: textStyle, padding: padding, space: space, panelStyle: panelStyle, minWidth: minWidth, maxWidth: maxWidth, visible: visible, cursor: cursor, disabled: disabled, icon: icon, state: state, children: children} = props;
+    return {
+        text: children,
+        textStyle: textStyle,
+        padding: padding,
+        panel: panelStyle,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        visible: visible,
+        cursor: (null != cursor ? cursor : disabled) ? "not-allowed" : "pointer",
+        childrenPickable: !1,
+        state: {
+            text: {
+                hover: null === (_a = null == state ? void 0 : state.textStyle) || void 0 === _a ? void 0 : _a.hover,
+                disabled: null === (_b = null == state ? void 0 : state.textStyle) || void 0 === _b ? void 0 : _b.disabled
+            },
+            panel: {
+                hover: null === (_c = null == state ? void 0 : state.panelStyle) || void 0 === _c ? void 0 : _c.hover,
+                disabled: null === (_d = null == state ? void 0 : state.panelStyle) || void 0 === _d ? void 0 : _d.disabled
+            }
+        },
+        space: space,
+        shape: {
+            visible: !!icon,
+            fill: !1,
+            stroke: textStyle.fill,
+            symbolType: "M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495"
+        }
+    };
+}
+
+export const Link = React.forwardRef(LinkComponent);
+
+Link.displayName = "Link";
+//# sourceMappingURL=link.js.map

package/es/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/link/link.tsx"],"names":[],"mappings":"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","file":"link.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from 'k-vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\ninterface LinkStateStyle {\n  textStyle?: {\n    hover?: Partial<ITextGraphicAttribute>;\n    disabled?: Partial<ITextGraphicAttribute>;\n  };\n  panelStyle?: {\n    hover?: Partial<IRectGraphicAttribute>;\n    disabled?: Partial<IRectGraphicAttribute>;\n  };\n}\n\nexport interface LinkProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  space?: number;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: LinkStateStyle;\n  disabled?: boolean;\n  icon?: boolean;\n  cursor?: Cursor;\n  href?: string;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: LinkProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: 'rgb(64, 128, 255)'\n  },\n  panelStyle: {\n    visible: true,\n    opacity: 0,\n    fill: 'rgba(242, 243, 245, 0.5)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 4,\n  space: 6,\n  // cursor: 'pointer',\n  state: {\n    textStyle: {\n      disabled: {\n        fill: 'rgb(148, 191, 255)'\n      }\n    },\n    panelStyle: {\n      hover: {\n        // visible: true\n        opacity: 1\n      }\n    }\n  }\n};\n\nfunction LinkComponent(baseProps: LinkProps, ref: React.Ref<Tag>) {\n  const props: LinkProps = merge({}, defaultProps, baseProps);\n  const { disabled, href, onClick } = props;\n  let linkRef = React.useRef<Tag>(null);\n  linkRef = ref ? (ref as React.RefObject<Tag>) : linkRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      if (disabled) {\n        typeof event?.preventDefault === 'function' && event.preventDefault();\n        return;\n      }\n      onClick && onClick(event);\n      if (href) {\n        // eslint-disable-next-line no-undef\n        window.open(href);\n      }\n    },\n    [disabled, href, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    linkRef.current.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', linkRef.current, e.clone());\n      if (!disabled) {\n        linkRef.current.addState('hover', true, false);\n        // linkRef.current._bgRect.addState('hover', true, false);\n        // linkRef.current._textShape.addState('hover', true, false);\n        linkRef.current.stage.renderNextFrame();\n      }\n    });\n    linkRef.current.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', linkRef.current, e.clone());\n      if (!disabled) {\n        linkRef.current.removeState('hover', false);\n        // linkRef.current._bgRect.removeState('hover', false);\n        // linkRef.current._textShape.removeState('hover', false);\n        linkRef.current.stage.renderNextFrame();\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    if (disabled) {\n      linkRef.current.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n\n      linkRef.current.addState('disabled', true, false);\n      // linkRef.current._bgRect.addState('disabled', true, false);\n      // linkRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      linkRef.current.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    linkRef.current.stage.renderNextFrame();\n  });\n\n  return <VTag ref={linkRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: LinkProps) {\n  const {\n    textStyle,\n    padding,\n    space,\n    panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor,\n    disabled,\n    icon,\n    state,\n    children\n  } = props;\n  const attr: TagAttributes = {\n    text: children,\n    textStyle,\n    padding,\n    panel: panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor: cursor ?? disabled ? 'not-allowed' : 'pointer',\n    childrenPickable: false,\n    state: {\n      text: {\n        hover: state?.textStyle?.hover,\n        disabled: state?.textStyle?.disabled\n      },\n      panel: {\n        hover: state?.panelStyle?.hover,\n        disabled: state?.panelStyle?.disabled\n      }\n    },\n    space,\n    shape: {\n      visible: !!icon,\n      fill: false,\n      stroke: textStyle.fill,\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495'\n    }\n  };\n\n  return attr;\n}\n\nexport const Link = React.forwardRef<Tag, LinkProps>(LinkComponent);\n\nLink.displayName = 'Link';\n"]}

package/es/components/popover/popover.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import React from 'react';
+type Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+export interface PopoverProps {
+    children?: ReactElement;
+    defaultPopupVisible?: boolean;
+    popupVisible?: boolean;
+    position?: Anchor;
+    content?: ReactNode;
+    panelStyle?: CSSProperties;
+    arrowStyle?: CSSProperties;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<IGroup>>;
+export {};

package/es/components/popover/popover.js

@@ -0,0 +1,260 @@
+import { isValid, merge } from "@visactor/vutils";
+
+import React, { useCallback, useEffect, useState } from "react";
+
+import { Group } from "../../table-components";
+
+const defaultProps = {
+    defaultPopupVisible: !1,
+    position: "top"
+}, defaultPoptipPanelStyle = {
+    backgroundColor: "rgb(255, 255, 255)",
+    boxShadow: "0 4px 10px rgba(0, 0, 0, .1)",
+    fontSize: "14px",
+    borderRadius: "4px",
+    lineHeight: "1.5715",
+    boxSizing: "border-box",
+    color: "rgb(78, 89, 105)",
+    border: "1px solid rgb(229, 230, 235)",
+    padding: "12px 16px"
+}, Tooltip = props => {
+    const arrowStyle = Object.assign(Object.assign({
+        content: "",
+        height: "8px",
+        width: "8px",
+        position: "absolute",
+        display: "block",
+        boxSizing: "border-box",
+        transform: "rotate(45deg)",
+        transformOrigin: "50% 50% 0",
+        backgroundColor: "rgb(255, 255, 255)",
+        border: "1px solid rgb(229, 230, 235)"
+    }, getArrowStyle(props.position)), props.arrowStyle);
+    return props.visible ? React.createElement(React.Fragment, null, React.createElement("div", {
+        style: merge({}, defaultPoptipPanelStyle, props.panelStyle)
+    }, props.content), React.createElement("div", {
+        style: arrowStyle
+    })) : React.createElement(React.Fragment, null);
+};
+
+function PopoverComponent(baseProps, ref) {
+    const props = merge({}, defaultProps, baseProps), {content: content, position: position, popupVisible: popupVisible, defaultPopupVisible: defaultPopupVisible, panelStyle: panelStyle, arrowStyle: arrowStyle, children: children} = props;
+    let popoverRef = React.useRef(null);
+    popoverRef = ref || popoverRef;
+    const [popupOpen, setPopupOpen] = useState(!1);
+    useEffect((() => {
+        setPopupOpen(!!popupVisible), popoverRef.current.stage.renderNextFrame();
+    }), [ popupVisible ]), useEffect((() => {
+        var _a;
+        setPopupOpen(null !== (_a = null != popupVisible ? popupVisible : defaultPopupVisible) && void 0 !== _a && _a);
+    }), []);
+    const {transform: transform, anchorType: anchorType} = getTransform(position), groupAttribute = {
+        react: {
+            style: {
+                transform: transform
+            },
+            element: React.createElement(Tooltip, {
+                visible: popupOpen,
+                content: content,
+                position: position,
+                panelStyle: panelStyle,
+                arrowStyle: arrowStyle
+            }),
+            container: null,
+            visible: !0,
+            pointerEvents: !1,
+            anchorType: anchorType
+        }
+    }, groupMouseEnter = useCallback((event => {
+        isValid(popupVisible) || (setPopupOpen(!0), event.currentTarget.stage.renderNextFrame());
+    }), []), groupMouseLeave = useCallback((event => {
+        isValid(popupVisible) || (setPopupOpen(!1), event.currentTarget.stage.renderNextFrame());
+    }), []);
+    return React.createElement(Group, {
+        ref: popoverRef,
+        attribute: groupAttribute,
+        onMouseEnter: groupMouseEnter,
+        onMouseLeave: groupMouseLeave
+    }, children);
+}
+
+function getTransform(position) {
+    switch (position) {
+      case "top":
+        return {
+            anchorType: "top",
+            transform: "translate(-50%, calc(-100% - 10px))"
+        };
+
+      case "tl":
+        return {
+            anchorType: "top-left",
+            transform: "translate(0, calc(-100% - 10px))"
+        };
+
+      case "tr":
+        return {
+            anchorType: "top-right",
+            transform: "translate(-100%, calc(-100% - 10px))"
+        };
+
+      case "bottom":
+        return {
+            anchorType: "bottom",
+            transform: "translate(-50%, 10px)"
+        };
+
+      case "bl":
+        return {
+            anchorType: "bottom-left",
+            transform: "translate(0, 10px)"
+        };
+
+      case "br":
+        return {
+            anchorType: "bottom-right",
+            transform: "translate(-100%, 10px)"
+        };
+
+      case "left":
+        return {
+            anchorType: "left",
+            transform: "translate(calc(-100% - 10px), -50%)"
+        };
+
+      case "lt":
+        return {
+            anchorType: "top-left",
+            transform: "translate(calc(-100% - 10px), 0)"
+        };
+
+      case "lb":
+        return {
+            anchorType: "bottom-left",
+            transform: "translate(calc(-100% - 10px), -100%)"
+        };
+
+      case "right":
+        return {
+            anchorType: "right",
+            transform: "translate(10px, -50%)"
+        };
+
+      case "rt":
+        return {
+            anchorType: "top-right",
+            transform: "translate(10px, 0)"
+        };
+
+      case "rb":
+        return {
+            anchorType: "bottom-right",
+            transform: "translate(10px, -100%)"
+        };
+    }
+}
+
+function getArrowStyle(position) {
+    switch (position) {
+      case "top":
+        return {
+            top: "calc(100% - 5px)",
+            left: "calc(50% - 5px)",
+            borderTop: "none",
+            borderLeft: "none"
+        };
+
+      case "tl":
+        return {
+            top: "calc(100% - 4px)",
+            left: "14px",
+            borderTop: "none",
+            borderLeft: "none"
+        };
+
+      case "tr":
+        return {
+            top: "calc(100% - 4px)",
+            left: "calc(100% - 24px)",
+            borderTop: "none",
+            borderLeft: "none"
+        };
+
+      case "bottom":
+        return {
+            top: "-4px",
+            left: "calc(50% - 4px)",
+            borderRight: "none",
+            borderBottom: "none"
+        };
+
+      case "bl":
+        return {
+            top: "-4px",
+            left: "14px",
+            borderRight: "none",
+            borderBottom: "none"
+        };
+
+      case "br":
+        return {
+            top: "-4px",
+            left: "calc(100% - 24px)",
+            borderRight: "none",
+            borderBottom: "none"
+        };
+
+      case "left":
+        return {
+            top: "calc(50% - 4px)",
+            left: "calc(100% - 5px)",
+            borderLeft: "none",
+            borderBottom: "none"
+        };
+
+      case "lt":
+        return {
+            top: "14px",
+            left: "calc(100% - 5px)",
+            borderLeft: "none",
+            borderBottom: "none"
+        };
+
+      case "lb":
+        return {
+            top: "calc(100% - 24px)",
+            left: "calc(100% - 5px)",
+            borderLeft: "none",
+            borderBottom: "none"
+        };
+
+      case "right":
+        return {
+            top: "calc(50% - 4px)",
+            left: "-4px",
+            borderRight: "none",
+            borderTop: "none"
+        };
+
+      case "rt":
+        return {
+            top: "14px",
+            left: "-4px",
+            borderRight: "none",
+            borderTop: "none"
+        };
+
+      case "rb":
+        return {
+            top: "calc(100% - 24px)",
+            left: "-4px",
+            borderRight: "none",
+            borderTop: "none"
+        };
+    }
+}
+
+export const Popover = React.forwardRef(PopoverComponent);
+
+Popover.displayName = "Popover";
+//# sourceMappingURL=popover.js.map

package/es/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/popover/popover.tsx"],"names":[],"mappings":"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","file":"popover.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IGroup,\n  IGroupGraphicAttribute,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from 'k-vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport type { BoundsAnchorType } from '@visactor/vutils';\nimport { isValid, merge } from '@visactor/vutils';\nimport type { CSSProperties, ReactElement, ReactNode } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Group } from '../../table-components';\n\ntype Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';\nexport interface PopoverProps {\n  children?: ReactElement;\n  defaultPopupVisible?: boolean;\n  // disabled?: boolean;\n  // popupHoverStay?: boolean;\n  popupVisible?: boolean;\n  // color?: string;\n  position?: Anchor;\n  content?: ReactNode;\n  // onVisibleChange?: (visible: boolean) => void;\n\n  panelStyle?: CSSProperties;\n  arrowStyle?: CSSProperties;\n}\n\nconst defaultProps: PopoverProps = {\n  defaultPopupVisible: false,\n  // popupHoverStay: true,\n  // popupVisible: false,\n  position: 'top'\n};\n\nconst defaultPoptipPanelStyle: CSSProperties = {\n  backgroundColor: 'rgb(255, 255, 255)',\n  boxShadow: '0 4px 10px rgba(0, 0, 0, .1)',\n  fontSize: '14px',\n  borderRadius: '4px',\n  lineHeight: '1.5715',\n  boxSizing: 'border-box',\n  color: 'rgb(78, 89, 105)',\n  border: '1px solid rgb(229, 230, 235)',\n  padding: '12px 16px'\n};\n\nconst Tooltip = (props: {\n  visible: boolean;\n  content: ReactNode;\n  position: Anchor;\n  panelStyle?: CSSProperties;\n  arrowStyle?: CSSProperties;\n}) => {\n  const arrowStyle: CSSProperties = {\n    content: '',\n    height: '8px',\n    width: '8px',\n    position: 'absolute',\n    display: 'block',\n    boxSizing: 'border-box',\n    transform: 'rotate(45deg)',\n    transformOrigin: '50% 50% 0',\n    backgroundColor: 'rgb(255, 255, 255)',\n    border: '1px solid rgb(229, 230, 235)',\n    ...getArrowStyle(props.position),\n\n    ...props.arrowStyle\n  };\n\n  return props.visible ? (\n    <>\n      <div style={merge({}, defaultPoptipPanelStyle, props.panelStyle)}>{props.content}</div>\n      <div style={arrowStyle}></div>\n    </>\n  ) : (\n    <></>\n  );\n};\n\nfunction PopoverComponent(baseProps: PopoverProps, ref: React.Ref<IGroup>) {\n  const props: PopoverProps = merge({}, defaultProps, baseProps);\n  const { content, position, popupVisible, defaultPopupVisible, panelStyle, arrowStyle, children } = props;\n  let popoverRef = React.useRef<IGroup>(null);\n  popoverRef = ref ? (ref as React.RefObject<IGroup>) : popoverRef;\n\n  const [popupOpen, setPopupOpen] = useState(false);\n\n  useEffect(() => {\n    if (popupVisible) {\n      setPopupOpen(true);\n    } else {\n      setPopupOpen(false);\n    }\n    popoverRef.current.stage.renderNextFrame();\n  }, [popupVisible]);\n\n  useEffect(() => {\n    setPopupOpen(popupVisible ?? defaultPopupVisible ?? false);\n  }, []);\n\n  const { transform, anchorType } = getTransform(position);\n  const poptipContainerStyle: CSSProperties = {\n    // display: popupOpen ? 'block' : 'none',\n    transform: transform\n  };\n\n  const groupAttribute: IGroupGraphicAttribute = {\n    react: {\n      // width: 100,\n      // height: 100,\n      style: poptipContainerStyle,\n      element: (\n        <Tooltip\n          visible={popupOpen}\n          content={content}\n          position={position}\n          panelStyle={panelStyle}\n          arrowStyle={arrowStyle}\n        />\n      ),\n      container: null,\n      visible: true,\n      pointerEvents: false,\n      anchorType: anchorType\n    } as IGroupGraphicAttribute['react']\n  };\n\n  const groupMouseEnter = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(true);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  const groupMouseLeave = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(false);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  return (\n    <Group ref={popoverRef} attribute={groupAttribute} onMouseEnter={groupMouseEnter} onMouseLeave={groupMouseLeave}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTransform(position: Anchor): { transform: string; anchorType: BoundsAnchorType } {\n  switch (position) {\n    case 'top':\n      return {\n        anchorType: 'top',\n        transform: 'translate(-50%, calc(-100% - 10px))'\n      };\n    case 'tl':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(0, calc(-100% - 10px))'\n      };\n    case 'tr':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(-100%, calc(-100% - 10px))'\n      };\n    case 'bottom':\n      return {\n        anchorType: 'bottom',\n        transform: 'translate(-50%, 10px)'\n      };\n    case 'bl':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(0, 10px)'\n      };\n    case 'br':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(-100%, 10px)'\n      };\n    case 'left':\n      return {\n        anchorType: 'left',\n        transform: 'translate(calc(-100% - 10px), -50%)'\n      };\n    case 'lt':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(calc(-100% - 10px), 0)'\n      };\n    case 'lb':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(calc(-100% - 10px), -100%)'\n      };\n    case 'right':\n      return {\n        anchorType: 'right',\n        transform: 'translate(10px, -50%)'\n      };\n    case 'rt':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(10px, 0)'\n      };\n    case 'rb':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(10px, -100%)'\n      };\n  }\n}\n\nfunction getArrowStyle(position: Anchor): CSSProperties {\n  switch (position) {\n    case 'top':\n      return {\n        top: 'calc(100% - 5px)',\n        left: 'calc(50% - 5px)',\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tl':\n      return {\n        top: 'calc(100% - 4px)',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tr':\n      return {\n        top: 'calc(100% - 4px)',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'bottom':\n      return {\n        top: '-4px',\n        left: 'calc(50% - 4px)',\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'bl':\n      return {\n        top: '-4px',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'br':\n      return {\n        top: '-4px',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'left':\n      return {\n        top: 'calc(50% - 4px)',\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'right':\n      return {\n        top: 'calc(50% - 4px)',\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n  }\n}\n\nexport const Popover = React.forwardRef<IGroup, PopoverProps>(PopoverComponent);\n\nPopover.displayName = 'Popover';\n"]}

package/es/components/radio/radio.d.ts

@@ -0,0 +1,15 @@
+import type { Cursor, RadioAttributes } from 'k-vtable/es/vrender';
+import React from 'react';
+export interface RadioProps {
+    children?: string;
+    textStyle?: RadioAttributes['text'];
+    circleStyle?: RadioAttributes['circle'];
+    checked?: boolean;
+    interactive?: boolean;
+    disabled?: boolean;
+    disableCursor?: Cursor;
+    spaceBetweenTextAndIcon?: number;
+    visible?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<VRenderRadio>>;

package/es/components/radio/radio.js

@@ -0,0 +1,47 @@
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+import { Radio as VRadio } from "../vrender-components/radio";
+
+import { merge } from "@visactor/vutils";
+
+import React, { useCallback, useEffect } from "react";
+
+const defaultProps = {};
+
+function RadioComponent(baseProps, ref) {
+    const props = merge({}, defaultProps, baseProps), {textStyle: textStyle, circleStyle: circleStyle, children: children} = props, rest = __rest(props, [ "textStyle", "circleStyle", "children" ]);
+    let radioRef = React.useRef(null);
+    radioRef = ref || radioRef;
+    const handleChange = useCallback((event => {
+        props.onChange && props.onChange(event.target.attribute.checked);
+    }), []);
+    return useEffect((() => {
+        var _a;
+        return null === (_a = radioRef.current) || void 0 === _a || _a.addEventListener("radio_checked", handleChange), 
+        () => {
+            var _a;
+            null === (_a = radioRef.current) || void 0 === _a || _a.removeEventListener("radio_checked", handleChange);
+        };
+    }), []), React.createElement(VRadio, Object.assign({
+        ref: radioRef,
+        attribute: Object.assign({
+            text: Object.assign(Object.assign({}, textStyle), {
+                text: children
+            }),
+            circle: circleStyle
+        }, rest)
+    }, rest));
+}
+
+export const Radio = React.forwardRef(RadioComponent);
+
+Radio.displayName = "Radio";
+//# sourceMappingURL=radio.js.map

package/es/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/radio/radio.tsx"],"names":[],"mappings":";;;;;;;;;;;AASA,OAAO,EAAE,KAAK,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAetD,MAAM,YAAY,GAAe,EAAE,CAAC;AAEpC,SAAS,cAAc,CAAC,SAAqB,EAAE,GAA4B;IACzE,MAAM,KAAK,GAAe,KAAK,CAAC,EAAE,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IAC7D,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArD,wCAA6C,CAAQ,CAAC;IAC5D,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAe,IAAI,CAAC,CAAC;IAChD,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAE,GAAqC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEnE,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAA+B,EAAE,EAAE;QACnE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,QAAQ,CAAC,OAAO,0CAAE,gBAAgB,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;QAClE,OAAO,GAAG,EAAE;;YACV,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;QACvE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,MAAM,kBACL,GAAG,EAAE,QAAQ,EACb,SAAS,kBACP,IAAI,kCACC,SAAS,KACZ,IAAI,EAAE,QAAQ,KAEhB,MAAM,EAAE,WAAW,IAChB,IAAI,KAEL,IAAI,EACA,CACX,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA2B,cAAc,CAAC,CAAC;AAEhF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","file":"radio.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Radio as VRenderRadio,\n  RadioAttributes\n} from 'k-vtable/es/vrender';\nimport { Radio as VRadio } from '../vrender-components/radio';\nimport { merge } from '@visactor/vutils';\nimport React, { useCallback, useEffect } from 'react';\n\nexport interface RadioProps {\n  children?: string;\n  textStyle?: RadioAttributes['text'];\n  circleStyle?: RadioAttributes['circle'];\n  checked?: boolean;\n  interactive?: boolean;\n  disabled?: boolean;\n  disableCursor?: Cursor;\n  spaceBetweenTextAndIcon?: number;\n  visible?: boolean;\n  onChange?: (checked: boolean) => void;\n}\n\nconst defaultProps: RadioProps = {};\n\nfunction RadioComponent(baseProps: RadioProps, ref: React.Ref<VRenderRadio>) {\n  const props: RadioProps = merge({}, defaultProps, baseProps);\n  const { textStyle, circleStyle, children, ...rest } = props;\n  let radioRef = React.useRef<VRenderRadio>(null);\n  radioRef = ref ? (ref as React.RefObject<VRenderRadio>) : radioRef;\n\n  const handleChange = useCallback((event: { target: VRenderRadio }) => {\n    props.onChange && props.onChange(event.target.attribute.checked);\n  }, []);\n\n  useEffect(() => {\n    radioRef.current?.addEventListener('radio_checked', handleChange);\n    return () => {\n      radioRef.current?.removeEventListener('radio_checked', handleChange);\n    };\n  }, []);\n\n  return (\n    <VRadio\n      ref={radioRef}\n      attribute={{\n        text: {\n          ...textStyle,\n          text: children\n        },\n        circle: circleStyle,\n        ...rest\n      }}\n      {...rest} // for REACT_TO_CANOPUS_EVENTS\n    ></VRadio>\n  );\n}\n\nexport const Radio = React.forwardRef<VRenderRadio, RadioProps>(RadioComponent);\n\nRadio.displayName = 'Radio';\n"]}

package/es/components/tag/tag.d.ts

@@ -0,0 +1,13 @@
+import type { IRectGraphicAttribute, ITextGraphicAttribute, Padding, TagAttributes } from 'k-vtable/es/vrender';
+import React from 'react';
+export interface TagProps {
+    attribute?: TagAttributes;
+    children?: string;
+    textStyle?: Partial<ITextGraphicAttribute>;
+    panelStyle?: Partial<IRectGraphicAttribute>;
+    padding?: Padding;
+    minWidth?: number;
+    maxWidth?: number;
+    visible?: boolean;
+}
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<VRenderTag>>;