k-react-vtable 1.0.0

package/README.md

@@ -0,0 +1,93 @@
+<div align="center">
+  <a href="" target="_blank">
+    <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/500_200.svg"/>
+  </a>
+</div>
+
+<div align="center">
+  <h1>React-VTable</h1>
+</div>
+
+<div align="center">
+
+VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.React-VTable is a React wrapper of VTable.
+
+[![npm Version](https://img.shields.io/npm/v/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/react-vtable)
+[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/react-vvtable)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)
+
+</div>
+
+# Usage
+
+## Installation
+
+[npm package](https://www.npmjs.com/package/@visactor/react-vtable)
+
+```bash
+// npm
+npm install @visactor/react-vtable
+
+// yarn
+yarn add @visactor/react-vtable
+```
+
+## Quick Start
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ListTable } from "k-react-table";
+
+const option = {
+  header: [
+    {
+      field: "0",
+      title: "name",
+    },
+    {
+      field: "1",
+      title: "age",
+    },
+    {
+      field: "2",
+      title: "gender",
+    },
+    {
+      field: "3",
+      title: "hobby",
+    },
+  ],
+  records: new Array(1000).fill(["John", 18, "male", "🏀"]),
+};
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <ListTable option={option} height={'500px'}/>
+);
+```
+
+##
+
+[More demos and detailed tutorials](https://visactor.io/vtable)
+
+# Related Links
+
+- [Official website](https://visactor.io/vtable)
+
+# Ecosystem
+
+| Project                                                     | Description                                                                            |
+| ----------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| [AI-generated Components](https://visactor.io/ai-vtable)    | AI-generated table component.                                                          |
+
+# Contribution
+
+If you would like to contribute, please read the [Code of Conduct ](./CODE_OF_CONDUCT.md) 和 [ Guide](./CONTRIBUTING.zh-CN.md) first。
+
+Small streams converge to make great rivers and seas!
+
+<a href="https://github.com/visactor/vtable/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vtable" /></a>
+
+# License
+
+[MIT License](./LICENSE)

package/cjs/components/avatar/avatar.d.ts

@@ -0,0 +1,14 @@
+import { type BackgroundAttributes, type Cursor, type ITextGraphicAttribute } from 'k-vtable/es/vrender';
+import React from 'react';
+export interface AvatarProps {
+    children?: string | React.ReactNode;
+    textStyle?: Partial<ITextGraphicAttribute>;
+    panelStyle?: BackgroundAttributes;
+    size?: number;
+    shape?: 'circle' | 'square';
+    visible?: boolean;
+    cursor?: Cursor;
+    autoFixFontSize?: boolean;
+    onClick?: (e: Event) => void;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<IGroup>>;

package/cjs/components/avatar/avatar.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : {
+        default: mod
+    };
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Avatar = void 0;
+
+const vrender_1 = require("k-vtable/es/vrender"), vutils_1 = require("@visactor/vutils"), react_1 = __importDefault(require("react")), table_components_1 = require("../../table-components"), defaultProps = {
+    textStyle: {
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        fill: "#FFF"
+    },
+    panelStyle: {
+        visible: !0,
+        fill: "rgb(201, 205, 212)",
+        lineWidth: 1,
+        cornerRadius: 2
+    },
+    size: 40,
+    shape: "circle",
+    autoFixFontSize: !0
+};
+
+function AvatarComponent(baseProps, ref) {
+    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {size: size, children: children, onClick: onClick} = props;
+    let avatarRef = react_1.default.useRef(null);
+    avatarRef = ref || avatarRef;
+    const handleClick = react_1.default.useCallback((event => {
+        onClick && onClick(event);
+    }), [ onClick ]), groupAttribute = getGroupAttribute(props);
+    if ((0, vutils_1.isString)(children)) {
+        const textAttribute = getTextAttribute(props);
+        return react_1.default.createElement(table_components_1.Group, {
+            ref: avatarRef,
+            attribute: groupAttribute,
+            onClick: handleClick
+        }, react_1.default.createElement(table_components_1.Text, {
+            attribute: textAttribute
+        }));
+    }
+    return "image" === children.type && (children.props.attribute.width = size, children.props.attribute.height = size), 
+    react_1.default.createElement(table_components_1.Group, {
+        ref: avatarRef,
+        attribute: groupAttribute,
+        onClick: handleClick
+    }, children);
+}
+
+function getTextAttribute(props) {
+    const {textStyle: textStyle, size: size, children: children, autoFixFontSize: autoFixFontSize} = props, attribute = Object.assign({
+        text: children
+    }, textStyle);
+    return autoFixFontSize && getAutoFixFontSize(size, attribute), attribute;
+}
+
+function getGroupAttribute(props) {
+    var _a;
+    const {panelStyle: panelStyle, size: size, shape: shape} = props;
+    return Object.assign(Object.assign({}, panelStyle), {
+        width: size,
+        height: size,
+        clip: !0,
+        cornerRadius: "circle" === shape ? size / 2 : null !== (_a = panelStyle.cornerRadius) && void 0 !== _a ? _a : 2,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        visibleAll: !0,
+        path: void 0
+    });
+}
+
+function getAutoFixFontSize(size, attribute) {
+    const scale = size / ((0, vrender_1.measureTextSize)(attribute.text, attribute).width + 8), fontSize = Math.max(Math.floor(attribute.fontSize * scale), 6);
+    attribute.fontSize = fontSize;
+}
+
+//# sourceMappingURL=avatar.js.map
+exports.Avatar = react_1.default.forwardRef(AvatarComponent), exports.Avatar.displayName = "Avatar";

package/cjs/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/avatar/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.js","sourcesContent":["import type { IGroup, IGroupAttribute } from 'k-vtable/es/vrender';\nimport {\n  measureTextSize,\n  type BackgroundAttributes,\n  type Cursor,\n  type IRectGraphicAttribute,\n  type ITextGraphicAttribute,\n  type Padding,\n  type Tag,\n  type TagAttributes\n} from 'k-vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { isString, merge } from '@visactor/vutils';\nimport type { ReactElement } from 'react';\nimport React, { useEffect } from 'react';\nimport { Group, Image, Text } from '../../table-components';\n\nexport interface AvatarProps {\n  children?: string | React.ReactNode;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  panelStyle?: BackgroundAttributes;\n  size?: number;\n  shape?: 'circle' | 'square';\n  visible?: boolean;\n  cursor?: Cursor;\n  autoFixFontSize?: boolean;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: AvatarProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: '#FFF'\n  },\n  panelStyle: {\n    visible: true,\n    fill: 'rgb(201, 205, 212)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  size: 40,\n  shape: 'circle',\n  autoFixFontSize: true\n  // cursor: 'pointer',\n};\n\nfunction AvatarComponent(baseProps: AvatarProps, ref: React.Ref<IGroup>) {\n  const props: AvatarProps = merge({}, defaultProps, baseProps);\n  const { size, children, onClick } = props;\n  let avatarRef = React.useRef<IGroup>(null);\n  avatarRef = ref ? (ref as React.RefObject<IGroup>) : avatarRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      onClick && onClick(event);\n    },\n    [onClick]\n  );\n\n  const groupAttribute = getGroupAttribute(props);\n  if (isString(children)) {\n    const textAttribute = getTextAttribute(props);\n    return (\n      <Group ref={avatarRef} attribute={groupAttribute} onClick={handleClick}>\n        <Text attribute={textAttribute}></Text>\n      </Group>\n    );\n  }\n  if ((children as ReactElement).type === 'image') {\n    (children as ReactElement).props.attribute.width = size;\n    (children as ReactElement).props.attribute.height = size;\n  }\n  return (\n    <Group ref={avatarRef} attribute={groupAttribute} onClick={handleClick}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTextAttribute(props: AvatarProps) {\n  const { textStyle, size, children, autoFixFontSize } = props;\n\n  const attribute: ITextGraphicAttribute = {\n    text: children as string,\n    ...textStyle\n  };\n\n  if (autoFixFontSize) {\n    getAutoFixFontSize(size, attribute);\n  }\n\n  return attribute;\n}\nfunction getGroupAttribute(props: AvatarProps) {\n  const { panelStyle, size, shape } = props;\n  const attribute: IGroupAttribute = {\n    ...panelStyle,\n    width: size,\n    height: size,\n    clip: true,\n    cornerRadius: shape === 'circle' ? size / 2 : panelStyle.cornerRadius ?? 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    visibleAll: true,\n    path: undefined\n  };\n  return attribute;\n}\n\nexport const Avatar = React.forwardRef<IGroup, AvatarProps>(AvatarComponent);\n\nAvatar.displayName = 'Avatar';\n\n// auto adjust font size\nfunction getAutoFixFontSize(size: number, attribute: ITextGraphicAttribute) {\n  const textWidth = measureTextSize(attribute.text, attribute).width;\n  const scale = size / (textWidth + 8);\n  const fontSize = Math.max(Math.floor(attribute.fontSize * scale), 6);\n  attribute.fontSize = fontSize;\n}\n"]}

package/cjs/components/button/button.d.ts

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

package/cjs/components/button/button.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Button = void 0;
+
+const tag_1 = require("../vrender-components/tag"), vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), defaultProps = {
+    textStyle: {
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        fill: "#FFF"
+    },
+    panelStyle: {
+        visible: !0,
+        fill: "#165dff",
+        lineWidth: 1,
+        cornerRadius: 2
+    },
+    padding: 10,
+    state: {
+        panelStyle: {
+            hover: {
+                fill: "#4080ff"
+            },
+            disabled: {
+                fill: "#94bfff"
+            }
+        }
+    }
+};
+
+function ButtonComponent(baseProps, ref) {
+    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {disabled: disabled, onClick: onClick} = props;
+    let buttonRef = react_1.default.useRef(null);
+    buttonRef = ref || buttonRef;
+    const handleClick = react_1.default.useCallback((event => {
+        disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : onClick && onClick(event);
+    }), [ disabled, onClick ]), attribute = getTagAttribute(props);
+    return (0, react_1.useEffect)((() => {
+        buttonRef.current.addEventListener("mouseenter", (() => {
+            disabled || (buttonRef.current.addState("hover", !0, !1), buttonRef.current.stage.renderNextFrame());
+        })), buttonRef.current.addEventListener("mouseleave", (() => {
+            disabled || (buttonRef.current.removeState("hover", !1), buttonRef.current.stage.renderNextFrame());
+        }));
+    })), (0, react_1.useEffect)((() => {
+        disabled ? (buttonRef.current.removeState("disabled", !1), buttonRef.current.addState("disabled", !0, !1)) : buttonRef.current.removeState("disabled", !1), 
+        buttonRef.current.stage.renderNextFrame();
+    })), react_1.default.createElement(tag_1.Tag, {
+        ref: buttonRef,
+        attribute: attribute,
+        onClick: handleClick
+    });
+}
+
+function getTagAttribute(props) {
+    var _a, _b, _c, _d;
+    const {textStyle: textStyle, padding: padding, panelStyle: panelStyle, minWidth: minWidth, maxWidth: maxWidth, visible: visible, cursor: cursor, disabled: disabled, 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
+            }
+        }
+    };
+}
+
+exports.Button = react_1.default.forwardRef(ButtonComponent), exports.Button.displayName = "Button";
+//# sourceMappingURL=button.js.map

package/cjs/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/button/button.tsx"],"names":[],"mappings":"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","file":"button.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 ButtonStateStyle {\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 ButtonProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: ButtonStateStyle;\n  disabled?: boolean;\n  cursor?: Cursor;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: ButtonProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: '#FFF'\n  },\n  panelStyle: {\n    visible: true,\n    fill: '#165dff',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 10,\n  // cursor: 'pointer',\n  state: {\n    panelStyle: {\n      hover: {\n        fill: '#4080ff'\n      },\n      disabled: {\n        fill: '#94bfff'\n      }\n    }\n  }\n};\n\nfunction ButtonComponent(baseProps: ButtonProps, ref: React.Ref<Tag>) {\n  const props: ButtonProps = merge({}, defaultProps, baseProps);\n  const { disabled, onClick } = props;\n  let buttonRef = React.useRef<Tag>(null);\n  buttonRef = ref ? (ref as React.RefObject<Tag>) : buttonRef;\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    },\n    [disabled, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    buttonRef.current.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', buttonRef.current, e.clone());\n      if (!disabled) {\n        buttonRef.current.addState('hover', true, false);\n        // buttonRef.current._bgRect.addState('hover', true, false);\n        // buttonRef.current._textShape.addState('hover', true, false);\n        buttonRef.current.stage.renderNextFrame();\n      }\n    });\n    buttonRef.current.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', buttonRef.current, e.clone());\n      if (!disabled) {\n        buttonRef.current.removeState('hover', false);\n        // buttonRef.current._bgRect.removeState('hover', false);\n        // buttonRef.current._textShape.removeState('hover', false);\n        buttonRef.current.stage.renderNextFrame();\n      }\n    });\n  });\n\n  useEffect(() => {\n    if (disabled) {\n      buttonRef.current.removeState('disabled', false);\n      // buttonRef.current._bgRect.removeState('disabled', false);\n      // buttonRef.current._textShape.removeState('disabled', false);\n\n      buttonRef.current.addState('disabled', true, false);\n      // buttonRef.current._bgRect.addState('disabled', true, false);\n      // buttonRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      buttonRef.current.removeState('disabled', false);\n      // buttonRef.current._bgRect.removeState('disabled', false);\n      // buttonRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    buttonRef.current.stage.renderNextFrame();\n  });\n\n  return <VTag ref={buttonRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: ButtonProps) {\n  const { textStyle, padding, panelStyle, minWidth, maxWidth, visible, cursor, disabled, state, children } = 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  };\n\n  return attr;\n}\n\nexport const Button = React.forwardRef<Tag, ButtonProps>(ButtonComponent);\n\nButton.displayName = 'Button';\n"]}

package/cjs/components/checkbox/checkbox.d.ts

@@ -0,0 +1,17 @@
+import type { Cursor, CheckboxAttributes } from 'k-vtable/es/vrender';
+import React from 'react';
+export interface CheckboxProps {
+    children?: string;
+    textStyle?: CheckboxAttributes['text'];
+    boxStyle?: CheckboxAttributes['box'];
+    iconStyle?: CheckboxAttributes['icon'];
+    checked?: boolean;
+    indeterminate?: boolean;
+    interactive?: boolean;
+    disabled?: boolean;
+    disableCursor?: Cursor;
+    spaceBetweenTextAndIcon?: number;
+    visible?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<VRenderCheckbox>>;

package/cjs/components/checkbox/checkbox.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+}, __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;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Checkbox = void 0;
+
+const checkbox_1 = require("../vrender-components/checkbox"), vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), defaultProps = {};
+
+function CheckboxComponent(baseProps, ref) {
+    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {textStyle: textStyle, boxStyle: boxStyle, iconStyle: iconStyle, children: children} = props, rest = __rest(props, [ "textStyle", "boxStyle", "iconStyle", "children" ]);
+    let checkboxRef = react_1.default.useRef(null);
+    checkboxRef = ref || checkboxRef;
+    const handleChange = (0, react_1.useCallback)((event => {
+        props.onChange && props.onChange(event.target.attribute.checked);
+    }), []);
+    return (0, react_1.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_1.default.createElement(checkbox_1.Checkbox, Object.assign({
+        ref: checkboxRef,
+        attribute: Object.assign({
+            text: Object.assign(Object.assign({}, textStyle), {
+                text: children
+            }),
+            box: boxStyle,
+            icon: iconStyle
+        }, rest)
+    }, rest));
+}
+
+exports.Checkbox = react_1.default.forwardRef(CheckboxComponent), exports.Checkbox.displayName = "Checkbox";
+//# sourceMappingURL=checkbox.js.map

package/cjs/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/checkbox/checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,6DAAuE;AACvE,6CAAyC;AACzC,+CAAsD;AAiBtD,MAAM,YAAY,GAAkB,EAAE,CAAC;AAEvC,SAAS,iBAAiB,CAAC,SAAwB,EAAE,GAA+B;IAClF,MAAM,KAAK,GAAkB,IAAA,cAAK,EAAC,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,eAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IACtD,WAAW,GAAG,GAAG,CAAC,CAAC,CAAE,GAAwC,CAAC,CAAC,CAAC,WAAW,CAAC;IAE5E,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,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,IAAA,iBAAS,EAAC,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,8BAAC,mBAAS,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;AAEY,QAAA,QAAQ,GAAG,eAAK,CAAC,UAAU,CAAiC,iBAAiB,CAAC,CAAC;AAE5F,gBAAQ,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/cjs/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/cjs/components/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./button/button"), exports), __exportStar(require("./link/link"), exports), 
+__exportStar(require("./avatar/avatar"), exports), __exportStar(require("./popover/popover"), exports), 
+__exportStar(require("./tag/tag"), exports), __exportStar(require("./radio/radio"), exports), 
+__exportStar(require("./checkbox/checkbox"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAGA,kDAAgC;AAChC,8CAA4B;AAC5B,kDAAgC;AAChC,oDAAkC;AAClC,4CAA0B;AAC1B,gDAA8B;AAC9B,sDAAoC","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/cjs/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/cjs/components/link/link.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Link = void 0;
+
+const tag_1 = require("../vrender-components/tag"), vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), 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 = (0, vutils_1.merge)({}, defaultProps, baseProps), {disabled: disabled, href: href, onClick: onClick} = props;
+    let linkRef = react_1.default.useRef(null);
+    linkRef = ref || linkRef;
+    const handleClick = react_1.default.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 (0, react_1.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());
+        }));
+    }), []), (0, react_1.useEffect)((() => {
+        disabled ? (linkRef.current.removeState("disabled", !1), linkRef.current.addState("disabled", !0, !1)) : linkRef.current.removeState("disabled", !1), 
+        linkRef.current.stage.renderNextFrame();
+    })), react_1.default.createElement(tag_1.Tag, {
+        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"
+        }
+    };
+}
+
+exports.Link = react_1.default.forwardRef(LinkComponent), exports.Link.displayName = "Link";
+//# sourceMappingURL=link.js.map