jrs-react 1.2.13 → 1.2.14

package/build/index.js

@@ -3502,7 +3502,7 @@ class JRSubmit extends React__default["default"].Component {
   }
   setRawValue(rawValue) {
     this.setState({
-      rawValue: JSON.parse(JSON.stringify(rawValue ?? ''))
+      rawValue: rawValue != null ? JSON.parse(JSON.stringify(rawValue)) : null
     });
   }
   reset() {
@@ -3510,8 +3510,6 @@ class JRSubmit extends React__default["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({
@@ -3735,7 +3733,7 @@ const StyledJRFrame$1 = styled__default["default"].div`
     >main{
         display:flex;
         flex:1;
-        overflow:overlay;
+        overflow:hidden;
         flex-direction: column;
         > *{
             XXborder:1px solid gray;
@@ -3750,6 +3748,13 @@ const StyledJRFrame$1 = styled__default["default"].div`
             display:flex;
             flex:1;
             overflow:hidden;
+
+            >main{
+                display:flex;
+                flex:1;
+                overflow: overlay;
+            }
+
         }
         >footer{
             XXborder:1px solid  blue;
@@ -3757,11 +3762,11 @@ const StyledJRFrame$1 = styled__default["default"].div`
         }
 
     }
-
 `;
 class JRFrame extends JRSubmit {
   renderer() {
     return /*#__PURE__*/React__default["default"].createElement(StyledJRFrame$1, {
+      id: this.props.id,
       style: this.props.style,
       className: `${this.props.className} jr-frame`
     }, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
@@ -3778,7 +3783,9 @@ class JRFrame extends JRSubmit {
       config: this.props.left,
       me: this,
       className: 'left'
-    }), this.renderMe?.() ?? this.props.children, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }), /*#__PURE__*/React__default["default"].createElement("main", {
+      className: 'body'
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
       tag: "div",
       config: this.props.right,
       me: this,
@@ -3794,9 +3801,6 @@ class JRFrame extends JRSubmit {
       className: 'end'
     }));
   }
-  // renderMe(){
-  //     return <div style={{flex:1}}>Render me</div>
-  // }
 }
 
 const StyledSlider$1 = styled__default["default"].div`
@@ -3908,7 +3912,7 @@ const Ths$1 = ({
       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["default"].createElement(Slider$1, {
+    }, flexType(column.label, table), (table.props.resizableColumns === undefined || table.props.resizableColumns) && /*#__PURE__*/React__default["default"].createElement(Slider$1, {
       table: table,
       thRef: thRef,
       column: column
@@ -4394,7 +4398,15 @@ const StyledJRTable = styled__default["default"].div`
         display:flex;
         justify-content: center;
         align-items: center;
+
+        
     }    
+
+    > .empty::after{
+        content:'無資料';
+        position: block;
+    }
+
 `;
 
 var _path;
@@ -4427,9 +4439,12 @@ const StyledTitle = styled__default["default"].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{
+    background:#464646;
+    color: white;
+    display: flex;
+    align-items: center;
+    min-height: min-content;
+    XX&:active{
         cursor: grabbing;
     }
     
@@ -4453,6 +4468,7 @@ const StyledTitle = styled__default["default"].div`
 
 
         >button{
+            outline: unset;
             display:flex;
             align-items: center;
             justify-content: center;
@@ -4469,10 +4485,11 @@ const StyledTitle = styled__default["default"].div`
                 color:white;
             }
             >svg{
-                color:black;
+                color:#bababa;
                 width:14px;
                 height:14px;
                 cursor: pointer;
+                stroke-width: 3;
             }
         }
         >button.danger:hover{
@@ -4490,13 +4507,68 @@ class TitleBar extends React__default["default"].Component {
   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 => {
+    po('stop');
     e.preventDefault();
     if (this.moved) {
-      const {
-        clientX,
-        clientY
-      } = e;
       const {
         height: titleBarHeight
       } = this.props.titleBarRef.current.getBoundingClientRect();
@@ -4506,26 +4578,18 @@ class TitleBar extends React__default["default"].Component {
         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 (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';
     }
+    document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
     window.removeEventListener('mouseup', this.stop);
     window.removeEventListener('mousemove', this.preMove);
   };
   move = e => {
+    po('move');
     e.preventDefault();
     this.moved = true;
     const {
@@ -4540,55 +4604,77 @@ class TitleBar extends React__default["default"].Component {
     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;
-    }
+
+    // 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 {
       clientX,
-      clientY
+      clientY,
+      ...oe
     } = 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) {
+    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`;
-      this.props.window.orgHeight = null;
+    } else {
+      this.remember(e);
     }
