jrs-react 1.2.13 → 1.2.15

package/build/index.es.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import styled from 'styled-components';
+import { createRoot } from 'react-dom/client';
 
 function bind(fn, thisArg) {
   return function wrap() {
@@ -3475,7 +3476,7 @@ class JRSubmit extends React__default.Component {
   }
   setRawValue(rawValue) {
     this.setState({
-      rawValue: JSON.parse(JSON.stringify(rawValue ?? ''))
+      rawValue: rawValue != null ? JSON.parse(JSON.stringify(rawValue)) : null
     });
   }
   reset() {
@@ -3483,8 +3484,6 @@ class JRSubmit extends React__default.Component {
   }
   setValue(value, reset = false) {
     if (this.props.onChange) {
-      po('name', this.props.name);
-      po('onChange', value);
       this.props.onChange(value);
     } else {
       this.setState({
@@ -3708,7 +3707,7 @@ const StyledJRFrame$1 = styled.div`
     >main{
         display:flex;
         flex:1;
-        overflow:overlay;
+        overflow:hidden;
         flex-direction: column;
         > *{
             XXborder:1px solid gray;
@@ -3723,6 +3722,13 @@ const StyledJRFrame$1 = styled.div`
             display:flex;
             flex:1;
             overflow:hidden;
+
+            >main{
+                display:flex;
+                flex:1;
+                overflow: overlay;
+            }
+
         }
         >footer{
             XXborder:1px solid  blue;
@@ -3730,11 +3736,11 @@ const StyledJRFrame$1 = styled.div`
         }
 
     }
-
 `;
 class JRFrame extends JRSubmit {
   renderer() {
     return /*#__PURE__*/React__default.createElement(StyledJRFrame$1, {
+      id: this.props.id,
       style: this.props.style,
       className: `${this.props.className} jr-frame`
     }, /*#__PURE__*/React__default.createElement(FreeType$1, {
@@ -3751,7 +3757,9 @@ class JRFrame extends JRSubmit {
       config: this.props.left,
       me: this,
       className: 'left'
-    }), this.renderMe?.() ?? this.props.children, /*#__PURE__*/React__default.createElement(FreeType$1, {
+    }), /*#__PURE__*/React__default.createElement("main", {
+      className: 'body'
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default.createElement(FreeType$1, {
       tag: "div",
       config: this.props.right,
       me: this,
@@ -3767,1967 +3775,2233 @@ class JRFrame extends JRSubmit {
       className: 'end'
     }));
   }
-  // renderMe(){
-  //     return <div style={{flex:1}}>Render me</div>
-  // }
 }
 
-const StyledSlider$1 = styled.div`
-    position: absolute;
-    top: 0;
-    right: 0;
-    height:100%;
-    width:6px;
+var _path;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+var SvgX = function SvgX(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M18 6 6 18M6 6l12 12"
+  })));
+};
+
+function JRButton({
+  icon,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/React__default.createElement("button", props, icon, children);
+}
+
+const StyledTitle = styled.div`
+    overflow: hidden;
+    display: flex;
+    border-radius: var(--jr-window-radius) var(--jr-window-radius) 0 0;
+    background:#464646;
+    color: white;
+    display: flex;
+    align-items: center;
+    min-height: min-content;
+    XX&:active{
+        cursor: grabbing;
+    }
+    
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
     user-select: none;
-    &.resizing:hover,&.resizing{
-        border-right:1px dashed black;
+
+    > .title{
+
+        flex: 1;
+        padding:2px 0 2px 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
     }
-    &:hover{
-        cursor: col-resize;
-        border-right:1px dashed gray;
+    > nav{
+        display: flex;
+        align-items: anchor-center;
+
+
+        >button{
+            outline: unset;
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            border: unset;
+            background: unset;
+            cursor: pointer;
+            width:32px;
+            height:32px;
+            xborder:1px solid green;
+            padding: 0;
+            margin: 0;
+            &:hover{
+                background: #bbbbbb;
+                color:white;
+            }
+            >svg{
+                color:#bababa;
+                width:14px;
+                height:14px;
+                cursor: pointer;
+                stroke-width: 3;
+            }
+        }
+        >button.danger:hover{
+            background: red;
+            >svg{
+                color:white;
+            }
+        } 
     }
 `;
-class Slider$1 extends React__default.Component {
-  constructor() {
-    super();
-    this.sliderRef = /*#__PURE__*/React__default.createRef();
-  }
+class TitleBar extends React__default.Component {
+  pos1 = 0;
+  pos2 = 0;
+  pos3 = 0;
+  pos4 = 0;
+  x = 0;
+  y = 0;
+  remember = e => {
+    po('remember');
+    const {
+      clientX,
+      clientY
+    } = e;
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    this.props.window.orgHeight = height;
+    this.props.window.orgWidth = width;
+    this.props.window.orgTop = y;
+    this.props.window.orgLeft = x;
+    this.props.window.orgXd = clientX - x;
+    this.props.window.orgBodyOverflow = document.body.style.overflow;
+  };
+  adjustScreen = e => {
+    po('double click adjustScreen');
+    e.preventDefault();
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    if (y > 1 - this.props.thick) {
+      this.remember(e);
+      this.fullScreen(e);
+    } else {
+      this.floatScreen(e);
+    }
+  };
+  floatScreen = e => {
+    po('floatScreen');
+    this.props.windowRef.current;
+    this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .05s ease-in';
+    this.props.windowRef.current.style.left = `${this.props.window.orgLeft}px`;
+    this.props.windowRef.current.style.top = `${this.props.window.orgTop}px`;
+    this.props.windowRef.current.style.width = `${this.props.window.orgWidth}px`;
+    this.props.windowRef.current.style.height = `${this.props.window.orgHeight}px`;
+    document.body.style.overflow = this.props.window.orgBodyOverflow;
+  };
+  fullScreen = e => {
+    po('fullScreen', this.props.thick);
+    this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .05s ease-in';
+    this.props.windowRef.current.style.left = `${-this.props.thick}px`;
+    this.props.windowRef.current.style.top = `${-this.props.thick}px`;
+    this.props.windowRef.current.style.width = `calc(100vw + ${this.props.thick * 2}px)`; //`${window.innerWidth+(this.props.thick*2)}px`
+    this.props.windowRef.current.style.height = `calc(100vh + ${this.props.thick * 2}px)`; //`${window.innerHeight+(this.props.thick*2)}px`
+
+    setTimeout(() => {
+      document.body.style.overflow = 'hidden';
+      this.props.windowRef.current.style.transition = 'unset';
+    }, 50);
+  };
   stop = e => {
-    this.sliderRef.current.classList.remove('resizing');
+    po('stop');
+    e.preventDefault();
+    if (this.moved) {
+      const {
+        height: titleBarHeight
+      } = this.props.titleBarRef.current.getBoundingClientRect();
+      const {
+        x,
+        y,
+        width,
+        height
+      } = this.props.windowRef.current.getBoundingClientRect();
+      if (y < 1 - this.props.thick) this.fullScreen(e);
+      if (y > window.innerHeight - titleBarHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
+      if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
+      if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
+    }
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
     window.removeEventListener('mouseup', this.stop);
+    window.removeEventListener('mousemove', this.preMove);
   };
-  move = ({
-    clientX
-  }) => {
+  move = e => {
+    po('move');
+    e.preventDefault();
+    this.moved = true;
     const {
-      th,
-      selectedCols,
-      widthRates
-    } = this.data;
+      clientX,
+      clientY
+    } = e;
+    const y = clientY < 1 ? 0 : clientY;
+    this.pos1 = this.pos3 - clientX;
+    this.pos2 = this.pos4 - y;
+    this.pos3 = clientX;
+    this.pos4 = y;
+    const w = this.props.windowRef.current;
+    this.y = w.offsetTop - this.pos2;
+    this.x = w.offsetLeft - this.pos1;
+
+    // if(this.props.window.orgWidth){
+    //     w.style.width=`${this.props.window.orgWidth}px`
+    //     this.props.window.orgWidth=null
+    // }
+
+    this.y = this.y < -this.props.thick ? -this.props.thick : this.y;
+    w.style.transition = 'unset';
+    w.style.top = `${this.y}px`;
+    w.style.left = `${this.x}px`;
+  };
+  preMove = e => {
+    console.clear();
+    po('preMove');
+    const w = this.props.windowRef.current;
     const {
-      left
-    } = th.getBoundingClientRect();
-    const min = left + 10;
-    const x = clientX >= min ? clientX : min;
-    const width = x - left;
-    selectedCols.forEach((col, index) => {
-      const _width = Math.round(width / 100 * widthRates[index]);
-      col.style.width = _width + 'px';
-    });
+      clientX,
+      clientY,
+      ...oe
+    } = e;
+    po('e', e);
+    const {
+      x,
+      y,
+      width,
+      height
+    } = w.getBoundingClientRect();
+    po('width', width);
+    if (y <= -this.props.thick) ;
+    w.style.transition = 'left .05s ease-in, height .05s ease-in';
+    if (y <= 0) {
+      // contt browserWidth=
+      const w1 = window.innerWidth - this.props.thick * 2;
+      const x1 = clientX;
+      const w2 = this.props.window.orgWidth - 32;
+      const x2 = x1 / w1 * w2;
+      // po('xp'   , x2)
+      w.style.left = `${clientX - x2}px`;
+      w.style.width = `${this.props.window.orgWidth}px`;
+      w.style.height = `${this.props.window.orgHeight}px`;
+    } else {
+      this.remember(e);
+    }
+    document.body.style.cursor = 'grabbing';
+    document.body.style.overflow = this.props.window.orgBodyOverflow;
+    setTimeout(() => {
+      window.addEventListener('mousemove', this.move);
+    }, 50);
+    window.removeEventListener('mousemove', this.preMove);
   };
-  start(thPRef, column) {
-    const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
-    const totalWidth = selectedCols.reduce((aco, {
-      offsetWidth
-    }) => aco + offsetWidth, 0);
-    const widthRates = selectedCols.map(({
-      offsetWidth
-    }) => {
-      return 100 * (offsetWidth / totalWidth);
-    });
-    this.data = {
-      selectedCols,
-      th: thPRef.current,
-      widthRates
-    };
-    this.sliderRef.current.classList.add('resizing');
-    document.body.style.cursor = 'col-resize';
-    window.addEventListener('mousemove', this.move);
+  start(e) {
+    po('start');
+    e.preventDefault();
+    this.moved = false;
+    this.pos3 = e.clientX;
+    this.pos4 = e.clientY;
+    this.props.windowRef.current.style.transition = 'var(--transition-x-y)';
+    window.addEventListener('mousemove', this.preMove);
     window.addEventListener('mouseup', this.stop);
   }
+  onDoubleClick() {
+    po('onDoubleClick');
+  }
   render() {
-    const column = this.props.column;
-    return /*#__PURE__*/React__default.createElement(StyledSlider$1, {
-      ref: this.sliderRef,
+    return /*#__PURE__*/React__default.createElement(StyledTitle, {
+      ref: this.props.titleBarRef,
+      draggable: "false",
       onMouseDown: e => {
-        this.start(this.props.thRef, column);
+        this.start(e);
+      },
+      onDoubleClick: this.adjustScreen
+    }, /*#__PURE__*/React__default.createElement(FreeType$1, {
+      tag: "div",
+      config: this.props.title ?? '',
+      me: this.props.window,
+      className: 'title'
+    }), /*#__PURE__*/React__default.createElement("nav", null, this.props.window.props.setOpen ? /*#__PURE__*/React__default.createElement(JRButton, {
+      icon: /*#__PURE__*/React__default.createElement(SvgX, null),
+      className: 'danger',
+      onClick: e => {
+        e.stopPropagation();
+        if (this.props.window.orgBodyOverflow != null) {
+          document.body.style.overflow = this.props.window.orgBodyOverflow;
+        }
+        this.props.window.props.setOpen(false);
+      },
+      onMouseDown: e => {
+        e.stopPropagation();
       }
-    });
+    }) : null));
   }
 }
 
-const Colgroup = ({
-  leafColumns,
-  colGroupRef
-}) => {
-  return /*#__PURE__*/React__default.createElement("colgroup", {
-    ref: colGroupRef
-  }, leafColumns?.map((_column, index) => {
-    const {
-      width,
-      ...column
-    } = _column;
-    const style = {
-      width
-    };
-    return /*#__PURE__*/React__default.createElement("col", {
-      style: style,
+const directions = ['n', 'e', 's', 'w', 'nww', 'nnw', 'nne', 'nee', 'sse', 'see', 'sww', 'ssw'];
+class Sliders extends React__default.Component {
+  render() {
+    return directions.map((direction, index) => /*#__PURE__*/React__default.createElement(Slider$1, {
+      direction: direction,
+      thick: this.props.thick,
+      windowRef: this.props.windowRef,
+      window: this.props.window,
+      titleBarRef: this.props.titleBarRef,
       key: index
-    });
-  }));
-};
-const Ths$1 = ({
-  deep,
-  rowColumn,
-  rowIndex,
-  table
-}) => {
-  return rowColumn?.map((column, colIndex) => {
-    const thRef = /*#__PURE__*/React__default.createRef();
-    return /*#__PURE__*/React__default.createElement("th", {
-      key: colIndex,
-      ref: thRef,
-      colSpan: column.colSpan,
-      rowSpan: column.rowSpan ?? (column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null)
-    }, flexType(column.label, table), table.props.resizableColumns === true && /*#__PURE__*/React__default.createElement(Slider$1, {
-      table: table,
-      thRef: thRef,
-      column: column
-    }));
-  });
-};
-const HeadTrs = ({
-  columns: _columns,
-  trClassName,
-  table
-}) => {
-  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
-  return columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React__default.createElement("tr", {
-      className: trClassName,
-      key: rowIndex
-    }, /*#__PURE__*/React__default.createElement(Ths$1, {
-      deep: columns.length - 1,
-      rowColumn: rowColumn,
-      rowIndex: rowIndex,
-      table: table
-    }));
-  });
-};
-const THead = ({
-  columns,
-  leafColumns,
-  table
-}) => {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement(HeadTrs, {
-    columns: columns,
-    table: table
-  })), /*#__PURE__*/React__default.createElement(Colgroup, {
-    leafColumns: leafColumns,
-    colGroupRef: table.colGroupRef
-  }));
-};
-const FootThs = ({
-  table,
-  groupData,
-  groupIndex,
-  deep,
-  columns,
-  rowIndex
-}) => {
-  return columns?.map((column, colIndex) => {
-    // let content
-    // if(type){
-    //     content='type'
-    // }else if(render){
-
-    //     content=render?.bind(table)({groupData,groupIndex,ths:111})
-    // }else{
-    //     content=column.label
-    // }
-    let style = flexType(column.style, table, {}, {});
-    const content = whatType(column, table, column.label);
-    return /*#__PURE__*/React__default.createElement("th", {
-      style: style,
-      colSpan: column.colSpan,
-      rowSpan: column.rowSpan
-    }, content);
-  });
-};
-const TFoot = ({
-  table,
-  columns
-}) => {
-  const trs = columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React__default.createElement("tr", {
-      key: rowIndex
-    }, /*#__PURE__*/React__default.createElement(FootThs, {
-      columns: rowColumn,
-      table: table
     }));
-  });
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tfoot", null, trs));
-};
-
-function _extends$1() {
-  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$1.apply(null, arguments);
+  }
 }
+const StyledSlider$1 = styled.div`
+    Xborder:1px solid ${({
+  $direction: {
+    color
+  }
+}) => color}; 
+    Xbackground:${({
+  $direction: {
+    color
+  }
+}) => color};
+    position: absolute;
+    top: ${({
+  $direction: {
+    top
+  }
+}) => top};
+    bottom: ${({
+  $direction: {
+    bottom
+  }
+}) => bottom};
+    right: ${({
+  $direction: {
+    right
+  }
+}) => right};
+    left: ${({
+  $direction: {
+    left
+  }
+}) => left};
+    height: ${({
+  $direction: {
+    height
+  }
+}) => height};
+    width: ${({
+  $direction: {
+    width
+  }
+}) => width};
+    cursor: ${({
+  $direction: {
+    cursor
+  }
+}) => cursor};
 
-styled.tbody`
-    th{
-        height:4px;
-        background:#c6c6c6;
-    }
-`;
-
-////////////////////////////////////////////////////////////////////////////
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
 
-const Ths = ({
-  table,
-  groupData,
-  groupIndex,
-  deep,
-  rowColumn,
-  rowIndex
-}) => {
-  return rowColumn?.map(({
-    style: _style,
-    align,
-    type,
-    render,
-    ...column
-  }, colIndex) => {
-    const style = flexType(_style, table, {}, {});
-    let content;
-    if (type) {
-      content = 'type';
-    } else if (render) {
-      content = render?.bind(table)({
-        groupData,
-        groupIndex,
-        ths: 111
-      });
-    } else {
-      content = column.label;
-    }
-    // style.textAlign=align
-    return /*#__PURE__*/React__default.createElement("th", {
-      key: colIndex,
-      style: {
-        textAlign: align,
-        ...style
-      },
-      colSpan: column.colSpan,
-      rowSpan: column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null
-    }, content);
-  });
-};
-const GroupColumns = ({
-  table,
-  columns: _columns,
-  trClassName,
-  groupData,
-  tbodyIndex
-}) => {
-  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
-  return columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React__default.createElement("tr", {
-      className: trClassName,
-      key: rowIndex
-    }, /*#__PURE__*/React__default.createElement(Ths, {
-      table: table,
-      groupData: groupData,
-      groupIndex: tbodyIndex,
-      deep: columns.length - 1,
-      rowColumn: rowColumn,
-      rowIndex: rowIndex
-    }));
-  });
-};
-styled.tr`
-    z-index: 1;
-    XXposition: sticky;
-    XXtop: 50px;
-    th{
-        text-align: left;
-        border:1px solid #222222;
-    }
 `;
-const GroupHeader = props => {
-  return /*#__PURE__*/React__default.createElement(GroupColumns, _extends$1({
-    trClassName: 'jr-group-header'
-  }, props));
-};
-styled.tr`
-    th{
-        border:1px solid #222222;
-        text-align: left;
-    }
-`;
-const GroupFooter = props => {
-  return /*#__PURE__*/React__default.createElement(GroupColumns, _extends$1({
-    trClassName: 'jr-group-footer'
-  }, props));
-};
-
-////////////////////////////////////////////////////////////////////////////
-const Td = ({
-  column: _column,
-  record,
-  tbodyIndex,
-  trIndex,
-  tdIndex,
-  table
-}) => {
-  let content;
-  const {
-    style: _style,
-    align,
-    vAlign = 'baseline',
-    type,
-    typeStyle: _typeStyle,
-    render,
-    setValue,
-    getValue,
-    onChange: _onChange,
-    funcProps,
-    ...column
-  } = _column;
-  const onChange = inputValue => {
-    const targetValue = inputValue?.target?.value ?? inputValue;
-    setValue(record, targetValue);
-    table.setValue(table.getValue());
-  };
-  const value = getValue(record);
-  let style = render ? {} : flexType(_style, table, {
-    value,
-    record
-  }, {});
-  const setStyle = _style => {
-    style = _style;
-  };
-  setStyle.bind(table);
-  render?.bind(table);
-  if (type) {
-    const typeStyle = flexType(_typeStyle, table, {
-      record
-    }, {});
-    content = /*#__PURE__*/React__default.createElement(type, {
-      onChange: _onChange ? e => {
-        _onChange?.bind(table)(e, {
-          value,
-          onChange,
-          me: content
-        });
-      } : onChange,
-      value,
-      style: typeStyle,
-      render,
-      ...column,
-      ...funcProps?.bind(table)({
-        value
-      })
-    });
-  } else if (render) {
-    content = render({
-      index: trIndex,
-      groupIndex: tbodyIndex,
-      value,
-      record,
-      onChange,
-      setStyle
-    });
-  } else {
-    content = value;
+class Slider$1 extends React__default.Component {
+  width = '3px';
+  borderWidth = 'px';
+  borderLong = 5;
+  constructor(props) {
+    super(props);
+    this.sliderRef = /*#__PURE__*/React__default.createRef();
   }
-  return /*#__PURE__*/React__default.createElement("td", {
-    colSpan: style.colSpan,
-    rowSpan: style.rowSpan,
-    style: {
-      textAlign: align,
-      verticalAlign: vAlign,
-      ...style
+  directions = {
+    n: {
+      top: 0,
+      color: 'red',
+      width: '100%',
+      height: `${this.props.thick}px`,
+      cursor: 'n-resize',
+      resize: props => {
+        this.resizeN(props);
+      }
     },
-    key: tdIndex
-  }, content);
-};
-const Tds = ({
-  leafColumns,
-  record,
-  table,
-  tbodyIndex,
-  trIndex
-}) => {
-  return leafColumns?.map((column, tdIndex) => {
-    return /*#__PURE__*/React__default.createElement(Td, {
-      column: column,
-      key: tdIndex,
-      record: record,
-      table: table,
-      tbodyIndex: tbodyIndex,
-      trIndex: trIndex,
-      tdIndex: tdIndex
-    });
-  });
-};
-////////////////////////////////////////////////////////////////////////////
-
-const TBody = ({
-  groupData,
-  groupHeader,
-  leafColumns,
-  groupFooter,
-  table,
-  tbodyIndex
-}) => {
-  const neededProps = {
-    table,
-    tbodyIndex
-  };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tbody", {
-    key: `tbody${tbodyIndex}`
-  }, groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupHeader, _extends$1({
-    groupData: groupData,
-    columns: groupHeader
-  }, neededProps)), groupData?.map?.((record, trIndex) => {
-    const onRowClick = table.props.onRowClick?.bind(table);
-    return /*#__PURE__*/React__default.createElement("tr", {
-      key: trIndex,
-      onClick: () => {
-        onRowClick?.({
-          record,
-          index: trIndex,
-          groupIndex: tbodyIndex
-        });
+    e: {
+      color: 'yellow',
+      right: 0,
+      width: `${this.props.thick}px`,
+      height: '100%',
+      cursor: 'e-resize',
+      resize: props => {
+        this.resizeE(props);
+      }
+    },
+    s: {
+      color: 'blue',
+      bottom: 0,
+      width: '100%',
+      height: `${this.props.thick}px`,
+      cursor: 's-resize',
+      resize: props => {
+        this.resizeS(props);
+      }
+    },
+    w: {
+      color: 'green',
+      left: 0,
+      width: `${this.props.thick}px`,
+      height: '100%',
+      cursor: 'w-resize',
+      resize: props => {
+        this.resizeW(props);
+      }
+    },
+    nw: {
+      top: 0,
+      left: 0,
+      color: 'blue',
+      width: `${this.borderLong}px`,
+      height: `${this.borderLong}px`,
+      cursor: 'nw-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeW(props);
+      }
+    },
+    nww: {
+      top: 0,
+      left: 0,
+      color: 'blue',
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
+      cursor: 'nw-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeW(props);
+      }
+    },
+    nnw: {
+      top: 0,
+      left: 0,
+      color: 'blue',
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
+      cursor: 'nw-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeW(props);
+      }
+    },
+    nne: {
+      top: 0,
+      right: 0,
+      color: 'green',
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
+      cursor: 'ne-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeE(props);
+      }
+    },
+    nee: {
+      top: 0,
+      right: 0,
+      color: 'green',
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
+      cursor: 'ne-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeE(props);
+      }
+    },
+    sse: {
+      color: 'red',
+      right: 0,
+      bottom: 0,
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
+      cursor: 'se-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeE(props);
+      }
+    },
+    see: {
+      color: 'red',
+      right: 0,
+      bottom: 0,
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
+      cursor: 'se-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeE(props);
+      }
+    },
+    ssw: {
+      color: 'yellow',
+      bottom: 0,
+      left: 0,
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
+      cursor: 'sw-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeW(props);
+      }
+    },
+    sww: {
+      color: 'yellow',
+      bottom: 0,
+      left: 0,
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
+      cursor: 'sw-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeW(props);
       }
-    }, /*#__PURE__*/React__default.createElement(Tds, _extends$1({
-      record: record,
-      trIndex: trIndex
-    }, neededProps, {
-      leafColumns: leafColumns
-    })));
-  }), groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupFooter, _extends$1({
-    groupData: groupData,
-    columns: groupFooter
-  }, neededProps))));
-};
-const TBodies = ({
-  groupHeader,
-  leafColumns,
-  groupFooter,
-  dataSource: _dataSource,
-  table
-}) => {
-  // po('--TBodies--')
-  const isGroupDataType = Array.isArray(_dataSource?.[0]);
-  const dataSource = isGroupDataType ? _dataSource : [_dataSource];
-
-  // po('dataSource',dataSource)    
-  return dataSource?.map((groupData, tbodyIndex, c) => {
-    return /*#__PURE__*/React__default.createElement(TBody, {
-      key: `tbody${tbodyIndex}`,
-      table: table
-      // dataSource={dataSource}
-      // dataGroup={groupData} 
-      ,
-      groupData: groupData,
-      tbodyIndex: tbodyIndex,
-      groupHeader: groupHeader,
-      leafColumns: leafColumns,
-      groupFooter: groupFooter
-    });
-  });
-};
-
-const StyledJRTable = styled.div`
-    --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
-    --column-b-hover-color:#ffffff;
-
-    position: relative;
-    background: var(--column-b-color);
-    border:1px solid var(--column-bd-color);
-
-    display:flex;
-    flex-direction: column;
-    flex:1;
-    overflow: overlay;
-
-
-
-
-    &.row-highlightable{
-        tbody{
-            tr:not(.jr-group-header,.jr-group-footer):hover{
-                background:var(--column-b-hover-color);
-                cursor: pointer;
-                transition:  background-color .8s;
-                td{
-                    color:black;
-                    transition:color .8s;
-                }
-
-            }
-        }
-    }
-
-    table{
-        Xheight: 100%;
-        min-width:100%;
-        width: max-content;
-        border-spacing: 0;
-
-        thead{
-            position: sticky;
-            top: 0;
-
-            th{
-                position: relative;
-                padding: 2px 6px;
-                background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
-                box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
-                color: #525252;
-                white-space: nowrap;
-            }
-        }
-
-        tfoot{
-            position: sticky;
-            bottom: -1px;
-
-            Xtr:nth-child(1){
-                th{
-                    Xborder-top:1px solid var(--column-bd-color);
-                }
-            }
-            Xth:nth-child(1){
-                Xborder-left:1px solid var(--column-bd-color);
-            }
-                
-            th{
-                height:32px;
-                padding: 4px;
-                background: #e4e4e4;
-                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
-                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
-                color: #525252;
-                white-space: nowrap;
-
-                border-left:2px solid #f4f4f4;
-                border-top:2px solid #f4f4f4;
-                border-right:2px solid var(--column-bd-color);
-                border-bottom:2px solid var(--column-bd-color);
-            }
-        }
-
-        tbody{
-            tr{
-                transition: background .3s linear;
-                background:var(--column-b-color);
-                a:#ededed;
-                th{
-                    color:#444444;
-                }
-                td{
-                    border-bottom: 1px solid var(--column-bd-color);
-                    color:#2e2e2e;
-                    padding: 4px;
-                }
-            }
-            tr:hover{
-                background:var(--column-b-hover-color);
-                
-            }
-            
-            tr.jr-group-header
-            ,tr.jr-group-footer{
-                text-align:left;
-                background:#dddbdb;
-
-                th{
-                    border-bottom: 1px solid var(--column-bd-color);
-                    border-right: 1px solid var(--column-bd-color);
-                    padding: 4px 8px;
-                }
-            }
-        }
-        tbody.empty-tbody{
-            td{
-                border:10px solid red;
-            }
-        }
-    } 
-        
-    
-
-
-    > .empty{
-        user-select: none;
-        color:#848484;
-        height:100%;
-        flex:1;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-    }    
-`;
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var SvgX = function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M18 6 6 18M6 6l12 12"
-  })));
-};
-
-function JRButton({
-  icon,
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/React__default.createElement("button", props, icon, children);
-}
-
-const StyledTitle = styled.div`
-    overflow: hidden;
-    display: flex;
-    border-radius: var(--jr-window-radius) var(--jr-window-radius) 0 0;
-    background:rgb(214, 214, 214);
-    color: black;
-    &:active:hover{
-        cursor: grabbing;
     }
-    
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-
-    > .title{
-
-        flex: 1;
-        padding:2px 0 2px 8px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
+  };
+  resizeN = ({
+    window,
+    cursorY,
+    startY,
+    startHeight,
+    titleBarHeight
+  }) => {
+    let y = cursorY - this.props.thick;
+    if (y < 0) y = 0;
+    let height = startHeight + (startY - y);
+    if (height < titleBarHeight + this.props.thick * 2) {
+      height = titleBarHeight + this.props.thick * 2;
+      y = startY + startHeight - titleBarHeight - this.props.thick * 2;
     }
-    > nav{
-        display: flex;
-        align-items: anchor-center;
-
-
-        >button{
-            display:flex;
-            align-items: center;
-            justify-content: center;
-            border: unset;
-            background: unset;
-            cursor: pointer;
-            width:32px;
-            height:32px;
-            xborder:1px solid green;
-            padding: 0;
-            margin: 0;
-            &:hover{
-                background: #bbbbbb;
-                color:white;
-            }
-            >svg{
-                color:black;
-                width:14px;
-                height:14px;
-                cursor: pointer;
-            }
-        }
-        >button.danger:hover{
-            background: red;
-            >svg{
-                color:white;
-            }
-        } 
+    window.style.top = `${y}px`;
+    window.style.height = `${height}px`;
+  };
+  resizeE = ({
+    window,
+    clientX,
+    left,
+    titleBarHeight
+  }) => {
+    let width = clientX - left - this.props.thick;
+    if (width < titleBarHeight) width = titleBarHeight;
+    window.style.width = `${width + this.props.thick * 2}px`;
+  };
+  resizeS = ({
+    window,
+    clientY,
+    top,
+    titleBarHeight
+  }) => {
+    let height = clientY - top - this.props.thick;
+    if (height < titleBarHeight) height = titleBarHeight;
+    window.style.height = `${height + this.props.thick * 2}px`;
+  };
+  resizeW = ({
+    window,
+    cursorX,
+    startX,
+    startWidth,
+    titleBarHeight
+  }) => {
+    let x = cursorX - this.props.thick;
+    if (x < 0) x = 0;
+    let width = startWidth + (startX - x);
+    if (width < titleBarHeight + this.props.thick * 2) {
+      width = titleBarHeight + this.props.thick * 2;
+      x = startX + startWidth - titleBarHeight - this.props.thick * 2;
     }
-`;
-class TitleBar extends React__default.Component {
-  pos1 = 0;
-  pos2 = 0;
-  pos3 = 0;
-  pos4 = 0;
-  x = 0;
-  y = 0;
-  stop = e => {
-    e.preventDefault();
-    if (this.moved) {
-      const {
-        clientX,
-        clientY
-      } = e;
-      const {
-        height: titleBarHeight
-      } = this.props.titleBarRef.current.getBoundingClientRect();
-      const {
-        x,
-        y,
-        width,
-        height
-      } = this.props.windowRef.current.getBoundingClientRect();
-      if (y < 1) {
-        this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .1s ease-in';
-        this.props.windowRef.current.style.left = `${-this.props.thick}px`;
-        this.props.windowRef.current.style.width = `calc(100vw + ${this.props.thick * 2}px)`; //`${window.innerWidth+(this.props.thick*2)}px`
-        this.props.windowRef.current.style.height = `calc(100vh + ${this.props.thick * 2}px)`; //`${window.innerHeight+(this.props.thick*2)}px`
-
-        this.props.window.orgHeight = height;
-        this.props.window.orgWidth = width;
-        this.props.window.orgXd = clientX - x;
-      }
-      if (y > window.innerHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
-      if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
-      if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
-      document.body.style.cursor = 'default';
+    window.style.left = `${x}px`;
+    window.style.width = `${width}px`;
+  };
+  stop = e => {
+    e.preventDefault();
+    const {
+      height: titleBarHeight
+    } = this.props.titleBarRef.current.getBoundingClientRect();
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    this.props.windowRef.current.style.transition = 'var(--transition-x-y)';
+    if (y == 0 && this.data.direction.indexOf('n') > -1) {
+      this.props.window.orgHeight = height;
+      this.props.windowRef.current.style.height = `${window.innerHeight}px`;
     }
+    if (y > window.innerHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
+    if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
+    if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
+    document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
-    window.removeEventListener('mouseup', this.stop);
     window.removeEventListener('mousemove', this.preMove);
+    window.removeEventListener('mouseup', this.stop);
   };
   move = e => {
     e.preventDefault();
-    this.moved = true;
+    this.props.windowRef.current.style.transition = 'unset';
     const {
       clientX,
-      clientY
+      clientY,
+      x: cursorX,
+      y: cursorY
     } = e;
-    const y = clientY < 1 ? 0 : clientY;
-    this.pos1 = this.pos3 - clientX;
-    this.pos2 = this.pos4 - y;
-    this.pos3 = clientX;
-    this.pos4 = y;
-    const w = this.props.windowRef.current;
-    this.y = w.offsetTop - this.pos2;
-    this.x = w.offsetLeft - this.pos1;
-    if (this.props.window.orgWidth) {
-      if (clientX > this.props.window.orgWidth) {
-        this.x = clientX - this.props.window.orgWidth / 2;
-      }
-      w.style.width = `${this.props.window.orgWidth}px`;
-      this.props.window.orgWidth = null;
-    }
-    this.y = this.y < -this.props.thick ? -this.props.thick : this.y;
-    w.style.transition = 'unset';
-    w.style.top = `${this.y}px`;
-    w.style.left = `${this.x}px`;
-  };
-  preMove = e => {
-    const w = this.props.windowRef.current;
+    const window = this.props.windowRef.current;
     const {
+      left,
+      top
+    } = window.getBoundingClientRect();
+    let {
+      x: startX,
+      width: startWidth,
+      y: startY,
+      height: startHeight,
+      titleBarHeight
+    } = this.data;
+    this.directions[this.props.direction].resize({
+      window,
+      titleBarHeight,
       clientX,
-      clientY
-    } = e;
-    if (this.props.window.orgXd) {
-      w.style.left = `${clientX - this.props.window.orgXd}px`;
-      this.props.window.orgXd = null;
-    }
-    if (this.props.window.orgHeight) {
-      w.style.height = `${this.props.window.orgHeight}px`;
+      cursorX,
+      startX,
+      startWidth,
+      left,
+      clientY,
+      cursorY,
+      startY,
+      startHeight,
+      top
+    });
+  };
+  preMove = () => {
+    if (this.props.direction.indexOf('n') > -1) {
+      this.props.windowRef.current.style.height = `${this.props.window.orgHeight}px`;
+      this.data.height = this.props.window.orgHeight;
       this.props.window.orgHeight = null;
     }
-    w.style.transition = 'left .1s ease-in, height .1s ease-in';
+    window.removeEventListener('mousemove', this.preMove);
     setTimeout(() => {
       window.addEventListener('mousemove', this.move);
     }, 100);
-    window.removeEventListener('mousemove', this.preMove);
   };
-  start(e) {
+  start = (e, direction) => {
     e.preventDefault();
-    this.moved = false;
-    this.pos3 = e.clientX;
-    this.pos4 = e.clientY;
-    this.props.windowRef.current.style.transition = 'var(--transition-x-y)';
-    document.body.style.cursor = 'grabbing';
-    window.addEventListener('mousemove', this.preMove);
+    const {
+      height: titleBarHeight
+    } = this.props.titleBarRef.current.getBoundingClientRect();
+    let {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    if (this.props.direction.indexOf('s') > -1) {
+      this.props.window.orgHeight = null;
+    }
+    this.data = {
+      x,
+      y,
+      width,
+      height,
+      titleBarHeight,
+      direction
+    };
+    document.body.style.cursor = this.directions[this.props.direction].cursor;
+    if (this.props.window.orgHeight) {
+      window.addEventListener('mousemove', this.preMove);
+    } else {
+      window.addEventListener('mousemove', this.move);
+    }
     window.addEventListener('mouseup', this.stop);
-  }
+  };
   render() {
-    return /*#__PURE__*/React__default.createElement(StyledTitle, {
-      ref: this.props.titleBarRef,
-      draggable: "false",
+    return /*#__PURE__*/React__default.createElement(StyledSlider$1, {
+      $direction: this.directions[this.props.direction],
+      $padding: this.props.padding,
       onMouseDown: e => {
-        this.start(e);
-      }
-    }, /*#__PURE__*/React__default.createElement(FreeType$1, {
-      tag: "div",
-      config: this.props.title ?? '',
-      me: this.props.window,
-      className: 'title'
-    }), /*#__PURE__*/React__default.createElement("nav", null, this.props.window.props.setOpen ? /*#__PURE__*/React__default.createElement(JRButton, {
-      icon: /*#__PURE__*/React__default.createElement(SvgX, null),
-      className: 'danger',
-      onClick: () => {
-        this.props.window.props.setOpen(false);
+        this.start(e, this.props.direction);
       }
-    }) : null));
+    });
   }
 }
 
-const directions = ['n', 'e', 's', 'w', 'nww', 'nnw', 'nne', 'nee', 'sse', 'see', 'sww', 'ssw'];
-class Sliders extends React__default.Component {
-  render() {
-    return directions.map((direction, index) => /*#__PURE__*/React__default.createElement(Slider, {
-      direction: direction,
-      thick: this.props.thick,
-      windowRef: this.props.windowRef,
-      window: this.props.window,
-      titleBarRef: this.props.titleBarRef,
-      key: index
-    }));
-  }
-}
-const StyledSlider = styled.div`
-    Xborder:1px solid ${({
-  $direction: {
-    color
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
   }
-}) => color}; 
-    Xbackground:${({
-  $direction: {
-    color
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
   }
-}) => color};
-    position: absolute;
+}
+
+var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-module_withMask__LPcai{overflow:hidden!important;position:relative;user-select:none;&:after{a:#868686cc;background:#868686cc;border-radius:inherit;bottom:0;content:\"\";height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}}mask{background:#868686cc;border-radius:inherit;bottom:0;height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}";
+var style = {"test":"Style-module_test__LrdEc","withMask":"Style-module_withMask__LPcai"};
+styleInject(css_248z);
+
+const StyledJRWindow = styled.div`
+    --jr-window-radius:3px;
+    --padding-child:8px;
+    --transition-x-y:height .05s ease-in, width .05s ease-in;
+    xborder:1px solid gray;
+    position: fixed;
+    padding: ${({
+  $thick
+}) => $thick}px;
+    border-radius: var(--jr-window-radius);
+user-select: text;
+
     top: ${({
-  $direction: {
-    top
+  $y
+}) => $y}px;
+    left: ${({
+  $x
+}) => $x}px;
+    width: ${({
+  $width = 300
+}) => `${$width}px`};
+    height: ${({
+  $height = 300
+}) => `${$height}px`};
+    overflow: hidden;
+    z-index: 2;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    
+    > main{
+        border-radius: var(--jr-window-radius);
+        box-shadow: 0px 0px 5px 1px gray;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        flex:1;
+        > main {
+            Xpadding:var(--padding-child);
+            overflow: overlay;
+            flex:1;
+            display: flex;
+            min-height:32px;
+        }
+    }
+
+`;
+class JRWindow extends JRFrame {
+  x = 0;
+  y = 0;
+  width = 300;
+  height = 300;
+  padding = 1;
+  thick = 5;
+  constructor(props) {
+    super(props);
+    this.ref = /*#__PURE__*/React__default.createRef();
+    this.titleBarRef = /*#__PURE__*/React__default.createRef();
+    this.init();
   }
-}) => top};
-    bottom: ${({
-  $direction: {
-    bottom
+  addMaskToTarget = target => {
+    this.mask = document.createElement('div');
+    this.mask.style.background = '#868686cc';
+    this.mask.style.position = 'absolute';
+    this.mask.style.top = '0';
+    this.mask.style.left = '0';
+    this.mask.style.right = '0';
+    this.mask.style.bottom = '0';
+    this.mask.style.borderRadius = 'inherit';
+    this.mask.style.height = '10000px';
+    this.mask.style.width = '10000px';
+    target.appendChild(this.mask);
+    po('style.mask', style.mask);
+    po('addMask+++++++++++++++++++++++++++');
+  };
+  removeMaskFromTarget = () => {
+    po('removeMask-----------------------');
+    this.mask.remove();
+  };
+  maskOnTarget(on) {
+    po('typeof this.props.maskOn', typeof this.props.maskOn);
+    const target = typeof this.props.maskOn === 'object' ? this.props.maskOn : typeof this.props.maskOn === 'string' ? document.getElementById(this.props.maskOn) : document.body;
+
+    // this[on?'addMaskToTarget':'removeMaskFromTarget'](target)
+    target?.classList[on ? 'add' : 'remove']('withMask');
   }
-}) => bottom};
-    right: ${({
-  $direction: {
-    right
+  componentDidMount() {
+    super.componentDidMount();
+    if (this.props.maskOn && this.props.open) {
+      this.maskOnTarget(this.props.open);
+    }
+    if (this.props.open) {
+      this.open();
+    }
   }
-}) => right};
-    left: ${({
-  $direction: {
-    left
+  open() {
+    this.props.onOpen?.bind(this)();
   }
-}) => left};
-    height: ${({
-  $direction: {
-    height
+  close() {
+    this.props.onClose?.bind(this)();
   }
-}) => height};
-    width: ${({
-  $direction: {
-    width
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.popup === true) {
+      if (this.props.open && prevProps.open === false) {
+        this.open();
+      } else if (this.props.open === false && prevProps.open) {
+        this.close();
+      }
+      if (this.props.maskOn && this.props.open != prevProps.open) {
+        this.maskOnTarget(this.props.open);
+      }
+    }
   }
-}) => width};
-    cursor: ${({
-  $direction: {
-    cursor
+  init() {
+    this.height = window.innerHeight >= (this.props.height ?? this.height) ? this.props.height ?? this.height : window.innerHeight;
+    this.width = window.innerWidth >= (this.props.width ?? this.width) ? this.props.width ?? this.width : window.innerWidth;
+    this.x = this.props.x ?? (window.innerWidth - (this.width ?? 300)) / 2;
+    this.y = this.props.y ?? (window.innerHeight - (this.height ?? 300)) / 2;
   }
-}) => cursor};
+  renderer() {
+    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default.createElement(StyledJRWindow, {
+      ref: this.ref,
+      className: `jr-window ${this.props.className ?? ''}`,
+      $x: this.x,
+      $y: this.y,
+      $width: this.width,
+      $height: this.height,
+      $thick: this.thick
+    }, /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(TitleBar, {
+      titleBarRef: this.titleBarRef,
+      windowRef: this.ref,
+      window: this,
+      title: this.props.title,
+      thick: this.thick
+    }), /*#__PURE__*/React__default.createElement("main", null, super.renderer())), /*#__PURE__*/React__default.createElement(Sliders, {
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    })) : '' : super.renderer();
+  }
+}
 
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
+const StyledSlider = styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+    height:100%;
+    width:6px;
     user-select: none;
-
+    &.resizing:hover,&.resizing{
+        border-right:1px dashed black;
+    }
+    &:hover{
+        cursor: col-resize;
+        border-right:1px dashed gray;
+    }
 `;
 class Slider extends React__default.Component {
-  width = '3px';
-  borderWidth = 'px';
-  borderLong = 5;
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.sliderRef = /*#__PURE__*/React__default.createRef();
   }
-  directions = {
-    n: {
-      top: 0,
-      color: 'red',
-      width: '100%',
-      height: `${this.props.thick}px`,
-      cursor: 'n-resize',
-      resize: props => {
-        this.resizeN(props);
-      }
-    },
-    e: {
-      color: 'yellow',
-      right: 0,
-      width: `${this.props.thick}px`,
-      height: '100%',
-      cursor: 'e-resize',
-      resize: props => {
-        this.resizeE(props);
-      }
-    },
-    s: {
-      color: 'blue',
-      bottom: 0,
-      width: '100%',
-      height: `${this.props.thick}px`,
-      cursor: 's-resize',
-      resize: props => {
-        this.resizeS(props);
-      }
-    },
-    w: {
-      color: 'green',
-      left: 0,
-      width: `${this.props.thick}px`,
-      height: '100%',
-      cursor: 'w-resize',
-      resize: props => {
-        this.resizeW(props);
-      }
-    },
-    nw: {
-      top: 0,
-      left: 0,
-      color: 'blue',
-      width: `${this.borderLong}px`,
-      height: `${this.borderLong}px`,
-      cursor: 'nw-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeW(props);
-      }
-    },
-    nww: {
-      top: 0,
-      left: 0,
-      color: 'blue',
-      width: `${this.props.thick + this.borderLong}px`,
-      height: `${this.props.thick}px`,
-      cursor: 'nw-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeW(props);
-      }
-    },
-    nnw: {
-      top: 0,
-      left: 0,
-      color: 'blue',
-      width: `${this.props.thick}px`,
-      height: `${this.props.thick + this.borderLong}px`,
-      cursor: 'nw-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeW(props);
-      }
-    },
-    nne: {
-      top: 0,
-      right: 0,
-      color: 'green',
-      width: `${this.props.thick + this.borderLong}px`,
-      height: `${this.props.thick}px`,
-      cursor: 'ne-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeE(props);
-      }
-    },
-    nee: {
-      top: 0,
-      right: 0,
-      color: 'green',
-      width: `${this.props.thick}px`,
-      height: `${this.props.thick + this.borderLong}px`,
-      cursor: 'ne-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeE(props);
-      }
-    },
-    sse: {
-      color: 'red',
-      right: 0,
-      bottom: 0,
-      width: `${this.props.thick + this.borderLong}px`,
-      height: `${this.props.thick}px`,
-      cursor: 'se-resize',
-      resize: props => {
-        this.resizeS(props);
-        this.resizeE(props);
-      }
-    },
-    see: {
-      color: 'red',
-      right: 0,
-      bottom: 0,
-      width: `${this.props.thick}px`,
-      height: `${this.props.thick + this.borderLong}px`,
-      cursor: 'se-resize',
-      resize: props => {
-        this.resizeS(props);
-        this.resizeE(props);
-      }
-    },
-    ssw: {
-      color: 'yellow',
-      bottom: 0,
-      left: 0,
-      width: `${this.props.thick + this.borderLong}px`,
-      height: `${this.props.thick}px`,
-      cursor: 'sw-resize',
-      resize: props => {
-        this.resizeS(props);
-        this.resizeW(props);
-      }
-    },
-    sww: {
-      color: 'yellow',
-      bottom: 0,
-      left: 0,
-      width: `${this.props.thick}px`,
-      height: `${this.props.thick + this.borderLong}px`,
-      cursor: 'sw-resize',
-      resize: props => {
-        this.resizeS(props);
-        this.resizeW(props);
+  stop = e => {
+    this.sliderRef.current.classList.remove('resizing');
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  move = ({
+    clientX
+  }) => {
+    const {
+      th,
+      selectedCols,
+      widthRates
+    } = this.data;
+    const {
+      left
+    } = th.getBoundingClientRect();
+    const min = left + 10;
+    const x = clientX >= min ? clientX : min;
+    const width = x - left;
+    selectedCols.forEach((col, index) => {
+      const _width = Math.round(width / 100 * widthRates[index]);
+      col.style.width = _width + 'px';
+    });
+  };
+  start(thPRef, column) {
+    const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
+    const totalWidth = selectedCols.reduce((aco, {
+      offsetWidth
+    }) => aco + offsetWidth, 0);
+    const widthRates = selectedCols.map(({
+      offsetWidth
+    }) => {
+      return 100 * (offsetWidth / totalWidth);
+    });
+    this.data = {
+      selectedCols,
+      th: thPRef.current,
+      widthRates
+    };
+    this.sliderRef.current.classList.add('resizing');
+    document.body.style.cursor = 'col-resize';
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  }
+  render() {
+    const column = this.props.column;
+    return /*#__PURE__*/React__default.createElement(StyledSlider, {
+      ref: this.sliderRef,
+      onMouseDown: e => {
+        this.start(this.props.thRef, column);
       }
+    });
+  }
+}
+
+const Colgroup = ({
+  leafColumns,
+  colGroupRef
+}) => {
+  return /*#__PURE__*/React__default.createElement("colgroup", {
+    ref: colGroupRef
+  }, leafColumns?.map((_column, index) => {
+    const {
+      width,
+      ...column
+    } = _column;
+    const style = {
+      width
+    };
+    return /*#__PURE__*/React__default.createElement("col", {
+      style: style,
+      key: index
+    });
+  }));
+};
+const Ths$1 = ({
+  deep,
+  rowColumn,
+  rowIndex,
+  table
+}) => {
+  return rowColumn?.map((column, colIndex) => {
+    const thRef = /*#__PURE__*/React__default.createRef();
+    return /*#__PURE__*/React__default.createElement("th", {
+      key: colIndex,
+      ref: thRef,
+      colSpan: column.colSpan,
+      rowSpan: column.rowSpan ?? (column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null)
+    }, flexType(column.label, table), (table.props.resizableColumns === undefined || table.props.resizableColumns) && /*#__PURE__*/React__default.createElement(Slider, {
+      table: table,
+      thRef: thRef,
+      column: column
+    }));
+  });
+};
+const HeadTrs = ({
+  columns: _columns,
+  trClassName,
+  table
+}) => {
+  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
+  return columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React__default.createElement("tr", {
+      className: trClassName,
+      key: rowIndex
+    }, /*#__PURE__*/React__default.createElement(Ths$1, {
+      deep: columns.length - 1,
+      rowColumn: rowColumn,
+      rowIndex: rowIndex,
+      table: table
+    }));
+  });
+};
+const THead = ({
+  columns,
+  leafColumns,
+  table
+}) => {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement(HeadTrs, {
+    columns: columns,
+    table: table
+  })), /*#__PURE__*/React__default.createElement(Colgroup, {
+    leafColumns: leafColumns,
+    colGroupRef: table.colGroupRef
+  }));
+};
+const FootThs = ({
+  table,
+  groupData,
+  groupIndex,
+  deep,
+  columns,
+  rowIndex
+}) => {
+  return columns?.map((column, colIndex) => {
+    // let content
+    // if(type){
+    //     content='type'
+    // }else if(render){
+
+    //     content=render?.bind(table)({groupData,groupIndex,ths:111})
+    // }else{
+    //     content=column.label
+    // }
+    let style = flexType(column.style, table, {}, {});
+    const content = whatType(column, table, column.label);
+    return /*#__PURE__*/React__default.createElement("th", {
+      style: style,
+      colSpan: column.colSpan,
+      rowSpan: column.rowSpan
+    }, content);
+  });
+};
+const TFoot = ({
+  table,
+  columns
+}) => {
+  const trs = columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React__default.createElement("tr", {
+      key: rowIndex
+    }, /*#__PURE__*/React__default.createElement(FootThs, {
+      columns: rowColumn,
+      table: table
+    }));
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tfoot", null, trs));
+};
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-  };
-  resizeN = ({
-    window,
-    cursorY,
-    startY,
-    startHeight,
-    titleBarHeight
-  }) => {
-    let y = cursorY - this.props.thick;
-    if (y < 0) y = 0;
-    let height = startHeight + (startY - y);
-    if (height < titleBarHeight + this.props.thick * 2) {
-      height = titleBarHeight + this.props.thick * 2;
-      y = startY + startHeight - titleBarHeight - this.props.thick * 2;
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+styled.tbody`
+    th{
+        height:4px;
+        background:#c6c6c6;
     }
-    window.style.top = `${y}px`;
-    window.style.height = `${height}px`;
-  };
-  resizeE = ({
-    window,
-    clientX,
-    left,
-    titleBarHeight
-  }) => {
-    let width = clientX - left - this.props.thick;
-    if (width < titleBarHeight) width = titleBarHeight;
-    window.style.width = `${width + this.props.thick * 2}px`;
-  };
-  resizeS = ({
-    window,
-    clientY,
-    top,
-    titleBarHeight
-  }) => {
-    let height = clientY - top - this.props.thick;
-    if (height < titleBarHeight) height = titleBarHeight;
-    window.style.height = `${height + this.props.thick * 2}px`;
-  };
-  resizeW = ({
-    window,
-    cursorX,
-    startX,
-    startWidth,
-    titleBarHeight
-  }) => {
-    let x = cursorX - this.props.thick;
-    if (x < 0) x = 0;
-    let width = startWidth + (startX - x);
-    if (width < titleBarHeight + this.props.thick * 2) {
-      width = titleBarHeight + this.props.thick * 2;
-      x = startX + startWidth - titleBarHeight - this.props.thick * 2;
+`;
+
+////////////////////////////////////////////////////////////////////////////
+
+const Ths = ({
+  table,
+  groupData,
+  groupIndex,
+  deep,
+  rowColumn,
+  rowIndex
+}) => {
+  return rowColumn?.map(({
+    style: _style,
+    align,
+    type,
+    render,
+    ...column
+  }, colIndex) => {
+    const style = flexType(_style, table, {}, {});
+    let content;
+    if (type) {
+      content = 'type';
+    } else if (render) {
+      content = render?.bind(table)({
+        groupData,
+        groupIndex,
+        ths: 111
+      });
+    } else {
+      content = column.label;
+    }
+    // style.textAlign=align
+    return /*#__PURE__*/React__default.createElement("th", {
+      key: colIndex,
+      style: {
+        textAlign: align,
+        ...style
+      },
+      colSpan: column.colSpan,
+      rowSpan: column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null
+    }, content);
+  });
+};
+const GroupColumns = ({
+  table,
+  columns: _columns,
+  trClassName,
+  groupData,
+  tbodyIndex
+}) => {
+  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
+  return columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React__default.createElement("tr", {
+      className: trClassName,
+      key: rowIndex
+    }, /*#__PURE__*/React__default.createElement(Ths, {
+      table: table,
+      groupData: groupData,
+      groupIndex: tbodyIndex,
+      deep: columns.length - 1,
+      rowColumn: rowColumn,
+      rowIndex: rowIndex
+    }));
+  });
+};
+styled.tr`
+    z-index: 1;
+    XXposition: sticky;
+    XXtop: 50px;
+    th{
+        text-align: left;
+        border:1px solid #222222;
+    }
+`;
+const GroupHeader = props => {
+  return /*#__PURE__*/React__default.createElement(GroupColumns, _extends({
+    trClassName: 'jr-group-header'
+  }, props));
+};
+styled.tr`
+    th{
+        border:1px solid #222222;
+        text-align: left;
     }
-    window.style.left = `${x}px`;
-    window.style.width = `${width}px`;
+`;
+const GroupFooter = props => {
+  return /*#__PURE__*/React__default.createElement(GroupColumns, _extends({
+    trClassName: 'jr-group-footer'
+  }, props));
+};
+
+////////////////////////////////////////////////////////////////////////////
+const Td = ({
+  column: _column,
+  record,
+  tbodyIndex,
+  trIndex,
+  tdIndex,
+  table
+}) => {
+  let content;
+  const {
+    style: _style,
+    align,
+    vAlign = 'baseline',
+    type,
+    typeStyle: _typeStyle,
+    render,
+    setValue,
+    getValue,
+    onChange: _onChange,
+    funcProps,
+    ...column
+  } = _column;
+  const onChange = inputValue => {
+    const targetValue = inputValue?.target?.value ?? inputValue;
+    setValue(record, targetValue);
+    table.setValue(table.getValue());
   };
-  stop = e => {
-    e.preventDefault();
-    const {
-      height: titleBarHeight
-    } = this.props.titleBarRef.current.getBoundingClientRect();
-    const {
-      x,
-      y,
-      width,
-      height
-    } = this.props.windowRef.current.getBoundingClientRect();
-    this.props.windowRef.current.style.transition = 'var(--transition-x-y)';
-    if (y == 0 && this.data.direction.indexOf('n') > -1) {
-      this.props.window.orgHeight = height;
-      this.props.windowRef.current.style.height = `${window.innerHeight}px`;
-    }
-    if (y > window.innerHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
-    if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
-    if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
-    document.body.style.cursor = 'default';
-    window.removeEventListener('mousemove', this.move);
-    window.removeEventListener('mousemove', this.preMove);
-    window.removeEventListener('mouseup', this.stop);
+  const value = getValue(record);
+  let style = render ? {} : flexType(_style, table, {
+    value,
+    record
+  }, {});
+  const setStyle = _style => {
+    style = _style;
   };
-  move = e => {
-    e.preventDefault();
-    this.props.windowRef.current.style.transition = 'unset';
-    const {
-      clientX,
-      clientY,
-      x: cursorX,
-      y: cursorY
-    } = e;
-    const window = this.props.windowRef.current;
-    const {
-      left,
-      top
-    } = window.getBoundingClientRect();
-    let {
-      x: startX,
-      width: startWidth,
-      y: startY,
-      height: startHeight,
-      titleBarHeight
-    } = this.data;
-    this.directions[this.props.direction].resize({
-      window,
-      titleBarHeight,
-      clientX,
-      cursorX,
-      startX,
-      startWidth,
-      left,
-      clientY,
-      cursorY,
-      startY,
-      startHeight,
-      top
+  setStyle.bind(table);
+  render?.bind(table);
+  if (type) {
+    const typeStyle = flexType(_typeStyle, table, {
+      record
+    }, {});
+    content = /*#__PURE__*/React__default.createElement(type, {
+      onChange: _onChange ? e => {
+        _onChange?.bind(table)(e, {
+          value,
+          onChange,
+          me: content
+        });
+      } : onChange,
+      value,
+      style: typeStyle,
+      render,
+      ...column,
+      ...funcProps?.bind(table)({
+        value
+      })
     });
+  } else if (render) {
+    content = render({
+      index: trIndex,
+      groupIndex: tbodyIndex,
+      value,
+      record,
+      onChange,
+      setStyle
+    });
+  } else {
+    content = value;
+  }
+  return /*#__PURE__*/React__default.createElement("td", {
+    colSpan: style.colSpan,
+    rowSpan: style.rowSpan,
+    style: {
+      textAlign: align,
+      verticalAlign: vAlign,
+      ...style
+    },
+    key: tdIndex
+  }, content);
+};
+const Tds = ({
+  leafColumns,
+  record,
+  table,
+  tbodyIndex,
+  trIndex
+}) => {
+  return leafColumns?.map((column, tdIndex) => {
+    return /*#__PURE__*/React__default.createElement(Td, {
+      column: column,
+      key: tdIndex,
+      record: record,
+      table: table,
+      tbodyIndex: tbodyIndex,
+      trIndex: trIndex,
+      tdIndex: tdIndex
+    });
+  });
+};
+////////////////////////////////////////////////////////////////////////////
+
+const TBody = ({
+  groupData,
+  groupHeader,
+  leafColumns,
+  groupFooter,
+  table,
+  tbodyIndex
+}) => {
+  const neededProps = {
+    table,
+    tbodyIndex
   };
-  preMove = () => {
-    this.props.windowRef.current.style.height = `${this.props.window.orgHeight}px`;
-    this.data.height = this.props.window.orgHeight;
-    this.props.window.orgHeight = null;
-    window.removeEventListener('mousemove', this.preMove);
-    setTimeout(() => {
-      window.addEventListener('mousemove', this.move);
-    }, 100);
-  };
-  start = (e, direction) => {
-    e.preventDefault();
-    const {
-      height: titleBarHeight
-    } = this.props.titleBarRef.current.getBoundingClientRect();
-    let {
-      x,
-      y,
-      width,
-      height
-    } = this.props.windowRef.current.getBoundingClientRect();
-    this.data = {
-      x,
-      y,
-      width,
-      height,
-      titleBarHeight,
-      direction
-    };
-    document.body.style.cursor = this.directions[this.props.direction].cursor;
-    if (this.props.window.orgHeight) {
-      window.addEventListener('mousemove', this.preMove);
-    } else {
-      window.addEventListener('mousemove', this.move);
-    }
-    window.addEventListener('mouseup', this.stop);
-  };
-  render() {
-    return /*#__PURE__*/React__default.createElement(StyledSlider, {
-      $direction: this.directions[this.props.direction],
-      $padding: this.props.padding,
-      onMouseDown: e => {
-        this.start(e, this.props.direction);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tbody", {
+    key: `tbody${tbodyIndex}`
+  }, groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupHeader, _extends({
+    groupData: groupData,
+    columns: groupHeader
+  }, neededProps)), groupData?.map?.((record, trIndex) => {
+    const onRowClick = table.props.onRowClick?.bind(table);
+    return /*#__PURE__*/React__default.createElement("tr", {
+      key: trIndex,
+      onClick: () => {
+        onRowClick?.({
+          record,
+          index: trIndex,
+          groupIndex: tbodyIndex
+        });
       }
+    }, /*#__PURE__*/React__default.createElement(Tds, _extends({
+      record: record,
+      trIndex: trIndex
+    }, neededProps, {
+      leafColumns: leafColumns
+    })));
+  }), groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupFooter, _extends({
+    groupData: groupData,
+    columns: groupFooter
+  }, neededProps))));
+};
+const TBodies = ({
+  groupHeader,
+  leafColumns,
+  groupFooter,
+  dataSource: _dataSource,
+  table
+}) => {
+  // po('--TBodies--')
+  const isGroupDataType = Array.isArray(_dataSource?.[0]);
+  const dataSource = isGroupDataType ? _dataSource : [_dataSource];
+
+  // po('dataSource',dataSource)    
+  return dataSource?.map((groupData, tbodyIndex, c) => {
+    return /*#__PURE__*/React__default.createElement(TBody, {
+      key: `tbody${tbodyIndex}`,
+      table: table
+      // dataSource={dataSource}
+      // dataGroup={groupData} 
+      ,
+      groupData: groupData,
+      tbodyIndex: tbodyIndex,
+      groupHeader: groupHeader,
+      leafColumns: leafColumns,
+      groupFooter: groupFooter
     });
-  }
-}
+  });
+};
 
-const StyledJRWindow = styled.div`
-    --jr-window-radius:3px;
-    --padding-child:8px;
-    --transition-x-y:height .1s ease-in, width .1s ease-in;
-    xborder:1px solid gray;
-    position: fixed;
-    padding: ${({
-  $thick
-}) => $thick}px;
-    border-radius: var(--jr-window-radius);
+const StyledJRTable = styled.div`
+    --column-bd-color:#cccccc;
+    --column-b-color:#eeeeee;
+    --column-b-hover-color:#ffffff;
 
-    top: ${({
-  $y
-}) => $y}px;
-    left: ${({
-  $x
-}) => $x}px;
-    width: ${({
-  $width = 300
-}) => `${$width}px`};
-    height: ${({
-  $height = 300
-}) => `${$height}px`};
-    overflow: hidden;
+    position: relative;
+    background: var(--column-b-color);
+    border:1px solid var(--column-bd-color);
 
-    display: flex;
+    display:flex;
     flex-direction: column;
-    overflow: hidden;
+    flex:1;
+    overflow: overlay;
+
+
+
+
+    &.row-highlightable{
+        tbody{
+            tr:not(.jr-group-header,.jr-group-footer):hover{
+                background:var(--column-b-hover-color);
+                cursor: pointer;
+                transition:  background-color .8s;
+                td{
+                    color:black;
+                    transition:color .8s;
+                }
+
+            }
+        }
+    }
+
+    table{
+        Xheight: 100%;
+        min-width:100%;
+        width: max-content;
+        border-spacing: 0;
+
+        thead{
+            position: sticky;
+            top: 0;
+
+            th{
+                position: relative;
+                padding: 2px 6px;
+                background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
+                box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
+                color: #525252;
+                white-space: nowrap;
+            }
+        }
+
+        tfoot{
+            position: sticky;
+            bottom: -1px;
+
+            Xtr:nth-child(1){
+                th{
+                    Xborder-top:1px solid var(--column-bd-color);
+                }
+            }
+            Xth:nth-child(1){
+                Xborder-left:1px solid var(--column-bd-color);
+            }
+                
+            th{
+                height:32px;
+                padding: 4px;
+                background: #e4e4e4;
+                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
+                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
+                color: #525252;
+                white-space: nowrap;
+
+                border-left:2px solid #f4f4f4;
+                border-top:2px solid #f4f4f4;
+                border-right:2px solid var(--column-bd-color);
+                border-bottom:2px solid var(--column-bd-color);
+            }
+        }
+
+        tbody{
+            tr{
+                transition: background .3s linear;
+                background:var(--column-b-color);
+                a:#ededed;
+                th{
+                    color:#444444;
+                }
+                td{
+                    border-bottom: 1px solid var(--column-bd-color);
+                    color:#2e2e2e;
+                    padding: 4px;
+                }
+            }
+            tr:hover{
+                background:var(--column-b-hover-color);
+                
+            }
+            
+            tr.jr-group-header
+            ,tr.jr-group-footer{
+                text-align:left;
+                background:#dddbdb;
+
+                th{
+                    border-bottom: 1px solid var(--column-bd-color);
+                    border-right: 1px solid var(--column-bd-color);
+                    padding: 4px 8px;
+                }
+            }
+        }
+        tbody.empty-tbody{
+            td{
+                border:10px solid red;
+            }
+        }
+    } 
+        
     
-    > main{
-        border-radius: var(--jr-window-radius);
-        box-shadow: 0px 0px 5px 1px gray;
-        Xbackground: white;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
+
+
+    > .empty{
+        user-select: none;
+        color:#848484;
+        height:100%;
         flex:1;
-        > main {
-            background: white;
-            Xpadding:var(--padding-child);
-            overflow: overlay;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+
+        
+    }    
+
+    > .empty::after{
+        content:'無資料';
+        position: block;
+    }
+
+`;
+
+styled.div`
+    display:flex;
+    flex:1;
+    overflow:hidden;
+
+    > *{
+        Xborder:1px solid gray;
+    }
+    >main{
+        display:flex;
+        flex:1;
+        overflow:overlay;
+        flex-direction: column;
+        > *{
+            XXborder:1px solid gray;
+            XXmin-height:30px;
+        }
+
+        >header{
+            XXborder:1px solid  red;
+            XXoverflow: overlay;
+        }
+        >main{
+            display:flex;
             flex:1;
-            display: flex;
+            overflow:hidden;
+        }
+        >footer{
+            XXborder:1px solid  blue;
+            overflow: overlay;
         }
+
     }
 
-    @container (min-width: 700px) {
-        &{
-            border: 1px solid red;
+`;
+
+const StyleJRFields = styled.main`
+    --column-bd-color:#cccccc;
+    --column-b-color:unset;
+    --column-b-hover-color:#ffffff;
+
+    flex-direction: column;
+    flex:1;
+    overflow: overlay;
+    
+    color:#525252;
+    
+    >.jr-grid{
+        padding: 10px;
+        .jr-column{
+            > .label{
+                color:#525252;
+                text-wrap: nowrap;
+                font-weight: bold;
+            }
+            > .jr-column-value{
             }
+        }
     }
 `;
-class JRWindow extends JRFrame {
-  x = 0;
-  y = 0;
-  width = 300;
-  height = 300;
-  padding = 1;
-  thick = 5;
-  constructor(props) {
-    super(props);
-    this.ref = /*#__PURE__*/React__default.createRef();
-    this.titleBarRef = /*#__PURE__*/React__default.createRef();
-    this.init();
-  }
-  componentWillUpdate(prevProps, prevState, snapshot) {
-    if (this.props.popup === true && this.props.open === true && prevProps.open === false) {
-      this.props.onOpen?.bind(this)();
+
+function required(value) {
+  return value == null || value == '' || value.trim?.() == '' ? 'This is required' : true;
+}
+function max(value, colum) {
+  return value == null ? true : typeof value === 'string' && value.length > colum.max ? `Length can not more than ${colum.max}` : Array.isArray(value) && value.length > colum.max ? `Length can not more than ${colum.max}` : typeof value === 'number' && value > colum.max ? `Length can not more than ${colum.max}` : true;
+}
+function min(value, colum) {
+  return value = typeof value === 'string' && colum.min > value.length ? `Length can not less than ${colum.min}` : Array.isArray(value) && colum.min > value.length ? `Length can not less than ${colum.min}` : typeof value === 'number' && colum.min > value ? `Can not less than ${colum.min}` : true;
+}
+
+// import JRSubmit from "../JRSubmit";
+// import { JRWindowHOC } from "../JRWindow/JRWindowHOC";
+// import { JRFrameHOC } from "../JRFrame/JRFrameHOC";
+
+function checkMap(_name, inputValue, mapValue, nameList) {
+  if (nameList.length) {
+    const name = nameList.shift();
+    if (typeof mapValue[name] != 'object') {
+      mapValue[name] = {};
     }
-  }
-  init() {
-    this.height = window.innerHeight >= (this.props.height ?? this.height) ? this.props.height ?? this.height : window.innerHeight;
-    this.width = window.innerWidth >= (this.props.width ?? this.width) ? this.props.width ?? this.width : window.innerWidth;
-    this.x = this.props.x ?? (window.innerWidth - (this.width ?? 300)) / 2;
-    this.y = this.props.y ?? (window.innerHeight - (this.height ?? 300)) / 2;
-  }
-  renderer() {
-    return this.props.popup === true ? this.props.open === true ? /*#__PURE__*/React__default.createElement(StyledJRWindow, {
-      ref: this.ref,
-      className: `jr-window ${this.props.className ?? ''}`,
-      $x: this.x,
-      $y: this.y,
-      $width: this.width,
-      $height: this.height,
-      $thick: this.thick
-    }, /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(TitleBar, {
-      titleBarRef: this.titleBarRef,
-      windowRef: this.ref,
-      window: this,
-      title: this.props.title,
-      thick: this.thick
-    }), /*#__PURE__*/React__default.createElement("main", null, super.renderer())), /*#__PURE__*/React__default.createElement(Sliders, {
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    })) : '' : super.renderer();
+    checkMap(_name, inputValue, mapValue[name], nameList);
+  } else {
+    mapValue[_name] = inputValue;
   }
 }
+styled.div`
+    overflow: auto;    
+    flex:1;
+`;
+const StyledGrid = styled.div`
+    display: grid;
+    grid: ${({
+  grid,
+  cols,
+  children
+}) => grid ? grid : `auto / ${Array(cols ?? 1).fill().map(() => "1fr").join(" ")}`};
 
-const getMapObject = (map, names) => {
-  const name = names.shift(names);
-  if (names.length) {
-    return getMapObject(map?.[name], names);
+    gap: ${({
+  $gap
+}) => $gap};
+`;
+styled.div`
+`;
+const StyledColumn = styled.div`
+    flex:1;
+    display: grid;
+
+    ${({
+  $layout,
+  $labelWidth,
+  $hasLabel,
+  $valueWidth
+}) => {
+  if ($layout == 'v') {
+    return `grid: auto 1fr / 1fr;`;
   } else {
-    return map;
+    return `grid: 1fr / ${$hasLabel ? $labelWidth : ''} ${$valueWidth};`;
   }
-};
-const setMapObject = (map, names, value) => {
-  const name = names.shift(names);
-  if (names?.length) {
-    if (typeof map[name] != 'object') {
-      map[name] = {};
-    }
-    setMapObject(map[name], names, value);
+}}
+`;
+const StyledColumnLabel = styled.div`
+    ${({
+  $layout
+}) => {
+  if ($layout == 'v') {
+    return `text-align: start;`;
   } else {
-    map[name] = value;
-  }
-};
-class JRTable extends JRWindow {
-  constructor(props) {
-    super(props);
-    this.colGroupRef = /*#__PURE__*/React__default.createRef();
-  }
-  UNSAFE_componentWillMount() {
-    this.setColumns(this.props.columns ?? []);
+    return `text-align: end;
+                padding: 3px 8px;
+            `;
   }
+}}
 
-  //------------------------------------------------------------------------------------
-  getChecked() {
-    return [1, 2, 3, 4];
-  }
-  checkableColumn(props) {
-    return {
-      //方法1
-      render({
-        value,
-        onChange
-      }) {
-        return /*#__PURE__*/React__default.createElement("checkbox", {
-          checked: value,
-          onChange: e => {
-            onChange(e.target.checked);
-          }
-        });
-      },
-      align: 'center',
-      name: 'checked',
-      ...props
-    };
-    // return {//方法2
-    //     type:Checkbox
-    //     ,funcProps({value}){
-    //         po('fffffffffffff',value)
-    //         return {
-    //             align:'center'
-    //             ,checked:value
-    //         }
-    //     }
-    //     // ,label:'A'
-    //     ,onChange(e,{value,onChange,me}){
-    //         onChange(e.target.checked)
-    //     }
-    //     ,...props
-    // }
+    ${({
+  $required
+}) => {
+  if ($required !== undefined && $required) return `
+                &:not(:empty)::before{
+                    padding-right:4px;
+                    color:red;
+                    content:'*';
+                }
+            `;
+}}
+
+    ${({
+  $colon
+}) => {
+  if ($colon) {
+    return `
+                &:not(:empty)::after{
+                    content:'${$colon}';
+                }
+            `;
   }
-  deletableColumn({
-    name = 'deletable',
-    sendValue,
-    sendName,
-    valueName,
-    ...props
-  }) {
-    return {
-      render({
-        value,
-        onChange
-      }) {
-        return /*#__PURE__*/React__default.createElement("checkbox", {
-          checked: value,
-          onChange: e => {
-            onChange(e.target.checked);
-          }
-        });
-      },
-      align: 'center',
-      name,
-      label() {
-        return /*#__PURE__*/React__default.createElement("button", {
-          onClick: () => {
-            const value = this.props.delete.value ?? this.getDataSource()?.filter(record => record[name]).map(record => sendValue ? record[sendValue] : record);
-            const callback = this.props.delete.callback ?? function (a, b, c) {
-              this.reload();
-            };
-            this.delete({
-              value: sendName ? {
-                [sendName]: value
-              } : value,
-              callback,
-              ...props
-            });
-          }
-        }, "\u522A\u9664");
-      },
-      ...props
-    };
+}}
+
+`;
+const StyledColumnValue = styled.main`
+    flex:1;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 4px 0;
+
+    text-align: start;
+    ${({
+  $validateValue
+}) => {
+  if ($validateValue != null) {
+    return `
+                > * {
+                    xborder:1px solid red;
+                }
+            `;
   }
-  initColumn(column, level, result, leafColumns, names, lastColSpan) {
-    const isBranch = column.type === undefined && column?.columns && column?.columns.length;
-    const _names = column.name ? [...names, column.name] : names;
-    if (isBranch) {
-      if (column.label !== null) result[level].push(column);
-      const c = this.initColumns(column.columns, level + (column.label !== null ? 1 : 0) + (column.rowSpan != null ? column.rowSpan - 1 : 0), result, leafColumns, _names, lastColSpan);
-      column.colSpan = c.colSpan;
-      column.columnNo = lastColSpan;
-      return {
-        colSpan: column.colSpan
-      };
-    } else {
-      column.columnNo = lastColSpan;
-      result[level].push({
-        ...column,
-        isLeaf: true
-      });
-      leafColumns.push(column);
-      column.names = _names;
-      if (_names?.length > 1) {
-        column.setValue = function (record, value) {
-          try {
-            getMapObject(record, [..._names])[column.name] = value;
-          } catch {
-            setMapObject(record, [..._names], value);
-          }
-        };
-        column.getValue = function (record) {
-          return _names.reduce((acc, name) => {
-            return acc?.[name];
-          }, record);
-        };
-      } else {
-        column.setValue = function (record, value) {
-          record[column.name] = value;
-        };
-        column.getValue = function (record) {
-          return record[column.name];
-        };
-      }
-      return {
-        colSpan: 1
-      };
+}}
+`;
+const StyledColumnFooter = styled.div`
+    &:has(.left:empty):has(.right:empty)
+    {
+        border:1px solid blue;
+        display: none;
     }
+
+    ${({
+  $layout
+}) => {
+  if ($layout == 'v') {
+    return ``;
+  } else {
+    return `grid-column-start:2;`;
   }
-  initColumns(columns, level, result, leafColumns, names, lastColSpan) {
-    for (let i = result.length; i <= level; i++) {
-      if (!result[i]) {
-        result.push([]);
-      }
+}}
+    height:25px;
+    color:#ff6060;
+
+    display: flex;
+    justify-content: space-between;
+
+    .left:{
+        xflex:1;
     }
-    let _lastColSpan = lastColSpan;
-    const childrenLength = columns?.reduce((acc, column) => {
-      const c = this.initColumn(column, level, result, leafColumns, names, _lastColSpan);
-      acc.colSpan += c.colSpan;
-      _lastColSpan += c.colSpan;
-      return acc;
-    }, {
-      colSpan: 0
-    });
-    return childrenLength;
+    .right{
+        color:gray;
+        xflex:1;
+    }
+`;
+class JRFields extends JRWindow {
+  UNSAFE_componentWillMount() {
+    this.#initValidatorValue();
   }
-  setColumns([..._columns]) {
-    if (this.props.checkable) _columns.unshift(this.checkableColumn(this.props.checkable));
-    if (this.props.deletable) {
-      _columns.unshift(this.deletableColumn(this.props.deletable));
+  reset() {
+    this.clearTestValue();
+    super.reset();
+  }
+  setValue(value, reset) {
+    super.setValue(value, reset);
+    if (reset) {
+      this.clearTestValue();
     }
-    const columns = [];
-    const leafColumns = [];
-    this.initColumns(_columns, 0, columns, leafColumns, [], 0);
-    // po('initColumns',initColumns)
-    this.setState({
-      columns,
-      leafColumns
-    });
   }
-  //------------------------------------------------------------------------------------
-  setDataSource(dataSource) {}
-  getDataSource() {
-    return this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue();
+  //Validate-----------------------------------------------------------------------------------
+  #initValidatorValue() {
+    if (this.validateValueFrom == 'state') {
+      this.setState({
+        validatorValue: {}
+      });
+    }
   }
-  add(record, index = this.getDataSource()?.length ?? 0, group) {
-    //group 還沒有考慮到
-
-    if (this.getDataSource()) {
-      if (group === undefined) {
-        this.getDataSource().splice(index, 0, record); //.push(record)
+  get testValueFrom() {
+    return this.props.testValue === undefined ? 'state' : 'props';
+  }
+  clearTestValue() {
+    this.setTestValue({});
+  }
+  setTestValue(testValue, name) {
+    if (this.testValueFrom == 'state') {
+      if (name) {
+        const newTestValue = this.getTestValue();
+        newTestValue[name] = testValue;
+        this.setState({
+          testValue: {
+            ...this.getTestValue(),
+            ...testValue
+          }
+        });
       } else {
-        this.getDataSource()[group].splice(index, 0, record); //.push(record)
+        this.setState({
+          testValue
+        });
       }
-      this.setValue(this.getValue());
+    }
+  }
+  getTestValue(fullname) {
+    if (fullname) {
+      return this.state?.testValue?.[fullname];
     } else {
-      //未完成. 沒有資料的時候, 要考慮有或沒有dataSourceName的不同處理
-      this.setValue({
-        [this.props.dataSourceName]: [record]
+      return this.state?.testValue;
+    }
+  }
+  #validateField(column, fullNameArray, testValue, value) {
+    const {
+      name,
+      validators: _validators,
+      columns,
+      type
+    } = column;
+    const fullName = fullNameArray.join('.');
+    const validators = _validators ? [..._validators] : [];
+    if (column.required) {
+      validators.push(required);
+    }
+    if (column.max) {
+      validators.push(max);
+    }
+    if (column.min) {
+      validators.push(min);
+    }
+    if (validators.length) {
+      testValue[fullName] = {
+        isValid: null,
+        msg: []
+      };
+      const promises = [];
+      for (let i = 0; i < validators.length; i++) {
+        const validator = validators[i].bind(this)(value, column);
+        if (validator?.then) {
+          promises.push(validator);
+        } else if (typeof validator == 'string') {
+          promises.push(Promise.reject(validator));
+          break;
+        }
+      }
+      return Promise.all(promises).then(reason => {
+        testValue[fullName].isValid = true;
+        return Promise.resolve(reason);
+      }).catch(reason => {
+        testValue[fullName].msg.push(reason);
+        testValue[fullName].isValid = false;
+        return Promise.reject(reason);
       });
     }
   }
-  noData() {
-    const data = this.getDataSource();
-    return data == null || data.length == 0;
+  #validators(_columns, validators, names, testValue, value) {
+    return _columns?.reduce((aco, column) => {
+      const {
+        name,
+        validators,
+        columns,
+        type
+      } = column;
+      const fullNameArray = name ? [...names, name] : names;
+      fullNameArray.join('.');
+      {
+        // 要的 if(this.getTestValue(fullName)?.isValid==null){//執行過的不再執行
+        const validate = this.#validateField(column, fullNameArray, testValue, name ? value?.[name] : value);
+        if (validate) {
+          aco.push(validate);
+        }
+      }
+      if (columns && type == undefined) {
+        this.#validators(columns, aco, fullNameArray, testValue, name ? value?.[name] : value);
+      }
+      return aco;
+    }, validators);
   }
-  //------------------------------------------------------------------------------------
-  renderMe() {
-    return /*#__PURE__*/React__default.createElement(StyledJRTable, {
-      className: `${this.props.className ?? ''} jr-table ${this.props.onRowClick ? 'row-highlightable' : ''}`
-    }, /*#__PURE__*/React__default.createElement("table", {
-      className: 'jr-table-table'
-    }, /*#__PURE__*/React__default.createElement(TBodies, {
-      table: this,
-      leafColumns: this.state.leafColumns,
-      groupHeader: this.props.groupHeader,
-      groupFooter: this.props.groupFooter,
-      dataSource: this.getDataSource(),
-      onRowClick: this.props.onRowClick
-    }), /*#__PURE__*/React__default.createElement(TFoot, {
-      columns: this.props.footColumns,
-      table: this
-    }), /*#__PURE__*/React__default.createElement(THead, {
-      columns: this.state.columns,
-      leafColumns: this.state.leafColumns,
-      table: this
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: 'empty'
-    }, this.noData() && '無資料'));
+  validate(value) {
+    console.clear();
+    const validators = [];
+    const testValue = this.getTestValue() ?? {};
+    this.#validators(this.getColumns(), validators, [], testValue, value !== undefined ? value : this.getValue());
+    return Promise.all(validators).then(msg => {
+      this.setTestValue(testValue);
+      return Promise.resolve();
+    }).catch(msg => {
+      this.setTestValue(testValue);
+      return Promise.reject();
+    });
   }
-}
 
-const StyleJRFields = styled.main`
-    --column-bd-color:#cccccc;
-    --column-b-color:unset;
-    --column-b-hover-color:#ffffff;
-
-    flex-direction: column;
-    flex:1;
-    overflow: overlay;
-    padding: 10px;
-    
-    color:#525252;
+  //--------------------------------------------------------------------------------------
+  get columnsFrom() {
+    return this.props.initColumns !== undefined ? 'state' : 'props';
+  }
+  getColumns() {
+    return this[this.columnsFrom]?.columns;
+  }
+  //-------------------------------------------------------------------------------------------
 
-    >.jr-grid{
-        .jr-column{
-            > .label{
-                color:#525252;
-                text-wrap: nowrap;
-                padding: 3px 8px;
-                font-weight: bold;
-            }
-            > .jr-column-value{
-            }
-        }
+  createColumn(parentValue, {
+    type,
+    name,
+    colSpan,
+    rowSpan,
+    style,
+    typeStyle: _typeStyle,
+    columnStyle,
+    ...column
+  }, index, parentName, fullnameArray, labelProps) {
+    const value = name ? parentValue?.[name] : parentValue;
+    const gap = column.gap ?? this.props.gap;
+    const label = column.label;
+    const _style = flexType(style, this, {}, {});
+    const _columnStyle = flexType(columnStyle, this, {}, {});
+    if (colSpan) _style.gridColumn = `span ${colSpan}`;
+    if (rowSpan) _style.gridRow = `span ${rowSpan}`;
+    let content;
+    const onChange = inputValue => {
+      const targetValue = inputValue?.target?.value ?? inputValue;
+      try {
+        parentValue[name] = targetValue;
+        this.setValue({
+          ...this.getValue()
+        });
+      } catch (e) {
+        const _value = this.getValue() ?? {};
+        checkMap(name, targetValue, _value, [...parentName]);
+        this.setValue(_value);
+      }
+      const testValue = this.getTestValue() ?? {};
+      this.#validateField(column, fullnameArray, testValue, targetValue)?.then(() => {
+        this.setTestValue(testValue);
+      }).catch(() => {
+        this.setTestValue(testValue);
+      });
+    };
+    const _parentName = [...parentName];
+    if (name !== undefined) {
+      _parentName.push(name);
     }
-`;
-
-function checkMap(_name, inputValue, mapValue, nameList) {
-  if (nameList.length) {
-    const name = nameList.shift();
-    if (typeof mapValue[name] != 'object') {
-      mapValue[name] = {};
+    if (type) {
+      const typeStyle = flexType(_typeStyle, this, null);
+      content = /*#__PURE__*/React__default.createElement(StyledColumnValue, {
+        className: 'jr-column-value',
+        style: {
+          gridColumn: label == null ? 'span 2' : null,
+          ..._columnStyle
+        }
+      }, /*#__PURE__*/React__default.createElement(type, {
+        value: value,
+        onChange,
+        record: parentValue,
+        style: {
+          width: '100%',
+          ...typeStyle
+        },
+        ...column
+      }));
+    } else if (column.columns) {
+      content = /*#__PURE__*/React__default.createElement(StyledGrid, {
+        cols: column.cols,
+        className: 'jr-grid',
+        $gap: gap,
+        style: _columnStyle
+      }, this.createColumns(value, column.columns, _parentName, fullnameArray, column.labelProps ?? this.props.labelProps));
+    } else if (name || column.render) {
+      content = /*#__PURE__*/React__default.createElement(StyledColumnValue, {
+        className: 'jr-column-value',
+        style: {
+          gridColumn: label == null ? 'span 2' : null,
+          padding: column.render ? '4px 0' : null
+        }
+      }, column.render ? column.render.bind(this)({
+        onChange,
+        value: value,
+        record: this.getValue()
+      }) : typeof value === 'object' ? JSON.stringify(value) : value);
     }
-    checkMap(_name, inputValue, mapValue[name], nameList);
-  } else {
-    mapValue[_name] = inputValue;
+    const layout = labelProps?.layout;
+    const colon = labelProps?.colon === undefined ? ':' : labelProps.colon;
+    const labelStyle = column.labelProps?.style ?? this.props.labelProps?.style ?? {};
+    return /*#__PURE__*/React__default.createElement(StyledColumn, {
+      $layout: layout,
+      $hasLabel: label != null,
+      key: `f${index}`,
+      style: _style,
+      className: 'jr-column',
+      $labelWidth: column.labelProps?.width ?? this.props.labelProps?.width ?? '120px',
+      $valueWidth: column.valueProps?.width ?? this.props.valueProps?.width ?? '1fr'
+    }, label != null && /*#__PURE__*/React__default.createElement(StyledColumnLabel, {
+      style: labelStyle,
+      $required: column.required,
+      className: 'label',
+      $layout: layout,
+      $colon: colon
+    }, label), content, /*#__PURE__*/React__default.createElement(StyledColumnFooter, {
+      $layout: layout
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "left"
+    }, this.getTestValue(_parentName.join('.'))?.msg?.map(msg => {
+      return msg;
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "right"
+    })));
+  }
+  createColumns(parentValue, columns, parentName, fullname, labelProps) {
+    return columns?.map((column, index) => {
+      return this.createColumn(parentValue, column, index, parentName, column.name ? [...fullname, column.name] : fullname, labelProps);
+    });
+  }
+  renderMe() {
+    return /*#__PURE__*/React__default.createElement(StyleJRFields, {
+      className: 'jr-fields',
+      style: this.props.typeStyle
+    }, /*#__PURE__*/React__default.createElement(StyledGrid, {
+      cols: this.props.cols,
+      style: this.props.gridStyle,
+      className: 'jr-grid',
+      $gap: this.props.gap
+    }, this.createColumns(this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue(), this.props.columns, this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.labelProps)));
   }
 }
-styled.div`
-    overflow: auto;    
-    flex:1;
-`;
-const StyledGrid = styled.div`
-    display: grid;
-    grid: ${({
-  grid,
-  cols,
-  children
-}) => grid ? grid : `auto / ${Array(cols ?? 1).fill().map(() => "1fr").join(" ")}`};
 
-    gap: ${({
-  $gap
-}) => $gap};
-`;
-styled.div`
-`;
-const StyledColumn = styled.div`
-    flex:1;
-    display: grid;
-
-    ${({
-  $layout,
-  $labelWidth,
-  $hasLabel,
-  $valueWidth
-}) => {
-  if ($layout == 'v') {
-    return `grid: auto 1fr / 1fr;`;
-  } else {
-    return `grid: 1fr / ${$hasLabel ? $labelWidth : ''} ${$valueWidth};`;
-  }
-}}
-`;
-const StyledColumnLabel = styled.div`
-    ${({
-  $layout
-}) => {
-  if ($layout == 'v') {
-    return `text-align: start;`;
-  } else {
-    return `text-align: end;`;
-  }
-}}
+// export const FFields=JRFrameHOC(JRFields)
+// export const WFields=JRWindowHOC(FFields)
 
-    ${({
-  $required
-}) => {
-  if ($required !== undefined && $required) return `
-                &:not(:empty)::before{
-                    padding-right:4px;
-                    color:red;
-                    content:'*';
-                }
-            `;
-}}
+styled.div`
+    --jr-window-radius:3px;
+    --padding-child:8px;
+    --transition-x-y:height .05s ease-in, width .05s ease-in;
+    xborder:1px solid gray;
+    position: fixed;
+    padding: ${({
+  $thick
+}) => $thick}px;
+    border-radius: var(--jr-window-radius);
 
-    ${({
-  $colon
-}) => {
-  if ($colon) {
-    return `
-                &:not(:empty)::after{
-                    content:'${$colon}';
-                }
-            `;
-  }
-}}
+    top: ${({
+  $y
+}) => $y}px;
+    left: ${({
+  $x
+}) => $x}px;
+    width: ${({
+  $width = 300
+}) => `${$width}px`};
+    height: ${({
+  $height = 300
+}) => `${$height}px`};
+    overflow: hidden;
 
-`;
-const StyledColumnValue = styled.main`
-    flex:1;
-    Xdisplay:flex;
+    display: flex;
     flex-direction: column;
     overflow: hidden;
+    
+    > main{
+        border-radius: var(--jr-window-radius);
+        box-shadow: 0px 0px 5px 1px gray;
+        Xbackground: white;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        flex:1;
+        > main {
+            background: white;
+            Xpadding:var(--padding-child);
+            overflow: overlay;
+            flex:1;
+            display: flex;
+        }
+    }
 
-    text-align: start;
-    ${({
-  $validateValue
-}) => {
-  if ($validateValue != null) {
-    return `
-                > * {
-                    xborder:1px solid red;
-                }
-            `;
-  }
-}}
+    @container (min-width: 700px) {
+        &{
+            border: 1px solid red;
+            }
+    }
 `;
 
-// String.prototype.valueString = function (value = {}) {
-//     return Array.from(new Set(this.match(/[^{}]+(?=})/g))).reduce((aco, name) => {
-//         return aco.replace(new RegExp(`\\{${name}\\}`, "g"), value[name] ?? `{${name}}`);
-//     }, String(this));
-// };
-
-const valueString = (str = '', value = {}) => {
-  return Array.from(new Set(str.match(/[^{}]+(?=})/g))).reduce((aco, name) => {
-    return aco.replace(new RegExp(`\\{${name}\\}`, "g"), value?.[name] ?? `{${name}}`);
-  }, String(str));
-};
-const ColumnMessage = ({
-  value = {},
-  record
-}) => {
-  if (value.isValid === false) {
-    return valueString(value.msg, record);
+const getMapObject = (map, names) => {
+  const name = names.shift(names);
+  if (names.length) {
+    return getMapObject(map?.[name], names);
+  } else {
+    return map;
   }
 };
-const StyledColumnFooter = styled.div`
-    &:empty{
-            display: none;
+const setMapObject = (map, names, value) => {
+  const name = names.shift(names);
+  if (names?.length) {
+    if (typeof map[name] != 'object') {
+      map[name] = {};
     }
-    ${({
-  $layout
-}) => {
-  if ($layout == 'v') {
-    return ``;
+    setMapObject(map[name], names, value);
   } else {
-    return `grid-column-start:2;`;
+    map[name] = value;
   }
-}}
-    height:25px;
-    color:#ff6060;
-
-    display: flex;
-    justify-content: space-between;
-
-    .left:{
-        xflex:1;
-    }
-    .right{
-        color:gray;
-        xflex:1;
-    }
-`;
-function requiredValidator({
-  value
-}) {
-  if (value == null || value == '') {
-    return {
-      msg: this.msg ?? 'This is required'
-    };
+};
+class JRTable extends JRWindow {
+  constructor(props) {
+    super(props);
+    this.colGroupRef = /*#__PURE__*/React__default.createRef();
   }
-}
-class JRFields extends JRWindow {
   UNSAFE_componentWillMount() {
-    this.#initValidateValue();
+    this.setColumns(this.props.columns ?? []);
   }
-  reset() {
-    this.clearValidateValue();
-    super.reset();
+
+  //------------------------------------------------------------------------------------
+  checkableColumn(props) {
+    return {
+      //方法1
+      render({
+        value,
+        onChange
+      }) {
+        return /*#__PURE__*/React__default.createElement("checkbox", {
+          checked: value,
+          onChange: e => {
+            onChange(e.target.checked);
+          }
+        });
+      },
+      align: 'center',
+      name: 'checked',
+      ...props
+    };
+    // return {//方法2
+    //     type:Checkbox
+    //     ,funcProps({value}){
+    //         po('fffffffffffff',value)
+    //         return {
+    //             align:'center'
+    //             ,checked:value
+    //         }
+    //     }
+    //     // ,label:'A'
+    //     ,onChange(e,{value,onChange,me}){
+    //         onChange(e.target.checked)
+    //     }
+    //     ,...props
+    // }
   }
-  setValue(value, reset) {
-    super.setValue(value, reset);
-    if (reset) {
-      this.clearValidateValue();
-    }
+  deletableColumn({
+    name = 'deletable',
+    sendValue,
+    sendName,
+    valueName,
+    ...props
+  }) {
+    return {
+      render({
+        value,
+        onChange
+      }) {
+        return /*#__PURE__*/React__default.createElement("checkbox", {
+          checked: value,
+          onChange: e => {
+            onChange(e.target.checked);
+          }
+        });
+      },
+      align: 'center',
+      name,
+      label() {
+        return /*#__PURE__*/React__default.createElement("button", {
+          onClick: () => {
+            const value = this.props.delete.value ?? this.getDataSource()?.filter(record => record[name]).map(record => sendValue ? record[sendValue] : record);
+            const callback = this.props.delete.callback ?? function (a, b, c) {
+              this.reload();
+            };
+            this.delete({
+              value: sendName ? {
+                [sendName]: value
+              } : value,
+              callback,
+              ...props
+            });
+          }
+        }, "\u522A\u9664");
+      },
+      ...props
+    };
   }
-  //-----------------------------------------------------------------------------------
-  #findValidator(acc, fullname, {
-    required,
-    ...column
-  }) {
-    const _required = required;
-    if (required == true || required?.value) {
-      acc[fullname] = {
-        isValid: null,
-        validators: [requiredValidator.bind(_required)]
+  initColumn(column, level, result, leafColumns, names, lastColSpan) {
+    const isBranch = column.type === undefined && column?.columns && column?.columns.length;
+    const _names = column.name ? [...names, column.name] : names;
+    if (isBranch) {
+      if (column.label !== null) result[level].push(column);
+      const c = this.initColumns(column.columns, level + (column.label !== null ? 1 : 0) + (column.rowSpan != null ? column.rowSpan - 1 : 0), result, leafColumns, _names, lastColSpan);
+      column.colSpan = c.colSpan;
+      column.columnNo = lastColSpan;
+      return {
+        colSpan: column.colSpan
+      };
+    } else {
+      column.columnNo = lastColSpan;
+      result[level].push({
+        ...column,
+        isLeaf: true
+      });
+      leafColumns.push(column);
+      column.names = _names;
+      if (_names?.length > 1) {
+        column.setValue = function (record, value) {
+          try {
+            getMapObject(record, [..._names])[column.name] = value;
+          } catch {
+            setMapObject(record, [..._names], value);
+          }
+        };
+        column.getValue = function (record) {
+          return _names.reduce((acc, name) => {
+            return acc?.[name];
+          }, record);
+        };
+      } else {
+        column.setValue = function (record, value) {
+          record[column.name] = value;
+        };
+        column.getValue = function (record) {
+          return record[column.name];
+        };
+      }
+      return {
+        colSpan: 1
       };
     }
   }
-  #loopColumnsForValidateValue(no, _fullnameList, columns, tab, result) {
-    const validateValue = columns?.reduce((acc, {
-      name,
-      type,
-      columns,
-      ...column
-    }, index) => {
-      no += 1;
-      const fullnameList = name ? [..._fullnameList, name] : _fullnameList;
-      const fullname = fullnameList.join('.');
-      this.#findValidator(acc, fullname, column);
-      if (type == null && columns) {
-        this.#loopColumnsForValidateValue(no, fullnameList, columns, `${tab}\t`, result);
+  initColumns(columns, level, result, leafColumns, names, lastColSpan) {
+    for (let i = result.length; i <= level; i++) {
+      if (!result[i]) {
+        result.push([]);
       }
+    }
+    let _lastColSpan = lastColSpan;
+    const childrenLength = columns?.reduce((acc, column) => {
+      const c = this.initColumn(column, level, result, leafColumns, names, _lastColSpan);
+      acc.colSpan += c.colSpan;
+      _lastColSpan += c.colSpan;
       return acc;
-    }, result);
-    return validateValue;
-  }
-  clearValidateValue() {
-    Object.values(this.getValidateValue()).forEach(v => v.isValid = null);
-  }
-  #initValidateValue() {
-    const columns = this.getColumns();
-    const validateValue = this.#loopColumnsForValidateValue(0, this.props.dataSourceName ? [this.props.dataSourceName] : [], columns, '', {});
-    this.setState({
-      validateValue
+    }, {
+      colSpan: 0
     });
+    return childrenLength;
   }
-  #exeValidateConfig(validateConfig, value, record) {
-    validateConfig.isValid = true;
-    for (var i = 0; i < validateConfig.validators.length; i++) {
-      const result = validateConfig.validators[i]({
-        value,
-        record
-      });
-      if (result) {
-        validateConfig.isValid = false;
-        validateConfig.msg = result.msg;
-        break;
-      }
+  setColumns([..._columns]) {
+    if (this.props.checkable) _columns.unshift(this.checkableColumn(this.props.checkable));
+    if (this.props.deletable) {
+      _columns.unshift(this.deletableColumn(this.props.deletable));
     }
-  }
-  validateFields() {
-    console.clear();
-    Object.entries(this.getValidateValue()).filter(([fullname, validateConfig]) => validateConfig.isValid != true).forEach(([fullname, validateConfig]) => {
-      this.#exeValidateConfig(validateConfig, this.getValue(fullname), this.getValue());
-    });
+    const columns = [];
+    const leafColumns = [];
+    this.initColumns(_columns, 0, columns, leafColumns, [], 0);
+    // po('initColumns',initColumns)
     this.setState({
-      validateValue: this.getValidateValue()
+      columns,
+      leafColumns
     });
   }
-  get validateValueFrom() {
-    return this.props.validateValue === undefined ? 'state' : 'props';
-  }
-  getValidateValue(fullname) {
-    if (fullname === undefined) {
-      return this[this.validateValueFrom]?.validateValue;
-    } else {
-      return this[this.validateValueFrom]?.validateValue?.[fullname];
-    }
-  }
-  setValidateValue(validateValue) {
-    if (this.props.setValidateValue) {
-      this.props.setValidateValue(validateValue);
-    } else {
-      this.setState({
-        validateValue
-      });
-    }
-  }
-  createValidator({
-    required
-  }) {
-    const validators = [];
-    if (required === true && required.value) {
-      validators.push(requiredValidator);
-    }
-    return validators;
-  }
-  //--------------------------------------------------------------------------------------
-  get columnsFrom() {
-    return this.props.initColumns !== undefined ? 'state' : 'props';
-  }
-  getColumns() {
-    return this[this.columnsFrom]?.columns;
+  //------------------------------------------------------------------------------------
+  setDataSource(dataSource) {}
+  getDataSource() {
+    return this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue();
   }
-  //-------------------------------------------------------------------------------------------
+  add(record, index = this.getDataSource()?.length ?? 0, group) {
+    //group 還沒有考慮到
 
-  get colon() {
-    return this.props.labelProps?.colon === undefined ? ':' : this.props.labelProps?.colon;
-  }
-  createColumn(parentValue, {
-    type,
-    name,
-    colSpan,
-    rowSpan,
-    style,
-    typeStyle: _typeStyle,
-    required,
-    ...column
-  }, index, parentName, fullname) {
-    const value = name ? parentValue?.[name] : parentValue;
-    const gap = column.gap ?? this.props.gap;
-    const label = column.label;
-    const _style = flexType(style, this, {}, {});
-    if (colSpan) _style.gridColumn = `span ${colSpan}`;
-    if (rowSpan) _style.gridRow = `span ${rowSpan}`;
-    let content;
-    this.createValidator({
-      required,
-      column
-    });
-    const fn = fullname.join('.');
-    const onChange = inputValue => {
-      const targetValue = inputValue?.target?.value ?? inputValue;
-      try {
-        parentValue[name] = targetValue;
-        this.setValue({
-          ...this.getValue()
-        });
-      } catch (e) {
-        const _value = this.getValue() ?? {};
-        checkMap(name, targetValue, _value, [...parentName]);
-        this.setValue(_value);
+    if (this.getDataSource()) {
+      if (group === undefined) {
+        this.getDataSource().splice(index, 0, record); //.push(record)
+      } else {
+        this.getDataSource()[group].splice(index, 0, record); //.push(record)
       }
-      if (this.getValidateValue()[fn]) this.#exeValidateConfig(this.getValidateValue()[fn], targetValue, this.getValue());
-    };
-    const _parentName = [...parentName];
-    if (name !== undefined) {
-      _parentName.push(name);
-    }
-    if (type) {
-      const typeStyle = flexType(_typeStyle, this, null);
-      content = /*#__PURE__*/React__default.createElement(StyledColumnValue, {
-        className: 'jr-column-value',
-        style: {
-          gridColumn: label == null ? 'span 2' : null
-        }
-      }, /*#__PURE__*/React__default.createElement(type, {
-        value: value,
-        onChange,
-        record: parentValue,
-        style: {
-          width: '100%',
-          ...typeStyle
-        },
-        ...column
-      }));
-    } else if (column.columns) {
-      content = /*#__PURE__*/React__default.createElement(StyledGrid, {
-        cols: column.cols,
-        className: 'jr-grid',
-        $gap: gap
-      }, this.createColumns(value, column.columns, _parentName, fullname));
-    } else if (name || column.render) {
-      content = /*#__PURE__*/React__default.createElement(StyledColumnValue, {
-        className: 'jr-column-value',
-        style: {
-          gridColumn: label == null ? 'span 2' : null,
-          padding: column.render ? '4px 0' : null
-        }
-      }, column.render ? column.render.bind(this)({
-        onChange,
-        value: value,
-        record: this.getValue()
-      }) : typeof value === 'object' ? JSON.stringify(value) : value);
+      this.setValue(this.getValue());
+    } else {
+      this.setValue(this.props.dataSourceName ? {
+        [this.props.dataSourceName]: [record]
+      } : [record]);
     }
-    const layout = column.labelProps?.layout === undefined ? this.props.labelProps?.layout : column.labelProps?.layout;
-    const labelStyle = column.labelProps?.style ?? this.props.labelProps?.style ?? {};
-    return /*#__PURE__*/React__default.createElement(StyledColumn, {
-      $layout: layout,
-      $hasLabel: label != null,
-      key: `f${index}`,
-      style: _style,
-      className: 'jr-column',
-      $labelWidth: column.labelProps?.width ?? this.props.labelProps?.width ?? '120px',
-      $valueWidth: column.valueProps?.width ?? this.props.valueProps?.width ?? '1fr'
-    }, label != null && /*#__PURE__*/React__default.createElement(StyledColumnLabel, {
-      style: labelStyle,
-      $required: required,
-      className: 'label',
-      $layout: layout,
-      $colon: column.labelProps?.colon === undefined ? this.colon : column.labelProps?.colon
-    }, label), content, this.props.debugMode && /*#__PURE__*/React__default.createElement(StyledColumnFooter, null, /*#__PURE__*/React__default.createElement("div", {
-      className: "left"
-    }, /*#__PURE__*/React__default.createElement(ColumnMessage, {
-      value: this.getValidateValue(_parentName.join('.')),
-      record: this.getValue()
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "right"
-    }))
-    // validateValue?.[name]!==undefined && <StyledColumnFooter $layout={layout}>
-    //     {/* {validateValue?.[name]?.$message} */}
-    //     <ColumnMessage value={validateValue?.[name]}/>
-    // </StyledColumnFooter>
-    );
   }
-  createColumns(parentValue, columns, parentName, fullname) {
-    return columns?.map((column, index) => {
-      return this.createColumn(parentValue, column, index, parentName, column.name ? [...fullname, column.name] : fullname);
-    });
+  noData() {
+    const data = this.getDataSource();
+    return data == null || data.length == 0;
   }
+  //------------------------------------------------------------------------------------
   renderMe() {
-    return /*#__PURE__*/React__default.createElement(StyleJRFields, {
-      className: 'jr-fields',
-      style: this.props.typeStyle
-    }, /*#__PURE__*/React__default.createElement(StyledGrid, {
-      cols: this.props.cols,
-      style: this.props.gridStyle,
-      className: 'jr-grid',
-      $gap: this.props.gap ?? '8px'
-    }, this.createColumns(this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue(), this.props.columns, this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.dataSourceName ? [this.props.dataSourceName] : [])));
+    return /*#__PURE__*/React__default.createElement(StyledJRTable, {
+      className: `${this.props.className ?? ''} jr-table ${this.props.onRowClick ? 'row-highlightable' : ''}`
+    }, /*#__PURE__*/React__default.createElement("table", {
+      className: 'jr-table-table'
+    }, /*#__PURE__*/React__default.createElement(TBodies, {
+      table: this,
+      leafColumns: this.state.leafColumns,
+      groupHeader: this.props.groupHeader,
+      groupFooter: this.props.groupFooter,
+      dataSource: this.getDataSource(),
+      onRowClick: this.props.onRowClick
+    }), /*#__PURE__*/React__default.createElement(TFoot, {
+      columns: this.props.footColumns,
+      table: this
+    }), /*#__PURE__*/React__default.createElement(THead, {
+      columns: this.state.columns,
+      leafColumns: this.state.leafColumns,
+      table: this
+    })), this.noData() && /*#__PURE__*/React__default.createElement("div", {
+      className: 'empty'
+    }));
   }
-
-  // render(){
-  //     return this.renderMe()
-  // }
 }
 
+// export const FTable=JRFrameHOC(JRTable)
+// export const WTable=JRWindowHOC(JRTable)
+
 const StyledJRFrame = styled.div`
     display:flex;
     flex:1;
@@ -5827,4 +6101,73 @@ class JRTestReact extends JRSubmit {
   }
 }
 
-export { JRButton, JRFields, JRFrame, JRSubmit, JRTable, JRTestReact, JRWindow };
+class AlertWindow extends JRWindow {
+  renderMe() {
+    return this.getValue()?.message;
+  }
+}
+const StyledAlert = styled(AlertWindow)`
+    .body{
+        display: flex;
+        align-items: center;
+        padding: 20px;
+    }
+        
+    footer{
+        display: flex;
+        justify-content: end;
+        padding: 8px;
+    }
+`;
+function JRAlertWindow({
+  title,
+  message,
+  container,
+  ...props
+}) {
+  const [open, setOpen] = useState(true);
+  return /*#__PURE__*/React__default.createElement(StyledAlert, _extends({
+    initValue: {
+      message
+    },
+    width: 440,
+    height: 180,
+    maskOn: 'play'
+  }, props, {
+    open: open,
+    setOpen: setOpen,
+    popup: true,
+    title: title ?? ''
+    // onOpen={()=>{
+    //     po('Open+++++++++++++++++')
+    // }}
+    ,
+    onClose: () => {
+      container.remove();
+    },
+    bottom: function () {
+      return /*#__PURE__*/React__default.createElement("button", {
+        onClick: () => {
+          setOpen(false);
+        }
+      }, "OK");
+    }
+  }), message);
+}
+function JRAlert(props) {
+  const body = document.body;
+  const containerId = 'jr-alert-div';
+  let container = document.getElementById(containerId);
+  if (container == null) {
+    container = document.createElement('div');
+    container.id = containerId;
+    body.appendChild(container);
+  }
+  const jrAlerDiv = document.createElement('div');
+  container.appendChild(jrAlerDiv);
+  createRoot(jrAlerDiv).render(/*#__PURE__*/React__default.createElement(JRAlertWindow, _extends({}, props, {
+    container: jrAlerDiv
+  })));
+}
+
+export { JRAlert, JRButton, JRFields, JRFrame, JRSubmit, JRTable, JRTestReact, JRWindow };