jrs-react 1.2.35 → 1.2.37

package/build/index.es.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState } from 'react';
+import React__default, { forwardRef, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { createRoot } from 'react-dom/client';
 
@@ -3939,30 +3939,141 @@ class JRSubmit extends React__default.Component {
   }
 }
 
-const FreeType = ({
+const StyledSlider$2 = styled.div`
+    background:#2d2d2d;
+    flex-basis:11px;
+    user-select: none;
+    cursor: ${({
+  $dir
+}) => $dir === 'left' || $dir === 'right' ? 'col-resize' : 'row-resize'} ;
+`;
+class Slider$2 extends React__default.Component {
+  ref = /*#__PURE__*/React__default.createRef();
+  resize = {
+    left: ({
+      clientX
+    }) => {
+      const ref = this.props.contenerRef.current;
+      let width = clientX - this.frame.x - this.frame.shw;
+      if (width < 0) width = 0;
+      ref.style.flexBasis = `${width}px`;
+    },
+    right: ({
+      clientX
+    }) => {
+      const ref = this.props.contenerRef.current;
+      let width = this.frame.x2 - clientX - this.frame.shw;
+      if (width < 0) width = 0;
+      po('width', width);
+      ref.style.flexBasis = `${width}px`;
+    },
+    top: ({
+      clientY
+    }) => {
+      po('top');
+      const ref = this.props.contenerRef.current;
+      let height = clientY - this.frame.y - this.frame.shh;
+      po('height', height);
+      // if(width<0)width=0
+      ref.style.flexBasis = `${height}px`;
+    },
+    bottom: ({
+      clientY
+    }) => {
+      po('bottom');
+      const ref = this.props.contenerRef.current;
+      let height = this.frame.w2 - clientY - this.frame.shh;
+      // clientY-this.frame.y-this.frame.shh
+      // po('height',height)
+      // // if(width<0)width=0
+      ref.style.flexBasis = `${height}px`;
+    }
+  };
+  stop = e => {
+    po('stop', this.stop);
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  move = e => {
+    this.resize[this.props.dir](e);
+  };
+  start = ({
+    clientX
+  }) => {
+    console.clear();
+    const ref = this.props.contenerRef.current;
+    const {
+      x,
+      y,
+      width,
+      height,
+      ...other
+    } = ref.getBoundingClientRect();
+    po('other', ref.getBoundingClientRect());
+    po('ref.getBoundingClientRect()', this.ref.current.getBoundingClientRect());
+    const {
+      width: sw,
+      height: sh
+    } = this.ref.current.getBoundingClientRect();
+    this.frame = {
+      x,
+      y,
+      shw: sw / 2,
+      shh: sh / 2,
+      x2: x + width,
+      w2: y + height
+    };
+    document.body.style.cursor = 'col-resize';
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  };
+  render() {
+    return /*#__PURE__*/React__default.createElement(StyledSlider$2, {
+      onMouseDown: this.start,
+      ref: this.ref,
+      $dir: this.props.dir
+    });
+  }
+}
+
+const FreeType = /*#__PURE__*/forwardRef(function ({
   tag: Tag,
   config,
   me,
   className
-}) => {
+}, ref) {
+  let style;
+  const setStyle = function (_style) {
+    style = _style;
+  };
   if (typeof config === 'function') {
-    let style;
-    const setStyle = function (_style) {
-      style = _style;
-    };
     const content = config.bind(me)({
       setStyle
     });
     return /*#__PURE__*/React__default.createElement(Tag, {
       className: className,
-      style: style
+      style: style,
+      ref: ref
+    }, content);
+  } else if (config?.render) {
+    const content = config.render.bind(me)({
+      setStyle
+    });
+    return /*#__PURE__*/React__default.createElement(Tag, {
+      className: className,
+      style: style,
+      ref: ref
     }, content);
-  } else if (typeof config === 'string') {
+    // }else if(typeof config==='string'){
+    //     return <Tag className={className} ref={ref}>{config}</Tag>
+  } else {
     return /*#__PURE__*/React__default.createElement(Tag, {
-      className: className
+      className: className,
+      ref: ref
     }, config);
   }
-};
+});
 const StyledJRFrame = styled.div`
     color:#525252;
     background:white;
@@ -4001,6 +4112,44 @@ const StyledJRFrame = styled.div`
 
     }
 `;
+function FreeTypeWithSlider({
+  tag,
+  config,
+  me,
+  className,
+  dir
+}) {
+  if (config) {
+    if (config.resizable) {
+      const ref = useRef();
+      const arr = [/*#__PURE__*/React__default.createElement(FreeType, {
+        tag: tag,
+        config: config,
+        me: me,
+        className: className,
+        ref: ref,
+        key: 'frame'
+      }), /*#__PURE__*/React__default.createElement(Slider$2, {
+        contenerRef: ref,
+        dir: dir,
+        key: 'slider'
+      })];
+      po('right', dir);
+      if (['right'].indexOf(dir) > -1 || ['bottom'].indexOf(dir) > -1) {
+        return arr.reverse();
+      } else {
+        return arr;
+      }
+    } else {
+      return /*#__PURE__*/React__default.createElement(FreeType, {
+        tag: tag,
+        config: config,
+        me: me,
+        className: className
+      });
+    }
+  }
+}
 class JRFrame extends JRSubmit {
   rid = random(99999, 10000);
   mask = this.props.mask ? () => {
@@ -4019,36 +4168,43 @@ class JRFrame extends JRSubmit {
       id: this.props.id,
       style: this.props.style,
       className: `jr-frame ${this.props.popup !== true ? this.props.className : ''}`
-    }, /*#__PURE__*/React__default.createElement(FreeType, {
+    }, /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.start,
       me: this,
-      className: 'start'
-    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType, {
+      className: 'start',
+      dir: 'left'
+    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "header",
       config: this.props.top,
-      me: this
-    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType, {
+      me: this,
+      className: 'header',
+      dir: 'top'
+    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.left,
       me: this,
-      className: 'left'
+      className: 'left',
+      dir: 'left'
     }), /*#__PURE__*/React__default.createElement("main", {
       className: 'body'
-    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default.createElement(FreeType, {
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.right,
       me: this,
-      className: 'right'
-    })), /*#__PURE__*/React__default.createElement(FreeType, {
+      className: 'right',
+      dir: 'right'
+    })), /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "footer",
       config: this.props.bottom,
-      me: this
-    })), /*#__PURE__*/React__default.createElement(FreeType, {
+      me: this,
+      dir: 'bottom'
+    })), /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.end,
       me: this,
-      className: 'end'
+      className: 'end',
+      dir: 'right'
     }), this.mask?.());
   }
 }
@@ -4219,7 +4375,7 @@ class TitleBar extends React__default.Component {
         width,
         height
       } = this.props.windowRef.current.getBoundingClientRect();
-      if (y < 1 - this.props.thick) this.fullScreen(e);
+      if (y < 1 - this.props.thick && this.props.resizable != false) 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`;
@@ -4303,7 +4459,7 @@ class TitleBar extends React__default.Component {
       onMouseDown: e => {
         this.start(e);
       },
-      onDoubleClick: this.adjustScreen
+      onDoubleClick: this.props.resizable != false ? this.adjustScreen : null
     }, /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "div",
       config: this.props.title ?? '',