-    w.style.transition = 'left .1s ease-in, height .1s ease-in';
+    document.body.style.cursor = 'grabbing';
+    document.body.style.overflow = this.props.window.orgBodyOverflow;
     setTimeout(() => {
       window.addEventListener('mousemove', this.move);
-    }, 100);
+    }, 50);
     window.removeEventListener('mousemove', this.preMove);
   };
   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)';
-    document.body.style.cursor = 'grabbing';
     window.addEventListener('mousemove', this.preMove);
     window.addEventListener('mouseup', this.stop);
   }
+  onDoubleClick() {
+    po('onDoubleClick');
+  }
   render() {
     return /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       ref: this.props.titleBarRef,
       draggable: "false",
       onMouseDown: e => {
         this.start(e);
-      }
+      },
+      onDoubleClick: this.adjustScreen
     }, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
       tag: "div",
       config: this.props.title ?? '',
@@ -4597,8 +4683,15 @@ class TitleBar extends React__default["default"].Component {
     }), /*#__PURE__*/React__default["default"].createElement("nav", null, this.props.window.props.setOpen ? /*#__PURE__*/React__default["default"].createElement(JRButton, {
       icon: /*#__PURE__*/React__default["default"].createElement(SvgX, null),
       className: 'danger',
-      onClick: () => {
+      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));
   }
@@ -4945,9 +5038,11 @@ class Slider extends React__default["default"].Component {
     });
   };
   preMove = () => {
-    this.props.windowRef.current.style.height = `${this.props.window.orgHeight}px`;
-    this.data.height = this.props.window.orgHeight;
-    this.props.window.orgHeight = null;
+    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;
+    }
     window.removeEventListener('mousemove', this.preMove);
     setTimeout(() => {
       window.addEventListener('mousemove', this.move);
@@ -4964,6 +5059,9 @@ class Slider extends React__default["default"].Component {
       width,
       height
     } = this.props.windowRef.current.getBoundingClientRect();
+    if (this.props.direction.indexOf('s') > -1) {
+      this.props.window.orgHeight = null;
+    }
     this.data = {
       x,
       y,
@@ -4991,770 +5089,960 @@ class Slider extends React__default["default"].Component {
   }
 }
 
-const StyledJRWindow = styled__default["default"].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);
-
-    top: ${({
-  $y
-}) => $y}px;
-    left: ${({
-  $x
-}) => $x}px;
-    width: ${({
-  $width = 300
-}) => `${$width}px`};
-    height: ${({
-  $height = 300
-}) => `${$height}px`};
-    overflow: hidden;
+const StyleJRFields = styled__default["default"].main`
+    --column-bd-color:#cccccc;
+    --column-b-color:unset;
+    --column-b-hover-color:#ffffff;
 
-    display: flex;
     flex-direction: column;
-    overflow: hidden;
+    flex:1;
+    overflow: overlay;
     
-    > 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;
-        }
-    }
-
-    @container (min-width: 700px) {
-        &{
-            border: 1px solid red;
+    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["default"].createRef();
-    this.titleBarRef = /*#__PURE__*/React__default["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["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["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TitleBar, {
-      titleBarRef: this.titleBarRef,
-      windowRef: this.ref,
-      window: this,
-      title: this.props.title,
-      thick: this.thick
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer())), /*#__PURE__*/React__default["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__default["default"].div`
+    overflow: auto;    
+    flex:1;
+`;
+const StyledGrid = styled__default["default"].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__default["default"].div`
+`;
+const StyledColumn = styled__default["default"].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__default["default"].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["default"].createRef();
-  }
-  UNSAFE_componentWillMount() {
-    this.setColumns(this.props.columns ?? []);
+    return `text-align: end;
+                padding: 3px 8px;
+            `;
   }
+}}
 
-  //------------------------------------------------------------------------------------
-  getChecked() {
-    return [1, 2, 3, 4];
+    ${({
+  $required
+}) => {
+  if ($required !== undefined && $required) return `
+                &:not(:empty)::before{
+                    padding-right:4px;
+                    color:red;
+                    content:'*';
+                }
+            `;
+}}
+
+    ${({
+  $colon
+}) => {
+  if ($colon) {
+    return `
+                &:not(:empty)::after{
+                    content:'${$colon}';
+                }
+            `;
   }
-  checkableColumn(props) {
-    return {
-      //方法1
-      render({
-        value,
-        onChange
-      }) {
-        return /*#__PURE__*/React__default["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
-    // }
+}}
+
+`;
+const StyledColumnValue = styled__default["default"].main`
+    flex:1;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 4px 0;
+
+    text-align: start;
+    ${({
+  $validateValue
+}) => {
+  if ($validateValue != null) {
+    return `
+                > * {
+                    xborder:1px solid red;
+                }
+            `;
   }
-  deletableColumn({
-    name = 'deletable',
-    sendValue,
-    sendName,
-    valueName,
-    ...props
-  }) {
-    return {
-      render({
-        value,
-        onChange
-      }) {
-        return /*#__PURE__*/React__default["default"].createElement("checkbox", {
-          checked: value,
-          onChange: e => {
-            onChange(e.target.checked);
-          }
-        });
-      },
-      align: 'center',
-      name,
-      label() {
-        return /*#__PURE__*/React__default["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 StyledColumnFooter = styled__default["default"].div`
+    &:has(.left:empty):has(.right:empty)
+    {
+        border:1px solid blue;
+        display: none;
+    }
+
+    ${({
+  $layout
+}) => {
+  if ($layout == 'v') {
+    return ``;
+  } else {
+    return `grid-column-start:2;`;
   }
-  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
+}}
+    height:25px;
+    color:#ff6060;
+
+    display: flex;
+    justify-content: space-between;
+
+    .left:{
+        xflex:1;
+    }
+    .right{
+        color:gray;
+        xflex:1;
+    }
+`;
+class JRFields extends JRWindow {
+  UNSAFE_componentWillMount() {
+    this.#initValidatorValue();
+  }
+  reset() {
+    this.clearTestValue();
+    super.reset();
+  }
+  setValue(value, reset) {
+    super.setValue(value, reset);
+    if (reset) {
+      this.clearTestValue();
+    }
+  }
+  //Validate-----------------------------------------------------------------------------------
+  #initValidatorValue() {
+    if (this.validateValueFrom == 'state') {
+      this.setState({
+        validatorValue: {}
       });
-      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);
+    }
+  }
+  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
           }
-        };
-        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];
-        };
+        this.setState({
+          testValue
+        });
       }
-      return {
-        colSpan: 1
+    }
+  }
+  getTestValue(fullname) {
+    if (fullname) {
+      return this.state?.testValue?.[fullname];
+    } else {
+      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);
+      });
+    }
+  }
+  #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);
+  }
+  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();
+    });
+  }
+
+  //--------------------------------------------------------------------------------------
+  get columnsFrom() {
+    return this.props.initColumns !== undefined ? 'state' : 'props';
+  }
+  getColumns() {
+    return this[this.columnsFrom]?.columns;
+  }
+  //-------------------------------------------------------------------------------------------
+
+  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);
+    }
+    if (type) {
+      const typeStyle = flexType(_typeStyle, this, null);
+      content = /*#__PURE__*/React__default["default"].createElement(StyledColumnValue, {
+        className: 'jr-column-value',
+        style: {
+          gridColumn: label == null ? 'span 2' : null,
+          ..._columnStyle
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(type, {
+        value: value,
+        onChange,
+        record: parentValue,
+        style: {
+          width: '100%',
+          ...typeStyle
+        },
+        ...column
+      }));
+    } else if (column.columns) {
+      content = /*#__PURE__*/React__default["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["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);
     }
+    const layout = labelProps?.layout;
+    const colon = labelProps?.colon === undefined ? ':' : labelProps.colon;
+    const labelStyle = column.labelProps?.style ?? this.props.labelProps?.style ?? {};
+    return /*#__PURE__*/React__default["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["default"].createElement(StyledColumnLabel, {
+      style: labelStyle,
+      $required: column.required,
+      className: 'label',
+      $layout: layout,
+      $colon: colon
+    }, label), content, /*#__PURE__*/React__default["default"].createElement(StyledColumnFooter, {
+      $layout: layout
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "left"
+    }, this.getTestValue(_parentName.join('.'))?.msg?.map(msg => {
+      return msg;
+    })), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "right"
+    })));
   }
-  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;
-    }, {
-      colSpan: 0
+  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);
     });
-    return childrenLength;
   }
-  setColumns([..._columns]) {
-    if (this.props.checkable) _columns.unshift(this.checkableColumn(this.props.checkable));
-    if (this.props.deletable) {
-      _columns.unshift(this.deletableColumn(this.props.deletable));
+  renderMe() {
+    return /*#__PURE__*/React__default["default"].createElement(StyleJRFields, {
+      className: 'jr-fields',
+      style: this.props.typeStyle
+    }, /*#__PURE__*/React__default["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)));
+  }
+}
+
+// export const FFields=JRFrameHOC(JRFields)
+// export const WFields=JRWindowHOC(FFields)
+
+const StyledInput = styled__default["default"].div`
+    display:flex;
+    input:focus{
+        outline: none; 
     }
-    const columns = [];
-    const leafColumns = [];
-    this.initColumns(_columns, 0, columns, leafColumns, [], 0);
-    // po('initColumns',initColumns)
-    this.setState({
-      columns,
-      leafColumns
-    });
+`;
+class JRInput extends React__default["default"].Component {
+  setValue(value) {
+    this.props?.onChange?.(value);
   }
-  //------------------------------------------------------------------------------------
-  setDataSource(dataSource) {}
-  getDataSource() {
-    return this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue();
+  render() {
+    return /*#__PURE__*/React__default["default"].createElement(StyledInput, null, this.input());
   }
-  add(record, index = this.getDataSource()?.length ?? 0, group) {
-    //group 還沒有考慮到
+}
 
-    if (this.getDataSource()) {
-      if (group === undefined) {
-        this.getDataSource().splice(index, 0, record); //.push(record)
-      } else {
-        this.getDataSource()[group].splice(index, 0, record); //.push(record)
-      }
-      this.setValue(this.getValue());
+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 {
-      //未完成. 沒有資料的時候, 要考慮有或沒有dataSourceName的不同處理
-      this.setValue({
-        [this.props.dataSourceName]: [record]
-      });
+      head.appendChild(style);
     }
+  } else {
+    head.appendChild(style);
   }
-  noData() {
-    const data = this.getDataSource();
-    return data == null || data.length == 0;
-  }
-  //------------------------------------------------------------------------------------
-  renderMe() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledJRTable, {
-      className: `${this.props.className ?? ''} jr-table ${this.props.onRowClick ? 'row-highlightable' : ''}`
-    }, /*#__PURE__*/React__default["default"].createElement("table", {
-      className: 'jr-table-table'
-    }, /*#__PURE__*/React__default["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["default"].createElement(TFoot, {
-      columns: this.props.footColumns,
-      table: this
-    }), /*#__PURE__*/React__default["default"].createElement(THead, {
-      columns: this.state.columns,
-      leafColumns: this.state.leafColumns,
-      table: this
-    })), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: 'empty'
-    }, this.noData() && '無資料'));
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
   }
 }
 
-const StyleJRFields = styled__default["default"].main`
-    --column-bd-color:#cccccc;
-    --column-b-color:unset;
-    --column-b-hover-color:#ffffff;
+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__default["default"].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: ${({
+  $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;
-    flex:1;
-    overflow: overlay;
-    padding: 10px;
+    overflow: hidden;
     
-    color:#525252;
-
-    >.jr-grid{
-        .jr-column{
-            > .label{
-                color:#525252;
-                text-wrap: nowrap;
-                padding: 3px 8px;
-                font-weight: bold;
-            }
-            > .jr-column-value{
-            }
+    > 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["default"].createRef();
+    this.titleBarRef = /*#__PURE__*/React__default["default"].createRef();
+    this.init();
+  }
+  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;
 
-function checkMap(_name, inputValue, mapValue, nameList) {
-  if (nameList.length) {
-    const name = nameList.shift();
-    if (typeof mapValue[name] != 'object') {
-      mapValue[name] = {};
+    // this[on?'addMaskToTarget':'removeMaskFromTarget'](target)
+    target?.classList[on ? 'add' : 'remove']('withMask');
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    if (this.props.maskOn && this.props.open) {
+      this.maskOnTarget(this.props.open);
+    }
+    if (this.props.open) {
+      this.open();
     }
-    checkMap(_name, inputValue, mapValue[name], nameList);
-  } else {
-    mapValue[_name] = inputValue;
   }
-}
-styled__default["default"].div`
-    overflow: auto;    
-    flex:1;
-`;
-const StyledGrid = styled__default["default"].div`
-    display: grid;
-    grid: ${({
-  grid,
-  cols,
-  children
-}) => grid ? grid : `auto / ${Array(cols ?? 1).fill().map(() => "1fr").join(" ")}`};
+  open() {
+    this.props.onOpen?.bind(this)();
+  }
+  close() {
+    this.props.onClose?.bind(this)();
+  }
+  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);
+      }
+    }
+  }
+  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 ? /*#__PURE__*/React__default["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["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TitleBar, {
+      titleBarRef: this.titleBarRef,
+      windowRef: this.ref,
+      window: this,
+      title: this.props.title,
+      thick: this.thick
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer())), /*#__PURE__*/React__default["default"].createElement(Sliders, {
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    })) : '' : super.renderer();
+  }
+}
 
-    gap: ${({
-  $gap
-}) => $gap};
-`;
 styled__default["default"].div`
-`;
-const StyledColumn = styled__default["default"].div`
+    display:flex;
     flex:1;
-    display: grid;
+    overflow:hidden;
 
-    ${({
-  $layout,
-  $labelWidth,
-  $hasLabel,
-  $valueWidth
-}) => {
-  if ($layout == 'v') {
-    return `grid: auto 1fr / 1fr;`;
-  } else {
-    return `grid: 1fr / ${$hasLabel ? $labelWidth : ''} ${$valueWidth};`;
-  }
-}}
-`;
-const StyledColumnLabel = styled__default["default"].div`
-    ${({
-  $layout
-}) => {
-  if ($layout == 'v') {
-    return `text-align: start;`;
-  } else {
-    return `text-align: end;`;
-  }
-}}
+    > *{
+        Xborder:1px solid gray;
+    }
+    >main{
+        display:flex;
+        flex:1;
+        overflow:overlay;
+        flex-direction: column;
+        > *{
+            XXborder:1px solid gray;
+            XXmin-height:30px;
+        }
 
-    ${({
-  $required
-}) => {
-  if ($required !== undefined && $required) return `
-                &:not(:empty)::before{
-                    padding-right:4px;
-                    color:red;
-                    content:'*';
-                }
-            `;
-}}
+        >header{
+            XXborder:1px solid  red;
+            XXoverflow: overlay;
+        }
+        >main{
+            display:flex;
+            flex:1;
+            overflow:hidden;
+        }
+        >footer{
+            XXborder:1px solid  blue;
+            overflow: overlay;
+        }
 
-    ${({
-  $colon
-}) => {
-  if ($colon) {
-    return `
-                &:not(:empty)::after{
-                    content:'${$colon}';
-                }
-            `;
-  }
-}}
+    }
 
 `;
-const StyledColumnValue = styled__default["default"].main`
-    flex:1;
-    Xdisplay:flex;
+
+styled__default["default"].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);
+
+    top: ${({
+  $y
+}) => $y}px;
+    left: ${({
+  $x
+}) => $x}px;
+    width: ${({
+  $width = 300
+}) => `${$width}px`};
+    height: ${({
+  $height = 300
+}) => `${$height}px`};
+    overflow: hidden;
+
+    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__default["default"].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;
+  }
+};
+class JRTable extends JRWindow {
+  constructor(props) {
+    super(props);
+    this.colGroupRef = /*#__PURE__*/React__default["default"].createRef();
+  }
+  UNSAFE_componentWillMount() {
+    this.setColumns(this.props.columns ?? []);
   }
-}}
-    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 == '') {
+  //------------------------------------------------------------------------------------
+  checkableColumn(props) {
+    return {
+      //方法1
+      render({
+        value,
+        onChange
+      }) {
+        return /*#__PURE__*/React__default["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
+    // }
+  }
+  deletableColumn({
+    name = 'deletable',
+    sendValue,
+    sendName,
+    valueName,
+    ...props
+  }) {
     return {
-      msg: this.msg ?? 'This is required'
+      render({
+        value,
+        onChange
+      }) {
+        return /*#__PURE__*/React__default["default"].createElement("checkbox", {
+          checked: value,
+          onChange: e => {
+            onChange(e.target.checked);
+          }
+        });
+      },
+      align: 'center',
+      name,
+      label() {
+        return /*#__PURE__*/React__default["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
     };
   }
-}
-class JRFields extends JRWindow {
-  UNSAFE_componentWillMount() {
-    this.#initValidateValue();
-  }
-  reset() {
-    this.clearValidateValue();
-    super.reset();
-  }
-  setValue(value, reset) {
-    super.setValue(value, reset);
-    if (reset) {
-      this.clearValidateValue();
-    }
-  }
-  //-----------------------------------------------------------------------------------
-  #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["default"].createElement(StyledColumnValue, {
-        className: 'jr-column-value',
-        style: {
-          gridColumn: label == null ? 'span 2' : null
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(type, {
-        value: value,
-        onChange,
-        record: parentValue,
-        style: {
-          width: '100%',
-          ...typeStyle
-        },
-        ...column
-      }));
-    } else if (column.columns) {
-      content = /*#__PURE__*/React__default["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["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["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["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["default"].createElement(StyledColumnFooter, null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "left"
-    }, /*#__PURE__*/React__default["default"].createElement(ColumnMessage, {
-      value: this.getValidateValue(_parentName.join('.')),
-      record: this.getValue()
-    })), /*#__PURE__*/React__default["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["default"].createElement(StyleJRFields, {
-      className: 'jr-fields',
-      style: this.props.typeStyle
-    }, /*#__PURE__*/React__default["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["default"].createElement(StyledJRTable, {
+      className: `${this.props.className ?? ''} jr-table ${this.props.onRowClick ? 'row-highlightable' : ''}`
+    }, /*#__PURE__*/React__default["default"].createElement("table", {
+      className: 'jr-table-table'
+    }, /*#__PURE__*/React__default["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["default"].createElement(TFoot, {
+      columns: this.props.footColumns,
+      table: this
+    }), /*#__PURE__*/React__default["default"].createElement(THead, {
+      columns: this.state.columns,
+      leafColumns: this.state.leafColumns,
+      table: this
+    })), this.noData() && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: 'empty'
+    }));
   }
-
-  // render(){
-  //     return this.renderMe()
-  // }
 }
 
+// export const FTable=JRFrameHOC(JRTable)
+// export const WTable=JRWindowHOC(JRTable)
+
 const StyledJRFrame = styled__default["default"].div`
     display:flex;
     flex:1;