jrs-react 1.2.6 → 1.2.8

package/build/index.es.js

@@ -2807,7 +2807,7 @@ function requireReact () {
 }
 
 var reactExports = requireReact();
-var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
+var React$1 = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
 
 function bind(fn, thisArg) {
   return function wrap() {
@@ -6066,7 +6066,7 @@ const whatType = ({
     // const style=flexType(typeStyle,me,{},{})
     // return 'type'
     const typeStyle = typeof _typeStyle === 'function' ? _typeStyle?.bind(me)() : _typeStyle;
-    return /*#__PURE__*/React.createElement(type, {
+    return /*#__PURE__*/React$1.createElement(type, {
       style: typeStyle
     });
   } else if (render) {
@@ -6217,9 +6217,9 @@ const StyledCover = styled.div`
 const Cover = ({
   children
 }) => {
-  return /*#__PURE__*/React.createElement(StyledCover, null, children);
+  return /*#__PURE__*/React$1.createElement(StyledCover, null, children);
 };
-class JRSubmit extends React.Component {
+class JRSubmit extends React$1.Component {
   #methods = ['get', 'post', 'put', 'patch', 'delete', 'download'];
   constructor(props) {
     super(props);
@@ -6290,6 +6290,8 @@ class JRSubmit extends React.Component {
   }
   setValue(value, reset = false) {
     if (this.props.onChange) {
+      po('name', this.props.name);
+      po('onChange', value);
       this.props.onChange(value);
     } else {
       this.setState({
@@ -6467,14 +6469,14 @@ class JRSubmit extends React.Component {
     config.callback?.bind(this)(isSuccess, response, payload);
   };
   showMessage(success, message) {
-    po('success', success);
-    po('message', message);
+    // po('success',success)
+    // po('message',message)
   }
   renderer() {
     return;
   }
   render() {
-    return this.props.cover != null && this.state?.lodaing ? /*#__PURE__*/React.createElement(Cover, null, flexType(this.props.cover, this, null, null)) : this.renderer();
+    return this.props.cover != null && this.state?.lodaing ? /*#__PURE__*/React$1.createElement(Cover, null, flexType(this.props.cover, this, null, null)) : this.renderer();
   }
 }
 
@@ -6492,10 +6494,14 @@ const FreeType$1 = ({
     const content = config.bind(me)({
       setStyle
     });
-    return /*#__PURE__*/React.createElement(Tag, {
+    return /*#__PURE__*/React$1.createElement(Tag, {
       className: className,
       style: style
     }, content);
+  } else if (typeof config === 'string') {
+    return /*#__PURE__*/React$1.createElement(Tag, {
+      className: className
+    }, config);
   }
 };
 const StyledJRFrame$1 = styled.div`
@@ -6513,7 +6519,7 @@ const StyledJRFrame$1 = styled.div`
         flex-direction: column;
         > *{
             XXborder:1px solid gray;
-            min-height:30px;
+            XXmin-height:30px;
         }
 
         >header{
@@ -6535,49 +6541,45 @@ const StyledJRFrame$1 = styled.div`
 `;
 class JRFrame extends JRSubmit {
   renderer() {
-    return /*#__PURE__*/React.createElement(StyledJRFrame$1, {
+    return /*#__PURE__*/React$1.createElement(StyledJRFrame$1, {
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React.createElement(FreeType$1, {
+    }, /*#__PURE__*/React$1.createElement(FreeType$1, {
       tag: "div",
       config: this.props.start,
       me: this,
       className: 'start'
-    }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FreeType$1, {
+    }), /*#__PURE__*/React$1.createElement("main", null, /*#__PURE__*/React$1.createElement(FreeType$1, {
       tag: "header",
       config: this.props.top,
       me: this
-    }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FreeType$1, {
+    }), /*#__PURE__*/React$1.createElement("main", null, /*#__PURE__*/React$1.createElement(FreeType$1, {
       tag: "div",
       config: this.props.left,
       me: this,
       className: 'left'
-    }), this.renderMe(), /*#__PURE__*/React.createElement(FreeType$1, {
+    }), this.renderMe?.() ?? this.props.children, /*#__PURE__*/React$1.createElement(FreeType$1, {
       tag: "div",
       config: this.props.right,
       me: this,
       className: 'right'
-    })), /*#__PURE__*/React.createElement(FreeType$1, {
+    })), /*#__PURE__*/React$1.createElement(FreeType$1, {
       tag: "footer",
       config: this.props.bottom,
       me: this
-    })), /*#__PURE__*/React.createElement(FreeType$1, {
+    })), /*#__PURE__*/React$1.createElement(FreeType$1, {
       tag: "div",
       config: this.props.end,
       me: this,
       className: 'end'
     }));
   }
-  renderMe() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: 1
-      }
-    }, "Render me");
-  }
+  // renderMe(){
+  //     return <div style={{flex:1}}>Render me</div>
+  // }
 }
 
-const StyledSlider = styled.div`
+const StyledSlider$1 = styled.div`
     position: absolute;
     top: 0;
     right: 0;
@@ -6592,10 +6594,10 @@ const StyledSlider = styled.div`
         border-right:1px dashed gray;
     }
 `;
-class Slider extends React.Component {
+class Slider$1 extends React$1.Component {
   constructor() {
     super();
-    this.sliderRef = /*#__PURE__*/React.createRef();
+    this.sliderRef = /*#__PURE__*/React$1.createRef();
   }
   stop = e => {
     this.sliderRef.current.classList.remove('resizing');
@@ -6644,7 +6646,7 @@ class Slider extends React.Component {
   }
   render() {
     const column = this.props.column;
-    return /*#__PURE__*/React.createElement(StyledSlider, {
+    return /*#__PURE__*/React$1.createElement(StyledSlider$1, {
       ref: this.sliderRef,
       onMouseDown: e => {
         this.start(this.props.thRef, column);
@@ -6657,7 +6659,7 @@ const Colgroup = ({
   leafColumns,
   colGroupRef
 }) => {
-  return /*#__PURE__*/React.createElement("colgroup", {
+  return /*#__PURE__*/React$1.createElement("colgroup", {
     ref: colGroupRef
   }, leafColumns?.map((_column, index) => {
     const {
@@ -6667,7 +6669,7 @@ const Colgroup = ({
     const style = {
       width
     };
-    return /*#__PURE__*/React.createElement("col", {
+    return /*#__PURE__*/React$1.createElement("col", {
       style: style,
       key: index
     });
@@ -6680,13 +6682,13 @@ const Ths$1 = ({
   table
 }) => {
   return rowColumn?.map((column, colIndex) => {
-    const thRef = /*#__PURE__*/React.createRef();
-    return /*#__PURE__*/React.createElement("th", {
+    const thRef = /*#__PURE__*/React$1.createRef();
+    return /*#__PURE__*/React$1.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.createElement(Slider, {
+    }, flexType(column.label, table), table.props.resizableColumns === true && /*#__PURE__*/React$1.createElement(Slider$1, {
       table: table,
       thRef: thRef,
       column: column
@@ -6700,10 +6702,10 @@ const HeadTrs = ({
 }) => {
   const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
   return columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React.createElement("tr", {
+    return /*#__PURE__*/React$1.createElement("tr", {
       className: trClassName,
       key: rowIndex
-    }, /*#__PURE__*/React.createElement(Ths$1, {
+    }, /*#__PURE__*/React$1.createElement(Ths$1, {
       deep: columns.length - 1,
       rowColumn: rowColumn,
       rowIndex: rowIndex,
@@ -6716,10 +6718,10 @@ const THead = ({
   leafColumns,
   table
 }) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(HeadTrs, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement(HeadTrs, {
     columns: columns,
     table: table
-  })), /*#__PURE__*/React.createElement(Colgroup, {
+  })), /*#__PURE__*/React$1.createElement(Colgroup, {
     leafColumns: leafColumns,
     colGroupRef: table.colGroupRef
   }));
@@ -6744,7 +6746,7 @@ const FootThs = ({
     // }
     let style = flexType(column.style, table, {}, {});
     const content = whatType(column, table, column.label);
-    return /*#__PURE__*/React.createElement("th", {
+    return /*#__PURE__*/React$1.createElement("th", {
       style: style,
       colSpan: column.colSpan,
       rowSpan: column.rowSpan
@@ -6756,24 +6758,24 @@ const TFoot = ({
   columns
 }) => {
   const trs = columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React.createElement("tr", {
+    return /*#__PURE__*/React$1.createElement("tr", {
       key: rowIndex
-    }, /*#__PURE__*/React.createElement(FootThs, {
+    }, /*#__PURE__*/React$1.createElement(FootThs, {
       columns: rowColumn,
       table: table
     }));
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tfoot", null, trs));
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("tfoot", null, trs));
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$3() {
+  return _extends$3 = 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);
+  }, _extends$3.apply(null, arguments);
 }
 
 styled.tbody`
@@ -6814,7 +6816,7 @@ const Ths = ({
       content = column.label;
     }
     // style.textAlign=align
-    return /*#__PURE__*/React.createElement("th", {
+    return /*#__PURE__*/React$1.createElement("th", {
       key: colIndex,
       style: {
         textAlign: align,
@@ -6834,10 +6836,10 @@ const GroupColumns = ({
 }) => {
   const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
   return columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React.createElement("tr", {
+    return /*#__PURE__*/React$1.createElement("tr", {
       className: trClassName,
       key: rowIndex
-    }, /*#__PURE__*/React.createElement(Ths, {
+    }, /*#__PURE__*/React$1.createElement(Ths, {
       table: table,
       groupData: groupData,
       groupIndex: tbodyIndex,
@@ -6857,7 +6859,7 @@ styled.tr`
     }
 `;
 const GroupHeader = props => {
-  return /*#__PURE__*/React.createElement(GroupColumns, _extends({
+  return /*#__PURE__*/React$1.createElement(GroupColumns, _extends$3({
     trClassName: 'jr-group-header'
   }, props));
 };
@@ -6868,7 +6870,7 @@ styled.tr`
     }
 `;
 const GroupFooter = props => {
-  return /*#__PURE__*/React.createElement(GroupColumns, _extends({
+  return /*#__PURE__*/React$1.createElement(GroupColumns, _extends$3({
     trClassName: 'jr-group-footer'
   }, props));
 };
@@ -6915,7 +6917,7 @@ const Td = ({
     const typeStyle = flexType(_typeStyle, table, {
       record
     }, {});
-    content = /*#__PURE__*/React.createElement(type, {
+    content = /*#__PURE__*/React$1.createElement(type, {
       onChange: _onChange ? e => {
         _onChange?.bind(table)(e, {
           value,
@@ -6943,7 +6945,7 @@ const Td = ({
   } else {
     content = value;
   }
-  return /*#__PURE__*/React.createElement("td", {
+  return /*#__PURE__*/React$1.createElement("td", {
     colSpan: style.colSpan,
     rowSpan: style.rowSpan,
     style: {
@@ -6962,7 +6964,7 @@ const Tds = ({
   trIndex
 }) => {
   return leafColumns?.map((column, tdIndex) => {
-    return /*#__PURE__*/React.createElement(Td, {
+    return /*#__PURE__*/React$1.createElement(Td, {
       column: column,
       key: tdIndex,
       record: record,
@@ -6987,14 +6989,14 @@ const TBody = ({
     table,
     tbodyIndex
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tbody", {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("tbody", {
     key: `tbody${tbodyIndex}`
-  }, groupData?.length > 0 && /*#__PURE__*/React.createElement(GroupHeader, _extends({
+  }, groupData?.length > 0 && /*#__PURE__*/React$1.createElement(GroupHeader, _extends$3({
     groupData: groupData,
     columns: groupHeader
-  }, neededProps)), groupData?.map((record, trIndex) => {
+  }, neededProps)), groupData?.map?.((record, trIndex) => {
     const onRowClick = table.props.onRowClick?.bind(table);
-    return /*#__PURE__*/React.createElement("tr", {
+    return /*#__PURE__*/React$1.createElement("tr", {
       key: trIndex,
       onClick: () => {
         onRowClick?.({
@@ -7003,13 +7005,13 @@ const TBody = ({
           groupIndex: tbodyIndex
         });
       }
-    }, /*#__PURE__*/React.createElement(Tds, _extends({
+    }, /*#__PURE__*/React$1.createElement(Tds, _extends$3({
       record: record,
       trIndex: trIndex
     }, neededProps, {
       leafColumns: leafColumns
     })));
-  }), groupData?.length > 0 && /*#__PURE__*/React.createElement(GroupFooter, _extends({
+  }), groupData?.length > 0 && /*#__PURE__*/React$1.createElement(GroupFooter, _extends$3({
     groupData: groupData,
     columns: groupFooter
   }, neededProps))));
@@ -7027,7 +7029,7 @@ const TBodies = ({
 
   // po('dataSource',dataSource)    
   return dataSource?.map((groupData, tbodyIndex, c) => {
-    return /*#__PURE__*/React.createElement(TBody, {
+    return /*#__PURE__*/React$1.createElement(TBody, {
       key: `tbody${tbodyIndex}`,
       table: table
       // dataSource={dataSource}
@@ -7086,8 +7088,7 @@ const StyledJRTable = styled.div`
 
             th{
                 position: relative;
-                height:24px;
-                padding: 4px;
+                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;
@@ -7176,6 +7177,711 @@ const StyledJRTable = styled.div`
     }    
 `;
 
+var _path$1;
+function _extends$2() { return _extends$2 = 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$2.apply(null, arguments); }
+var SvgX = function SvgX(props) {
+  return /*#__PURE__*/reactExports.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/reactExports.createElement("path", {
+    d: "M18 6 6 18M6 6l12 12"
+  })));
+};
+
+var _rect;
+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 SvgSquare = function SvgSquare(props) {
+  return /*#__PURE__*/reactExports.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
+  }, props), _rect || (_rect = /*#__PURE__*/reactExports.createElement("rect", {
+    width: 18,
+    height: 18,
+    x: 3,
+    y: 3,
+    rx: 2,
+    ry: 2
+  })));
+};
+
+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 SvgMinus = function SvgMinus(props) {
+  return /*#__PURE__*/reactExports.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2
+  }, props), _path || (_path = /*#__PURE__*/reactExports.createElement("path", {
+    d: "M5 12h14"
+  })));
+};
+
+function JRButton({
+  icon,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/React.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;
+    }
+    > 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{
+                width:14px;
+                height:14px;
+                cursor: pointer;
+            }
+        }
+        >button.danger:hover{
+            background: red;
+            color:white;
+        } 
+    }
+`;
+class TitleBar extends React$1.Component {
+  pos1 = 0;
+  pos2 = 0;
+  pos3 = 0;
+  pos4 = 0;
+  x = 0;
+  y = 0;
+  stop = e => {
+    e.preventDefault();
+    if (this.moved) {
+      const {
+        height: titleBarHeight
+      } = this.props.titleBarRef.current.getBoundingClientRect();
+      const {
+        x,
+        y,
+        width,
+        height
+      } = this.props.windowRef.current.getBoundingClientRect();
+      po('y', y);
+      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;
+      }
+      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);
+  };
+  move = e => {
+    e.preventDefault();
+    this.moved = true;
+    const {
+      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.x = w.offsetLeft - this.pos1;
+    this.y = w.offsetTop - this.pos2;
+    if (this.props.window.orgHeight) {
+      w.style.height = `${this.props.window.orgHeight}px`;
+      this.props.window.orgHeight = null;
+    }
+    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.top = this.y + 'px';
+    w.style.left = this.x + 'px';
+  };
+  start(e) {
+    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.move);
+    window.addEventListener('mouseup', this.stop);
+  }
+  render() {
+    return /*#__PURE__*/React$1.createElement(StyledTitle, {
+      ref: this.props.titleBarRef,
+      draggable: "false",
+      onMouseDown: e => {
+        this.start(e);
+      }
+    }, /*#__PURE__*/React$1.createElement(FreeType$1, {
+      tag: "div",
+      config: this.props.title ?? '',
+      me: this.props.window,
+      className: 'title'
+    }), /*#__PURE__*/React$1.createElement("nav", null, /*#__PURE__*/React$1.createElement(JRButton, {
+      icon: /*#__PURE__*/React$1.createElement(SvgMinus, null)
+    }), /*#__PURE__*/React$1.createElement(JRButton, {
+      icon: /*#__PURE__*/React$1.createElement(SvgSquare, null)
+    }), this.props.window.props.setOpen ? /*#__PURE__*/React$1.createElement(JRButton, {
+      icon: /*#__PURE__*/React$1.createElement(SvgX, null),
+      className: 'danger',
+      onClick: () => {
+        this.props.window.props.setOpen(false);
+      }
+    }) : null));
+  }
+}
+
+const directions = ['n', 'e', 's', 'w', 'nww', 'nnw', 'nne', 'nee', 'sse', 'see', 'sww', 'ssw'];
+class Sliders extends React$1.Component {
+  render() {
+    return directions.map((direction, index) => /*#__PURE__*/React$1.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
+  }
+}) => 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};
+
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+
+`;
+class Slider extends React$1.Component {
+  width = '3px';
+  borderWidth = 'px';
+  borderLong = 30;
+  constructor(props) {
+    super(props);
+    this.sliderRef = /*#__PURE__*/React$1.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);
+      }
+    }
+  };
+  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;
+    }
+    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;
+    }
+    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);
+  };
+  move = e => {
+    e.preventDefault();
+    const {
+      clientX,
+      clientY,
+      x: cursorX,
+      y: cursorY
+    } = e;
+    const window = this.props.windowRef.current;
+    const {
+      left,
+      top
+    } = window.getBoundingClientRect();
+    const {
+      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
+    });
+  };
+  start = (e, direction) => {
+    e.preventDefault();
+    const {
+      height: titleBarHeight
+    } = this.props.titleBarRef.current.getBoundingClientRect();
+    let {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    if (direction.indexOf('n') > -1) {
+      if (this.props.window.orgHeight) {
+        height = this.props.window.orgHeight;
+        this.props.window.orgHeight = null;
+      }
+    } else if (direction.indexOf('s') > -1) {
+      this.props.window.orgHeight = null;
+    }
+    this.data = {
+      x,
+      y,
+      width,
+      height,
+      titleBarHeight,
+      direction
+    };
+    this.props.windowRef.current.style.transition = 'unset';
+    document.body.style.cursor = this.directions[this.props.direction].cursor;
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  };
+  render() {
+    return /*#__PURE__*/React$1.createElement(StyledSlider, {
+      $direction: this.directions[this.props.direction],
+      $padding: this.props.padding,
+      onMouseDown: e => {
+        this.start(e, this.props.direction);
+      }
+    });
+  }
+}
+
+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);
+
+    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;
+        }
+    }
+`;
+class JRWindow extends JRFrame {
+  x = 0;
+  y = 0;
+  width = 300;
+  height = 300;
+  padding = 1;
+  thick = 5;
+  constructor(props) {
+    super(props);
+    this.ref = /*#__PURE__*/React$1.createRef();
+    this.titleBarRef = /*#__PURE__*/React$1.createRef();
+    // if(this.props.popup===true)this.renderer=this.renderWindow
+    this.init();
+  }
+  componentWillUpdate(prevProps, prevState, snapshot) {
+    po('componentWillUpdate-------------------------');
+    if (this.props.popup === true && this.props.open === true && prevProps.open === false) {
+      this.props.onOpen?.bind(this)();
+    }
+  }
+  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$1.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
+      // onMouseDown={()=>{
+      //     po('onFocus')
+      //     this.ref.current.style.zIndex=100
+      // }}
+    }, /*#__PURE__*/React$1.createElement("main", null, /*#__PURE__*/React$1.createElement(TitleBar, {
+      titleBarRef: this.titleBarRef,
+      windowRef: this.ref,
+      window: this,
+      title: this.props.title,
+      thick: this.thick
+    }), /*#__PURE__*/React$1.createElement("main", null, super.renderer())), /*#__PURE__*/React$1.createElement(Sliders, {
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    })) : '' : super.renderer();
+  }
+}
+
 const getMapObject = (map, names) => {
   const name = names.shift(names);
   if (names.length) {
@@ -7195,13 +7901,13 @@ const setMapObject = (map, names, value) => {
     map[name] = value;
   }
 };
-class JRTable extends JRFrame {
+class JRTable extends JRWindow {
   constructor(props) {
     super(props);
-    this.colGroupRef = /*#__PURE__*/React.createRef();
+    this.colGroupRef = /*#__PURE__*/React$1.createRef();
   }
   UNSAFE_componentWillMount() {
-    this.setColumns(this.props.columns);
+    this.setColumns(this.props.columns ?? []);
   }
 
   //------------------------------------------------------------------------------------
@@ -7215,7 +7921,7 @@ class JRTable extends JRFrame {
         value,
         onChange
       }) {
-        return /*#__PURE__*/React.createElement("checkbox", {
+        return /*#__PURE__*/React$1.createElement("checkbox", {
           checked: value,
           onChange: e => {
             onChange(e.target.checked);
@@ -7254,7 +7960,7 @@ class JRTable extends JRFrame {
         value,
         onChange
       }) {
-        return /*#__PURE__*/React.createElement("checkbox", {
+        return /*#__PURE__*/React$1.createElement("checkbox", {
           checked: value,
           onChange: e => {
             onChange(e.target.checked);
@@ -7264,7 +7970,7 @@ class JRTable extends JRFrame {
       align: 'center',
       name,
       label() {
-        return /*#__PURE__*/React.createElement("button", {
+        return /*#__PURE__*/React$1.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) {
@@ -7387,25 +8093,25 @@ class JRTable extends JRFrame {
   }
   //------------------------------------------------------------------------------------
   renderMe() {
-    return /*#__PURE__*/React.createElement(StyledJRTable, {
+    return /*#__PURE__*/React$1.createElement(StyledJRTable, {
       className: `${this.props.className ?? ''} jr-table ${this.props.onRowClick ? 'row-highlightable' : ''}`
-    }, /*#__PURE__*/React.createElement("table", {
+    }, /*#__PURE__*/React$1.createElement("table", {
       className: 'jr-table-table'
-    }, /*#__PURE__*/React.createElement(TBodies, {
+    }, /*#__PURE__*/React$1.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.createElement(TFoot, {
+    }), /*#__PURE__*/React$1.createElement(TFoot, {
       columns: this.props.footColumns,
       table: this
-    }), /*#__PURE__*/React.createElement(THead, {
+    }), /*#__PURE__*/React$1.createElement(THead, {
       columns: this.state.columns,
       leafColumns: this.state.leafColumns,
       table: this
-    })), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React$1.createElement("div", {
       className: 'empty'
     }, this.noData() && '無資料'));
   }
@@ -7419,7 +8125,8 @@ const StyleJRFields = styled.main`
     flex-direction: column;
     flex:1;
     overflow: overlay;
-
+    padding: 10px;
+    
     color:#525252;
 
     >.jr-grid{
@@ -7482,7 +8189,7 @@ const StyledColumn = styled.div`
   }
 }}
 `;
-const StyledColumnLabel = styled.label`
+const StyledColumnLabel = styled.div`
     ${({
   $layout
 }) => {
@@ -7593,7 +8300,7 @@ function requiredValidator({
     };
   }
 }
-class JRFields extends JRFrame {
+class JRFields extends JRWindow {
   UNSAFE_componentWillMount() {
     this.#initValidateValue();
   }
@@ -7753,12 +8460,12 @@ class JRFields extends JRFrame {
     }
     if (type) {
       const typeStyle = flexType(_typeStyle, this, null);
-      content = /*#__PURE__*/React.createElement(StyledColumnValue, {
+      content = /*#__PURE__*/React$1.createElement(StyledColumnValue, {
         className: 'jr-column-value',
         style: {
           gridColumn: label == null ? 'span 2' : null
         }
-      }, /*#__PURE__*/React.createElement(type, {
+      }, /*#__PURE__*/React$1.createElement(type, {
         value: value,
         onChange,
         record: parentValue,
@@ -7769,13 +8476,13 @@ class JRFields extends JRFrame {
         ...column
       }));
     } else if (column.columns) {
-      content = /*#__PURE__*/React.createElement(StyledGrid, {
+      content = /*#__PURE__*/React$1.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.createElement(StyledColumnValue, {
+      content = /*#__PURE__*/React$1.createElement(StyledColumnValue, {
         className: 'jr-column-value',
         style: {
           gridColumn: label == null ? 'span 2' : null,
@@ -7788,7 +8495,8 @@ class JRFields extends JRFrame {
       }) : typeof value === 'object' ? JSON.stringify(value) : value);
     }
     const layout = column.labelProps?.layout === undefined ? this.props.labelProps?.layout : column.labelProps?.layout;
-    return /*#__PURE__*/React.createElement(StyledColumn, {
+    const labelStyle = column.labelProps?.style ?? this.props.labelProps?.style ?? {};
+    return /*#__PURE__*/React$1.createElement(StyledColumn, {
       $layout: layout,
       $hasLabel: label != null,
       key: `f${index}`,
@@ -7796,17 +8504,18 @@ class JRFields extends JRFrame {
       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.createElement(StyledColumnLabel, {
+    }, label != null && /*#__PURE__*/React$1.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.createElement(StyledColumnFooter, null, /*#__PURE__*/React.createElement("div", {
+    }, label), content, this.props.debugMode && /*#__PURE__*/React$1.createElement(StyledColumnFooter, null, /*#__PURE__*/React$1.createElement("div", {
       className: "left"
-    }, /*#__PURE__*/React.createElement(ColumnMessage, {
+    }, /*#__PURE__*/React$1.createElement(ColumnMessage, {
       value: this.getValidateValue(_parentName.join('.')),
       record: this.getValue()
-    })), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React$1.createElement("div", {
       className: "right"
     }))
     // validateValue?.[name]!==undefined && <StyledColumnFooter $layout={layout}>
@@ -7821,10 +8530,10 @@ class JRFields extends JRFrame {
     });
   }
   renderMe() {
-    return /*#__PURE__*/React.createElement(StyleJRFields, {
+    return /*#__PURE__*/React$1.createElement(StyleJRFields, {
       className: 'jr-fields',
       style: this.props.typeStyle
-    }, /*#__PURE__*/React.createElement(StyledGrid, {
+    }, /*#__PURE__*/React$1.createElement(StyledGrid, {
       cols: this.props.cols,
       style: this.props.gridStyle,
       className: 'jr-grid',
@@ -7886,7 +8595,7 @@ const FreeType = ({
     const content = config.bind(me)({
       setStyle
     });
-    return /*#__PURE__*/React.createElement(Tag, {
+    return /*#__PURE__*/React$1.createElement(Tag, {
       className: className,
       style: style
     }, content);
@@ -7894,33 +8603,33 @@ const FreeType = ({
 };
 class JRTestReact extends JRSubmit {
   renderer() {
-    return /*#__PURE__*/React.createElement(StyledJRFrame, {
+    return /*#__PURE__*/React$1.createElement(StyledJRFrame, {
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React.createElement(FreeType, {
+    }, /*#__PURE__*/React$1.createElement(FreeType, {
       tag: "div",
       config: this.props.start,
       me: this,
       className: 'start'
-    }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FreeType, {
+    }), /*#__PURE__*/React$1.createElement("main", null, /*#__PURE__*/React$1.createElement(FreeType, {
       tag: "header",
       config: this.props.top,
       me: this
-    }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FreeType, {
+    }), /*#__PURE__*/React$1.createElement("main", null, /*#__PURE__*/React$1.createElement(FreeType, {
       tag: "div",
       config: this.props.left,
       me: this,
       className: 'left'
-    }), this.renderMe(), /*#__PURE__*/React.createElement(FreeType, {
+    }), this.renderMe(), /*#__PURE__*/React$1.createElement(FreeType, {
       tag: "div",
       config: this.props.right,
       me: this,
       className: 'right'
-    })), /*#__PURE__*/React.createElement(FreeType, {
+    })), /*#__PURE__*/React$1.createElement(FreeType, {
       tag: "footer",
       config: this.props.bottom,
       me: this
-    })), /*#__PURE__*/React.createElement(FreeType, {
+    })), /*#__PURE__*/React$1.createElement(FreeType, {
       tag: "div",
       config: this.props.end,
       me: this,
@@ -7928,7 +8637,7 @@ class JRTestReact extends JRSubmit {
     }));
   }
   renderMe() {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement("div", {
       style: {
         flex: 1
       }