jrs-react 1.2.7 → 1.2.9

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);
@@ -6476,7 +6476,7 @@ class JRSubmit extends React.Component {
     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();
   }
 }
 
@@ -6494,12 +6494,12 @@ 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.createElement(Tag, {
+    return /*#__PURE__*/React$1.createElement(Tag, {
       className: className
     }, config);
   }
@@ -6541,33 +6541,33 @@ 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?.() ?? this.props.children, /*#__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,
@@ -6594,10 +6594,10 @@ const StyledSlider$1 = styled.div`
         border-right:1px dashed gray;
     }
 `;
-class Slider$1 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');
@@ -6646,7 +6646,7 @@ class Slider$1 extends React.Component {
   }
   render() {
     const column = this.props.column;
-    return /*#__PURE__*/React.createElement(StyledSlider$1, {
+    return /*#__PURE__*/React$1.createElement(StyledSlider$1, {
       ref: this.sliderRef,
       onMouseDown: e => {
         this.start(this.props.thRef, column);
@@ -6659,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 {
@@ -6669,7 +6669,7 @@ const Colgroup = ({
     const style = {
       width
     };
-    return /*#__PURE__*/React.createElement("col", {
+    return /*#__PURE__*/React$1.createElement("col", {
       style: style,
       key: index
     });
@@ -6682,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$1, {
+    }, flexType(column.label, table), table.props.resizableColumns === true && /*#__PURE__*/React$1.createElement(Slider$1, {
       table: table,
       thRef: thRef,
       column: column
@@ -6702,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,
@@ -6718,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
   }));
@@ -6746,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
@@ -6758,14 +6758,14 @@ 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() {
@@ -6816,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,
@@ -6836,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,
@@ -6859,7 +6859,7 @@ styled.tr`
     }
 `;
 const GroupHeader = props => {
-  return /*#__PURE__*/React.createElement(GroupColumns, _extends({
+  return /*#__PURE__*/React$1.createElement(GroupColumns, _extends({
     trClassName: 'jr-group-header'
   }, props));
 };
@@ -6870,7 +6870,7 @@ styled.tr`
     }
 `;
 const GroupFooter = props => {
-  return /*#__PURE__*/React.createElement(GroupColumns, _extends({
+  return /*#__PURE__*/React$1.createElement(GroupColumns, _extends({
     trClassName: 'jr-group-footer'
   }, props));
 };
@@ -6917,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,
@@ -6945,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: {
@@ -6964,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,
@@ -6989,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({
     groupData: groupData,
     columns: groupHeader
   }, 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?.({
@@ -7005,13 +7005,13 @@ const TBody = ({
           groupIndex: tbodyIndex
         });
       }
-    }, /*#__PURE__*/React.createElement(Tds, _extends({
+    }, /*#__PURE__*/React$1.createElement(Tds, _extends({
       record: record,
       trIndex: trIndex
     }, neededProps, {
       leafColumns: leafColumns
     })));
-  }), groupData?.length > 0 && /*#__PURE__*/React.createElement(GroupFooter, _extends({
+  }), groupData?.length > 0 && /*#__PURE__*/React$1.createElement(GroupFooter, _extends({
     groupData: groupData,
     columns: groupFooter
   }, neededProps))));
@@ -7029,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}
@@ -7177,11 +7177,18 @@ const StyledJRTable = styled.div`
     }    
 `;
 
+function JRButton({
+  icon,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement("button", props, icon, children);
+}
+
 const StyledTitle = styled.div`
     overflow: hidden;
     display: flex;
-    padding:2px 8px;
-    border:1px solid black;
+    border-radius: var(--jr-window-radius) var(--jr-window-radius) 0 0;
     background:rgb(214, 214, 214);
     color: black;
     &:active:hover{
@@ -7195,69 +7202,164 @@ const StyledTitle = styled.div`
     user-select: none;
 
     > .title{
-            flex: 1;
+
+        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.Component {
+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.pos1 = this.pos3 - e.clientX;
-    this.pos2 = this.pos4 - e.clientY;
-    this.pos3 = e.clientX;
-    this.pos4 = e.clientY;
+    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';
   };
-  stop = e => {
-    // const w= this.props.windowRef.current
-    // if(this.y<1)this.props.windowRef.current.style.top = '1px'
-    // if(this.y>window.innerHeight)this.props.windowRef.current.style.top = `${window.innerHeight-32}px`
-    // if(this.x<1)this.props.windowRef.current.style.left = '1px'
-    // if(this.x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-100}px`
-    document.body.style.cursor = 'default';
-    window.removeEventListener('mousemove', this.move);
-    window.removeEventListener('mouseup', this.stop);
-  };
   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.createElement(StyledTitle, {
+    return /*#__PURE__*/React$1.createElement(StyledTitle, {
       ref: this.props.titleBarRef,
       draggable: "false",
       onMouseDown: e => {
         this.start(e);
       }
-    }, /*#__PURE__*/React.createElement(FreeType$1, {
+    }, /*#__PURE__*/React$1.createElement(FreeType$1, {
       tag: "div",
       config: this.props.title ?? '',
       me: this.props.window,
       className: 'title'
-    }), /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("button", null, "X")));
+    }), /*#__PURE__*/React$1.createElement("nav", null, /*#__PURE__*/React$1.createElement(JRButton, null), /*#__PURE__*/React$1.createElement(JRButton, null), this.props.window.props.setOpen ? /*#__PURE__*/React$1.createElement(JRButton, {
+      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:${({
+    Xbackground:${({
   $direction: {
     color
   }
@@ -7306,13 +7408,13 @@ const StyledSlider = styled.div`
     user-select: none;
 
 `;
-class Slider extends React.Component {
+class Slider extends React$1.Component {
   width = '3px';
   borderWidth = 'px';
-  borderLong = '10px';
+  borderLong = 30;
   constructor(props) {
     super(props);
-    this.sliderRef = /*#__PURE__*/React.createRef();
+    this.sliderRef = /*#__PURE__*/React$1.createRef();
   }
   directions = {
     n: {
@@ -7355,12 +7457,24 @@ class Slider extends React.Component {
         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}px`,
-      height: this.borderLong,
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
       cursor: 'nw-resize',
       resize: props => {
         this.resizeN(props);
@@ -7371,8 +7485,8 @@ class Slider extends React.Component {
       top: 0,
       left: 0,
       color: 'blue',
-      width: this.borderLong,
-      height: `${this.props.thick}px`,
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
       cursor: 'nw-resize',
       resize: props => {
         this.resizeN(props);
@@ -7383,7 +7497,7 @@ class Slider extends React.Component {
       top: 0,
       right: 0,
       color: 'green',
-      width: this.borderLong,
+      width: `${this.props.thick + this.borderLong}px`,
       height: `${this.props.thick}px`,
       cursor: 'ne-resize',
       resize: props => {
@@ -7396,7 +7510,7 @@ class Slider extends React.Component {
       right: 0,
       color: 'green',
       width: `${this.props.thick}px`,
-      height: this.borderLong,
+      height: `${this.props.thick + this.borderLong}px`,
       cursor: 'ne-resize',
       resize: props => {
         this.resizeN(props);
@@ -7407,7 +7521,7 @@ class Slider extends React.Component {
       color: 'red',
       right: 0,
       bottom: 0,
-      width: this.borderLong,
+      width: `${this.props.thick + this.borderLong}px`,
       height: `${this.props.thick}px`,
       cursor: 'se-resize',
       resize: props => {
@@ -7420,7 +7534,7 @@ class Slider extends React.Component {
       right: 0,
       bottom: 0,
       width: `${this.props.thick}px`,
-      height: this.borderLong,
+      height: `${this.props.thick + this.borderLong}px`,
       cursor: 'se-resize',
       resize: props => {
         this.resizeS(props);
@@ -7431,7 +7545,7 @@ class Slider extends React.Component {
       color: 'yellow',
       bottom: 0,
       left: 0,
-      width: this.borderLong,
+      width: `${this.props.thick + this.borderLong}px`,
       height: `${this.props.thick}px`,
       cursor: 'sw-resize',
       resize: props => {
@@ -7444,7 +7558,7 @@ class Slider extends React.Component {
       bottom: 0,
       left: 0,
       width: `${this.props.thick}px`,
-      height: this.borderLong,
+      height: `${this.props.thick + this.borderLong}px`,
       cursor: 'sw-resize',
       resize: props => {
         this.resizeS(props);
@@ -7452,11 +7566,6 @@ class Slider extends React.Component {
       }
     }
   };
-  stop = e => {
-    document.body.style.cursor = 'default';
-    window.removeEventListener('mousemove', this.move);
-    window.removeEventListener('mouseup', this.stop);
-  };
   resizeN = ({
     window,
     cursorY,
@@ -7501,8 +7610,8 @@ class Slider extends React.Component {
     startWidth,
     titleBarHeight
   }) => {
-    let x = cursorX;
-    if (x <= 1) x = 1;
+    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;
@@ -7511,7 +7620,31 @@ class Slider extends React.Component {
     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,
@@ -7544,47 +7677,60 @@ class Slider extends React.Component {
       startHeight,
       top
     });
-    /////////////////////////////////////////////////////////////
-
-    /////////////////////////////////////////////////////////////
   };
-  start = () => {
+  start = (e, direction) => {
+    e.preventDefault();
     const {
       height: titleBarHeight
     } = this.props.titleBarRef.current.getBoundingClientRect();
-    const {
+    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
+      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.createElement(StyledSlider, {
+    return /*#__PURE__*/React$1.createElement(StyledSlider, {
       $direction: this.directions[this.props.direction],
       $padding: this.props.padding,
-      onMouseDown: this.start
+      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: absolute;
+    position: fixed;
     padding: ${({
   $thick
 }) => $thick}px;
+    border-radius: var(--jr-window-radius);
 
     top: ${({
   $y
@@ -7605,6 +7751,7 @@ const StyledJRWindow = styled.div`
     overflow: hidden;
     
     > main{
+        border-radius: var(--jr-window-radius);
         box-shadow: 0px 0px 5px 1px gray;
         Xbackground: white;
         display: flex;
@@ -7625,31 +7772,27 @@ class JRWindow extends JRFrame {
   y = 0;
   width = 300;
   height = 300;
-  padding = 5;
-  thick = 3;
+  padding = 1;
+  thick = 5;
   constructor(props) {
     super(props);
-    this.ref = /*#__PURE__*/React.createRef();
-    this.titleBarRef = /*#__PURE__*/React.createRef();
-    if (this.props.popup === true) this.renderer = this.renderWindow;
+    this.ref = /*#__PURE__*/React$1.createRef();
+    this.titleBarRef = /*#__PURE__*/React$1.createRef();
     this.init();
   }
+  componentWillUpdate(prevProps, prevState, snapshot) {
+    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.props.height : window.innerHeight;
-    this.width = window.innerWidth >= this.props.width ? this.props.width : window.innerWidth;
+    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;
   }
-  componentWillMount() {}
-  // renderer(){
-  //     return this.props.popup===true
-  //         ?<StyledJRWindow>
-  //             {super.renderer()}
-  //         </StyledJRWindow>
-  //         :super.renderer()
-  // }
-  renderWindow() {
-    return /*#__PURE__*/React.createElement(StyledJRWindow, {
+  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,
@@ -7657,88 +7800,18 @@ class JRWindow extends JRFrame {
       $width: this.width,
       $height: this.height,
       $thick: this.thick
-      // onMouseDown={()=>{
-      //     po('onFocus')
-      //     this.ref.current.style.zIndex=100
-      // }}
-    }, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(TitleBar, {
+    }, /*#__PURE__*/React$1.createElement("main", null, /*#__PURE__*/React$1.createElement(TitleBar, {
       titleBarRef: this.titleBarRef,
       windowRef: this.ref,
       window: this,
-      title: this.props.title
-    }), /*#__PURE__*/React.createElement("main", null, super.renderer())), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'n',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'e',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 's',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'w',
+      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
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'nww',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'nnw',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'nne',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'nee',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'sse',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'see',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'sww',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }), /*#__PURE__*/React.createElement(Slider, {
-      direction: 'ssw',
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    }));
+    })) : '' : super.renderer();
   }
 }
 
@@ -7764,7 +7837,7 @@ const setMapObject = (map, names, value) => {
 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 ?? []);
@@ -7781,7 +7854,7 @@ class JRTable extends JRWindow {
         value,
         onChange
       }) {
-        return /*#__PURE__*/React.createElement("checkbox", {
+        return /*#__PURE__*/React$1.createElement("checkbox", {
           checked: value,
           onChange: e => {
             onChange(e.target.checked);
@@ -7820,7 +7893,7 @@ class JRTable extends JRWindow {
         value,
         onChange
       }) {
-        return /*#__PURE__*/React.createElement("checkbox", {
+        return /*#__PURE__*/React$1.createElement("checkbox", {
           checked: value,
           onChange: e => {
             onChange(e.target.checked);
@@ -7830,7 +7903,7 @@ class JRTable extends JRWindow {
       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) {
@@ -7953,25 +8026,25 @@ class JRTable extends JRWindow {
   }
   //------------------------------------------------------------------------------------
   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() && '無資料'));
   }
@@ -8320,12 +8393,12 @@ class JRFields extends JRWindow {
     }
     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,
@@ -8336,13 +8409,13 @@ class JRFields extends JRWindow {
         ...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,
@@ -8356,7 +8429,7 @@ class JRFields extends JRWindow {
     }
     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.createElement(StyledColumn, {
+    return /*#__PURE__*/React$1.createElement(StyledColumn, {
       $layout: layout,
       $hasLabel: label != null,
       key: `f${index}`,
@@ -8364,18 +8437,18 @@ class JRFields extends JRWindow {
       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}>
@@ -8390,10 +8463,10 @@ class JRFields extends JRWindow {
     });
   }
   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',
@@ -8455,7 +8528,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);
@@ -8463,33 +8536,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,
@@ -8497,7 +8570,7 @@ class JRTestReact extends JRSubmit {
     }));
   }
   renderMe() {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement("div", {
       style: {
         flex: 1
       }