@@ -4771,7 +4927,7 @@ z-index:1;
 }) => $x}px;
     width: ${({
   $width = 300
-}) => `${$width}px`};
+}) => typeof $width === 'string' ? '50%' : `${$width}px`};
     height: ${({
   $height = 300
 }) => `${$height}px`};
@@ -4860,18 +5016,22 @@ class JRWindow extends JRFrame {
     }
   }
   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;
+    po('window', window.innerWidth);
+    if (this.props.width?.indexOf?.('%') > -1) {
+      this.width = this.props.width.split('%')[0] * window.innerWidth / 100;
+    } else {
+      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) / 2;
+    if (this.props.height?.indexOf?.('%') > -1) {
+      this.height = this.props.height.split('%')[0] * window.innerHeight / 100;
+    } else {
+      this.height = window.innerHeight >= (this.props.height ?? this.height) ? this.props.height ?? this.height : window.innerHeight;
+    }
+    this.y = this.props.y ?? (window.innerHeight - this.height) / 2;
   }
   renderer() {
-    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default.createElement(StyledJRWindow
-
-    // role="dialog"
-    // aria-labelledby="dialog1Title"
-    // aria-describedby="dialog1Desc"
-    , {
+    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default.createElement(StyledJRWindow, {
       rule: 'dialog',
       ref: this.ref,
       className: `jr-window ${this.props.className ?? ''}`,
@@ -4885,8 +5045,9 @@ class JRWindow extends JRFrame {
       windowRef: this.ref,
       window: this,
       title: this.props.title,
-      thick: this.thick
-    }), /*#__PURE__*/React__default.createElement("main", null, super.renderer())), /*#__PURE__*/React__default.createElement(Sliders, {
+      thick: this.thick,
+      resizable: this.props.resizable
+    }), /*#__PURE__*/React__default.createElement("main", null, super.renderer())), this.props.resizable !== false && /*#__PURE__*/React__default.createElement(Sliders, {
       thick: this.thick,
       windowRef: this.ref,
       window: this,
@@ -4916,6 +5077,7 @@ class Slider extends React__default.Component {
     this.sliderRef = /*#__PURE__*/React__default.createRef();
   }
   stop = e => {
+    po('stop', this);
     this.sliderRef.current.classList.remove('resizing');
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
@@ -4924,6 +5086,7 @@ class Slider extends React__default.Component {
   move = ({
     clientX
   }) => {
+    po('move');
     const {
       th,
       selectedCols,
@@ -4941,6 +5104,7 @@ class Slider extends React__default.Component {
     });
   };
   start(thPRef, column) {
+    po('start', this.start);
     const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
     const totalWidth = selectedCols.reduce((aco, {
       offsetWidth
@@ -5903,8 +6067,8 @@ class JRFields extends JRWindow {
       content = /*#__PURE__*/React__default.createElement(StyledColumnValue, {
         className: 'jr-column-value',
         style: {
-          gridColumn: label == null ? 'span 2' : null,
-          padding: column.render ? '4px 0' : null
+          gridColumn: label == null ? 'span 2' : null
+          // ,padding:column.render?'4px 0':null
         }
       }, column.render ? column.render.bind(this)({
         onChange,
@@ -6297,7 +6461,7 @@ function JRAlertWindow({
     },
     width: 440,
     height: 180,
-    maskOn: 'play'
+    maskOn: 'root'
   }, props, {
     open: open,
     setOpen: setOpen,
@@ -6402,13 +6566,14 @@ class JRSelect extends JROptions {
       multiple,
       size
     } = this.props;
+    const value = this.getValue() ?? (multiple ? [] : '');
     const options = [...(this.getOptions() ?? [])];
-    if (multiple != true && showBlank != false) options.unshift({
-      [valueName]: '',
+    if (!multiple && (showBlank != false || value == '')) options.unshift({
+      [valueName]: null,
       [labelName]: ''
     });
     return /*#__PURE__*/React__default.createElement(StyledSelect, {
-      value: this.getValue() ?? (multiple ? [] : ''),
+      value: value,
       className: 'jr-select',
       onChange: e => {
         if (multiple) {
@@ -6416,7 +6581,7 @@ class JRSelect extends JROptions {
           this.setValue(selectedIndex.length ? selectedIndex.map(index => options[index][valueName]) : null);
         } else {
           const selectedIndex = e.target.selectedOptions[0].index;
-          this.setValue(selectedIndex ? options[selectedIndex][valueName] : null);
+          this.setValue(selectedIndex > -1 ? options[selectedIndex][valueName] : null);
         }
       },
       size: size,
@@ -6426,7 +6591,7 @@ class JRSelect extends JROptions {
         value: record[valueName],
         key: key
       };
-      if (multiple && this.getValue()?.indexOf(record[valueName]) > -1 || this.getValue() == record[valueName]) {
+      if (multiple && value?.indexOf(record[valueName]) > -1 || value == record[valueName]) {
         props.className = 'selected';
       }
       return /*#__PURE__*/React__default.createElement(StyledOption, props, record[labelName]);

package/build/index.js

@@ -3966,30 +3966,141 @@ class JRSubmit extends React__default["default"].Component {
   }
 }
 
-const FreeType = ({
+const StyledSlider$2 = styled__default["default"].div`
+    background:#2d2d2d;
+    flex-basis:11px;
+    user-select: none;
+    cursor: ${({
+  $dir
+}) => $dir === 'left' || $dir === 'right' ? 'col-resize' : 'row-resize'} ;
+`;
+class Slider$2 extends React__default["default"].Component {
+  ref = /*#__PURE__*/React__default["default"].createRef();
+  resize = {
+    left: ({
+      clientX
+    }) => {
+      const ref = this.props.contenerRef.current;
+      let width = clientX - this.frame.x - this.frame.shw;
+      if (width < 0) width = 0;
+      ref.style.flexBasis = `${width}px`;
+    },
+    right: ({
+      clientX
+    }) => {
+      const ref = this.props.contenerRef.current;
+      let width = this.frame.x2 - clientX - this.frame.shw;
+      if (width < 0) width = 0;
+      po('width', width);
+      ref.style.flexBasis = `${width}px`;
+    },
+    top: ({
+      clientY
+    }) => {
+      po('top');
+      const ref = this.props.contenerRef.current;
+      let height = clientY - this.frame.y - this.frame.shh;
+      po('height', height);
+      // if(width<0)width=0
+      ref.style.flexBasis = `${height}px`;
+    },
+    bottom: ({
+      clientY
+    }) => {
+      po('bottom');
+      const ref = this.props.contenerRef.current;
+      let height = this.frame.w2 - clientY - this.frame.shh;
+      // clientY-this.frame.y-this.frame.shh
+      // po('height',height)
+      // // if(width<0)width=0
+      ref.style.flexBasis = `${height}px`;
+    }
+  };
+  stop = e => {
+    po('stop', this.stop);
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  move = e => {
+    this.resize[this.props.dir](e);
+  };
+  start = ({
+    clientX
+  }) => {
+    console.clear();
+    const ref = this.props.contenerRef.current;
+    const {
+      x,
+      y,
+      width,
+      height,
+      ...other
+    } = ref.getBoundingClientRect();
+    po('other', ref.getBoundingClientRect());
+    po('ref.getBoundingClientRect()', this.ref.current.getBoundingClientRect());
+    const {
+      width: sw,
+      height: sh
+    } = this.ref.current.getBoundingClientRect();
+    this.frame = {
+      x,
+      y,
+      shw: sw / 2,
+      shh: sh / 2,
+      x2: x + width,
+      w2: y + height
+    };
+    document.body.style.cursor = 'col-resize';
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  };
+  render() {
+    return /*#__PURE__*/React__default["default"].createElement(StyledSlider$2, {
+      onMouseDown: this.start,
+      ref: this.ref,
+      $dir: this.props.dir
+    });
+  }
+}
+
+const FreeType = /*#__PURE__*/React.forwardRef(function ({
   tag: Tag,
   config,
   me,
   className
-}) => {
+}, ref) {
+  let style;
+  const setStyle = function (_style) {
+    style = _style;
+  };
   if (typeof config === 'function') {
-    let style;
-    const setStyle = function (_style) {
-      style = _style;
-    };
     const content = config.bind(me)({
       setStyle
     });
     return /*#__PURE__*/React__default["default"].createElement(Tag, {
       className: className,
-      style: style
+      style: style,
+      ref: ref
+    }, content);
+  } else if (config?.render) {
+    const content = config.render.bind(me)({
+      setStyle
+    });
+    return /*#__PURE__*/React__default["default"].createElement(Tag, {
+      className: className,
+      style: style,
+      ref: ref
     }, content);
-  } else if (typeof config === 'string') {
+    // }else if(typeof config==='string'){
+    //     return <Tag className={className} ref={ref}>{config}</Tag>
+  } else {
     return /*#__PURE__*/React__default["default"].createElement(Tag, {
-      className: className
+      className: className,
+      ref: ref
     }, config);
   }
-};
+});
 const StyledJRFrame = styled__default["default"].div`
     color:#525252;
     background:white;
@@ -4028,6 +4139,44 @@ const StyledJRFrame = styled__default["default"].div`
 
     }
 `;
+function FreeTypeWithSlider({
+  tag,
+  config,
+  me,
+  className,
+  dir
+}) {
+  if (config) {
+    if (config.resizable) {
+      const ref = React.useRef();
+      const arr = [/*#__PURE__*/React__default["default"].createElement(FreeType, {
+        tag: tag,
+        config: config,
+        me: me,
+        className: className,
+        ref: ref,
+        key: 'frame'
+      }), /*#__PURE__*/React__default["default"].createElement(Slider$2, {
+        contenerRef: ref,
+        dir: dir,
+        key: 'slider'
+      })];
+      po('right', dir);
+      if (['right'].indexOf(dir) > -1 || ['bottom'].indexOf(dir) > -1) {
+        return arr.reverse();
+      } else {
+        return arr;
+      }
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement(FreeType, {
+        tag: tag,
+        config: config,
+        me: me,
+        className: className
+      });
+    }
+  }
+}
 class JRFrame extends JRSubmit {
   rid = random(99999, 10000);
   mask = this.props.mask ? () => {
@@ -4046,36 +4195,43 @@ class JRFrame extends JRSubmit {
       id: this.props.id,
       style: this.props.style,
       className: `jr-frame ${this.props.popup !== true ? this.props.className : ''}`
-    }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
+    }, /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.start,
       me: this,
-      className: 'start'
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      className: 'start',
+      dir: 'left'
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "header",
       config: this.props.top,
-      me: this
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      me: this,
+      className: 'header',
+      dir: 'top'
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.left,
       me: this,
-      className: 'left'
+      className: 'left',
+      dir: 'left'
     }), /*#__PURE__*/React__default["default"].createElement("main", {
       className: 'body'
-    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeType, {
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.right,
       me: this,
-      className: 'right'
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      className: 'right',
+      dir: 'right'
+    })), /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "footer",
       config: this.props.bottom,
-      me: this
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      me: this,
+      dir: 'bottom'
+    })), /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.end,
       me: this,
-      className: 'end'
+      className: 'end',
+      dir: 'right'
     }), this.mask?.());
   }
 }
@@ -4246,7 +4402,7 @@ class TitleBar extends React__default["default"].Component {
         width,
         height
       } = this.props.windowRef.current.getBoundingClientRect();
-      if (y < 1 - this.props.thick) this.fullScreen(e);
+      if (y < 1 - this.props.thick && this.props.resizable != false) 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`;
@@ -4330,7 +4486,7 @@ class TitleBar extends React__default["default"].Component {
       onMouseDown: e => {
         this.start(e);
       },
-      onDoubleClick: this.adjustScreen
+      onDoubleClick: this.props.resizable != false ? this.adjustScreen : null
     }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.title ?? '',
@@ -4798,7 +4954,7 @@ z-index:1;
 }) => $x}px;
     width: ${({
   $width = 300
-}) => `${$width}px`};
+}) => typeof $width === 'string' ? '50%' : `${$width}px`};
     height: ${({
   $height = 300
 }) => `${$height}px`};
@@ -4887,18 +5043,22 @@ class JRWindow extends JRFrame {
     }
   }
   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;
+    po('window', window.innerWidth);
+    if (this.props.width?.indexOf?.('%') > -1) {
+      this.width = this.props.width.split('%')[0] * window.innerWidth / 100;
+    } else {
+      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) / 2;
+    if (this.props.height?.indexOf?.('%') > -1) {
+      this.height = this.props.height.split('%')[0] * window.innerHeight / 100;
+    } else {
+      this.height = window.innerHeight >= (this.props.height ?? this.height) ? this.props.height ?? this.height : window.innerHeight;
+    }
+    this.y = this.props.y ?? (window.innerHeight - this.height) / 2;
   }
   renderer() {
-    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default["default"].createElement(StyledJRWindow
-
-    // role="dialog"
-    // aria-labelledby="dialog1Title"
-    // aria-describedby="dialog1Desc"
-    , {
+    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default["default"].createElement(StyledJRWindow, {
       rule: 'dialog',
       ref: this.ref,
       className: `jr-window ${this.props.className ?? ''}`,
@@ -4912,8 +5072,9 @@ class JRWindow extends JRFrame {
       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,
+      resizable: this.props.resizable
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer())), this.props.resizable !== false && /*#__PURE__*/React__default["default"].createElement(Sliders, {
       thick: this.thick,
       windowRef: this.ref,
       window: this,
@@ -4943,6 +5104,7 @@ class Slider extends React__default["default"].Component {
     this.sliderRef = /*#__PURE__*/React__default["default"].createRef();
   }
   stop = e => {
+    po('stop', this);
     this.sliderRef.current.classList.remove('resizing');
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
@@ -4951,6 +5113,7 @@ class Slider extends React__default["default"].Component {
   move = ({
     clientX
   }) => {
+    po('move');
     const {
       th,
       selectedCols,
@@ -4968,6 +5131,7 @@ class Slider extends React__default["default"].Component {
     });
   };
   start(thPRef, column) {
+    po('start', this.start);
     const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
     const totalWidth = selectedCols.reduce((aco, {
       offsetWidth
@@ -5930,8 +6094,8 @@ class JRFields extends JRWindow {
       content = /*#__PURE__*/React__default["default"].createElement(StyledColumnValue, {
         className: 'jr-column-value',
         style: {
-          gridColumn: label == null ? 'span 2' : null,
-          padding: column.render ? '4px 0' : null
+          gridColumn: label == null ? 'span 2' : null
+          // ,padding:column.render?'4px 0':null
         }
       }, column.render ? column.render.bind(this)({
         onChange,
@@ -6324,7 +6488,7 @@ function JRAlertWindow({
     },
     width: 440,
     height: 180,
-    maskOn: 'play'
+    maskOn: 'root'
   }, props, {
     open: open,
     setOpen: setOpen,
@@ -6429,13 +6593,14 @@ class JRSelect extends JROptions {
       multiple,
       size
     } = this.props;
+    const value = this.getValue() ?? (multiple ? [] : '');
     const options = [...(this.getOptions() ?? [])];
-    if (multiple != true && showBlank != false) options.unshift({
-      [valueName]: '',
+    if (!multiple && (showBlank != false || value == '')) options.unshift({
+      [valueName]: null,
       [labelName]: ''
     });
     return /*#__PURE__*/React__default["default"].createElement(StyledSelect, {
-      value: this.getValue() ?? (multiple ? [] : ''),
+      value: value,
       className: 'jr-select',
       onChange: e => {
         if (multiple) {
@@ -6443,7 +6608,7 @@ class JRSelect extends JROptions {
           this.setValue(selectedIndex.length ? selectedIndex.map(index => options[index][valueName]) : null);
         } else {
           const selectedIndex = e.target.selectedOptions[0].index;
-          this.setValue(selectedIndex ? options[selectedIndex][valueName] : null);
+          this.setValue(selectedIndex > -1 ? options[selectedIndex][valueName] : null);
         }
       },
       size: size,
@@ -6453,7 +6618,7 @@ class JRSelect extends JROptions {
         value: record[valueName],
         key: key
       };
-      if (multiple && this.getValue()?.indexOf(record[valueName]) > -1 || this.getValue() == record[valueName]) {
+      if (multiple && value?.indexOf(record[valueName]) > -1 || value == record[valueName]) {
         props.className = 'selected';
       }
       return /*#__PURE__*/React__default["default"].createElement(StyledOption, props, record[labelName]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.35",
+	"version": "1.2.37",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",

package/src/components/JRAlert/JRAlert.jsx

@@ -30,7 +30,7 @@ function JRAlertWindow({title,message,container,...props}){
         initValue={{message}}
         width={440}
         height={180}
-        maskOn={'play'}
+        maskOn={'root'}
         {...props}
         open={open}
         setOpen={setOpen}

package/src/components/JRFields/JRFields.jsx

@@ -387,7 +387,7 @@ export default class JRFields extends JRWindow {
             content=<StyledColumnValue className={'jr-column-value'}
                 style={{
                     gridColumn:label==null?'span 2':null
-                    ,padding:column.render?'4px 0':null
+                    // ,padding:column.render?'4px 0':null
                 }}
             >
                 {

package/src/components/JRFrame/JRFrame.jsx

@@ -1,21 +1,28 @@
-import React from "react";
+import React, { forwardRef, useRef } from "react";
 import styled from "styled-components";
 import JRSubmit from "../JRSubmit";
-import { random } from "../JRUtils";
+import { po, random } from "../JRUtils";
+import Slider from "./Slider";
 
-export const FreeType=({tag:Tag,config,me,className})=>{
+export const FreeType=forwardRef(function({tag:Tag,config,me,className}, ref){
+    let style
+    const setStyle=function(_style){
+        style=_style
+    }
     if(typeof config==='function'){
-        let style
-        const setStyle=function(_style){
-            style=_style
-        }
         const content=config.bind(me)({setStyle})
-        return <Tag className={className} style={style}>{content}</Tag>
-    }else if(typeof config==='string'){
-        return <Tag className={className}>{config}</Tag>
+        return <Tag className={className} style={style} ref={ref}>{content}</Tag>
+    }else if(config?.render){
+        const content=config.render.bind(me)({setStyle})
+        return <Tag className={className} style={style} ref={ref}>{content}</Tag>
+    // }else if(typeof config==='string'){
+    //     return <Tag className={className} ref={ref}>{config}</Tag>
+    }else{
+        return <Tag className={className} ref={ref}>{config}</Tag>
     }
+})
+
 
-}
 
 const StyledJRFrame=styled.div`
     color:#525252;
@@ -55,6 +62,27 @@ const StyledJRFrame=styled.div`
 
     }
 `
+
+function FreeTypeWithSlider({tag,config,me,className,dir}){
+    if(config){
+        if(config.resizable){
+            const ref=useRef()
+            const arr=[
+                <FreeType tag={tag} config={config} me={me} className={className} ref={ref} key={'frame'}/>
+                ,<Slider contenerRef={ref} dir={dir}  key={'slider'}/>
+            ]
+            po('right',dir)
+            if(['right'].indexOf(dir)>-1 || ['bottom'].indexOf(dir)>-1 ){
+                return arr.reverse()
+            }else{
+                return arr
+            }
+        }else{
+    
+            return <FreeType tag={tag} config={config} me={me} className={className}/>
+        }
+    }
+}
 export default class JRFrame extends JRSubmit {
     rid=random(99999,10000)
     mask=this.props.mask
@@ -74,19 +102,19 @@ export default class JRFrame extends JRSubmit {
         return <StyledJRFrame  id={this.props.id} style={this.props.style} 
             className={`jr-frame ${(this.props.popup!==true  )? this.props.className:''}`} 
         >
-            <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
+            <FreeTypeWithSlider  tag='div' config={this.props.start} me={this} className={'start'} dir={'left'}/>
             <main>
-                <FreeType tag='header' config={this.props.top} me={this}/>
+                <FreeTypeWithSlider  tag='header' config={this.props.top} me={this} className={'header'} dir={'top'}/>
                 <main>
-                    <FreeType tag='div' config={this.props.left} me={this} className={'left'}/>
+                    <FreeTypeWithSlider  tag='div' config={this.props.left} me={this} className={'left'} dir={'left'}/>
                     <main className={'body'}> 
                         {this.renderMe?.() ?? this.props.children}
                     </main>
-                    <FreeType tag='div' config={this.props.right} me={this} className={'right'}/>
+                    <FreeTypeWithSlider  tag='div' config={this.props.right} me={this} className={'right'} dir={'right'}/>
                 </main>
-                <FreeType tag='footer' config={this.props.bottom} me={this}/>
+                <FreeTypeWithSlider tag='footer' config={this.props.bottom} me={this} dir={'bottom'}/>
             </main>
-            <FreeType tag='div' config={this.props.end} me={this} className={'end'}/>
+            <FreeTypeWithSlider  tag='div' config={this.props.end} me={this} className={'end'} dir={'right'}/>
             {this.mask?.()}
         </StyledJRFrame>
     }

package/src/components/JRFrame/Slider.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import styled from "styled-components";
+import { po } from "../JRUtils";
+
+const StyledSlider=styled.div`
+    background:#2d2d2d;
+    flex-basis:11px;
+    user-select: none;
+    cursor: ${({$dir})=>$dir==='left'||$dir==='right'?'col-resize':'row-resize'} ;
+`
+export default class Slider extends React.Component {
+    ref=React.createRef()
+
+    resize={
+        left:({clientX})=>{
+            const ref=this.props.contenerRef.current
+            let width=clientX-this.frame.x-this.frame.shw
+            if(width<0)width=0
+            ref.style.flexBasis=`${width}px`
+        }
+        ,right:({clientX})=>{
+            const ref=this.props.contenerRef.current
+            let width=this.frame.x2-clientX-this.frame.shw
+            if(width<0)width=0
+            po('width',width)
+            ref.style.flexBasis=`${width}px`
+        }
+        ,top:({clientY})=>{
+            po('top')
+            const ref=this.props.contenerRef.current
+            let height=clientY-this.frame.y-this.frame.shh
+            po('height',height)
+            // if(width<0)width=0
+            ref.style.flexBasis=`${height}px`
+        }
+        ,bottom:({clientY})=>{
+            po('bottom')
+            const ref=this.props.contenerRef.current
+            let height=this.frame.w2-clientY-this.frame.shh
+            // clientY-this.frame.y-this.frame.shh
+            // po('height',height)
+            // // if(width<0)width=0
+            ref.style.flexBasis=`${height}px`
+        }
+    }
+    stop=(e)=>{
+        po('stop',this.stop)
+        document.body.style.cursor='default'
+        window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mouseup',this.stop)
+    }
+    move=(e)=>{
+        this.resize[this.props.dir](e)
+    }
+    start=({clientX})=>{
+        console.clear()
+        const ref=this.props.contenerRef.current
+        const {x,y,width,height,...other}=ref.getBoundingClientRect()
+        po('other',ref.getBoundingClientRect())
+        po('ref.getBoundingClientRect()',this.ref.current.getBoundingClientRect())
+        const {width:sw,height:sh}=this.ref.current.getBoundingClientRect()
+        this.frame={
+            x,y
+            ,shw:sw/2
+            ,shh:sh/2
+            ,x2:x+width
+            ,w2:y+height
+        }
+
+        document.body.style.cursor='col-resize'
+        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mouseup',this.stop)
+    }
+
+    render(){
+        return <StyledSlider onMouseDown={this.start} ref={this.ref} $dir={this.props.dir}>
+        </StyledSlider>
+    }
+}

package/src/components/JRInput/JRSelect.jsx

@@ -22,10 +22,12 @@ const StyledSelect=styled.select`
 export default class JRSelect extends JROptions{
     renderer(){
         const {showBlank,valueName='value',labelName='label',multiple,size}=this.props
+        const value=this.getValue()??(multiple?[]:'')
         const options=[...this.getOptions()??[]]
-        if(multiple!=true && showBlank!=false)options.unshift({[valueName]:'',[labelName]:''})
+        if(!multiple && (showBlank!=false || value==''))options.unshift({[valueName]:null,[labelName]:''})
+
         return <StyledSelect 
-            value={this.getValue()??(multiple?[]:'')}
+            value={value}
             className={'jr-select'}
             onChange={(e)=>{
                 if(multiple){
@@ -35,8 +37,9 @@ export default class JRSelect extends JROptions{
                         :null
                     )
                 }else{
+                    
                     const selectedIndex=e.target.selectedOptions[0].index
-                    this.setValue(selectedIndex?options[selectedIndex][valueName]:null)
+                    this.setValue(selectedIndex>-1 ?options[selectedIndex][valueName]:null)
                 }
             }}
             size={size}
@@ -49,8 +52,8 @@ export default class JRSelect extends JROptions{
                         ,key:key
                     }
                     if(
-                        (multiple && this.getValue()?.indexOf(record[valueName])>-1)
-                        || this.getValue()==record[valueName]
+                        (multiple && value?.indexOf(record[valueName])>-1)
+                        || value==record[valueName]
                     ){
                         props.className='selected'
                     }

package/src/components/JRTable/Slider.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 import styled from "styled-components"
+import { po } from "../JRUtils";
 
 const StyledSlider=styled.div`
     position: absolute;
@@ -23,12 +24,15 @@ export default class Slider extends React.Component {
     }
 
     stop=(e)=>{
+        po('stop',this)
         this.sliderRef.current.classList.remove('resizing');
         document.body.style.cursor='default'
         window.removeEventListener('mousemove',this.move)
+
         window.removeEventListener('mouseup',this.stop)
     }
     move=({clientX})=>{
+        po('move')
         const {th,selectedCols,widthRates}=this.data
         const {left}=th.getBoundingClientRect()
 
@@ -44,6 +48,7 @@ export default class Slider extends React.Component {
         })
     }
     start(thPRef,column){
+        po('start',this.start)
         const selectedCols=[...this.props.table.colGroupRef.current.children].slice(column.columnNo,column.columnNo+(column.colSpan??1))
         const totalWidth=selectedCols.reduce((aco,{offsetWidth})=>aco+offsetWidth,0)
         const widthRates=selectedCols.map(({offsetWidth})=>{
@@ -60,6 +65,8 @@ export default class Slider extends React.Component {
         document.body.style.cursor='col-resize'
         window.addEventListener('mousemove',this.move)
         window.addEventListener('mouseup',this.stop)
+
+        
             
     }
 

package/src/components/JRWindow/JRWindow.jsx

@@ -21,7 +21,7 @@ z-index:1;
 
     top: ${({$y})=>$y}px;
     left: ${({$x})=>$x}px;
-    width: ${({$width=300})=>`${$width}px`};
+    width: ${({$width=300})=>typeof $width === 'string'? '50%' : `${$width}px`};
     height: ${({$height=300})=>`${$height}px`};
     overflow: hidden;
 
@@ -120,21 +120,26 @@ export default class JRWindow extends JRFrame {
         }
     }
     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
+        po('window',window.innerWidth)
+        if(this.props.width?.indexOf?.('%')>-1){
+            this.width=(this.props.width.split('%')[0]*window.innerWidth)/100
+        }else{
+            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))/2)
+
+        if(this.props.height?.indexOf?.('%')>-1){
+            this.height=(this.props.height.split('%')[0]*window.innerHeight)/100
+        }else{
+            this.height=window.innerHeight>=(this.props.height??this.height)?(this.props.height??this.height):window.innerHeight
+        }
+        this.y=this.props.y??(window.innerHeight-(this.height))/2
     }
 
     renderer(){
         return this.props.popup===true
             ?this.props.open
                 ?<StyledJRWindow
-
-                // role="dialog"
-                // aria-labelledby="dialog1Title"
-                // aria-describedby="dialog1Desc"
-                
                     rule={'dialog'}
                     ref={this.ref}
                     className={`jr-window ${this.props.className??''}`}
@@ -151,17 +156,20 @@ export default class JRWindow extends JRFrame {
                             window={this}
                             title={this.props.title}
                             thick={this.thick} 
+                            resizable={this.props.resizable}
                         />
                         <main>
                             {super.renderer()}
                         </main>
                     </main>
-                    <Sliders 
-                        thick={this.thick} 
-                        windowRef={this.ref} 
-                        window={this} 
-                        titleBarRef={this.titleBarRef}
-                    />
+                    {this.props.resizable !== false
+                        && <Sliders 
+                            thick={this.thick} 
+                            windowRef={this.ref} 
+                            window={this} 
+                            titleBarRef={this.titleBarRef}
+                        />
+                    }
                 </StyledJRWindow>
                 :''
             :super.renderer()

package/src/components/JRWindow/TitleBar.jsx

@@ -2,10 +2,8 @@ import styled from "styled-components";
 import { po } from "../JRUtils";
 import React from "react";
 import { FreeType } from "../JRFrame/JRFrame";
-import { IconX,IconCard, IconSquare, IconMinus } from "../../assets/icon";
-import { background } from "storybook/internal/theming";
+import { IconX} from "../../assets/icon";
 import JRButton from "../JRInput/JRButton";
-import { browser } from "globals";
 
 const StyledTitle=styled.div`
     overflow: hidden;
@@ -137,7 +135,7 @@ export default class TitleBar extends React.Component{
             const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
             const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
 
-            if(y<1-this.props.thick)this.fullScreen(e)
+            if(y<1-this.props.thick && this.props.resizable!=false)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`
@@ -221,7 +219,7 @@ export default class TitleBar extends React.Component{
             onMouseDown={(e)=>{
                 this.start(e)
             }}
-            onDoubleClick={this.adjustScreen}
+            onDoubleClick={this.props.resizable!=false?this.adjustScreen:null}
         >
             <FreeType tag='div' config={this.props.title??''} me={this.props.window} className={'title'}/>
             <nav>